@oardi/css-utils 0.62.2 → 0.63.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 (8) hide show
  1. package/package.json +1 -1
  2. package/scss/components/button.scss +11 -5
  3. package/scss/components/form.scss +8 -4
  4. package/scss/components/icon-button.scss +14 -4
  5. package/scss/components/pagination.scss +2 -1
  6. package/scss/components/tabs.scss +2 -1
  7. package/scss/utilities.scss +10 -0
  8. package/scss/variables.scss +1 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.62.2",
3
+ "version": "0.63.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
@@ -54,7 +54,8 @@
54
54
  text-decoration: none;
55
55
  }
56
56
 
57
- &:focus-visible {
57
+ &:focus-visible,
58
+ &.is-focus-visible {
58
59
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
59
60
  var(--button-focus-outline-color);
60
61
  outline-offset: var(--button-focus-outline-offset);
@@ -99,9 +100,11 @@
99
100
  border-color: var(--button-color-active);
100
101
  }
101
102
 
102
- &:focus-visible {
103
+ &:focus-visible,
104
+ &.is-focus-visible {
103
105
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
104
106
  rgba(var(--button-color-rgb), 0.5);
107
+ outline-offset: var(--button-focus-outline-offset);
105
108
  }
106
109
  }
107
110
 
@@ -123,9 +126,11 @@
123
126
  border-color: var(--button-color-active);
124
127
  }
125
128
 
126
- &:focus-visible {
129
+ &:focus-visible,
130
+ &.is-focus-visible {
127
131
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
128
132
  rgba(var(--button-color-rgb), 0.5);
133
+ outline-offset: var(--button-focus-outline-offset);
129
134
  }
130
135
  }
131
136
 
@@ -139,13 +144,14 @@
139
144
  &:hover,
140
145
  &.is-active,
141
146
  &:active {
142
- // color: var(--button-on-color); // check if needed
143
147
  background-color: var(--button-highlight);
144
148
  }
145
149
 
146
- &:focus-visible {
150
+ &:focus-visible,
151
+ &.is-focus-visible {
147
152
  outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
148
153
  rgba(var(--button-color-rgb), 0.5);
154
+ outline-offset: var(--button-focus-outline-offset);
149
155
  }
150
156
  }
151
157
 
package/scss/components/form.scss CHANGED
@@ -251,7 +251,8 @@
251
251
  transform: translate(-50%, -50%);
252
252
  }
253
253
 
254
- &:focus-visible {
254
+ &:focus-visible,
255
+ &.is-focus-visible {
255
256
  border-color: var(--primary-hover);
256
257
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
257
258
  outline-offset: var(--focus-offset);
@@ -260,7 +261,8 @@
260
261
  &.is-invalid {
261
262
  border-color: var(--error);
262
263
 
263
- &:focus-visible {
264
+ &:focus-visible,
265
+ &.is-focus-visible {
264
266
  outline: var(--focus-outline-error);
265
267
  outline-offset: var(--focus-offset);
266
268
  }
@@ -395,7 +397,8 @@
395
397
  }
396
398
  }
397
399
 
398
- &:focus-visible {
400
+ &:focus-visible,
401
+ &.is-focus-visible {
399
402
  outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
400
403
  var(--form-switch-focus-outline-color);
401
404
  outline-offset: var(--form-switch-focus-outline-offset);
@@ -404,7 +407,8 @@
404
407
  &.is-invalid {
405
408
  border-color: var(--error);
406
409
 
407
- &:focus-visible {
410
+ &:focus-visible,
411
+ &.is-focus-visible {
408
412
  outline: var(--focus-outline-error);
409
413
  outline-offset: var(--form-switch-focus-outline-offset);
410
414
  }
package/scss/components/icon-button.scss CHANGED
@@ -69,7 +69,8 @@
69
69
  text-decoration: none;
70
70
  }
71
71
 
72
- &:focus-visible {
72
+ &:focus-visible,
73
+ &.is-focus-visible {
73
74
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
74
75
  var(--icon-button-focus-outline-color);
75
76
  outline-offset: var(--icon-button-focus-outline-offset);
@@ -98,8 +99,11 @@
98
99
  border-color: transparent;
99
100
  }
100
101
 
101
- &:focus-visible {
102
+ &:focus-visible,
103
+ &.is-focus-visible {
102
104
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
105
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
106
+ rgba(var(--icon-button-color-rgb), 0.5);
103
107
  background-color: var(--icon-button-highlight);
104
108
  }
105
109
  }
@@ -122,8 +126,11 @@
122
126
  border-color: var(--icon-button-color-active);
123
127
  }
124
128
 
125
- &:focus-visible {
129
+ &:focus-visible,
130
+ &.is-focus-visible {
126
131
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
132
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
133
+ rgba(var(--icon-button-color-rgb), 0.5);
127
134
  }
128
135
  }
129
136
 
@@ -145,8 +152,11 @@
145
152
  border-color: var(--icon-button-color-active);
146
153
  }
147
154
 
148
- &:focus-visible {
155
+ &:focus-visible,
156
+ &.is-focus-visible {
149
157
  outline-color: rgba(var(--icon-button-color-rgb), 0.5);
158
+ outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
159
+ rgba(var(--icon-button-color-rgb), 0.5);
150
160
  }
151
161
  }
152
162
 
package/scss/components/pagination.scss CHANGED
@@ -59,7 +59,8 @@
59
59
  text-decoration: none;
60
60
  }
61
61
 
62
- &:focus-visible {
62
+ &:focus-visible,
63
+ &.is-focus-visible {
63
64
  outline: var(--pagination-item-focus-outline-width) var(--pagination-item-focus-outline-style)
64
65
  var(--pagination-item-focus-outline-color);
65
66
  outline-offset: var(--pagination-item-focus-outline-offset);
package/scss/components/tabs.scss CHANGED
@@ -63,7 +63,8 @@
63
63
  border-block-end-color: var(--tab-active-border-color);
64
64
  }
65
65
 
66
- &:focus-visible {
66
+ &:focus-visible,
67
+ &.is-focus-visible {
67
68
  z-index: 10;
68
69
  color: var(--tab-active-color);
69
70
  outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style) var(--tab-focus-outline-color);
package/scss/utilities.scss CHANGED
@@ -321,4 +321,14 @@
321
321
  z-index: $value;
322
322
  }
323
323
  }
324
+
325
+ .focus-ring {
326
+ outline: var(--focus-ring-width, var(--focus-outline-width)) var(--focus-ring-style, var(--focus-outline-style))
327
+ var(--focus-ring-color, var(--focus-outline-color));
328
+ outline-offset: var(--focus-ring-offset, var(--focus-offset));
329
+ }
330
+
331
+ .focus-ring-0 {
332
+ outline: 0;
333
+ }
324
334
  }
package/scss/variables.scss CHANGED
@@ -72,11 +72,10 @@
72
72
  --focus-outline-color: rgba(var(--primary-rgb), 0.5);
73
73
  --focus-outline-style: solid;
74
74
  --focus-outline-width: 2.5px;
75
+ --focus-offset: 0px;
75
76
 
76
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?
77
78
 
78
- --focus-offset: 0px;
79
-
80
79
  --container: 900px;
81
80
 
82
81
  --transition-duration-fast: 0.12s;