@haiilo/catalyst-tokens 1.2.0 → 1.2.2
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 -1
- package/dist/js/_variables.d.ts +1 -0
- package/dist/js/_variables.js +2 -1
- package/dist/scss/_variables.scss +51 -49
- package/package.json +1 -1
package/dist/css/_variables.css
CHANGED
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
--cat-color-ui-font-body: 0, 0, 0;
|
|
147
147
|
--cat-color-ui-font-mono: 0, 0, 0;
|
|
148
148
|
--cat-color-ui-font-muted: 105, 118, 135;
|
|
149
|
-
--cat-color-ui-font-quote:
|
|
149
|
+
--cat-color-ui-font-quote: 105, 118, 135;
|
|
150
150
|
--cat-color-ui-font-tooltip: 255, 255, 255;
|
|
151
151
|
--cat-font-family-head: Lato;
|
|
152
152
|
--cat-font-family-body: Lato;
|
|
@@ -156,6 +156,7 @@
|
|
|
156
156
|
--cat-font-weight-mono: 400;
|
|
157
157
|
--cat-opacity-disabled: 0.65;
|
|
158
158
|
--cat-opacity-backdrop: 0.6;
|
|
159
|
+
--cat-opacity-tooltip: 1;
|
|
159
160
|
--cat-size-border-radius-l: 0.5rem;
|
|
160
161
|
--cat-size-border-radius-m: 0.25rem;
|
|
161
162
|
--cat-size-border-radius-s: 0.125rem;
|
package/dist/js/_variables.d.ts
CHANGED
|
@@ -155,6 +155,7 @@ export const FontWeightBody : number;
|
|
|
155
155
|
export const FontWeightMono : number;
|
|
156
156
|
export const OpacityDisabled : number;
|
|
157
157
|
export const OpacityBackdrop : number;
|
|
158
|
+
export const OpacityTooltip : number;
|
|
158
159
|
export const SizeBorderRadiusL : string;
|
|
159
160
|
export const SizeBorderRadiusM : string;
|
|
160
161
|
export const SizeBorderRadiusS : string;
|
package/dist/js/_variables.js
CHANGED
|
@@ -145,7 +145,7 @@ export const ColorUiFontHead = "#000000";
|
|
|
145
145
|
export const ColorUiFontBody = "#000000";
|
|
146
146
|
export const ColorUiFontMono = "#000000";
|
|
147
147
|
export const ColorUiFontMuted = "#697687";
|
|
148
|
-
export const ColorUiFontQuote = "#
|
|
148
|
+
export const ColorUiFontQuote = "#697687";
|
|
149
149
|
export const ColorUiFontTooltip = "#ffffff";
|
|
150
150
|
export const FontFamilyHead = "Lato";
|
|
151
151
|
export const FontFamilyBody = "Lato";
|
|
@@ -155,6 +155,7 @@ export const FontWeightBody = 400;
|
|
|
155
155
|
export const FontWeightMono = 400;
|
|
156
156
|
export const OpacityDisabled = 0.65;
|
|
157
157
|
export const OpacityBackdrop = 0.6;
|
|
158
|
+
export const OpacityTooltip = 1;
|
|
158
159
|
export const SizeBorderRadiusL = "0.5rem";
|
|
159
160
|
export const SizeBorderRadiusM = "0.25rem";
|
|
160
161
|
export const SizeBorderRadiusS = "0.125rem";
|
|
@@ -57,11 +57,12 @@ $cat-size-font-head-4: 1.125rem !default;
|
|
|
57
57
|
$cat-size-font-head-3: 1.25rem !default;
|
|
58
58
|
$cat-size-font-head-2: 1.5rem !default;
|
|
59
59
|
$cat-size-font-head-1: 1.75rem !default;
|
|
60
|
-
$cat-size-border-radius-s: 0.125rem !default;
|
|
61
|
-
$cat-size-border-radius-m: 0.25rem !default;
|
|
62
|
-
$cat-size-border-radius-l: 0.5rem !default;
|
|
63
|
-
$cat-opacity-
|
|
64
|
-
$cat-opacity-
|
|
60
|
+
$cat-size-border-radius-s: var(--cat-border-radius-s, 0.125rem) !default;
|
|
61
|
+
$cat-size-border-radius-m: var(--cat-border-radius-m, 0.25rem) !default;
|
|
62
|
+
$cat-size-border-radius-l: var(--cat-border-radius-l, 0.5rem) !default;
|
|
63
|
+
$cat-opacity-tooltip: var(--cat-opacity-tooltip, 1) !default;
|
|
64
|
+
$cat-opacity-backdrop: var(--cat-opacity-backdrop, 0.6) !default;
|
|
65
|
+
$cat-opacity-disabled: var(--cat-opacity-disabled, 0.65) !default;
|
|
65
66
|
$cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
|
|
66
67
|
$cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
|
|
67
68
|
$cat-font-weight-head: var(--cat-font-weight-head, 500) !default;
|
|
@@ -150,16 +151,17 @@ $cat-asset-font-dm-sans-name: "DM Sans" !default;
|
|
|
150
151
|
$cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
|
|
151
152
|
$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
|
|
152
153
|
$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !default;
|
|
153
|
-
$cat-color-ui-font-tooltip: $cat-color-base-neutral-0 !default;
|
|
154
|
+
$cat-color-ui-font-tooltip: var(--cat-font-color-tooltip, $cat-color-base-neutral-0) !default;
|
|
155
|
+
$cat-color-ui-font-quote: var(--cat-font-color-quote, $cat-color-base-neutral-400) !default;
|
|
154
156
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
155
157
|
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
|
|
156
158
|
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
|
|
157
159
|
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-neutral-900) !default;
|
|
158
|
-
$cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
|
|
159
|
-
$cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
|
|
160
|
-
$cat-color-ui-border-light: $cat-color-base-neutral-100 !default;
|
|
161
|
-
$cat-color-ui-background-backdrop: $cat-color-base-neutral-900 !default;
|
|
162
|
-
$cat-color-ui-background-tooltip: $cat-color-base-neutral-900 !default;
|
|
160
|
+
$cat-color-ui-border-dark: var(--cat-border-color-focus, $cat-color-base-neutral-300) !default;
|
|
161
|
+
$cat-color-ui-border-default: var(--cat-border-color-focus, $cat-color-base-neutral-200) !default;
|
|
162
|
+
$cat-color-ui-border-light: var(--cat-border-color-focus, $cat-color-base-neutral-100) !default;
|
|
163
|
+
$cat-color-ui-background-backdrop: var(--cat-bg-backdrop, $cat-color-base-neutral-900) !default;
|
|
164
|
+
$cat-color-ui-background-tooltip: var(--cat-bg-tooltip, $cat-color-base-neutral-900) !default;
|
|
163
165
|
$cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
|
|
164
166
|
$cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
165
167
|
$cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
|
|
@@ -167,42 +169,42 @@ $cat-color-ui-background-input: $cat-color-base-neutral-0 !default;
|
|
|
167
169
|
$cat-color-ui-background-muted: $cat-color-base-neutral-200 !default;
|
|
168
170
|
$cat-color-ui-background-body: $cat-color-base-neutral-0 !default;
|
|
169
171
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
170
|
-
$cat-color-theme-danger-text-active: $cat-color-base-red-600 !default;
|
|
171
|
-
$cat-color-theme-danger-text-hover: $cat-color-base-red-500 !default;
|
|
172
|
-
$cat-color-theme-danger-text: $cat-color-base-red-400 !default;
|
|
173
|
-
$cat-color-theme-danger-fill-active: $cat-color-base-neutral-0 !default;
|
|
174
|
-
$cat-color-theme-danger-fill-hover: $cat-color-base-neutral-0 !default;
|
|
175
|
-
$cat-color-theme-danger-fill: $cat-color-base-neutral-0 !default;
|
|
176
|
-
$cat-color-theme-danger-bg-active: $cat-color-base-red-600 !default;
|
|
177
|
-
$cat-color-theme-danger-bg-hover: $cat-color-base-red-500 !default;
|
|
178
|
-
$cat-color-theme-danger-bg: $cat-color-base-red-400 !default;
|
|
179
|
-
$cat-color-theme-warning-text-active: $cat-color-base-orange-700 !default;
|
|
180
|
-
$cat-color-theme-warning-text-hover: $cat-color-base-orange-700 !default;
|
|
181
|
-
$cat-color-theme-warning-text: $cat-color-base-orange-700 !default;
|
|
182
|
-
$cat-color-theme-warning-fill-active: $cat-color-base-neutral-900 !default;
|
|
183
|
-
$cat-color-theme-warning-fill-hover: $cat-color-base-neutral-900 !default;
|
|
184
|
-
$cat-color-theme-warning-fill: $cat-color-base-neutral-900 !default;
|
|
185
|
-
$cat-color-theme-warning-bg-active: $cat-color-base-orange-100 !default;
|
|
186
|
-
$cat-color-theme-warning-bg-hover: $cat-color-base-orange-200 !default;
|
|
187
|
-
$cat-color-theme-warning-bg: $cat-color-base-orange-300 !default;
|
|
188
|
-
$cat-color-theme-success-text-active: $cat-color-base-green-600 !default;
|
|
189
|
-
$cat-color-theme-success-text-hover: $cat-color-base-green-500 !default;
|
|
190
|
-
$cat-color-theme-success-text: $cat-color-base-green-400 !default;
|
|
191
|
-
$cat-color-theme-success-fill-active: $cat-color-base-neutral-0 !default;
|
|
192
|
-
$cat-color-theme-success-fill-hover: $cat-color-base-neutral-0 !default;
|
|
193
|
-
$cat-color-theme-success-fill: $cat-color-base-neutral-0 !default;
|
|
194
|
-
$cat-color-theme-success-bg-active: $cat-color-base-green-600 !default;
|
|
195
|
-
$cat-color-theme-success-bg-hover: $cat-color-base-green-500 !default;
|
|
196
|
-
$cat-color-theme-success-bg: $cat-color-base-green-400 !default;
|
|
197
|
-
$cat-color-theme-secondary-text-active: $cat-color-base-neutral-900 !default;
|
|
198
|
-
$cat-color-theme-secondary-text-hover: $cat-color-base-neutral-900 !default;
|
|
199
|
-
$cat-color-theme-secondary-text: $cat-color-base-neutral-900 !default;
|
|
200
|
-
$cat-color-theme-secondary-fill-active: $cat-color-base-neutral-0 !default;
|
|
201
|
-
$cat-color-theme-secondary-fill-hover: $cat-color-base-neutral-0 !default;
|
|
202
|
-
$cat-color-theme-secondary-fill: $cat-color-base-neutral-0 !default;
|
|
203
|
-
$cat-color-theme-secondary-bg-active: $cat-color-base-neutral-400 !default;
|
|
204
|
-
$cat-color-theme-secondary-bg-hover: $cat-color-base-neutral-400 !default;
|
|
205
|
-
$cat-color-theme-secondary-bg: $cat-color-base-neutral-400 !default;
|
|
172
|
+
$cat-color-theme-danger-text-active: var(--cat-catdanger-text-active, $cat-color-base-red-600) !default;
|
|
173
|
+
$cat-color-theme-danger-text-hover: var(--cat-danger-text-hover, $cat-color-base-red-500) !default;
|
|
174
|
+
$cat-color-theme-danger-text: var(--cat-danger-text, $cat-color-base-red-400) !default;
|
|
175
|
+
$cat-color-theme-danger-fill-active: var(--cat-danger-fill-active, $cat-color-base-neutral-0) !default;
|
|
176
|
+
$cat-color-theme-danger-fill-hover: var(--cat-danger-fill-hover, $cat-color-base-neutral-0) !default;
|
|
177
|
+
$cat-color-theme-danger-fill: var(--cat-danger-fill, $cat-color-base-neutral-0) !default;
|
|
178
|
+
$cat-color-theme-danger-bg-active: var(--cat-danger-bg-active, $cat-color-base-red-600) !default;
|
|
179
|
+
$cat-color-theme-danger-bg-hover: var(--cat-danger-bg-hover, $cat-color-base-red-500) !default;
|
|
180
|
+
$cat-color-theme-danger-bg: var(--cat-danger-bg, $cat-color-base-red-400) !default;
|
|
181
|
+
$cat-color-theme-warning-text-active: var(--cat-warning-text-active, $cat-color-base-orange-700) !default;
|
|
182
|
+
$cat-color-theme-warning-text-hover: var(--cat-warning-text-hover, $cat-color-base-orange-700) !default;
|
|
183
|
+
$cat-color-theme-warning-text: var(--cat-warning-text, $cat-color-base-orange-700) !default;
|
|
184
|
+
$cat-color-theme-warning-fill-active: var(--cat-warning-fill-active, $cat-color-base-neutral-900) !default;
|
|
185
|
+
$cat-color-theme-warning-fill-hover: var(--cat-warning-fill-hover, $cat-color-base-neutral-900) !default;
|
|
186
|
+
$cat-color-theme-warning-fill: var(--cat-warning-fill, $cat-color-base-neutral-900) !default;
|
|
187
|
+
$cat-color-theme-warning-bg-active: var(--cat-warning-bg-active, $cat-color-base-orange-100) !default;
|
|
188
|
+
$cat-color-theme-warning-bg-hover: var(--cat-warning-bg-hover, $cat-color-base-orange-200) !default;
|
|
189
|
+
$cat-color-theme-warning-bg: var(--cat-warning-bg, $cat-color-base-orange-300) !default;
|
|
190
|
+
$cat-color-theme-success-text-active: var(--cat-success-text-active, $cat-color-base-green-600) !default;
|
|
191
|
+
$cat-color-theme-success-text-hover: var(--cat-success-text-hover, $cat-color-base-green-500) !default;
|
|
192
|
+
$cat-color-theme-success-text: var(--cat-success-text, $cat-color-base-green-400) !default;
|
|
193
|
+
$cat-color-theme-success-fill-active: var(--cat-success-fill-active, $cat-color-base-neutral-0) !default;
|
|
194
|
+
$cat-color-theme-success-fill-hover: var(--cat-success-fill-hover, $cat-color-base-neutral-0) !default;
|
|
195
|
+
$cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-neutral-0) !default;
|
|
196
|
+
$cat-color-theme-success-bg-active: var(--cat-success-bg-active, $cat-color-base-green-600) !default;
|
|
197
|
+
$cat-color-theme-success-bg-hover: var(--cat-success-bg-hover, $cat-color-base-green-500) !default;
|
|
198
|
+
$cat-color-theme-success-bg: var(--cat-success-bg-, $cat-color-base-green-400) !default;
|
|
199
|
+
$cat-color-theme-secondary-text-active: var(--cat-catsecondary-text-active, $cat-color-base-neutral-900) !default;
|
|
200
|
+
$cat-color-theme-secondary-text-hover: var(--cat-secondary-text-hover, $cat-color-base-neutral-900) !default;
|
|
201
|
+
$cat-color-theme-secondary-text: var(--cat-secondary-text, $cat-color-base-neutral-900) !default;
|
|
202
|
+
$cat-color-theme-secondary-fill-active: var(--cat-secondary-fill-active, $cat-color-base-neutral-0) !default;
|
|
203
|
+
$cat-color-theme-secondary-fill-hover: var(--cat-secondary-fill-hover, $cat-color-base-neutral-0) !default;
|
|
204
|
+
$cat-color-theme-secondary-fill: var(--cat-secondary-fill, $cat-color-base-neutral-0) !default;
|
|
205
|
+
$cat-color-theme-secondary-bg-active: var(--cat-secondary-bg-active, $cat-color-base-neutral-400) !default;
|
|
206
|
+
$cat-color-theme-secondary-bg-hover: var(--cat-secondary-bg-hover, $cat-color-base-neutral-400) !default;
|
|
207
|
+
$cat-color-theme-secondary-bg: var(--cat-secondary-bg, $cat-color-base-neutral-400) !default;
|
|
206
208
|
$cat-color-theme-primary-text-active: var(--cat-primary-text-active, $cat-color-base-brand-600) !default;
|
|
207
209
|
$cat-color-theme-primary-text-hover: var(--cat-primary-text-hover, $cat-color-base-brand-500) !default;
|
|
208
210
|
$cat-color-theme-primary-text: var(--cat-primary-text, $cat-color-base-brand-400) !default;
|
|
@@ -212,7 +214,6 @@ $cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-neutral-0
|
|
|
212
214
|
$cat-color-theme-primary-bg-active: var(--cat-primary-bg-active, $cat-color-base-brand-600) !default;
|
|
213
215
|
$cat-color-theme-primary-bg-hover: var(--cat-primary-bg-hover, $cat-color-base-brand-500) !default;
|
|
214
216
|
$cat-color-theme-primary-bg: var(--cat-primary-bg, $cat-color-base-brand-400) !default;
|
|
215
|
-
$cat-color-ui-font-quote: $cat-color-ui-font-body !default;
|
|
216
217
|
|
|
217
218
|
$tokens: (
|
|
218
219
|
'asset': (
|
|
@@ -420,7 +421,8 @@ $tokens: (
|
|
|
420
421
|
),
|
|
421
422
|
'opacity': (
|
|
422
423
|
'disabled': $cat-opacity-disabled,
|
|
423
|
-
'backdrop': $cat-opacity-backdrop
|
|
424
|
+
'backdrop': $cat-opacity-backdrop,
|
|
425
|
+
'tooltip': $cat-opacity-tooltip
|
|
424
426
|
),
|
|
425
427
|
'size': (
|
|
426
428
|
'border': (
|