@oardi/css-utils 0.103.0 → 0.105.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 (44) hide show
  1. package/package.json +1 -1
  2. package/readme.md +5 -1
  3. package/scss/borders.scss +1 -0
  4. package/scss/components/alert.scss +2 -0
  5. package/scss/components/avatar.scss +2 -0
  6. package/scss/components/badge.scss +2 -0
  7. package/scss/components/breadcrumb.scss +2 -0
  8. package/scss/components/button.scss +30 -16
  9. package/scss/components/card.scss +2 -0
  10. package/scss/components/chip.scss +1 -0
  11. package/scss/components/drawer.scss +2 -0
  12. package/scss/components/empty-state.scss +2 -0
  13. package/scss/components/expansion-panel.scss +9 -1
  14. package/scss/components/form.scss +2 -0
  15. package/scss/components/icon-button.scss +30 -16
  16. package/scss/components/list.scss +2 -0
  17. package/scss/components/menu.scss +2 -0
  18. package/scss/components/modal.scss +2 -0
  19. package/scss/components/navbar.scss +10 -2
  20. package/scss/components/overlay.scss +2 -0
  21. package/scss/components/pagination.scss +2 -0
  22. package/scss/components/range-slider.scss +2 -0
  23. package/scss/components/stepper.scss +1 -0
  24. package/scss/components/table.scss +2 -0
  25. package/scss/components/tabs.scss +2 -0
  26. package/scss/components/timeline.scss +2 -0
  27. package/scss/components/toast.scss +2 -0
  28. package/scss/components/tooltip.scss +2 -0
  29. package/scss/display.scss +1 -0
  30. package/scss/flex-responsive.scss +1 -0
  31. package/scss/flex.scss +1 -0
  32. package/scss/gap-responsive.scss +1 -0
  33. package/scss/gap.scss +1 -0
  34. package/scss/grid-responsive.scss +1 -0
  35. package/scss/grid.scss +2 -0
  36. package/scss/order-responsive.scss +1 -0
  37. package/scss/order.scss +2 -0
  38. package/scss/reboot.scss +2 -0
  39. package/scss/spacings-responsive.scss +1 -0
  40. package/scss/spacings.scss +1 -0
  41. package/scss/text.scss +1 -0
  42. package/scss/typography.scss +12 -3
  43. package/scss/utilities.scss +1 -0
  44. package/scss/variables.scss +6 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.103.0",
3
+ "version": "0.105.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
@@ -28,7 +28,7 @@ Load CSS Utils once through your application's global stylesheet:
28
28
  @use '@oardi/css-utils';
29
29
  ```
30
30
 
31
- No additional cascade-layer setup is required.
31
+ No additional cascade-layer setup is required, including when importing selected public SCSS entry points directly.
32
32
 
33
33
  When compiling directly with the Dart Sass CLI, use the Node package importer:
34
34
 
@@ -100,6 +100,10 @@ Define overrides after the library import to adapt the global design tokens:
100
100
  --primary-hover: #0047d6;
101
101
  --primary-active: #003cad;
102
102
  --on-primary: #ffffff;
103
+ --action-color: #0047d6;
104
+ --action-color-hover: #003cad;
105
+ --action-color-active: #002f87;
106
+ --focus-outline-color: var(--action-color);
103
107
 
104
108
  --bg-body: #fdfdfd;
105
109
  --border-radius: 0.5rem;
package/scss/borders.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  $borderWidths: 0, 1, 2, 3, 4, 5;
package/scss/components/alert.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .alert {
3
5
  --alert-padding-y: var(--spacer-3);
package/scss/components/avatar.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .avatar {
3
5
  --avatar-size: 2.5rem;
package/scss/components/badge.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .badge {
3
5
  --badge-padding-y: var(--spacer-1);
package/scss/components/breadcrumb.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .breadcrumb {
3
5
  --breadcrumb-padding-x: var(--spacer-0);
package/scss/components/button.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use '../layers.scss';
2
3
  @use '../theme.scss' as theme;
3
4
 
4
5
  @layer components {
@@ -7,6 +8,9 @@
7
8
  --button-color-hover: var(--text-color);
8
9
  --button-color-active: var(--text-color);
9
10
  --button-on-color: var(--on-primary);
11
+ --button-surface-color: var(--button-color);
12
+ --button-surface-color-hover: var(--button-color-hover);
13
+ --button-surface-color-active: var(--button-color-active);
10
14
 
11
15
  --button-border-width: var(--border-width);
12
16
  --button-border-radius: var(--border-radius);
@@ -81,34 +85,44 @@
81
85
 
82
86
  @each $name, $value in map.get(theme.$theme, colors) {
83
87
  .btn-#{$name} {
84
- --button-color: var(--#{$name});
85
- --button-color-hover: var(--#{$name}-hover);
86
- --button-color-active: var(--#{$name}-active);
88
+ @if $name == 'primary' {
89
+ --button-color: var(--action-color);
90
+ --button-color-hover: var(--action-color-hover);
91
+ --button-color-active: var(--action-color-active);
92
+ } @else {
93
+ --button-color: var(--#{$name});
94
+ --button-color-hover: var(--#{$name}-hover);
95
+ --button-color-active: var(--#{$name}-active);
96
+ }
97
+
98
+ --button-surface-color: var(--#{$name});
99
+ --button-surface-color-hover: var(--#{$name}-hover);
100
+ --button-surface-color-active: var(--#{$name}-active);
87
101
  --button-on-color: var(--on-#{$name});
88
102
  }
89
103
  }
90
104
 
91
105
  .btn-solid {
92
106
  color: var(--button-on-color);
93
- background-color: var(--button-color);
94
- border-color: var(--button-color);
107
+ background-color: var(--button-surface-color);
108
+ border-color: var(--button-surface-color);
95
109
 
96
110
  &:hover {
97
111
  color: var(--button-on-color);
98
- background-color: var(--button-color-hover);
99
- border-color: var(--button-color-hover);
112
+ background-color: var(--button-surface-color-hover);
113
+ border-color: var(--button-surface-color-hover);
100
114
  }
101
115
 
102
116
  &.is-active,
103
117
  &:active {
104
- background-color: var(--button-color-active);
105
- border-color: var(--button-color-active);
118
+ background-color: var(--button-surface-color-active);
119
+ border-color: var(--button-surface-color-active);
106
120
  }
107
121
 
108
122
  &:focus-visible,
109
123
  &.is-focus-visible {
110
124
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
111
- var(--button-color);
125
+ var(--button-focus-outline-color);
112
126
  outline-offset: var(--button-focus-outline-offset);
113
127
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
114
128
  }
@@ -121,21 +135,21 @@
121
135
 
122
136
  &:hover {
123
137
  color: var(--button-on-color);
124
- background-color: var(--button-color-hover);
125
- border-color: var(--button-color-hover);
138
+ background-color: var(--button-surface-color-hover);
139
+ border-color: var(--button-surface-color-hover);
126
140
  }
127
141
 
128
142
  &.is-active,
129
143
  &:active {
130
144
  color: var(--button-on-color);
131
- background-color: var(--button-color-active);
132
- border-color: var(--button-color-active);
145
+ background-color: var(--button-surface-color-active);
146
+ border-color: var(--button-surface-color-active);
133
147
  }
134
148
 
135
149
  &:focus-visible,
136
150
  &.is-focus-visible {
137
151
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
138
- var(--button-color);
152
+ var(--button-focus-outline-color);
139
153
  outline-offset: var(--button-focus-outline-offset);
140
154
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
141
155
  }
@@ -162,7 +176,7 @@
162
176
  &:focus-visible,
163
177
  &.is-focus-visible {
164
178
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
165
- var(--button-color);
179
+ var(--button-focus-outline-color);
166
180
  outline-offset: var(--button-focus-outline-offset);
167
181
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
168
182
  }
package/scss/components/card.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .card {
3
5
  --card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
package/scss/components/chip.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use '../layers.scss';
2
3
  @use '../theme.scss' as theme;
3
4
 
4
5
  @layer components {
package/scss/components/drawer.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .drawer {
3
5
  --drawer-width: 20rem;
package/scss/components/empty-state.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .empty-state {
3
5
  --empty-state-max-width: 36rem;
package/scss/components/expansion-panel.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .expansion-panel-container {
3
5
  display: flex;
@@ -14,6 +16,8 @@
14
16
  --expansion-panel-bg-color: var(--bg-surface);
15
17
  --expansion-panel-header-bg-color: var(--bg-surface);
16
18
  --expansion-panel-content-bg-color: var(--bg-surface);
19
+ --expansion-panel-header-hover-color: var(--action-color);
20
+ --expansion-panel-header-active-color: var(--action-color-active);
17
21
 
18
22
  --expansion-panel-border-width: var(--border-width);
19
23
  --expansion-panel-border-color: var(--border-color);
@@ -99,7 +103,11 @@
99
103
 
100
104
  &:hover {
101
105
  cursor: pointer;
102
- color: var(--primary);
106
+ color: var(--expansion-panel-header-hover-color);
107
+ }
108
+
109
+ &:active {
110
+ color: var(--expansion-panel-header-active-color);
103
111
  }
104
112
 
105
113
  &:focus {
package/scss/components/form.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .form-control {
3
5
  --form-control-bg-color: var(--bg-surface);
package/scss/components/icon-button.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use '../layers.scss';
2
3
  @use '../theme.scss' as theme;
3
4
 
4
5
  @layer components {
@@ -7,6 +8,9 @@
7
8
  --icon-button-color-hover: var(--text-color);
8
9
  --icon-button-color-active: var(--text-color);
9
10
  --icon-button-on-color: var(--on-primary);
11
+ --icon-button-surface-color: var(--icon-button-color);
12
+ --icon-button-surface-color-hover: var(--icon-button-color-hover);
13
+ --icon-button-surface-color-active: var(--icon-button-color-active);
10
14
 
11
15
  --icon-button-bg-color: transparent;
12
16
  --icon-button-border-color: transparent;
@@ -79,35 +83,45 @@
79
83
 
80
84
  @each $name, $value in map.get(theme.$theme, colors) {
81
85
  .icon-btn-#{$name} {
82
- --icon-button-color: var(--#{$name});
83
- --icon-button-color-hover: var(--#{$name}-hover);
84
- --icon-button-color-active: var(--#{$name}-active);
86
+ @if $name == 'primary' {
87
+ --icon-button-color: var(--action-color);
88
+ --icon-button-color-hover: var(--action-color-hover);
89
+ --icon-button-color-active: var(--action-color-active);
90
+ } @else {
91
+ --icon-button-color: var(--#{$name});
92
+ --icon-button-color-hover: var(--#{$name}-hover);
93
+ --icon-button-color-active: var(--#{$name}-active);
94
+ }
95
+
96
+ --icon-button-surface-color: var(--#{$name});
97
+ --icon-button-surface-color-hover: var(--#{$name}-hover);
98
+ --icon-button-surface-color-active: var(--#{$name}-active);
85
99
  --icon-button-on-color: var(--on-#{$name});
86
100
  }
87
101
  }
88
102
 
89
103
  .icon-btn-solid {
90
104
  color: var(--icon-button-on-color);
91
- background-color: var(--icon-button-color);
92
- border-color: var(--icon-button-color);
105
+ background-color: var(--icon-button-surface-color);
106
+ border-color: var(--icon-button-surface-color);
93
107
 
94
108
  &:hover {
95
109
  color: var(--icon-button-on-color);
96
- background-color: var(--icon-button-color-hover);
97
- border-color: var(--icon-button-color-hover);
110
+ background-color: var(--icon-button-surface-color-hover);
111
+ border-color: var(--icon-button-surface-color-hover);
98
112
  }
99
113
 
100
114
  &:active,
101
115
  &.is-active {
102
116
  color: var(--icon-button-on-color);
103
- background-color: var(--icon-button-color-active);
104
- border-color: var(--icon-button-color-active);
117
+ background-color: var(--icon-button-surface-color-active);
118
+ border-color: var(--icon-button-surface-color-active);
105
119
  }
106
120
 
107
121
  &:focus-visible,
108
122
  &.is-focus-visible {
109
123
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
110
- var(--icon-button-color);
124
+ var(--icon-button-focus-outline-color);
111
125
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
112
126
  var(--icon-button-on-color);
113
127
  }
@@ -134,7 +148,7 @@
134
148
  &:focus-visible,
135
149
  &.is-focus-visible {
136
150
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
137
- var(--icon-button-color);
151
+ var(--icon-button-focus-outline-color);
138
152
  background-color: var(--icon-button-highlight);
139
153
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
140
154
  var(--icon-button-on-color);
@@ -148,21 +162,21 @@
148
162
 
149
163
  &:hover {
150
164
  color: var(--icon-button-on-color);
151
- background-color: var(--icon-button-color-hover);
152
- border-color: var(--icon-button-color-hover);
165
+ background-color: var(--icon-button-surface-color-hover);
166
+ border-color: var(--icon-button-surface-color-hover);
153
167
  }
154
168
 
155
169
  &:active,
156
170
  &.is-active {
157
171
  color: var(--icon-button-on-color);
158
- background-color: var(--icon-button-color-active);
159
- border-color: var(--icon-button-color-active);
172
+ background-color: var(--icon-button-surface-color-active);
173
+ border-color: var(--icon-button-surface-color-active);
160
174
  }
161
175
 
162
176
  &:focus-visible,
163
177
  &.is-focus-visible {
164
178
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
165
- var(--icon-button-color);
179
+ var(--icon-button-focus-outline-color);
166
180
  box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
167
181
  var(--icon-button-on-color);
168
182
  }
package/scss/components/list.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .list {
3
5
  --list-padding: var(--spacer-0);
package/scss/components/menu.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .menu {
3
5
  --menu-min-width: 12rem;
package/scss/components/modal.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .modal {
3
5
  --modal-width: min(32rem, calc(100vw - var(--spacer-4)));
package/scss/components/navbar.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use '../layers.scss';
2
3
  @use '../theme.scss' as theme;
3
4
 
4
5
  @layer components {
@@ -11,9 +12,11 @@
11
12
  --navbar-min-height: 3.75rem;
12
13
 
13
14
  --navbar-link-color: var(--navbar-text-color);
14
- --navbar-link-hover-color: var(--primary-hover);
15
+ --navbar-link-hover-color: var(--action-color-hover);
16
+ --navbar-link-active-color: var(--action-color-active);
15
17
 
16
- --navbar-logo-hover-color: var(--primary-hover);
18
+ --navbar-logo-hover-color: var(--action-color-hover);
19
+ --navbar-logo-active-color: var(--action-color-active);
17
20
 
18
21
  display: flex;
19
22
  align-items: center;
@@ -26,6 +29,7 @@
26
29
  a {
27
30
  --link-text-color: var(--navbar-link-color);
28
31
  --link-hover-color: var(--navbar-link-hover-color);
32
+ --link-active-color: var(--navbar-link-active-color);
29
33
  }
30
34
 
31
35
  .navbar-logo {
@@ -36,6 +40,10 @@
36
40
  color: var(--navbar-logo-hover-color);
37
41
  text-decoration: none;
38
42
  }
43
+
44
+ &:active {
45
+ color: var(--navbar-logo-active-color);
46
+ }
39
47
  }
40
48
  }
41
49
  }
package/scss/components/overlay.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .overlay {
3
5
  --overlay-highlight: rgb(from var(--gray-800) r g b / 0.7);
package/scss/components/pagination.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .pagination {
3
5
  --pagination-gap: var(--spacer-1);
package/scss/components/range-slider.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .range-slider {
3
5
  --range-slider-gap: var(--spacer-1);
package/scss/components/stepper.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use '../layers.scss';
1
2
  @use '../mixins/breakpoints' as bp;
2
3
 
3
4
  @layer components {
package/scss/components/table.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .table {
3
5
  --table-color: var(--text-color);
package/scss/components/tabs.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .tabs {
3
5
  --tabs-bg-color: transparent;
package/scss/components/timeline.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .timeline {
3
5
  --timeline-line-color: var(--border-color);
package/scss/components/toast.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .toast {
3
5
  --toast-z-index: var(--z-index-toast);
package/scss/components/tooltip.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use '../layers.scss';
2
+
1
3
  @layer components {
2
4
  .tooltip {
3
5
  --tooltip-z-index: var(--z-index-tooltip);
package/scss/display.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  $-display-values: (
package/scss/flex-responsive.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './display.scss';
3
4
  @use './theme.scss' as theme;
4
5
 
package/scss/flex.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use './layers.scss';
1
2
  @use './display.scss';
2
3
 
3
4
  @layer utilities {
package/scss/gap-responsive.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  // i.e.: .gap-md-2, .row-gap-md-2, .column-gap-md-2
package/scss/gap.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  @layer utilities {
package/scss/grid-responsive.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  // grid responsive
package/scss/grid.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use './layers.scss';
2
+
1
3
  @layer utilities {
2
4
  .grid {
3
5
  --grid-gap: var(--spacer-3);
package/scss/order-responsive.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  // Order utilities work with flex and grid items.
package/scss/order.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  // Order utilities work with flex and grid items.
2
2
 
3
+ @use './layers.scss';
4
+
3
5
  @layer utilities {
4
6
  .order-0 {
5
7
  order: 0;
package/scss/reboot.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use './layers.scss';
2
+
1
3
  @layer reset {
2
4
  *,
3
5
  ::after,
package/scss/spacings-responsive.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  @layer utilities {
package/scss/spacings.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  @layer utilities {
package/scss/text.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  $letterSpacings: 0, 1, 2, 3, 4, 5;
package/scss/typography.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use './layers.scss';
2
+
1
3
  @layer base {
2
4
  :root {
3
5
  --h1: 500 2.25rem var(--font-family);
@@ -66,7 +68,9 @@
66
68
  }
67
69
 
68
70
  a {
69
- --link-text-color: var(--primary);
71
+ --link-text-color: var(--action-color);
72
+ --link-hover-color: var(--action-color-hover);
73
+ --link-active-color: var(--action-color-active);
70
74
 
71
75
  --link-focus-outline-width: var(--focus-outline-width);
72
76
  --link-focus-outline-style: var(--focus-outline-style);
@@ -88,11 +92,16 @@
88
92
  outline-offset var(--link-transition-duration) var(--link-transition-easing);
89
93
 
90
94
  &:hover {
91
- color: var(--link-hover-color, var(--link-text-color));
92
- fill: var(--link-hover-color, var(--link-text-color));
95
+ color: var(--link-hover-color);
96
+ fill: var(--link-hover-color);
93
97
  text-decoration: underline;
94
98
  }
95
99
 
100
+ &:active {
101
+ color: var(--link-active-color);
102
+ fill: var(--link-active-color);
103
+ }
104
+
96
105
  &:focus-visible {
97
106
  outline: var(--link-focus-outline-width) var(--link-focus-outline-style)
98
107
  var(--link-focus-outline-color);
package/scss/utilities.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use 'sass:color';
2
2
  @use 'sass:map';
3
+ @use './layers.scss';
3
4
  @use './display.scss';
4
5
  @use './theme.scss' as theme;
5
6
 
package/scss/variables.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use './layers.scss';
2
3
  @use './theme.scss' as theme;
3
4
 
4
5
  @mixin _define-color-variables($colors) {
@@ -57,6 +58,10 @@
57
58
  --text-inverse: var(--gray-50);
58
59
  --text-subtle: var(--gray-600);
59
60
 
61
+ --action-color: var(--primary);
62
+ --action-color-hover: var(--primary-hover);
63
+ --action-color-active: var(--primary-active);
64
+
60
65
  --border-width: 1px;
61
66
  --border-color: var(--gray-100);
62
67
  --control-border-color: var(--gray-550);
@@ -73,7 +78,7 @@
73
78
  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
74
79
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.2);
75
80
 
76
- --focus-outline-color: var(--primary);
81
+ --focus-outline-color: var(--action-color);
77
82
  --focus-outline-style: solid;
78
83
  --focus-outline-width: 2.5px;
79
84
  --focus-offset: 0px;