@cfx-dev/ui-components 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +38 -38
- package/dist/components/Logos/LogosShowcase.js +2 -2
- package/dist/components/Logos/cfx/CompositeLogo.js +74 -14
- package/dist/styles-scss/_colors.scss +211 -211
- package/dist/styles-scss/_typography.scss +51 -51
- package/dist/styles-scss/_ui.scss +359 -359
- package/dist/styles-scss/global.scss +142 -142
- package/dist/styles-scss/themes/theme_cfx.scss +32 -32
- package/dist/styles-scss/themes/theme_fivem.scss +32 -32
- package/dist/styles-scss/themes/theme_redm.scss +32 -32
- package/dist/styles-scss/themes/theme_wireframe.scss +32 -32
- package/dist/styles-scss/themes.scss +3 -3
- package/dist/styles-scss/tokens.scss +409 -409
- package/package.json +70 -70
|
@@ -1,409 +1,409 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "ui";
|
|
3
|
-
@import "ui";
|
|
4
|
-
|
|
5
|
-
$mpMap: (
|
|
6
|
-
m: margin,
|
|
7
|
-
mt: margin-top,
|
|
8
|
-
mr: margin-right,
|
|
9
|
-
mb: margin-bottom,
|
|
10
|
-
ml: margin-left,
|
|
11
|
-
p: padding,
|
|
12
|
-
pt: padding-top,
|
|
13
|
-
pr: padding-right,
|
|
14
|
-
pb: padding-bottom,
|
|
15
|
-
pl: padding-left,
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
@mixin mp-tokens() {
|
|
19
|
-
@each $name, $value in $mediaMap {
|
|
20
|
-
@include media-min($name) {
|
|
21
|
-
@each $mpName, $mpProp in $mpMap {
|
|
22
|
-
[data-#{$mpName}-#{$name}] {
|
|
23
|
-
#{$mpProp}: var(--#{$mpName}-#{$name});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@mixin anchor-tokens() {
|
|
31
|
-
@include ui.define-color-token('anchor-color', ui.color('tertiary'));
|
|
32
|
-
@include ui.define-color-token('anchor-decoration-color-hover', ui.color('tertiary', $alpha: .5));
|
|
33
|
-
@include ui.define-color-token('anchor-secondary-color', ui.color('secondary'));
|
|
34
|
-
@include ui.define-color-token('anchor-secondary-decoration-color-hover', ui.color('secondary', $alpha: .5));
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@mixin border-radius-tokens() {
|
|
38
|
-
@include ui.def('border-radius-none', 0);
|
|
39
|
-
@include ui.def('border-radius-xxsmall', ui.q(.25));
|
|
40
|
-
@include ui.def('border-radius-xsmall', ui.q(.5));
|
|
41
|
-
@include ui.def('border-radius-small', ui.q(.75));
|
|
42
|
-
@include ui.def('border-radius-normal', ui.q(1.5));
|
|
43
|
-
@include ui.def('border-radius-pill', 9999px);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@mixin text-tokens() {
|
|
47
|
-
@include ui.define-font-size('xxsmall', ui.q(1.875), 1.5);
|
|
48
|
-
@include ui.define-font-size('xsmall', ui.q(2.25), 1.5);
|
|
49
|
-
@include ui.define-font-size('small', ui.q(2.5), 1.5);
|
|
50
|
-
|
|
51
|
-
// normal is mirroring small, becouse it's the default size
|
|
52
|
-
@include ui.define-font-size('normal', ui.q(2.5), 1.5);
|
|
53
|
-
|
|
54
|
-
@include ui.define-font-size('medium', ui.q(3.125), 1.3);
|
|
55
|
-
@include ui.define-font-size('large', ui.q(3.75), 1.3);
|
|
56
|
-
@include ui.define-font-size('xlarge', ui.q(5), 1.3);
|
|
57
|
-
@include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
|
|
58
|
-
@include ui.define-font-size('xxxlarge', ui.q(8.75), 1.15);
|
|
59
|
-
|
|
60
|
-
@include ui.def('font-weight-thin', 100);
|
|
61
|
-
@include ui.def('font-weight-small', 300);
|
|
62
|
-
@include ui.def('font-weight-normal', 400);
|
|
63
|
-
@include ui.def('font-weight-bold', 700);
|
|
64
|
-
@include ui.def('font-weight-bolder', 800);
|
|
65
|
-
@include ui.def('font-weight-boldest', 900);
|
|
66
|
-
|
|
67
|
-
@include ui.def('letter-spacing-normal', -0.025em);
|
|
68
|
-
@include ui.def('letter-spacing-large', 0);
|
|
69
|
-
|
|
70
|
-
@include ui.def('font-family-primary', 'HelveticaNowText');
|
|
71
|
-
@include ui.def('font-family-secondary', 'HelveticaNowDisplay');
|
|
72
|
-
|
|
73
|
-
@include ui.define-color-token('text', ui.color('primary', 'pure' ));
|
|
74
|
-
@include ui.def ('text-opacity-10', .10);
|
|
75
|
-
@include ui.define-color-token('text-a10', ui.color('primary', $alpha: .10));
|
|
76
|
-
@include ui.def ('text-opacity-25', .25);
|
|
77
|
-
@include ui.define-color-token('text-a25', ui.color('primary', $alpha: .25));
|
|
78
|
-
@include ui.def ('text-opacity-50', .50);
|
|
79
|
-
@include ui.define-color-token('text-a50', ui.color('primary', $alpha: .50));
|
|
80
|
-
@include ui.def ('text-opacity-75', .75);
|
|
81
|
-
@include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
@mixin offset-tokens() {
|
|
85
|
-
@each $name, $value in $offsets {
|
|
86
|
-
@include ui.def('offset-#{$name}', $value);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
$control-heights: (
|
|
91
|
-
'xxsmall': ui.q(1.5),
|
|
92
|
-
'xsmall': ui.q(3),
|
|
93
|
-
'small': ui.q(4),
|
|
94
|
-
'normal': ui.q(6),
|
|
95
|
-
'large': ui.q(7),
|
|
96
|
-
'xlarge': ui.q(10),
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
@mixin control-height-tokens() {
|
|
100
|
-
@each $name, $value in $control-heights {
|
|
101
|
-
@include ui.def('control-height-#{$name}', $value);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Components tokens
|
|
106
|
-
|
|
107
|
-
@mixin checkbox-tokens() {
|
|
108
|
-
@include ui.define-color-token('checkbox-focus-border-color', ui.color('primary'));
|
|
109
|
-
@include ui.def('checkbox-focus-border-size', ui.q(.25));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
@mixin switch-tokens() {
|
|
113
|
-
@include ui.define-color-token('switch-focus-border-color', ui.color('primary'));
|
|
114
|
-
@include ui.def('switch-focus-border-size', ui.q(.25));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
@mixin input-dropzone-tokens() {
|
|
118
|
-
@include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
|
|
119
|
-
@include ui.def('dropzone-focus-border-size', ui.q(.25));
|
|
120
|
-
|
|
121
|
-
@include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
|
|
122
|
-
@include ui.def('dropzone-border-size', 1px);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@mixin input-tokens() {
|
|
126
|
-
@include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: .4));
|
|
127
|
-
@include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: .6));
|
|
128
|
-
|
|
129
|
-
@include ui.define-color-token('input-text', ui.color('primary'));
|
|
130
|
-
@include ui.define-color-token('input-background', ui.color('bg'));
|
|
131
|
-
|
|
132
|
-
@include ui.def('input-border-size', 1px);
|
|
133
|
-
@include ui.define-color-token('input-border', ui.color('bg-light'));
|
|
134
|
-
@include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
|
|
135
|
-
@include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
|
|
136
|
-
@include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
|
|
137
|
-
|
|
138
|
-
@include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: .1));
|
|
139
|
-
@include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: .2));
|
|
140
|
-
@include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: .2));
|
|
141
|
-
@include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: .1));
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
@mixin accordion-tokens() {
|
|
145
|
-
@include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: .1));
|
|
146
|
-
@include ui.define-color-token('accordion-background', ui.color('bg'));
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
@mixin select-tokens() {
|
|
150
|
-
@include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
|
|
151
|
-
@include ui.define-color-token('interactive-list-item-background', transparent);
|
|
152
|
-
@include ui.define-color-token('interactive-list-item-hover-background', ui.color('bg-light', 700, 1));
|
|
153
|
-
@include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, .5));
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
@mixin icon-tokens() {
|
|
157
|
-
@include ui.def('icon-big-size-small', ui.q(6));
|
|
158
|
-
@include ui.def('icon-big-size-normal', ui.q(8));
|
|
159
|
-
@include ui.def('icon-big-size-large', ui.q(12));
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
@mixin info-panel-tokens() {
|
|
163
|
-
@include ui.def('info-panel-focus-border-size', ui.q(.25));
|
|
164
|
-
|
|
165
|
-
@include ui.define-color-token('info-panel-border', ui.color('primary', 950, .7));
|
|
166
|
-
@include ui.define-color-token('info-panel-background', ui.color('primary', 950, .1));
|
|
167
|
-
@include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, .2));
|
|
168
|
-
|
|
169
|
-
@include ui.define-color-token('info-panel-error-border', ui.color('red'));
|
|
170
|
-
@include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: .2));
|
|
171
|
-
@include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: .4));
|
|
172
|
-
|
|
173
|
-
@include ui.define-color-token('info-panel-success-border', ui.color('green'));
|
|
174
|
-
@include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: .2));
|
|
175
|
-
@include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: .4));
|
|
176
|
-
|
|
177
|
-
@include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
|
|
178
|
-
@include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: .2));
|
|
179
|
-
@include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: .4));
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
@mixin tabular-tokens() {
|
|
183
|
-
@include ui.define-color-token('tabular-color-dark', ui.color('primary'));
|
|
184
|
-
@include ui.define-color-token('tabular-color-light', ui.color('accent'));
|
|
185
|
-
|
|
186
|
-
@include ui.def('tabular-notification-gap', ui.q(.75));
|
|
187
|
-
|
|
188
|
-
@include ui.def('tabular-item-height', ui.control-height('xlarge'));
|
|
189
|
-
@include ui.def('tabular-item-padding', ui.offset('medium'));
|
|
190
|
-
|
|
191
|
-
@include ui.def('tabular-item-border-size', ui.q(.25));
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
@mixin modal-tokens() {
|
|
195
|
-
@include ui.define-color-token('modal-background', ui.color('bg-light'));
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
@mixin scrollable-tokens() {
|
|
199
|
-
@include ui.def('scrollable-thumb-size', ui.q(1));
|
|
200
|
-
@include ui.def('scrollable-thumb-x-offset', 0);
|
|
201
|
-
@include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
|
|
202
|
-
@include ui.define-color-token('scrollbar-track-background', ui.color('bg'));
|
|
203
|
-
@include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: .4));
|
|
204
|
-
@include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: .6));
|
|
205
|
-
@include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: .8));
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
@mixin avatar-tokens() {
|
|
209
|
-
@include ui.define-color-token('avatar-background', ui.color('primary'));
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
@mixin title-tokens() {
|
|
213
|
-
@include ui.define-color-token('title-text', ui.color('bg'));
|
|
214
|
-
@include ui.define-color-token('title-background', ui.color('primary'));
|
|
215
|
-
@include ui.define-color-token('title-text-copy', ui.color('green'));
|
|
216
|
-
@include ui.define-color-token('title-background-dark', ui.color('bg'));
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
@mixin button-tokens() {
|
|
220
|
-
@include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: .5));
|
|
221
|
-
|
|
222
|
-
@include ui.define-color-token('button-text', ui.color('primary'));
|
|
223
|
-
@include ui.define-color-token('button-border', transparent);
|
|
224
|
-
@include ui.define-color-token('button-background', ui.color('primary', $alpha: .15));
|
|
225
|
-
@include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: .05));
|
|
226
|
-
@include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: .1));
|
|
227
|
-
@include ui.define-color-token('button-active-border', ui.color('primary', $alpha: .15));
|
|
228
|
-
@include ui.define-color-token('button-active-background', transparent);
|
|
229
|
-
|
|
230
|
-
@include ui.define-color-token('button-primary-text', ui.color('primary'));
|
|
231
|
-
@include ui.define-color-token('button-primary-border', ui.color('accent'));
|
|
232
|
-
@include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: .4));
|
|
233
|
-
@include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
|
|
234
|
-
@include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
|
|
235
|
-
@include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
|
|
236
|
-
@include ui.define-color-token('button-primary-active-text', ui.color('primary'));
|
|
237
|
-
@include ui.define-color-token('button-primary-active-border', transparent);
|
|
238
|
-
@include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: .6));
|
|
239
|
-
@include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: .4));
|
|
240
|
-
@include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: .4));
|
|
241
|
-
@include ui.define-color-token('button-primary-disabled-background', transparent);
|
|
242
|
-
|
|
243
|
-
@include ui.define-color-token('button-secondary-text', ui.color('primary'));
|
|
244
|
-
@include ui.define-color-token('button-secondary-border', ui.color('primary'));
|
|
245
|
-
@include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
|
|
246
|
-
@include ui.define-color-token('button-secondary-hover-text', ui.color('bg'));
|
|
247
|
-
@include ui.define-color-token('button-secondary-hover-border', ui.color('primary'));
|
|
248
|
-
@include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
|
|
249
|
-
@include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
|
|
250
|
-
@include ui.define-color-token('button-secondary-active-border', transparent);
|
|
251
|
-
@include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: .6));
|
|
252
|
-
@include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: .4));
|
|
253
|
-
@include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: .4));
|
|
254
|
-
@include ui.define-color-token('button-secondary-disabled-background', transparent);
|
|
255
|
-
|
|
256
|
-
@include ui.define-color-token('button-onlight-text', ui.color('primary'));
|
|
257
|
-
@include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
|
|
258
|
-
@include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
|
|
259
|
-
@include ui.define-color-token('button-onlight-hover-text', ui.color('primary'));
|
|
260
|
-
@include ui.define-color-token('button-onlight-hover-border', ui.color('accent'));
|
|
261
|
-
@include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
|
|
262
|
-
@include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
|
|
263
|
-
@include ui.define-color-token('button-onlight-active-border', transparent);
|
|
264
|
-
@include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', $alpha: .6));
|
|
265
|
-
@include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: .4));
|
|
266
|
-
@include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: .4));
|
|
267
|
-
@include ui.define-color-token('button-onlight-disabled-background', transparent);
|
|
268
|
-
|
|
269
|
-
@include ui.define-color-token('button-linked-text', ui.color('tertiary'));
|
|
270
|
-
@include ui.define-color-token('button-linked-border', transparent);
|
|
271
|
-
@include ui.define-color-token('button-linked-background', transparent);
|
|
272
|
-
@include ui.define-color-token('button-linked-hover-text', ui.color('accent'));
|
|
273
|
-
@include ui.define-color-token('button-linked-hover-border', transparent);
|
|
274
|
-
@include ui.define-color-token('button-linked-hover-background', #24293B);
|
|
275
|
-
@include ui.define-color-token('button-linked-active-text', ui.color('red'));
|
|
276
|
-
@include ui.define-color-token('button-linked-active-border', transparent);
|
|
277
|
-
@include ui.define-color-token('button-linked-active-background', #24293B);
|
|
278
|
-
@include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
|
|
279
|
-
@include ui.define-color-token('button-linked-disabled-border', transparent);
|
|
280
|
-
@include ui.define-color-token('button-linked-disabled-background', transparent);
|
|
281
|
-
|
|
282
|
-
@include ui.define-color-token('button-quicklink-text', ui.color('primary'));
|
|
283
|
-
@include ui.define-color-token('button-quicklink-border', transparent);
|
|
284
|
-
@include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
|
|
285
|
-
@include ui.define-color-token('button-quicklink-hover-text', ui.color('primary'));
|
|
286
|
-
@include ui.define-color-token('button-quicklink-hover-border', transparent);
|
|
287
|
-
@include ui.define-color-token('button-quicklink-hover-background', ui.color('accent'));
|
|
288
|
-
@include ui.define-color-token('button-quicklink-active-text', ui.color('primary'));
|
|
289
|
-
@include ui.define-color-token('button-quicklink-active-border', transparent);
|
|
290
|
-
@include ui.define-color-token('button-quicklink-active-background', ui.color('accent'));
|
|
291
|
-
@include ui.define-color-token('button-quicklink-disabled-text', ui.color('primary'));
|
|
292
|
-
@include ui.define-color-token('button-quicklink-disabled-border', transparent);
|
|
293
|
-
@include ui.define-color-token('button-quicklink-disabled-background', ui.color('bg-light'));
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
@mixin badge-tokens() {
|
|
297
|
-
@include ui.define-color-token('badge-success-text', ui.color('green'));
|
|
298
|
-
@include ui.define-color-token('badge-success-background', ui.color('green', $alpha: .2));
|
|
299
|
-
@include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: .4));
|
|
300
|
-
|
|
301
|
-
@include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
|
|
302
|
-
@include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: .2));
|
|
303
|
-
@include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: .4));
|
|
304
|
-
|
|
305
|
-
@include ui.define-color-token('badge-warning-text', ui.color('yellow'));
|
|
306
|
-
@include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: .2));
|
|
307
|
-
@include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: .4));
|
|
308
|
-
|
|
309
|
-
@include ui.define-color-token('badge-error-text', ui.color('red'));
|
|
310
|
-
@include ui.define-color-token('badge-error-background', ui.color('red', $alpha: .2));
|
|
311
|
-
@include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
/**
|
|
315
|
-
* Look for usages by searching for `ui.color-token('name')`
|
|
316
|
-
*/
|
|
317
|
-
@mixin color-tokens() {
|
|
318
|
-
@include ui.define-color-token('li-marker', ui.color('main', 950, .75));
|
|
319
|
-
|
|
320
|
-
@include ui.define-color-token('kbd-border', ui.color('main', 300));
|
|
321
|
-
@include ui.define-color-token('kbd-background', ui.color('main', 200));
|
|
322
|
-
|
|
323
|
-
@include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
|
|
324
|
-
@include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
|
|
325
|
-
|
|
326
|
-
@include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
|
|
327
|
-
@include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
|
|
328
|
-
|
|
329
|
-
// TODO: add text warning, success and error
|
|
330
|
-
|
|
331
|
-
@include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
|
|
332
|
-
|
|
333
|
-
@include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: .4));
|
|
334
|
-
@include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: .6));
|
|
335
|
-
@include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: .8));
|
|
336
|
-
|
|
337
|
-
@include ui.define-color-token('backdrop', ui.color('bg', $alpha: .75));
|
|
338
|
-
@include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: .25));
|
|
339
|
-
@include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: .5));
|
|
340
|
-
@include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: .75));
|
|
341
|
-
|
|
342
|
-
@include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: .75));
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
// COMPONENTS
|
|
346
|
-
@include ui.define-color-token('avatar-background', ui.color('main'));
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
@include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: .5));
|
|
350
|
-
@include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
|
|
351
|
-
|
|
352
|
-
@include ui.define-color-token('checkbox-text', ui.color('main', 950));
|
|
353
|
-
@include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
|
|
354
|
-
@include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
|
|
355
|
-
@include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
@include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
|
|
359
|
-
@include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
|
|
360
|
-
@include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
|
|
361
|
-
@include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
@include ui.define-color-token('indicator-bright', ui.color('primary'));
|
|
365
|
-
@include ui.define-color-token('indicator-dim', transparent);
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
@include ui.define-color-token('island-border', ui.color('main', 50, .25));
|
|
369
|
-
@include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
|
|
370
|
-
@include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
@include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
|
|
374
|
-
@include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
|
|
375
|
-
@include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
|
|
376
|
-
|
|
377
|
-
@include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
|
|
378
|
-
@include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
|
|
379
|
-
@include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
|
|
380
|
-
|
|
381
|
-
@include ui.define-color-token('loaf-error-text', ui.color('error', 500));
|
|
382
|
-
@include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
|
|
383
|
-
@include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
@include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
|
|
387
|
-
@include ui.define-color-token('navlist-item-background', transparent);
|
|
388
|
-
@include ui.define-color-token('navlist-item-active-border', transparent);
|
|
389
|
-
@include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
|
|
390
|
-
@include ui.define-color-token('navlist-item-hover-border', transparent);
|
|
391
|
-
@include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
@include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
@include ui.define-color-token('separator-text', ui.color('main', 950, .25));
|
|
398
|
-
@include ui.define-color-token('separator-background', ui.color('main', 950, .1));
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
@include ui.define-color-token('toggle-description-text', ui.color('main', 950, .5));
|
|
402
|
-
@include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
|
|
403
|
-
|
|
404
|
-
@include ui.define-color-token('toggle-background', ui.color('main', 950, .1));
|
|
405
|
-
@include ui.define-color-token('toggle-hover-background', ui.color('main', 200));
|
|
406
|
-
|
|
407
|
-
@include ui.define-color-token('toggle-active-text', ui.color('main'));
|
|
408
|
-
@include ui.define-color-token('toggle-active-background', ui.color('main', 950, .75));
|
|
409
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "ui";
|
|
3
|
+
@import "ui";
|
|
4
|
+
|
|
5
|
+
$mpMap: (
|
|
6
|
+
m: margin,
|
|
7
|
+
mt: margin-top,
|
|
8
|
+
mr: margin-right,
|
|
9
|
+
mb: margin-bottom,
|
|
10
|
+
ml: margin-left,
|
|
11
|
+
p: padding,
|
|
12
|
+
pt: padding-top,
|
|
13
|
+
pr: padding-right,
|
|
14
|
+
pb: padding-bottom,
|
|
15
|
+
pl: padding-left,
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
@mixin mp-tokens() {
|
|
19
|
+
@each $name, $value in $mediaMap {
|
|
20
|
+
@include media-min($name) {
|
|
21
|
+
@each $mpName, $mpProp in $mpMap {
|
|
22
|
+
[data-#{$mpName}-#{$name}] {
|
|
23
|
+
#{$mpProp}: var(--#{$mpName}-#{$name});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@mixin anchor-tokens() {
|
|
31
|
+
@include ui.define-color-token('anchor-color', ui.color('tertiary'));
|
|
32
|
+
@include ui.define-color-token('anchor-decoration-color-hover', ui.color('tertiary', $alpha: .5));
|
|
33
|
+
@include ui.define-color-token('anchor-secondary-color', ui.color('secondary'));
|
|
34
|
+
@include ui.define-color-token('anchor-secondary-decoration-color-hover', ui.color('secondary', $alpha: .5));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin border-radius-tokens() {
|
|
38
|
+
@include ui.def('border-radius-none', 0);
|
|
39
|
+
@include ui.def('border-radius-xxsmall', ui.q(.25));
|
|
40
|
+
@include ui.def('border-radius-xsmall', ui.q(.5));
|
|
41
|
+
@include ui.def('border-radius-small', ui.q(.75));
|
|
42
|
+
@include ui.def('border-radius-normal', ui.q(1.5));
|
|
43
|
+
@include ui.def('border-radius-pill', 9999px);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin text-tokens() {
|
|
47
|
+
@include ui.define-font-size('xxsmall', ui.q(1.875), 1.5);
|
|
48
|
+
@include ui.define-font-size('xsmall', ui.q(2.25), 1.5);
|
|
49
|
+
@include ui.define-font-size('small', ui.q(2.5), 1.5);
|
|
50
|
+
|
|
51
|
+
// normal is mirroring small, becouse it's the default size
|
|
52
|
+
@include ui.define-font-size('normal', ui.q(2.5), 1.5);
|
|
53
|
+
|
|
54
|
+
@include ui.define-font-size('medium', ui.q(3.125), 1.3);
|
|
55
|
+
@include ui.define-font-size('large', ui.q(3.75), 1.3);
|
|
56
|
+
@include ui.define-font-size('xlarge', ui.q(5), 1.3);
|
|
57
|
+
@include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
|
|
58
|
+
@include ui.define-font-size('xxxlarge', ui.q(8.75), 1.15);
|
|
59
|
+
|
|
60
|
+
@include ui.def('font-weight-thin', 100);
|
|
61
|
+
@include ui.def('font-weight-small', 300);
|
|
62
|
+
@include ui.def('font-weight-normal', 400);
|
|
63
|
+
@include ui.def('font-weight-bold', 700);
|
|
64
|
+
@include ui.def('font-weight-bolder', 800);
|
|
65
|
+
@include ui.def('font-weight-boldest', 900);
|
|
66
|
+
|
|
67
|
+
@include ui.def('letter-spacing-normal', -0.025em);
|
|
68
|
+
@include ui.def('letter-spacing-large', 0);
|
|
69
|
+
|
|
70
|
+
@include ui.def('font-family-primary', 'HelveticaNowText');
|
|
71
|
+
@include ui.def('font-family-secondary', 'HelveticaNowDisplay');
|
|
72
|
+
|
|
73
|
+
@include ui.define-color-token('text', ui.color('primary', 'pure' ));
|
|
74
|
+
@include ui.def ('text-opacity-10', .10);
|
|
75
|
+
@include ui.define-color-token('text-a10', ui.color('primary', $alpha: .10));
|
|
76
|
+
@include ui.def ('text-opacity-25', .25);
|
|
77
|
+
@include ui.define-color-token('text-a25', ui.color('primary', $alpha: .25));
|
|
78
|
+
@include ui.def ('text-opacity-50', .50);
|
|
79
|
+
@include ui.define-color-token('text-a50', ui.color('primary', $alpha: .50));
|
|
80
|
+
@include ui.def ('text-opacity-75', .75);
|
|
81
|
+
@include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@mixin offset-tokens() {
|
|
85
|
+
@each $name, $value in $offsets {
|
|
86
|
+
@include ui.def('offset-#{$name}', $value);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
$control-heights: (
|
|
91
|
+
'xxsmall': ui.q(1.5),
|
|
92
|
+
'xsmall': ui.q(3),
|
|
93
|
+
'small': ui.q(4),
|
|
94
|
+
'normal': ui.q(6),
|
|
95
|
+
'large': ui.q(7),
|
|
96
|
+
'xlarge': ui.q(10),
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
@mixin control-height-tokens() {
|
|
100
|
+
@each $name, $value in $control-heights {
|
|
101
|
+
@include ui.def('control-height-#{$name}', $value);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Components tokens
|
|
106
|
+
|
|
107
|
+
@mixin checkbox-tokens() {
|
|
108
|
+
@include ui.define-color-token('checkbox-focus-border-color', ui.color('primary'));
|
|
109
|
+
@include ui.def('checkbox-focus-border-size', ui.q(.25));
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@mixin switch-tokens() {
|
|
113
|
+
@include ui.define-color-token('switch-focus-border-color', ui.color('primary'));
|
|
114
|
+
@include ui.def('switch-focus-border-size', ui.q(.25));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@mixin input-dropzone-tokens() {
|
|
118
|
+
@include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
|
|
119
|
+
@include ui.def('dropzone-focus-border-size', ui.q(.25));
|
|
120
|
+
|
|
121
|
+
@include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
|
|
122
|
+
@include ui.def('dropzone-border-size', 1px);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@mixin input-tokens() {
|
|
126
|
+
@include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: .4));
|
|
127
|
+
@include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: .6));
|
|
128
|
+
|
|
129
|
+
@include ui.define-color-token('input-text', ui.color('primary'));
|
|
130
|
+
@include ui.define-color-token('input-background', ui.color('bg'));
|
|
131
|
+
|
|
132
|
+
@include ui.def('input-border-size', 1px);
|
|
133
|
+
@include ui.define-color-token('input-border', ui.color('bg-light'));
|
|
134
|
+
@include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
|
|
135
|
+
@include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
|
|
136
|
+
@include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
|
|
137
|
+
|
|
138
|
+
@include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: .1));
|
|
139
|
+
@include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: .2));
|
|
140
|
+
@include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: .2));
|
|
141
|
+
@include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: .1));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@mixin accordion-tokens() {
|
|
145
|
+
@include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: .1));
|
|
146
|
+
@include ui.define-color-token('accordion-background', ui.color('bg'));
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@mixin select-tokens() {
|
|
150
|
+
@include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
|
|
151
|
+
@include ui.define-color-token('interactive-list-item-background', transparent);
|
|
152
|
+
@include ui.define-color-token('interactive-list-item-hover-background', ui.color('bg-light', 700, 1));
|
|
153
|
+
@include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, .5));
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@mixin icon-tokens() {
|
|
157
|
+
@include ui.def('icon-big-size-small', ui.q(6));
|
|
158
|
+
@include ui.def('icon-big-size-normal', ui.q(8));
|
|
159
|
+
@include ui.def('icon-big-size-large', ui.q(12));
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@mixin info-panel-tokens() {
|
|
163
|
+
@include ui.def('info-panel-focus-border-size', ui.q(.25));
|
|
164
|
+
|
|
165
|
+
@include ui.define-color-token('info-panel-border', ui.color('primary', 950, .7));
|
|
166
|
+
@include ui.define-color-token('info-panel-background', ui.color('primary', 950, .1));
|
|
167
|
+
@include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, .2));
|
|
168
|
+
|
|
169
|
+
@include ui.define-color-token('info-panel-error-border', ui.color('red'));
|
|
170
|
+
@include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: .2));
|
|
171
|
+
@include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: .4));
|
|
172
|
+
|
|
173
|
+
@include ui.define-color-token('info-panel-success-border', ui.color('green'));
|
|
174
|
+
@include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: .2));
|
|
175
|
+
@include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: .4));
|
|
176
|
+
|
|
177
|
+
@include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
|
|
178
|
+
@include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: .2));
|
|
179
|
+
@include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: .4));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@mixin tabular-tokens() {
|
|
183
|
+
@include ui.define-color-token('tabular-color-dark', ui.color('primary'));
|
|
184
|
+
@include ui.define-color-token('tabular-color-light', ui.color('accent'));
|
|
185
|
+
|
|
186
|
+
@include ui.def('tabular-notification-gap', ui.q(.75));
|
|
187
|
+
|
|
188
|
+
@include ui.def('tabular-item-height', ui.control-height('xlarge'));
|
|
189
|
+
@include ui.def('tabular-item-padding', ui.offset('medium'));
|
|
190
|
+
|
|
191
|
+
@include ui.def('tabular-item-border-size', ui.q(.25));
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@mixin modal-tokens() {
|
|
195
|
+
@include ui.define-color-token('modal-background', ui.color('bg-light'));
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@mixin scrollable-tokens() {
|
|
199
|
+
@include ui.def('scrollable-thumb-size', ui.q(1));
|
|
200
|
+
@include ui.def('scrollable-thumb-x-offset', 0);
|
|
201
|
+
@include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
|
|
202
|
+
@include ui.define-color-token('scrollbar-track-background', ui.color('bg'));
|
|
203
|
+
@include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: .4));
|
|
204
|
+
@include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: .6));
|
|
205
|
+
@include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: .8));
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
@mixin avatar-tokens() {
|
|
209
|
+
@include ui.define-color-token('avatar-background', ui.color('primary'));
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@mixin title-tokens() {
|
|
213
|
+
@include ui.define-color-token('title-text', ui.color('bg'));
|
|
214
|
+
@include ui.define-color-token('title-background', ui.color('primary'));
|
|
215
|
+
@include ui.define-color-token('title-text-copy', ui.color('green'));
|
|
216
|
+
@include ui.define-color-token('title-background-dark', ui.color('bg'));
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@mixin button-tokens() {
|
|
220
|
+
@include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: .5));
|
|
221
|
+
|
|
222
|
+
@include ui.define-color-token('button-text', ui.color('primary'));
|
|
223
|
+
@include ui.define-color-token('button-border', transparent);
|
|
224
|
+
@include ui.define-color-token('button-background', ui.color('primary', $alpha: .15));
|
|
225
|
+
@include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: .05));
|
|
226
|
+
@include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: .1));
|
|
227
|
+
@include ui.define-color-token('button-active-border', ui.color('primary', $alpha: .15));
|
|
228
|
+
@include ui.define-color-token('button-active-background', transparent);
|
|
229
|
+
|
|
230
|
+
@include ui.define-color-token('button-primary-text', ui.color('primary'));
|
|
231
|
+
@include ui.define-color-token('button-primary-border', ui.color('accent'));
|
|
232
|
+
@include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: .4));
|
|
233
|
+
@include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
|
|
234
|
+
@include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
|
|
235
|
+
@include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
|
|
236
|
+
@include ui.define-color-token('button-primary-active-text', ui.color('primary'));
|
|
237
|
+
@include ui.define-color-token('button-primary-active-border', transparent);
|
|
238
|
+
@include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: .6));
|
|
239
|
+
@include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: .4));
|
|
240
|
+
@include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: .4));
|
|
241
|
+
@include ui.define-color-token('button-primary-disabled-background', transparent);
|
|
242
|
+
|
|
243
|
+
@include ui.define-color-token('button-secondary-text', ui.color('primary'));
|
|
244
|
+
@include ui.define-color-token('button-secondary-border', ui.color('primary'));
|
|
245
|
+
@include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
|
|
246
|
+
@include ui.define-color-token('button-secondary-hover-text', ui.color('bg'));
|
|
247
|
+
@include ui.define-color-token('button-secondary-hover-border', ui.color('primary'));
|
|
248
|
+
@include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
|
|
249
|
+
@include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
|
|
250
|
+
@include ui.define-color-token('button-secondary-active-border', transparent);
|
|
251
|
+
@include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: .6));
|
|
252
|
+
@include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: .4));
|
|
253
|
+
@include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: .4));
|
|
254
|
+
@include ui.define-color-token('button-secondary-disabled-background', transparent);
|
|
255
|
+
|
|
256
|
+
@include ui.define-color-token('button-onlight-text', ui.color('primary'));
|
|
257
|
+
@include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
|
|
258
|
+
@include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
|
|
259
|
+
@include ui.define-color-token('button-onlight-hover-text', ui.color('primary'));
|
|
260
|
+
@include ui.define-color-token('button-onlight-hover-border', ui.color('accent'));
|
|
261
|
+
@include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
|
|
262
|
+
@include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
|
|
263
|
+
@include ui.define-color-token('button-onlight-active-border', transparent);
|
|
264
|
+
@include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', $alpha: .6));
|
|
265
|
+
@include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: .4));
|
|
266
|
+
@include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: .4));
|
|
267
|
+
@include ui.define-color-token('button-onlight-disabled-background', transparent);
|
|
268
|
+
|
|
269
|
+
@include ui.define-color-token('button-linked-text', ui.color('tertiary'));
|
|
270
|
+
@include ui.define-color-token('button-linked-border', transparent);
|
|
271
|
+
@include ui.define-color-token('button-linked-background', transparent);
|
|
272
|
+
@include ui.define-color-token('button-linked-hover-text', ui.color('accent'));
|
|
273
|
+
@include ui.define-color-token('button-linked-hover-border', transparent);
|
|
274
|
+
@include ui.define-color-token('button-linked-hover-background', #24293B);
|
|
275
|
+
@include ui.define-color-token('button-linked-active-text', ui.color('red'));
|
|
276
|
+
@include ui.define-color-token('button-linked-active-border', transparent);
|
|
277
|
+
@include ui.define-color-token('button-linked-active-background', #24293B);
|
|
278
|
+
@include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
|
|
279
|
+
@include ui.define-color-token('button-linked-disabled-border', transparent);
|
|
280
|
+
@include ui.define-color-token('button-linked-disabled-background', transparent);
|
|
281
|
+
|
|
282
|
+
@include ui.define-color-token('button-quicklink-text', ui.color('primary'));
|
|
283
|
+
@include ui.define-color-token('button-quicklink-border', transparent);
|
|
284
|
+
@include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
|
|
285
|
+
@include ui.define-color-token('button-quicklink-hover-text', ui.color('primary'));
|
|
286
|
+
@include ui.define-color-token('button-quicklink-hover-border', transparent);
|
|
287
|
+
@include ui.define-color-token('button-quicklink-hover-background', ui.color('accent'));
|
|
288
|
+
@include ui.define-color-token('button-quicklink-active-text', ui.color('primary'));
|
|
289
|
+
@include ui.define-color-token('button-quicklink-active-border', transparent);
|
|
290
|
+
@include ui.define-color-token('button-quicklink-active-background', ui.color('accent'));
|
|
291
|
+
@include ui.define-color-token('button-quicklink-disabled-text', ui.color('primary'));
|
|
292
|
+
@include ui.define-color-token('button-quicklink-disabled-border', transparent);
|
|
293
|
+
@include ui.define-color-token('button-quicklink-disabled-background', ui.color('bg-light'));
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@mixin badge-tokens() {
|
|
297
|
+
@include ui.define-color-token('badge-success-text', ui.color('green'));
|
|
298
|
+
@include ui.define-color-token('badge-success-background', ui.color('green', $alpha: .2));
|
|
299
|
+
@include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: .4));
|
|
300
|
+
|
|
301
|
+
@include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
|
|
302
|
+
@include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: .2));
|
|
303
|
+
@include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: .4));
|
|
304
|
+
|
|
305
|
+
@include ui.define-color-token('badge-warning-text', ui.color('yellow'));
|
|
306
|
+
@include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: .2));
|
|
307
|
+
@include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: .4));
|
|
308
|
+
|
|
309
|
+
@include ui.define-color-token('badge-error-text', ui.color('red'));
|
|
310
|
+
@include ui.define-color-token('badge-error-background', ui.color('red', $alpha: .2));
|
|
311
|
+
@include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/**
|
|
315
|
+
* Look for usages by searching for `ui.color-token('name')`
|
|
316
|
+
*/
|
|
317
|
+
@mixin color-tokens() {
|
|
318
|
+
@include ui.define-color-token('li-marker', ui.color('main', 950, .75));
|
|
319
|
+
|
|
320
|
+
@include ui.define-color-token('kbd-border', ui.color('main', 300));
|
|
321
|
+
@include ui.define-color-token('kbd-background', ui.color('main', 200));
|
|
322
|
+
|
|
323
|
+
@include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
|
|
324
|
+
@include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
|
|
325
|
+
|
|
326
|
+
@include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
|
|
327
|
+
@include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
|
|
328
|
+
|
|
329
|
+
// TODO: add text warning, success and error
|
|
330
|
+
|
|
331
|
+
@include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
|
|
332
|
+
|
|
333
|
+
@include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: .4));
|
|
334
|
+
@include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: .6));
|
|
335
|
+
@include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: .8));
|
|
336
|
+
|
|
337
|
+
@include ui.define-color-token('backdrop', ui.color('bg', $alpha: .75));
|
|
338
|
+
@include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: .25));
|
|
339
|
+
@include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: .5));
|
|
340
|
+
@include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: .75));
|
|
341
|
+
|
|
342
|
+
@include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: .75));
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
// COMPONENTS
|
|
346
|
+
@include ui.define-color-token('avatar-background', ui.color('main'));
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
@include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: .5));
|
|
350
|
+
@include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
|
|
351
|
+
|
|
352
|
+
@include ui.define-color-token('checkbox-text', ui.color('main', 950));
|
|
353
|
+
@include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
|
|
354
|
+
@include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
|
|
355
|
+
@include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
@include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
|
|
359
|
+
@include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
|
|
360
|
+
@include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
|
|
361
|
+
@include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
@include ui.define-color-token('indicator-bright', ui.color('primary'));
|
|
365
|
+
@include ui.define-color-token('indicator-dim', transparent);
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
@include ui.define-color-token('island-border', ui.color('main', 50, .25));
|
|
369
|
+
@include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
|
|
370
|
+
@include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
@include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
|
|
374
|
+
@include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
|
|
375
|
+
@include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
|
|
376
|
+
|
|
377
|
+
@include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
|
|
378
|
+
@include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
|
|
379
|
+
@include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
|
|
380
|
+
|
|
381
|
+
@include ui.define-color-token('loaf-error-text', ui.color('error', 500));
|
|
382
|
+
@include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
|
|
383
|
+
@include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
@include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
|
|
387
|
+
@include ui.define-color-token('navlist-item-background', transparent);
|
|
388
|
+
@include ui.define-color-token('navlist-item-active-border', transparent);
|
|
389
|
+
@include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
|
|
390
|
+
@include ui.define-color-token('navlist-item-hover-border', transparent);
|
|
391
|
+
@include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
@include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
@include ui.define-color-token('separator-text', ui.color('main', 950, .25));
|
|
398
|
+
@include ui.define-color-token('separator-background', ui.color('main', 950, .1));
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
@include ui.define-color-token('toggle-description-text', ui.color('main', 950, .5));
|
|
402
|
+
@include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
|
|
403
|
+
|
|
404
|
+
@include ui.define-color-token('toggle-background', ui.color('main', 950, .1));
|
|
405
|
+
@include ui.define-color-token('toggle-hover-background', ui.color('main', 200));
|
|
406
|
+
|
|
407
|
+
@include ui.define-color-token('toggle-active-text', ui.color('main'));
|
|
408
|
+
@include ui.define-color-token('toggle-active-background', ui.color('main', 950, .75));
|
|
409
|
+
}
|