Tokens: January Release

[aarshap]

This is a draft. Do not review yet!

This release contains updates outlined in this doc.

Note that this is a major release. Breaking changes are designated with the "needs engineering attention" label in the doc linked above.

• Refactored semantic tokens
• New background blur semantic tokens
• Updated values for existing base color tokens
• Descriptions added to some tokens (more to come in future updates)
• Misc. accessibility fixes

Changes:

New Background Blur Tokens

sema.elevation.background-blur.weak = 8px
sema.elevation.background-blur.default = 24px
sema.elevation.background-blur.strong = 64px

Renamed Elevation Tokens

sema.elevation.surface → sema.elevation.shadow.surface
sema.elevation.raised.default → sema.elevation.shadow.raised
sema.elevation.floating → sema.elevation.shadow.floating

Deprecated Elevation Tokens

sema.elevation.raised.top → sema.elevation.shadow.floating
sema.elevation.raised.bottom → sema.elevation.shadow.raised

Update Base Grayscale Values

// Base grayscale colors (default)
base.color.grayscale.25 = #F0F0EB
base.color.grayscale.50 = #E0E0D9
base.color.grayscale.100 = #D1D1C7
base.color.grayscale.150 = #C2C2B6
base.color.grayscale.200 = #949486
base.color.grayscale.250 = #757569
base.color.grayscale.300 = #57574C
base.color.grayscale.350 = #47473F
base.color.grayscale.400 = #363630
base.color.grayscale.450 = #272721

// Base grayscale colors (hover)
base.color.hover.grayscale.0 = #F0F0EB
base.color.hover.grayscale.25 = #DEDED3
base.color.hover.grayscale.50 = #CDCDC1
base.color.hover.grayscale.100 = #BFBFB0
base.color.hover.grayscale.150 = #B0B0A1
base.color.hover.grayscale.200 = #949486
base.color.hover.grayscale.250 = #616157
base.color.hover.grayscale.300 = #414139
base.color.hover.grayscale.350 = #31312B
base.color.hover.grayscale.400 = #20201D
base.color.hover.grayscale.450 = #3D3D34
base.color.hover.grayscale.500 = #272721

// Base grayscale colors (pressed)
base.color.pressed.grayscale.0 = #DEDED3
base.color.pressed.grayscale.25 = #CDCDBC
base.color.pressed.grayscale.50 = #BABAAB
base.color.pressed.grayscale.100 = #ADAD9A
base.color.pressed.grayscale.150 = #9D9D8A
base.color.pressed.grayscale.200 = #7A7A6C
base.color.pressed.grayscale.250 = #4B4B44
base.color.pressed.grayscale.300 = #2C2C26
base.color.pressed.grayscale.350 = #1B1B18
base.color.pressed.grayscale.400 = #0B0B0A
base.color.pressed.grayscale.450 = #535346
base.color.pressed.grayscale.500 = #3D3D34

// Semantic colors
sema.color.background.secondary = {base.color.grayscale.50}

Update Disabled Token Contrast

UPDATED TOKEN VALUES
sema.color.background.disabled = {base.color.grayscale.450}
sema.color.text.disabled = {base.color.grayscale.300}

[netlify]

✅ Deploy Preview for gestalt ready!

Name	Link
🔨 Latest commit	efb70b4
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/677ee6a7f15e56000871ebb2
😎 Deploy Preview	https://deploy-preview-3923--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.