@haiilo/catalyst-tokens 0.3.2 → 0.5.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 +11 -8
- package/dist/js/_variables.d.ts +6 -3
- package/dist/js/_variables.js +11 -8
- package/dist/scss/_variables.scss +20 -16
- package/package.json +2 -2
package/dist/css/_variables.css
CHANGED
|
@@ -131,18 +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-interaction: 32, 127, 138;
|
|
134
|
-
--cat-color-ui-background-
|
|
134
|
+
--cat-color-ui-background-input: 255, 255, 255;
|
|
135
|
+
--cat-color-ui-background-input-disabled: 248, 248, 251;
|
|
135
136
|
--cat-color-ui-background-skeleton: 235, 236, 240;
|
|
136
137
|
--cat-color-ui-background-skeleton-highlight: 215, 219, 224;
|
|
138
|
+
--cat-color-ui-background-tooltip: 255, 255, 255;
|
|
139
|
+
--cat-color-ui-border-light: 248, 248, 251;
|
|
137
140
|
--cat-color-ui-border-default: 235, 236, 240;
|
|
138
141
|
--cat-color-ui-border-dark: 215, 219, 224;
|
|
139
142
|
--cat-color-ui-border-focus: 0, 113, 255;
|
|
143
|
+
--cat-color-ui-border-input: 215, 219, 224;
|
|
140
144
|
--cat-color-ui-font-head: 0, 0, 0;
|
|
141
145
|
--cat-color-ui-font-body: 0, 0, 0;
|
|
142
146
|
--cat-color-ui-font-mono: 0, 0, 0;
|
|
143
147
|
--cat-color-ui-font-muted: 105, 118, 135;
|
|
144
148
|
--cat-color-ui-font-quote: 0, 0, 0;
|
|
145
|
-
--cat-color-ui-font-
|
|
149
|
+
--cat-color-ui-font-tooltip: 0, 0, 0;
|
|
146
150
|
--cat-font-family-head: DM Sans;
|
|
147
151
|
--cat-font-family-body: Lato;
|
|
148
152
|
--cat-font-family-mono: Azeret Mono;
|
|
@@ -155,7 +159,6 @@
|
|
|
155
159
|
--cat-size-base-m: 2.5rem;
|
|
156
160
|
--cat-size-base-s: 2rem;
|
|
157
161
|
--cat-size-base-xs: 1.5rem;
|
|
158
|
-
--cat-size-outline-focus: 2px;
|
|
159
162
|
--cat-size-border-radius-l: 0.5rem;
|
|
160
163
|
--cat-size-border-radius-m: 0.25rem;
|
|
161
164
|
--cat-size-border-radius-s: 0.125rem;
|
|
@@ -170,11 +173,11 @@
|
|
|
170
173
|
--cat-size-font-body-m: 0.9375rem;
|
|
171
174
|
--cat-size-font-body-s: 0.875rem;
|
|
172
175
|
--cat-size-font-body-xs: 0.75rem;
|
|
173
|
-
--cat-size-font-mono-xl: 1.
|
|
174
|
-
--cat-size-font-mono-l:
|
|
175
|
-
--cat-size-font-mono-m: 0.
|
|
176
|
-
--cat-size-font-mono-s: 0.
|
|
177
|
-
--cat-size-font-mono-xs: 0.
|
|
176
|
+
--cat-size-font-mono-xl: 1.125rem;
|
|
177
|
+
--cat-size-font-mono-l: 0.9375rem;
|
|
178
|
+
--cat-size-font-mono-m: 0.875rem;
|
|
179
|
+
--cat-size-font-mono-s: 0.75rem;
|
|
180
|
+
--cat-size-font-mono-xs: 0.625rem;
|
|
178
181
|
--cat-size-line-head-1: 2rem;
|
|
179
182
|
--cat-size-line-head-2: 1.75rem;
|
|
180
183
|
--cat-size-line-head-3: 1.5rem;
|
package/dist/js/_variables.d.ts
CHANGED
|
@@ -130,18 +130,22 @@ export const ColorThemeDangerTextActive : string;
|
|
|
130
130
|
export const ColorUiBackgroundCanvas : string;
|
|
131
131
|
export const ColorUiBackgroundBody : string;
|
|
132
132
|
export const ColorUiBackgroundInteraction : string;
|
|
133
|
-
export const
|
|
133
|
+
export const ColorUiBackgroundInput : string;
|
|
134
|
+
export const ColorUiBackgroundInputDisabled : string;
|
|
134
135
|
export const ColorUiBackgroundSkeleton : string;
|
|
135
136
|
export const ColorUiBackgroundSkeletonHighlight : string;
|
|
137
|
+
export const ColorUiBackgroundTooltip : string;
|
|
138
|
+
export const ColorUiBorderLight : string;
|
|
136
139
|
export const ColorUiBorderDefault : string;
|
|
137
140
|
export const ColorUiBorderDark : string;
|
|
138
141
|
export const ColorUiBorderFocus : string;
|
|
142
|
+
export const ColorUiBorderInput : string;
|
|
139
143
|
export const ColorUiFontHead : string;
|
|
140
144
|
export const ColorUiFontBody : string;
|
|
141
145
|
export const ColorUiFontMono : string;
|
|
142
146
|
export const ColorUiFontMuted : string;
|
|
143
147
|
export const ColorUiFontQuote : string;
|
|
144
|
-
export const
|
|
148
|
+
export const ColorUiFontTooltip : string;
|
|
145
149
|
export const FontFamilyHead : string;
|
|
146
150
|
export const FontFamilyBody : string;
|
|
147
151
|
export const FontFamilyMono : string;
|
|
@@ -154,7 +158,6 @@ export const SizeBaseL : string;
|
|
|
154
158
|
export const SizeBaseM : string;
|
|
155
159
|
export const SizeBaseS : string;
|
|
156
160
|
export const SizeBaseXs : string;
|
|
157
|
-
export const SizeOutlineFocus : string;
|
|
158
161
|
export const SizeBorderRadiusL : string;
|
|
159
162
|
export const SizeBorderRadiusM : string;
|
|
160
163
|
export const SizeBorderRadiusS : string;
|
package/dist/js/_variables.js
CHANGED
|
@@ -130,18 +130,22 @@ export const ColorThemeDangerTextActive = "#ae2a0a";
|
|
|
130
130
|
export const ColorUiBackgroundCanvas = "#f8f8fb";
|
|
131
131
|
export const ColorUiBackgroundBody = "#ffffff";
|
|
132
132
|
export const ColorUiBackgroundInteraction = "#207f8a";
|
|
133
|
-
export const
|
|
133
|
+
export const ColorUiBackgroundInput = "#ffffff";
|
|
134
|
+
export const ColorUiBackgroundInputDisabled = "#f8f8fb";
|
|
134
135
|
export const ColorUiBackgroundSkeleton = "#ebecf0";
|
|
135
136
|
export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
|
|
137
|
+
export const ColorUiBackgroundTooltip = "#ffffff";
|
|
138
|
+
export const ColorUiBorderLight = "#f8f8fb";
|
|
136
139
|
export const ColorUiBorderDefault = "#ebecf0";
|
|
137
140
|
export const ColorUiBorderDark = "#d7dbe0";
|
|
138
141
|
export const ColorUiBorderFocus = "#0071ff";
|
|
142
|
+
export const ColorUiBorderInput = "#d7dbe0";
|
|
139
143
|
export const ColorUiFontHead = "#000000";
|
|
140
144
|
export const ColorUiFontBody = "#000000";
|
|
141
145
|
export const ColorUiFontMono = "#000000";
|
|
142
146
|
export const ColorUiFontMuted = "#697687";
|
|
143
147
|
export const ColorUiFontQuote = "#000000";
|
|
144
|
-
export const
|
|
148
|
+
export const ColorUiFontTooltip = "#000000";
|
|
145
149
|
export const FontFamilyHead = "DM Sans";
|
|
146
150
|
export const FontFamilyBody = "Lato";
|
|
147
151
|
export const FontFamilyMono = "Azeret Mono";
|
|
@@ -154,7 +158,6 @@ export const SizeBaseL = "3rem";
|
|
|
154
158
|
export const SizeBaseM = "2.5rem";
|
|
155
159
|
export const SizeBaseS = "2rem";
|
|
156
160
|
export const SizeBaseXs = "1.5rem";
|
|
157
|
-
export const SizeOutlineFocus = "2rem";
|
|
158
161
|
export const SizeBorderRadiusL = "0.5rem";
|
|
159
162
|
export const SizeBorderRadiusM = "0.25rem";
|
|
160
163
|
export const SizeBorderRadiusS = "0.125rem";
|
|
@@ -169,11 +172,11 @@ export const SizeFontBodyL = "1.125rem";
|
|
|
169
172
|
export const SizeFontBodyM = "0.9375rem";
|
|
170
173
|
export const SizeFontBodyS = "0.875rem";
|
|
171
174
|
export const SizeFontBodyXs = "0.75rem";
|
|
172
|
-
export const SizeFontMonoXl = "1.
|
|
173
|
-
export const SizeFontMonoL = "
|
|
174
|
-
export const SizeFontMonoM = "0.
|
|
175
|
-
export const SizeFontMonoS = "0.
|
|
176
|
-
export const SizeFontMonoXs = "0.
|
|
175
|
+
export const SizeFontMonoXl = "1.125rem";
|
|
176
|
+
export const SizeFontMonoL = "0.9375rem";
|
|
177
|
+
export const SizeFontMonoM = "0.875rem";
|
|
178
|
+
export const SizeFontMonoS = "0.75rem";
|
|
179
|
+
export const SizeFontMonoXs = "0.625rem";
|
|
177
180
|
export const SizeLineHead1 = "2rem";
|
|
178
181
|
export const SizeLineHead2 = "1.75rem";
|
|
179
182
|
export const SizeLineHead3 = "1.5rem";
|
|
@@ -33,6 +33,11 @@ $cat-size-line-head-4: 1.5rem !default;
|
|
|
33
33
|
$cat-size-line-head-3: 1.5rem !default;
|
|
34
34
|
$cat-size-line-head-2: 1.75rem !default;
|
|
35
35
|
$cat-size-line-head-1: 2rem !default;
|
|
36
|
+
$cat-size-font-mono-xs: 0.625rem !default;
|
|
37
|
+
$cat-size-font-mono-s: 0.75rem !default;
|
|
38
|
+
$cat-size-font-mono-m: 0.875rem !default;
|
|
39
|
+
$cat-size-font-mono-l: 0.9375rem !default;
|
|
40
|
+
$cat-size-font-mono-xl: 1.125rem !default;
|
|
36
41
|
$cat-size-font-body-xs: 0.75rem !default;
|
|
37
42
|
$cat-size-font-body-s: 0.875rem !default;
|
|
38
43
|
$cat-size-font-body-m: 0.9375rem !default;
|
|
@@ -47,7 +52,6 @@ $cat-size-font-head-1: 1.75rem !default;
|
|
|
47
52
|
$cat-size-border-radius-s: 0.125rem !default;
|
|
48
53
|
$cat-size-border-radius-m: 0.25rem !default;
|
|
49
54
|
$cat-size-border-radius-l: 0.5rem !default;
|
|
50
|
-
$cat-size-outline-focus: 2px !default;
|
|
51
55
|
$cat-size-base-xs: 1.5rem !default;
|
|
52
56
|
$cat-size-base-s: 2rem !default;
|
|
53
57
|
$cat-size-base-m: 2.5rem !default;
|
|
@@ -57,7 +61,7 @@ $cat-opacity-disabled: 0.65 !default;
|
|
|
57
61
|
$cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
|
|
58
62
|
$cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
|
|
59
63
|
$cat-font-weight-head: var(--cat-font-weight-head, 500) !default;
|
|
60
|
-
$cat-color-ui-border-focus: 0, 113, 255 !default;
|
|
64
|
+
$cat-color-ui-border-focus: var(--cat-border-color-focus, 0, 113, 255) !default;
|
|
61
65
|
$cat-color-base-red-700: 158, 38, 9 !default;
|
|
62
66
|
$cat-color-base-red-600: 174, 42, 10 !default;
|
|
63
67
|
$cat-color-base-red-500: 194, 46, 11 !default;
|
|
@@ -143,23 +147,23 @@ $cat-size-line-mono-s: $cat-size-line-body-s !default;
|
|
|
143
147
|
$cat-size-line-mono-m: $cat-size-line-body-m !default;
|
|
144
148
|
$cat-size-line-mono-l: $cat-size-line-body-l !default;
|
|
145
149
|
$cat-size-line-mono-xl: $cat-size-line-body-xl !default;
|
|
146
|
-
$cat-size-font-mono-xs: $cat-size-font-body-xs !default;
|
|
147
|
-
$cat-size-font-mono-s: $cat-size-font-body-s !default;
|
|
148
|
-
$cat-size-font-mono-m: $cat-size-font-body-m !default;
|
|
149
|
-
$cat-size-font-mono-l: $cat-size-font-body-l !default;
|
|
150
|
-
$cat-size-font-mono-xl: $cat-size-font-body-xl !default;
|
|
151
150
|
$cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
|
|
152
151
|
$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
|
|
153
152
|
$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-dm-sans-name) !default;
|
|
153
|
+
$cat-color-ui-font-tooltip: $cat-color-base-neutral-900 !default;
|
|
154
154
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
155
155
|
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
|
|
156
156
|
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
|
|
157
157
|
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-neutral-900) !default;
|
|
158
|
+
$cat-color-ui-border-input: $cat-color-base-neutral-300 !default;
|
|
158
159
|
$cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
|
|
159
160
|
$cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
|
|
161
|
+
$cat-color-ui-border-light: $cat-color-base-neutral-100 !default;
|
|
162
|
+
$cat-color-ui-background-tooltip: $cat-color-base-neutral-0 !default;
|
|
160
163
|
$cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
|
|
161
164
|
$cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
162
|
-
$cat-color-ui-background-
|
|
165
|
+
$cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
|
|
166
|
+
$cat-color-ui-background-input: $cat-color-base-neutral-0 !default;
|
|
163
167
|
$cat-color-ui-background-interaction: $cat-color-base-brand-400 !default;
|
|
164
168
|
$cat-color-ui-background-body: $cat-color-base-neutral-0 !default;
|
|
165
169
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
@@ -208,7 +212,6 @@ $cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-neutral-0
|
|
|
208
212
|
$cat-color-theme-primary-bg-active: var(--cat-primary-bg-active, $cat-color-base-brand-600) !default;
|
|
209
213
|
$cat-color-theme-primary-bg-hover: var(--cat-primary-bg-hover, $cat-color-base-brand-500) !default;
|
|
210
214
|
$cat-color-theme-primary-bg: var(--cat-primary-bg, $cat-color-base-brand-400) !default;
|
|
211
|
-
$cat-color-ui-font-quote-source: $cat-color-ui-font-muted !default;
|
|
212
215
|
$cat-color-ui-font-quote: $cat-color-ui-font-body !default;
|
|
213
216
|
|
|
214
217
|
$tokens: (
|
|
@@ -377,14 +380,18 @@ $tokens: (
|
|
|
377
380
|
'canvas': $cat-color-ui-background-canvas,
|
|
378
381
|
'body': $cat-color-ui-background-body,
|
|
379
382
|
'interaction': $cat-color-ui-background-interaction,
|
|
380
|
-
'
|
|
383
|
+
'input': $cat-color-ui-background-input,
|
|
384
|
+
'inputDisabled': $cat-color-ui-background-input-disabled,
|
|
381
385
|
'skeleton': $cat-color-ui-background-skeleton,
|
|
382
|
-
'skeletonHighlight': $cat-color-ui-background-skeleton-highlight
|
|
386
|
+
'skeletonHighlight': $cat-color-ui-background-skeleton-highlight,
|
|
387
|
+
'tooltip': $cat-color-ui-background-tooltip
|
|
383
388
|
),
|
|
384
389
|
'border': (
|
|
390
|
+
'light': $cat-color-ui-border-light,
|
|
385
391
|
'default': $cat-color-ui-border-default,
|
|
386
392
|
'dark': $cat-color-ui-border-dark,
|
|
387
|
-
'focus': $cat-color-ui-border-focus
|
|
393
|
+
'focus': $cat-color-ui-border-focus,
|
|
394
|
+
'input': $cat-color-ui-border-input
|
|
388
395
|
),
|
|
389
396
|
'font': (
|
|
390
397
|
'head': $cat-color-ui-font-head,
|
|
@@ -392,7 +399,7 @@ $tokens: (
|
|
|
392
399
|
'mono': $cat-color-ui-font-mono,
|
|
393
400
|
'muted': $cat-color-ui-font-muted,
|
|
394
401
|
'quote': $cat-color-ui-font-quote,
|
|
395
|
-
'
|
|
402
|
+
'tooltip': $cat-color-ui-font-tooltip
|
|
396
403
|
)
|
|
397
404
|
)
|
|
398
405
|
),
|
|
@@ -419,9 +426,6 @@ $tokens: (
|
|
|
419
426
|
's': $cat-size-base-s,
|
|
420
427
|
'xs': $cat-size-base-xs
|
|
421
428
|
),
|
|
422
|
-
'outline': (
|
|
423
|
-
'focus': $cat-size-outline-focus
|
|
424
|
-
),
|
|
425
429
|
'border': (
|
|
426
430
|
'radius': (
|
|
427
431
|
'l': $cat-size-border-radius-l,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Design tokens for Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"style-dictionary": "^3.1.1",
|
|
25
25
|
"tinycolor2": "^1.4.2"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "f2c574bc116c7d8ebb76422eb532e2babd07031b"
|
|
28
28
|
}
|