@oardi/css-utils 0.80.0 → 0.82.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/button.scss +6 -3
  3. package/scss/components/card.scss +3 -0
  4. package/scss/components/icon-button.scss +9 -3
  5. package/scss/utilities.scss +36 -0
  6. package/scss/variables.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.80.0",
3
+ "version": "0.82.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
@@ -15,6 +15,7 @@
15
15
 
16
16
  --card-transition-duration: var(--transition-duration, 0.2s);
17
17
  --card-transition-easing: var(--transition-easing);
18
+ --bg-opacity-backdrop: var(--card-bg-color);
18
19
 
19
20
  background-color: var(--card-bg-color);
20
21
  border: var(--card-border-width) solid var(--card-border-color);
@@ -33,6 +34,8 @@
33
34
  text-decoration: none;
34
35
 
35
36
  &:hover {
37
+ --bg-opacity-backdrop: var(--card-bg-hover-color);
38
+
36
39
  background-color: var(--card-bg-hover-color);
37
40
  }
38
41
 
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/utilities.scss CHANGED
@@ -34,65 +34,101 @@ $-overflow-wrap-values: normal, break-word, anywhere;
34
34
 
35
35
  .bg-opacity-10 {
36
36
  --bg-opacity: 0.1;
37
+ --bg-opacity-percentage: 10%;
37
38
  }
38
39
 
39
40
  .bg-opacity-25 {
40
41
  --bg-opacity: 0.25;
42
+ --bg-opacity-percentage: 25%;
41
43
  }
42
44
 
43
45
  .bg-opacity-50 {
44
46
  --bg-opacity: 0.5;
47
+ --bg-opacity-percentage: 50%;
45
48
  }
46
49
 
47
50
  .bg-opacity-75 {
48
51
  --bg-opacity: 0.75;
52
+ --bg-opacity-percentage: 75%;
49
53
  }
50
54
 
51
55
  @each $name, $value in map.get(theme.$theme, colors) {
52
56
  .bg-#{$name} {
57
+ --bg-opacity-backdrop: var(--#{$name});
58
+
53
59
  color: var(--on-#{$name});
54
60
  fill: var(--on-#{$name});
55
61
  background-color: rgb(from var(--#{$name}) r g b / var(--bg-opacity));
62
+
63
+ &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
64
+ --bg-opacity-backdrop: inherit;
65
+ --bg-opacity-composite: color-mix(
66
+ in srgb,
67
+ var(--#{$name}) var(--bg-opacity-percentage),
68
+ var(--bg-opacity-backdrop)
69
+ );
70
+
71
+ color: contrast-color(var(--bg-opacity-composite));
72
+ fill: currentcolor;
73
+ }
56
74
  }
57
75
  }
58
76
 
59
77
  .bg-white {
78
+ --bg-opacity-backdrop: var(--white);
79
+
60
80
  background-color: var(--white);
61
81
  color: var(--black);
62
82
  }
63
83
 
64
84
  .bg-black {
85
+ --bg-opacity-backdrop: var(--black);
86
+
65
87
  background-color: var(--black);
66
88
  color: var(--white);
67
89
  }
68
90
 
69
91
  @each $name, $value in map.get(theme.$theme, grays) {
70
92
  .bg-gray-#{$name} {
93
+ --bg-opacity-backdrop: var(--gray-#{$name});
94
+
71
95
  background-color: var(--gray-#{$name});
72
96
  }
73
97
  }
74
98
 
75
99
  .bg-body {
100
+ --bg-opacity-backdrop: var(--bg-body);
101
+
76
102
  background-color: var(--bg-body);
77
103
  }
78
104
 
79
105
  .bg-surface {
106
+ --bg-opacity-backdrop: var(--bg-surface);
107
+
80
108
  background-color: var(--bg-surface);
81
109
  }
82
110
 
83
111
  .bg-inverse {
112
+ --bg-opacity-backdrop: var(--bg-inverse);
113
+
84
114
  background-color: var(--bg-inverse);
85
115
  }
86
116
 
87
117
  .bg-surface-hover {
118
+ --bg-opacity-backdrop: var(--bg-surface-hover);
119
+
88
120
  background-color: var(--bg-surface-hover);
89
121
  }
90
122
 
91
123
  .bg-highlight {
124
+ --bg-opacity-backdrop: var(--bg-highlight);
125
+
92
126
  background-color: var(--bg-highlight);
93
127
  }
94
128
 
95
129
  .bg-active {
130
+ --bg-opacity-backdrop: var(--bg-active);
131
+
96
132
  background-color: var(--bg-active);
97
133
  }
98
134
 
package/scss/variables.scss CHANGED
@@ -50,6 +50,7 @@
50
50
  --bg-highlight: var(--gray-100);
51
51
  --bg-active: var(--gray-150);
52
52
  --bg-opacity: 1;
53
+ --bg-opacity-backdrop: var(--bg-body);
53
54
 
54
55
  --text-color: var(--gray-950);
55
56
  --text-muted: var(--gray-650);
@@ -71,13 +72,12 @@
71
72
  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
72
73
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.2);
73
74
 
74
- --focus-outline-color: rgb(from var(--primary) r g b / 0.5);
75
+ --focus-outline-color: var(--primary);
75
76
  --focus-outline-style: solid;
76
77
  --focus-outline-width: 2.5px;
77
78
  --focus-offset: 0px;
78
79
 
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?
80
+ --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) var(--error);
81
81
 
82
82
  --container: 900px;
83
83