Skip to content

Commit

Permalink
fix: properly create default colors, remove color variants
Browse files Browse the repository at this point in the history
  • Loading branch information
@renet @borisdiakur
renet authored and borisdiakur committed Nov 9, 2021
1 parent 3abda92 commit 0479741
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 123 deletions.
35 changes: 12 additions & 23 deletions scripts/updateDesignTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ function parseColors(items, styles) {
} else if (item.fills?.length && item.styles?.fill) {
const style = styles[item.styles.fill]
const { name, description } = style
const variants = description.split(', ')
const [baseColorName, ...rest] = name.split('/')[1].split('-')
const defaultOnly = rest.length === 0
const colorShortName = ['Neutral', 'White'].includes(baseColorName)
Expand All @@ -131,29 +132,11 @@ function parseColors(items, styles) {
: baseColorName.toLowerCase()
: baseColorName.replaceAll(/[a-z]/g, '').toLowerCase()
const colorName =
colorShortName + (defaultOnly ? '' : '-' + rest.join('-'))
colorShortName +
(defaultOnly ? '' : '-' + rest.join('-')) +
(variants.includes('Default') ? '/default' : '')
const colorValue = relRGBToAbsRGB(item.fills[0])
colors[colorName] = colorValue

if (description) {
const variants = description.split(', ')
variants.forEach((variant) => {
if (variant.startsWith('Surface')) {
return
}

if (variant === 'Default') {
if (!defaultOnly) {
colors[colorShortName] = colorValue
}
return
}

const colorVariantName = colorShortName + '-' + variant.toLowerCase()

colors[colorVariantName] = colorValue
})
}
}
}

Expand Down Expand Up @@ -299,12 +282,18 @@ function generateColors(colorTokens, themes) {
Object.keys(colorTokens).forEach((key) => {
const val = colorTokens[key]
if (key.includes('/default')) {
colorVariables.push(` --ld-col-${key.split('/default')[0]}: ${val};`)
const colorKey = key
const colorKey = key.split('/default')[0]
const colorBaseName = key
.replace(/\d/g, '')
.replace('/default', '')
.replace(/-$/, '')

colorVariables.push(` --ld-col-${colorKey}: ${val};`)

// prevents duplicate custom properties in cases like "sp/default"
if (colorBaseName !== colorKey) {
colorVariables.push(` --ld-col-${colorBaseName}: ${val};`)
}
} else {
colorVariables.push(` --ld-col-${key}: ${val};`)
}
Expand Down
42 changes: 4 additions & 38 deletions src/liquid/global/styles/colors/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,13 @@
--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(140, 140, 155);
--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(71, 71, 82);
--ld-col-neutral-800: rgb(46, 46, 56);
--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-active: rgb(15, 26, 46);
--ld-col-neutral-disabled: rgb(225, 225, 234);
--ld-col-neutral-focus: rgb(140, 140, 155);
--ld-col-neutral-hover: rgb(46, 46, 56);
--ld-col-neutral-primary: rgb(94, 94, 114);
--ld-col-neutral-999: rgb(0, 0, 0);
--ld-col-neutral: rgb(15, 26, 46);
--ld-col-rb-010: rgb(244, 250, 255);
--ld-col-rb-050: rgb(236, 245, 252);
Expand All @@ -28,12 +24,8 @@
--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-active: rgb(10, 59, 97);
--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-focus: rgb(80, 160, 222);
--ld-col-rb-highlight: rgb(244, 250, 255);
--ld-col-rb-hover: rgb(8, 88, 151);
--ld-col-rb: rgb(15, 105, 175);
--ld-col-rg-010: rgb(244, 251, 248);
--ld-col-rg-050: rgb(222, 251, 228);
Expand All @@ -46,12 +38,8 @@
--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-active: 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-focus: rgb(198, 244, 205);
--ld-col-rg-highlight: rgb(244, 251, 248);
--ld-col-rg-hover: rgb(4, 100, 46);
--ld-col-rg: rgb(1, 136, 76);
--ld-col-rp-010: rgb(250, 247, 255);
--ld-col-rp-050: rgb(242, 236, 253);
Expand All @@ -64,12 +52,8 @@
--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-active: 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-focus: rgb(138, 104, 210);
--ld-col-rp-highlight: rgb(250, 247, 255);
--ld-col-rp-hover: rgb(60, 34, 116);
--ld-col-rp: rgb(80, 50, 145);
--ld-col-rr-010: rgb(255, 246, 248);
--ld-col-rr-050: rgb(255, 237, 238);
Expand All @@ -82,12 +66,8 @@
--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-active: 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-focus: rgb(250, 97, 120);
--ld-col-rr-highlight: rgb(255, 246, 248);
--ld-col-rr-hover: rgb(172, 21, 59);
--ld-col-rr: rgb(230, 30, 80);
--ld-col-sb: rgb(150, 215, 210);
--ld-col-sg: rgb(180, 220, 150);
Expand All @@ -104,12 +84,8 @@
--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-active: rgb(1, 66, 72);
--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-focus: rgb(125, 225, 236);
--ld-col-vc-highlight: rgb(248, 253, 254);
--ld-col-vc-hover: rgb(0, 132, 144);
--ld-col-vc: rgb(45, 190, 205);
--ld-col-vg-010: rgb(250, 253, 242);
--ld-col-vg-050: rgb(233, 248, 203);
Expand All @@ -122,12 +98,8 @@
--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-active: rgb(41, 60, 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-focus: rgb(221, 238, 184);
--ld-col-vg-highlight: rgb(250, 253, 242);
--ld-col-vg-hover: rgb(89, 131, 0);
--ld-col-vg: rgb(165, 205, 80);
--ld-col-vm-010: rgb(255, 245, 250);
--ld-col-vm-050: rgb(255, 236, 241);
Expand All @@ -142,7 +114,6 @@
--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-highlight: rgb(255, 245, 250);
--ld-col-vm: rgb(235, 60, 150);
--ld-col-vy-010: rgb(254, 251, 245);
--ld-col-vy-050: rgb(255, 243, 217);
Expand All @@ -155,20 +126,15 @@
--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-active: rgb(61, 46, 10);
--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-focus: rgb(253, 229, 166);
--ld-col-vy-highlight: rgb(254, 251, 245);
--ld-col-vy-hover: rgb(191, 140, 0);
--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-white: rgb(255, 255, 255);
--ld-col-wht: rgb(255, 255, 255);
--ld-thm-bubblegum-error-active: var(--ld-col-rr-900);
--ld-thm-bubblegum-error-focus: var(--ld-col-rr-400);
Expand Down
81 changes: 19 additions & 62 deletions src/liquid/global/styles/design-tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,173 +169,130 @@
"neutral-010": "rgb(248, 248, 252)",
"neutral-050": "rgb(236, 236, 244)",
"neutral-100": "rgb(225, 225, 234)",
"neutral-disabled": "rgb(225, 225, 234)",
"neutral-200": "rgb(199, 199, 209)",
"neutral-300": "rgb(169, 169, 186)",
"neutral-400": "rgb(140, 140, 155)",
"neutral-focus": "rgb(140, 140, 155)",
"neutral-400": "rgb(139, 139, 156)",
"neutral-500": "rgb(119, 119, 136)",
"neutral-600": "rgb(94, 94, 114)",
"neutral-primary": "rgb(94, 94, 114)",
"neutral-700": "rgb(71, 71, 82)",
"neutral-800": "rgb(46, 46, 56)",
"neutral-hover": "rgb(46, 46, 56)",
"neutral-900": "rgb(15, 26, 46)",
"neutral": "rgb(15, 26, 46)",
"neutral-active": "rgb(15, 26, 46)",
"neutral-700": "rgb(69, 69, 84)",
"neutral-800": "rgb(43, 43, 59)",
"neutral-900/default": "rgb(15, 26, 46)",
"rr-010": "rgb(255, 246, 248)",
"rr-highlight": "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-focus": "rgb(250, 97, 120)",
"rr-500": "rgb(244, 58, 102)",
"rr-600": "rgb(230, 30, 80)",
"rr": "rgb(230, 30, 80)",
"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-hover": "rgb(172, 21, 59)",
"rr-800": "rgb(117, 12, 36)",
"rr-900": "rgb(75, 5, 23)",
"rr-active": "rgb(75, 5, 23)",
"rb-010": "rgb(244, 250, 255)",
"rb-highlight": "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-focus": "rgb(80, 160, 222)",
"rb-500": "rgb(43, 141, 216)",
"rb-600": "rgb(15, 105, 175)",
"rb": "rgb(15, 105, 175)",
"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-hover": "rgb(8, 88, 151)",
"rb-800": "rgb(10, 59, 97)",
"rb-active": "rgb(10, 59, 97)",
"rb-900": "rgb(0, 28, 56)",
"vy-010": "rgb(254, 251, 245)",
"vy-highlight": "rgb(254, 251, 245)",
"vy-050": "rgb(255, 243, 217)",
"vy-100": "rgb(253, 229, 166)",
"vy-focus": "rgb(253, 229, 166)",
"vy-200": "rgb(255, 200, 50)",
"vy": "rgb(255, 200, 50)",
"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-hover": "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-active": "rgb(61, 46, 10)",
"vy-900": "rgb(39, 30, 7)",
"rp-010": "rgb(250, 247, 255)",
"rp-highlight": "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-focus": "rgb(138, 104, 210)",
"rp-600": "rgb(113, 78, 187)",
"rp-700": "rgb(80, 50, 145)",
"rp": "rgb(80, 50, 145)",
"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-hover": "rgb(60, 34, 116)",
"rp-900": "rgb(35, 24, 61)",
"rp-active": "rgb(35, 24, 61)",
"vg-010": "rgb(250, 253, 242)",
"vg-highlight": "rgb(250, 253, 242)",
"vg-050": "rgb(233, 248, 203)",
"vg-100": "rgb(221, 238, 184)",
"vg-focus": "rgb(221, 238, 184)",
"vg-200": "rgb(194, 221, 136)",
"vg-300": "rgb(165, 205, 80)",
"vg": "rgb(165, 205, 80)",
"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-hover": "rgb(89, 131, 0)",
"vg-600": "rgb(82, 121, 0)",
"vg-700": "rgb(58, 86, 1)",
"vg-800": "rgb(41, 60, 0)",
"vg-active": "rgb(41, 60, 0)",
"vg-900": "rgb(18, 31, 0)",
"vm-010": "rgb(255, 245, 250)",
"vm-highlight": "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": "rgb(235, 60, 150)",
"vm": "rgb(235, 60, 150)",
"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-highlight": "rgb(244, 251, 248)",
"rg-050": "rgb(222, 251, 228)",
"rg-100": "rgb(198, 244, 205)",
"rg-focus": "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": "rgb(1, 136, 76)",
"rg": "rgb(1, 136, 76)",
"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-hover": "rgb(4, 100, 46)",
"rg-800": "rgb(5, 76, 32)",
"rg-900": "rgb(0, 45, 14)",
"rg-active": "rgb(0, 45, 14)",
"vc-010": "rgb(248, 253, 254)",
"vc-highlight": "rgb(248, 253, 254)",
"vc-050": "rgb(221, 252, 255)",
"vc-100": "rgb(191, 242, 247)",
"vc-200": "rgb(125, 225, 236)",
"vc-focus": "rgb(125, 225, 236)",
"vc-300": "rgb(83, 212, 225)",
"vc-400": "rgb(45, 190, 205)",
"vc": "rgb(45, 190, 205)",
"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-hover": "rgb(0, 132, 144)",
"vc-700": "rgb(0, 99, 108)",
"vc-800": "rgb(1, 66, 72)",
"vc-active": "rgb(1, 66, 72)",
"vc-900": "rgb(0, 31, 35)",
"sg": "rgb(180, 220, 150)",
"sy": "rgb(255, 220, 185)",
"sb": "rgb(150, 215, 210)",
"sp": "rgb(225, 195, 205)",
"wht": "rgb(255, 255, 255)",
"wht-white": "rgb(255, 255, 255)",
"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)"
"wht-alpha-none": "rgba(255, 255, 255, 0)",
"neutral-999": "rgb(0, 0, 0)"
},
"typography": {
"display": {
Expand Down

0 comments on commit 0479741

Please sign in to comment.