diff --git a/.changeset/add-new-brand-colors.md b/.changeset/add-new-brand-colors.md new file mode 100644 index 0000000..d3b9b92 --- /dev/null +++ b/.changeset/add-new-brand-colors.md @@ -0,0 +1,200 @@ +--- +"@rhds/tokens": major +--- + +# Crayon color updates + +Crayon color token names and values were changed to match the [new Red Hat color palette](https://www.redhat.com/en/about/brand/standards/color). + +To help you make these changes, use the [RHDS Stylelint Plugin](https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint).If you'd like more information about Stylelint, visit [stylelint.io](http://stylelint.io/). + +Stylelint's migration rule can take a dictionary of names to migrate, and if it finds one of the specified names, it will automatically replace it with the new one. The rules below indicate how color tokens in 1.0 map to those in 2.0 and can be copied and pasted into your own repo. + +```yaml +rules: + rhds/no-unknown-token-value: + - true + - migrations: + # reds + --rh-color-red-50: --rh-color-red-10 + --rh-color-red-100: --rh-color-red-20 + --rh-color-red-200: --rh-color-red-30 + --rh-color-red-300: --rh-color-red-40 + --rh-color-red-400: --rh-color-red-50 + --rh-color-red-500: --rh-color-red-50 + --rh-color-red-600: --rh-color-red-60 + --rh-color-red-700: --rh-color-red 60 + --rh-color-red-800: --rh-color-red-70 + # oranges + --rh-color-orange-50: --rh-color-orange-10 + --rh-color-orange-100: --rh-color-orange-30 + --rh-color-orange-300: --rh-color-orange-40 + --rh-color-orange-500: --rh-color-orange-60 + --rh-color-orange-700: --rh-color-orange-70 + # yellows (previously golds) + --rh-color-gold-50: --rh-color-yellow-10 + --rh-color-gold-400: --rh-color-yellow-40 + --rh-color-gold-600: --rh-color-yellow-70 + # greens + --rh-color-green-50: --rh-color-green-10 + --rh-color-green-100: --rh-color-green-20 + --rh-color-green-500: --rh-color-green-60 + --rh-color-green-600: --rh-color-green-70 + # teals (previously cyans) + --rh-color-cyan-50: --rh-color-teal-10 + --rh-color-cyan-100: --rh-color-teal-30 + --rh-color-cyan-300: --rh-color-teal-50 + --rh-color-cyan-400: --rh-color-teal-60 + --rh-color-cyan-500: --rh-color-teal-70 + # blues + --rh-color-blue-50: --rh-color-blue-10 + --rh-color-blue-100: --rh-color-blue-20 + --rh-color-blue-200: --rh-color-blue-30 + --rh-color-blue-250: --rh-color-blue-40 + --rh-color-blue-400: --rh-color-blue-50 + --rh-color-blue-500: --rh-color-blue-60 + --rh-color-blue-600: --rh-color-blue-70 + # purples + --rh-color-purple-50: --rh-color-purple-10 + --rh-color-purple-100: --rh-color-purple-20 + --rh-color-purple-300: --rh-color-purple-40 + --rh-color-purple-500: --rh-color-purple-60 + --rh-color-purple-700: --rh-color-purple-70 + # grays + --rh-color-gray-05: --rh-color-gray-10 + --rh-color-gray-10: --rh-color-gray-20 + --rh-color-gray-20: --rh-color-gray-30 + --rh-color-gray-30: --rh-color-gray-40 + --rh-color-gray-40: --rh-color-gray-50 + --rh-color-gray-50: --rh-color-gray-60 + --rh-color-gray-60: --rh-color-gray-70 + --rh-color-gray-70: --rh-color-gray-80 + --rh-color-gray-80: --rh-color-gray-90 + --rh-color-gray-90: --rh-color-gray-95 + --rh-color-black: --rh-color-gray-100 +``` + +There are several new crayon color tokens that have been added and do not directly map to a 1.0 token. These include: + +- `--rh-color-red-orange-10` +- `--rh-color-red-orange-20` +- `--rh-color-red-orange-30` +- `--rh-color-red-orange-40` +- `--rh-color-red-orange-50` + +- `--rh-color-orange-20` +- `--rh-color-orange-50` + +- `--rh-color-yellow-20` +- `--rh-color-yellow-30` +- `--rh-color-yellow-50` +- `--rh-color-yellow-60` + +- `--rh-color-green-30` +- `--rh-color-green-40` +- `--rh-color-green-50` + +- `--rh-color-teal-20` +- `--rh-color-teal-40` + +- `--rh-color-purple-30` +- `--rh-color-purple-50` + + + +## Semantic token value changes + +The following semantic token values changed, but the token names did not. In many cases, you may automatically migrate these tokens using the `rhds/token-values` stylelint rule. + +~~~yaml +rules: + rhds/token-values: true +~~~ + +### Accent + +| Semantic token | Old crayon token value | New crayon token value | +| ----------------------- | ---------------------- | ---------------------- | +| `accent-base-on-light` | `blue-400` | `blue-50` | +| `accent-base-on-dark` | `blue-200` | `blue-30` | +| `accent-brand-on-light` | `red-500` | `brand-red-on-light` | +| `accent-brand-on-dark` | `red-400` | `brand-red-on-dark` | + +### Border + +| Semantic token | Old crayon token value | New crayon token value | +| ----------------------------- | ---------------------- | ---------------------- | +| `border-strong-on-light` | `gray-90` | `gray-95` | +| `border-strong-on-dark` | `white` | `white` | +| `border-subtle-on-light` | `gray-20` | `gray-30` | +| `border-subtle-on-dark` | `gray-40` | `gray-50` | +| `border-interactive-on-light` | `blue-400` | `blue-50` | +| `border-interactive-on-dark` | `blue-200` | `blue-30` | + +### Brand + +| Semantic token | Old crayon token value | New crayon token value | +| -------------------- | ---------------------- | ---------------------- | +| `brand-red-lightest` | `red-100` | `red-10` | +| `brand-red-lighter` | `red-200` | `red-20` | +| `brand-red-light` | `red-300` | `red-40` | +| `brand-red-dark` | `red-600` | `red-60` | +| `brand-red-darker` | `red-700` | `red-70` | +| `brand-red-darkest` | `red-800` | `red-70` | +| `brand-red-on-light` | `red-500` | `red-50` | +| `brand-red-on-dark` | `red-400` | `red-50` | + +### Canvas + +| Semantic token | Old crayon token value | New crayon token value | +| -------------- | ---------------------- | ---------------------- | +| `canvas-white` | `white` | `white` | +| `canvas-black` | `gray-90` | `gray-95` | + +### Icon + +| Semantic token | Old crayon token value | New crayon token value | +| ------------------------- | ---------------------- | ---------------------- | +| `icon-primary-on-light` | `brand-red-on-light` | `brand-red-on-light` | +| `icon-primary-on-dark` | `brand-red-on-dark` | `brand-red-on-dark` | +| `icon-secondary-on-light` | `gray-90` | `gray-95` | +| `icon-secondary-on-dark` | `white` | `gray-50` | +| `icon-subtle` | `gray-40` | `gray-50` | +| `icon-subtle-hover` | `gray-30` | `gray-40` | + +### Interactive + +| Semantic token | Old crayon token value | New crayon token value | +| ----------------------------- | ---------------------- | ---------------------- | +| `interactive-blue-lightest` | `blue-100` | `blue-20` | +| `interactive-blue-lighter` | `blue-200` | `blue-30` | +| `interactive-blue-darker` | `blue-400` | `blue-50` | +| `interactive-blue-darkest` | `blue-500` | `blue-70` | +| `interactive-purple-lightest` | `purple-100` | `purple-10` | +| `interactive-purple-lighter` | `purple-300` | `purple-30` | +| `interactive-purple-darker` | `purple-500` | `purple-50` | +| `interactive-purple-darkest` | `purple-700` | `purple-70` | + +### Surface + +| Semantic token | Old crayon token value | New crayon token value | +| ------------------ | ---------------------- | ---------------------- | +| `surface-lightest` | `white` | `white` | +| `surface-lighter` | `gray-05` | `gray-10` | +| `surface-light` | `gray-10` | `gray-20` | +| `surface-dark` | `gray-60` | `gray-70` | +| `surface-dark-alt` | `gray-70` | `gray-80` | +| `surface-darker` | `gray-80` | `gray-90` | +| `surface-darkest` | `gray-90` | `gray-95` | + + +### Text + +| Semantic token | Old crayon token value | New crayon token value | +| ------------------------- | ---------------------- | ---------------------- | +| `text-primary-on-light` | `gray-90` | `gray-95` | +| `text-primary-on-dark` | `white` | `white` | +| `text-secondary-on-light` | `gray-50` | `gray-60` | +| `text-secondary-on-dark` | `gray-20` | `gray-30` | +| `text-brand-on-light` | `red-500` | `brand-red-on-light` | +| `text-brand-on-dark` | `red-400` | `brand-red-on-dark` | \ No newline at end of file diff --git a/plugins/stylelint/README.md b/plugins/stylelint/README.md index 002865b..0f87206 100644 --- a/plugins/stylelint/README.md +++ b/plugins/stylelint/README.md @@ -37,6 +37,6 @@ rules: rhds/no-unknown-token-value: - true - migrations: - # instances of black-900 will be replaced with gray-90 - --rh-color-black-900: --rh-color-gray-90 + # instances of gray-90 will be replaced with gray-95 + --rh-color-gray-90: --rh-color-gray-95 ``` diff --git a/tokens/color/accent.yml b/tokens/color/accent.yml index 02962b5..7cdec5e 100644 --- a/tokens/color/accent.yml +++ b/tokens/color/accent.yml @@ -7,15 +7,15 @@ color: base: on-light: - $value: '{color.blue.400}' + $value: '{color.blue.50}' $description: Inline link (light theme) on-dark: - $value: '{color.blue.200}' + $value: '{color.blue.30}' $description: Inline link (dark theme) brand: on-light: - $value: '{color.red.500}' + $value: '{color.brand.red.on-light}' $description: Brand red (light theme) on-dark: - $value: '{color.red.400}' + $value: '{color.brand.red.on-dark}' $description: Brand red (dark theme) diff --git a/tokens/color/border.yml b/tokens/color/border.yml index 48240e3..a42fcc3 100644 --- a/tokens/color/border.yml +++ b/tokens/color/border.yml @@ -9,7 +9,7 @@ color: strong: on-light: - $value: '{color.gray.90}' + $value: '{color.gray.95}' $description: Strong border color (light theme) attributes: category: border @@ -23,13 +23,13 @@ color: subtle: on-light: - $value: '{color.gray.20}' + $value: '{color.gray.30}' $description: Subtle border color (light theme) attributes: category: border type: color on-dark: - $value: '{color.gray.40}' + $value: '{color.gray.50}' $description: Subtle border color (dark theme) attributes: category: border @@ -37,13 +37,13 @@ color: interactive: on-light: - $value: '{color.blue.400}' + $value: '{color.blue.50}' $description: Interactive border color (light theme) attributes: category: border type: color on-dark: - $value: '{color.blue.200}' + $value: '{color.blue.30}' $description: Interactive border color (dark theme) attributes: category: border diff --git a/tokens/color/brand.yml b/tokens/color/brand.yml index 43ef15f..fe787f0 100644 --- a/tokens/color/brand.yml +++ b/tokens/color/brand.yml @@ -15,29 +15,29 @@ color: [Brand standards](https://www.redhat.com/en/about/brand/standards/color) page. lightest: - $value: '{color.red.100}' + $value: '{color.red.20}' $description: Lightest brand red lighter: - $value: '{color.red.200}' + $value: '{color.red.30}' $description: lighter brand red light: - $value: '{color.red.300}' + $value: '{color.red.40}' $description: Light brand red dark: - $value: '{color.red.600}' + $value: '{color.red.60}' $description: Dark brand red/Brand red hover darker: - $value: '{color.red.700}' + $value: '{color.red.70}' $description: Darker brand red darkest: - $value: '{color.red.800}' + $value: '{color.red.70}' $description: Darkest brand red on-dark: - $value: '{color.red.400}' + $value: '{color.red.50}' $description: Brand red on dark background on-light: - $value: '{color.red.500}' + $value: '{color.red.50}' $description: Brand red on light background diff --git a/tokens/color/canvas.yaml b/tokens/color/canvas.yaml index b2c203b..b117079 100644 --- a/tokens/color/canvas.yaml +++ b/tokens/color/canvas.yaml @@ -10,5 +10,5 @@ color: $value: '{color.white}' $description: Primary canvas (light theme) black: - $value: '{color.gray.90}' + $value: '{color.gray.95}' $description: Primary canvas (dark theme) diff --git a/tokens/color/crayon/blue.yaml b/tokens/color/crayon/blue.yaml index 28d3b23..5604927 100644 --- a/tokens/color/crayon/blue.yaml +++ b/tokens/color/crayon/blue.yaml @@ -3,22 +3,24 @@ color: $extensions: com.redhat.ux: order: 301 - 50: - $value: '#e7f1fa' + 10: + $value: '#E0F0FF' $description: Alert - Info background - 100: - $value: '#bee1f4' + 20: + $value: '#B9DAFC' $description: Label - Filled (Blue) border color - 200: - $value: '#73bcf7' - 250: - $value: '#2b9af3' + 30: + $value: '#92C5F9' + $description: Inline link (dark theme) + 40: + $value: '#4394E5' $description: Alert - Info accent - 400: - $value: '#0066cc' + 50: + $value: '#0066CC' $description: Label - Filled (Blue) accent color - 500: - $value: '#004080' - 600: - $value: '#002952' - $description: Alert - Info title text + 60: + $value: '#004D99' + $description: Inline link hover (light theme) + 70: + $value: '#003366' + $description: Alert - Info title text \ No newline at end of file diff --git a/tokens/color/crayon/cyan.yml b/tokens/color/crayon/cyan.yml deleted file mode 100644 index 7111ddf..0000000 --- a/tokens/color/crayon/cyan.yml +++ /dev/null @@ -1,20 +0,0 @@ -color: - cyan: - $extensions: - com.redhat.ux: - order: 302 - 50: - $value: '#f2f9f9' - $description: Alert - Default background - 100: - $value: '#a2d9d9' - $description: Label (Cyan) border color - 300: - $value: '#009596' - $description: Alert - Default accent - 400: - $value: '#005f60' - $description: Alert - Default accent - 500: - $value: '#003737' - $description: Alert - Default title text diff --git a/tokens/color/crayon/gold.yml b/tokens/color/crayon/gold.yml deleted file mode 100644 index e7bf2ac..0000000 --- a/tokens/color/crayon/gold.yml +++ /dev/null @@ -1,14 +0,0 @@ -color: - gold: - $extensions: - com.redhat.ux: - order: 303 - 50: - $value: '#fdf7e7' - $description: Alert - Warning background - 400: - $value: '#f0ab00' - $description: Alert - Warning accent - 600: - $value: '#795600' - $description: Alert - Warning title text diff --git a/tokens/color/crayon/gray.yaml b/tokens/color/crayon/gray.yaml index 580f5d5..3ad7fbe 100644 --- a/tokens/color/crayon/gray.yaml +++ b/tokens/color/crayon/gray.yaml @@ -13,52 +13,52 @@ color: In addition to white and black, each theme features various shades of gray. Be mindful of accessibility when using text or components on top of shades of gray. - '05': + '10': $value: '#F2F2F2' $description: Tertiary surface (light theme) attributes: type: gray - '10': + '20': $value: '#E0E0E0' $description: Secondary surface (light theme) attributes: type: gray - '20': + '30': $value: '#C7C7C7' $description: Subtle borders (light theme) attributes: type: gray - '30': + '40': $value: '#A3A3A3' $description: Subtle icon (hover state) attributes: type: gray - '40': + '50': $value: '#707070' $description: Subtle icon attributes: type: gray - '50': + '60': $value: '#4D4D4D' $description: Secondary text (light theme) attributes: type: gray - '60': + '70': $value: '#383838' $description: Tertiary surface (dark theme) attributes: type: gray - '70': + '80': $value: '#292929' - $description: + $description: Alternative tertiary surface (not available for use with context provider) attributes: type: gray - '80': + '90': $value: '#1F1F1F' $description: Secondary surface (dark theme) attributes: type: gray - '90': + '95': $value: '#151515' $description: Primary surface (dark theme) or primary text (light theme) attributes: @@ -68,4 +68,4 @@ color: $value: '#000000' $description: Brand black (avoid using) attributes: - type: gray + type: gray \ No newline at end of file diff --git a/tokens/color/crayon/green.yml b/tokens/color/crayon/green.yml index 08e8532..249c1c7 100644 --- a/tokens/color/crayon/green.yml +++ b/tokens/color/crayon/green.yml @@ -3,15 +3,24 @@ color: $extensions: com.redhat.ux: order: 304 - 50: - $value: '#f3faf2' - $description: alert - success background - 100: - $value: '#bde5b8' + description: >- + The green color is primarily used to indicate a success state, but it can also be used sparingly in other situations where green is needed. + 10: + $value: '#E9F7DF' + $description: Alert - success background + 20: + $value: '#D1F1BB' $description: Label - Filled (Green) border color - 500: - $value: '#3e8635' + 30: + $value: '#AFDC8F' + 40: + $value: '#87BB62' + 50: + $value: '#63993D' + $description: + 60: + $value: '#3D7317' $description: Alert - Success accent - 600: - $value: '#1e4f18' - $description: Alert - Success title text + 70: + $value: '#204D00' + $description: Alert - Success title text \ No newline at end of file diff --git a/tokens/color/crayon/orange.yml b/tokens/color/crayon/orange.yml index 8f25c14..7da6ac5 100644 --- a/tokens/color/crayon/orange.yml +++ b/tokens/color/crayon/orange.yml @@ -3,18 +3,22 @@ color: $extensions: com.redhat.ux: order: 305 - 50: - $value: '#fff6ec' + 10: + $value: '#FFE8CC' $description: Label - Filled (Orange) background color - 100: - $value: '#f4b678' + 20: + $value: '#FCCB8F' + 30: + $value: '#F8AE54' $description: Label - Filled (Orange) border color - 300: - $value: '#ec7a08' + 40: + $value: '#F5921B' $description: Label - Filled (Orange) accent color - 500: - $value: '#8f4700' + 50: + $value: '#CA6C0F' $description: Label - Filled (Orange) accent color - 700: - $value: '#3b1f00' - $description: Label - Filled (Orange) text color + 60: + $value: '#9E4A06' + 70: + $value: '#732E00' + $description: Label - Filled (Orange) text color \ No newline at end of file diff --git a/tokens/color/crayon/purple.yaml b/tokens/color/crayon/purple.yaml index 34c34a0..b120fae 100644 --- a/tokens/color/crayon/purple.yaml +++ b/tokens/color/crayon/purple.yaml @@ -3,14 +3,22 @@ color: $extensions: com.redhat.ux: order: 306 - 50: - $value: '#f2f0fc' + 10: + $value: '#ECE6FF' $description: Label - Filled (Purple) background color - 100: - $value: '#cbc1ff' - 300: - $value: '#a18fff' - 500: - $value: '#6753ac' - 700: - $value: '#1f0066' + 20: + $value: '#D0C5F4' + $description: Inline link visited hover (dark theme) + 30: + $value: '#B6A6E9' + 40: + $value: '#876FD4' + $description: Inline link visited (dark theme) + 50: + $value: '#5E40BE' + 60: + $value: '#3D2785' + $description: Inline link visited (light theme) + 70: + $value: '#21134D' + $description: Inline link visited hover (light theme) \ No newline at end of file diff --git a/tokens/color/crayon/red-orange.yaml b/tokens/color/crayon/red-orange.yaml new file mode 100644 index 0000000..7f01170 --- /dev/null +++ b/tokens/color/crayon/red-orange.yaml @@ -0,0 +1,22 @@ +color: + red-orange: + $extensions: + com.redhat.ux: + order: 303 + description: >- + The red orange color is reserved for danger or error states. Do not use it anywhere else. + + 10: + $value: '#FFE3D9' + 20: + $value: '#FBBEA8' + 30: + $value: '#F89B78' + 40: + $value: '#F4784A' + 50: + $value: '#F4784A' + 60: + $value: '#B1380B' + 70: + $value: '#731F00' \ No newline at end of file diff --git a/tokens/color/crayon/red.yaml b/tokens/color/crayon/red.yaml index bc3682c..5a9641c 100644 --- a/tokens/color/crayon/red.yaml +++ b/tokens/color/crayon/red.yaml @@ -3,30 +3,26 @@ color: $extensions: com.redhat.ux: order: 300 + description: >- + Avoid using *any* red color token for danger or error messaging. + 10: + $value: '#FCE3E3' + $description: + 20: + $value: '#FBC5C5' + $description: Lightest brand red + 30: + $value: '#F9A8A8' + $description: Lighter brand red + 40: + $value: '#F56E6E' + $description: Light brand red 50: - $value: '#faeae8' - $description: Alert - Critical background - 100: - $value: '#fddbdb' - $description: Lightest red - 200: - $value: '#fab6b6' - $description: Lighter red - 300: - $value: '#f56d6d' - $description: Light red - 400: - $value: '#ff442b' - $description: Brand red (dark theme) - 500: - $value: '#ee0000' - $description: Brand red (light theme) - 600: - $value: '#be0000' - $description: Dark red or brand red hover - 700: - $value: '#8f0000' - $description: Darker red - 800: - $value: '#5f0000' - $description: Darkest red + $value: '#EE0000' + $description: Brand red (light and dark theme) + 60: + $value: '#A60000' + $description: Dark brand red + 70: + $value: '#5F0000' + $description: Darker brand red \ No newline at end of file diff --git a/tokens/color/crayon/teal.yaml b/tokens/color/crayon/teal.yaml new file mode 100644 index 0000000..ce16d22 --- /dev/null +++ b/tokens/color/crayon/teal.yaml @@ -0,0 +1,25 @@ +# Teal replaces cyan from RHDS Tokens 1.0 + +color: + teal: + $extensions: + com.redhat.ux: + order: 302 + 10: + $value: '#DAF2F2' + $description: Alert - Default background + 20: + $value: '#B9E5E5' + 30: + $value: '#9AD8D8' + $description: Label (Cyan) border color + 40: + $value: '#63BDBD' + 50: + $value: '#37A3A3' + $description: Alert - Default accent + 60: + $value: '#147878' + 70: + $value: '#004D4D' + $description: Alert - Default title text \ No newline at end of file diff --git a/tokens/color/crayon/yellow.yaml b/tokens/color/crayon/yellow.yaml new file mode 100644 index 0000000..da6fc13 --- /dev/null +++ b/tokens/color/crayon/yellow.yaml @@ -0,0 +1,24 @@ +#Yellow replaces gold from RHDS Tokens 1.0 + +color: + yellow: + $extensions: + com.redhat.ux: + order: 303 + 10: + $value: '#FFF4CC' + $description: Alert - Warning background + 20: + $value: '#FFE072' + 30: + $value: '#FFCC17' + 40: + $value: '#DCA614' + $description: Alert - Warning accent + 50: + $value: '#B98412' + 60: + $value: '#96640F' + 70: + $value: '#73480B' + $description: Alert - Warning title text \ No newline at end of file diff --git a/tokens/color/icon.yml b/tokens/color/icon.yml index 5e6e234..44689d4 100644 --- a/tokens/color/icon.yml +++ b/tokens/color/icon.yml @@ -20,7 +20,7 @@ color: secondary: on-light: - $value: '{color.gray.90}' + $value: '{color.gray.95}' attributes: category: icon type: color @@ -33,12 +33,12 @@ color: subtle: # @see https://github.com/amzn/style-dictionary/issues/716#issuecomment-943673202 _: - $value: '{color.gray.40}' + $value: '{color.gray.50}' attributes: category: icon type: color hover: - $value: '{color.gray.30}' + $value: '{color.gray.40}' attributes: category: icon type: color diff --git a/tokens/color/interactive.yaml b/tokens/color/interactive.yaml index 793ec6e..9f63f20 100644 --- a/tokens/color/interactive.yaml +++ b/tokens/color/interactive.yaml @@ -9,28 +9,28 @@ color: blue: lightest: - $value: '{color.blue.100}' + $value: '{color.blue.20}' $description: Inline link hover (dark theme) lighter: - $value: '{color.blue.200}' + $value: '{color.blue.30}' $description: Inline link (dark theme) darker: - $value: '{color.blue.400}' + $value: '{color.blue.50}' $description: Inline link (light theme) darkest: - $value: '{color.blue.500}' + $value: '{color.blue.70}' $description: Inline link hover (light theme) purple: lightest: - $value: '{color.purple.100}' + $value: '{color.purple.10}' $description: Inline link visited hover (dark theme) lighter: - $value: '{color.purple.300}' + $value: '{color.purple.30}' $description: Inline link visited (dark theme) darker: - $value: '{color.purple.500}' + $value: '{color.purple.50}' $description: Inline link visited (light theme) darkest: - $value: '{color.purple.700}' + $value: '{color.purple.70}' $description: Inline link visited hover (light theme) diff --git a/tokens/color/surface.yaml b/tokens/color/surface.yaml index 63e6182..881f757 100644 --- a/tokens/color/surface.yaml +++ b/tokens/color/surface.yaml @@ -8,20 +8,20 @@ color: $value: '{color.white}' $description: Primary surface (light theme) lighter: - $value: '{color.gray.05}' + $value: '{color.gray.10}' $description: Tertiary surface (light theme) light: - $value: '{color.gray.10}' + $value: '{color.gray.20}' $description: Secondary surface (light theme) dark: - $value: '{color.gray.60}' + $value: '{color.gray.70}' $description: Tertiary surface (dark theme) dark-alt: - $value: '{color.gray.70}' + $value: '{color.gray.80}' $description: Alternative tertiary surface (not available for use with context provider) darker: - $value: '{color.gray.80}' + $value: '{color.gray.90}' $description: Secondary surface (dark theme) darkest: - $value: '{color.gray.90}' + $value: '{color.gray.95}' $description: Primary surface (dark theme) diff --git a/tokens/color/text.yaml b/tokens/color/text.yaml index 4f0654c..b3c0d6a 100644 --- a/tokens/color/text.yaml +++ b/tokens/color/text.yaml @@ -28,7 +28,7 @@ color: primary: on-light: - $value: '{color.gray.90}' + $value: '{color.gray.95}' $description: Primary text color for light theme attributes: category: typography @@ -41,26 +41,26 @@ color: type: color secondary: on-light: - $value: '{color.gray.50}' + $value: '{color.gray.60}' $description: Secondary text color for light theme attributes: category: typography type: color on-dark: - $value: '{color.gray.20}' + $value: '{color.gray.30}' $description: Secondary text color for dark theme attributes: category: typography type: color brand: on-light: - $value: '{color.red.500}' + $value: '{color.brand.red.on-light}' $description: Brand text color for light theme attributes: category: typography type: color on-dark: - $value: '{color.red.400}' + $value: '{color.brand.red.on-dark}' $description: Brand text color for dark theme attributes: category: typography