@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.1-next.738bb1424.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +114 -40
- package/build/color-ramps/{index.js → index.cjs} +8 -8
- package/build/color-ramps/lib/{color-utils.js → color-utils.cjs} +2 -2
- package/build/color-ramps/lib/{constants.js → constants.cjs} +2 -2
- package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs} +66 -66
- package/build/color-ramps/lib/{default-ramps.js.map → default-ramps.cjs.map} +1 -1
- package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs} +6 -6
- package/build/color-ramps/lib/find-color-with-constraints.cjs.map +7 -0
- package/build/color-ramps/lib/{index.js → index.cjs} +6 -6
- package/build/color-ramps/lib/index.cjs.map +7 -0
- package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs} +1 -1
- package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs} +1 -1
- package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs} +20 -46
- package/build/color-ramps/lib/taper-chroma.cjs.map +7 -0
- package/build/color-ramps/lib/{types.js → types.cjs} +1 -1
- package/build/color-ramps/lib/{utils.js → utils.cjs} +4 -4
- package/build/{context.js → context.cjs} +1 -1
- package/build/{index.js → index.cjs} +2 -2
- package/build/index.cjs.map +7 -0
- package/build/{lock-unlock.js → lock-unlock.cjs} +1 -1
- package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs} +33 -7
- package/build/prebuilt/js/design-tokens.cjs.map +7 -0
- package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs} +36 -14
- package/build/prebuilt/ts/color-tokens.cjs.map +7 -0
- package/build/{token-id.js → prebuilt/ts/token-types.cjs} +4 -16
- package/build/prebuilt/ts/token-types.cjs.map +7 -0
- package/build/{private-apis.js → private-apis.cjs} +4 -4
- package/build/{theme-provider.js → theme-provider.cjs} +3 -3
- package/build/{types.js → types.cjs} +1 -1
- package/build/{use-theme-provider-styles.js → use-theme-provider-styles.cjs} +6 -6
- package/build-module/color-ramps/index.js +7 -7
- package/build-module/color-ramps/lib/color-utils.js +1 -1
- package/build-module/color-ramps/lib/constants.js +1 -1
- package/build-module/color-ramps/lib/default-ramps.js +65 -65
- package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js +5 -5
- package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build-module/color-ramps/lib/index.js +5 -5
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/color-ramps/lib/taper-chroma.js +20 -47
- package/build-module/color-ramps/lib/taper-chroma.js.map +2 -2
- package/build-module/color-ramps/lib/utils.js +3 -3
- package/build-module/index.js +1 -1
- package/build-module/index.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +32 -6
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/color-tokens.js +35 -13
- package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/token-types.js +1 -0
- package/build-module/private-apis.js +3 -3
- package/build-module/theme-provider.js +2 -2
- package/build-module/use-theme-provider-styles.js +4 -4
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +3 -4
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
- package/build-types/color-ramps/lib/taper-chroma.d.ts +4 -4
- package/build-types/color-ramps/lib/taper-chroma.d.ts.map +1 -1
- package/build-types/index.d.ts +2 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
- package/build-types/prebuilt/ts/token-types.d.ts +49 -0
- package/build-types/prebuilt/ts/token-types.d.ts.map +1 -0
- package/package.json +15 -7
- package/src/color-ramps/lib/default-ramps.ts +65 -65
- package/src/color-ramps/lib/find-color-with-constraints.ts +11 -7
- package/src/color-ramps/lib/index.ts +4 -4
- package/src/color-ramps/lib/taper-chroma.ts +32 -63
- package/src/index.ts +2 -1
- package/src/prebuilt/css/design-tokens.css +72 -28
- package/src/prebuilt/js/design-tokens.js +32 -6
- package/src/prebuilt/ts/color-tokens.ts +31 -9
- package/src/prebuilt/ts/token-types.ts +125 -0
- package/bin/generate-default-ramps/index.ts +0 -49
- package/bin/generate-primitive-tokens/index.ts +0 -120
- package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +0 -84
- package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
- package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
- package/bin/terrazzo-plugin-inline-alias-values/index.ts +0 -113
- package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +0 -52
- package/build/color-ramps/lib/find-color-with-constraints.js.map +0 -7
- package/build/color-ramps/lib/index.js.map +0 -7
- package/build/color-ramps/lib/taper-chroma.js.map +0 -7
- package/build/index.js.map +0 -7
- package/build/prebuilt/js/design-tokens.js.map +0 -7
- package/build/prebuilt/json/figma.json +0 -715
- package/build/prebuilt/ts/color-tokens.js.map +0 -7
- package/build/token-id.js.map +0 -7
- package/build/types/css-modules.d.js +0 -1
- package/build/types/css-modules.d.js.map +0 -7
- package/build-module/prebuilt/json/figma.json +0 -715
- package/build-module/token-id.js +0 -6
- package/build-module/token-id.js.map +0 -7
- package/build-module/types/css-modules.d.js +0 -1
- package/build-types/token-id.d.ts +0 -9
- package/build-types/token-id.d.ts.map +0 -1
- package/docs/ds-tokens.md +0 -150
- package/src/prebuilt/json/figma.json +0 -715
- package/src/test/token-id.test.ts +0 -12
- package/src/token-id.ts +0 -9
- package/src/types/css-modules.d.ts +0 -4
- package/terrazzo.config.ts +0 -126
- package/tokens/border.json +0 -34
- package/tokens/color.json +0 -1029
- package/tokens/dimension.json +0 -109
- package/tokens/elevation.json +0 -201
- package/tokens/typography.json +0 -93
- package/tsconfig.bin.json +0 -13
- package/tsconfig.bin.tsbuildinfo +0 -1
- package/tsconfig.json +0 -11
- package/tsconfig.src.json +0 -9
- package/tsconfig.src.tsbuildinfo +0 -1
- /package/build/color-ramps/{index.js.map → index.cjs.map} +0 -0
- /package/build/color-ramps/lib/{color-utils.js.map → color-utils.cjs.map} +0 -0
- /package/build/color-ramps/lib/{constants.js.map → constants.cjs.map} +0 -0
- /package/build/color-ramps/lib/{ramp-configs.js.map → ramp-configs.cjs.map} +0 -0
- /package/build/color-ramps/lib/{register-color-spaces.js.map → register-color-spaces.cjs.map} +0 -0
- /package/build/color-ramps/lib/{types.js.map → types.cjs.map} +0 -0
- /package/build/color-ramps/lib/{utils.js.map → utils.cjs.map} +0 -0
- /package/build/{context.js.map → context.cjs.map} +0 -0
- /package/build/{lock-unlock.js.map → lock-unlock.cjs.map} +0 -0
- /package/build/{private-apis.js.map → private-apis.cjs.map} +0 -0
- /package/build/{theme-provider.js.map → theme-provider.cjs.map} +0 -0
- /package/build/{types.js.map → types.cjs.map} +0 -0
- /package/build/{use-theme-provider-styles.js.map → use-theme-provider-styles.cjs.map} +0 -0
- /package/build-module/{types/css-modules.d.js.map → prebuilt/ts/token-types.js.map} +0 -0
|
@@ -1,715 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"Border/radius-x-small": {
|
|
3
|
-
"value": {
|
|
4
|
-
".": "1px"
|
|
5
|
-
},
|
|
6
|
-
"description": "Extra small radius"
|
|
7
|
-
},
|
|
8
|
-
"Border/radius-small": {
|
|
9
|
-
"value": {
|
|
10
|
-
".": "2px"
|
|
11
|
-
},
|
|
12
|
-
"description": "Small radius"
|
|
13
|
-
},
|
|
14
|
-
"Border/radius-medium": {
|
|
15
|
-
"value": {
|
|
16
|
-
".": "4px"
|
|
17
|
-
},
|
|
18
|
-
"description": "Medium radius"
|
|
19
|
-
},
|
|
20
|
-
"Border/radius-large": {
|
|
21
|
-
"value": {
|
|
22
|
-
".": "8px"
|
|
23
|
-
},
|
|
24
|
-
"description": "Large radius"
|
|
25
|
-
},
|
|
26
|
-
"Border/width-focus": {
|
|
27
|
-
"value": {
|
|
28
|
-
".": "2px",
|
|
29
|
-
"high-dpi": "1.5px"
|
|
30
|
-
},
|
|
31
|
-
"description": "Border width for focus ring"
|
|
32
|
-
},
|
|
33
|
-
"Color/Semantic/Background/Neutral/bgSur-neutral": {
|
|
34
|
-
"value": {
|
|
35
|
-
".": "#f8f8f8"
|
|
36
|
-
},
|
|
37
|
-
"description": "Background color for surfaces with normal emphasis."
|
|
38
|
-
},
|
|
39
|
-
"Color/Semantic/Background/Neutral/bgSur-neutral-strong": {
|
|
40
|
-
"value": {
|
|
41
|
-
".": "#fff"
|
|
42
|
-
},
|
|
43
|
-
"description": "Background color for surfaces with strong emphasis."
|
|
44
|
-
},
|
|
45
|
-
"Color/Semantic/Background/Neutral/bgSur-neutral-weak": {
|
|
46
|
-
"value": {
|
|
47
|
-
".": "#f0f0f0"
|
|
48
|
-
},
|
|
49
|
-
"description": "Background color for surfaces with weak emphasis."
|
|
50
|
-
},
|
|
51
|
-
"Color/Semantic/Background/Brand/bgSur-brand": {
|
|
52
|
-
"value": {
|
|
53
|
-
".": "#ecf0f9"
|
|
54
|
-
},
|
|
55
|
-
"description": "Background color for surfaces with brand tone and normal emphasis."
|
|
56
|
-
},
|
|
57
|
-
"Color/Semantic/Background/Success/bgSur-success": {
|
|
58
|
-
"value": {
|
|
59
|
-
".": "#cbf5d1"
|
|
60
|
-
},
|
|
61
|
-
"description": "Background color for surfaces with success tone and normal emphasis."
|
|
62
|
-
},
|
|
63
|
-
"Color/Semantic/Background/Success/bgSur-success-weak": {
|
|
64
|
-
"value": {
|
|
65
|
-
".": "#f0fcf2"
|
|
66
|
-
},
|
|
67
|
-
"description": "Background color for surfaces with success tone and weak emphasis."
|
|
68
|
-
},
|
|
69
|
-
"Color/Semantic/Background/Info/bgSur-info": {
|
|
70
|
-
"value": {
|
|
71
|
-
".": "#dfebf8"
|
|
72
|
-
},
|
|
73
|
-
"description": "Background color for surfaces with info tone and normal emphasis."
|
|
74
|
-
},
|
|
75
|
-
"Color/Semantic/Background/Info/bgSur-info-weak": {
|
|
76
|
-
"value": {
|
|
77
|
-
".": "#f5f9fd"
|
|
78
|
-
},
|
|
79
|
-
"description": "Background color for surfaces with info tone and weak emphasis."
|
|
80
|
-
},
|
|
81
|
-
"Color/Semantic/Background/Warning/bgSur-warning": {
|
|
82
|
-
"value": {
|
|
83
|
-
".": "#f8e8cc"
|
|
84
|
-
},
|
|
85
|
-
"description": "Background color for surfaces with warning tone and normal emphasis."
|
|
86
|
-
},
|
|
87
|
-
"Color/Semantic/Background/Warning/bgSur-warning-weak": {
|
|
88
|
-
"value": {
|
|
89
|
-
".": "#fdf7ee"
|
|
90
|
-
},
|
|
91
|
-
"description": "Background color for surfaces with warning tone and weak emphasis."
|
|
92
|
-
},
|
|
93
|
-
"Color/Semantic/Background/Caution/bgSur-caution": {
|
|
94
|
-
"value": {
|
|
95
|
-
".": "#f7eab3"
|
|
96
|
-
},
|
|
97
|
-
"description": "Background color for surfaces with caution tone and normal emphasis."
|
|
98
|
-
},
|
|
99
|
-
"Color/Semantic/Background/Caution/bgSur-caution-weak": {
|
|
100
|
-
"value": {
|
|
101
|
-
".": "#fdf9e7"
|
|
102
|
-
},
|
|
103
|
-
"description": "Background color for surfaces with caution tone and weak emphasis."
|
|
104
|
-
},
|
|
105
|
-
"Color/Semantic/Background/Error/bgSur-error": {
|
|
106
|
-
"value": {
|
|
107
|
-
".": "#fae4e1"
|
|
108
|
-
},
|
|
109
|
-
"description": "Background color for surfaces with error tone and normal emphasis."
|
|
110
|
-
},
|
|
111
|
-
"Color/Semantic/Background/Error/bgSur-error-weak": {
|
|
112
|
-
"value": {
|
|
113
|
-
".": "#fdf6f5"
|
|
114
|
-
},
|
|
115
|
-
"description": "Background color for surfaces with error tone and weak emphasis."
|
|
116
|
-
},
|
|
117
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral": {
|
|
118
|
-
"value": {
|
|
119
|
-
".": "#0000"
|
|
120
|
-
},
|
|
121
|
-
"description": "Background color for interactive elements with neutral tone and normal emphasis."
|
|
122
|
-
},
|
|
123
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-active": {
|
|
124
|
-
"value": {
|
|
125
|
-
".": "#eaeaea"
|
|
126
|
-
},
|
|
127
|
-
"description": "Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active."
|
|
128
|
-
},
|
|
129
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-disabled": {
|
|
130
|
-
"value": {
|
|
131
|
-
".": "#e2e2e2"
|
|
132
|
-
},
|
|
133
|
-
"description": "Background color for interactive elements with neutral tone and normal emphasis, in their disabled state."
|
|
134
|
-
},
|
|
135
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-strong": {
|
|
136
|
-
"value": {
|
|
137
|
-
".": "#2d2d2d"
|
|
138
|
-
},
|
|
139
|
-
"description": "Background color for interactive elements with neutral tone and strong emphasis."
|
|
140
|
-
},
|
|
141
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-strong-active": {
|
|
142
|
-
"value": {
|
|
143
|
-
".": "#1e1e1e"
|
|
144
|
-
},
|
|
145
|
-
"description": "Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active."
|
|
146
|
-
},
|
|
147
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-strong-disabled": {
|
|
148
|
-
"value": {
|
|
149
|
-
".": "#d2d2d2"
|
|
150
|
-
},
|
|
151
|
-
"description": "Background color for interactive elements with neutral tone and strong emphasis, in their disabled state."
|
|
152
|
-
},
|
|
153
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-weak": {
|
|
154
|
-
"value": {
|
|
155
|
-
".": "#0000"
|
|
156
|
-
},
|
|
157
|
-
"description": "Background color for interactive elements with neutral tone and weak emphasis."
|
|
158
|
-
},
|
|
159
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-weak-active": {
|
|
160
|
-
"value": {
|
|
161
|
-
".": "#eaeaea"
|
|
162
|
-
},
|
|
163
|
-
"description": "Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active."
|
|
164
|
-
},
|
|
165
|
-
"Color/Semantic/Background/Neutral/bgInt-neutral-weak-disabled": {
|
|
166
|
-
"value": {
|
|
167
|
-
".": "#e2e2e2"
|
|
168
|
-
},
|
|
169
|
-
"description": "Background color for interactive elements with neutral tone and weak emphasis, in their disabled state."
|
|
170
|
-
},
|
|
171
|
-
"Color/Semantic/Background/Brand/bgInt-brand": {
|
|
172
|
-
"value": {
|
|
173
|
-
".": "#0000"
|
|
174
|
-
},
|
|
175
|
-
"description": "Background color for interactive elements with brand tone and normal emphasis."
|
|
176
|
-
},
|
|
177
|
-
"Color/Semantic/Background/Brand/bgInt-brand-active": {
|
|
178
|
-
"value": {
|
|
179
|
-
".": "#f6f8fc"
|
|
180
|
-
},
|
|
181
|
-
"description": "Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active."
|
|
182
|
-
},
|
|
183
|
-
"Color/Semantic/Background/Brand/bgInt-brand-disabled": {
|
|
184
|
-
"value": {
|
|
185
|
-
".": "#e2e2e2"
|
|
186
|
-
},
|
|
187
|
-
"description": "Background color for interactive elements with brand tone and normal emphasis, in their disabled state."
|
|
188
|
-
},
|
|
189
|
-
"Color/Semantic/Background/Brand/bgInt-brand-strong": {
|
|
190
|
-
"value": {
|
|
191
|
-
".": "#3858e9"
|
|
192
|
-
},
|
|
193
|
-
"description": "Background color for interactive elements with brand tone and strong emphasis."
|
|
194
|
-
},
|
|
195
|
-
"Color/Semantic/Background/Brand/bgInt-brand-strong-active": {
|
|
196
|
-
"value": {
|
|
197
|
-
".": "#2e49d9"
|
|
198
|
-
},
|
|
199
|
-
"description": "Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active."
|
|
200
|
-
},
|
|
201
|
-
"Color/Semantic/Background/Brand/bgInt-brand-strong-disabled": {
|
|
202
|
-
"value": {
|
|
203
|
-
".": "#d2d2d2"
|
|
204
|
-
},
|
|
205
|
-
"description": "Background color for interactive elements with brand tone and strong emphasis, in their disabled state."
|
|
206
|
-
},
|
|
207
|
-
"Color/Semantic/Background/Brand/bgInt-brand-weak": {
|
|
208
|
-
"value": {
|
|
209
|
-
".": "#0000"
|
|
210
|
-
},
|
|
211
|
-
"description": "Background color for interactive elements with brand tone and weak emphasis."
|
|
212
|
-
},
|
|
213
|
-
"Color/Semantic/Background/Brand/bgInt-brand-weak-active": {
|
|
214
|
-
"value": {
|
|
215
|
-
".": "#e4eaf7"
|
|
216
|
-
},
|
|
217
|
-
"description": "Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active."
|
|
218
|
-
},
|
|
219
|
-
"Color/Semantic/Background/Brand/bgInt-brand-weak-disabled": {
|
|
220
|
-
"value": {
|
|
221
|
-
".": "#e2e2e2"
|
|
222
|
-
},
|
|
223
|
-
"description": "Background color for interactive elements with brand tone and weak emphasis, in their disabled state."
|
|
224
|
-
},
|
|
225
|
-
"Color/Semantic/Background/Neutral/bgTra-neutral-weak": {
|
|
226
|
-
"value": {
|
|
227
|
-
".": "#e0e0e0"
|
|
228
|
-
},
|
|
229
|
-
"description": "Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track)."
|
|
230
|
-
},
|
|
231
|
-
"Color/Semantic/Background/Neutral/bgTra-neutral": {
|
|
232
|
-
"value": {
|
|
233
|
-
".": "#d8d8d8"
|
|
234
|
-
},
|
|
235
|
-
"description": "Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track)."
|
|
236
|
-
},
|
|
237
|
-
"Color/Semantic/Background/Neutral/bgThu-neutral-weak": {
|
|
238
|
-
"value": {
|
|
239
|
-
".": "#8a8a8a"
|
|
240
|
-
},
|
|
241
|
-
"description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb)."
|
|
242
|
-
},
|
|
243
|
-
"Color/Semantic/Background/Neutral/bgThu-neutral-weak-active": {
|
|
244
|
-
"value": {
|
|
245
|
-
".": "#6c6c6c"
|
|
246
|
-
},
|
|
247
|
-
"description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active."
|
|
248
|
-
},
|
|
249
|
-
"Color/Semantic/Background/Brand/bgThu-brand": {
|
|
250
|
-
"value": {
|
|
251
|
-
".": "#3858e9"
|
|
252
|
-
},
|
|
253
|
-
"description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track)."
|
|
254
|
-
},
|
|
255
|
-
"Color/Semantic/Background/Brand/bgThu-brand-active": {
|
|
256
|
-
"value": {
|
|
257
|
-
".": "#3858e9"
|
|
258
|
-
},
|
|
259
|
-
"description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active."
|
|
260
|
-
},
|
|
261
|
-
"Color/Semantic/Background/Brand/bgThu-brand-disabled": {
|
|
262
|
-
"value": {
|
|
263
|
-
".": "#d8d8d8"
|
|
264
|
-
},
|
|
265
|
-
"description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state."
|
|
266
|
-
},
|
|
267
|
-
"Color/Semantic/Foreground/Neutral/fgCon-neutral": {
|
|
268
|
-
"value": {
|
|
269
|
-
".": "#1e1e1e"
|
|
270
|
-
},
|
|
271
|
-
"description": "Foreground color for content like text with normal emphasis."
|
|
272
|
-
},
|
|
273
|
-
"Color/Semantic/Foreground/Neutral/fgCon-neutral-weak": {
|
|
274
|
-
"value": {
|
|
275
|
-
".": "#6d6d6d"
|
|
276
|
-
},
|
|
277
|
-
"description": "Foreground color for content like text with weak emphasis."
|
|
278
|
-
},
|
|
279
|
-
"Color/Semantic/Foreground/Success/fgCon-success": {
|
|
280
|
-
"value": {
|
|
281
|
-
".": "#002900"
|
|
282
|
-
},
|
|
283
|
-
"description": "Foreground color for content like text with success tone and normal emphasis."
|
|
284
|
-
},
|
|
285
|
-
"Color/Semantic/Foreground/Success/fgCon-success-weak": {
|
|
286
|
-
"value": {
|
|
287
|
-
".": "#007f30"
|
|
288
|
-
},
|
|
289
|
-
"description": "Foreground color for content like text with success tone and weak emphasis."
|
|
290
|
-
},
|
|
291
|
-
"Color/Semantic/Foreground/Info/fgCon-info": {
|
|
292
|
-
"value": {
|
|
293
|
-
".": "#001b4f"
|
|
294
|
-
},
|
|
295
|
-
"description": "Foreground color for content like text with info tone and normal emphasis."
|
|
296
|
-
},
|
|
297
|
-
"Color/Semantic/Foreground/Info/fgCon-info-weak": {
|
|
298
|
-
"value": {
|
|
299
|
-
".": "#006bd7"
|
|
300
|
-
},
|
|
301
|
-
"description": "Foreground color for content like text with info tone and weak emphasis."
|
|
302
|
-
},
|
|
303
|
-
"Color/Semantic/Foreground/Warning/fgCon-warning": {
|
|
304
|
-
"value": {
|
|
305
|
-
".": "#2e1900"
|
|
306
|
-
},
|
|
307
|
-
"description": "Foreground color for content like text with warning tone and normal emphasis."
|
|
308
|
-
},
|
|
309
|
-
"Color/Semantic/Foreground/Warning/fgCon-warning-weak": {
|
|
310
|
-
"value": {
|
|
311
|
-
".": "#936400"
|
|
312
|
-
},
|
|
313
|
-
"description": "Foreground color for content like text with warning tone and weak emphasis."
|
|
314
|
-
},
|
|
315
|
-
"Color/Semantic/Foreground/Caution/fgCon-caution": {
|
|
316
|
-
"value": {
|
|
317
|
-
".": "#281d00"
|
|
318
|
-
},
|
|
319
|
-
"description": "Foreground color for content like text with caution tone and normal emphasis."
|
|
320
|
-
},
|
|
321
|
-
"Color/Semantic/Foreground/Caution/fgCon-caution-weak": {
|
|
322
|
-
"value": {
|
|
323
|
-
".": "#836b00"
|
|
324
|
-
},
|
|
325
|
-
"description": "Foreground color for content like text with caution tone and weak emphasis."
|
|
326
|
-
},
|
|
327
|
-
"Color/Semantic/Foreground/Error/fgCon-error": {
|
|
328
|
-
"value": {
|
|
329
|
-
".": "#470000"
|
|
330
|
-
},
|
|
331
|
-
"description": "Foreground color for content like text with error tone and normal emphasis."
|
|
332
|
-
},
|
|
333
|
-
"Color/Semantic/Foreground/Error/fgCon-error-weak": {
|
|
334
|
-
"value": {
|
|
335
|
-
".": "#cc1818"
|
|
336
|
-
},
|
|
337
|
-
"description": "Foreground color for content like text with error tone and weak emphasis."
|
|
338
|
-
},
|
|
339
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral": {
|
|
340
|
-
"value": {
|
|
341
|
-
".": "#1e1e1e"
|
|
342
|
-
},
|
|
343
|
-
"description": "Foreground color for interactive elements with neutral tone and normal emphasis."
|
|
344
|
-
},
|
|
345
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-active": {
|
|
346
|
-
"value": {
|
|
347
|
-
".": "#1e1e1e"
|
|
348
|
-
},
|
|
349
|
-
"description": "Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active."
|
|
350
|
-
},
|
|
351
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-disabled": {
|
|
352
|
-
"value": {
|
|
353
|
-
".": "#8a8a8a"
|
|
354
|
-
},
|
|
355
|
-
"description": "Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state."
|
|
356
|
-
},
|
|
357
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-strong": {
|
|
358
|
-
"value": {
|
|
359
|
-
".": "#f0f0f0"
|
|
360
|
-
},
|
|
361
|
-
"description": "Foreground color for interactive elements with neutral tone and strong emphasis."
|
|
362
|
-
},
|
|
363
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-strong-active": {
|
|
364
|
-
"value": {
|
|
365
|
-
".": "#f0f0f0"
|
|
366
|
-
},
|
|
367
|
-
"description": "Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active."
|
|
368
|
-
},
|
|
369
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-strong-disabled": {
|
|
370
|
-
"value": {
|
|
371
|
-
".": "#6d6d6d"
|
|
372
|
-
},
|
|
373
|
-
"description": "Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state."
|
|
374
|
-
},
|
|
375
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-weak": {
|
|
376
|
-
"value": {
|
|
377
|
-
".": "#6d6d6d"
|
|
378
|
-
},
|
|
379
|
-
"description": "Foreground color for interactive elements with neutral tone and weak emphasis."
|
|
380
|
-
},
|
|
381
|
-
"Color/Semantic/Foreground/Neutral/fgInt-neutral-weak-disabled": {
|
|
382
|
-
"value": {
|
|
383
|
-
".": "#8a8a8a"
|
|
384
|
-
},
|
|
385
|
-
"description": "Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state."
|
|
386
|
-
},
|
|
387
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand": {
|
|
388
|
-
"value": {
|
|
389
|
-
".": "#3858e9"
|
|
390
|
-
},
|
|
391
|
-
"description": "Foreground color for interactive elements with brand tone and normal emphasis."
|
|
392
|
-
},
|
|
393
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand-active": {
|
|
394
|
-
"value": {
|
|
395
|
-
".": "#3858e9"
|
|
396
|
-
},
|
|
397
|
-
"description": "Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active."
|
|
398
|
-
},
|
|
399
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand-disabled": {
|
|
400
|
-
"value": {
|
|
401
|
-
".": "#8a8a8a"
|
|
402
|
-
},
|
|
403
|
-
"description": "Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state."
|
|
404
|
-
},
|
|
405
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand-strong": {
|
|
406
|
-
"value": {
|
|
407
|
-
".": "#eff0f2"
|
|
408
|
-
},
|
|
409
|
-
"description": "Foreground color for interactive elements with brand tone and strong emphasis."
|
|
410
|
-
},
|
|
411
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand-strong-active": {
|
|
412
|
-
"value": {
|
|
413
|
-
".": "#eff0f2"
|
|
414
|
-
},
|
|
415
|
-
"description": "Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active."
|
|
416
|
-
},
|
|
417
|
-
"Color/Semantic/Foreground/Brand/fgInt-brand-strong-disabled": {
|
|
418
|
-
"value": {
|
|
419
|
-
".": "#6d6d6d"
|
|
420
|
-
},
|
|
421
|
-
"description": "Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state."
|
|
422
|
-
},
|
|
423
|
-
"Color/Semantic/Stroke/Neutral/strokeSur-neutral": {
|
|
424
|
-
"value": {
|
|
425
|
-
".": "#d8d8d8"
|
|
426
|
-
},
|
|
427
|
-
"description": "Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis."
|
|
428
|
-
},
|
|
429
|
-
"Color/Semantic/Stroke/Neutral/strokeSur-neutral-weak": {
|
|
430
|
-
"value": {
|
|
431
|
-
".": "#e0e0e0"
|
|
432
|
-
},
|
|
433
|
-
"description": "Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis."
|
|
434
|
-
},
|
|
435
|
-
"Color/Semantic/Stroke/Neutral/strokeSur-neutral-strong": {
|
|
436
|
-
"value": {
|
|
437
|
-
".": "#8a8a8a"
|
|
438
|
-
},
|
|
439
|
-
"description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis."
|
|
440
|
-
},
|
|
441
|
-
"Color/Semantic/Stroke/Brand/strokeSur-brand": {
|
|
442
|
-
"value": {
|
|
443
|
-
".": "#a2b1d6"
|
|
444
|
-
},
|
|
445
|
-
"description": "Decorative stroke color used to define brand-toned surface boundaries with normal emphasis."
|
|
446
|
-
},
|
|
447
|
-
"Color/Semantic/Stroke/Brand/strokeSur-brand-strong": {
|
|
448
|
-
"value": {
|
|
449
|
-
".": "#3858e9"
|
|
450
|
-
},
|
|
451
|
-
"description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis."
|
|
452
|
-
},
|
|
453
|
-
"Color/Semantic/Stroke/Success/strokeSur-success": {
|
|
454
|
-
"value": {
|
|
455
|
-
".": "#82c98f"
|
|
456
|
-
},
|
|
457
|
-
"description": "Decorative stroke color used to define success-toned surface boundaries with normal emphasis."
|
|
458
|
-
},
|
|
459
|
-
"Color/Semantic/Stroke/Success/strokeSur-success-strong": {
|
|
460
|
-
"value": {
|
|
461
|
-
".": "#007f30"
|
|
462
|
-
},
|
|
463
|
-
"description": "Decorative stroke color used to define success-toned surface boundaries with strong emphasis."
|
|
464
|
-
},
|
|
465
|
-
"Color/Semantic/Stroke/Info/strokeSur-info": {
|
|
466
|
-
"value": {
|
|
467
|
-
".": "#9fbcdd"
|
|
468
|
-
},
|
|
469
|
-
"description": "Decorative stroke color used to define info-toned surface boundaries with normal emphasis."
|
|
470
|
-
},
|
|
471
|
-
"Color/Semantic/Stroke/Info/strokeSur-info-strong": {
|
|
472
|
-
"value": {
|
|
473
|
-
".": "#006bd7"
|
|
474
|
-
},
|
|
475
|
-
"description": "Decorative stroke color used to define info-toned surface boundaries with strong emphasis."
|
|
476
|
-
},
|
|
477
|
-
"Color/Semantic/Stroke/Warning/strokeSur-warning": {
|
|
478
|
-
"value": {
|
|
479
|
-
".": "#d2b581"
|
|
480
|
-
},
|
|
481
|
-
"description": "Decorative stroke color used to define warning-toned surface boundaries with normal emphasis."
|
|
482
|
-
},
|
|
483
|
-
"Color/Semantic/Stroke/Warning/strokeSur-warning-strong": {
|
|
484
|
-
"value": {
|
|
485
|
-
".": "#936400"
|
|
486
|
-
},
|
|
487
|
-
"description": "Decorative stroke color used to define warning-toned surface boundaries with strong emphasis."
|
|
488
|
-
},
|
|
489
|
-
"Color/Semantic/Stroke/Error/strokeSur-error": {
|
|
490
|
-
"value": {
|
|
491
|
-
".": "#e1a198"
|
|
492
|
-
},
|
|
493
|
-
"description": "Decorative stroke color used to define error-toned surface boundaries with normal emphasis."
|
|
494
|
-
},
|
|
495
|
-
"Color/Semantic/Stroke/Error/strokeSur-error-strong": {
|
|
496
|
-
"value": {
|
|
497
|
-
".": "#cc1818"
|
|
498
|
-
},
|
|
499
|
-
"description": "Decorative stroke color used to define error-toned surface boundaries with strong emphasis."
|
|
500
|
-
},
|
|
501
|
-
"Color/Semantic/Stroke/Neutral/strokeInt-neutral": {
|
|
502
|
-
"value": {
|
|
503
|
-
".": "#8a8a8a"
|
|
504
|
-
},
|
|
505
|
-
"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis."
|
|
506
|
-
},
|
|
507
|
-
"Color/Semantic/Stroke/Neutral/strokeInt-neutral-active": {
|
|
508
|
-
"value": {
|
|
509
|
-
".": "#6c6c6c"
|
|
510
|
-
},
|
|
511
|
-
"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active."
|
|
512
|
-
},
|
|
513
|
-
"Color/Semantic/Stroke/Neutral/strokeInt-neutral-disabled": {
|
|
514
|
-
"value": {
|
|
515
|
-
".": "#d8d8d8"
|
|
516
|
-
},
|
|
517
|
-
"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state."
|
|
518
|
-
},
|
|
519
|
-
"Color/Semantic/Stroke/Neutral/strokeInt-neutral-strong": {
|
|
520
|
-
"value": {
|
|
521
|
-
".": "#6c6c6c"
|
|
522
|
-
},
|
|
523
|
-
"description": "Accessible stroke color used for interactive neutrally-toned elements with strong emphasis."
|
|
524
|
-
},
|
|
525
|
-
"Color/Semantic/Stroke/Brand/strokeInt-brand": {
|
|
526
|
-
"value": {
|
|
527
|
-
".": "#3858e9"
|
|
528
|
-
},
|
|
529
|
-
"description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis."
|
|
530
|
-
},
|
|
531
|
-
"Color/Semantic/Stroke/Brand/strokeInt-brand-active": {
|
|
532
|
-
"value": {
|
|
533
|
-
".": "#2337c8"
|
|
534
|
-
},
|
|
535
|
-
"description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active."
|
|
536
|
-
},
|
|
537
|
-
"Color/Semantic/Stroke/Brand/strokeInt-brand-disabled": {
|
|
538
|
-
"value": {
|
|
539
|
-
".": "#d8d8d8"
|
|
540
|
-
},
|
|
541
|
-
"description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state."
|
|
542
|
-
},
|
|
543
|
-
"Color/Semantic/Stroke/Error/strokeInt-error-strong": {
|
|
544
|
-
"value": {
|
|
545
|
-
".": "#cc1818"
|
|
546
|
-
},
|
|
547
|
-
"description": "Accessible stroke color used for interactive error-toned elements with strong emphasis."
|
|
548
|
-
},
|
|
549
|
-
"Color/Semantic/Stroke/Brand/strokeFoc-brand": {
|
|
550
|
-
"value": {
|
|
551
|
-
".": "#3858e9"
|
|
552
|
-
},
|
|
553
|
-
"description": "Accessible stroke color applied to focus rings."
|
|
554
|
-
},
|
|
555
|
-
"Dimension/Semantic/base": {
|
|
556
|
-
"value": {
|
|
557
|
-
".": "4px"
|
|
558
|
-
},
|
|
559
|
-
"description": "Base dimension unit"
|
|
560
|
-
},
|
|
561
|
-
"Dimension/Semantic/padding-surface-2xs": {
|
|
562
|
-
"value": {
|
|
563
|
-
".": "4px",
|
|
564
|
-
"compact": "4px",
|
|
565
|
-
"comfortable": "8px"
|
|
566
|
-
},
|
|
567
|
-
"description": "2x extra small spacing for surfaces"
|
|
568
|
-
},
|
|
569
|
-
"Dimension/Semantic/padding-surface-xs": {
|
|
570
|
-
"value": {
|
|
571
|
-
".": "8px",
|
|
572
|
-
"compact": "4px",
|
|
573
|
-
"comfortable": "12px"
|
|
574
|
-
},
|
|
575
|
-
"description": "Extra small spacing for surfaces"
|
|
576
|
-
},
|
|
577
|
-
"Dimension/Semantic/padding-surface-sm": {
|
|
578
|
-
"value": {
|
|
579
|
-
".": "16px",
|
|
580
|
-
"compact": "12px",
|
|
581
|
-
"comfortable": "20px"
|
|
582
|
-
},
|
|
583
|
-
"description": "Small spacing for surfaces"
|
|
584
|
-
},
|
|
585
|
-
"Dimension/Semantic/padding-surface-md": {
|
|
586
|
-
"value": {
|
|
587
|
-
".": "24px",
|
|
588
|
-
"compact": "20px",
|
|
589
|
-
"comfortable": "32px"
|
|
590
|
-
},
|
|
591
|
-
"description": "Medium spacing for surfaces"
|
|
592
|
-
},
|
|
593
|
-
"Dimension/Semantic/padding-surface-lg": {
|
|
594
|
-
"value": {
|
|
595
|
-
".": "32px",
|
|
596
|
-
"compact": "24px",
|
|
597
|
-
"comfortable": "40px"
|
|
598
|
-
},
|
|
599
|
-
"description": "Large spacing for surfaces"
|
|
600
|
-
},
|
|
601
|
-
"Elevation/x-small": {
|
|
602
|
-
"value": {
|
|
603
|
-
".": "0 1px 1px 0 color(srgb 0 0 0 / 0.03), 0 1px 2px 0 color(srgb 0 0 0 / 0.02), 0 3px 3px 0 color(srgb 0 0 0 / 0.02), 0 4px 4px 0 color(srgb 0 0 0 / 0.01)"
|
|
604
|
-
},
|
|
605
|
-
"description": "For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame."
|
|
606
|
-
},
|
|
607
|
-
"Elevation/small": {
|
|
608
|
-
"value": {
|
|
609
|
-
".": "0 1px 2px 0 color(srgb 0 0 0 / 0.05), 0 2px 3px 0 color(srgb 0 0 0 / 0.04), 0 6px 6px 0 color(srgb 0 0 0 / 0.03), 0 8px 8px 0 color(srgb 0 0 0 / 0.02)"
|
|
610
|
-
},
|
|
611
|
-
"description": "For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar."
|
|
612
|
-
},
|
|
613
|
-
"Elevation/medium": {
|
|
614
|
-
"value": {
|
|
615
|
-
".": "0 2px 3px 0 color(srgb 0 0 0 / 0.05), 0 4px 5px 0 color(srgb 0 0 0 / 0.04), 0 12px 12px 0 color(srgb 0 0 0 / 0.03), 0 16px 16px 0 color(srgb 0 0 0 / 0.02)"
|
|
616
|
-
},
|
|
617
|
-
"description": "For components that offer additional actions. Example: Menus, Command Palette"
|
|
618
|
-
},
|
|
619
|
-
"Elevation/large": {
|
|
620
|
-
"value": {
|
|
621
|
-
".": "0 5px 15px 0 color(srgb 0 0 0 / 0.08), 0 15px 27px 0 color(srgb 0 0 0 / 0.07), 0 30px 36px 0 color(srgb 0 0 0 / 0.04), 0 50px 43px 0 color(srgb 0 0 0 / 0.02)"
|
|
622
|
-
},
|
|
623
|
-
"description": "For components that confirm decisions or handle necessary interruptions. Example: Modals."
|
|
624
|
-
},
|
|
625
|
-
"Font/family-heading": {
|
|
626
|
-
"value": {
|
|
627
|
-
".": "-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif"
|
|
628
|
-
},
|
|
629
|
-
"description": "Headings font family"
|
|
630
|
-
},
|
|
631
|
-
"Font/family-body": {
|
|
632
|
-
"value": {
|
|
633
|
-
".": "-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif"
|
|
634
|
-
},
|
|
635
|
-
"description": "Body font family"
|
|
636
|
-
},
|
|
637
|
-
"Font/family-mono": {
|
|
638
|
-
"value": {
|
|
639
|
-
".": "\"Menlo\", \"Consolas\", monaco, monospace"
|
|
640
|
-
},
|
|
641
|
-
"description": "Monospace font family"
|
|
642
|
-
},
|
|
643
|
-
"Font/size-x-small": {
|
|
644
|
-
"value": {
|
|
645
|
-
".": "11px"
|
|
646
|
-
},
|
|
647
|
-
"description": "Extra small font size"
|
|
648
|
-
},
|
|
649
|
-
"Font/size-small": {
|
|
650
|
-
"value": {
|
|
651
|
-
".": "12px"
|
|
652
|
-
},
|
|
653
|
-
"description": "Small font size"
|
|
654
|
-
},
|
|
655
|
-
"Font/size-medium": {
|
|
656
|
-
"value": {
|
|
657
|
-
".": "13px"
|
|
658
|
-
},
|
|
659
|
-
"description": "Medium font size"
|
|
660
|
-
},
|
|
661
|
-
"Font/size-large": {
|
|
662
|
-
"value": {
|
|
663
|
-
".": "15px"
|
|
664
|
-
},
|
|
665
|
-
"description": "Large font size"
|
|
666
|
-
},
|
|
667
|
-
"Font/size-x-large": {
|
|
668
|
-
"value": {
|
|
669
|
-
".": "20px"
|
|
670
|
-
},
|
|
671
|
-
"description": "Extra large font size"
|
|
672
|
-
},
|
|
673
|
-
"Font/size-2x-large": {
|
|
674
|
-
"value": {
|
|
675
|
-
".": "32px"
|
|
676
|
-
},
|
|
677
|
-
"description": "2X large font size"
|
|
678
|
-
},
|
|
679
|
-
"Font/lineHeight-x-small": {
|
|
680
|
-
"value": {
|
|
681
|
-
".": "16px"
|
|
682
|
-
},
|
|
683
|
-
"description": "Extra small line height"
|
|
684
|
-
},
|
|
685
|
-
"Font/lineHeight-small": {
|
|
686
|
-
"value": {
|
|
687
|
-
".": "20px"
|
|
688
|
-
},
|
|
689
|
-
"description": "Small line height"
|
|
690
|
-
},
|
|
691
|
-
"Font/lineHeight-medium": {
|
|
692
|
-
"value": {
|
|
693
|
-
".": "24px"
|
|
694
|
-
},
|
|
695
|
-
"description": "Medium line height"
|
|
696
|
-
},
|
|
697
|
-
"Font/lineHeight-large": {
|
|
698
|
-
"value": {
|
|
699
|
-
".": "28px"
|
|
700
|
-
},
|
|
701
|
-
"description": "Large line height"
|
|
702
|
-
},
|
|
703
|
-
"Font/lineHeight-x-large": {
|
|
704
|
-
"value": {
|
|
705
|
-
".": "32px"
|
|
706
|
-
},
|
|
707
|
-
"description": "Extra large line height"
|
|
708
|
-
},
|
|
709
|
-
"Font/lineHeight-2x-large": {
|
|
710
|
-
"value": {
|
|
711
|
-
".": "40px"
|
|
712
|
-
},
|
|
713
|
-
"description": "2X large line height"
|
|
714
|
-
}
|
|
715
|
-
}
|