@transcodes/design-tokens 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/package.json +1 -1
- package/build/components.css +0 -1
- package/build/components.d.ts +0 -6
- package/build/components.js +0 -532
- package/build/index.d.ts +0 -240
- package/build/index.js +0 -467
- package/build/tokens-dark.css +0 -1
- package/build/tokens.css +0 -1
- package/build/tokens.d.ts +0 -344
- package/build/tokens.json +0 -221
package/build/tokens.d.ts
DELETED
|
@@ -1,344 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
/** Small slide offset (4px) - error message animation */
|
|
6
|
-
export const offsetSlideUpSm: string;
|
|
7
|
-
/** Medium slide offset (10px) - screen enter animation */
|
|
8
|
-
export const offsetSlideUpMd: string;
|
|
9
|
-
/** Instant feedback for micro-interactions */
|
|
10
|
-
export const durationInstant: string;
|
|
11
|
-
/** Fast transitions for hover/focus states */
|
|
12
|
-
export const durationFast: string;
|
|
13
|
-
/** Smooth transitions for modals/overlays */
|
|
14
|
-
export const durationSmooth: string;
|
|
15
|
-
/** Slow transitions for page animations */
|
|
16
|
-
export const durationSlow: string;
|
|
17
|
-
/** Slower transitions for complex animations */
|
|
18
|
-
export const durationSlower: string;
|
|
19
|
-
/** Default easing function */
|
|
20
|
-
export const easingEase: string;
|
|
21
|
-
/** Smooth ease-in-out for transitions */
|
|
22
|
-
export const easingEaseInOut: string;
|
|
23
|
-
/** Bounce effect for playful interactions */
|
|
24
|
-
export const easingBounce: string;
|
|
25
|
-
export const inkEffectRippleDuration: string;
|
|
26
|
-
export const inkEffectRippleEasing: string;
|
|
27
|
-
export const inkEffectSpreadScale: string;
|
|
28
|
-
export const inkEffectFadeDuration: string;
|
|
29
|
-
export const transitionFast: string;
|
|
30
|
-
export const transitionSmooth: string;
|
|
31
|
-
export const transitionBounce: string;
|
|
32
|
-
/** Disabled state opacity - WCAG 1.4.3 minimum */
|
|
33
|
-
export const opacityDisabled: string;
|
|
34
|
-
/** Hover state for interactive elements */
|
|
35
|
-
export const opacityHover: string;
|
|
36
|
-
/** Loading pulse animation minimum opacity */
|
|
37
|
-
export const opacityLoading: string;
|
|
38
|
-
/** Fully transparent/hidden state */
|
|
39
|
-
export const opacityHidden: string;
|
|
40
|
-
/** Fully visible state */
|
|
41
|
-
export const opacityVisible: string;
|
|
42
|
-
/** Transcodes primary brand color */
|
|
43
|
-
export const brandPrimary: string;
|
|
44
|
-
export const brandPrimaryHover: string;
|
|
45
|
-
export const brandLogoText: string;
|
|
46
|
-
/** Primary accent. WCAG AA: 4.5:1 on paper-white */
|
|
47
|
-
export const accentPrimary: string;
|
|
48
|
-
/** Primary accent hover. WCAG AA: 5.2:1 on paper-white */
|
|
49
|
-
export const accentPrimaryHover: string;
|
|
50
|
-
/** Primary accent pressed. WCAG AA: 6.5:1 on paper-white */
|
|
51
|
-
export const accentPrimaryPressed: string;
|
|
52
|
-
/** Success accent. WCAG AA: 4.8:1 on paper-white */
|
|
53
|
-
export const accentSuccess: string;
|
|
54
|
-
/** Success accent hover. WCAG AA: 5.6:1 on paper-white */
|
|
55
|
-
export const accentSuccessHover: string;
|
|
56
|
-
/** Success accent pressed. WCAG AA: 6.8:1 on paper-white */
|
|
57
|
-
export const accentSuccessPressed: string;
|
|
58
|
-
/** Warning accent. WCAG AA: 4.5:1 on paper-white */
|
|
59
|
-
export const accentWarning: string;
|
|
60
|
-
/** Warning accent hover. WCAG AA: 5.8:1 on paper-white */
|
|
61
|
-
export const accentWarningHover: string;
|
|
62
|
-
/** Warning accent pressed. WCAG AA: 7.2:1 on paper-white */
|
|
63
|
-
export const accentWarningPressed: string;
|
|
64
|
-
export const alphaPrimary04: string;
|
|
65
|
-
export const alphaPrimary08: string;
|
|
66
|
-
export const alphaPrimary10: string;
|
|
67
|
-
export const alphaPrimary12: string;
|
|
68
|
-
export const alphaPrimary15: string;
|
|
69
|
-
export const alphaPrimary20: string;
|
|
70
|
-
export const alphaPrimary30: string;
|
|
71
|
-
export const alphaPrimary40: string;
|
|
72
|
-
export const alphaPrimary50: string;
|
|
73
|
-
export const alphaSuccess10: string;
|
|
74
|
-
export const alphaSuccess15: string;
|
|
75
|
-
export const alphaSuccess20: string;
|
|
76
|
-
export const alphaSuccess30: string;
|
|
77
|
-
export const alphaWarning08: string;
|
|
78
|
-
export const alphaWarning15: string;
|
|
79
|
-
export const alphaWarning20: string;
|
|
80
|
-
export const alphaInfo08: string;
|
|
81
|
-
export const alphaInfo15: string;
|
|
82
|
-
export const alphaInfo20: string;
|
|
83
|
-
export const alphaInk04: string;
|
|
84
|
-
export const alphaInk06: string;
|
|
85
|
-
export const alphaInk10: string;
|
|
86
|
-
export const alphaWhite15: string;
|
|
87
|
-
export const alphaWhite30: string;
|
|
88
|
-
export const alphaWhite90: string;
|
|
89
|
-
export const alphaBlack15: string;
|
|
90
|
-
export const alphaBlack30: string;
|
|
91
|
-
export const alphaBlack90: string;
|
|
92
|
-
/** Text on accent backgrounds (primary, success). Light: white, Dark: black */
|
|
93
|
-
export const alphaOnAccent: string;
|
|
94
|
-
/** Muted text on accent backgrounds */
|
|
95
|
-
export const alphaOnAccentMuted: string;
|
|
96
|
-
/** Error state. WCAG AA: 4.8:1 on paper-white */
|
|
97
|
-
export const errorBase: string;
|
|
98
|
-
/** Error background. Decorative, not for text */
|
|
99
|
-
export const errorBg: string;
|
|
100
|
-
/** Error border. Decorative, not for text */
|
|
101
|
-
export const errorBorder: string;
|
|
102
|
-
/** Primary text. WCAG AA: 15.8:1 on paper-white */
|
|
103
|
-
export const inkBlack: string;
|
|
104
|
-
/** Secondary text. WCAG AA: 12.5:1 on paper-white */
|
|
105
|
-
export const inkDark: string;
|
|
106
|
-
/** Tertiary text. WCAG AA: 6.0:1 on paper-white */
|
|
107
|
-
export const inkMedium: string;
|
|
108
|
-
/** Placeholder, disabled text. Contrast: 3.5:1 (meets 3:1 minimum) */
|
|
109
|
-
export const inkLight: string;
|
|
110
|
-
/** Decorative only. NOT for readable text. Contrast: 1.7:1 */
|
|
111
|
-
export const inkFaint: string;
|
|
112
|
-
/** Modal/dialog overlay background */
|
|
113
|
-
export const overlayDim: string;
|
|
114
|
-
/** Darker overlay for critical modals (offline, error states) */
|
|
115
|
-
export const overlayDark: string;
|
|
116
|
-
/** Light shadow for subtle elevation */
|
|
117
|
-
export const overlayShadowLight: string;
|
|
118
|
-
/** Subtle shadow for toasts and banners */
|
|
119
|
-
export const overlayShadowSubtle: string;
|
|
120
|
-
/** Medium shadow for cards and dropdowns */
|
|
121
|
-
export const overlayShadowMedium: string;
|
|
122
|
-
/** Strong shadow for modals and floating elements */
|
|
123
|
-
export const overlayShadowStrong: string;
|
|
124
|
-
/** Heavy shadow for prominent floating elements */
|
|
125
|
-
export const overlayShadowHeavy: string;
|
|
126
|
-
/** Button radial glow overlay effect */
|
|
127
|
-
export const overlayGlowWhite: string;
|
|
128
|
-
/** Spinner base track color on dark backgrounds */
|
|
129
|
-
export const overlaySpinnerTrack: string;
|
|
130
|
-
export const paperWhite: string;
|
|
131
|
-
export const paperCream: string;
|
|
132
|
-
export const paperWarm: string;
|
|
133
|
-
/** Warning state. WCAG AA: 4.6:1 on paper-white */
|
|
134
|
-
export const semanticWarning: string;
|
|
135
|
-
/** Warning hover. WCAG AA: 5.8:1 on paper-white */
|
|
136
|
-
export const semanticWarningHover: string;
|
|
137
|
-
/** Warning background tint for callouts/notifications */
|
|
138
|
-
export const semanticWarningBg: string;
|
|
139
|
-
/** Warning light background */
|
|
140
|
-
export const semanticWarningLight: string;
|
|
141
|
-
/** Success background tint for status indicators */
|
|
142
|
-
export const semanticSuccessBg: string;
|
|
143
|
-
/** Info state. WCAG AA: 4.8:1 on paper-white */
|
|
144
|
-
export const semanticInfo: string;
|
|
145
|
-
/** Info hover. WCAG AA: 5.8:1 on paper-white */
|
|
146
|
-
export const semanticInfoHover: string;
|
|
147
|
-
/** Info background tint */
|
|
148
|
-
export const semanticInfoBg: string;
|
|
149
|
-
export const buttonHeight: string;
|
|
150
|
-
export const buttonHeightSecondary: string;
|
|
151
|
-
export const buttonRadius: string;
|
|
152
|
-
export const buttonFontSize: string;
|
|
153
|
-
export const buttonFontWeight: string;
|
|
154
|
-
export const buttonLetterSpacing: string;
|
|
155
|
-
/** Dark button background (console, signin) */
|
|
156
|
-
export const buttonDark: string;
|
|
157
|
-
/** Dark button hover state */
|
|
158
|
-
export const buttonDarkHover: string;
|
|
159
|
-
/** Light gray secondary button background */
|
|
160
|
-
export const buttonLight: string;
|
|
161
|
-
/** Light button hover state */
|
|
162
|
-
export const buttonLightHover: string;
|
|
163
|
-
/** Text button height */
|
|
164
|
-
export const buttonTextHeight: string;
|
|
165
|
-
/** Text button font size */
|
|
166
|
-
export const buttonTextFontSize: string;
|
|
167
|
-
/** Small text button padding */
|
|
168
|
-
export const buttonTextPaddingSm: string;
|
|
169
|
-
/** Medium text button padding */
|
|
170
|
-
export const buttonTextPaddingMd: string;
|
|
171
|
-
/** Gap between button icon and text */
|
|
172
|
-
export const buttonContentGap: string;
|
|
173
|
-
/** Loading spinner size */
|
|
174
|
-
export const buttonSpinnerSize: string;
|
|
175
|
-
/** Spinner border width */
|
|
176
|
-
export const buttonSpinnerBorderWidth: string;
|
|
177
|
-
export const cardPadding: string;
|
|
178
|
-
export const cardRadius: string;
|
|
179
|
-
export const containerMaxWidth: string;
|
|
180
|
-
export const containerMaxWidthWide: string;
|
|
181
|
-
/** Error message padding */
|
|
182
|
-
export const feedbackErrorPadding: string;
|
|
183
|
-
/** Error message border radius */
|
|
184
|
-
export const feedbackErrorRadius: string;
|
|
185
|
-
/** Gap between error icon and text */
|
|
186
|
-
export const feedbackErrorGap: string;
|
|
187
|
-
/** Error icon size */
|
|
188
|
-
export const feedbackErrorIconSize: string;
|
|
189
|
-
/** Notice box padding */
|
|
190
|
-
export const feedbackNoticePadding: string;
|
|
191
|
-
/** Notice box border radius */
|
|
192
|
-
export const feedbackNoticeRadius: string;
|
|
193
|
-
/** Gap between notice icon and text */
|
|
194
|
-
export const feedbackNoticeGap: string;
|
|
195
|
-
/** Notice icon size */
|
|
196
|
-
export const feedbackNoticeIconSize: string;
|
|
197
|
-
export const inputPaddingY: string;
|
|
198
|
-
export const inputPaddingX: string;
|
|
199
|
-
export const inputRadius: string;
|
|
200
|
-
export const inputFontSize: string;
|
|
201
|
-
export const labelFontSize: string;
|
|
202
|
-
export const labelFontWeight: string;
|
|
203
|
-
export const labelLetterSpacing: string;
|
|
204
|
-
export const titleFontSize: string;
|
|
205
|
-
export const titleFontWeight: string;
|
|
206
|
-
export const titleLetterSpacing: string;
|
|
207
|
-
/** Space below form header */
|
|
208
|
-
export const formHeaderMarginBottom: string;
|
|
209
|
-
/** Form subtitle font size */
|
|
210
|
-
export const formSubtitleFontSize: string;
|
|
211
|
-
/** Gap between form fields */
|
|
212
|
-
export const formFieldsGap: string;
|
|
213
|
-
/** Space above form footer */
|
|
214
|
-
export const formFooterMarginTop: string;
|
|
215
|
-
/** Gap between label and input in field group */
|
|
216
|
-
export const fieldGroupGap: string;
|
|
217
|
-
/** Small modal max-width (notification, offline) */
|
|
218
|
-
export const modalMaxWidthSm: string;
|
|
219
|
-
/** Medium modal max-width */
|
|
220
|
-
export const modalMaxWidthMd: string;
|
|
221
|
-
/** Large modal max-width (iframe) */
|
|
222
|
-
export const modalMaxWidthLg: string;
|
|
223
|
-
/** Fluid modal: 85% viewport, locked at 280-320px */
|
|
224
|
-
export const modalMaxWidthFluid: string;
|
|
225
|
-
/** Modal minimum height */
|
|
226
|
-
export const modalMinHeight: string;
|
|
227
|
-
/** Default page container max width (400px) */
|
|
228
|
-
export const pageContainerMaxWidth: string;
|
|
229
|
-
/** Wide page container max width (420px) */
|
|
230
|
-
export const pageContainerMaxWidthWide: string;
|
|
231
|
-
/** Page container horizontal padding */
|
|
232
|
-
export const pageContainerPadding: string;
|
|
233
|
-
/** Page card internal padding */
|
|
234
|
-
export const pageCardPadding: string;
|
|
235
|
-
/** Page card border radius */
|
|
236
|
-
export const pageCardRadius: string;
|
|
237
|
-
export const radiusSm: string;
|
|
238
|
-
export const radiusMd: string;
|
|
239
|
-
export const radiusLg: string;
|
|
240
|
-
export const radiusFull: string;
|
|
241
|
-
export const radiusCard: string;
|
|
242
|
-
export const shadowCard: string;
|
|
243
|
-
export const shadowButtonHoverPrimary: string;
|
|
244
|
-
export const shadowButtonHoverSuccess: string;
|
|
245
|
-
export const shadowInputFocus: string;
|
|
246
|
-
export const shadowOverlay: string;
|
|
247
|
-
export const shadowModal: string;
|
|
248
|
-
export const shadowOtpCellFocus: string;
|
|
249
|
-
/** Focus ring spread width (3px) */
|
|
250
|
-
export const shadowFocusRingWidth: string;
|
|
251
|
-
export const breakpointSm: string;
|
|
252
|
-
export const breakpointMd: string;
|
|
253
|
-
export const breakpointLg: string;
|
|
254
|
-
export const breakpointXl: string;
|
|
255
|
-
export const zIndexDropdown: string;
|
|
256
|
-
export const zIndexSticky: string;
|
|
257
|
-
export const zIndexFixed: string;
|
|
258
|
-
export const zIndexModalBackdrop: string;
|
|
259
|
-
export const zIndexModal: string;
|
|
260
|
-
export const zIndexPopover: string;
|
|
261
|
-
export const zIndexTooltip: string;
|
|
262
|
-
/** Extra small icon size (12px) */
|
|
263
|
-
export const sizeIconXs: string;
|
|
264
|
-
/** Small icon size (16px) */
|
|
265
|
-
export const sizeIconSm: string;
|
|
266
|
-
/** Medium icon size (24px) */
|
|
267
|
-
export const sizeIconMd: string;
|
|
268
|
-
/** Large icon size (32px) */
|
|
269
|
-
export const sizeIconLg: string;
|
|
270
|
-
/** Extra large icon size (40px) */
|
|
271
|
-
export const sizeIconXl: string;
|
|
272
|
-
/** 2X large icon size (48px) */
|
|
273
|
-
export const sizeIcon2xl: string;
|
|
274
|
-
/** Action icon size (20px) - arrows, callout icons */
|
|
275
|
-
export const sizeIconAction: string;
|
|
276
|
-
/** Small spinner (16px) */
|
|
277
|
-
export const sizeSpinnerSm: string;
|
|
278
|
-
/** Medium spinner (32px) */
|
|
279
|
-
export const sizeSpinnerMd: string;
|
|
280
|
-
/** Large spinner (64px) */
|
|
281
|
-
export const sizeSpinnerLg: string;
|
|
282
|
-
/** Extra large spinner (80px) */
|
|
283
|
-
export const sizeSpinnerXl: string;
|
|
284
|
-
/** Spinner size inside buttons (18px) */
|
|
285
|
-
export const sizeSpinnerButton: string;
|
|
286
|
-
/** Small screen icon (64px) */
|
|
287
|
-
export const sizeScreenIconSm: string;
|
|
288
|
-
/** Medium screen icon (80px) */
|
|
289
|
-
export const sizeScreenIconMd: string;
|
|
290
|
-
/** Fluid screen icon: 48px→80px (320px→1440px viewport) */
|
|
291
|
-
export const sizeScreenIconFluid: string;
|
|
292
|
-
/** Page decoration blob: 192px→352px fluid */
|
|
293
|
-
export const sizeDecorationBlob: string;
|
|
294
|
-
/** Progress bar width (192px) */
|
|
295
|
-
export const sizeProgressBarWidth: string;
|
|
296
|
-
/** Thin border (1px) */
|
|
297
|
-
export const sizeBorderWidthThin: string;
|
|
298
|
-
/** Base border (1.5px) */
|
|
299
|
-
export const sizeBorderWidthBase: string;
|
|
300
|
-
/** Thick border (2px) */
|
|
301
|
-
export const sizeBorderWidthThick: string;
|
|
302
|
-
/** Heavy border (3px) */
|
|
303
|
-
export const sizeBorderWidthHeavy: string;
|
|
304
|
-
/** Bold border (4px) */
|
|
305
|
-
export const sizeBorderWidthBold: string;
|
|
306
|
-
/** Small chip padding */
|
|
307
|
-
export const sizeChipPaddingSm: string;
|
|
308
|
-
/** Medium chip padding */
|
|
309
|
-
export const sizeChipPaddingMd: string;
|
|
310
|
-
/** Close button size (32px) */
|
|
311
|
-
export const sizeCloseButton: string;
|
|
312
|
-
/** 1px - border, hairline */
|
|
313
|
-
export const spaceFixed2xs: string;
|
|
314
|
-
/** 2px - focus ring */
|
|
315
|
-
export const spaceFixedXs: string;
|
|
316
|
-
/** 4px - small gap */
|
|
317
|
-
export const spaceFixedSm: string;
|
|
318
|
-
/** 8px - standard gap */
|
|
319
|
-
export const spaceFixedMd: string;
|
|
320
|
-
export const spaceXs: string;
|
|
321
|
-
export const spaceSm: string;
|
|
322
|
-
export const spaceMd: string;
|
|
323
|
-
export const spaceLg: string;
|
|
324
|
-
export const spaceXl: string;
|
|
325
|
-
export const space2xl: string;
|
|
326
|
-
/** Fluid pair: xs→sm for steeper scaling (4px→10px) */
|
|
327
|
-
export const spaceXsSm: string;
|
|
328
|
-
/** Fluid pair: sm→md (8px→20px) */
|
|
329
|
-
export const spaceSmMd: string;
|
|
330
|
-
/** Fluid pair: md→lg (14px→32px) */
|
|
331
|
-
export const spaceMdLg: string;
|
|
332
|
-
/** Fluid pair: lg→xl (20px→44px) */
|
|
333
|
-
export const spaceLgXl: string;
|
|
334
|
-
export const fontBody: string;
|
|
335
|
-
/** Extra small text (11-13px fluid) */
|
|
336
|
-
export const fontSizeXs: string;
|
|
337
|
-
export const fontSizeSm: string;
|
|
338
|
-
export const fontSizeBase: string;
|
|
339
|
-
export const fontSizeLg: string;
|
|
340
|
-
export const fontSizeXl: string;
|
|
341
|
-
export const fontSize2xl: string;
|
|
342
|
-
export const lineHeightTight: string;
|
|
343
|
-
export const lineHeightNormal: string;
|
|
344
|
-
export const lineHeightRelaxed: string;
|
package/build/tokens.json
DELETED
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"OffsetSlideUpSm": "0.25rem",
|
|
3
|
-
"OffsetSlideUpMd": "0.625rem",
|
|
4
|
-
"DurationInstant": "150ms",
|
|
5
|
-
"DurationFast": "300ms",
|
|
6
|
-
"DurationSmooth": "400ms",
|
|
7
|
-
"DurationSlow": "600ms",
|
|
8
|
-
"DurationSlower": "800ms",
|
|
9
|
-
"EasingEase": "ease",
|
|
10
|
-
"EasingEaseInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
11
|
-
"EasingBounce": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
12
|
-
"InkEffectRippleDuration": "600ms",
|
|
13
|
-
"InkEffectRippleEasing": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
14
|
-
"InkEffectSpreadScale": "2.5",
|
|
15
|
-
"InkEffectFadeDuration": "300ms",
|
|
16
|
-
"TransitionFast": "150ms ease",
|
|
17
|
-
"TransitionSmooth": "300ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
18
|
-
"TransitionBounce": "400ms cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
19
|
-
"OpacityDisabled": "0.6",
|
|
20
|
-
"OpacityHover": "0.7",
|
|
21
|
-
"OpacityLoading": "0.6",
|
|
22
|
-
"OpacityHidden": "0",
|
|
23
|
-
"OpacityVisible": "1",
|
|
24
|
-
"BrandPrimary": "#7c5cff",
|
|
25
|
-
"BrandPrimaryHover": "#6a4ae8",
|
|
26
|
-
"BrandLogoText": "#1a1a1a",
|
|
27
|
-
"AccentPrimary": "#6b4fd9",
|
|
28
|
-
"AccentPrimaryHover": "#5a3fc8",
|
|
29
|
-
"AccentPrimaryPressed": "#4a32b0",
|
|
30
|
-
"AccentSuccess": "#357a46",
|
|
31
|
-
"AccentSuccessHover": "#2d6a3c",
|
|
32
|
-
"AccentSuccessPressed": "#255a32",
|
|
33
|
-
"AccentWarning": "#d97706",
|
|
34
|
-
"AccentWarningHover": "#b45309",
|
|
35
|
-
"AccentWarningPressed": "#92400e",
|
|
36
|
-
"AlphaPrimary04": "#7c5cff0a",
|
|
37
|
-
"AlphaPrimary08": "#7c5cff14",
|
|
38
|
-
"AlphaPrimary10": "#7c5cff1a",
|
|
39
|
-
"AlphaPrimary12": "#7c5cff1f",
|
|
40
|
-
"AlphaPrimary15": "#7c5cff26",
|
|
41
|
-
"AlphaPrimary20": "#7c5cff33",
|
|
42
|
-
"AlphaPrimary30": "#7c5cff4d",
|
|
43
|
-
"AlphaPrimary40": "#7c5cff66",
|
|
44
|
-
"AlphaPrimary50": "#7c5cff80",
|
|
45
|
-
"AlphaSuccess10": "#3d8a501a",
|
|
46
|
-
"AlphaSuccess15": "#3d8a5026",
|
|
47
|
-
"AlphaSuccess20": "#3d8a5033",
|
|
48
|
-
"AlphaSuccess30": "#3d8a504d",
|
|
49
|
-
"AlphaWarning08": "#b4530914",
|
|
50
|
-
"AlphaWarning15": "#b4530926",
|
|
51
|
-
"AlphaWarning20": "#b4530933",
|
|
52
|
-
"AlphaInfo08": "#0369a114",
|
|
53
|
-
"AlphaInfo15": "#0369a126",
|
|
54
|
-
"AlphaInfo20": "#0369a133",
|
|
55
|
-
"AlphaInk04": "#1a1a1a0a",
|
|
56
|
-
"AlphaInk06": "#1a1a1a0f",
|
|
57
|
-
"AlphaInk10": "#1a1a1a1a",
|
|
58
|
-
"AlphaWhite15": "#ffffff26",
|
|
59
|
-
"AlphaWhite30": "#ffffff4d",
|
|
60
|
-
"AlphaWhite90": "#ffffffe6",
|
|
61
|
-
"AlphaBlack15": "#00000026",
|
|
62
|
-
"AlphaBlack30": "#0000004d",
|
|
63
|
-
"AlphaBlack90": "#000000e6",
|
|
64
|
-
"AlphaOnAccent": "#fffffff2",
|
|
65
|
-
"AlphaOnAccentMuted": "#ffffff99",
|
|
66
|
-
"ErrorBase": "#c0392b",
|
|
67
|
-
"ErrorBg": "#e74c3c14",
|
|
68
|
-
"ErrorBorder": "#e74c3c33",
|
|
69
|
-
"InkBlack": "#1a1a1a",
|
|
70
|
-
"InkDark": "#2d2d2d",
|
|
71
|
-
"InkMedium": "#5c5c5c",
|
|
72
|
-
"InkLight": "#8a8a8a",
|
|
73
|
-
"InkFaint": "#c4c4c4",
|
|
74
|
-
"OverlayDim": "#00000080",
|
|
75
|
-
"OverlayDark": "#000000b3",
|
|
76
|
-
"OverlayShadowLight": "#0000001a",
|
|
77
|
-
"OverlayShadowSubtle": "#00000026",
|
|
78
|
-
"OverlayShadowMedium": "#00000033",
|
|
79
|
-
"OverlayShadowStrong": "#0000004d",
|
|
80
|
-
"OverlayShadowHeavy": "#00000066",
|
|
81
|
-
"OverlayGlowWhite": "#ffffff26",
|
|
82
|
-
"OverlaySpinnerTrack": "#ffffff4d",
|
|
83
|
-
"PaperWhite": "#faf9fc",
|
|
84
|
-
"PaperCream": "#f5f4f8",
|
|
85
|
-
"PaperWarm": "#ebe9f0",
|
|
86
|
-
"SemanticWarning": "#b45309",
|
|
87
|
-
"SemanticWarningHover": "#92400e",
|
|
88
|
-
"SemanticWarningBg": "#fff8e1",
|
|
89
|
-
"SemanticWarningLight": "#fef3c7",
|
|
90
|
-
"SemanticSuccessBg": "#d1fae5",
|
|
91
|
-
"SemanticInfo": "#0369a1",
|
|
92
|
-
"SemanticInfoHover": "#075985",
|
|
93
|
-
"SemanticInfoBg": "#e0f2fe",
|
|
94
|
-
"ButtonHeight": "3.25rem",
|
|
95
|
-
"ButtonHeightSecondary": "3rem",
|
|
96
|
-
"ButtonRadius": "0.625rem",
|
|
97
|
-
"ButtonFontSize": "0.9375rem",
|
|
98
|
-
"ButtonFontWeight": "500",
|
|
99
|
-
"ButtonLetterSpacing": "0.02em",
|
|
100
|
-
"ButtonDark": "#1a1a1a",
|
|
101
|
-
"ButtonDarkHover": "#2a2a2a",
|
|
102
|
-
"ButtonLight": "#f5f4f8",
|
|
103
|
-
"ButtonLightHover": "#ebe9f0",
|
|
104
|
-
"ButtonTextHeight": "2.5rem",
|
|
105
|
-
"ButtonTextFontSize": "0.875rem",
|
|
106
|
-
"ButtonTextPaddingSm": "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem) clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
107
|
-
"ButtonTextPaddingMd": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem) clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
|
|
108
|
-
"ButtonContentGap": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
109
|
-
"ButtonSpinnerSize": "1rem",
|
|
110
|
-
"ButtonSpinnerBorderWidth": "2px",
|
|
111
|
-
"CardPadding": "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
|
|
112
|
-
"CardRadius": "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
|
|
113
|
-
"ContainerMaxWidth": "25rem",
|
|
114
|
-
"ContainerMaxWidthWide": "26.25rem",
|
|
115
|
-
"FeedbackErrorPadding": "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
|
|
116
|
-
"FeedbackErrorRadius": "0.625rem",
|
|
117
|
-
"FeedbackErrorGap": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
118
|
-
"FeedbackErrorIconSize": "1rem",
|
|
119
|
-
"FeedbackNoticePadding": "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
|
|
120
|
-
"FeedbackNoticeRadius": "0.625rem",
|
|
121
|
-
"FeedbackNoticeGap": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
122
|
-
"FeedbackNoticeIconSize": "1.25rem",
|
|
123
|
-
"InputPaddingY": "0.875rem",
|
|
124
|
-
"InputPaddingX": "1rem",
|
|
125
|
-
"InputRadius": "0.625rem",
|
|
126
|
-
"InputFontSize": "1rem",
|
|
127
|
-
"LabelFontSize": "0.75rem",
|
|
128
|
-
"LabelFontWeight": "500",
|
|
129
|
-
"LabelLetterSpacing": "0.08em",
|
|
130
|
-
"TitleFontSize": "clamp(1.375rem, 1.27rem + 0.54vw, 1.75rem)",
|
|
131
|
-
"TitleFontWeight": "600",
|
|
132
|
-
"TitleLetterSpacing": "-0.02em",
|
|
133
|
-
"FormHeaderMarginBottom": "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
|
|
134
|
-
"FormSubtitleFontSize": "0.9375rem",
|
|
135
|
-
"FormFieldsGap": "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
|
|
136
|
-
"FormFooterMarginTop": "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
|
|
137
|
-
"FieldGroupGap": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
138
|
-
"ModalMaxWidthSm": "320px",
|
|
139
|
-
"ModalMaxWidthMd": "400px",
|
|
140
|
-
"ModalMaxWidthLg": "600px",
|
|
141
|
-
"ModalMaxWidthFluid": "clamp(280px, 85vw, 320px)",
|
|
142
|
-
"ModalMinHeight": "400px",
|
|
143
|
-
"PageContainerMaxWidth": "25rem",
|
|
144
|
-
"PageContainerMaxWidthWide": "26.25rem",
|
|
145
|
-
"PageContainerPadding": "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
|
|
146
|
-
"PageCardPadding": "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
|
|
147
|
-
"PageCardRadius": "0.75rem",
|
|
148
|
-
"RadiusSm": "0.5rem",
|
|
149
|
-
"RadiusMd": "0.625rem",
|
|
150
|
-
"RadiusLg": "0.75rem",
|
|
151
|
-
"RadiusFull": "9999px",
|
|
152
|
-
"RadiusCard": "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
|
|
153
|
-
"ShadowCard": "0 0.0625rem 0.1875rem rgba(26, 26, 26, 0.04), 0 0.375rem 1rem rgba(26, 26, 26, 0.06), 0 1.5rem 3rem rgba(26, 26, 26, 0.06)",
|
|
154
|
-
"ShadowButtonHoverPrimary": "0 0.25rem 0.75rem rgba(124, 92, 255, 0.3), 0 0.125rem 0.25rem rgba(124, 92, 255, 0.2)",
|
|
155
|
-
"ShadowButtonHoverSuccess": "0 0.25rem 0.75rem rgba(61, 138, 80, 0.3), 0 0.125rem 0.25rem rgba(61, 138, 80, 0.2)",
|
|
156
|
-
"ShadowInputFocus": "0 0 0 0.1875rem rgba(124, 92, 255, 0.12), inset 0 0.0625rem 0.125rem rgba(26, 26, 26, 0.04)",
|
|
157
|
-
"ShadowOverlay": "0 0.25rem 0.5rem rgba(0, 0, 0, 0.1)",
|
|
158
|
-
"ShadowModal": "0 1.5rem 3rem rgba(0, 0, 0, 0.15)",
|
|
159
|
-
"ShadowOtpCellFocus": "0 0 0 0.25rem rgba(124, 92, 255, 0.1)",
|
|
160
|
-
"ShadowFocusRingWidth": "0.1875rem",
|
|
161
|
-
"BreakpointSm": "640px",
|
|
162
|
-
"BreakpointMd": "768px",
|
|
163
|
-
"BreakpointLg": "1024px",
|
|
164
|
-
"BreakpointXl": "1280px",
|
|
165
|
-
"ZIndexDropdown": "1000",
|
|
166
|
-
"ZIndexSticky": "1020",
|
|
167
|
-
"ZIndexFixed": "1030",
|
|
168
|
-
"ZIndexModalBackdrop": "1040",
|
|
169
|
-
"ZIndexModal": "1050",
|
|
170
|
-
"ZIndexPopover": "1060",
|
|
171
|
-
"ZIndexTooltip": "1070",
|
|
172
|
-
"SizeIconXs": "0.75rem",
|
|
173
|
-
"SizeIconSm": "1rem",
|
|
174
|
-
"SizeIconMd": "1.5rem",
|
|
175
|
-
"SizeIconLg": "2rem",
|
|
176
|
-
"SizeIconXl": "2.5rem",
|
|
177
|
-
"SizeIcon2xl": "3rem",
|
|
178
|
-
"SizeIconAction": "1.25rem",
|
|
179
|
-
"SizeSpinnerSm": "1rem",
|
|
180
|
-
"SizeSpinnerMd": "2rem",
|
|
181
|
-
"SizeSpinnerLg": "4rem",
|
|
182
|
-
"SizeSpinnerXl": "5rem",
|
|
183
|
-
"SizeSpinnerButton": "1.125rem",
|
|
184
|
-
"SizeScreenIconSm": "4rem",
|
|
185
|
-
"SizeScreenIconMd": "5rem",
|
|
186
|
-
"SizeScreenIconFluid": "clamp(3rem, 2.43rem + 2.86vw, 5rem)",
|
|
187
|
-
"SizeDecorationBlob": "clamp(12rem, 9.43rem + 12.86vw, 22rem)",
|
|
188
|
-
"SizeProgressBarWidth": "12rem",
|
|
189
|
-
"SizeBorderWidthThin": "0.0625rem",
|
|
190
|
-
"SizeBorderWidthBase": "0.09375rem",
|
|
191
|
-
"SizeBorderWidthThick": "0.125rem",
|
|
192
|
-
"SizeBorderWidthHeavy": "0.1875rem",
|
|
193
|
-
"SizeBorderWidthBold": "0.25rem",
|
|
194
|
-
"SizeChipPaddingSm": "0.125rem 0.5rem",
|
|
195
|
-
"SizeChipPaddingMd": "0.25rem 0.75rem",
|
|
196
|
-
"SizeCloseButton": "2rem",
|
|
197
|
-
"SpaceFixed2xs": "0.0625rem",
|
|
198
|
-
"SpaceFixedXs": "0.125rem",
|
|
199
|
-
"SpaceFixedSm": "0.25rem",
|
|
200
|
-
"SpaceFixedMd": "0.5rem",
|
|
201
|
-
"SpaceXs": "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem)",
|
|
202
|
-
"SpaceSm": "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
|
|
203
|
-
"SpaceMd": "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
|
|
204
|
-
"SpaceLg": "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
|
|
205
|
-
"SpaceXl": "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
|
|
206
|
-
"Space2xl": "clamp(2rem, 1.35rem + 3.26vw, 4.5rem)",
|
|
207
|
-
"SpaceXsSm": "clamp(0.25rem, 0.14rem + 0.54vw, 0.625rem)",
|
|
208
|
-
"SpaceSmMd": "clamp(0.5rem, 0.28rem + 1.09vw, 1.25rem)",
|
|
209
|
-
"SpaceMdLg": "clamp(0.875rem, 0.42rem + 2.28vw, 2rem)",
|
|
210
|
-
"SpaceLgXl": "clamp(1.25rem, 0.47rem + 3.91vw, 2.75rem)",
|
|
211
|
-
"FontBody": "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
|
|
212
|
-
"FontSizeXs": "clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem)",
|
|
213
|
-
"FontSizeSm": "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
|
|
214
|
-
"FontSizeBase": "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
|
|
215
|
-
"FontSizeLg": "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
|
|
216
|
-
"FontSizeXl": "clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem)",
|
|
217
|
-
"FontSize2xl": "clamp(1.5rem, 1.35rem + 0.76vw, 1.875rem)",
|
|
218
|
-
"LineHeightTight": "1.25",
|
|
219
|
-
"LineHeightNormal": "1.5",
|
|
220
|
-
"LineHeightRelaxed": "1.75"
|
|
221
|
-
}
|