@oardi/css-utils 0.107.0 → 0.108.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 (6) hide show
  1. package/package.json +1 -1
  2. package/scss/components/chip.scss +23 -10
  3. package/scss/components/list.scss +2 -2
  4. package/scss/components/menu.scss +1 -1
  5. package/scss/components/pagination.scss +1 -1
  6. package/scss/components/tabs.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.107.0",
3
+ "version": "0.108.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/scss/components/chip.scss CHANGED
@@ -8,6 +8,9 @@
8
8
  --chip-color-hover: var(--primary-hover);
9
9
  --chip-color-active: var(--primary-active);
10
10
  --chip-on-color: var(--on-primary);
11
+ --chip-surface-color: var(--chip-color);
12
+ --chip-surface-color-hover: var(--chip-color-hover);
13
+ --chip-surface-color-active: var(--chip-color-active);
11
14
 
12
15
  --chip-font-size: var(--font-size-sm);
13
16
  --chip-padding-y: var(--spacer-0);
@@ -115,26 +118,35 @@
115
118
  --chip-color: var(--#{$name});
116
119
  --chip-color-hover: var(--#{$name}-hover);
117
120
  --chip-color-active: var(--#{$name}-active);
121
+ --chip-surface-color: var(--#{$name});
122
+ --chip-surface-color-hover: var(--#{$name}-hover);
123
+ --chip-surface-color-active: var(--#{$name}-active);
118
124
  --chip-on-color: var(--on-#{$name});
119
125
  }
120
126
  }
121
127
 
128
+ .chip-primary:is(a, button, .chip-interactive) {
129
+ --chip-color: var(--action-color);
130
+ --chip-color-hover: var(--action-color-hover);
131
+ --chip-color-active: var(--action-color-active);
132
+ }
133
+
122
134
  .chip-solid {
123
135
  color: var(--chip-on-color);
124
- background-color: var(--chip-color);
125
- border-color: var(--chip-color);
136
+ background-color: var(--chip-surface-color);
137
+ border-color: var(--chip-surface-color);
126
138
 
127
139
  &:is(a, button, .chip-interactive):hover {
128
140
  color: var(--chip-on-color);
129
- background-color: var(--chip-color-hover);
130
- border-color: var(--chip-color-hover);
141
+ background-color: var(--chip-surface-color-hover);
142
+ border-color: var(--chip-surface-color-hover);
131
143
  }
132
144
 
133
145
  &.is-active,
134
146
  &:is(a, button, .chip-interactive):active {
135
147
  color: var(--chip-on-color);
136
- background-color: var(--chip-color-active);
137
- border-color: var(--chip-color-active);
148
+ background-color: var(--chip-surface-color-active);
149
+ border-color: var(--chip-surface-color-active);
138
150
  }
139
151
  }
140
152
 
@@ -145,15 +157,15 @@
145
157
 
146
158
  &:is(a, button, .chip-interactive):hover {
147
159
  color: var(--chip-on-color);
148
- background-color: var(--chip-color-hover);
149
- border-color: var(--chip-color-hover);
160
+ background-color: var(--chip-surface-color-hover);
161
+ border-color: var(--chip-surface-color-hover);
150
162
  }
151
163
 
152
164
  &.is-active,
153
165
  &:is(a, button, .chip-interactive):active {
154
166
  color: var(--chip-on-color);
155
- background-color: var(--chip-color-active);
156
- border-color: var(--chip-color-active);
167
+ background-color: var(--chip-surface-color-active);
168
+ border-color: var(--chip-surface-color-active);
157
169
  }
158
170
  }
159
171
 
@@ -163,6 +175,7 @@
163
175
  border-color: transparent;
164
176
 
165
177
  &:is(a, button, .chip-interactive):hover {
178
+ color: var(--chip-color-hover);
166
179
  background-color: var(--chip-highlight);
167
180
  }
168
181
 
package/scss/components/list.scss CHANGED
@@ -13,8 +13,8 @@
13
13
  --list-item-padding-x: var(--spacer-3);
14
14
  --list-item-gap: var(--spacer-2);
15
15
 
16
- --list-item-active-color: var(--primary);
17
- --list-item-hover-color: var(--primary);
16
+ --list-item-active-color: var(--action-color);
17
+ --list-item-hover-color: var(--action-color);
18
18
 
19
19
  --list-item-transition-duration: var(--transition-duration);
20
20
  --list-item-transition-easing: var(--transition-easing);
package/scss/components/menu.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  --menu-item-border-radius: var(--border-radius-sm);
28
28
  --menu-item-hover-bg-color: var(--bg-surface-hover);
29
29
  --menu-item-active-bg-color: var(--bg-active);
30
- --menu-item-current-color: var(--primary);
30
+ --menu-item-current-color: var(--action-color);
31
31
  --menu-item-destructive-color: var(--error);
32
32
  --menu-item-disabled-color: var(--disabled-text-color);
33
33
  --menu-item-description-color: var(--text-muted);
package/scss/components/pagination.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  --pagination-item-color: var(--text-color);
13
13
  --pagination-item-bg-color: transparent;
14
14
 
15
- --pagination-item-hover-color: var(--primary);
15
+ --pagination-item-hover-color: var(--action-color);
16
16
  --pagination-item-hover-bg-color: var(--bg-highlight);
17
17
 
18
18
  --pagination-item-active-color: var(--on-primary);
package/scss/components/tabs.scss CHANGED
@@ -17,12 +17,12 @@
17
17
  --tab-color: var(--text-color);
18
18
  --tab-bg-color: transparent;
19
19
 
20
- --tab-hover-color: var(--primary);
20
+ --tab-hover-color: var(--action-color);
21
21
  --tab-hover-bg-color: var(--bg-surface-hover);
22
22
 
23
- --tab-active-color: var(--primary);
23
+ --tab-active-color: var(--action-color);
24
24
  --tab-active-bg-color: transparent;
25
- --tab-active-border-color: var(--primary);
25
+ --tab-active-border-color: var(--tab-active-color);
26
26
 
27
27
  --tab-border-width: 2px;
28
28
  --tab-border-color: transparent;