Skip to content

Commit

Permalink
fix: default color refs, allow non-default refs in tailwind preset
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 0479741 commit 0bd1849
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 86 deletions.
47 changes: 17 additions & 30 deletions scripts/updateDesignTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@ function pxToRem(px: string | number) {
return parseInt(px + '') / 16 + 'rem'
}

function getColorTokenValue(variant, styles) {
if (variant.styles?.fill) {
const style = styles[variant.styles.fill]
const { name, description } = style
const variants = description.split(', ')
const [baseColorName, ...rest] = name.split('/')[1].split('-')
const referenceName =
baseColorName.replaceAll(/[a-z]/g, '').toLowerCase() +
(variants.includes('Default') ? '' : '-' + rest.join('-'))
return referenceName
} else {
return relRGBToAbsRGB(variant.fills[0])
}
}

function relRGBToAbsRGB(fill) {
const r = Math.round(fill.color.r * 255)
const g = Math.round(fill.color.g * 255)
Expand Down Expand Up @@ -37,42 +52,14 @@ function parseThemes(items, styles) {
subVariants.forEach((subVariant) => {
const subVariantName = subVariant.name.toLowerCase()
const colorName = `${groupName}-${variantName}-${subVariantName}`

if (subVariant.styles?.fill) {
const [baseColorName, ...rest] = styles[
subVariant.styles.fill
]?.name
.split('/')[1]
.split('-')
const referenceName =
baseColorName.replaceAll(/[a-z0]/g, '').toLowerCase() +
'-' +
rest.join('-')
theme[colorName] = referenceName
} else {
theme[colorName] = relRGBToAbsRGB(subVariant.fills[0])
}
theme[colorName] = getColorTokenValue(subVariant, styles)
})
}
} else {
const colorName = `${groupName}${
variantName === 'default' ? '' : `-${variantName}`
}`

if (variant.styles?.fill) {
const [baseColorName, ...rest] = styles[
variant.styles.fill
]?.name
.split('/')[1]
.split('-')
const referenceName =
baseColorName.replaceAll(/[a-z0]/g, '').toLowerCase() +
'-' +
rest.join('-')
theme[colorName] = referenceName
} else {
theme[colorName] = relRGBToAbsRGB(variant.fills[0])
}
theme[colorName] = getColorTokenValue(variant, styles)
}
})
}
Expand Down
50 changes: 25 additions & 25 deletions src/liquid/global/styles/colors/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,137 +140,137 @@
--ld-thm-bubblegum-error-focus: var(--ld-col-rr-400);
--ld-thm-bubblegum-error-highlight: var(--ld-col-rr-010);
--ld-thm-bubblegum-error-hover: var(--ld-col-rr-700);
--ld-thm-bubblegum-error: var(--ld-col-rr-600);
--ld-thm-bubblegum-error: var(--ld-col-rr);
--ld-thm-bubblegum-primary-active: var(--ld-col-rp-900);
--ld-thm-bubblegum-primary-alpha-low: var(--ld-col-rp-alpha-low);
--ld-thm-bubblegum-primary-alpha-lowest: var(--ld-col-rp-alpha-lowest);
--ld-thm-bubblegum-primary-focus: var(--ld-col-rp-500);
--ld-thm-bubblegum-primary-highlight: var(--ld-col-rp-010);
--ld-thm-bubblegum-primary-hover: var(--ld-col-rp-800);
--ld-thm-bubblegum-primary: var(--ld-col-rp-700);
--ld-thm-bubblegum-primary: var(--ld-col-rp);
--ld-thm-bubblegum-secondary-active: var(--ld-col-vc-800);
--ld-thm-bubblegum-secondary-focus: var(--ld-col-vc-200);
--ld-thm-bubblegum-secondary-highlight: var(--ld-col-vc-010);
--ld-thm-bubblegum-secondary-hover: var(--ld-col-vc-600);
--ld-thm-bubblegum-secondary: var(--ld-col-vc-400);
--ld-thm-bubblegum-secondary: var(--ld-col-vc);
--ld-thm-bubblegum-success-active: var(--ld-col-vg-800);
--ld-thm-bubblegum-success-focus: var(--ld-col-vg-200);
--ld-thm-bubblegum-success-highlight: var(--ld-col-vg-010);
--ld-thm-bubblegum-success-hover: var(--ld-col-vg-400);
--ld-thm-bubblegum-success: var(--ld-col-vg-300);
--ld-thm-bubblegum-success: var(--ld-col-vg);
--ld-thm-bubblegum-warning-active: var(--ld-col-vy-800);
--ld-thm-bubblegum-warning-focus: var(--ld-col-vy-100);
--ld-thm-bubblegum-warning-highlight: var(--ld-col-vy-010);
--ld-thm-bubblegum-warning-hover: var(--ld-col-vy-400);
--ld-thm-bubblegum-warning: var(--ld-col-vy-200);
--ld-thm-bubblegum-warning: var(--ld-col-vy);
--ld-thm-ocean-error-active: var(--ld-col-rr-900);
--ld-thm-ocean-error-focus: var(--ld-col-rr-400);
--ld-thm-ocean-error-highlight: var(--ld-col-rr-010);
--ld-thm-ocean-error-hover: var(--ld-col-rr-700);
--ld-thm-ocean-error: var(--ld-col-rr-600);
--ld-thm-ocean-error: var(--ld-col-rr);
--ld-thm-ocean-primary-active: var(--ld-col-rb-800);
--ld-thm-ocean-primary-alpha-low: var(--ld-col-rb-alpha-low);
--ld-thm-ocean-primary-alpha-lowest: var(--ld-col-rb-alpha-lowest);
--ld-thm-ocean-primary-focus: var(--ld-col-rb-400);
--ld-thm-ocean-primary-highlight: var(--ld-col-rb-010);
--ld-thm-ocean-primary-hover: var(--ld-col-rb-700);
--ld-thm-ocean-primary: var(--ld-col-rb-600);
--ld-thm-ocean-primary: var(--ld-col-rb);
--ld-thm-ocean-secondary-active: var(--ld-col-vc-800);
--ld-thm-ocean-secondary-focus: var(--ld-col-vc-200);
--ld-thm-ocean-secondary-highlight: var(--ld-col-vc-010);
--ld-thm-ocean-secondary-hover: var(--ld-col-vc-600);
--ld-thm-ocean-secondary: var(--ld-col-vc-400);
--ld-thm-ocean-secondary: var(--ld-col-vc);
--ld-thm-ocean-success-active: var(--ld-col-vg-800);
--ld-thm-ocean-success-focus: var(--ld-col-vg-200);
--ld-thm-ocean-success-highlight: var(--ld-col-vg-010);
--ld-thm-ocean-success-hover: var(--ld-col-vg-400);
--ld-thm-ocean-success: var(--ld-col-vg-300);
--ld-thm-ocean-success: var(--ld-col-vg);
--ld-thm-ocean-warning-active: var(--ld-col-vy-800);
--ld-thm-ocean-warning-focus: var(--ld-col-vy-100);
--ld-thm-ocean-warning-highlight: var(--ld-col-vy-010);
--ld-thm-ocean-warning-hover: var(--ld-col-vy-400);
--ld-thm-ocean-warning: var(--ld-col-vy-200);
--ld-thm-ocean-warning: var(--ld-col-vy);
--ld-thm-shake-error-active: var(--ld-col-rr-900);
--ld-thm-shake-error-focus: var(--ld-col-rr-400);
--ld-thm-shake-error-highlight: var(--ld-col-rr-010);
--ld-thm-shake-error-hover: var(--ld-col-rr-700);
--ld-thm-shake-error: var(--ld-col-rr-600);
--ld-thm-shake-error: var(--ld-col-rr);
--ld-thm-shake-primary-active: var(--ld-col-rp-900);
--ld-thm-shake-primary-alpha-low: var(--ld-col-rp-alpha-low);
--ld-thm-shake-primary-alpha-lowest: var(--ld-col-rp-alpha-lowest);
--ld-thm-shake-primary-focus: var(--ld-col-rp-500);
--ld-thm-shake-primary-highlight: var(--ld-col-rp-010);
--ld-thm-shake-primary-hover: var(--ld-col-rp-800);
--ld-thm-shake-primary: var(--ld-col-rp-700);
--ld-thm-shake-primary: var(--ld-col-rp);
--ld-thm-shake-secondary-active: var(--ld-col-vm-800);
--ld-thm-shake-secondary-focus: var(--ld-col-vm-300);
--ld-thm-shake-secondary-highlight: var(--ld-col-vm-010);
--ld-thm-shake-secondary-hover: var(--ld-col-vm-600);
--ld-thm-shake-secondary: var(--ld-col-vm-500);
--ld-thm-shake-secondary: var(--ld-col-vm);
--ld-thm-shake-success-active: var(--ld-col-vg-800);
--ld-thm-shake-success-focus: var(--ld-col-vg-200);
--ld-thm-shake-success-highlight: var(--ld-col-vg-010);
--ld-thm-shake-success-hover: var(--ld-col-vg-400);
--ld-thm-shake-success: var(--ld-col-vg-300);
--ld-thm-shake-success: var(--ld-col-vg);
--ld-thm-shake-warning-active: var(--ld-col-vy-800);
--ld-thm-shake-warning-focus: var(--ld-col-vy-100);
--ld-thm-shake-warning-highlight: var(--ld-col-vy-010);
--ld-thm-shake-warning-hover: var(--ld-col-vy-400);
--ld-thm-shake-warning: var(--ld-col-vy-200);
--ld-thm-shake-warning: var(--ld-col-vy);
--ld-thm-solvent-error-active: var(--ld-col-rr-900);
--ld-thm-solvent-error-focus: var(--ld-col-rr-400);
--ld-thm-solvent-error-highlight: var(--ld-col-rr-010);
--ld-thm-solvent-error-hover: var(--ld-col-rr-700);
--ld-thm-solvent-error: var(--ld-col-rr-600);
--ld-thm-solvent-error: var(--ld-col-rr);
--ld-thm-solvent-primary-active: var(--ld-col-rp-900);
--ld-thm-solvent-primary-alpha-low: var(--ld-col-rp-alpha-low);
--ld-thm-solvent-primary-alpha-lowest: var(--ld-col-rp-alpha-lowest);
--ld-thm-solvent-primary-focus: var(--ld-col-rp-500);
--ld-thm-solvent-primary-highlight: var(--ld-col-rp-010);
--ld-thm-solvent-primary-hover: var(--ld-col-rp-800);
--ld-thm-solvent-primary: var(--ld-col-rp-700);
--ld-thm-solvent-primary: var(--ld-col-rp);
--ld-thm-solvent-secondary-active: var(--ld-col-vg-800);
--ld-thm-solvent-secondary-focus: var(--ld-col-vg-200);
--ld-thm-solvent-secondary-highlight: var(--ld-col-vg-010);
--ld-thm-solvent-secondary-hover: var(--ld-col-vg-400);
--ld-thm-solvent-secondary: var(--ld-col-vg-300);
--ld-thm-solvent-secondary: var(--ld-col-vg);
--ld-thm-solvent-success-active: var(--ld-col-vg-800);
--ld-thm-solvent-success-focus: var(--ld-col-vg-200);
--ld-thm-solvent-success-highlight: var(--ld-col-vg-010);
--ld-thm-solvent-success-hover: var(--ld-col-vg-400);
--ld-thm-solvent-success: var(--ld-col-vg-300);
--ld-thm-solvent-success: var(--ld-col-vg);
--ld-thm-solvent-warning-active: var(--ld-col-vy-800);
--ld-thm-solvent-warning-focus: var(--ld-col-vy-100);
--ld-thm-solvent-warning-highlight: var(--ld-col-vy-010);
--ld-thm-solvent-warning-hover: var(--ld-col-vy-400);
--ld-thm-solvent-warning: var(--ld-col-vy-200);
--ld-thm-solvent-warning: var(--ld-col-vy);
--ld-thm-tea-error-active: var(--ld-col-rr-900);
--ld-thm-tea-error-focus: var(--ld-col-rr-400);
--ld-thm-tea-error-highlight: var(--ld-col-rr-010);
--ld-thm-tea-error-hover: var(--ld-col-rr-700);
--ld-thm-tea-error: var(--ld-col-rr-600);
--ld-thm-tea-error: var(--ld-col-rr);
--ld-thm-tea-primary-active: var(--ld-col-rg-900);
--ld-thm-tea-primary-alpha-low: var(--ld-col-rg-alpha-low);
--ld-thm-tea-primary-alpha-lowest: var(--ld-col-rg-alpha-lowest);
--ld-thm-tea-primary-focus: var(--ld-col-rg-100);
--ld-thm-tea-primary-highlight: var(--ld-col-rg-010);
--ld-thm-tea-primary-hover: var(--ld-col-rg-700);
--ld-thm-tea-primary: var(--ld-col-rg-600);
--ld-thm-tea-primary: var(--ld-col-rg);
--ld-thm-tea-secondary-active: var(--ld-col-vg-800);
--ld-thm-tea-secondary-focus: var(--ld-col-vg-200);
--ld-thm-tea-secondary-highlight: var(--ld-col-vg-010);
--ld-thm-tea-secondary-hover: var(--ld-col-vg-400);
--ld-thm-tea-secondary: var(--ld-col-vg-300);
--ld-thm-tea-secondary: var(--ld-col-vg);
--ld-thm-tea-success-active: var(--ld-col-vg-800);
--ld-thm-tea-success-focus: var(--ld-col-vg-200);
--ld-thm-tea-success-highlight: var(--ld-col-vg-010);
--ld-thm-tea-success-hover: var(--ld-col-vg-400);
--ld-thm-tea-success: var(--ld-col-vg-300);
--ld-thm-tea-success: var(--ld-col-vg);
--ld-thm-tea-warning-active: var(--ld-col-vy-800);
--ld-thm-tea-warning-focus: var(--ld-col-vy-100);
--ld-thm-tea-warning-highlight: var(--ld-col-vy-010);
--ld-thm-tea-warning-hover: var(--ld-col-vy-400);
--ld-thm-tea-warning: var(--ld-col-vy-200);
--ld-thm-tea-warning: var(--ld-col-vy);
--ld-thm-primary-highlight: var(--ld-thm-ocean-primary-highlight);
--ld-thm-primary-focus: var(--ld-thm-ocean-primary-focus);
--ld-thm-primary-hover: var(--ld-thm-ocean-primary-hover);
Expand Down
Loading

0 comments on commit 0bd1849

Please sign in to comment.