More consistent colors using the new palettes. Fix some bugs.
This commit is contained in:
parent
980f88cf81
commit
baf722eaea
48
package-lock.json
generated
48
package-lock.json
generated
@ -12,11 +12,12 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@hotwired/turbo": "^8.0.2",
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/add-to-head": "^1.0.0",
|
||||
"@sealcode/crud-ui": "^0.0.17",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.6.6",
|
||||
"@sealcode/jdd-editor": "^0.1.6",
|
||||
"@sealcode/sealgen": "^0.17.8",
|
||||
"@sealcode/jdd-editor": "^0.1.9",
|
||||
"@sealcode/sealgen": "^0.17.15",
|
||||
"@sealcode/simplemde": "^1.12.0-beta12",
|
||||
"@sealcode/ts-predicates": "^0.6.2",
|
||||
"@types/kill-port": "^2.0.0",
|
||||
@ -882,6 +883,12 @@
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@sealcode/add-to-head": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/add-to-head/-/add-to-head-1.0.0.tgz",
|
||||
"integrity": "sha512-9nbTXTsD5ndTjMFy1QtFBmItv4rgiYpfFK/5jFNipFcdoQm/mesVpWwsv4t2R6iXlBx58Hr185KlaJTstyd/0A==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/@sealcode/ansi-html-stream": {
|
||||
"version": "1.0.3",
|
||||
"dev": true,
|
||||
@ -954,9 +961,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@sealcode/jdd-editor": {
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.1.6.tgz",
|
||||
"integrity": "sha512-JagBzbhXYK6yrGArud9Z40j2AReQYYLv4yq/aRsr2cR7hvvDR4o5jt91ymodVkWmlzLn7haeOXCql8Kl9Qul3A==",
|
||||
"version": "0.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.1.9.tgz",
|
||||
"integrity": "sha512-qK4ZFrx4SQppZ5Ba3us3r4Sz3boL9EnYLDjjCc4SIL1pKpIiMJ7YsyLhUGDT3APFVK3F/jZ7NodgTTZEiBmcgQ==",
|
||||
"dependencies": {
|
||||
"@koa/router": "^13.1.0",
|
||||
"@sealcode/jdd": "^0.6.5",
|
||||
@ -996,26 +1003,29 @@
|
||||
"integrity": "sha512-pDsGlk2KokQkwzsJDBUWJFDRpEoxxth6TMQGDJyCTmWnd1Vn+cQb5moXDKaf7cXnWb9Y6QtdNX/fPzM/3RH2Cg=="
|
||||
},
|
||||
"node_modules/@sealcode/sealgen": {
|
||||
"version": "0.17.8",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.8.tgz",
|
||||
"integrity": "sha512-bkaSuvmUO7H0nf4xXHCJc5fND/10hL7jaSK9KRJfA8Sx1TNNhTqKVukIlIaWqxWxg/NcjtN2babDHToZX8Lv+g==",
|
||||
"version": "0.17.15",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.17.15.tgz",
|
||||
"integrity": "sha512-wwGbDEKDcjsOVwOvBOz0trChcrjTI4CoCqNd51TYpatsUQP0ZzO2PDhv/4MR8CPBnzfcvEL7uJRWGOEsa2GlPw==",
|
||||
"dependencies": {
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/ts-predicates": "^0.4.3",
|
||||
"chokidar": "^3.6.0",
|
||||
"colord": "^2.9.3",
|
||||
"deepmerge": "^4.3.1",
|
||||
"esbuild": "^0.20.0",
|
||||
"escape-goat": "^4.0.0",
|
||||
"google-fonts-helper": "^3.4.1",
|
||||
"is-what": "^4.1.16",
|
||||
"js-convert-case": "^4.2.0",
|
||||
"json5": "^2.2.3",
|
||||
"locreq": "^3.0.0",
|
||||
"md5": "^2.3.0",
|
||||
"merge": "^2.1.1",
|
||||
"prettier": "^2.7.1",
|
||||
"prompts": "^2.4.2",
|
||||
"recursive-readdir": "^2.2.3",
|
||||
"tempfile": "^5.0.0",
|
||||
"tempstream": "^0.4.4",
|
||||
"tiny-glob": "^0.2.9",
|
||||
"ws": "^8.16.0",
|
||||
@ -10398,6 +10408,28 @@
|
||||
"streamx": "^2.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/temp-dir": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz",
|
||||
"integrity": "sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==",
|
||||
"engines": {
|
||||
"node": ">=14.16"
|
||||
}
|
||||
},
|
||||
"node_modules/tempfile": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tempfile/-/tempfile-5.0.0.tgz",
|
||||
"integrity": "sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==",
|
||||
"dependencies": {
|
||||
"temp-dir": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/tempstream": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/tempstream/-/tempstream-0.4.5.tgz",
|
||||
|
||||
@ -77,11 +77,12 @@
|
||||
"@babel/core": "^7.12.10",
|
||||
"@hotwired/turbo": "^8.0.2",
|
||||
"@koa/router": "^12.0.1",
|
||||
"@sealcode/add-to-head": "^1.0.0",
|
||||
"@sealcode/crud-ui": "^0.0.17",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.6.6",
|
||||
"@sealcode/jdd-editor": "^0.1.6",
|
||||
"@sealcode/sealgen": "^0.17.8",
|
||||
"@sealcode/jdd-editor": "^0.1.9",
|
||||
"@sealcode/sealgen": "^0.17.15",
|
||||
"@sealcode/simplemde": "^1.12.0-beta12",
|
||||
"@sealcode/ts-predicates": "^0.6.2",
|
||||
"@types/kill-port": "^2.0.0",
|
||||
|
||||
@ -2,9 +2,7 @@ import { colord } from "colord";
|
||||
|
||||
export const colors: Record<string, Record<string, string>> = {
|
||||
basic: {
|
||||
navy: "#001f3f",
|
||||
blue: "#0074D9",
|
||||
aqua: "#7FDBFF",
|
||||
teal: "#39CCCC",
|
||||
purple: "#B10DC9",
|
||||
fuchsia: "#F012BE",
|
||||
@ -17,38 +15,53 @@ export const colors: Record<string, Record<string, string>> = {
|
||||
lime: "#01ff70",
|
||||
black: "#111111",
|
||||
gray: "#aaaaaa",
|
||||
silver: "#dddddd",
|
||||
white: "#ffffff",
|
||||
},
|
||||
};
|
||||
|
||||
colors.brand = {};
|
||||
|
||||
colors.brand["text-bg"] = colors.basic!.white!;
|
||||
// "canvas" is the main background of the entire page
|
||||
// "text-bg" is text background for longer paragraphs:
|
||||
// "text-fg" is text color for longer paragraphs. Usually paired with text-bg
|
||||
// "accent" is an accent color used for buttons, icons etc
|
||||
// "accent2" is an alternative accent color, used on secondary elements
|
||||
// "text-accent" describes what color should the text be when accenting it with color.
|
||||
// Usually the same as the `accent` color, but you might choose a different
|
||||
// shade so it looks better on `text-bg`.
|
||||
// "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"] = "#fff";
|
||||
colors.brand["text-bg"] = "#f6f6f6";
|
||||
colors.brand["text-fg"] = colors.basic!.black!;
|
||||
colors.brand["accent"] = colors.basic!.blue!;
|
||||
colors.brand["accent"] = "#5294A1";
|
||||
colors.brand["accent2"] = "#65397C";
|
||||
colors.brand["text-accent"] = colors.brand.accent!;
|
||||
colors.brand["text-accent2"] = colors.brand["accent2"]!;
|
||||
colors.brand["text-on-accent"] = "#fff";
|
||||
colors.brand["text-on-accent2"] = "#fff";
|
||||
|
||||
const shade_step = 0.1;
|
||||
const hue_step = -3;
|
||||
const saturation_step = 0.05;
|
||||
// configure hue variance across the shades of the same main color.
|
||||
const hue_step = -4;
|
||||
|
||||
for (const [group_name, group] of Object.entries(colors)) {
|
||||
for (const [color_name, color] of Object.entries(group)) {
|
||||
for (const shade_variant of ["light", "dark"]) {
|
||||
for (let i = 1; i <= 8; i++) {
|
||||
let shifted = colord(color)
|
||||
.darken((shade_variant == "dark" ? 1 : -1) * i * shade_step)
|
||||
.rotate((shade_variant == "dark" ? 1 : -1) * i * hue_step);
|
||||
// configure saturation variance across the shades of the same main color. If positive,
|
||||
// lighter colors will gave more saturation. If negative, darker colors will be more
|
||||
// saturated
|
||||
const saturation_step = -0.03;
|
||||
|
||||
// this function is used by sealgen to generate up to 10 shades for each color.
|
||||
export function shade(color: string, shade_step: number /* 0-9 */) {
|
||||
const hsl = colord(color).toHsl();
|
||||
const lightness_offset = hsl.l % 10;
|
||||
const new_l = shade_step * 10 + lightness_offset;
|
||||
const new_color = { ...hsl, l: new_l };
|
||||
const steps = Math.round((shade_step * 10 - hsl.l) / 10);
|
||||
let shifted = colord(new_color);
|
||||
|
||||
if (shifted.toHsl().s !== 0) {
|
||||
shifted = shifted.saturate(
|
||||
(shade_variant == "dark" ? 1 : -1) * i * saturation_step
|
||||
);
|
||||
}
|
||||
const hex = shifted.toHex();
|
||||
colors[group_name]![`${color_name}-${shade_variant}${i}`] = hex;
|
||||
}
|
||||
}
|
||||
// don't saturate greys
|
||||
shifted = shifted.saturate(steps * saturation_step);
|
||||
}
|
||||
shifted = shifted.rotate(hue_step * steps);
|
||||
return shifted.toHex();
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
.autoscrolling-images__title {
|
||||
font-family: Exotc350DmBdEU;
|
||||
font-size: 32px;
|
||||
color: var(--color-brand-accent);
|
||||
color: var(--color-brand-text-accent);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -134,14 +134,14 @@
|
||||
cursor: pointer;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-color: var(--color-brand-accent-light4);
|
||||
background-color: var(--color-brand-accent-09);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.autoscrolling-images__dots:hover {
|
||||
background-color: var(--color-brand-accent);
|
||||
background-color: var(--color-brand-accent-04);
|
||||
}
|
||||
|
||||
@keyframes autoscrolling-images-infiniteScroll {
|
||||
|
||||
@ -25,7 +25,7 @@ images.getExampleCount = () => {
|
||||
const component_arguments = {
|
||||
title: new ComponentArguments.ShortText(),
|
||||
imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]),
|
||||
speed: new ComponentArguments.ShortText().setExampleValues(["50"]),
|
||||
speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
|
||||
desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
|
||||
images,
|
||||
} as const;
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
align-items: stretch;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--color-brand-text-bg-62);
|
||||
margin-bottom: 36px;
|
||||
.tabs-menu-button {
|
||||
display: flex;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
color: #666;
|
||||
border: 1px solid var(--color-brand-text-fg-07);
|
||||
background: var(--color-brand-text-fg-08);
|
||||
color: var(--color-brand-text-fg);
|
||||
font-size: 12px;
|
||||
transition: border 200ms, color 200ms;
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
}
|
||||
}
|
||||
.tabs-menu-button:hover {
|
||||
border-top-color: #333;
|
||||
color: #333;
|
||||
border-top-color: var(--color-brand-text-fg);
|
||||
color: var(--color-brand-text-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,13 +49,13 @@
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
color: #000000;
|
||||
color: var(--color-brand-text-fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
position: absolute;
|
||||
background-color: #c3c3c3;
|
||||
background-color: var(--color-brand-text-fg-08);
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
padding: 8px;
|
||||
@ -168,18 +168,18 @@
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 8px 24px;
|
||||
border: 1px solid #000000;
|
||||
border: 1px solid var(--color-brand-text-fg);
|
||||
color: var(--text-color);
|
||||
min-width: 240px;
|
||||
line-height: 23px;
|
||||
font-size: 16px;
|
||||
&.dark {
|
||||
background-color: #000000;
|
||||
--text-color: #ffffff;
|
||||
background-color: var(--color-brand-accent-02);
|
||||
--text-color: var(--color-brand-accent);
|
||||
}
|
||||
&.bright {
|
||||
background-color: #ffffff;
|
||||
--text-color: #000000;
|
||||
background-color: var(--color-brand-text-bg);
|
||||
--text-color: var(--color-brand-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@ export class DynamicGrid extends Component<typeof component_arguments> {
|
||||
index,
|
||||
}: ComponentToHTMLArgs<typeof component_arguments>,
|
||||
tab_style_when_active = `border-bottom-color: #fff;
|
||||
border-top-color: #b721ff;
|
||||
border-top-color: var(--color-brand-accent-04);
|
||||
background: #fff;
|
||||
color: #222;`
|
||||
): FlatTemplatable {
|
||||
|
||||
@ -16,20 +16,20 @@
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-accent);
|
||||
line-height: 38.3px;
|
||||
}
|
||||
|
||||
.title-container .content p {
|
||||
display: inline;
|
||||
font-size: 16px;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-accent);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.title-container strong {
|
||||
white-space: nowrap;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
.question-container {
|
||||
display: grid;
|
||||
background-color: #cadae4;
|
||||
background-color: var(--color-brand-accent);
|
||||
border-radius: 10px;
|
||||
padding: 0 16px;
|
||||
/* padding: 16px; */
|
||||
@ -54,7 +54,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-on-accent);
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
line-height: 24px;
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
.answer {
|
||||
font-size: 16px;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-on-accent);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@ -90,8 +90,8 @@
|
||||
|
||||
.button {
|
||||
text-align: center;
|
||||
background-color: #0d4d69;
|
||||
color: #ffffff;
|
||||
background-color: var(--color-brand-accent2);
|
||||
color: var(--color-brand-text-on-accent2);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
padding: 8px 24px 8px 24px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-accent-04);
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
@ -27,10 +27,13 @@
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/4;
|
||||
|
||||
picture {
|
||||
max-width: 100cqw;
|
||||
img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container > div {
|
||||
padding: 0 0 0px 24px;
|
||||
@ -64,8 +67,8 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #ffffff;
|
||||
background-color: #0b456b;
|
||||
color: var(--color-brand-accent-09);
|
||||
background-color: var(--color-brand-accent);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 8px 24px 8px 24px;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
@ -11,9 +12,10 @@
|
||||
font-family: Exotc350DmBdEU, sans-serif;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: #0d4d69;
|
||||
color: var(--color-brand-text-accent);
|
||||
flex-grow: 1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@container (max-width: 600px) {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
@ -23,10 +25,11 @@
|
||||
.horizontal-gallery__buttons,
|
||||
&::before {
|
||||
display: flex;
|
||||
width: 92px;
|
||||
width: 200px;
|
||||
content: " ";
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
|
||||
@container (max-width: 600px) {
|
||||
display: none !important;
|
||||
@ -45,6 +48,8 @@
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
color: var(--color-brand-text-accent2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
|
||||
type="button"
|
||||
>
|
||||
<span style="transform: rotate(180deg); margin-right: 16px;">
|
||||
→
|
||||
←
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
.popup {
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: #0d4d69;
|
||||
color: #ffffff;
|
||||
background: var(--color-brand-accent);
|
||||
color: var(--color-brand-text-on-accent);
|
||||
text-align: center;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
@ -40,11 +40,11 @@
|
||||
border-radius: 25px;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 25px;
|
||||
border: 1px solid #ffffff;
|
||||
color: #ffffff;
|
||||
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: #0d4d69;
|
||||
background-color: var(--color-brand-accent--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ const component_arguments = {
|
||||
new ComponentArguments.Structured({
|
||||
title: new ComponentArguments.ShortText(),
|
||||
address: new ComponentArguments.ShortText(),
|
||||
coordinates: new ComponentArguments.ShortText(),
|
||||
coordinates: new ComponentArguments.ShortText().setExampleValues(["52,16"]),
|
||||
button: new ComponentArguments.Structured({
|
||||
text: new ComponentArguments.ShortText(),
|
||||
link: new ComponentArguments.ShortText(),
|
||||
@ -30,6 +30,7 @@ export class MapWithPins extends Component<typeof component_arguments> {
|
||||
integrity:
|
||||
"sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg==",
|
||||
},
|
||||
|
||||
{
|
||||
type: "style" as const,
|
||||
url: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css",
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
import { Controller } from "stimulus";
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
||||
import { addJS } from "@sealcode/add-to-head";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
L: typeof import("leaflet");
|
||||
@ -20,7 +22,8 @@ type Pin = {
|
||||
|
||||
function parseCoords(s: string): [number, number] {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
return s.split(", ").map((x) => parseFloat(x)) as [number, number];
|
||||
const result = s.split(",").map((x) => parseFloat(x.trim())) as [number, number];
|
||||
return result;
|
||||
}
|
||||
|
||||
function decodeHTMLEntities(text: string) {
|
||||
@ -57,17 +60,8 @@ export default class MapWithPins extends Controller {
|
||||
if (this.initiated) {
|
||||
this.map.remove();
|
||||
}
|
||||
if (window.L) {
|
||||
await addJS("https://unpkg.com/leaflet@1.9.4/dist/leaflet.js");
|
||||
this.initiateMap();
|
||||
} else {
|
||||
document.addEventListener(
|
||||
"loaded-https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
|
||||
() => {
|
||||
this.initiateMap();
|
||||
(window as any).externalLinks();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
|
||||
@ -57,12 +57,16 @@
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple a {
|
||||
color: var(--white-on-darker-bg-text);
|
||||
.pictogram-tiles__tile--accent a {
|
||||
color: var(--color-brand-text-on-accent);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--accent2 a {
|
||||
color: var(--color-brand-text-on-accent2);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white a {
|
||||
color: var(--main);
|
||||
color: var(--color-brand-text-accent);
|
||||
}
|
||||
|
||||
.pictogram-tiles__lowerSection h3 {
|
||||
@ -80,8 +84,12 @@
|
||||
color: var(--dove-gray);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple {
|
||||
background-color: var(--main);
|
||||
.pictogram-tiles__tile--accent {
|
||||
background-color: var(--color-brand-accent);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--accent2 {
|
||||
background-color: var(--color-brand-accent2);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white {
|
||||
@ -89,26 +97,40 @@
|
||||
box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__upperSection span {
|
||||
color: var(--main-bg-text);
|
||||
.pictogram-tiles__tile--accent .pictogram-tiles__upperSection span {
|
||||
color: var(--color-brand-text-on-accent);
|
||||
border-color: hsl(287.3, 13.1%, 50.8%);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--accent2 .pictogram-tiles__upperSection span {
|
||||
color: var(--color-brand-text-on-accent2);
|
||||
border-color: hsl(287.3, 13.1%, 50.8%);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__upperSection span {
|
||||
color: var(--main);
|
||||
color: var(--color-brand-text-accent);
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection h3 {
|
||||
color: var(--main-bg-text);
|
||||
.pictogram-tiles__tile--accent .pictogram-tiles__lowerSection h3 {
|
||||
color: var(--color-brand-text-on-accent);
|
||||
}
|
||||
.pictogram-tiles__tile--purple .pictogram-tiles__lowerSection p {
|
||||
color: var(--main-bg-text-secondary);
|
||||
|
||||
.pictogram-tiles__tile--accent2 .pictogram-tiles__lowerSection h3 {
|
||||
color: var(--color-brand-text-on-accent2);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--accent .pictogram-tiles__lowerSection p {
|
||||
color: var(--color-brand-text-on-accent);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--accent2 .pictogram-tiles__lowerSection p {
|
||||
color: var(--color-brand-text-on-accent2);
|
||||
}
|
||||
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection {
|
||||
.pictogram-tiles__tile--white .pictogram-tiles__lowerSection p {
|
||||
color: var(--dove-gray);
|
||||
color: var(--color-basic-gray-04);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { Component, ComponentArguments } from "@sealcode/jdd";
|
||||
const component_arguments = {
|
||||
elements: new ComponentArguments.List(
|
||||
new ComponentArguments.Structured({
|
||||
color: new ComponentArguments.Enum(["purple", "white"]),
|
||||
color: new ComponentArguments.Enum(["white", "accent", "accent2"]),
|
||||
iconPath: new ComponentArguments.Image(),
|
||||
iconAlt: new ComponentArguments.ShortText(),
|
||||
title: new ComponentArguments.ShortText(),
|
||||
|
||||
@ -1,50 +1,5 @@
|
||||
:root {
|
||||
--default-font-color: #222;
|
||||
|
||||
--secondary: #55a4b4;
|
||||
--secondary-light-01: #a4d2db;
|
||||
--secondary-dark-01: #5294a1;
|
||||
--secondary-dark-02: #3c7c88;
|
||||
|
||||
--alto-gray: #e0e0e0;
|
||||
--dove-gray: #6f6e6e;
|
||||
--faint-gray: #ededed;
|
||||
|
||||
--main: #6d4477;
|
||||
|
||||
--main-dark-01: #62386c;
|
||||
--main-dark-02: #56335d;
|
||||
--main-dark-03: #4a2a52;
|
||||
--main-dark-04: #55335d;
|
||||
|
||||
--main-light-01: #744d7e;
|
||||
--main-light-02: #8b7192;
|
||||
--main-light-03: #a686af;
|
||||
--main-bg-text: #fff;
|
||||
|
||||
--main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%);
|
||||
--main-dark-02-bg-secondary: #b5a2ba;
|
||||
|
||||
--wild-sand: #f6f6f6;
|
||||
--london-hue: #beadc3;
|
||||
|
||||
--wild-sand-bg-text: #000;
|
||||
|
||||
--white-bg-text: #6f6e6e;
|
||||
--white-bg-text-secondary: #000;
|
||||
--white-bg-text-gray: #565656;
|
||||
--white-bg-link: #404f6e;
|
||||
--white-on-darker-bg-text: #fff;
|
||||
|
||||
/*px / 24 = N rem*/
|
||||
--container-width: 50rem;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans-serif: "Inter UI", sans-serif;
|
||||
}
|
||||
|
||||
.tib {
|
||||
background-color: var(--wild-sand);
|
||||
background-color: var(--color-brand-text-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -54,7 +9,7 @@
|
||||
|
||||
.tib h2 {
|
||||
font-family: var(--font-sans-serif);
|
||||
color: var(--secondary);
|
||||
color: var(--color-brand-text-accent);
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
@ -69,7 +24,7 @@
|
||||
}
|
||||
|
||||
.tib p {
|
||||
color: var(--dove-gray);
|
||||
color: var(--color-brand-text-fg);
|
||||
font-family: var(--font-sans-serif);
|
||||
}
|
||||
|
||||
@ -80,7 +35,7 @@
|
||||
|
||||
.tib hr {
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
background-color: var(--color-basic-gray-05);
|
||||
max-width: var(--container-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@ -154,11 +109,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@container (max-width: 620px) {
|
||||
}
|
||||
|
||||
@container (max-width: 579px) {
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.tib__body-right {
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
.horizontal-scroller__marker {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
background-color: var(--color-brand-accent-04);
|
||||
opacity: max(0.3, var(--visibility-value));
|
||||
|
||||
&.active {
|
||||
|
||||
597
src/colors.css
597
src/colors.css
@ -1,360 +1,245 @@
|
||||
/* DO NOT EDIT! This file is automatically generated by sealgen */
|
||||
:root {
|
||||
--color-basic-aqua: #7fdbff;
|
||||
--color-basic-aqua-dark1: #4cd5ff;
|
||||
--color-basic-aqua-dark2: #19d5ff;
|
||||
--color-basic-aqua-dark3: #00c6e5;
|
||||
--color-basic-aqua-dark4: #00a3b2;
|
||||
--color-basic-aqua-dark5: #007b7f;
|
||||
--color-basic-aqua-dark6: #004c4b;
|
||||
--color-basic-aqua-dark7: #001917;
|
||||
--color-basic-aqua-dark8: #000000;
|
||||
--color-basic-aqua-light1: #b4e5fd;
|
||||
--color-basic-aqua-light2: #e6f5fe;
|
||||
--color-basic-aqua-light3: #ffffff;
|
||||
--color-basic-aqua-light4: #ffffff;
|
||||
--color-basic-aqua-light5: #ffffff;
|
||||
--color-basic-aqua-light6: #ffffff;
|
||||
--color-basic-aqua-light7: #ffffff;
|
||||
--color-basic-aqua-light8: #ffffff;
|
||||
--color-basic-black: #111111;
|
||||
--color-basic-black-dark1: #000000;
|
||||
--color-basic-black-dark2: #000000;
|
||||
--color-basic-black-dark3: #000000;
|
||||
--color-basic-black-dark4: #000000;
|
||||
--color-basic-black-dark5: #000000;
|
||||
--color-basic-black-dark6: #000000;
|
||||
--color-basic-black-dark7: #000000;
|
||||
--color-basic-black-dark8: #000000;
|
||||
--color-basic-black-light1: #2b2b2b;
|
||||
--color-basic-black-light2: #444444;
|
||||
--color-basic-black-light3: #5e5e5e;
|
||||
--color-basic-black-light4: #777777;
|
||||
--color-basic-black-light5: #919191;
|
||||
--color-basic-black-light6: #aaaaaa;
|
||||
--color-basic-black-light7: #c4c4c4;
|
||||
--color-basic-black-light8: #dddddd;
|
||||
--color-basic-blue: #0074d9;
|
||||
--color-basic-blue-dark1: #0061a6;
|
||||
--color-basic-blue-dark2: #004973;
|
||||
--color-basic-blue-dark3: #002c40;
|
||||
--color-basic-blue-dark4: #000a0d;
|
||||
--color-basic-blue-dark5: #000000;
|
||||
--color-basic-blue-dark6: #000000;
|
||||
--color-basic-blue-dark7: #000000;
|
||||
--color-basic-blue-dark8: #000000;
|
||||
--color-basic-blue-light1: #1382f9;
|
||||
--color-basic-blue-light2: #4a94f5;
|
||||
--color-basic-blue-light3: #7dabf4;
|
||||
--color-basic-blue-light4: #afc7f6;
|
||||
--color-basic-blue-light5: #dee6fa;
|
||||
--color-basic-blue-light6: #ffffff;
|
||||
--color-basic-blue-light7: #ffffff;
|
||||
--color-basic-blue-light8: #ffffff;
|
||||
--color-basic-fuchsia: #f012be;
|
||||
--color-basic-fuchsia-dark1: #c807a5;
|
||||
--color-basic-fuchsia-dark2: #9b0186;
|
||||
--color-basic-fuchsia-dark3: #690060;
|
||||
--color-basic-fuchsia-dark4: #360034;
|
||||
--color-basic-fuchsia-dark5: #030003;
|
||||
--color-basic-fuchsia-dark6: #000000;
|
||||
--color-basic-fuchsia-dark7: #000000;
|
||||
--color-basic-fuchsia-dark8: #000000;
|
||||
--color-basic-fuchsia-light1: #ee47bf;
|
||||
--color-basic-fuchsia-light2: #ef79c8;
|
||||
--color-basic-fuchsia-light3: #f2a9d6;
|
||||
--color-basic-fuchsia-light4: #f7d7e9;
|
||||
--color-basic-fuchsia-light5: #ffffff;
|
||||
--color-basic-fuchsia-light6: #ffffff;
|
||||
--color-basic-fuchsia-light7: #ffffff;
|
||||
--color-basic-fuchsia-light8: #ffffff;
|
||||
--color-basic-gray: #aaaaaa;
|
||||
--color-basic-gray-dark1: #909090;
|
||||
--color-basic-gray-dark2: #777777;
|
||||
--color-basic-gray-dark3: #5d5d5d;
|
||||
--color-basic-gray-dark4: #444444;
|
||||
--color-basic-gray-dark5: #2a2a2a;
|
||||
--color-basic-gray-dark6: #111111;
|
||||
--color-basic-gray-dark7: #000000;
|
||||
--color-basic-gray-dark8: #000000;
|
||||
--color-basic-gray-light1: #c3c3c3;
|
||||
--color-basic-gray-light2: #dddddd;
|
||||
--color-basic-gray-light3: #f6f6f6;
|
||||
--color-basic-gray-light4: #ffffff;
|
||||
--color-basic-gray-light5: #ffffff;
|
||||
--color-basic-gray-light6: #ffffff;
|
||||
--color-basic-gray-light7: #ffffff;
|
||||
--color-basic-gray-light8: #ffffff;
|
||||
--color-basic-green: #2ecc40;
|
||||
--color-basic-green-dark1: #20a729;
|
||||
--color-basic-green-dark2: #148016;
|
||||
--color-basic-green-dark3: #0d560b;
|
||||
--color-basic-green-dark4: #072a04;
|
||||
--color-basic-green-dark5: #000000;
|
||||
--color-basic-green-dark6: #000000;
|
||||
--color-basic-green-dark7: #000000;
|
||||
--color-basic-green-dark8: #000000;
|
||||
--color-basic-green-light1: #5ad36e;
|
||||
--color-basic-green-light2: #86da98;
|
||||
--color-basic-green-light3: #b0e3bd;
|
||||
--color-basic-green-light4: #d7efdf;
|
||||
--color-basic-green-light5: #fcfdfc;
|
||||
--color-basic-green-light6: #ffffff;
|
||||
--color-basic-green-light7: #ffffff;
|
||||
--color-basic-green-light8: #ffffff;
|
||||
--color-basic-lime: #01ff70;
|
||||
--color-basic-lime-dark1: #00cd4f;
|
||||
--color-basic-lime-dark2: #009a33;
|
||||
--color-basic-lime-dark3: #00671d;
|
||||
--color-basic-lime-dark4: #00340c;
|
||||
--color-basic-lime-dark5: #000100;
|
||||
--color-basic-lime-dark6: #000000;
|
||||
--color-basic-lime-dark7: #000000;
|
||||
--color-basic-lime-dark8: #000000;
|
||||
--color-basic-lime-light1: #39fa96;
|
||||
--color-basic-lime-light2: #6ff7b8;
|
||||
--color-basic-lime-light3: #a2f7d4;
|
||||
--color-basic-lime-light4: #d2faeb;
|
||||
--color-basic-lime-light5: #ffffff;
|
||||
--color-basic-lime-light6: #ffffff;
|
||||
--color-basic-lime-light7: #ffffff;
|
||||
--color-basic-lime-light8: #ffffff;
|
||||
--color-basic-maroon: #85144b;
|
||||
--color-basic-maroon-dark1: #5b0b36;
|
||||
--color-basic-maroon-dark2: #2f041d;
|
||||
--color-basic-maroon-dark3: #000000;
|
||||
--color-basic-maroon-dark4: #000000;
|
||||
--color-basic-maroon-dark5: #000000;
|
||||
--color-basic-maroon-dark6: #000000;
|
||||
--color-basic-maroon-dark7: #000000;
|
||||
--color-basic-maroon-dark8: #000000;
|
||||
--color-basic-maroon-light1: #ac205d;
|
||||
--color-basic-maroon-light2: #d12e6d;
|
||||
--color-basic-maroon-light3: #d55d85;
|
||||
--color-basic-maroon-light4: #dc89a1;
|
||||
--color-basic-maroon-light5: #e5b3bf;
|
||||
--color-basic-maroon-light6: #f1dade;
|
||||
--color-basic-maroon-light7: #ffffff;
|
||||
--color-basic-maroon-light8: #ffffff;
|
||||
--color-basic-navy: #001f3f;
|
||||
--color-basic-navy-dark1: #00070c;
|
||||
--color-basic-navy-dark2: #000000;
|
||||
--color-basic-navy-dark3: #000000;
|
||||
--color-basic-navy-dark4: #000000;
|
||||
--color-basic-navy-dark5: #000000;
|
||||
--color-basic-navy-dark6: #000000;
|
||||
--color-basic-navy-dark7: #000000;
|
||||
--color-basic-navy-dark8: #000000;
|
||||
--color-basic-navy-light1: #03346f;
|
||||
--color-basic-navy-light2: #08449d;
|
||||
--color-basic-navy-light3: #1050c8;
|
||||
--color-basic-navy-light4: #245fe7;
|
||||
--color-basic-navy-light5: #577be7;
|
||||
--color-basic-navy-light6: #879bea;
|
||||
--color-basic-navy-light7: #b5beef;
|
||||
--color-basic-navy-light8: #e0e2f7;
|
||||
--color-basic-olive: #3d9970;
|
||||
--color-basic-olive-dark1: #2a7951;
|
||||
--color-basic-olive-dark2: #1a5635;
|
||||
--color-basic-olive-dark3: #0d301b;
|
||||
--color-basic-olive-dark4: #020804;
|
||||
--color-basic-olive-dark5: #000000;
|
||||
--color-basic-olive-dark6: #000000;
|
||||
--color-basic-olive-dark7: #000000;
|
||||
--color-basic-olive-dark8: #000000;
|
||||
--color-basic-olive-light1: #56b38e;
|
||||
--color-basic-olive-light2: #7ebea8;
|
||||
--color-basic-olive-light3: #a3ccc0;
|
||||
--color-basic-olive-light4: #c6dcd6;
|
||||
--color-basic-olive-light5: #e7eeed;
|
||||
--color-basic-olive-light6: #ffffff;
|
||||
--color-basic-olive-light7: #ffffff;
|
||||
--color-basic-olive-light8: #ffffff;
|
||||
--color-basic-orange: #ff851b;
|
||||
--color-basic-orange-dark1: #e76000;
|
||||
--color-basic-orange-dark2: #b44200;
|
||||
--color-basic-orange-dark3: #812900;
|
||||
--color-basic-orange-dark4: #4e1500;
|
||||
--color-basic-orange-dark5: #1b0600;
|
||||
--color-basic-orange-dark6: #000000;
|
||||
--color-basic-orange-dark7: #000000;
|
||||
--color-basic-orange-dark8: #000000;
|
||||
--color-basic-orange-light1: #fba952;
|
||||
--color-basic-orange-light2: #f9c887;
|
||||
--color-basic-orange-light3: #f9e1ba;
|
||||
--color-basic-orange-light4: #fdf6e9;
|
||||
--color-basic-orange-light5: #ffffff;
|
||||
--color-basic-orange-light6: #ffffff;
|
||||
--color-basic-orange-light7: #ffffff;
|
||||
--color-basic-orange-light8: #ffffff;
|
||||
--color-basic-purple: #b10dc9;
|
||||
--color-basic-purple-dark1: #81069d;
|
||||
--color-basic-purple-dark2: #55016f;
|
||||
--color-basic-purple-dark3: #2c003d;
|
||||
--color-basic-purple-dark4: #07000a;
|
||||
--color-basic-purple-dark5: #000000;
|
||||
--color-basic-purple-dark6: #000000;
|
||||
--color-basic-purple-dark7: #000000;
|
||||
--color-basic-purple-dark8: #000000;
|
||||
--color-basic-purple-light1: #d91fea;
|
||||
--color-basic-purple-light2: #e452ea;
|
||||
--color-basic-purple-light3: #ec83ea;
|
||||
--color-basic-purple-light4: #f0b2ec;
|
||||
--color-basic-purple-light5: #f7def4;
|
||||
--color-basic-purple-light6: #ffffff;
|
||||
--color-basic-purple-light7: #ffffff;
|
||||
--color-basic-purple-light8: #ffffff;
|
||||
--color-basic-red: #ff4136;
|
||||
--color-basic-red-dark1: #ff0303;
|
||||
--color-basic-red-dark2: #cf000a;
|
||||
--color-basic-red-dark3: #9c0010;
|
||||
--color-basic-red-dark4: #690010;
|
||||
--color-basic-red-dark5: #36000b;
|
||||
--color-basic-red-dark6: #030001;
|
||||
--color-basic-red-dark7: #000000;
|
||||
--color-basic-red-dark8: #000000;
|
||||
--color-basic-red-light1: #fb7b6d;
|
||||
--color-basic-red-light2: #faaea1;
|
||||
--color-basic-red-light3: #fbdbd3;
|
||||
--color-basic-red-light4: #ffffff;
|
||||
--color-basic-red-light5: #ffffff;
|
||||
--color-basic-red-light6: #ffffff;
|
||||
--color-basic-red-light7: #ffffff;
|
||||
--color-basic-red-light8: #ffffff;
|
||||
--color-basic-silver: #dddddd;
|
||||
--color-basic-silver-dark1: #c4c4c4;
|
||||
--color-basic-silver-dark2: #aaaaaa;
|
||||
--color-basic-silver-dark3: #919191;
|
||||
--color-basic-silver-dark4: #777777;
|
||||
--color-basic-silver-dark5: #5e5e5e;
|
||||
--color-basic-silver-dark6: #444444;
|
||||
--color-basic-silver-dark7: #2b2b2b;
|
||||
--color-basic-silver-dark8: #111111;
|
||||
--color-basic-silver-light1: #f7f7f7;
|
||||
--color-basic-silver-light2: #ffffff;
|
||||
--color-basic-silver-light3: #ffffff;
|
||||
--color-basic-silver-light4: #ffffff;
|
||||
--color-basic-silver-light5: #ffffff;
|
||||
--color-basic-silver-light6: #ffffff;
|
||||
--color-basic-silver-light7: #ffffff;
|
||||
--color-basic-silver-light8: #ffffff;
|
||||
--color-basic-teal: #39cccc;
|
||||
--color-basic-teal-dark1: #26aca6;
|
||||
--color-basic-teal-dark2: #19867b;
|
||||
--color-basic-teal-dark3: #0e5e52;
|
||||
--color-basic-teal-dark4: #06332a;
|
||||
--color-basic-teal-dark5: #000604;
|
||||
--color-basic-teal-dark6: #000000;
|
||||
--color-basic-teal-dark7: #000000;
|
||||
--color-basic-teal-dark8: #000000;
|
||||
--color-basic-teal-light1: #67ccd1;
|
||||
--color-basic-teal-light2: #91d2da;
|
||||
--color-basic-teal-light3: #badee4;
|
||||
--color-basic-teal-light4: #e0eef1;
|
||||
--color-basic-teal-light5: #ffffff;
|
||||
--color-basic-teal-light6: #ffffff;
|
||||
--color-basic-teal-light7: #ffffff;
|
||||
--color-basic-teal-light8: #ffffff;
|
||||
--color-basic-white: #ffffff;
|
||||
--color-basic-white-dark1: #e6e6e6;
|
||||
--color-basic-white-dark2: #cccccc;
|
||||
--color-basic-white-dark3: #b3b3b3;
|
||||
--color-basic-white-dark4: #999999;
|
||||
--color-basic-white-dark5: #808080;
|
||||
--color-basic-white-dark6: #666666;
|
||||
--color-basic-white-dark7: #4d4d4d;
|
||||
--color-basic-white-dark8: #333333;
|
||||
--color-basic-white-light1: #ffffff;
|
||||
--color-basic-white-light2: #ffffff;
|
||||
--color-basic-white-light3: #ffffff;
|
||||
--color-basic-white-light4: #ffffff;
|
||||
--color-basic-white-light5: #ffffff;
|
||||
--color-basic-white-light6: #ffffff;
|
||||
--color-basic-white-light7: #ffffff;
|
||||
--color-basic-white-light8: #ffffff;
|
||||
--color-basic-yellow: #ffdc00;
|
||||
--color-basic-yellow-dark1: #cca700;
|
||||
--color-basic-yellow-dark2: #997500;
|
||||
--color-basic-yellow-dark3: #664900;
|
||||
--color-basic-yellow-dark4: #332200;
|
||||
--color-basic-yellow-dark5: #000000;
|
||||
--color-basic-yellow-dark6: #000000;
|
||||
--color-basic-yellow-dark7: #000000;
|
||||
--color-basic-yellow-dark8: #000000;
|
||||
--color-basic-yellow-light1: #faea38;
|
||||
--color-basic-yellow-light2: #f7f36e;
|
||||
--color-basic-yellow-light3: #f6f7a1;
|
||||
--color-basic-yellow-light4: #f7fad1;
|
||||
--color-basic-yellow-light5: #ffffff;
|
||||
--color-basic-yellow-light6: #ffffff;
|
||||
--color-basic-yellow-light7: #ffffff;
|
||||
--color-basic-yellow-light8: #ffffff;
|
||||
--color-brand-accent: #0074d9;
|
||||
--color-brand-accent-dark1: #0061a6;
|
||||
--color-brand-accent-dark2: #004973;
|
||||
--color-brand-accent-dark3: #002c40;
|
||||
--color-brand-accent-dark4: #000a0d;
|
||||
--color-brand-accent-dark5: #000000;
|
||||
--color-brand-accent-dark6: #000000;
|
||||
--color-brand-accent-dark7: #000000;
|
||||
--color-brand-accent-dark8: #000000;
|
||||
--color-brand-accent-light1: #1382f9;
|
||||
--color-brand-accent-light2: #4a94f5;
|
||||
--color-brand-accent-light3: #7dabf4;
|
||||
--color-brand-accent-light4: #afc7f6;
|
||||
--color-brand-accent-light5: #dee6fa;
|
||||
--color-brand-accent-light6: #ffffff;
|
||||
--color-brand-accent-light7: #ffffff;
|
||||
--color-brand-accent-light8: #ffffff;
|
||||
--color-brand-text-accent: #0074d9;
|
||||
--color-brand-text-accent-dark1: #0061a6;
|
||||
--color-brand-text-accent-dark2: #004973;
|
||||
--color-brand-text-accent-dark3: #002c40;
|
||||
--color-brand-text-accent-dark4: #000a0d;
|
||||
--color-brand-text-accent-dark5: #000000;
|
||||
--color-brand-text-accent-dark6: #000000;
|
||||
--color-brand-text-accent-dark7: #000000;
|
||||
--color-brand-text-accent-dark8: #000000;
|
||||
--color-brand-text-accent-light1: #1382f9;
|
||||
--color-brand-text-accent-light2: #4a94f5;
|
||||
--color-brand-text-accent-light3: #7dabf4;
|
||||
--color-brand-text-accent-light4: #afc7f6;
|
||||
--color-brand-text-accent-light5: #dee6fa;
|
||||
--color-brand-text-accent-light6: #ffffff;
|
||||
--color-brand-text-accent-light7: #ffffff;
|
||||
--color-brand-text-accent-light8: #ffffff;
|
||||
--color-brand-text-bg: #ffffff;
|
||||
--color-brand-text-bg-dark1: #e6e6e6;
|
||||
--color-brand-text-bg-dark2: #cccccc;
|
||||
--color-brand-text-bg-dark3: #b3b3b3;
|
||||
--color-brand-text-bg-dark4: #999999;
|
||||
--color-brand-text-bg-dark5: #808080;
|
||||
--color-brand-text-bg-dark6: #666666;
|
||||
--color-brand-text-bg-dark7: #4d4d4d;
|
||||
--color-brand-text-bg-dark8: #333333;
|
||||
--color-brand-text-bg-light1: #ffffff;
|
||||
--color-brand-text-bg-light2: #ffffff;
|
||||
--color-brand-text-bg-light3: #ffffff;
|
||||
--color-brand-text-bg-light4: #ffffff;
|
||||
--color-brand-text-bg-light5: #ffffff;
|
||||
--color-brand-text-bg-light6: #ffffff;
|
||||
--color-brand-text-bg-light7: #ffffff;
|
||||
--color-brand-text-bg-light8: #ffffff;
|
||||
--color-brand-canvas: #fff;
|
||||
--color-brand-canvas-00: #000000;
|
||||
--color-brand-canvas-01: #1a1a1a;
|
||||
--color-brand-canvas-02: #333333;
|
||||
--color-brand-canvas-03: #4d4d4d;
|
||||
--color-brand-canvas-04: #666666;
|
||||
--color-brand-canvas-05: #808080;
|
||||
--color-brand-canvas-06: #999999;
|
||||
--color-brand-canvas-07: #b3b3b3;
|
||||
--color-brand-canvas-08: #cccccc;
|
||||
--color-brand-canvas-09: #e6e6e6;
|
||||
--color-brand-text-bg: #f6f6f6;
|
||||
--color-brand-text-bg-00: #0f0f0f;
|
||||
--color-brand-text-bg-01: #292929;
|
||||
--color-brand-text-bg-02: #424242;
|
||||
--color-brand-text-bg-03: #5c5c5c;
|
||||
--color-brand-text-bg-04: #757575;
|
||||
--color-brand-text-bg-05: #8f8f8f;
|
||||
--color-brand-text-bg-06: #a8a8a8;
|
||||
--color-brand-text-bg-07: #c2c2c2;
|
||||
--color-brand-text-bg-08: #dbdbdb;
|
||||
--color-brand-text-bg-09: #f5f5f5;
|
||||
--color-brand-text-fg: #111111;
|
||||
--color-brand-text-fg-dark1: #000000;
|
||||
--color-brand-text-fg-dark2: #000000;
|
||||
--color-brand-text-fg-dark3: #000000;
|
||||
--color-brand-text-fg-dark4: #000000;
|
||||
--color-brand-text-fg-dark5: #000000;
|
||||
--color-brand-text-fg-dark6: #000000;
|
||||
--color-brand-text-fg-dark7: #000000;
|
||||
--color-brand-text-fg-dark8: #000000;
|
||||
--color-brand-text-fg-light1: #2b2b2b;
|
||||
--color-brand-text-fg-light2: #444444;
|
||||
--color-brand-text-fg-light3: #5e5e5e;
|
||||
--color-brand-text-fg-light4: #777777;
|
||||
--color-brand-text-fg-light5: #919191;
|
||||
--color-brand-text-fg-light6: #aaaaaa;
|
||||
--color-brand-text-fg-light7: #c4c4c4;
|
||||
--color-brand-text-fg-light8: #dddddd;
|
||||
--color-brand-text-fg-00: #121212;
|
||||
--color-brand-text-fg-01: #2b2b2b;
|
||||
--color-brand-text-fg-02: #454545;
|
||||
--color-brand-text-fg-03: #5e5e5e;
|
||||
--color-brand-text-fg-04: #787878;
|
||||
--color-brand-text-fg-05: #919191;
|
||||
--color-brand-text-fg-06: #ababab;
|
||||
--color-brand-text-fg-07: #c4c4c4;
|
||||
--color-brand-text-fg-08: #dedede;
|
||||
--color-brand-text-fg-09: #f7f7f7;
|
||||
--color-brand-accent: #5294a1;
|
||||
--color-brand-accent-00: #0b141e;
|
||||
--color-brand-accent-01: #193143;
|
||||
--color-brand-accent-02: #294f65;
|
||||
--color-brand-accent-03: #3b7087;
|
||||
--color-brand-accent-04: #4e92a6;
|
||||
--color-brand-accent-05: #71abb7;
|
||||
--color-brand-accent-06: #95c1c6;
|
||||
--color-brand-accent-07: #b8d5d6;
|
||||
--color-brand-accent-08: #d9e8e7;
|
||||
--color-brand-accent-09: #f9fbfb;
|
||||
--color-brand-accent2: #65397c;
|
||||
--color-brand-accent2-00: #110713;
|
||||
--color-brand-accent2-01: #301637;
|
||||
--color-brand-accent2-02: #4b2659;
|
||||
--color-brand-accent2-03: #63387a;
|
||||
--color-brand-accent2-04: #794c9a;
|
||||
--color-brand-accent2-05: #8d69b0;
|
||||
--color-brand-accent2-06: #a38dbf;
|
||||
--color-brand-accent2-07: #bcafcf;
|
||||
--color-brand-accent2-08: #d6d0e1;
|
||||
--color-brand-accent2-09: #f1f0f5;
|
||||
--color-brand-text-accent: #5294a1;
|
||||
--color-brand-text-accent-00: #0b141e;
|
||||
--color-brand-text-accent-01: #193143;
|
||||
--color-brand-text-accent-02: #294f65;
|
||||
--color-brand-text-accent-03: #3b7087;
|
||||
--color-brand-text-accent-04: #4e92a6;
|
||||
--color-brand-text-accent-05: #71abb7;
|
||||
--color-brand-text-accent-06: #95c1c6;
|
||||
--color-brand-text-accent-07: #b8d5d6;
|
||||
--color-brand-text-accent-08: #d9e8e7;
|
||||
--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;
|
||||
--color-brand-text-on-accent-02: #333333;
|
||||
--color-brand-text-on-accent-03: #4d4d4d;
|
||||
--color-brand-text-on-accent-04: #666666;
|
||||
--color-brand-text-on-accent-05: #808080;
|
||||
--color-brand-text-on-accent-06: #999999;
|
||||
--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: #fff;
|
||||
--color-brand-text-on-accent2-00: #000000;
|
||||
--color-brand-text-on-accent2-01: #1a1a1a;
|
||||
--color-brand-text-on-accent2-02: #333333;
|
||||
--color-brand-text-on-accent2-03: #4d4d4d;
|
||||
--color-brand-text-on-accent2-04: #666666;
|
||||
--color-brand-text-on-accent2-05: #808080;
|
||||
--color-brand-text-on-accent2-06: #999999;
|
||||
--color-brand-text-on-accent2-07: #b3b3b3;
|
||||
--color-brand-text-on-accent2-08: #cccccc;
|
||||
--color-brand-text-on-accent2-09: #e6e6e6;
|
||||
--color-basic-blue: #0074d9;
|
||||
--color-basic-blue-00: #00040f;
|
||||
--color-basic-blue-01: #001642;
|
||||
--color-basic-blue-02: #002f75;
|
||||
--color-basic-blue-03: #004fa8;
|
||||
--color-basic-blue-04: #0075db;
|
||||
--color-basic-blue-05: #139efb;
|
||||
--color-basic-blue-06: #48bef9;
|
||||
--color-basic-blue-07: #7bd7f9;
|
||||
--color-basic-blue-08: #aeebfa;
|
||||
--color-basic-blue-09: #def8fc;
|
||||
--color-basic-teal: #39cccc;
|
||||
--color-basic-teal-00: #010304;
|
||||
--color-basic-teal-01: #082530;
|
||||
--color-basic-teal-02: #114b5a;
|
||||
--color-basic-teal-03: #1c7582;
|
||||
--color-basic-teal-04: #28a1a9;
|
||||
--color-basic-teal-05: #38cccc;
|
||||
--color-basic-teal-06: #64d3cc;
|
||||
--color-basic-teal-07: #8edcd2;
|
||||
--color-basic-teal-08: #b6e7dd;
|
||||
--color-basic-teal-09: #ddf3ed;
|
||||
--color-basic-purple: #b10dc9;
|
||||
--color-basic-purple-00: #0a0009;
|
||||
--color-basic-purple-01: #3c0138;
|
||||
--color-basic-purple-02: #6d036d;
|
||||
--color-basic-purple-03: #92079c;
|
||||
--color-basic-purple-04: #b00dc9;
|
||||
--color-basic-purple-05: #c31ded;
|
||||
--color-basic-purple-06: #c34fee;
|
||||
--color-basic-purple-07: #ca7ff0;
|
||||
--color-basic-purple-08: #d8aef4;
|
||||
--color-basic-purple-09: #ecdcf9;
|
||||
--color-basic-fuchsia: #f012be;
|
||||
--color-basic-fuchsia-00: #050002;
|
||||
--color-basic-fuchsia-01: #38001c;
|
||||
--color-basic-fuchsia-02: #69023c;
|
||||
--color-basic-fuchsia-03: #990563;
|
||||
--color-basic-fuchsia-04: #c8098f;
|
||||
--color-basic-fuchsia-05: #f014bd;
|
||||
--color-basic-fuchsia-06: #f047d4;
|
||||
--color-basic-fuchsia-07: #f278e6;
|
||||
--color-basic-fuchsia-08: #f5a8f2;
|
||||
--color-basic-fuchsia-09: #f8d7f9;
|
||||
--color-basic-maroon: #85144b;
|
||||
--color-basic-maroon-00: #000000;
|
||||
--color-basic-maroon-01: #2e0513;
|
||||
--color-basic-maroon-02: #5a0c2c;
|
||||
--color-basic-maroon-03: #85144b;
|
||||
--color-basic-maroon-04: #ae1e6d;
|
||||
--color-basic-maroon-05: #d62994;
|
||||
--color-basic-maroon-06: #db57b1;
|
||||
--color-basic-maroon-07: #e283ca;
|
||||
--color-basic-maroon-08: #eaaedf;
|
||||
--color-basic-maroon-09: #f4d7f0;
|
||||
--color-basic-red: #ff4136;
|
||||
--color-basic-red-00: #050200;
|
||||
--color-basic-red-01: #381600;
|
||||
--color-basic-red-02: #6b2200;
|
||||
--color-basic-red-03: #9e2800;
|
||||
--color-basic-red-04: #d12600;
|
||||
--color-basic-red-05: #ff2205;
|
||||
--color-basic-red-06: #ff4238;
|
||||
--color-basic-red-07: #fd6d70;
|
||||
--color-basic-red-08: #fca1a9;
|
||||
--color-basic-red-09: #fdd3d9;
|
||||
--color-basic-orange: #ff851b;
|
||||
--color-basic-orange-00: #1a1400;
|
||||
--color-basic-orange-01: #4d3800;
|
||||
--color-basic-orange-02: #805500;
|
||||
--color-basic-orange-03: #b36b00;
|
||||
--color-basic-orange-04: #e67a00;
|
||||
--color-basic-orange-05: #ff8519;
|
||||
--color-basic-orange-06: #fc944f;
|
||||
--color-basic-orange-07: #fbab83;
|
||||
--color-basic-orange-08: #fcc9b6;
|
||||
--color-basic-orange-09: #fdece7;
|
||||
--color-basic-yellow: #ffdc00;
|
||||
--color-basic-yellow-00: #000000;
|
||||
--color-basic-yellow-01: #2c3300;
|
||||
--color-basic-yellow-02: #5f6600;
|
||||
--color-basic-yellow-03: #999900;
|
||||
--color-basic-yellow-04: #ccbe00;
|
||||
--color-basic-yellow-05: #ffdd00;
|
||||
--color-basic-yellow-06: #fcd436;
|
||||
--color-basic-yellow-07: #fad46b;
|
||||
--color-basic-yellow-08: #fadb9e;
|
||||
--color-basic-yellow-09: #fceacf;
|
||||
--color-basic-olive: #3d9970;
|
||||
--color-basic-olive-00: #020807;
|
||||
--color-basic-olive-01: #0f2f27;
|
||||
--color-basic-olive-02: #1d5442;
|
||||
--color-basic-olive-03: #2c775a;
|
||||
--color-basic-olive-04: #3d9970;
|
||||
--color-basic-olive-05: #54b683;
|
||||
--color-basic-olive-06: #7ac298;
|
||||
--color-basic-olive-07: #9fd0b0;
|
||||
--color-basic-olive-08: #c3dfcb;
|
||||
--color-basic-olive-09: #e5f0e7;
|
||||
--color-basic-green: #2ecc40;
|
||||
--color-basic-green-00: #052915;
|
||||
--color-basic-green-01: #0c5528;
|
||||
--color-basic-green-02: #157f36;
|
||||
--color-basic-green-03: #1fa841;
|
||||
--color-basic-green-04: #2acf49;
|
||||
--color-basic-green-05: #55d864;
|
||||
--color-basic-green-06: #81df85;
|
||||
--color-basic-green-07: #ace8ab;
|
||||
--color-basic-green-08: #d6f2d4;
|
||||
--color-basic-green-09: #fcfefb;
|
||||
--color-basic-lime: #01ff70;
|
||||
--color-basic-lime-00: #000000;
|
||||
--color-basic-lime-01: #003324;
|
||||
--color-basic-lime-02: #006641;
|
||||
--color-basic-lime-03: #009957;
|
||||
--color-basic-lime-04: #00cc66;
|
||||
--color-basic-lime-05: #00ff6f;
|
||||
--color-basic-lime-06: #36fc7f;
|
||||
--color-basic-lime-07: #6bfa96;
|
||||
--color-basic-lime-08: #9efab3;
|
||||
--color-basic-lime-09: #cffcd7;
|
||||
--color-basic-black: #111111;
|
||||
--color-basic-black-00: #121212;
|
||||
--color-basic-black-01: #2b2b2b;
|
||||
--color-basic-black-02: #454545;
|
||||
--color-basic-black-03: #5e5e5e;
|
||||
--color-basic-black-04: #787878;
|
||||
--color-basic-black-05: #919191;
|
||||
--color-basic-black-06: #ababab;
|
||||
--color-basic-black-07: #c4c4c4;
|
||||
--color-basic-black-08: #dedede;
|
||||
--color-basic-black-09: #f7f7f7;
|
||||
--color-basic-gray: #aaaaaa;
|
||||
--color-basic-gray-00: #121212;
|
||||
--color-basic-gray-01: #2b2b2b;
|
||||
--color-basic-gray-02: #454545;
|
||||
--color-basic-gray-03: #5e5e5e;
|
||||
--color-basic-gray-04: #787878;
|
||||
--color-basic-gray-05: #919191;
|
||||
--color-basic-gray-06: #ababab;
|
||||
--color-basic-gray-07: #c4c4c4;
|
||||
--color-basic-gray-08: #dedede;
|
||||
--color-basic-gray-09: #f7f7f7;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user