@haiilo/catalyst-tokens 1.3.1 → 2.0.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 → variables.css} +26 -0
- package/dist/js/variables.d.ts +249 -0
- package/dist/js/variables.js +249 -0
- package/dist/scss/_variables.scss +60 -0
- package/package.json +3 -1
- package/dist/js/_variables.d.ts +0 -223
- package/dist/js/_variables.js +0 -223
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
--cat-color-base-neutral-500: 81, 92, 108;
|
|
59
59
|
--cat-color-base-neutral-600: 57, 66, 81;
|
|
60
60
|
--cat-color-base-neutral-700: 27, 31, 38;
|
|
61
|
+
--cat-color-base-neutral-dark-400: 105, 118, 135;
|
|
61
62
|
--cat-color-base-brand-100: 201, 229, 232;
|
|
62
63
|
--cat-color-base-brand-200: 45, 179, 195;
|
|
63
64
|
--cat-color-base-brand-300: 41, 163, 177;
|
|
@@ -65,6 +66,9 @@
|
|
|
65
66
|
--cat-color-base-brand-500: 1, 115, 132;
|
|
66
67
|
--cat-color-base-brand-600: 2, 99, 113;
|
|
67
68
|
--cat-color-base-brand-700: 23, 91, 99;
|
|
69
|
+
--cat-color-base-brand-dark-400: 147, 180, 242;
|
|
70
|
+
--cat-color-base-brand-dark-500: 147, 180, 242;
|
|
71
|
+
--cat-color-base-brand-dark-600: 147, 180, 242;
|
|
68
72
|
--cat-color-base-green-100: 212, 237, 228;
|
|
69
73
|
--cat-color-base-green-200: 0, 187, 125;
|
|
70
74
|
--cat-color-base-green-300: 0, 170, 113;
|
|
@@ -95,6 +99,15 @@
|
|
|
95
99
|
--cat-color-theme-primary-text: 0, 129, 148;
|
|
96
100
|
--cat-color-theme-primary-text-hover: 1, 115, 132;
|
|
97
101
|
--cat-color-theme-primary-text-active: 2, 99, 113;
|
|
102
|
+
--cat-color-theme-primary-dark-bg: 147, 180, 242;
|
|
103
|
+
--cat-color-theme-primary-dark-bg-hover: 147, 180, 242;
|
|
104
|
+
--cat-color-theme-primary-dark-bg-active: 147, 180, 242;
|
|
105
|
+
--cat-color-theme-primary-dark-fill: 0, 0, 0;
|
|
106
|
+
--cat-color-theme-primary-dark-fill-hover: 0, 0, 0;
|
|
107
|
+
--cat-color-theme-primary-dark-fill-active: 0, 0, 0;
|
|
108
|
+
--cat-color-theme-primary-dark-text: 147, 180, 242;
|
|
109
|
+
--cat-color-theme-primary-dark-text-hover: 147, 180, 242;
|
|
110
|
+
--cat-color-theme-primary-dark-text-active: 147, 180, 242;
|
|
98
111
|
--cat-color-theme-secondary-bg: 105, 118, 135;
|
|
99
112
|
--cat-color-theme-secondary-bg-hover: 105, 118, 135;
|
|
100
113
|
--cat-color-theme-secondary-bg-active: 105, 118, 135;
|
|
@@ -104,6 +117,15 @@
|
|
|
104
117
|
--cat-color-theme-secondary-text: 0, 0, 0;
|
|
105
118
|
--cat-color-theme-secondary-text-hover: 0, 0, 0;
|
|
106
119
|
--cat-color-theme-secondary-text-active: 0, 0, 0;
|
|
120
|
+
--cat-color-theme-secondary-dark-bg: 105, 118, 135;
|
|
121
|
+
--cat-color-theme-secondary-dark-bg-hover: 105, 118, 135;
|
|
122
|
+
--cat-color-theme-secondary-dark-bg-active: 105, 118, 135;
|
|
123
|
+
--cat-color-theme-secondary-dark-fill: 0, 0, 0;
|
|
124
|
+
--cat-color-theme-secondary-dark-fill-hover: 0, 0, 0;
|
|
125
|
+
--cat-color-theme-secondary-dark-fill-active: 0, 0, 0;
|
|
126
|
+
--cat-color-theme-secondary-dark-text: 255, 255, 255;
|
|
127
|
+
--cat-color-theme-secondary-dark-text-hover: 255, 255, 255;
|
|
128
|
+
--cat-color-theme-secondary-dark-text-active: 255, 255, 255;
|
|
107
129
|
--cat-color-theme-success-bg: 0, 132, 88;
|
|
108
130
|
--cat-color-theme-success-bg-hover: 0, 117, 78;
|
|
109
131
|
--cat-color-theme-success-bg-active: 0, 105, 70;
|
|
@@ -133,6 +155,7 @@
|
|
|
133
155
|
--cat-color-theme-danger-text-active: 174, 42, 10;
|
|
134
156
|
--cat-color-ui-background-canvas: 242, 244, 247;
|
|
135
157
|
--cat-color-ui-background-body: 255, 255, 255;
|
|
158
|
+
--cat-color-ui-background-body-dark: 27, 31, 38;
|
|
136
159
|
--cat-color-ui-background-muted: 235, 236, 240;
|
|
137
160
|
--cat-color-ui-background-input: 255, 255, 255;
|
|
138
161
|
--cat-color-ui-background-input-disabled: 242, 244, 247;
|
|
@@ -146,8 +169,11 @@
|
|
|
146
169
|
--cat-color-ui-border-dark: 215, 219, 224;
|
|
147
170
|
--cat-color-ui-border-focus: 0, 113, 255;
|
|
148
171
|
--cat-color-ui-font-head: 0, 0, 0;
|
|
172
|
+
--cat-color-ui-font-head-dark: 255, 255, 255;
|
|
149
173
|
--cat-color-ui-font-body: 0, 0, 0;
|
|
174
|
+
--cat-color-ui-font-body-dark: 255, 255, 255;
|
|
150
175
|
--cat-color-ui-font-mono: 0, 0, 0;
|
|
176
|
+
--cat-color-ui-font-mono-dark: 255, 255, 255;
|
|
151
177
|
--cat-color-ui-font-muted: 105, 118, 135;
|
|
152
178
|
--cat-color-ui-font-quote: 105, 118, 135;
|
|
153
179
|
--cat-color-ui-font-tooltip: 255, 255, 255;
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auto-generated file. Do not edit directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const assetFontDmSansName : string;
|
|
6
|
+
export const assetFontDmSansWoff2Bold : string;
|
|
7
|
+
export const assetFontDmSansWoff2BoldItalic : string;
|
|
8
|
+
export const assetFontDmSansWoff2Italic : string;
|
|
9
|
+
export const assetFontDmSansWoff2Medium : string;
|
|
10
|
+
export const assetFontDmSansWoff2MediumItalic : string;
|
|
11
|
+
export const assetFontDmSansWoff2Regular : string;
|
|
12
|
+
export const assetFontLatoName : string;
|
|
13
|
+
export const assetFontLatoWoffBlack : string;
|
|
14
|
+
export const assetFontLatoWoff2Black : string;
|
|
15
|
+
export const assetFontLatoWoffBlackItalic : string;
|
|
16
|
+
export const assetFontLatoWoff2BlackItalic : string;
|
|
17
|
+
export const assetFontLatoWoffBold : string;
|
|
18
|
+
export const assetFontLatoWoff2Bold : string;
|
|
19
|
+
export const assetFontLatoWoffBoldItalic : string;
|
|
20
|
+
export const assetFontLatoWoff2BoldItalic : string;
|
|
21
|
+
export const assetFontLatoWoffHairline : string;
|
|
22
|
+
export const assetFontLatoWoff2Hairline : string;
|
|
23
|
+
export const assetFontLatoWoffHairlineItalic : string;
|
|
24
|
+
export const assetFontLatoWoff2HairlineItalic : string;
|
|
25
|
+
export const assetFontLatoWoffHeavy : string;
|
|
26
|
+
export const assetFontLatoWoff2Heavy : string;
|
|
27
|
+
export const assetFontLatoWoffHeavyItalic : string;
|
|
28
|
+
export const assetFontLatoWoff2HeavyItalic : string;
|
|
29
|
+
export const assetFontLatoWoffItalic : string;
|
|
30
|
+
export const assetFontLatoWoff2Italic : string;
|
|
31
|
+
export const assetFontLatoWoffLight : string;
|
|
32
|
+
export const assetFontLatoWoff2Light : string;
|
|
33
|
+
export const assetFontLatoWoffLightItalic : string;
|
|
34
|
+
export const assetFontLatoWoff2LightItalic : string;
|
|
35
|
+
export const assetFontLatoWoffMedium : string;
|
|
36
|
+
export const assetFontLatoWoff2Medium : string;
|
|
37
|
+
export const assetFontLatoWoffMediumItalic : string;
|
|
38
|
+
export const assetFontLatoWoff2MediumItalic : string;
|
|
39
|
+
export const assetFontLatoWoffRegular : string;
|
|
40
|
+
export const assetFontLatoWoff2Regular : string;
|
|
41
|
+
export const assetFontLatoWoffSemibold : string;
|
|
42
|
+
export const assetFontLatoWoff2Semibold : string;
|
|
43
|
+
export const assetFontLatoWoffSemiboldItalic : string;
|
|
44
|
+
export const assetFontLatoWoff2SemiboldItalic : string;
|
|
45
|
+
export const assetFontLatoWoffThin : string;
|
|
46
|
+
export const assetFontLatoWoff2Thin : string;
|
|
47
|
+
export const assetFontLatoWoffThinItalic : string;
|
|
48
|
+
export const assetFontLatoWoff2ThinItalic : string;
|
|
49
|
+
export const assetFontAzeretMonoName : string;
|
|
50
|
+
export const assetFontAzeretMonoWoff2Regular : string;
|
|
51
|
+
export const colorBaseWhite : string;
|
|
52
|
+
export const colorBaseBlack : string;
|
|
53
|
+
export const colorBaseNeutral100 : string;
|
|
54
|
+
export const colorBaseNeutral200 : string;
|
|
55
|
+
export const colorBaseNeutral300 : string;
|
|
56
|
+
export const colorBaseNeutral400 : string;
|
|
57
|
+
export const colorBaseNeutral500 : string;
|
|
58
|
+
export const colorBaseNeutral600 : string;
|
|
59
|
+
export const colorBaseNeutral700 : string;
|
|
60
|
+
export const colorBaseNeutralDark400 : string;
|
|
61
|
+
export const colorBaseBrand100 : string;
|
|
62
|
+
export const colorBaseBrand200 : string;
|
|
63
|
+
export const colorBaseBrand300 : string;
|
|
64
|
+
export const colorBaseBrand400 : string;
|
|
65
|
+
export const colorBaseBrand500 : string;
|
|
66
|
+
export const colorBaseBrand600 : string;
|
|
67
|
+
export const colorBaseBrand700 : string;
|
|
68
|
+
export const colorBaseBrandDark400 : string;
|
|
69
|
+
export const colorBaseBrandDark500 : string;
|
|
70
|
+
export const colorBaseBrandDark600 : string;
|
|
71
|
+
export const colorBaseGreen100 : string;
|
|
72
|
+
export const colorBaseGreen200 : string;
|
|
73
|
+
export const colorBaseGreen300 : string;
|
|
74
|
+
export const colorBaseGreen400 : string;
|
|
75
|
+
export const colorBaseGreen500 : string;
|
|
76
|
+
export const colorBaseGreen600 : string;
|
|
77
|
+
export const colorBaseGreen700 : string;
|
|
78
|
+
export const colorBaseOrange100 : string;
|
|
79
|
+
export const colorBaseOrange200 : string;
|
|
80
|
+
export const colorBaseOrange300 : string;
|
|
81
|
+
export const colorBaseOrange400 : string;
|
|
82
|
+
export const colorBaseOrange500 : string;
|
|
83
|
+
export const colorBaseOrange600 : string;
|
|
84
|
+
export const colorBaseOrange700 : string;
|
|
85
|
+
export const colorBaseRed100 : string;
|
|
86
|
+
export const colorBaseRed200 : string;
|
|
87
|
+
export const colorBaseRed300 : string;
|
|
88
|
+
export const colorBaseRed400 : string;
|
|
89
|
+
export const colorBaseRed500 : string;
|
|
90
|
+
export const colorBaseRed600 : string;
|
|
91
|
+
export const colorBaseRed700 : string;
|
|
92
|
+
export const colorThemePrimaryBg : string;
|
|
93
|
+
export const colorThemePrimaryBgHover : string;
|
|
94
|
+
export const colorThemePrimaryBgActive : string;
|
|
95
|
+
export const colorThemePrimaryFill : string;
|
|
96
|
+
export const colorThemePrimaryFillHover : string;
|
|
97
|
+
export const colorThemePrimaryFillActive : string;
|
|
98
|
+
export const colorThemePrimaryText : string;
|
|
99
|
+
export const colorThemePrimaryTextHover : string;
|
|
100
|
+
export const colorThemePrimaryTextActive : string;
|
|
101
|
+
export const colorThemePrimaryDarkBg : string;
|
|
102
|
+
export const colorThemePrimaryDarkBgHover : string;
|
|
103
|
+
export const colorThemePrimaryDarkBgActive : string;
|
|
104
|
+
export const colorThemePrimaryDarkFill : string;
|
|
105
|
+
export const colorThemePrimaryDarkFillHover : string;
|
|
106
|
+
export const colorThemePrimaryDarkFillActive : string;
|
|
107
|
+
export const colorThemePrimaryDarkText : string;
|
|
108
|
+
export const colorThemePrimaryDarkTextHover : string;
|
|
109
|
+
export const colorThemePrimaryDarkTextActive : string;
|
|
110
|
+
export const colorThemeSecondaryBg : string;
|
|
111
|
+
export const colorThemeSecondaryBgHover : string;
|
|
112
|
+
export const colorThemeSecondaryBgActive : string;
|
|
113
|
+
export const colorThemeSecondaryFill : string;
|
|
114
|
+
export const colorThemeSecondaryFillHover : string;
|
|
115
|
+
export const colorThemeSecondaryFillActive : string;
|
|
116
|
+
export const colorThemeSecondaryText : string;
|
|
117
|
+
export const colorThemeSecondaryTextHover : string;
|
|
118
|
+
export const colorThemeSecondaryTextActive : string;
|
|
119
|
+
export const colorThemeSecondaryDarkBg : string;
|
|
120
|
+
export const colorThemeSecondaryDarkBgHover : string;
|
|
121
|
+
export const colorThemeSecondaryDarkBgActive : string;
|
|
122
|
+
export const colorThemeSecondaryDarkFill : string;
|
|
123
|
+
export const colorThemeSecondaryDarkFillHover : string;
|
|
124
|
+
export const colorThemeSecondaryDarkFillActive : string;
|
|
125
|
+
export const colorThemeSecondaryDarkText : string;
|
|
126
|
+
export const colorThemeSecondaryDarkTextHover : string;
|
|
127
|
+
export const colorThemeSecondaryDarkTextActive : string;
|
|
128
|
+
export const colorThemeSuccessBg : string;
|
|
129
|
+
export const colorThemeSuccessBgHover : string;
|
|
130
|
+
export const colorThemeSuccessBgActive : string;
|
|
131
|
+
export const colorThemeSuccessFill : string;
|
|
132
|
+
export const colorThemeSuccessFillHover : string;
|
|
133
|
+
export const colorThemeSuccessFillActive : string;
|
|
134
|
+
export const colorThemeSuccessText : string;
|
|
135
|
+
export const colorThemeSuccessTextHover : string;
|
|
136
|
+
export const colorThemeSuccessTextActive : string;
|
|
137
|
+
export const colorThemeWarningBg : string;
|
|
138
|
+
export const colorThemeWarningBgHover : string;
|
|
139
|
+
export const colorThemeWarningBgActive : string;
|
|
140
|
+
export const colorThemeWarningFill : string;
|
|
141
|
+
export const colorThemeWarningFillHover : string;
|
|
142
|
+
export const colorThemeWarningFillActive : string;
|
|
143
|
+
export const colorThemeWarningText : string;
|
|
144
|
+
export const colorThemeWarningTextHover : string;
|
|
145
|
+
export const colorThemeWarningTextActive : string;
|
|
146
|
+
export const colorThemeDangerBg : string;
|
|
147
|
+
export const colorThemeDangerBgHover : string;
|
|
148
|
+
export const colorThemeDangerBgActive : string;
|
|
149
|
+
export const colorThemeDangerFill : string;
|
|
150
|
+
export const colorThemeDangerFillHover : string;
|
|
151
|
+
export const colorThemeDangerFillActive : string;
|
|
152
|
+
export const colorThemeDangerText : string;
|
|
153
|
+
export const colorThemeDangerTextHover : string;
|
|
154
|
+
export const colorThemeDangerTextActive : string;
|
|
155
|
+
export const colorUiBackgroundCanvas : string;
|
|
156
|
+
export const colorUiBackgroundBody : string;
|
|
157
|
+
export const colorUiBackgroundBodyDark : string;
|
|
158
|
+
export const colorUiBackgroundMuted : string;
|
|
159
|
+
export const colorUiBackgroundInput : string;
|
|
160
|
+
export const colorUiBackgroundInputDisabled : string;
|
|
161
|
+
export const colorUiBackgroundSkeleton : string;
|
|
162
|
+
export const colorUiBackgroundSkeletonHighlight : string;
|
|
163
|
+
export const colorUiBackgroundTooltip : string;
|
|
164
|
+
export const colorUiBackgroundBackdrop : string;
|
|
165
|
+
export const colorUiBackgroundSelectPill : string;
|
|
166
|
+
export const colorUiBorderLight : string;
|
|
167
|
+
export const colorUiBorderDefault : string;
|
|
168
|
+
export const colorUiBorderDark : string;
|
|
169
|
+
export const colorUiBorderFocus : string;
|
|
170
|
+
export const colorUiFontHead : string;
|
|
171
|
+
export const colorUiFontHeadDark : string;
|
|
172
|
+
export const colorUiFontBody : string;
|
|
173
|
+
export const colorUiFontBodyDark : string;
|
|
174
|
+
export const colorUiFontMono : string;
|
|
175
|
+
export const colorUiFontMonoDark : string;
|
|
176
|
+
export const colorUiFontMuted : string;
|
|
177
|
+
export const colorUiFontQuote : string;
|
|
178
|
+
export const colorUiFontTooltip : string;
|
|
179
|
+
export const fontFamilyHead : string;
|
|
180
|
+
export const fontFamilyBody : string;
|
|
181
|
+
export const fontFamilyMono : string;
|
|
182
|
+
export const fontFamilyEmoji : string;
|
|
183
|
+
export const fontWeightHead : number;
|
|
184
|
+
export const fontWeightBody : number;
|
|
185
|
+
export const fontWeightMono : number;
|
|
186
|
+
export const fontDecorationLink : string;
|
|
187
|
+
export const fontDecorationLinkHover : string;
|
|
188
|
+
export const fontDecorationLinkButton : string;
|
|
189
|
+
export const fontDecorationLinkButtonHover : string;
|
|
190
|
+
export const opacityDisabled : number;
|
|
191
|
+
export const opacityBackdrop : number;
|
|
192
|
+
export const opacityTooltip : number;
|
|
193
|
+
export const sizeBorderRadiusL : string;
|
|
194
|
+
export const sizeBorderRadiusM : string;
|
|
195
|
+
export const sizeBorderRadiusS : string;
|
|
196
|
+
export const sizeFontHead1 : string;
|
|
197
|
+
export const sizeFontHead2 : string;
|
|
198
|
+
export const sizeFontHead3 : string;
|
|
199
|
+
export const sizeFontHead4 : string;
|
|
200
|
+
export const sizeFontHead5 : string;
|
|
201
|
+
export const sizeFontHead6 : string;
|
|
202
|
+
export const sizeFontBodyXl : string;
|
|
203
|
+
export const sizeFontBodyL : string;
|
|
204
|
+
export const sizeFontBodyM : string;
|
|
205
|
+
export const sizeFontBodyS : string;
|
|
206
|
+
export const sizeFontBodyXs : string;
|
|
207
|
+
export const sizeFontMonoXl : string;
|
|
208
|
+
export const sizeFontMonoL : string;
|
|
209
|
+
export const sizeFontMonoM : string;
|
|
210
|
+
export const sizeFontMonoS : string;
|
|
211
|
+
export const sizeFontMonoXs : string;
|
|
212
|
+
export const sizeLineHead1 : string;
|
|
213
|
+
export const sizeLineHead2 : string;
|
|
214
|
+
export const sizeLineHead3 : string;
|
|
215
|
+
export const sizeLineHead4 : string;
|
|
216
|
+
export const sizeLineHead5 : string;
|
|
217
|
+
export const sizeLineHead6 : string;
|
|
218
|
+
export const sizeLineBodyXl : string;
|
|
219
|
+
export const sizeLineBodyL : string;
|
|
220
|
+
export const sizeLineBodyM : string;
|
|
221
|
+
export const sizeLineBodyS : string;
|
|
222
|
+
export const sizeLineBodyXs : string;
|
|
223
|
+
export const sizeLineMonoXl : string;
|
|
224
|
+
export const sizeLineMonoL : string;
|
|
225
|
+
export const sizeLineMonoM : string;
|
|
226
|
+
export const sizeLineMonoS : string;
|
|
227
|
+
export const sizeLineMonoXs : string;
|
|
228
|
+
export const sizeModalS : string;
|
|
229
|
+
export const sizeModalM : string;
|
|
230
|
+
export const sizeModalL : string;
|
|
231
|
+
export const sizeScreenXs : string;
|
|
232
|
+
export const sizeScreenS : string;
|
|
233
|
+
export const sizeScreenM : string;
|
|
234
|
+
export const sizeScreenL : string;
|
|
235
|
+
export const sizeScreenXl : string;
|
|
236
|
+
export const sizeSpacingXl : string;
|
|
237
|
+
export const sizeSpacingL : string;
|
|
238
|
+
export const sizeSpacingM : string;
|
|
239
|
+
export const sizeSpacingS : string;
|
|
240
|
+
export const sizeSpacingXs : string;
|
|
241
|
+
export const timeTransitionL : number;
|
|
242
|
+
export const timeTransitionM : number;
|
|
243
|
+
export const timeTransitionS : number;
|
|
244
|
+
export const timeDelayL : number;
|
|
245
|
+
export const timeDelayM : number;
|
|
246
|
+
export const timeDelayS : number;
|
|
247
|
+
export const timeDurationL : number;
|
|
248
|
+
export const timeDurationM : number;
|
|
249
|
+
export const timeDurationS : number;
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auto-generated file. Do not edit directly.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const assetFontDmSansName = "DM Sans";
|
|
6
|
+
export const assetFontDmSansWoff2Bold = "DMSans-Bold.woff2";
|
|
7
|
+
export const assetFontDmSansWoff2BoldItalic = "DMSans-BoldItalic.woff2";
|
|
8
|
+
export const assetFontDmSansWoff2Italic = "DMSans-Italic.woff2";
|
|
9
|
+
export const assetFontDmSansWoff2Medium = "DMSans-Medium.woff2";
|
|
10
|
+
export const assetFontDmSansWoff2MediumItalic = "DMSans-MediumItalic.woff2";
|
|
11
|
+
export const assetFontDmSansWoff2Regular = "DMSans-Regular.woff2";
|
|
12
|
+
export const assetFontLatoName = "Lato";
|
|
13
|
+
export const assetFontLatoWoffBlack = "Lato-Black.woff";
|
|
14
|
+
export const assetFontLatoWoff2Black = "Lato-Black.woff2";
|
|
15
|
+
export const assetFontLatoWoffBlackItalic = "Lato-BlackItalic.woff";
|
|
16
|
+
export const assetFontLatoWoff2BlackItalic = "Lato-BlackItalic.woff2";
|
|
17
|
+
export const assetFontLatoWoffBold = "Lato-Bold.woff";
|
|
18
|
+
export const assetFontLatoWoff2Bold = "Lato-Bold.woff2";
|
|
19
|
+
export const assetFontLatoWoffBoldItalic = "Lato-BoldItalic.woff";
|
|
20
|
+
export const assetFontLatoWoff2BoldItalic = "Lato-BoldItalic.woff2";
|
|
21
|
+
export const assetFontLatoWoffHairline = "Lato-Hairline.woff";
|
|
22
|
+
export const assetFontLatoWoff2Hairline = "Lato-Hairline.woff2";
|
|
23
|
+
export const assetFontLatoWoffHairlineItalic = "Lato-HairlineItalic.woff";
|
|
24
|
+
export const assetFontLatoWoff2HairlineItalic = "Lato-HairlineItalic.woff2";
|
|
25
|
+
export const assetFontLatoWoffHeavy = "Lato-Heavy.woff";
|
|
26
|
+
export const assetFontLatoWoff2Heavy = "Lato-Heavy.woff2";
|
|
27
|
+
export const assetFontLatoWoffHeavyItalic = "Lato-HeavyItalic.woff";
|
|
28
|
+
export const assetFontLatoWoff2HeavyItalic = "Lato-HeavyItalic.woff2";
|
|
29
|
+
export const assetFontLatoWoffItalic = "Lato-Italic.woff";
|
|
30
|
+
export const assetFontLatoWoff2Italic = "Lato-Italic.woff2";
|
|
31
|
+
export const assetFontLatoWoffLight = "Lato-Light.woff";
|
|
32
|
+
export const assetFontLatoWoff2Light = "Lato-Light.woff2";
|
|
33
|
+
export const assetFontLatoWoffLightItalic = "Lato-LightItalic.woff";
|
|
34
|
+
export const assetFontLatoWoff2LightItalic = "Lato-LightItalic.woff2";
|
|
35
|
+
export const assetFontLatoWoffMedium = "Lato-Medium.woff";
|
|
36
|
+
export const assetFontLatoWoff2Medium = "Lato-Medium.woff2";
|
|
37
|
+
export const assetFontLatoWoffMediumItalic = "Lato-MediumItalic.woff";
|
|
38
|
+
export const assetFontLatoWoff2MediumItalic = "Lato-MediumItalic.woff2";
|
|
39
|
+
export const assetFontLatoWoffRegular = "Lato-Regular.woff";
|
|
40
|
+
export const assetFontLatoWoff2Regular = "Lato-Regular.woff2";
|
|
41
|
+
export const assetFontLatoWoffSemibold = "Lato-Semibold.woff";
|
|
42
|
+
export const assetFontLatoWoff2Semibold = "Lato-Semibold.woff2";
|
|
43
|
+
export const assetFontLatoWoffSemiboldItalic = "Lato-SemiboldItalic.woff";
|
|
44
|
+
export const assetFontLatoWoff2SemiboldItalic = "Lato-SemiboldItalic.woff2";
|
|
45
|
+
export const assetFontLatoWoffThin = "Lato-Thin.woff";
|
|
46
|
+
export const assetFontLatoWoff2Thin = "Lato-Thin.woff2";
|
|
47
|
+
export const assetFontLatoWoffThinItalic = "Lato-ThinItalic.woff";
|
|
48
|
+
export const assetFontLatoWoff2ThinItalic = "Lato-ThinItalic.woff2";
|
|
49
|
+
export const assetFontAzeretMonoName = "Azeret Mono";
|
|
50
|
+
export const assetFontAzeretMonoWoff2Regular = "AzeretMono-Regular.woff2";
|
|
51
|
+
export const colorBaseWhite = "#ffffff";
|
|
52
|
+
export const colorBaseBlack = "#000000";
|
|
53
|
+
export const colorBaseNeutral100 = "#f2f4f7";
|
|
54
|
+
export const colorBaseNeutral200 = "#ebecf0";
|
|
55
|
+
export const colorBaseNeutral300 = "#d7dbe0";
|
|
56
|
+
export const colorBaseNeutral400 = "#697687";
|
|
57
|
+
export const colorBaseNeutral500 = "#515c6c";
|
|
58
|
+
export const colorBaseNeutral600 = "#394251";
|
|
59
|
+
export const colorBaseNeutral700 = "#1b1f26";
|
|
60
|
+
export const colorBaseNeutralDark400 = "#697687";
|
|
61
|
+
export const colorBaseBrand100 = "#c9e5e8";
|
|
62
|
+
export const colorBaseBrand200 = "#2db3c3";
|
|
63
|
+
export const colorBaseBrand300 = "#29a3b1";
|
|
64
|
+
export const colorBaseBrand400 = "#008194";
|
|
65
|
+
export const colorBaseBrand500 = "#017384";
|
|
66
|
+
export const colorBaseBrand600 = "#026371";
|
|
67
|
+
export const colorBaseBrand700 = "#175b63";
|
|
68
|
+
export const colorBaseBrandDark400 = "#93b4f2";
|
|
69
|
+
export const colorBaseBrandDark500 = "#93b4f2";
|
|
70
|
+
export const colorBaseBrandDark600 = "#93b4f2";
|
|
71
|
+
export const colorBaseGreen100 = "#d4ede4";
|
|
72
|
+
export const colorBaseGreen200 = "#00bb7d";
|
|
73
|
+
export const colorBaseGreen300 = "#00aa71";
|
|
74
|
+
export const colorBaseGreen400 = "#008458";
|
|
75
|
+
export const colorBaseGreen500 = "#00754e";
|
|
76
|
+
export const colorBaseGreen600 = "#006946";
|
|
77
|
+
export const colorBaseGreen700 = "#005f40";
|
|
78
|
+
export const colorBaseOrange100 = "#ffdea8";
|
|
79
|
+
export const colorBaseOrange200 = "#ffd694";
|
|
80
|
+
export const colorBaseOrange300 = "#ffce80";
|
|
81
|
+
export const colorBaseOrange400 = "#ebb663";
|
|
82
|
+
export const colorBaseOrange500 = "#d6a75a";
|
|
83
|
+
export const colorBaseOrange600 = "#b0853e";
|
|
84
|
+
export const colorBaseOrange700 = "#9f6100";
|
|
85
|
+
export const colorBaseRed100 = "#fbc7bb";
|
|
86
|
+
export const colorBaseRed200 = "#f68368";
|
|
87
|
+
export const colorBaseRed300 = "#f46a49";
|
|
88
|
+
export const colorBaseRed400 = "#d9340d";
|
|
89
|
+
export const colorBaseRed500 = "#c22e0b";
|
|
90
|
+
export const colorBaseRed600 = "#ae2a0a";
|
|
91
|
+
export const colorBaseRed700 = "#9e2609";
|
|
92
|
+
export const colorThemePrimaryBg = "#008194";
|
|
93
|
+
export const colorThemePrimaryBgHover = "#017384";
|
|
94
|
+
export const colorThemePrimaryBgActive = "#026371";
|
|
95
|
+
export const colorThemePrimaryFill = "#ffffff";
|
|
96
|
+
export const colorThemePrimaryFillHover = "#ffffff";
|
|
97
|
+
export const colorThemePrimaryFillActive = "#ffffff";
|
|
98
|
+
export const colorThemePrimaryText = "#008194";
|
|
99
|
+
export const colorThemePrimaryTextHover = "#017384";
|
|
100
|
+
export const colorThemePrimaryTextActive = "#026371";
|
|
101
|
+
export const colorThemePrimaryDarkBg = "#93b4f2";
|
|
102
|
+
export const colorThemePrimaryDarkBgHover = "#93b4f2";
|
|
103
|
+
export const colorThemePrimaryDarkBgActive = "#93b4f2";
|
|
104
|
+
export const colorThemePrimaryDarkFill = "#000000";
|
|
105
|
+
export const colorThemePrimaryDarkFillHover = "#000000";
|
|
106
|
+
export const colorThemePrimaryDarkFillActive = "#000000";
|
|
107
|
+
export const colorThemePrimaryDarkText = "#93b4f2";
|
|
108
|
+
export const colorThemePrimaryDarkTextHover = "#93b4f2";
|
|
109
|
+
export const colorThemePrimaryDarkTextActive = "#93b4f2";
|
|
110
|
+
export const colorThemeSecondaryBg = "#697687";
|
|
111
|
+
export const colorThemeSecondaryBgHover = "#697687";
|
|
112
|
+
export const colorThemeSecondaryBgActive = "#697687";
|
|
113
|
+
export const colorThemeSecondaryFill = "#ffffff";
|
|
114
|
+
export const colorThemeSecondaryFillHover = "#ffffff";
|
|
115
|
+
export const colorThemeSecondaryFillActive = "#ffffff";
|
|
116
|
+
export const colorThemeSecondaryText = "#000000";
|
|
117
|
+
export const colorThemeSecondaryTextHover = "#000000";
|
|
118
|
+
export const colorThemeSecondaryTextActive = "#000000";
|
|
119
|
+
export const colorThemeSecondaryDarkBg = "#697687";
|
|
120
|
+
export const colorThemeSecondaryDarkBgHover = "#697687";
|
|
121
|
+
export const colorThemeSecondaryDarkBgActive = "#697687";
|
|
122
|
+
export const colorThemeSecondaryDarkFill = "#000000";
|
|
123
|
+
export const colorThemeSecondaryDarkFillHover = "#000000";
|
|
124
|
+
export const colorThemeSecondaryDarkFillActive = "#000000";
|
|
125
|
+
export const colorThemeSecondaryDarkText = "#ffffff";
|
|
126
|
+
export const colorThemeSecondaryDarkTextHover = "#ffffff";
|
|
127
|
+
export const colorThemeSecondaryDarkTextActive = "#ffffff";
|
|
128
|
+
export const colorThemeSuccessBg = "#008458";
|
|
129
|
+
export const colorThemeSuccessBgHover = "#00754e";
|
|
130
|
+
export const colorThemeSuccessBgActive = "#006946";
|
|
131
|
+
export const colorThemeSuccessFill = "#ffffff";
|
|
132
|
+
export const colorThemeSuccessFillHover = "#ffffff";
|
|
133
|
+
export const colorThemeSuccessFillActive = "#ffffff";
|
|
134
|
+
export const colorThemeSuccessText = "#008458";
|
|
135
|
+
export const colorThemeSuccessTextHover = "#00754e";
|
|
136
|
+
export const colorThemeSuccessTextActive = "#006946";
|
|
137
|
+
export const colorThemeWarningBg = "#ffce80";
|
|
138
|
+
export const colorThemeWarningBgHover = "#ffd694";
|
|
139
|
+
export const colorThemeWarningBgActive = "#ffdea8";
|
|
140
|
+
export const colorThemeWarningFill = "#000000";
|
|
141
|
+
export const colorThemeWarningFillHover = "#000000";
|
|
142
|
+
export const colorThemeWarningFillActive = "#000000";
|
|
143
|
+
export const colorThemeWarningText = "#9f6100";
|
|
144
|
+
export const colorThemeWarningTextHover = "#9f6100";
|
|
145
|
+
export const colorThemeWarningTextActive = "#9f6100";
|
|
146
|
+
export const colorThemeDangerBg = "#d9340d";
|
|
147
|
+
export const colorThemeDangerBgHover = "#c22e0b";
|
|
148
|
+
export const colorThemeDangerBgActive = "#ae2a0a";
|
|
149
|
+
export const colorThemeDangerFill = "#ffffff";
|
|
150
|
+
export const colorThemeDangerFillHover = "#ffffff";
|
|
151
|
+
export const colorThemeDangerFillActive = "#ffffff";
|
|
152
|
+
export const colorThemeDangerText = "#d9340d";
|
|
153
|
+
export const colorThemeDangerTextHover = "#c22e0b";
|
|
154
|
+
export const colorThemeDangerTextActive = "#ae2a0a";
|
|
155
|
+
export const colorUiBackgroundCanvas = "#f2f4f7";
|
|
156
|
+
export const colorUiBackgroundBody = "#ffffff";
|
|
157
|
+
export const colorUiBackgroundBodyDark = "#1b1f26";
|
|
158
|
+
export const colorUiBackgroundMuted = "#ebecf0";
|
|
159
|
+
export const colorUiBackgroundInput = "#ffffff";
|
|
160
|
+
export const colorUiBackgroundInputDisabled = "#f2f4f7";
|
|
161
|
+
export const colorUiBackgroundSkeleton = "#ebecf0";
|
|
162
|
+
export const colorUiBackgroundSkeletonHighlight = "#d7dbe0";
|
|
163
|
+
export const colorUiBackgroundTooltip = "#000000";
|
|
164
|
+
export const colorUiBackgroundBackdrop = "#000000";
|
|
165
|
+
export const colorUiBackgroundSelectPill = "#f2f4f7";
|
|
166
|
+
export const colorUiBorderLight = "#f2f4f7";
|
|
167
|
+
export const colorUiBorderDefault = "#ebecf0";
|
|
168
|
+
export const colorUiBorderDark = "#d7dbe0";
|
|
169
|
+
export const colorUiBorderFocus = "#0071ff";
|
|
170
|
+
export const colorUiFontHead = "#000000";
|
|
171
|
+
export const colorUiFontHeadDark = "#ffffff";
|
|
172
|
+
export const colorUiFontBody = "#000000";
|
|
173
|
+
export const colorUiFontBodyDark = "#ffffff";
|
|
174
|
+
export const colorUiFontMono = "#000000";
|
|
175
|
+
export const colorUiFontMonoDark = "#ffffff";
|
|
176
|
+
export const colorUiFontMuted = "#697687";
|
|
177
|
+
export const colorUiFontQuote = "#697687";
|
|
178
|
+
export const colorUiFontTooltip = "#ffffff";
|
|
179
|
+
export const fontFamilyHead = "Lato";
|
|
180
|
+
export const fontFamilyBody = "Lato";
|
|
181
|
+
export const fontFamilyMono = "Azeret Mono";
|
|
182
|
+
export const fontFamilyEmoji = "''";
|
|
183
|
+
export const fontWeightHead = 500;
|
|
184
|
+
export const fontWeightBody = 400;
|
|
185
|
+
export const fontWeightMono = 400;
|
|
186
|
+
export const fontDecorationLink = "none";
|
|
187
|
+
export const fontDecorationLinkHover = "underline";
|
|
188
|
+
export const fontDecorationLinkButton = "none";
|
|
189
|
+
export const fontDecorationLinkButtonHover = "none";
|
|
190
|
+
export const opacityDisabled = 0.65;
|
|
191
|
+
export const opacityBackdrop = 0.6;
|
|
192
|
+
export const opacityTooltip = 1;
|
|
193
|
+
export const sizeBorderRadiusL = "0.5rem";
|
|
194
|
+
export const sizeBorderRadiusM = "0.25rem";
|
|
195
|
+
export const sizeBorderRadiusS = "0.125rem";
|
|
196
|
+
export const sizeFontHead1 = "1.75rem";
|
|
197
|
+
export const sizeFontHead2 = "1.5rem";
|
|
198
|
+
export const sizeFontHead3 = "1.25rem";
|
|
199
|
+
export const sizeFontHead4 = "1.125rem";
|
|
200
|
+
export const sizeFontHead5 = "0.9375rem";
|
|
201
|
+
export const sizeFontHead6 = "0.875rem";
|
|
202
|
+
export const sizeFontBodyXl = "1.25rem";
|
|
203
|
+
export const sizeFontBodyL = "1.125rem";
|
|
204
|
+
export const sizeFontBodyM = "0.9375rem";
|
|
205
|
+
export const sizeFontBodyS = "0.875rem";
|
|
206
|
+
export const sizeFontBodyXs = "0.75rem";
|
|
207
|
+
export const sizeFontMonoXl = "1.125rem";
|
|
208
|
+
export const sizeFontMonoL = "0.9375rem";
|
|
209
|
+
export const sizeFontMonoM = "0.875rem";
|
|
210
|
+
export const sizeFontMonoS = "0.75rem";
|
|
211
|
+
export const sizeFontMonoXs = "0.625rem";
|
|
212
|
+
export const sizeLineHead1 = "2rem";
|
|
213
|
+
export const sizeLineHead2 = "1.75rem";
|
|
214
|
+
export const sizeLineHead3 = "1.5rem";
|
|
215
|
+
export const sizeLineHead4 = "1.5rem";
|
|
216
|
+
export const sizeLineHead5 = "1.25rem";
|
|
217
|
+
export const sizeLineHead6 = "1rem";
|
|
218
|
+
export const sizeLineBodyXl = "1.5rem";
|
|
219
|
+
export const sizeLineBodyL = "1.5rem";
|
|
220
|
+
export const sizeLineBodyM = "1.25rem";
|
|
221
|
+
export const sizeLineBodyS = "1rem";
|
|
222
|
+
export const sizeLineBodyXs = "1rem";
|
|
223
|
+
export const sizeLineMonoXl = "1.5rem";
|
|
224
|
+
export const sizeLineMonoL = "1.25rem";
|
|
225
|
+
export const sizeLineMonoM = "1.125rem";
|
|
226
|
+
export const sizeLineMonoS = "1rem";
|
|
227
|
+
export const sizeLineMonoXs = "0.875rem";
|
|
228
|
+
export const sizeModalS = "400rem";
|
|
229
|
+
export const sizeModalM = "600rem";
|
|
230
|
+
export const sizeModalL = "800rem";
|
|
231
|
+
export const sizeScreenXs = "540rem";
|
|
232
|
+
export const sizeScreenS = "768rem";
|
|
233
|
+
export const sizeScreenM = "992rem";
|
|
234
|
+
export const sizeScreenL = "1200rem";
|
|
235
|
+
export const sizeScreenXl = "1400rem";
|
|
236
|
+
export const sizeSpacingXl = "2rem";
|
|
237
|
+
export const sizeSpacingL = "1.5rem";
|
|
238
|
+
export const sizeSpacingM = "1rem";
|
|
239
|
+
export const sizeSpacingS = "0.5rem";
|
|
240
|
+
export const sizeSpacingXs = "0.25rem";
|
|
241
|
+
export const timeTransitionL = 500;
|
|
242
|
+
export const timeTransitionM = 250;
|
|
243
|
+
export const timeTransitionS = 125;
|
|
244
|
+
export const timeDelayL = 500;
|
|
245
|
+
export const timeDelayM = 250;
|
|
246
|
+
export const timeDelayS = 125;
|
|
247
|
+
export const timeDurationL = 1000;
|
|
248
|
+
export const timeDurationM = 500;
|
|
249
|
+
export const timeDurationS = 250;
|
|
@@ -94,6 +94,9 @@ $cat-color-base-green-400: 0, 132, 88 !default;
|
|
|
94
94
|
$cat-color-base-green-300: 0, 170, 113 !default;
|
|
95
95
|
$cat-color-base-green-200: 0, 187, 125 !default;
|
|
96
96
|
$cat-color-base-green-100: 212, 237, 228 !default;
|
|
97
|
+
$cat-color-base-brand-dark-600: 147, 180, 242 !default;
|
|
98
|
+
$cat-color-base-brand-dark-500: 147, 180, 242 !default;
|
|
99
|
+
$cat-color-base-brand-dark-400: 147, 180, 242 !default;
|
|
97
100
|
$cat-color-base-brand-700: 23, 91, 99 !default;
|
|
98
101
|
$cat-color-base-brand-600: 2, 99, 113 !default;
|
|
99
102
|
$cat-color-base-brand-500: 1, 115, 132 !default;
|
|
@@ -101,6 +104,7 @@ $cat-color-base-brand-400: 0, 129, 148 !default;
|
|
|
101
104
|
$cat-color-base-brand-300: 41, 163, 177 !default;
|
|
102
105
|
$cat-color-base-brand-200: 45, 179, 195 !default;
|
|
103
106
|
$cat-color-base-brand-100: 201, 229, 232 !default;
|
|
107
|
+
$cat-color-base-neutral-dark-400: 105, 118, 135 !default;
|
|
104
108
|
$cat-color-base-neutral-700: 27, 31, 38 !default;
|
|
105
109
|
$cat-color-base-neutral-600: 57, 66, 81 !default;
|
|
106
110
|
$cat-color-base-neutral-500: 81, 92, 108 !default;
|
|
@@ -162,8 +166,11 @@ $cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-lato-name) !d
|
|
|
162
166
|
$cat-color-ui-font-tooltip: var(--cat-font-color-tooltip, $cat-color-base-white) !default;
|
|
163
167
|
$cat-color-ui-font-quote: var(--cat-font-color-quote, $cat-color-base-neutral-400) !default;
|
|
164
168
|
$cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
|
|
169
|
+
$cat-color-ui-font-mono-dark: $cat-color-base-white !default;
|
|
165
170
|
$cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-black) !default;
|
|
171
|
+
$cat-color-ui-font-body-dark: $cat-color-base-white !default;
|
|
166
172
|
$cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-black) !default;
|
|
173
|
+
$cat-color-ui-font-head-dark: $cat-color-base-white !default;
|
|
167
174
|
$cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-black) !default;
|
|
168
175
|
$cat-color-ui-border-dark: var(--cat-border-color-dark, $cat-color-base-neutral-300) !default;
|
|
169
176
|
$cat-color-ui-border-default: var(--cat-border-color, $cat-color-base-neutral-200) !default;
|
|
@@ -175,6 +182,7 @@ $cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
|
|
|
175
182
|
$cat-color-ui-background-input-disabled: $cat-color-base-neutral-100 !default;
|
|
176
183
|
$cat-color-ui-background-input: $cat-color-base-white !default;
|
|
177
184
|
$cat-color-ui-background-muted: $cat-color-base-neutral-200 !default;
|
|
185
|
+
$cat-color-ui-background-body-dark: $cat-color-base-neutral-700 !default;
|
|
178
186
|
$cat-color-ui-background-body: $cat-color-base-white !default;
|
|
179
187
|
$cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
|
|
180
188
|
$cat-color-theme-danger-text-active: var(--cat-danger-text-active, $cat-color-base-red-600) !default;
|
|
@@ -204,6 +212,15 @@ $cat-color-theme-success-fill: var(--cat-success-fill, $cat-color-base-white) !d
|
|
|
204
212
|
$cat-color-theme-success-bg-active: var(--cat-success-bg-active, $cat-color-base-green-600) !default;
|
|
205
213
|
$cat-color-theme-success-bg-hover: var(--cat-success-bg-hover, $cat-color-base-green-500) !default;
|
|
206
214
|
$cat-color-theme-success-bg: var(--cat-success-bg-, $cat-color-base-green-400) !default;
|
|
215
|
+
$cat-color-theme-secondary-dark-text-active: $cat-color-base-white !default;
|
|
216
|
+
$cat-color-theme-secondary-dark-text-hover: $cat-color-base-white !default;
|
|
217
|
+
$cat-color-theme-secondary-dark-text: $cat-color-base-white !default;
|
|
218
|
+
$cat-color-theme-secondary-dark-fill-active: $cat-color-base-black !default;
|
|
219
|
+
$cat-color-theme-secondary-dark-fill-hover: $cat-color-base-black !default;
|
|
220
|
+
$cat-color-theme-secondary-dark-fill: $cat-color-base-black !default;
|
|
221
|
+
$cat-color-theme-secondary-dark-bg-active: $cat-color-base-neutral-dark-400 !default;
|
|
222
|
+
$cat-color-theme-secondary-dark-bg-hover: $cat-color-base-neutral-dark-400 !default;
|
|
223
|
+
$cat-color-theme-secondary-dark-bg: $cat-color-base-neutral-dark-400 !default;
|
|
207
224
|
$cat-color-theme-secondary-text-active: var(--cat-secondary-text-active, $cat-color-base-black) !default;
|
|
208
225
|
$cat-color-theme-secondary-text-hover: var(--cat-secondary-text-hover, $cat-color-base-black) !default;
|
|
209
226
|
$cat-color-theme-secondary-text: var(--cat-secondary-text, $cat-color-base-black) !default;
|
|
@@ -213,6 +230,15 @@ $cat-color-theme-secondary-fill: var(--cat-secondary-fill, $cat-color-base-white
|
|
|
213
230
|
$cat-color-theme-secondary-bg-active: var(--cat-secondary-bg-active, $cat-color-base-neutral-400) !default;
|
|
214
231
|
$cat-color-theme-secondary-bg-hover: var(--cat-secondary-bg-hover, $cat-color-base-neutral-400) !default;
|
|
215
232
|
$cat-color-theme-secondary-bg: var(--cat-secondary-bg, $cat-color-base-neutral-400) !default;
|
|
233
|
+
$cat-color-theme-primary-dark-text-active: $cat-color-base-brand-dark-600 !default;
|
|
234
|
+
$cat-color-theme-primary-dark-text-hover: $cat-color-base-brand-dark-500 !default;
|
|
235
|
+
$cat-color-theme-primary-dark-text: $cat-color-base-brand-dark-400 !default;
|
|
236
|
+
$cat-color-theme-primary-dark-fill-active: $cat-color-base-black !default;
|
|
237
|
+
$cat-color-theme-primary-dark-fill-hover: $cat-color-base-black !default;
|
|
238
|
+
$cat-color-theme-primary-dark-fill: $cat-color-base-black !default;
|
|
239
|
+
$cat-color-theme-primary-dark-bg-active: $cat-color-base-brand-dark-600 !default;
|
|
240
|
+
$cat-color-theme-primary-dark-bg-hover: $cat-color-base-brand-dark-500 !default;
|
|
241
|
+
$cat-color-theme-primary-dark-bg: $cat-color-base-brand-dark-400 !default;
|
|
216
242
|
$cat-color-theme-primary-text-active: var(--cat-primary-text-active, $cat-color-base-brand-600) !default;
|
|
217
243
|
$cat-color-theme-primary-text-hover: var(--cat-primary-text-hover, $cat-color-base-brand-500) !default;
|
|
218
244
|
$cat-color-theme-primary-text: var(--cat-primary-text, $cat-color-base-brand-400) !default;
|
|
@@ -293,6 +319,9 @@ $tokens: (
|
|
|
293
319
|
'600': $cat-color-base-neutral-600,
|
|
294
320
|
'700': $cat-color-base-neutral-700
|
|
295
321
|
),
|
|
322
|
+
'neutralDark': (
|
|
323
|
+
'400': $cat-color-base-neutral-dark-400
|
|
324
|
+
),
|
|
296
325
|
'brand': (
|
|
297
326
|
'100': $cat-color-base-brand-100,
|
|
298
327
|
'200': $cat-color-base-brand-200,
|
|
@@ -302,6 +331,11 @@ $tokens: (
|
|
|
302
331
|
'600': $cat-color-base-brand-600,
|
|
303
332
|
'700': $cat-color-base-brand-700
|
|
304
333
|
),
|
|
334
|
+
'brandDark': (
|
|
335
|
+
'400': $cat-color-base-brand-dark-400,
|
|
336
|
+
'500': $cat-color-base-brand-dark-500,
|
|
337
|
+
'600': $cat-color-base-brand-dark-600
|
|
338
|
+
),
|
|
305
339
|
'green': (
|
|
306
340
|
'100': $cat-color-base-green-100,
|
|
307
341
|
'200': $cat-color-base-green-200,
|
|
@@ -342,6 +376,17 @@ $tokens: (
|
|
|
342
376
|
'textHover': $cat-color-theme-primary-text-hover,
|
|
343
377
|
'textActive': $cat-color-theme-primary-text-active
|
|
344
378
|
),
|
|
379
|
+
'primaryDark': (
|
|
380
|
+
'bg': $cat-color-theme-primary-dark-bg,
|
|
381
|
+
'bgHover': $cat-color-theme-primary-dark-bg-hover,
|
|
382
|
+
'bgActive': $cat-color-theme-primary-dark-bg-active,
|
|
383
|
+
'fill': $cat-color-theme-primary-dark-fill,
|
|
384
|
+
'fillHover': $cat-color-theme-primary-dark-fill-hover,
|
|
385
|
+
'fillActive': $cat-color-theme-primary-dark-fill-active,
|
|
386
|
+
'text': $cat-color-theme-primary-dark-text,
|
|
387
|
+
'textHover': $cat-color-theme-primary-dark-text-hover,
|
|
388
|
+
'textActive': $cat-color-theme-primary-dark-text-active
|
|
389
|
+
),
|
|
345
390
|
'secondary': (
|
|
346
391
|
'bg': $cat-color-theme-secondary-bg,
|
|
347
392
|
'bgHover': $cat-color-theme-secondary-bg-hover,
|
|
@@ -353,6 +398,17 @@ $tokens: (
|
|
|
353
398
|
'textHover': $cat-color-theme-secondary-text-hover,
|
|
354
399
|
'textActive': $cat-color-theme-secondary-text-active
|
|
355
400
|
),
|
|
401
|
+
'secondaryDark': (
|
|
402
|
+
'bg': $cat-color-theme-secondary-dark-bg,
|
|
403
|
+
'bgHover': $cat-color-theme-secondary-dark-bg-hover,
|
|
404
|
+
'bgActive': $cat-color-theme-secondary-dark-bg-active,
|
|
405
|
+
'fill': $cat-color-theme-secondary-dark-fill,
|
|
406
|
+
'fillHover': $cat-color-theme-secondary-dark-fill-hover,
|
|
407
|
+
'fillActive': $cat-color-theme-secondary-dark-fill-active,
|
|
408
|
+
'text': $cat-color-theme-secondary-dark-text,
|
|
409
|
+
'textHover': $cat-color-theme-secondary-dark-text-hover,
|
|
410
|
+
'textActive': $cat-color-theme-secondary-dark-text-active
|
|
411
|
+
),
|
|
356
412
|
'success': (
|
|
357
413
|
'bg': $cat-color-theme-success-bg,
|
|
358
414
|
'bgHover': $cat-color-theme-success-bg-hover,
|
|
@@ -391,6 +447,7 @@ $tokens: (
|
|
|
391
447
|
'background': (
|
|
392
448
|
'canvas': $cat-color-ui-background-canvas,
|
|
393
449
|
'body': $cat-color-ui-background-body,
|
|
450
|
+
'bodyDark': $cat-color-ui-background-body-dark,
|
|
394
451
|
'muted': $cat-color-ui-background-muted,
|
|
395
452
|
'input': $cat-color-ui-background-input,
|
|
396
453
|
'inputDisabled': $cat-color-ui-background-input-disabled,
|
|
@@ -410,8 +467,11 @@ $tokens: (
|
|
|
410
467
|
),
|
|
411
468
|
'font': (
|
|
412
469
|
'head': $cat-color-ui-font-head,
|
|
470
|
+
'headDark': $cat-color-ui-font-head-dark,
|
|
413
471
|
'body': $cat-color-ui-font-body,
|
|
472
|
+
'bodyDark': $cat-color-ui-font-body-dark,
|
|
414
473
|
'mono': $cat-color-ui-font-mono,
|
|
474
|
+
'monoDark': $cat-color-ui-font-mono-dark,
|
|
415
475
|
'muted': $cat-color-ui-font-muted,
|
|
416
476
|
'quote': $cat-color-ui-font-quote,
|
|
417
477
|
'tooltip': $cat-color-ui-font-tooltip
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst-tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Design tokens for Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
"dist",
|
|
12
12
|
"assets"
|
|
13
13
|
],
|
|
14
|
+
"main": "./dist/js/variables.js",
|
|
15
|
+
"types": "./dist/js/variables.d.ts",
|
|
14
16
|
"publishConfig": {
|
|
15
17
|
"access": "public"
|
|
16
18
|
},
|
package/dist/js/_variables.d.ts
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Auto-generated file. Do not edit directly.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const AssetFontDmSansName : string;
|
|
6
|
-
export const AssetFontDmSansWoff2Bold : string;
|
|
7
|
-
export const AssetFontDmSansWoff2BoldItalic : string;
|
|
8
|
-
export const AssetFontDmSansWoff2Italic : string;
|
|
9
|
-
export const AssetFontDmSansWoff2Medium : string;
|
|
10
|
-
export const AssetFontDmSansWoff2MediumItalic : string;
|
|
11
|
-
export const AssetFontDmSansWoff2Regular : string;
|
|
12
|
-
export const AssetFontLatoName : string;
|
|
13
|
-
export const AssetFontLatoWoffBlack : string;
|
|
14
|
-
export const AssetFontLatoWoff2Black : string;
|
|
15
|
-
export const AssetFontLatoWoffBlackItalic : string;
|
|
16
|
-
export const AssetFontLatoWoff2BlackItalic : string;
|
|
17
|
-
export const AssetFontLatoWoffBold : string;
|
|
18
|
-
export const AssetFontLatoWoff2Bold : string;
|
|
19
|
-
export const AssetFontLatoWoffBoldItalic : string;
|
|
20
|
-
export const AssetFontLatoWoff2BoldItalic : string;
|
|
21
|
-
export const AssetFontLatoWoffHairline : string;
|
|
22
|
-
export const AssetFontLatoWoff2Hairline : string;
|
|
23
|
-
export const AssetFontLatoWoffHairlineItalic : string;
|
|
24
|
-
export const AssetFontLatoWoff2HairlineItalic : string;
|
|
25
|
-
export const AssetFontLatoWoffHeavy : string;
|
|
26
|
-
export const AssetFontLatoWoff2Heavy : string;
|
|
27
|
-
export const AssetFontLatoWoffHeavyItalic : string;
|
|
28
|
-
export const AssetFontLatoWoff2HeavyItalic : string;
|
|
29
|
-
export const AssetFontLatoWoffItalic : string;
|
|
30
|
-
export const AssetFontLatoWoff2Italic : string;
|
|
31
|
-
export const AssetFontLatoWoffLight : string;
|
|
32
|
-
export const AssetFontLatoWoff2Light : string;
|
|
33
|
-
export const AssetFontLatoWoffLightItalic : string;
|
|
34
|
-
export const AssetFontLatoWoff2LightItalic : string;
|
|
35
|
-
export const AssetFontLatoWoffMedium : string;
|
|
36
|
-
export const AssetFontLatoWoff2Medium : string;
|
|
37
|
-
export const AssetFontLatoWoffMediumItalic : string;
|
|
38
|
-
export const AssetFontLatoWoff2MediumItalic : string;
|
|
39
|
-
export const AssetFontLatoWoffRegular : string;
|
|
40
|
-
export const AssetFontLatoWoff2Regular : string;
|
|
41
|
-
export const AssetFontLatoWoffSemibold : string;
|
|
42
|
-
export const AssetFontLatoWoff2Semibold : string;
|
|
43
|
-
export const AssetFontLatoWoffSemiboldItalic : string;
|
|
44
|
-
export const AssetFontLatoWoff2SemiboldItalic : string;
|
|
45
|
-
export const AssetFontLatoWoffThin : string;
|
|
46
|
-
export const AssetFontLatoWoff2Thin : string;
|
|
47
|
-
export const AssetFontLatoWoffThinItalic : string;
|
|
48
|
-
export const AssetFontLatoWoff2ThinItalic : string;
|
|
49
|
-
export const AssetFontAzeretMonoName : string;
|
|
50
|
-
export const AssetFontAzeretMonoWoff2Regular : string;
|
|
51
|
-
export const ColorBaseWhite : string;
|
|
52
|
-
export const ColorBaseBlack : string;
|
|
53
|
-
export const ColorBaseNeutral100 : string;
|
|
54
|
-
export const ColorBaseNeutral200 : string;
|
|
55
|
-
export const ColorBaseNeutral300 : string;
|
|
56
|
-
export const ColorBaseNeutral400 : string;
|
|
57
|
-
export const ColorBaseNeutral500 : string;
|
|
58
|
-
export const ColorBaseNeutral600 : string;
|
|
59
|
-
export const ColorBaseNeutral700 : string;
|
|
60
|
-
export const ColorBaseBrand100 : string;
|
|
61
|
-
export const ColorBaseBrand200 : string;
|
|
62
|
-
export const ColorBaseBrand300 : string;
|
|
63
|
-
export const ColorBaseBrand400 : string;
|
|
64
|
-
export const ColorBaseBrand500 : string;
|
|
65
|
-
export const ColorBaseBrand600 : string;
|
|
66
|
-
export const ColorBaseBrand700 : string;
|
|
67
|
-
export const ColorBaseGreen100 : string;
|
|
68
|
-
export const ColorBaseGreen200 : string;
|
|
69
|
-
export const ColorBaseGreen300 : string;
|
|
70
|
-
export const ColorBaseGreen400 : string;
|
|
71
|
-
export const ColorBaseGreen500 : string;
|
|
72
|
-
export const ColorBaseGreen600 : string;
|
|
73
|
-
export const ColorBaseGreen700 : string;
|
|
74
|
-
export const ColorBaseOrange100 : string;
|
|
75
|
-
export const ColorBaseOrange200 : string;
|
|
76
|
-
export const ColorBaseOrange300 : string;
|
|
77
|
-
export const ColorBaseOrange400 : string;
|
|
78
|
-
export const ColorBaseOrange500 : string;
|
|
79
|
-
export const ColorBaseOrange600 : string;
|
|
80
|
-
export const ColorBaseOrange700 : string;
|
|
81
|
-
export const ColorBaseRed100 : string;
|
|
82
|
-
export const ColorBaseRed200 : string;
|
|
83
|
-
export const ColorBaseRed300 : string;
|
|
84
|
-
export const ColorBaseRed400 : string;
|
|
85
|
-
export const ColorBaseRed500 : string;
|
|
86
|
-
export const ColorBaseRed600 : string;
|
|
87
|
-
export const ColorBaseRed700 : string;
|
|
88
|
-
export const ColorThemePrimaryBg : string;
|
|
89
|
-
export const ColorThemePrimaryBgHover : string;
|
|
90
|
-
export const ColorThemePrimaryBgActive : string;
|
|
91
|
-
export const ColorThemePrimaryFill : string;
|
|
92
|
-
export const ColorThemePrimaryFillHover : string;
|
|
93
|
-
export const ColorThemePrimaryFillActive : string;
|
|
94
|
-
export const ColorThemePrimaryText : string;
|
|
95
|
-
export const ColorThemePrimaryTextHover : string;
|
|
96
|
-
export const ColorThemePrimaryTextActive : string;
|
|
97
|
-
export const ColorThemeSecondaryBg : string;
|
|
98
|
-
export const ColorThemeSecondaryBgHover : string;
|
|
99
|
-
export const ColorThemeSecondaryBgActive : string;
|
|
100
|
-
export const ColorThemeSecondaryFill : string;
|
|
101
|
-
export const ColorThemeSecondaryFillHover : string;
|
|
102
|
-
export const ColorThemeSecondaryFillActive : string;
|
|
103
|
-
export const ColorThemeSecondaryText : string;
|
|
104
|
-
export const ColorThemeSecondaryTextHover : string;
|
|
105
|
-
export const ColorThemeSecondaryTextActive : string;
|
|
106
|
-
export const ColorThemeSuccessBg : string;
|
|
107
|
-
export const ColorThemeSuccessBgHover : string;
|
|
108
|
-
export const ColorThemeSuccessBgActive : string;
|
|
109
|
-
export const ColorThemeSuccessFill : string;
|
|
110
|
-
export const ColorThemeSuccessFillHover : string;
|
|
111
|
-
export const ColorThemeSuccessFillActive : string;
|
|
112
|
-
export const ColorThemeSuccessText : string;
|
|
113
|
-
export const ColorThemeSuccessTextHover : string;
|
|
114
|
-
export const ColorThemeSuccessTextActive : string;
|
|
115
|
-
export const ColorThemeWarningBg : string;
|
|
116
|
-
export const ColorThemeWarningBgHover : string;
|
|
117
|
-
export const ColorThemeWarningBgActive : string;
|
|
118
|
-
export const ColorThemeWarningFill : string;
|
|
119
|
-
export const ColorThemeWarningFillHover : string;
|
|
120
|
-
export const ColorThemeWarningFillActive : string;
|
|
121
|
-
export const ColorThemeWarningText : string;
|
|
122
|
-
export const ColorThemeWarningTextHover : string;
|
|
123
|
-
export const ColorThemeWarningTextActive : string;
|
|
124
|
-
export const ColorThemeDangerBg : string;
|
|
125
|
-
export const ColorThemeDangerBgHover : string;
|
|
126
|
-
export const ColorThemeDangerBgActive : string;
|
|
127
|
-
export const ColorThemeDangerFill : string;
|
|
128
|
-
export const ColorThemeDangerFillHover : string;
|
|
129
|
-
export const ColorThemeDangerFillActive : string;
|
|
130
|
-
export const ColorThemeDangerText : string;
|
|
131
|
-
export const ColorThemeDangerTextHover : string;
|
|
132
|
-
export const ColorThemeDangerTextActive : string;
|
|
133
|
-
export const ColorUiBackgroundCanvas : string;
|
|
134
|
-
export const ColorUiBackgroundBody : string;
|
|
135
|
-
export const ColorUiBackgroundMuted : string;
|
|
136
|
-
export const ColorUiBackgroundInput : string;
|
|
137
|
-
export const ColorUiBackgroundInputDisabled : string;
|
|
138
|
-
export const ColorUiBackgroundSkeleton : string;
|
|
139
|
-
export const ColorUiBackgroundSkeletonHighlight : string;
|
|
140
|
-
export const ColorUiBackgroundTooltip : string;
|
|
141
|
-
export const ColorUiBackgroundBackdrop : string;
|
|
142
|
-
export const ColorUiBackgroundSelectPill : string;
|
|
143
|
-
export const ColorUiBorderLight : string;
|
|
144
|
-
export const ColorUiBorderDefault : string;
|
|
145
|
-
export const ColorUiBorderDark : string;
|
|
146
|
-
export const ColorUiBorderFocus : string;
|
|
147
|
-
export const ColorUiFontHead : string;
|
|
148
|
-
export const ColorUiFontBody : string;
|
|
149
|
-
export const ColorUiFontMono : string;
|
|
150
|
-
export const ColorUiFontMuted : string;
|
|
151
|
-
export const ColorUiFontQuote : string;
|
|
152
|
-
export const ColorUiFontTooltip : string;
|
|
153
|
-
export const FontFamilyHead : string;
|
|
154
|
-
export const FontFamilyBody : string;
|
|
155
|
-
export const FontFamilyMono : string;
|
|
156
|
-
export const FontFamilyEmoji : string;
|
|
157
|
-
export const FontWeightHead : number;
|
|
158
|
-
export const FontWeightBody : number;
|
|
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;
|
|
164
|
-
export const OpacityDisabled : number;
|
|
165
|
-
export const OpacityBackdrop : number;
|
|
166
|
-
export const OpacityTooltip : number;
|
|
167
|
-
export const SizeBorderRadiusL : string;
|
|
168
|
-
export const SizeBorderRadiusM : string;
|
|
169
|
-
export const SizeBorderRadiusS : string;
|
|
170
|
-
export const SizeFontHead1 : string;
|
|
171
|
-
export const SizeFontHead2 : string;
|
|
172
|
-
export const SizeFontHead3 : string;
|
|
173
|
-
export const SizeFontHead4 : string;
|
|
174
|
-
export const SizeFontHead5 : string;
|
|
175
|
-
export const SizeFontHead6 : string;
|
|
176
|
-
export const SizeFontBodyXl : string;
|
|
177
|
-
export const SizeFontBodyL : string;
|
|
178
|
-
export const SizeFontBodyM : string;
|
|
179
|
-
export const SizeFontBodyS : string;
|
|
180
|
-
export const SizeFontBodyXs : string;
|
|
181
|
-
export const SizeFontMonoXl : string;
|
|
182
|
-
export const SizeFontMonoL : string;
|
|
183
|
-
export const SizeFontMonoM : string;
|
|
184
|
-
export const SizeFontMonoS : string;
|
|
185
|
-
export const SizeFontMonoXs : string;
|
|
186
|
-
export const SizeLineHead1 : string;
|
|
187
|
-
export const SizeLineHead2 : string;
|
|
188
|
-
export const SizeLineHead3 : string;
|
|
189
|
-
export const SizeLineHead4 : string;
|
|
190
|
-
export const SizeLineHead5 : string;
|
|
191
|
-
export const SizeLineHead6 : string;
|
|
192
|
-
export const SizeLineBodyXl : string;
|
|
193
|
-
export const SizeLineBodyL : string;
|
|
194
|
-
export const SizeLineBodyM : string;
|
|
195
|
-
export const SizeLineBodyS : string;
|
|
196
|
-
export const SizeLineBodyXs : string;
|
|
197
|
-
export const SizeLineMonoXl : string;
|
|
198
|
-
export const SizeLineMonoL : string;
|
|
199
|
-
export const SizeLineMonoM : string;
|
|
200
|
-
export const SizeLineMonoS : string;
|
|
201
|
-
export const SizeLineMonoXs : string;
|
|
202
|
-
export const SizeModalS : string;
|
|
203
|
-
export const SizeModalM : string;
|
|
204
|
-
export const SizeModalL : string;
|
|
205
|
-
export const SizeScreenXs : string;
|
|
206
|
-
export const SizeScreenS : string;
|
|
207
|
-
export const SizeScreenM : string;
|
|
208
|
-
export const SizeScreenL : string;
|
|
209
|
-
export const SizeScreenXl : string;
|
|
210
|
-
export const SizeSpacingXl : string;
|
|
211
|
-
export const SizeSpacingL : string;
|
|
212
|
-
export const SizeSpacingM : string;
|
|
213
|
-
export const SizeSpacingS : string;
|
|
214
|
-
export const SizeSpacingXs : string;
|
|
215
|
-
export const TimeTransitionL : number;
|
|
216
|
-
export const TimeTransitionM : number;
|
|
217
|
-
export const TimeTransitionS : number;
|
|
218
|
-
export const TimeDelayL : number;
|
|
219
|
-
export const TimeDelayM : number;
|
|
220
|
-
export const TimeDelayS : number;
|
|
221
|
-
export const TimeDurationL : number;
|
|
222
|
-
export const TimeDurationM : number;
|
|
223
|
-
export const TimeDurationS : number;
|
package/dist/js/_variables.js
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Auto-generated file. Do not edit directly.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
export const AssetFontDmSansName = "DM Sans";
|
|
6
|
-
export const AssetFontDmSansWoff2Bold = "DMSans-Bold.woff2";
|
|
7
|
-
export const AssetFontDmSansWoff2BoldItalic = "DMSans-BoldItalic.woff2";
|
|
8
|
-
export const AssetFontDmSansWoff2Italic = "DMSans-Italic.woff2";
|
|
9
|
-
export const AssetFontDmSansWoff2Medium = "DMSans-Medium.woff2";
|
|
10
|
-
export const AssetFontDmSansWoff2MediumItalic = "DMSans-MediumItalic.woff2";
|
|
11
|
-
export const AssetFontDmSansWoff2Regular = "DMSans-Regular.woff2";
|
|
12
|
-
export const AssetFontLatoName = "Lato";
|
|
13
|
-
export const AssetFontLatoWoffBlack = "Lato-Black.woff";
|
|
14
|
-
export const AssetFontLatoWoff2Black = "Lato-Black.woff2";
|
|
15
|
-
export const AssetFontLatoWoffBlackItalic = "Lato-BlackItalic.woff";
|
|
16
|
-
export const AssetFontLatoWoff2BlackItalic = "Lato-BlackItalic.woff2";
|
|
17
|
-
export const AssetFontLatoWoffBold = "Lato-Bold.woff";
|
|
18
|
-
export const AssetFontLatoWoff2Bold = "Lato-Bold.woff2";
|
|
19
|
-
export const AssetFontLatoWoffBoldItalic = "Lato-BoldItalic.woff";
|
|
20
|
-
export const AssetFontLatoWoff2BoldItalic = "Lato-BoldItalic.woff2";
|
|
21
|
-
export const AssetFontLatoWoffHairline = "Lato-Hairline.woff";
|
|
22
|
-
export const AssetFontLatoWoff2Hairline = "Lato-Hairline.woff2";
|
|
23
|
-
export const AssetFontLatoWoffHairlineItalic = "Lato-HairlineItalic.woff";
|
|
24
|
-
export const AssetFontLatoWoff2HairlineItalic = "Lato-HairlineItalic.woff2";
|
|
25
|
-
export const AssetFontLatoWoffHeavy = "Lato-Heavy.woff";
|
|
26
|
-
export const AssetFontLatoWoff2Heavy = "Lato-Heavy.woff2";
|
|
27
|
-
export const AssetFontLatoWoffHeavyItalic = "Lato-HeavyItalic.woff";
|
|
28
|
-
export const AssetFontLatoWoff2HeavyItalic = "Lato-HeavyItalic.woff2";
|
|
29
|
-
export const AssetFontLatoWoffItalic = "Lato-Italic.woff";
|
|
30
|
-
export const AssetFontLatoWoff2Italic = "Lato-Italic.woff2";
|
|
31
|
-
export const AssetFontLatoWoffLight = "Lato-Light.woff";
|
|
32
|
-
export const AssetFontLatoWoff2Light = "Lato-Light.woff2";
|
|
33
|
-
export const AssetFontLatoWoffLightItalic = "Lato-LightItalic.woff";
|
|
34
|
-
export const AssetFontLatoWoff2LightItalic = "Lato-LightItalic.woff2";
|
|
35
|
-
export const AssetFontLatoWoffMedium = "Lato-Medium.woff";
|
|
36
|
-
export const AssetFontLatoWoff2Medium = "Lato-Medium.woff2";
|
|
37
|
-
export const AssetFontLatoWoffMediumItalic = "Lato-MediumItalic.woff";
|
|
38
|
-
export const AssetFontLatoWoff2MediumItalic = "Lato-MediumItalic.woff2";
|
|
39
|
-
export const AssetFontLatoWoffRegular = "Lato-Regular.woff";
|
|
40
|
-
export const AssetFontLatoWoff2Regular = "Lato-Regular.woff2";
|
|
41
|
-
export const AssetFontLatoWoffSemibold = "Lato-Semibold.woff";
|
|
42
|
-
export const AssetFontLatoWoff2Semibold = "Lato-Semibold.woff2";
|
|
43
|
-
export const AssetFontLatoWoffSemiboldItalic = "Lato-SemiboldItalic.woff";
|
|
44
|
-
export const AssetFontLatoWoff2SemiboldItalic = "Lato-SemiboldItalic.woff2";
|
|
45
|
-
export const AssetFontLatoWoffThin = "Lato-Thin.woff";
|
|
46
|
-
export const AssetFontLatoWoff2Thin = "Lato-Thin.woff2";
|
|
47
|
-
export const AssetFontLatoWoffThinItalic = "Lato-ThinItalic.woff";
|
|
48
|
-
export const AssetFontLatoWoff2ThinItalic = "Lato-ThinItalic.woff2";
|
|
49
|
-
export const AssetFontAzeretMonoName = "Azeret Mono";
|
|
50
|
-
export const AssetFontAzeretMonoWoff2Regular = "AzeretMono-Regular.woff2";
|
|
51
|
-
export const ColorBaseWhite = "#ffffff";
|
|
52
|
-
export const ColorBaseBlack = "#000000";
|
|
53
|
-
export const ColorBaseNeutral100 = "#f2f4f7";
|
|
54
|
-
export const ColorBaseNeutral200 = "#ebecf0";
|
|
55
|
-
export const ColorBaseNeutral300 = "#d7dbe0";
|
|
56
|
-
export const ColorBaseNeutral400 = "#697687";
|
|
57
|
-
export const ColorBaseNeutral500 = "#515c6c";
|
|
58
|
-
export const ColorBaseNeutral600 = "#394251";
|
|
59
|
-
export const ColorBaseNeutral700 = "#1b1f26";
|
|
60
|
-
export const ColorBaseBrand100 = "#c9e5e8";
|
|
61
|
-
export const ColorBaseBrand200 = "#2db3c3";
|
|
62
|
-
export const ColorBaseBrand300 = "#29a3b1";
|
|
63
|
-
export const ColorBaseBrand400 = "#008194";
|
|
64
|
-
export const ColorBaseBrand500 = "#017384";
|
|
65
|
-
export const ColorBaseBrand600 = "#026371";
|
|
66
|
-
export const ColorBaseBrand700 = "#175b63";
|
|
67
|
-
export const ColorBaseGreen100 = "#d4ede4";
|
|
68
|
-
export const ColorBaseGreen200 = "#00bb7d";
|
|
69
|
-
export const ColorBaseGreen300 = "#00aa71";
|
|
70
|
-
export const ColorBaseGreen400 = "#008458";
|
|
71
|
-
export const ColorBaseGreen500 = "#00754e";
|
|
72
|
-
export const ColorBaseGreen600 = "#006946";
|
|
73
|
-
export const ColorBaseGreen700 = "#005f40";
|
|
74
|
-
export const ColorBaseOrange100 = "#ffdea8";
|
|
75
|
-
export const ColorBaseOrange200 = "#ffd694";
|
|
76
|
-
export const ColorBaseOrange300 = "#ffce80";
|
|
77
|
-
export const ColorBaseOrange400 = "#ebb663";
|
|
78
|
-
export const ColorBaseOrange500 = "#d6a75a";
|
|
79
|
-
export const ColorBaseOrange600 = "#b0853e";
|
|
80
|
-
export const ColorBaseOrange700 = "#9f6100";
|
|
81
|
-
export const ColorBaseRed100 = "#fbc7bb";
|
|
82
|
-
export const ColorBaseRed200 = "#f68368";
|
|
83
|
-
export const ColorBaseRed300 = "#f46a49";
|
|
84
|
-
export const ColorBaseRed400 = "#d9340d";
|
|
85
|
-
export const ColorBaseRed500 = "#c22e0b";
|
|
86
|
-
export const ColorBaseRed600 = "#ae2a0a";
|
|
87
|
-
export const ColorBaseRed700 = "#9e2609";
|
|
88
|
-
export const ColorThemePrimaryBg = "#008194";
|
|
89
|
-
export const ColorThemePrimaryBgHover = "#017384";
|
|
90
|
-
export const ColorThemePrimaryBgActive = "#026371";
|
|
91
|
-
export const ColorThemePrimaryFill = "#ffffff";
|
|
92
|
-
export const ColorThemePrimaryFillHover = "#ffffff";
|
|
93
|
-
export const ColorThemePrimaryFillActive = "#ffffff";
|
|
94
|
-
export const ColorThemePrimaryText = "#008194";
|
|
95
|
-
export const ColorThemePrimaryTextHover = "#017384";
|
|
96
|
-
export const ColorThemePrimaryTextActive = "#026371";
|
|
97
|
-
export const ColorThemeSecondaryBg = "#697687";
|
|
98
|
-
export const ColorThemeSecondaryBgHover = "#697687";
|
|
99
|
-
export const ColorThemeSecondaryBgActive = "#697687";
|
|
100
|
-
export const ColorThemeSecondaryFill = "#ffffff";
|
|
101
|
-
export const ColorThemeSecondaryFillHover = "#ffffff";
|
|
102
|
-
export const ColorThemeSecondaryFillActive = "#ffffff";
|
|
103
|
-
export const ColorThemeSecondaryText = "#000000";
|
|
104
|
-
export const ColorThemeSecondaryTextHover = "#000000";
|
|
105
|
-
export const ColorThemeSecondaryTextActive = "#000000";
|
|
106
|
-
export const ColorThemeSuccessBg = "#008458";
|
|
107
|
-
export const ColorThemeSuccessBgHover = "#00754e";
|
|
108
|
-
export const ColorThemeSuccessBgActive = "#006946";
|
|
109
|
-
export const ColorThemeSuccessFill = "#ffffff";
|
|
110
|
-
export const ColorThemeSuccessFillHover = "#ffffff";
|
|
111
|
-
export const ColorThemeSuccessFillActive = "#ffffff";
|
|
112
|
-
export const ColorThemeSuccessText = "#008458";
|
|
113
|
-
export const ColorThemeSuccessTextHover = "#00754e";
|
|
114
|
-
export const ColorThemeSuccessTextActive = "#006946";
|
|
115
|
-
export const ColorThemeWarningBg = "#ffce80";
|
|
116
|
-
export const ColorThemeWarningBgHover = "#ffd694";
|
|
117
|
-
export const ColorThemeWarningBgActive = "#ffdea8";
|
|
118
|
-
export const ColorThemeWarningFill = "#000000";
|
|
119
|
-
export const ColorThemeWarningFillHover = "#000000";
|
|
120
|
-
export const ColorThemeWarningFillActive = "#000000";
|
|
121
|
-
export const ColorThemeWarningText = "#9f6100";
|
|
122
|
-
export const ColorThemeWarningTextHover = "#9f6100";
|
|
123
|
-
export const ColorThemeWarningTextActive = "#9f6100";
|
|
124
|
-
export const ColorThemeDangerBg = "#d9340d";
|
|
125
|
-
export const ColorThemeDangerBgHover = "#c22e0b";
|
|
126
|
-
export const ColorThemeDangerBgActive = "#ae2a0a";
|
|
127
|
-
export const ColorThemeDangerFill = "#ffffff";
|
|
128
|
-
export const ColorThemeDangerFillHover = "#ffffff";
|
|
129
|
-
export const ColorThemeDangerFillActive = "#ffffff";
|
|
130
|
-
export const ColorThemeDangerText = "#d9340d";
|
|
131
|
-
export const ColorThemeDangerTextHover = "#c22e0b";
|
|
132
|
-
export const ColorThemeDangerTextActive = "#ae2a0a";
|
|
133
|
-
export const ColorUiBackgroundCanvas = "#f2f4f7";
|
|
134
|
-
export const ColorUiBackgroundBody = "#ffffff";
|
|
135
|
-
export const ColorUiBackgroundMuted = "#ebecf0";
|
|
136
|
-
export const ColorUiBackgroundInput = "#ffffff";
|
|
137
|
-
export const ColorUiBackgroundInputDisabled = "#f2f4f7";
|
|
138
|
-
export const ColorUiBackgroundSkeleton = "#ebecf0";
|
|
139
|
-
export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
|
|
140
|
-
export const ColorUiBackgroundTooltip = "#000000";
|
|
141
|
-
export const ColorUiBackgroundBackdrop = "#000000";
|
|
142
|
-
export const ColorUiBackgroundSelectPill = "#f2f4f7";
|
|
143
|
-
export const ColorUiBorderLight = "#f2f4f7";
|
|
144
|
-
export const ColorUiBorderDefault = "#ebecf0";
|
|
145
|
-
export const ColorUiBorderDark = "#d7dbe0";
|
|
146
|
-
export const ColorUiBorderFocus = "#0071ff";
|
|
147
|
-
export const ColorUiFontHead = "#000000";
|
|
148
|
-
export const ColorUiFontBody = "#000000";
|
|
149
|
-
export const ColorUiFontMono = "#000000";
|
|
150
|
-
export const ColorUiFontMuted = "#697687";
|
|
151
|
-
export const ColorUiFontQuote = "#697687";
|
|
152
|
-
export const ColorUiFontTooltip = "#ffffff";
|
|
153
|
-
export const FontFamilyHead = "Lato";
|
|
154
|
-
export const FontFamilyBody = "Lato";
|
|
155
|
-
export const FontFamilyMono = "Azeret Mono";
|
|
156
|
-
export const FontFamilyEmoji = "''";
|
|
157
|
-
export const FontWeightHead = 500;
|
|
158
|
-
export const FontWeightBody = 400;
|
|
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";
|
|
164
|
-
export const OpacityDisabled = 0.65;
|
|
165
|
-
export const OpacityBackdrop = 0.6;
|
|
166
|
-
export const OpacityTooltip = 1;
|
|
167
|
-
export const SizeBorderRadiusL = "0.5rem";
|
|
168
|
-
export const SizeBorderRadiusM = "0.25rem";
|
|
169
|
-
export const SizeBorderRadiusS = "0.125rem";
|
|
170
|
-
export const SizeFontHead1 = "1.75rem";
|
|
171
|
-
export const SizeFontHead2 = "1.5rem";
|
|
172
|
-
export const SizeFontHead3 = "1.25rem";
|
|
173
|
-
export const SizeFontHead4 = "1.125rem";
|
|
174
|
-
export const SizeFontHead5 = "0.9375rem";
|
|
175
|
-
export const SizeFontHead6 = "0.875rem";
|
|
176
|
-
export const SizeFontBodyXl = "1.25rem";
|
|
177
|
-
export const SizeFontBodyL = "1.125rem";
|
|
178
|
-
export const SizeFontBodyM = "0.9375rem";
|
|
179
|
-
export const SizeFontBodyS = "0.875rem";
|
|
180
|
-
export const SizeFontBodyXs = "0.75rem";
|
|
181
|
-
export const SizeFontMonoXl = "1.125rem";
|
|
182
|
-
export const SizeFontMonoL = "0.9375rem";
|
|
183
|
-
export const SizeFontMonoM = "0.875rem";
|
|
184
|
-
export const SizeFontMonoS = "0.75rem";
|
|
185
|
-
export const SizeFontMonoXs = "0.625rem";
|
|
186
|
-
export const SizeLineHead1 = "2rem";
|
|
187
|
-
export const SizeLineHead2 = "1.75rem";
|
|
188
|
-
export const SizeLineHead3 = "1.5rem";
|
|
189
|
-
export const SizeLineHead4 = "1.5rem";
|
|
190
|
-
export const SizeLineHead5 = "1.25rem";
|
|
191
|
-
export const SizeLineHead6 = "1rem";
|
|
192
|
-
export const SizeLineBodyXl = "1.5rem";
|
|
193
|
-
export const SizeLineBodyL = "1.5rem";
|
|
194
|
-
export const SizeLineBodyM = "1.25rem";
|
|
195
|
-
export const SizeLineBodyS = "1rem";
|
|
196
|
-
export const SizeLineBodyXs = "1rem";
|
|
197
|
-
export const SizeLineMonoXl = "1.5rem";
|
|
198
|
-
export const SizeLineMonoL = "1.25rem";
|
|
199
|
-
export const SizeLineMonoM = "1.125rem";
|
|
200
|
-
export const SizeLineMonoS = "1rem";
|
|
201
|
-
export const SizeLineMonoXs = "0.875rem";
|
|
202
|
-
export const SizeModalS = "400rem";
|
|
203
|
-
export const SizeModalM = "600rem";
|
|
204
|
-
export const SizeModalL = "800rem";
|
|
205
|
-
export const SizeScreenXs = "540rem";
|
|
206
|
-
export const SizeScreenS = "768rem";
|
|
207
|
-
export const SizeScreenM = "992rem";
|
|
208
|
-
export const SizeScreenL = "1200rem";
|
|
209
|
-
export const SizeScreenXl = "1400rem";
|
|
210
|
-
export const SizeSpacingXl = "2rem";
|
|
211
|
-
export const SizeSpacingL = "1.5rem";
|
|
212
|
-
export const SizeSpacingM = "1rem";
|
|
213
|
-
export const SizeSpacingS = "0.5rem";
|
|
214
|
-
export const SizeSpacingXs = "0.25rem";
|
|
215
|
-
export const TimeTransitionL = 500;
|
|
216
|
-
export const TimeTransitionM = 250;
|
|
217
|
-
export const TimeTransitionS = 125;
|
|
218
|
-
export const TimeDelayL = 500;
|
|
219
|
-
export const TimeDelayM = 250;
|
|
220
|
-
export const TimeDelayS = 125;
|
|
221
|
-
export const TimeDurationL = 1000;
|
|
222
|
-
export const TimeDurationM = 500;
|
|
223
|
-
export const TimeDurationS = 250;
|