@haiilo/catalyst-tokens 0.15.2 → 1.0.1
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/dist/css/_variables.css +2 -28
- package/dist/js/_variables.d.ts +2 -28
- package/dist/js/_variables.js +2 -28
- package/dist/scss/_variables.scss +7 -73
- package/package.json +1 -1
package/dist/css/_variables.css
CHANGED
|
@@ -131,34 +131,22 @@
|
|
|
131
131
|
--cat-color-ui-background-canvas: 248, 248, 251;
|
|
132
132
|
--cat-color-ui-background-body: 255, 255, 255;
|
|
133
133
|
--cat-color-ui-background-muted: 235, 236, 240;
|
|
134
|
-
--cat-color-ui-background-interaction: 32, 127, 138;
|
|
135
134
|
--cat-color-ui-background-input: 255, 255, 255;
|
|
136
135
|
--cat-color-ui-background-input-disabled: 248, 248, 251;
|
|
137
136
|
--cat-color-ui-background-skeleton: 235, 236, 240;
|
|
138
137
|
--cat-color-ui-background-skeleton-highlight: 215, 219, 224;
|
|
139
138
|
--cat-color-ui-background-tooltip: 0, 0, 0;
|
|
140
|
-
--cat-color-ui-background-
|
|
141
|
-
--cat-color-ui-background-modal-body: 255, 255, 255;
|
|
142
|
-
--cat-color-ui-background-modal-wrapper: 0, 0, 0;
|
|
139
|
+
--cat-color-ui-background-backdrop: 0, 0, 0;
|
|
143
140
|
--cat-color-ui-border-light: 248, 248, 251;
|
|
144
141
|
--cat-color-ui-border-default: 235, 236, 240;
|
|
145
142
|
--cat-color-ui-border-dark: 215, 219, 224;
|
|
146
143
|
--cat-color-ui-border-focus: 0, 113, 255;
|
|
147
|
-
--cat-color-ui-border-input: 215, 219, 224;
|
|
148
|
-
--cat-color-ui-border-tabs: 215, 219, 224;
|
|
149
|
-
--cat-color-ui-border-active-tab: 32, 127, 138;
|
|
150
144
|
--cat-color-ui-font-head: 0, 0, 0;
|
|
151
145
|
--cat-color-ui-font-body: 0, 0, 0;
|
|
152
146
|
--cat-color-ui-font-mono: 0, 0, 0;
|
|
153
147
|
--cat-color-ui-font-muted: 105, 118, 135;
|
|
154
148
|
--cat-color-ui-font-quote: 0, 0, 0;
|
|
155
149
|
--cat-color-ui-font-tooltip: 255, 255, 255;
|
|
156
|
-
--cat-color-ui-font-avatar: 255, 255, 255;
|
|
157
|
-
--cat-color-ui-font-alert-primary: 32, 127, 138;
|
|
158
|
-
--cat-color-ui-font-alert-secondary: 105, 118, 135;
|
|
159
|
-
--cat-color-ui-font-alert-success: 0, 132, 88;
|
|
160
|
-
--cat-color-ui-font-alert-warning: 235, 182, 99;
|
|
161
|
-
--cat-color-ui-font-alert-danger: 217, 52, 13;
|
|
162
150
|
--cat-font-family-head: Lato;
|
|
163
151
|
--cat-font-family-body: Lato;
|
|
164
152
|
--cat-font-family-mono: Azeret Mono;
|
|
@@ -166,21 +154,7 @@
|
|
|
166
154
|
--cat-font-weight-body: 400;
|
|
167
155
|
--cat-font-weight-mono: 400;
|
|
168
156
|
--cat-opacity-disabled: 0.65;
|
|
169
|
-
--cat-
|
|
170
|
-
--cat-size-badge-padding-horizontal-l: 1rem;
|
|
171
|
-
--cat-size-badge-padding-horizontal-m: 0.75rem;
|
|
172
|
-
--cat-size-badge-padding-horizontal-s: 0.5rem;
|
|
173
|
-
--cat-size-badge-padding-horizontal-xs: 0.25rem;
|
|
174
|
-
--cat-size-badge-height-xl: 3rem;
|
|
175
|
-
--cat-size-badge-height-l: 2.5rem;
|
|
176
|
-
--cat-size-badge-height-m: 2rem;
|
|
177
|
-
--cat-size-badge-height-s: 1.5rem;
|
|
178
|
-
--cat-size-badge-height-xs: 1rem;
|
|
179
|
-
--cat-size-badge-font-xl: 18px;
|
|
180
|
-
--cat-size-badge-font-l: 15px;
|
|
181
|
-
--cat-size-badge-font-m: 13px;
|
|
182
|
-
--cat-size-badge-font-s: 12px;
|
|
183
|
-
--cat-size-badge-font-xs: 12px;
|
|
157
|
+
--cat-opacity-backdrop: 0.6;
|
|
184
158
|
--cat-size-border-radius-l: 0.5rem;
|
|
185
159
|
--cat-size-border-radius-m: 0.25rem;
|
|
186
160
|
--cat-size-border-radius-s: 0.125rem;
|
package/dist/js/_variables.d.ts
CHANGED
|
@@ -130,34 +130,22 @@ export const ColorThemeDangerTextActive : string;
|
|
|
130
130
|
export const ColorUiBackgroundCanvas : string;
|
|
131
131
|
export const ColorUiBackgroundBody : string;
|
|
132
132
|
export const ColorUiBackgroundMuted : string;
|
|
133
|
-
export const ColorUiBackgroundInteraction : string;
|
|
134
133
|
export const ColorUiBackgroundInput : string;
|
|
135
134
|
export const ColorUiBackgroundInputDisabled : string;
|
|
136
135
|
export const ColorUiBackgroundSkeleton : string;
|
|
137
136
|
export const ColorUiBackgroundSkeletonHighlight : string;
|
|
138
137
|
export const ColorUiBackgroundTooltip : string;
|
|
139
|
-
export const
|
|
140
|
-
export const ColorUiBackgroundModalBody : string;
|
|
141
|
-
export const ColorUiBackgroundModalWrapper : string;
|
|
138
|
+
export const ColorUiBackgroundBackdrop : string;
|
|
142
139
|
export const ColorUiBorderLight : string;
|
|
143
140
|
export const ColorUiBorderDefault : string;
|
|
144
141
|
export const ColorUiBorderDark : string;
|
|
145
142
|
export const ColorUiBorderFocus : string;
|
|
146
|
-
export const ColorUiBorderInput : string;
|
|
147
|
-
export const ColorUiBorderTabs : string;
|
|
148
|
-
export const ColorUiBorderActiveTab : string;
|
|
149
143
|
export const ColorUiFontHead : string;
|
|
150
144
|
export const ColorUiFontBody : string;
|
|
151
145
|
export const ColorUiFontMono : string;
|
|
152
146
|
export const ColorUiFontMuted : string;
|
|
153
147
|
export const ColorUiFontQuote : string;
|
|
154
148
|
export const ColorUiFontTooltip : string;
|
|
155
|
-
export const ColorUiFontAvatar : string;
|
|
156
|
-
export const ColorUiFontAlertPrimary : string;
|
|
157
|
-
export const ColorUiFontAlertSecondary : string;
|
|
158
|
-
export const ColorUiFontAlertSuccess : string;
|
|
159
|
-
export const ColorUiFontAlertWarning : string;
|
|
160
|
-
export const ColorUiFontAlertDanger : string;
|
|
161
149
|
export const FontFamilyHead : string;
|
|
162
150
|
export const FontFamilyBody : string;
|
|
163
151
|
export const FontFamilyMono : string;
|
|
@@ -165,21 +153,7 @@ export const FontWeightHead : number;
|
|
|
165
153
|
export const FontWeightBody : number;
|
|
166
154
|
export const FontWeightMono : number;
|
|
167
155
|
export const OpacityDisabled : number;
|
|
168
|
-
export const
|
|
169
|
-
export const SizeBadgePaddingHorizontalL : string;
|
|
170
|
-
export const SizeBadgePaddingHorizontalM : string;
|
|
171
|
-
export const SizeBadgePaddingHorizontalS : string;
|
|
172
|
-
export const SizeBadgePaddingHorizontalXs : string;
|
|
173
|
-
export const SizeBadgeHeightXl : string;
|
|
174
|
-
export const SizeBadgeHeightL : string;
|
|
175
|
-
export const SizeBadgeHeightM : string;
|
|
176
|
-
export const SizeBadgeHeightS : string;
|
|
177
|
-
export const SizeBadgeHeightXs : string;
|
|
178
|
-
export const SizeBadgeFontXl : string;
|
|
179
|
-
export const SizeBadgeFontL : string;
|
|
180
|
-
export const SizeBadgeFontM : string;
|
|
181
|
-
export const SizeBadgeFontS : string;
|
|
182
|
-
export const SizeBadgeFontXs : string;
|
|
156
|
+
export const OpacityBackdrop : number;
|
|
183
157
|
export const SizeBorderRadiusL : string;
|
|
184
158
|
export const SizeBorderRadiusM : string;
|
|
185
159
|
export const SizeBorderRadiusS : string;
|
package/dist/js/_variables.js
CHANGED
|
@@ -130,34 +130,22 @@ export const ColorThemeDangerTextActive = "#ae2a0a";
|
|
|
130
130
|
export const ColorUiBackgroundCanvas = "#f8f8fb";
|
|
131
131
|
export const ColorUiBackgroundBody = "#ffffff";
|
|
132
132
|
export const ColorUiBackgroundMuted = "#ebecf0";
|
|
133
|
-
export const ColorUiBackgroundInteraction = "#207f8a";
|
|
134
133
|
export const ColorUiBackgroundInput = "#ffffff";
|
|
135
134
|
export const ColorUiBackgroundInputDisabled = "#f8f8fb";
|
|
136
135
|
export const ColorUiBackgroundSkeleton = "#ebecf0";
|
|
137
136
|
export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
|
|
138
137
|
export const ColorUiBackgroundTooltip = "#000000";
|
|
139
|
-
export const
|
|
140
|
-
export const ColorUiBackgroundModalBody = "#ffffff";
|
|
141
|
-
export const ColorUiBackgroundModalWrapper = "#000000";
|
|
138
|
+
export const ColorUiBackgroundBackdrop = "#000000";
|
|
142
139
|
export const ColorUiBorderLight = "#f8f8fb";
|
|
143
140
|
export const ColorUiBorderDefault = "#ebecf0";
|
|
144
141
|
export const ColorUiBorderDark = "#d7dbe0";
|
|
145
142
|
export const ColorUiBorderFocus = "#0071ff";
|
|
146
|
-
export const ColorUiBorderInput = "#d7dbe0";
|
|
147
|
-
export const ColorUiBorderTabs = "#d7dbe0";
|
|
148
|
-
export const ColorUiBorderActiveTab = "#207f8a";
|
|
149
143
|
export const ColorUiFontHead = "#000000";
|
|
150
144
|
export const ColorUiFontBody = "#000000";
|
|
151
145
|
export const ColorUiFontMono = "#000000";
|
|
152
146
|
export const ColorUiFontMuted = "#697687";
|
|
153
147
|
export const ColorUiFontQuote = "#000000";
|
|
154
148
|
export const ColorUiFontTooltip = "#ffffff";
|
|
155
|
-
export const ColorUiFontAvatar = "#ffffff";
|
|
156
|
-
export const ColorUiFontAlertPrimary = "#207f8a";
|
|
157
|
-
export const ColorUiFontAlertSecondary = "#697687";
|
|
158
|
-
export const ColorUiFontAlertSuccess = "#008458";
|
|
159
|
-
export const ColorUiFontAlertWarning = "#ebb663";
|
|
160
|
-
export const ColorUiFontAlertDanger = "#d9340d";
|
|
161
149
|
export const FontFamilyHead = "Lato";
|
|
162
150
|
export const FontFamilyBody = "Lato";
|
|
163
151
|
export const FontFamilyMono = "Azeret Mono";
|
|
@@ -165,21 +153,7 @@ export const FontWeightHead = 500;
|
|
|
165
153
|
export const FontWeightBody = 400;
|
|
166
154
|
export const FontWeightMono = 400;
|
|
167
155
|
export const OpacityDisabled = 0.65;
|
|
168
|
-
export const
|
|
169
|
-
export const SizeBadgePaddingHorizontalL = "1rem";
|
|
170
|
-
export const SizeBadgePaddingHorizontalM = "0.75rem";
|
|
171
|
-
export const SizeBadgePaddingHorizontalS = "0.5rem";
|
|
172
|
-
export const SizeBadgePaddingHorizontalXs = "0.25rem";
|
|
173
|
-
export const SizeBadgeHeightXl = "3rem";
|
|
174
|
-
export const SizeBadgeHeightL = "2.5rem";
|
|
175
|
-
export const SizeBadgeHeightM = "2rem";
|
|
176
|
-
export const SizeBadgeHeightS = "1.5rem";
|
|
177
|
-
export const SizeBadgeHeightXs = "1rem";
|
|
178
|
-
export const SizeBadgeFontXl = "18rem";
|
|
179
|
-
export const SizeBadgeFontL = "15rem";
|
|
180
|
-
export const SizeBadgeFontM = "13rem";
|
|
181
|
-
export const SizeBadgeFontS = "12rem";
|
|
182
|
-
export const SizeBadgeFontXs = "12rem";
|
|
156
|
+
export const OpacityBackdrop = 0.6;
|
|
183
157
|
export const SizeBorderRadiusL = "0.5rem";
|
|
184
158
|
export const SizeBorderRadiusM = "0.25rem";
|
|
185
159
|
export const SizeBorderRadiusS = "0.125rem";
|
|
@@ -60,21 +60,7 @@ $cat-size-font-head-1: 1.75rem !default;
|
|
|
60
60
|
$cat-size-border-radius-s: 0.125rem !default;
|
|
61
61
|
$cat-size-border-radius-m: 0.25rem !default;
|
|
62
62
|
$cat-size-border-radius-l: 0.5rem !default;
|
|
63
|
-
$cat-
|
|
64
|
-
$cat-size-badge-font-s: 12px !default;
|
|
65
|
-
$cat-size-badge-font-m: 13px !default;
|
|
66
|
-
$cat-size-badge-font-l: 15px !default;
|
|
67
|
-
$cat-size-badge-font-xl: 18px !default;
|
|
68
|
-
$cat-size-badge-height-xs: 1rem !default;
|
|
69
|
-
$cat-size-badge-height-s: 1.5rem !default;
|
|
70
|
-
$cat-size-badge-height-m: 2rem !default;
|
|
71
|
-
$cat-size-badge-height-l: 2.5rem !default;
|
|
72
|
-
$cat-size-badge-height-xl: 3rem !default;
|
|
73
|
-
$cat-size-badge-padding-horizontal-xs: 0.25rem !default;
|
|
74
|
-
$cat-size-badge-padding-horizontal-s: 0.5rem !default;
|
|
75
|
-
$cat-size-badge-padding-horizontal-m: 0.75rem !default;
|
|
76
|
-
$cat-size-badge-padding-horizontal-l: 1rem !default;
|
|
77
|
-
$cat-size-badge-padding-horizontal-xl: 1rem !default;
|
|
63
|
+
$cat-opacity-backdrop: 0.6 !default;
|
|
78
64
|
$cat-opacity-disabled: 0.65 !default;
|
|
79
65
|
$cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
|
|
80
66
|
$cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
|
|
@@ -163,32 +149,20 @@ $cat-asset-font-dm-sans-name: "DM Sans" !default;
|
|
|
163
149
|
$cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
|
|
164
150
|
$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
|
|
165
151
|
$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !default;
|
|
166
|
-
$cat-color-ui-font-alert-danger: $cat-color-base-red-400 !default;
|
|
167
|
-
$cat-color-ui-font-alert-warning: $cat-color-base-orange-400 !default;
|
|
168
|
-
$cat-color-ui-font-alert-success: $cat-color-base-green-400 !default;
|
|
169
|
-
$cat-color-ui-font-alert-secondary: $cat-color-base-neutral-400 !default;
|
|
170
|
-
$cat-color-ui-font-alert-primary: $cat-color-base-brand-400 !default;
|
|
171
|
-
$cat-color-ui-font-avatar: $cat-color-base-neutral-0 !default;
|
|
172
152
|
$cat-color-ui-font-tooltip: $cat-color-base-neutral-0 !default;
|
|
173
153
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
174
154
|
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
|
|
175
155
|
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
|
|
176
156
|
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-neutral-900) !default;
|
|
177
|
-
$cat-color-ui-border-active-tab: $cat-color-base-brand-400 !default;
|
|
178
|
-
$cat-color-ui-border-tabs: $cat-color-base-neutral-300 !default;
|
|
179
|
-
$cat-color-ui-border-input: $cat-color-base-neutral-300 !default;
|
|
180
157
|
$cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
|
|
181
158
|
$cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
|
|
182
159
|
$cat-color-ui-border-light: $cat-color-base-neutral-100 !default;
|
|
183
|
-
$cat-color-ui-background-
|
|
184
|
-
$cat-color-ui-background-modal-body: $cat-color-base-neutral-0 !default;
|
|
185
|
-
$cat-color-ui-background-avatar: $cat-color-base-neutral-400 !default;
|
|
160
|
+
$cat-color-ui-background-backdrop: $cat-color-base-neutral-900 !default;
|
|
186
161
|
$cat-color-ui-background-tooltip: $cat-color-base-neutral-900 !default;
|
|
187
162
|
$cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
|
|
188
163
|
$cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
189
164
|
$cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
|
|
190
165
|
$cat-color-ui-background-input: $cat-color-base-neutral-0 !default;
|
|
191
|
-
$cat-color-ui-background-interaction: $cat-color-base-brand-400 !default;
|
|
192
166
|
$cat-color-ui-background-muted: $cat-color-base-neutral-200 !default;
|
|
193
167
|
$cat-color-ui-background-body: $cat-color-base-neutral-0 !default;
|
|
194
168
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
@@ -405,26 +379,18 @@ $tokens: (
|
|
|
405
379
|
'canvas': $cat-color-ui-background-canvas,
|
|
406
380
|
'body': $cat-color-ui-background-body,
|
|
407
381
|
'muted': $cat-color-ui-background-muted,
|
|
408
|
-
'interaction': $cat-color-ui-background-interaction,
|
|
409
382
|
'input': $cat-color-ui-background-input,
|
|
410
383
|
'inputDisabled': $cat-color-ui-background-input-disabled,
|
|
411
384
|
'skeleton': $cat-color-ui-background-skeleton,
|
|
412
385
|
'skeletonHighlight': $cat-color-ui-background-skeleton-highlight,
|
|
413
386
|
'tooltip': $cat-color-ui-background-tooltip,
|
|
414
|
-
'
|
|
415
|
-
'modal': (
|
|
416
|
-
'body': $cat-color-ui-background-modal-body,
|
|
417
|
-
'wrapper': $cat-color-ui-background-modal-wrapper
|
|
418
|
-
)
|
|
387
|
+
'backdrop': $cat-color-ui-background-backdrop
|
|
419
388
|
),
|
|
420
389
|
'border': (
|
|
421
390
|
'light': $cat-color-ui-border-light,
|
|
422
391
|
'default': $cat-color-ui-border-default,
|
|
423
392
|
'dark': $cat-color-ui-border-dark,
|
|
424
|
-
'focus': $cat-color-ui-border-focus
|
|
425
|
-
'input': $cat-color-ui-border-input,
|
|
426
|
-
'tabs': $cat-color-ui-border-tabs,
|
|
427
|
-
'activeTab': $cat-color-ui-border-active-tab
|
|
393
|
+
'focus': $cat-color-ui-border-focus
|
|
428
394
|
),
|
|
429
395
|
'font': (
|
|
430
396
|
'head': $cat-color-ui-font-head,
|
|
@@ -432,15 +398,7 @@ $tokens: (
|
|
|
432
398
|
'mono': $cat-color-ui-font-mono,
|
|
433
399
|
'muted': $cat-color-ui-font-muted,
|
|
434
400
|
'quote': $cat-color-ui-font-quote,
|
|
435
|
-
'tooltip': $cat-color-ui-font-tooltip
|
|
436
|
-
'avatar': $cat-color-ui-font-avatar,
|
|
437
|
-
'alert': (
|
|
438
|
-
'primary': $cat-color-ui-font-alert-primary,
|
|
439
|
-
'secondary': $cat-color-ui-font-alert-secondary,
|
|
440
|
-
'success': $cat-color-ui-font-alert-success,
|
|
441
|
-
'warning': $cat-color-ui-font-alert-warning,
|
|
442
|
-
'danger': $cat-color-ui-font-alert-danger
|
|
443
|
-
)
|
|
401
|
+
'tooltip': $cat-color-ui-font-tooltip
|
|
444
402
|
)
|
|
445
403
|
)
|
|
446
404
|
),
|
|
@@ -457,34 +415,10 @@ $tokens: (
|
|
|
457
415
|
)
|
|
458
416
|
),
|
|
459
417
|
'opacity': (
|
|
460
|
-
'disabled': $cat-opacity-disabled
|
|
418
|
+
'disabled': $cat-opacity-disabled,
|
|
419
|
+
'backdrop': $cat-opacity-backdrop
|
|
461
420
|
),
|
|
462
421
|
'size': (
|
|
463
|
-
'badge': (
|
|
464
|
-
'padding': (
|
|
465
|
-
'horizontal': (
|
|
466
|
-
'xl': $cat-size-badge-padding-horizontal-xl,
|
|
467
|
-
'l': $cat-size-badge-padding-horizontal-l,
|
|
468
|
-
'm': $cat-size-badge-padding-horizontal-m,
|
|
469
|
-
's': $cat-size-badge-padding-horizontal-s,
|
|
470
|
-
'xs': $cat-size-badge-padding-horizontal-xs
|
|
471
|
-
)
|
|
472
|
-
),
|
|
473
|
-
'height': (
|
|
474
|
-
'xl': $cat-size-badge-height-xl,
|
|
475
|
-
'l': $cat-size-badge-height-l,
|
|
476
|
-
'm': $cat-size-badge-height-m,
|
|
477
|
-
's': $cat-size-badge-height-s,
|
|
478
|
-
'xs': $cat-size-badge-height-xs
|
|
479
|
-
),
|
|
480
|
-
'font': (
|
|
481
|
-
'xl': $cat-size-badge-font-xl,
|
|
482
|
-
'l': $cat-size-badge-font-l,
|
|
483
|
-
'm': $cat-size-badge-font-m,
|
|
484
|
-
's': $cat-size-badge-font-s,
|
|
485
|
-
'xs': $cat-size-badge-font-xs
|
|
486
|
-
)
|
|
487
|
-
),
|
|
488
422
|
'border': (
|
|
489
423
|
'radius': (
|
|
490
424
|
'l': $cat-size-border-radius-l,
|