@common-origin/design-system 2.22.0 → 3.0.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/README.md +2 -2
- package/dist/client.js +218 -476
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.d.mts +5 -12
- package/dist/components/atoms/Badge/Badge.d.ts +5 -12
- package/dist/components/atoms/Badge/Badge.mjs +0 -7
- package/dist/components/atoms/Badge/index.d.mts +1 -1
- package/dist/components/atoms/Badge/index.d.ts +1 -1
- package/dist/components/atoms/Box/Box.d.mts +29 -17
- package/dist/components/atoms/Box/Box.d.ts +29 -17
- package/dist/components/atoms/Box/Box.mjs +8 -8
- package/dist/components/atoms/Button/Button.d.mts +1 -4
- package/dist/components/atoms/Button/Button.d.ts +1 -4
- package/dist/components/atoms/Button/Button.mjs +3 -10
- package/dist/components/atoms/CategoryLabel/CategoryLabel.d.mts +4 -12
- package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +4 -12
- package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs +5 -16
- package/dist/components/atoms/Chip/Chip.d.mts +8 -20
- package/dist/components/atoms/Chip/Chip.d.ts +8 -20
- package/dist/components/atoms/Chip/Chip.mjs +20 -46
- package/dist/components/atoms/Chip/Chip.mjs.map +1 -1
- package/dist/components/atoms/Chip/FilterChip.d.mts +22 -10
- package/dist/components/atoms/Chip/FilterChip.d.ts +22 -10
- package/dist/components/atoms/Chip/FilterChip.mjs +66 -6
- package/dist/components/atoms/Chip/FilterChip.mjs.map +1 -1
- package/dist/components/atoms/Chip/InputChip.mjs +4 -6
- package/dist/components/atoms/Chip/InputChip.mjs.map +1 -1
- package/dist/components/atoms/Chip/index.d.mts +0 -1
- package/dist/components/atoms/Chip/index.d.ts +0 -1
- package/dist/components/atoms/Chip/shared/types.d.mts +9 -19
- package/dist/components/atoms/Chip/shared/types.d.ts +9 -19
- package/dist/components/atoms/Chip/shared/utils.d.mts +3 -3
- package/dist/components/atoms/Chip/shared/utils.d.ts +3 -3
- package/dist/components/atoms/Chip/shared/utils.mjs +4 -8
- package/dist/components/atoms/Chip/shared/utils.mjs.map +1 -1
- package/dist/components/atoms/DateFormatter/DateFormatter.d.mts +2 -5
- package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +2 -5
- package/dist/components/atoms/DateFormatter/DateFormatter.mjs +0 -1
- package/dist/components/atoms/StatusLabel/StatusLabel.mjs +1 -4
- package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map +1 -1
- package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts +5 -7
- package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +5 -7
- package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs +10 -12
- package/dist/components/atoms/Tag/Tag.d.mts +2 -4
- package/dist/components/atoms/Tag/Tag.d.ts +2 -4
- package/dist/components/atoms/Tag/Tag.mjs +0 -24
- package/dist/components/atoms/index.d.mts +0 -2
- package/dist/components/atoms/index.d.ts +0 -2
- package/dist/components/layout/GridSystem/GridSystem.d.mts +23 -18
- package/dist/components/layout/GridSystem/GridSystem.d.ts +23 -18
- package/dist/components/layout/GridSystem/GridSystem.mjs +7 -5
- package/dist/components/molecules/AccountCard/AccountCard.mjs +1 -1
- package/dist/components/molecules/AgentInput/AgentInput.d.mts +5 -0
- package/dist/components/molecules/AgentInput/AgentInput.d.ts +5 -0
- package/dist/components/molecules/AgentInput/AgentInput.mjs +1 -1
- package/dist/components/molecules/Alert/Alert.d.mts +1 -9
- package/dist/components/molecules/Alert/Alert.d.ts +1 -9
- package/dist/components/molecules/Alert/Alert.mjs +13 -26
- package/dist/components/molecules/ChipGroup/ChipGroup.d.mts +0 -1
- package/dist/components/molecules/ChipGroup/ChipGroup.d.ts +0 -1
- package/dist/components/molecules/ChipGroup/ChipGroup.mjs +1 -6
- package/dist/components/molecules/DateGroup/DateGroup.d.mts +1 -2
- package/dist/components/molecules/DateGroup/DateGroup.d.ts +1 -2
- package/dist/components/molecules/Modal/Modal.d.mts +0 -1
- package/dist/components/molecules/Modal/Modal.d.ts +0 -1
- package/dist/components/molecules/TabBar/TabBar.d.mts +0 -13
- package/dist/components/molecules/TabBar/TabBar.d.ts +0 -13
- package/dist/components/molecules/TabBar/TabBar.mjs +2 -4
- package/dist/components/molecules/TabBar/index.d.mts +1 -1
- package/dist/components/molecules/TabBar/index.d.ts +1 -1
- package/dist/components/molecules/index.d.mts +0 -1
- package/dist/components/molecules/index.d.ts +0 -1
- package/dist/data.js +29 -571
- package/dist/data.js.map +1 -1
- package/dist/index.js +0 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -5
- package/dist/index.mjs.map +1 -1
- package/dist/lib/tokenAliases.d.mts +17 -8
- package/dist/lib/tokenAliases.d.ts +17 -8
- package/dist/lib/tokenAliases.mjs +46 -87
- package/dist/lib/tokenAliases.mjs.map +1 -1
- package/dist/styles/tokens.d.mts +7 -2043
- package/dist/styles/tokens.d.ts +7 -2043
- package/dist/styles/tokens.json +29 -571
- package/dist/styles/tokens.json.mjs +29 -571
- package/dist/styles/tokens.json.mjs.map +1 -1
- package/dist/tokens/index.js +29 -571
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/index.mjs +29 -571
- package/dist/tokens/index.mjs.map +1 -1
- package/dist/tokens/styles/tokens.d.mts +7 -2043
- package/dist/tokens/styles/tokens.d.ts +7 -2043
- package/dist/tokens.css +10 -481
- package/package.json +2 -2
- package/dist/components/atoms/CategoryBadge/CategoryBadge.d.mts +0 -29
- package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +0 -29
- package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs +0 -29
- package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs.map +0 -1
- package/dist/components/atoms/CategoryBadge/index.d.mts +0 -2
- package/dist/components/atoms/CategoryBadge/index.d.ts +0 -2
- package/dist/components/atoms/Chip/BooleanChip.d.mts +0 -28
- package/dist/components/atoms/Chip/BooleanChip.d.ts +0 -28
- package/dist/components/atoms/Chip/BooleanChip.mjs +0 -76
- package/dist/components/atoms/Chip/BooleanChip.mjs.map +0 -1
- package/dist/components/atoms/StatusBadge/StatusBadge.d.mts +0 -24
- package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +0 -24
- package/dist/components/atoms/StatusBadge/StatusBadge.mjs +0 -18
- package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map +0 -1
- package/dist/components/atoms/StatusBadge/index.d.mts +0 -2
- package/dist/components/atoms/StatusBadge/index.d.ts +0 -2
- package/dist/components/molecules/PageTitle/PageTitle.d.mts +0 -21
- package/dist/components/molecules/PageTitle/PageTitle.d.ts +0 -21
- package/dist/components/molecules/PageTitle/PageTitle.mjs +0 -77
- package/dist/components/molecules/PageTitle/PageTitle.mjs.map +0 -1
- package/dist/components/molecules/PageTitle/index.d.mts +0 -1
- package/dist/components/molecules/PageTitle/index.d.ts +0 -1
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -115,142 +115,6 @@ export type Tokens = {
|
|
|
115
115
|
};
|
|
116
116
|
/** Size keywords (auto, full, screen, min, max, fit). The numbered steps are deprecated aliases of base.dimension. */
|
|
117
117
|
size: {
|
|
118
|
-
/**
|
|
119
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.0`.
|
|
120
|
-
*/
|
|
121
|
-
'0': string;
|
|
122
|
-
/**
|
|
123
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.1`.
|
|
124
|
-
*/
|
|
125
|
-
'1': string;
|
|
126
|
-
/**
|
|
127
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.2`.
|
|
128
|
-
*/
|
|
129
|
-
'2': string;
|
|
130
|
-
/**
|
|
131
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.3`.
|
|
132
|
-
*/
|
|
133
|
-
'3': string;
|
|
134
|
-
/**
|
|
135
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.4`.
|
|
136
|
-
*/
|
|
137
|
-
'4': string;
|
|
138
|
-
/**
|
|
139
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.5`.
|
|
140
|
-
*/
|
|
141
|
-
'5': string;
|
|
142
|
-
/**
|
|
143
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.6`.
|
|
144
|
-
*/
|
|
145
|
-
'6': string;
|
|
146
|
-
/**
|
|
147
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.7`.
|
|
148
|
-
*/
|
|
149
|
-
'7': string;
|
|
150
|
-
/**
|
|
151
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.8`.
|
|
152
|
-
*/
|
|
153
|
-
'8': string;
|
|
154
|
-
/**
|
|
155
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.9`.
|
|
156
|
-
*/
|
|
157
|
-
'9': string;
|
|
158
|
-
/**
|
|
159
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.10`.
|
|
160
|
-
*/
|
|
161
|
-
'10': string;
|
|
162
|
-
/**
|
|
163
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.11`.
|
|
164
|
-
*/
|
|
165
|
-
'11': string;
|
|
166
|
-
/**
|
|
167
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.12`.
|
|
168
|
-
*/
|
|
169
|
-
'12': string;
|
|
170
|
-
/**
|
|
171
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.14`.
|
|
172
|
-
*/
|
|
173
|
-
'14': string;
|
|
174
|
-
/**
|
|
175
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.15`.
|
|
176
|
-
*/
|
|
177
|
-
'15': string;
|
|
178
|
-
/**
|
|
179
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.16`.
|
|
180
|
-
*/
|
|
181
|
-
'16': string;
|
|
182
|
-
/**
|
|
183
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.18`.
|
|
184
|
-
*/
|
|
185
|
-
'18': string;
|
|
186
|
-
/**
|
|
187
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.20`.
|
|
188
|
-
*/
|
|
189
|
-
'20': string;
|
|
190
|
-
/**
|
|
191
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.24`.
|
|
192
|
-
*/
|
|
193
|
-
'24': string;
|
|
194
|
-
/**
|
|
195
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.28`.
|
|
196
|
-
*/
|
|
197
|
-
'28': string;
|
|
198
|
-
/**
|
|
199
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.30`.
|
|
200
|
-
*/
|
|
201
|
-
'30': string;
|
|
202
|
-
/**
|
|
203
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.32`.
|
|
204
|
-
*/
|
|
205
|
-
'32': string;
|
|
206
|
-
/**
|
|
207
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.40`.
|
|
208
|
-
*/
|
|
209
|
-
'40': string;
|
|
210
|
-
/**
|
|
211
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.45`.
|
|
212
|
-
*/
|
|
213
|
-
'45': string;
|
|
214
|
-
/**
|
|
215
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.48`.
|
|
216
|
-
*/
|
|
217
|
-
'48': string;
|
|
218
|
-
/**
|
|
219
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.50`.
|
|
220
|
-
*/
|
|
221
|
-
'50': string;
|
|
222
|
-
/**
|
|
223
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.56`.
|
|
224
|
-
*/
|
|
225
|
-
'56': string;
|
|
226
|
-
/**
|
|
227
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.64`.
|
|
228
|
-
*/
|
|
229
|
-
'64': string;
|
|
230
|
-
/**
|
|
231
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.75`.
|
|
232
|
-
*/
|
|
233
|
-
'75': string;
|
|
234
|
-
/**
|
|
235
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.90`.
|
|
236
|
-
*/
|
|
237
|
-
'90': string;
|
|
238
|
-
/**
|
|
239
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.100`.
|
|
240
|
-
*/
|
|
241
|
-
'100': string;
|
|
242
|
-
/**
|
|
243
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.140`.
|
|
244
|
-
*/
|
|
245
|
-
'140': string;
|
|
246
|
-
/**
|
|
247
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.180`.
|
|
248
|
-
*/
|
|
249
|
-
'180': string;
|
|
250
|
-
/**
|
|
251
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.192`.
|
|
252
|
-
*/
|
|
253
|
-
'192': string;
|
|
254
118
|
auto: string;
|
|
255
119
|
full: string;
|
|
256
120
|
screen: string;
|
|
@@ -258,10 +122,12 @@ export type Tokens = {
|
|
|
258
122
|
max: string;
|
|
259
123
|
fit: string;
|
|
260
124
|
};
|
|
261
|
-
/** Colour palette: the grey ramp, six role ramps (accent, success, warning, serious, danger, ai) and four display ramps (olive, periwinkle, rose, magenta), each with alpha twins (decisions 0040, 0043 and 0044); the older neutral ramp and seven older hue ramps, removed in 3.0; and transparent. */
|
|
125
|
+
/** Colour palette: the grey ramp, six role ramps (accent, success, warning, serious, danger, ai) and four display ramps (olive, periwinkle, rose, magenta), each with alpha twins (decisions 0040, 0043 and 0044); the older neutral ramp and seven older hue ramps, removed in 3.0; white (decision 0049); and transparent. */
|
|
262
126
|
color: {
|
|
263
127
|
/** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
|
|
264
128
|
transparent: string;
|
|
129
|
+
/** Pure white, outside the ramps: raised surfaces (semantic.surface.raised) that sit on the gray.100 page. The ramps' contrast is measured against it (decision 0049). */
|
|
130
|
+
white: string;
|
|
265
131
|
/** Pure-grey ramp, defined in OKLCH (chroma 0): 100 (lightest) to 1200 (primary text). Each step has one job, and its contrast against white is in its description (decision 0040). */
|
|
266
132
|
gray: {
|
|
267
133
|
/** Page background. oklch(0.991 0 0), 1.03:1 on white. */
|
|
@@ -856,223 +722,9 @@ export type Tokens = {
|
|
|
856
722
|
/** Primary text, and the darkest step. Composites to magenta.1200 over white. */
|
|
857
723
|
'1200': string;
|
|
858
724
|
};
|
|
859
|
-
/** Neutral grey ramp: 000 is white, then 100 (lightest grey) to 1000 (near-black). */
|
|
860
|
-
neutral: {
|
|
861
|
-
'100': string;
|
|
862
|
-
'200': string;
|
|
863
|
-
'300': string;
|
|
864
|
-
'400': string;
|
|
865
|
-
'500': string;
|
|
866
|
-
'600': string;
|
|
867
|
-
'700': string;
|
|
868
|
-
'800': string;
|
|
869
|
-
'900': string;
|
|
870
|
-
'1000': string;
|
|
871
|
-
'000': string;
|
|
872
|
-
};
|
|
873
|
-
/** Green ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
874
|
-
green: {
|
|
875
|
-
'100': string;
|
|
876
|
-
'200': string;
|
|
877
|
-
'300': string;
|
|
878
|
-
'400': string;
|
|
879
|
-
'500': string;
|
|
880
|
-
'600': string;
|
|
881
|
-
'700': string;
|
|
882
|
-
'800': string;
|
|
883
|
-
'900': string;
|
|
884
|
-
'1000': string;
|
|
885
|
-
'1100': string;
|
|
886
|
-
'1200': string;
|
|
887
|
-
'1300': string;
|
|
888
|
-
};
|
|
889
|
-
/** Orange ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
890
|
-
orange: {
|
|
891
|
-
'100': string;
|
|
892
|
-
'200': string;
|
|
893
|
-
'300': string;
|
|
894
|
-
'400': string;
|
|
895
|
-
'500': string;
|
|
896
|
-
'600': string;
|
|
897
|
-
'700': string;
|
|
898
|
-
'800': string;
|
|
899
|
-
'900': string;
|
|
900
|
-
'1000': string;
|
|
901
|
-
'1100': string;
|
|
902
|
-
'1200': string;
|
|
903
|
-
'1300': string;
|
|
904
|
-
};
|
|
905
|
-
/** Red ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
906
|
-
red: {
|
|
907
|
-
'100': string;
|
|
908
|
-
'200': string;
|
|
909
|
-
'300': string;
|
|
910
|
-
'400': string;
|
|
911
|
-
'500': string;
|
|
912
|
-
'600': string;
|
|
913
|
-
'700': string;
|
|
914
|
-
'800': string;
|
|
915
|
-
'900': string;
|
|
916
|
-
'1000': string;
|
|
917
|
-
'1100': string;
|
|
918
|
-
'1200': string;
|
|
919
|
-
'1300': string;
|
|
920
|
-
};
|
|
921
|
-
/** Blue ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
922
|
-
blue: {
|
|
923
|
-
'100': string;
|
|
924
|
-
'200': string;
|
|
925
|
-
'300': string;
|
|
926
|
-
'400': string;
|
|
927
|
-
'500': string;
|
|
928
|
-
'600': string;
|
|
929
|
-
'700': string;
|
|
930
|
-
'800': string;
|
|
931
|
-
'900': string;
|
|
932
|
-
'1000': string;
|
|
933
|
-
'1100': string;
|
|
934
|
-
'1200': string;
|
|
935
|
-
'1300': string;
|
|
936
|
-
};
|
|
937
|
-
/** Purple ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
938
|
-
purple: {
|
|
939
|
-
'100': string;
|
|
940
|
-
'200': string;
|
|
941
|
-
'300': string;
|
|
942
|
-
'400': string;
|
|
943
|
-
'500': string;
|
|
944
|
-
'600': string;
|
|
945
|
-
'700': string;
|
|
946
|
-
'800': string;
|
|
947
|
-
'900': string;
|
|
948
|
-
'1000': string;
|
|
949
|
-
'1100': string;
|
|
950
|
-
'1200': string;
|
|
951
|
-
'1300': string;
|
|
952
|
-
};
|
|
953
|
-
/** Pink ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
954
|
-
pink: {
|
|
955
|
-
'100': string;
|
|
956
|
-
'200': string;
|
|
957
|
-
'300': string;
|
|
958
|
-
'400': string;
|
|
959
|
-
'500': string;
|
|
960
|
-
'600': string;
|
|
961
|
-
'700': string;
|
|
962
|
-
'800': string;
|
|
963
|
-
'900': string;
|
|
964
|
-
'1000': string;
|
|
965
|
-
'1100': string;
|
|
966
|
-
'1200': string;
|
|
967
|
-
'1300': string;
|
|
968
|
-
};
|
|
969
|
-
/** Yellow ramp; the key orders lightness from 100 (lightest) to 1300 (darkest). */
|
|
970
|
-
yellow: {
|
|
971
|
-
'100': string;
|
|
972
|
-
'200': string;
|
|
973
|
-
'300': string;
|
|
974
|
-
'400': string;
|
|
975
|
-
'500': string;
|
|
976
|
-
'600': string;
|
|
977
|
-
'700': string;
|
|
978
|
-
'800': string;
|
|
979
|
-
'900': string;
|
|
980
|
-
'1000': string;
|
|
981
|
-
'1100': string;
|
|
982
|
-
'1200': string;
|
|
983
|
-
'1300': string;
|
|
984
|
-
};
|
|
985
725
|
};
|
|
986
726
|
/** Spacing keyword auto. The numbered steps are deprecated aliases of base.dimension. */
|
|
987
727
|
spacing: {
|
|
988
|
-
/**
|
|
989
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.0`.
|
|
990
|
-
*/
|
|
991
|
-
'0': string;
|
|
992
|
-
/**
|
|
993
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.1`.
|
|
994
|
-
*/
|
|
995
|
-
'1': string;
|
|
996
|
-
/**
|
|
997
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.2`.
|
|
998
|
-
*/
|
|
999
|
-
'2': string;
|
|
1000
|
-
/**
|
|
1001
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.3`.
|
|
1002
|
-
*/
|
|
1003
|
-
'3': string;
|
|
1004
|
-
/**
|
|
1005
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.4`.
|
|
1006
|
-
*/
|
|
1007
|
-
'4': string;
|
|
1008
|
-
/**
|
|
1009
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.5`.
|
|
1010
|
-
*/
|
|
1011
|
-
'5': string;
|
|
1012
|
-
/**
|
|
1013
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.6`.
|
|
1014
|
-
*/
|
|
1015
|
-
'6': string;
|
|
1016
|
-
/**
|
|
1017
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.7`.
|
|
1018
|
-
*/
|
|
1019
|
-
'7': string;
|
|
1020
|
-
/**
|
|
1021
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.8`.
|
|
1022
|
-
*/
|
|
1023
|
-
'8': string;
|
|
1024
|
-
/**
|
|
1025
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.9`.
|
|
1026
|
-
*/
|
|
1027
|
-
'9': string;
|
|
1028
|
-
/**
|
|
1029
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.10`.
|
|
1030
|
-
*/
|
|
1031
|
-
'10': string;
|
|
1032
|
-
/**
|
|
1033
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.12`.
|
|
1034
|
-
*/
|
|
1035
|
-
'12': string;
|
|
1036
|
-
/**
|
|
1037
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.14`.
|
|
1038
|
-
*/
|
|
1039
|
-
'14': string;
|
|
1040
|
-
/**
|
|
1041
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.16`.
|
|
1042
|
-
*/
|
|
1043
|
-
'16': string;
|
|
1044
|
-
/**
|
|
1045
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.20`.
|
|
1046
|
-
*/
|
|
1047
|
-
'20': string;
|
|
1048
|
-
/**
|
|
1049
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.24`.
|
|
1050
|
-
*/
|
|
1051
|
-
'24': string;
|
|
1052
|
-
/**
|
|
1053
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.28`.
|
|
1054
|
-
*/
|
|
1055
|
-
'28': string;
|
|
1056
|
-
/**
|
|
1057
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.32`.
|
|
1058
|
-
*/
|
|
1059
|
-
'32': string;
|
|
1060
|
-
/**
|
|
1061
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.40`.
|
|
1062
|
-
*/
|
|
1063
|
-
'40': string;
|
|
1064
|
-
/**
|
|
1065
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.48`.
|
|
1066
|
-
*/
|
|
1067
|
-
'48': string;
|
|
1068
|
-
/**
|
|
1069
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.56`.
|
|
1070
|
-
*/
|
|
1071
|
-
'56': string;
|
|
1072
|
-
/**
|
|
1073
|
-
* @deprecated base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. Use `base.dimension.64`.
|
|
1074
|
-
*/
|
|
1075
|
-
'64': string;
|
|
1076
728
|
auto: string;
|
|
1077
729
|
};
|
|
1078
730
|
/** Font stacks keyed by role: heading, body and monospace. */
|
|
@@ -1172,12 +824,6 @@ export type Tokens = {
|
|
|
1172
824
|
textColor: string;
|
|
1173
825
|
/** Corner radius of every Button (visual language: Button uses sm). */
|
|
1174
826
|
borderRadius: string;
|
|
1175
|
-
/**
|
|
1176
|
-
* Padding of the primary Button.
|
|
1177
|
-
*
|
|
1178
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0.
|
|
1179
|
-
*/
|
|
1180
|
-
padding: string;
|
|
1181
827
|
/** Button label typography, the same as sizes.large.font. */
|
|
1182
828
|
font: string;
|
|
1183
829
|
};
|
|
@@ -1192,12 +838,6 @@ export type Tokens = {
|
|
|
1192
838
|
focus: {
|
|
1193
839
|
/** Focus ring on every Button. */
|
|
1194
840
|
outline: string;
|
|
1195
|
-
/**
|
|
1196
|
-
* Gap between a Button and its focus outline.
|
|
1197
|
-
*
|
|
1198
|
-
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1199
|
-
*/
|
|
1200
|
-
outlineOffset: string;
|
|
1201
841
|
};
|
|
1202
842
|
disabled: {
|
|
1203
843
|
/** Disabled primary Button fill. */
|
|
@@ -1266,50 +906,6 @@ export type Tokens = {
|
|
|
1266
906
|
textColor: string;
|
|
1267
907
|
};
|
|
1268
908
|
};
|
|
1269
|
-
emphasis: {
|
|
1270
|
-
/**
|
|
1271
|
-
* Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016).
|
|
1272
|
-
*
|
|
1273
|
-
* @deprecated Use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
1274
|
-
*/
|
|
1275
|
-
backgroundColor: string;
|
|
1276
|
-
/**
|
|
1277
|
-
* Text and icon colour on the accent Button.
|
|
1278
|
-
*
|
|
1279
|
-
* @deprecated Use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016).
|
|
1280
|
-
*/
|
|
1281
|
-
textColor: string;
|
|
1282
|
-
hover: {
|
|
1283
|
-
/**
|
|
1284
|
-
* Accent Button fill on hover.
|
|
1285
|
-
*
|
|
1286
|
-
* @deprecated Use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
1287
|
-
*/
|
|
1288
|
-
backgroundColor: string;
|
|
1289
|
-
};
|
|
1290
|
-
active: {
|
|
1291
|
-
/**
|
|
1292
|
-
* Accent Button fill while pressed.
|
|
1293
|
-
*
|
|
1294
|
-
* @deprecated Use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
1295
|
-
*/
|
|
1296
|
-
backgroundColor: string;
|
|
1297
|
-
};
|
|
1298
|
-
disabled: {
|
|
1299
|
-
/**
|
|
1300
|
-
* Disabled accent Button fill.
|
|
1301
|
-
*
|
|
1302
|
-
* @deprecated Use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016).
|
|
1303
|
-
*/
|
|
1304
|
-
backgroundColor: string;
|
|
1305
|
-
/**
|
|
1306
|
-
* Disabled accent Button text and icon colour.
|
|
1307
|
-
*
|
|
1308
|
-
* @deprecated Use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016).
|
|
1309
|
-
*/
|
|
1310
|
-
textColor: string;
|
|
1311
|
-
};
|
|
1312
|
-
};
|
|
1313
909
|
danger: {
|
|
1314
910
|
/** Danger Button fill at rest, for destructive actions. */
|
|
1315
911
|
backgroundColor: string;
|
|
@@ -1333,34 +929,16 @@ export type Tokens = {
|
|
|
1333
929
|
};
|
|
1334
930
|
sizes: {
|
|
1335
931
|
small: {
|
|
1336
|
-
/**
|
|
1337
|
-
* Padding of the small Button.
|
|
1338
|
-
*
|
|
1339
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
|
|
1340
|
-
*/
|
|
1341
|
-
padding: string;
|
|
1342
932
|
/** Small Button text: the caption style, with button.sizes.small.fontWeight after it. */
|
|
1343
933
|
font: string;
|
|
1344
934
|
/** Weight of small Button text, set after the font: medium, as the other sizes. */
|
|
1345
935
|
fontWeight: string;
|
|
1346
936
|
};
|
|
1347
937
|
medium: {
|
|
1348
|
-
/**
|
|
1349
|
-
* Padding of the medium Button.
|
|
1350
|
-
*
|
|
1351
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0.
|
|
1352
|
-
*/
|
|
1353
|
-
padding: string;
|
|
1354
938
|
/** Medium Button label typography. */
|
|
1355
939
|
font: string;
|
|
1356
940
|
};
|
|
1357
941
|
large: {
|
|
1358
|
-
/**
|
|
1359
|
-
* Padding of the large Button.
|
|
1360
|
-
*
|
|
1361
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0.
|
|
1362
|
-
*/
|
|
1363
|
-
padding: string;
|
|
1364
942
|
/** Large Button label typography. */
|
|
1365
943
|
font: string;
|
|
1366
944
|
};
|
|
@@ -1378,32 +956,12 @@ export type Tokens = {
|
|
|
1378
956
|
textColor: string;
|
|
1379
957
|
/** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
|
|
1380
958
|
borderRadius: string;
|
|
1381
|
-
/**
|
|
1382
|
-
* Padding of a chip before chips took padding per size.
|
|
1383
|
-
*
|
|
1384
|
-
* @deprecated No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0.
|
|
1385
|
-
*/
|
|
1386
|
-
padding: string;
|
|
1387
959
|
/** Chip label typography, the same as sizes.large.font. */
|
|
1388
960
|
font: string;
|
|
1389
961
|
};
|
|
1390
|
-
hover: {
|
|
1391
|
-
/** Default chip fill on hover, when it's clickable. */
|
|
1392
|
-
backgroundColor: string;
|
|
1393
|
-
};
|
|
1394
|
-
active: {
|
|
1395
|
-
/** Default chip fill while pressed, when it's clickable. */
|
|
1396
|
-
backgroundColor: string;
|
|
1397
|
-
};
|
|
1398
962
|
focus: {
|
|
1399
963
|
/** Focus ring on every chip and its close button. */
|
|
1400
964
|
outline: string;
|
|
1401
|
-
/**
|
|
1402
|
-
* Gap between a chip and its focus outline.
|
|
1403
|
-
*
|
|
1404
|
-
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1405
|
-
*/
|
|
1406
|
-
outlineOffset: string;
|
|
1407
965
|
};
|
|
1408
966
|
disabled: {
|
|
1409
967
|
/** Disabled default chip fill. */
|
|
@@ -1412,26 +970,6 @@ export type Tokens = {
|
|
|
1412
970
|
textColor: string;
|
|
1413
971
|
};
|
|
1414
972
|
variants: {
|
|
1415
|
-
emphasis: {
|
|
1416
|
-
/** Emphasis chip fill at rest. */
|
|
1417
|
-
backgroundColor: string;
|
|
1418
|
-
/** Emphasis chip text and icon colour. */
|
|
1419
|
-
textColor: string;
|
|
1420
|
-
hover: {
|
|
1421
|
-
/** Emphasis chip fill on hover, when it's clickable. */
|
|
1422
|
-
backgroundColor: string;
|
|
1423
|
-
};
|
|
1424
|
-
active: {
|
|
1425
|
-
/** Emphasis chip fill while pressed, when it's clickable. */
|
|
1426
|
-
backgroundColor: string;
|
|
1427
|
-
};
|
|
1428
|
-
disabled: {
|
|
1429
|
-
/** Disabled emphasis chip fill. */
|
|
1430
|
-
backgroundColor: string;
|
|
1431
|
-
/** Disabled emphasis chip text and icon colour. */
|
|
1432
|
-
textColor: string;
|
|
1433
|
-
};
|
|
1434
|
-
};
|
|
1435
973
|
subtle: {
|
|
1436
974
|
/** Subtle chip fill at rest. */
|
|
1437
975
|
backgroundColor: string;
|
|
@@ -1452,357 +990,45 @@ export type Tokens = {
|
|
|
1452
990
|
textColor: string;
|
|
1453
991
|
};
|
|
1454
992
|
};
|
|
1455
|
-
interactive: {
|
|
1456
|
-
/** Interactive chip fill at rest. */
|
|
1457
|
-
backgroundColor: string;
|
|
1458
|
-
/** Interactive chip text and icon colour. */
|
|
1459
|
-
textColor: string;
|
|
1460
|
-
hover: {
|
|
1461
|
-
/** Interactive chip fill on hover, when it's clickable. */
|
|
1462
|
-
backgroundColor: string;
|
|
1463
|
-
};
|
|
1464
|
-
active: {
|
|
1465
|
-
/** Interactive chip fill while pressed, when it's clickable. */
|
|
1466
|
-
backgroundColor: string;
|
|
1467
|
-
};
|
|
1468
|
-
disabled: {
|
|
1469
|
-
/** Disabled interactive chip fill. */
|
|
1470
|
-
backgroundColor: string;
|
|
1471
|
-
/** Disabled interactive chip text and icon colour. */
|
|
1472
|
-
textColor: string;
|
|
1473
|
-
};
|
|
1474
|
-
};
|
|
1475
993
|
};
|
|
1476
994
|
sizes: {
|
|
1477
|
-
small: {
|
|
1478
|
-
/**
|
|
1479
|
-
* Padding of the small chip.
|
|
1480
|
-
*
|
|
1481
|
-
* @deprecated Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0.
|
|
1482
|
-
*/
|
|
1483
|
-
padding: string;
|
|
1484
|
-
/**
|
|
1485
|
-
* Label typography of the small chip.
|
|
1486
|
-
*
|
|
1487
|
-
* @deprecated Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0.
|
|
1488
|
-
*/
|
|
1489
|
-
font: string;
|
|
1490
|
-
};
|
|
1491
995
|
medium: {
|
|
1492
|
-
/**
|
|
1493
|
-
* Padding of the medium chip.
|
|
1494
|
-
*
|
|
1495
|
-
* @deprecated Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0.
|
|
1496
|
-
*/
|
|
1497
|
-
padding: string;
|
|
1498
996
|
/** Chip label typography. Every chip uses it: chips have one size (decision 0035). */
|
|
1499
997
|
font: string;
|
|
1500
998
|
};
|
|
1501
|
-
large: {
|
|
1502
|
-
/**
|
|
1503
|
-
* Padding of the large chip, which no chip used.
|
|
1504
|
-
*
|
|
1505
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0.
|
|
1506
|
-
*/
|
|
1507
|
-
padding: string;
|
|
1508
|
-
/**
|
|
1509
|
-
* Label typography of the large chip, which no chip used.
|
|
1510
|
-
*
|
|
1511
|
-
* @deprecated Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0.
|
|
1512
|
-
*/
|
|
1513
|
-
font: string;
|
|
1514
|
-
};
|
|
1515
999
|
};
|
|
1516
1000
|
};
|
|
1517
1001
|
iconButton: {
|
|
1518
1002
|
primary: {
|
|
1519
|
-
/**
|
|
1520
|
-
* Fill of the primary IconButton at rest.
|
|
1521
|
-
*
|
|
1522
|
-
* @deprecated IconButton reads component.button.primary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1523
|
-
*/
|
|
1524
|
-
backgroundColor: string;
|
|
1525
1003
|
/** Corner radius of every IconButton, matching Button. */
|
|
1526
1004
|
borderRadius: string;
|
|
1527
|
-
/**
|
|
1528
|
-
* Minimum width of the medium IconButton, duplicated from its sizes.
|
|
1529
|
-
*
|
|
1530
|
-
* @deprecated No IconButton reads it: sizes take their minimum width from semantic.size.control (decision 0034). Removed in 3.0. Use `semantic.size.control.md`.
|
|
1531
|
-
*/
|
|
1532
|
-
minWidth: string;
|
|
1533
|
-
/**
|
|
1534
|
-
* Minimum height of the medium IconButton, duplicated from its sizes.
|
|
1535
|
-
*
|
|
1536
|
-
* @deprecated No IconButton reads it: sizes take their minimum height from semantic.size.control (decision 0034). Removed in 3.0. Use `semantic.size.control.md`.
|
|
1537
|
-
*/
|
|
1538
|
-
minHeight: string;
|
|
1539
|
-
/**
|
|
1540
|
-
* Display of IconButton's content box.
|
|
1541
|
-
*
|
|
1542
|
-
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets display: flex itself. Removed in 3.0.
|
|
1543
|
-
*/
|
|
1544
|
-
display: string;
|
|
1545
|
-
/**
|
|
1546
|
-
* Vertical alignment of IconButton's icon.
|
|
1547
|
-
*
|
|
1548
|
-
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets align-items: center itself. Removed in 3.0.
|
|
1549
|
-
*/
|
|
1550
|
-
alignItems: string;
|
|
1551
|
-
/**
|
|
1552
|
-
* Horizontal alignment of IconButton's icon.
|
|
1553
|
-
*
|
|
1554
|
-
* @deprecated Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets justify-content: center itself. Removed in 3.0.
|
|
1555
|
-
*/
|
|
1556
|
-
justifyContent: string;
|
|
1557
|
-
};
|
|
1558
|
-
hover: {
|
|
1559
|
-
/**
|
|
1560
|
-
* Fill of the primary IconButton on hover.
|
|
1561
|
-
*
|
|
1562
|
-
* @deprecated IconButton reads component.button.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1563
|
-
*/
|
|
1564
|
-
backgroundColor: string;
|
|
1565
|
-
};
|
|
1566
|
-
active: {
|
|
1567
|
-
/**
|
|
1568
|
-
* Fill of the primary IconButton while pressed.
|
|
1569
|
-
*
|
|
1570
|
-
* @deprecated IconButton reads component.button.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1571
|
-
*/
|
|
1572
|
-
backgroundColor: string;
|
|
1573
1005
|
};
|
|
1574
1006
|
focus: {
|
|
1575
1007
|
/** Focus ring on every IconButton. */
|
|
1576
1008
|
outline: string;
|
|
1577
|
-
/**
|
|
1578
|
-
* Gap between an IconButton and its focus outline.
|
|
1579
|
-
*
|
|
1580
|
-
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1581
|
-
*/
|
|
1582
|
-
outlineOffset: string;
|
|
1583
|
-
};
|
|
1584
|
-
disabled: {
|
|
1585
|
-
/**
|
|
1586
|
-
* Fill of the primary IconButton when disabled.
|
|
1587
|
-
*
|
|
1588
|
-
* @deprecated IconButton reads component.button.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1589
|
-
*/
|
|
1590
|
-
backgroundColor: string;
|
|
1591
|
-
};
|
|
1592
|
-
variants: {
|
|
1593
|
-
secondary: {
|
|
1594
|
-
/**
|
|
1595
|
-
* Fill of the secondary IconButton at rest.
|
|
1596
|
-
*
|
|
1597
|
-
* @deprecated IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1598
|
-
*/
|
|
1599
|
-
backgroundColor: string;
|
|
1600
|
-
hover: {
|
|
1601
|
-
/**
|
|
1602
|
-
* Fill of the secondary IconButton on hover.
|
|
1603
|
-
*
|
|
1604
|
-
* @deprecated IconButton reads component.button.variants.secondary.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1605
|
-
*/
|
|
1606
|
-
backgroundColor: string;
|
|
1607
|
-
};
|
|
1608
|
-
active: {
|
|
1609
|
-
/**
|
|
1610
|
-
* Fill of the secondary IconButton while pressed.
|
|
1611
|
-
*
|
|
1612
|
-
* @deprecated IconButton reads component.button.variants.secondary.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1613
|
-
*/
|
|
1614
|
-
backgroundColor: string;
|
|
1615
|
-
};
|
|
1616
|
-
disabled: {
|
|
1617
|
-
/**
|
|
1618
|
-
* Fill of the secondary IconButton when disabled.
|
|
1619
|
-
*
|
|
1620
|
-
* @deprecated IconButton reads component.button.variants.secondary.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1621
|
-
*/
|
|
1622
|
-
backgroundColor: string;
|
|
1623
|
-
};
|
|
1624
|
-
};
|
|
1625
|
-
naked: {
|
|
1626
|
-
/**
|
|
1627
|
-
* Fill of the naked IconButton at rest.
|
|
1628
|
-
*
|
|
1629
|
-
* @deprecated IconButton reads component.button.variants.naked.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1630
|
-
*/
|
|
1631
|
-
backgroundColor: string;
|
|
1632
|
-
hover: {
|
|
1633
|
-
/**
|
|
1634
|
-
* Fill of the naked IconButton on hover.
|
|
1635
|
-
*
|
|
1636
|
-
* @deprecated IconButton reads component.button.variants.naked.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1637
|
-
*/
|
|
1638
|
-
backgroundColor: string;
|
|
1639
|
-
};
|
|
1640
|
-
active: {
|
|
1641
|
-
/**
|
|
1642
|
-
* Fill of the naked IconButton while pressed.
|
|
1643
|
-
*
|
|
1644
|
-
* @deprecated IconButton reads component.button.variants.naked.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1645
|
-
*/
|
|
1646
|
-
backgroundColor: string;
|
|
1647
|
-
};
|
|
1648
|
-
disabled: {
|
|
1649
|
-
/**
|
|
1650
|
-
* Fill of the naked IconButton when disabled.
|
|
1651
|
-
*
|
|
1652
|
-
* @deprecated IconButton reads component.button.variants.naked.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0.
|
|
1653
|
-
*/
|
|
1654
|
-
backgroundColor: string;
|
|
1655
|
-
};
|
|
1656
|
-
};
|
|
1657
|
-
};
|
|
1658
|
-
sizes: {
|
|
1659
|
-
small: {
|
|
1660
|
-
/**
|
|
1661
|
-
* Minimum width of the small IconButton.
|
|
1662
|
-
*
|
|
1663
|
-
* @deprecated IconButton takes its minimum width from semantic.size.control.sm (decision 0034). Removed in 3.0.
|
|
1664
|
-
*/
|
|
1665
|
-
minWidth: string;
|
|
1666
|
-
/**
|
|
1667
|
-
* Minimum height of the small IconButton.
|
|
1668
|
-
*
|
|
1669
|
-
* @deprecated IconButton takes its minimum height from semantic.size.control.sm (decision 0034). Removed in 3.0.
|
|
1670
|
-
*/
|
|
1671
|
-
minHeight: string;
|
|
1672
|
-
/**
|
|
1673
|
-
* Padding of the small IconButton.
|
|
1674
|
-
*
|
|
1675
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0.
|
|
1676
|
-
*/
|
|
1677
|
-
padding: string;
|
|
1678
|
-
};
|
|
1679
|
-
medium: {
|
|
1680
|
-
/**
|
|
1681
|
-
* Minimum width of the medium IconButton.
|
|
1682
|
-
*
|
|
1683
|
-
* @deprecated IconButton takes its minimum width from semantic.size.control.md (decision 0034). Removed in 3.0.
|
|
1684
|
-
*/
|
|
1685
|
-
minWidth: string;
|
|
1686
|
-
/**
|
|
1687
|
-
* Minimum height of the medium IconButton.
|
|
1688
|
-
*
|
|
1689
|
-
* @deprecated IconButton takes its minimum height from semantic.size.control.md (decision 0034). Removed in 3.0.
|
|
1690
|
-
*/
|
|
1691
|
-
minHeight: string;
|
|
1692
|
-
/**
|
|
1693
|
-
* Padding of the medium IconButton.
|
|
1694
|
-
*
|
|
1695
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0.
|
|
1696
|
-
*/
|
|
1697
|
-
padding: string;
|
|
1698
|
-
};
|
|
1699
|
-
large: {
|
|
1700
|
-
/**
|
|
1701
|
-
* Minimum width of the large IconButton.
|
|
1702
|
-
*
|
|
1703
|
-
* @deprecated IconButton takes its minimum width from semantic.size.control.lg (decision 0034). Removed in 3.0.
|
|
1704
|
-
*/
|
|
1705
|
-
minWidth: string;
|
|
1706
|
-
/**
|
|
1707
|
-
* Minimum height of the large IconButton.
|
|
1708
|
-
*
|
|
1709
|
-
* @deprecated IconButton takes its minimum height from semantic.size.control.lg (decision 0034). Removed in 3.0.
|
|
1710
|
-
*/
|
|
1711
|
-
minHeight: string;
|
|
1712
|
-
/**
|
|
1713
|
-
* Padding of the large IconButton.
|
|
1714
|
-
*
|
|
1715
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0.
|
|
1716
|
-
*/
|
|
1717
|
-
padding: string;
|
|
1718
|
-
};
|
|
1719
1009
|
};
|
|
1720
1010
|
};
|
|
1721
1011
|
separator: {
|
|
1722
1012
|
/** Divider line, the same as variants.default.border. */
|
|
1723
1013
|
border: string;
|
|
1724
|
-
/**
|
|
1725
|
-
* Space around a Divider.
|
|
1726
|
-
*
|
|
1727
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1728
|
-
*/
|
|
1729
|
-
margin: string;
|
|
1730
1014
|
variants: {
|
|
1731
1015
|
default: {
|
|
1732
1016
|
/** Default Divider line. */
|
|
1733
1017
|
border: string;
|
|
1734
|
-
/**
|
|
1735
|
-
* Space around the default Divider variant.
|
|
1736
|
-
*
|
|
1737
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1738
|
-
*/
|
|
1739
|
-
margin: string;
|
|
1740
1018
|
};
|
|
1741
1019
|
strong: {
|
|
1742
1020
|
/** Strong Divider line, for a firmer break. */
|
|
1743
1021
|
border: string;
|
|
1744
|
-
/**
|
|
1745
|
-
* Space around a strong Divider.
|
|
1746
|
-
*
|
|
1747
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1748
|
-
*/
|
|
1749
|
-
margin: string;
|
|
1750
1022
|
};
|
|
1751
1023
|
minimal: {
|
|
1752
1024
|
/** Minimal Divider line. */
|
|
1753
1025
|
border: string;
|
|
1754
|
-
/**
|
|
1755
|
-
* Space around a minimal Divider.
|
|
1756
|
-
*
|
|
1757
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0.
|
|
1758
|
-
*/
|
|
1759
|
-
margin: string;
|
|
1760
|
-
};
|
|
1761
|
-
};
|
|
1762
|
-
sizes: {
|
|
1763
|
-
small: {
|
|
1764
|
-
/**
|
|
1765
|
-
* Space around a small Divider.
|
|
1766
|
-
*
|
|
1767
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.400 (vertical margin). Removed in 3.0.
|
|
1768
|
-
*/
|
|
1769
|
-
margin: string;
|
|
1770
|
-
};
|
|
1771
|
-
medium: {
|
|
1772
|
-
/**
|
|
1773
|
-
* Space around a medium Divider.
|
|
1774
|
-
*
|
|
1775
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0.
|
|
1776
|
-
*/
|
|
1777
|
-
margin: string;
|
|
1778
|
-
};
|
|
1779
|
-
large: {
|
|
1780
|
-
/**
|
|
1781
|
-
* Space around a large Divider.
|
|
1782
|
-
*
|
|
1783
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0.
|
|
1784
|
-
*/
|
|
1785
|
-
margin: string;
|
|
1786
|
-
};
|
|
1787
|
-
xlarge: {
|
|
1788
|
-
/**
|
|
1789
|
-
* Space around an extra-large Divider.
|
|
1790
|
-
*
|
|
1791
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.1200 (vertical margin). Removed in 3.0.
|
|
1792
|
-
*/
|
|
1793
|
-
margin: string;
|
|
1794
1026
|
};
|
|
1795
1027
|
};
|
|
1796
1028
|
};
|
|
1797
1029
|
progressBar: {
|
|
1798
1030
|
/** ProgressBar track, behind the filled part. */
|
|
1799
1031
|
backgroundColor: string;
|
|
1800
|
-
/**
|
|
1801
|
-
* Corner radius of the ProgressBar track and fill.
|
|
1802
|
-
*
|
|
1803
|
-
* @deprecated ProgressBar never read it; its track and fill use semantic.radius.xs. Removed in 3.0.
|
|
1804
|
-
*/
|
|
1805
|
-
borderRadius: string;
|
|
1806
1032
|
sizes: {
|
|
1807
1033
|
sm: {
|
|
1808
1034
|
/** Thickness of the small ProgressBar, the thinnest size. */
|
|
@@ -1834,18 +1060,6 @@ export type Tokens = {
|
|
|
1834
1060
|
borderRadius: string;
|
|
1835
1061
|
/** Border width of text inputs and the Checkbox box. */
|
|
1836
1062
|
borderWidth: string;
|
|
1837
|
-
/**
|
|
1838
|
-
* Vertical padding of single-line text inputs.
|
|
1839
|
-
*
|
|
1840
|
-
* @deprecated Single-line fields take their min-height from semantic.size.control.lg with no vertical padding (decisions 0022 and 0034). Removed in 3.0.
|
|
1841
|
-
*/
|
|
1842
|
-
paddingY: string;
|
|
1843
|
-
/**
|
|
1844
|
-
* Horizontal padding of text inputs.
|
|
1845
|
-
*
|
|
1846
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0.
|
|
1847
|
-
*/
|
|
1848
|
-
paddingX: string;
|
|
1849
1063
|
/** Text input value typography. */
|
|
1850
1064
|
font: string;
|
|
1851
1065
|
};
|
|
@@ -1862,12 +1076,6 @@ export type Tokens = {
|
|
|
1862
1076
|
borderColor: string;
|
|
1863
1077
|
/** Focus ring on text inputs and the Checkbox box. */
|
|
1864
1078
|
outline: string;
|
|
1865
|
-
/**
|
|
1866
|
-
* Gap between a text input and its focus outline.
|
|
1867
|
-
*
|
|
1868
|
-
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1869
|
-
*/
|
|
1870
|
-
outlineOffset: string;
|
|
1871
1079
|
};
|
|
1872
1080
|
error: {
|
|
1873
1081
|
/** Text input border when invalid. */
|
|
@@ -1877,12 +1085,6 @@ export type Tokens = {
|
|
|
1877
1085
|
borderColor: string;
|
|
1878
1086
|
/** Focus ring on an invalid text input. */
|
|
1879
1087
|
outline: string;
|
|
1880
|
-
/**
|
|
1881
|
-
* Gap between a text input in its error state and its focus outline.
|
|
1882
|
-
*
|
|
1883
|
-
* @deprecated Use semantic.border.focusOffset (decision 0022). Removed in 3.0.
|
|
1884
|
-
*/
|
|
1885
|
-
outlineOffset: string;
|
|
1886
1088
|
};
|
|
1887
1089
|
hover: {
|
|
1888
1090
|
/** Invalid text input border on hover. */
|
|
@@ -1896,12 +1098,6 @@ export type Tokens = {
|
|
|
1896
1098
|
textColor: string;
|
|
1897
1099
|
/** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
|
|
1898
1100
|
borderColor: string;
|
|
1899
|
-
/**
|
|
1900
|
-
* Cursor over a disabled text input.
|
|
1901
|
-
*
|
|
1902
|
-
* @deprecated Behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0.
|
|
1903
|
-
*/
|
|
1904
|
-
cursor: string;
|
|
1905
1101
|
};
|
|
1906
1102
|
textarea: {
|
|
1907
1103
|
/** Minimum height of TextArea, tall enough for a few lines of entry (decision 0034). */
|
|
@@ -1918,12 +1114,6 @@ export type Tokens = {
|
|
|
1918
1114
|
minWidth: string;
|
|
1919
1115
|
/** Height of the count Badge indicator on a button, tab or icon. */
|
|
1920
1116
|
height: string;
|
|
1921
|
-
/**
|
|
1922
|
-
* Horizontal padding of a count Badge.
|
|
1923
|
-
*
|
|
1924
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0.
|
|
1925
|
-
*/
|
|
1926
|
-
paddingX: string;
|
|
1927
1117
|
/** Line height of the count text, so the digits centre in the indicator. */
|
|
1928
1118
|
lineHeight: string;
|
|
1929
1119
|
};
|
|
@@ -1934,23 +1124,17 @@ export type Tokens = {
|
|
|
1934
1124
|
/** Badge indicators are always fully circular. */
|
|
1935
1125
|
borderRadius: string;
|
|
1936
1126
|
label: {
|
|
1937
|
-
/** Text weight for the badge-like label family:
|
|
1127
|
+
/** Text weight for the badge-like label family: StatusLabel, CategoryLabel and Tag (decision 0014). Declare it after the typography shorthand, which would otherwise reset it. */
|
|
1938
1128
|
fontWeight: string;
|
|
1939
1129
|
typography: {
|
|
1940
|
-
/** Typography for small labels in the badge-like family (
|
|
1130
|
+
/** Typography for small labels in the badge-like family (StatusLabel small, CategoryLabel medium, Tag). Combine with label.fontWeight. */
|
|
1941
1131
|
small: string;
|
|
1942
|
-
/** Typography for medium labels in the badge-like family (
|
|
1132
|
+
/** Typography for medium labels in the badge-like family (StatusLabel medium, CategoryLabel large). Combine with label.fontWeight. */
|
|
1943
1133
|
medium: string;
|
|
1944
1134
|
};
|
|
1945
1135
|
};
|
|
1946
1136
|
};
|
|
1947
1137
|
field: {
|
|
1948
|
-
/**
|
|
1949
|
-
* Vertical gap between a field's label, control and helper text.
|
|
1950
|
-
*
|
|
1951
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.200. Removed in 3.0.
|
|
1952
|
-
*/
|
|
1953
|
-
gap: string;
|
|
1954
1138
|
label: {
|
|
1955
1139
|
/** Field label text. */
|
|
1956
1140
|
typography: string;
|
|
@@ -1958,12 +1142,6 @@ export type Tokens = {
|
|
|
1958
1142
|
color: string;
|
|
1959
1143
|
/** Field label colour when the field is disabled. */
|
|
1960
1144
|
colorDisabled: string;
|
|
1961
|
-
/**
|
|
1962
|
-
* Gap between a label and its required indicator.
|
|
1963
|
-
*
|
|
1964
|
-
* @deprecated No component spacing tokens (decision 0022). Use semantic.space.100. Removed in 3.0.
|
|
1965
|
-
*/
|
|
1966
|
-
gap: string;
|
|
1967
1145
|
};
|
|
1968
1146
|
requiredIndicator: {
|
|
1969
1147
|
/** Colour of the required-field asterisk. */
|
|
@@ -2127,12 +1305,6 @@ export type Tokens = {
|
|
|
2127
1305
|
/** Width at which a long Breadcrumbs label truncates with an ellipsis. */
|
|
2128
1306
|
maxWidth: string;
|
|
2129
1307
|
};
|
|
2130
|
-
/**
|
|
2131
|
-
* Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today.
|
|
2132
|
-
*
|
|
2133
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.typography.caption`.
|
|
2134
|
-
*/
|
|
2135
|
-
font: string;
|
|
2136
1308
|
};
|
|
2137
1309
|
cardLarge: {
|
|
2138
1310
|
/** Widest a CardLarge grows, so its text keeps a readable measure. */
|
|
@@ -2218,56 +1390,10 @@ export type Tokens = {
|
|
|
2218
1390
|
background: string;
|
|
2219
1391
|
};
|
|
2220
1392
|
};
|
|
2221
|
-
transaction: {
|
|
2222
|
-
/**
|
|
2223
|
-
* Positive amounts and credits in MoneyDisplay and TransactionListItem.
|
|
2224
|
-
*
|
|
2225
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
|
|
2226
|
-
*/
|
|
2227
|
-
credit: string;
|
|
2228
|
-
/**
|
|
2229
|
-
* A credit amount on a hovered interactive row.
|
|
2230
|
-
*
|
|
2231
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.positive`.
|
|
2232
|
-
*/
|
|
2233
|
-
'credit-hover': string;
|
|
2234
|
-
/**
|
|
2235
|
-
* Negative amounts and debits in MoneyDisplay and TransactionListItem.
|
|
2236
|
-
*
|
|
2237
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
|
|
2238
|
-
*/
|
|
2239
|
-
debit: string;
|
|
2240
|
-
/**
|
|
2241
|
-
* A debit amount on a hovered interactive row.
|
|
2242
|
-
*
|
|
2243
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.data.negative`.
|
|
2244
|
-
*/
|
|
2245
|
-
'debit-hover': string;
|
|
2246
|
-
/**
|
|
2247
|
-
* Amounts of pending or processing transactions.
|
|
2248
|
-
*
|
|
2249
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
|
|
2250
|
-
*/
|
|
2251
|
-
pending: string;
|
|
2252
|
-
/**
|
|
2253
|
-
* Informational amounts that are neither credit nor debit.
|
|
2254
|
-
*
|
|
2255
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.color.text.muted`.
|
|
2256
|
-
*/
|
|
2257
|
-
neutral: string;
|
|
2258
|
-
};
|
|
2259
1393
|
track: {
|
|
2260
1394
|
/** Unfilled track of ProgressBar and Slider: light, so the fill and thumb show the value (decision 0026). The resting fill step, 1.12:1 on white. */
|
|
2261
1395
|
background: string;
|
|
2262
1396
|
};
|
|
2263
|
-
tooltip: {
|
|
2264
|
-
/**
|
|
2265
|
-
* Dotted underline marking text that has a tooltip.
|
|
2266
|
-
*
|
|
2267
|
-
* @deprecated Nothing reads it; the semantic tier now holds this meaning (#224). Removed in 3.0. Use `semantic.border.default`.
|
|
2268
|
-
*/
|
|
2269
|
-
border: string;
|
|
2270
|
-
};
|
|
2271
1397
|
};
|
|
2272
1398
|
semantic: {
|
|
2273
1399
|
elevation: {
|
|
@@ -2360,55 +1486,11 @@ export type Tokens = {
|
|
|
2360
1486
|
/** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
|
|
2361
1487
|
bold: string;
|
|
2362
1488
|
};
|
|
2363
|
-
zIndex: {
|
|
2364
|
-
/**
|
|
2365
|
-
* Sticky and fixed chrome that stays visible while scrolling: sticky headers, section headers, navigation bars. Pair with elevation.sticky. Sits below dropdowns, overlays and modals.
|
|
2366
|
-
*
|
|
2367
|
-
* @deprecated Renamed to semantic.layer.sticky by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2368
|
-
*/
|
|
2369
|
-
sticky: string;
|
|
2370
|
-
/**
|
|
2371
|
-
* Floating menus anchored to a control: dropdown menus, select and autocomplete lists (Dropdown, SearchField). Pair with elevation.floating. Sits above sticky, below overlays.
|
|
2372
|
-
*
|
|
2373
|
-
* @deprecated Renamed to semantic.layer.dropdown by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2374
|
-
*/
|
|
2375
|
-
dropdown: string;
|
|
2376
|
-
/**
|
|
2377
|
-
* Panels that slide over the page and their backdrop: sheets, drawers (Sheet). The backdrop uses the same value and comes before the panel in the DOM. Pair with elevation.overlay. Sits below modals.
|
|
2378
|
-
*
|
|
2379
|
-
* @deprecated Renamed to semantic.layer.overlay by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2380
|
-
*/
|
|
2381
|
-
overlay: string;
|
|
2382
|
-
/**
|
|
2383
|
-
* Blocking dialogs and their backdrop: modals, action sheets (Modal, ActionSheet). The backdrop uses the same value and comes before the dialog in the DOM. Pair with elevation.overlay. Topmost layer in the system.
|
|
2384
|
-
*
|
|
2385
|
-
* @deprecated Renamed to semantic.layer.modal by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2386
|
-
*/
|
|
2387
|
-
modal: string;
|
|
2388
|
-
};
|
|
2389
1489
|
border: {
|
|
2390
1490
|
/** Hairline in the default border colour: dividers and decorative outlines, such as Breadcrumbs, CodeBlock and Divider. 1.53:1 on white, so never a control edge (decision 0025). */
|
|
2391
1491
|
default: string;
|
|
2392
|
-
/**
|
|
2393
|
-
* Hairline in the subtle border colour: dividers and decorative outlines, such as CodeBlock and Separator. 1.30:1 on white, so never a control's edge (decision 0025).
|
|
2394
|
-
*
|
|
2395
|
-
* @deprecated Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.border.default`.
|
|
2396
|
-
*/
|
|
2397
|
-
subtle: string;
|
|
2398
|
-
/**
|
|
2399
|
-
* Hairline in near-black: a firm outline that must read as a boundary, such as a hovered or focused text input. 11.51:1 on white.
|
|
2400
|
-
*
|
|
2401
|
-
* @deprecated Renamed to semantic.border.input-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2402
|
-
*/
|
|
2403
|
-
strong: string;
|
|
2404
1492
|
/** The focus ring every component draws, with border.focusOffset; never blue (decision 0029). */
|
|
2405
1493
|
focus: string;
|
|
2406
|
-
/**
|
|
2407
|
-
* Dotted underline marking text that has a tooltip.
|
|
2408
|
-
*
|
|
2409
|
-
* @deprecated Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. Use `semantic.border.default`.
|
|
2410
|
-
*/
|
|
2411
|
-
tooltip: string;
|
|
2412
1494
|
width: {
|
|
2413
1495
|
/** Hairline border: dividers, control edges and rings. */
|
|
2414
1496
|
thin: string;
|
|
@@ -2417,68 +1499,6 @@ export type Tokens = {
|
|
|
2417
1499
|
};
|
|
2418
1500
|
/** Gap between an element and its focus ring; negate it to inset the ring inside the element. */
|
|
2419
1501
|
focusOffset: string;
|
|
2420
|
-
radius: {
|
|
2421
|
-
/**
|
|
2422
|
-
* No rounding - tables, dividers, inline code blocks, sharp-edged containers
|
|
2423
|
-
*
|
|
2424
|
-
* @deprecated Renamed to semantic.radius.none by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2425
|
-
*/
|
|
2426
|
-
none: string;
|
|
2427
|
-
/**
|
|
2428
|
-
* Minimal rounding - small badges, compact tags, inline buttons, checkboxes
|
|
2429
|
-
*
|
|
2430
|
-
* @deprecated Renamed to semantic.radius.xs by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2431
|
-
*/
|
|
2432
|
-
xs: string;
|
|
2433
|
-
/**
|
|
2434
|
-
* Subtle rounding - buttons, inputs, chips, form controls, list items
|
|
2435
|
-
*
|
|
2436
|
-
* @deprecated Renamed to semantic.radius.sm by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2437
|
-
*/
|
|
2438
|
-
sm: string;
|
|
2439
|
-
/**
|
|
2440
|
-
* Standard rounding - cards, containers, dropdowns, popovers, menus
|
|
2441
|
-
*
|
|
2442
|
-
* @deprecated Renamed to semantic.radius.md by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2443
|
-
*/
|
|
2444
|
-
md: string;
|
|
2445
|
-
/**
|
|
2446
|
-
* Generous rounding - modals, action sheets, dialogs, feature cards, panels
|
|
2447
|
-
*
|
|
2448
|
-
* @deprecated Renamed to semantic.radius.lg by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2449
|
-
*/
|
|
2450
|
-
lg: string;
|
|
2451
|
-
/**
|
|
2452
|
-
* Large rounding - pills, pill buttons, prominent CTAs, search bars
|
|
2453
|
-
*
|
|
2454
|
-
* @deprecated Renamed to semantic.radius.xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2455
|
-
*/
|
|
2456
|
-
xl: string;
|
|
2457
|
-
/**
|
|
2458
|
-
* Extra large rounding - hero elements, decorative containers, large pills
|
|
2459
|
-
*
|
|
2460
|
-
* @deprecated Renamed to semantic.radius.2xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2461
|
-
*/
|
|
2462
|
-
'2xl': string;
|
|
2463
|
-
/**
|
|
2464
|
-
* Maximum rounding - decorative elements, marketing components, large decorative cards
|
|
2465
|
-
*
|
|
2466
|
-
* @deprecated Renamed to semantic.radius.3xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2467
|
-
*/
|
|
2468
|
-
'3xl': string;
|
|
2469
|
-
/**
|
|
2470
|
-
* Fully circular - avatars, round icon buttons, status indicators, FABs
|
|
2471
|
-
*
|
|
2472
|
-
* @deprecated Renamed to semantic.radius.full by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2473
|
-
*/
|
|
2474
|
-
circle: string;
|
|
2475
|
-
};
|
|
2476
|
-
/**
|
|
2477
|
-
* Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge.
|
|
2478
|
-
*
|
|
2479
|
-
* @deprecated Dividers have one border (decision 0048). Removed in 3.0. Use `semantic.border.default`.
|
|
2480
|
-
*/
|
|
2481
|
-
emphasis: string;
|
|
2482
1502
|
/** Firm hairline that must read as a boundary, such as a hovered text input. */
|
|
2483
1503
|
'input-hover': string;
|
|
2484
1504
|
};
|
|
@@ -2549,110 +1569,6 @@ export type Tokens = {
|
|
|
2549
1569
|
/** Tallest a floating menu grows before it scrolls: Dropdown, SearchField. */
|
|
2550
1570
|
maxHeight: string;
|
|
2551
1571
|
};
|
|
2552
|
-
dimension: {
|
|
2553
|
-
/**
|
|
2554
|
-
* 0.25rem (4px): TabBar scrollbar height; small ProgressBar height (via component tokens).
|
|
2555
|
-
*
|
|
2556
|
-
* @deprecated Renamed to semantic.size.100 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2557
|
-
*/
|
|
2558
|
-
'1': string;
|
|
2559
|
-
/**
|
|
2560
|
-
* 0.5rem (8px): medium ProgressBar height; Badge dot (via component tokens). Approved under decision 0022.
|
|
2561
|
-
*
|
|
2562
|
-
* @deprecated Renamed to semantic.size.200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2563
|
-
*/
|
|
2564
|
-
'2': string;
|
|
2565
|
-
/**
|
|
2566
|
-
* 1rem (16px): large ProgressBar height; Badge count minimum width and height (via component tokens). Approved under decision 0022.
|
|
2567
|
-
*
|
|
2568
|
-
* @deprecated Renamed to semantic.size.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2569
|
-
*/
|
|
2570
|
-
'4': string;
|
|
2571
|
-
/**
|
|
2572
|
-
* 1.25rem (20px): checkbox box; TabBar count badge; extra-large ProgressBar height (via component tokens); small label height (via size.label.small).
|
|
2573
|
-
*
|
|
2574
|
-
* @deprecated Renamed to semantic.size.500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2575
|
-
*/
|
|
2576
|
-
'5': string;
|
|
2577
|
-
/**
|
|
2578
|
-
* 1.5rem (24px): medium label height (via size.label.medium).
|
|
2579
|
-
*
|
|
2580
|
-
* @deprecated Renamed to semantic.size.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2581
|
-
*/
|
|
2582
|
-
'6': string;
|
|
2583
|
-
/**
|
|
2584
|
-
* 2rem (32px): checkbox row minimum height (via component tokens); large label height (via size.label.large).
|
|
2585
|
-
*
|
|
2586
|
-
* @deprecated Renamed to semantic.size.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2587
|
-
*/
|
|
2588
|
-
'8': string;
|
|
2589
|
-
/**
|
|
2590
|
-
* 3rem (48px): AccountCard header minimum height; compact ListItem expanded indent (via component tokens).
|
|
2591
|
-
*
|
|
2592
|
-
* @deprecated Renamed to semantic.size.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2593
|
-
*/
|
|
2594
|
-
'12': string;
|
|
2595
|
-
/**
|
|
2596
|
-
* 3.75rem (60px): comfortable ListItem expanded indent (via component tokens).
|
|
2597
|
-
*
|
|
2598
|
-
* @deprecated Renamed to semantic.size.1500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2599
|
-
*/
|
|
2600
|
-
'15': string;
|
|
2601
|
-
/**
|
|
2602
|
-
* 4.5rem (72px): TransactionListItem minimum height (via component tokens).
|
|
2603
|
-
*
|
|
2604
|
-
* @deprecated Renamed to semantic.size.1800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2605
|
-
*/
|
|
2606
|
-
'18': string;
|
|
2607
|
-
/**
|
|
2608
|
-
* 5rem (80px): small EmptyState illustration (via component tokens).
|
|
2609
|
-
*
|
|
2610
|
-
* @deprecated Renamed to semantic.size.2000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2611
|
-
*/
|
|
2612
|
-
'20': string;
|
|
2613
|
-
/**
|
|
2614
|
-
* 7.5rem (120px): medium EmptyState illustration; TextArea minimum height (via component tokens).
|
|
2615
|
-
*
|
|
2616
|
-
* @deprecated Renamed to semantic.size.3000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2617
|
-
*/
|
|
2618
|
-
'30': string;
|
|
2619
|
-
/**
|
|
2620
|
-
* 11.25rem (180px): Breadcrumbs label truncation width (via component tokens).
|
|
2621
|
-
*
|
|
2622
|
-
* @deprecated Renamed to semantic.size.4500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2623
|
-
*/
|
|
2624
|
-
'45': string;
|
|
2625
|
-
/**
|
|
2626
|
-
* 12.5rem (200px): large EmptyState illustration (via component tokens).
|
|
2627
|
-
*
|
|
2628
|
-
* @deprecated Renamed to semantic.size.5000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2629
|
-
*/
|
|
2630
|
-
'50': string;
|
|
2631
|
-
/**
|
|
2632
|
-
* 18.75rem (300px): AccountCard minimum width; EmptyState actions maximum width (via component tokens).
|
|
2633
|
-
*
|
|
2634
|
-
* @deprecated Renamed to semantic.size.7500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2635
|
-
*/
|
|
2636
|
-
'75': string;
|
|
2637
|
-
/**
|
|
2638
|
-
* 22.5rem (360px): EmptyState text maximum width (via component tokens).
|
|
2639
|
-
*
|
|
2640
|
-
* @deprecated Renamed to semantic.size.9000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2641
|
-
*/
|
|
2642
|
-
'90': string;
|
|
2643
|
-
/**
|
|
2644
|
-
* 25rem (400px): EmptyState maximum width (via component tokens).
|
|
2645
|
-
*
|
|
2646
|
-
* @deprecated Renamed to semantic.size.10000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2647
|
-
*/
|
|
2648
|
-
'100': string;
|
|
2649
|
-
/**
|
|
2650
|
-
* 48rem (768px): CardLarge maximum width (via component tokens).
|
|
2651
|
-
*
|
|
2652
|
-
* @deprecated Renamed to semantic.size.19200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2653
|
-
*/
|
|
2654
|
-
'192': string;
|
|
2655
|
-
};
|
|
2656
1572
|
icon: {
|
|
2657
1573
|
/** The smallest icon size, for dense inline indicators. */
|
|
2658
1574
|
xs: string;
|
|
@@ -2681,167 +1597,7 @@ export type Tokens = {
|
|
|
2681
1597
|
};
|
|
2682
1598
|
};
|
|
2683
1599
|
spacing: {
|
|
2684
|
-
separator: {
|
|
2685
|
-
/**
|
|
2686
|
-
* 1rem: space around a small Divider, above and below when horizontal, either side when vertical.
|
|
2687
|
-
*
|
|
2688
|
-
* @deprecated Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2689
|
-
*/
|
|
2690
|
-
sm: string;
|
|
2691
|
-
/**
|
|
2692
|
-
* 1.5rem: space around a medium or minimal Divider, above and below when horizontal, either side when vertical.
|
|
2693
|
-
*
|
|
2694
|
-
* @deprecated Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2695
|
-
*/
|
|
2696
|
-
md: string;
|
|
2697
|
-
/**
|
|
2698
|
-
* 2rem: space around a large (the default) Divider, above and below when horizontal, either side when vertical.
|
|
2699
|
-
*
|
|
2700
|
-
* @deprecated Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2701
|
-
*/
|
|
2702
|
-
lg: string;
|
|
2703
|
-
/**
|
|
2704
|
-
* 3rem: space around an extra-large Divider, above and below when horizontal, either side when vertical.
|
|
2705
|
-
*
|
|
2706
|
-
* @deprecated Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2707
|
-
*/
|
|
2708
|
-
xl: string;
|
|
2709
|
-
};
|
|
2710
|
-
component: {
|
|
2711
|
-
/**
|
|
2712
|
-
* Extra-small component internal spacing (0.25rem / 4px). Use for tight gaps within compound elements, icon-to-label spacing in small chips.
|
|
2713
|
-
*
|
|
2714
|
-
* @deprecated Renamed to semantic.space.inset.xs by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2715
|
-
*/
|
|
2716
|
-
xs: string;
|
|
2717
|
-
/**
|
|
2718
|
-
* Small component internal spacing (0.5rem / 8px). Use for standard icon-to-label gaps, chip padding, compact button inner spacing.
|
|
2719
|
-
*
|
|
2720
|
-
* @deprecated Renamed to semantic.space.inset.sm by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2721
|
-
*/
|
|
2722
|
-
sm: string;
|
|
2723
|
-
/**
|
|
2724
|
-
* Medium component internal spacing (0.75rem / 12px). Use for standard button vertical padding, form field inner padding.
|
|
2725
|
-
*
|
|
2726
|
-
* @deprecated Renamed to semantic.space.inset.md by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2727
|
-
*/
|
|
2728
|
-
md: string;
|
|
2729
|
-
/**
|
|
2730
|
-
* Large component internal spacing (1rem / 16px). Use for button horizontal padding, input horizontal padding, card inner spacing.
|
|
2731
|
-
*
|
|
2732
|
-
* @deprecated Renamed to semantic.space.inset.lg by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2733
|
-
*/
|
|
2734
|
-
lg: string;
|
|
2735
|
-
/**
|
|
2736
|
-
* Extra-large component internal spacing (1.25rem / 20px). Use for generous button padding, prominent CTAs.
|
|
2737
|
-
*
|
|
2738
|
-
* @deprecated Renamed to semantic.space.inset.xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2739
|
-
*/
|
|
2740
|
-
xl: string;
|
|
2741
|
-
/**
|
|
2742
|
-
* 2x extra-large component internal spacing (1.5rem / 24px). Use for large card inner padding, spacious form sections.
|
|
2743
|
-
*
|
|
2744
|
-
* @deprecated Renamed to semantic.space.inset.2xl by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2745
|
-
*/
|
|
2746
|
-
'2xl': string;
|
|
2747
|
-
};
|
|
2748
1600
|
layout: {
|
|
2749
|
-
/**
|
|
2750
|
-
* 0: no space, for explicit resets.
|
|
2751
|
-
*
|
|
2752
|
-
* @deprecated Renamed to semantic.space.0 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2753
|
-
*/
|
|
2754
|
-
none: string;
|
|
2755
|
-
/**
|
|
2756
|
-
* 0.25rem: the tightest gap, such as between a label and its required indicator.
|
|
2757
|
-
*
|
|
2758
|
-
* @deprecated Renamed to semantic.space.100 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2759
|
-
*/
|
|
2760
|
-
xs: string;
|
|
2761
|
-
/**
|
|
2762
|
-
* 0.5rem: a small gap, such as between a field's label, control and helper text.
|
|
2763
|
-
*
|
|
2764
|
-
* @deprecated Renamed to semantic.space.200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2765
|
-
*/
|
|
2766
|
-
sm: string;
|
|
2767
|
-
/**
|
|
2768
|
-
* 0.75rem: the default gap between related elements.
|
|
2769
|
-
*
|
|
2770
|
-
* @deprecated Renamed to semantic.space.300 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2771
|
-
*/
|
|
2772
|
-
md: string;
|
|
2773
|
-
/**
|
|
2774
|
-
* 1rem: space between groups of elements, and padding inside containers.
|
|
2775
|
-
*
|
|
2776
|
-
* @deprecated Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2777
|
-
*/
|
|
2778
|
-
lg: string;
|
|
2779
|
-
/**
|
|
2780
|
-
* 1.25rem: generous padding inside larger containers.
|
|
2781
|
-
*
|
|
2782
|
-
* @deprecated Renamed to semantic.space.500 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2783
|
-
*/
|
|
2784
|
-
xl: string;
|
|
2785
|
-
/**
|
|
2786
|
-
* 1.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2787
|
-
*
|
|
2788
|
-
* @deprecated Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2789
|
-
*/
|
|
2790
|
-
'2xl': string;
|
|
2791
|
-
/**
|
|
2792
|
-
* 1.75rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2793
|
-
*
|
|
2794
|
-
* @deprecated Renamed to semantic.space.700 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2795
|
-
*/
|
|
2796
|
-
'3xl': string;
|
|
2797
|
-
/**
|
|
2798
|
-
* 2rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2799
|
-
*
|
|
2800
|
-
* @deprecated Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2801
|
-
*/
|
|
2802
|
-
'4xl': string;
|
|
2803
|
-
/**
|
|
2804
|
-
* 2.25rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2805
|
-
*
|
|
2806
|
-
* @deprecated Renamed to semantic.space.900 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2807
|
-
*/
|
|
2808
|
-
'5xl': string;
|
|
2809
|
-
/**
|
|
2810
|
-
* 2.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2811
|
-
*
|
|
2812
|
-
* @deprecated Renamed to semantic.space.1000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2813
|
-
*/
|
|
2814
|
-
'6xl': string;
|
|
2815
|
-
/**
|
|
2816
|
-
* 3rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2817
|
-
*
|
|
2818
|
-
* @deprecated Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2819
|
-
*/
|
|
2820
|
-
'7xl': string;
|
|
2821
|
-
/**
|
|
2822
|
-
* 3.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2823
|
-
*
|
|
2824
|
-
* @deprecated Renamed to semantic.space.1400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2825
|
-
*/
|
|
2826
|
-
'8xl': string;
|
|
2827
|
-
/**
|
|
2828
|
-
* 4rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs.
|
|
2829
|
-
*
|
|
2830
|
-
* @deprecated Renamed to semantic.space.1600 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2831
|
-
*/
|
|
2832
|
-
'9xl': string;
|
|
2833
|
-
/**
|
|
2834
|
-
* 5rem: a larger step on the layout spacing scale, for space between blocks and sections. Second-largest, after 11xl.
|
|
2835
|
-
*
|
|
2836
|
-
* @deprecated Renamed to semantic.space.2000 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2837
|
-
*/
|
|
2838
|
-
'10xl': string;
|
|
2839
|
-
/**
|
|
2840
|
-
* 6rem: the largest layout gap (FeatureBlock at wide breakpoints).
|
|
2841
|
-
*
|
|
2842
|
-
* @deprecated Renamed to semantic.space.2400 by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2843
|
-
*/
|
|
2844
|
-
'11xl': string;
|
|
2845
1601
|
/** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
|
|
2846
1602
|
auto: string;
|
|
2847
1603
|
};
|
|
@@ -2850,46 +1606,10 @@ export type Tokens = {
|
|
|
2850
1606
|
text: {
|
|
2851
1607
|
/** Primary text: body copy, labels and headings. 15.91:1 on white, 15.51:1 on the page. */
|
|
2852
1608
|
default: string;
|
|
2853
|
-
/**
|
|
2854
|
-
* Emphasised text.
|
|
2855
|
-
*
|
|
2856
|
-
* @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.text.default`.
|
|
2857
|
-
*/
|
|
2858
|
-
emphasis: string;
|
|
2859
|
-
/**
|
|
2860
|
-
* Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page.
|
|
2861
|
-
*
|
|
2862
|
-
* @deprecated Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2863
|
-
*/
|
|
2864
|
-
subdued: string;
|
|
2865
|
-
/** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.91:1 on fill.emphasis. */
|
|
1609
|
+
/** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.51:1 on fill.emphasis. */
|
|
2866
1610
|
inverse: string;
|
|
2867
1611
|
/** Text of disabled controls, translucent so it stays right on tinted surfaces. 1.53:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
|
|
2868
1612
|
disabled: string;
|
|
2869
|
-
/**
|
|
2870
|
-
* Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page.
|
|
2871
|
-
*
|
|
2872
|
-
* @deprecated Renamed to semantic.color.text.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2873
|
-
*/
|
|
2874
|
-
interactive: string;
|
|
2875
|
-
/**
|
|
2876
|
-
* Blue text on a hovered selected item (interactive-subtle-hover fill, 5.60:1). Decision 0016.
|
|
2877
|
-
*
|
|
2878
|
-
* @deprecated Renamed to semantic.color.text.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2879
|
-
*/
|
|
2880
|
-
'interactive-hover': string;
|
|
2881
|
-
/**
|
|
2882
|
-
* Blue text on a pressed selected item (interactive-subtle-active fill, 6.65:1). Decision 0016.
|
|
2883
|
-
*
|
|
2884
|
-
* @deprecated Renamed to semantic.color.text.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2885
|
-
*/
|
|
2886
|
-
'interactive-active': string;
|
|
2887
|
-
/**
|
|
2888
|
-
* Error text, such as field error messages and InlineAlert errors. 5.41:1 on white, 5.13:1 on the page.
|
|
2889
|
-
*
|
|
2890
|
-
* @deprecated Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2891
|
-
*/
|
|
2892
|
-
error: string;
|
|
2893
1613
|
/** Success text, such as InlineAlert success messages. 5.99:1 on white. */
|
|
2894
1614
|
success: string;
|
|
2895
1615
|
/** Warning text, such as InlineAlert warnings (0043: warning is yellow). 6.01:1 on white. */
|
|
@@ -2898,18 +1618,6 @@ export type Tokens = {
|
|
|
2898
1618
|
muted: string;
|
|
2899
1619
|
/** Blue text for links and selected items, in every state: the fill shows hover and pressed. Never decoration (0003). 6.00:1 on white. */
|
|
2900
1620
|
accent: string;
|
|
2901
|
-
/**
|
|
2902
|
-
* Text of a hovered selected item, on the accent-muted-hover fill.
|
|
2903
|
-
*
|
|
2904
|
-
* @deprecated Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.text.accent`.
|
|
2905
|
-
*/
|
|
2906
|
-
'accent-hover': string;
|
|
2907
|
-
/**
|
|
2908
|
-
* Text of a pressed selected item, on the accent-muted-pressed fill.
|
|
2909
|
-
*
|
|
2910
|
-
* @deprecated Accent text keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.text.accent`.
|
|
2911
|
-
*/
|
|
2912
|
-
'accent-pressed': string;
|
|
2913
1621
|
/** Error text: field error messages, InlineAlert errors. 6.03:1 on white. */
|
|
2914
1622
|
danger: string;
|
|
2915
1623
|
/** AI-generated content and agent actions, such as the label on proposed content (0046); always with the AI icon and a label, never colour alone (0043). 5.99:1 on white, 5.68:1 on the page. */
|
|
@@ -2917,245 +1625,15 @@ export type Tokens = {
|
|
|
2917
1625
|
/** Serious-warning text: between warning and danger (decisions 0043, 0045). 6.04:1 on white. */
|
|
2918
1626
|
serious: string;
|
|
2919
1627
|
};
|
|
2920
|
-
background: {
|
|
2921
|
-
/**
|
|
2922
|
-
* Page background: a cool off-white (#f8f9fa), never pure white (decision 0006).
|
|
2923
|
-
*
|
|
2924
|
-
* @deprecated Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2925
|
-
*/
|
|
2926
|
-
default: string;
|
|
2927
|
-
/**
|
|
2928
|
-
* White: inputs, sheets and other surfaces that sit on the page background.
|
|
2929
|
-
*
|
|
2930
|
-
* @deprecated Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0.
|
|
2931
|
-
*/
|
|
2932
|
-
subtle: string;
|
|
2933
|
-
/**
|
|
2934
|
-
* Near-black fill for emphasis controls: the primary Button, IconButton and the emphasis Chip.
|
|
2935
|
-
*
|
|
2936
|
-
* @deprecated Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2937
|
-
*/
|
|
2938
|
-
emphasis: string;
|
|
2939
|
-
/**
|
|
2940
|
-
* Fill of a hovered emphasis control: the primary Button and IconButton, and the emphasis Chip. Approved under decision 0022.
|
|
2941
|
-
*
|
|
2942
|
-
* @deprecated Renamed to semantic.color.fill.emphasis-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2943
|
-
*/
|
|
2944
|
-
'emphasis-hover': string;
|
|
2945
|
-
/**
|
|
2946
|
-
* Fill of a pressed emphasis control. Approved under decision 0022.
|
|
2947
|
-
*
|
|
2948
|
-
* @deprecated Renamed to semantic.color.fill.emphasis-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2949
|
-
*/
|
|
2950
|
-
'emphasis-active': string;
|
|
2951
|
-
/**
|
|
2952
|
-
* Light grey fill for quiet surfaces and grouped content, such as the default Chip.
|
|
2953
|
-
*
|
|
2954
|
-
* @deprecated Renamed to semantic.color.fill.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2955
|
-
*/
|
|
2956
|
-
surface: string;
|
|
2957
|
-
/**
|
|
2958
|
-
* Dark grey fill for inverse surfaces, such as a checked Checkbox box.
|
|
2959
|
-
*
|
|
2960
|
-
* @deprecated Renamed to semantic.color.fill.inverse by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2961
|
-
*/
|
|
2962
|
-
inverse: string;
|
|
2963
|
-
/**
|
|
2964
|
-
* Blue fill for the accent Button and other deliberate highlights (decision 0003). Pair with text.inverse (5.39:1).
|
|
2965
|
-
*
|
|
2966
|
-
* @deprecated Renamed to semantic.color.fill.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2967
|
-
*/
|
|
2968
|
-
interactive: string;
|
|
2969
|
-
/**
|
|
2970
|
-
* Light blue fill for selected items, such as a selected filter chip or tab (decision 0016). Pair with text.interactive.
|
|
2971
|
-
*
|
|
2972
|
-
* @deprecated Renamed to semantic.color.fill.accent-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2973
|
-
*/
|
|
2974
|
-
'interactive-subtle': string;
|
|
2975
|
-
/**
|
|
2976
|
-
* Fill of a hovered selected item, such as a selected filter chip. Pair with text.interactive-hover. Decision 0016.
|
|
2977
|
-
*
|
|
2978
|
-
* @deprecated Renamed to semantic.color.fill.accent-muted-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2979
|
-
*/
|
|
2980
|
-
'interactive-subtle-hover': string;
|
|
2981
|
-
/**
|
|
2982
|
-
* Fill of a pressed selected item. Pair with text.interactive-active. Decision 0016.
|
|
2983
|
-
*
|
|
2984
|
-
* @deprecated Renamed to semantic.color.fill.accent-muted-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2985
|
-
*/
|
|
2986
|
-
'interactive-subtle-active': string;
|
|
2987
|
-
/**
|
|
2988
|
-
* Blue fill on hover, for controls that use background.interactive.
|
|
2989
|
-
*
|
|
2990
|
-
* @deprecated Renamed to semantic.color.fill.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2991
|
-
*/
|
|
2992
|
-
'interactive-hover': string;
|
|
2993
|
-
/**
|
|
2994
|
-
* Blue fill while pressed, for controls that use background.interactive.
|
|
2995
|
-
*
|
|
2996
|
-
* @deprecated Renamed to semantic.color.fill.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
2997
|
-
*/
|
|
2998
|
-
'interactive-active': string;
|
|
2999
|
-
/**
|
|
3000
|
-
* Strong red fill for destructive actions, such as the danger Button. Pair with text.inverse (5.41:1).
|
|
3001
|
-
*
|
|
3002
|
-
* @deprecated Renamed to semantic.color.fill.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3003
|
-
*/
|
|
3004
|
-
error: string;
|
|
3005
|
-
/**
|
|
3006
|
-
* Fill of a hovered error control, such as the danger Button. Approved under decision 0022.
|
|
3007
|
-
*
|
|
3008
|
-
* @deprecated Renamed to semantic.color.fill.danger-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3009
|
-
*/
|
|
3010
|
-
'error-hover': string;
|
|
3011
|
-
/**
|
|
3012
|
-
* Fill of a pressed error control. Approved under decision 0022.
|
|
3013
|
-
*
|
|
3014
|
-
* @deprecated Renamed to semantic.color.fill.danger-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3015
|
-
*/
|
|
3016
|
-
'error-active': string;
|
|
3017
|
-
/**
|
|
3018
|
-
* Light red tint behind error messages, such as an error Alert.
|
|
3019
|
-
*
|
|
3020
|
-
* @deprecated Renamed to semantic.color.fill.danger-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3021
|
-
*/
|
|
3022
|
-
'error-subtle': string;
|
|
3023
|
-
/**
|
|
3024
|
-
* Strong green fill for success states.
|
|
3025
|
-
*
|
|
3026
|
-
* @deprecated Renamed to semantic.color.fill.success by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3027
|
-
*/
|
|
3028
|
-
success: string;
|
|
3029
|
-
/**
|
|
3030
|
-
* Light green tint behind success messages, such as a success Alert.
|
|
3031
|
-
*
|
|
3032
|
-
* @deprecated Renamed to semantic.color.fill.success-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3033
|
-
*/
|
|
3034
|
-
'success-subtle': string;
|
|
3035
|
-
/**
|
|
3036
|
-
* Strong orange fill for warning states.
|
|
3037
|
-
*
|
|
3038
|
-
* @deprecated Renamed to semantic.color.fill.warning by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3039
|
-
*/
|
|
3040
|
-
warning: string;
|
|
3041
|
-
/**
|
|
3042
|
-
* Light orange tint behind warning messages, such as a warning Alert.
|
|
3043
|
-
*
|
|
3044
|
-
* @deprecated Renamed to semantic.color.fill.warning-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3045
|
-
*/
|
|
3046
|
-
'warning-subtle': string;
|
|
3047
|
-
/**
|
|
3048
|
-
* Fill of disabled controls.
|
|
3049
|
-
*
|
|
3050
|
-
* @deprecated Renamed to semantic.color.fill.disabled by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3051
|
-
*/
|
|
3052
|
-
disabled: string;
|
|
3053
|
-
/**
|
|
3054
|
-
* Fill of a neutral control at rest, such as the secondary Button. Not the disabled fill, though the value matches today. Approved under decision 0022.
|
|
3055
|
-
*
|
|
3056
|
-
* @deprecated Renamed to semantic.color.fill.default by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3057
|
-
*/
|
|
3058
|
-
neutral: string;
|
|
3059
|
-
/**
|
|
3060
|
-
* Fill of a hovered neutral control. Approved under decision 0022.
|
|
3061
|
-
*
|
|
3062
|
-
* @deprecated Renamed to semantic.color.fill.default-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3063
|
-
*/
|
|
3064
|
-
'neutral-hover': string;
|
|
3065
|
-
/**
|
|
3066
|
-
* Fill of a pressed neutral control. Approved under decision 0022.
|
|
3067
|
-
*
|
|
3068
|
-
* @deprecated Renamed to semantic.color.fill.default-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3069
|
-
*/
|
|
3070
|
-
'neutral-active': string;
|
|
3071
|
-
/**
|
|
3072
|
-
* No fill, for controls without a background at rest, such as the naked Button and IconButton. Approved under decision 0022.
|
|
3073
|
-
*
|
|
3074
|
-
* @deprecated Renamed to semantic.color.fill.none by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3075
|
-
*/
|
|
3076
|
-
transparent: string;
|
|
3077
|
-
/**
|
|
3078
|
-
* Unfilled track of ProgressBar and Slider. 1.30:1 on white: the filled part and the thumb show the value, so the track doesn't need 3:1 (decision 0026).
|
|
3079
|
-
*
|
|
3080
|
-
* @deprecated Moved to the component tier as component.track.background (decision 0031 §6). Removed in 3.0.
|
|
3081
|
-
*/
|
|
3082
|
-
progressTrack: string;
|
|
3083
|
-
/**
|
|
3084
|
-
* The same cool off-white as background.default (#f8f9fa). Decision 0006 makes background.default the page background token, so use that.
|
|
3085
|
-
*
|
|
3086
|
-
* @deprecated Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3087
|
-
*/
|
|
3088
|
-
page: string;
|
|
3089
|
-
/**
|
|
3090
|
-
* Semi-transparent scrim for modal, sheet, drawer, and action-sheet backdrops. Uses brand near-black (#212529) at 50% opacity. Sits below the overlay surface and above page content.
|
|
3091
|
-
*
|
|
3092
|
-
* @deprecated Renamed to semantic.surface.scrim by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3093
|
-
*/
|
|
3094
|
-
overlay: string;
|
|
3095
|
-
/**
|
|
3096
|
-
* Subtle transparent dark overlay for hover states on components that sit over variable-colour backgrounds (e.g. chip close-button hover). Uses brand near-black (#212529) — never pure #000000 per VDL.
|
|
3097
|
-
*
|
|
3098
|
-
* @deprecated Renamed to semantic.color.fill.none-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3099
|
-
*/
|
|
3100
|
-
'hover-overlay': string;
|
|
3101
|
-
/**
|
|
3102
|
-
* Slightly stronger transparent dark overlay for active/pressed states on components over variable-colour backgrounds (e.g. chip close-button active). Uses brand near-black (#212529). Pair with hover-overlay for consistent press depth.
|
|
3103
|
-
*
|
|
3104
|
-
* @deprecated Renamed to semantic.color.fill.none-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3105
|
-
*/
|
|
3106
|
-
'active-overlay': string;
|
|
3107
|
-
/**
|
|
3108
|
-
* Subtle transparent light overlay for elements that sit on a strong or dark background (e.g. the count badge on an active pills tab in TabBar). The light counterpart of hover-overlay; pair with text.inverse.
|
|
3109
|
-
*
|
|
3110
|
-
* @deprecated Renamed to semantic.color.fill.inverse-none-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3111
|
-
*/
|
|
3112
|
-
'inverse-overlay': string;
|
|
3113
|
-
};
|
|
3114
1628
|
border: {
|
|
3115
1629
|
/** Default border colour for dividers and decorative outlines only (decision 0040). 1.53:1 on white, below the 3:1 a control edge needs; use color.border.input for that (decision 0025). */
|
|
3116
1630
|
default: string;
|
|
3117
|
-
/**
|
|
3118
|
-
* Subtle border colour for dividers and decorative outlines, and for the borders of disabled controls, which WCAG 1.4.11 exempts. 1.30:1 on white, below the 3:1 a control's edge needs; use color.border.control for that (decision 0025).
|
|
3119
|
-
*
|
|
3120
|
-
* @deprecated Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.border.default`.
|
|
3121
|
-
*/
|
|
3122
|
-
subtle: string;
|
|
3123
|
-
/**
|
|
3124
|
-
* Resting border of a control whose edge shows where it is, such as a text input, Dropdown or the Checkbox box. 4.69:1 on white, 4.45:1 on the page, above the 3:1 WCAG 1.4.11 asks for (decision 0025).
|
|
3125
|
-
*
|
|
3126
|
-
* @deprecated Renamed to semantic.color.border.input by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3127
|
-
*/
|
|
3128
|
-
control: string;
|
|
3129
|
-
/**
|
|
3130
|
-
* Near-black border colour for firm boundaries, such as a hovered or focused input. 11.51:1 on white.
|
|
3131
|
-
*
|
|
3132
|
-
* @deprecated Split by use (decision 0031): semantic.color.border.input-hover for a hovered control, semantic.color.border.focus for the focus ring and CardSmall's ring, semantic.color.fill.inverse for drag handles. Removed in 3.0.
|
|
3133
|
-
*/
|
|
3134
|
-
strong: string;
|
|
3135
|
-
/**
|
|
3136
|
-
* Blue border for selected and interactive states (decision 0003). 5.39:1 on white.
|
|
3137
|
-
*
|
|
3138
|
-
* @deprecated Renamed to semantic.color.border.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3139
|
-
*/
|
|
3140
|
-
interactive: string;
|
|
3141
|
-
/**
|
|
3142
|
-
* Red border for invalid fields and error outlines. 5.41:1 on white.
|
|
3143
|
-
*
|
|
3144
|
-
* @deprecated Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3145
|
-
*/
|
|
3146
|
-
error: string;
|
|
3147
1631
|
/** Green border for success outlines, such as an outlined success Alert. 3.18:1 on white (decision 0025). */
|
|
3148
1632
|
success: string;
|
|
3149
1633
|
/** Yellow border for warning outlines, such as an outlined warning Alert. 3.19:1 on white (decision 0025). */
|
|
3150
1634
|
warning: string;
|
|
3151
1635
|
/** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
|
|
3152
1636
|
none: string;
|
|
3153
|
-
/**
|
|
3154
|
-
* Border for dividers, decorative outlines and disabled controls.
|
|
3155
|
-
*
|
|
3156
|
-
* @deprecated Dividers have one border colour (decision 0048). Removed in 3.0. Use `semantic.color.border.default`.
|
|
3157
|
-
*/
|
|
3158
|
-
emphasis: string;
|
|
3159
1637
|
/** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. 3.19:1 on white and the page (decision 0025). */
|
|
3160
1638
|
input: string;
|
|
3161
1639
|
/** Edge of a hovered control, such as a hovered text input or Dropdown. 6.01:1 on white, a clear step from rest that stays apart from the focus ring. */
|
|
@@ -3174,46 +1652,10 @@ export type Tokens = {
|
|
|
3174
1652
|
icon: {
|
|
3175
1653
|
/** Default icon colour, matching text.default. 15.91:1 on white. */
|
|
3176
1654
|
default: string;
|
|
3177
|
-
/**
|
|
3178
|
-
* Emphasised icons.
|
|
3179
|
-
*
|
|
3180
|
-
* @deprecated Emphasis comes from weight and scale, not a darker colour (decision 0048). Removed in 3.0. Use `semantic.color.icon.default`.
|
|
3181
|
-
*/
|
|
3182
|
-
emphasis: string;
|
|
3183
|
-
/**
|
|
3184
|
-
* Secondary icons, such as list item and empty-state icons. 4.69:1 on white, 4.45:1 on the page (icons need 3:1).
|
|
3185
|
-
*
|
|
3186
|
-
* @deprecated Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3187
|
-
*/
|
|
3188
|
-
subdued: string;
|
|
3189
1655
|
/** Icons and other foreground marks in disabled controls, matching text.disabled. 1.53:1 on white. */
|
|
3190
1656
|
disabled: string;
|
|
3191
1657
|
/** Icons on dark or coloured fills, matching text.inverse. */
|
|
3192
1658
|
inverse: string;
|
|
3193
|
-
/**
|
|
3194
|
-
* Blue icons in links and selected items, matching text.interactive. 5.39:1 on white.
|
|
3195
|
-
*
|
|
3196
|
-
* @deprecated Renamed to semantic.color.icon.accent by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3197
|
-
*/
|
|
3198
|
-
interactive: string;
|
|
3199
|
-
/**
|
|
3200
|
-
* Blue icon on hover, matching text.interactive-hover.
|
|
3201
|
-
*
|
|
3202
|
-
* @deprecated Renamed to semantic.color.icon.accent-hover by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3203
|
-
*/
|
|
3204
|
-
'interactive-hover': string;
|
|
3205
|
-
/**
|
|
3206
|
-
* Blue icon while pressed, matching text.interactive-active.
|
|
3207
|
-
*
|
|
3208
|
-
* @deprecated Renamed to semantic.color.icon.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3209
|
-
*/
|
|
3210
|
-
'interactive-active': string;
|
|
3211
|
-
/**
|
|
3212
|
-
* Error icons, such as in Alert and EmptyState. 5.41:1 on white. (InlineAlert's icon takes the text colour instead.)
|
|
3213
|
-
*
|
|
3214
|
-
* @deprecated Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3215
|
-
*/
|
|
3216
|
-
error: string;
|
|
3217
1659
|
/** Success icons, such as in Alert and EmptyState. 5.99:1 on white. (InlineAlert’s icon takes the text colour instead.) */
|
|
3218
1660
|
success: string;
|
|
3219
1661
|
/** Warning icons, such as in Alert. 6.01:1 on white. (InlineAlert’s icon takes the text colour instead.) */
|
|
@@ -3222,18 +1664,6 @@ export type Tokens = {
|
|
|
3222
1664
|
muted: string;
|
|
3223
1665
|
/** Blue icons in links and selected items, in every state, matching color.text.accent. 6.00:1 on white. */
|
|
3224
1666
|
accent: string;
|
|
3225
|
-
/**
|
|
3226
|
-
* Icon of a hovered selected item, matching color.text.accent-hover.
|
|
3227
|
-
*
|
|
3228
|
-
* @deprecated Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.icon.accent`.
|
|
3229
|
-
*/
|
|
3230
|
-
'accent-hover': string;
|
|
3231
|
-
/**
|
|
3232
|
-
* Icon of a pressed selected item, matching color.text.accent-pressed.
|
|
3233
|
-
*
|
|
3234
|
-
* @deprecated Accent icons keeps one colour in every state; the fill shows hover and pressed (#190). Removed in 3.0. Use `semantic.color.icon.accent`.
|
|
3235
|
-
*/
|
|
3236
|
-
'accent-pressed': string;
|
|
3237
1667
|
/** Error icons, such as in Alert and EmptyState. 6.03:1 on white. */
|
|
3238
1668
|
danger: string;
|
|
3239
1669
|
/** The AI icon on AI-generated content and agent actions (0043, 0046), next to its label. 5.99:1 on white, 5.68:1 on the page. */
|
|
@@ -3241,315 +1671,13 @@ export type Tokens = {
|
|
|
3241
1671
|
/** Serious-warning icons, matching color.text.serious. 6.04:1 on white. */
|
|
3242
1672
|
serious: string;
|
|
3243
1673
|
};
|
|
3244
|
-
financial: {
|
|
3245
|
-
/**
|
|
3246
|
-
* Color for positive monetary values, credits, income
|
|
3247
|
-
*
|
|
3248
|
-
* @deprecated Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
|
|
3249
|
-
*/
|
|
3250
|
-
credit: string;
|
|
3251
|
-
/**
|
|
3252
|
-
* Hover state for credit-colored interactive elements
|
|
3253
|
-
*
|
|
3254
|
-
* @deprecated Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.positive`.
|
|
3255
|
-
*/
|
|
3256
|
-
'credit-hover': string;
|
|
3257
|
-
/**
|
|
3258
|
-
* Color for negative monetary values, debits, expenses
|
|
3259
|
-
*
|
|
3260
|
-
* @deprecated Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
|
|
3261
|
-
*/
|
|
3262
|
-
debit: string;
|
|
3263
|
-
/**
|
|
3264
|
-
* Hover state for debit-colored interactive elements
|
|
3265
|
-
*
|
|
3266
|
-
* @deprecated Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. Use `semantic.color.data.negative`.
|
|
3267
|
-
*/
|
|
3268
|
-
'debit-hover': string;
|
|
3269
|
-
/**
|
|
3270
|
-
* Color for pending or processing financial transactions
|
|
3271
|
-
*
|
|
3272
|
-
* @deprecated Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
|
|
3273
|
-
*/
|
|
3274
|
-
pending: string;
|
|
3275
|
-
/**
|
|
3276
|
-
* Neutral color for informational monetary amounts
|
|
3277
|
-
*
|
|
3278
|
-
* @deprecated Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. Use `semantic.color.text.muted`.
|
|
3279
|
-
*/
|
|
3280
|
-
neutral: string;
|
|
3281
|
-
};
|
|
3282
1674
|
category: {
|
|
3283
|
-
/**
|
|
3284
|
-
* Blue category color for general/miscellaneous
|
|
3285
|
-
*
|
|
3286
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle`.
|
|
3287
|
-
*/
|
|
3288
|
-
blue: string;
|
|
3289
|
-
/**
|
|
3290
|
-
* Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3291
|
-
*
|
|
3292
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-strong`.
|
|
3293
|
-
*/
|
|
3294
|
-
'blue-strong': string;
|
|
3295
|
-
/**
|
|
3296
|
-
* Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3297
|
-
*
|
|
3298
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.periwinkle-strong`.
|
|
3299
|
-
*/
|
|
3300
|
-
'blue-emphasis': string;
|
|
3301
|
-
/**
|
|
3302
|
-
* Subtle blue background
|
|
3303
|
-
*
|
|
3304
|
-
* @deprecated Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.periwinkle-muted`.
|
|
3305
|
-
*/
|
|
3306
|
-
'blue-subtle': string;
|
|
3307
|
-
/**
|
|
3308
|
-
* Purple category color for entertainment
|
|
3309
|
-
*
|
|
3310
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta`.
|
|
3311
|
-
*/
|
|
3312
|
-
purple: string;
|
|
3313
|
-
/**
|
|
3314
|
-
* Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3315
|
-
*
|
|
3316
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-strong`.
|
|
3317
|
-
*/
|
|
3318
|
-
'purple-strong': string;
|
|
3319
|
-
/**
|
|
3320
|
-
* Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3321
|
-
*
|
|
3322
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.magenta-strong`.
|
|
3323
|
-
*/
|
|
3324
|
-
'purple-emphasis': string;
|
|
3325
|
-
/**
|
|
3326
|
-
* Subtle purple background
|
|
3327
|
-
*
|
|
3328
|
-
* @deprecated Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.magenta-muted`.
|
|
3329
|
-
*/
|
|
3330
|
-
'purple-subtle': string;
|
|
3331
|
-
/**
|
|
3332
|
-
* Pink category color for health/wellness
|
|
3333
|
-
*
|
|
3334
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
|
|
3335
|
-
*/
|
|
3336
|
-
pink: string;
|
|
3337
|
-
/**
|
|
3338
|
-
* Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3339
|
-
*
|
|
3340
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3341
|
-
*/
|
|
3342
|
-
'pink-strong': string;
|
|
3343
|
-
/**
|
|
3344
|
-
* Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3345
|
-
*
|
|
3346
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3347
|
-
*/
|
|
3348
|
-
'pink-emphasis': string;
|
|
3349
|
-
/**
|
|
3350
|
-
* Subtle pink background
|
|
3351
|
-
*
|
|
3352
|
-
* @deprecated Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3353
|
-
*/
|
|
3354
|
-
'pink-subtle': string;
|
|
3355
|
-
/**
|
|
3356
|
-
* Yellow category color for utilities
|
|
3357
|
-
*
|
|
3358
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive`.
|
|
3359
|
-
*/
|
|
3360
|
-
yellow: string;
|
|
3361
|
-
/**
|
|
3362
|
-
* Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3363
|
-
*
|
|
3364
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-strong`.
|
|
3365
|
-
*/
|
|
3366
|
-
'yellow-strong': string;
|
|
3367
|
-
/**
|
|
3368
|
-
* Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3369
|
-
*
|
|
3370
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
|
|
3371
|
-
*/
|
|
3372
|
-
'yellow-emphasis': string;
|
|
3373
|
-
/**
|
|
3374
|
-
* Subtle yellow background
|
|
3375
|
-
*
|
|
3376
|
-
* @deprecated Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
|
|
3377
|
-
*/
|
|
3378
|
-
'yellow-subtle': string;
|
|
3379
|
-
/**
|
|
3380
|
-
* Green category color for income
|
|
3381
|
-
*
|
|
3382
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive`.
|
|
3383
|
-
*/
|
|
3384
|
-
green: string;
|
|
3385
|
-
/**
|
|
3386
|
-
* Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3387
|
-
*
|
|
3388
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-strong`.
|
|
3389
|
-
*/
|
|
3390
|
-
'green-strong': string;
|
|
3391
|
-
/**
|
|
3392
|
-
* Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3393
|
-
*
|
|
3394
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.olive-strong`.
|
|
3395
|
-
*/
|
|
3396
|
-
'green-emphasis': string;
|
|
3397
|
-
/**
|
|
3398
|
-
* Subtle green background
|
|
3399
|
-
*
|
|
3400
|
-
* @deprecated Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.olive-muted`.
|
|
3401
|
-
*/
|
|
3402
|
-
'green-subtle': string;
|
|
3403
|
-
/**
|
|
3404
|
-
* Red category color for expenses
|
|
3405
|
-
*
|
|
3406
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
|
|
3407
|
-
*/
|
|
3408
|
-
red: string;
|
|
3409
|
-
/**
|
|
3410
|
-
* Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3411
|
-
*
|
|
3412
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3413
|
-
*/
|
|
3414
|
-
'red-strong': string;
|
|
3415
|
-
/**
|
|
3416
|
-
* Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3417
|
-
*
|
|
3418
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3419
|
-
*/
|
|
3420
|
-
'red-emphasis': string;
|
|
3421
|
-
/**
|
|
3422
|
-
* Subtle red background
|
|
3423
|
-
*
|
|
3424
|
-
* @deprecated Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3425
|
-
*/
|
|
3426
|
-
'red-subtle': string;
|
|
3427
|
-
/**
|
|
3428
|
-
* Orange category color for food & dining
|
|
3429
|
-
*
|
|
3430
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose`.
|
|
3431
|
-
*/
|
|
3432
|
-
orange: string;
|
|
3433
|
-
/**
|
|
3434
|
-
* Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3435
|
-
*
|
|
3436
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3437
|
-
*/
|
|
3438
|
-
'orange-strong': string;
|
|
3439
|
-
/**
|
|
3440
|
-
* Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3441
|
-
*
|
|
3442
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. Use `semantic.color.category.rose-strong`.
|
|
3443
|
-
*/
|
|
3444
|
-
'orange-emphasis': string;
|
|
3445
|
-
/**
|
|
3446
|
-
* Subtle orange background
|
|
3447
|
-
*
|
|
3448
|
-
* @deprecated Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3449
|
-
*/
|
|
3450
|
-
'orange-subtle': string;
|
|
3451
1675
|
/** Gray category (decision 0043: neutral, for uncategorised or "other"): the outline of an outlined CategoryLabel. 3.19:1 on white. */
|
|
3452
1676
|
gray: string;
|
|
3453
1677
|
/** Strong step of the gray category: the fill of a filled CategoryLabel, with white text at 6.01:1. */
|
|
3454
1678
|
'gray-strong': string;
|
|
3455
|
-
/**
|
|
3456
|
-
* Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029).
|
|
3457
|
-
*
|
|
3458
|
-
* @deprecated "emphasis" means near-black, so use semantic.color.category.gray-strong (decision 0029). Removed in 3.0.
|
|
3459
|
-
*/
|
|
3460
|
-
'gray-emphasis': string;
|
|
3461
|
-
/**
|
|
3462
|
-
* Subtle gray background
|
|
3463
|
-
*
|
|
3464
|
-
* @deprecated Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0.
|
|
3465
|
-
*/
|
|
3466
|
-
'gray-subtle': string;
|
|
3467
|
-
/**
|
|
3468
|
-
* Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted.
|
|
3469
|
-
*
|
|
3470
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-text`.
|
|
3471
|
-
*/
|
|
3472
|
-
'blue-text': string;
|
|
3473
|
-
/**
|
|
3474
|
-
* Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted.
|
|
3475
|
-
*
|
|
3476
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-text`.
|
|
3477
|
-
*/
|
|
3478
|
-
'purple-text': string;
|
|
3479
|
-
/**
|
|
3480
|
-
* Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted.
|
|
3481
|
-
*
|
|
3482
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
|
|
3483
|
-
*/
|
|
3484
|
-
'pink-text': string;
|
|
3485
|
-
/**
|
|
3486
|
-
* Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted.
|
|
3487
|
-
*
|
|
3488
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-text`.
|
|
3489
|
-
*/
|
|
3490
|
-
'yellow-text': string;
|
|
3491
|
-
/**
|
|
3492
|
-
* Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted.
|
|
3493
|
-
*
|
|
3494
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-text`.
|
|
3495
|
-
*/
|
|
3496
|
-
'green-text': string;
|
|
3497
|
-
/**
|
|
3498
|
-
* Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted.
|
|
3499
|
-
*
|
|
3500
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
|
|
3501
|
-
*/
|
|
3502
|
-
'red-text': string;
|
|
3503
|
-
/**
|
|
3504
|
-
* Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted.
|
|
3505
|
-
*
|
|
3506
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-text`.
|
|
3507
|
-
*/
|
|
3508
|
-
'orange-text': string;
|
|
3509
1679
|
/** Text and icons of an outlined or minimal gray CategoryLabel. 6.01:1 on white, 5.37:1 on gray-muted. */
|
|
3510
1680
|
'gray-text': string;
|
|
3511
|
-
/**
|
|
3512
|
-
* Light blue fill of a blue CategoryLabel, behind the blue-text colour.
|
|
3513
|
-
*
|
|
3514
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Blue is now periwinkle. Removed in 3.0. Use `semantic.color.category.periwinkle-muted`.
|
|
3515
|
-
*/
|
|
3516
|
-
'blue-muted': string;
|
|
3517
|
-
/**
|
|
3518
|
-
* Light purple fill of a purple CategoryLabel, behind the purple-text colour.
|
|
3519
|
-
*
|
|
3520
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Purple is now magenta. Removed in 3.0. Use `semantic.color.category.magenta-muted`.
|
|
3521
|
-
*/
|
|
3522
|
-
'purple-muted': string;
|
|
3523
|
-
/**
|
|
3524
|
-
* Light pink fill of a pink CategoryLabel, behind the pink-text colour.
|
|
3525
|
-
*
|
|
3526
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Pink is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3527
|
-
*/
|
|
3528
|
-
'pink-muted': string;
|
|
3529
|
-
/**
|
|
3530
|
-
* Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour.
|
|
3531
|
-
*
|
|
3532
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Yellow is now olive. Removed in 3.0. Use `semantic.color.category.olive-muted`.
|
|
3533
|
-
*/
|
|
3534
|
-
'yellow-muted': string;
|
|
3535
|
-
/**
|
|
3536
|
-
* Light green fill of a green CategoryLabel, behind the green-text colour.
|
|
3537
|
-
*
|
|
3538
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Green is now olive. Removed in 3.0. Use `semantic.color.category.olive-muted`.
|
|
3539
|
-
*/
|
|
3540
|
-
'green-muted': string;
|
|
3541
|
-
/**
|
|
3542
|
-
* Light red fill of a red CategoryLabel, behind the red-text colour.
|
|
3543
|
-
*
|
|
3544
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Red is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3545
|
-
*/
|
|
3546
|
-
'red-muted': string;
|
|
3547
|
-
/**
|
|
3548
|
-
* Light orange fill of a orange CategoryLabel, behind the orange-text colour.
|
|
3549
|
-
*
|
|
3550
|
-
* @deprecated Category labels use the display colours, which carry no meaning (decision 0043). Orange is now rose. Removed in 3.0. Use `semantic.color.category.rose-muted`.
|
|
3551
|
-
*/
|
|
3552
|
-
'orange-muted': string;
|
|
3553
1681
|
/** Light gray fill of a minimal CategoryLabel, behind the gray-text colour. */
|
|
3554
1682
|
'gray-muted': string;
|
|
3555
1683
|
/** Olive category (decision 0043: no meaning): the outline of an outlined CategoryLabel. 3.18:1 on white. */
|
|
@@ -3585,95 +1713,9 @@ export type Tokens = {
|
|
|
3585
1713
|
/** Light magenta fill of a minimal CategoryLabel, behind the magenta-text colour. */
|
|
3586
1714
|
'magenta-muted': string;
|
|
3587
1715
|
};
|
|
3588
|
-
status: {
|
|
3589
|
-
/**
|
|
3590
|
-
* Text and icon of a pending StatusLabel, on its pending background.
|
|
3591
|
-
*
|
|
3592
|
-
* @deprecated Moved to the component tier as component.status.pending.text (decision 0031 §6). Removed in 3.0.
|
|
3593
|
-
*/
|
|
3594
|
-
pending: string;
|
|
3595
|
-
/**
|
|
3596
|
-
* Background for pending status
|
|
3597
|
-
*
|
|
3598
|
-
* @deprecated Moved to the component tier as component.status.pending.background (decision 0031 §6). Removed in 3.0.
|
|
3599
|
-
*/
|
|
3600
|
-
'pending-bg': string;
|
|
3601
|
-
/**
|
|
3602
|
-
* Green color for completed status
|
|
3603
|
-
*
|
|
3604
|
-
* @deprecated Moved to the component tier as component.status.completed.text (decision 0031 §6). Removed in 3.0.
|
|
3605
|
-
*/
|
|
3606
|
-
completed: string;
|
|
3607
|
-
/**
|
|
3608
|
-
* Background for completed status
|
|
3609
|
-
*
|
|
3610
|
-
* @deprecated Moved to the component tier as component.status.completed.background (decision 0031 §6). Removed in 3.0.
|
|
3611
|
-
*/
|
|
3612
|
-
'completed-bg': string;
|
|
3613
|
-
/**
|
|
3614
|
-
* Red color for failed/error status
|
|
3615
|
-
*
|
|
3616
|
-
* @deprecated Moved to the component tier as component.status.failed.text (decision 0031 §6). Removed in 3.0.
|
|
3617
|
-
*/
|
|
3618
|
-
failed: string;
|
|
3619
|
-
/**
|
|
3620
|
-
* Background for failed status
|
|
3621
|
-
*
|
|
3622
|
-
* @deprecated Moved to the component tier as component.status.failed.background (decision 0031 §6). Removed in 3.0.
|
|
3623
|
-
*/
|
|
3624
|
-
'failed-bg': string;
|
|
3625
|
-
/**
|
|
3626
|
-
* Gray color for cancelled status
|
|
3627
|
-
*
|
|
3628
|
-
* @deprecated Moved to the component tier as component.status.cancelled.text (decision 0031 §6). Removed in 3.0.
|
|
3629
|
-
*/
|
|
3630
|
-
cancelled: string;
|
|
3631
|
-
/**
|
|
3632
|
-
* Background for cancelled status
|
|
3633
|
-
*
|
|
3634
|
-
* @deprecated Moved to the component tier as component.status.cancelled.background (decision 0031 §6). Removed in 3.0.
|
|
3635
|
-
*/
|
|
3636
|
-
'cancelled-bg': string;
|
|
3637
|
-
/**
|
|
3638
|
-
* Blue color for processing status
|
|
3639
|
-
*
|
|
3640
|
-
* @deprecated Moved to the component tier as component.status.processing.text (decision 0031 §6). Removed in 3.0.
|
|
3641
|
-
*/
|
|
3642
|
-
processing: string;
|
|
3643
|
-
/**
|
|
3644
|
-
* Background for processing status
|
|
3645
|
-
*
|
|
3646
|
-
* @deprecated Moved to the component tier as component.status.processing.background (decision 0031 §6). Removed in 3.0.
|
|
3647
|
-
*/
|
|
3648
|
-
'processing-bg': string;
|
|
3649
|
-
/**
|
|
3650
|
-
* Purple color for scheduled status
|
|
3651
|
-
*
|
|
3652
|
-
* @deprecated Moved to the component tier as component.status.scheduled.text (decision 0031 §6). Removed in 3.0.
|
|
3653
|
-
*/
|
|
3654
|
-
scheduled: string;
|
|
3655
|
-
/**
|
|
3656
|
-
* Background for scheduled status
|
|
3657
|
-
*
|
|
3658
|
-
* @deprecated Moved to the component tier as component.status.scheduled.background (decision 0031 §6). Removed in 3.0.
|
|
3659
|
-
*/
|
|
3660
|
-
'scheduled-bg': string;
|
|
3661
|
-
};
|
|
3662
1716
|
fill: {
|
|
3663
1717
|
/** Strong near-black fill for the primary Button and IconButton and the emphasis Chip, with text.inverse on it (15.91:1). Hover and pressed mix in text.inverse at opacity.state (decision 0048). */
|
|
3664
1718
|
emphasis: string;
|
|
3665
|
-
/**
|
|
3666
|
-
* Fill of a hovered emphasis control, such as the primary Button.
|
|
3667
|
-
*
|
|
3668
|
-
* @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
|
|
3669
|
-
*/
|
|
3670
|
-
'emphasis-hover': string;
|
|
3671
|
-
/**
|
|
3672
|
-
* Fill of a pressed emphasis control, such as the primary Button.
|
|
3673
|
-
*
|
|
3674
|
-
* @deprecated Strong-fill states mix text.inverse into fill.emphasis at opacity.state.hover and opacity.state.pressed (decision 0048). Removed in 3.0.
|
|
3675
|
-
*/
|
|
3676
|
-
'emphasis-pressed': string;
|
|
3677
1719
|
/** Light grey fill for quiet grouped content, such as the default Chip. The resting fill step, so it shows on the page. */
|
|
3678
1720
|
muted: string;
|
|
3679
1721
|
/** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
|
|
@@ -3805,41 +1847,11 @@ export type Tokens = {
|
|
|
3805
1847
|
overline: string;
|
|
3806
1848
|
/** Captions: helper text, metadata and image captions. */
|
|
3807
1849
|
caption: string;
|
|
3808
|
-
/**
|
|
3809
|
-
* Label of the large Button, the default size.
|
|
3810
|
-
*
|
|
3811
|
-
* @deprecated Moved to the component tier as component.button.sizes.large.font (decision 0031 §6). Removed in 3.0.
|
|
3812
|
-
*/
|
|
3813
|
-
button1: string;
|
|
3814
|
-
/**
|
|
3815
|
-
* Label of the medium Button, and tab labels.
|
|
3816
|
-
*
|
|
3817
|
-
* @deprecated Moved to the component tier as component.button.sizes.medium.font (decision 0031 §6). Removed in 3.0.
|
|
3818
|
-
*/
|
|
3819
|
-
button2: string;
|
|
3820
|
-
/**
|
|
3821
|
-
* Label of the small Button, for dense toolbars.
|
|
3822
|
-
*
|
|
3823
|
-
* @deprecated Moved to the component tier as component.button.sizes.small.font (decision 0031 §6). Removed in 3.0.
|
|
3824
|
-
*/
|
|
3825
|
-
button3: string;
|
|
3826
1850
|
/** Form labels for fields such as TextField and Slider. */
|
|
3827
1851
|
label: string;
|
|
3828
|
-
/**
|
|
3829
|
-
* Breadcrumb-sized text; not used today, as Breadcrumbs uses typography.caption.
|
|
3830
|
-
*
|
|
3831
|
-
* @deprecated Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. Use `semantic.typography.caption`.
|
|
3832
|
-
*/
|
|
3833
|
-
breadcrumb: string;
|
|
3834
1852
|
};
|
|
3835
1853
|
motion: {
|
|
3836
1854
|
duration: {
|
|
3837
|
-
/**
|
|
3838
|
-
* 200ms: standard duration for property-specific transitions.
|
|
3839
|
-
*
|
|
3840
|
-
* @deprecated Renamed to semantic.motion.duration.moderate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3841
|
-
*/
|
|
3842
|
-
normal: string;
|
|
3843
1855
|
/** Quick responses to input: hover, press, focus and small indicators. */
|
|
3844
1856
|
fast: string;
|
|
3845
1857
|
/** The longest duration (P6): larger movements, such as a Sheet sliding in. */
|
|
@@ -3850,18 +1862,6 @@ export type Tokens = {
|
|
|
3850
1862
|
moderate: string;
|
|
3851
1863
|
};
|
|
3852
1864
|
easing: {
|
|
3853
|
-
/**
|
|
3854
|
-
* ease-in-out: standard easing for property-specific transitions.
|
|
3855
|
-
*
|
|
3856
|
-
* @deprecated Renamed to semantic.motion.easing.standard by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3857
|
-
*/
|
|
3858
|
-
easeInOut: string;
|
|
3859
|
-
/**
|
|
3860
|
-
* ease-out: for elements responding to input or entering the page.
|
|
3861
|
-
*
|
|
3862
|
-
* @deprecated Renamed to semantic.motion.easing.decelerate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3863
|
-
*/
|
|
3864
|
-
easeOut: string;
|
|
3865
1865
|
/** Easing for change on screen: something moving or resizing in place. */
|
|
3866
1866
|
standard: string;
|
|
3867
1867
|
/** Easing for things arriving or responding: entrances, hover and press. */
|
|
@@ -3870,24 +1870,6 @@ export type Tokens = {
|
|
|
3870
1870
|
accelerate: string;
|
|
3871
1871
|
};
|
|
3872
1872
|
transition: {
|
|
3873
|
-
/**
|
|
3874
|
-
* All properties over duration.fast (150ms), easing out: quick feedback, such as the Slider thumb.
|
|
3875
|
-
*
|
|
3876
|
-
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3877
|
-
*/
|
|
3878
|
-
fast: string;
|
|
3879
|
-
/**
|
|
3880
|
-
* All properties over duration.normal (200ms), easing in and out: the default state transition.
|
|
3881
|
-
*
|
|
3882
|
-
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3883
|
-
*/
|
|
3884
|
-
normal: string;
|
|
3885
|
-
/**
|
|
3886
|
-
* All properties over duration.slow (300ms), the motion maximum (P6), easing in and out: larger changes.
|
|
3887
|
-
*
|
|
3888
|
-
* @deprecated It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0.
|
|
3889
|
-
*/
|
|
3890
|
-
slow: string;
|
|
3891
1873
|
/** Fill and text colour responding to hover and press: buttons, chips, tabs and rows. */
|
|
3892
1874
|
feedback: string;
|
|
3893
1875
|
/** How the focus ring appears: outline and outline offset. */
|
|
@@ -3895,24 +1877,6 @@ export type Tokens = {
|
|
|
3895
1877
|
/** Small movement or fade in response to input, such as a pressed control shifting. */
|
|
3896
1878
|
press: string;
|
|
3897
1879
|
};
|
|
3898
|
-
/**
|
|
3899
|
-
* Background and text colour over 150ms: the hover and press response of buttons, chips and tabs.
|
|
3900
|
-
*
|
|
3901
|
-
* @deprecated Renamed to semantic.motion.transition.feedback by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3902
|
-
*/
|
|
3903
|
-
hover: string;
|
|
3904
|
-
/**
|
|
3905
|
-
* Outline and outline offset over 150ms: how the focus ring appears.
|
|
3906
|
-
*
|
|
3907
|
-
* @deprecated Renamed to semantic.motion.transition.focus by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3908
|
-
*/
|
|
3909
|
-
focus: string;
|
|
3910
|
-
/**
|
|
3911
|
-
* Transform and opacity over 150ms: small movement or fade in response to input.
|
|
3912
|
-
*
|
|
3913
|
-
* @deprecated Renamed to semantic.motion.transition.press by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0.
|
|
3914
|
-
*/
|
|
3915
|
-
interactive: string;
|
|
3916
1880
|
distance: {
|
|
3917
1881
|
/** How far a small element travels as it enters, such as a Dropdown menu dropping in. */
|
|
3918
1882
|
sm: string;
|