Skip to content

Commit 58eb055

Browse files
aduthaduth
committed
Theme: Simplify ramp object by flattening warnings to optional top-level property
1 parent 17abf98 commit 58eb055

File tree

10 files changed

+11927
-41453
lines changed

10 files changed

+11927
-41453
lines changed

‎packages/theme/bin/generate-primitive-tokens/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function generatePrimitiveColorTokens() {
8787
ramp.ramp
8888
) ) {
8989
colorJson.color.primitive[ scaleName ][ tokenName ] = {
90-
$value: transformColorStringToDTCGValue( tokenValue.color ),
90+
$value: transformColorStringToDTCGValue( tokenValue ),
9191
};
9292
}
9393
} );

‎packages/theme/src/color-ramps/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
4444
pinLightness: {
4545
stepName: STEP_TO_PIN,
4646
value: clampAccentScaleReferenceLightness(
47-
get( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),
47+
get( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),
4848
ramp.direction
4949
),
5050
},
@@ -96,8 +96,8 @@ export function checkAccessibleCombinations( {
9696
CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
9797
for ( const bg of bgs ) {
9898
for ( const fg of fgs ) {
99-
const bgColor = parse( ramp.ramp[ bg ].color );
100-
const fgColor = parse( ramp.ramp[ fg ].color );
99+
const bgColor = parse( ramp.ramp[ bg ] );
100+
const fgColor = parse( ramp.ramp[ fg ] );
101101
if ( getContrast( bgColor, fgColor ) < target ) {
102102
unmetTargets.push( {
103103
bgName: bg,
@@ -116,8 +116,8 @@ export function checkAccessibleCombinations( {
116116
CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
117117
for ( const bg of bgs ) {
118118
for ( const fg of fgs ) {
119-
const bgColor = parse( bgRamp.ramp[ bg ].color );
120-
const fgColor = parse( ramp.ramp[ fg ].color );
119+
const bgColor = parse( bgRamp.ramp[ bg ] );
120+
const fgColor = parse( ramp.ramp[ fg ] );
121121
if ( getContrast( bgColor, fgColor ) < target ) {
122122
unmetTargets.push( {
123123
bgName: bg,

‎packages/theme/src/color-ramps/lib/default-ramps.ts‎

Lines changed: 154 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -10,190 +10,190 @@ export const DEFAULT_RAMPS: Record<
1010
> = {
1111
bg: {
1212
ramp: {
13-
surface2: { color: '#f8f8f8', warning: false },
14-
bgFill1: { color: '#555', warning: false },
15-
fgFill: { color: '#f0f0f0', warning: false },
16-
bgFill2: { color: '#494949', warning: false },
17-
surface6: { color: '#d3d3d3', warning: false },
18-
surface5: { color: '#e3e3e3', warning: false },
19-
surface4: { color: '#eaeaea', warning: false },
20-
surface3: { color: '#fff', warning: false },
21-
fgSurface4: { color: '#1e1e1e', warning: false },
22-
fgSurface3: { color: '#6e6e6e', warning: false },
23-
fgSurface2: { color: '#8b8b8b', warning: false },
24-
fgSurface1: { color: '#ababab', warning: false },
25-
stroke3: { color: '#8b8b8b', warning: false },
26-
stroke4: { color: '#6d6d6d', warning: false },
27-
stroke2: { color: '#adadad', warning: false },
28-
stroke1: { color: '#cfcfcf', warning: false },
29-
bgFillDark: { color: '#1e1e1e', warning: false },
30-
fgFillDark: { color: '#f0f0f0', warning: false },
31-
bgFillInverted2: { color: '#1e1e1e', warning: false },
32-
bgFillInverted1: { color: '#2d2d2d', warning: false },
33-
fgFillInverted: { color: '#f0f0f0', warning: false },
34-
surface1: { color: '#f0f0f0', warning: false },
13+
surface2: '#f8f8f8',
14+
bgFill1: '#555',
15+
fgFill: '#f0f0f0',
16+
bgFill2: '#494949',
17+
surface6: '#d3d3d3',
18+
surface5: '#e3e3e3',
19+
surface4: '#eaeaea',
20+
surface3: '#fff',
21+
fgSurface4: '#1e1e1e',
22+
fgSurface3: '#6e6e6e',
23+
fgSurface2: '#8b8b8b',
24+
fgSurface1: '#ababab',
25+
stroke3: '#8b8b8b',
26+
stroke4: '#6d6d6d',
27+
stroke2: '#adadad',
28+
stroke1: '#cfcfcf',
29+
bgFillDark: '#1e1e1e',
30+
fgFillDark: '#f0f0f0',
31+
bgFillInverted2: '#1e1e1e',
32+
bgFillInverted1: '#2d2d2d',
33+
fgFillInverted: '#f0f0f0',
34+
surface1: '#f0f0f0',
3535
},
3636
direction: 'darker',
3737
},
3838
primary: {
3939
ramp: {
40-
bgFill1: { color: '#3858e9', warning: false },
41-
fgFill: { color: '#eff0f2', warning: false },
42-
bgFill2: { color: '#2e49da', warning: false },
43-
surface2: { color: '#f6f8fc', warning: false },
44-
surface6: { color: '#c7d3ef', warning: false },
45-
surface5: { color: '#dce3f5', warning: false },
46-
surface4: { color: '#e5ebf7', warning: false },
47-
surface3: { color: '#fff', warning: false },
48-
fgSurface4: { color: '#080071', warning: false },
49-
fgSurface3: { color: '#3858e9', warning: false },
50-
fgSurface2: { color: '#5881ff', warning: false },
51-
fgSurface1: { color: '#84a9ff', warning: false },
52-
stroke3: { color: '#3858e9', warning: false },
53-
stroke4: { color: '#2337c8', warning: false },
54-
stroke2: { color: '#6d83bf', warning: false },
55-
stroke1: { color: '#91a2cf', warning: false },
56-
bgFillDark: { color: '#1b1e26', warning: false },
57-
fgFillDark: { color: '#eff0f2', warning: false },
58-
bgFillInverted2: { color: '#1b1e26', warning: false },
59-
bgFillInverted1: { color: '#12009f', warning: false },
60-
fgFillInverted: { color: '#eff0f2', warning: false },
61-
surface1: { color: '#edf0fa', warning: false },
40+
bgFill1: '#3858e9',
41+
fgFill: '#eff0f2',
42+
bgFill2: '#2e49da',
43+
surface2: '#f6f8fc',
44+
surface6: '#c7d3ef',
45+
surface5: '#dce3f5',
46+
surface4: '#e5ebf7',
47+
surface3: '#fff',
48+
fgSurface4: '#080071',
49+
fgSurface3: '#3858e9',
50+
fgSurface2: '#5881ff',
51+
fgSurface1: '#84a9ff',
52+
stroke3: '#3858e9',
53+
stroke4: '#2337c8',
54+
stroke2: '#6d83bf',
55+
stroke1: '#91a2cf',
56+
bgFillDark: '#1b1e26',
57+
fgFillDark: '#eff0f2',
58+
bgFillInverted2: '#1b1e26',
59+
bgFillInverted1: '#12009f',
60+
fgFillInverted: '#eff0f2',
61+
surface1: '#edf0fa',
6262
},
6363
direction: 'darker',
6464
},
6565
info: {
6666
ramp: {
67-
bgFill1: { color: '#0090ff', warning: false },
68-
fgFill: { color: '#1b1e23', warning: false },
69-
bgFill2: { color: '#0081ef', warning: false },
70-
surface2: { color: '#f5f9fd', warning: false },
71-
surface6: { color: '#bed6f1', warning: false },
72-
surface5: { color: '#d5e5f6', warning: false },
73-
surface4: { color: '#e0ebf8', warning: false },
74-
surface3: { color: '#fff', warning: false },
75-
fgSurface4: { color: '#001758', warning: false },
76-
fgSurface3: { color: '#006dd9', warning: false },
77-
fgSurface2: { color: '#008cfb', warning: false },
78-
fgSurface1: { color: '#53b1ff', warning: false },
79-
stroke3: { color: '#006dd9', warning: false },
80-
stroke4: { color: '#004eb8', warning: false },
81-
stroke2: { color: '#5d8fc6', warning: false },
82-
stroke1: { color: '#8aaed6', warning: false },
83-
bgFillDark: { color: '#1b1e23', warning: false },
84-
fgFillDark: { color: '#eff0f2', warning: false },
85-
bgFillInverted2: { color: '#1b1e23', warning: false },
86-
bgFillInverted1: { color: '#002675', warning: false },
87-
fgFillInverted: { color: '#eff0f2', warning: false },
88-
surface1: { color: '#eaf1fa', warning: false },
67+
bgFill1: '#0090ff',
68+
fgFill: '#1b1e23',
69+
bgFill2: '#0081ef',
70+
surface2: '#f5f9fd',
71+
surface6: '#bed6f1',
72+
surface5: '#d5e5f6',
73+
surface4: '#e0ebf8',
74+
surface3: '#fff',
75+
fgSurface4: '#001758',
76+
fgSurface3: '#006dd9',
77+
fgSurface2: '#008cfb',
78+
fgSurface1: '#53b1ff',
79+
stroke3: '#006dd9',
80+
stroke4: '#004eb8',
81+
stroke2: '#5d8fc6',
82+
stroke1: '#8aaed6',
83+
bgFillDark: '#1b1e23',
84+
fgFillDark: '#eff0f2',
85+
bgFillInverted2: '#1b1e23',
86+
bgFillInverted1: '#002675',
87+
fgFillInverted: '#eff0f2',
88+
surface1: '#eaf1fa',
8989
},
9090
direction: 'darker',
9191
},
9292
success: {
9393
ramp: {
94-
bgFill1: { color: '#4ab866', warning: false },
95-
fgFill: { color: '#1b1f1c', warning: false },
96-
bgFill2: { color: '#37a857', warning: false },
97-
surface2: { color: '#f0fcf2', warning: false },
98-
surface6: { color: '#7eea95', warning: false },
99-
surface5: { color: '#b7f2c1', warning: false },
100-
surface4: { color: '#cdf5d3', warning: false },
101-
surface3: { color: '#fff', warning: false },
102-
fgSurface4: { color: '#002b00', warning: false },
103-
fgSurface3: { color: '#008031', warning: false },
104-
fgSurface2: { color: '#2c9f4e', warning: false },
105-
fgSurface1: { color: '#54c16f', warning: false },
106-
stroke3: { color: '#008031', warning: false },
107-
stroke4: { color: '#006314', warning: false },
108-
stroke2: { color: '#61986b', warning: false },
109-
stroke1: { color: '#77ba84', warning: false },
110-
bgFillDark: { color: '#1b1f1c', warning: false },
111-
fgFillDark: { color: '#edf2ed', warning: false },
112-
bgFillInverted2: { color: '#1b1f1c', warning: false },
113-
bgFillInverted1: { color: '#003800', warning: false },
114-
fgFillInverted: { color: '#edf2ed', warning: false },
115-
surface1: { color: '#ddf8e1', warning: false },
94+
bgFill1: '#4ab866',
95+
fgFill: '#1b1f1c',
96+
bgFill2: '#37a857',
97+
surface2: '#f0fcf2',
98+
surface6: '#7eea95',
99+
surface5: '#b7f2c1',
100+
surface4: '#cdf5d3',
101+
surface3: '#fff',
102+
fgSurface4: '#002b00',
103+
fgSurface3: '#008031',
104+
fgSurface2: '#2c9f4e',
105+
fgSurface1: '#54c16f',
106+
stroke3: '#008031',
107+
stroke4: '#006314',
108+
stroke2: '#61986b',
109+
stroke1: '#77ba84',
110+
bgFillDark: '#1b1f1c',
111+
fgFillDark: '#edf2ed',
112+
bgFillInverted2: '#1b1f1c',
113+
bgFillInverted1: '#003800',
114+
fgFillInverted: '#edf2ed',
115+
surface1: '#ddf8e1',
116116
},
117117
direction: 'darker',
118118
},
119119
caution: {
120120
ramp: {
121-
bgFill1: { color: '#f0d149', warning: false },
122-
fgFill: { color: '#1f1e1b', warning: false },
123-
bgFill2: { color: '#ddbe30', warning: false },
124-
surface2: { color: '#fdf9e7', warning: false },
125-
surface6: { color: '#ecd367', warning: false },
126-
surface5: { color: '#f5e399', warning: false },
127-
surface4: { color: '#f8ebb5', warning: false },
128-
surface3: { color: '#fff', warning: false },
129-
fgSurface4: { color: '#291d00', warning: false },
130-
fgSurface3: { color: '#876b00', warning: false },
131-
fgSurface2: { color: '#a78900', warning: false },
132-
fgSurface1: { color: '#c9aa00', warning: false },
133-
stroke3: { color: '#876b00', warning: false },
134-
stroke4: { color: '#675000', warning: false },
135-
stroke2: { color: '#978c60', warning: false },
136-
stroke1: { color: '#b8ab75', warning: false },
137-
bgFillDark: { color: '#1f1e1b', warning: false },
138-
fgFillDark: { color: '#f6f1da', warning: false },
139-
bgFillInverted2: { color: '#1f1e1b', warning: false },
140-
bgFillInverted1: { color: '#3a2b00', warning: false },
141-
fgFillInverted: { color: '#f6f1da', warning: false },
142-
surface1: { color: '#faf1cd', warning: false },
121+
bgFill1: '#f0d149',
122+
fgFill: '#1f1e1b',
123+
bgFill2: '#ddbe30',
124+
surface2: '#fdf9e7',
125+
surface6: '#ecd367',
126+
surface5: '#f5e399',
127+
surface4: '#f8ebb5',
128+
surface3: '#fff',
129+
fgSurface4: '#291d00',
130+
fgSurface3: '#876b00',
131+
fgSurface2: '#a78900',
132+
fgSurface1: '#c9aa00',
133+
stroke3: '#876b00',
134+
stroke4: '#675000',
135+
stroke2: '#978c60',
136+
stroke1: '#b8ab75',
137+
bgFillDark: '#1f1e1b',
138+
fgFillDark: '#f6f1da',
139+
bgFillInverted2: '#1f1e1b',
140+
bgFillInverted1: '#3a2b00',
141+
fgFillInverted: '#f6f1da',
142+
surface1: '#faf1cd',
143143
},
144144
direction: 'darker',
145145
},
146146
warning: {
147147
ramp: {
148-
bgFill1: { color: '#f0b849', warning: false },
149-
fgFill: { color: '#1f1e1b', warning: false },
150-
bgFill2: { color: '#dea633', warning: false },
151-
surface2: { color: '#fdf7ee', warning: false },
152-
surface6: { color: '#f1ce90', warning: false },
153-
surface5: { color: '#f6e0bb', warning: false },
154-
surface4: { color: '#f8e9cd', warning: false },
155-
surface3: { color: '#fff', warning: false },
156-
fgSurface4: { color: '#2f1800', warning: false },
157-
fgSurface3: { color: '#976300', warning: false },
158-
fgSurface2: { color: '#b78100', warning: false },
159-
fgSurface1: { color: '#d9a22e', warning: false },
160-
stroke3: { color: '#976300', warning: false },
161-
stroke4: { color: '#754900', warning: false },
162-
stroke2: { color: '#9f8860', warning: false },
163-
stroke1: { color: '#c2a776', warning: false },
164-
bgFillDark: { color: '#1f1e1b', warning: false },
165-
fgFillDark: { color: '#f3f0e9', warning: false },
166-
bgFillInverted2: { color: '#1f1e1b', warning: false },
167-
bgFillInverted1: { color: '#432600', warning: false },
168-
fgFillInverted: { color: '#f3f0e9', warning: false },
169-
surface1: { color: '#faefdc', warning: false },
148+
bgFill1: '#f0b849',
149+
fgFill: '#1f1e1b',
150+
bgFill2: '#dea633',
151+
surface2: '#fdf7ee',
152+
surface6: '#f1ce90',
153+
surface5: '#f6e0bb',
154+
surface4: '#f8e9cd',
155+
surface3: '#fff',
156+
fgSurface4: '#2f1800',
157+
fgSurface3: '#976300',
158+
fgSurface2: '#b78100',
159+
fgSurface1: '#d9a22e',
160+
stroke3: '#976300',
161+
stroke4: '#754900',
162+
stroke2: '#9f8860',
163+
stroke1: '#c2a776',
164+
bgFillDark: '#1f1e1b',
165+
fgFillDark: '#f3f0e9',
166+
bgFillInverted2: '#1f1e1b',
167+
bgFillInverted1: '#432600',
168+
fgFillInverted: '#f3f0e9',
169+
surface1: '#faefdc',
170170
},
171171
direction: 'darker',
172172
},
173173
error: {
174174
ramp: {
175-
bgFill1: { color: '#cc1818', warning: false },
176-
fgFill: { color: '#f2efef', warning: false },
177-
bgFill2: { color: '#bc0001', warning: false },
178-
surface2: { color: '#fdf6f5', warning: false },
179-
surface6: { color: '#f5c9c2', warning: false },
180-
surface5: { color: '#f9dcd8', warning: false },
181-
surface4: { color: '#fae5e2', warning: false },
182-
surface3: { color: '#fff', warning: false },
183-
fgSurface4: { color: '#4a0000', warning: false },
184-
fgSurface3: { color: '#cc1818', warning: false },
185-
fgSurface2: { color: '#f84d41', warning: false },
186-
fgSurface1: { color: '#ff8373', warning: false },
187-
stroke3: { color: '#cc1818', warning: false },
188-
stroke4: { color: '#a70000', warning: false },
189-
stroke2: { color: '#ca675c', warning: false },
190-
stroke1: { color: '#dc8e83', warning: false },
191-
bgFillDark: { color: '#231c1b', warning: false },
192-
fgFillDark: { color: '#f2efef', warning: false },
193-
bgFillInverted2: { color: '#231c1b', warning: false },
194-
bgFillInverted1: { color: '#680000', warning: false },
195-
fgFillInverted: { color: '#f2efef', warning: false },
196-
surface1: { color: '#fcedea', warning: false },
175+
bgFill1: '#cc1818',
176+
fgFill: '#f2efef',
177+
bgFill2: '#bc0001',
178+
surface2: '#fdf6f5',
179+
surface6: '#f5c9c2',
180+
surface5: '#f9dcd8',
181+
surface4: '#fae5e2',
182+
surface3: '#fff',
183+
fgSurface4: '#4a0000',
184+
fgSurface3: '#cc1818',
185+
fgSurface2: '#f84d41',
186+
fgSurface1: '#ff8373',
187+
stroke3: '#cc1818',
188+
stroke4: '#a70000',
189+
stroke2: '#ca675c',
190+
stroke1: '#dc8e83',
191+
bgFillDark: '#231c1b',
192+
fgFillDark: '#f2efef',
193+
bgFillInverted2: '#231c1b',
194+
bgFillInverted1: '#680000',
195+
fgFillInverted: '#f2efef',
196+
surface1: '#fcedea',
197197
},
198198
direction: 'darker',
199199
},

0 commit comments

Comments
 (0)