@oardi/css-utils 0.79.0 → 0.81.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 (7) hide show
  1. package/package.json +1 -1
  2. package/scss/components/button.scss +6 -3
  3. package/scss/components/card.scss +9 -0
  4. package/scss/components/chip.scss +22 -12
  5. package/scss/components/icon-button.scss +9 -3
  6. package/scss/components/list.scss +12 -2
  7. package/scss/variables.scss +2 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.79.0",
3
+ "version": "0.81.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/button.scss CHANGED
@@ -108,8 +108,9 @@
108
108
  &:focus-visible,
109
109
  &.is-focus-visible {
110
110
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
111
- rgb(from var(--button-color) r g b / 0.5);
111
+ var(--button-color);
112
112
  outline-offset: var(--button-focus-outline-offset);
113
+ box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
113
114
  }
114
115
  }
115
116
 
@@ -134,8 +135,9 @@
134
135
  &:focus-visible,
135
136
  &.is-focus-visible {
136
137
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
137
- rgb(from var(--button-color) r g b / 0.5);
138
+ var(--button-color);
138
139
  outline-offset: var(--button-focus-outline-offset);
140
+ box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
139
141
  }
140
142
  }
141
143
 
@@ -160,8 +162,9 @@
160
162
  &:focus-visible,
161
163
  &.is-focus-visible {
162
164
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
163
- rgb(from var(--button-color) r g b / 0.5);
165
+ var(--button-color);
164
166
  outline-offset: var(--button-focus-outline-offset);
167
+ box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--button-on-color);
165
168
  }
166
169
  }
167
170
 
package/scss/components/card.scss CHANGED
@@ -26,12 +26,21 @@
26
26
  box-shadow var(--card-transition-duration) var(--card-transition-easing),
27
27
  border-color var(--card-transition-duration) var(--card-transition-easing);
28
28
 
29
+ &:is(a, button),
29
30
  &.card-action {
30
31
  cursor: pointer;
32
+ color: inherit;
33
+ text-decoration: none;
31
34
 
32
35
  &:hover {
33
36
  background-color: var(--card-bg-hover-color);
34
37
  }
38
+
39
+ &:focus-visible {
40
+ outline: var(--focus-outline-width) var(--focus-outline-style)
41
+ var(--focus-outline-color);
42
+ outline-offset: var(--focus-offset);
43
+ }
35
44
  }
36
45
 
37
46
  .card-title {
package/scss/components/chip.scss CHANGED
@@ -40,8 +40,6 @@
40
40
  line-height: var(--line-height);
41
41
  text-decoration: none;
42
42
  white-space: nowrap;
43
- touch-action: manipulation;
44
- -webkit-tap-highlight-color: transparent;
45
43
 
46
44
  transition:
47
45
  color var(--chip-transition-duration) var(--chip-transition-easing),
@@ -49,11 +47,23 @@
49
47
  box-shadow var(--chip-transition-duration) var(--chip-transition-easing),
50
48
  border-color var(--chip-transition-duration) var(--chip-transition-easing);
51
49
 
52
- &:hover {
50
+ &:is(a, button),
51
+ &.chip-interactive {
53
52
  cursor: pointer;
54
- text-decoration: none;
55
- background-color: var(--chip-highlight);
56
- border-color: var(--chip-highlight);
53
+ touch-action: manipulation;
54
+ -webkit-tap-highlight-color: transparent;
55
+
56
+ &:hover {
57
+ text-decoration: none;
58
+ background-color: var(--chip-highlight);
59
+ border-color: var(--chip-highlight);
60
+ }
61
+
62
+ &:focus-visible {
63
+ outline: var(--focus-outline-width) var(--focus-outline-style)
64
+ var(--focus-outline-color);
65
+ outline-offset: var(--focus-offset);
66
+ }
57
67
  }
58
68
 
59
69
  &:has(> i.icon:last-child),
@@ -113,14 +123,14 @@
113
123
  background-color: var(--chip-color);
114
124
  border-color: var(--chip-color);
115
125
 
116
- &:hover {
126
+ &:is(a, button, .chip-interactive):hover {
117
127
  color: var(--chip-on-color);
118
128
  background-color: var(--chip-color-hover);
119
129
  border-color: var(--chip-color-hover);
120
130
  }
121
131
 
122
132
  &.is-active,
123
- &:active {
133
+ &:is(a, button, .chip-interactive):active {
124
134
  color: var(--chip-on-color);
125
135
  background-color: var(--chip-color-active);
126
136
  border-color: var(--chip-color-active);
@@ -132,14 +142,14 @@
132
142
  background-color: transparent;
133
143
  border-color: var(--chip-color);
134
144
 
135
- &:hover {
145
+ &:is(a, button, .chip-interactive):hover {
136
146
  color: var(--chip-on-color);
137
147
  background-color: var(--chip-color-hover);
138
148
  border-color: var(--chip-color-hover);
139
149
  }
140
150
 
141
151
  &.is-active,
142
- &:active {
152
+ &:is(a, button, .chip-interactive):active {
143
153
  color: var(--chip-on-color);
144
154
  background-color: var(--chip-color-active);
145
155
  border-color: var(--chip-color-active);
@@ -151,12 +161,12 @@
151
161
  background-color: transparent;
152
162
  border-color: transparent;
153
163
 
154
- &:hover {
164
+ &:is(a, button, .chip-interactive):hover {
155
165
  background-color: var(--chip-highlight);
156
166
  }
157
167
 
158
168
  &.is-active,
159
- &:active {
169
+ &:is(a, button, .chip-interactive):active {
160
170
  color: var(--chip-color-active);
161
171
  background-color: var(--chip-highlight);
162
172
  }
package/scss/components/icon-button.scss CHANGED
@@ -107,7 +107,9 @@
107
107
  &:focus-visible,
108
108
  &.is-focus-visible {
109
109
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
110
- rgb(from var(--icon-button-color) r g b / 0.5);
110
+ var(--icon-button-color);
111
+ box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
112
+ var(--icon-button-on-color);
111
113
  }
112
114
  }
113
115
 
@@ -132,8 +134,10 @@
132
134
  &:focus-visible,
133
135
  &.is-focus-visible {
134
136
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
135
- rgb(from var(--icon-button-color) r g b / 0.5);
137
+ var(--icon-button-color);
136
138
  background-color: var(--icon-button-highlight);
139
+ box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
140
+ var(--icon-button-on-color);
137
141
  }
138
142
  }
139
143
 
@@ -158,7 +162,9 @@
158
162
  &:focus-visible,
159
163
  &.is-focus-visible {
160
164
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
161
- rgb(from var(--icon-button-color) r g b / 0.5);
165
+ var(--icon-button-color);
166
+ box-shadow: inset 0 0 0 var(--icon-button-focus-outline-width)
167
+ var(--icon-button-on-color);
162
168
  }
163
169
  }
164
170
 
package/scss/components/list.scss CHANGED
@@ -42,10 +42,20 @@
42
42
  color: var(--list-item-active-color);
43
43
  }
44
44
 
45
- &.list-item-action:hover {
45
+ &:is(a, button),
46
+ &.list-item-action {
46
47
  cursor: pointer;
47
- color: var(--list-item-hover-color);
48
48
  text-decoration: none;
49
+
50
+ &:hover {
51
+ color: var(--list-item-hover-color);
52
+ }
53
+
54
+ &:focus-visible {
55
+ outline: var(--focus-outline-width) var(--focus-outline-style)
56
+ var(--focus-outline-color);
57
+ outline-offset: var(--focus-offset);
58
+ }
49
59
  }
50
60
 
51
61
  .list-item-text {
package/scss/variables.scss CHANGED
@@ -71,13 +71,12 @@
71
71
  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
72
72
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.2);
73
73
 
74
- --focus-outline-color: rgb(from var(--primary) r g b / 0.5);
74
+ --focus-outline-color: var(--primary);
75
75
  --focus-outline-style: solid;
76
76
  --focus-outline-width: 2.5px;
77
77
  --focus-offset: 0px;
78
78
 
79
- --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style)
80
- rgb(from var(--error) r g b / 0.5); // create focus outline for every theme color?
79
+ --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) var(--error);
81
80
 
82
81
  --container: 900px;
83
82