Color and fonts consistency

package-lock.json

@@ -17,8 +17,8 @@
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/jdd": "^0.6.6",
 				"@sealcode/jdd-editor": "^0.1.10",
-				"@sealcode/sealgen": "^0.17.15",
+				"@sealcode/sealgen": "^0.17.17",
-				"@sealcode/simplemde": "^1.12.0-beta12",
+				"@sealcode/simplemde": "^1.12.1",
 				"@sealcode/ts-predicates": "^0.6.2",
 				"@types/kill-port": "^2.0.0",
 				"@types/leaflet": "^1.9.8",
@@ -1003,9 +1003,9 @@
 			"integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg=="
 		},
 		"node_modules/@sealcode/sealgen": {
-			"version": "0.17.15",
+			"version": "0.17.17",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.15.tgz",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.17.tgz",
-			"integrity": "sha512-wwGbDEKDcjsOVwOvBOz0trChcrjTI4CoCqNd51TYpatsUQP0ZzO2PDhv/4MR8CPBnzfcvEL7uJRWGOEsa2GlPw==",
+			"integrity": "sha512-poG3b0SCk7rt5nNF8vWKS/JK+17WBw68hGd/b1KlO5t9vq45Xo0rFC4tHHX+AOoxeNDhZ48XbGDSsryxixvb4w==",
 			"dependencies": {
 				"@koa/router": "^12.0.1",
 				"@sealcode/file-manager": "^1.0.2",
@@ -1045,11 +1045,11 @@
 			"license": "ISC"
 		},
 		"node_modules/@sealcode/simplemde": {
-			"version": "1.12.0-beta12",
+			"version": "1.12.1",
-			"resolved": "https://registry.npmjs.org/@sealcode/simplemde/-/simplemde-1.12.0-beta12.tgz",
+			"resolved": "https://registry.npmjs.org/@sealcode/simplemde/-/simplemde-1.12.1.tgz",
-			"integrity": "sha512-P/5W+nJ/EAQJ5cFxEZHgfbl7X28D9Y1SGaSQ9hfp5MwAux2O2meQNC8obe/V2oH1tUR6fn9830wptbxIhSfmEQ==",
+			"integrity": "sha512-Blr1JKf903EXNuj1Dw8Lw0vjUfYY1vYcPrFixhnMDSY2x59R9mN9pnNf9p9qJLCN+kEWc+yXRc4p8ec50OPsSQ==",
 			"dependencies": {
-				"@sealcode/sealcodemirror": "^5.70.0-beta5",
+				"@sealcode/sealcodemirror": "^5.70.0-beta4",
 				"codemirror-spell-checker": "*",
 				"marked": "*",
 				"turndown": "^7.2.0",

package.json

@@ -82,8 +82,8 @@
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/jdd": "^0.6.6",
 		"@sealcode/jdd-editor": "^0.1.10",
-		"@sealcode/sealgen": "^0.17.15",
+		"@sealcode/sealgen": "^0.17.17",
-		"@sealcode/simplemde": "^1.12.0-beta12",
+		"@sealcode/simplemde": "^1.12.1",
 		"@sealcode/ts-predicates": "^0.6.2",
 		"@types/kill-port": "^2.0.0",
 		"@types/leaflet": "^1.9.8",

src/back/colors.ts

@@ -7,13 +7,13 @@ export const colors: Record<string, Record<string, string>> = {
 		purple: "#B10DC9",
 		fuchsia: "#F012BE",
 		maroon: "#85144b",
-		red: "#fb2e38",
+		red: "#ff4136",
 		orange: "#ff851b",
 		yellow: "#ffdc00",
 		olive: "#3d9970",
-		green: "#58fe54",
+		green: "#2ecc40",
 		lime: "#01ff70",
-		black: "#1a1a1a",
+		black: "#111111",
 		gray: "#aaaaaa",
 	},
 };
@@ -31,15 +31,18 @@ colors.brand = {};
 // "text-accent2"     is same as above, but based on the second accent color
 // "text-on-accent"   - what color text should be when put on a background colored with accent color
 // "text-on-accent2"  - what color text should be when put on a background colored with accent2 color
-colors.brand["canvas"] = "#000";
+colors.brand["canvas"] = "#fff";
-colors.brand["text-bg"] = colors.basic!.black!;
+colors.brand["text-bg"] = "#f6f6f6";
-colors.brand["text-fg"] = "#fff";
+colors.brand["text-fg"] = colors.basic!.black!;
-colors.brand["accent"] = colors.basic!.red!;
+colors.brand["accent"] = "#5294A1";
-colors.brand["accent2"] = "#000";
+colors.brand["accent2"] = "#65397C";
+colors.brand["link-fg"] = colors.brand.accent!;
 colors.brand["text-accent"] = colors.brand.accent!;
-colors.brand["text-accent2"] = colors.basic!.green!;
+colors.brand["text-accent2"] = colors.brand["accent2"]!;
 colors.brand["text-on-accent"] = "#fff";
-colors.brand["text-on-accent2"] = colors.basic!.green!;
+colors.brand["text-on-accent2"] = "#fff";
+colors.brand["link-on-accent"] = "#fff";
+colors.brand["link-on-accent2"] = colors.basic!.white!;
 
 // configure hue variance across the shades of the same main color.
 const hue_step = -4;

src/back/global_styles/vars.css

@@ -47,6 +47,7 @@
 		Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
 		Segoe UI Symbol;
 	--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+	--font-industrial: Anton;
 
 	--font-headings: var(--font-sans-serif);
 	--font-short-text: var(--font-sans-serif);

src/back/jdd-components/faq-component/faq-component.css

@@ -20,16 +20,34 @@
 		line-height: 38.3px;
 	}
 
-	.title-container .content p {
+	.title-container {
-		display: inline;
+		.content {
-		font-size: 16px;
+			p {
-		color: var(--color-brand-text-accent);
+				display: inline;
-		line-height: 24px;
+				font-size: 16px;
+				line-height: 24px;
+			}
+
+			&.color-normal p {
+				color: var(--color-brand-text-fg);
+
+				a {
+					color: var(--color-brand-link-fg);
+				}
+			}
+
+			&.color-accent p {
+				color: var(--color-brand-text-accent);
+
+				a {
+					color: var(--color-brand-link-on-accent);
+				}
+			}
+		}
 	}
 
 	.title-container strong {
 		white-space: nowrap;
-		color: var(--color-brand-text-accent);
 		font-weight: bold;
 	}
 
@@ -40,11 +58,20 @@
 
 	.question-container {
 		display: grid;
-		background-color: var(--color-brand-accent);
 		border-radius: 10px;
 		padding: 0 16px;
 		/* padding: 16px; */
 		gap: 16px;
+
+		&.question-container--accent {
+			background-color: var(--color-brand-accent);
+			color: var(--color-brand-text-on-accent);
+		}
+
+		&.question-container--accent2 {
+			background-color: var(--color-brand-accent2);
+			color: var(--color-brand-text-on-accent2);
+		}
 	}
 
 	.question {
@@ -54,7 +81,6 @@
 		font-size: 16px;
 		font-weight: bold;
 		cursor: pointer;
-		color: var(--color-brand-text-on-accent);
 		align-items: center;
 		padding: 16px 0;
 		line-height: 24px;
@@ -74,7 +100,6 @@
 
 	.answer {
 		font-size: 16px;
-		color: var(--color-brand-text-on-accent);
 		line-height: 24px;
 	}
 

src/back/jdd-components/faq-component/faq-component.jdd.tsx

@@ -7,14 +7,16 @@ const component_arguments = {
 	title: new ComponentArguments.ShortText(),
 	content: new ComponentArguments.Structured({
 		text: new ComponentArguments.Markdown(),
-		number: new ComponentArguments.ShortText().setExampleValues(["000-000-000"]),
+		color: new ComponentArguments.Enum(["normal", "accent"]),
 	}),
+	accordion_color: new ComponentArguments.Enum(["accent", "accent2"]),
 	faq: new ComponentArguments.List(
 		new ComponentArguments.Structured({
 			question: new ComponentArguments.ShortText(),
 			answer: new ComponentArguments.Markdown(),
 		})
 	),
+
 	button: new ComponentArguments.Structured({
 		buttonText: new ComponentArguments.ShortText().setExampleValues([""]),
 		buttonLink: new ComponentArguments.ShortText().setExampleValues([""]),
@@ -27,7 +29,7 @@ export class FaqComponent extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { title, content, faq, button },
+		args: { title, content, faq, button, accordion_color },
 		jdd_context: { render_markdown, language },
 	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
 		const buttonText = button.buttonText.toUpperCase();
@@ -37,15 +39,20 @@ export class FaqComponent extends Component<typeof component_arguments> {
 				<div class="container">
 					<div class="title-container">
 						<div class="title">{title} </div>
-						<div class="content">
+						<div class={["content", `color-${content.color}`]}>
 							{render_markdown(language, content.text)}{" "}
-							<strong>{content.number}</strong>
 						</div>
 					</div>
 					<div>
 						<div class="faq-container">
 							{faq.map((element, index) => (
-								<details class="question-container" open={index == 0}>
+								<details
+									class={[
+										"question-container",
+										`question-container--${accordion_color}`,
+									]}
+									open={index == 0}
+								>
 									<summary class="question">{element.question}</summary>
 									<div class="answer">
 										<p>{render_markdown(language, element.answer)}</p>

src/back/jdd-components/horizontal-gallery/horizontal-gallery.css

@@ -9,8 +9,7 @@
 		h2 {
 			font-size: 32px;
 			line-height: 48px;
-			font-family: Exotc350DmBdEU, sans-serif;
+			font-family: var(--font-headings);
-			text-transform: uppercase;
 			text-align: center;
 			color: var(--color-brand-text-accent);
 			flex-grow: 1;

src/back/jdd-components/map-with-pins/map-with-pins.css

@@ -4,10 +4,9 @@
 	.popup {
 		.leaflet-popup-content-wrapper,
 		.leaflet-popup-tip {
-			background: var(--color-brand-accent);
-			color: var(--color-brand-text-on-accent);
 			text-align: center;
 		}
+
 		.leaflet-popup-content {
 			margin: 0;
 		}
@@ -16,6 +15,34 @@
 		}
 	}
 
+	&.map-with-pins--theme-accent {
+		.leaflet-popup-content-wrapper,
+		.leaflet-popup-tip {
+			background-color: var(--color-brand-accent);
+			color: var(--color-brand-text-on-accent);
+		}
+		.button {
+			background-color: var(--color-brand-accent);
+			color: var(--color-brand-text-on-accent);
+			border: 1px solid var(--color-brand-text-on-accent);
+			color: var(--color-brand-text-on-accent);
+		}
+	}
+	&.map-with-pins--theme-accent2 {
+		.leaflet-popup-content-wrapper,
+		.leaflet-popup-tip {
+			background-color: var(--color-brand-accent2);
+			color: var(--color-brand-text-on-accent2);
+		}
+
+		.button {
+			background-color: var(--color-brand-accent2);
+			color: var(--color-brand-text-on-accent2);
+			border: 1px solid var(--color-brand-text-on-accent2);
+			color: var(--color-brand-text-on-accent2);
+		}
+	}
+
 	.title,
 	.address {
 		margin: 0 0 8px 0;
@@ -40,11 +67,9 @@
 		border-radius: 25px;
 		text-transform: uppercase;
 		padding: 4px 25px;
-		border: 1px solid var(--color-brand-text-on-accent2);
+
-		color: var(--color-brand-text-on-accent2);
 		min-width: 170px;
 		line-height: 18px;
 		font-size: 12px;
-		background-color: var(--color-brand-accent--secondary);
 	}
 }

src/back/jdd-components/map-with-pins/map-with-pins.jdd.tsx

@@ -3,6 +3,7 @@ import type { ComponentToHTMLArgs } from "@sealcode/jdd";
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
+	theme: new ComponentArguments.Enum(["accent", "accent2"]),
 	pins: new ComponentArguments.List(
 		new ComponentArguments.Structured({
 			title: new ComponentArguments.ShortText(),
@@ -42,13 +43,17 @@ export class MapWithPins extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { pins },
+		args: { theme, pins },
 		classes,
 		index,
 	}: ComponentToHTMLArgs<typeof component_arguments>) {
 		return (
 			<div
-				class={["map-with-pins bleed-out", ...classes]}
+				class={[
+					"map-with-pins bleed-out",
+					`map-with-pins--theme-${theme}`,
+					...classes,
+				]}
 				style={`--jdd-index: ${index}`}
 				data-controller="map-with-pins"
 				data-map-with-pins-pins-value={JSON.stringify(pins)

src/back/jdd-components/nice-box/nice-box.css

@@ -1,3 +0,0 @@
-.nice-box {
-	background-color: white;
-}

src/back/jdd-components/nice-box/nice-box.jdd.tsx

@@ -1,55 +0,0 @@
-import { TempstreamJSX } from "tempstream";
-import type {
-	ComponentToHTMLArgs,
-	ExtractStructuredComponentArgumentsParsed,
-	JDDContext,
-} from "@sealcode/jdd";
-import { Component, ComponentArguments } from "@sealcode/jdd";
-
-const component_arguments = {
-	title: new ComponentArguments.ShortText(),
-	content: new ComponentArguments.Markdown(),
-	images: new ComponentArguments.List(
-		new ComponentArguments.Structured({
-			image: new ComponentArguments.Image(),
-			alt: new ComponentArguments.ShortText(),
-		})
-	),
-} as const;
-
-export class NiceBox extends Component<typeof component_arguments> {
-	getArguments() {
-		return component_arguments;
-	}
-
-	getTitle(
-		_: JDDContext,
-		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
-	) {
-		return args.title || null;
-	}
-
-	async toHTML({
-		args: { title, content, images },
-		classes,
-		jdd_context: { render_markdown, render_image, language },
-		index,
-	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
-		return (
-			<div class={["nice-box", ...classes]} style={`--jdd-index: ${index}`}>
-				<h2>{title}</h2>
-				<div>{render_markdown(language, content)}</div>
-				{images.map((image) =>
-					render_image(image.image, {
-						container: {
-							width: 200,
-							height: 200,
-							objectFit: "contain",
-						},
-						alt: image?.alt || "",
-					})
-				)}
-			</div>
-		);
-	}
-}

src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css

@@ -73,14 +73,14 @@
 	grid-row: 1;
 	font-size: 1rem;
 	line-height: 1.25rem;
-	font-family: var(--font-slab-serif);
+	font-family: var(--font-headings);
 	font-weight: 400;
 	align-self: center;
 }
 
 .pictogram-tiles__lowerSection p {
 	grid-row: 2;
-	font-family: var(--font-sans-serif);
+	font-family: var(--font-short-text);
 	color: var(--dove-gray);
 }
 

src/colors.css

@@ -1,6 +1,6 @@
 /* DO NOT EDIT! This file is automatically generated by sealgen */
 :root {
-	--color-brand-canvas: #000;
+	--color-brand-canvas: #fff;
 	--color-brand-canvas-00: #000000;
 	--color-brand-canvas-01: #1a1a1a;
 	--color-brand-canvas-02: #333333;
@@ -11,72 +11,83 @@
 	--color-brand-canvas-07: #b3b3b3;
 	--color-brand-canvas-08: #cccccc;
 	--color-brand-canvas-09: #e6e6e6;
-	--color-brand-text-bg: #1a1a1a;
+	--color-brand-text-bg: #f6f6f6;
-	--color-brand-text-bg-00: #000000;
+	--color-brand-text-bg-00: #0f0f0f;
-	--color-brand-text-bg-01: #1a1a1a;
+	--color-brand-text-bg-01: #292929;
-	--color-brand-text-bg-02: #333333;
+	--color-brand-text-bg-02: #424242;
-	--color-brand-text-bg-03: #4d4d4d;
+	--color-brand-text-bg-03: #5c5c5c;
-	--color-brand-text-bg-04: #666666;
+	--color-brand-text-bg-04: #757575;
-	--color-brand-text-bg-05: #808080;
+	--color-brand-text-bg-05: #8f8f8f;
-	--color-brand-text-bg-06: #999999;
+	--color-brand-text-bg-06: #a8a8a8;
-	--color-brand-text-bg-07: #b3b3b3;
+	--color-brand-text-bg-07: #c2c2c2;
-	--color-brand-text-bg-08: #cccccc;
+	--color-brand-text-bg-08: #dbdbdb;
-	--color-brand-text-bg-09: #e6e6e6;
+	--color-brand-text-bg-09: #f5f5f5;
-	--color-brand-text-fg: #fff;
+	--color-brand-text-fg: #111111;
-	--color-brand-text-fg-00: #000000;
+	--color-brand-text-fg-00: #121212;
-	--color-brand-text-fg-01: #1a1a1a;
+	--color-brand-text-fg-01: #2b2b2b;
-	--color-brand-text-fg-02: #333333;
+	--color-brand-text-fg-02: #454545;
-	--color-brand-text-fg-03: #4d4d4d;
+	--color-brand-text-fg-03: #5e5e5e;
-	--color-brand-text-fg-04: #666666;
+	--color-brand-text-fg-04: #787878;
-	--color-brand-text-fg-05: #808080;
+	--color-brand-text-fg-05: #919191;
-	--color-brand-text-fg-06: #999999;
+	--color-brand-text-fg-06: #ababab;
-	--color-brand-text-fg-07: #b3b3b3;
+	--color-brand-text-fg-07: #c4c4c4;
-	--color-brand-text-fg-08: #cccccc;
+	--color-brand-text-fg-08: #dedede;
-	--color-brand-text-fg-09: #e6e6e6;
+	--color-brand-text-fg-09: #f7f7f7;
-	--color-brand-accent: #fb2e38;
+	--color-brand-accent: #5294a1;
-	--color-brand-accent-00: #290e00;
+	--color-brand-accent-00: #0b141e;
-	--color-brand-accent-01: #5c1a00;
+	--color-brand-accent-01: #193143;
-	--color-brand-accent-02: #8f1f00;
+	--color-brand-accent-02: #294f65;
-	--color-brand-accent-03: #c21d00;
+	--color-brand-accent-03: #3b7087;
-	--color-brand-accent-04: #f51400;
+	--color-brand-accent-04: #4e92a6;
-	--color-brand-accent-05: #fe2d2a;
+	--color-brand-accent-05: #71abb7;
-	--color-brand-accent-06: #fc5f67;
+	--color-brand-accent-06: #95c1c6;
-	--color-brand-accent-07: #fb939f;
+	--color-brand-accent-07: #b8d5d6;
-	--color-brand-accent-08: #fcc5cf;
+	--color-brand-accent-08: #d9e8e7;
-	--color-brand-accent-09: #fef5f8;
+	--color-brand-accent-09: #f9fbfb;
-	--color-brand-accent2: #000;
+	--color-brand-accent2: #65397c;
-	--color-brand-accent2-00: #000000;
+	--color-brand-accent2-00: #110713;
-	--color-brand-accent2-01: #1a1a1a;
+	--color-brand-accent2-01: #301637;
-	--color-brand-accent2-02: #333333;
+	--color-brand-accent2-02: #4b2659;
-	--color-brand-accent2-03: #4d4d4d;
+	--color-brand-accent2-03: #63387a;
-	--color-brand-accent2-04: #666666;
+	--color-brand-accent2-04: #794c9a;
-	--color-brand-accent2-05: #808080;
+	--color-brand-accent2-05: #8d69b0;
-	--color-brand-accent2-06: #999999;
+	--color-brand-accent2-06: #a38dbf;
-	--color-brand-accent2-07: #b3b3b3;
+	--color-brand-accent2-07: #bcafcf;
-	--color-brand-accent2-08: #cccccc;
+	--color-brand-accent2-08: #d6d0e1;
-	--color-brand-accent2-09: #e6e6e6;
+	--color-brand-accent2-09: #f1f0f5;
-	--color-brand-text-accent: #fb2e38;
+	--color-brand-link-fg: #5294a1;
-	--color-brand-text-accent-00: #290e00;
+	--color-brand-link-fg-00: #0b141e;
-	--color-brand-text-accent-01: #5c1a00;
+	--color-brand-link-fg-01: #193143;
-	--color-brand-text-accent-02: #8f1f00;
+	--color-brand-link-fg-02: #294f65;
-	--color-brand-text-accent-03: #c21d00;
+	--color-brand-link-fg-03: #3b7087;
-	--color-brand-text-accent-04: #f51400;
+	--color-brand-link-fg-04: #4e92a6;
-	--color-brand-text-accent-05: #fe2d2a;
+	--color-brand-link-fg-05: #71abb7;
-	--color-brand-text-accent-06: #fc5f67;
+	--color-brand-link-fg-06: #95c1c6;
-	--color-brand-text-accent-07: #fb939f;
+	--color-brand-link-fg-07: #b8d5d6;
-	--color-brand-text-accent-08: #fcc5cf;
+	--color-brand-link-fg-08: #d9e8e7;
-	--color-brand-text-accent-09: #fef5f8;
+	--color-brand-link-fg-09: #f9fbfb;
-	--color-brand-text-accent2: #58fe54;
+	--color-brand-text-accent: #5294a1;
-	--color-brand-text-accent2-00: #001f0e;
+	--color-brand-text-accent-00: #0b141e;
-	--color-brand-text-accent2-01: #00521f;
+	--color-brand-text-accent-01: #193143;
-	--color-brand-text-accent2-02: #00852a;
+	--color-brand-text-accent-02: #294f65;
-	--color-brand-text-accent2-03: #00b82e;
+	--color-brand-text-accent-03: #3b7087;
-	--color-brand-text-accent2-04: #00eb2b;
+	--color-brand-text-accent-04: #4e92a6;
-	--color-brand-text-accent2-05: #1fff39;
+	--color-brand-text-accent-05: #71abb7;
-	--color-brand-text-accent2-06: #52ff5a;
+	--color-brand-text-accent-06: #95c1c6;
-	--color-brand-text-accent2-07: #87fe85;
+	--color-brand-text-accent-07: #b8d5d6;
-	--color-brand-text-accent2-08: #bffeb9;
+	--color-brand-text-accent-08: #d9e8e7;
-	--color-brand-text-accent2-09: #eefeeb;
+	--color-brand-text-accent-09: #f9fbfb;
+	--color-brand-text-accent2: #65397c;
+	--color-brand-text-accent2-00: #110713;
+	--color-brand-text-accent2-01: #301637;
+	--color-brand-text-accent2-02: #4b2659;
+	--color-brand-text-accent2-03: #63387a;
+	--color-brand-text-accent2-04: #794c9a;
+	--color-brand-text-accent2-05: #8d69b0;
+	--color-brand-text-accent2-06: #a38dbf;
+	--color-brand-text-accent2-07: #bcafcf;
+	--color-brand-text-accent2-08: #d6d0e1;
+	--color-brand-text-accent2-09: #f1f0f5;
 	--color-brand-text-on-accent: #fff;
 	--color-brand-text-on-accent-00: #000000;
 	--color-brand-text-on-accent-01: #1a1a1a;
@@ -88,17 +99,39 @@
 	--color-brand-text-on-accent-07: #b3b3b3;
 	--color-brand-text-on-accent-08: #cccccc;
 	--color-brand-text-on-accent-09: #e6e6e6;
-	--color-brand-text-on-accent2: #58fe54;
+	--color-brand-text-on-accent2: #fff;
-	--color-brand-text-on-accent2-00: #001f0e;
+	--color-brand-text-on-accent2-00: #000000;
-	--color-brand-text-on-accent2-01: #00521f;
+	--color-brand-text-on-accent2-01: #1a1a1a;
-	--color-brand-text-on-accent2-02: #00852a;
+	--color-brand-text-on-accent2-02: #333333;
-	--color-brand-text-on-accent2-03: #00b82e;
+	--color-brand-text-on-accent2-03: #4d4d4d;
-	--color-brand-text-on-accent2-04: #00eb2b;
+	--color-brand-text-on-accent2-04: #666666;
-	--color-brand-text-on-accent2-05: #1fff39;
+	--color-brand-text-on-accent2-05: #808080;
-	--color-brand-text-on-accent2-06: #52ff5a;
+	--color-brand-text-on-accent2-06: #999999;
-	--color-brand-text-on-accent2-07: #87fe85;
+	--color-brand-text-on-accent2-07: #b3b3b3;
-	--color-brand-text-on-accent2-08: #bffeb9;
+	--color-brand-text-on-accent2-08: #cccccc;
-	--color-brand-text-on-accent2-09: #eefeeb;
+	--color-brand-text-on-accent2-09: #e6e6e6;
+	--color-brand-link-on-accent: #fff;
+	--color-brand-link-on-accent-00: #000000;
+	--color-brand-link-on-accent-01: #1a1a1a;
+	--color-brand-link-on-accent-02: #333333;
+	--color-brand-link-on-accent-03: #4d4d4d;
+	--color-brand-link-on-accent-04: #666666;
+	--color-brand-link-on-accent-05: #808080;
+	--color-brand-link-on-accent-06: #999999;
+	--color-brand-link-on-accent-07: #b3b3b3;
+	--color-brand-link-on-accent-08: #cccccc;
+	--color-brand-link-on-accent-09: #e6e6e6;
+	--color-brand-link-on-accent2: undefined;
+	--color-brand-link-on-accent2-00: #000000;
+	--color-brand-link-on-accent2-01: #1a1a1a;
+	--color-brand-link-on-accent2-02: #333333;
+	--color-brand-link-on-accent2-03: #4d4d4d;
+	--color-brand-link-on-accent2-04: #666666;
+	--color-brand-link-on-accent2-05: #808080;
+	--color-brand-link-on-accent2-06: #999999;
+	--color-brand-link-on-accent2-07: #b3b3b3;
+	--color-brand-link-on-accent2-08: #cccccc;
+	--color-brand-link-on-accent2-09: #e6e6e6;
 	--color-basic-blue: #0074d9;
 	--color-basic-blue-00: #00040f;
 	--color-basic-blue-01: #001642;
@@ -154,17 +187,17 @@
 	--color-basic-maroon-07: #e283ca;
 	--color-basic-maroon-08: #eaaedf;
 	--color-basic-maroon-09: #f4d7f0;
-	--color-basic-red: #fb2e38;
+	--color-basic-red: #ff4136;
-	--color-basic-red-00: #290e00;
+	--color-basic-red-00: #050200;
-	--color-basic-red-01: #5c1a00;
+	--color-basic-red-01: #381600;
-	--color-basic-red-02: #8f1f00;
+	--color-basic-red-02: #6b2200;
-	--color-basic-red-03: #c21d00;
+	--color-basic-red-03: #9e2800;
-	--color-basic-red-04: #f51400;
+	--color-basic-red-04: #d12600;
-	--color-basic-red-05: #fe2d2a;
+	--color-basic-red-05: #ff2205;
-	--color-basic-red-06: #fc5f67;
+	--color-basic-red-06: #ff4238;
-	--color-basic-red-07: #fb939f;
+	--color-basic-red-07: #fd6d70;
-	--color-basic-red-08: #fcc5cf;
+	--color-basic-red-08: #fca1a9;
-	--color-basic-red-09: #fef5f8;
+	--color-basic-red-09: #fdd3d9;
 	--color-basic-orange: #ff851b;
 	--color-basic-orange-00: #1a1400;
 	--color-basic-orange-01: #4d3800;
@@ -198,17 +231,17 @@
 	--color-basic-olive-07: #9fd0b0;
 	--color-basic-olive-08: #c3dfcb;
 	--color-basic-olive-09: #e5f0e7;
-	--color-basic-green: #58fe54;
+	--color-basic-green: #2ecc40;
-	--color-basic-green-00: #001f0e;
+	--color-basic-green-00: #052915;
-	--color-basic-green-01: #00521f;
+	--color-basic-green-01: #0c5528;
-	--color-basic-green-02: #00852a;
+	--color-basic-green-02: #157f36;
-	--color-basic-green-03: #00b82e;
+	--color-basic-green-03: #1fa841;
-	--color-basic-green-04: #00eb2b;
+	--color-basic-green-04: #2acf49;
-	--color-basic-green-05: #1fff39;
+	--color-basic-green-05: #55d864;
-	--color-basic-green-06: #52ff5a;
+	--color-basic-green-06: #81df85;
-	--color-basic-green-07: #87fe85;
+	--color-basic-green-07: #ace8ab;
-	--color-basic-green-08: #bffeb9;
+	--color-basic-green-08: #d6f2d4;
-	--color-basic-green-09: #eefeeb;
+	--color-basic-green-09: #fcfefb;
 	--color-basic-lime: #01ff70;
 	--color-basic-lime-00: #000000;
 	--color-basic-lime-01: #003324;
@@ -220,17 +253,17 @@
 	--color-basic-lime-07: #6bfa96;
 	--color-basic-lime-08: #9efab3;
 	--color-basic-lime-09: #cffcd7;
-	--color-basic-black: #1a1a1a;
+	--color-basic-black: #111111;
-	--color-basic-black-00: #000000;
+	--color-basic-black-00: #121212;
-	--color-basic-black-01: #1a1a1a;
+	--color-basic-black-01: #2b2b2b;
-	--color-basic-black-02: #333333;
+	--color-basic-black-02: #454545;
-	--color-basic-black-03: #4d4d4d;
+	--color-basic-black-03: #5e5e5e;
-	--color-basic-black-04: #666666;
+	--color-basic-black-04: #787878;
-	--color-basic-black-05: #808080;
+	--color-basic-black-05: #919191;
-	--color-basic-black-06: #999999;
+	--color-basic-black-06: #ababab;
-	--color-basic-black-07: #b3b3b3;
+	--color-basic-black-07: #c4c4c4;
-	--color-basic-black-08: #cccccc;
+	--color-basic-black-08: #dedede;
-	--color-basic-black-09: #e6e6e6;
+	--color-basic-black-09: #f7f7f7;
 	--color-basic-gray: #aaaaaa;
 	--color-basic-gray-00: #121212;
 	--color-basic-gray-01: #2b2b2b;

src/fonts.json

@@ -3,7 +3,8 @@
 		"families": {
 			"Ubuntu": true,
 			"Libre Baskerville": true,
-			"Ubuntu Mono": true
+			"Ubuntu Mono": true,
+			"Anton": true
 		}
 	}
 }