@haiilo/catalyst-tokens 0.4.0 → 0.5.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/dist/css/_variables.css +11 -11
- package/dist/js/_variables.d.ts +4 -4
- package/dist/js/_variables.js +11 -11
- package/dist/scss/_variables.scss +18 -20
- package/package.json +2 -2
package/dist/css/_variables.css
CHANGED
|
@@ -131,20 +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;
|
|
137
|
-
--cat-color-ui-background-tooltip:
|
|
138
|
+
--cat-color-ui-background-tooltip: 255, 255, 255;
|
|
139
|
+
--cat-color-ui-border-light: 248, 248, 251;
|
|
138
140
|
--cat-color-ui-border-default: 235, 236, 240;
|
|
139
141
|
--cat-color-ui-border-dark: 215, 219, 224;
|
|
140
142
|
--cat-color-ui-border-focus: 0, 113, 255;
|
|
143
|
+
--cat-color-ui-border-input: 215, 219, 224;
|
|
141
144
|
--cat-color-ui-font-head: 0, 0, 0;
|
|
142
145
|
--cat-color-ui-font-body: 0, 0, 0;
|
|
143
146
|
--cat-color-ui-font-mono: 0, 0, 0;
|
|
144
147
|
--cat-color-ui-font-muted: 105, 118, 135;
|
|
145
148
|
--cat-color-ui-font-quote: 0, 0, 0;
|
|
146
|
-
--cat-color-ui-font-
|
|
147
|
-
--cat-color-ui-font-tooltip: 255, 255, 255;
|
|
149
|
+
--cat-color-ui-font-tooltip: 0, 0, 0;
|
|
148
150
|
--cat-font-family-head: DM Sans;
|
|
149
151
|
--cat-font-family-body: Lato;
|
|
150
152
|
--cat-font-family-mono: Azeret Mono;
|
|
@@ -152,13 +154,11 @@
|
|
|
152
154
|
--cat-font-weight-body: 400;
|
|
153
155
|
--cat-font-weight-mono: 400;
|
|
154
156
|
--cat-opacity-disabled: 0.65;
|
|
155
|
-
--cat-opacity-tooltip: 0.7;
|
|
156
157
|
--cat-size-base-xl: 3.5rem;
|
|
157
158
|
--cat-size-base-l: 3rem;
|
|
158
159
|
--cat-size-base-m: 2.5rem;
|
|
159
160
|
--cat-size-base-s: 2rem;
|
|
160
161
|
--cat-size-base-xs: 1.5rem;
|
|
161
|
-
--cat-size-outline-focus: 2px;
|
|
162
162
|
--cat-size-border-radius-l: 0.5rem;
|
|
163
163
|
--cat-size-border-radius-m: 0.25rem;
|
|
164
164
|
--cat-size-border-radius-s: 0.125rem;
|
|
@@ -173,11 +173,11 @@
|
|
|
173
173
|
--cat-size-font-body-m: 0.9375rem;
|
|
174
174
|
--cat-size-font-body-s: 0.875rem;
|
|
175
175
|
--cat-size-font-body-xs: 0.75rem;
|
|
176
|
-
--cat-size-font-mono-xl: 1.
|
|
177
|
-
--cat-size-font-mono-l:
|
|
178
|
-
--cat-size-font-mono-m: 0.
|
|
179
|
-
--cat-size-font-mono-s: 0.
|
|
180
|
-
--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;
|
|
181
181
|
--cat-size-line-head-1: 2rem;
|
|
182
182
|
--cat-size-line-head-2: 1.75rem;
|
|
183
183
|
--cat-size-line-head-3: 1.5rem;
|
package/dist/js/_variables.d.ts
CHANGED
|
@@ -130,19 +130,21 @@ 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;
|
|
136
137
|
export const ColorUiBackgroundTooltip : string;
|
|
138
|
+
export const ColorUiBorderLight : string;
|
|
137
139
|
export const ColorUiBorderDefault : string;
|
|
138
140
|
export const ColorUiBorderDark : string;
|
|
139
141
|
export const ColorUiBorderFocus : string;
|
|
142
|
+
export const ColorUiBorderInput : string;
|
|
140
143
|
export const ColorUiFontHead : string;
|
|
141
144
|
export const ColorUiFontBody : string;
|
|
142
145
|
export const ColorUiFontMono : string;
|
|
143
146
|
export const ColorUiFontMuted : string;
|
|
144
147
|
export const ColorUiFontQuote : string;
|
|
145
|
-
export const ColorUiFontQuoteSource : string;
|
|
146
148
|
export const ColorUiFontTooltip : string;
|
|
147
149
|
export const FontFamilyHead : string;
|
|
148
150
|
export const FontFamilyBody : string;
|
|
@@ -151,13 +153,11 @@ export const FontWeightHead : number;
|
|
|
151
153
|
export const FontWeightBody : number;
|
|
152
154
|
export const FontWeightMono : number;
|
|
153
155
|
export const OpacityDisabled : number;
|
|
154
|
-
export const OpacityTooltip : number;
|
|
155
156
|
export const SizeBaseXl : string;
|
|
156
157
|
export const SizeBaseL : string;
|
|
157
158
|
export const SizeBaseM : string;
|
|
158
159
|
export const SizeBaseS : string;
|
|
159
160
|
export const SizeBaseXs : string;
|
|
160
|
-
export const SizeOutlineFocus : string;
|
|
161
161
|
export const SizeBorderRadiusL : string;
|
|
162
162
|
export const SizeBorderRadiusM : string;
|
|
163
163
|
export const SizeBorderRadiusS : string;
|
package/dist/js/_variables.js
CHANGED
|
@@ -130,20 +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";
|
|
136
|
-
export const ColorUiBackgroundTooltip = "#
|
|
137
|
+
export const ColorUiBackgroundTooltip = "#ffffff";
|
|
138
|
+
export const ColorUiBorderLight = "#f8f8fb";
|
|
137
139
|
export const ColorUiBorderDefault = "#ebecf0";
|
|
138
140
|
export const ColorUiBorderDark = "#d7dbe0";
|
|
139
141
|
export const ColorUiBorderFocus = "#0071ff";
|
|
142
|
+
export const ColorUiBorderInput = "#d7dbe0";
|
|
140
143
|
export const ColorUiFontHead = "#000000";
|
|
141
144
|
export const ColorUiFontBody = "#000000";
|
|
142
145
|
export const ColorUiFontMono = "#000000";
|
|
143
146
|
export const ColorUiFontMuted = "#697687";
|
|
144
147
|
export const ColorUiFontQuote = "#000000";
|
|
145
|
-
export const
|
|
146
|
-
export const ColorUiFontTooltip = "#ffffff";
|
|
148
|
+
export const ColorUiFontTooltip = "#000000";
|
|
147
149
|
export const FontFamilyHead = "DM Sans";
|
|
148
150
|
export const FontFamilyBody = "Lato";
|
|
149
151
|
export const FontFamilyMono = "Azeret Mono";
|
|
@@ -151,13 +153,11 @@ export const FontWeightHead = 500;
|
|
|
151
153
|
export const FontWeightBody = 400;
|
|
152
154
|
export const FontWeightMono = 400;
|
|
153
155
|
export const OpacityDisabled = 0.65;
|
|
154
|
-
export const OpacityTooltip = 0.7;
|
|
155
156
|
export const SizeBaseXl = "3.5rem";
|
|
156
157
|
export const SizeBaseL = "3rem";
|
|
157
158
|
export const SizeBaseM = "2.5rem";
|
|
158
159
|
export const SizeBaseS = "2rem";
|
|
159
160
|
export const SizeBaseXs = "1.5rem";
|
|
160
|
-
export const SizeOutlineFocus = "2rem";
|
|
161
161
|
export const SizeBorderRadiusL = "0.5rem";
|
|
162
162
|
export const SizeBorderRadiusM = "0.25rem";
|
|
163
163
|
export const SizeBorderRadiusS = "0.125rem";
|
|
@@ -172,11 +172,11 @@ export const SizeFontBodyL = "1.125rem";
|
|
|
172
172
|
export const SizeFontBodyM = "0.9375rem";
|
|
173
173
|
export const SizeFontBodyS = "0.875rem";
|
|
174
174
|
export const SizeFontBodyXs = "0.75rem";
|
|
175
|
-
export const SizeFontMonoXl = "1.
|
|
176
|
-
export const SizeFontMonoL = "
|
|
177
|
-
export const SizeFontMonoM = "0.
|
|
178
|
-
export const SizeFontMonoS = "0.
|
|
179
|
-
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";
|
|
180
180
|
export const SizeLineHead1 = "2rem";
|
|
181
181
|
export const SizeLineHead2 = "1.75rem";
|
|
182
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,18 +52,16 @@ $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;
|
|
54
58
|
$cat-size-base-l: 3rem !default;
|
|
55
59
|
$cat-size-base-xl: 3.5rem !default;
|
|
56
|
-
$cat-opacity-tooltip: 0.7 !default;
|
|
57
60
|
$cat-opacity-disabled: 0.65 !default;
|
|
58
61
|
$cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
|
|
59
62
|
$cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
|
|
60
63
|
$cat-font-weight-head: var(--cat-font-weight-head, 500) !default;
|
|
61
|
-
$cat-color-ui-border-focus: 0, 113, 255 !default;
|
|
64
|
+
$cat-color-ui-border-focus: var(--cat-border-color-focus, 0, 113, 255) !default;
|
|
62
65
|
$cat-color-base-red-700: 158, 38, 9 !default;
|
|
63
66
|
$cat-color-base-red-600: 174, 42, 10 !default;
|
|
64
67
|
$cat-color-base-red-500: 194, 46, 11 !default;
|
|
@@ -144,25 +147,23 @@ $cat-size-line-mono-s: $cat-size-line-body-s !default;
|
|
|
144
147
|
$cat-size-line-mono-m: $cat-size-line-body-m !default;
|
|
145
148
|
$cat-size-line-mono-l: $cat-size-line-body-l !default;
|
|
146
149
|
$cat-size-line-mono-xl: $cat-size-line-body-xl !default;
|
|
147
|
-
$cat-size-font-mono-xs: $cat-size-font-body-xs !default;
|
|
148
|
-
$cat-size-font-mono-s: $cat-size-font-body-s !default;
|
|
149
|
-
$cat-size-font-mono-m: $cat-size-font-body-m !default;
|
|
150
|
-
$cat-size-font-mono-l: $cat-size-font-body-l !default;
|
|
151
|
-
$cat-size-font-mono-xl: $cat-size-font-body-xl !default;
|
|
152
150
|
$cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
|
|
153
151
|
$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
|
|
154
152
|
$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-dm-sans-name) !default;
|
|
155
|
-
$cat-color-ui-font-tooltip: $cat-color-base-neutral-
|
|
153
|
+
$cat-color-ui-font-tooltip: $cat-color-base-neutral-900 !default;
|
|
156
154
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
157
155
|
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
|
|
158
156
|
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
|
|
159
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;
|
|
160
159
|
$cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
|
|
161
160
|
$cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
|
|
162
|
-
$cat-color-ui-
|
|
161
|
+
$cat-color-ui-border-light: $cat-color-base-neutral-100 !default;
|
|
162
|
+
$cat-color-ui-background-tooltip: $cat-color-base-neutral-0 !default;
|
|
163
163
|
$cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
|
|
164
164
|
$cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
165
|
-
$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;
|
|
166
167
|
$cat-color-ui-background-interaction: $cat-color-base-brand-400 !default;
|
|
167
168
|
$cat-color-ui-background-body: $cat-color-base-neutral-0 !default;
|
|
168
169
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
@@ -211,7 +212,6 @@ $cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-neutral-0
|
|
|
211
212
|
$cat-color-theme-primary-bg-active: var(--cat-primary-bg-active, $cat-color-base-brand-600) !default;
|
|
212
213
|
$cat-color-theme-primary-bg-hover: var(--cat-primary-bg-hover, $cat-color-base-brand-500) !default;
|
|
213
214
|
$cat-color-theme-primary-bg: var(--cat-primary-bg, $cat-color-base-brand-400) !default;
|
|
214
|
-
$cat-color-ui-font-quote-source: $cat-color-ui-font-muted !default;
|
|
215
215
|
$cat-color-ui-font-quote: $cat-color-ui-font-body !default;
|
|
216
216
|
|
|
217
217
|
$tokens: (
|
|
@@ -380,15 +380,18 @@ $tokens: (
|
|
|
380
380
|
'canvas': $cat-color-ui-background-canvas,
|
|
381
381
|
'body': $cat-color-ui-background-body,
|
|
382
382
|
'interaction': $cat-color-ui-background-interaction,
|
|
383
|
-
'
|
|
383
|
+
'input': $cat-color-ui-background-input,
|
|
384
|
+
'inputDisabled': $cat-color-ui-background-input-disabled,
|
|
384
385
|
'skeleton': $cat-color-ui-background-skeleton,
|
|
385
386
|
'skeletonHighlight': $cat-color-ui-background-skeleton-highlight,
|
|
386
387
|
'tooltip': $cat-color-ui-background-tooltip
|
|
387
388
|
),
|
|
388
389
|
'border': (
|
|
390
|
+
'light': $cat-color-ui-border-light,
|
|
389
391
|
'default': $cat-color-ui-border-default,
|
|
390
392
|
'dark': $cat-color-ui-border-dark,
|
|
391
|
-
'focus': $cat-color-ui-border-focus
|
|
393
|
+
'focus': $cat-color-ui-border-focus,
|
|
394
|
+
'input': $cat-color-ui-border-input
|
|
392
395
|
),
|
|
393
396
|
'font': (
|
|
394
397
|
'head': $cat-color-ui-font-head,
|
|
@@ -396,7 +399,6 @@ $tokens: (
|
|
|
396
399
|
'mono': $cat-color-ui-font-mono,
|
|
397
400
|
'muted': $cat-color-ui-font-muted,
|
|
398
401
|
'quote': $cat-color-ui-font-quote,
|
|
399
|
-
'quoteSource': $cat-color-ui-font-quote-source,
|
|
400
402
|
'tooltip': $cat-color-ui-font-tooltip
|
|
401
403
|
)
|
|
402
404
|
)
|
|
@@ -414,8 +416,7 @@ $tokens: (
|
|
|
414
416
|
)
|
|
415
417
|
),
|
|
416
418
|
'opacity': (
|
|
417
|
-
'disabled': $cat-opacity-disabled
|
|
418
|
-
'tooltip': $cat-opacity-tooltip
|
|
419
|
+
'disabled': $cat-opacity-disabled
|
|
419
420
|
),
|
|
420
421
|
'size': (
|
|
421
422
|
'base': (
|
|
@@ -425,9 +426,6 @@ $tokens: (
|
|
|
425
426
|
's': $cat-size-base-s,
|
|
426
427
|
'xs': $cat-size-base-xs
|
|
427
428
|
),
|
|
428
|
-
'outline': (
|
|
429
|
-
'focus': $cat-size-outline-focus
|
|
430
|
-
),
|
|
431
429
|
'border': (
|
|
432
430
|
'radius': (
|
|
433
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.0",
|
|
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": "eb1acc7a08090c5c7095b3d3804ea8f347e5bbe2"
|
|
28
28
|
}
|