@oardi/css-utils 0.67.0 → 0.68.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/package.json +1 -1
- package/readme.md +3 -1
- package/scss/components/card.scss +2 -1
- package/scss/components/expansion-panel.scss +22 -11
- package/scss/components/form.scss +34 -19
- package/scss/components/icon-button.scss +2 -1
- package/scss/components/list.scss +2 -1
- package/scss/components/pagination.scss +4 -2
- package/scss/components/table.scss +4 -2
- package/scss/components/tabs.scss +4 -2
- package/scss/components/timeline.scss +3 -1
- package/scss/reboot.scss +3 -1
- package/scss/theme.scss +45 -13
- package/scss/typography.scss +2 -1
- package/scss/utilities.scss +2 -1
- package/scss/variables.scss +24 -17
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -115,7 +115,9 @@ CSS Utils is based on CSS variables, so you can customize the look of the system
|
|
|
115
115
|
You can also override component variables locally:
|
|
116
116
|
|
|
117
117
|
```html
|
|
118
|
-
<button class="btn btn-primary btn-solid" type="button" style="--button-border-radius: 9999px;">
|
|
118
|
+
<button class="btn btn-primary btn-solid" type="button" style="--button-border-radius: 9999px;">
|
|
119
|
+
Rounded button
|
|
120
|
+
</button>
|
|
119
121
|
```
|
|
120
122
|
|
|
121
123
|
## Documentation
|
|
@@ -51,7 +51,8 @@
|
|
|
51
51
|
|
|
52
52
|
.card-header {
|
|
53
53
|
padding: var(--card-header-padding);
|
|
54
|
-
border-bottom: var(--card-header-border-bottom-width) solid
|
|
54
|
+
border-bottom: var(--card-header-border-bottom-width) solid
|
|
55
|
+
var(--card-header-border-bottom-color);
|
|
55
56
|
|
|
56
57
|
--card-title-spacer-y: 0.5rem;
|
|
57
58
|
}
|
|
@@ -41,14 +41,19 @@
|
|
|
41
41
|
border-radius: var(--expansion-panel-border-radius);
|
|
42
42
|
|
|
43
43
|
transition:
|
|
44
|
-
color var(--expansion-panel-transition-duration)
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
color var(--expansion-panel-transition-duration)
|
|
45
|
+
var(--expansion-panel-transition-easing),
|
|
46
|
+
background-color var(--expansion-panel-transition-duration)
|
|
47
|
+
var(--expansion-panel-transition-easing),
|
|
48
|
+
box-shadow var(--expansion-panel-transition-duration)
|
|
49
|
+
var(--expansion-panel-transition-easing),
|
|
50
|
+
border-color var(--expansion-panel-transition-duration)
|
|
51
|
+
var(--expansion-panel-transition-easing);
|
|
48
52
|
|
|
49
53
|
/** for focus button header */
|
|
50
54
|
&:focus-within {
|
|
51
|
-
outline: var(--expansion-panel-focus-outline-width)
|
|
55
|
+
outline: var(--expansion-panel-focus-outline-width)
|
|
56
|
+
var(--expansion-panel-focus-outline-style)
|
|
52
57
|
var(--expansion-panel-focus-outline-color);
|
|
53
58
|
outline-offset: var(--expansion-panel-focus-outline-offset);
|
|
54
59
|
}
|
|
@@ -71,10 +76,14 @@
|
|
|
71
76
|
-webkit-tap-highlight-color: transparent;
|
|
72
77
|
|
|
73
78
|
transition:
|
|
74
|
-
color var(--expansion-panel-transition-duration)
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
79
|
+
color var(--expansion-panel-transition-duration)
|
|
80
|
+
var(--expansion-panel-transition-easing),
|
|
81
|
+
background-color var(--expansion-panel-transition-duration)
|
|
82
|
+
var(--expansion-panel-transition-easing),
|
|
83
|
+
box-shadow var(--expansion-panel-transition-duration)
|
|
84
|
+
var(--expansion-panel-transition-easing),
|
|
85
|
+
border-color var(--expansion-panel-transition-duration)
|
|
86
|
+
var(--expansion-panel-transition-easing);
|
|
78
87
|
|
|
79
88
|
&::after {
|
|
80
89
|
content: var(--expansion-panel-icon-closed);
|
|
@@ -109,8 +118,10 @@
|
|
|
109
118
|
border-end-end-radius: var(--expansion-panel-border-radius);
|
|
110
119
|
|
|
111
120
|
transition:
|
|
112
|
-
max-height var(--expansion-panel-content-transition-duration)
|
|
113
|
-
|
|
121
|
+
max-height var(--expansion-panel-content-transition-duration)
|
|
122
|
+
var(--expansion-panel-transition-easing),
|
|
123
|
+
opacity var(--expansion-panel-transition-duration)
|
|
124
|
+
var(--expansion-panel-transition-easing);
|
|
114
125
|
|
|
115
126
|
.expansion-panel-inner {
|
|
116
127
|
padding: var(--expansion-panel-inner-padding);
|
|
@@ -41,10 +41,13 @@
|
|
|
41
41
|
|
|
42
42
|
transition:
|
|
43
43
|
color var(--form-control-transition-duration) var(--form-control-transition-easing),
|
|
44
|
-
background-color var(--form-control-transition-duration)
|
|
44
|
+
background-color var(--form-control-transition-duration)
|
|
45
|
+
var(--form-control-transition-easing),
|
|
45
46
|
box-shadow var(--form-control-transition-duration) var(--form-control-transition-easing),
|
|
46
|
-
border-color var(--form-control-transition-duration)
|
|
47
|
-
|
|
47
|
+
border-color var(--form-control-transition-duration)
|
|
48
|
+
var(--form-control-transition-easing),
|
|
49
|
+
outline-offset var(--form-control-transition-duration)
|
|
50
|
+
var(--form-control-transition-easing);
|
|
48
51
|
|
|
49
52
|
&:focus,
|
|
50
53
|
&.is-focus-visible {
|
|
@@ -118,8 +121,8 @@
|
|
|
118
121
|
display: block;
|
|
119
122
|
width: 100%;
|
|
120
123
|
max-width: 100%;
|
|
121
|
-
padding: var(--form-select-padding-y) var(--form-select-indicator-padding)
|
|
122
|
-
var(--form-select-padding-x);
|
|
124
|
+
padding: var(--form-select-padding-y) var(--form-select-indicator-padding)
|
|
125
|
+
var(--form-select-padding-y) var(--form-select-padding-x);
|
|
123
126
|
font-size: var(--form-select-font-size);
|
|
124
127
|
font-weight: var(--form-select-font-weight);
|
|
125
128
|
line-height: var(--line-height);
|
|
@@ -141,10 +144,12 @@
|
|
|
141
144
|
|
|
142
145
|
transition:
|
|
143
146
|
color var(--form-select-transition-duration) var(--form-select-transition-easing),
|
|
144
|
-
background-color var(--form-select-transition-duration)
|
|
147
|
+
background-color var(--form-select-transition-duration)
|
|
148
|
+
var(--form-select-transition-easing),
|
|
145
149
|
box-shadow var(--form-select-transition-duration) var(--form-select-transition-easing),
|
|
146
150
|
border-color var(--form-select-transition-duration) var(--form-select-transition-easing),
|
|
147
|
-
outline-offset var(--form-select-transition-duration)
|
|
151
|
+
outline-offset var(--form-select-transition-duration)
|
|
152
|
+
var(--form-select-transition-easing);
|
|
148
153
|
|
|
149
154
|
&:focus,
|
|
150
155
|
&.is-focus-visible {
|
|
@@ -216,8 +221,10 @@
|
|
|
216
221
|
cursor: pointer;
|
|
217
222
|
|
|
218
223
|
transition:
|
|
219
|
-
background-color var(--form-check-transition-duration)
|
|
220
|
-
|
|
224
|
+
background-color var(--form-check-transition-duration)
|
|
225
|
+
var(--form-check-transition-easing),
|
|
226
|
+
border-color var(--form-check-transition-duration)
|
|
227
|
+
var(--form-check-transition-easing),
|
|
221
228
|
box-shadow var(--form-check-transition-duration) var(--form-check-transition-easing);
|
|
222
229
|
|
|
223
230
|
&:checked {
|
|
@@ -257,7 +264,8 @@
|
|
|
257
264
|
&:focus-visible,
|
|
258
265
|
&.is-focus-visible {
|
|
259
266
|
border-color: var(--primary-hover);
|
|
260
|
-
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
267
|
+
outline: var(--focus-outline-width) var(--focus-outline-style)
|
|
268
|
+
var(--focus-outline-color);
|
|
261
269
|
outline-offset: var(--focus-offset);
|
|
262
270
|
}
|
|
263
271
|
|
|
@@ -368,13 +376,17 @@
|
|
|
368
376
|
appearance: none;
|
|
369
377
|
cursor: pointer;
|
|
370
378
|
background-color: var(--form-switch-input-bg-color);
|
|
371
|
-
border: var(--form-switch-input-border-width) solid
|
|
379
|
+
border: var(--form-switch-input-border-width) solid
|
|
380
|
+
var(--form-switch-input-border-color);
|
|
372
381
|
border-radius: var(--form-switch-input-border-radius);
|
|
373
382
|
|
|
374
383
|
transition:
|
|
375
|
-
background-color var(--form-switch-transition-duration)
|
|
376
|
-
|
|
377
|
-
|
|
384
|
+
background-color var(--form-switch-transition-duration)
|
|
385
|
+
var(--form-switch-transition-easing),
|
|
386
|
+
border-color var(--form-switch-transition-duration)
|
|
387
|
+
var(--form-switch-transition-easing),
|
|
388
|
+
box-shadow var(--form-switch-transition-duration)
|
|
389
|
+
var(--form-switch-transition-easing);
|
|
378
390
|
|
|
379
391
|
&::after {
|
|
380
392
|
content: '';
|
|
@@ -388,8 +400,10 @@
|
|
|
388
400
|
transform: translateX(0);
|
|
389
401
|
|
|
390
402
|
transition:
|
|
391
|
-
transform var(--form-switch-transition-duration)
|
|
392
|
-
|
|
403
|
+
transform var(--form-switch-transition-duration)
|
|
404
|
+
var(--form-switch-transition-easing),
|
|
405
|
+
background-color var(--form-switch-transition-duration)
|
|
406
|
+
var(--form-switch-transition-easing);
|
|
393
407
|
}
|
|
394
408
|
|
|
395
409
|
&:checked {
|
|
@@ -400,7 +414,8 @@
|
|
|
400
414
|
transform: translateX(
|
|
401
415
|
calc(
|
|
402
416
|
var(--form-switch-input-width) - var(--form-switch-thumb-size) -
|
|
403
|
-
(var(--form-switch-input-padding) * 2) -
|
|
417
|
+
(var(--form-switch-input-padding) * 2) -
|
|
418
|
+
(var(--form-switch-input-border-width) * 2)
|
|
404
419
|
)
|
|
405
420
|
);
|
|
406
421
|
}
|
|
@@ -408,8 +423,8 @@
|
|
|
408
423
|
|
|
409
424
|
&:focus-visible,
|
|
410
425
|
&.is-focus-visible {
|
|
411
|
-
outline: var(--form-switch-focus-outline-width)
|
|
412
|
-
var(--form-switch-focus-outline-color);
|
|
426
|
+
outline: var(--form-switch-focus-outline-width)
|
|
427
|
+
var(--form-switch-focus-outline-style) var(--form-switch-focus-outline-color);
|
|
413
428
|
outline-offset: var(--form-switch-focus-outline-offset);
|
|
414
429
|
}
|
|
415
430
|
|
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
|
|
55
55
|
transition:
|
|
56
56
|
color var(--icon-button-transition-duration) var(--icon-button-transition-easing),
|
|
57
|
-
background-color var(--icon-button-transition-duration)
|
|
57
|
+
background-color var(--icon-button-transition-duration)
|
|
58
|
+
var(--icon-button-transition-easing),
|
|
58
59
|
box-shadow var(--icon-button-transition-duration) var(--icon-button-transition-easing),
|
|
59
60
|
border-color var(--icon-button-transition-duration) var(--icon-button-transition-easing);
|
|
60
61
|
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
|
|
34
34
|
transition:
|
|
35
35
|
color var(--list-item-transition-duration) var(--list-item-transition-easing),
|
|
36
|
-
background-color var(--list-item-transition-duration)
|
|
36
|
+
background-color var(--list-item-transition-duration)
|
|
37
|
+
var(--list-item-transition-easing),
|
|
37
38
|
box-shadow var(--list-item-transition-duration) var(--list-item-transition-easing),
|
|
38
39
|
border-color var(--list-item-transition-duration) var(--list-item-transition-easing);
|
|
39
40
|
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
|
|
50
50
|
transition:
|
|
51
51
|
color var(--pagination-transition-duration) var(--pagination-transition-easing),
|
|
52
|
-
background-color var(--pagination-transition-duration)
|
|
52
|
+
background-color var(--pagination-transition-duration)
|
|
53
|
+
var(--pagination-transition-easing),
|
|
53
54
|
box-shadow var(--pagination-transition-duration) var(--pagination-transition-easing);
|
|
54
55
|
|
|
55
56
|
&:hover {
|
|
@@ -61,7 +62,8 @@
|
|
|
61
62
|
|
|
62
63
|
&:focus-visible,
|
|
63
64
|
&.is-focus-visible {
|
|
64
|
-
outline: var(--pagination-item-focus-outline-width)
|
|
65
|
+
outline: var(--pagination-item-focus-outline-width)
|
|
66
|
+
var(--pagination-item-focus-outline-style)
|
|
65
67
|
var(--pagination-item-focus-outline-color);
|
|
66
68
|
outline-offset: var(--pagination-item-focus-outline-offset);
|
|
67
69
|
}
|
|
@@ -112,7 +112,8 @@
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.table > tbody > tr.is-invalid > :first-child {
|
|
115
|
-
box-shadow: inset var(--table-row-state-accent-width) 0 0
|
|
115
|
+
box-shadow: inset var(--table-row-state-accent-width) 0 0
|
|
116
|
+
var(--table-row-invalid-accent-color);
|
|
116
117
|
}
|
|
117
118
|
|
|
118
119
|
.table > tbody > tr.is-warning > * {
|
|
@@ -125,6 +126,7 @@
|
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
.table > tbody > tr.is-warning > :first-child {
|
|
128
|
-
box-shadow: inset var(--table-row-state-accent-width) 0 0
|
|
129
|
+
box-shadow: inset var(--table-row-state-accent-width) 0 0
|
|
130
|
+
var(--table-row-warning-accent-color);
|
|
129
131
|
}
|
|
130
132
|
}
|
|
@@ -67,7 +67,8 @@
|
|
|
67
67
|
&.is-focus-visible {
|
|
68
68
|
z-index: 10;
|
|
69
69
|
color: var(--tab-active-color);
|
|
70
|
-
outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style)
|
|
70
|
+
outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style)
|
|
71
|
+
var(--tab-focus-outline-color);
|
|
71
72
|
outline-offset: var(--tab-focus-outline-offset);
|
|
72
73
|
}
|
|
73
74
|
|
|
@@ -96,7 +97,8 @@
|
|
|
96
97
|
|
|
97
98
|
transition:
|
|
98
99
|
color var(--tab-content-transition-duration) var(--tab-content-transition-easing),
|
|
99
|
-
background-color var(--tab-content-transition-duration)
|
|
100
|
+
background-color var(--tab-content-transition-duration)
|
|
101
|
+
var(--tab-content-transition-easing),
|
|
100
102
|
border-color var(--tab-content-transition-duration) var(--tab-content-transition-easing);
|
|
101
103
|
|
|
102
104
|
&.is-active {
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
--timeline-dot-size: 0.75rem;
|
|
7
7
|
--timeline-dot-offset-y: var(--spacer-3);
|
|
8
|
-
--timeline-dot-center-y: calc(
|
|
8
|
+
--timeline-dot-center-y: calc(
|
|
9
|
+
var(--timeline-dot-offset-y) + (var(--timeline-dot-size) / 2)
|
|
10
|
+
);
|
|
9
11
|
|
|
10
12
|
--timeline-dot-color: var(--border-color);
|
|
11
13
|
--timeline-dot-active-color: var(--primary);
|
package/scss/reboot.scss
CHANGED
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
html {
|
|
11
|
-
font-family:
|
|
11
|
+
font-family:
|
|
12
|
+
system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
|
13
|
+
'Segoe UI Emoji';
|
|
12
14
|
line-height: 1.15;
|
|
13
15
|
-webkit-text-size-adjust: 100%;
|
|
14
16
|
tab-size: 4;
|
package/scss/theme.scss
CHANGED
|
@@ -5,9 +5,9 @@ $spacer: 1rem;
|
|
|
5
5
|
$default-theme: (
|
|
6
6
|
colors: (
|
|
7
7
|
'primary': (
|
|
8
|
-
base: #
|
|
9
|
-
hover: #
|
|
10
|
-
active: #
|
|
8
|
+
base: #6f3bd2,
|
|
9
|
+
hover: #5f2fbd,
|
|
10
|
+
active: #5126a5,
|
|
11
11
|
on: #ffffff,
|
|
12
12
|
),
|
|
13
13
|
'secondary': (
|
|
@@ -17,24 +17,56 @@ $default-theme: (
|
|
|
17
17
|
on: #ffffff,
|
|
18
18
|
),
|
|
19
19
|
'success': (
|
|
20
|
-
base: #
|
|
21
|
-
hover: #
|
|
22
|
-
active: #
|
|
20
|
+
base: #0c705d,
|
|
21
|
+
hover: #09604f,
|
|
22
|
+
active: #075143,
|
|
23
23
|
on: #ffffff,
|
|
24
24
|
),
|
|
25
25
|
'warning': (
|
|
26
|
-
base: #
|
|
27
|
-
hover: #
|
|
28
|
-
active: #
|
|
29
|
-
on: #
|
|
26
|
+
base: #765200,
|
|
27
|
+
hover: #674800,
|
|
28
|
+
active: #593e00,
|
|
29
|
+
on: #ffffff,
|
|
30
30
|
),
|
|
31
31
|
'error': (
|
|
32
|
-
base: #
|
|
33
|
-
hover: #
|
|
34
|
-
active: #
|
|
32
|
+
base: #b52828,
|
|
33
|
+
hover: #a32121,
|
|
34
|
+
active: #911b1b,
|
|
35
35
|
on: #ffffff,
|
|
36
36
|
),
|
|
37
37
|
),
|
|
38
|
+
dark-colors: (
|
|
39
|
+
'primary': (
|
|
40
|
+
base: #ccb4f7,
|
|
41
|
+
hover: #d6c1f8,
|
|
42
|
+
active: #e2d3fb,
|
|
43
|
+
on: #1a1a1a,
|
|
44
|
+
),
|
|
45
|
+
'secondary': (
|
|
46
|
+
base: #c0c0c0,
|
|
47
|
+
hover: #cccccc,
|
|
48
|
+
active: #dadada,
|
|
49
|
+
on: #1a1a1a,
|
|
50
|
+
),
|
|
51
|
+
'success': (
|
|
52
|
+
base: #60d2ba,
|
|
53
|
+
hover: #72d5c0,
|
|
54
|
+
active: #8cdecc,
|
|
55
|
+
on: #1a1a1a,
|
|
56
|
+
),
|
|
57
|
+
'warning': (
|
|
58
|
+
base: #f2b94f,
|
|
59
|
+
hover: #f8c66a,
|
|
60
|
+
active: #fbd486,
|
|
61
|
+
on: #000000,
|
|
62
|
+
),
|
|
63
|
+
'error': (
|
|
64
|
+
base: #fda9a9,
|
|
65
|
+
hover: #fbb6b6,
|
|
66
|
+
active: #fdcccc,
|
|
67
|
+
on: #1a1a1a,
|
|
68
|
+
),
|
|
69
|
+
),
|
|
38
70
|
grays: (
|
|
39
71
|
50: hsl(0, 0%, 95%),
|
|
40
72
|
100: hsl(0, 0%, 90%),
|
package/scss/typography.scss
CHANGED
|
@@ -102,7 +102,8 @@
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
&:focus-visible {
|
|
105
|
-
outline: var(--link-focus-outline-width) var(--link-focus-outline-style)
|
|
105
|
+
outline: var(--link-focus-outline-width) var(--link-focus-outline-style)
|
|
106
|
+
var(--link-focus-outline-color);
|
|
106
107
|
outline-offset: var(--focus-offset);
|
|
107
108
|
}
|
|
108
109
|
}
|
package/scss/utilities.scss
CHANGED
|
@@ -324,7 +324,8 @@
|
|
|
324
324
|
}
|
|
325
325
|
|
|
326
326
|
.focus-ring {
|
|
327
|
-
outline: var(--focus-ring-width, var(--focus-outline-width))
|
|
327
|
+
outline: var(--focus-ring-width, var(--focus-outline-width))
|
|
328
|
+
var(--focus-ring-style, var(--focus-outline-style))
|
|
328
329
|
var(--focus-ring-color, var(--focus-outline-color));
|
|
329
330
|
outline-offset: var(--focus-ring-offset, var(--focus-offset));
|
|
330
331
|
}
|
package/scss/variables.scss
CHANGED
|
@@ -9,20 +9,24 @@
|
|
|
9
9
|
@return '#{$r}, #{$g}, #{$b}';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
@mixin _define-color-variables($colors) {
|
|
13
|
+
@each $name, $value in $colors {
|
|
14
|
+
$base: map.get($value, base);
|
|
15
|
+
$hover: map.get($value, hover);
|
|
16
|
+
$active: map.get($value, active);
|
|
17
|
+
$on: map.get($value, on);
|
|
18
|
+
|
|
19
|
+
--#{$name}: #{$base};
|
|
20
|
+
--#{$name}-hover: #{$hover};
|
|
21
|
+
--#{$name}-active: #{$active};
|
|
22
|
+
--#{$name}-rgb: #{to-rgb-string($base)};
|
|
23
|
+
--on-#{$name}: #{$on};
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
12
27
|
@layer base {
|
|
13
28
|
:root {
|
|
14
|
-
@
|
|
15
|
-
$base: map.get($value, base);
|
|
16
|
-
$hover: map.get($value, hover);
|
|
17
|
-
$active: map.get($value, active);
|
|
18
|
-
$on: map.get($value, on);
|
|
19
|
-
|
|
20
|
-
--#{$name}: #{$base};
|
|
21
|
-
--#{$name}-hover: #{$hover};
|
|
22
|
-
--#{$name}-active: #{$active};
|
|
23
|
-
--#{$name}-rgb: #{to-rgb-string($base)};
|
|
24
|
-
--on-#{$name}: #{$on};
|
|
25
|
-
}
|
|
29
|
+
@include _define-color-variables(map.get(theme.$theme, colors));
|
|
26
30
|
|
|
27
31
|
--white: white;
|
|
28
32
|
--black: black;
|
|
@@ -50,9 +54,9 @@
|
|
|
50
54
|
--bg-opacity: 1;
|
|
51
55
|
|
|
52
56
|
--text-color: var(--gray-950);
|
|
53
|
-
--text-muted: var(--gray-
|
|
57
|
+
--text-muted: var(--gray-650);
|
|
54
58
|
--text-inverse: var(--gray-50);
|
|
55
|
-
--text-subtle: var(--gray-
|
|
59
|
+
--text-subtle: var(--gray-600);
|
|
56
60
|
|
|
57
61
|
--border-width: 1px;
|
|
58
62
|
--border-color: var(--gray-100);
|
|
@@ -74,7 +78,8 @@
|
|
|
74
78
|
--focus-outline-width: 2.5px;
|
|
75
79
|
--focus-offset: 0px;
|
|
76
80
|
|
|
77
|
-
--focus-outline-error: var(--focus-outline-width) var(--focus-outline-style)
|
|
81
|
+
--focus-outline-error: var(--focus-outline-width) var(--focus-outline-style)
|
|
82
|
+
rgba(var(--error-rgb), 0.5); // create focus outline for every theme color?
|
|
78
83
|
|
|
79
84
|
--container: 900px;
|
|
80
85
|
|
|
@@ -102,6 +107,8 @@
|
|
|
102
107
|
}
|
|
103
108
|
|
|
104
109
|
:root[data-theme='dark'] {
|
|
110
|
+
@include _define-color-variables(map.get(theme.$theme, dark-colors));
|
|
111
|
+
|
|
105
112
|
--bg-body: var(--gray-850);
|
|
106
113
|
--bg-surface: var(--gray-800);
|
|
107
114
|
--bg-surface-hover: var(--gray-700);
|
|
@@ -110,8 +117,8 @@
|
|
|
110
117
|
--bg-inverse: var(--gray-50);
|
|
111
118
|
|
|
112
119
|
--text-color: var(--gray-50);
|
|
113
|
-
--text-muted: var(--gray-
|
|
114
|
-
--text-subtle: var(--gray-
|
|
120
|
+
--text-muted: var(--gray-200);
|
|
121
|
+
--text-subtle: var(--gray-250);
|
|
115
122
|
--text-inverse: var(--gray-900);
|
|
116
123
|
|
|
117
124
|
--border-color: var(--gray-650);
|