@oardi/css-utils 0.115.0 → 0.116.1

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 (5) hide show
  1. package/package.json +1 -1
  2. package/readme.md +1 -1
  3. package/scss/text.scss +1 -1
  4. package/scss/utilities.scss +50 -82
  5. package/scss/variables.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.115.0",
3
+ "version": "0.116.1",
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
@@ -84,7 +84,7 @@ This feature baseline includes cascade layers, `:has()`, `color-mix()` and relat
84
84
 
85
85
  All solid `.bg-*` utilities provide authored text colors and matching SVG fills. Theme colors use `--on-*`, surfaces use `--text-color` or `--text-inverse`, and fixed colors use black/white fallbacks selected from the Sass palette.
86
86
 
87
- `@supports (color: contrast-color(white))` enables automatic black/white foreground selection. Without it, `.bg-opacity-*` theme backgrounds remain **opaque** so their authored foreground stays readable, including nested backgrounds. With it, opacity and contrast against the composited backdrop are enabled. According to [MDN browser compatibility data](https://github.com/mdn/browser-compat-data/blob/main/css/types/color.json), `contrast-color()` starts at Chrome/Edge 147, Firefox 146 and Safari/iOS 26; relative RGB support establishes the lower baseline above. Feature detection determines which path runs.
87
+ `@supports (color: contrast-color(white))` enables automatic black/white foreground selection. Without it, every `.bg-*` combined with `.bg-opacity-*` remains **opaque** so its authored foreground stays readable, including nested backgrounds. With it, opacity and contrast against the composited backdrop are enabled. According to [MDN browser compatibility data](https://github.com/mdn/browser-compat-data/blob/main/css/types/color.json), `contrast-color()` starts at Chrome/Edge 147, Firefox 146 and Safari/iOS 26; relative RGB support establishes the lower baseline above. Feature detection determines which path runs.
88
88
 
89
89
  When overriding theme colors, keep their `--on-*` tokens in sync. When changing surfaces, update their matching text tokens. Gray fallbacks are calculated at Sass compilation time; runtime gray or black/white token overrides require checking foreground contrast and, where needed, an explicit `.text-*` utility. Explicit text utilities continue to override the automatic foreground.
90
90
 
package/scss/text.scss CHANGED
@@ -58,7 +58,7 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
58
58
 
59
59
  .text-underline-#{$name} {
60
60
  text-decoration: underline;
61
- text-underline-offset: var(--spacer-2);
61
+ text-underline-offset: var(--spacer-1);
62
62
  text-decoration-color: var(--#{$name});
63
63
  }
64
64
  }
package/scss/utilities.scss CHANGED
@@ -28,6 +28,46 @@ $-overflow-wrap-values: normal, break-word, anywhere;
28
28
  }
29
29
  }
30
30
 
31
+ @mixin -background-utility($background, $fallback) {
32
+ --bg-opacity: 1;
33
+ --bg-opacity-backdrop: #{$background};
34
+
35
+ background-color: $background;
36
+ @include -background-foreground($background, $fallback);
37
+
38
+ // Keep the authored foreground paired with an opaque background unless
39
+ // the browser can choose text against the actual translucent composite.
40
+ @supports (color: contrast-color(white)) {
41
+ background-color: rgb(from #{$background} r g b / var(--bg-opacity));
42
+
43
+ &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
44
+ --bg-opacity-backdrop: inherit;
45
+ --bg-opacity-composite: color-mix(
46
+ in srgb,
47
+ #{$background} var(--bg-opacity-percentage),
48
+ var(--bg-opacity-backdrop)
49
+ );
50
+ --bg-opacity-rendered: var(--bg-opacity-composite);
51
+
52
+ color: contrast-color(var(--bg-opacity-composite));
53
+ fill: currentcolor;
54
+ }
55
+
56
+ :where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75)
57
+ > &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
58
+ --bg-opacity-rendered: inherit;
59
+ --bg-opacity-composite: color-mix(
60
+ in srgb,
61
+ #{$background} var(--bg-opacity-percentage),
62
+ var(--bg-opacity-rendered)
63
+ );
64
+
65
+ color: contrast-color(var(--bg-opacity-composite));
66
+ fill: currentcolor;
67
+ }
68
+ }
69
+ }
70
+
31
71
  @layer utilities {
32
72
  // positions
33
73
  @each $value in map.get(theme.$theme, positions) {
@@ -47,67 +87,20 @@ $-overflow-wrap-values: normal, break-word, anywhere;
47
87
 
48
88
  @each $name, $value in map.get(theme.$theme, colors) {
49
89
  .bg-#{$name} {
50
- --bg-opacity: 1;
51
- --bg-opacity-backdrop: var(--#{$name});
52
-
53
- background-color: var(--#{$name});
54
- @include -background-foreground(var(--#{$name}), var(--on-#{$name}));
55
-
56
- // Keep the authored foreground paired with an opaque background unless
57
- // the browser can choose text against the actual translucent composite.
58
- @supports (color: contrast-color(white)) {
59
- background-color: rgb(from var(--#{$name}) r g b / var(--bg-opacity));
60
-
61
- &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
62
- --bg-opacity-backdrop: inherit;
63
- --bg-opacity-composite: color-mix(
64
- in srgb,
65
- var(--#{$name}) var(--bg-opacity-percentage),
66
- var(--bg-opacity-backdrop)
67
- );
68
- --bg-opacity-rendered: var(--bg-opacity-composite);
69
-
70
- color: contrast-color(var(--bg-opacity-composite));
71
- fill: currentcolor;
72
- }
73
-
74
- :where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75)
75
- > &:where(.bg-opacity-10, .bg-opacity-25, .bg-opacity-50, .bg-opacity-75) {
76
- --bg-opacity-rendered: inherit;
77
- --bg-opacity-composite: color-mix(
78
- in srgb,
79
- var(--#{$name}) var(--bg-opacity-percentage),
80
- var(--bg-opacity-rendered)
81
- );
82
-
83
- color: contrast-color(var(--bg-opacity-composite));
84
- fill: currentcolor;
85
- }
86
- }
90
+ @include -background-utility(var(--#{$name}), var(--on-#{$name}));
87
91
  }
88
92
  }
89
93
 
90
94
  .bg-white {
91
- --bg-opacity: 1;
92
- --bg-opacity-backdrop: var(--white);
93
-
94
- background-color: var(--white);
95
- @include -background-foreground(var(--white), var(--black));
95
+ @include -background-utility(var(--white), var(--black));
96
96
  }
97
97
 
98
98
  .bg-black {
99
- --bg-opacity: 1;
100
- --bg-opacity-backdrop: var(--black);
101
-
102
- background-color: var(--black);
103
- @include -background-foreground(var(--black), var(--white));
99
+ @include -background-utility(var(--black), var(--white));
104
100
  }
105
101
 
106
102
  @each $name, $value in map.get(theme.$theme, grays) {
107
103
  .bg-gray-#{$name} {
108
- --bg-opacity: 1;
109
- --bg-opacity-backdrop: var(--gray-#{$name});
110
-
111
104
  // XYZ Y is relative luminance; this threshold selects the higher
112
105
  // black/white contrast ratio, including Sass palette overrides.
113
106
  $fallback: var(--white);
@@ -115,57 +108,32 @@ $-overflow-wrap-values: normal, break-word, anywhere;
115
108
  $fallback: var(--black);
116
109
  }
117
110
 
118
- background-color: var(--gray-#{$name});
119
- @include -background-foreground(var(--gray-#{$name}), $fallback);
111
+ @include -background-utility(var(--gray-#{$name}), $fallback);
120
112
  }
121
113
  }
122
114
 
123
115
  .bg-body {
124
- --bg-opacity: 1;
125
- --bg-opacity-backdrop: var(--bg-body);
126
-
127
- background-color: var(--bg-body);
128
- @include -background-foreground(var(--bg-body), var(--text-color));
116
+ @include -background-utility(var(--bg-body), var(--text-color));
129
117
  }
130
118
 
131
119
  .bg-surface {
132
- --bg-opacity: 1;
133
- --bg-opacity-backdrop: var(--bg-surface);
134
-
135
- background-color: var(--bg-surface);
136
- @include -background-foreground(var(--bg-surface), var(--text-color));
120
+ @include -background-utility(var(--bg-surface), var(--text-color));
137
121
  }
138
122
 
139
123
  .bg-inverse {
140
- --bg-opacity: 1;
141
- --bg-opacity-backdrop: var(--bg-inverse);
142
-
143
- background-color: var(--bg-inverse);
144
- @include -background-foreground(var(--bg-inverse), var(--text-inverse));
124
+ @include -background-utility(var(--bg-inverse), var(--text-inverse));
145
125
  }
146
126
 
147
127
  .bg-surface-hover {
148
- --bg-opacity: 1;
149
- --bg-opacity-backdrop: var(--bg-surface-hover);
150
-
151
- background-color: var(--bg-surface-hover);
152
- @include -background-foreground(var(--bg-surface-hover), var(--text-color));
128
+ @include -background-utility(var(--bg-surface-hover), var(--text-color));
153
129
  }
154
130
 
155
131
  .bg-highlight {
156
- --bg-opacity: 1;
157
- --bg-opacity-backdrop: var(--bg-highlight);
158
-
159
- background-color: var(--bg-highlight);
160
- @include -background-foreground(var(--bg-highlight), var(--text-color));
132
+ @include -background-utility(var(--bg-highlight), var(--text-color));
161
133
  }
162
134
 
163
135
  .bg-active {
164
- --bg-opacity: 1;
165
- --bg-opacity-backdrop: var(--bg-active);
166
-
167
- background-color: var(--bg-active);
168
- @include -background-foreground(var(--bg-active), var(--text-color));
136
+ @include -background-utility(var(--bg-active), var(--text-color));
169
137
  }
170
138
 
171
139
  .bg-opacity-10 {
package/scss/variables.scss CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  --focus-outline-color: var(--action-color);
82
82
  --focus-outline-style: solid;
83
- --focus-outline-width: 2.5px;
83
+ --focus-outline-width: 1.5px;
84
84
  --focus-offset: 0px;
85
85
 
86
86
  --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) var(--error);