@oardi/css-utils 0.67.0 → 0.68.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.
Files changed (18) hide show
  1. package/package.json +1 -1
  2. package/readme.md +3 -1
  3. package/scss/components/card.scss +2 -1
  4. package/scss/components/expansion-panel.scss +22 -11
  5. package/scss/components/form.scss +44 -24
  6. package/scss/components/icon-button.scss +2 -1
  7. package/scss/components/list.scss +2 -1
  8. package/scss/components/pagination.scss +4 -2
  9. package/scss/components/table.scss +9 -2
  10. package/scss/components/tabs.scss +4 -2
  11. package/scss/components/timeline.scss +3 -1
  12. package/scss/reboot.scss +3 -1
  13. package/scss/spacings-responsive.scss +2 -2
  14. package/scss/spacings.scss +2 -2
  15. package/scss/theme.scss +45 -13
  16. package/scss/typography.scss +2 -1
  17. package/scss/utilities.scss +2 -1
  18. package/scss/variables.scss +24 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.67.0",
3
+ "version": "0.68.1",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
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;">Rounded button</button>
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
package/scss/components/card.scss CHANGED
@@ -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 var(--card-header-border-bottom-color);
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
  }
package/scss/components/expansion-panel.scss CHANGED
@@ -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) var(--expansion-panel-transition-easing),
45
- background-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
46
- box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
47
- border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
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) var(--expansion-panel-focus-outline-style)
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) var(--expansion-panel-transition-easing),
75
- background-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
76
- box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
77
- border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
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) var(--expansion-panel-transition-easing),
113
- opacity var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
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);
package/scss/components/form.scss CHANGED
@@ -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) var(--form-control-transition-easing),
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) var(--form-control-transition-easing),
47
- outline-offset var(--form-control-transition-duration) var(--form-control-transition-easing);
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) var(--form-select-padding-y)
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) var(--form-select-transition-easing),
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) var(--form-select-transition-easing);
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) var(--form-check-transition-easing),
220
- border-color var(--form-check-transition-duration) var(--form-check-transition-easing),
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) var(--focus-outline-color);
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
 
@@ -339,6 +347,10 @@
339
347
  --form-switch-thumb-size: 1rem;
340
348
  --form-switch-thumb-bg-color: var(--bg-surface);
341
349
  --form-switch-thumb-box-shadow: var(--shadow-sm);
350
+ --form-switch-thumb-checked-translate-x: calc(
351
+ var(--form-switch-input-width) - var(--form-switch-thumb-size) -
352
+ (var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
353
+ );
342
354
 
343
355
  --form-switch-disabled-bg-color: var(--disabled-bg-color);
344
356
  --form-switch-disabled-border-color: var(--disabled-border-color);
@@ -368,13 +380,24 @@
368
380
  appearance: none;
369
381
  cursor: pointer;
370
382
  background-color: var(--form-switch-input-bg-color);
371
- border: var(--form-switch-input-border-width) solid var(--form-switch-input-border-color);
383
+ border: var(--form-switch-input-border-width) solid
384
+ var(--form-switch-input-border-color);
372
385
  border-radius: var(--form-switch-input-border-radius);
373
386
 
387
+ &:dir(rtl) {
388
+ --form-switch-thumb-checked-translate-x: calc(
389
+ var(--form-switch-thumb-size) + (var(--form-switch-input-padding) * 2) +
390
+ (var(--form-switch-input-border-width) * 2) - var(--form-switch-input-width)
391
+ );
392
+ }
393
+
374
394
  transition:
375
- background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
376
- border-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
377
- box-shadow var(--form-switch-transition-duration) var(--form-switch-transition-easing);
395
+ background-color var(--form-switch-transition-duration)
396
+ var(--form-switch-transition-easing),
397
+ border-color var(--form-switch-transition-duration)
398
+ var(--form-switch-transition-easing),
399
+ box-shadow var(--form-switch-transition-duration)
400
+ var(--form-switch-transition-easing);
378
401
 
379
402
  &::after {
380
403
  content: '';
@@ -388,8 +411,10 @@
388
411
  transform: translateX(0);
389
412
 
390
413
  transition:
391
- transform var(--form-switch-transition-duration) var(--form-switch-transition-easing),
392
- background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing);
414
+ transform var(--form-switch-transition-duration)
415
+ var(--form-switch-transition-easing),
416
+ background-color var(--form-switch-transition-duration)
417
+ var(--form-switch-transition-easing);
393
418
  }
394
419
 
395
420
  &:checked {
@@ -397,19 +422,14 @@
397
422
  border-color: var(--form-switch-input-checked-border-color);
398
423
 
399
424
  &::after {
400
- transform: translateX(
401
- calc(
402
- var(--form-switch-input-width) - var(--form-switch-thumb-size) -
403
- (var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
404
- )
405
- );
425
+ transform: translateX(var(--form-switch-thumb-checked-translate-x));
406
426
  }
407
427
  }
408
428
 
409
429
  &:focus-visible,
410
430
  &.is-focus-visible {
411
- outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
412
- var(--form-switch-focus-outline-color);
431
+ outline: var(--form-switch-focus-outline-width)
432
+ var(--form-switch-focus-outline-style) var(--form-switch-focus-outline-color);
413
433
  outline-offset: var(--form-switch-focus-outline-offset);
414
434
  }
415
435
 
package/scss/components/icon-button.scss CHANGED
@@ -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) var(--icon-button-transition-easing),
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
 
package/scss/components/list.scss CHANGED
@@ -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) var(--list-item-transition-easing),
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
 
package/scss/components/pagination.scss CHANGED
@@ -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) var(--pagination-transition-easing),
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) var(--pagination-item-focus-outline-style)
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
  }
package/scss/components/table.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  --table-active-color: var(--table-color);
25
25
 
26
26
  --table-row-state-accent-width: 0.25rem;
27
+ --table-row-state-accent-offset-x: var(--table-row-state-accent-width);
27
28
 
28
29
  --table-row-invalid-bg-color: rgba(var(--error-rgb), 0.08);
29
30
  --table-row-invalid-hover-bg-color: rgba(var(--error-rgb), 0.12);
@@ -42,6 +43,10 @@
42
43
  border-color: var(--table-border-color);
43
44
  border-collapse: collapse;
44
45
 
46
+ &:dir(rtl) {
47
+ --table-row-state-accent-offset-x: calc(0rem - var(--table-row-state-accent-width));
48
+ }
49
+
45
50
  & > thead {
46
51
  vertical-align: bottom;
47
52
  }
@@ -112,7 +117,8 @@
112
117
  }
113
118
 
114
119
  .table > tbody > tr.is-invalid > :first-child {
115
- box-shadow: inset var(--table-row-state-accent-width) 0 0 var(--table-row-invalid-accent-color);
120
+ box-shadow: inset var(--table-row-state-accent-offset-x) 0 0
121
+ var(--table-row-invalid-accent-color);
116
122
  }
117
123
 
118
124
  .table > tbody > tr.is-warning > * {
@@ -125,6 +131,7 @@
125
131
  }
126
132
 
127
133
  .table > tbody > tr.is-warning > :first-child {
128
- box-shadow: inset var(--table-row-state-accent-width) 0 0 var(--table-row-warning-accent-color);
134
+ box-shadow: inset var(--table-row-state-accent-offset-x) 0 0
135
+ var(--table-row-warning-accent-color);
129
136
  }
130
137
  }
package/scss/components/tabs.scss CHANGED
@@ -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) var(--tab-focus-outline-color);
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) var(--tab-content-transition-easing),
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 {
package/scss/components/timeline.scss CHANGED
@@ -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(var(--timeline-dot-offset-y) + (var(--timeline-dot-size) / 2));
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: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
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/spacings-responsive.scss CHANGED
@@ -19,11 +19,11 @@
19
19
  }
20
20
 
21
21
  .ms-#{$bp}-auto {
22
- margin-left: auto;
22
+ margin-inline-start: auto;
23
23
  }
24
24
 
25
25
  .me-#{$bp}-auto {
26
- margin-right: auto;
26
+ margin-inline-end: auto;
27
27
  }
28
28
 
29
29
  .mt-#{$bp}-auto {
package/scss/spacings.scss CHANGED
@@ -17,11 +17,11 @@
17
17
  }
18
18
 
19
19
  .ms-auto {
20
- margin-left: auto;
20
+ margin-inline-start: auto;
21
21
  }
22
22
 
23
23
  .me-auto {
24
- margin-right: auto;
24
+ margin-inline-end: auto;
25
25
  }
26
26
 
27
27
  .mt-auto {
package/scss/theme.scss CHANGED
@@ -5,9 +5,9 @@ $spacer: 1rem;
5
5
  $default-theme: (
6
6
  colors: (
7
7
  'primary': (
8
- base: #9163e7,
9
- hover: #7e4fdb,
10
- active: #6f3bd2,
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: #16a085,
21
- hover: #138f77,
22
- active: #0f7e69,
20
+ base: #0c705d,
21
+ hover: #09604f,
22
+ active: #075143,
23
23
  on: #ffffff,
24
24
  ),
25
25
  'warning': (
26
- base: #ffc557,
27
- hover: #f0b84f,
28
- active: #e0a843,
29
- on: #000000,
26
+ base: #765200,
27
+ hover: #674800,
28
+ active: #593e00,
29
+ on: #ffffff,
30
30
  ),
31
31
  'error': (
32
- base: #eb4242,
33
- hover: #d73a3a,
34
- active: #c73232,
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) var(--link-focus-outline-color);
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)) var(--focus-ring-style, var(--focus-outline-style))
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
- @each $name, $value in map.get(theme.$theme, colors) {
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-550);
57
+ --text-muted: var(--gray-650);
54
58
  --text-inverse: var(--gray-50);
55
- --text-subtle: var(--gray-400);
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) rgba(var(--error-rgb), 0.5); // create focus outline for every theme color?
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-300);
114
- --text-subtle: var(--gray-500);
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);