cats-data-grid 2.0.6 → 2.0.8
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/assets/images/add-more-right-blue.svg +3 -0
- package/assets/images/autosize-all.svg +3 -0
- package/assets/images/autosize-this.svg +3 -0
- package/assets/images/eye-custom-header.svg +4 -0
- package/assets/images/eye-off-custom-header.svg +3 -0
- package/fesm2022/cats-data-grid.mjs +1985 -160
- package/fesm2022/cats-data-grid.mjs.map +1 -1
- package/index.d.ts +336 -22
- package/package.json +1 -1
- package/styles/component/_form.scss +115 -60
- package/styles/sass-utils/_mixin.scss +14 -1
- package/styles/sass-utils/_variable.scss +120 -69
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
@use "../sass-utils" as *;
|
|
2
2
|
|
|
3
3
|
//========== CUSTOM SCROLL BAR ======================
|
|
4
|
+
|
|
5
|
+
#table_scroll.filter-tag-wrapper::-webkit-scrollbar {
|
|
6
|
+
@include box(rem(10px), rem(10px));
|
|
7
|
+
}
|
|
4
8
|
#table_scroll::-webkit-scrollbar {
|
|
5
9
|
@include box(rem(14px), rem(14px));
|
|
6
10
|
}
|
|
7
11
|
#table_scroll::-webkit-scrollbar-track {
|
|
8
|
-
background-color: var(--
|
|
12
|
+
background-color: var(--border-core-default);
|
|
9
13
|
@include border($width: rem(3px), $radius: rem(100px), $color: transparent);
|
|
10
14
|
background-clip: padding-box;
|
|
11
15
|
}
|
|
12
16
|
#table_scroll::-webkit-scrollbar-thumb {
|
|
13
|
-
background-color: var(--
|
|
17
|
+
background-color: var(--text-body-secondary);
|
|
14
18
|
@include border($width: rem(3px), $radius: rem(100px), $color: transparent);
|
|
15
19
|
background-clip: padding-box;
|
|
16
20
|
}
|
|
@@ -19,16 +23,16 @@
|
|
|
19
23
|
}
|
|
20
24
|
#table_scroll::-webkit-scrollbar-button {
|
|
21
25
|
@include box(rem(14px), rem(14px));
|
|
22
|
-
background-color: var(--
|
|
26
|
+
background-color: var(--surface-background-subtle);
|
|
23
27
|
border-radius: rem(2px);
|
|
24
28
|
cursor: pointer;
|
|
25
29
|
display: none;
|
|
26
30
|
background-repeat: no-repeat;
|
|
27
31
|
background-position: center;
|
|
28
|
-
background-size: rem(
|
|
32
|
+
background-size: rem(15px);
|
|
29
33
|
}
|
|
30
34
|
#table_scroll::-webkit-scrollbar-button:hover {
|
|
31
|
-
background-color: var(--
|
|
35
|
+
background-color: var(--text-body-muted);
|
|
32
36
|
}
|
|
33
37
|
#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
|
|
34
38
|
background-image: url("/images/chevron-up.svg");
|
|
@@ -57,47 +61,81 @@
|
|
|
57
61
|
to bottom,
|
|
58
62
|
rgb(240, 240, 240) 0%,
|
|
59
63
|
rgb(240, 240, 240) 70.5%,
|
|
60
|
-
var(--
|
|
61
|
-
var(--
|
|
62
|
-
var(--
|
|
63
|
-
var(--
|
|
64
|
+
var(--border-core-default) 70.5%,
|
|
65
|
+
var(--border-core-default) 72.5%,
|
|
66
|
+
var(--surface-background-subtle) 72.5%,
|
|
67
|
+
var(--surface-background-subtle) 100%
|
|
64
68
|
);
|
|
65
69
|
border-top-left-radius: 0;
|
|
66
70
|
border-top-right-radius: 0;
|
|
67
71
|
&:hover {
|
|
72
|
+
background:
|
|
73
|
+
url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
|
|
74
|
+
linear-gradient(
|
|
75
|
+
to bottom,
|
|
76
|
+
var(--surface-background-default) 0%,
|
|
77
|
+
var(--surface-background-default) 70.5%,
|
|
78
|
+
var(--border-core-default) 70.5%,
|
|
79
|
+
var(--border-core-default) 72.5%,
|
|
80
|
+
var(--text-body-muted) 72.5%,
|
|
81
|
+
var(--text-body-muted) 100%
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
//CSS for large height rows
|
|
86
|
+
.cats-tableArea.large {
|
|
87
|
+
#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
|
|
88
|
+
height: rem(71px);
|
|
68
89
|
background:
|
|
69
90
|
url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
|
|
70
91
|
linear-gradient(
|
|
71
92
|
to bottom,
|
|
72
93
|
rgb(240, 240, 240) 0%,
|
|
73
|
-
rgb(240, 240, 240)
|
|
74
|
-
|
|
75
|
-
var(--
|
|
76
|
-
var(--
|
|
77
|
-
|
|
94
|
+
rgb(240, 240, 240) 78.8%,
|
|
95
|
+
|
|
96
|
+
var(--border-core-default) 78.8%,
|
|
97
|
+
var(--border-core-default) 81.7%,
|
|
98
|
+
|
|
99
|
+
var(--surface-background-subtle) 81.7%,
|
|
100
|
+
var(--surface-background-subtle) 100%
|
|
78
101
|
);
|
|
102
|
+
&:hover {
|
|
103
|
+
background:
|
|
104
|
+
url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
|
|
105
|
+
linear-gradient(
|
|
106
|
+
to bottom,
|
|
107
|
+
var(--surface-background-default) 0%,
|
|
108
|
+
var(--surface-background-default) 78.8%,
|
|
109
|
+
|
|
110
|
+
var(--border-core-default) 78.8%,
|
|
111
|
+
var(--border-core-default) 81.7%,
|
|
112
|
+
|
|
113
|
+
var(--text-body-muted) 81.7%,
|
|
114
|
+
var(--text-body-muted) 100%
|
|
115
|
+
);
|
|
116
|
+
}
|
|
79
117
|
}
|
|
80
118
|
}
|
|
81
119
|
|
|
82
120
|
// ---------------- CUSTOM RADIO INPUT START HERE--------
|
|
83
|
-
.
|
|
121
|
+
.cats-radio-option {
|
|
84
122
|
display: flex;
|
|
85
123
|
@include box(rem(16px), rem(16px));
|
|
86
|
-
[type="radio"]:not(:checked)[disabled] + label {
|
|
87
|
-
color: var(--
|
|
124
|
+
[type="radio"]:not(:checked)[disabled] + .label {
|
|
125
|
+
color: var(--text-body-muted);
|
|
88
126
|
cursor: default;
|
|
89
127
|
&::before {
|
|
90
|
-
background-color: var(--
|
|
128
|
+
background-color: var(--surface-background-subtle);
|
|
91
129
|
}
|
|
92
130
|
}
|
|
93
|
-
[type="radio"]:is(:checked)[disabled] + label {
|
|
94
|
-
color: var(--
|
|
131
|
+
[type="radio"]:is(:checked)[disabled] + .label {
|
|
132
|
+
color: var(--text-body-muted);
|
|
95
133
|
cursor: default;
|
|
96
134
|
&::before {
|
|
97
|
-
border-color: var(--
|
|
135
|
+
border-color: var(--border-core-muted);
|
|
98
136
|
}
|
|
99
137
|
&::after {
|
|
100
|
-
background-color: var(--
|
|
138
|
+
background-color: var(--surface-background-subtle);
|
|
101
139
|
}
|
|
102
140
|
}
|
|
103
141
|
%check-style {
|
|
@@ -105,64 +143,68 @@
|
|
|
105
143
|
position: absolute;
|
|
106
144
|
@include positioning(0, 0);
|
|
107
145
|
@include box(rem(16px), rem(16px));
|
|
108
|
-
background: var(--
|
|
146
|
+
background: var(--surface-background-canvas);
|
|
109
147
|
}
|
|
110
148
|
[type="radio"]:checked,
|
|
111
149
|
[type="radio"]:not(:checked) {
|
|
112
150
|
position: absolute;
|
|
113
151
|
left: -9999px;
|
|
114
152
|
}
|
|
115
|
-
[type="radio"]:checked + label,
|
|
116
|
-
[type="radio"]:not(:checked) + label {
|
|
153
|
+
[type="radio"]:checked + .label,
|
|
154
|
+
[type="radio"]:not(:checked) + .label {
|
|
117
155
|
position: relative;
|
|
118
156
|
padding-left: rem(24px);
|
|
119
157
|
cursor: pointer;
|
|
120
158
|
display: inline-block;
|
|
121
|
-
color: var(--
|
|
159
|
+
color: var(--text-heading-primary);
|
|
122
160
|
line-height: rem(16px);
|
|
123
161
|
}
|
|
124
|
-
[type="radio"]:checked + label:before {
|
|
162
|
+
[type="radio"]:checked + .label:before {
|
|
125
163
|
@extend %check-style;
|
|
126
|
-
@include border(
|
|
164
|
+
@include border(
|
|
165
|
+
$width: rem(1.5px),
|
|
166
|
+
$color: var(--border-interaction-focus),
|
|
167
|
+
$radius: 100%
|
|
168
|
+
);
|
|
127
169
|
}
|
|
128
|
-
[type="radio"]:not(:checked) + label:before {
|
|
170
|
+
[type="radio"]:not(:checked) + .label:before {
|
|
129
171
|
@extend %check-style;
|
|
130
172
|
@include border($width: rem(1.5px), $radius: 100%);
|
|
131
173
|
}
|
|
132
|
-
[type="radio"]:checked + label:after,
|
|
133
|
-
[type="radio"]:not(:checked) + label:after {
|
|
174
|
+
[type="radio"]:checked + .label:after,
|
|
175
|
+
[type="radio"]:not(:checked) + .label:after {
|
|
134
176
|
content: "";
|
|
135
177
|
@include box(rem(6px), rem(6px));
|
|
136
|
-
background: var(--
|
|
178
|
+
background: var(--surface-action-default);
|
|
137
179
|
position: absolute;
|
|
138
180
|
@include positioning(rem(5px), rem(5px));
|
|
139
181
|
border-radius: 100%;
|
|
140
182
|
transition: all 0.2s ease;
|
|
141
183
|
}
|
|
142
|
-
[type="radio"]:not(:checked) + label:after {
|
|
184
|
+
[type="radio"]:not(:checked) + .label:after {
|
|
143
185
|
opacity: 0;
|
|
144
186
|
transform: scale(0);
|
|
145
187
|
}
|
|
146
|
-
[type="radio"]:checked + label:after {
|
|
188
|
+
[type="radio"]:checked + .label:after {
|
|
147
189
|
opacity: 1;
|
|
148
190
|
transform: scale(1);
|
|
149
191
|
}
|
|
150
192
|
}
|
|
151
193
|
|
|
152
194
|
// ---------------- CUSTOM CHECKBOX INPUT START HERE--------
|
|
153
|
-
.checkbox_container {
|
|
195
|
+
.cats-checkbox_container {
|
|
154
196
|
@include flex(flex-start, center, rem(8px));
|
|
155
197
|
@include fontStyle(var(--fs-14), rem(20px), 400);
|
|
156
|
-
color: var(--
|
|
198
|
+
color: var(--text-heading-primary);
|
|
157
199
|
// --- Disabled (check & uncheck) ---
|
|
158
200
|
input[type="checkbox"].custom_check_box,
|
|
159
201
|
input[type="checkbox"].custom_check_box:checked {
|
|
160
202
|
&[disabled] {
|
|
161
203
|
cursor: default;
|
|
162
|
-
background-color: var(--
|
|
163
|
-
border-color: var(--
|
|
204
|
+
background-color: var(--text-body-muted);
|
|
205
|
+
border-color: var(--border-core-strong);
|
|
164
206
|
& + span {
|
|
165
|
-
color: var(--
|
|
207
|
+
color: var(--text-body-muted);
|
|
166
208
|
}
|
|
167
209
|
}
|
|
168
210
|
}
|
|
@@ -173,7 +215,7 @@
|
|
|
173
215
|
min-width: rem(16px);
|
|
174
216
|
@include border();
|
|
175
217
|
cursor: pointer;
|
|
176
|
-
background-color: var(--
|
|
218
|
+
background-color: var(--surface-background-canvas);
|
|
177
219
|
position: relative;
|
|
178
220
|
transition: all 0.2s ease;
|
|
179
221
|
|
|
@@ -190,8 +232,8 @@
|
|
|
190
232
|
}
|
|
191
233
|
// --- Checked State ---
|
|
192
234
|
&:checked {
|
|
193
|
-
border-color: var(--
|
|
194
|
-
background-color: var(--
|
|
235
|
+
border-color: var(--border-interaction-focus);
|
|
236
|
+
background-color: var(--surface-action-default);
|
|
195
237
|
&::after {
|
|
196
238
|
display: block;
|
|
197
239
|
background-image: url("/images/check-white.svg");
|
|
@@ -200,8 +242,8 @@
|
|
|
200
242
|
}
|
|
201
243
|
// --- Indeterminate (minus) state ---
|
|
202
244
|
&:indeterminate {
|
|
203
|
-
border-color: var(--
|
|
204
|
-
background-color: var(--
|
|
245
|
+
border-color: var(--border-interaction-focus);
|
|
246
|
+
background-color: var(--surface-background-canvas);
|
|
205
247
|
&::after {
|
|
206
248
|
display: block;
|
|
207
249
|
top: 0;
|
|
@@ -222,8 +264,8 @@
|
|
|
222
264
|
@include border();
|
|
223
265
|
padding: rem(10px) rem(12px);
|
|
224
266
|
@include fontStyle(var(--fs-14), rem(20px));
|
|
225
|
-
background-color: var(--
|
|
226
|
-
color: var(--
|
|
267
|
+
background-color: var(--surface-background-canvas);
|
|
268
|
+
color: var(--text-heading-primary);
|
|
227
269
|
cursor: pointer;
|
|
228
270
|
|
|
229
271
|
.left_details {
|
|
@@ -244,7 +286,7 @@
|
|
|
244
286
|
overflow: auto;
|
|
245
287
|
position: absolute;
|
|
246
288
|
z-index: 2;
|
|
247
|
-
background: var(--
|
|
289
|
+
background: var(--surface-background-canvas);
|
|
248
290
|
box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
|
|
249
291
|
top: rem(40px);
|
|
250
292
|
|
|
@@ -262,9 +304,9 @@
|
|
|
262
304
|
@include fontStyle(var(--fs-14), rem(20px));
|
|
263
305
|
padding: rem(10px) rem(12px);
|
|
264
306
|
cursor: pointer;
|
|
265
|
-
color: var(--
|
|
307
|
+
color: var(--text-heading-primary);
|
|
266
308
|
&:hover {
|
|
267
|
-
background-color: var(--
|
|
309
|
+
background-color: var(--surface-background-default);
|
|
268
310
|
}
|
|
269
311
|
&.disabled_option {
|
|
270
312
|
opacity: 0.3;
|
|
@@ -281,7 +323,7 @@
|
|
|
281
323
|
@include box(100%, rem(40px));
|
|
282
324
|
@include border();
|
|
283
325
|
padding: rem(10px) rem(12px);
|
|
284
|
-
background-color: var(--
|
|
326
|
+
background-color: var(--surface-background-canvas);
|
|
285
327
|
@include flex(flex-start, center, rem(4px));
|
|
286
328
|
|
|
287
329
|
img {
|
|
@@ -292,9 +334,9 @@
|
|
|
292
334
|
@include box(100%, 100%);
|
|
293
335
|
border: 0;
|
|
294
336
|
@include fontStyle(var(--fs-14), rem(20px), 400);
|
|
295
|
-
color: var(--
|
|
337
|
+
color: var(--text-heading-primary);
|
|
296
338
|
&::placeholder {
|
|
297
|
-
color: var(--
|
|
339
|
+
color: var(--text-heading-secondary);
|
|
298
340
|
}
|
|
299
341
|
}
|
|
300
342
|
}
|
|
@@ -312,7 +354,7 @@
|
|
|
312
354
|
.slider {
|
|
313
355
|
position: absolute;
|
|
314
356
|
cursor: pointer;
|
|
315
|
-
background-color: var(--
|
|
357
|
+
background-color: var(--surface-background-subtle);
|
|
316
358
|
border-radius: rem(16px);
|
|
317
359
|
inset: 0;
|
|
318
360
|
transition: 0.3s;
|
|
@@ -322,7 +364,7 @@
|
|
|
322
364
|
@include box(rem(12px), rem(12px));
|
|
323
365
|
left: rem(2px);
|
|
324
366
|
bottom: rem(2px);
|
|
325
|
-
background-color: var(--
|
|
367
|
+
background-color: var(--surface-background-canvas);
|
|
326
368
|
border-radius: 50%;
|
|
327
369
|
transition: 0.3s;
|
|
328
370
|
box-shadow: 0 rem(0.8px) rem(2.4px) 0 var(--box-shadow);
|
|
@@ -330,14 +372,14 @@
|
|
|
330
372
|
}
|
|
331
373
|
|
|
332
374
|
input:checked + .slider {
|
|
333
|
-
background-color: var(--
|
|
375
|
+
background-color: var(--surface-action-default);
|
|
334
376
|
&:before {
|
|
335
377
|
transform: translateX(rem(12px));
|
|
336
378
|
}
|
|
337
379
|
}
|
|
338
380
|
}
|
|
339
381
|
}
|
|
340
|
-
.tableArea.
|
|
382
|
+
.cats-tableArea.large {
|
|
341
383
|
.table_wrapper {
|
|
342
384
|
table {
|
|
343
385
|
tbody {
|
|
@@ -363,9 +405,22 @@
|
|
|
363
405
|
}
|
|
364
406
|
}
|
|
365
407
|
|
|
366
|
-
.text-primary {
|
|
367
|
-
color: var(--
|
|
408
|
+
.cats-text-primary {
|
|
409
|
+
color: var(--text-link-default);
|
|
368
410
|
}
|
|
369
|
-
.text-danger {
|
|
370
|
-
color: var(--
|
|
411
|
+
.cats-text-danger {
|
|
412
|
+
color: var(--semantics-error-default);
|
|
413
|
+
}
|
|
414
|
+
//---------------Text Trunctae CSS -----------
|
|
415
|
+
|
|
416
|
+
.ellipsis,
|
|
417
|
+
.textTruncate {
|
|
418
|
+
white-space: nowrap;
|
|
419
|
+
overflow: hidden;
|
|
420
|
+
text-overflow: ellipsis;
|
|
421
|
+
/* max-width: rem(200px); */
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.tooltip-trigger {
|
|
425
|
+
cursor: default;
|
|
371
426
|
}
|
|
@@ -62,7 +62,7 @@ $ultraWideDesktop: 1919px;
|
|
|
62
62
|
@mixin border(
|
|
63
63
|
$width: rem(1px),
|
|
64
64
|
$style: solid,
|
|
65
|
-
$color: var(--
|
|
65
|
+
$color: var(--border-core-default),
|
|
66
66
|
$radius: rem(4px)
|
|
67
67
|
) {
|
|
68
68
|
border: $width $style $color;
|
|
@@ -85,3 +85,16 @@ $ultraWideDesktop: 1919px;
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
|
+
$base-color: #f4f4f4;
|
|
89
|
+
$shine-color: rgba(229, 229, 229, 0.8);
|
|
90
|
+
$animation-duration: 2s;
|
|
91
|
+
$avatar-offset: 52 + 16;
|
|
92
|
+
@mixin background-gradient {
|
|
93
|
+
background-image: linear-gradient(
|
|
94
|
+
90deg,
|
|
95
|
+
$base-color 0px,
|
|
96
|
+
$shine-color 40px,
|
|
97
|
+
$base-color 80px
|
|
98
|
+
);
|
|
99
|
+
background-size: 600px;
|
|
100
|
+
}
|
|
@@ -1,77 +1,128 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--white: #ffffff;
|
|
3
|
-
|
|
4
|
-
// --default: #000000;
|
|
5
|
-
// --black: #1f1f1f;
|
|
6
|
-
// --black-dust: #1a1a1a;
|
|
7
|
-
// --black-900: #202224;
|
|
8
|
-
|
|
9
|
-
--pagination-text: var(--neutral-500);
|
|
10
|
-
|
|
11
|
-
// NEUTRAL-COLOR
|
|
12
|
-
// --neutral-cross: #d9d9d9;
|
|
13
|
-
// --neutral-40: #d5d7da;
|
|
14
|
-
--neutral-50: #f0f0f0;
|
|
15
|
-
--neutral-100: #e6e7e8;
|
|
16
|
-
--neutral-200: #dadbdc;
|
|
17
|
-
--neutral-300: #c0c2c5;
|
|
18
|
-
--neutral-400: #81858a;
|
|
19
|
-
--neutral-500: #434a51;
|
|
20
|
-
--neutral-600: #040d17;
|
|
21
|
-
// --neutral-900: #010306;
|
|
22
|
-
|
|
23
|
-
// BLUE COLOR
|
|
24
|
-
--blue-50: #f7fafe;
|
|
25
|
-
--blue-100: #eaf3fd;
|
|
26
|
-
// --blue-200: #dfecfc;
|
|
27
|
-
--blue-300: #c8dff9;
|
|
28
|
-
// --blue-400: #92bff4;
|
|
29
|
-
--blue-600: #2680ea;
|
|
30
|
-
--blue-700: #1c60af;
|
|
31
|
-
// --blue-800: #1849d6;
|
|
32
|
-
|
|
33
|
-
// GREY COLOR
|
|
34
|
-
--grey-50: #e9eaeb;
|
|
35
|
-
// --grey-100: #e2e8f0;
|
|
36
|
-
// --grey-150: #d6d6d6;
|
|
37
|
-
// --grey-200: #64748b;
|
|
38
|
-
// --grey-300: #414651;
|
|
39
|
-
// --grey-400: #8080808c;
|
|
40
|
-
// --grey-600: #535862;
|
|
41
|
-
// --light-grey: #81858a;
|
|
42
|
-
// --dark-grey: #4a4a4a;
|
|
43
|
-
|
|
44
|
-
// --green-50: #f7fbf7;
|
|
45
2
|
--green-100: #ecf4ec;
|
|
46
3
|
--green-200: #e1eee2;
|
|
47
|
-
// --green-400: #9bc69d;
|
|
48
|
-
--green-600: #388e3c;
|
|
49
|
-
--green-700: #2a6a2d;
|
|
50
|
-
|
|
51
|
-
--red: #ff0000;
|
|
52
|
-
// --red-50: #fdf7f7;
|
|
53
4
|
--red-100: #faeaea;
|
|
54
|
-
// --red-200: #f7dfdf;
|
|
55
5
|
--red-300: #f0c9c9;
|
|
56
|
-
--red-700: #941e1e;
|
|
57
|
-
|
|
58
|
-
// --yellow-50: #fffdf5;
|
|
59
6
|
--yellow-100: #fff9e7;
|
|
60
|
-
// --yellow-200: #fff6da;
|
|
61
|
-
--yellow-300: #ffefc1;
|
|
62
|
-
// --yellow-400: #fff9e7;
|
|
63
|
-
// --yellow-500: #bf7200;
|
|
64
|
-
// --yellow-600: #ffc107;
|
|
65
|
-
--yellow-700: #bf9105;
|
|
66
|
-
// --yellow-800: #806003;
|
|
67
|
-
// --yellow-900: #bf9105;
|
|
68
|
-
|
|
69
|
-
// Orange
|
|
70
|
-
// --orange-50: rgba(255, 251, 245, 1);
|
|
71
|
-
// --orange-100: #fff5e6;
|
|
72
|
-
// --orange-200: #fff0d9;
|
|
73
|
-
--orange-600: #ff9800;
|
|
74
|
-
// --orange-700: rgba(191, 114, 0, 1);
|
|
75
|
-
|
|
76
7
|
--box-shadow: #0a0d1214;
|
|
8
|
+
|
|
9
|
+
//New Variables
|
|
10
|
+
/* TEXT TOKENS */
|
|
11
|
+
--text-heading-primary: #040d17;
|
|
12
|
+
--text-heading-secondary: #434a51;
|
|
13
|
+
--text-heading-inverse: #ffffff;
|
|
14
|
+
|
|
15
|
+
--text-body-primary: #434a51;
|
|
16
|
+
--text-body-secondary: #81858a;
|
|
17
|
+
--text-body-muted: #c0c2c5;
|
|
18
|
+
--text-body-inversed: #ffffff;
|
|
19
|
+
|
|
20
|
+
--text-link-default: #2680ea;
|
|
21
|
+
--text-link-hover: #1c60af;
|
|
22
|
+
--text-link-muted: #c8dff9;
|
|
23
|
+
--text-link-inverse: #5ca0ef;
|
|
24
|
+
|
|
25
|
+
/* SURFACE TOKENS */
|
|
26
|
+
/* Background */
|
|
27
|
+
--surface-background-canvas: #ffffff;
|
|
28
|
+
--surface-background-default: #f0f0f0;
|
|
29
|
+
--surface-background-subtle: #e6e7e8;
|
|
30
|
+
--surface-background-blue: #f7fafe;
|
|
31
|
+
|
|
32
|
+
/* Contextual */
|
|
33
|
+
--surface-contextual-green: #f7fbf7;
|
|
34
|
+
--surface-contextual-red: #fdf7f7;
|
|
35
|
+
--surface-contextual-yellow: #fffdf5;
|
|
36
|
+
|
|
37
|
+
/* Decorative */
|
|
38
|
+
--surface-decorative-sage-green: #f3fcf9;
|
|
39
|
+
--surface-decorative-amber-brown: #f9f1f1;
|
|
40
|
+
--surface-decorative-teal: #eafafb;
|
|
41
|
+
--surface-decorative-pink: #f9ebf5;
|
|
42
|
+
--surface-decorative-orange: #fffbf5;
|
|
43
|
+
--surface-decorative-purple: #f4f0fa;
|
|
44
|
+
--surface-decorative-blue: #f7fafe;
|
|
45
|
+
|
|
46
|
+
/* Action */
|
|
47
|
+
--surface-action-default: #2680ea;
|
|
48
|
+
--surface-action-hover: #1c60af;
|
|
49
|
+
--surface-action-muted: #e6e7e8;
|
|
50
|
+
|
|
51
|
+
/* BORDER TOKENS */
|
|
52
|
+
/* Core */
|
|
53
|
+
--border-core-default: #dadbdc;
|
|
54
|
+
--border-core-muted: #e6e7e8;
|
|
55
|
+
--border-core-strong: #c0c2c5;
|
|
56
|
+
--border-core-inverted: #81858a;
|
|
57
|
+
|
|
58
|
+
/* Interaction */
|
|
59
|
+
--border-interaction-default: #dfecfc;
|
|
60
|
+
--border-interaction-focus: #2680ea;
|
|
61
|
+
|
|
62
|
+
/* Semantics */
|
|
63
|
+
--border-semantics-red: #f7dfdf;
|
|
64
|
+
--border-semantics-green: #cde2ce;
|
|
65
|
+
--border-semantics-yellow: #ffefc1;
|
|
66
|
+
|
|
67
|
+
/* Decorative */
|
|
68
|
+
--border-decorative-purple: #d9c9ed;
|
|
69
|
+
--border-decorative-orange: #ffe5bf;
|
|
70
|
+
--border-decorative-pink: #eec2e0;
|
|
71
|
+
--border-decorative-teal: #b0edee;
|
|
72
|
+
--border-decorative-amber-brown: #e5c1c5;
|
|
73
|
+
--border-decorative-sage-green: #a8e9d2;
|
|
74
|
+
|
|
75
|
+
/* ICON TOKENS */
|
|
76
|
+
--icons-main-primary: #040d17;
|
|
77
|
+
--icons-main-secondary: #434a51;
|
|
78
|
+
--icons-main-hover: #2680ea;
|
|
79
|
+
--icons-main-muted: #c0c2c5;
|
|
80
|
+
--icons-main-inverse: #ffffff;
|
|
81
|
+
|
|
82
|
+
/* SEMANTICS TOKENS */
|
|
83
|
+
/* Success */
|
|
84
|
+
--semantics-success-subtle: #6aaa6d;
|
|
85
|
+
--semantics-success-default: #388e3c;
|
|
86
|
+
--semantics-success-strong: #2a6a2d;
|
|
87
|
+
|
|
88
|
+
/* Error */
|
|
89
|
+
--semantics-error-subtle: #d45e5e;
|
|
90
|
+
--semantics-error-default: #ff0000;
|
|
91
|
+
--semantics-error-strong: #941e1e;
|
|
92
|
+
|
|
93
|
+
/* Warning */
|
|
94
|
+
--semantics-warning-subtle: #ffd145;
|
|
95
|
+
--semantics-warning-default: #ffc107;
|
|
96
|
+
--semantics-warning-strong: #bf9105;
|
|
97
|
+
|
|
98
|
+
/* ACCENT TOKENS */
|
|
99
|
+
/* Orange */
|
|
100
|
+
--accent-orange-subtle: #ffb240;
|
|
101
|
+
--accent-orange-default: #ff9800;
|
|
102
|
+
--accent-orange-strong: #bf7200;
|
|
103
|
+
|
|
104
|
+
/* Teal */
|
|
105
|
+
--accent-teal-subtle: #6adedf;
|
|
106
|
+
--accent-teal-default: #2ac7c9;
|
|
107
|
+
--accent-teal-strong: #23a4a6;
|
|
108
|
+
|
|
109
|
+
/* Purple */
|
|
110
|
+
--accent-purple-subtle: #976dcd;
|
|
111
|
+
--accent-purple-default: #8656c5;
|
|
112
|
+
--accent-purple-strong: #733fb7;
|
|
113
|
+
|
|
114
|
+
/* Amber Brown */
|
|
115
|
+
--accent-amber-brown-subtle: #deafb4;
|
|
116
|
+
--accent-amber-brown-default: #cf8a91;
|
|
117
|
+
--accent-amber-brown-strong: #c77880;
|
|
118
|
+
|
|
119
|
+
/* Sage Green */
|
|
120
|
+
--accent-sage-green-subtle: #33c994;
|
|
121
|
+
--accent-sage-green-default: #29a277;
|
|
122
|
+
--accent-sage-green-dark: #1f7a5a;
|
|
123
|
+
|
|
124
|
+
/* Pink */
|
|
125
|
+
--accent-pink-subtle: #d772b9;
|
|
126
|
+
--accent-pink-default: #d058ab;
|
|
127
|
+
--accent-pink-dark: #c83d9e;
|
|
77
128
|
}
|