From 23aaaaf6f12e42b138cb8f1948a4c55a914360f5 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Tue, 21 Mar 2023 09:43:51 +0100 Subject: [PATCH 01/28] feat(dark-mode): convert all colors to hsl --- scripts/applyDesignTokens.ts | 103 +++++-- src/docs/components/docs-color/docs-color.tsx | 55 +++- .../styles/border-radius/border-radius.css | 2 +- src/liquid/global/styles/colors/colors.css | 275 +++++++++--------- src/liquid/global/styles/design-tokens.json | 256 ++++++++-------- src/liquid/global/styles/shadows/shadows.css | 2 +- .../global/styles/spacings/spacings.css | 2 +- src/liquid/global/styles/theming/theming.css | 2 +- .../global/styles/typography/typography.css | 4 +- 9 files changed, 411 insertions(+), 290 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 58f5596c6b..dfe470f309 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -45,17 +45,56 @@ function getColorTokenValue(variant, styles) { : '') return referenceName } else { - return relRGBToAbsRGB(variant.fills[0]) + // return relRGBToAbsRGB(variant.fills[0]) + return relRGBToAbsHSL(variant.fills[0]) } } -function relRGBToAbsRGB(fill) { - const r = Math.round(fill.color.r * 255) - const g = Math.round(fill.color.g * 255) - const b = Math.round(fill.color.b * 255) +// function relRGBToAbsRGB(fill) { +// const r = Math.round(fill.color.r * 255) +// const g = Math.round(fill.color.g * 255) +// const b = Math.round(fill.color.b * 255) +// const a = Math.round((fill.opacity ?? 1) * 100) / 100 +// +// return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})` +// } + +function relRGBToAbsHSL(fill) { + const { r, g, b } = fill.color + const cmin = Math.min(r, g, b) + const cmax = Math.max(r, g, b) + const delta = cmax - cmin + let h = 0 + let s = 0 + let l = 0 const a = Math.round((fill.opacity ?? 1) * 100) / 100 - return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})` + // Calculate hue + // No difference + if (delta == 0) h = 0 + // Red is max + else if (cmax == r) h = ((g - b) / delta) % 6 + // Green is max + else if (cmax == g) h = (b - r) / delta + 2 + // Blue is max + else h = (r - g) / delta + 4 + + h = Math.round(h * 60) + + // Make negative hues positive behind 360° + if (h < 0) h += 360 + + // Calculate lightness + l = (cmax + cmin) / 2 + + // Calculate saturation + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) + + // Multiply l and s by 100 + s = +(s * 100).toFixed(1) + l = +(l * 100).toFixed(1) + + return `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` } function parseThemes(items, styles) { @@ -166,7 +205,8 @@ function parseColors(items, styles: { name: string; description: string }[]) { colorShortName + (defaultOnly ? '' : '-' + rest.join('-')) + (variants.includes('Default') ? '/default' : '') - const colorValue = relRGBToAbsRGB(item.fills[0]) + // const colorValue = relRGBToAbsRGB(item.fills[0]) + const colorValue = relRGBToAbsHSL(item.fills[0]) colors[colorName] = colorValue } } @@ -310,7 +350,7 @@ function boxShadowToDropShadow(boxShadow: string): string { function generateShadows(tokens) { return ensureWriteFile( join(stylesDir, 'shadows/shadows.css'), - '/* autogenerated */\n/* prettier-ignore */\n:root {\n' + + '/* autogenerated */ /* prettier-ignore */\n/* prettier-ignore */\n:root {\n' + Object.keys(tokens) .sort() .map((key) => ` --ld-shadow-${key}: ${tokens[key]};`) @@ -328,6 +368,28 @@ function generateShadows(tokens) { ) } +function getHSLPartsFromValue(hslValue) { + const hslParts = hslValue.match(/([\d.]+)(deg|%)|(0\.\d+)/g) + const [h, s, l, a] = hslParts + return { + h: h, + s: s, + l: l, + a: a ? a : '1', + } +} + +function getColorVariables(colorKey, colorVal) { + const hslParts = getHSLPartsFromValue(colorVal) + return ` --ld-col-${colorKey}: hsl(${hslParts.h} ${ + hslParts.s + } calc(var(--ld-col-inv) * (100% - ${ + hslParts.l + }) + (1 - var(--ld-col-inv)) * ${hslParts.l})${ + hslParts.a === '1' ? '' : ' / ' + hslParts.a + });` +} + function generateColors(colorTokens) { const colorVariables = [] @@ -341,22 +403,27 @@ function generateColors(colorTokens) { .replace('/default', '') .replace(/-$/, '') - colorVariables.push(` --ld-col-${colorKey}: ${val};`) + colorVariables.push(getColorVariables(colorKey, val)) // prevents duplicate custom properties in cases like "sp/default" if (colorBaseName !== colorKey) { - colorVariables.push(` --ld-col-${colorBaseName}: ${val};`) + colorVariables.push(getColorVariables(colorBaseName, val)) } } else { - colorVariables.push(` --ld-col-${key}: ${val};`) + colorVariables.push(getColorVariables(key, val)) } }) + colorVariables.push(' --ld-col-inv: 0;') return ensureWriteFile( join(stylesDir, 'colors/colors.css'), - ['/* autogenerated */', ':root {', ...colorVariables.sort(), '}', ''].join( - '\n' - ), + [ + '/* autogenerated */ /* prettier-ignore */', + ':root {', + ...colorVariables.sort(), + '}', + '', + ].join('\n'), 'utf8' ) } @@ -364,7 +431,7 @@ function generateColors(colorTokens) { function generateSpacings(tokens) { return ensureWriteFile( join(stylesDir, 'spacings/spacings.css'), - '/* autogenerated */\n/* prettier-ignore */\n:root {\n' + + '/* autogenerated */ /* prettier-ignore */\n/* prettier-ignore */\n:root {\n' + Object.keys(tokens) .sort((key) => parseInt(key)) .map((key) => ` --ld-sp-${key}: ${tokens[key]};`) @@ -417,7 +484,7 @@ function generateTheming(themes) { return ensureWriteFile( join(stylesDir, 'theming/theming.css'), [ - '/* autogenerated */', + '/* autogenerated */ /* prettier-ignore */', ':root {', ...themeColorVariables.sort(), ...defaultThemeColorVariables.sort(), @@ -444,7 +511,7 @@ function generateTypography(tokens: TypoToken[]) { } return ensureWriteFile( join(stylesDir, 'typography/typography.css'), - '/* autogenerated */\n/* prettier-ignore */\n:root {\n' + + '/* autogenerated */ /* prettier-ignore */\n/* prettier-ignore */\n:root {\n' + // This expects to have at least one headline and one paragraph typo defined ` --ld-font-body: ${bodyFontFamily};\n` + (nonBodyTypoEntry !== undefined @@ -469,7 +536,7 @@ function generateTypography(tokens: TypoToken[]) { function generateBorderRadii(tokens) { return ensureWriteFile( join(stylesDir, 'border-radius/border-radius.css'), - '/* autogenerated */\n/* prettier-ignore */\n:root {\n' + + '/* autogenerated */ /* prettier-ignore */\n/* prettier-ignore */\n:root {\n' + Object.keys(tokens) .sort((key) => parseInt(key)) .map((key) => ` --ld-br-${key}: ${tokens[key]};`) diff --git a/src/docs/components/docs-color/docs-color.tsx b/src/docs/components/docs-color/docs-color.tsx index 336f480b88..84742910c7 100644 --- a/src/docs/components/docs-color/docs-color.tsx +++ b/src/docs/components/docs-color/docs-color.tsx @@ -31,12 +31,65 @@ export class MyComponent { return hsp <= 127.5 * (a || 1) } + private getRelRGBPartsFromValue(value) { + const regex = /rgba?\((\d+),\s?(\d+),\s?(\d+)(?:,\s?([\d.]+))?\)/ + const result = regex.exec(value) + if (result) { + const [, r, g, b, a] = result + return { + r: parseFloat(r) / 255, + g: parseFloat(g) / 255, + b: parseFloat(b) / 255, + a: a ? parseFloat(a) : 1, + } + } else { + return null + } + } + + private convertToHSL(color) { + const { r, g, b, a } = this.getRelRGBPartsFromValue(color) + const cmin = Math.min(r, g, b) + const cmax = Math.max(r, g, b) + const delta = cmax - cmin + let h = 0 + let s = 0 + let l = 0 + + // Calculate hue + // No difference + if (delta == 0) h = 0 + // Red is max + else if (cmax == r) h = ((g - b) / delta) % 6 + // Green is max + else if (cmax == g) h = (b - r) / delta + 2 + // Blue is max + else h = (r - g) / delta + 4 + + h = Math.round(h * 60) + + // Make negative hues positive behind 360° + if (h < 0) h += 360 + + // Calculate lightness + l = (cmax + cmin) / 2 + + // Calculate saturation + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) + + // Multiply l and s by 100 + s = +(s * 100).toFixed(1) + l = +(l * 100).toFixed(1) + + return `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` + } + componentDidLoad() { const color = getComputedStyle(this.bgRef).getPropertyValue( 'background-color' ) setTimeout(() => { - this.val = color + this.val = this.convertToHSL(color) this.dark = this.isDark(color) }) } diff --git a/src/liquid/global/styles/border-radius/border-radius.css b/src/liquid/global/styles/border-radius/border-radius.css index ba41b70100..ca0c7b6f4a 100644 --- a/src/liquid/global/styles/border-radius/border-radius.css +++ b/src/liquid/global/styles/border-radius/border-radius.css @@ -1,4 +1,4 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ /* prettier-ignore */ :root { --ld-br-s: 0.125rem; diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 1700061c7d..c1182b948f 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,139 +1,140 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ :root { - --ld-col-neutral-010: rgb(248, 248, 252); - --ld-col-neutral-050: rgb(236, 236, 244); - --ld-col-neutral-100: rgb(225, 225, 234); - --ld-col-neutral-200: rgb(199, 199, 209); - --ld-col-neutral-300: rgb(169, 169, 186); - --ld-col-neutral-400: rgb(139, 139, 156); - --ld-col-neutral-500: rgb(119, 119, 136); - --ld-col-neutral-600: rgb(94, 94, 114); - --ld-col-neutral-700: rgb(69, 69, 84); - --ld-col-neutral-800: rgb(43, 43, 59); - --ld-col-neutral-900: rgb(15, 26, 46); - --ld-col-neutral-999: rgb(0, 0, 0); - --ld-col-neutral: rgb(94, 94, 114); - --ld-col-rb-010: rgb(244, 250, 255); - --ld-col-rb-050: rgb(236, 245, 252); - --ld-col-rb-100: rgb(216, 234, 248); - --ld-col-rb-200: rgb(173, 210, 241); - --ld-col-rb-300: rgb(129, 187, 233); - --ld-col-rb-400: rgb(80, 160, 222); - --ld-col-rb-500: rgb(43, 141, 216); - --ld-col-rb-600: rgb(15, 105, 175); - --ld-col-rb-700: rgb(8, 88, 151); - --ld-col-rb-800: rgb(10, 59, 97); - --ld-col-rb-900: rgb(0, 28, 56); - --ld-col-rb-alpha-low: rgba(15, 105, 175, 0.2); - --ld-col-rb-alpha-lowest: rgba(15, 105, 175, 0.1); - --ld-col-rb: rgb(15, 105, 175); - --ld-col-rg-010: rgb(244, 251, 248); - --ld-col-rg-050: rgb(222, 251, 228); - --ld-col-rg-100: rgb(198, 244, 205); - --ld-col-rg-200: rgb(139, 233, 154); - --ld-col-rg-300: rgb(121, 221, 149); - --ld-col-rg-400: rgb(80, 192, 115); - --ld-col-rg-500: rgb(48, 164, 90); - --ld-col-rg-600: rgb(1, 136, 76); - --ld-col-rg-700: rgb(4, 100, 46); - --ld-col-rg-800: rgb(5, 76, 32); - --ld-col-rg-900: rgb(0, 45, 14); - --ld-col-rg-alpha-low: rgba(1, 136, 76, 0.2); - --ld-col-rg-alpha-lowest: rgba(1, 136, 76, 0.1); - --ld-col-rg: rgb(1, 136, 76); - --ld-col-rp-010: rgb(250, 247, 255); - --ld-col-rp-050: rgb(242, 236, 253); - --ld-col-rp-100: rgb(235, 228, 252); - --ld-col-rp-200: rgb(212, 195, 248); - --ld-col-rp-300: rgb(192, 155, 251); - --ld-col-rp-400: rgb(158, 126, 224); - --ld-col-rp-500: rgb(138, 104, 210); - --ld-col-rp-600: rgb(113, 78, 187); - --ld-col-rp-700: rgb(80, 50, 145); - --ld-col-rp-800: rgb(60, 34, 116); - --ld-col-rp-900: rgb(35, 24, 61); - --ld-col-rp-alpha-low: rgba(80, 50, 145, 0.2); - --ld-col-rp-alpha-lowest: rgba(80, 50, 145, 0.1); - --ld-col-rp: rgb(80, 50, 145); - --ld-col-rr-010: rgb(255, 246, 248); - --ld-col-rr-050: rgb(255, 237, 238); - --ld-col-rr-100: rgb(255, 218, 220); - --ld-col-rr-200: rgb(255, 179, 184); - --ld-col-rr-300: rgb(244, 137, 150); - --ld-col-rr-400: rgb(250, 97, 120); - --ld-col-rr-500: rgb(244, 58, 102); - --ld-col-rr-600: rgb(230, 30, 80); - --ld-col-rr-700: rgb(172, 21, 59); - --ld-col-rr-800: rgb(117, 12, 36); - --ld-col-rr-900: rgb(75, 5, 23); - --ld-col-rr-alpha-low: rgba(230, 30, 80, 0.2); - --ld-col-rr-alpha-lowest: rgba(230, 30, 80, 0.1); - --ld-col-rr: rgb(230, 30, 80); - --ld-col-sb: rgb(150, 215, 210); - --ld-col-sg: rgb(180, 220, 150); - --ld-col-sp: rgb(225, 195, 205); - --ld-col-sy: rgb(255, 220, 185); - --ld-col-vc-010: rgb(248, 253, 254); - --ld-col-vc-050: rgb(221, 252, 255); - --ld-col-vc-100: rgb(191, 242, 247); - --ld-col-vc-200: rgb(125, 225, 236); - --ld-col-vc-300: rgb(83, 212, 225); - --ld-col-vc-400: rgb(45, 190, 205); - --ld-col-vc-500: rgb(8, 163, 176); - --ld-col-vc-600: rgb(0, 132, 144); - --ld-col-vc-700: rgb(0, 99, 108); - --ld-col-vc-800: rgb(1, 66, 72); - --ld-col-vc-900: rgb(0, 31, 35); - --ld-col-vc-alpha-low: rgba(45, 190, 205, 0.2); - --ld-col-vc-alpha-lowest: rgba(45, 190, 205, 0.1); - --ld-col-vc: rgb(45, 190, 205); - --ld-col-vg-010: rgb(250, 253, 242); - --ld-col-vg-050: rgb(233, 248, 203); - --ld-col-vg-100: rgb(221, 238, 184); - --ld-col-vg-200: rgb(194, 221, 136); - --ld-col-vg-300: rgb(165, 205, 80); - --ld-col-vg-400: rgb(110, 159, 0); - --ld-col-vg-500: rgb(89, 131, 0); - --ld-col-vg-600: rgb(82, 121, 0); - --ld-col-vg-700: rgb(58, 86, 1); - --ld-col-vg-800: rgb(41, 60, 0); - --ld-col-vg-900: rgb(18, 31, 0); - --ld-col-vg-alpha-low: rgba(165, 205, 80, 0.2); - --ld-col-vg-alpha-lowest: rgba(165, 205, 80, 0.1); - --ld-col-vg: rgb(165, 205, 80); - --ld-col-vm-010: rgb(255, 245, 250); - --ld-col-vm-050: rgb(255, 236, 241); - --ld-col-vm-100: rgb(255, 216, 229); - --ld-col-vm-200: rgb(255, 176, 206); - --ld-col-vm-300: rgb(255, 141, 200); - --ld-col-vm-400: rgb(230, 97, 166); - --ld-col-vm-500: rgb(235, 60, 150); - --ld-col-vm-600: rgb(190, 34, 123); - --ld-col-vm-700: rgb(150, 16, 91); - --ld-col-vm-800: rgb(108, 9, 63); - --ld-col-vm-900: rgb(62, 0, 32); - --ld-col-vm-alpha-low: rgba(235, 60, 150, 0.2); - --ld-col-vm-alpha-lowest: rgba(235, 60, 150, 0.1); - --ld-col-vm: rgb(235, 60, 150); - --ld-col-vy-010: rgb(254, 251, 245); - --ld-col-vy-050: rgb(255, 243, 217); - --ld-col-vy-100: rgb(253, 229, 166); - --ld-col-vy-200: rgb(255, 200, 50); - --ld-col-vy-300: rgb(228, 182, 56); - --ld-col-vy-400: rgb(191, 140, 0); - --ld-col-vy-500: rgb(163, 115, 3); - --ld-col-vy-600: rgb(128, 90, 3); - --ld-col-vy-700: rgb(97, 69, 5); - --ld-col-vy-800: rgb(61, 46, 10); - --ld-col-vy-900: rgb(39, 30, 7); - --ld-col-vy-alpha-low: rgba(255, 200, 50, 0.2); - --ld-col-vy-alpha-lowest: rgba(255, 200, 50, 0.1); - --ld-col-vy: rgb(255, 200, 50); - --ld-col-wht-alpha-high: rgba(255, 255, 255, 0.7); - --ld-col-wht-alpha-highest: rgba(255, 255, 255, 0.8); - --ld-col-wht-alpha-low: rgba(255, 255, 255, 0.2); - --ld-col-wht-alpha-lowest: rgba(255, 255, 255, 0.1); - --ld-col-wht-alpha-medium: rgba(255, 255, 255, 0.5); - --ld-col-wht-alpha-none: rgba(255, 255, 255, 0); - --ld-col-wht: rgb(255, 255, 255); + --ld-col-inv: 0; + --ld-col-neutral-010: hsl(240deg 40% calc(var(--ld-col-inv) * (100% - 98%) + (1 - var(--ld-col-inv)) * 98%)); + --ld-col-neutral-050: hsl(240deg 26.7% calc(var(--ld-col-inv) * (100% - 94.1%) + (1 - var(--ld-col-inv)) * 94.1%)); + --ld-col-neutral-100: hsl(240deg 17.6% calc(var(--ld-col-inv) * (100% - 90%) + (1 - var(--ld-col-inv)) * 90%)); + --ld-col-neutral-200: hsl(240deg 9.5% calc(var(--ld-col-inv) * (100% - 80%) + (1 - var(--ld-col-inv)) * 80%)); + --ld-col-neutral-300: hsl(240deg 10.8% calc(var(--ld-col-inv) * (100% - 69.6%) + (1 - var(--ld-col-inv)) * 69.6%)); + --ld-col-neutral-400: hsl(240deg 8% calc(var(--ld-col-inv) * (100% - 58%) + (1 - var(--ld-col-inv)) * 58%)); + --ld-col-neutral-500: hsl(240deg 6.9% calc(var(--ld-col-inv) * (100% - 50%) + (1 - var(--ld-col-inv)) * 50%)); + --ld-col-neutral-600: hsl(240deg 9.6% calc(var(--ld-col-inv) * (100% - 40.8%) + (1 - var(--ld-col-inv)) * 40.8%)); + --ld-col-neutral-700: hsl(240deg 10% calc(var(--ld-col-inv) * (100% - 30%) + (1 - var(--ld-col-inv)) * 30%)); + --ld-col-neutral-800: hsl(240deg 16% calc(var(--ld-col-inv) * (100% - 20%) + (1 - var(--ld-col-inv)) * 20%)); + --ld-col-neutral-900: hsl(220deg 50% calc(var(--ld-col-inv) * (100% - 12%) + (1 - var(--ld-col-inv)) * 12%)); + --ld-col-neutral-999: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 0%) + (1 - var(--ld-col-inv)) * 0%)); + --ld-col-neutral: hsl(240deg 9.6% calc(var(--ld-col-inv) * (100% - 40.8%) + (1 - var(--ld-col-inv)) * 40.8%)); + --ld-col-rb-010: hsl(207deg 100% calc(var(--ld-col-inv) * (100% - 97.8%) + (1 - var(--ld-col-inv)) * 97.8%)); + --ld-col-rb-050: hsl(206deg 72.7% calc(var(--ld-col-inv) * (100% - 95.7%) + (1 - var(--ld-col-inv)) * 95.7%)); + --ld-col-rb-100: hsl(207deg 70% calc(var(--ld-col-inv) * (100% - 91%) + (1 - var(--ld-col-inv)) * 91%)); + --ld-col-rb-200: hsl(207deg 70% calc(var(--ld-col-inv) * (100% - 81.2%) + (1 - var(--ld-col-inv)) * 81.2%)); + --ld-col-rb-300: hsl(207deg 70.3% calc(var(--ld-col-inv) * (100% - 71%) + (1 - var(--ld-col-inv)) * 71%)); + --ld-col-rb-400: hsl(206deg 68.3% calc(var(--ld-col-inv) * (100% - 59.2%) + (1 - var(--ld-col-inv)) * 59.2%)); + --ld-col-rb-500: hsl(206deg 69.2% calc(var(--ld-col-inv) * (100% - 50.8%) + (1 - var(--ld-col-inv)) * 50.8%)); + --ld-col-rb-600: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%)); + --ld-col-rb-700: hsl(207deg 90.4% calc(var(--ld-col-inv) * (100% - 31.1%) + (1 - var(--ld-col-inv)) * 31.1%)); + --ld-col-rb-800: hsl(206deg 82.1% calc(var(--ld-col-inv) * (100% - 20.8%) + (1 - var(--ld-col-inv)) * 20.8%)); + --ld-col-rb-900: hsl(210deg 100% calc(var(--ld-col-inv) * (100% - 11%) + (1 - var(--ld-col-inv)) * 11%)); + --ld-col-rb-alpha-low: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%) / 0.2); + --ld-col-rb-alpha-lowest: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%) / 0.1); + --ld-col-rb: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%)); + --ld-col-rg-010: hsl(154deg 46.7% calc(var(--ld-col-inv) * (100% - 97.1%) + (1 - var(--ld-col-inv)) * 97.1%)); + --ld-col-rg-050: hsl(131deg 80.4% calc(var(--ld-col-inv) * (100% - 92.9%) + (1 - var(--ld-col-inv)) * 92.9%)); + --ld-col-rg-100: hsl(130deg 67.1% calc(var(--ld-col-inv) * (100% - 86.7%) + (1 - var(--ld-col-inv)) * 86.7%)); + --ld-col-rg-200: hsl(130deg 67.9% calc(var(--ld-col-inv) * (100% - 72.9%) + (1 - var(--ld-col-inv)) * 72.9%)); + --ld-col-rg-300: hsl(137deg 60% calc(var(--ld-col-inv) * (100% - 67.1%) + (1 - var(--ld-col-inv)) * 67.1%)); + --ld-col-rg-400: hsl(139deg 47.1% calc(var(--ld-col-inv) * (100% - 53.3%) + (1 - var(--ld-col-inv)) * 53.3%)); + --ld-col-rg-500: hsl(142deg 54.7% calc(var(--ld-col-inv) * (100% - 41.6%) + (1 - var(--ld-col-inv)) * 41.6%)); + --ld-col-rg-600: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%)); + --ld-col-rg-700: hsl(146deg 92.1% calc(var(--ld-col-inv) * (100% - 20.4%) + (1 - var(--ld-col-inv)) * 20.4%)); + --ld-col-rg-800: hsl(143deg 88.8% calc(var(--ld-col-inv) * (100% - 15.8%) + (1 - var(--ld-col-inv)) * 15.8%)); + --ld-col-rg-900: hsl(138deg 100% calc(var(--ld-col-inv) * (100% - 8.7%) + (1 - var(--ld-col-inv)) * 8.7%)); + --ld-col-rg-alpha-low: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%) / 0.2); + --ld-col-rg-alpha-lowest: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%) / 0.1); + --ld-col-rg: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%)); + --ld-col-rp-010: hsl(263deg 100% calc(var(--ld-col-inv) * (100% - 98.4%) + (1 - var(--ld-col-inv)) * 98.4%)); + --ld-col-rp-050: hsl(259deg 82% calc(var(--ld-col-inv) * (100% - 96%) + (1 - var(--ld-col-inv)) * 96%)); + --ld-col-rp-100: hsl(259deg 79.1% calc(var(--ld-col-inv) * (100% - 94%) + (1 - var(--ld-col-inv)) * 94%)); + --ld-col-rp-200: hsl(259deg 80% calc(var(--ld-col-inv) * (100% - 87%) + (1 - var(--ld-col-inv)) * 87%)); + --ld-col-rp-300: hsl(263deg 92.1% calc(var(--ld-col-inv) * (100% - 79.6%) + (1 - var(--ld-col-inv)) * 79.6%)); + --ld-col-rp-400: hsl(260deg 61.3% calc(var(--ld-col-inv) * (100% - 68.6%) + (1 - var(--ld-col-inv)) * 68.6%)); + --ld-col-rp-500: hsl(259deg 54.2% calc(var(--ld-col-inv) * (100% - 61.7%) + (1 - var(--ld-col-inv)) * 61.7%)); + --ld-col-rp-600: hsl(259deg 44.5% calc(var(--ld-col-inv) * (100% - 52%) + (1 - var(--ld-col-inv)) * 52%)); + --ld-col-rp-700: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%)); + --ld-col-rp-800: hsl(259deg 54.8% calc(var(--ld-col-inv) * (100% - 29.3%) + (1 - var(--ld-col-inv)) * 29.3%)); + --ld-col-rp-900: hsl(259deg 44.2% calc(var(--ld-col-inv) * (100% - 16.7%) + (1 - var(--ld-col-inv)) * 16.7%)); + --ld-col-rp-alpha-low: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%) / 0.2); + --ld-col-rp-alpha-lowest: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%) / 0.1); + --ld-col-rp: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%)); + --ld-col-rr-010: hsl(347deg 100% calc(var(--ld-col-inv) * (100% - 98.2%) + (1 - var(--ld-col-inv)) * 98.2%)); + --ld-col-rr-050: hsl(357deg 100% calc(var(--ld-col-inv) * (100% - 96.5%) + (1 - var(--ld-col-inv)) * 96.5%)); + --ld-col-rr-100: hsl(357deg 100% calc(var(--ld-col-inv) * (100% - 92.7%) + (1 - var(--ld-col-inv)) * 92.7%)); + --ld-col-rr-200: hsl(356deg 100% calc(var(--ld-col-inv) * (100% - 85.1%) + (1 - var(--ld-col-inv)) * 85.1%)); + --ld-col-rr-300: hsl(353deg 82.9% calc(var(--ld-col-inv) * (100% - 74.8%) + (1 - var(--ld-col-inv)) * 74.8%)); + --ld-col-rr-400: hsl(351deg 93.9% calc(var(--ld-col-inv) * (100% - 68%) + (1 - var(--ld-col-inv)) * 68%)); + --ld-col-rr-500: hsl(346deg 89.6% calc(var(--ld-col-inv) * (100% - 59.2%) + (1 - var(--ld-col-inv)) * 59.2%)); + --ld-col-rr-600: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%)); + --ld-col-rr-700: hsl(345deg 78.3% calc(var(--ld-col-inv) * (100% - 37.9%) + (1 - var(--ld-col-inv)) * 37.9%)); + --ld-col-rr-800: hsl(346deg 80.8% calc(var(--ld-col-inv) * (100% - 25.4%) + (1 - var(--ld-col-inv)) * 25.4%)); + --ld-col-rr-900: hsl(345deg 87.5% calc(var(--ld-col-inv) * (100% - 15.7%) + (1 - var(--ld-col-inv)) * 15.7%)); + --ld-col-rr-alpha-low: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%) / 0.2); + --ld-col-rr-alpha-lowest: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%) / 0.1); + --ld-col-rr: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%)); + --ld-col-sb: hsl(175deg 44.8% calc(var(--ld-col-inv) * (100% - 71.6%) + (1 - var(--ld-col-inv)) * 71.6%)); + --ld-col-sg: hsl(94deg 50% calc(var(--ld-col-inv) * (100% - 72.5%) + (1 - var(--ld-col-inv)) * 72.5%)); + --ld-col-sp: hsl(340deg 33.3% calc(var(--ld-col-inv) * (100% - 82.4%) + (1 - var(--ld-col-inv)) * 82.4%)); + --ld-col-sy: hsl(30deg 100% calc(var(--ld-col-inv) * (100% - 86.3%) + (1 - var(--ld-col-inv)) * 86.3%)); + --ld-col-vc-010: hsl(190deg 75% calc(var(--ld-col-inv) * (100% - 98.4%) + (1 - var(--ld-col-inv)) * 98.4%)); + --ld-col-vc-050: hsl(185deg 97.1% calc(var(--ld-col-inv) * (100% - 93.3%) + (1 - var(--ld-col-inv)) * 93.3%)); + --ld-col-vc-100: hsl(186deg 78.3% calc(var(--ld-col-inv) * (100% - 85.8%) + (1 - var(--ld-col-inv)) * 85.8%)); + --ld-col-vc-200: hsl(186deg 74.2% calc(var(--ld-col-inv) * (100% - 70.8%) + (1 - var(--ld-col-inv)) * 70.8%)); + --ld-col-vc-300: hsl(185deg 70.4% calc(var(--ld-col-inv) * (100% - 60.4%) + (1 - var(--ld-col-inv)) * 60.4%)); + --ld-col-vc-400: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%)); + --ld-col-vc-500: hsl(185deg 91.7% calc(var(--ld-col-inv) * (100% - 36.1%) + (1 - var(--ld-col-inv)) * 36.1%)); + --ld-col-vc-600: hsl(185deg 100% calc(var(--ld-col-inv) * (100% - 28.2%) + (1 - var(--ld-col-inv)) * 28.2%)); + --ld-col-vc-700: hsl(185deg 99.6% calc(var(--ld-col-inv) * (100% - 21.3%) + (1 - var(--ld-col-inv)) * 21.3%)); + --ld-col-vc-800: hsl(185deg 98.3% calc(var(--ld-col-inv) * (100% - 14.2%) + (1 - var(--ld-col-inv)) * 14.2%)); + --ld-col-vc-900: hsl(187deg 100% calc(var(--ld-col-inv) * (100% - 6.9%) + (1 - var(--ld-col-inv)) * 6.9%)); + --ld-col-vc-alpha-low: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%) / 0.2); + --ld-col-vc-alpha-lowest: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%) / 0.1); + --ld-col-vc: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%)); + --ld-col-vg-010: hsl(76deg 73.3% calc(var(--ld-col-inv) * (100% - 97.1%) + (1 - var(--ld-col-inv)) * 97.1%)); + --ld-col-vg-050: hsl(80deg 76.3% calc(var(--ld-col-inv) * (100% - 88.4%) + (1 - var(--ld-col-inv)) * 88.4%)); + --ld-col-vg-100: hsl(79deg 62.1% calc(var(--ld-col-inv) * (100% - 82.9%) + (1 - var(--ld-col-inv)) * 82.9%)); + --ld-col-vg-200: hsl(79deg 55% calc(var(--ld-col-inv) * (100% - 70%) + (1 - var(--ld-col-inv)) * 70%)); + --ld-col-vg-300: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%)); + --ld-col-vg-400: hsl(78deg 100% calc(var(--ld-col-inv) * (100% - 31.2%) + (1 - var(--ld-col-inv)) * 31.2%)); + --ld-col-vg-500: hsl(79deg 100% calc(var(--ld-col-inv) * (100% - 25.7%) + (1 - var(--ld-col-inv)) * 25.7%)); + --ld-col-vg-600: hsl(80deg 100% calc(var(--ld-col-inv) * (100% - 23.7%) + (1 - var(--ld-col-inv)) * 23.7%)); + --ld-col-vg-700: hsl(80deg 98.8% calc(var(--ld-col-inv) * (100% - 17%) + (1 - var(--ld-col-inv)) * 17%)); + --ld-col-vg-800: hsl(79deg 100% calc(var(--ld-col-inv) * (100% - 11.8%) + (1 - var(--ld-col-inv)) * 11.8%)); + --ld-col-vg-900: hsl(85deg 100% calc(var(--ld-col-inv) * (100% - 6.1%) + (1 - var(--ld-col-inv)) * 6.1%)); + --ld-col-vg-alpha-low: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%) / 0.2); + --ld-col-vg-alpha-lowest: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%) / 0.1); + --ld-col-vg: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%)); + --ld-col-vm-010: hsl(330deg 100% calc(var(--ld-col-inv) * (100% - 98%) + (1 - var(--ld-col-inv)) * 98%)); + --ld-col-vm-050: hsl(344deg 100% calc(var(--ld-col-inv) * (100% - 96.3%) + (1 - var(--ld-col-inv)) * 96.3%)); + --ld-col-vm-100: hsl(340deg 100% calc(var(--ld-col-inv) * (100% - 92.4%) + (1 - var(--ld-col-inv)) * 92.4%)); + --ld-col-vm-200: hsl(337deg 100% calc(var(--ld-col-inv) * (100% - 84.5%) + (1 - var(--ld-col-inv)) * 84.5%)); + --ld-col-vm-300: hsl(329deg 100% calc(var(--ld-col-inv) * (100% - 77.7%) + (1 - var(--ld-col-inv)) * 77.7%)); + --ld-col-vm-400: hsl(329deg 72.5% calc(var(--ld-col-inv) * (100% - 64.2%) + (1 - var(--ld-col-inv)) * 64.2%)); + --ld-col-vm-500: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%)); + --ld-col-vm-600: hsl(326deg 69.6% calc(var(--ld-col-inv) * (100% - 44%) + (1 - var(--ld-col-inv)) * 44%)); + --ld-col-vm-700: hsl(326deg 80.4% calc(var(--ld-col-inv) * (100% - 32.5%) + (1 - var(--ld-col-inv)) * 32.5%)); + --ld-col-vm-800: hsl(327deg 85.4% calc(var(--ld-col-inv) * (100% - 22.9%) + (1 - var(--ld-col-inv)) * 22.9%)); + --ld-col-vm-900: hsl(329deg 100% calc(var(--ld-col-inv) * (100% - 12.2%) + (1 - var(--ld-col-inv)) * 12.2%)); + --ld-col-vm-alpha-low: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%) / 0.2); + --ld-col-vm-alpha-lowest: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%) / 0.1); + --ld-col-vm: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%)); + --ld-col-vy-010: hsl(40deg 81.8% calc(var(--ld-col-inv) * (100% - 97.8%) + (1 - var(--ld-col-inv)) * 97.8%)); + --ld-col-vy-050: hsl(41deg 100% calc(var(--ld-col-inv) * (100% - 92.5%) + (1 - var(--ld-col-inv)) * 92.5%)); + --ld-col-vy-100: hsl(44deg 95.8% calc(var(--ld-col-inv) * (100% - 82.1%) + (1 - var(--ld-col-inv)) * 82.1%)); + --ld-col-vy-200: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%)); + --ld-col-vy-300: hsl(44deg 76.3% calc(var(--ld-col-inv) * (100% - 55.8%) + (1 - var(--ld-col-inv)) * 55.8%)); + --ld-col-vy-400: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 37.5%) + (1 - var(--ld-col-inv)) * 37.5%)); + --ld-col-vy-500: hsl(42deg 96.7% calc(var(--ld-col-inv) * (100% - 32.5%) + (1 - var(--ld-col-inv)) * 32.5%)); + --ld-col-vy-600: hsl(42deg 95.4% calc(var(--ld-col-inv) * (100% - 25.7%) + (1 - var(--ld-col-inv)) * 25.7%)); + --ld-col-vy-700: hsl(42deg 90% calc(var(--ld-col-inv) * (100% - 20%) + (1 - var(--ld-col-inv)) * 20%)); + --ld-col-vy-800: hsl(42deg 71.8% calc(var(--ld-col-inv) * (100% - 13.9%) + (1 - var(--ld-col-inv)) * 13.9%)); + --ld-col-vy-900: hsl(42deg 68.3% calc(var(--ld-col-inv) * (100% - 9.2%) + (1 - var(--ld-col-inv)) * 9.2%)); + --ld-col-vy-alpha-low: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%) / 0.2); + --ld-col-vy-alpha-lowest: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%) / 0.1); + --ld-col-vy: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%)); + --ld-col-wht-alpha-high: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.7); + --ld-col-wht-alpha-highest: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.8); + --ld-col-wht-alpha-low: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.2); + --ld-col-wht-alpha-lowest: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.1); + --ld-col-wht-alpha-medium: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.5); + --ld-col-wht-alpha-none: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%)); + --ld-col-wht: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%)); } diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index 9b5bb4ae07..2053bb95b4 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -206,133 +206,133 @@ "40": "2.5rem" }, "colors": { - "neutral-010": "rgb(248, 248, 252)", - "neutral-050": "rgb(236, 236, 244)", - "neutral-100": "rgb(225, 225, 234)", - "neutral-200": "rgb(199, 199, 209)", - "neutral-300": "rgb(169, 169, 186)", - "neutral-400": "rgb(139, 139, 156)", - "neutral-500": "rgb(119, 119, 136)", - "neutral-600/default": "rgb(94, 94, 114)", - "neutral-700": "rgb(69, 69, 84)", - "neutral-800": "rgb(43, 43, 59)", - "neutral-900": "rgb(15, 26, 46)", - "rr-010": "rgb(255, 246, 248)", - "rr-050": "rgb(255, 237, 238)", - "rr-100": "rgb(255, 218, 220)", - "rr-200": "rgb(255, 179, 184)", - "rr-300": "rgb(244, 137, 150)", - "rr-400": "rgb(250, 97, 120)", - "rr-500": "rgb(244, 58, 102)", - "rr-600/default": "rgb(230, 30, 80)", - "rr-alpha-lowest": "rgba(230, 30, 80, 0.1)", - "rr-alpha-low": "rgba(230, 30, 80, 0.2)", - "rr-700": "rgb(172, 21, 59)", - "rr-800": "rgb(117, 12, 36)", - "rr-900": "rgb(75, 5, 23)", - "rb-010": "rgb(244, 250, 255)", - "rb-050": "rgb(236, 245, 252)", - "rb-100": "rgb(216, 234, 248)", - "rb-200": "rgb(173, 210, 241)", - "rb-300": "rgb(129, 187, 233)", - "rb-400": "rgb(80, 160, 222)", - "rb-500": "rgb(43, 141, 216)", - "rb-600/default": "rgb(15, 105, 175)", - "rb-alpha-lowest": "rgba(15, 105, 175, 0.1)", - "rb-alpha-low": "rgba(15, 105, 175, 0.2)", - "rb-700": "rgb(8, 88, 151)", - "rb-800": "rgb(10, 59, 97)", - "rb-900": "rgb(0, 28, 56)", - "vy-010": "rgb(254, 251, 245)", - "vy-050": "rgb(255, 243, 217)", - "vy-100": "rgb(253, 229, 166)", - "vy-200/default": "rgb(255, 200, 50)", - "vy-alpha-lowest": "rgba(255, 200, 50, 0.1)", - "vy-alpha-low": "rgba(255, 200, 50, 0.2)", - "vy-300": "rgb(228, 182, 56)", - "vy-400": "rgb(191, 140, 0)", - "vy-500": "rgb(163, 115, 3)", - "vy-600": "rgb(128, 90, 3)", - "vy-700": "rgb(97, 69, 5)", - "vy-800": "rgb(61, 46, 10)", - "vy-900": "rgb(39, 30, 7)", - "rp-010": "rgb(250, 247, 255)", - "rp-050": "rgb(242, 236, 253)", - "rp-100": "rgb(235, 228, 252)", - "rp-200": "rgb(212, 195, 248)", - "rp-300": "rgb(192, 155, 251)", - "rp-400": "rgb(158, 126, 224)", - "rp-500": "rgb(138, 104, 210)", - "rp-600": "rgb(113, 78, 187)", - "rp-700/default": "rgb(80, 50, 145)", - "rp-alpha-lowest": "rgba(80, 50, 145, 0.1)", - "rp-alpha-low": "rgba(80, 50, 145, 0.2)", - "rp-800": "rgb(60, 34, 116)", - "rp-900": "rgb(35, 24, 61)", - "vg-010": "rgb(250, 253, 242)", - "vg-050": "rgb(233, 248, 203)", - "vg-100": "rgb(221, 238, 184)", - "vg-200": "rgb(194, 221, 136)", - "vg-300/default": "rgb(165, 205, 80)", - "vg-alpha-lowest": "rgba(165, 205, 80, 0.1)", - "vg-alpha-low": "rgba(165, 205, 80, 0.2)", - "vg-400": "rgb(110, 159, 0)", - "vg-500": "rgb(89, 131, 0)", - "vg-600": "rgb(82, 121, 0)", - "vg-700": "rgb(58, 86, 1)", - "vg-800": "rgb(41, 60, 0)", - "vg-900": "rgb(18, 31, 0)", - "vm-010": "rgb(255, 245, 250)", - "vm-050": "rgb(255, 236, 241)", - "vm-100": "rgb(255, 216, 229)", - "vm-200": "rgb(255, 176, 206)", - "vm-300": "rgb(255, 141, 200)", - "vm-400": "rgb(230, 97, 166)", - "vm-500/default": "rgb(235, 60, 150)", - "vm-alpha-lowest": "rgba(235, 60, 150, 0.1)", - "vm-alpha-low": "rgba(235, 60, 150, 0.2)", - "vm-600": "rgb(190, 34, 123)", - "vm-700": "rgb(150, 16, 91)", - "vm-800": "rgb(108, 9, 63)", - "vm-900": "rgb(62, 0, 32)", - "rg-010": "rgb(244, 251, 248)", - "rg-050": "rgb(222, 251, 228)", - "rg-100": "rgb(198, 244, 205)", - "rg-200": "rgb(139, 233, 154)", - "rg-300": "rgb(121, 221, 149)", - "rg-400": "rgb(80, 192, 115)", - "rg-500": "rgb(48, 164, 90)", - "rg-600/default": "rgb(1, 136, 76)", - "rg-alpha-lowest": "rgba(1, 136, 76, 0.1)", - "rg-alpha-low": "rgba(1, 136, 76, 0.2)", - "rg-700": "rgb(4, 100, 46)", - "rg-800": "rgb(5, 76, 32)", - "rg-900": "rgb(0, 45, 14)", - "vc-010": "rgb(248, 253, 254)", - "vc-050": "rgb(221, 252, 255)", - "vc-100": "rgb(191, 242, 247)", - "vc-200": "rgb(125, 225, 236)", - "vc-300": "rgb(83, 212, 225)", - "vc-400/default": "rgb(45, 190, 205)", - "vc-alpha-lowest": "rgba(45, 190, 205, 0.1)", - "vc-alpha-low": "rgba(45, 190, 205, 0.2)", - "vc-500": "rgb(8, 163, 176)", - "vc-600": "rgb(0, 132, 144)", - "vc-700": "rgb(0, 99, 108)", - "vc-800": "rgb(1, 66, 72)", - "vc-900": "rgb(0, 31, 35)", - "sg/default": "rgb(180, 220, 150)", - "sy/default": "rgb(255, 220, 185)", - "sb/default": "rgb(150, 215, 210)", - "sp/default": "rgb(225, 195, 205)", - "wht/default": "rgb(255, 255, 255)", - "wht-alpha-highest": "rgba(255, 255, 255, 0.8)", - "wht-alpha-high": "rgba(255, 255, 255, 0.7)", - "wht-alpha-medium": "rgba(255, 255, 255, 0.5)", - "wht-alpha-low": "rgba(255, 255, 255, 0.2)", - "wht-alpha-lowest": "rgba(255, 255, 255, 0.1)", - "wht-alpha-none": "rgba(255, 255, 255, 0)", - "neutral-999": "rgb(0, 0, 0)" + "neutral-010": "hsl(240deg 40% 98%)", + "neutral-050": "hsl(240deg 26.7% 94.1%)", + "neutral-100": "hsl(240deg 17.6% 90%)", + "neutral-200": "hsl(240deg 9.5% 80%)", + "neutral-300": "hsl(240deg 10.8% 69.6%)", + "neutral-400": "hsl(240deg 8% 58%)", + "neutral-500": "hsl(240deg 6.9% 50%)", + "neutral-600/default": "hsl(240deg 9.6% 40.8%)", + "neutral-700": "hsl(240deg 10% 30%)", + "neutral-800": "hsl(240deg 16% 20%)", + "neutral-900": "hsl(220deg 50% 12%)", + "rr-010": "hsl(347deg 100% 98.2%)", + "rr-050": "hsl(357deg 100% 96.5%)", + "rr-100": "hsl(357deg 100% 92.7%)", + "rr-200": "hsl(356deg 100% 85.1%)", + "rr-300": "hsl(353deg 82.9% 74.8%)", + "rr-400": "hsl(351deg 93.9% 68%)", + "rr-500": "hsl(346deg 89.6% 59.2%)", + "rr-600/default": "hsl(345deg 80% 51%)", + "rr-alpha-lowest": "hsl(345deg 80% 51% / 0.1)", + "rr-alpha-low": "hsl(345deg 80% 51% / 0.2)", + "rr-700": "hsl(345deg 78.3% 37.9%)", + "rr-800": "hsl(346deg 80.8% 25.4%)", + "rr-900": "hsl(345deg 87.5% 15.7%)", + "rb-010": "hsl(207deg 100% 97.8%)", + "rb-050": "hsl(206deg 72.7% 95.7%)", + "rb-100": "hsl(207deg 70% 91%)", + "rb-200": "hsl(207deg 70% 81.2%)", + "rb-300": "hsl(207deg 70.3% 71%)", + "rb-400": "hsl(206deg 68.3% 59.2%)", + "rb-500": "hsl(206deg 69.2% 50.8%)", + "rb-600/default": "hsl(206deg 84.2% 37.3%)", + "rb-alpha-lowest": "hsl(206deg 84.2% 37.3% / 0.1)", + "rb-alpha-low": "hsl(206deg 84.2% 37.3% / 0.2)", + "rb-700": "hsl(207deg 90.4% 31.1%)", + "rb-800": "hsl(206deg 82.1% 20.8%)", + "rb-900": "hsl(210deg 100% 11%)", + "vy-010": "hsl(40deg 81.8% 97.8%)", + "vy-050": "hsl(41deg 100% 92.5%)", + "vy-100": "hsl(44deg 95.8% 82.1%)", + "vy-200/default": "hsl(44deg 100% 59.8%)", + "vy-alpha-lowest": "hsl(44deg 100% 59.8% / 0.1)", + "vy-alpha-low": "hsl(44deg 100% 59.8% / 0.2)", + "vy-300": "hsl(44deg 76.3% 55.8%)", + "vy-400": "hsl(44deg 100% 37.5%)", + "vy-500": "hsl(42deg 96.7% 32.5%)", + "vy-600": "hsl(42deg 95.4% 25.7%)", + "vy-700": "hsl(42deg 90% 20%)", + "vy-800": "hsl(42deg 71.8% 13.9%)", + "vy-900": "hsl(42deg 68.3% 9.2%)", + "rp-010": "hsl(263deg 100% 98.4%)", + "rp-050": "hsl(259deg 82% 96%)", + "rp-100": "hsl(259deg 79.1% 94%)", + "rp-200": "hsl(259deg 80% 87%)", + "rp-300": "hsl(263deg 92.1% 79.6%)", + "rp-400": "hsl(260deg 61.3% 68.6%)", + "rp-500": "hsl(259deg 54.2% 61.7%)", + "rp-600": "hsl(259deg 44.5% 52%)", + "rp-700/default": "hsl(259deg 48.7% 38.2%)", + "rp-alpha-lowest": "hsl(259deg 48.7% 38.2% / 0.1)", + "rp-alpha-low": "hsl(259deg 48.7% 38.2% / 0.2)", + "rp-800": "hsl(259deg 54.8% 29.3%)", + "rp-900": "hsl(259deg 44.2% 16.7%)", + "vg-010": "hsl(76deg 73.3% 97.1%)", + "vg-050": "hsl(80deg 76.3% 88.4%)", + "vg-100": "hsl(79deg 62.1% 82.9%)", + "vg-200": "hsl(79deg 55% 70%)", + "vg-300/default": "hsl(79deg 55.6% 55.9%)", + "vg-alpha-lowest": "hsl(79deg 55.6% 55.9% / 0.1)", + "vg-alpha-low": "hsl(79deg 55.6% 55.9% / 0.2)", + "vg-400": "hsl(78deg 100% 31.2%)", + "vg-500": "hsl(79deg 100% 25.7%)", + "vg-600": "hsl(80deg 100% 23.7%)", + "vg-700": "hsl(80deg 98.8% 17%)", + "vg-800": "hsl(79deg 100% 11.8%)", + "vg-900": "hsl(85deg 100% 6.1%)", + "vm-010": "hsl(330deg 100% 98%)", + "vm-050": "hsl(344deg 100% 96.3%)", + "vm-100": "hsl(340deg 100% 92.4%)", + "vm-200": "hsl(337deg 100% 84.5%)", + "vm-300": "hsl(329deg 100% 77.7%)", + "vm-400": "hsl(329deg 72.5% 64.2%)", + "vm-500/default": "hsl(329deg 81.4% 57.8%)", + "vm-alpha-lowest": "hsl(329deg 81.4% 57.8% / 0.1)", + "vm-alpha-low": "hsl(329deg 81.4% 57.8% / 0.2)", + "vm-600": "hsl(326deg 69.6% 44%)", + "vm-700": "hsl(326deg 80.4% 32.5%)", + "vm-800": "hsl(327deg 85.4% 22.9%)", + "vm-900": "hsl(329deg 100% 12.2%)", + "rg-010": "hsl(154deg 46.7% 97.1%)", + "rg-050": "hsl(131deg 80.4% 92.9%)", + "rg-100": "hsl(130deg 67.1% 86.7%)", + "rg-200": "hsl(130deg 67.9% 72.9%)", + "rg-300": "hsl(137deg 60% 67.1%)", + "rg-400": "hsl(139deg 47.1% 53.3%)", + "rg-500": "hsl(142deg 54.7% 41.6%)", + "rg-600/default": "hsl(153deg 98.5% 26.9%)", + "rg-alpha-lowest": "hsl(153deg 98.5% 26.9% / 0.1)", + "rg-alpha-low": "hsl(153deg 98.5% 26.9% / 0.2)", + "rg-700": "hsl(146deg 92.1% 20.4%)", + "rg-800": "hsl(143deg 88.8% 15.8%)", + "rg-900": "hsl(138deg 100% 8.7%)", + "vc-010": "hsl(190deg 75% 98.4%)", + "vc-050": "hsl(185deg 97.1% 93.3%)", + "vc-100": "hsl(186deg 78.3% 85.8%)", + "vc-200": "hsl(186deg 74.2% 70.8%)", + "vc-300": "hsl(185deg 70.4% 60.4%)", + "vc-400/default": "hsl(186deg 64% 49%)", + "vc-alpha-lowest": "hsl(186deg 64% 49% / 0.1)", + "vc-alpha-low": "hsl(186deg 64% 49% / 0.2)", + "vc-500": "hsl(185deg 91.7% 36.1%)", + "vc-600": "hsl(185deg 100% 28.2%)", + "vc-700": "hsl(185deg 99.6% 21.3%)", + "vc-800": "hsl(185deg 98.3% 14.2%)", + "vc-900": "hsl(187deg 100% 6.9%)", + "sg/default": "hsl(94deg 50% 72.5%)", + "sy/default": "hsl(30deg 100% 86.3%)", + "sb/default": "hsl(175deg 44.8% 71.6%)", + "sp/default": "hsl(340deg 33.3% 82.4%)", + "wht/default": "hsl(0deg 0% 100%)", + "wht-alpha-highest": "hsl(0deg 0% 100% / 0.8)", + "wht-alpha-high": "hsl(0deg 0% 100% / 0.7)", + "wht-alpha-medium": "hsl(0deg 0% 100% / 0.5)", + "wht-alpha-low": "hsl(0deg 0% 100% / 0.2)", + "wht-alpha-lowest": "hsl(0deg 0% 100% / 0.1)", + "wht-alpha-none": "hsl(0deg 0% 100% / 0)", + "neutral-999": "hsl(0deg 0% 0%)" }, "typography": { "xh1": { @@ -460,7 +460,7 @@ "body-s": { "fontFamily": "Lato, Helvetica, Arial, sans-serif", "fontSize": "0.875rem", - "lineHeight": "176%" + "lineHeight": "180%" }, "body-m": { "fontFamily": "Lato, Helvetica, Arial, sans-serif", diff --git a/src/liquid/global/styles/shadows/shadows.css b/src/liquid/global/styles/shadows/shadows.css index e3c6291a7e..a217645ab3 100644 --- a/src/liquid/global/styles/shadows/shadows.css +++ b/src/liquid/global/styles/shadows/shadows.css @@ -1,4 +1,4 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ /* prettier-ignore */ :root { --ld-shadow-active: 0 0 0.25rem rgba(15, 26, 46, 0.15), 0 1.5rem 2.5rem rgba(15, 26, 46, 0.15); diff --git a/src/liquid/global/styles/spacings/spacings.css b/src/liquid/global/styles/spacings/spacings.css index e80ef01e14..1d612e89ad 100644 --- a/src/liquid/global/styles/spacings/spacings.css +++ b/src/liquid/global/styles/spacings/spacings.css @@ -1,4 +1,4 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ /* prettier-ignore */ :root { --ld-sp-1: 0.0625rem; diff --git a/src/liquid/global/styles/theming/theming.css b/src/liquid/global/styles/theming/theming.css index a5236faa5b..c24460e812 100644 --- a/src/liquid/global/styles/theming/theming.css +++ b/src/liquid/global/styles/theming/theming.css @@ -1,4 +1,4 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ :root { --ld-thm-bubblegum-error-active: var(--ld-col-rr-900); --ld-thm-bubblegum-error-alpha-low: var(--ld-col-rr-alpha-low); diff --git a/src/liquid/global/styles/typography/typography.css b/src/liquid/global/styles/typography/typography.css index 2a361218d4..8fc95ec781 100644 --- a/src/liquid/global/styles/typography/typography.css +++ b/src/liquid/global/styles/typography/typography.css @@ -1,4 +1,4 @@ -/* autogenerated */ +/* autogenerated */ /* prettier-ignore */ /* prettier-ignore */ :root { --ld-font-body: Lato, Helvetica, Arial, sans-serif; @@ -11,7 +11,7 @@ --ld-typo-b6: 1.375rem/120% var(--ld-font-display); --ld-typo-body-l: 1.125rem/160% var(--ld-font-body); --ld-typo-body-m: 1rem/160% var(--ld-font-body); - --ld-typo-body-s: 0.875rem/176% var(--ld-font-body); + --ld-typo-body-s: 0.875rem/180% var(--ld-font-body); --ld-typo-body-xl: 1.375rem/160% var(--ld-font-body); --ld-typo-body-xs: 0.75rem/180% var(--ld-font-body); --ld-typo-cap-l: 700 1.25rem/140% var(--ld-font-body); From 4cf5adb9f9d301938d120d884e6a26228e0d892c Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Tue, 21 Mar 2023 21:28:53 +0100 Subject: [PATCH 02/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 62 ++- .../docs-border-radius/docs-border-radius.css | 2 + .../docs-btn-search/docs-btn-search.css | 2 + src/docs/components/docs-color/docs-color.css | 2 + .../docs-contributors/docs-contributors.css | 26 +- .../docs-edit-on-github.css | 6 +- .../components/docs-example/docs-example.css | 24 +- .../components/docs-example/docs-example.tsx | 6 +- src/docs/components/docs-icon/docs-icon.css | 2 + src/docs/components/docs-main/docs-main.css | 10 +- src/docs/components/docs-nav/docs-nav.css | 6 +- .../docs-page-nav/docs-page-nav.css | 2 + .../components/docs-shadow/docs-shadow.css | 2 + .../components/docs-spacing/docs-spacing.css | 2 + .../docs-switch-dark-light.css | 2 + .../docs-switch-dark-light.tsx | 3 +- src/docs/components/docs-toc/docs-toc.css | 2 + .../docs-typography/docs-typography.css | 2 + .../docs-view-on-figma/docs-view-on-figma.css | 2 + src/docs/global/styles/code.css | 2 + src/docs/global/styles/global.css | 10 +- src/docs/pages/global/colors.md | 11 + src/liquid/global/styles/colors/colors.css | 360 +++++++++++------- src/liquid/global/styles/colors/dark.css | 8 + src/liquid/global/styles/colors/layers.css | 17 + src/liquid/global/styles/global.css | 2 + 26 files changed, 359 insertions(+), 216 deletions(-) create mode 100644 src/liquid/global/styles/colors/dark.css create mode 100644 src/liquid/global/styles/colors/layers.css diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index dfe470f309..bf9adb8f68 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -379,38 +379,68 @@ function getHSLPartsFromValue(hslValue) { } } -function getColorVariables(colorKey, colorVal) { - const hslParts = getHSLPartsFromValue(colorVal) - return ` --ld-col-${colorKey}: hsl(${hslParts.h} ${ - hslParts.s - } calc(var(--ld-col-inv) * (100% - ${ - hslParts.l - }) + (1 - var(--ld-col-inv)) * ${hslParts.l})${ - hslParts.a === '1' ? '' : ' / ' + hslParts.a +function getColorVariable(colorBaseName, colorKey, l, a) { + return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${l}${ + a === 1 ? '' : ' / ' + a });` } +function getLighness(baseLighness, x) { + return baseLighness * x +} + function generateColors(colorTokens) { const colorVariables = [] // Basic colors Object.keys(colorTokens).forEach((key) => { - const val = colorTokens[key] + const colorVal = colorTokens[key] if (key.includes('/default')) { - const colorKey = key.split('/default')[0] + const { h, s, l } = getHSLPartsFromValue(colorVal) const colorBaseName = key .replace(/\d/g, '') .replace('/default', '') .replace(/-$/, '') - colorVariables.push(getColorVariables(colorKey, val)) + colorVariables.push( + ` --ld-col-${colorBaseName}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${l});` + ) + colorVariables.push(` --ld-col-${colorBaseName}-h: ${h};`) + colorVariables.push(` --ld-col-${colorBaseName}-s: ${s};`) - // prevents duplicate custom properties in cases like "sp/default" - if (colorBaseName !== colorKey) { - colorVariables.push(getColorVariables(colorBaseName, val)) + if (colorBaseName === 'wht') { + return } - } else { - colorVariables.push(getColorVariables(key, val)) + + let x + if (key.includes('010')) x = 1 + else if (key.includes('050')) x = 2 + else x = (parseInt(key.match(/\d+/g)?.at(0)) || 0) / 100 + const lightnessRatio = (parseFloat(l) / x).toFixed(2) + + colorVariables.push(` --ld-col-${colorBaseName}-lr: ${lightnessRatio};`) + ;[ + '010', + '050', + '100', + '200', + '300', + '400', + '500', + '600', + '700', + '800', + '900', + 'alpha-low', + 'alpha-lowest', + ].forEach((colorKey, i) => { + let a = 1 + if (colorKey === 'alpha-low') a = 0.2 + else if (colorKey === 'alpha-lowest') a = 0.1 + colorVariables.push( + getColorVariable(colorBaseName, colorKey, a < 1 ? l : l * i + 1, a) + ) + }) } }) colorVariables.push(' --ld-col-inv: 0;') diff --git a/src/docs/components/docs-border-radius/docs-border-radius.css b/src/docs/components/docs-border-radius/docs-border-radius.css index 44b66dfc49..8a84dd1d66 100644 --- a/src/docs/components/docs-border-radius/docs-border-radius.css +++ b/src/docs/components/docs-border-radius/docs-border-radius.css @@ -11,6 +11,7 @@ @mixin docs-border-radius-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-border-radius-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-border-radius-ui-light; } +*/ .docs-border-radius { display: flex; diff --git a/src/docs/components/docs-btn-search/docs-btn-search.css b/src/docs/components/docs-btn-search/docs-btn-search.css index 1867b79308..aa770c0e75 100644 --- a/src/docs/components/docs-btn-search/docs-btn-search.css +++ b/src/docs/components/docs-btn-search/docs-btn-search.css @@ -17,6 +17,7 @@ @mixin docs-btn-search-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-btn-search-ui-dark; } @@ -26,6 +27,7 @@ .docs-ui-light { @mixin docs-btn-search-ui-light; } +*/ .docs-btn-search__btn { display: flex; diff --git a/src/docs/components/docs-color/docs-color.css b/src/docs/components/docs-color/docs-color.css index df90989fa2..aa76b644ff 100644 --- a/src/docs/components/docs-color/docs-color.css +++ b/src/docs/components/docs-color/docs-color.css @@ -11,6 +11,7 @@ @mixin docs-color-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-color-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-color-ui-light; } +*/ .docs-color { background: #090909 diff --git a/src/docs/components/docs-contributors/docs-contributors.css b/src/docs/components/docs-contributors/docs-contributors.css index 998b775980..edf9215136 100644 --- a/src/docs/components/docs-contributors/docs-contributors.css +++ b/src/docs/components/docs-contributors/docs-contributors.css @@ -1,26 +1,3 @@ -@define-mixin docs-contributors-ui-light { - .docs-contributors__img { - border-color: var(--ld-col-wht); - } -} -@define-mixin docs-contributors-ui-dark { - .docs-contributors__img { - border-color: var(--ld-col-neutral-800); - } -} - -@mixin docs-contributors-ui-light; - -@media (prefers-color-scheme: dark) { - @mixin docs-contributors-ui-dark; -} -.docs-ui-light { - @mixin docs-contributors-ui-light; -} -.docs-ui-dark { - @mixin docs-contributors-ui-dark; -} - .docs-contributors { margin: var(--ld-sp-40) 0; display: block; @@ -57,7 +34,6 @@ display: inline-flex; text-align: center; text-decoration: none; - color: var(--color-dodger-blue); border: 0; &:hover { @@ -74,5 +50,5 @@ .docs-contributors__img { border-radius: var(--ld-br-full); - border: var(--ld-sp-2) solid; + border: var(--ld-sp-1) solid var(--ld-col-neutral-800); } diff --git a/src/docs/components/docs-edit-on-github/docs-edit-on-github.css b/src/docs/components/docs-edit-on-github/docs-edit-on-github.css index b125ff5f8c..7984298318 100644 --- a/src/docs/components/docs-edit-on-github/docs-edit-on-github.css +++ b/src/docs/components/docs-edit-on-github/docs-edit-on-github.css @@ -1,8 +1,8 @@ @define-mixin docs-edit-on-github-ui-light { .docs-edit-on-github .ld-button { - background-color: var(--ld-col-wht); + background-color: var(--ld-layer-2); color: var(--ld-col-neutral-900); - box-shadow: inset 0 0 0 2px var(--ld-col-neutral-100); + box-shadow: inset 0 0 0 2px var(--ld-layer-1); &:focus:focus-visible { color: var(--ld-col-neutral-900); @@ -54,6 +54,7 @@ @mixin docs-edit-on-github-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-edit-on-github-ui-dark; } @@ -63,6 +64,7 @@ .docs-ui-light { @mixin docs-edit-on-github-ui-light; } +*/ .docs-edit-on-github { display: block; diff --git a/src/docs/components/docs-example/docs-example.css b/src/docs/components/docs-example/docs-example.css index 1e04d76251..7666a27023 100644 --- a/src/docs/components/docs-example/docs-example.css +++ b/src/docs/components/docs-example/docs-example.css @@ -4,8 +4,7 @@ } .docs-example__tools-scroll-container { - background-color: var(--ld-col-neutral-050); - border-color: var(--ld-col-neutral-100); + background-color: var(--ld-layer-3); } .docs-example__tools { @@ -25,7 +24,6 @@ .docs-example__tools-scroll-container { background-color: var(--ld-col-neutral-700); - border-color: var(--ld-col-neutral-700); } .docs-example__tools { @@ -37,14 +35,11 @@ .docs-example__copy-to-clipboard { filter: invert(1) hue-rotate(180deg); } - - .docs-example--has-border .docs-example__show { - border-color: transparent; - } } @mixin docs-example-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-example-ui-dark; } @@ -54,6 +49,7 @@ .docs-ui-dark { @mixin docs-example-ui-dark; } +*/ .docs-example { display: block; @@ -77,8 +73,6 @@ overflow: auto; display: flex; width: 100%; - border-style: solid; - border-width: var(--ld-sp-1); border-bottom-left-radius: var(--ld-br-l); border-bottom-right-radius: var(--ld-br-l); } @@ -109,20 +103,14 @@ } .docs-example__show { - background-color: var(--ld-col-neutral-010); + background-color: var(--ld-layer-4); color: var(--ld-col-neutral-900); - border-bottom-width: 0; border-top-left-radius: var(--ld-br-l); border-top-right-radius: var(--ld-br-l); overflow: hidden; will-change: transform; /* Fixes overflow in Safari */ color-scheme: light; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ - .docs-example--has-border & { - border: var(--ld-sp-1) solid var(--ld-col-neutral-100); - border-bottom: 0; - } - .docs-example--has-padding & { padding: 0 var(--ld-sp-8) var(--ld-sp-24); @@ -161,8 +149,6 @@ } .docs-example__show--brand { - border-color: transparent; - &.ld-theme-ocean { background-color: var(--ld-thm-ocean-primary); } @@ -177,7 +163,7 @@ } .docs-example__show--light { - background-color: var(--ld-col-wht); + background-color: var(--ld-layer-5); } .docs-example--code-visible { diff --git a/src/docs/components/docs-example/docs-example.tsx b/src/docs/components/docs-example/docs-example.tsx index 9c34089069..2b2c587329 100644 --- a/src/docs/components/docs-example/docs-example.tsx +++ b/src/docs/components/docs-example/docs-example.tsx @@ -35,9 +35,6 @@ export class DocsExample { /** React component markup encoded as URI component. */ @Prop() codeReactComponent: string - /** Adds a thin border to the container. */ - @Prop() hasBorder = false - /** Puts some space between content and container. */ @Prop() hasPadding = false @@ -131,7 +128,6 @@ export class DocsExample { const cl = [ 'docs-example', this.isCodeVisible && 'docs-example--code-visible', - this.hasBorder && 'docs-example--has-border', this.hasPadding && 'docs-example--has-padding', this.codeType === 'wc' && 'docs-example--web-component', this.codeType === 'css' && 'docs-example--css-component', @@ -192,7 +188,7 @@ export class DocsExample { viewBox="-11.5 -10.2 23 20.5" style={{ transform: 'scale(1.1)' }} > - + diff --git a/src/docs/components/docs-icon/docs-icon.css b/src/docs/components/docs-icon/docs-icon.css index 673e3364f0..b10fb5ea2d 100644 --- a/src/docs/components/docs-icon/docs-icon.css +++ b/src/docs/components/docs-icon/docs-icon.css @@ -19,6 +19,7 @@ @mixin docs-icon-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-icon-ui-dark; } @@ -28,6 +29,7 @@ .docs-ui-light { @mixin docs-icon-ui-light; } +*/ .docs-icon { align-items: center; diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css index 86f4afce46..a4c8aa7172 100644 --- a/src/docs/components/docs-main/docs-main.css +++ b/src/docs/components/docs-main/docs-main.css @@ -193,6 +193,7 @@ @mixin docs-main-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-main-ui-dark; } @@ -202,6 +203,7 @@ .docs-ui-light { @mixin docs-main-ui-light; } +*/ .docs-main { --ld-typo-code-s: 0.875rem / 176% 'Source Code Pro', Consolas, Monaco, @@ -247,7 +249,7 @@ code { display: inline-flex; padding: 0 var(--ld-sp-4); - border-radius: var(--ld-br-s); + border-radius: var(--ld-br-m); } } @@ -469,7 +471,7 @@ font-family: 'Source Code Pro', Consolas, Monaco, 'Ubuntu Mono', monospace; padding: var(--ld-sp-4) var(--ld-sp-6); - border-radius: var(--ld-br-s); + border-radius: var(--ld-br-m); display: inline-flex; } } @@ -483,7 +485,7 @@ code { display: inline-flex; padding: 0 var(--ld-sp-6); - border-radius: var(--ld-br-s); + border-radius: var(--ld-br-m); } } @@ -496,7 +498,7 @@ code { padding: 0 var(--ld-sp-4); - border-radius: var(--ld-br-s); + border-radius: var(--ld-br-m); } } diff --git a/src/docs/components/docs-nav/docs-nav.css b/src/docs/components/docs-nav/docs-nav.css index 8e7f359ed5..e999f5955c 100644 --- a/src/docs/components/docs-nav/docs-nav.css +++ b/src/docs/components/docs-nav/docs-nav.css @@ -1,10 +1,10 @@ @define-mixin docs-nav-ui-light { .docs-nav__content { - background-color: var(--ld-col-neutral-010); + background-color: var(--ld-layer-3); box-shadow: var(--ld-sp-1) 0 0 0 var(--ld-col-neutral-100); } .docs-nav::before { - background-color: var(--ld-col-neutral-010); + background-color: var(--ld-layer-3); } .docs-nav__section { border-bottom-color: var(--ld-col-neutral-100); @@ -161,6 +161,7 @@ @mixin docs-nav-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-nav-ui-dark; } @@ -170,6 +171,7 @@ .docs-ui-light { @mixin docs-nav-ui-light; } +*/ .docs-nav { font: var(--ld-typo-body-s); diff --git a/src/docs/components/docs-page-nav/docs-page-nav.css b/src/docs/components/docs-page-nav/docs-page-nav.css index 389367b24e..4193ffce62 100644 --- a/src/docs/components/docs-page-nav/docs-page-nav.css +++ b/src/docs/components/docs-page-nav/docs-page-nav.css @@ -17,6 +17,7 @@ @mixin docs-page-nav-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-page-nav-ui-dark; } @@ -26,6 +27,7 @@ .docs-ui-light { @mixin docs-page-nav-ui-light; } +*/ .docs-page-nav { display: flex; diff --git a/src/docs/components/docs-shadow/docs-shadow.css b/src/docs/components/docs-shadow/docs-shadow.css index c01e182ae3..b7c1ccc7bf 100644 --- a/src/docs/components/docs-shadow/docs-shadow.css +++ b/src/docs/components/docs-shadow/docs-shadow.css @@ -11,6 +11,7 @@ @mixin docs-shadow-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-shadow-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-shadow-ui-light; } +*/ .docs-shadow { display: flex; diff --git a/src/docs/components/docs-spacing/docs-spacing.css b/src/docs/components/docs-spacing/docs-spacing.css index 2494cdc1e1..d9c9cc6921 100644 --- a/src/docs/components/docs-spacing/docs-spacing.css +++ b/src/docs/components/docs-spacing/docs-spacing.css @@ -11,6 +11,7 @@ @mixin docs-spacing-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-spacing-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-spacing-ui-light; } +*/ .docs-spacing { display: flex; diff --git a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css index d12b438ab5..a14f5a610a 100644 --- a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css +++ b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.css @@ -21,6 +21,7 @@ @mixin docs-switch-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-switch-ui-dark; } @@ -30,6 +31,7 @@ .docs-ui-light { @mixin docs-switch-ui-light; } +*/ .docs-switch-dark-light__btn { display: flex; diff --git a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx index 95561ebe97..74e06e61f4 100644 --- a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx +++ b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx @@ -49,8 +49,7 @@ export class DocsSwitchDarkLight { handleClick() { this.isDark = !this.isDark window.localStorage.setItem('docs-ui', this.isDark ? 'dark' : 'light') - document.body.classList.add(`docs-ui-${this.isDark ? 'dark' : 'light'}`) - document.body.classList.remove(`docs-ui-${!this.isDark ? 'dark' : 'light'}`) + document.documentElement.classList.toggle('ld-dark', this.isDark) document.documentElement.style.colorScheme = this.isDark ? 'dark' : 'auto' } diff --git a/src/docs/components/docs-toc/docs-toc.css b/src/docs/components/docs-toc/docs-toc.css index c9d7b0c0b0..ce12fec49f 100644 --- a/src/docs/components/docs-toc/docs-toc.css +++ b/src/docs/components/docs-toc/docs-toc.css @@ -11,6 +11,7 @@ @mixin docs-toc-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-toc-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-toc-ui-light; } +*/ .docs-toc { --docs-toc-heading-height: 2rem; diff --git a/src/docs/components/docs-typography/docs-typography.css b/src/docs/components/docs-typography/docs-typography.css index 247e897cdb..d2cb823eae 100644 --- a/src/docs/components/docs-typography/docs-typography.css +++ b/src/docs/components/docs-typography/docs-typography.css @@ -11,6 +11,7 @@ @mixin docs-typography-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-typography-ui-dark; } @@ -20,6 +21,7 @@ .docs-ui-light { @mixin docs-typography-ui-light; } +*/ .docs-typography { display: block; diff --git a/src/docs/components/docs-view-on-figma/docs-view-on-figma.css b/src/docs/components/docs-view-on-figma/docs-view-on-figma.css index 31b6675bc9..4ea427d387 100644 --- a/src/docs/components/docs-view-on-figma/docs-view-on-figma.css +++ b/src/docs/components/docs-view-on-figma/docs-view-on-figma.css @@ -56,6 +56,7 @@ @mixin docs-view-on-figma-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-view-on-figma-ui-dark; } @@ -65,6 +66,7 @@ .docs-ui-light { @mixin docs-view-on-figma-ui-light; } +*/ .docs-view-on-figma { flex-shrink: 0; diff --git a/src/docs/global/styles/code.css b/src/docs/global/styles/code.css index 9deed68840..512ad24a10 100644 --- a/src/docs/global/styles/code.css +++ b/src/docs/global/styles/code.css @@ -212,6 +212,7 @@ code .highlight-line::before { } @mixin docs-code-ui-light; +/* @media (prefers-color-scheme: dark) { @mixin docs-code-ui-dark; } @@ -221,3 +222,4 @@ code .highlight-line::before { .docs-ui-dark { @mixin docs-code-ui-dark; } +*/ diff --git a/src/docs/global/styles/global.css b/src/docs/global/styles/global.css index f4b3fc5f63..ba35082646 100644 --- a/src/docs/global/styles/global.css +++ b/src/docs/global/styles/global.css @@ -2,19 +2,19 @@ @import 'code.css'; @define-mixin docs-ui-light { - background-color: var(--ld-col-wht); + background-color: var(--ld-layer-2); color: var(--ld-col-neutral-900); body::before { - background-color: var(--ld-col-wht); + background-color: var(--ld-layer-2); } } @define-mixin docs-ui-dark { - background-color: var(--ld-col-neutral-800); - color: var(--ld-col-wht); + background-color: var(--ld-layer-2); + color: var(--ld-col-neutral-900); body::before { - background-color: var(--ld-col-neutral-800); + background-color: var(--ld-layer-2); } } diff --git a/src/docs/pages/global/colors.md b/src/docs/pages/global/colors.md index 33d49a7958..613bb03106 100644 --- a/src/docs/pages/global/colors.md +++ b/src/docs/pages/global/colors.md @@ -17,6 +17,17 @@ All colors listed below are available as global CSS custom properties after [imp For more information visit Brand Hub: Colors. +## Layer colors + +### Light + + + + + + + + ## White diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index c1182b948f..85b504f6dd 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,140 +1,228 @@ /* autogenerated */ /* prettier-ignore */ :root { --ld-col-inv: 0; - --ld-col-neutral-010: hsl(240deg 40% calc(var(--ld-col-inv) * (100% - 98%) + (1 - var(--ld-col-inv)) * 98%)); - --ld-col-neutral-050: hsl(240deg 26.7% calc(var(--ld-col-inv) * (100% - 94.1%) + (1 - var(--ld-col-inv)) * 94.1%)); - --ld-col-neutral-100: hsl(240deg 17.6% calc(var(--ld-col-inv) * (100% - 90%) + (1 - var(--ld-col-inv)) * 90%)); - --ld-col-neutral-200: hsl(240deg 9.5% calc(var(--ld-col-inv) * (100% - 80%) + (1 - var(--ld-col-inv)) * 80%)); - --ld-col-neutral-300: hsl(240deg 10.8% calc(var(--ld-col-inv) * (100% - 69.6%) + (1 - var(--ld-col-inv)) * 69.6%)); - --ld-col-neutral-400: hsl(240deg 8% calc(var(--ld-col-inv) * (100% - 58%) + (1 - var(--ld-col-inv)) * 58%)); - --ld-col-neutral-500: hsl(240deg 6.9% calc(var(--ld-col-inv) * (100% - 50%) + (1 - var(--ld-col-inv)) * 50%)); - --ld-col-neutral-600: hsl(240deg 9.6% calc(var(--ld-col-inv) * (100% - 40.8%) + (1 - var(--ld-col-inv)) * 40.8%)); - --ld-col-neutral-700: hsl(240deg 10% calc(var(--ld-col-inv) * (100% - 30%) + (1 - var(--ld-col-inv)) * 30%)); - --ld-col-neutral-800: hsl(240deg 16% calc(var(--ld-col-inv) * (100% - 20%) + (1 - var(--ld-col-inv)) * 20%)); - --ld-col-neutral-900: hsl(220deg 50% calc(var(--ld-col-inv) * (100% - 12%) + (1 - var(--ld-col-inv)) * 12%)); - --ld-col-neutral-999: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 0%) + (1 - var(--ld-col-inv)) * 0%)); - --ld-col-neutral: hsl(240deg 9.6% calc(var(--ld-col-inv) * (100% - 40.8%) + (1 - var(--ld-col-inv)) * 40.8%)); - --ld-col-rb-010: hsl(207deg 100% calc(var(--ld-col-inv) * (100% - 97.8%) + (1 - var(--ld-col-inv)) * 97.8%)); - --ld-col-rb-050: hsl(206deg 72.7% calc(var(--ld-col-inv) * (100% - 95.7%) + (1 - var(--ld-col-inv)) * 95.7%)); - --ld-col-rb-100: hsl(207deg 70% calc(var(--ld-col-inv) * (100% - 91%) + (1 - var(--ld-col-inv)) * 91%)); - --ld-col-rb-200: hsl(207deg 70% calc(var(--ld-col-inv) * (100% - 81.2%) + (1 - var(--ld-col-inv)) * 81.2%)); - --ld-col-rb-300: hsl(207deg 70.3% calc(var(--ld-col-inv) * (100% - 71%) + (1 - var(--ld-col-inv)) * 71%)); - --ld-col-rb-400: hsl(206deg 68.3% calc(var(--ld-col-inv) * (100% - 59.2%) + (1 - var(--ld-col-inv)) * 59.2%)); - --ld-col-rb-500: hsl(206deg 69.2% calc(var(--ld-col-inv) * (100% - 50.8%) + (1 - var(--ld-col-inv)) * 50.8%)); - --ld-col-rb-600: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%)); - --ld-col-rb-700: hsl(207deg 90.4% calc(var(--ld-col-inv) * (100% - 31.1%) + (1 - var(--ld-col-inv)) * 31.1%)); - --ld-col-rb-800: hsl(206deg 82.1% calc(var(--ld-col-inv) * (100% - 20.8%) + (1 - var(--ld-col-inv)) * 20.8%)); - --ld-col-rb-900: hsl(210deg 100% calc(var(--ld-col-inv) * (100% - 11%) + (1 - var(--ld-col-inv)) * 11%)); - --ld-col-rb-alpha-low: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%) / 0.2); - --ld-col-rb-alpha-lowest: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%) / 0.1); - --ld-col-rb: hsl(206deg 84.2% calc(var(--ld-col-inv) * (100% - 37.3%) + (1 - var(--ld-col-inv)) * 37.3%)); - --ld-col-rg-010: hsl(154deg 46.7% calc(var(--ld-col-inv) * (100% - 97.1%) + (1 - var(--ld-col-inv)) * 97.1%)); - --ld-col-rg-050: hsl(131deg 80.4% calc(var(--ld-col-inv) * (100% - 92.9%) + (1 - var(--ld-col-inv)) * 92.9%)); - --ld-col-rg-100: hsl(130deg 67.1% calc(var(--ld-col-inv) * (100% - 86.7%) + (1 - var(--ld-col-inv)) * 86.7%)); - --ld-col-rg-200: hsl(130deg 67.9% calc(var(--ld-col-inv) * (100% - 72.9%) + (1 - var(--ld-col-inv)) * 72.9%)); - --ld-col-rg-300: hsl(137deg 60% calc(var(--ld-col-inv) * (100% - 67.1%) + (1 - var(--ld-col-inv)) * 67.1%)); - --ld-col-rg-400: hsl(139deg 47.1% calc(var(--ld-col-inv) * (100% - 53.3%) + (1 - var(--ld-col-inv)) * 53.3%)); - --ld-col-rg-500: hsl(142deg 54.7% calc(var(--ld-col-inv) * (100% - 41.6%) + (1 - var(--ld-col-inv)) * 41.6%)); - --ld-col-rg-600: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%)); - --ld-col-rg-700: hsl(146deg 92.1% calc(var(--ld-col-inv) * (100% - 20.4%) + (1 - var(--ld-col-inv)) * 20.4%)); - --ld-col-rg-800: hsl(143deg 88.8% calc(var(--ld-col-inv) * (100% - 15.8%) + (1 - var(--ld-col-inv)) * 15.8%)); - --ld-col-rg-900: hsl(138deg 100% calc(var(--ld-col-inv) * (100% - 8.7%) + (1 - var(--ld-col-inv)) * 8.7%)); - --ld-col-rg-alpha-low: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%) / 0.2); - --ld-col-rg-alpha-lowest: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%) / 0.1); - --ld-col-rg: hsl(153deg 98.5% calc(var(--ld-col-inv) * (100% - 26.9%) + (1 - var(--ld-col-inv)) * 26.9%)); - --ld-col-rp-010: hsl(263deg 100% calc(var(--ld-col-inv) * (100% - 98.4%) + (1 - var(--ld-col-inv)) * 98.4%)); - --ld-col-rp-050: hsl(259deg 82% calc(var(--ld-col-inv) * (100% - 96%) + (1 - var(--ld-col-inv)) * 96%)); - --ld-col-rp-100: hsl(259deg 79.1% calc(var(--ld-col-inv) * (100% - 94%) + (1 - var(--ld-col-inv)) * 94%)); - --ld-col-rp-200: hsl(259deg 80% calc(var(--ld-col-inv) * (100% - 87%) + (1 - var(--ld-col-inv)) * 87%)); - --ld-col-rp-300: hsl(263deg 92.1% calc(var(--ld-col-inv) * (100% - 79.6%) + (1 - var(--ld-col-inv)) * 79.6%)); - --ld-col-rp-400: hsl(260deg 61.3% calc(var(--ld-col-inv) * (100% - 68.6%) + (1 - var(--ld-col-inv)) * 68.6%)); - --ld-col-rp-500: hsl(259deg 54.2% calc(var(--ld-col-inv) * (100% - 61.7%) + (1 - var(--ld-col-inv)) * 61.7%)); - --ld-col-rp-600: hsl(259deg 44.5% calc(var(--ld-col-inv) * (100% - 52%) + (1 - var(--ld-col-inv)) * 52%)); - --ld-col-rp-700: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%)); - --ld-col-rp-800: hsl(259deg 54.8% calc(var(--ld-col-inv) * (100% - 29.3%) + (1 - var(--ld-col-inv)) * 29.3%)); - --ld-col-rp-900: hsl(259deg 44.2% calc(var(--ld-col-inv) * (100% - 16.7%) + (1 - var(--ld-col-inv)) * 16.7%)); - --ld-col-rp-alpha-low: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%) / 0.2); - --ld-col-rp-alpha-lowest: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%) / 0.1); - --ld-col-rp: hsl(259deg 48.7% calc(var(--ld-col-inv) * (100% - 38.2%) + (1 - var(--ld-col-inv)) * 38.2%)); - --ld-col-rr-010: hsl(347deg 100% calc(var(--ld-col-inv) * (100% - 98.2%) + (1 - var(--ld-col-inv)) * 98.2%)); - --ld-col-rr-050: hsl(357deg 100% calc(var(--ld-col-inv) * (100% - 96.5%) + (1 - var(--ld-col-inv)) * 96.5%)); - --ld-col-rr-100: hsl(357deg 100% calc(var(--ld-col-inv) * (100% - 92.7%) + (1 - var(--ld-col-inv)) * 92.7%)); - --ld-col-rr-200: hsl(356deg 100% calc(var(--ld-col-inv) * (100% - 85.1%) + (1 - var(--ld-col-inv)) * 85.1%)); - --ld-col-rr-300: hsl(353deg 82.9% calc(var(--ld-col-inv) * (100% - 74.8%) + (1 - var(--ld-col-inv)) * 74.8%)); - --ld-col-rr-400: hsl(351deg 93.9% calc(var(--ld-col-inv) * (100% - 68%) + (1 - var(--ld-col-inv)) * 68%)); - --ld-col-rr-500: hsl(346deg 89.6% calc(var(--ld-col-inv) * (100% - 59.2%) + (1 - var(--ld-col-inv)) * 59.2%)); - --ld-col-rr-600: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%)); - --ld-col-rr-700: hsl(345deg 78.3% calc(var(--ld-col-inv) * (100% - 37.9%) + (1 - var(--ld-col-inv)) * 37.9%)); - --ld-col-rr-800: hsl(346deg 80.8% calc(var(--ld-col-inv) * (100% - 25.4%) + (1 - var(--ld-col-inv)) * 25.4%)); - --ld-col-rr-900: hsl(345deg 87.5% calc(var(--ld-col-inv) * (100% - 15.7%) + (1 - var(--ld-col-inv)) * 15.7%)); - --ld-col-rr-alpha-low: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%) / 0.2); - --ld-col-rr-alpha-lowest: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%) / 0.1); - --ld-col-rr: hsl(345deg 80% calc(var(--ld-col-inv) * (100% - 51%) + (1 - var(--ld-col-inv)) * 51%)); - --ld-col-sb: hsl(175deg 44.8% calc(var(--ld-col-inv) * (100% - 71.6%) + (1 - var(--ld-col-inv)) * 71.6%)); - --ld-col-sg: hsl(94deg 50% calc(var(--ld-col-inv) * (100% - 72.5%) + (1 - var(--ld-col-inv)) * 72.5%)); - --ld-col-sp: hsl(340deg 33.3% calc(var(--ld-col-inv) * (100% - 82.4%) + (1 - var(--ld-col-inv)) * 82.4%)); - --ld-col-sy: hsl(30deg 100% calc(var(--ld-col-inv) * (100% - 86.3%) + (1 - var(--ld-col-inv)) * 86.3%)); - --ld-col-vc-010: hsl(190deg 75% calc(var(--ld-col-inv) * (100% - 98.4%) + (1 - var(--ld-col-inv)) * 98.4%)); - --ld-col-vc-050: hsl(185deg 97.1% calc(var(--ld-col-inv) * (100% - 93.3%) + (1 - var(--ld-col-inv)) * 93.3%)); - --ld-col-vc-100: hsl(186deg 78.3% calc(var(--ld-col-inv) * (100% - 85.8%) + (1 - var(--ld-col-inv)) * 85.8%)); - --ld-col-vc-200: hsl(186deg 74.2% calc(var(--ld-col-inv) * (100% - 70.8%) + (1 - var(--ld-col-inv)) * 70.8%)); - --ld-col-vc-300: hsl(185deg 70.4% calc(var(--ld-col-inv) * (100% - 60.4%) + (1 - var(--ld-col-inv)) * 60.4%)); - --ld-col-vc-400: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%)); - --ld-col-vc-500: hsl(185deg 91.7% calc(var(--ld-col-inv) * (100% - 36.1%) + (1 - var(--ld-col-inv)) * 36.1%)); - --ld-col-vc-600: hsl(185deg 100% calc(var(--ld-col-inv) * (100% - 28.2%) + (1 - var(--ld-col-inv)) * 28.2%)); - --ld-col-vc-700: hsl(185deg 99.6% calc(var(--ld-col-inv) * (100% - 21.3%) + (1 - var(--ld-col-inv)) * 21.3%)); - --ld-col-vc-800: hsl(185deg 98.3% calc(var(--ld-col-inv) * (100% - 14.2%) + (1 - var(--ld-col-inv)) * 14.2%)); - --ld-col-vc-900: hsl(187deg 100% calc(var(--ld-col-inv) * (100% - 6.9%) + (1 - var(--ld-col-inv)) * 6.9%)); - --ld-col-vc-alpha-low: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%) / 0.2); - --ld-col-vc-alpha-lowest: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%) / 0.1); - --ld-col-vc: hsl(186deg 64% calc(var(--ld-col-inv) * (100% - 49%) + (1 - var(--ld-col-inv)) * 49%)); - --ld-col-vg-010: hsl(76deg 73.3% calc(var(--ld-col-inv) * (100% - 97.1%) + (1 - var(--ld-col-inv)) * 97.1%)); - --ld-col-vg-050: hsl(80deg 76.3% calc(var(--ld-col-inv) * (100% - 88.4%) + (1 - var(--ld-col-inv)) * 88.4%)); - --ld-col-vg-100: hsl(79deg 62.1% calc(var(--ld-col-inv) * (100% - 82.9%) + (1 - var(--ld-col-inv)) * 82.9%)); - --ld-col-vg-200: hsl(79deg 55% calc(var(--ld-col-inv) * (100% - 70%) + (1 - var(--ld-col-inv)) * 70%)); - --ld-col-vg-300: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%)); - --ld-col-vg-400: hsl(78deg 100% calc(var(--ld-col-inv) * (100% - 31.2%) + (1 - var(--ld-col-inv)) * 31.2%)); - --ld-col-vg-500: hsl(79deg 100% calc(var(--ld-col-inv) * (100% - 25.7%) + (1 - var(--ld-col-inv)) * 25.7%)); - --ld-col-vg-600: hsl(80deg 100% calc(var(--ld-col-inv) * (100% - 23.7%) + (1 - var(--ld-col-inv)) * 23.7%)); - --ld-col-vg-700: hsl(80deg 98.8% calc(var(--ld-col-inv) * (100% - 17%) + (1 - var(--ld-col-inv)) * 17%)); - --ld-col-vg-800: hsl(79deg 100% calc(var(--ld-col-inv) * (100% - 11.8%) + (1 - var(--ld-col-inv)) * 11.8%)); - --ld-col-vg-900: hsl(85deg 100% calc(var(--ld-col-inv) * (100% - 6.1%) + (1 - var(--ld-col-inv)) * 6.1%)); - --ld-col-vg-alpha-low: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%) / 0.2); - --ld-col-vg-alpha-lowest: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%) / 0.1); - --ld-col-vg: hsl(79deg 55.6% calc(var(--ld-col-inv) * (100% - 55.9%) + (1 - var(--ld-col-inv)) * 55.9%)); - --ld-col-vm-010: hsl(330deg 100% calc(var(--ld-col-inv) * (100% - 98%) + (1 - var(--ld-col-inv)) * 98%)); - --ld-col-vm-050: hsl(344deg 100% calc(var(--ld-col-inv) * (100% - 96.3%) + (1 - var(--ld-col-inv)) * 96.3%)); - --ld-col-vm-100: hsl(340deg 100% calc(var(--ld-col-inv) * (100% - 92.4%) + (1 - var(--ld-col-inv)) * 92.4%)); - --ld-col-vm-200: hsl(337deg 100% calc(var(--ld-col-inv) * (100% - 84.5%) + (1 - var(--ld-col-inv)) * 84.5%)); - --ld-col-vm-300: hsl(329deg 100% calc(var(--ld-col-inv) * (100% - 77.7%) + (1 - var(--ld-col-inv)) * 77.7%)); - --ld-col-vm-400: hsl(329deg 72.5% calc(var(--ld-col-inv) * (100% - 64.2%) + (1 - var(--ld-col-inv)) * 64.2%)); - --ld-col-vm-500: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%)); - --ld-col-vm-600: hsl(326deg 69.6% calc(var(--ld-col-inv) * (100% - 44%) + (1 - var(--ld-col-inv)) * 44%)); - --ld-col-vm-700: hsl(326deg 80.4% calc(var(--ld-col-inv) * (100% - 32.5%) + (1 - var(--ld-col-inv)) * 32.5%)); - --ld-col-vm-800: hsl(327deg 85.4% calc(var(--ld-col-inv) * (100% - 22.9%) + (1 - var(--ld-col-inv)) * 22.9%)); - --ld-col-vm-900: hsl(329deg 100% calc(var(--ld-col-inv) * (100% - 12.2%) + (1 - var(--ld-col-inv)) * 12.2%)); - --ld-col-vm-alpha-low: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%) / 0.2); - --ld-col-vm-alpha-lowest: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%) / 0.1); - --ld-col-vm: hsl(329deg 81.4% calc(var(--ld-col-inv) * (100% - 57.8%) + (1 - var(--ld-col-inv)) * 57.8%)); - --ld-col-vy-010: hsl(40deg 81.8% calc(var(--ld-col-inv) * (100% - 97.8%) + (1 - var(--ld-col-inv)) * 97.8%)); - --ld-col-vy-050: hsl(41deg 100% calc(var(--ld-col-inv) * (100% - 92.5%) + (1 - var(--ld-col-inv)) * 92.5%)); - --ld-col-vy-100: hsl(44deg 95.8% calc(var(--ld-col-inv) * (100% - 82.1%) + (1 - var(--ld-col-inv)) * 82.1%)); - --ld-col-vy-200: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%)); - --ld-col-vy-300: hsl(44deg 76.3% calc(var(--ld-col-inv) * (100% - 55.8%) + (1 - var(--ld-col-inv)) * 55.8%)); - --ld-col-vy-400: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 37.5%) + (1 - var(--ld-col-inv)) * 37.5%)); - --ld-col-vy-500: hsl(42deg 96.7% calc(var(--ld-col-inv) * (100% - 32.5%) + (1 - var(--ld-col-inv)) * 32.5%)); - --ld-col-vy-600: hsl(42deg 95.4% calc(var(--ld-col-inv) * (100% - 25.7%) + (1 - var(--ld-col-inv)) * 25.7%)); - --ld-col-vy-700: hsl(42deg 90% calc(var(--ld-col-inv) * (100% - 20%) + (1 - var(--ld-col-inv)) * 20%)); - --ld-col-vy-800: hsl(42deg 71.8% calc(var(--ld-col-inv) * (100% - 13.9%) + (1 - var(--ld-col-inv)) * 13.9%)); - --ld-col-vy-900: hsl(42deg 68.3% calc(var(--ld-col-inv) * (100% - 9.2%) + (1 - var(--ld-col-inv)) * 9.2%)); - --ld-col-vy-alpha-low: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%) / 0.2); - --ld-col-vy-alpha-lowest: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%) / 0.1); - --ld-col-vy: hsl(44deg 100% calc(var(--ld-col-inv) * (100% - 59.8%) + (1 - var(--ld-col-inv)) * 59.8%)); - --ld-col-wht-alpha-high: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.7); - --ld-col-wht-alpha-highest: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.8); - --ld-col-wht-alpha-low: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.2); - --ld-col-wht-alpha-lowest: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.1); - --ld-col-wht-alpha-medium: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%) / 0.5); - --ld-col-wht-alpha-none: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%)); - --ld-col-wht: hsl(0deg 0% calc(var(--ld-col-inv) * (100% - 100%) + (1 - var(--ld-col-inv)) * 100%)); + --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-600: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-neutral-alpha-low: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8% / 0.2); + --ld-col-neutral-alpha-lowest: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8% / 0.1); + --ld-col-neutral-h: 240deg; + --ld-col-neutral-lr: 6.80; + --ld-col-neutral-s: 9.6%; + --ld-col-neutral: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); + --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-600: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rb-alpha-low: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3% / 0.2); + --ld-col-rb-alpha-lowest: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3% / 0.1); + --ld-col-rb-h: 206deg; + --ld-col-rb-lr: 6.22; + --ld-col-rb-s: 84.2%; + --ld-col-rb: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); + --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-600: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rg-alpha-low: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9% / 0.2); + --ld-col-rg-alpha-lowest: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9% / 0.1); + --ld-col-rg-h: 153deg; + --ld-col-rg-lr: 4.48; + --ld-col-rg-s: 98.5%; + --ld-col-rg: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); + --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-700: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rp-alpha-low: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2% / 0.2); + --ld-col-rp-alpha-lowest: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2% / 0.1); + --ld-col-rp-h: 259deg; + --ld-col-rp-lr: 5.46; + --ld-col-rp-s: 48.7%; + --ld-col-rp: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); + --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-600: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-rr-alpha-low: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51% / 0.2); + --ld-col-rr-alpha-lowest: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51% / 0.1); + --ld-col-rr-h: 345deg; + --ld-col-rr-lr: 8.50; + --ld-col-rr-s: 80%; + --ld-col-rr: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); + --ld-col-sb-010: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-050: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-100: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-200: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-300: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-400: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-500: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-600: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-700: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-800: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-900: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sb-alpha-low: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6% / 0.2); + --ld-col-sb-alpha-lowest: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6% / 0.1); + --ld-col-sb-h: 175deg; + --ld-col-sb-lr: Infinity; + --ld-col-sb-s: 44.8%; + --ld-col-sb: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); + --ld-col-sg-010: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-050: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-100: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-200: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-300: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-400: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-500: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-600: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-700: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-800: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-900: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sg-alpha-low: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5% / 0.2); + --ld-col-sg-alpha-lowest: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5% / 0.1); + --ld-col-sg-h: 94deg; + --ld-col-sg-lr: Infinity; + --ld-col-sg-s: 50%; + --ld-col-sg: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); + --ld-col-sp-010: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-050: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-100: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-200: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-300: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-400: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-500: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-600: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-700: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-800: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-900: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sp-alpha-low: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4% / 0.2); + --ld-col-sp-alpha-lowest: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4% / 0.1); + --ld-col-sp-h: 340deg; + --ld-col-sp-lr: Infinity; + --ld-col-sp-s: 33.3%; + --ld-col-sp: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); + --ld-col-sy-010: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-050: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-100: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-200: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-300: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-400: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-500: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-600: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-700: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-800: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-900: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-sy-alpha-low: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3% / 0.2); + --ld-col-sy-alpha-lowest: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3% / 0.1); + --ld-col-sy-h: 30deg; + --ld-col-sy-lr: Infinity; + --ld-col-sy-s: 100%; + --ld-col-sy: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); + --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-400: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vc-alpha-low: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49% / 0.2); + --ld-col-vc-alpha-lowest: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49% / 0.1); + --ld-col-vc-h: 186deg; + --ld-col-vc-lr: 12.25; + --ld-col-vc-s: 64%; + --ld-col-vc: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); + --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-300: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vg-alpha-low: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9% / 0.2); + --ld-col-vg-alpha-lowest: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9% / 0.1); + --ld-col-vg-h: 79deg; + --ld-col-vg-lr: 18.63; + --ld-col-vg-s: 55.6%; + --ld-col-vg: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); + --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-500: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vm-alpha-low: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8% / 0.2); + --ld-col-vm-alpha-lowest: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8% / 0.1); + --ld-col-vm-h: 329deg; + --ld-col-vm-lr: 11.56; + --ld-col-vm-s: 81.4%; + --ld-col-vm: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); + --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-200: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-vy-alpha-low: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8% / 0.2); + --ld-col-vy-alpha-lowest: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8% / 0.1); + --ld-col-vy-h: 44deg; + --ld-col-vy-lr: 29.90; + --ld-col-vy-s: 100%; + --ld-col-vy: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-wht-h: 0deg; + --ld-col-wht-s: 0%; + --ld-col-wht: hsl(var(--ld-col-wht-h) var(--ld-col-wht-s) 100%); } diff --git a/src/liquid/global/styles/colors/dark.css b/src/liquid/global/styles/colors/dark.css new file mode 100644 index 0000000000..5a0c114c04 --- /dev/null +++ b/src/liquid/global/styles/colors/dark.css @@ -0,0 +1,8 @@ +:root { + --ld-col-inv: 0; + color-scheme: light dark; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ + + &.ld-dark { + --ld-col-inv: 1; + } +} diff --git a/src/liquid/global/styles/colors/layers.css b/src/liquid/global/styles/colors/layers.css new file mode 100644 index 0000000000..78f44b82a1 --- /dev/null +++ b/src/liquid/global/styles/colors/layers.css @@ -0,0 +1,17 @@ +:root { + --ld-layer-0: var(--ld-col-neutral-300); + --ld-layer-1: var(--ld-col-neutral-200); + --ld-layer-2: var(--ld-col-neutral-100); + --ld-layer-3: var(--ld-col-neutral-050); + --ld-layer-4: var(--ld-col-neutral-010); + --ld-layer-5: var(--ld-col-wht); + + &.ld-dark { + --ld-layer-0: var(--ld-col-neutral-010); + --ld-layer-1: var(--ld-col-neutral-050); + --ld-layer-2: var(--ld-col-neutral-100); + --ld-layer-3: var(--ld-col-neutral-200); + --ld-layer-4: var(--ld-col-neutral-300); + --ld-layer-5: var(--ld-col-neutral-400); + } +} diff --git a/src/liquid/global/styles/global.css b/src/liquid/global/styles/global.css index c18dd7ef37..7ef54c8ec7 100644 --- a/src/liquid/global/styles/global.css +++ b/src/liquid/global/styles/global.css @@ -1,5 +1,7 @@ @import 'border-radius/border-radius.css'; @import 'colors/colors.css'; +@import 'colors/dark.css'; +@import 'colors/layers.css'; @import 'focus/focus.css'; @import 'fonts/fonts.css'; @import 'shadows/shadows.css'; From 9b93b19517fa9da557d887ecdb88ca264b8815c4 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Wed, 22 Mar 2023 16:49:43 +0100 Subject: [PATCH 03/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 126 ++++++--- src/liquid/global/styles/colors/colors.css | 314 ++++++++------------- 2 files changed, 209 insertions(+), 231 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index bf9adb8f68..78fd8526c9 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-var-requires */ + const https = require('https') const { existsSync } = require('fs') const { mkdir, writeFile } = require('fs').promises @@ -50,15 +51,6 @@ function getColorTokenValue(variant, styles) { } } -// function relRGBToAbsRGB(fill) { -// const r = Math.round(fill.color.r * 255) -// const g = Math.round(fill.color.g * 255) -// const b = Math.round(fill.color.b * 255) -// const a = Math.round((fill.opacity ?? 1) * 100) / 100 -// -// return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})` -// } - function relRGBToAbsHSL(fill) { const { r, g, b } = fill.color const cmin = Math.min(r, g, b) @@ -379,14 +371,73 @@ function getHSLPartsFromValue(hslValue) { } } -function getColorVariable(colorBaseName, colorKey, l, a) { - return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${l}${ - a === 1 ? '' : ' / ' + a - });` +function getColorVariable( + colorBaseName: string, + colorKey: string, + lightness: number, + alpha: number +) { + return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${( + lightness * 100 + ).toFixed(2)}%${alpha === 1 ? '' : ' / ' + alpha});` } -function getLighness(baseLighness, x) { - return baseLighness * x +// Function to compute logarithmic function +function computeLogFn( + x1: number, + y1: number, + x2: number, + y2: number, + x3: number, + y3: number +) { + // Calculate the coefficients of the logarithmic equation, y = a*log(x) + b + const a = (y1 - y3) / (Math.log(x1) - Math.log(x3)) + const b = y2 - a * Math.log(x2) + + // Return the logarithmic function + return (x: number) => a * Math.log(x) + b +} +function computeY( + x1: number, + y1: number, + x2: number, + y2: number, + x3: number, + y3: number, + xVal: number +): number { + // Get logarithmic function + const logFn = computeLogFn(x1, y1, x2, y2, x3, y3) + + // Calculate and return y value + return logFn(xVal) +} + +function getStepFromKey(colorKey) { + if (colorKey === '010') return 1 + if (colorKey === '050') return 2 + return (parseInt(colorKey) || 0) / 100 + 2 +} + +function getLighness( + baseLighness: string, + baseColorKey: string, + colorKey: string +): number { + const totalSteps = 9 + const baseStep = getStepFromKey(baseColorKey) + const step = getStepFromKey(colorKey) + + const x1 = 1 + const y1 = 0.98 + const x2 = 1 + baseStep / totalSteps + const y2 = parseFloat(baseLighness) / 100 + const x3 = 1 + 1 + const y3 = 0.11 + + const lighness = computeY(x1, y1, x2, y2, x3, y3, 1 + step / totalSteps) + return lighness } function generateColors(colorTokens) { @@ -397,28 +448,27 @@ function generateColors(colorTokens) { const colorVal = colorTokens[key] if (key.includes('/default')) { const { h, s, l } = getHSLPartsFromValue(colorVal) - const colorBaseName = key - .replace(/\d/g, '') + const baseColorName = key + .replace(/\d+/g, '') .replace('/default', '') .replace(/-$/, '') - colorVariables.push( - ` --ld-col-${colorBaseName}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${l});` - ) - colorVariables.push(` --ld-col-${colorBaseName}-h: ${h};`) - colorVariables.push(` --ld-col-${colorBaseName}-s: ${s};`) + if (baseColorName === 'wht') { + return + } - if (colorBaseName === 'wht') { + const baseColorKey = key.match(/\d+/g)?.at(0) + if (!baseColorKey) { return } - let x - if (key.includes('010')) x = 1 - else if (key.includes('050')) x = 2 - else x = (parseInt(key.match(/\d+/g)?.at(0)) || 0) / 100 - const lightnessRatio = (parseFloat(l) / x).toFixed(2) + const baseLighness: string = l - colorVariables.push(` --ld-col-${colorBaseName}-lr: ${lightnessRatio};`) + colorVariables.push( + ` --ld-col-${baseColorName}: hsl(var(--ld-col-${baseColorName}-h) var(--ld-col-${baseColorName}-s) ${baseLighness});` + ) + colorVariables.push(` --ld-col-${baseColorName}-h: ${h};`) + colorVariables.push(` --ld-col-${baseColorName}-s: ${s};`) ;[ '010', '050', @@ -433,12 +483,20 @@ function generateColors(colorTokens) { '900', 'alpha-low', 'alpha-lowest', - ].forEach((colorKey, i) => { - let a = 1 - if (colorKey === 'alpha-low') a = 0.2 - else if (colorKey === 'alpha-lowest') a = 0.1 + ].forEach((colorKey) => { + let alpha: number, lightness: number + if (colorKey === 'alpha-low') { + alpha = 0.2 + lightness = parseFloat(baseLighness) / 100 + } else if (colorKey === 'alpha-lowest') { + alpha = 0.1 + lightness = parseFloat(baseLighness) / 100 + } else { + alpha = 1 + lightness = getLighness(baseLighness, baseColorKey, colorKey) + } colorVariables.push( - getColorVariable(colorBaseName, colorKey, a < 1 ? l : l * i + 1, a) + getColorVariable(baseColorName, colorKey, lightness, alpha) ) }) } diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 85b504f6dd..551c359239 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,228 +1,148 @@ /* autogenerated */ /* prettier-ignore */ :root { --ld-col-inv: 0; - --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-600: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-neutral-alpha-low: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8% / 0.2); - --ld-col-neutral-alpha-lowest: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8% / 0.1); + --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 107.40%); + --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 95.44%); + --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 84.52%); + --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 74.47%); + --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 65.17%); + --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 56.51%); + --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 48.41%); + --ld-col-neutral-600: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80%); + --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 33.63%); + --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 26.84%); + --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 20.40%); + --ld-col-neutral-alpha-low: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.2); + --ld-col-neutral-alpha-lowest: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.1); --ld-col-neutral-h: 240deg; - --ld-col-neutral-lr: 6.80; --ld-col-neutral-s: 9.6%; --ld-col-neutral: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-600: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rb-alpha-low: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3% / 0.2); - --ld-col-rb-alpha-lowest: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3% / 0.1); + --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 103.90%); + --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 91.94%); + --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 81.02%); + --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 70.97%); + --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 61.67%); + --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 53.01%); + --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 44.91%); + --ld-col-rb-600: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30%); + --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 30.13%); + --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 23.34%); + --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 16.90%); + --ld-col-rb-alpha-low: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.2); + --ld-col-rb-alpha-lowest: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.1); --ld-col-rb-h: 206deg; - --ld-col-rb-lr: 6.22; --ld-col-rb-s: 84.2%; --ld-col-rb: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-600: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rg-alpha-low: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9% / 0.2); - --ld-col-rg-alpha-lowest: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9% / 0.1); + --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 93.50%); + --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 81.54%); + --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 70.62%); + --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 60.57%); + --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 51.27%); + --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 42.61%); + --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 34.51%); + --ld-col-rg-600: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90%); + --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 19.73%); + --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 12.94%); + --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 6.50%); + --ld-col-rg-alpha-low: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.2); + --ld-col-rg-alpha-lowest: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.1); --ld-col-rg-h: 153deg; - --ld-col-rg-lr: 4.48; --ld-col-rg-s: 98.5%; --ld-col-rg: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-700: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rp-alpha-low: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2% / 0.2); - --ld-col-rp-alpha-lowest: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2% / 0.1); + --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 111.98%); + --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 100.01%); + --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 89.09%); + --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 79.05%); + --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 69.74%); + --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 61.08%); + --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 52.98%); + --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 45.37%); + --ld-col-rp-700: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20%); + --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 31.41%); + --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 24.98%); + --ld-col-rp-alpha-low: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.2); + --ld-col-rp-alpha-lowest: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.1); --ld-col-rp-h: 259deg; - --ld-col-rp-lr: 5.46; --ld-col-rp-s: 48.7%; --ld-col-rp: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-600: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-rr-alpha-low: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51% / 0.2); - --ld-col-rr-alpha-lowest: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51% / 0.1); + --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 117.60%); + --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 105.64%); + --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 94.72%); + --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 84.67%); + --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 75.37%); + --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 66.71%); + --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 58.61%); + --ld-col-rr-600: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00%); + --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 43.83%); + --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 37.04%); + --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 30.60%); + --ld-col-rr-alpha-low: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.2); + --ld-col-rr-alpha-lowest: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.1); --ld-col-rr-h: 345deg; - --ld-col-rr-lr: 8.50; --ld-col-rr-s: 80%; --ld-col-rr: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-sb-010: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-050: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-100: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-200: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-300: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-400: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-500: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-600: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-700: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-800: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-900: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sb-alpha-low: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6% / 0.2); - --ld-col-sb-alpha-lowest: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6% / 0.1); - --ld-col-sb-h: 175deg; - --ld-col-sb-lr: Infinity; - --ld-col-sb-s: 44.8%; - --ld-col-sb: hsl(var(--ld-col-sb-h) var(--ld-col-sb-s) 71.6%); - --ld-col-sg-010: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-050: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-100: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-200: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-300: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-400: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-500: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-600: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-700: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-800: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-900: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sg-alpha-low: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5% / 0.2); - --ld-col-sg-alpha-lowest: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5% / 0.1); - --ld-col-sg-h: 94deg; - --ld-col-sg-lr: Infinity; - --ld-col-sg-s: 50%; - --ld-col-sg: hsl(var(--ld-col-sg-h) var(--ld-col-sg-s) 72.5%); - --ld-col-sp-010: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-050: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-100: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-200: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-300: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-400: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-500: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-600: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-700: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-800: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-900: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sp-alpha-low: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4% / 0.2); - --ld-col-sp-alpha-lowest: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4% / 0.1); - --ld-col-sp-h: 340deg; - --ld-col-sp-lr: Infinity; - --ld-col-sp-s: 33.3%; - --ld-col-sp: hsl(var(--ld-col-sp-h) var(--ld-col-sp-s) 82.4%); - --ld-col-sy-010: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-050: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-100: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-200: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-300: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-400: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-500: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-600: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-700: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-800: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-900: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-sy-alpha-low: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3% / 0.2); - --ld-col-sy-alpha-lowest: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3% / 0.1); - --ld-col-sy-h: 30deg; - --ld-col-sy-lr: Infinity; - --ld-col-sy-s: 100%; - --ld-col-sy: hsl(var(--ld-col-sy-h) var(--ld-col-sy-s) 86.3%); - --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-400: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vc-alpha-low: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49% / 0.2); - --ld-col-vc-alpha-lowest: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49% / 0.1); + --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 99.89%); + --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 87.93%); + --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 77.01%); + --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 66.96%); + --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 57.66%); + --ld-col-vc-400: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00%); + --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 40.90%); + --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 33.29%); + --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 26.12%); + --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 19.33%); + --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 12.89%); + --ld-col-vc-alpha-low: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.2); + --ld-col-vc-alpha-lowest: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.1); --ld-col-vc-h: 186deg; - --ld-col-vc-lr: 12.25; --ld-col-vc-s: 64%; --ld-col-vc: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-300: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vg-alpha-low: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9% / 0.2); - --ld-col-vg-alpha-lowest: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9% / 0.1); + --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 98.13%); + --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 86.17%); + --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 75.25%); + --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 65.20%); + --ld-col-vg-300: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90%); + --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 47.24%); + --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 39.14%); + --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 31.53%); + --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 24.36%); + --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 17.57%); + --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 11.13%); + --ld-col-vg-alpha-low: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.2); + --ld-col-vg-alpha-lowest: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.1); --ld-col-vg-h: 79deg; - --ld-col-vg-lr: 18.63; --ld-col-vg-s: 55.6%; --ld-col-vg: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-500: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vm-alpha-low: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8% / 0.2); - --ld-col-vm-alpha-lowest: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8% / 0.1); + --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 116.79%); + --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 104.83%); + --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 93.91%); + --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 83.86%); + --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 74.56%); + --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 65.90%); + --ld-col-vm-500: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80%); + --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 50.19%); + --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 43.02%); + --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 36.23%); + --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 29.79%); + --ld-col-vm-alpha-low: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.2); + --ld-col-vm-alpha-lowest: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.1); --ld-col-vm-h: 329deg; - --ld-col-vm-lr: 11.56; --ld-col-vm-s: 81.4%; --ld-col-vm: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-200: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-vy-alpha-low: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8% / 0.2); - --ld-col-vy-alpha-lowest: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8% / 0.1); + --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 92.73%); + --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 80.77%); + --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 69.85%); + --ld-col-vy-200: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80%); + --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 50.50%); + --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 41.84%); + --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 33.74%); + --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 26.13%); + --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 18.95%); + --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 12.17%); + --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 5.73%); + --ld-col-vy-alpha-low: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.2); + --ld-col-vy-alpha-lowest: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.1); --ld-col-vy-h: 44deg; - --ld-col-vy-lr: 29.90; --ld-col-vy-s: 100%; --ld-col-vy: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); - --ld-col-wht-h: 0deg; - --ld-col-wht-s: 0%; - --ld-col-wht: hsl(var(--ld-col-wht-h) var(--ld-col-wht-s) 100%); } From afcf2dcc1c41c4f441cfc3da3233ab2bf28de2a9 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Fri, 24 Mar 2023 09:21:50 +0100 Subject: [PATCH 04/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 108 +++++++++++-- src/liquid/global/styles/colors/colors.css | 180 ++++++++++----------- 2 files changed, 182 insertions(+), 106 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 78fd8526c9..382bf005af 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -360,13 +360,18 @@ function generateShadows(tokens) { ) } -function getHSLPartsFromValue(hslValue) { +function getHSLPartsFromValue(hslValue): { + h: string + s: string + l: string + a: string +} { const hslParts = hslValue.match(/([\d.]+)(deg|%)|(0\.\d+)/g) const [h, s, l, a] = hslParts return { - h: h, - s: s, - l: l, + h, + s, + l, a: a ? a : '1', } } @@ -374,12 +379,19 @@ function getHSLPartsFromValue(hslValue) { function getColorVariable( colorBaseName: string, colorKey: string, + saturation: number, lightness: number, alpha: number ) { + console.info('saturation', saturation) return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${( lightness * 100 ).toFixed(2)}%${alpha === 1 ? '' : ' / ' + alpha});` + // return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) ${( + // saturation * 100 + // ).toFixed(2)}% ${(lightness * 100).toFixed(2)}%${ + // alpha === 1 ? '' : ' / ' + alpha + // });` } // Function to compute logarithmic function @@ -389,14 +401,16 @@ function computeLogFn( x2: number, y2: number, x3: number, - y3: number + y3: number, + power: number ) { - // Calculate the coefficients of the logarithmic equation, y = a*log(x) + b - const a = (y1 - y3) / (Math.log(x1) - Math.log(x3)) - const b = y2 - a * Math.log(x2) + // Calculate the coefficients of the logarithmic equation, y = a * log(x)^p + b + const a = + (y1 - y3) / (Math.pow(Math.log(x1), power) - Math.pow(Math.log(x3), power)) + const b = y2 - a * Math.pow(Math.log(x2), power) // Return the logarithmic function - return (x: number) => a * Math.log(x) + b + return (x: number) => a * Math.pow(Math.log(x), power) + b } function computeY( x1: number, @@ -405,10 +419,11 @@ function computeY( y2: number, x3: number, y3: number, + power: number, xVal: number ): number { // Get logarithmic function - const logFn = computeLogFn(x1, y1, x2, y2, x3, y3) + const logFn = computeLogFn(x1, y1, x2, y2, x3, y3, power) // Calculate and return y value return logFn(xVal) @@ -421,11 +436,13 @@ function getStepFromKey(colorKey) { } function getLighness( + baseHue: string, baseLighness: string, baseColorKey: string, colorKey: string ): number { - const totalSteps = 9 + console.info('baseHue', baseHue) + const totalSteps = 11 const baseStep = getStepFromKey(baseColorKey) const step = getStepFromKey(colorKey) @@ -436,10 +453,56 @@ function getLighness( const x3 = 1 + 1 const y3 = 0.11 - const lighness = computeY(x1, y1, x2, y2, x3, y3, 1 + step / totalSteps) + // f(x) = 1 + (sin(Pi * x - Pi / c) + 1) / 2 + const x = parseFloat(baseHue) / 360 + const c = 3 + let power = Math.sin(Math.PI * x - Math.PI / c) + 1 + power = 1.1 + + const lighness = computeY( + x1, + y1, + x2, + y2, + x3, + y3, + power, + 1 + step / totalSteps + ) return lighness } +function getSaturation( + baseSaturation: string, + baseColorKey: string, + colorKey: string +): number { + const totalSteps = 11 + const baseStep = getStepFromKey(baseColorKey) + const step = getStepFromKey(colorKey) + + const x1 = 1 + const y1 = 0.01 + const x2 = 1 + baseStep / totalSteps + const y2 = parseFloat(baseSaturation) / 100 + const x3 = 1 + 1 + const y3 = 0.9 + + const power = 3 + + const saturation = computeY( + x1, + y1, + x2, + y2, + x3, + y3, + power, + 1 + step / totalSteps + ) + return saturation +} + function generateColors(colorTokens) { const colorVariables = [] @@ -462,7 +525,9 @@ function generateColors(colorTokens) { return } - const baseLighness: string = l + const baseHue = h + const baseLighness = l + const baseSaturation = s colorVariables.push( ` --ld-col-${baseColorName}: hsl(var(--ld-col-${baseColorName}-h) var(--ld-col-${baseColorName}-s) ${baseLighness});` @@ -484,19 +549,30 @@ function generateColors(colorTokens) { 'alpha-low', 'alpha-lowest', ].forEach((colorKey) => { - let alpha: number, lightness: number + let lightness: number + let saturation: number + let alpha: number if (colorKey === 'alpha-low') { alpha = 0.2 lightness = parseFloat(baseLighness) / 100 + saturation = parseFloat(baseSaturation) / 100 } else if (colorKey === 'alpha-lowest') { alpha = 0.1 lightness = parseFloat(baseLighness) / 100 + saturation = parseFloat(baseSaturation) / 100 } else { alpha = 1 - lightness = getLighness(baseLighness, baseColorKey, colorKey) + lightness = getLighness(baseHue, baseLighness, baseColorKey, colorKey) + saturation = getSaturation(baseSaturation, baseColorKey, colorKey) } colorVariables.push( - getColorVariable(baseColorName, colorKey, lightness, alpha) + getColorVariable( + baseColorName, + colorKey, + saturation, + lightness, + alpha + ) ) }) } diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 551c359239..344fd96454 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,145 +1,145 @@ /* autogenerated */ /* prettier-ignore */ :root { --ld-col-inv: 0; - --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 107.40%); - --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 95.44%); - --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 84.52%); - --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 74.47%); - --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 65.17%); - --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 56.51%); - --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 48.41%); + --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 98.91%); + --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 89.60%); + --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 80.55%); + --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 71.87%); + --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 63.56%); + --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 55.63%); + --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 48.05%); --ld-col-neutral-600: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80%); - --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 33.63%); - --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 26.84%); - --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 20.40%); + --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 33.85%); + --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 27.19%); + --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 20.79%); --ld-col-neutral-alpha-low: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.2); --ld-col-neutral-alpha-lowest: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.1); --ld-col-neutral-h: 240deg; --ld-col-neutral-s: 9.6%; --ld-col-neutral: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 103.90%); - --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 91.94%); - --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 81.02%); - --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 70.97%); - --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 61.67%); - --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 53.01%); - --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 44.91%); + --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 95.41%); + --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 86.10%); + --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 77.05%); + --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 68.37%); + --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 60.06%); + --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 52.13%); + --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 44.55%); --ld-col-rb-600: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30%); - --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 30.13%); - --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 23.34%); - --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 16.90%); + --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 30.35%); + --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 23.69%); + --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 17.29%); --ld-col-rb-alpha-low: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.2); --ld-col-rb-alpha-lowest: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.1); --ld-col-rb-h: 206deg; --ld-col-rb-s: 84.2%; --ld-col-rb: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 93.50%); - --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 81.54%); - --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 70.62%); - --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 60.57%); - --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 51.27%); - --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 42.61%); - --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 34.51%); + --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 85.01%); + --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 75.70%); + --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 66.65%); + --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 57.97%); + --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 49.66%); + --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 41.73%); + --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 34.15%); --ld-col-rg-600: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90%); - --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 19.73%); - --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 12.94%); - --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 6.50%); + --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 19.95%); + --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 13.29%); + --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 6.89%); --ld-col-rg-alpha-low: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.2); --ld-col-rg-alpha-lowest: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.1); --ld-col-rg-h: 153deg; --ld-col-rg-s: 98.5%; --ld-col-rg: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 111.98%); - --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 100.01%); - --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 89.09%); - --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 79.05%); - --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 69.74%); - --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 61.08%); - --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 52.98%); - --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 45.37%); + --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 103.26%); + --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 93.95%); + --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 84.90%); + --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 76.21%); + --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 67.91%); + --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 59.98%); + --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 52.40%); + --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 45.15%); --ld-col-rp-700: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20%); - --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 31.41%); - --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 24.98%); + --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 31.54%); + --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 25.14%); --ld-col-rp-alpha-low: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.2); --ld-col-rp-alpha-lowest: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.1); --ld-col-rp-h: 259deg; --ld-col-rp-s: 48.7%; --ld-col-rp: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 117.60%); - --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 105.64%); - --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 94.72%); - --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 84.67%); - --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 75.37%); - --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 66.71%); - --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 58.61%); + --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 109.11%); + --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 99.80%); + --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 90.75%); + --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 82.07%); + --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 73.76%); + --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 65.83%); + --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 58.25%); --ld-col-rr-600: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00%); - --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 43.83%); - --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 37.04%); - --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 30.60%); + --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 44.05%); + --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 37.39%); + --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 30.99%); --ld-col-rr-alpha-low: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.2); --ld-col-rr-alpha-lowest: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.1); --ld-col-rr-h: 345deg; --ld-col-rr-s: 80%; --ld-col-rr: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 99.89%); - --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 87.93%); - --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 77.01%); - --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 66.96%); - --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 57.66%); + --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 92.28%); + --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 82.97%); + --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 73.92%); + --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 65.23%); + --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 56.93%); --ld-col-vc-400: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00%); - --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 40.90%); - --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 33.29%); - --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 26.12%); - --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 19.33%); - --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 12.89%); + --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 41.42%); + --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 34.17%); + --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 27.22%); + --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 20.56%); + --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 14.16%); --ld-col-vc-alpha-low: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.2); --ld-col-vc-alpha-lowest: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.1); --ld-col-vc-h: 186deg; --ld-col-vc-s: 64%; --ld-col-vc: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 98.13%); - --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 86.17%); - --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 75.25%); - --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 65.20%); + --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 91.25%); + --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 81.94%); + --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 72.89%); + --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 64.20%); --ld-col-vg-300: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90%); - --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 47.24%); - --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 39.14%); - --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 31.53%); - --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 24.36%); - --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 17.57%); - --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 11.13%); + --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 47.97%); + --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 40.39%); + --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 33.14%); + --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 26.19%); + --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 19.52%); + --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 13.12%); --ld-col-vg-alpha-low: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.2); --ld-col-vg-alpha-lowest: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.1); --ld-col-vg-h: 79deg; --ld-col-vg-s: 55.6%; --ld-col-vg: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 116.79%); - --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 104.83%); - --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 93.91%); - --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 83.86%); - --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 74.56%); - --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 65.90%); + --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 108.66%); + --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 99.35%); + --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 90.30%); + --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 81.61%); + --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 73.31%); + --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 65.38%); --ld-col-vm-500: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80%); - --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 50.19%); - --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 43.02%); - --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 36.23%); - --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 29.79%); + --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 50.55%); + --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 43.60%); + --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 36.94%); + --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 30.54%); --ld-col-vm-alpha-low: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.2); --ld-col-vm-alpha-lowest: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.1); --ld-col-vm-h: 329deg; --ld-col-vm-s: 81.4%; --ld-col-vm: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 92.73%); - --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 80.77%); - --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 69.85%); + --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 86.85%); + --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 77.53%); + --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 68.48%); --ld-col-vy-200: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80%); - --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 50.50%); - --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 41.84%); - --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 33.74%); - --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 26.13%); - --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 18.95%); - --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 12.17%); - --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 5.73%); + --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 51.50%); + --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 43.57%); + --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 35.99%); + --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 28.73%); + --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 21.79%); + --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 15.12%); + --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 8.72%); --ld-col-vy-alpha-low: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.1); --ld-col-vy-h: 44deg; From d8c43ceafebd49bbbed17c15be4c5527904eb98d Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Fri, 24 Mar 2023 16:25:47 +0100 Subject: [PATCH 05/28] feat(dark-mode): squash me --- package.json | 1 + scripts/applyDesignTokens.ts | 332 +++++++------------- src/liquid/global/styles/colors/colors.css | 315 ++++++++++--------- src/liquid/global/styles/design-tokens.json | 283 +++++++++-------- 4 files changed, 433 insertions(+), 498 deletions(-) diff --git a/package.json b/package.json index 37b5c01ac6..65318e5f34 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "axe-core": "^4.6.3", "cheerio": "^1.0.0-rc.12", "chokidar-cli": "^3.0.0", + "colorjs.io": "^0.4.3", "cssnano": "^6.0.0", "dotenv-cli": "^7.0.0", "eleventy-plugin-toc": "^1.1.5", diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 382bf005af..004add2628 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -1,9 +1,10 @@ /* eslint-disable @typescript-eslint/no-var-requires */ - const https = require('https') const { existsSync } = require('fs') const { mkdir, writeFile } = require('fs').promises const { join, dirname } = require('path') +const Color = require('colorjs.io').default +// const { Hsluv } = require('hsluv') const isBin = __filename.endsWith('.cjs') const stylesDir = isBin ? './liquid_tmp/styles' : './src/liquid/global/styles' @@ -46,11 +47,11 @@ function getColorTokenValue(variant, styles) { : '') return referenceName } else { - // return relRGBToAbsRGB(variant.fills[0]) return relRGBToAbsHSL(variant.fills[0]) } } +// TODO replace with lib function function relRGBToAbsHSL(fill) { const { r, g, b } = fill.color const cmin = Math.min(r, g, b) @@ -173,6 +174,18 @@ function parseShadows(items) { function parseColors(items, styles: { name: string; description: string }[]) { const colors = {} + function getKeyFromStep(step) { + if (step === 0) return '010' + if (step === 1) return '050' + return step - 1 + '00' + } + + function getStepFromKey(colorKey) { + if (colorKey === '010') return 1 + if (colorKey === '050') return 2 + return (parseInt(colorKey) || 0) / 100 + 1 + } + for (const item of items) { if (item.name.startsWith('_')) { continue @@ -183,23 +196,91 @@ function parseColors(items, styles: { name: string; description: string }[]) { } else if (item.fills?.length && item.styles?.fill) { const style = styles[item.styles.fill] const { name, description } = style - const variants = description.split(', ') const pathParts = name.split('/') - const [baseColorName, ...rest] = - pathParts[pathParts.length > 1 ? pathParts.length - 1 : 0].split('-') - const defaultOnly = rest.length === 0 + const baseColorName = + pathParts[pathParts.length > 1 ? pathParts.length - 1 : 0].split('-')[0] + const isDefault = description === 'Default' + if (!isDefault) continue const colorShortName = ['Neutral', 'White'].includes(baseColorName) ? baseColorName === 'White' ? 'wht' : baseColorName.toLowerCase() : baseColorName.replace(/[a-z]/g, '').toLowerCase() - const colorName = - colorShortName + - (defaultOnly ? '' : '-' + rest.join('-')) + - (variants.includes('Default') ? '/default' : '') - // const colorValue = relRGBToAbsRGB(item.fills[0]) - const colorValue = relRGBToAbsHSL(item.fills[0]) - colors[colorName] = colorValue + const defaultStep = getStepFromKey(name.match(/\d+/g)?.at(0)) + // const hsluv = new Hsluv() + // TODO: check if we need absolute values below + const r = (item.fills[0].color.r * 255).toFixed(2) + const g = (item.fills[0].color.g * 255).toFixed(2) + const b = (item.fills[0].color.b * 255).toFixed(2) + const color = new Color(`rgb(${r}, ${g}, ${b})`) + const hsl = color.to('hsl').coords + const h = hsl[0].toFixed(2) + const s = hsl[1].toFixed(2) + const l = hsl[2].toFixed(2) + const totalSteps = 11 + const totalStepsToWhite = defaultStep + const totalStepsToBlack = totalSteps - defaultStep + + const light = new Color(color) + light.set({ + 'hsl.h': (h) => h - 5.625, + 'hsl.s': 20, + 'hsl.l': 98, + }) + const rangeToLight = color.steps( + color.mix(light, 1, { space: 'hsl', outputSpace: 'lab' }), + { + space: 'hsl', + outputSpace: 'lab', + steps: totalStepsToWhite + 1, + } + ) + const dark = new Color(color) + dark.set({ + 'hsl.h': (h) => h + 5.625, + 'hsl.s': 100, + 'hsl.l': 12, + }) + const rangeToDark = color.steps( + color.mix(dark, 1, { space: 'hsl', outputSpace: 'lab' }), + { + space: 'hsl', + outputSpace: 'lab', + steps: totalStepsToBlack, + } + ) + + // default + colors[ + `${colorShortName}-${getKeyFromStep(defaultStep)}/default` + ] = `hsl(${h}deg ${s}% ${l}%)` + + // to light + rangeToLight.reverse().forEach((color, step) => { + if (step === defaultStep) return + const [h, s, l] = color.to('hsl').coords + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${h.toFixed( + 2 + )}deg ${s.toFixed(2)}% ${l.toFixed(2)}%)` + }) + + // to dark + rangeToDark.forEach((color, i) => { + if (i === 0) return + const step = defaultStep + i + if (step === defaultStep) return + const [h, s, l] = color.to('hsl').coords + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${h.toFixed( + 2 + )}deg ${s.toFixed(2)}% ${l.toFixed(2)}%)` + }) + + // TODO check if it is wiser to pick a color from the middle of the range + // alpha + colors[`${colorShortName}-alpha-low`] = `hsl(${h}deg ${s}% ${l}% / 0.2)` + colors[ + `${colorShortName}-alpha-lowest` + ] = `hsl(${h}deg ${s}% ${l}% / 0.1)` } } @@ -360,234 +441,35 @@ function generateShadows(tokens) { ) } -function getHSLPartsFromValue(hslValue): { - h: string - s: string - l: string - a: string -} { - const hslParts = hslValue.match(/([\d.]+)(deg|%)|(0\.\d+)/g) - const [h, s, l, a] = hslParts - return { - h, - s, - l, - a: a ? a : '1', - } -} - -function getColorVariable( - colorBaseName: string, - colorKey: string, - saturation: number, - lightness: number, - alpha: number -) { - console.info('saturation', saturation) - return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) var(--ld-col-${colorBaseName}-s) ${( - lightness * 100 - ).toFixed(2)}%${alpha === 1 ? '' : ' / ' + alpha});` - // return ` --ld-col-${colorBaseName}-${colorKey}: hsl(var(--ld-col-${colorBaseName}-h) ${( - // saturation * 100 - // ).toFixed(2)}% ${(lightness * 100).toFixed(2)}%${ - // alpha === 1 ? '' : ' / ' + alpha - // });` -} - -// Function to compute logarithmic function -function computeLogFn( - x1: number, - y1: number, - x2: number, - y2: number, - x3: number, - y3: number, - power: number -) { - // Calculate the coefficients of the logarithmic equation, y = a * log(x)^p + b - const a = - (y1 - y3) / (Math.pow(Math.log(x1), power) - Math.pow(Math.log(x3), power)) - const b = y2 - a * Math.pow(Math.log(x2), power) - - // Return the logarithmic function - return (x: number) => a * Math.pow(Math.log(x), power) + b -} -function computeY( - x1: number, - y1: number, - x2: number, - y2: number, - x3: number, - y3: number, - power: number, - xVal: number -): number { - // Get logarithmic function - const logFn = computeLogFn(x1, y1, x2, y2, x3, y3, power) - - // Calculate and return y value - return logFn(xVal) -} - -function getStepFromKey(colorKey) { - if (colorKey === '010') return 1 - if (colorKey === '050') return 2 - return (parseInt(colorKey) || 0) / 100 + 2 -} - -function getLighness( - baseHue: string, - baseLighness: string, - baseColorKey: string, - colorKey: string -): number { - console.info('baseHue', baseHue) - const totalSteps = 11 - const baseStep = getStepFromKey(baseColorKey) - const step = getStepFromKey(colorKey) - - const x1 = 1 - const y1 = 0.98 - const x2 = 1 + baseStep / totalSteps - const y2 = parseFloat(baseLighness) / 100 - const x3 = 1 + 1 - const y3 = 0.11 - - // f(x) = 1 + (sin(Pi * x - Pi / c) + 1) / 2 - const x = parseFloat(baseHue) / 360 - const c = 3 - let power = Math.sin(Math.PI * x - Math.PI / c) + 1 - power = 1.1 - - const lighness = computeY( - x1, - y1, - x2, - y2, - x3, - y3, - power, - 1 + step / totalSteps - ) - return lighness -} - -function getSaturation( - baseSaturation: string, - baseColorKey: string, - colorKey: string -): number { - const totalSteps = 11 - const baseStep = getStepFromKey(baseColorKey) - const step = getStepFromKey(colorKey) - - const x1 = 1 - const y1 = 0.01 - const x2 = 1 + baseStep / totalSteps - const y2 = parseFloat(baseSaturation) / 100 - const x3 = 1 + 1 - const y3 = 0.9 - - const power = 3 - - const saturation = computeY( - x1, - y1, - x2, - y2, - x3, - y3, - power, - 1 + step / totalSteps - ) - return saturation -} - function generateColors(colorTokens) { const colorVariables = [] // Basic colors Object.keys(colorTokens).forEach((key) => { - const colorVal = colorTokens[key] + const val = colorTokens[key] if (key.includes('/default')) { - const { h, s, l } = getHSLPartsFromValue(colorVal) - const baseColorName = key - .replace(/\d+/g, '') + const colorKey = key.split('/default')[0] + const colorBaseName = key + .replace(/\d/g, '') .replace('/default', '') .replace(/-$/, '') - if (baseColorName === 'wht') { - return - } + colorVariables.push(` --ld-col-${colorKey}: ${val};`) - const baseColorKey = key.match(/\d+/g)?.at(0) - if (!baseColorKey) { - return + // prevents duplicate custom properties in cases like "sp/default" + if (colorBaseName !== colorKey) { + colorVariables.push(` --ld-col-${colorBaseName}: ${val};`) } - - const baseHue = h - const baseLighness = l - const baseSaturation = s - - colorVariables.push( - ` --ld-col-${baseColorName}: hsl(var(--ld-col-${baseColorName}-h) var(--ld-col-${baseColorName}-s) ${baseLighness});` - ) - colorVariables.push(` --ld-col-${baseColorName}-h: ${h};`) - colorVariables.push(` --ld-col-${baseColorName}-s: ${s};`) - ;[ - '010', - '050', - '100', - '200', - '300', - '400', - '500', - '600', - '700', - '800', - '900', - 'alpha-low', - 'alpha-lowest', - ].forEach((colorKey) => { - let lightness: number - let saturation: number - let alpha: number - if (colorKey === 'alpha-low') { - alpha = 0.2 - lightness = parseFloat(baseLighness) / 100 - saturation = parseFloat(baseSaturation) / 100 - } else if (colorKey === 'alpha-lowest') { - alpha = 0.1 - lightness = parseFloat(baseLighness) / 100 - saturation = parseFloat(baseSaturation) / 100 - } else { - alpha = 1 - lightness = getLighness(baseHue, baseLighness, baseColorKey, colorKey) - saturation = getSaturation(baseSaturation, baseColorKey, colorKey) - } - colorVariables.push( - getColorVariable( - baseColorName, - colorKey, - saturation, - lightness, - alpha - ) - ) - }) + } else { + colorVariables.push(` --ld-col-${key}: ${val};`) } }) - colorVariables.push(' --ld-col-inv: 0;') return ensureWriteFile( join(stylesDir, 'colors/colors.css'), - [ - '/* autogenerated */ /* prettier-ignore */', - ':root {', - ...colorVariables.sort(), - '}', - '', - ].join('\n'), + ['/* autogenerated */', ':root {', ...colorVariables.sort(), '}', ''].join( + '\n' + ), 'utf8' ) } diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 344fd96454..5fdde2d653 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,148 +1,171 @@ -/* autogenerated */ /* prettier-ignore */ +/* autogenerated */ :root { - --ld-col-inv: 0; - --ld-col-neutral-010: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 98.91%); - --ld-col-neutral-050: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 89.60%); - --ld-col-neutral-100: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 80.55%); - --ld-col-neutral-200: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 71.87%); - --ld-col-neutral-300: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 63.56%); - --ld-col-neutral-400: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 55.63%); - --ld-col-neutral-500: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 48.05%); - --ld-col-neutral-600: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80%); - --ld-col-neutral-700: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 33.85%); - --ld-col-neutral-800: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 27.19%); - --ld-col-neutral-900: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 20.79%); - --ld-col-neutral-alpha-low: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.2); - --ld-col-neutral-alpha-lowest: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.80% / 0.1); - --ld-col-neutral-h: 240deg; - --ld-col-neutral-s: 9.6%; - --ld-col-neutral: hsl(var(--ld-col-neutral-h) var(--ld-col-neutral-s) 40.8%); - --ld-col-rb-010: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 95.41%); - --ld-col-rb-050: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 86.10%); - --ld-col-rb-100: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 77.05%); - --ld-col-rb-200: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 68.37%); - --ld-col-rb-300: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 60.06%); - --ld-col-rb-400: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 52.13%); - --ld-col-rb-500: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 44.55%); - --ld-col-rb-600: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30%); - --ld-col-rb-700: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 30.35%); - --ld-col-rb-800: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 23.69%); - --ld-col-rb-900: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 17.29%); - --ld-col-rb-alpha-low: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.2); - --ld-col-rb-alpha-lowest: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.30% / 0.1); - --ld-col-rb-h: 206deg; - --ld-col-rb-s: 84.2%; - --ld-col-rb: hsl(var(--ld-col-rb-h) var(--ld-col-rb-s) 37.3%); - --ld-col-rg-010: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 85.01%); - --ld-col-rg-050: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 75.70%); - --ld-col-rg-100: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 66.65%); - --ld-col-rg-200: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 57.97%); - --ld-col-rg-300: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 49.66%); - --ld-col-rg-400: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 41.73%); - --ld-col-rg-500: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 34.15%); - --ld-col-rg-600: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90%); - --ld-col-rg-700: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 19.95%); - --ld-col-rg-800: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 13.29%); - --ld-col-rg-900: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 6.89%); - --ld-col-rg-alpha-low: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.2); - --ld-col-rg-alpha-lowest: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.90% / 0.1); - --ld-col-rg-h: 153deg; - --ld-col-rg-s: 98.5%; - --ld-col-rg: hsl(var(--ld-col-rg-h) var(--ld-col-rg-s) 26.9%); - --ld-col-rp-010: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 103.26%); - --ld-col-rp-050: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 93.95%); - --ld-col-rp-100: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 84.90%); - --ld-col-rp-200: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 76.21%); - --ld-col-rp-300: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 67.91%); - --ld-col-rp-400: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 59.98%); - --ld-col-rp-500: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 52.40%); - --ld-col-rp-600: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 45.15%); - --ld-col-rp-700: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20%); - --ld-col-rp-800: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 31.54%); - --ld-col-rp-900: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 25.14%); - --ld-col-rp-alpha-low: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.2); - --ld-col-rp-alpha-lowest: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.20% / 0.1); - --ld-col-rp-h: 259deg; - --ld-col-rp-s: 48.7%; - --ld-col-rp: hsl(var(--ld-col-rp-h) var(--ld-col-rp-s) 38.2%); - --ld-col-rr-010: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 109.11%); - --ld-col-rr-050: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 99.80%); - --ld-col-rr-100: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 90.75%); - --ld-col-rr-200: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 82.07%); - --ld-col-rr-300: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 73.76%); - --ld-col-rr-400: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 65.83%); - --ld-col-rr-500: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 58.25%); - --ld-col-rr-600: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00%); - --ld-col-rr-700: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 44.05%); - --ld-col-rr-800: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 37.39%); - --ld-col-rr-900: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 30.99%); - --ld-col-rr-alpha-low: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.2); - --ld-col-rr-alpha-lowest: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51.00% / 0.1); - --ld-col-rr-h: 345deg; - --ld-col-rr-s: 80%; - --ld-col-rr: hsl(var(--ld-col-rr-h) var(--ld-col-rr-s) 51%); - --ld-col-vc-010: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 92.28%); - --ld-col-vc-050: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 82.97%); - --ld-col-vc-100: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 73.92%); - --ld-col-vc-200: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 65.23%); - --ld-col-vc-300: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 56.93%); - --ld-col-vc-400: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00%); - --ld-col-vc-500: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 41.42%); - --ld-col-vc-600: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 34.17%); - --ld-col-vc-700: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 27.22%); - --ld-col-vc-800: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 20.56%); - --ld-col-vc-900: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 14.16%); - --ld-col-vc-alpha-low: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.2); - --ld-col-vc-alpha-lowest: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49.00% / 0.1); - --ld-col-vc-h: 186deg; - --ld-col-vc-s: 64%; - --ld-col-vc: hsl(var(--ld-col-vc-h) var(--ld-col-vc-s) 49%); - --ld-col-vg-010: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 91.25%); - --ld-col-vg-050: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 81.94%); - --ld-col-vg-100: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 72.89%); - --ld-col-vg-200: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 64.20%); - --ld-col-vg-300: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90%); - --ld-col-vg-400: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 47.97%); - --ld-col-vg-500: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 40.39%); - --ld-col-vg-600: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 33.14%); - --ld-col-vg-700: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 26.19%); - --ld-col-vg-800: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 19.52%); - --ld-col-vg-900: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 13.12%); - --ld-col-vg-alpha-low: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.2); - --ld-col-vg-alpha-lowest: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.90% / 0.1); - --ld-col-vg-h: 79deg; - --ld-col-vg-s: 55.6%; - --ld-col-vg: hsl(var(--ld-col-vg-h) var(--ld-col-vg-s) 55.9%); - --ld-col-vm-010: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 108.66%); - --ld-col-vm-050: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 99.35%); - --ld-col-vm-100: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 90.30%); - --ld-col-vm-200: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 81.61%); - --ld-col-vm-300: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 73.31%); - --ld-col-vm-400: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 65.38%); - --ld-col-vm-500: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80%); - --ld-col-vm-600: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 50.55%); - --ld-col-vm-700: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 43.60%); - --ld-col-vm-800: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 36.94%); - --ld-col-vm-900: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 30.54%); - --ld-col-vm-alpha-low: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.2); - --ld-col-vm-alpha-lowest: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.80% / 0.1); - --ld-col-vm-h: 329deg; - --ld-col-vm-s: 81.4%; - --ld-col-vm: hsl(var(--ld-col-vm-h) var(--ld-col-vm-s) 57.8%); - --ld-col-vy-010: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 86.85%); - --ld-col-vy-050: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 77.53%); - --ld-col-vy-100: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 68.48%); - --ld-col-vy-200: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80%); - --ld-col-vy-300: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 51.50%); - --ld-col-vy-400: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 43.57%); - --ld-col-vy-500: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 35.99%); - --ld-col-vy-600: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 28.73%); - --ld-col-vy-700: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 21.79%); - --ld-col-vy-800: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 15.12%); - --ld-col-vy-900: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 8.72%); - --ld-col-vy-alpha-low: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.2); - --ld-col-vy-alpha-lowest: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.80% / 0.1); - --ld-col-vy-h: 44deg; - --ld-col-vy-s: 100%; - --ld-col-vy: hsl(var(--ld-col-vy-h) var(--ld-col-vy-s) 59.8%); + --ld-col-rb-010: hsl(200.62deg 20.00% 98.00%); + --ld-col-rb-050: hsl(201.43deg 29.17% 89.32%); + --ld-col-rb-100: hsl(202.23deg 38.35% 80.64%); + --ld-col-rb-200: hsl(203.04deg 47.52% 71.97%); + --ld-col-rb-300: hsl(203.84deg 56.69% 63.29%); + --ld-col-rb-400: hsl(204.64deg 65.86% 54.61%); + --ld-col-rb-500: hsl(205.45deg 75.04% 45.93%); + --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); + --ld-col-rb-700: hsl(208.13deg 89.47% 28.84%); + --ld-col-rb-800: hsl(210.00deg 94.74% 20.42%); + --ld-col-rb-900: hsl(211.88deg 100.00% 12.00%); + --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); + --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); + --ld-col-rb: hsl(206.25deg 84.21% 37.25%); + --ld-col-rg-010: hsl(147.71deg 20.00% 98.00%); + --ld-col-rg-050: hsl(148.51deg 31.22% 87.84%); + --ld-col-rg-100: hsl(149.32deg 42.44% 77.68%); + --ld-col-rg-200: hsl(150.12deg 53.66% 67.51%); + --ld-col-rg-300: hsl(150.92deg 64.88% 57.35%); + --ld-col-rg-400: hsl(151.73deg 76.10% 47.19%); + --ld-col-rg-500: hsl(152.53deg 87.32% 37.03%); + --ld-col-rg-600: hsl(153.33deg 98.54% 26.86%); + --ld-col-rg-700: hsl(155.21deg 99.03% 21.91%); + --ld-col-rg-800: hsl(157.08deg 99.51% 16.95%); + --ld-col-rg-900: hsl(158.96deg 100.00% 12.00%); + --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 26.86% / 0.2); + --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 26.86% / 0.1); + --ld-col-rg: hsl(153.33deg 98.54% 26.86%); + --ld-col-rp-010: hsl(253.32deg 20.00% 98.00%); + --ld-col-rp-050: hsl(254.03deg 23.59% 90.53%); + --ld-col-rp-100: hsl(254.73deg 27.18% 83.06%); + --ld-col-rp-200: hsl(255.43deg 30.77% 75.59%); + --ld-col-rp-300: hsl(256.13deg 34.36% 68.12%); + --ld-col-rp-400: hsl(256.84deg 37.95% 60.65%); + --ld-col-rp-500: hsl(257.54deg 41.54% 53.18%); + --ld-col-rp-600: hsl(258.24deg 45.13% 45.71%); + --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); + --ld-col-rp-800: hsl(261.76deg 74.36% 25.12%); + --ld-col-rp-900: hsl(264.57deg 100.00% 12.00%); + --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); + --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); + --ld-col-rp: hsl(258.95deg 48.72% 38.24%); + --ld-col-rr-010: hsl(339.38deg 20.00% 98.00%); + --ld-col-rr-050: hsl(340.18deg 28.57% 91.28%); + --ld-col-rr-100: hsl(340.98deg 37.14% 84.57%); + --ld-col-rr-200: hsl(341.79deg 45.71% 77.85%); + --ld-col-rr-300: hsl(342.59deg 54.29% 71.13%); + --ld-col-rr-400: hsl(343.39deg 62.86% 64.41%); + --ld-col-rr-500: hsl(344.20deg 71.43% 57.70%); + --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); + --ld-col-rr-700: hsl(346.88deg 86.67% 37.99%); + --ld-col-rr-800: hsl(348.75deg 93.33% 24.99%); + --ld-col-rr-900: hsl(350.63deg 100.00% 12.00%); + --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); + --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); + --ld-col-rr: hsl(345.00deg 80.00% 50.98%); + --ld-col-sb-010: hsl(169.76deg 20.00% 98.00%); + --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); + --ld-col-sb-100: hsl(176.01deg 50.96% 64.95%); + --ld-col-sb-200: hsl(176.63deg 57.09% 58.33%); + --ld-col-sb-300: hsl(177.26deg 63.22% 51.71%); + --ld-col-sb-400: hsl(177.88deg 69.35% 45.09%); + --ld-col-sb-500: hsl(178.51deg 75.48% 38.47%); + --ld-col-sb-600: hsl(179.13deg 81.61% 31.86%); + --ld-col-sb-700: hsl(179.76deg 87.74% 25.24%); + --ld-col-sb-800: hsl(180.38deg 93.87% 18.62%); + --ld-col-sb-900: hsl(181.01deg 100.00% 12.00%); + --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); + --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); + --ld-col-sb: hsl(175.38deg 44.83% 71.57%); + --ld-col-sg-010: hsl(88.66deg 20.00% 98.00%); + --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); + --ld-col-sg-100: hsl(94.91deg 55.56% 65.82%); + --ld-col-sg-200: hsl(95.54deg 61.11% 59.09%); + --ld-col-sg-300: hsl(96.16deg 66.67% 52.37%); + --ld-col-sg-400: hsl(96.79deg 72.22% 45.64%); + --ld-col-sg-500: hsl(97.41deg 77.78% 38.91%); + --ld-col-sg-600: hsl(98.04deg 83.33% 32.18%); + --ld-col-sg-700: hsl(98.66deg 88.89% 25.46%); + --ld-col-sg-800: hsl(99.29deg 94.44% 18.73%); + --ld-col-sg-900: hsl(99.91deg 100.00% 12.00%); + --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); + --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); + --ld-col-sg: hsl(94.29deg 50.00% 72.55%); + --ld-col-sp-010: hsl(334.38deg 20.00% 98.00%); + --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); + --ld-col-sp-100: hsl(340.63deg 40.74% 74.54%); + --ld-col-sp-200: hsl(341.25deg 48.15% 66.72%); + --ld-col-sp-300: hsl(341.88deg 55.56% 58.90%); + --ld-col-sp-400: hsl(342.50deg 62.96% 51.08%); + --ld-col-sp-500: hsl(343.13deg 70.37% 43.27%); + --ld-col-sp-600: hsl(343.75deg 77.78% 35.45%); + --ld-col-sp-700: hsl(344.38deg 85.19% 27.63%); + --ld-col-sp-800: hsl(345.00deg 92.59% 19.82%); + --ld-col-sp-900: hsl(345.63deg 100.00% 12.00%); + --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); + --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); + --ld-col-sp: hsl(340.00deg 33.33% 82.35%); + --ld-col-sy-010: hsl(24.38deg 20.00% 98.00%); + --ld-col-sy-050: hsl(30.00deg 100.00% 86.27%); + --ld-col-sy-100: hsl(30.63deg 100.00% 78.02%); + --ld-col-sy-200: hsl(31.25deg 100.00% 69.77%); + --ld-col-sy-300: hsl(31.88deg 100.00% 61.52%); + --ld-col-sy-400: hsl(32.50deg 100.00% 53.26%); + --ld-col-sy-500: hsl(33.13deg 100.00% 45.01%); + --ld-col-sy-600: hsl(33.75deg 100.00% 36.76%); + --ld-col-sy-700: hsl(34.38deg 100.00% 28.51%); + --ld-col-sy-800: hsl(35.00deg 100.00% 20.25%); + --ld-col-sy-900: hsl(35.63deg 100.00% 12.00%); + --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 86.27% / 0.2); + --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 86.27% / 0.1); + --ld-col-sy: hsl(30.00deg 100.00% 86.27%); + --ld-col-vc-010: hsl(180.00deg 20.00% 98.00%); + --ld-col-vc-050: hsl(181.12deg 28.80% 88.20%); + --ld-col-vc-100: hsl(182.25deg 37.60% 78.41%); + --ld-col-vc-200: hsl(183.37deg 46.40% 68.61%); + --ld-col-vc-300: hsl(184.50deg 55.20% 58.82%); + --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); + --ld-col-vc-500: hsl(186.75deg 71.20% 41.62%); + --ld-col-vc-600: hsl(187.88deg 78.40% 34.21%); + --ld-col-vc-700: hsl(189.00deg 85.60% 26.81%); + --ld-col-vc-800: hsl(190.13deg 92.80% 19.40%); + --ld-col-vc-900: hsl(191.25deg 100.00% 12.00%); + --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); + --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); + --ld-col-vc: hsl(185.63deg 64.00% 49.02%); + --ld-col-vg-010: hsl(73.58deg 20.00% 98.00%); + --ld-col-vg-050: hsl(74.98deg 28.89% 87.47%); + --ld-col-vg-100: hsl(76.39deg 37.78% 76.94%); + --ld-col-vg-200: hsl(77.79deg 46.67% 66.41%); + --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); + --ld-col-vg-400: hsl(80.14deg 62.96% 48.57%); + --ld-col-vg-500: hsl(81.08deg 70.37% 41.25%); + --ld-col-vg-600: hsl(82.01deg 77.78% 33.94%); + --ld-col-vg-700: hsl(82.95deg 85.19% 26.63%); + --ld-col-vg-800: hsl(83.89deg 92.59% 19.31%); + --ld-col-vg-900: hsl(84.83deg 100.00% 12.00%); + --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); + --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); + --ld-col-vg: hsl(79.20deg 55.56% 55.88%); + --ld-col-vm-010: hsl(323.52deg 20.00% 98.00%); + --ld-col-vm-050: hsl(324.46deg 30.23% 91.31%); + --ld-col-vm-100: hsl(325.39deg 40.46% 84.61%); + --ld-col-vm-200: hsl(326.33deg 50.70% 77.92%); + --ld-col-vm-300: hsl(327.27deg 60.93% 71.23%); + --ld-col-vm-400: hsl(328.21deg 71.16% 64.54%); + --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); + --ld-col-vm-600: hsl(330.55deg 86.05% 46.38%); + --ld-col-vm-700: hsl(331.96deg 90.70% 34.92%); + --ld-col-vm-800: hsl(333.36deg 95.35% 23.46%); + --ld-col-vm-900: hsl(334.77deg 100.00% 12.00%); + --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); + --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); + --ld-col-vm: hsl(329.14deg 81.40% 57.84%); + --ld-col-vy-010: hsl(38.28deg 20.00% 98.00%); + --ld-col-vy-050: hsl(40.15deg 46.67% 85.27%); + --ld-col-vy-100: hsl(42.03deg 73.33% 72.54%); + --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); + --ld-col-vy-300: hsl(44.71deg 100.00% 52.97%); + --ld-col-vy-400: hsl(45.51deg 100.00% 46.15%); + --ld-col-vy-500: hsl(46.31deg 100.00% 39.32%); + --ld-col-vy-600: hsl(47.12deg 100.00% 32.49%); + --ld-col-vy-700: hsl(47.92deg 100.00% 25.66%); + --ld-col-vy-800: hsl(48.72deg 100.00% 18.83%); + --ld-col-vy-900: hsl(49.53deg 100.00% 12.00%); + --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); + --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); + --ld-col-vy: hsl(43.90deg 100.00% 59.80%); } diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index 2053bb95b4..73bfdd94a5 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -206,133 +206,162 @@ "40": "2.5rem" }, "colors": { - "neutral-010": "hsl(240deg 40% 98%)", - "neutral-050": "hsl(240deg 26.7% 94.1%)", - "neutral-100": "hsl(240deg 17.6% 90%)", - "neutral-200": "hsl(240deg 9.5% 80%)", - "neutral-300": "hsl(240deg 10.8% 69.6%)", - "neutral-400": "hsl(240deg 8% 58%)", - "neutral-500": "hsl(240deg 6.9% 50%)", - "neutral-600/default": "hsl(240deg 9.6% 40.8%)", - "neutral-700": "hsl(240deg 10% 30%)", - "neutral-800": "hsl(240deg 16% 20%)", - "neutral-900": "hsl(220deg 50% 12%)", - "rr-010": "hsl(347deg 100% 98.2%)", - "rr-050": "hsl(357deg 100% 96.5%)", - "rr-100": "hsl(357deg 100% 92.7%)", - "rr-200": "hsl(356deg 100% 85.1%)", - "rr-300": "hsl(353deg 82.9% 74.8%)", - "rr-400": "hsl(351deg 93.9% 68%)", - "rr-500": "hsl(346deg 89.6% 59.2%)", - "rr-600/default": "hsl(345deg 80% 51%)", - "rr-alpha-lowest": "hsl(345deg 80% 51% / 0.1)", - "rr-alpha-low": "hsl(345deg 80% 51% / 0.2)", - "rr-700": "hsl(345deg 78.3% 37.9%)", - "rr-800": "hsl(346deg 80.8% 25.4%)", - "rr-900": "hsl(345deg 87.5% 15.7%)", - "rb-010": "hsl(207deg 100% 97.8%)", - "rb-050": "hsl(206deg 72.7% 95.7%)", - "rb-100": "hsl(207deg 70% 91%)", - "rb-200": "hsl(207deg 70% 81.2%)", - "rb-300": "hsl(207deg 70.3% 71%)", - "rb-400": "hsl(206deg 68.3% 59.2%)", - "rb-500": "hsl(206deg 69.2% 50.8%)", - "rb-600/default": "hsl(206deg 84.2% 37.3%)", - "rb-alpha-lowest": "hsl(206deg 84.2% 37.3% / 0.1)", - "rb-alpha-low": "hsl(206deg 84.2% 37.3% / 0.2)", - "rb-700": "hsl(207deg 90.4% 31.1%)", - "rb-800": "hsl(206deg 82.1% 20.8%)", - "rb-900": "hsl(210deg 100% 11%)", - "vy-010": "hsl(40deg 81.8% 97.8%)", - "vy-050": "hsl(41deg 100% 92.5%)", - "vy-100": "hsl(44deg 95.8% 82.1%)", - "vy-200/default": "hsl(44deg 100% 59.8%)", - "vy-alpha-lowest": "hsl(44deg 100% 59.8% / 0.1)", - "vy-alpha-low": "hsl(44deg 100% 59.8% / 0.2)", - "vy-300": "hsl(44deg 76.3% 55.8%)", - "vy-400": "hsl(44deg 100% 37.5%)", - "vy-500": "hsl(42deg 96.7% 32.5%)", - "vy-600": "hsl(42deg 95.4% 25.7%)", - "vy-700": "hsl(42deg 90% 20%)", - "vy-800": "hsl(42deg 71.8% 13.9%)", - "vy-900": "hsl(42deg 68.3% 9.2%)", - "rp-010": "hsl(263deg 100% 98.4%)", - "rp-050": "hsl(259deg 82% 96%)", - "rp-100": "hsl(259deg 79.1% 94%)", - "rp-200": "hsl(259deg 80% 87%)", - "rp-300": "hsl(263deg 92.1% 79.6%)", - "rp-400": "hsl(260deg 61.3% 68.6%)", - "rp-500": "hsl(259deg 54.2% 61.7%)", - "rp-600": "hsl(259deg 44.5% 52%)", - "rp-700/default": "hsl(259deg 48.7% 38.2%)", - "rp-alpha-lowest": "hsl(259deg 48.7% 38.2% / 0.1)", - "rp-alpha-low": "hsl(259deg 48.7% 38.2% / 0.2)", - "rp-800": "hsl(259deg 54.8% 29.3%)", - "rp-900": "hsl(259deg 44.2% 16.7%)", - "vg-010": "hsl(76deg 73.3% 97.1%)", - "vg-050": "hsl(80deg 76.3% 88.4%)", - "vg-100": "hsl(79deg 62.1% 82.9%)", - "vg-200": "hsl(79deg 55% 70%)", - "vg-300/default": "hsl(79deg 55.6% 55.9%)", - "vg-alpha-lowest": "hsl(79deg 55.6% 55.9% / 0.1)", - "vg-alpha-low": "hsl(79deg 55.6% 55.9% / 0.2)", - "vg-400": "hsl(78deg 100% 31.2%)", - "vg-500": "hsl(79deg 100% 25.7%)", - "vg-600": "hsl(80deg 100% 23.7%)", - "vg-700": "hsl(80deg 98.8% 17%)", - "vg-800": "hsl(79deg 100% 11.8%)", - "vg-900": "hsl(85deg 100% 6.1%)", - "vm-010": "hsl(330deg 100% 98%)", - "vm-050": "hsl(344deg 100% 96.3%)", - "vm-100": "hsl(340deg 100% 92.4%)", - "vm-200": "hsl(337deg 100% 84.5%)", - "vm-300": "hsl(329deg 100% 77.7%)", - "vm-400": "hsl(329deg 72.5% 64.2%)", - "vm-500/default": "hsl(329deg 81.4% 57.8%)", - "vm-alpha-lowest": "hsl(329deg 81.4% 57.8% / 0.1)", - "vm-alpha-low": "hsl(329deg 81.4% 57.8% / 0.2)", - "vm-600": "hsl(326deg 69.6% 44%)", - "vm-700": "hsl(326deg 80.4% 32.5%)", - "vm-800": "hsl(327deg 85.4% 22.9%)", - "vm-900": "hsl(329deg 100% 12.2%)", - "rg-010": "hsl(154deg 46.7% 97.1%)", - "rg-050": "hsl(131deg 80.4% 92.9%)", - "rg-100": "hsl(130deg 67.1% 86.7%)", - "rg-200": "hsl(130deg 67.9% 72.9%)", - "rg-300": "hsl(137deg 60% 67.1%)", - "rg-400": "hsl(139deg 47.1% 53.3%)", - "rg-500": "hsl(142deg 54.7% 41.6%)", - "rg-600/default": "hsl(153deg 98.5% 26.9%)", - "rg-alpha-lowest": "hsl(153deg 98.5% 26.9% / 0.1)", - "rg-alpha-low": "hsl(153deg 98.5% 26.9% / 0.2)", - "rg-700": "hsl(146deg 92.1% 20.4%)", - "rg-800": "hsl(143deg 88.8% 15.8%)", - "rg-900": "hsl(138deg 100% 8.7%)", - "vc-010": "hsl(190deg 75% 98.4%)", - "vc-050": "hsl(185deg 97.1% 93.3%)", - "vc-100": "hsl(186deg 78.3% 85.8%)", - "vc-200": "hsl(186deg 74.2% 70.8%)", - "vc-300": "hsl(185deg 70.4% 60.4%)", - "vc-400/default": "hsl(186deg 64% 49%)", - "vc-alpha-lowest": "hsl(186deg 64% 49% / 0.1)", - "vc-alpha-low": "hsl(186deg 64% 49% / 0.2)", - "vc-500": "hsl(185deg 91.7% 36.1%)", - "vc-600": "hsl(185deg 100% 28.2%)", - "vc-700": "hsl(185deg 99.6% 21.3%)", - "vc-800": "hsl(185deg 98.3% 14.2%)", - "vc-900": "hsl(187deg 100% 6.9%)", - "sg/default": "hsl(94deg 50% 72.5%)", - "sy/default": "hsl(30deg 100% 86.3%)", - "sb/default": "hsl(175deg 44.8% 71.6%)", - "sp/default": "hsl(340deg 33.3% 82.4%)", - "wht/default": "hsl(0deg 0% 100%)", - "wht-alpha-highest": "hsl(0deg 0% 100% / 0.8)", - "wht-alpha-high": "hsl(0deg 0% 100% / 0.7)", - "wht-alpha-medium": "hsl(0deg 0% 100% / 0.5)", - "wht-alpha-low": "hsl(0deg 0% 100% / 0.2)", - "wht-alpha-lowest": "hsl(0deg 0% 100% / 0.1)", - "wht-alpha-none": "hsl(0deg 0% 100% / 0)", - "neutral-999": "hsl(0deg 0% 0%)" + "rr-600/default": "hsl(345.00deg 80.00% 50.98%)", + "rr-010": "hsl(339.38deg 20.00% 98.00%)", + "rr-050": "hsl(340.18deg 28.57% 91.28%)", + "rr-100": "hsl(340.98deg 37.14% 84.57%)", + "rr-200": "hsl(341.79deg 45.71% 77.85%)", + "rr-300": "hsl(342.59deg 54.29% 71.13%)", + "rr-400": "hsl(343.39deg 62.86% 64.41%)", + "rr-500": "hsl(344.20deg 71.43% 57.70%)", + "rr-700": "hsl(346.88deg 86.67% 37.99%)", + "rr-800": "hsl(348.75deg 93.33% 24.99%)", + "rr-900": "hsl(350.63deg 100.00% 12.00%)", + "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", + "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", + "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", + "rb-010": "hsl(200.62deg 20.00% 98.00%)", + "rb-050": "hsl(201.43deg 29.17% 89.32%)", + "rb-100": "hsl(202.23deg 38.35% 80.64%)", + "rb-200": "hsl(203.04deg 47.52% 71.97%)", + "rb-300": "hsl(203.84deg 56.69% 63.29%)", + "rb-400": "hsl(204.64deg 65.86% 54.61%)", + "rb-500": "hsl(205.45deg 75.04% 45.93%)", + "rb-700": "hsl(208.13deg 89.47% 28.84%)", + "rb-800": "hsl(210.00deg 94.74% 20.42%)", + "rb-900": "hsl(211.88deg 100.00% 12.00%)", + "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", + "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", + "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", + "vy-010": "hsl(38.28deg 20.00% 98.00%)", + "vy-050": "hsl(40.15deg 46.67% 85.27%)", + "vy-100": "hsl(42.03deg 73.33% 72.54%)", + "vy-300": "hsl(44.71deg 100.00% 52.97%)", + "vy-400": "hsl(45.51deg 100.00% 46.15%)", + "vy-500": "hsl(46.31deg 100.00% 39.32%)", + "vy-600": "hsl(47.12deg 100.00% 32.49%)", + "vy-700": "hsl(47.92deg 100.00% 25.66%)", + "vy-800": "hsl(48.72deg 100.00% 18.83%)", + "vy-900": "hsl(49.53deg 100.00% 12.00%)", + "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", + "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", + "rp-700/default": "hsl(258.95deg 48.72% 38.24%)", + "rp-010": "hsl(253.32deg 20.00% 98.00%)", + "rp-050": "hsl(254.03deg 23.59% 90.53%)", + "rp-100": "hsl(254.73deg 27.18% 83.06%)", + "rp-200": "hsl(255.43deg 30.77% 75.59%)", + "rp-300": "hsl(256.13deg 34.36% 68.12%)", + "rp-400": "hsl(256.84deg 37.95% 60.65%)", + "rp-500": "hsl(257.54deg 41.54% 53.18%)", + "rp-600": "hsl(258.24deg 45.13% 45.71%)", + "rp-800": "hsl(261.76deg 74.36% 25.12%)", + "rp-900": "hsl(264.57deg 100.00% 12.00%)", + "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", + "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", + "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", + "vg-010": "hsl(73.58deg 20.00% 98.00%)", + "vg-050": "hsl(74.98deg 28.89% 87.47%)", + "vg-100": "hsl(76.39deg 37.78% 76.94%)", + "vg-200": "hsl(77.79deg 46.67% 66.41%)", + "vg-400": "hsl(80.14deg 62.96% 48.57%)", + "vg-500": "hsl(81.08deg 70.37% 41.25%)", + "vg-600": "hsl(82.01deg 77.78% 33.94%)", + "vg-700": "hsl(82.95deg 85.19% 26.63%)", + "vg-800": "hsl(83.89deg 92.59% 19.31%)", + "vg-900": "hsl(84.83deg 100.00% 12.00%)", + "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", + "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", + "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", + "vm-010": "hsl(323.52deg 20.00% 98.00%)", + "vm-050": "hsl(324.46deg 30.23% 91.31%)", + "vm-100": "hsl(325.39deg 40.46% 84.61%)", + "vm-200": "hsl(326.33deg 50.70% 77.92%)", + "vm-300": "hsl(327.27deg 60.93% 71.23%)", + "vm-400": "hsl(328.21deg 71.16% 64.54%)", + "vm-600": "hsl(330.55deg 86.05% 46.38%)", + "vm-700": "hsl(331.96deg 90.70% 34.92%)", + "vm-800": "hsl(333.36deg 95.35% 23.46%)", + "vm-900": "hsl(334.77deg 100.00% 12.00%)", + "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", + "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", + "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", + "rg-010": "hsl(147.71deg 20.00% 98.00%)", + "rg-050": "hsl(148.51deg 31.22% 87.84%)", + "rg-100": "hsl(149.32deg 42.44% 77.68%)", + "rg-200": "hsl(150.12deg 53.66% 67.51%)", + "rg-300": "hsl(150.92deg 64.88% 57.35%)", + "rg-400": "hsl(151.73deg 76.10% 47.19%)", + "rg-500": "hsl(152.53deg 87.32% 37.03%)", + "rg-700": "hsl(155.21deg 99.03% 21.91%)", + "rg-800": "hsl(157.08deg 99.51% 16.95%)", + "rg-900": "hsl(158.96deg 100.00% 12.00%)", + "rg-alpha-low": "hsl(153.33deg 98.54% 26.86% / 0.2)", + "rg-alpha-lowest": "hsl(153.33deg 98.54% 26.86% / 0.1)", + "vc-400/default": "hsl(185.63deg 64.00% 49.02%)", + "vc-010": "hsl(180.00deg 20.00% 98.00%)", + "vc-050": "hsl(181.12deg 28.80% 88.20%)", + "vc-100": "hsl(182.25deg 37.60% 78.41%)", + "vc-200": "hsl(183.37deg 46.40% 68.61%)", + "vc-300": "hsl(184.50deg 55.20% 58.82%)", + "vc-500": "hsl(186.75deg 71.20% 41.62%)", + "vc-600": "hsl(187.88deg 78.40% 34.21%)", + "vc-700": "hsl(189.00deg 85.60% 26.81%)", + "vc-800": "hsl(190.13deg 92.80% 19.40%)", + "vc-900": "hsl(191.25deg 100.00% 12.00%)", + "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", + "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", + "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", + "sg-010": "hsl(88.66deg 20.00% 98.00%)", + "sg-100": "hsl(94.91deg 55.56% 65.82%)", + "sg-200": "hsl(95.54deg 61.11% 59.09%)", + "sg-300": "hsl(96.16deg 66.67% 52.37%)", + "sg-400": "hsl(96.79deg 72.22% 45.64%)", + "sg-500": "hsl(97.41deg 77.78% 38.91%)", + "sg-600": "hsl(98.04deg 83.33% 32.18%)", + "sg-700": "hsl(98.66deg 88.89% 25.46%)", + "sg-800": "hsl(99.29deg 94.44% 18.73%)", + "sg-900": "hsl(99.91deg 100.00% 12.00%)", + "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", + "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", + "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", + "sy-010": "hsl(24.38deg 20.00% 98.00%)", + "sy-100": "hsl(30.63deg 100.00% 78.02%)", + "sy-200": "hsl(31.25deg 100.00% 69.77%)", + "sy-300": "hsl(31.88deg 100.00% 61.52%)", + "sy-400": "hsl(32.50deg 100.00% 53.26%)", + "sy-500": "hsl(33.13deg 100.00% 45.01%)", + "sy-600": "hsl(33.75deg 100.00% 36.76%)", + "sy-700": "hsl(34.38deg 100.00% 28.51%)", + "sy-800": "hsl(35.00deg 100.00% 20.25%)", + "sy-900": "hsl(35.63deg 100.00% 12.00%)", + "sy-alpha-low": "hsl(30.00deg 100.00% 86.27% / 0.2)", + "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", + "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", + "sb-010": "hsl(169.76deg 20.00% 98.00%)", + "sb-100": "hsl(176.01deg 50.96% 64.95%)", + "sb-200": "hsl(176.63deg 57.09% 58.33%)", + "sb-300": "hsl(177.26deg 63.22% 51.71%)", + "sb-400": "hsl(177.88deg 69.35% 45.09%)", + "sb-500": "hsl(178.51deg 75.48% 38.47%)", + "sb-600": "hsl(179.13deg 81.61% 31.86%)", + "sb-700": "hsl(179.76deg 87.74% 25.24%)", + "sb-800": "hsl(180.38deg 93.87% 18.62%)", + "sb-900": "hsl(181.01deg 100.00% 12.00%)", + "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", + "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", + "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", + "sp-010": "hsl(334.38deg 20.00% 98.00%)", + "sp-100": "hsl(340.63deg 40.74% 74.54%)", + "sp-200": "hsl(341.25deg 48.15% 66.72%)", + "sp-300": "hsl(341.88deg 55.56% 58.90%)", + "sp-400": "hsl(342.50deg 62.96% 51.08%)", + "sp-500": "hsl(343.13deg 70.37% 43.27%)", + "sp-600": "hsl(343.75deg 77.78% 35.45%)", + "sp-700": "hsl(344.38deg 85.19% 27.63%)", + "sp-800": "hsl(345.00deg 92.59% 19.82%)", + "sp-900": "hsl(345.63deg 100.00% 12.00%)", + "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", + "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)" }, "typography": { "xh1": { From f38a8696dbc41614a63d70cd6a5c1c70ae29bf42 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Sun, 26 Mar 2023 21:08:41 +0200 Subject: [PATCH 06/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 89 +++----- src/liquid/global/styles/colors/colors.css | 240 ++++++++++---------- src/liquid/global/styles/design-tokens.json | 240 ++++++++++---------- 3 files changed, 272 insertions(+), 297 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 004add2628..7ccdee5693 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -3,8 +3,7 @@ const https = require('https') const { existsSync } = require('fs') const { mkdir, writeFile } = require('fs').promises const { join, dirname } = require('path') -const Color = require('colorjs.io').default -// const { Hsluv } = require('hsluv') +const chroma = require('chroma-js') const isBin = __filename.endsWith('.cjs') const stylesDir = isBin ? './liquid_tmp/styles' : './src/liquid/global/styles' @@ -207,73 +206,49 @@ function parseColors(items, styles: { name: string; description: string }[]) { : baseColorName.toLowerCase() : baseColorName.replace(/[a-z]/g, '').toLowerCase() const defaultStep = getStepFromKey(name.match(/\d+/g)?.at(0)) - // const hsluv = new Hsluv() - // TODO: check if we need absolute values below - const r = (item.fills[0].color.r * 255).toFixed(2) - const g = (item.fills[0].color.g * 255).toFixed(2) - const b = (item.fills[0].color.b * 255).toFixed(2) - const color = new Color(`rgb(${r}, ${g}, ${b})`) - const hsl = color.to('hsl').coords - const h = hsl[0].toFixed(2) - const s = hsl[1].toFixed(2) - const l = hsl[2].toFixed(2) + const r = parseFloat((item.fills[0].color.r * 255).toFixed(2)) + const g = parseFloat((item.fills[0].color.g * 255).toFixed(2)) + const b = parseFloat((item.fills[0].color.b * 255).toFixed(2)) + const color = chroma({ r, g, b }) + const h = (color.get('hsl.h') * 1).toFixed(2) + const s = (color.get('hsl.s') * 100).toFixed(2) + const l = (color.get('hsl.l') * 100).toFixed(2) const totalSteps = 11 const totalStepsToWhite = defaultStep const totalStepsToBlack = totalSteps - defaultStep - const light = new Color(color) - light.set({ - 'hsl.h': (h) => h - 5.625, - 'hsl.s': 20, - 'hsl.l': 98, - }) - const rangeToLight = color.steps( - color.mix(light, 1, { space: 'hsl', outputSpace: 'lab' }), - { - space: 'hsl', - outputSpace: 'lab', - steps: totalStepsToWhite + 1, - } - ) - const dark = new Color(color) - dark.set({ - 'hsl.h': (h) => h + 5.625, - 'hsl.s': 100, - 'hsl.l': 12, - }) - const rangeToDark = color.steps( - color.mix(dark, 1, { space: 'hsl', outputSpace: 'lab' }), - { - space: 'hsl', - outputSpace: 'lab', - steps: totalStepsToBlack, - } - ) - // default colors[ `${colorShortName}-${getKeyFromStep(defaultStep)}/default` ] = `hsl(${h}deg ${s}% ${l}%)` // to light - rangeToLight.reverse().forEach((color, step) => { - if (step === defaultStep) return - const [h, s, l] = color.to('hsl').coords - colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${h.toFixed( - 2 - )}deg ${s.toFixed(2)}% ${l.toFixed(2)}%)` - }) + const colorLight = chroma({ r, g, b }).set('hsl.l', 0.98) + chroma + .scale([colorLight, color]) + .colors(totalStepsToWhite + 1) + .forEach((color, step) => { + if (step === defaultStep) return + const [h, s, l] = chroma(color).hsl() + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( + h || 0 + ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` + }) // to dark - rangeToDark.forEach((color, i) => { - if (i === 0) return - const step = defaultStep + i - if (step === defaultStep) return - const [h, s, l] = color.to('hsl').coords - colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${h.toFixed( - 2 - )}deg ${s.toFixed(2)}% ${l.toFixed(2)}%)` - }) + const colorDark = chroma({ r, g, b }).set('hsl.s', 1).luminance(0.015) + chroma + .scale([color, colorDark]) + .mode('lab') + .colors(totalStepsToBlack) + .forEach((color, i) => { + if (i === 0) return + const step = defaultStep + i + const [h, s, l] = chroma(color).hsl() + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( + h || 0 + ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` + }) // TODO check if it is wiser to pick a color from the middle of the range // alpha diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 5fdde2d653..f9e5344370 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,170 +1,170 @@ /* autogenerated */ :root { - --ld-col-rb-010: hsl(200.62deg 20.00% 98.00%); - --ld-col-rb-050: hsl(201.43deg 29.17% 89.32%); - --ld-col-rb-100: hsl(202.23deg 38.35% 80.64%); - --ld-col-rb-200: hsl(203.04deg 47.52% 71.97%); - --ld-col-rb-300: hsl(203.84deg 56.69% 63.29%); - --ld-col-rb-400: hsl(204.64deg 65.86% 54.61%); - --ld-col-rb-500: hsl(205.45deg 75.04% 45.93%); + --ld-col-rb-010: hsl(210.00deg 80.00% 98.04%); + --ld-col-rb-050: hsl(208.00deg 55.56% 89.41%); + --ld-col-rb-100: hsl(205.88deg 51.52% 80.59%); + --ld-col-rb-200: hsl(206.30deg 51.05% 71.96%); + --ld-col-rb-300: hsl(206.53deg 50.80% 63.33%); + --ld-col-rb-400: hsl(206.67deg 50.65% 54.71%); + --ld-col-rb-500: hsl(206.09deg 58.97% 45.88%); --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); - --ld-col-rb-700: hsl(208.13deg 89.47% 28.84%); - --ld-col-rb-800: hsl(210.00deg 94.74% 20.42%); - --ld-col-rb-900: hsl(211.88deg 100.00% 12.00%); + --ld-col-rb-700: hsl(205.78deg 90.14% 27.84%); + --ld-col-rb-800: hsl(205.89deg 95.96% 19.41%); + --ld-col-rb-900: hsl(206.56deg 100.00% 11.96%); --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); --ld-col-rb: hsl(206.25deg 84.21% 37.25%); - --ld-col-rg-010: hsl(147.71deg 20.00% 98.00%); - --ld-col-rg-050: hsl(148.51deg 31.22% 87.84%); - --ld-col-rg-100: hsl(149.32deg 42.44% 77.68%); - --ld-col-rg-200: hsl(150.12deg 53.66% 67.51%); - --ld-col-rg-300: hsl(150.92deg 64.88% 57.35%); - --ld-col-rg-400: hsl(151.73deg 76.10% 47.19%); - --ld-col-rg-500: hsl(152.53deg 87.32% 37.03%); + --ld-col-rg-010: hsl(150.00deg 100.00% 98.04%); + --ld-col-rg-050: hsl(152.14deg 45.16% 87.84%); + --ld-col-rg-100: hsl(152.61deg 40.35% 77.65%); + --ld-col-rg-200: hsl(152.81deg 38.55% 67.45%); + --ld-col-rg-300: hsl(153.33deg 37.33% 57.45%); + --ld-col-rg-400: hsl(153.33deg 41.08% 47.25%); + --ld-col-rg-500: hsl(153.33deg 61.90% 37.06%); --ld-col-rg-600: hsl(153.33deg 98.54% 26.86%); - --ld-col-rg-700: hsl(155.21deg 99.03% 21.91%); - --ld-col-rg-800: hsl(157.08deg 99.51% 16.95%); - --ld-col-rg-900: hsl(158.96deg 100.00% 12.00%); + --ld-col-rg-700: hsl(153.27deg 98.06% 20.20%); + --ld-col-rg-800: hsl(153.91deg 100.00% 13.53%); + --ld-col-rg-900: hsl(153.85deg 100.00% 7.65%); --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 26.86% / 0.2); --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 26.86% / 0.1); --ld-col-rg: hsl(153.33deg 98.54% 26.86%); - --ld-col-rp-010: hsl(253.32deg 20.00% 98.00%); - --ld-col-rp-050: hsl(254.03deg 23.59% 90.53%); - --ld-col-rp-100: hsl(254.73deg 27.18% 83.06%); - --ld-col-rp-200: hsl(255.43deg 30.77% 75.59%); - --ld-col-rp-300: hsl(256.13deg 34.36% 68.12%); - --ld-col-rp-400: hsl(256.84deg 37.95% 60.65%); - --ld-col-rp-500: hsl(257.54deg 41.54% 53.18%); - --ld-col-rp-600: hsl(258.24deg 45.13% 45.71%); + --ld-col-rp-010: hsl(264.00deg 45.45% 97.84%); + --ld-col-rp-050: hsl(261.18deg 34.69% 90.39%); + --ld-col-rp-100: hsl(260.00deg 31.03% 82.94%); + --ld-col-rp-200: hsl(260.00deg 31.20% 75.49%); + --ld-col-rp-300: hsl(259.20deg 30.86% 68.24%); + --ld-col-rp-400: hsl(258.69deg 30.35% 60.59%); + --ld-col-rp-500: hsl(258.90deg 30.54% 53.14%); + --ld-col-rp-600: hsl(258.80deg 35.62% 45.69%); --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); - --ld-col-rp-800: hsl(261.76deg 74.36% 25.12%); - --ld-col-rp-900: hsl(264.57deg 100.00% 12.00%); + --ld-col-rp-800: hsl(259.01deg 65.16% 30.39%); + --ld-col-rp-900: hsl(258.92deg 100.00% 21.76%); --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); --ld-col-rp: hsl(258.95deg 48.72% 38.24%); - --ld-col-rr-010: hsl(339.38deg 20.00% 98.00%); - --ld-col-rr-050: hsl(340.18deg 28.57% 91.28%); - --ld-col-rr-100: hsl(340.98deg 37.14% 84.57%); - --ld-col-rr-200: hsl(341.79deg 45.71% 77.85%); - --ld-col-rr-300: hsl(342.59deg 54.29% 71.13%); - --ld-col-rr-400: hsl(343.39deg 62.86% 64.41%); - --ld-col-rr-500: hsl(344.20deg 71.43% 57.70%); + --ld-col-rr-010: hsl(345.00deg 80.00% 98.04%); + --ld-col-rr-050: hsl(345.00deg 81.82% 91.37%); + --ld-col-rr-100: hsl(344.76deg 79.75% 84.51%); + --ld-col-rr-200: hsl(344.84deg 80.53% 77.84%); + --ld-col-rr-300: hsl(345.13deg 79.59% 71.18%); + --ld-col-rr-400: hsl(345.10deg 80.11% 64.51%); + --ld-col-rr-500: hsl(345.00deg 79.63% 57.65%); --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); - --ld-col-rr-700: hsl(346.88deg 86.67% 37.99%); - --ld-col-rr-800: hsl(348.75deg 93.33% 24.99%); - --ld-col-rr-900: hsl(350.63deg 100.00% 12.00%); + --ld-col-rr-700: hsl(344.62deg 81.25% 37.65%); + --ld-col-rr-800: hsl(343.83deg 89.15% 25.29%); + --ld-col-rr-900: hsl(345.00deg 97.30% 14.51%); --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); --ld-col-rr: hsl(345.00deg 80.00% 50.98%); - --ld-col-sb-010: hsl(169.76deg 20.00% 98.00%); + --ld-col-sb-010: hsl(180.00deg 40.00% 98.04%); --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); - --ld-col-sb-100: hsl(176.01deg 50.96% 64.95%); - --ld-col-sb-200: hsl(176.63deg 57.09% 58.33%); - --ld-col-sb-300: hsl(177.26deg 63.22% 51.71%); - --ld-col-sb-400: hsl(177.88deg 69.35% 45.09%); - --ld-col-sb-500: hsl(178.51deg 75.48% 38.47%); - --ld-col-sb-600: hsl(179.13deg 81.61% 31.86%); - --ld-col-sb-700: hsl(179.76deg 87.74% 25.24%); - --ld-col-sb-800: hsl(180.38deg 93.87% 18.62%); - --ld-col-sb-900: hsl(181.01deg 100.00% 12.00%); + --ld-col-sb-100: hsl(175.00deg 32.61% 63.92%); + --ld-col-sb-200: hsl(175.56deg 24.32% 56.47%); + --ld-col-sb-300: hsl(175.10deg 19.52% 49.22%); + --ld-col-sb-400: hsl(175.81deg 20.00% 42.16%); + --ld-col-sb-500: hsl(176.84deg 21.11% 35.29%); + --ld-col-sb-600: hsl(176.47deg 23.29% 28.63%); + --ld-col-sb-700: hsl(175.86deg 25.66% 22.16%); + --ld-col-sb-800: hsl(177.50deg 29.27% 16.08%); + --ld-col-sb-900: hsl(177.00deg 38.46% 10.20%); --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); --ld-col-sb: hsl(175.38deg 44.83% 71.57%); - --ld-col-sg-010: hsl(88.66deg 20.00% 98.00%); + --ld-col-sg-010: hsl(84.00deg 45.45% 97.84%); --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); - --ld-col-sg-100: hsl(94.91deg 55.56% 65.82%); - --ld-col-sg-200: hsl(95.54deg 61.11% 59.09%); - --ld-col-sg-300: hsl(96.16deg 66.67% 52.37%); - --ld-col-sg-400: hsl(96.79deg 72.22% 45.64%); - --ld-col-sg-500: hsl(97.41deg 77.78% 38.91%); - --ld-col-sg-600: hsl(98.04deg 83.33% 32.18%); - --ld-col-sg-700: hsl(98.66deg 88.89% 25.46%); - --ld-col-sg-800: hsl(99.29deg 94.44% 18.73%); - --ld-col-sg-900: hsl(99.91deg 100.00% 12.00%); + --ld-col-sg-100: hsl(93.75deg 35.56% 64.71%); + --ld-col-sg-200: hsl(94.14deg 26.61% 57.25%); + --ld-col-sg-300: hsl(94.62deg 20.47% 49.80%); + --ld-col-sg-400: hsl(95.22deg 21.10% 42.75%); + --ld-col-sg-500: hsl(94.50deg 21.98% 35.69%); + --ld-col-sg-600: hsl(94.29deg 23.81% 28.82%); + --ld-col-sg-700: hsl(94.00deg 26.32% 22.35%); + --ld-col-sg-800: hsl(95.00deg 29.27% 16.08%); + --ld-col-sg-900: hsl(93.00deg 38.46% 10.20%); --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); --ld-col-sg: hsl(94.29deg 50.00% 72.55%); - --ld-col-sp-010: hsl(334.38deg 20.00% 98.00%); + --ld-col-sp-010: hsl(345.00deg 40.00% 98.04%); --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); - --ld-col-sp-100: hsl(340.63deg 40.74% 74.54%); - --ld-col-sp-200: hsl(341.25deg 48.15% 66.72%); - --ld-col-sp-300: hsl(341.88deg 55.56% 58.90%); - --ld-col-sp-400: hsl(342.50deg 62.96% 51.08%); - --ld-col-sp-500: hsl(343.13deg 70.37% 43.27%); - --ld-col-sp-600: hsl(343.75deg 77.78% 35.45%); - --ld-col-sp-700: hsl(344.38deg 85.19% 27.63%); - --ld-col-sp-800: hsl(345.00deg 92.59% 19.82%); - --ld-col-sp-900: hsl(345.63deg 100.00% 12.00%); + --ld-col-sp-100: hsl(339.31deg 21.80% 73.92%); + --ld-col-sp-200: hsl(340.00deg 15.43% 65.69%); + --ld-col-sp-300: hsl(339.23deg 12.04% 57.65%); + --ld-col-sp-400: hsl(340.00deg 9.45% 49.80%); + --ld-col-sp-500: hsl(339.13deg 10.70% 42.16%); + --ld-col-sp-600: hsl(340.00deg 11.86% 34.71%); + --ld-col-sp-700: hsl(341.05deg 13.48% 27.65%); + --ld-col-sp-800: hsl(340.00deg 16.98% 20.78%); + --ld-col-sp-900: hsl(337.50deg 22.22% 14.12%); --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); --ld-col-sp: hsl(340.00deg 33.33% 82.35%); - --ld-col-sy-010: hsl(24.38deg 20.00% 98.00%); + --ld-col-sy-010: hsl(30.00deg 100.00% 98.04%); --ld-col-sy-050: hsl(30.00deg 100.00% 86.27%); - --ld-col-sy-100: hsl(30.63deg 100.00% 78.02%); - --ld-col-sy-200: hsl(31.25deg 100.00% 69.77%); - --ld-col-sy-300: hsl(31.88deg 100.00% 61.52%); - --ld-col-sy-400: hsl(32.50deg 100.00% 53.26%); - --ld-col-sy-500: hsl(33.13deg 100.00% 45.01%); - --ld-col-sy-600: hsl(33.75deg 100.00% 36.76%); - --ld-col-sy-700: hsl(34.38deg 100.00% 28.51%); - --ld-col-sy-800: hsl(35.00deg 100.00% 20.25%); - --ld-col-sy-900: hsl(35.63deg 100.00% 12.00%); + --ld-col-sy-100: hsl(30.48deg 53.85% 77.06%); + --ld-col-sy-200: hsl(30.55deg 33.74% 68.04%); + --ld-col-sy-300: hsl(30.00deg 23.08% 59.22%); + --ld-col-sy-400: hsl(30.73deg 16.33% 50.78%); + --ld-col-sy-500: hsl(29.14deg 16.13% 42.55%); + --ld-col-sy-600: hsl(30.00deg 15.91% 34.51%); + --ld-col-sy-700: hsl(28.57deg 15.33% 26.86%); + --ld-col-sy-800: hsl(32.00deg 15.15% 19.41%); + --ld-col-sy-900: hsl(30.00deg 15.63% 12.55%); --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 86.27% / 0.2); --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 86.27% / 0.1); --ld-col-sy: hsl(30.00deg 100.00% 86.27%); - --ld-col-vc-010: hsl(180.00deg 20.00% 98.00%); - --ld-col-vc-050: hsl(181.12deg 28.80% 88.20%); - --ld-col-vc-100: hsl(182.25deg 37.60% 78.41%); - --ld-col-vc-200: hsl(183.37deg 46.40% 68.61%); - --ld-col-vc-300: hsl(184.50deg 55.20% 58.82%); + --ld-col-vc-010: hsl(180.00deg 60.00% 98.04%); + --ld-col-vc-050: hsl(185.00deg 60.00% 88.24%); + --ld-col-vc-100: hsl(185.29deg 61.82% 78.43%); + --ld-col-vc-200: hsl(185.51deg 61.25% 68.63%); + --ld-col-vc-300: hsl(185.54deg 61.90% 58.82%); --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); - --ld-col-vc-500: hsl(186.75deg 71.20% 41.62%); - --ld-col-vc-600: hsl(187.88deg 78.40% 34.21%); - --ld-col-vc-700: hsl(189.00deg 85.60% 26.81%); - --ld-col-vc-800: hsl(190.13deg 92.80% 19.40%); - --ld-col-vc-900: hsl(191.25deg 100.00% 12.00%); + --ld-col-vc-500: hsl(185.78deg 66.50% 39.80%); + --ld-col-vc-600: hsl(185.41deg 70.70% 30.78%); + --ld-col-vc-700: hsl(185.39deg 78.76% 22.16%); + --ld-col-vc-800: hsl(185.45deg 89.19% 14.51%); + --ld-col-vc-900: hsl(185.85deg 100.00% 8.04%); --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); --ld-col-vc: hsl(185.63deg 64.00% 49.02%); - --ld-col-vg-010: hsl(73.58deg 20.00% 98.00%); - --ld-col-vg-050: hsl(74.98deg 28.89% 87.47%); - --ld-col-vg-100: hsl(76.39deg 37.78% 76.94%); - --ld-col-vg-200: hsl(77.79deg 46.67% 66.41%); + --ld-col-vg-010: hsl(80.00deg 60.00% 98.04%); + --ld-col-vg-050: hsl(78.33deg 56.25% 87.45%); + --ld-col-vg-100: hsl(79.38deg 55.56% 77.06%); + --ld-col-vg-200: hsl(78.95deg 55.56% 66.47%); --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); - --ld-col-vg-400: hsl(80.14deg 62.96% 48.57%); - --ld-col-vg-500: hsl(81.08deg 70.37% 41.25%); - --ld-col-vg-600: hsl(82.01deg 77.78% 33.94%); - --ld-col-vg-700: hsl(82.95deg 85.19% 26.63%); - --ld-col-vg-800: hsl(83.89deg 92.59% 19.31%); - --ld-col-vg-900: hsl(84.83deg 100.00% 12.00%); + --ld-col-vg-400: hsl(79.63deg 44.40% 47.25%); + --ld-col-vg-500: hsl(80.00deg 45.45% 38.82%); + --ld-col-vg-600: hsl(80.55deg 46.50% 30.78%); + --ld-col-vg-700: hsl(81.05deg 48.72% 22.94%); + --ld-col-vg-800: hsl(82.86deg 52.50% 15.69%); + --ld-col-vg-900: hsl(78.75deg 80.00% 7.84%); --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); --ld-col-vg: hsl(79.20deg 55.56% 55.88%); - --ld-col-vm-010: hsl(323.52deg 20.00% 98.00%); - --ld-col-vm-050: hsl(324.46deg 30.23% 91.31%); - --ld-col-vm-100: hsl(325.39deg 40.46% 84.61%); - --ld-col-vm-200: hsl(326.33deg 50.70% 77.92%); - --ld-col-vm-300: hsl(327.27deg 60.93% 71.23%); - --ld-col-vm-400: hsl(328.21deg 71.16% 64.54%); + --ld-col-vm-010: hsl(330.00deg 80.00% 98.04%); + --ld-col-vm-050: hsl(330.00deg 81.82% 91.37%); + --ld-col-vm-100: hsl(329.06deg 82.05% 84.71%); + --ld-col-vm-200: hsl(329.35deg 82.14% 78.04%); + --ld-col-vm-300: hsl(329.24deg 80.95% 71.18%); + --ld-col-vm-400: hsl(328.98deg 81.22% 64.51%); --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); - --ld-col-vm-600: hsl(330.55deg 86.05% 46.38%); - --ld-col-vm-700: hsl(331.96deg 90.70% 34.92%); - --ld-col-vm-800: hsl(333.36deg 95.35% 23.46%); - --ld-col-vm-900: hsl(334.77deg 100.00% 12.00%); + --ld-col-vm-600: hsl(329.15deg 60.17% 46.27%); + --ld-col-vm-700: hsl(329.19deg 62.01% 35.10%); + --ld-col-vm-800: hsl(328.92deg 66.40% 24.51%); + --ld-col-vm-900: hsl(328.36deg 73.33% 14.71%); --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); --ld-col-vm: hsl(329.14deg 81.40% 57.84%); - --ld-col-vy-010: hsl(38.28deg 20.00% 98.00%); - --ld-col-vy-050: hsl(40.15deg 46.67% 85.27%); - --ld-col-vy-100: hsl(42.03deg 73.33% 72.54%); + --ld-col-vy-010: hsl(42.00deg 100.00% 98.04%); + --ld-col-vy-050: hsl(44.00deg 100.00% 85.29%); + --ld-col-vy-100: hsl(43.71deg 100.00% 72.55%); --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); - --ld-col-vy-300: hsl(44.71deg 100.00% 52.97%); - --ld-col-vy-400: hsl(45.51deg 100.00% 46.15%); - --ld-col-vy-500: hsl(46.31deg 100.00% 39.32%); - --ld-col-vy-600: hsl(47.12deg 100.00% 32.49%); - --ld-col-vy-700: hsl(47.92deg 100.00% 25.66%); - --ld-col-vy-800: hsl(48.72deg 100.00% 18.83%); - --ld-col-vy-900: hsl(49.53deg 100.00% 12.00%); + --ld-col-vy-300: hsl(43.64deg 72.13% 52.16%); + --ld-col-vy-400: hsl(43.49deg 65.64% 44.51%); + --ld-col-vy-500: hsl(43.28deg 64.21% 37.25%); + --ld-col-vy-600: hsl(43.13deg 62.34% 30.20%); + --ld-col-vy-700: hsl(43.33deg 61.02% 23.14%); + --ld-col-vy-800: hsl(43.20deg 59.52% 16.47%); + --ld-col-vy-900: hsl(43.64deg 67.35% 9.61%); --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); --ld-col-vy: hsl(43.90deg 100.00% 59.80%); diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index 73bfdd94a5..d844514ec9 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -207,159 +207,159 @@ }, "colors": { "rr-600/default": "hsl(345.00deg 80.00% 50.98%)", - "rr-010": "hsl(339.38deg 20.00% 98.00%)", - "rr-050": "hsl(340.18deg 28.57% 91.28%)", - "rr-100": "hsl(340.98deg 37.14% 84.57%)", - "rr-200": "hsl(341.79deg 45.71% 77.85%)", - "rr-300": "hsl(342.59deg 54.29% 71.13%)", - "rr-400": "hsl(343.39deg 62.86% 64.41%)", - "rr-500": "hsl(344.20deg 71.43% 57.70%)", - "rr-700": "hsl(346.88deg 86.67% 37.99%)", - "rr-800": "hsl(348.75deg 93.33% 24.99%)", - "rr-900": "hsl(350.63deg 100.00% 12.00%)", + "rr-010": "hsl(345.00deg 80.00% 98.04%)", + "rr-050": "hsl(345.00deg 81.82% 91.37%)", + "rr-100": "hsl(344.76deg 79.75% 84.51%)", + "rr-200": "hsl(344.84deg 80.53% 77.84%)", + "rr-300": "hsl(345.13deg 79.59% 71.18%)", + "rr-400": "hsl(345.10deg 80.11% 64.51%)", + "rr-500": "hsl(345.00deg 79.63% 57.65%)", + "rr-700": "hsl(344.62deg 81.25% 37.65%)", + "rr-800": "hsl(343.83deg 89.15% 25.29%)", + "rr-900": "hsl(345.00deg 97.30% 14.51%)", "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", - "rb-010": "hsl(200.62deg 20.00% 98.00%)", - "rb-050": "hsl(201.43deg 29.17% 89.32%)", - "rb-100": "hsl(202.23deg 38.35% 80.64%)", - "rb-200": "hsl(203.04deg 47.52% 71.97%)", - "rb-300": "hsl(203.84deg 56.69% 63.29%)", - "rb-400": "hsl(204.64deg 65.86% 54.61%)", - "rb-500": "hsl(205.45deg 75.04% 45.93%)", - "rb-700": "hsl(208.13deg 89.47% 28.84%)", - "rb-800": "hsl(210.00deg 94.74% 20.42%)", - "rb-900": "hsl(211.88deg 100.00% 12.00%)", + "rb-010": "hsl(210.00deg 80.00% 98.04%)", + "rb-050": "hsl(208.00deg 55.56% 89.41%)", + "rb-100": "hsl(205.88deg 51.52% 80.59%)", + "rb-200": "hsl(206.30deg 51.05% 71.96%)", + "rb-300": "hsl(206.53deg 50.80% 63.33%)", + "rb-400": "hsl(206.67deg 50.65% 54.71%)", + "rb-500": "hsl(206.09deg 58.97% 45.88%)", + "rb-700": "hsl(205.78deg 90.14% 27.84%)", + "rb-800": "hsl(205.89deg 95.96% 19.41%)", + "rb-900": "hsl(206.56deg 100.00% 11.96%)", "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", - "vy-010": "hsl(38.28deg 20.00% 98.00%)", - "vy-050": "hsl(40.15deg 46.67% 85.27%)", - "vy-100": "hsl(42.03deg 73.33% 72.54%)", - "vy-300": "hsl(44.71deg 100.00% 52.97%)", - "vy-400": "hsl(45.51deg 100.00% 46.15%)", - "vy-500": "hsl(46.31deg 100.00% 39.32%)", - "vy-600": "hsl(47.12deg 100.00% 32.49%)", - "vy-700": "hsl(47.92deg 100.00% 25.66%)", - "vy-800": "hsl(48.72deg 100.00% 18.83%)", - "vy-900": "hsl(49.53deg 100.00% 12.00%)", + "vy-010": "hsl(42.00deg 100.00% 98.04%)", + "vy-050": "hsl(44.00deg 100.00% 85.29%)", + "vy-100": "hsl(43.71deg 100.00% 72.55%)", + "vy-300": "hsl(43.64deg 72.13% 52.16%)", + "vy-400": "hsl(43.49deg 65.64% 44.51%)", + "vy-500": "hsl(43.28deg 64.21% 37.25%)", + "vy-600": "hsl(43.13deg 62.34% 30.20%)", + "vy-700": "hsl(43.33deg 61.02% 23.14%)", + "vy-800": "hsl(43.20deg 59.52% 16.47%)", + "vy-900": "hsl(43.64deg 67.35% 9.61%)", "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", "rp-700/default": "hsl(258.95deg 48.72% 38.24%)", - "rp-010": "hsl(253.32deg 20.00% 98.00%)", - "rp-050": "hsl(254.03deg 23.59% 90.53%)", - "rp-100": "hsl(254.73deg 27.18% 83.06%)", - "rp-200": "hsl(255.43deg 30.77% 75.59%)", - "rp-300": "hsl(256.13deg 34.36% 68.12%)", - "rp-400": "hsl(256.84deg 37.95% 60.65%)", - "rp-500": "hsl(257.54deg 41.54% 53.18%)", - "rp-600": "hsl(258.24deg 45.13% 45.71%)", - "rp-800": "hsl(261.76deg 74.36% 25.12%)", - "rp-900": "hsl(264.57deg 100.00% 12.00%)", + "rp-010": "hsl(264.00deg 45.45% 97.84%)", + "rp-050": "hsl(261.18deg 34.69% 90.39%)", + "rp-100": "hsl(260.00deg 31.03% 82.94%)", + "rp-200": "hsl(260.00deg 31.20% 75.49%)", + "rp-300": "hsl(259.20deg 30.86% 68.24%)", + "rp-400": "hsl(258.69deg 30.35% 60.59%)", + "rp-500": "hsl(258.90deg 30.54% 53.14%)", + "rp-600": "hsl(258.80deg 35.62% 45.69%)", + "rp-800": "hsl(259.01deg 65.16% 30.39%)", + "rp-900": "hsl(258.92deg 100.00% 21.76%)", "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", - "vg-010": "hsl(73.58deg 20.00% 98.00%)", - "vg-050": "hsl(74.98deg 28.89% 87.47%)", - "vg-100": "hsl(76.39deg 37.78% 76.94%)", - "vg-200": "hsl(77.79deg 46.67% 66.41%)", - "vg-400": "hsl(80.14deg 62.96% 48.57%)", - "vg-500": "hsl(81.08deg 70.37% 41.25%)", - "vg-600": "hsl(82.01deg 77.78% 33.94%)", - "vg-700": "hsl(82.95deg 85.19% 26.63%)", - "vg-800": "hsl(83.89deg 92.59% 19.31%)", - "vg-900": "hsl(84.83deg 100.00% 12.00%)", + "vg-010": "hsl(80.00deg 60.00% 98.04%)", + "vg-050": "hsl(78.33deg 56.25% 87.45%)", + "vg-100": "hsl(79.38deg 55.56% 77.06%)", + "vg-200": "hsl(78.95deg 55.56% 66.47%)", + "vg-400": "hsl(79.63deg 44.40% 47.25%)", + "vg-500": "hsl(80.00deg 45.45% 38.82%)", + "vg-600": "hsl(80.55deg 46.50% 30.78%)", + "vg-700": "hsl(81.05deg 48.72% 22.94%)", + "vg-800": "hsl(82.86deg 52.50% 15.69%)", + "vg-900": "hsl(78.75deg 80.00% 7.84%)", "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", - "vm-010": "hsl(323.52deg 20.00% 98.00%)", - "vm-050": "hsl(324.46deg 30.23% 91.31%)", - "vm-100": "hsl(325.39deg 40.46% 84.61%)", - "vm-200": "hsl(326.33deg 50.70% 77.92%)", - "vm-300": "hsl(327.27deg 60.93% 71.23%)", - "vm-400": "hsl(328.21deg 71.16% 64.54%)", - "vm-600": "hsl(330.55deg 86.05% 46.38%)", - "vm-700": "hsl(331.96deg 90.70% 34.92%)", - "vm-800": "hsl(333.36deg 95.35% 23.46%)", - "vm-900": "hsl(334.77deg 100.00% 12.00%)", + "vm-010": "hsl(330.00deg 80.00% 98.04%)", + "vm-050": "hsl(330.00deg 81.82% 91.37%)", + "vm-100": "hsl(329.06deg 82.05% 84.71%)", + "vm-200": "hsl(329.35deg 82.14% 78.04%)", + "vm-300": "hsl(329.24deg 80.95% 71.18%)", + "vm-400": "hsl(328.98deg 81.22% 64.51%)", + "vm-600": "hsl(329.15deg 60.17% 46.27%)", + "vm-700": "hsl(329.19deg 62.01% 35.10%)", + "vm-800": "hsl(328.92deg 66.40% 24.51%)", + "vm-900": "hsl(328.36deg 73.33% 14.71%)", "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", - "rg-010": "hsl(147.71deg 20.00% 98.00%)", - "rg-050": "hsl(148.51deg 31.22% 87.84%)", - "rg-100": "hsl(149.32deg 42.44% 77.68%)", - "rg-200": "hsl(150.12deg 53.66% 67.51%)", - "rg-300": "hsl(150.92deg 64.88% 57.35%)", - "rg-400": "hsl(151.73deg 76.10% 47.19%)", - "rg-500": "hsl(152.53deg 87.32% 37.03%)", - "rg-700": "hsl(155.21deg 99.03% 21.91%)", - "rg-800": "hsl(157.08deg 99.51% 16.95%)", - "rg-900": "hsl(158.96deg 100.00% 12.00%)", + "rg-010": "hsl(150.00deg 100.00% 98.04%)", + "rg-050": "hsl(152.14deg 45.16% 87.84%)", + "rg-100": "hsl(152.61deg 40.35% 77.65%)", + "rg-200": "hsl(152.81deg 38.55% 67.45%)", + "rg-300": "hsl(153.33deg 37.33% 57.45%)", + "rg-400": "hsl(153.33deg 41.08% 47.25%)", + "rg-500": "hsl(153.33deg 61.90% 37.06%)", + "rg-700": "hsl(153.27deg 98.06% 20.20%)", + "rg-800": "hsl(153.91deg 100.00% 13.53%)", + "rg-900": "hsl(153.85deg 100.00% 7.65%)", "rg-alpha-low": "hsl(153.33deg 98.54% 26.86% / 0.2)", "rg-alpha-lowest": "hsl(153.33deg 98.54% 26.86% / 0.1)", "vc-400/default": "hsl(185.63deg 64.00% 49.02%)", - "vc-010": "hsl(180.00deg 20.00% 98.00%)", - "vc-050": "hsl(181.12deg 28.80% 88.20%)", - "vc-100": "hsl(182.25deg 37.60% 78.41%)", - "vc-200": "hsl(183.37deg 46.40% 68.61%)", - "vc-300": "hsl(184.50deg 55.20% 58.82%)", - "vc-500": "hsl(186.75deg 71.20% 41.62%)", - "vc-600": "hsl(187.88deg 78.40% 34.21%)", - "vc-700": "hsl(189.00deg 85.60% 26.81%)", - "vc-800": "hsl(190.13deg 92.80% 19.40%)", - "vc-900": "hsl(191.25deg 100.00% 12.00%)", + "vc-010": "hsl(180.00deg 60.00% 98.04%)", + "vc-050": "hsl(185.00deg 60.00% 88.24%)", + "vc-100": "hsl(185.29deg 61.82% 78.43%)", + "vc-200": "hsl(185.51deg 61.25% 68.63%)", + "vc-300": "hsl(185.54deg 61.90% 58.82%)", + "vc-500": "hsl(185.78deg 66.50% 39.80%)", + "vc-600": "hsl(185.41deg 70.70% 30.78%)", + "vc-700": "hsl(185.39deg 78.76% 22.16%)", + "vc-800": "hsl(185.45deg 89.19% 14.51%)", + "vc-900": "hsl(185.85deg 100.00% 8.04%)", "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", - "sg-010": "hsl(88.66deg 20.00% 98.00%)", - "sg-100": "hsl(94.91deg 55.56% 65.82%)", - "sg-200": "hsl(95.54deg 61.11% 59.09%)", - "sg-300": "hsl(96.16deg 66.67% 52.37%)", - "sg-400": "hsl(96.79deg 72.22% 45.64%)", - "sg-500": "hsl(97.41deg 77.78% 38.91%)", - "sg-600": "hsl(98.04deg 83.33% 32.18%)", - "sg-700": "hsl(98.66deg 88.89% 25.46%)", - "sg-800": "hsl(99.29deg 94.44% 18.73%)", - "sg-900": "hsl(99.91deg 100.00% 12.00%)", + "sg-010": "hsl(84.00deg 45.45% 97.84%)", + "sg-100": "hsl(93.75deg 35.56% 64.71%)", + "sg-200": "hsl(94.14deg 26.61% 57.25%)", + "sg-300": "hsl(94.62deg 20.47% 49.80%)", + "sg-400": "hsl(95.22deg 21.10% 42.75%)", + "sg-500": "hsl(94.50deg 21.98% 35.69%)", + "sg-600": "hsl(94.29deg 23.81% 28.82%)", + "sg-700": "hsl(94.00deg 26.32% 22.35%)", + "sg-800": "hsl(95.00deg 29.27% 16.08%)", + "sg-900": "hsl(93.00deg 38.46% 10.20%)", "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", - "sy-010": "hsl(24.38deg 20.00% 98.00%)", - "sy-100": "hsl(30.63deg 100.00% 78.02%)", - "sy-200": "hsl(31.25deg 100.00% 69.77%)", - "sy-300": "hsl(31.88deg 100.00% 61.52%)", - "sy-400": "hsl(32.50deg 100.00% 53.26%)", - "sy-500": "hsl(33.13deg 100.00% 45.01%)", - "sy-600": "hsl(33.75deg 100.00% 36.76%)", - "sy-700": "hsl(34.38deg 100.00% 28.51%)", - "sy-800": "hsl(35.00deg 100.00% 20.25%)", - "sy-900": "hsl(35.63deg 100.00% 12.00%)", + "sy-010": "hsl(30.00deg 100.00% 98.04%)", + "sy-100": "hsl(30.48deg 53.85% 77.06%)", + "sy-200": "hsl(30.55deg 33.74% 68.04%)", + "sy-300": "hsl(30.00deg 23.08% 59.22%)", + "sy-400": "hsl(30.73deg 16.33% 50.78%)", + "sy-500": "hsl(29.14deg 16.13% 42.55%)", + "sy-600": "hsl(30.00deg 15.91% 34.51%)", + "sy-700": "hsl(28.57deg 15.33% 26.86%)", + "sy-800": "hsl(32.00deg 15.15% 19.41%)", + "sy-900": "hsl(30.00deg 15.63% 12.55%)", "sy-alpha-low": "hsl(30.00deg 100.00% 86.27% / 0.2)", "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", - "sb-010": "hsl(169.76deg 20.00% 98.00%)", - "sb-100": "hsl(176.01deg 50.96% 64.95%)", - "sb-200": "hsl(176.63deg 57.09% 58.33%)", - "sb-300": "hsl(177.26deg 63.22% 51.71%)", - "sb-400": "hsl(177.88deg 69.35% 45.09%)", - "sb-500": "hsl(178.51deg 75.48% 38.47%)", - "sb-600": "hsl(179.13deg 81.61% 31.86%)", - "sb-700": "hsl(179.76deg 87.74% 25.24%)", - "sb-800": "hsl(180.38deg 93.87% 18.62%)", - "sb-900": "hsl(181.01deg 100.00% 12.00%)", + "sb-010": "hsl(180.00deg 40.00% 98.04%)", + "sb-100": "hsl(175.00deg 32.61% 63.92%)", + "sb-200": "hsl(175.56deg 24.32% 56.47%)", + "sb-300": "hsl(175.10deg 19.52% 49.22%)", + "sb-400": "hsl(175.81deg 20.00% 42.16%)", + "sb-500": "hsl(176.84deg 21.11% 35.29%)", + "sb-600": "hsl(176.47deg 23.29% 28.63%)", + "sb-700": "hsl(175.86deg 25.66% 22.16%)", + "sb-800": "hsl(177.50deg 29.27% 16.08%)", + "sb-900": "hsl(177.00deg 38.46% 10.20%)", "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", - "sp-010": "hsl(334.38deg 20.00% 98.00%)", - "sp-100": "hsl(340.63deg 40.74% 74.54%)", - "sp-200": "hsl(341.25deg 48.15% 66.72%)", - "sp-300": "hsl(341.88deg 55.56% 58.90%)", - "sp-400": "hsl(342.50deg 62.96% 51.08%)", - "sp-500": "hsl(343.13deg 70.37% 43.27%)", - "sp-600": "hsl(343.75deg 77.78% 35.45%)", - "sp-700": "hsl(344.38deg 85.19% 27.63%)", - "sp-800": "hsl(345.00deg 92.59% 19.82%)", - "sp-900": "hsl(345.63deg 100.00% 12.00%)", + "sp-010": "hsl(345.00deg 40.00% 98.04%)", + "sp-100": "hsl(339.31deg 21.80% 73.92%)", + "sp-200": "hsl(340.00deg 15.43% 65.69%)", + "sp-300": "hsl(339.23deg 12.04% 57.65%)", + "sp-400": "hsl(340.00deg 9.45% 49.80%)", + "sp-500": "hsl(339.13deg 10.70% 42.16%)", + "sp-600": "hsl(340.00deg 11.86% 34.71%)", + "sp-700": "hsl(341.05deg 13.48% 27.65%)", + "sp-800": "hsl(340.00deg 16.98% 20.78%)", + "sp-900": "hsl(337.50deg 22.22% 14.12%)", "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)" }, From 6b02606b7af4530dd0437fa319e3928571884a4e Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 11:59:42 +0200 Subject: [PATCH 07/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 37 +++-- src/liquid/global/styles/colors/colors.css | 160 ++++++++++---------- src/liquid/global/styles/design-tokens.json | 160 ++++++++++---------- 3 files changed, 182 insertions(+), 175 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 7ccdee5693..6193e1db51 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -214,8 +214,8 @@ function parseColors(items, styles: { name: string; description: string }[]) { const s = (color.get('hsl.s') * 100).toFixed(2) const l = (color.get('hsl.l') * 100).toFixed(2) const totalSteps = 11 - const totalStepsToWhite = defaultStep - const totalStepsToBlack = totalSteps - defaultStep + const totalStepsToLight = defaultStep + const totalStepsToDark = totalSteps - defaultStep // default colors[ @@ -223,24 +223,31 @@ function parseColors(items, styles: { name: string; description: string }[]) { ] = `hsl(${h}deg ${s}% ${l}%)` // to light - const colorLight = chroma({ r, g, b }).set('hsl.l', 0.98) - chroma - .scale([colorLight, color]) - .colors(totalStepsToWhite + 1) - .forEach((color, step) => { - if (step === defaultStep) return - const [h, s, l] = chroma(color).hsl() - colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( - h || 0 - ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` - }) + const colorLightest = chroma({ r, g, b }) + .set('hsl.l', 0.985) + .set('hsl.s', 1) + const colorLight = chroma({ r, g, b }).set('hsl.l', 0.945).set('hsl.s', 1) + const colorsToLightest = [ + colorLightest, + ...chroma + .scale([colorLight, color]) + .correctLightness() + .colors(totalStepsToLight), + ] + colorsToLightest.forEach((color, step) => { + if (step === defaultStep) return + const [h, s, l] = chroma(color).hsl() + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( + h || 0 + ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` + }) // to dark const colorDark = chroma({ r, g, b }).set('hsl.s', 1).luminance(0.015) chroma .scale([color, colorDark]) - .mode('lab') - .colors(totalStepsToBlack) + .correctLightness() + .colors(totalStepsToDark) .forEach((color, i) => { if (i === 0) return const step = defaultStep + i diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index f9e5344370..a68cdd9c4d 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,26 +1,26 @@ /* autogenerated */ :root { - --ld-col-rb-010: hsl(210.00deg 80.00% 98.04%); - --ld-col-rb-050: hsl(208.00deg 55.56% 89.41%); - --ld-col-rb-100: hsl(205.88deg 51.52% 80.59%); - --ld-col-rb-200: hsl(206.30deg 51.05% 71.96%); - --ld-col-rb-300: hsl(206.53deg 50.80% 63.33%); - --ld-col-rb-400: hsl(206.67deg 50.65% 54.71%); - --ld-col-rb-500: hsl(206.09deg 58.97% 45.88%); + --ld-col-rb-010: hsl(202.50deg 100.00% 98.43%); + --ld-col-rb-050: hsl(207.86deg 100.00% 94.51%); + --ld-col-rb-100: hsl(207.60deg 65.79% 85.10%); + --ld-col-rb-200: hsl(206.20deg 56.80% 75.49%); + --ld-col-rb-300: hsl(206.45deg 53.76% 66.08%); + --ld-col-rb-400: hsl(206.61deg 52.04% 56.67%); + --ld-col-rb-500: hsl(206.09deg 57.50% 47.06%); --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); - --ld-col-rb-700: hsl(205.78deg 90.14% 27.84%); - --ld-col-rb-800: hsl(205.89deg 95.96% 19.41%); + --ld-col-rb-700: hsl(206.40deg 86.21% 28.43%); + --ld-col-rb-800: hsl(206.37deg 90.10% 19.80%); --ld-col-rb-900: hsl(206.56deg 100.00% 11.96%); --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); --ld-col-rb: hsl(206.25deg 84.21% 37.25%); - --ld-col-rg-010: hsl(150.00deg 100.00% 98.04%); - --ld-col-rg-050: hsl(152.14deg 45.16% 87.84%); - --ld-col-rg-100: hsl(152.61deg 40.35% 77.65%); - --ld-col-rg-200: hsl(152.81deg 38.55% 67.45%); - --ld-col-rg-300: hsl(153.33deg 37.33% 57.45%); - --ld-col-rg-400: hsl(153.33deg 41.08% 47.25%); - --ld-col-rg-500: hsl(153.33deg 61.90% 37.06%); + --ld-col-rg-010: hsl(157.50deg 100.00% 98.43%); + --ld-col-rg-050: hsl(154.29deg 100.00% 94.51%); + --ld-col-rg-100: hsl(153.91deg 54.76% 83.53%); + --ld-col-rg-200: hsl(153.87deg 44.29% 72.55%); + --ld-col-rg-300: hsl(153.75deg 40.82% 61.57%); + --ld-col-rg-400: hsl(153.67deg 38.58% 50.20%); + --ld-col-rg-500: hsl(153.62deg 58.59% 38.82%); --ld-col-rg-600: hsl(153.33deg 98.54% 26.86%); --ld-col-rg-700: hsl(153.27deg 98.06% 20.20%); --ld-col-rg-800: hsl(153.91deg 100.00% 13.53%); @@ -28,35 +28,35 @@ --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 26.86% / 0.2); --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 26.86% / 0.1); --ld-col-rg: hsl(153.33deg 98.54% 26.86%); - --ld-col-rp-010: hsl(264.00deg 45.45% 97.84%); - --ld-col-rp-050: hsl(261.18deg 34.69% 90.39%); - --ld-col-rp-100: hsl(260.00deg 31.03% 82.94%); - --ld-col-rp-200: hsl(260.00deg 31.20% 75.49%); - --ld-col-rp-300: hsl(259.20deg 30.86% 68.24%); - --ld-col-rp-400: hsl(258.69deg 30.35% 60.59%); - --ld-col-rp-500: hsl(258.90deg 30.54% 53.14%); - --ld-col-rp-600: hsl(258.80deg 35.62% 45.69%); + --ld-col-rp-010: hsl(255.00deg 100.00% 98.43%); + --ld-col-rp-050: hsl(257.14deg 100.00% 94.51%); + --ld-col-rp-100: hsl(258.95deg 52.78% 85.88%); + --ld-col-rp-200: hsl(258.75deg 42.11% 77.65%); + --ld-col-rp-300: hsl(257.89deg 36.77% 69.61%); + --ld-col-rp-400: hsl(257.91deg 34.36% 61.76%); + --ld-col-rp-500: hsl(258.95deg 32.20% 53.73%); + --ld-col-rp-600: hsl(258.84deg 36.75% 45.88%); --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); - --ld-col-rp-800: hsl(259.01deg 65.16% 30.39%); + --ld-col-rp-800: hsl(259.22deg 66.45% 30.39%); --ld-col-rp-900: hsl(258.92deg 100.00% 21.76%); --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); --ld-col-rp: hsl(258.95deg 48.72% 38.24%); - --ld-col-rr-010: hsl(345.00deg 80.00% 98.04%); - --ld-col-rr-050: hsl(345.00deg 81.82% 91.37%); - --ld-col-rr-100: hsl(344.76deg 79.75% 84.51%); - --ld-col-rr-200: hsl(344.84deg 80.53% 77.84%); - --ld-col-rr-300: hsl(345.13deg 79.59% 71.18%); - --ld-col-rr-400: hsl(345.10deg 80.11% 64.51%); - --ld-col-rr-500: hsl(345.00deg 79.63% 57.65%); + --ld-col-rr-010: hsl(337.50deg 100.00% 98.43%); + --ld-col-rr-050: hsl(347.14deg 100.00% 94.51%); + --ld-col-rr-100: hsl(347.06deg 89.47% 88.82%); + --ld-col-rr-200: hsl(346.22deg 84.09% 82.75%); + --ld-col-rr-300: hsl(345.60deg 83.33% 76.47%); + --ld-col-rr-400: hsl(345.24deg 81.82% 69.80%); + --ld-col-rr-500: hsl(345.00deg 80.41% 61.96%); --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); - --ld-col-rr-700: hsl(344.62deg 81.25% 37.65%); - --ld-col-rr-800: hsl(343.83deg 89.15% 25.29%); + --ld-col-rr-700: hsl(345.19deg 79.38% 38.04%); + --ld-col-rr-800: hsl(344.86deg 84.73% 25.69%); --ld-col-rr-900: hsl(345.00deg 97.30% 14.51%); --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); --ld-col-rr: hsl(345.00deg 80.00% 50.98%); - --ld-col-sb-010: hsl(180.00deg 40.00% 98.04%); + --ld-col-sb-010: hsl(180.00deg 100.00% 98.43%); --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); --ld-col-sb-100: hsl(175.00deg 32.61% 63.92%); --ld-col-sb-200: hsl(175.56deg 24.32% 56.47%); @@ -70,35 +70,35 @@ --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); --ld-col-sb: hsl(175.38deg 44.83% 71.57%); - --ld-col-sg-010: hsl(84.00deg 45.45% 97.84%); + --ld-col-sg-010: hsl(90.00deg 100.00% 98.43%); --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); --ld-col-sg-100: hsl(93.75deg 35.56% 64.71%); --ld-col-sg-200: hsl(94.14deg 26.61% 57.25%); - --ld-col-sg-300: hsl(94.62deg 20.47% 49.80%); - --ld-col-sg-400: hsl(95.22deg 21.10% 42.75%); + --ld-col-sg-300: hsl(93.46deg 20.47% 49.80%); + --ld-col-sg-400: hsl(93.91deg 21.10% 42.75%); --ld-col-sg-500: hsl(94.50deg 21.98% 35.69%); --ld-col-sg-600: hsl(94.29deg 23.81% 28.82%); --ld-col-sg-700: hsl(94.00deg 26.32% 22.35%); - --ld-col-sg-800: hsl(95.00deg 29.27% 16.08%); + --ld-col-sg-800: hsl(92.50deg 29.27% 16.08%); --ld-col-sg-900: hsl(93.00deg 38.46% 10.20%); --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); --ld-col-sg: hsl(94.29deg 50.00% 72.55%); - --ld-col-sp-010: hsl(345.00deg 40.00% 98.04%); + --ld-col-sp-010: hsl(330.00deg 100.00% 98.43%); --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); --ld-col-sp-100: hsl(339.31deg 21.80% 73.92%); --ld-col-sp-200: hsl(340.00deg 15.43% 65.69%); - --ld-col-sp-300: hsl(339.23deg 12.04% 57.65%); - --ld-col-sp-400: hsl(340.00deg 9.45% 49.80%); - --ld-col-sp-500: hsl(339.13deg 10.70% 42.16%); - --ld-col-sp-600: hsl(340.00deg 11.86% 34.71%); - --ld-col-sp-700: hsl(341.05deg 13.48% 27.65%); - --ld-col-sp-800: hsl(340.00deg 16.98% 20.78%); + --ld-col-sp-300: hsl(338.40deg 11.52% 57.45%); + --ld-col-sp-400: hsl(339.13deg 9.09% 49.61%); + --ld-col-sp-500: hsl(338.18deg 10.28% 41.96%); + --ld-col-sp-600: hsl(339.00deg 11.36% 34.51%); + --ld-col-sp-700: hsl(340.00deg 12.86% 27.45%); + --ld-col-sp-800: hsl(338.82deg 16.19% 20.59%); --ld-col-sp-900: hsl(337.50deg 22.22% 14.12%); --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); --ld-col-sp: hsl(340.00deg 33.33% 82.35%); - --ld-col-sy-010: hsl(30.00deg 100.00% 98.04%); + --ld-col-sy-010: hsl(30.00deg 100.00% 98.43%); --ld-col-sy-050: hsl(30.00deg 100.00% 86.27%); --ld-col-sy-100: hsl(30.48deg 53.85% 77.06%); --ld-col-sy-200: hsl(30.55deg 33.74% 68.04%); @@ -112,40 +112,40 @@ --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 86.27% / 0.2); --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 86.27% / 0.1); --ld-col-sy: hsl(30.00deg 100.00% 86.27%); - --ld-col-vc-010: hsl(180.00deg 60.00% 98.04%); - --ld-col-vc-050: hsl(185.00deg 60.00% 88.24%); - --ld-col-vc-100: hsl(185.29deg 61.82% 78.43%); - --ld-col-vc-200: hsl(185.51deg 61.25% 68.63%); - --ld-col-vc-300: hsl(185.54deg 61.90% 58.82%); + --ld-col-vc-010: hsl(188.57deg 100.00% 98.63%); + --ld-col-vc-050: hsl(186.43deg 100.00% 94.51%); + --ld-col-vc-100: hsl(185.17deg 70.73% 83.92%); + --ld-col-vc-200: hsl(185.33deg 65.22% 72.94%); + --ld-col-vc-300: hsl(185.81deg 63.27% 61.57%); --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); - --ld-col-vc-500: hsl(185.78deg 66.50% 39.80%); - --ld-col-vc-600: hsl(185.41deg 70.70% 30.78%); - --ld-col-vc-700: hsl(185.39deg 78.76% 22.16%); - --ld-col-vc-800: hsl(185.45deg 89.19% 14.51%); + --ld-col-vc-500: hsl(185.82deg 65.69% 40.00%); + --ld-col-vc-600: hsl(185.56deg 67.50% 31.37%); + --ld-col-vc-700: hsl(185.65deg 72.65% 22.94%); + --ld-col-vc-800: hsl(185.81deg 79.49% 15.29%); --ld-col-vc-900: hsl(185.85deg 100.00% 8.04%); --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); --ld-col-vc: hsl(185.63deg 64.00% 49.02%); - --ld-col-vg-010: hsl(80.00deg 60.00% 98.04%); - --ld-col-vg-050: hsl(78.33deg 56.25% 87.45%); - --ld-col-vg-100: hsl(79.38deg 55.56% 77.06%); - --ld-col-vg-200: hsl(78.95deg 55.56% 66.47%); + --ld-col-vg-010: hsl(75.00deg 100.00% 98.43%); + --ld-col-vg-050: hsl(79.29deg 100.00% 94.51%); + --ld-col-vg-100: hsl(80.00deg 65.22% 81.96%); + --ld-col-vg-200: hsl(79.57deg 58.23% 69.02%); --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); - --ld-col-vg-400: hsl(79.63deg 44.40% 47.25%); - --ld-col-vg-500: hsl(80.00deg 45.45% 38.82%); - --ld-col-vg-600: hsl(80.55deg 46.50% 30.78%); - --ld-col-vg-700: hsl(81.05deg 48.72% 22.94%); - --ld-col-vg-800: hsl(82.86deg 52.50% 15.69%); + --ld-col-vg-400: hsl(79.44deg 45.00% 47.06%); + --ld-col-vg-500: hsl(78.91deg 46.94% 38.43%); + --ld-col-vg-600: hsl(78.95deg 49.35% 30.20%); + --ld-col-vg-700: hsl(79.00deg 52.63% 22.35%); + --ld-col-vg-800: hsl(79.57deg 60.53% 14.90%); --ld-col-vg-900: hsl(78.75deg 80.00% 7.84%); --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); --ld-col-vg: hsl(79.20deg 55.56% 55.88%); - --ld-col-vm-010: hsl(330.00deg 80.00% 98.04%); - --ld-col-vm-050: hsl(330.00deg 81.82% 91.37%); - --ld-col-vm-100: hsl(329.06deg 82.05% 84.71%); - --ld-col-vm-200: hsl(329.35deg 82.14% 78.04%); - --ld-col-vm-300: hsl(329.24deg 80.95% 71.18%); - --ld-col-vm-400: hsl(328.98deg 81.22% 64.51%); + --ld-col-vm-010: hsl(330.00deg 100.00% 98.43%); + --ld-col-vm-050: hsl(330.00deg 100.00% 94.51%); + --ld-col-vm-100: hsl(330.00deg 90.00% 88.24%); + --ld-col-vm-200: hsl(329.62deg 84.95% 81.76%); + --ld-col-vm-300: hsl(329.16deg 82.95% 74.71%); + --ld-col-vm-400: hsl(329.34deg 82.04% 67.25%); --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); --ld-col-vm-600: hsl(329.15deg 60.17% 46.27%); --ld-col-vm-700: hsl(329.19deg 62.01% 35.10%); @@ -154,16 +154,16 @@ --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); --ld-col-vm: hsl(329.14deg 81.40% 57.84%); - --ld-col-vy-010: hsl(42.00deg 100.00% 98.04%); - --ld-col-vy-050: hsl(44.00deg 100.00% 85.29%); - --ld-col-vy-100: hsl(43.71deg 100.00% 72.55%); + --ld-col-vy-010: hsl(45.00deg 100.00% 98.43%); + --ld-col-vy-050: hsl(42.86deg 100.00% 94.51%); + --ld-col-vy-100: hsl(43.78deg 100.00% 78.24%); --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); - --ld-col-vy-300: hsl(43.64deg 72.13% 52.16%); - --ld-col-vy-400: hsl(43.49deg 65.64% 44.51%); - --ld-col-vy-500: hsl(43.28deg 64.21% 37.25%); - --ld-col-vy-600: hsl(43.13deg 62.34% 30.20%); - --ld-col-vy-700: hsl(43.33deg 61.02% 23.14%); - --ld-col-vy-800: hsl(43.20deg 59.52% 16.47%); + --ld-col-vy-300: hsl(43.82deg 72.36% 51.76%); + --ld-col-vy-400: hsl(43.71deg 67.11% 44.12%); + --ld-col-vy-500: hsl(43.68deg 66.84% 36.67%); + --ld-col-vy-600: hsl(43.96deg 67.79% 29.22%); + --ld-col-vy-700: hsl(44.21deg 66.67% 22.35%); + --ld-col-vy-800: hsl(44.44deg 67.50% 15.69%); --ld-col-vy-900: hsl(43.64deg 67.35% 9.61%); --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index d844514ec9..ff96795237 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -207,77 +207,77 @@ }, "colors": { "rr-600/default": "hsl(345.00deg 80.00% 50.98%)", - "rr-010": "hsl(345.00deg 80.00% 98.04%)", - "rr-050": "hsl(345.00deg 81.82% 91.37%)", - "rr-100": "hsl(344.76deg 79.75% 84.51%)", - "rr-200": "hsl(344.84deg 80.53% 77.84%)", - "rr-300": "hsl(345.13deg 79.59% 71.18%)", - "rr-400": "hsl(345.10deg 80.11% 64.51%)", - "rr-500": "hsl(345.00deg 79.63% 57.65%)", - "rr-700": "hsl(344.62deg 81.25% 37.65%)", - "rr-800": "hsl(343.83deg 89.15% 25.29%)", + "rr-010": "hsl(337.50deg 100.00% 98.43%)", + "rr-050": "hsl(347.14deg 100.00% 94.51%)", + "rr-100": "hsl(347.06deg 89.47% 88.82%)", + "rr-200": "hsl(346.22deg 84.09% 82.75%)", + "rr-300": "hsl(345.60deg 83.33% 76.47%)", + "rr-400": "hsl(345.24deg 81.82% 69.80%)", + "rr-500": "hsl(345.00deg 80.41% 61.96%)", + "rr-700": "hsl(345.19deg 79.38% 38.04%)", + "rr-800": "hsl(344.86deg 84.73% 25.69%)", "rr-900": "hsl(345.00deg 97.30% 14.51%)", "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", - "rb-010": "hsl(210.00deg 80.00% 98.04%)", - "rb-050": "hsl(208.00deg 55.56% 89.41%)", - "rb-100": "hsl(205.88deg 51.52% 80.59%)", - "rb-200": "hsl(206.30deg 51.05% 71.96%)", - "rb-300": "hsl(206.53deg 50.80% 63.33%)", - "rb-400": "hsl(206.67deg 50.65% 54.71%)", - "rb-500": "hsl(206.09deg 58.97% 45.88%)", - "rb-700": "hsl(205.78deg 90.14% 27.84%)", - "rb-800": "hsl(205.89deg 95.96% 19.41%)", + "rb-010": "hsl(202.50deg 100.00% 98.43%)", + "rb-050": "hsl(207.86deg 100.00% 94.51%)", + "rb-100": "hsl(207.60deg 65.79% 85.10%)", + "rb-200": "hsl(206.20deg 56.80% 75.49%)", + "rb-300": "hsl(206.45deg 53.76% 66.08%)", + "rb-400": "hsl(206.61deg 52.04% 56.67%)", + "rb-500": "hsl(206.09deg 57.50% 47.06%)", + "rb-700": "hsl(206.40deg 86.21% 28.43%)", + "rb-800": "hsl(206.37deg 90.10% 19.80%)", "rb-900": "hsl(206.56deg 100.00% 11.96%)", "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", - "vy-010": "hsl(42.00deg 100.00% 98.04%)", - "vy-050": "hsl(44.00deg 100.00% 85.29%)", - "vy-100": "hsl(43.71deg 100.00% 72.55%)", - "vy-300": "hsl(43.64deg 72.13% 52.16%)", - "vy-400": "hsl(43.49deg 65.64% 44.51%)", - "vy-500": "hsl(43.28deg 64.21% 37.25%)", - "vy-600": "hsl(43.13deg 62.34% 30.20%)", - "vy-700": "hsl(43.33deg 61.02% 23.14%)", - "vy-800": "hsl(43.20deg 59.52% 16.47%)", + "vy-010": "hsl(45.00deg 100.00% 98.43%)", + "vy-050": "hsl(42.86deg 100.00% 94.51%)", + "vy-100": "hsl(43.78deg 100.00% 78.24%)", + "vy-300": "hsl(43.82deg 72.36% 51.76%)", + "vy-400": "hsl(43.71deg 67.11% 44.12%)", + "vy-500": "hsl(43.68deg 66.84% 36.67%)", + "vy-600": "hsl(43.96deg 67.79% 29.22%)", + "vy-700": "hsl(44.21deg 66.67% 22.35%)", + "vy-800": "hsl(44.44deg 67.50% 15.69%)", "vy-900": "hsl(43.64deg 67.35% 9.61%)", "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", "rp-700/default": "hsl(258.95deg 48.72% 38.24%)", - "rp-010": "hsl(264.00deg 45.45% 97.84%)", - "rp-050": "hsl(261.18deg 34.69% 90.39%)", - "rp-100": "hsl(260.00deg 31.03% 82.94%)", - "rp-200": "hsl(260.00deg 31.20% 75.49%)", - "rp-300": "hsl(259.20deg 30.86% 68.24%)", - "rp-400": "hsl(258.69deg 30.35% 60.59%)", - "rp-500": "hsl(258.90deg 30.54% 53.14%)", - "rp-600": "hsl(258.80deg 35.62% 45.69%)", - "rp-800": "hsl(259.01deg 65.16% 30.39%)", + "rp-010": "hsl(255.00deg 100.00% 98.43%)", + "rp-050": "hsl(257.14deg 100.00% 94.51%)", + "rp-100": "hsl(258.95deg 52.78% 85.88%)", + "rp-200": "hsl(258.75deg 42.11% 77.65%)", + "rp-300": "hsl(257.89deg 36.77% 69.61%)", + "rp-400": "hsl(257.91deg 34.36% 61.76%)", + "rp-500": "hsl(258.95deg 32.20% 53.73%)", + "rp-600": "hsl(258.84deg 36.75% 45.88%)", + "rp-800": "hsl(259.22deg 66.45% 30.39%)", "rp-900": "hsl(258.92deg 100.00% 21.76%)", "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", - "vg-010": "hsl(80.00deg 60.00% 98.04%)", - "vg-050": "hsl(78.33deg 56.25% 87.45%)", - "vg-100": "hsl(79.38deg 55.56% 77.06%)", - "vg-200": "hsl(78.95deg 55.56% 66.47%)", - "vg-400": "hsl(79.63deg 44.40% 47.25%)", - "vg-500": "hsl(80.00deg 45.45% 38.82%)", - "vg-600": "hsl(80.55deg 46.50% 30.78%)", - "vg-700": "hsl(81.05deg 48.72% 22.94%)", - "vg-800": "hsl(82.86deg 52.50% 15.69%)", + "vg-010": "hsl(75.00deg 100.00% 98.43%)", + "vg-050": "hsl(79.29deg 100.00% 94.51%)", + "vg-100": "hsl(80.00deg 65.22% 81.96%)", + "vg-200": "hsl(79.57deg 58.23% 69.02%)", + "vg-400": "hsl(79.44deg 45.00% 47.06%)", + "vg-500": "hsl(78.91deg 46.94% 38.43%)", + "vg-600": "hsl(78.95deg 49.35% 30.20%)", + "vg-700": "hsl(79.00deg 52.63% 22.35%)", + "vg-800": "hsl(79.57deg 60.53% 14.90%)", "vg-900": "hsl(78.75deg 80.00% 7.84%)", "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", - "vm-010": "hsl(330.00deg 80.00% 98.04%)", - "vm-050": "hsl(330.00deg 81.82% 91.37%)", - "vm-100": "hsl(329.06deg 82.05% 84.71%)", - "vm-200": "hsl(329.35deg 82.14% 78.04%)", - "vm-300": "hsl(329.24deg 80.95% 71.18%)", - "vm-400": "hsl(328.98deg 81.22% 64.51%)", + "vm-010": "hsl(330.00deg 100.00% 98.43%)", + "vm-050": "hsl(330.00deg 100.00% 94.51%)", + "vm-100": "hsl(330.00deg 90.00% 88.24%)", + "vm-200": "hsl(329.62deg 84.95% 81.76%)", + "vm-300": "hsl(329.16deg 82.95% 74.71%)", + "vm-400": "hsl(329.34deg 82.04% 67.25%)", "vm-600": "hsl(329.15deg 60.17% 46.27%)", "vm-700": "hsl(329.19deg 62.01% 35.10%)", "vm-800": "hsl(328.92deg 66.40% 24.51%)", @@ -285,46 +285,46 @@ "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", - "rg-010": "hsl(150.00deg 100.00% 98.04%)", - "rg-050": "hsl(152.14deg 45.16% 87.84%)", - "rg-100": "hsl(152.61deg 40.35% 77.65%)", - "rg-200": "hsl(152.81deg 38.55% 67.45%)", - "rg-300": "hsl(153.33deg 37.33% 57.45%)", - "rg-400": "hsl(153.33deg 41.08% 47.25%)", - "rg-500": "hsl(153.33deg 61.90% 37.06%)", + "rg-010": "hsl(157.50deg 100.00% 98.43%)", + "rg-050": "hsl(154.29deg 100.00% 94.51%)", + "rg-100": "hsl(153.91deg 54.76% 83.53%)", + "rg-200": "hsl(153.87deg 44.29% 72.55%)", + "rg-300": "hsl(153.75deg 40.82% 61.57%)", + "rg-400": "hsl(153.67deg 38.58% 50.20%)", + "rg-500": "hsl(153.62deg 58.59% 38.82%)", "rg-700": "hsl(153.27deg 98.06% 20.20%)", "rg-800": "hsl(153.91deg 100.00% 13.53%)", "rg-900": "hsl(153.85deg 100.00% 7.65%)", "rg-alpha-low": "hsl(153.33deg 98.54% 26.86% / 0.2)", "rg-alpha-lowest": "hsl(153.33deg 98.54% 26.86% / 0.1)", "vc-400/default": "hsl(185.63deg 64.00% 49.02%)", - "vc-010": "hsl(180.00deg 60.00% 98.04%)", - "vc-050": "hsl(185.00deg 60.00% 88.24%)", - "vc-100": "hsl(185.29deg 61.82% 78.43%)", - "vc-200": "hsl(185.51deg 61.25% 68.63%)", - "vc-300": "hsl(185.54deg 61.90% 58.82%)", - "vc-500": "hsl(185.78deg 66.50% 39.80%)", - "vc-600": "hsl(185.41deg 70.70% 30.78%)", - "vc-700": "hsl(185.39deg 78.76% 22.16%)", - "vc-800": "hsl(185.45deg 89.19% 14.51%)", + "vc-010": "hsl(188.57deg 100.00% 98.63%)", + "vc-050": "hsl(186.43deg 100.00% 94.51%)", + "vc-100": "hsl(185.17deg 70.73% 83.92%)", + "vc-200": "hsl(185.33deg 65.22% 72.94%)", + "vc-300": "hsl(185.81deg 63.27% 61.57%)", + "vc-500": "hsl(185.82deg 65.69% 40.00%)", + "vc-600": "hsl(185.56deg 67.50% 31.37%)", + "vc-700": "hsl(185.65deg 72.65% 22.94%)", + "vc-800": "hsl(185.81deg 79.49% 15.29%)", "vc-900": "hsl(185.85deg 100.00% 8.04%)", "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", - "sg-010": "hsl(84.00deg 45.45% 97.84%)", + "sg-010": "hsl(90.00deg 100.00% 98.43%)", "sg-100": "hsl(93.75deg 35.56% 64.71%)", "sg-200": "hsl(94.14deg 26.61% 57.25%)", - "sg-300": "hsl(94.62deg 20.47% 49.80%)", - "sg-400": "hsl(95.22deg 21.10% 42.75%)", + "sg-300": "hsl(93.46deg 20.47% 49.80%)", + "sg-400": "hsl(93.91deg 21.10% 42.75%)", "sg-500": "hsl(94.50deg 21.98% 35.69%)", "sg-600": "hsl(94.29deg 23.81% 28.82%)", "sg-700": "hsl(94.00deg 26.32% 22.35%)", - "sg-800": "hsl(95.00deg 29.27% 16.08%)", + "sg-800": "hsl(92.50deg 29.27% 16.08%)", "sg-900": "hsl(93.00deg 38.46% 10.20%)", "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", - "sy-010": "hsl(30.00deg 100.00% 98.04%)", + "sy-010": "hsl(30.00deg 100.00% 98.43%)", "sy-100": "hsl(30.48deg 53.85% 77.06%)", "sy-200": "hsl(30.55deg 33.74% 68.04%)", "sy-300": "hsl(30.00deg 23.08% 59.22%)", @@ -337,7 +337,7 @@ "sy-alpha-low": "hsl(30.00deg 100.00% 86.27% / 0.2)", "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", - "sb-010": "hsl(180.00deg 40.00% 98.04%)", + "sb-010": "hsl(180.00deg 100.00% 98.43%)", "sb-100": "hsl(175.00deg 32.61% 63.92%)", "sb-200": "hsl(175.56deg 24.32% 56.47%)", "sb-300": "hsl(175.10deg 19.52% 49.22%)", @@ -350,15 +350,15 @@ "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", - "sp-010": "hsl(345.00deg 40.00% 98.04%)", + "sp-010": "hsl(330.00deg 100.00% 98.43%)", "sp-100": "hsl(339.31deg 21.80% 73.92%)", "sp-200": "hsl(340.00deg 15.43% 65.69%)", - "sp-300": "hsl(339.23deg 12.04% 57.65%)", - "sp-400": "hsl(340.00deg 9.45% 49.80%)", - "sp-500": "hsl(339.13deg 10.70% 42.16%)", - "sp-600": "hsl(340.00deg 11.86% 34.71%)", - "sp-700": "hsl(341.05deg 13.48% 27.65%)", - "sp-800": "hsl(340.00deg 16.98% 20.78%)", + "sp-300": "hsl(338.40deg 11.52% 57.45%)", + "sp-400": "hsl(339.13deg 9.09% 49.61%)", + "sp-500": "hsl(338.18deg 10.28% 41.96%)", + "sp-600": "hsl(339.00deg 11.36% 34.51%)", + "sp-700": "hsl(340.00deg 12.86% 27.45%)", + "sp-800": "hsl(338.82deg 16.19% 20.59%)", "sp-900": "hsl(337.50deg 22.22% 14.12%)", "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)" From a98fa6b2afc0938ae38e5e26b061cdebbf578fac Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 12:23:16 +0200 Subject: [PATCH 08/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 70 +++++++++++------------------------- 1 file changed, 20 insertions(+), 50 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 6193e1db51..151396b4d0 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -28,6 +28,13 @@ function pxToRem(px: string | number) { return val + 'rem' } +function getHSLFromColor(color) { + const h = ((color.get('hsl.h') || 0) * 1).toFixed(2) + const s = (color.get('hsl.s') * 100).toFixed(2) + const l = (color.get('hsl.l') * 100).toFixed(2) + return { h, s, l } +} + function getColorTokenValue(variant, styles) { if (variant.styles?.fill) { const style = styles[variant.styles.fill] @@ -46,47 +53,12 @@ function getColorTokenValue(variant, styles) { : '') return referenceName } else { - return relRGBToAbsHSL(variant.fills[0]) - } -} + const { r, g, b, a } = variant.fills[0] + const color = chroma({ r, g, b, a }) -// TODO replace with lib function -function relRGBToAbsHSL(fill) { - const { r, g, b } = fill.color - const cmin = Math.min(r, g, b) - const cmax = Math.max(r, g, b) - const delta = cmax - cmin - let h = 0 - let s = 0 - let l = 0 - const a = Math.round((fill.opacity ?? 1) * 100) / 100 - - // Calculate hue - // No difference - if (delta == 0) h = 0 - // Red is max - else if (cmax == r) h = ((g - b) / delta) % 6 - // Green is max - else if (cmax == g) h = (b - r) / delta + 2 - // Blue is max - else h = (r - g) / delta + 4 - - h = Math.round(h * 60) - - // Make negative hues positive behind 360° - if (h < 0) h += 360 - - // Calculate lightness - l = (cmax + cmin) / 2 - - // Calculate saturation - s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) - - // Multiply l and s by 100 - s = +(s * 100).toFixed(1) - l = +(l * 100).toFixed(1) - - return `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` + const { h, s, l } = getHSLFromColor(color) + return `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` + } } function parseThemes(items, styles) { @@ -210,9 +182,7 @@ function parseColors(items, styles: { name: string; description: string }[]) { const g = parseFloat((item.fills[0].color.g * 255).toFixed(2)) const b = parseFloat((item.fills[0].color.b * 255).toFixed(2)) const color = chroma({ r, g, b }) - const h = (color.get('hsl.h') * 1).toFixed(2) - const s = (color.get('hsl.s') * 100).toFixed(2) - const l = (color.get('hsl.l') * 100).toFixed(2) + const { h, s, l } = getHSLFromColor(color) const totalSteps = 11 const totalStepsToLight = defaultStep const totalStepsToDark = totalSteps - defaultStep @@ -236,10 +206,10 @@ function parseColors(items, styles: { name: string; description: string }[]) { ] colorsToLightest.forEach((color, step) => { if (step === defaultStep) return - const [h, s, l] = chroma(color).hsl() - colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( - h || 0 - ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` + const { h, s, l } = getHSLFromColor(chroma(color)) + colors[ + `${colorShortName}-${getKeyFromStep(step)}` + ] = `hsl(${h}deg ${s}% ${l}%)` }) // to dark @@ -251,10 +221,10 @@ function parseColors(items, styles: { name: string; description: string }[]) { .forEach((color, i) => { if (i === 0) return const step = defaultStep + i - const [h, s, l] = chroma(color).hsl() - colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${( + const { h, s, l } = getHSLFromColor(chroma(color)) + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${ h || 0 - ).toFixed(2)}deg ${(s * 100).toFixed(2)}% ${(l * 100).toFixed(2)}%)` + }deg ${s}% ${l}%)` }) // TODO check if it is wiser to pick a color from the middle of the range From 0999e596ffb3eddbfc5f4b26c15950ad8eb16ac5 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 14:10:37 +0200 Subject: [PATCH 09/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 44 ++++++-- src/liquid/global/styles/colors/colors.css | 117 +++++++++++-------- src/liquid/global/styles/design-tokens.json | 118 ++++++++++++-------- 3 files changed, 171 insertions(+), 108 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 151396b4d0..3c058785cd 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -168,25 +168,45 @@ function parseColors(items, styles: { name: string; description: string }[]) { const style = styles[item.styles.fill] const { name, description } = style const pathParts = name.split('/') - const baseColorName = - pathParts[pathParts.length > 1 ? pathParts.length - 1 : 0].split('-')[0] + const [baseColorName, ...rest] = + pathParts[pathParts.length > 1 ? pathParts.length - 1 : 0].split('-') + const isDefault = description === 'Default' - if (!isDefault) continue - const colorShortName = ['Neutral', 'White'].includes(baseColorName) - ? baseColorName === 'White' - ? 'wht' - : baseColorName.toLowerCase() - : baseColorName.replace(/[a-z]/g, '').toLowerCase() + const isNeutral = name.includes('/Neutral-900') + const isWhite = name.includes('/White') + + if (!isDefault && !isNeutral && !isWhite) continue + + let colorShortName: string + if (isNeutral) { + colorShortName = 'neutral' + } else if (isWhite) { + colorShortName = 'wht' + } else { + colorShortName = baseColorName.replace(/[a-z]/g, '').toLowerCase() + } + const defaultStep = getStepFromKey(name.match(/\d+/g)?.at(0)) const r = parseFloat((item.fills[0].color.r * 255).toFixed(2)) const g = parseFloat((item.fills[0].color.g * 255).toFixed(2)) const b = parseFloat((item.fills[0].color.b * 255).toFixed(2)) + const a = parseFloat( + (((item.fills[0].opacity ?? 1) * 100) / 100).toFixed(2) + ) + const color = chroma({ r, g, b }) const { h, s, l } = getHSLFromColor(color) const totalSteps = 11 const totalStepsToLight = defaultStep const totalStepsToDark = totalSteps - defaultStep + if (isWhite) { + colors[ + `${colorShortName}${rest.length ? '-' + rest.join('-') : ''}` + ] = `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` + continue + } + // default colors[ `${colorShortName}-${getKeyFromStep(defaultStep)}/default` @@ -194,9 +214,11 @@ function parseColors(items, styles: { name: string; description: string }[]) { // to light const colorLightest = chroma({ r, g, b }) - .set('hsl.l', 0.985) - .set('hsl.s', 1) - const colorLight = chroma({ r, g, b }).set('hsl.l', 0.945).set('hsl.s', 1) + .set('hsl.l', 0.9825) + .set('hsl.s', isNeutral ? 0 : 1) + const colorLight = chroma({ r, g, b }) + .set('hsl.l', 0.9425) + .set('hsl.s', isNeutral ? 0 : 1) const colorsToLightest = [ colorLightest, ...chroma diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index a68cdd9c4d..477f0ab2e6 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,10 +1,24 @@ /* autogenerated */ :root { - --ld-col-rb-010: hsl(202.50deg 100.00% 98.43%); - --ld-col-rb-050: hsl(207.86deg 100.00% 94.51%); - --ld-col-rb-100: hsl(207.60deg 65.79% 85.10%); - --ld-col-rb-200: hsl(206.20deg 56.80% 75.49%); - --ld-col-rb-300: hsl(206.45deg 53.76% 66.08%); + --ld-col-neutral-010: hsl(0.00deg 0.00% 98.24%); + --ld-col-neutral-050: hsl(0.00deg 0.00% 94.51%); + --ld-col-neutral-100: hsl(210.00deg 4.88% 83.92%); + --ld-col-neutral-200: hsl(222.86deg 5.26% 73.92%); + --ld-col-neutral-300: hsl(218.18deg 6.01% 64.12%); + --ld-col-neutral-400: hsl(218.57deg 6.03% 54.51%); + --ld-col-neutral-500: hsl(221.05deg 8.23% 45.29%); + --ld-col-neutral-600: hsl(220.00deg 11.35% 36.27%); + --ld-col-neutral-700: hsl(220.00deg 16.90% 27.84%); + --ld-col-neutral-800: hsl(218.57deg 28.00% 19.61%); + --ld-col-neutral-900: hsl(220.00deg 50.00% 12.00%); + --ld-col-neutral-alpha-low: hsl(220.00deg 50.00% 12.00% / 0.2); + --ld-col-neutral-alpha-lowest: hsl(220.00deg 50.00% 12.00% / 0.1); + --ld-col-neutral: hsl(220.00deg 50.00% 12.00%); + --ld-col-rb-010: hsl(206.67deg 100.00% 98.24%); + --ld-col-rb-050: hsl(206.90deg 100.00% 94.31%); + --ld-col-rb-100: hsl(207.06deg 66.23% 84.90%); + --ld-col-rb-200: hsl(205.83deg 57.14% 75.29%); + --ld-col-rb-300: hsl(206.17deg 54.02% 65.88%); --ld-col-rb-400: hsl(206.61deg 52.04% 56.67%); --ld-col-rb-500: hsl(206.09deg 57.50% 47.06%); --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); @@ -14,13 +28,13 @@ --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); --ld-col-rb: hsl(206.25deg 84.21% 37.25%); - --ld-col-rg-010: hsl(157.50deg 100.00% 98.43%); - --ld-col-rg-050: hsl(154.29deg 100.00% 94.51%); - --ld-col-rg-100: hsl(153.91deg 54.76% 83.53%); - --ld-col-rg-200: hsl(153.87deg 44.29% 72.55%); - --ld-col-rg-300: hsl(153.75deg 40.82% 61.57%); - --ld-col-rg-400: hsl(153.67deg 38.58% 50.20%); - --ld-col-rg-500: hsl(153.62deg 58.59% 38.82%); + --ld-col-rg-010: hsl(153.33deg 100.00% 98.24%); + --ld-col-rg-050: hsl(153.10deg 100.00% 94.31%); + --ld-col-rg-100: hsl(153.19deg 55.29% 83.33%); + --ld-col-rg-200: hsl(153.33deg 44.68% 72.35%); + --ld-col-rg-300: hsl(153.33deg 41.12% 61.37%); + --ld-col-rg-400: hsl(153.06deg 38.58% 50.20%); + --ld-col-rg-500: hsl(153.10deg 58.59% 38.82%); --ld-col-rg-600: hsl(153.33deg 98.54% 26.86%); --ld-col-rg-700: hsl(153.27deg 98.06% 20.20%); --ld-col-rg-800: hsl(153.91deg 100.00% 13.53%); @@ -28,27 +42,27 @@ --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 26.86% / 0.2); --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 26.86% / 0.1); --ld-col-rg: hsl(153.33deg 98.54% 26.86%); - --ld-col-rp-010: hsl(255.00deg 100.00% 98.43%); - --ld-col-rp-050: hsl(257.14deg 100.00% 94.51%); - --ld-col-rp-100: hsl(258.95deg 52.78% 85.88%); - --ld-col-rp-200: hsl(258.75deg 42.11% 77.65%); - --ld-col-rp-300: hsl(257.89deg 36.77% 69.61%); - --ld-col-rp-400: hsl(257.91deg 34.36% 61.76%); - --ld-col-rp-500: hsl(258.95deg 32.20% 53.73%); - --ld-col-rp-600: hsl(258.84deg 36.75% 45.88%); + --ld-col-rp-010: hsl(266.67deg 100.00% 98.24%); + --ld-col-rp-050: hsl(262.00deg 100.00% 94.12%); + --ld-col-rp-100: hsl(261.54deg 53.42% 85.69%); + --ld-col-rp-200: hsl(260.82deg 42.61% 77.45%); + --ld-col-rp-300: hsl(259.66deg 37.18% 69.41%); + --ld-col-rp-400: hsl(259.41deg 34.69% 61.57%); + --ld-col-rp-500: hsl(259.48deg 32.49% 53.53%); + --ld-col-rp-600: hsl(259.53deg 36.75% 45.88%); --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); --ld-col-rp-800: hsl(259.22deg 66.45% 30.39%); --ld-col-rp-900: hsl(258.92deg 100.00% 21.76%); --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); --ld-col-rp: hsl(258.95deg 48.72% 38.24%); - --ld-col-rr-010: hsl(337.50deg 100.00% 98.43%); - --ld-col-rr-050: hsl(347.14deg 100.00% 94.51%); - --ld-col-rr-100: hsl(347.06deg 89.47% 88.82%); - --ld-col-rr-200: hsl(346.22deg 84.09% 82.75%); + --ld-col-rr-010: hsl(340.00deg 100.00% 98.24%); + --ld-col-rr-050: hsl(347.59deg 100.00% 94.31%); + --ld-col-rr-100: hsl(346.15deg 89.66% 88.63%); + --ld-col-rr-200: hsl(345.60deg 84.27% 82.55%); --ld-col-rr-300: hsl(345.60deg 83.33% 76.47%); - --ld-col-rr-400: hsl(345.24deg 81.82% 69.80%); - --ld-col-rr-500: hsl(345.00deg 80.41% 61.96%); + --ld-col-rr-400: hsl(344.88deg 81.94% 69.61%); + --ld-col-rr-500: hsl(345.38deg 80.41% 61.96%); --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); --ld-col-rr-700: hsl(345.19deg 79.38% 38.04%); --ld-col-rr-800: hsl(344.86deg 84.73% 25.69%); @@ -56,7 +70,7 @@ --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); --ld-col-rr: hsl(345.00deg 80.00% 50.98%); - --ld-col-sb-010: hsl(180.00deg 100.00% 98.43%); + --ld-col-sb-010: hsl(165.00deg 100.00% 98.43%); --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); --ld-col-sb-100: hsl(175.00deg 32.61% 63.92%); --ld-col-sb-200: hsl(175.56deg 24.32% 56.47%); @@ -70,7 +84,7 @@ --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); --ld-col-sb: hsl(175.38deg 44.83% 71.57%); - --ld-col-sg-010: hsl(90.00deg 100.00% 98.43%); + --ld-col-sg-010: hsl(93.33deg 100.00% 98.24%); --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); --ld-col-sg-100: hsl(93.75deg 35.56% 64.71%); --ld-col-sg-200: hsl(94.14deg 26.61% 57.25%); @@ -84,7 +98,7 @@ --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); --ld-col-sg: hsl(94.29deg 50.00% 72.55%); - --ld-col-sp-010: hsl(330.00deg 100.00% 98.43%); + --ld-col-sp-010: hsl(340.00deg 100.00% 98.24%); --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); --ld-col-sp-100: hsl(339.31deg 21.80% 73.92%); --ld-col-sp-200: hsl(340.00deg 15.43% 65.69%); @@ -98,7 +112,7 @@ --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); --ld-col-sp: hsl(340.00deg 33.33% 82.35%); - --ld-col-sy-010: hsl(30.00deg 100.00% 98.43%); + --ld-col-sy-010: hsl(33.33deg 100.00% 98.24%); --ld-col-sy-050: hsl(30.00deg 100.00% 86.27%); --ld-col-sy-100: hsl(30.48deg 53.85% 77.06%); --ld-col-sy-200: hsl(30.55deg 33.74% 68.04%); @@ -112,11 +126,11 @@ --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 86.27% / 0.2); --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 86.27% / 0.1); --ld-col-sy: hsl(30.00deg 100.00% 86.27%); - --ld-col-vc-010: hsl(188.57deg 100.00% 98.63%); - --ld-col-vc-050: hsl(186.43deg 100.00% 94.51%); - --ld-col-vc-100: hsl(185.17deg 70.73% 83.92%); - --ld-col-vc-200: hsl(185.33deg 65.22% 72.94%); - --ld-col-vc-300: hsl(185.81deg 63.27% 61.57%); + --ld-col-vc-010: hsl(180.00deg 100.00% 98.24%); + --ld-col-vc-050: hsl(186.21deg 100.00% 94.31%); + --ld-col-vc-100: hsl(185.08deg 71.08% 83.73%); + --ld-col-vc-200: hsl(185.27deg 65.47% 72.75%); + --ld-col-vc-300: hsl(185.76deg 63.45% 61.37%); --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); --ld-col-vc-500: hsl(185.82deg 65.69% 40.00%); --ld-col-vc-600: hsl(185.56deg 67.50% 31.37%); @@ -126,10 +140,10 @@ --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); --ld-col-vc: hsl(185.63deg 64.00% 49.02%); - --ld-col-vg-010: hsl(75.00deg 100.00% 98.43%); - --ld-col-vg-050: hsl(79.29deg 100.00% 94.51%); - --ld-col-vg-100: hsl(80.00deg 65.22% 81.96%); - --ld-col-vg-200: hsl(79.57deg 58.23% 69.02%); + --ld-col-vg-010: hsl(86.67deg 100.00% 98.24%); + --ld-col-vg-050: hsl(78.00deg 100.00% 94.12%); + --ld-col-vg-100: hsl(79.35deg 65.96% 81.57%); + --ld-col-vg-200: hsl(79.35deg 58.49% 68.82%); --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); --ld-col-vg-400: hsl(79.44deg 45.00% 47.06%); --ld-col-vg-500: hsl(78.91deg 46.94% 38.43%); @@ -140,12 +154,12 @@ --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); --ld-col-vg: hsl(79.20deg 55.56% 55.88%); - --ld-col-vm-010: hsl(330.00deg 100.00% 98.43%); - --ld-col-vm-050: hsl(330.00deg 100.00% 94.51%); - --ld-col-vm-100: hsl(330.00deg 90.00% 88.24%); - --ld-col-vm-200: hsl(329.62deg 84.95% 81.76%); - --ld-col-vm-300: hsl(329.16deg 82.95% 74.71%); - --ld-col-vm-400: hsl(329.34deg 82.04% 67.25%); + --ld-col-vm-010: hsl(326.67deg 100.00% 98.24%); + --ld-col-vm-050: hsl(328.00deg 100.00% 94.12%); + --ld-col-vm-100: hsl(329.45deg 90.16% 88.04%); + --ld-col-vm-200: hsl(328.89deg 85.26% 81.37%); + --ld-col-vm-300: hsl(328.89deg 83.08% 74.51%); + --ld-col-vm-400: hsl(329.13deg 82.14% 67.06%); --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); --ld-col-vm-600: hsl(329.15deg 60.17% 46.27%); --ld-col-vm-700: hsl(329.19deg 62.01% 35.10%); @@ -154,9 +168,9 @@ --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); --ld-col-vm: hsl(329.14deg 81.40% 57.84%); - --ld-col-vy-010: hsl(45.00deg 100.00% 98.43%); - --ld-col-vy-050: hsl(42.86deg 100.00% 94.51%); - --ld-col-vy-100: hsl(43.78deg 100.00% 78.24%); + --ld-col-vy-010: hsl(46.67deg 100.00% 98.24%); + --ld-col-vy-050: hsl(43.45deg 100.00% 94.31%); + --ld-col-vy-100: hsl(43.93deg 100.00% 78.04%); --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); --ld-col-vy-300: hsl(43.82deg 72.36% 51.76%); --ld-col-vy-400: hsl(43.71deg 67.11% 44.12%); @@ -168,4 +182,11 @@ --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); --ld-col-vy: hsl(43.90deg 100.00% 59.80%); + --ld-col-wht-alpha-high: hsl(0.00deg 0.00% 100.00% / 0.7); + --ld-col-wht-alpha-highest: hsl(0.00deg 0.00% 100.00% / 0.8); + --ld-col-wht-alpha-low: hsl(0.00deg 0.00% 100.00% / 0.2); + --ld-col-wht-alpha-lowest: hsl(0.00deg 0.00% 100.00% / 0.1); + --ld-col-wht-alpha-medium: hsl(0.00deg 0.00% 100.00% / 0.5); + --ld-col-wht-alpha-none: hsl(0.00deg 0.00% 100.00% / 0); + --ld-col-wht: hsl(0.00deg 0.00% 100.00%); } diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index ff96795237..56863f4d85 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -206,25 +206,38 @@ "40": "2.5rem" }, "colors": { + "neutral-900/default": "hsl(220.00deg 50.00% 12.00%)", + "neutral-010": "hsl(0.00deg 0.00% 98.24%)", + "neutral-050": "hsl(0.00deg 0.00% 94.51%)", + "neutral-100": "hsl(210.00deg 4.88% 83.92%)", + "neutral-200": "hsl(222.86deg 5.26% 73.92%)", + "neutral-300": "hsl(218.18deg 6.01% 64.12%)", + "neutral-400": "hsl(218.57deg 6.03% 54.51%)", + "neutral-500": "hsl(221.05deg 8.23% 45.29%)", + "neutral-600": "hsl(220.00deg 11.35% 36.27%)", + "neutral-700": "hsl(220.00deg 16.90% 27.84%)", + "neutral-800": "hsl(218.57deg 28.00% 19.61%)", + "neutral-alpha-low": "hsl(220.00deg 50.00% 12.00% / 0.2)", + "neutral-alpha-lowest": "hsl(220.00deg 50.00% 12.00% / 0.1)", "rr-600/default": "hsl(345.00deg 80.00% 50.98%)", - "rr-010": "hsl(337.50deg 100.00% 98.43%)", - "rr-050": "hsl(347.14deg 100.00% 94.51%)", - "rr-100": "hsl(347.06deg 89.47% 88.82%)", - "rr-200": "hsl(346.22deg 84.09% 82.75%)", + "rr-010": "hsl(340.00deg 100.00% 98.24%)", + "rr-050": "hsl(347.59deg 100.00% 94.31%)", + "rr-100": "hsl(346.15deg 89.66% 88.63%)", + "rr-200": "hsl(345.60deg 84.27% 82.55%)", "rr-300": "hsl(345.60deg 83.33% 76.47%)", - "rr-400": "hsl(345.24deg 81.82% 69.80%)", - "rr-500": "hsl(345.00deg 80.41% 61.96%)", + "rr-400": "hsl(344.88deg 81.94% 69.61%)", + "rr-500": "hsl(345.38deg 80.41% 61.96%)", "rr-700": "hsl(345.19deg 79.38% 38.04%)", "rr-800": "hsl(344.86deg 84.73% 25.69%)", "rr-900": "hsl(345.00deg 97.30% 14.51%)", "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", - "rb-010": "hsl(202.50deg 100.00% 98.43%)", - "rb-050": "hsl(207.86deg 100.00% 94.51%)", - "rb-100": "hsl(207.60deg 65.79% 85.10%)", - "rb-200": "hsl(206.20deg 56.80% 75.49%)", - "rb-300": "hsl(206.45deg 53.76% 66.08%)", + "rb-010": "hsl(206.67deg 100.00% 98.24%)", + "rb-050": "hsl(206.90deg 100.00% 94.31%)", + "rb-100": "hsl(207.06deg 66.23% 84.90%)", + "rb-200": "hsl(205.83deg 57.14% 75.29%)", + "rb-300": "hsl(206.17deg 54.02% 65.88%)", "rb-400": "hsl(206.61deg 52.04% 56.67%)", "rb-500": "hsl(206.09deg 57.50% 47.06%)", "rb-700": "hsl(206.40deg 86.21% 28.43%)", @@ -233,9 +246,9 @@ "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", - "vy-010": "hsl(45.00deg 100.00% 98.43%)", - "vy-050": "hsl(42.86deg 100.00% 94.51%)", - "vy-100": "hsl(43.78deg 100.00% 78.24%)", + "vy-010": "hsl(46.67deg 100.00% 98.24%)", + "vy-050": "hsl(43.45deg 100.00% 94.31%)", + "vy-100": "hsl(43.93deg 100.00% 78.04%)", "vy-300": "hsl(43.82deg 72.36% 51.76%)", "vy-400": "hsl(43.71deg 67.11% 44.12%)", "vy-500": "hsl(43.68deg 66.84% 36.67%)", @@ -246,23 +259,23 @@ "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", "rp-700/default": "hsl(258.95deg 48.72% 38.24%)", - "rp-010": "hsl(255.00deg 100.00% 98.43%)", - "rp-050": "hsl(257.14deg 100.00% 94.51%)", - "rp-100": "hsl(258.95deg 52.78% 85.88%)", - "rp-200": "hsl(258.75deg 42.11% 77.65%)", - "rp-300": "hsl(257.89deg 36.77% 69.61%)", - "rp-400": "hsl(257.91deg 34.36% 61.76%)", - "rp-500": "hsl(258.95deg 32.20% 53.73%)", - "rp-600": "hsl(258.84deg 36.75% 45.88%)", + "rp-010": "hsl(266.67deg 100.00% 98.24%)", + "rp-050": "hsl(262.00deg 100.00% 94.12%)", + "rp-100": "hsl(261.54deg 53.42% 85.69%)", + "rp-200": "hsl(260.82deg 42.61% 77.45%)", + "rp-300": "hsl(259.66deg 37.18% 69.41%)", + "rp-400": "hsl(259.41deg 34.69% 61.57%)", + "rp-500": "hsl(259.48deg 32.49% 53.53%)", + "rp-600": "hsl(259.53deg 36.75% 45.88%)", "rp-800": "hsl(259.22deg 66.45% 30.39%)", "rp-900": "hsl(258.92deg 100.00% 21.76%)", "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", - "vg-010": "hsl(75.00deg 100.00% 98.43%)", - "vg-050": "hsl(79.29deg 100.00% 94.51%)", - "vg-100": "hsl(80.00deg 65.22% 81.96%)", - "vg-200": "hsl(79.57deg 58.23% 69.02%)", + "vg-010": "hsl(86.67deg 100.00% 98.24%)", + "vg-050": "hsl(78.00deg 100.00% 94.12%)", + "vg-100": "hsl(79.35deg 65.96% 81.57%)", + "vg-200": "hsl(79.35deg 58.49% 68.82%)", "vg-400": "hsl(79.44deg 45.00% 47.06%)", "vg-500": "hsl(78.91deg 46.94% 38.43%)", "vg-600": "hsl(78.95deg 49.35% 30.20%)", @@ -272,12 +285,12 @@ "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", - "vm-010": "hsl(330.00deg 100.00% 98.43%)", - "vm-050": "hsl(330.00deg 100.00% 94.51%)", - "vm-100": "hsl(330.00deg 90.00% 88.24%)", - "vm-200": "hsl(329.62deg 84.95% 81.76%)", - "vm-300": "hsl(329.16deg 82.95% 74.71%)", - "vm-400": "hsl(329.34deg 82.04% 67.25%)", + "vm-010": "hsl(326.67deg 100.00% 98.24%)", + "vm-050": "hsl(328.00deg 100.00% 94.12%)", + "vm-100": "hsl(329.45deg 90.16% 88.04%)", + "vm-200": "hsl(328.89deg 85.26% 81.37%)", + "vm-300": "hsl(328.89deg 83.08% 74.51%)", + "vm-400": "hsl(329.13deg 82.14% 67.06%)", "vm-600": "hsl(329.15deg 60.17% 46.27%)", "vm-700": "hsl(329.19deg 62.01% 35.10%)", "vm-800": "hsl(328.92deg 66.40% 24.51%)", @@ -285,24 +298,24 @@ "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", - "rg-010": "hsl(157.50deg 100.00% 98.43%)", - "rg-050": "hsl(154.29deg 100.00% 94.51%)", - "rg-100": "hsl(153.91deg 54.76% 83.53%)", - "rg-200": "hsl(153.87deg 44.29% 72.55%)", - "rg-300": "hsl(153.75deg 40.82% 61.57%)", - "rg-400": "hsl(153.67deg 38.58% 50.20%)", - "rg-500": "hsl(153.62deg 58.59% 38.82%)", + "rg-010": "hsl(153.33deg 100.00% 98.24%)", + "rg-050": "hsl(153.10deg 100.00% 94.31%)", + "rg-100": "hsl(153.19deg 55.29% 83.33%)", + "rg-200": "hsl(153.33deg 44.68% 72.35%)", + "rg-300": "hsl(153.33deg 41.12% 61.37%)", + "rg-400": "hsl(153.06deg 38.58% 50.20%)", + "rg-500": "hsl(153.10deg 58.59% 38.82%)", "rg-700": "hsl(153.27deg 98.06% 20.20%)", "rg-800": "hsl(153.91deg 100.00% 13.53%)", "rg-900": "hsl(153.85deg 100.00% 7.65%)", "rg-alpha-low": "hsl(153.33deg 98.54% 26.86% / 0.2)", "rg-alpha-lowest": "hsl(153.33deg 98.54% 26.86% / 0.1)", "vc-400/default": "hsl(185.63deg 64.00% 49.02%)", - "vc-010": "hsl(188.57deg 100.00% 98.63%)", - "vc-050": "hsl(186.43deg 100.00% 94.51%)", - "vc-100": "hsl(185.17deg 70.73% 83.92%)", - "vc-200": "hsl(185.33deg 65.22% 72.94%)", - "vc-300": "hsl(185.81deg 63.27% 61.57%)", + "vc-010": "hsl(180.00deg 100.00% 98.24%)", + "vc-050": "hsl(186.21deg 100.00% 94.31%)", + "vc-100": "hsl(185.08deg 71.08% 83.73%)", + "vc-200": "hsl(185.27deg 65.47% 72.75%)", + "vc-300": "hsl(185.76deg 63.45% 61.37%)", "vc-500": "hsl(185.82deg 65.69% 40.00%)", "vc-600": "hsl(185.56deg 67.50% 31.37%)", "vc-700": "hsl(185.65deg 72.65% 22.94%)", @@ -311,7 +324,7 @@ "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", - "sg-010": "hsl(90.00deg 100.00% 98.43%)", + "sg-010": "hsl(93.33deg 100.00% 98.24%)", "sg-100": "hsl(93.75deg 35.56% 64.71%)", "sg-200": "hsl(94.14deg 26.61% 57.25%)", "sg-300": "hsl(93.46deg 20.47% 49.80%)", @@ -324,7 +337,7 @@ "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", - "sy-010": "hsl(30.00deg 100.00% 98.43%)", + "sy-010": "hsl(33.33deg 100.00% 98.24%)", "sy-100": "hsl(30.48deg 53.85% 77.06%)", "sy-200": "hsl(30.55deg 33.74% 68.04%)", "sy-300": "hsl(30.00deg 23.08% 59.22%)", @@ -337,7 +350,7 @@ "sy-alpha-low": "hsl(30.00deg 100.00% 86.27% / 0.2)", "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", - "sb-010": "hsl(180.00deg 100.00% 98.43%)", + "sb-010": "hsl(165.00deg 100.00% 98.43%)", "sb-100": "hsl(175.00deg 32.61% 63.92%)", "sb-200": "hsl(175.56deg 24.32% 56.47%)", "sb-300": "hsl(175.10deg 19.52% 49.22%)", @@ -350,7 +363,7 @@ "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", - "sp-010": "hsl(330.00deg 100.00% 98.43%)", + "sp-010": "hsl(340.00deg 100.00% 98.24%)", "sp-100": "hsl(339.31deg 21.80% 73.92%)", "sp-200": "hsl(340.00deg 15.43% 65.69%)", "sp-300": "hsl(338.40deg 11.52% 57.45%)", @@ -361,7 +374,14 @@ "sp-800": "hsl(338.82deg 16.19% 20.59%)", "sp-900": "hsl(337.50deg 22.22% 14.12%)", "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", - "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)" + "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)", + "wht": "hsl(0.00deg 0.00% 100.00%)", + "wht-alpha-highest": "hsl(0.00deg 0.00% 100.00% / 0.8)", + "wht-alpha-high": "hsl(0.00deg 0.00% 100.00% / 0.7)", + "wht-alpha-medium": "hsl(0.00deg 0.00% 100.00% / 0.5)", + "wht-alpha-low": "hsl(0.00deg 0.00% 100.00% / 0.2)", + "wht-alpha-lowest": "hsl(0.00deg 0.00% 100.00% / 0.1)", + "wht-alpha-none": "hsl(0.00deg 0.00% 100.00% / 0)" }, "typography": { "xh1": { From 7eef965233bdfdbf4283bfa8c9b0850b30e6ee81 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 14:14:12 +0200 Subject: [PATCH 10/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 3 +- src/liquid/global/styles/colors/colors.css | 112 ++++++++++---------- src/liquid/global/styles/design-tokens.json | 112 ++++++++++---------- 3 files changed, 114 insertions(+), 113 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 3c058785cd..6ce10c0c16 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -235,9 +235,10 @@ function parseColors(items, styles: { name: string; description: string }[]) { }) // to dark - const colorDark = chroma({ r, g, b }).set('hsl.s', 1).luminance(0.015) + const colorDark = chroma({ r, g, b }).luminance(0.015) chroma .scale([color, colorDark]) + .mode('lab') .correctLightness() .colors(totalStepsToDark) .forEach((color, i) => { diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 477f0ab2e6..e0952c8ee4 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -22,9 +22,9 @@ --ld-col-rb-400: hsl(206.61deg 52.04% 56.67%); --ld-col-rb-500: hsl(206.09deg 57.50% 47.06%); --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); - --ld-col-rb-700: hsl(206.40deg 86.21% 28.43%); - --ld-col-rb-800: hsl(206.37deg 90.10% 19.80%); - --ld-col-rb-900: hsl(206.56deg 100.00% 11.96%); + --ld-col-rb-700: hsl(206.28deg 83.45% 28.43%); + --ld-col-rb-800: hsl(206.82deg 82.52% 20.20%); + --ld-col-rb-900: hsl(206.54deg 83.87% 12.16%); --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); --ld-col-rb: hsl(206.25deg 84.21% 37.25%); @@ -51,8 +51,8 @@ --ld-col-rp-500: hsl(259.48deg 32.49% 53.53%); --ld-col-rp-600: hsl(259.53deg 36.75% 45.88%); --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); - --ld-col-rp-800: hsl(259.22deg 66.45% 30.39%); - --ld-col-rp-900: hsl(258.92deg 100.00% 21.76%); + --ld-col-rp-800: hsl(258.26deg 48.25% 28.04%); + --ld-col-rp-900: hsl(258.67deg 48.39% 18.24%); --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); --ld-col-rp: hsl(258.95deg 48.72% 38.24%); @@ -64,51 +64,51 @@ --ld-col-rr-400: hsl(344.88deg 81.94% 69.61%); --ld-col-rr-500: hsl(345.38deg 80.41% 61.96%); --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); - --ld-col-rr-700: hsl(345.19deg 79.38% 38.04%); - --ld-col-rr-800: hsl(344.86deg 84.73% 25.69%); - --ld-col-rr-900: hsl(345.00deg 97.30% 14.51%); + --ld-col-rr-700: hsl(345.41deg 75.51% 38.43%); + --ld-col-rr-800: hsl(345.15deg 74.81% 26.47%); + --ld-col-rr-900: hsl(344.75deg 76.62% 15.10%); --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); --ld-col-rr: hsl(345.00deg 80.00% 50.98%); --ld-col-sb-010: hsl(165.00deg 100.00% 98.43%); --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); - --ld-col-sb-100: hsl(175.00deg 32.61% 63.92%); - --ld-col-sb-200: hsl(175.56deg 24.32% 56.47%); - --ld-col-sb-300: hsl(175.10deg 19.52% 49.22%); - --ld-col-sb-400: hsl(175.81deg 20.00% 42.16%); - --ld-col-sb-500: hsl(176.84deg 21.11% 35.29%); - --ld-col-sb-600: hsl(176.47deg 23.29% 28.63%); - --ld-col-sb-700: hsl(175.86deg 25.66% 22.16%); - --ld-col-sb-800: hsl(177.50deg 29.27% 16.08%); - --ld-col-sb-900: hsl(177.00deg 38.46% 10.20%); + --ld-col-sb-100: hsl(174.92deg 32.24% 64.12%); + --ld-col-sb-200: hsl(175.38deg 23.64% 56.86%); + --ld-col-sb-300: hsl(174.78deg 18.11% 49.80%); + --ld-col-sb-400: hsl(175.38deg 17.81% 42.94%); + --ld-col-sb-500: hsl(174.55deg 17.84% 36.27%); + --ld-col-sb-600: hsl(175.56deg 17.88% 29.61%); + --ld-col-sb-700: hsl(174.29deg 17.65% 23.33%); + --ld-col-sb-800: hsl(176.25deg 18.18% 17.25%); + --ld-col-sb-900: hsl(174.55deg 18.64% 11.57%); --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); --ld-col-sb: hsl(175.38deg 44.83% 71.57%); --ld-col-sg-010: hsl(93.33deg 100.00% 98.24%); --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); - --ld-col-sg-100: hsl(93.75deg 35.56% 64.71%); - --ld-col-sg-200: hsl(94.14deg 26.61% 57.25%); - --ld-col-sg-300: hsl(93.46deg 20.47% 49.80%); - --ld-col-sg-400: hsl(93.91deg 21.10% 42.75%); - --ld-col-sg-500: hsl(94.50deg 21.98% 35.69%); - --ld-col-sg-600: hsl(94.29deg 23.81% 28.82%); - --ld-col-sg-700: hsl(94.00deg 26.32% 22.35%); - --ld-col-sg-800: hsl(92.50deg 29.27% 16.08%); - --ld-col-sg-900: hsl(93.00deg 38.46% 10.20%); + --ld-col-sg-100: hsl(94.29deg 35.20% 64.90%); + --ld-col-sg-200: hsl(94.29deg 25.93% 57.65%); + --ld-col-sg-300: hsl(94.29deg 19.37% 50.39%); + --ld-col-sg-400: hsl(95.12deg 18.55% 43.33%); + --ld-col-sg-500: hsl(95.29deg 18.28% 36.47%); + --ld-col-sg-600: hsl(94.29deg 18.42% 29.80%); + --ld-col-sg-700: hsl(95.45deg 18.33% 23.53%); + --ld-col-sg-800: hsl(98.82deg 19.10% 17.45%); + --ld-col-sg-900: hsl(98.18deg 18.64% 11.57%); --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); --ld-col-sg: hsl(94.29deg 50.00% 72.55%); --ld-col-sp-010: hsl(340.00deg 100.00% 98.24%); --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); - --ld-col-sp-100: hsl(339.31deg 21.80% 73.92%); - --ld-col-sp-200: hsl(340.00deg 15.43% 65.69%); - --ld-col-sp-300: hsl(338.40deg 11.52% 57.45%); - --ld-col-sp-400: hsl(339.13deg 9.09% 49.61%); - --ld-col-sp-500: hsl(338.18deg 10.28% 41.96%); - --ld-col-sp-600: hsl(339.00deg 11.36% 34.51%); - --ld-col-sp-700: hsl(340.00deg 12.86% 27.45%); - --ld-col-sp-800: hsl(338.82deg 16.19% 20.59%); - --ld-col-sp-900: hsl(337.50deg 22.22% 14.12%); + --ld-col-sp-100: hsl(340.00deg 20.30% 73.92%); + --ld-col-sp-200: hsl(340.00deg 13.64% 65.49%); + --ld-col-sp-300: hsl(342.00deg 9.17% 57.25%); + --ld-col-sp-400: hsl(338.82deg 6.77% 49.22%); + --ld-col-sp-500: hsl(342.86deg 6.60% 41.57%); + --ld-col-sp-600: hsl(340.00deg 6.90% 34.12%); + --ld-col-sp-700: hsl(340.00deg 6.57% 26.86%); + --ld-col-sp-800: hsl(350.00deg 5.88% 20.00%); + --ld-col-sp-900: hsl(345.00deg 5.88% 13.33%); --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); --ld-col-sp: hsl(340.00deg 33.33% 82.35%); @@ -132,11 +132,11 @@ --ld-col-vc-200: hsl(185.27deg 65.47% 72.75%); --ld-col-vc-300: hsl(185.76deg 63.45% 61.37%); --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); - --ld-col-vc-500: hsl(185.82deg 65.69% 40.00%); - --ld-col-vc-600: hsl(185.56deg 67.50% 31.37%); - --ld-col-vc-700: hsl(185.65deg 72.65% 22.94%); - --ld-col-vc-800: hsl(185.81deg 79.49% 15.29%); - --ld-col-vc-900: hsl(185.85deg 100.00% 8.04%); + --ld-col-vc-500: hsl(185.95deg 63.29% 40.59%); + --ld-col-vc-600: hsl(185.29deg 62.20% 32.16%); + --ld-col-vc-700: hsl(185.53deg 61.29% 24.31%); + --ld-col-vc-800: hsl(184.71deg 60.00% 16.67%); + --ld-col-vc-900: hsl(184.00deg 62.50% 9.41%); --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); --ld-col-vc: hsl(185.63deg 64.00% 49.02%); @@ -145,12 +145,12 @@ --ld-col-vg-100: hsl(79.35deg 65.96% 81.57%); --ld-col-vg-200: hsl(79.35deg 58.49% 68.82%); --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); - --ld-col-vg-400: hsl(79.44deg 45.00% 47.06%); - --ld-col-vg-500: hsl(78.91deg 46.94% 38.43%); - --ld-col-vg-600: hsl(78.95deg 49.35% 30.20%); - --ld-col-vg-700: hsl(79.00deg 52.63% 22.35%); - --ld-col-vg-800: hsl(79.57deg 60.53% 14.90%); - --ld-col-vg-900: hsl(78.75deg 80.00% 7.84%); + --ld-col-vg-400: hsl(79.25deg 43.80% 47.45%); + --ld-col-vg-500: hsl(79.53deg 43.00% 39.22%); + --ld-col-vg-600: hsl(79.41deg 42.50% 31.37%); + --ld-col-vg-700: hsl(80.00deg 42.15% 23.73%); + --ld-col-vg-800: hsl(80.57deg 41.18% 16.67%); + --ld-col-vg-900: hsl(80.00deg 42.86% 9.61%); --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); --ld-col-vg: hsl(79.20deg 55.56% 55.88%); @@ -161,10 +161,10 @@ --ld-col-vm-300: hsl(328.89deg 83.08% 74.51%); --ld-col-vm-400: hsl(329.13deg 82.14% 67.06%); --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); - --ld-col-vm-600: hsl(329.15deg 60.17% 46.27%); - --ld-col-vm-700: hsl(329.19deg 62.01% 35.10%); - --ld-col-vm-800: hsl(328.92deg 66.40% 24.51%); - --ld-col-vm-900: hsl(328.36deg 73.33% 14.71%); + --ld-col-vm-600: hsl(329.35deg 58.65% 46.47%); + --ld-col-vm-700: hsl(329.71deg 58.01% 35.49%); + --ld-col-vm-800: hsl(330.00deg 57.81% 25.10%); + --ld-col-vm-900: hsl(329.33deg 58.44% 15.10%); --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); --ld-col-vm: hsl(329.14deg 81.40% 57.84%); @@ -172,12 +172,12 @@ --ld-col-vy-050: hsl(43.45deg 100.00% 94.31%); --ld-col-vy-100: hsl(43.93deg 100.00% 78.04%); --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); - --ld-col-vy-300: hsl(43.82deg 72.36% 51.76%); - --ld-col-vy-400: hsl(43.71deg 67.11% 44.12%); - --ld-col-vy-500: hsl(43.68deg 66.84% 36.67%); - --ld-col-vy-600: hsl(43.96deg 67.79% 29.22%); - --ld-col-vy-700: hsl(44.21deg 66.67% 22.35%); - --ld-col-vy-800: hsl(44.44deg 67.50% 15.69%); + --ld-col-vy-300: hsl(43.64deg 72.13% 52.16%); + --ld-col-vy-400: hsl(43.49deg 65.64% 44.51%); + --ld-col-vy-500: hsl(43.28deg 64.21% 37.25%); + --ld-col-vy-600: hsl(43.13deg 62.34% 30.20%); + --ld-col-vy-700: hsl(43.33deg 61.02% 23.14%); + --ld-col-vy-800: hsl(43.20deg 59.52% 16.47%); --ld-col-vy-900: hsl(43.64deg 67.35% 9.61%); --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index 56863f4d85..bcfe48c73c 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -227,9 +227,9 @@ "rr-300": "hsl(345.60deg 83.33% 76.47%)", "rr-400": "hsl(344.88deg 81.94% 69.61%)", "rr-500": "hsl(345.38deg 80.41% 61.96%)", - "rr-700": "hsl(345.19deg 79.38% 38.04%)", - "rr-800": "hsl(344.86deg 84.73% 25.69%)", - "rr-900": "hsl(345.00deg 97.30% 14.51%)", + "rr-700": "hsl(345.41deg 75.51% 38.43%)", + "rr-800": "hsl(345.15deg 74.81% 26.47%)", + "rr-900": "hsl(344.75deg 76.62% 15.10%)", "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", @@ -240,21 +240,21 @@ "rb-300": "hsl(206.17deg 54.02% 65.88%)", "rb-400": "hsl(206.61deg 52.04% 56.67%)", "rb-500": "hsl(206.09deg 57.50% 47.06%)", - "rb-700": "hsl(206.40deg 86.21% 28.43%)", - "rb-800": "hsl(206.37deg 90.10% 19.80%)", - "rb-900": "hsl(206.56deg 100.00% 11.96%)", + "rb-700": "hsl(206.28deg 83.45% 28.43%)", + "rb-800": "hsl(206.82deg 82.52% 20.20%)", + "rb-900": "hsl(206.54deg 83.87% 12.16%)", "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", "vy-010": "hsl(46.67deg 100.00% 98.24%)", "vy-050": "hsl(43.45deg 100.00% 94.31%)", "vy-100": "hsl(43.93deg 100.00% 78.04%)", - "vy-300": "hsl(43.82deg 72.36% 51.76%)", - "vy-400": "hsl(43.71deg 67.11% 44.12%)", - "vy-500": "hsl(43.68deg 66.84% 36.67%)", - "vy-600": "hsl(43.96deg 67.79% 29.22%)", - "vy-700": "hsl(44.21deg 66.67% 22.35%)", - "vy-800": "hsl(44.44deg 67.50% 15.69%)", + "vy-300": "hsl(43.64deg 72.13% 52.16%)", + "vy-400": "hsl(43.49deg 65.64% 44.51%)", + "vy-500": "hsl(43.28deg 64.21% 37.25%)", + "vy-600": "hsl(43.13deg 62.34% 30.20%)", + "vy-700": "hsl(43.33deg 61.02% 23.14%)", + "vy-800": "hsl(43.20deg 59.52% 16.47%)", "vy-900": "hsl(43.64deg 67.35% 9.61%)", "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", @@ -267,8 +267,8 @@ "rp-400": "hsl(259.41deg 34.69% 61.57%)", "rp-500": "hsl(259.48deg 32.49% 53.53%)", "rp-600": "hsl(259.53deg 36.75% 45.88%)", - "rp-800": "hsl(259.22deg 66.45% 30.39%)", - "rp-900": "hsl(258.92deg 100.00% 21.76%)", + "rp-800": "hsl(258.26deg 48.25% 28.04%)", + "rp-900": "hsl(258.67deg 48.39% 18.24%)", "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", @@ -276,12 +276,12 @@ "vg-050": "hsl(78.00deg 100.00% 94.12%)", "vg-100": "hsl(79.35deg 65.96% 81.57%)", "vg-200": "hsl(79.35deg 58.49% 68.82%)", - "vg-400": "hsl(79.44deg 45.00% 47.06%)", - "vg-500": "hsl(78.91deg 46.94% 38.43%)", - "vg-600": "hsl(78.95deg 49.35% 30.20%)", - "vg-700": "hsl(79.00deg 52.63% 22.35%)", - "vg-800": "hsl(79.57deg 60.53% 14.90%)", - "vg-900": "hsl(78.75deg 80.00% 7.84%)", + "vg-400": "hsl(79.25deg 43.80% 47.45%)", + "vg-500": "hsl(79.53deg 43.00% 39.22%)", + "vg-600": "hsl(79.41deg 42.50% 31.37%)", + "vg-700": "hsl(80.00deg 42.15% 23.73%)", + "vg-800": "hsl(80.57deg 41.18% 16.67%)", + "vg-900": "hsl(80.00deg 42.86% 9.61%)", "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", @@ -291,10 +291,10 @@ "vm-200": "hsl(328.89deg 85.26% 81.37%)", "vm-300": "hsl(328.89deg 83.08% 74.51%)", "vm-400": "hsl(329.13deg 82.14% 67.06%)", - "vm-600": "hsl(329.15deg 60.17% 46.27%)", - "vm-700": "hsl(329.19deg 62.01% 35.10%)", - "vm-800": "hsl(328.92deg 66.40% 24.51%)", - "vm-900": "hsl(328.36deg 73.33% 14.71%)", + "vm-600": "hsl(329.35deg 58.65% 46.47%)", + "vm-700": "hsl(329.71deg 58.01% 35.49%)", + "vm-800": "hsl(330.00deg 57.81% 25.10%)", + "vm-900": "hsl(329.33deg 58.44% 15.10%)", "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", @@ -316,24 +316,24 @@ "vc-100": "hsl(185.08deg 71.08% 83.73%)", "vc-200": "hsl(185.27deg 65.47% 72.75%)", "vc-300": "hsl(185.76deg 63.45% 61.37%)", - "vc-500": "hsl(185.82deg 65.69% 40.00%)", - "vc-600": "hsl(185.56deg 67.50% 31.37%)", - "vc-700": "hsl(185.65deg 72.65% 22.94%)", - "vc-800": "hsl(185.81deg 79.49% 15.29%)", - "vc-900": "hsl(185.85deg 100.00% 8.04%)", + "vc-500": "hsl(185.95deg 63.29% 40.59%)", + "vc-600": "hsl(185.29deg 62.20% 32.16%)", + "vc-700": "hsl(185.53deg 61.29% 24.31%)", + "vc-800": "hsl(184.71deg 60.00% 16.67%)", + "vc-900": "hsl(184.00deg 62.50% 9.41%)", "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", "sg-010": "hsl(93.33deg 100.00% 98.24%)", - "sg-100": "hsl(93.75deg 35.56% 64.71%)", - "sg-200": "hsl(94.14deg 26.61% 57.25%)", - "sg-300": "hsl(93.46deg 20.47% 49.80%)", - "sg-400": "hsl(93.91deg 21.10% 42.75%)", - "sg-500": "hsl(94.50deg 21.98% 35.69%)", - "sg-600": "hsl(94.29deg 23.81% 28.82%)", - "sg-700": "hsl(94.00deg 26.32% 22.35%)", - "sg-800": "hsl(92.50deg 29.27% 16.08%)", - "sg-900": "hsl(93.00deg 38.46% 10.20%)", + "sg-100": "hsl(94.29deg 35.20% 64.90%)", + "sg-200": "hsl(94.29deg 25.93% 57.65%)", + "sg-300": "hsl(94.29deg 19.37% 50.39%)", + "sg-400": "hsl(95.12deg 18.55% 43.33%)", + "sg-500": "hsl(95.29deg 18.28% 36.47%)", + "sg-600": "hsl(94.29deg 18.42% 29.80%)", + "sg-700": "hsl(95.45deg 18.33% 23.53%)", + "sg-800": "hsl(98.82deg 19.10% 17.45%)", + "sg-900": "hsl(98.18deg 18.64% 11.57%)", "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", @@ -351,28 +351,28 @@ "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", "sb-010": "hsl(165.00deg 100.00% 98.43%)", - "sb-100": "hsl(175.00deg 32.61% 63.92%)", - "sb-200": "hsl(175.56deg 24.32% 56.47%)", - "sb-300": "hsl(175.10deg 19.52% 49.22%)", - "sb-400": "hsl(175.81deg 20.00% 42.16%)", - "sb-500": "hsl(176.84deg 21.11% 35.29%)", - "sb-600": "hsl(176.47deg 23.29% 28.63%)", - "sb-700": "hsl(175.86deg 25.66% 22.16%)", - "sb-800": "hsl(177.50deg 29.27% 16.08%)", - "sb-900": "hsl(177.00deg 38.46% 10.20%)", + "sb-100": "hsl(174.92deg 32.24% 64.12%)", + "sb-200": "hsl(175.38deg 23.64% 56.86%)", + "sb-300": "hsl(174.78deg 18.11% 49.80%)", + "sb-400": "hsl(175.38deg 17.81% 42.94%)", + "sb-500": "hsl(174.55deg 17.84% 36.27%)", + "sb-600": "hsl(175.56deg 17.88% 29.61%)", + "sb-700": "hsl(174.29deg 17.65% 23.33%)", + "sb-800": "hsl(176.25deg 18.18% 17.25%)", + "sb-900": "hsl(174.55deg 18.64% 11.57%)", "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", "sp-010": "hsl(340.00deg 100.00% 98.24%)", - "sp-100": "hsl(339.31deg 21.80% 73.92%)", - "sp-200": "hsl(340.00deg 15.43% 65.69%)", - "sp-300": "hsl(338.40deg 11.52% 57.45%)", - "sp-400": "hsl(339.13deg 9.09% 49.61%)", - "sp-500": "hsl(338.18deg 10.28% 41.96%)", - "sp-600": "hsl(339.00deg 11.36% 34.51%)", - "sp-700": "hsl(340.00deg 12.86% 27.45%)", - "sp-800": "hsl(338.82deg 16.19% 20.59%)", - "sp-900": "hsl(337.50deg 22.22% 14.12%)", + "sp-100": "hsl(340.00deg 20.30% 73.92%)", + "sp-200": "hsl(340.00deg 13.64% 65.49%)", + "sp-300": "hsl(342.00deg 9.17% 57.25%)", + "sp-400": "hsl(338.82deg 6.77% 49.22%)", + "sp-500": "hsl(342.86deg 6.60% 41.57%)", + "sp-600": "hsl(340.00deg 6.90% 34.12%)", + "sp-700": "hsl(340.00deg 6.57% 26.86%)", + "sp-800": "hsl(350.00deg 5.88% 20.00%)", + "sp-900": "hsl(345.00deg 5.88% 13.33%)", "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)", "wht": "hsl(0.00deg 0.00% 100.00%)", From 5aff5ff65ab1957c53f4b8fb58c79b53a611e89b Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 14:25:09 +0200 Subject: [PATCH 11/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 6 +- src/liquid/global/styles/colors/colors.css | 216 ++++++++++---------- src/liquid/global/styles/design-tokens.json | 216 ++++++++++---------- 3 files changed, 221 insertions(+), 217 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 6ce10c0c16..2f72bbdec8 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -214,9 +214,11 @@ function parseColors(items, styles: { name: string; description: string }[]) { // to light const colorLightest = chroma({ r, g, b }) + .set('hsl.h', color.get('hsl.h') - 15) .set('hsl.l', 0.9825) .set('hsl.s', isNeutral ? 0 : 1) const colorLight = chroma({ r, g, b }) + .set('hsl.h', color.get('hsl.h') - 10) .set('hsl.l', 0.9425) .set('hsl.s', isNeutral ? 0 : 1) const colorsToLightest = [ @@ -235,7 +237,9 @@ function parseColors(items, styles: { name: string; description: string }[]) { }) // to dark - const colorDark = chroma({ r, g, b }).luminance(0.015) + const colorDark = chroma({ r, g, b }) + .set('hsl.h', color.get('hsl.h') + 10) + .luminance(0.015) chroma .scale([color, colorDark]) .mode('lab') diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index e0952c8ee4..74022650eb 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -14,171 +14,171 @@ --ld-col-neutral-alpha-low: hsl(220.00deg 50.00% 12.00% / 0.2); --ld-col-neutral-alpha-lowest: hsl(220.00deg 50.00% 12.00% / 0.1); --ld-col-neutral: hsl(220.00deg 50.00% 12.00%); - --ld-col-rb-010: hsl(206.67deg 100.00% 98.24%); - --ld-col-rb-050: hsl(206.90deg 100.00% 94.31%); - --ld-col-rb-100: hsl(207.06deg 66.23% 84.90%); - --ld-col-rb-200: hsl(205.83deg 57.14% 75.29%); - --ld-col-rb-300: hsl(206.17deg 54.02% 65.88%); - --ld-col-rb-400: hsl(206.61deg 52.04% 56.67%); + --ld-col-rb-010: hsl(186.67deg 100.00% 98.24%); + --ld-col-rb-050: hsl(196.55deg 100.00% 94.31%); + --ld-col-rb-100: hsl(202.35deg 66.23% 84.90%); + --ld-col-rb-200: hsl(203.33deg 57.14% 75.29%); + --ld-col-rb-300: hsl(204.89deg 54.02% 65.88%); + --ld-col-rb-400: hsl(205.34deg 52.25% 56.47%); --ld-col-rb-500: hsl(206.09deg 57.50% 47.06%); --ld-col-rb-600: hsl(206.25deg 84.21% 37.25%); - --ld-col-rb-700: hsl(206.28deg 83.45% 28.43%); - --ld-col-rb-800: hsl(206.82deg 82.52% 20.20%); - --ld-col-rb-900: hsl(206.54deg 83.87% 12.16%); + --ld-col-rb-700: hsl(208.57deg 82.89% 29.80%); + --ld-col-rb-800: hsl(211.28deg 82.46% 22.35%); + --ld-col-rb-900: hsl(216.00deg 84.42% 15.10%); --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 37.25% / 0.2); --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 37.25% / 0.1); --ld-col-rb: hsl(206.25deg 84.21% 37.25%); - --ld-col-rg-010: hsl(153.33deg 100.00% 98.24%); - --ld-col-rg-050: hsl(153.10deg 100.00% 94.31%); - --ld-col-rg-100: hsl(153.19deg 55.29% 83.33%); - --ld-col-rg-200: hsl(153.33deg 44.68% 72.35%); - --ld-col-rg-300: hsl(153.33deg 41.12% 61.37%); - --ld-col-rg-400: hsl(153.06deg 38.58% 50.20%); - --ld-col-rg-500: hsl(153.10deg 58.59% 38.82%); + --ld-col-rg-010: hsl(140.00deg 100.00% 98.24%); + --ld-col-rg-050: hsl(142.76deg 100.00% 94.31%); + --ld-col-rg-100: hsl(148.09deg 55.29% 83.33%); + --ld-col-rg-200: hsl(150.48deg 44.68% 72.35%); + --ld-col-rg-300: hsl(151.11deg 41.12% 61.37%); + --ld-col-rg-400: hsl(152.45deg 38.58% 50.20%); + --ld-col-rg-500: hsl(152.59deg 58.59% 38.82%); --ld-col-rg-600: hsl(153.33deg 98.54% 26.86%); - --ld-col-rg-700: hsl(153.27deg 98.06% 20.20%); - --ld-col-rg-800: hsl(153.91deg 100.00% 13.53%); - --ld-col-rg-900: hsl(153.85deg 100.00% 7.65%); + --ld-col-rg-700: hsl(154.55deg 96.12% 20.20%); + --ld-col-rg-800: hsl(157.61deg 97.10% 13.53%); + --ld-col-rg-900: hsl(164.21deg 100.00% 7.45%); --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 26.86% / 0.2); --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 26.86% / 0.1); --ld-col-rg: hsl(153.33deg 98.54% 26.86%); - --ld-col-rp-010: hsl(266.67deg 100.00% 98.24%); - --ld-col-rp-050: hsl(262.00deg 100.00% 94.12%); - --ld-col-rp-100: hsl(261.54deg 53.42% 85.69%); - --ld-col-rp-200: hsl(260.82deg 42.61% 77.45%); - --ld-col-rp-300: hsl(259.66deg 37.18% 69.41%); - --ld-col-rp-400: hsl(259.41deg 34.69% 61.57%); - --ld-col-rp-500: hsl(259.48deg 32.49% 53.53%); - --ld-col-rp-600: hsl(259.53deg 36.75% 45.88%); + --ld-col-rp-010: hsl(253.33deg 100.00% 98.24%); + --ld-col-rp-050: hsl(248.00deg 100.00% 94.12%); + --ld-col-rp-100: hsl(252.00deg 55.56% 85.88%); + --ld-col-rp-200: hsl(254.69deg 42.61% 77.45%); + --ld-col-rp-300: hsl(255.52deg 37.18% 69.41%); + --ld-col-rp-400: hsl(256.76deg 34.69% 61.57%); + --ld-col-rp-500: hsl(257.92deg 32.49% 53.53%); + --ld-col-rp-600: hsl(258.84deg 36.75% 45.88%); --ld-col-rp-700: hsl(258.95deg 48.72% 38.24%); - --ld-col-rp-800: hsl(258.26deg 48.25% 28.04%); - --ld-col-rp-900: hsl(258.67deg 48.39% 18.24%); + --ld-col-rp-800: hsl(262.06deg 48.57% 27.45%); + --ld-col-rp-900: hsl(268.57deg 47.73% 17.25%); --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 38.24% / 0.2); --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 38.24% / 0.1); --ld-col-rp: hsl(258.95deg 48.72% 38.24%); - --ld-col-rr-010: hsl(340.00deg 100.00% 98.24%); - --ld-col-rr-050: hsl(347.59deg 100.00% 94.31%); - --ld-col-rr-100: hsl(346.15deg 89.66% 88.63%); - --ld-col-rr-200: hsl(345.60deg 84.27% 82.55%); - --ld-col-rr-300: hsl(345.60deg 83.33% 76.47%); - --ld-col-rr-400: hsl(344.88deg 81.94% 69.61%); - --ld-col-rr-500: hsl(345.38deg 80.41% 61.96%); + --ld-col-rr-010: hsl(326.67deg 100.00% 98.24%); + --ld-col-rr-050: hsl(337.24deg 100.00% 94.31%); + --ld-col-rr-100: hsl(341.54deg 89.66% 88.63%); + --ld-col-rr-200: hsl(343.20deg 84.27% 82.55%); + --ld-col-rr-300: hsl(343.80deg 83.33% 76.47%); + --ld-col-rr-400: hsl(343.94deg 81.94% 69.61%); + --ld-col-rr-500: hsl(344.62deg 80.41% 61.96%); --ld-col-rr-600: hsl(345.00deg 80.00% 50.98%); - --ld-col-rr-700: hsl(345.41deg 75.51% 38.43%); - --ld-col-rr-800: hsl(345.15deg 74.81% 26.47%); - --ld-col-rr-900: hsl(344.75deg 76.62% 15.10%); + --ld-col-rr-700: hsl(346.71deg 75.63% 38.63%); + --ld-col-rr-800: hsl(349.41deg 75.00% 26.67%); + --ld-col-rr-900: hsl(355.00deg 76.92% 15.29%); --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 50.98% / 0.2); --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 50.98% / 0.1); --ld-col-rr: hsl(345.00deg 80.00% 50.98%); - --ld-col-sb-010: hsl(165.00deg 100.00% 98.43%); + --ld-col-sb-010: hsl(150.00deg 100.00% 98.43%); --ld-col-sb-050: hsl(175.38deg 44.83% 71.57%); - --ld-col-sb-100: hsl(174.92deg 32.24% 64.12%); - --ld-col-sb-200: hsl(175.38deg 23.64% 56.86%); - --ld-col-sb-300: hsl(174.78deg 18.11% 49.80%); - --ld-col-sb-400: hsl(175.38deg 17.81% 42.94%); - --ld-col-sb-500: hsl(174.55deg 17.84% 36.27%); - --ld-col-sb-600: hsl(175.56deg 17.88% 29.61%); - --ld-col-sb-700: hsl(174.29deg 17.65% 23.33%); - --ld-col-sb-800: hsl(176.25deg 18.18% 17.25%); - --ld-col-sb-900: hsl(174.55deg 18.64% 11.57%); + --ld-col-sb-100: hsl(174.83deg 31.87% 64.31%); + --ld-col-sb-200: hsl(175.29deg 23.29% 57.06%); + --ld-col-sb-300: hsl(175.91deg 17.32% 49.80%); + --ld-col-sb-400: hsl(176.84deg 17.43% 42.75%); + --ld-col-sb-500: hsl(178.13deg 17.39% 36.08%); + --ld-col-sb-600: hsl(180.00deg 16.56% 29.61%); + --ld-col-sb-700: hsl(180.00deg 15.97% 23.33%); + --ld-col-sb-800: hsl(184.00deg 16.85% 17.45%); + --ld-col-sb-900: hsl(186.00deg 16.67% 11.76%); --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 71.57% / 0.2); --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 71.57% / 0.1); --ld-col-sb: hsl(175.38deg 44.83% 71.57%); - --ld-col-sg-010: hsl(93.33deg 100.00% 98.24%); + --ld-col-sg-010: hsl(86.67deg 100.00% 98.24%); --ld-col-sg-050: hsl(94.29deg 50.00% 72.55%); --ld-col-sg-100: hsl(94.29deg 35.20% 64.90%); - --ld-col-sg-200: hsl(94.29deg 25.93% 57.65%); - --ld-col-sg-300: hsl(94.29deg 19.37% 50.39%); + --ld-col-sg-200: hsl(95.36deg 25.93% 57.65%); + --ld-col-sg-300: hsl(95.51deg 19.37% 50.39%); --ld-col-sg-400: hsl(95.12deg 18.55% 43.33%); - --ld-col-sg-500: hsl(95.29deg 18.28% 36.47%); - --ld-col-sg-600: hsl(94.29deg 18.42% 29.80%); - --ld-col-sg-700: hsl(95.45deg 18.33% 23.53%); + --ld-col-sg-500: hsl(97.06deg 18.28% 36.47%); + --ld-col-sg-600: hsl(96.43deg 18.42% 29.80%); + --ld-col-sg-700: hsl(98.18deg 18.33% 23.53%); --ld-col-sg-800: hsl(98.82deg 19.10% 17.45%); - --ld-col-sg-900: hsl(98.18deg 18.64% 11.57%); + --ld-col-sg-900: hsl(103.64deg 18.64% 11.57%); --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 72.55% / 0.2); --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 72.55% / 0.1); --ld-col-sg: hsl(94.29deg 50.00% 72.55%); - --ld-col-sp-010: hsl(340.00deg 100.00% 98.24%); + --ld-col-sp-010: hsl(320.00deg 100.00% 98.24%); --ld-col-sp-050: hsl(340.00deg 33.33% 82.35%); --ld-col-sp-100: hsl(340.00deg 20.30% 73.92%); --ld-col-sp-200: hsl(340.00deg 13.64% 65.49%); --ld-col-sp-300: hsl(342.00deg 9.17% 57.25%); - --ld-col-sp-400: hsl(338.82deg 6.77% 49.22%); + --ld-col-sp-400: hsl(342.35deg 6.77% 49.22%); --ld-col-sp-500: hsl(342.86deg 6.60% 41.57%); - --ld-col-sp-600: hsl(340.00deg 6.90% 34.12%); - --ld-col-sp-700: hsl(340.00deg 6.57% 26.86%); - --ld-col-sp-800: hsl(350.00deg 5.88% 20.00%); - --ld-col-sp-900: hsl(345.00deg 5.88% 13.33%); + --ld-col-sp-600: hsl(345.00deg 6.90% 34.12%); + --ld-col-sp-700: hsl(346.67deg 6.57% 26.86%); + --ld-col-sp-800: hsl(0.00deg 5.88% 20.00%); + --ld-col-sp-900: hsl(0.00deg 5.88% 13.33%); --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 82.35% / 0.2); --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 82.35% / 0.1); --ld-col-sp: hsl(340.00deg 33.33% 82.35%); - --ld-col-sy-010: hsl(33.33deg 100.00% 98.24%); + --ld-col-sy-010: hsl(13.33deg 100.00% 98.24%); --ld-col-sy-050: hsl(30.00deg 100.00% 86.27%); --ld-col-sy-100: hsl(30.48deg 53.85% 77.06%); --ld-col-sy-200: hsl(30.55deg 33.74% 68.04%); --ld-col-sy-300: hsl(30.00deg 23.08% 59.22%); - --ld-col-sy-400: hsl(30.73deg 16.33% 50.78%); - --ld-col-sy-500: hsl(29.14deg 16.13% 42.55%); - --ld-col-sy-600: hsl(30.00deg 15.91% 34.51%); - --ld-col-sy-700: hsl(28.57deg 15.33% 26.86%); - --ld-col-sy-800: hsl(32.00deg 15.15% 19.41%); - --ld-col-sy-900: hsl(30.00deg 15.63% 12.55%); + --ld-col-sy-400: hsl(31.50deg 15.87% 50.59%); + --ld-col-sy-500: hsl(30.00deg 15.74% 42.35%); + --ld-col-sy-600: hsl(32.14deg 16.09% 34.12%); + --ld-col-sy-700: hsl(31.43deg 15.56% 26.47%); + --ld-col-sy-800: hsl(36.00deg 15.46% 19.02%); + --ld-col-sy-900: hsl(36.00deg 16.13% 12.16%); --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 86.27% / 0.2); --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 86.27% / 0.1); --ld-col-sy: hsl(30.00deg 100.00% 86.27%); --ld-col-vc-010: hsl(180.00deg 100.00% 98.24%); - --ld-col-vc-050: hsl(186.21deg 100.00% 94.31%); - --ld-col-vc-100: hsl(185.08deg 71.08% 83.73%); - --ld-col-vc-200: hsl(185.27deg 65.47% 72.75%); - --ld-col-vc-300: hsl(185.76deg 63.45% 61.37%); + --ld-col-vc-050: hsl(173.79deg 100.00% 94.31%); + --ld-col-vc-100: hsl(181.05deg 67.06% 83.33%); + --ld-col-vc-200: hsl(184.00deg 64.29% 72.55%); + --ld-col-vc-300: hsl(184.84deg 62.63% 61.18%); --ld-col-vc-400: hsl(185.63deg 64.00% 49.02%); - --ld-col-vc-500: hsl(185.95deg 63.29% 40.59%); - --ld-col-vc-600: hsl(185.29deg 62.20% 32.16%); - --ld-col-vc-700: hsl(185.53deg 61.29% 24.31%); - --ld-col-vc-800: hsl(184.71deg 60.00% 16.67%); - --ld-col-vc-900: hsl(184.00deg 62.50% 9.41%); + --ld-col-vc-500: hsl(186.41deg 62.68% 40.98%); + --ld-col-vc-600: hsl(186.92deg 61.90% 32.94%); + --ld-col-vc-700: hsl(188.35deg 61.24% 25.29%); + --ld-col-vc-800: hsl(191.79deg 60.87% 18.04%); + --ld-col-vc-900: hsl(195.43deg 63.64% 10.78%); --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 49.02% / 0.2); --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 49.02% / 0.1); --ld-col-vc: hsl(185.63deg 64.00% 49.02%); - --ld-col-vg-010: hsl(86.67deg 100.00% 98.24%); - --ld-col-vg-050: hsl(78.00deg 100.00% 94.12%); - --ld-col-vg-100: hsl(79.35deg 65.96% 81.57%); - --ld-col-vg-200: hsl(79.35deg 58.49% 68.82%); + --ld-col-vg-010: hsl(60.00deg 100.00% 98.24%); + --ld-col-vg-050: hsl(68.00deg 100.00% 94.12%); + --ld-col-vg-100: hsl(75.48deg 65.96% 81.57%); + --ld-col-vg-200: hsl(78.06deg 58.49% 68.82%); --ld-col-vg-300: hsl(79.20deg 55.56% 55.88%); - --ld-col-vg-400: hsl(79.25deg 43.80% 47.45%); - --ld-col-vg-500: hsl(79.53deg 43.00% 39.22%); - --ld-col-vg-600: hsl(79.41deg 42.50% 31.37%); - --ld-col-vg-700: hsl(80.00deg 42.15% 23.73%); - --ld-col-vg-800: hsl(80.57deg 41.18% 16.67%); - --ld-col-vg-900: hsl(80.00deg 42.86% 9.61%); + --ld-col-vg-400: hsl(79.81deg 43.80% 47.45%); + --ld-col-vg-500: hsl(80.69deg 43.28% 39.41%); + --ld-col-vg-600: hsl(81.74deg 42.86% 31.57%); + --ld-col-vg-700: hsl(83.08deg 42.62% 23.92%); + --ld-col-vg-800: hsl(86.67deg 41.86% 16.86%); + --ld-col-vg-900: hsl(90.00deg 44.00% 9.80%); --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 55.88% / 0.2); --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 55.88% / 0.1); --ld-col-vg: hsl(79.20deg 55.56% 55.88%); - --ld-col-vm-010: hsl(326.67deg 100.00% 98.24%); - --ld-col-vm-050: hsl(328.00deg 100.00% 94.12%); - --ld-col-vm-100: hsl(329.45deg 90.16% 88.04%); - --ld-col-vm-200: hsl(328.89deg 85.26% 81.37%); - --ld-col-vm-300: hsl(328.89deg 83.08% 74.51%); - --ld-col-vm-400: hsl(329.13deg 82.14% 67.06%); + --ld-col-vm-010: hsl(320.00deg 100.00% 98.24%); + --ld-col-vm-050: hsl(318.00deg 100.00% 94.12%); + --ld-col-vm-100: hsl(325.09deg 90.16% 88.04%); + --ld-col-vm-200: hsl(326.67deg 85.26% 81.37%); + --ld-col-vm-300: hsl(327.78deg 83.08% 74.51%); + --ld-col-vm-400: hsl(328.26deg 82.14% 67.06%); --ld-col-vm-500: hsl(329.14deg 81.40% 57.84%); - --ld-col-vm-600: hsl(329.35deg 58.65% 46.47%); - --ld-col-vm-700: hsl(329.71deg 58.01% 35.49%); - --ld-col-vm-800: hsl(330.00deg 57.81% 25.10%); - --ld-col-vm-900: hsl(329.33deg 58.44% 15.10%); + --ld-col-vm-600: hsl(330.22deg 58.65% 46.47%); + --ld-col-vm-700: hsl(332.26deg 58.24% 35.69%); + --ld-col-vm-800: hsl(334.05deg 57.81% 25.10%); + --ld-col-vm-900: hsl(339.13deg 58.97% 15.29%); --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 57.84% / 0.2); --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 57.84% / 0.1); --ld-col-vm: hsl(329.14deg 81.40% 57.84%); - --ld-col-vy-010: hsl(46.67deg 100.00% 98.24%); - --ld-col-vy-050: hsl(43.45deg 100.00% 94.31%); - --ld-col-vy-100: hsl(43.93deg 100.00% 78.04%); + --ld-col-vy-010: hsl(26.67deg 100.00% 98.24%); + --ld-col-vy-050: hsl(33.10deg 100.00% 94.31%); + --ld-col-vy-100: hsl(42.16deg 100.00% 78.24%); --ld-col-vy-200: hsl(43.90deg 100.00% 59.80%); - --ld-col-vy-300: hsl(43.64deg 72.13% 52.16%); - --ld-col-vy-400: hsl(43.49deg 65.64% 44.51%); - --ld-col-vy-500: hsl(43.28deg 64.21% 37.25%); - --ld-col-vy-600: hsl(43.13deg 62.34% 30.20%); - --ld-col-vy-700: hsl(43.33deg 61.02% 23.14%); - --ld-col-vy-800: hsl(43.20deg 59.52% 16.47%); - --ld-col-vy-900: hsl(43.64deg 67.35% 9.61%); + --ld-col-vy-300: hsl(44.23deg 71.43% 51.96%); + --ld-col-vy-400: hsl(44.49deg 65.33% 44.12%); + --ld-col-vy-500: hsl(44.87deg 63.64% 36.67%); + --ld-col-vy-600: hsl(45.81deg 62.42% 29.22%); + --ld-col-vy-700: hsl(46.96deg 61.06% 22.16%); + --ld-col-vy-800: hsl(49.57deg 58.97% 15.29%); + --ld-col-vy-900: hsl(53.79deg 67.44% 8.43%); --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 59.80% / 0.2); --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 59.80% / 0.1); --ld-col-vy: hsl(43.90deg 100.00% 59.80%); diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index bcfe48c73c..81b23b95dc 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -220,159 +220,159 @@ "neutral-alpha-low": "hsl(220.00deg 50.00% 12.00% / 0.2)", "neutral-alpha-lowest": "hsl(220.00deg 50.00% 12.00% / 0.1)", "rr-600/default": "hsl(345.00deg 80.00% 50.98%)", - "rr-010": "hsl(340.00deg 100.00% 98.24%)", - "rr-050": "hsl(347.59deg 100.00% 94.31%)", - "rr-100": "hsl(346.15deg 89.66% 88.63%)", - "rr-200": "hsl(345.60deg 84.27% 82.55%)", - "rr-300": "hsl(345.60deg 83.33% 76.47%)", - "rr-400": "hsl(344.88deg 81.94% 69.61%)", - "rr-500": "hsl(345.38deg 80.41% 61.96%)", - "rr-700": "hsl(345.41deg 75.51% 38.43%)", - "rr-800": "hsl(345.15deg 74.81% 26.47%)", - "rr-900": "hsl(344.75deg 76.62% 15.10%)", + "rr-010": "hsl(326.67deg 100.00% 98.24%)", + "rr-050": "hsl(337.24deg 100.00% 94.31%)", + "rr-100": "hsl(341.54deg 89.66% 88.63%)", + "rr-200": "hsl(343.20deg 84.27% 82.55%)", + "rr-300": "hsl(343.80deg 83.33% 76.47%)", + "rr-400": "hsl(343.94deg 81.94% 69.61%)", + "rr-500": "hsl(344.62deg 80.41% 61.96%)", + "rr-700": "hsl(346.71deg 75.63% 38.63%)", + "rr-800": "hsl(349.41deg 75.00% 26.67%)", + "rr-900": "hsl(355.00deg 76.92% 15.29%)", "rr-alpha-low": "hsl(345.00deg 80.00% 50.98% / 0.2)", "rr-alpha-lowest": "hsl(345.00deg 80.00% 50.98% / 0.1)", "rb-600/default": "hsl(206.25deg 84.21% 37.25%)", - "rb-010": "hsl(206.67deg 100.00% 98.24%)", - "rb-050": "hsl(206.90deg 100.00% 94.31%)", - "rb-100": "hsl(207.06deg 66.23% 84.90%)", - "rb-200": "hsl(205.83deg 57.14% 75.29%)", - "rb-300": "hsl(206.17deg 54.02% 65.88%)", - "rb-400": "hsl(206.61deg 52.04% 56.67%)", + "rb-010": "hsl(186.67deg 100.00% 98.24%)", + "rb-050": "hsl(196.55deg 100.00% 94.31%)", + "rb-100": "hsl(202.35deg 66.23% 84.90%)", + "rb-200": "hsl(203.33deg 57.14% 75.29%)", + "rb-300": "hsl(204.89deg 54.02% 65.88%)", + "rb-400": "hsl(205.34deg 52.25% 56.47%)", "rb-500": "hsl(206.09deg 57.50% 47.06%)", - "rb-700": "hsl(206.28deg 83.45% 28.43%)", - "rb-800": "hsl(206.82deg 82.52% 20.20%)", - "rb-900": "hsl(206.54deg 83.87% 12.16%)", + "rb-700": "hsl(208.57deg 82.89% 29.80%)", + "rb-800": "hsl(211.28deg 82.46% 22.35%)", + "rb-900": "hsl(216.00deg 84.42% 15.10%)", "rb-alpha-low": "hsl(206.25deg 84.21% 37.25% / 0.2)", "rb-alpha-lowest": "hsl(206.25deg 84.21% 37.25% / 0.1)", "vy-200/default": "hsl(43.90deg 100.00% 59.80%)", - "vy-010": "hsl(46.67deg 100.00% 98.24%)", - "vy-050": "hsl(43.45deg 100.00% 94.31%)", - "vy-100": "hsl(43.93deg 100.00% 78.04%)", - "vy-300": "hsl(43.64deg 72.13% 52.16%)", - "vy-400": "hsl(43.49deg 65.64% 44.51%)", - "vy-500": "hsl(43.28deg 64.21% 37.25%)", - "vy-600": "hsl(43.13deg 62.34% 30.20%)", - "vy-700": "hsl(43.33deg 61.02% 23.14%)", - "vy-800": "hsl(43.20deg 59.52% 16.47%)", - "vy-900": "hsl(43.64deg 67.35% 9.61%)", + "vy-010": "hsl(26.67deg 100.00% 98.24%)", + "vy-050": "hsl(33.10deg 100.00% 94.31%)", + "vy-100": "hsl(42.16deg 100.00% 78.24%)", + "vy-300": "hsl(44.23deg 71.43% 51.96%)", + "vy-400": "hsl(44.49deg 65.33% 44.12%)", + "vy-500": "hsl(44.87deg 63.64% 36.67%)", + "vy-600": "hsl(45.81deg 62.42% 29.22%)", + "vy-700": "hsl(46.96deg 61.06% 22.16%)", + "vy-800": "hsl(49.57deg 58.97% 15.29%)", + "vy-900": "hsl(53.79deg 67.44% 8.43%)", "vy-alpha-low": "hsl(43.90deg 100.00% 59.80% / 0.2)", "vy-alpha-lowest": "hsl(43.90deg 100.00% 59.80% / 0.1)", "rp-700/default": "hsl(258.95deg 48.72% 38.24%)", - "rp-010": "hsl(266.67deg 100.00% 98.24%)", - "rp-050": "hsl(262.00deg 100.00% 94.12%)", - "rp-100": "hsl(261.54deg 53.42% 85.69%)", - "rp-200": "hsl(260.82deg 42.61% 77.45%)", - "rp-300": "hsl(259.66deg 37.18% 69.41%)", - "rp-400": "hsl(259.41deg 34.69% 61.57%)", - "rp-500": "hsl(259.48deg 32.49% 53.53%)", - "rp-600": "hsl(259.53deg 36.75% 45.88%)", - "rp-800": "hsl(258.26deg 48.25% 28.04%)", - "rp-900": "hsl(258.67deg 48.39% 18.24%)", + "rp-010": "hsl(253.33deg 100.00% 98.24%)", + "rp-050": "hsl(248.00deg 100.00% 94.12%)", + "rp-100": "hsl(252.00deg 55.56% 85.88%)", + "rp-200": "hsl(254.69deg 42.61% 77.45%)", + "rp-300": "hsl(255.52deg 37.18% 69.41%)", + "rp-400": "hsl(256.76deg 34.69% 61.57%)", + "rp-500": "hsl(257.92deg 32.49% 53.53%)", + "rp-600": "hsl(258.84deg 36.75% 45.88%)", + "rp-800": "hsl(262.06deg 48.57% 27.45%)", + "rp-900": "hsl(268.57deg 47.73% 17.25%)", "rp-alpha-low": "hsl(258.95deg 48.72% 38.24% / 0.2)", "rp-alpha-lowest": "hsl(258.95deg 48.72% 38.24% / 0.1)", "vg-300/default": "hsl(79.20deg 55.56% 55.88%)", - "vg-010": "hsl(86.67deg 100.00% 98.24%)", - "vg-050": "hsl(78.00deg 100.00% 94.12%)", - "vg-100": "hsl(79.35deg 65.96% 81.57%)", - "vg-200": "hsl(79.35deg 58.49% 68.82%)", - "vg-400": "hsl(79.25deg 43.80% 47.45%)", - "vg-500": "hsl(79.53deg 43.00% 39.22%)", - "vg-600": "hsl(79.41deg 42.50% 31.37%)", - "vg-700": "hsl(80.00deg 42.15% 23.73%)", - "vg-800": "hsl(80.57deg 41.18% 16.67%)", - "vg-900": "hsl(80.00deg 42.86% 9.61%)", + "vg-010": "hsl(60.00deg 100.00% 98.24%)", + "vg-050": "hsl(68.00deg 100.00% 94.12%)", + "vg-100": "hsl(75.48deg 65.96% 81.57%)", + "vg-200": "hsl(78.06deg 58.49% 68.82%)", + "vg-400": "hsl(79.81deg 43.80% 47.45%)", + "vg-500": "hsl(80.69deg 43.28% 39.41%)", + "vg-600": "hsl(81.74deg 42.86% 31.57%)", + "vg-700": "hsl(83.08deg 42.62% 23.92%)", + "vg-800": "hsl(86.67deg 41.86% 16.86%)", + "vg-900": "hsl(90.00deg 44.00% 9.80%)", "vg-alpha-low": "hsl(79.20deg 55.56% 55.88% / 0.2)", "vg-alpha-lowest": "hsl(79.20deg 55.56% 55.88% / 0.1)", "vm-500/default": "hsl(329.14deg 81.40% 57.84%)", - "vm-010": "hsl(326.67deg 100.00% 98.24%)", - "vm-050": "hsl(328.00deg 100.00% 94.12%)", - "vm-100": "hsl(329.45deg 90.16% 88.04%)", - "vm-200": "hsl(328.89deg 85.26% 81.37%)", - "vm-300": "hsl(328.89deg 83.08% 74.51%)", - "vm-400": "hsl(329.13deg 82.14% 67.06%)", - "vm-600": "hsl(329.35deg 58.65% 46.47%)", - "vm-700": "hsl(329.71deg 58.01% 35.49%)", - "vm-800": "hsl(330.00deg 57.81% 25.10%)", - "vm-900": "hsl(329.33deg 58.44% 15.10%)", + "vm-010": "hsl(320.00deg 100.00% 98.24%)", + "vm-050": "hsl(318.00deg 100.00% 94.12%)", + "vm-100": "hsl(325.09deg 90.16% 88.04%)", + "vm-200": "hsl(326.67deg 85.26% 81.37%)", + "vm-300": "hsl(327.78deg 83.08% 74.51%)", + "vm-400": "hsl(328.26deg 82.14% 67.06%)", + "vm-600": "hsl(330.22deg 58.65% 46.47%)", + "vm-700": "hsl(332.26deg 58.24% 35.69%)", + "vm-800": "hsl(334.05deg 57.81% 25.10%)", + "vm-900": "hsl(339.13deg 58.97% 15.29%)", "vm-alpha-low": "hsl(329.14deg 81.40% 57.84% / 0.2)", "vm-alpha-lowest": "hsl(329.14deg 81.40% 57.84% / 0.1)", "rg-600/default": "hsl(153.33deg 98.54% 26.86%)", - "rg-010": "hsl(153.33deg 100.00% 98.24%)", - "rg-050": "hsl(153.10deg 100.00% 94.31%)", - "rg-100": "hsl(153.19deg 55.29% 83.33%)", - "rg-200": "hsl(153.33deg 44.68% 72.35%)", - "rg-300": "hsl(153.33deg 41.12% 61.37%)", - "rg-400": "hsl(153.06deg 38.58% 50.20%)", - "rg-500": "hsl(153.10deg 58.59% 38.82%)", - "rg-700": "hsl(153.27deg 98.06% 20.20%)", - "rg-800": "hsl(153.91deg 100.00% 13.53%)", - "rg-900": "hsl(153.85deg 100.00% 7.65%)", + "rg-010": "hsl(140.00deg 100.00% 98.24%)", + "rg-050": "hsl(142.76deg 100.00% 94.31%)", + "rg-100": "hsl(148.09deg 55.29% 83.33%)", + "rg-200": "hsl(150.48deg 44.68% 72.35%)", + "rg-300": "hsl(151.11deg 41.12% 61.37%)", + "rg-400": "hsl(152.45deg 38.58% 50.20%)", + "rg-500": "hsl(152.59deg 58.59% 38.82%)", + "rg-700": "hsl(154.55deg 96.12% 20.20%)", + "rg-800": "hsl(157.61deg 97.10% 13.53%)", + "rg-900": "hsl(164.21deg 100.00% 7.45%)", "rg-alpha-low": "hsl(153.33deg 98.54% 26.86% / 0.2)", "rg-alpha-lowest": "hsl(153.33deg 98.54% 26.86% / 0.1)", "vc-400/default": "hsl(185.63deg 64.00% 49.02%)", "vc-010": "hsl(180.00deg 100.00% 98.24%)", - "vc-050": "hsl(186.21deg 100.00% 94.31%)", - "vc-100": "hsl(185.08deg 71.08% 83.73%)", - "vc-200": "hsl(185.27deg 65.47% 72.75%)", - "vc-300": "hsl(185.76deg 63.45% 61.37%)", - "vc-500": "hsl(185.95deg 63.29% 40.59%)", - "vc-600": "hsl(185.29deg 62.20% 32.16%)", - "vc-700": "hsl(185.53deg 61.29% 24.31%)", - "vc-800": "hsl(184.71deg 60.00% 16.67%)", - "vc-900": "hsl(184.00deg 62.50% 9.41%)", + "vc-050": "hsl(173.79deg 100.00% 94.31%)", + "vc-100": "hsl(181.05deg 67.06% 83.33%)", + "vc-200": "hsl(184.00deg 64.29% 72.55%)", + "vc-300": "hsl(184.84deg 62.63% 61.18%)", + "vc-500": "hsl(186.41deg 62.68% 40.98%)", + "vc-600": "hsl(186.92deg 61.90% 32.94%)", + "vc-700": "hsl(188.35deg 61.24% 25.29%)", + "vc-800": "hsl(191.79deg 60.87% 18.04%)", + "vc-900": "hsl(195.43deg 63.64% 10.78%)", "vc-alpha-low": "hsl(185.63deg 64.00% 49.02% / 0.2)", "vc-alpha-lowest": "hsl(185.63deg 64.00% 49.02% / 0.1)", "sg-050/default": "hsl(94.29deg 50.00% 72.55%)", - "sg-010": "hsl(93.33deg 100.00% 98.24%)", + "sg-010": "hsl(86.67deg 100.00% 98.24%)", "sg-100": "hsl(94.29deg 35.20% 64.90%)", - "sg-200": "hsl(94.29deg 25.93% 57.65%)", - "sg-300": "hsl(94.29deg 19.37% 50.39%)", + "sg-200": "hsl(95.36deg 25.93% 57.65%)", + "sg-300": "hsl(95.51deg 19.37% 50.39%)", "sg-400": "hsl(95.12deg 18.55% 43.33%)", - "sg-500": "hsl(95.29deg 18.28% 36.47%)", - "sg-600": "hsl(94.29deg 18.42% 29.80%)", - "sg-700": "hsl(95.45deg 18.33% 23.53%)", + "sg-500": "hsl(97.06deg 18.28% 36.47%)", + "sg-600": "hsl(96.43deg 18.42% 29.80%)", + "sg-700": "hsl(98.18deg 18.33% 23.53%)", "sg-800": "hsl(98.82deg 19.10% 17.45%)", - "sg-900": "hsl(98.18deg 18.64% 11.57%)", + "sg-900": "hsl(103.64deg 18.64% 11.57%)", "sg-alpha-low": "hsl(94.29deg 50.00% 72.55% / 0.2)", "sg-alpha-lowest": "hsl(94.29deg 50.00% 72.55% / 0.1)", "sy-050/default": "hsl(30.00deg 100.00% 86.27%)", - "sy-010": "hsl(33.33deg 100.00% 98.24%)", + "sy-010": "hsl(13.33deg 100.00% 98.24%)", "sy-100": "hsl(30.48deg 53.85% 77.06%)", "sy-200": "hsl(30.55deg 33.74% 68.04%)", "sy-300": "hsl(30.00deg 23.08% 59.22%)", - "sy-400": "hsl(30.73deg 16.33% 50.78%)", - "sy-500": "hsl(29.14deg 16.13% 42.55%)", - "sy-600": "hsl(30.00deg 15.91% 34.51%)", - "sy-700": "hsl(28.57deg 15.33% 26.86%)", - "sy-800": "hsl(32.00deg 15.15% 19.41%)", - "sy-900": "hsl(30.00deg 15.63% 12.55%)", + "sy-400": "hsl(31.50deg 15.87% 50.59%)", + "sy-500": "hsl(30.00deg 15.74% 42.35%)", + "sy-600": "hsl(32.14deg 16.09% 34.12%)", + "sy-700": "hsl(31.43deg 15.56% 26.47%)", + "sy-800": "hsl(36.00deg 15.46% 19.02%)", + "sy-900": "hsl(36.00deg 16.13% 12.16%)", "sy-alpha-low": "hsl(30.00deg 100.00% 86.27% / 0.2)", "sy-alpha-lowest": "hsl(30.00deg 100.00% 86.27% / 0.1)", "sb-050/default": "hsl(175.38deg 44.83% 71.57%)", - "sb-010": "hsl(165.00deg 100.00% 98.43%)", - "sb-100": "hsl(174.92deg 32.24% 64.12%)", - "sb-200": "hsl(175.38deg 23.64% 56.86%)", - "sb-300": "hsl(174.78deg 18.11% 49.80%)", - "sb-400": "hsl(175.38deg 17.81% 42.94%)", - "sb-500": "hsl(174.55deg 17.84% 36.27%)", - "sb-600": "hsl(175.56deg 17.88% 29.61%)", - "sb-700": "hsl(174.29deg 17.65% 23.33%)", - "sb-800": "hsl(176.25deg 18.18% 17.25%)", - "sb-900": "hsl(174.55deg 18.64% 11.57%)", + "sb-010": "hsl(150.00deg 100.00% 98.43%)", + "sb-100": "hsl(174.83deg 31.87% 64.31%)", + "sb-200": "hsl(175.29deg 23.29% 57.06%)", + "sb-300": "hsl(175.91deg 17.32% 49.80%)", + "sb-400": "hsl(176.84deg 17.43% 42.75%)", + "sb-500": "hsl(178.13deg 17.39% 36.08%)", + "sb-600": "hsl(180.00deg 16.56% 29.61%)", + "sb-700": "hsl(180.00deg 15.97% 23.33%)", + "sb-800": "hsl(184.00deg 16.85% 17.45%)", + "sb-900": "hsl(186.00deg 16.67% 11.76%)", "sb-alpha-low": "hsl(175.38deg 44.83% 71.57% / 0.2)", "sb-alpha-lowest": "hsl(175.38deg 44.83% 71.57% / 0.1)", "sp-050/default": "hsl(340.00deg 33.33% 82.35%)", - "sp-010": "hsl(340.00deg 100.00% 98.24%)", + "sp-010": "hsl(320.00deg 100.00% 98.24%)", "sp-100": "hsl(340.00deg 20.30% 73.92%)", "sp-200": "hsl(340.00deg 13.64% 65.49%)", "sp-300": "hsl(342.00deg 9.17% 57.25%)", - "sp-400": "hsl(338.82deg 6.77% 49.22%)", + "sp-400": "hsl(342.35deg 6.77% 49.22%)", "sp-500": "hsl(342.86deg 6.60% 41.57%)", - "sp-600": "hsl(340.00deg 6.90% 34.12%)", - "sp-700": "hsl(340.00deg 6.57% 26.86%)", - "sp-800": "hsl(350.00deg 5.88% 20.00%)", - "sp-900": "hsl(345.00deg 5.88% 13.33%)", + "sp-600": "hsl(345.00deg 6.90% 34.12%)", + "sp-700": "hsl(346.67deg 6.57% 26.86%)", + "sp-800": "hsl(0.00deg 5.88% 20.00%)", + "sp-900": "hsl(0.00deg 5.88% 13.33%)", "sp-alpha-low": "hsl(340.00deg 33.33% 82.35% / 0.2)", "sp-alpha-lowest": "hsl(340.00deg 33.33% 82.35% / 0.1)", "wht": "hsl(0.00deg 0.00% 100.00%)", From 740316c89d6745c374e87c7909b530c2b2e07548 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 15:35:14 +0200 Subject: [PATCH 12/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 36 +++++++++++++++++---- src/liquid/global/styles/colors/colors.css | 1 - src/liquid/global/styles/design-tokens.json | 3 +- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 2f72bbdec8..451a76b0ae 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -173,7 +173,7 @@ function parseColors(items, styles: { name: string; description: string }[]) { const isDefault = description === 'Default' const isNeutral = name.includes('/Neutral-900') - const isWhite = name.includes('/White') + const isWhite = name.includes('/White') && !rest.length if (!isDefault && !isNeutral && !isWhite) continue @@ -190,9 +190,6 @@ function parseColors(items, styles: { name: string; description: string }[]) { const r = parseFloat((item.fills[0].color.r * 255).toFixed(2)) const g = parseFloat((item.fills[0].color.g * 255).toFixed(2)) const b = parseFloat((item.fills[0].color.b * 255).toFixed(2)) - const a = parseFloat( - (((item.fills[0].opacity ?? 1) * 100) / 100).toFixed(2) - ) const color = chroma({ r, g, b }) const { h, s, l } = getHSLFromColor(color) @@ -201,9 +198,34 @@ function parseColors(items, styles: { name: string; description: string }[]) { const totalStepsToDark = totalSteps - defaultStep if (isWhite) { - colors[ - `${colorShortName}${rest.length ? '-' + rest.join('-') : ''}` - ] = `hsl(${h}deg ${s}% ${l}%${a === 1 ? '' : ' / ' + a})` + colors[colorShortName] = `hsl(${h}deg ${s}% ${l}%)` + const whiteGradients = [ + { + modifier: 'alpha-highest', + alpha: 0.8, + }, + { + modifier: 'alpha-high', + alpha: 0.7, + }, + { + modifier: 'alpha-medium', + alpha: 0.5, + }, + { + modifier: 'alpha-low', + alpha: 0.2, + }, + { + modifier: 'alpha-lowest', + alpha: 0.1, + }, + ] + for (const gradient of whiteGradients) { + colors[ + `${colorShortName}-${gradient.modifier}` + ] = `hsl(${h}deg ${s}% ${l}% / ${gradient.alpha})` + } continue } diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index 74022650eb..e8213a7aed 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -187,6 +187,5 @@ --ld-col-wht-alpha-low: hsl(0.00deg 0.00% 100.00% / 0.2); --ld-col-wht-alpha-lowest: hsl(0.00deg 0.00% 100.00% / 0.1); --ld-col-wht-alpha-medium: hsl(0.00deg 0.00% 100.00% / 0.5); - --ld-col-wht-alpha-none: hsl(0.00deg 0.00% 100.00% / 0); --ld-col-wht: hsl(0.00deg 0.00% 100.00%); } diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index 81b23b95dc..ca2f6e2cca 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -380,8 +380,7 @@ "wht-alpha-high": "hsl(0.00deg 0.00% 100.00% / 0.7)", "wht-alpha-medium": "hsl(0.00deg 0.00% 100.00% / 0.5)", "wht-alpha-low": "hsl(0.00deg 0.00% 100.00% / 0.2)", - "wht-alpha-lowest": "hsl(0.00deg 0.00% 100.00% / 0.1)", - "wht-alpha-none": "hsl(0.00deg 0.00% 100.00% / 0)" + "wht-alpha-lowest": "hsl(0.00deg 0.00% 100.00% / 0.1)" }, "typography": { "xh1": { From 970c05d49498afb3dd83d52fe46f34fa4466e752 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Mon, 27 Mar 2023 21:48:32 +0200 Subject: [PATCH 13/28] feat(dark-mode): squash me --- scripts/applyDesignTokens.ts | 69 +++++-- src/liquid/global/styles/colors/colors.css | 192 +++++++++++++++++++- src/liquid/global/styles/design-tokens.json | 177 ++++++++++++++++++ 3 files changed, 422 insertions(+), 16 deletions(-) diff --git a/scripts/applyDesignTokens.ts b/scripts/applyDesignTokens.ts index 451a76b0ae..b3e122605d 100644 --- a/scripts/applyDesignTokens.ts +++ b/scripts/applyDesignTokens.ts @@ -142,7 +142,16 @@ function parseShadows(items) { return shadows } -function parseColors(items, styles: { name: string; description: string }[]) { +function getLightness(lightness: string, isDark = false) { + if (!isDark) return lightness + return (100 - parseFloat(lightness)).toFixed(2) +} + +function parseColors( + items, + styles: { name: string; description: string }[], + isDark = false +) { const colors = {} function getKeyFromStep(step) { @@ -163,7 +172,7 @@ function parseColors(items, styles: { name: string; description: string }[]) { } if (item.children) { - Object.assign(colors, parseColors(item.children, styles)) + Object.assign(colors, parseColors(item.children, styles, isDark)) } else if (item.fills?.length && item.styles?.fill) { const style = styles[item.styles.fill] const { name, description } = style @@ -198,7 +207,10 @@ function parseColors(items, styles: { name: string; description: string }[]) { const totalStepsToDark = totalSteps - defaultStep if (isWhite) { - colors[colorShortName] = `hsl(${h}deg ${s}% ${l}%)` + colors[colorShortName] = `hsl(${h}deg ${s}% ${getLightness( + l, + isDark + )}%)` const whiteGradients = [ { modifier: 'alpha-highest', @@ -224,7 +236,9 @@ function parseColors(items, styles: { name: string; description: string }[]) { for (const gradient of whiteGradients) { colors[ `${colorShortName}-${gradient.modifier}` - ] = `hsl(${h}deg ${s}% ${l}% / ${gradient.alpha})` + ] = `hsl(${h}deg ${s}% ${getLightness(l, isDark)}% / ${ + gradient.alpha + })` } continue } @@ -232,7 +246,7 @@ function parseColors(items, styles: { name: string; description: string }[]) { // default colors[ `${colorShortName}-${getKeyFromStep(defaultStep)}/default` - ] = `hsl(${h}deg ${s}% ${l}%)` + ] = `hsl(${h}deg ${s}% ${getLightness(l, isDark)}%)` // to light const colorLightest = chroma({ r, g, b }) @@ -255,7 +269,7 @@ function parseColors(items, styles: { name: string; description: string }[]) { const { h, s, l } = getHSLFromColor(chroma(color)) colors[ `${colorShortName}-${getKeyFromStep(step)}` - ] = `hsl(${h}deg ${s}% ${l}%)` + ] = `hsl(${h}deg ${s}% ${getLightness(l, isDark)}%)` }) // to dark @@ -274,14 +288,20 @@ function parseColors(items, styles: { name: string; description: string }[]) { colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${ h || 0 }deg ${s}% ${l}%)` + colors[`${colorShortName}-${getKeyFromStep(step)}`] = `hsl(${ + h || 0 + }deg ${s}% ${getLightness(l, isDark)}%)` }) // TODO check if it is wiser to pick a color from the middle of the range // alpha - colors[`${colorShortName}-alpha-low`] = `hsl(${h}deg ${s}% ${l}% / 0.2)` + colors[`${colorShortName}-alpha-low`] = `hsl(${h}deg ${s}% ${getLightness( + l, + isDark + )}% / 0.2)` colors[ `${colorShortName}-alpha-lowest` - ] = `hsl(${h}deg ${s}% ${l}% / 0.1)` + ] = `hsl(${h}deg ${s}% ${getLightness(l, isDark)}% / 0.1)` } } @@ -394,6 +414,13 @@ async function getTokensFromFigma(figmaFileURL: string) { styles ), }, + colorsDark: { + ...parseColors( + figmaData.find((child) => child.name === 'Colors').children, + styles, + true + ), + }, typography: parseTypography( [ ...figmaData.find((child) => child.name === 'Headlines').children, @@ -442,12 +469,14 @@ function generateShadows(tokens) { ) } -function generateColors(colorTokens) { +function generateColors(colors, colorsDark) { const colorVariables = [] + const colorDarkVariables = [] // Basic colors - Object.keys(colorTokens).forEach((key) => { - const val = colorTokens[key] + Object.keys(colors).forEach((key) => { + const val = colors[key] + const valDark = colorsDark[key] if (key.includes('/default')) { const colorKey = key.split('/default')[0] const colorBaseName = key @@ -456,21 +485,31 @@ function generateColors(colorTokens) { .replace(/-$/, '') colorVariables.push(` --ld-col-${colorKey}: ${val};`) + colorDarkVariables.push(` --ld-col-${colorKey}: ${valDark};`) // prevents duplicate custom properties in cases like "sp/default" if (colorBaseName !== colorKey) { colorVariables.push(` --ld-col-${colorBaseName}: ${val};`) + colorDarkVariables.push(` --ld-col-${colorBaseName}: ${valDark};`) } } else { colorVariables.push(` --ld-col-${key}: ${val};`) + colorDarkVariables.push(` --ld-col-${key}: ${valDark};`) } }) return ensureWriteFile( join(stylesDir, 'colors/colors.css'), - ['/* autogenerated */', ':root {', ...colorVariables.sort(), '}', ''].join( - '\n' - ), + [ + '/* autogenerated */', + 'html:not(.ld-dark) {', + ...colorVariables.sort(), + '}', + 'html:is(.ld-dark) {', + ...colorDarkVariables.sort(), + '}', + '', + ].join('\n'), 'utf8' ) } @@ -596,7 +635,7 @@ function generateBorderRadii(tokens) { function generateCSSTokenFiles(tokenCollection) { return Promise.all([ generateShadows(tokenCollection.shadows), - generateColors(tokenCollection.colors), + generateColors(tokenCollection.colors, tokenCollection.colorsDark), generateSpacings(tokenCollection.spacings), generateTheming(tokenCollection.themes), generateTypography(tokenCollection.typography), diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css index e8213a7aed..fcf5434bb9 100644 --- a/src/liquid/global/styles/colors/colors.css +++ b/src/liquid/global/styles/colors/colors.css @@ -1,5 +1,5 @@ /* autogenerated */ -:root { +html:not(.ld-dark) { --ld-col-neutral-010: hsl(0.00deg 0.00% 98.24%); --ld-col-neutral-050: hsl(0.00deg 0.00% 94.51%); --ld-col-neutral-100: hsl(210.00deg 4.88% 83.92%); @@ -189,3 +189,193 @@ --ld-col-wht-alpha-medium: hsl(0.00deg 0.00% 100.00% / 0.5); --ld-col-wht: hsl(0.00deg 0.00% 100.00%); } +html:is(.ld-dark) { + --ld-col-neutral-010: hsl(0.00deg 0.00% 1.76%); + --ld-col-neutral-050: hsl(0.00deg 0.00% 5.49%); + --ld-col-neutral-100: hsl(210.00deg 4.88% 16.08%); + --ld-col-neutral-200: hsl(222.86deg 5.26% 26.08%); + --ld-col-neutral-300: hsl(218.18deg 6.01% 35.88%); + --ld-col-neutral-400: hsl(218.57deg 6.03% 45.49%); + --ld-col-neutral-500: hsl(221.05deg 8.23% 54.71%); + --ld-col-neutral-600: hsl(220.00deg 11.35% 63.73%); + --ld-col-neutral-700: hsl(220.00deg 16.90% 72.16%); + --ld-col-neutral-800: hsl(218.57deg 28.00% 80.39%); + --ld-col-neutral-900: hsl(220.00deg 50.00% 88.00%); + --ld-col-neutral-alpha-low: hsl(220.00deg 50.00% 88.00% / 0.2); + --ld-col-neutral-alpha-lowest: hsl(220.00deg 50.00% 88.00% / 0.1); + --ld-col-neutral: hsl(220.00deg 50.00% 88.00%); + --ld-col-rb-010: hsl(186.67deg 100.00% 1.76%); + --ld-col-rb-050: hsl(196.55deg 100.00% 5.69%); + --ld-col-rb-100: hsl(202.35deg 66.23% 15.10%); + --ld-col-rb-200: hsl(203.33deg 57.14% 24.71%); + --ld-col-rb-300: hsl(204.89deg 54.02% 34.12%); + --ld-col-rb-400: hsl(205.34deg 52.25% 43.53%); + --ld-col-rb-500: hsl(206.09deg 57.50% 52.94%); + --ld-col-rb-600: hsl(206.25deg 84.21% 62.75%); + --ld-col-rb-700: hsl(208.57deg 82.89% 70.20%); + --ld-col-rb-800: hsl(211.28deg 82.46% 77.65%); + --ld-col-rb-900: hsl(216.00deg 84.42% 84.90%); + --ld-col-rb-alpha-low: hsl(206.25deg 84.21% 62.75% / 0.2); + --ld-col-rb-alpha-lowest: hsl(206.25deg 84.21% 62.75% / 0.1); + --ld-col-rb: hsl(206.25deg 84.21% 62.75%); + --ld-col-rg-010: hsl(140.00deg 100.00% 1.76%); + --ld-col-rg-050: hsl(142.76deg 100.00% 5.69%); + --ld-col-rg-100: hsl(148.09deg 55.29% 16.67%); + --ld-col-rg-200: hsl(150.48deg 44.68% 27.65%); + --ld-col-rg-300: hsl(151.11deg 41.12% 38.63%); + --ld-col-rg-400: hsl(152.45deg 38.58% 49.80%); + --ld-col-rg-500: hsl(152.59deg 58.59% 61.18%); + --ld-col-rg-600: hsl(153.33deg 98.54% 73.14%); + --ld-col-rg-700: hsl(154.55deg 96.12% 79.80%); + --ld-col-rg-800: hsl(157.61deg 97.10% 86.47%); + --ld-col-rg-900: hsl(164.21deg 100.00% 92.55%); + --ld-col-rg-alpha-low: hsl(153.33deg 98.54% 73.14% / 0.2); + --ld-col-rg-alpha-lowest: hsl(153.33deg 98.54% 73.14% / 0.1); + --ld-col-rg: hsl(153.33deg 98.54% 73.14%); + --ld-col-rp-010: hsl(253.33deg 100.00% 1.76%); + --ld-col-rp-050: hsl(248.00deg 100.00% 5.88%); + --ld-col-rp-100: hsl(252.00deg 55.56% 14.12%); + --ld-col-rp-200: hsl(254.69deg 42.61% 22.55%); + --ld-col-rp-300: hsl(255.52deg 37.18% 30.59%); + --ld-col-rp-400: hsl(256.76deg 34.69% 38.43%); + --ld-col-rp-500: hsl(257.92deg 32.49% 46.47%); + --ld-col-rp-600: hsl(258.84deg 36.75% 54.12%); + --ld-col-rp-700: hsl(258.95deg 48.72% 61.76%); + --ld-col-rp-800: hsl(262.06deg 48.57% 72.55%); + --ld-col-rp-900: hsl(268.57deg 47.73% 82.75%); + --ld-col-rp-alpha-low: hsl(258.95deg 48.72% 61.76% / 0.2); + --ld-col-rp-alpha-lowest: hsl(258.95deg 48.72% 61.76% / 0.1); + --ld-col-rp: hsl(258.95deg 48.72% 61.76%); + --ld-col-rr-010: hsl(326.67deg 100.00% 1.76%); + --ld-col-rr-050: hsl(337.24deg 100.00% 5.69%); + --ld-col-rr-100: hsl(341.54deg 89.66% 11.37%); + --ld-col-rr-200: hsl(343.20deg 84.27% 17.45%); + --ld-col-rr-300: hsl(343.80deg 83.33% 23.53%); + --ld-col-rr-400: hsl(343.94deg 81.94% 30.39%); + --ld-col-rr-500: hsl(344.62deg 80.41% 38.04%); + --ld-col-rr-600: hsl(345.00deg 80.00% 49.02%); + --ld-col-rr-700: hsl(346.71deg 75.63% 61.37%); + --ld-col-rr-800: hsl(349.41deg 75.00% 73.33%); + --ld-col-rr-900: hsl(355.00deg 76.92% 84.71%); + --ld-col-rr-alpha-low: hsl(345.00deg 80.00% 49.02% / 0.2); + --ld-col-rr-alpha-lowest: hsl(345.00deg 80.00% 49.02% / 0.1); + --ld-col-rr: hsl(345.00deg 80.00% 49.02%); + --ld-col-sb-010: hsl(150.00deg 100.00% 1.57%); + --ld-col-sb-050: hsl(175.38deg 44.83% 28.43%); + --ld-col-sb-100: hsl(174.83deg 31.87% 35.69%); + --ld-col-sb-200: hsl(175.29deg 23.29% 42.94%); + --ld-col-sb-300: hsl(175.91deg 17.32% 50.20%); + --ld-col-sb-400: hsl(176.84deg 17.43% 57.25%); + --ld-col-sb-500: hsl(178.13deg 17.39% 63.92%); + --ld-col-sb-600: hsl(180.00deg 16.56% 70.39%); + --ld-col-sb-700: hsl(180.00deg 15.97% 76.67%); + --ld-col-sb-800: hsl(184.00deg 16.85% 82.55%); + --ld-col-sb-900: hsl(186.00deg 16.67% 88.24%); + --ld-col-sb-alpha-low: hsl(175.38deg 44.83% 28.43% / 0.2); + --ld-col-sb-alpha-lowest: hsl(175.38deg 44.83% 28.43% / 0.1); + --ld-col-sb: hsl(175.38deg 44.83% 28.43%); + --ld-col-sg-010: hsl(86.67deg 100.00% 1.76%); + --ld-col-sg-050: hsl(94.29deg 50.00% 27.45%); + --ld-col-sg-100: hsl(94.29deg 35.20% 35.10%); + --ld-col-sg-200: hsl(95.36deg 25.93% 42.35%); + --ld-col-sg-300: hsl(95.51deg 19.37% 49.61%); + --ld-col-sg-400: hsl(95.12deg 18.55% 56.67%); + --ld-col-sg-500: hsl(97.06deg 18.28% 63.53%); + --ld-col-sg-600: hsl(96.43deg 18.42% 70.20%); + --ld-col-sg-700: hsl(98.18deg 18.33% 76.47%); + --ld-col-sg-800: hsl(98.82deg 19.10% 82.55%); + --ld-col-sg-900: hsl(103.64deg 18.64% 88.43%); + --ld-col-sg-alpha-low: hsl(94.29deg 50.00% 27.45% / 0.2); + --ld-col-sg-alpha-lowest: hsl(94.29deg 50.00% 27.45% / 0.1); + --ld-col-sg: hsl(94.29deg 50.00% 27.45%); + --ld-col-sp-010: hsl(320.00deg 100.00% 1.76%); + --ld-col-sp-050: hsl(340.00deg 33.33% 17.65%); + --ld-col-sp-100: hsl(340.00deg 20.30% 26.08%); + --ld-col-sp-200: hsl(340.00deg 13.64% 34.51%); + --ld-col-sp-300: hsl(342.00deg 9.17% 42.75%); + --ld-col-sp-400: hsl(342.35deg 6.77% 50.78%); + --ld-col-sp-500: hsl(342.86deg 6.60% 58.43%); + --ld-col-sp-600: hsl(345.00deg 6.90% 65.88%); + --ld-col-sp-700: hsl(346.67deg 6.57% 73.14%); + --ld-col-sp-800: hsl(0.00deg 5.88% 80.00%); + --ld-col-sp-900: hsl(0.00deg 5.88% 86.67%); + --ld-col-sp-alpha-low: hsl(340.00deg 33.33% 17.65% / 0.2); + --ld-col-sp-alpha-lowest: hsl(340.00deg 33.33% 17.65% / 0.1); + --ld-col-sp: hsl(340.00deg 33.33% 17.65%); + --ld-col-sy-010: hsl(13.33deg 100.00% 1.76%); + --ld-col-sy-050: hsl(30.00deg 100.00% 13.73%); + --ld-col-sy-100: hsl(30.48deg 53.85% 22.94%); + --ld-col-sy-200: hsl(30.55deg 33.74% 31.96%); + --ld-col-sy-300: hsl(30.00deg 23.08% 40.78%); + --ld-col-sy-400: hsl(31.50deg 15.87% 49.41%); + --ld-col-sy-500: hsl(30.00deg 15.74% 57.65%); + --ld-col-sy-600: hsl(32.14deg 16.09% 65.88%); + --ld-col-sy-700: hsl(31.43deg 15.56% 73.53%); + --ld-col-sy-800: hsl(36.00deg 15.46% 80.98%); + --ld-col-sy-900: hsl(36.00deg 16.13% 87.84%); + --ld-col-sy-alpha-low: hsl(30.00deg 100.00% 13.73% / 0.2); + --ld-col-sy-alpha-lowest: hsl(30.00deg 100.00% 13.73% / 0.1); + --ld-col-sy: hsl(30.00deg 100.00% 13.73%); + --ld-col-vc-010: hsl(180.00deg 100.00% 1.76%); + --ld-col-vc-050: hsl(173.79deg 100.00% 5.69%); + --ld-col-vc-100: hsl(181.05deg 67.06% 16.67%); + --ld-col-vc-200: hsl(184.00deg 64.29% 27.45%); + --ld-col-vc-300: hsl(184.84deg 62.63% 38.82%); + --ld-col-vc-400: hsl(185.63deg 64.00% 50.98%); + --ld-col-vc-500: hsl(186.41deg 62.68% 59.02%); + --ld-col-vc-600: hsl(186.92deg 61.90% 67.06%); + --ld-col-vc-700: hsl(188.35deg 61.24% 74.71%); + --ld-col-vc-800: hsl(191.79deg 60.87% 81.96%); + --ld-col-vc-900: hsl(195.43deg 63.64% 89.22%); + --ld-col-vc-alpha-low: hsl(185.63deg 64.00% 50.98% / 0.2); + --ld-col-vc-alpha-lowest: hsl(185.63deg 64.00% 50.98% / 0.1); + --ld-col-vc: hsl(185.63deg 64.00% 50.98%); + --ld-col-vg-010: hsl(60.00deg 100.00% 1.76%); + --ld-col-vg-050: hsl(68.00deg 100.00% 5.88%); + --ld-col-vg-100: hsl(75.48deg 65.96% 18.43%); + --ld-col-vg-200: hsl(78.06deg 58.49% 31.18%); + --ld-col-vg-300: hsl(79.20deg 55.56% 44.12%); + --ld-col-vg-400: hsl(79.81deg 43.80% 52.55%); + --ld-col-vg-500: hsl(80.69deg 43.28% 60.59%); + --ld-col-vg-600: hsl(81.74deg 42.86% 68.43%); + --ld-col-vg-700: hsl(83.08deg 42.62% 76.08%); + --ld-col-vg-800: hsl(86.67deg 41.86% 83.14%); + --ld-col-vg-900: hsl(90.00deg 44.00% 90.20%); + --ld-col-vg-alpha-low: hsl(79.20deg 55.56% 44.12% / 0.2); + --ld-col-vg-alpha-lowest: hsl(79.20deg 55.56% 44.12% / 0.1); + --ld-col-vg: hsl(79.20deg 55.56% 44.12%); + --ld-col-vm-010: hsl(320.00deg 100.00% 1.76%); + --ld-col-vm-050: hsl(318.00deg 100.00% 5.88%); + --ld-col-vm-100: hsl(325.09deg 90.16% 11.96%); + --ld-col-vm-200: hsl(326.67deg 85.26% 18.63%); + --ld-col-vm-300: hsl(327.78deg 83.08% 25.49%); + --ld-col-vm-400: hsl(328.26deg 82.14% 32.94%); + --ld-col-vm-500: hsl(329.14deg 81.40% 42.16%); + --ld-col-vm-600: hsl(330.22deg 58.65% 53.53%); + --ld-col-vm-700: hsl(332.26deg 58.24% 64.31%); + --ld-col-vm-800: hsl(334.05deg 57.81% 74.90%); + --ld-col-vm-900: hsl(339.13deg 58.97% 84.71%); + --ld-col-vm-alpha-low: hsl(329.14deg 81.40% 42.16% / 0.2); + --ld-col-vm-alpha-lowest: hsl(329.14deg 81.40% 42.16% / 0.1); + --ld-col-vm: hsl(329.14deg 81.40% 42.16%); + --ld-col-vy-010: hsl(26.67deg 100.00% 1.76%); + --ld-col-vy-050: hsl(33.10deg 100.00% 5.69%); + --ld-col-vy-100: hsl(42.16deg 100.00% 21.76%); + --ld-col-vy-200: hsl(43.90deg 100.00% 40.20%); + --ld-col-vy-300: hsl(44.23deg 71.43% 48.04%); + --ld-col-vy-400: hsl(44.49deg 65.33% 55.88%); + --ld-col-vy-500: hsl(44.87deg 63.64% 63.33%); + --ld-col-vy-600: hsl(45.81deg 62.42% 70.78%); + --ld-col-vy-700: hsl(46.96deg 61.06% 77.84%); + --ld-col-vy-800: hsl(49.57deg 58.97% 84.71%); + --ld-col-vy-900: hsl(53.79deg 67.44% 91.57%); + --ld-col-vy-alpha-low: hsl(43.90deg 100.00% 40.20% / 0.2); + --ld-col-vy-alpha-lowest: hsl(43.90deg 100.00% 40.20% / 0.1); + --ld-col-vy: hsl(43.90deg 100.00% 40.20%); + --ld-col-wht-alpha-high: hsl(0.00deg 0.00% 0.00% / 0.7); + --ld-col-wht-alpha-highest: hsl(0.00deg 0.00% 0.00% / 0.8); + --ld-col-wht-alpha-low: hsl(0.00deg 0.00% 0.00% / 0.2); + --ld-col-wht-alpha-lowest: hsl(0.00deg 0.00% 0.00% / 0.1); + --ld-col-wht-alpha-medium: hsl(0.00deg 0.00% 0.00% / 0.5); + --ld-col-wht: hsl(0.00deg 0.00% 0.00%); +} diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json index ca2f6e2cca..34772a6339 100644 --- a/src/liquid/global/styles/design-tokens.json +++ b/src/liquid/global/styles/design-tokens.json @@ -382,6 +382,183 @@ "wht-alpha-low": "hsl(0.00deg 0.00% 100.00% / 0.2)", "wht-alpha-lowest": "hsl(0.00deg 0.00% 100.00% / 0.1)" }, + "colorsDark": { + "neutral-900/default": "hsl(220.00deg 50.00% 88.00%)", + "neutral-010": "hsl(0.00deg 0.00% 1.76%)", + "neutral-050": "hsl(0.00deg 0.00% 5.49%)", + "neutral-100": "hsl(210.00deg 4.88% 16.08%)", + "neutral-200": "hsl(222.86deg 5.26% 26.08%)", + "neutral-300": "hsl(218.18deg 6.01% 35.88%)", + "neutral-400": "hsl(218.57deg 6.03% 45.49%)", + "neutral-500": "hsl(221.05deg 8.23% 54.71%)", + "neutral-600": "hsl(220.00deg 11.35% 63.73%)", + "neutral-700": "hsl(220.00deg 16.90% 72.16%)", + "neutral-800": "hsl(218.57deg 28.00% 80.39%)", + "neutral-alpha-low": "hsl(220.00deg 50.00% 88.00% / 0.2)", + "neutral-alpha-lowest": "hsl(220.00deg 50.00% 88.00% / 0.1)", + "rr-600/default": "hsl(345.00deg 80.00% 49.02%)", + "rr-010": "hsl(326.67deg 100.00% 1.76%)", + "rr-050": "hsl(337.24deg 100.00% 5.69%)", + "rr-100": "hsl(341.54deg 89.66% 11.37%)", + "rr-200": "hsl(343.20deg 84.27% 17.45%)", + "rr-300": "hsl(343.80deg 83.33% 23.53%)", + "rr-400": "hsl(343.94deg 81.94% 30.39%)", + "rr-500": "hsl(344.62deg 80.41% 38.04%)", + "rr-700": "hsl(346.71deg 75.63% 61.37%)", + "rr-800": "hsl(349.41deg 75.00% 73.33%)", + "rr-900": "hsl(355.00deg 76.92% 84.71%)", + "rr-alpha-low": "hsl(345.00deg 80.00% 49.02% / 0.2)", + "rr-alpha-lowest": "hsl(345.00deg 80.00% 49.02% / 0.1)", + "rb-600/default": "hsl(206.25deg 84.21% 62.75%)", + "rb-010": "hsl(186.67deg 100.00% 1.76%)", + "rb-050": "hsl(196.55deg 100.00% 5.69%)", + "rb-100": "hsl(202.35deg 66.23% 15.10%)", + "rb-200": "hsl(203.33deg 57.14% 24.71%)", + "rb-300": "hsl(204.89deg 54.02% 34.12%)", + "rb-400": "hsl(205.34deg 52.25% 43.53%)", + "rb-500": "hsl(206.09deg 57.50% 52.94%)", + "rb-700": "hsl(208.57deg 82.89% 70.20%)", + "rb-800": "hsl(211.28deg 82.46% 77.65%)", + "rb-900": "hsl(216.00deg 84.42% 84.90%)", + "rb-alpha-low": "hsl(206.25deg 84.21% 62.75% / 0.2)", + "rb-alpha-lowest": "hsl(206.25deg 84.21% 62.75% / 0.1)", + "vy-200/default": "hsl(43.90deg 100.00% 40.20%)", + "vy-010": "hsl(26.67deg 100.00% 1.76%)", + "vy-050": "hsl(33.10deg 100.00% 5.69%)", + "vy-100": "hsl(42.16deg 100.00% 21.76%)", + "vy-300": "hsl(44.23deg 71.43% 48.04%)", + "vy-400": "hsl(44.49deg 65.33% 55.88%)", + "vy-500": "hsl(44.87deg 63.64% 63.33%)", + "vy-600": "hsl(45.81deg 62.42% 70.78%)", + "vy-700": "hsl(46.96deg 61.06% 77.84%)", + "vy-800": "hsl(49.57deg 58.97% 84.71%)", + "vy-900": "hsl(53.79deg 67.44% 91.57%)", + "vy-alpha-low": "hsl(43.90deg 100.00% 40.20% / 0.2)", + "vy-alpha-lowest": "hsl(43.90deg 100.00% 40.20% / 0.1)", + "rp-700/default": "hsl(258.95deg 48.72% 61.76%)", + "rp-010": "hsl(253.33deg 100.00% 1.76%)", + "rp-050": "hsl(248.00deg 100.00% 5.88%)", + "rp-100": "hsl(252.00deg 55.56% 14.12%)", + "rp-200": "hsl(254.69deg 42.61% 22.55%)", + "rp-300": "hsl(255.52deg 37.18% 30.59%)", + "rp-400": "hsl(256.76deg 34.69% 38.43%)", + "rp-500": "hsl(257.92deg 32.49% 46.47%)", + "rp-600": "hsl(258.84deg 36.75% 54.12%)", + "rp-800": "hsl(262.06deg 48.57% 72.55%)", + "rp-900": "hsl(268.57deg 47.73% 82.75%)", + "rp-alpha-low": "hsl(258.95deg 48.72% 61.76% / 0.2)", + "rp-alpha-lowest": "hsl(258.95deg 48.72% 61.76% / 0.1)", + "vg-300/default": "hsl(79.20deg 55.56% 44.12%)", + "vg-010": "hsl(60.00deg 100.00% 1.76%)", + "vg-050": "hsl(68.00deg 100.00% 5.88%)", + "vg-100": "hsl(75.48deg 65.96% 18.43%)", + "vg-200": "hsl(78.06deg 58.49% 31.18%)", + "vg-400": "hsl(79.81deg 43.80% 52.55%)", + "vg-500": "hsl(80.69deg 43.28% 60.59%)", + "vg-600": "hsl(81.74deg 42.86% 68.43%)", + "vg-700": "hsl(83.08deg 42.62% 76.08%)", + "vg-800": "hsl(86.67deg 41.86% 83.14%)", + "vg-900": "hsl(90.00deg 44.00% 90.20%)", + "vg-alpha-low": "hsl(79.20deg 55.56% 44.12% / 0.2)", + "vg-alpha-lowest": "hsl(79.20deg 55.56% 44.12% / 0.1)", + "vm-500/default": "hsl(329.14deg 81.40% 42.16%)", + "vm-010": "hsl(320.00deg 100.00% 1.76%)", + "vm-050": "hsl(318.00deg 100.00% 5.88%)", + "vm-100": "hsl(325.09deg 90.16% 11.96%)", + "vm-200": "hsl(326.67deg 85.26% 18.63%)", + "vm-300": "hsl(327.78deg 83.08% 25.49%)", + "vm-400": "hsl(328.26deg 82.14% 32.94%)", + "vm-600": "hsl(330.22deg 58.65% 53.53%)", + "vm-700": "hsl(332.26deg 58.24% 64.31%)", + "vm-800": "hsl(334.05deg 57.81% 74.90%)", + "vm-900": "hsl(339.13deg 58.97% 84.71%)", + "vm-alpha-low": "hsl(329.14deg 81.40% 42.16% / 0.2)", + "vm-alpha-lowest": "hsl(329.14deg 81.40% 42.16% / 0.1)", + "rg-600/default": "hsl(153.33deg 98.54% 73.14%)", + "rg-010": "hsl(140.00deg 100.00% 1.76%)", + "rg-050": "hsl(142.76deg 100.00% 5.69%)", + "rg-100": "hsl(148.09deg 55.29% 16.67%)", + "rg-200": "hsl(150.48deg 44.68% 27.65%)", + "rg-300": "hsl(151.11deg 41.12% 38.63%)", + "rg-400": "hsl(152.45deg 38.58% 49.80%)", + "rg-500": "hsl(152.59deg 58.59% 61.18%)", + "rg-700": "hsl(154.55deg 96.12% 79.80%)", + "rg-800": "hsl(157.61deg 97.10% 86.47%)", + "rg-900": "hsl(164.21deg 100.00% 92.55%)", + "rg-alpha-low": "hsl(153.33deg 98.54% 73.14% / 0.2)", + "rg-alpha-lowest": "hsl(153.33deg 98.54% 73.14% / 0.1)", + "vc-400/default": "hsl(185.63deg 64.00% 50.98%)", + "vc-010": "hsl(180.00deg 100.00% 1.76%)", + "vc-050": "hsl(173.79deg 100.00% 5.69%)", + "vc-100": "hsl(181.05deg 67.06% 16.67%)", + "vc-200": "hsl(184.00deg 64.29% 27.45%)", + "vc-300": "hsl(184.84deg 62.63% 38.82%)", + "vc-500": "hsl(186.41deg 62.68% 59.02%)", + "vc-600": "hsl(186.92deg 61.90% 67.06%)", + "vc-700": "hsl(188.35deg 61.24% 74.71%)", + "vc-800": "hsl(191.79deg 60.87% 81.96%)", + "vc-900": "hsl(195.43deg 63.64% 89.22%)", + "vc-alpha-low": "hsl(185.63deg 64.00% 50.98% / 0.2)", + "vc-alpha-lowest": "hsl(185.63deg 64.00% 50.98% / 0.1)", + "sg-050/default": "hsl(94.29deg 50.00% 27.45%)", + "sg-010": "hsl(86.67deg 100.00% 1.76%)", + "sg-100": "hsl(94.29deg 35.20% 35.10%)", + "sg-200": "hsl(95.36deg 25.93% 42.35%)", + "sg-300": "hsl(95.51deg 19.37% 49.61%)", + "sg-400": "hsl(95.12deg 18.55% 56.67%)", + "sg-500": "hsl(97.06deg 18.28% 63.53%)", + "sg-600": "hsl(96.43deg 18.42% 70.20%)", + "sg-700": "hsl(98.18deg 18.33% 76.47%)", + "sg-800": "hsl(98.82deg 19.10% 82.55%)", + "sg-900": "hsl(103.64deg 18.64% 88.43%)", + "sg-alpha-low": "hsl(94.29deg 50.00% 27.45% / 0.2)", + "sg-alpha-lowest": "hsl(94.29deg 50.00% 27.45% / 0.1)", + "sy-050/default": "hsl(30.00deg 100.00% 13.73%)", + "sy-010": "hsl(13.33deg 100.00% 1.76%)", + "sy-100": "hsl(30.48deg 53.85% 22.94%)", + "sy-200": "hsl(30.55deg 33.74% 31.96%)", + "sy-300": "hsl(30.00deg 23.08% 40.78%)", + "sy-400": "hsl(31.50deg 15.87% 49.41%)", + "sy-500": "hsl(30.00deg 15.74% 57.65%)", + "sy-600": "hsl(32.14deg 16.09% 65.88%)", + "sy-700": "hsl(31.43deg 15.56% 73.53%)", + "sy-800": "hsl(36.00deg 15.46% 80.98%)", + "sy-900": "hsl(36.00deg 16.13% 87.84%)", + "sy-alpha-low": "hsl(30.00deg 100.00% 13.73% / 0.2)", + "sy-alpha-lowest": "hsl(30.00deg 100.00% 13.73% / 0.1)", + "sb-050/default": "hsl(175.38deg 44.83% 28.43%)", + "sb-010": "hsl(150.00deg 100.00% 1.57%)", + "sb-100": "hsl(174.83deg 31.87% 35.69%)", + "sb-200": "hsl(175.29deg 23.29% 42.94%)", + "sb-300": "hsl(175.91deg 17.32% 50.20%)", + "sb-400": "hsl(176.84deg 17.43% 57.25%)", + "sb-500": "hsl(178.13deg 17.39% 63.92%)", + "sb-600": "hsl(180.00deg 16.56% 70.39%)", + "sb-700": "hsl(180.00deg 15.97% 76.67%)", + "sb-800": "hsl(184.00deg 16.85% 82.55%)", + "sb-900": "hsl(186.00deg 16.67% 88.24%)", + "sb-alpha-low": "hsl(175.38deg 44.83% 28.43% / 0.2)", + "sb-alpha-lowest": "hsl(175.38deg 44.83% 28.43% / 0.1)", + "sp-050/default": "hsl(340.00deg 33.33% 17.65%)", + "sp-010": "hsl(320.00deg 100.00% 1.76%)", + "sp-100": "hsl(340.00deg 20.30% 26.08%)", + "sp-200": "hsl(340.00deg 13.64% 34.51%)", + "sp-300": "hsl(342.00deg 9.17% 42.75%)", + "sp-400": "hsl(342.35deg 6.77% 50.78%)", + "sp-500": "hsl(342.86deg 6.60% 58.43%)", + "sp-600": "hsl(345.00deg 6.90% 65.88%)", + "sp-700": "hsl(346.67deg 6.57% 73.14%)", + "sp-800": "hsl(0.00deg 5.88% 80.00%)", + "sp-900": "hsl(0.00deg 5.88% 86.67%)", + "sp-alpha-low": "hsl(340.00deg 33.33% 17.65% / 0.2)", + "sp-alpha-lowest": "hsl(340.00deg 33.33% 17.65% / 0.1)", + "wht": "hsl(0.00deg 0.00% 0.00%)", + "wht-alpha-highest": "hsl(0.00deg 0.00% 0.00% / 0.8)", + "wht-alpha-high": "hsl(0.00deg 0.00% 0.00% / 0.7)", + "wht-alpha-medium": "hsl(0.00deg 0.00% 0.00% / 0.5)", + "wht-alpha-low": "hsl(0.00deg 0.00% 0.00% / 0.2)", + "wht-alpha-lowest": "hsl(0.00deg 0.00% 0.00% / 0.1)" + }, "typography": { "xh1": { "fontFamily": "Lato, Helvetica, Arial, sans-serif", From 69c4c56440292f01150ea4b58c8418ea44369293 Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Tue, 28 Mar 2023 15:16:06 +0200 Subject: [PATCH 14/28] feat(dark-mode): squash me --- .../docs-switch-dark-light/docs-switch-dark-light.tsx | 3 +-- src/docs/includes/layout.njk | 8 +++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx index 74e06e61f4..cbcde09441 100644 --- a/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx +++ b/src/docs/components/docs-switch-dark-light/docs-switch-dark-light.tsx @@ -40,8 +40,7 @@ export class DocsSwitchDarkLight { window.localStorage.setItem('docs-ui', this.isDark ? 'dark' : 'light') }) - document.body.classList.add(`docs-ui-${this.isDark ? 'dark' : 'light'}`) - document.body.classList.remove(`docs-ui-${!this.isDark ? 'dark' : 'light'}`) + document.documentElement.classList.toggle('ld-dark', this.isDark) document.documentElement.style.colorScheme = this.isDark ? 'dark' : 'auto' } diff --git a/src/docs/includes/layout.njk b/src/docs/includes/layout.njk index ed988684b7..a72abaa4ee 100644 --- a/src/docs/includes/layout.njk +++ b/src/docs/includes/layout.njk @@ -61,12 +61,10 @@ title: Introduction document.body.classList.add('sarari') } - var storedThemePref = window.localStorage.getItem('docs-theme') + var storedThemePref = window.localStorage.getItem('docs-ui') var isDark = storedThemePref === 'dark' ? true : false - document.body.classList.add(`docs-theme-${this.isDark ? 'dark' : 'light'}`) - document.body.classList.remove( - `docs-theme-${!this.isDark ? 'dark' : 'light'}` - ) + document.documentElement.classList.toggle('ld-dark', isDark) + document.documentElement.style.colorScheme = isDark ? 'dark' : 'auto'