@oardi/css-utils 0.66.1 → 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.
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/chip.scss +26 -5
  5. package/scss/components/drawer.scss +6 -1
  6. package/scss/components/expansion-panel.scss +22 -11
  7. package/scss/components/form.scss +34 -19
  8. package/scss/components/icon-button.scss +2 -1
  9. package/scss/components/list.scss +2 -1
  10. package/scss/components/pagination.scss +4 -2
  11. package/scss/components/table.scss +4 -2
  12. package/scss/components/tabs.scss +4 -2
  13. package/scss/components/timeline.scss +3 -1
  14. package/scss/reboot.scss +3 -1
  15. package/scss/theme.scss +47 -17
  16. package/scss/typography.scss +4 -1
  17. package/scss/utilities.scss +6 -5
  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.66.1",
3
+ "version": "0.68.0",
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/chip.scss CHANGED
@@ -55,6 +55,10 @@
55
55
  border-color: var(--chip-highlight);
56
56
  }
57
57
 
58
+ &:has(> i.icon:last-child) {
59
+ padding-inline-end: 0;
60
+ }
61
+
58
62
  .chip-label {
59
63
  display: inline-flex;
60
64
  flex-shrink: 0;
@@ -81,12 +85,18 @@
81
85
  background-color: var(--chip-color);
82
86
  border-color: var(--chip-color);
83
87
 
84
- &:hover,
85
- &:active {
88
+ &:hover {
86
89
  color: var(--chip-on-color);
87
90
  background-color: var(--chip-color-hover);
88
91
  border-color: var(--chip-color-hover);
89
92
  }
93
+
94
+ &.is-active,
95
+ &:active {
96
+ color: var(--chip-on-color);
97
+ background-color: var(--chip-color-active);
98
+ border-color: var(--chip-color-active);
99
+ }
90
100
  }
91
101
 
92
102
  .chip-outline {
@@ -94,12 +104,18 @@
94
104
  background-color: transparent;
95
105
  border-color: var(--chip-color);
96
106
 
97
- &:hover,
98
- &:active {
107
+ &:hover {
99
108
  color: var(--chip-on-color);
100
109
  background-color: var(--chip-color-hover);
101
110
  border-color: var(--chip-color-hover);
102
111
  }
112
+
113
+ &.is-active,
114
+ &:active {
115
+ color: var(--chip-on-color);
116
+ background-color: var(--chip-color-active);
117
+ border-color: var(--chip-color-active);
118
+ }
103
119
  }
104
120
 
105
121
  .chip-text {
@@ -107,8 +123,13 @@
107
123
  background-color: transparent;
108
124
  border-color: transparent;
109
125
 
110
- &:hover,
126
+ &:hover {
127
+ background-color: var(--chip-highlight);
128
+ }
129
+
130
+ &.is-active,
111
131
  &:active {
132
+ color: var(--chip-color-active);
112
133
  background-color: var(--chip-highlight);
113
134
  }
114
135
  }
package/scss/components/drawer.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  .drawer {
3
3
  --drawer-width: 20rem;
4
4
  --drawer-z-index: var(--z-index-drawer);
5
+ --drawer-closed-translate-x: -100%;
5
6
 
6
7
  --drawer-bg-color: var(--bg-surface);
7
8
 
@@ -27,10 +28,14 @@
27
28
  height: 100dvh;
28
29
  background-color: var(--drawer-bg-color);
29
30
  border-inline-end: var(--drawer-border-width) solid var(--drawer-border-color);
30
- transform: translateX(-100%);
31
+ transform: translateX(var(--drawer-closed-translate-x));
31
32
 
32
33
  transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
33
34
 
35
+ &:dir(rtl) {
36
+ --drawer-closed-translate-x: 100%;
37
+ }
38
+
34
39
  &.is-open {
35
40
  transform: translateX(0);
36
41
  }
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
 
@@ -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 var(--form-switch-input-border-color);
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) 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);
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) var(--form-switch-transition-easing),
392
- background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing);
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) - (var(--form-switch-input-border-width) * 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) var(--form-switch-focus-outline-style)
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
 
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
@@ -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 var(--table-row-invalid-accent-color);
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 var(--table-row-warning-accent-color);
129
+ box-shadow: inset var(--table-row-state-accent-width) 0 0
130
+ var(--table-row-warning-accent-color);
129
131
  }
130
132
  }
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/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%),
@@ -58,11 +90,9 @@ $default-theme: (
58
90
  ),
59
91
  directions: (
60
92
  t: top,
61
- e: right,
62
- // rename r to e -> end
93
+ e: inline-end,
63
94
  b: bottom,
64
- s: left,
65
- // rename l to s -> start
95
+ s: inline-start,
66
96
  // add x for left and right
67
97
  // add y for top and bottom
68
98
  ),
package/scss/typography.scss CHANGED
@@ -96,11 +96,14 @@
96
96
  outline-offset var(--link-transition-duration) var(--link-transition-easing);
97
97
 
98
98
  &:hover {
99
+ color: var(--link-hover-color, var(--link-text-color));
100
+ fill: var(--link-hover-color, var(--link-text-color));
99
101
  text-decoration: underline;
100
102
  }
101
103
 
102
104
  &:focus-visible {
103
- 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);
104
107
  outline-offset: var(--focus-offset);
105
108
  }
106
109
  }
package/scss/utilities.scss CHANGED
@@ -122,13 +122,13 @@
122
122
  }
123
123
 
124
124
  .rounded-start {
125
- border-top-left-radius: var(--border-radius);
126
- border-bottom-left-radius: var(--border-radius);
125
+ border-start-start-radius: var(--border-radius);
126
+ border-end-start-radius: var(--border-radius);
127
127
  }
128
128
 
129
129
  .rounded-end {
130
- border-top-right-radius: var(--border-radius);
131
- border-bottom-right-radius: var(--border-radius);
130
+ border-start-end-radius: var(--border-radius);
131
+ border-end-end-radius: var(--border-radius);
132
132
  }
133
133
 
134
134
  .rounded-0 {
@@ -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);