Skip to content

Brand color update: 14-step scale expansion for accessibility #1379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lukasoppermann wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Brand color update: 14-step scale expansion for accessibility #1379

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
599e4fd
chore: update brand colors in display-light token set
lukasoppermann May 5, 2026
606b01f
fix: correct StyleDictionary type import in Storybook utility
lukasoppermann May 5, 2026
2763b99
Expand display color scale from 10 to 14 steps for accessibility
lukasoppermann May 5, 2026
fb75605
Update display token step mappings for 14-step scale
lukasoppermann May 5, 2026
bda80c3
Darken gray, green, lime step 9 for 4.5:1 contrast
lukasoppermann May 5, 2026
d33178f
Map fgColor to step 11 for clean scale progression
lukasoppermann May 5, 2026
d5919b8
rm amber
lukasoppermann May 5, 2026
887815e
Add steps 10-13 to numbered scales in functional tokens
lukasoppermann May 5, 2026
e6c6d62
Fix numbered scales to 1:1 direct step mapping
lukasoppermann May 5, 2026
32928ca
Expand dark display colors to 14 steps and update borderColor-emphasi…
lukasoppermann May 6, 2026
88589b8
Reverse all dark theme colors so step 0 is darkest
lukasoppermann May 6, 2026
24a2bc3
Update dark theme borderColor-emphasis to use step 10 (matching light)
lukasoppermann May 6, 2026
dd18508
Fix: restore all 14 steps in dark colors after reversal
lukasoppermann May 6, 2026
0875585
Fix remaining 6 inverted dark colors
lukasoppermann May 6, 2026
5ef4fc0
Fix teal dark bgColor-emphasis contrast
lukasoppermann May 6, 2026
bd5aca4
Fix display color contrast failures at 4.5:1 standard
lukasoppermann May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/storybook/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ const config: StorybookConfig = {
'@storybook/addon-webpack5-compiler-swc',
'storybook-addon-paddings',
],
swc: () => ({
swc: ({configType}) => ({
jsc: {
transform: {
react: {
runtime: 'automatic',
development: configType === 'DEVELOPMENT',
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"build:preview": "npm run clean && scripts/build-storybook preview",
"build:prod": "npm run clean && scripts/build-storybook",
"clean": "rm -rf out",
"storybook": "storybook dev -p 6006 --ci",
"storybook": "NODE_ENV=development storybook dev -p 6006 --ci",
"build-storybook": "storybook build"
}
}
232 changes: 12 additions & 220 deletions docs/storybook/stories/Color/Base/Display-Scales.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,231 +8,22 @@ export default {
},
}

const bgColors = [
'base-display-color-gray-0',
'base-display-color-gray-1',
'base-display-color-gray-2',
'base-display-color-gray-3',
'base-display-color-gray-4',
'base-display-color-gray-5',
'base-display-color-gray-6',
'base-display-color-gray-7',
'base-display-color-gray-8',
'base-display-color-gray-9',
'base-display-color-indigo-0',
'base-display-color-indigo-1',
'base-display-color-indigo-2',
'base-display-color-indigo-3',
'base-display-color-indigo-4',
'base-display-color-indigo-5',
'base-display-color-indigo-6',
'base-display-color-indigo-7',
'base-display-color-indigo-8',
'base-display-color-indigo-9',
'base-display-color-blue-0',
'base-display-color-blue-1',
'base-display-color-blue-2',
'base-display-color-blue-3',
'base-display-color-blue-4',
'base-display-color-blue-5',
'base-display-color-blue-6',
'base-display-color-blue-7',
'base-display-color-blue-8',
'base-display-color-blue-9',
'base-display-color-cyan-0',
'base-display-color-cyan-1',
'base-display-color-cyan-2',
'base-display-color-cyan-3',
'base-display-color-cyan-4',
'base-display-color-cyan-5',
'base-display-color-cyan-6',
'base-display-color-cyan-7',
'base-display-color-cyan-8',
'base-display-color-cyan-9',
'base-display-color-teal-0',
'base-display-color-teal-1',
'base-display-color-teal-2',
'base-display-color-teal-3',
'base-display-color-teal-4',
'base-display-color-teal-5',
'base-display-color-teal-6',
'base-display-color-teal-7',
'base-display-color-teal-8',
'base-display-color-teal-9',
'base-display-color-pine-0',
'base-display-color-pine-1',
'base-display-color-pine-2',
'base-display-color-pine-3',
'base-display-color-pine-4',
'base-display-color-pine-5',
'base-display-color-pine-6',
'base-display-color-pine-7',
'base-display-color-pine-8',
'base-display-color-pine-9',
'base-display-color-green-0',
'base-display-color-green-1',
'base-display-color-green-2',
'base-display-color-green-3',
'base-display-color-green-4',
'base-display-color-green-5',
'base-display-color-green-6',
'base-display-color-green-7',
'base-display-color-green-8',
'base-display-color-green-9',
'base-display-color-lime-0',
'base-display-color-lime-1',
'base-display-color-lime-2',
'base-display-color-lime-3',
'base-display-color-lime-4',
'base-display-color-lime-5',
'base-display-color-lime-6',
'base-display-color-lime-7',
'base-display-color-lime-8',
'base-display-color-lime-9',
'base-display-color-olive-0',
'base-display-color-olive-1',
'base-display-color-olive-2',
'base-display-color-olive-3',
'base-display-color-olive-4',
'base-display-color-olive-5',
'base-display-color-olive-6',
'base-display-color-olive-7',
'base-display-color-olive-8',
'base-display-color-olive-9',
'base-display-color-lemon-0',
'base-display-color-lemon-1',
'base-display-color-lemon-2',
'base-display-color-lemon-3',
'base-display-color-lemon-4',
'base-display-color-lemon-5',
'base-display-color-lemon-6',
'base-display-color-lemon-7',
'base-display-color-lemon-8',
'base-display-color-lemon-9',
'base-display-color-yellow-0',
'base-display-color-yellow-1',
'base-display-color-yellow-2',
'base-display-color-yellow-3',
'base-display-color-yellow-4',
'base-display-color-yellow-5',
'base-display-color-yellow-6',
'base-display-color-yellow-7',
'base-display-color-yellow-8',
'base-display-color-yellow-9',
'base-display-color-orange-0',
'base-display-color-orange-1',
'base-display-color-orange-2',
'base-display-color-orange-3',
'base-display-color-orange-4',
'base-display-color-orange-5',
'base-display-color-orange-6',
'base-display-color-orange-7',
'base-display-color-orange-8',
'base-display-color-orange-9',
'base-display-color-amber-0',
'base-display-color-amber-1',
'base-display-color-amber-2',
'base-display-color-amber-3',
'base-display-color-amber-4',
'base-display-color-amber-5',
'base-display-color-amber-6',
'base-display-color-amber-7',
'base-display-color-amber-8',
'base-display-color-amber-9',
'base-display-color-red-0',
'base-display-color-red-1',
'base-display-color-red-2',
'base-display-color-red-3',
'base-display-color-red-4',
'base-display-color-red-5',
'base-display-color-red-6',
'base-display-color-red-7',
'base-display-color-red-8',
'base-display-color-red-9',
'base-display-color-purple-0',
'base-display-color-purple-1',
'base-display-color-purple-2',
'base-display-color-purple-3',
'base-display-color-purple-4',
'base-display-color-purple-5',
'base-display-color-purple-6',
'base-display-color-purple-7',
'base-display-color-purple-8',
'base-display-color-purple-9',
'base-display-color-plum-0',
'base-display-color-plum-1',
'base-display-color-plum-2',
'base-display-color-plum-3',
'base-display-color-plum-4',
'base-display-color-plum-5',
'base-display-color-plum-6',
'base-display-color-plum-7',
'base-display-color-plum-8',
'base-display-color-plum-9',
'base-display-color-pink-0',
'base-display-color-pink-1',
'base-display-color-pink-2',
'base-display-color-pink-3',
'base-display-color-pink-4',
'base-display-color-pink-5',
'base-display-color-pink-6',
'base-display-color-pink-7',
'base-display-color-pink-8',
'base-display-color-pink-9',
'base-display-color-coral-0',
'base-display-color-coral-1',
'base-display-color-coral-2',
'base-display-color-coral-3',
'base-display-color-coral-4',
'base-display-color-coral-5',
'base-display-color-coral-6',
'base-display-color-coral-7',
'base-display-color-coral-8',
'base-display-color-coral-9',
'base-display-color-brown-0',
'base-display-color-brown-1',
'base-display-color-brown-2',
'base-display-color-brown-3',
'base-display-color-brown-4',
'base-display-color-brown-5',
'base-display-color-brown-6',
'base-display-color-brown-7',
'base-display-color-brown-8',
'base-display-color-brown-9',
'base-display-color-auburn-0',
'base-display-color-auburn-1',
'base-display-color-auburn-2',
'base-display-color-auburn-3',
'base-display-color-auburn-4',
'base-display-color-auburn-5',
'base-display-color-auburn-6',
'base-display-color-auburn-7',
'base-display-color-auburn-8',
'base-display-color-auburn-9',
const displayColorNames = [
'gray', 'indigo', 'blue', 'cyan', 'teal', 'pine', 'green', 'lime', 'olive',
'lemon', 'yellow', 'amber', 'orange', 'red', 'coral', 'pink', 'plum', 'purple',
'brown', 'auburn',
Comment on lines +12 to +14
]

const bgColors = displayColorNames.flatMap(name =>
Array.from({length: 14}, (_, i) => `base-display-color-${name}-${i}`),
)

export const AllScales = () => {
return (
<div className="ColorScale--grid">
<Color color="gray" />
<Color color="indigo" />
<Color color="blue" />
<Color color="cyan" />
<Color color="teal" />
<Color color="pine" />
<Color color="green" />
<Color color="lime" />
<Color color="olive" />
<Color color="lemon" />
<Color color="yellow" />
<Color color="orange" />
<Color color="red" />
<Color color="coral" />
<Color color="pink" />
<Color color="plum" />
<Color color="purple" />
<Color color="brown" />
<Color color="auburn" />
{displayColorNames.map(name => (
<Color color={name} key={name} />
))}
</div>
)
}
Expand Down Expand Up @@ -260,6 +51,7 @@ export const Lime = () => <Color color="lime" />
export const Olive = () => <Color color="olive" />
export const Lemon = () => <Color color="lemon" />
export const Yellow = () => <Color color="yellow" />
export const Amber = () => <Color color="amber" />
export const Orange = () => <Color color="orange" />
export const Red = () => <Color color="red" />
export const Coral = () => <Color color="coral" />
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/utilities/getTokensByName.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type StyleDictionary from 'style-dictionary'
import type * as StyleDictionary from 'style-dictionary'

export const getTokensByName = (
tokens: Record<string, StyleDictionary.TransformedToken>,
Expand Down
Loading
Loading