@haiilo/catalyst-tokens 1.2.5 → 1.3.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 +14 -6
- package/dist/js/_variables.d.ts +10 -2
- package/dist/js/_variables.js +14 -6
- package/dist/scss/_variables.scss +51 -33
- package/package.json +1 -1
package/dist/css/_variables.css
CHANGED
|
@@ -49,12 +49,15 @@
|
|
|
49
49
|
--cat-asset-font-lato-woff2-thin-italic: "Lato-ThinItalic.woff2";
|
|
50
50
|
--cat-asset-font-azeret-mono-name: "Azeret Mono";
|
|
51
51
|
--cat-asset-font-azeret-mono-woff2-regular: "AzeretMono-Regular.woff2";
|
|
52
|
-
--cat-color-base-
|
|
53
|
-
--cat-color-base-
|
|
52
|
+
--cat-color-base-white: 255, 255, 255;
|
|
53
|
+
--cat-color-base-black: 0, 0, 0;
|
|
54
|
+
--cat-color-base-neutral-100: 242, 244, 247;
|
|
54
55
|
--cat-color-base-neutral-200: 235, 236, 240;
|
|
55
56
|
--cat-color-base-neutral-300: 215, 219, 224;
|
|
56
57
|
--cat-color-base-neutral-400: 105, 118, 135;
|
|
57
|
-
--cat-color-base-neutral-
|
|
58
|
+
--cat-color-base-neutral-500: 81, 92, 108;
|
|
59
|
+
--cat-color-base-neutral-600: 57, 66, 81;
|
|
60
|
+
--cat-color-base-neutral-700: 27, 31, 38;
|
|
58
61
|
--cat-color-base-brand-100: 201, 229, 232;
|
|
59
62
|
--cat-color-base-brand-200: 45, 179, 195;
|
|
60
63
|
--cat-color-base-brand-300: 41, 163, 177;
|
|
@@ -128,17 +131,17 @@
|
|
|
128
131
|
--cat-color-theme-danger-text: 217, 52, 13;
|
|
129
132
|
--cat-color-theme-danger-text-hover: 194, 46, 11;
|
|
130
133
|
--cat-color-theme-danger-text-active: 174, 42, 10;
|
|
131
|
-
--cat-color-ui-background-canvas:
|
|
134
|
+
--cat-color-ui-background-canvas: 242, 244, 247;
|
|
132
135
|
--cat-color-ui-background-body: 255, 255, 255;
|
|
133
136
|
--cat-color-ui-background-muted: 235, 236, 240;
|
|
134
137
|
--cat-color-ui-background-input: 255, 255, 255;
|
|
135
|
-
--cat-color-ui-background-input-disabled:
|
|
138
|
+
--cat-color-ui-background-input-disabled: 242, 244, 247;
|
|
136
139
|
--cat-color-ui-background-skeleton: 235, 236, 240;
|
|
137
140
|
--cat-color-ui-background-skeleton-highlight: 215, 219, 224;
|
|
138
141
|
--cat-color-ui-background-tooltip: 0, 0, 0;
|
|
139
142
|
--cat-color-ui-background-backdrop: 0, 0, 0;
|
|
140
143
|
--cat-color-ui-background-select-pill: 242, 244, 247;
|
|
141
|
-
--cat-color-ui-border-light:
|
|
144
|
+
--cat-color-ui-border-light: 242, 244, 247;
|
|
142
145
|
--cat-color-ui-border-default: 235, 236, 240;
|
|
143
146
|
--cat-color-ui-border-dark: 215, 219, 224;
|
|
144
147
|
--cat-color-ui-border-focus: 0, 113, 255;
|
|
@@ -151,9 +154,14 @@
|
|
|
151
154
|
--cat-font-family-head: Lato;
|
|
152
155
|
--cat-font-family-body: Lato;
|
|
153
156
|
--cat-font-family-mono: Azeret Mono;
|
|
157
|
+
--cat-font-family-emoji: '';
|
|
154
158
|
--cat-font-weight-head: 500;
|
|
155
159
|
--cat-font-weight-body: 400;
|
|
156
160
|
--cat-font-weight-mono: 400;
|
|
161
|
+
--cat-font-decoration-link: none;
|
|
162
|
+
--cat-font-decoration-link-hover: underline;
|
|
163
|
+
--cat-font-decoration-link-button: none;
|
|
164
|
+
--cat-font-decoration-link-button-hover: none;
|
|
157
165
|
--cat-opacity-disabled: 0.65;
|
|
158
166
|
--cat-opacity-backdrop: 0.6;
|
|
159
167
|
--cat-opacity-tooltip: 1;
|
package/dist/js/_variables.d.ts
CHANGED
|
@@ -48,12 +48,15 @@ export const AssetFontLatoWoffThinItalic : string;
|
|
|
48
48
|
export const AssetFontLatoWoff2ThinItalic : string;
|
|
49
49
|
export const AssetFontAzeretMonoName : string;
|
|
50
50
|
export const AssetFontAzeretMonoWoff2Regular : string;
|
|
51
|
-
export const
|
|
51
|
+
export const ColorBaseWhite : string;
|
|
52
|
+
export const ColorBaseBlack : string;
|
|
52
53
|
export const ColorBaseNeutral100 : string;
|
|
53
54
|
export const ColorBaseNeutral200 : string;
|
|
54
55
|
export const ColorBaseNeutral300 : string;
|
|
55
56
|
export const ColorBaseNeutral400 : string;
|
|
56
|
-
export const
|
|
57
|
+
export const ColorBaseNeutral500 : string;
|
|
58
|
+
export const ColorBaseNeutral600 : string;
|
|
59
|
+
export const ColorBaseNeutral700 : string;
|
|
57
60
|
export const ColorBaseBrand100 : string;
|
|
58
61
|
export const ColorBaseBrand200 : string;
|
|
59
62
|
export const ColorBaseBrand300 : string;
|
|
@@ -150,9 +153,14 @@ export const ColorUiFontTooltip : string;
|
|
|
150
153
|
export const FontFamilyHead : string;
|
|
151
154
|
export const FontFamilyBody : string;
|
|
152
155
|
export const FontFamilyMono : string;
|
|
156
|
+
export const FontFamilyEmoji : string;
|
|
153
157
|
export const FontWeightHead : number;
|
|
154
158
|
export const FontWeightBody : number;
|
|
155
159
|
export const FontWeightMono : number;
|
|
160
|
+
export const FontDecorationLink : string;
|
|
161
|
+
export const FontDecorationLinkHover : string;
|
|
162
|
+
export const FontDecorationLinkButton : string;
|
|
163
|
+
export const FontDecorationLinkButtonHover : string;
|
|
156
164
|
export const OpacityDisabled : number;
|
|
157
165
|
export const OpacityBackdrop : number;
|
|
158
166
|
export const OpacityTooltip : number;
|
package/dist/js/_variables.js
CHANGED
|
@@ -48,12 +48,15 @@ export const AssetFontLatoWoffThinItalic = "Lato-ThinItalic.woff";
|
|
|
48
48
|
export const AssetFontLatoWoff2ThinItalic = "Lato-ThinItalic.woff2";
|
|
49
49
|
export const AssetFontAzeretMonoName = "Azeret Mono";
|
|
50
50
|
export const AssetFontAzeretMonoWoff2Regular = "AzeretMono-Regular.woff2";
|
|
51
|
-
export const
|
|
52
|
-
export const
|
|
51
|
+
export const ColorBaseWhite = "#ffffff";
|
|
52
|
+
export const ColorBaseBlack = "#000000";
|
|
53
|
+
export const ColorBaseNeutral100 = "#f2f4f7";
|
|
53
54
|
export const ColorBaseNeutral200 = "#ebecf0";
|
|
54
55
|
export const ColorBaseNeutral300 = "#d7dbe0";
|
|
55
56
|
export const ColorBaseNeutral400 = "#697687";
|
|
56
|
-
export const
|
|
57
|
+
export const ColorBaseNeutral500 = "#515c6c";
|
|
58
|
+
export const ColorBaseNeutral600 = "#394251";
|
|
59
|
+
export const ColorBaseNeutral700 = "#1b1f26";
|
|
57
60
|
export const ColorBaseBrand100 = "#c9e5e8";
|
|
58
61
|
export const ColorBaseBrand200 = "#2db3c3";
|
|
59
62
|
export const ColorBaseBrand300 = "#29a3b1";
|
|
@@ -127,17 +130,17 @@ export const ColorThemeDangerFillActive = "#ffffff";
|
|
|
127
130
|
export const ColorThemeDangerText = "#d9340d";
|
|
128
131
|
export const ColorThemeDangerTextHover = "#c22e0b";
|
|
129
132
|
export const ColorThemeDangerTextActive = "#ae2a0a";
|
|
130
|
-
export const ColorUiBackgroundCanvas = "#
|
|
133
|
+
export const ColorUiBackgroundCanvas = "#f2f4f7";
|
|
131
134
|
export const ColorUiBackgroundBody = "#ffffff";
|
|
132
135
|
export const ColorUiBackgroundMuted = "#ebecf0";
|
|
133
136
|
export const ColorUiBackgroundInput = "#ffffff";
|
|
134
|
-
export const ColorUiBackgroundInputDisabled = "#
|
|
137
|
+
export const ColorUiBackgroundInputDisabled = "#f2f4f7";
|
|
135
138
|
export const ColorUiBackgroundSkeleton = "#ebecf0";
|
|
136
139
|
export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
|
|
137
140
|
export const ColorUiBackgroundTooltip = "#000000";
|
|
138
141
|
export const ColorUiBackgroundBackdrop = "#000000";
|
|
139
142
|
export const ColorUiBackgroundSelectPill = "#f2f4f7";
|
|
140
|
-
export const ColorUiBorderLight = "#
|
|
143
|
+
export const ColorUiBorderLight = "#f2f4f7";
|
|
141
144
|
export const ColorUiBorderDefault = "#ebecf0";
|
|
142
145
|
export const ColorUiBorderDark = "#d7dbe0";
|
|
143
146
|
export const ColorUiBorderFocus = "#0071ff";
|
|
@@ -150,9 +153,14 @@ export const ColorUiFontTooltip = "#ffffff";
|
|
|
150
153
|
export const FontFamilyHead = "Lato";
|
|
151
154
|
export const FontFamilyBody = "Lato";
|
|
152
155
|
export const FontFamilyMono = "Azeret Mono";
|
|
156
|
+
export const FontFamilyEmoji = "''";
|
|
153
157
|
export const FontWeightHead = 500;
|
|
154
158
|
export const FontWeightBody = 400;
|
|
155
159
|
export const FontWeightMono = 400;
|
|
160
|
+
export const FontDecorationLink = "none";
|
|
161
|
+
export const FontDecorationLinkHover = "underline";
|
|
162
|
+
export const FontDecorationLinkButton = "none";
|
|
163
|
+
export const FontDecorationLinkButtonHover = "none";
|
|
156
164
|
export const OpacityDisabled = 0.65;
|
|
157
165
|
export const OpacityBackdrop = 0.6;
|
|
158
166
|
export const OpacityTooltip = 1;
|
|
@@ -63,9 +63,14 @@ $cat-size-border-radius-l: var(--cat-border-radius-l, 0.5rem) !default;
|
|
|
63
63
|
$cat-opacity-tooltip: var(--cat-opacity-tooltip, 1) !default;
|
|
64
64
|
$cat-opacity-backdrop: var(--cat-opacity-backdrop, 0.6) !default;
|
|
65
65
|
$cat-opacity-disabled: var(--cat-opacity-disabled, 0.65) !default;
|
|
66
|
+
$cat-font-decoration-link-button-hover: var(--cat-link-button-decoration-hover, none) !default;
|
|
67
|
+
$cat-font-decoration-link-button: var(--cat-link-button-decoration, none) !default;
|
|
68
|
+
$cat-font-decoration-link-hover: var(--cat-link-decoration-hover, underline) !default;
|
|
69
|
+
$cat-font-decoration-link: var(--cat-link-decoration, none) !default;
|
|
66
70
|
$cat-font-weight-mono: var(--cat-font-weight-mono, 400) !default;
|
|
67
71
|
$cat-font-weight-body: var(--cat-font-weight-body, 400) !default;
|
|
68
72
|
$cat-font-weight-head: var(--cat-font-weight-head, 500) !default;
|
|
73
|
+
$cat-font-family-emoji: var(--cat-font-family-emoji, '') !default;
|
|
69
74
|
$cat-color-ui-border-focus: var(--cat-border-color-focus, 0, 113, 255) !default;
|
|
70
75
|
$cat-color-ui-background-select-pill: 242, 244, 247 !default;
|
|
71
76
|
$cat-color-base-red-700: 158, 38, 9 !default;
|
|
@@ -96,12 +101,15 @@ $cat-color-base-brand-400: 0, 129, 148 !default;
|
|
|
96
101
|
$cat-color-base-brand-300: 41, 163, 177 !default;
|
|
97
102
|
$cat-color-base-brand-200: 45, 179, 195 !default;
|
|
98
103
|
$cat-color-base-brand-100: 201, 229, 232 !default;
|
|
99
|
-
$cat-color-base-neutral-
|
|
104
|
+
$cat-color-base-neutral-700: 27, 31, 38 !default;
|
|
105
|
+
$cat-color-base-neutral-600: 57, 66, 81 !default;
|
|
106
|
+
$cat-color-base-neutral-500: 81, 92, 108 !default;
|
|
100
107
|
$cat-color-base-neutral-400: 105, 118, 135 !default;
|
|
101
108
|
$cat-color-base-neutral-300: 215, 219, 224 !default;
|
|
102
109
|
$cat-color-base-neutral-200: 235, 236, 240 !default;
|
|
103
|
-
$cat-color-base-neutral-100:
|
|
104
|
-
$cat-color-base-
|
|
110
|
+
$cat-color-base-neutral-100: 242, 244, 247 !default;
|
|
111
|
+
$cat-color-base-black: 0, 0, 0 !default;
|
|
112
|
+
$cat-color-base-white: 255, 255, 255 !default;
|
|
105
113
|
$cat-asset-font-azeret-mono-woff2-regular: "AzeretMono-Regular.woff2" !default;
|
|
106
114
|
$cat-asset-font-azeret-mono-name: "Azeret Mono" !default;
|
|
107
115
|
$cat-asset-font-lato-woff2-thin-italic: "Lato-ThinItalic.woff2" !default;
|
|
@@ -151,66 +159,66 @@ $cat-asset-font-dm-sans-name: "DM Sans" !default;
|
|
|
151
159
|
$cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
|
|
152
160
|
$cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
|
|
153
161
|
$cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !default;
|
|
154
|
-
$cat-color-ui-font-tooltip: var(--cat-font-color-tooltip, $cat-color-base-
|
|
162
|
+
$cat-color-ui-font-tooltip: var(--cat-font-color-tooltip, $cat-color-base-white) !default;
|
|
155
163
|
$cat-color-ui-font-quote: var(--cat-font-color-quote, $cat-color-base-neutral-400) !default;
|
|
156
164
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
157
|
-
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-
|
|
158
|
-
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-
|
|
159
|
-
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-
|
|
165
|
+
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-black) !default;
|
|
166
|
+
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-black) !default;
|
|
167
|
+
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-black) !default;
|
|
160
168
|
$cat-color-ui-border-dark: var(--cat-border-color-dark, $cat-color-base-neutral-300) !default;
|
|
161
169
|
$cat-color-ui-border-default: var(--cat-border-color, $cat-color-base-neutral-200) !default;
|
|
162
170
|
$cat-color-ui-border-light: var(--cat-border-color-light, $cat-color-base-neutral-100) !default;
|
|
163
|
-
$cat-color-ui-background-backdrop: var(--cat-bg-backdrop, $cat-color-base-
|
|
164
|
-
$cat-color-ui-background-tooltip: var(--cat-bg-tooltip, $cat-color-base-
|
|
171
|
+
$cat-color-ui-background-backdrop: var(--cat-bg-backdrop, $cat-color-base-black) !default;
|
|
172
|
+
$cat-color-ui-background-tooltip: var(--cat-bg-tooltip, $cat-color-base-black) !default;
|
|
165
173
|
$cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
|
|
166
174
|
$cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
167
175
|
$cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
|
|
168
|
-
$cat-color-ui-background-input: $cat-color-base-
|
|
176
|
+
$cat-color-ui-background-input: $cat-color-base-white !default;
|
|
169
177
|
$cat-color-ui-background-muted: $cat-color-base-neutral-200 !default;
|
|
170
|
-
$cat-color-ui-background-body: $cat-color-base-
|
|
178
|
+
$cat-color-ui-background-body: $cat-color-base-white !default;
|
|
171
179
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
172
|
-
$cat-color-theme-danger-text-active: var(--cat-
|
|
180
|
+
$cat-color-theme-danger-text-active: var(--cat-danger-text-active, $cat-color-base-red-600) !default;
|
|
173
181
|
$cat-color-theme-danger-text-hover: var(--cat-danger-text-hover, $cat-color-base-red-500) !default;
|
|
174
182
|
$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-
|
|
176
|
-
$cat-color-theme-danger-fill-hover: var(--cat-danger-fill-hover, $cat-color-base-
|
|
177
|
-
$cat-color-theme-danger-fill: var(--cat-danger-fill, $cat-color-base-
|
|
183
|
+
$cat-color-theme-danger-fill-active: var(--cat-danger-fill-active, $cat-color-base-white) !default;
|
|
184
|
+
$cat-color-theme-danger-fill-hover: var(--cat-danger-fill-hover, $cat-color-base-white) !default;
|
|
185
|
+
$cat-color-theme-danger-fill: var(--cat-danger-fill, $cat-color-base-white) !default;
|
|
178
186
|
$cat-color-theme-danger-bg-active: var(--cat-danger-bg-active, $cat-color-base-red-600) !default;
|
|
179
187
|
$cat-color-theme-danger-bg-hover: var(--cat-danger-bg-hover, $cat-color-base-red-500) !default;
|
|
180
188
|
$cat-color-theme-danger-bg: var(--cat-danger-bg, $cat-color-base-red-400) !default;
|
|
181
189
|
$cat-color-theme-warning-text-active: var(--cat-warning-text-active, $cat-color-base-orange-700) !default;
|
|
182
190
|
$cat-color-theme-warning-text-hover: var(--cat-warning-text-hover, $cat-color-base-orange-700) !default;
|
|
183
191
|
$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-
|
|
185
|
-
$cat-color-theme-warning-fill-hover: var(--cat-warning-fill-hover, $cat-color-base-
|
|
186
|
-
$cat-color-theme-warning-fill: var(--cat-warning-fill, $cat-color-base-
|
|
192
|
+
$cat-color-theme-warning-fill-active: var(--cat-warning-fill-active, $cat-color-base-black) !default;
|
|
193
|
+
$cat-color-theme-warning-fill-hover: var(--cat-warning-fill-hover, $cat-color-base-black) !default;
|
|
194
|
+
$cat-color-theme-warning-fill: var(--cat-warning-fill, $cat-color-base-black) !default;
|
|
187
195
|
$cat-color-theme-warning-bg-active: var(--cat-warning-bg-active, $cat-color-base-orange-100) !default;
|
|
188
196
|
$cat-color-theme-warning-bg-hover: var(--cat-warning-bg-hover, $cat-color-base-orange-200) !default;
|
|
189
197
|
$cat-color-theme-warning-bg: var(--cat-warning-bg, $cat-color-base-orange-300) !default;
|
|
190
198
|
$cat-color-theme-success-text-active: var(--cat-success-text-active, $cat-color-base-green-600) !default;
|
|
191
199
|
$cat-color-theme-success-text-hover: var(--cat-success-text-hover, $cat-color-base-green-500) !default;
|
|
192
200
|
$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-
|
|
194
|
-
$cat-color-theme-success-fill-hover: var(--cat-success-fill-hover, $cat-color-base-
|
|
195
|
-
$cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-
|
|
201
|
+
$cat-color-theme-success-fill-active: var(--cat-success-fill-active, $cat-color-base-white) !default;
|
|
202
|
+
$cat-color-theme-success-fill-hover: var(--cat-success-fill-hover, $cat-color-base-white) !default;
|
|
203
|
+
$cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-white) !default;
|
|
196
204
|
$cat-color-theme-success-bg-active: var(--cat-success-bg-active, $cat-color-base-green-600) !default;
|
|
197
205
|
$cat-color-theme-success-bg-hover: var(--cat-success-bg-hover, $cat-color-base-green-500) !default;
|
|
198
206
|
$cat-color-theme-success-bg: var(--cat-success-bg-, $cat-color-base-green-400) !default;
|
|
199
|
-
$cat-color-theme-secondary-text-active: var(--cat-
|
|
200
|
-
$cat-color-theme-secondary-text-hover: var(--cat-secondary-text-hover, $cat-color-base-
|
|
201
|
-
$cat-color-theme-secondary-text: var(--cat-secondary-text, $cat-color-base-
|
|
202
|
-
$cat-color-theme-secondary-fill-active: var(--cat-secondary-fill-active, $cat-color-base-
|
|
203
|
-
$cat-color-theme-secondary-fill-hover: var(--cat-secondary-fill-hover, $cat-color-base-
|
|
204
|
-
$cat-color-theme-secondary-fill: var(--cat-secondary-fill, $cat-color-base-
|
|
207
|
+
$cat-color-theme-secondary-text-active: var(--cat-secondary-text-active, $cat-color-base-black) !default;
|
|
208
|
+
$cat-color-theme-secondary-text-hover: var(--cat-secondary-text-hover, $cat-color-base-black) !default;
|
|
209
|
+
$cat-color-theme-secondary-text: var(--cat-secondary-text, $cat-color-base-black) !default;
|
|
210
|
+
$cat-color-theme-secondary-fill-active: var(--cat-secondary-fill-active, $cat-color-base-white) !default;
|
|
211
|
+
$cat-color-theme-secondary-fill-hover: var(--cat-secondary-fill-hover, $cat-color-base-white) !default;
|
|
212
|
+
$cat-color-theme-secondary-fill: var(--cat-secondary-fill, $cat-color-base-white) !default;
|
|
205
213
|
$cat-color-theme-secondary-bg-active: var(--cat-secondary-bg-active, $cat-color-base-neutral-400) !default;
|
|
206
214
|
$cat-color-theme-secondary-bg-hover: var(--cat-secondary-bg-hover, $cat-color-base-neutral-400) !default;
|
|
207
215
|
$cat-color-theme-secondary-bg: var(--cat-secondary-bg, $cat-color-base-neutral-400) !default;
|
|
208
216
|
$cat-color-theme-primary-text-active: var(--cat-primary-text-active, $cat-color-base-brand-600) !default;
|
|
209
217
|
$cat-color-theme-primary-text-hover: var(--cat-primary-text-hover, $cat-color-base-brand-500) !default;
|
|
210
218
|
$cat-color-theme-primary-text: var(--cat-primary-text, $cat-color-base-brand-400) !default;
|
|
211
|
-
$cat-color-theme-primary-fill-active: var(--cat-primary-fill-active, $cat-color-base-
|
|
212
|
-
$cat-color-theme-primary-fill-hover: var(--cat-primary-fill-hover, $cat-color-base-
|
|
213
|
-
$cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-
|
|
219
|
+
$cat-color-theme-primary-fill-active: var(--cat-primary-fill-active, $cat-color-base-white) !default;
|
|
220
|
+
$cat-color-theme-primary-fill-hover: var(--cat-primary-fill-hover, $cat-color-base-white) !default;
|
|
221
|
+
$cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-white) !default;
|
|
214
222
|
$cat-color-theme-primary-bg-active: var(--cat-primary-bg-active, $cat-color-base-brand-600) !default;
|
|
215
223
|
$cat-color-theme-primary-bg-hover: var(--cat-primary-bg-hover, $cat-color-base-brand-500) !default;
|
|
216
224
|
$cat-color-theme-primary-bg: var(--cat-primary-bg, $cat-color-base-brand-400) !default;
|
|
@@ -274,13 +282,16 @@ $tokens: (
|
|
|
274
282
|
),
|
|
275
283
|
'color': (
|
|
276
284
|
'base': (
|
|
285
|
+
'white': $cat-color-base-white,
|
|
286
|
+
'black': $cat-color-base-black,
|
|
277
287
|
'neutral': (
|
|
278
|
-
'0': $cat-color-base-neutral-0,
|
|
279
288
|
'100': $cat-color-base-neutral-100,
|
|
280
289
|
'200': $cat-color-base-neutral-200,
|
|
281
290
|
'300': $cat-color-base-neutral-300,
|
|
282
291
|
'400': $cat-color-base-neutral-400,
|
|
283
|
-
'
|
|
292
|
+
'500': $cat-color-base-neutral-500,
|
|
293
|
+
'600': $cat-color-base-neutral-600,
|
|
294
|
+
'700': $cat-color-base-neutral-700
|
|
284
295
|
),
|
|
285
296
|
'brand': (
|
|
286
297
|
'100': $cat-color-base-brand-100,
|
|
@@ -411,12 +422,19 @@ $tokens: (
|
|
|
411
422
|
'family': (
|
|
412
423
|
'head': $cat-font-family-head,
|
|
413
424
|
'body': $cat-font-family-body,
|
|
414
|
-
'mono': $cat-font-family-mono
|
|
425
|
+
'mono': $cat-font-family-mono,
|
|
426
|
+
'emoji': $cat-font-family-emoji
|
|
415
427
|
),
|
|
416
428
|
'weight': (
|
|
417
429
|
'head': $cat-font-weight-head,
|
|
418
430
|
'body': $cat-font-weight-body,
|
|
419
431
|
'mono': $cat-font-weight-mono
|
|
432
|
+
),
|
|
433
|
+
'decoration': (
|
|
434
|
+
'link': $cat-font-decoration-link,
|
|
435
|
+
'linkHover': $cat-font-decoration-link-hover,
|
|
436
|
+
'linkButton': $cat-font-decoration-link-button,
|
|
437
|
+
'linkButtonHover': $cat-font-decoration-link-button-hover
|
|
420
438
|
)
|
|
421
439
|
),
|
|
422
440
|
'opacity': (
|