@nuvoui/core 1.4.7 → 1.5.2

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 (16) hide show
  1. package/dist/nuvoui.css +463 -507
  2. package/dist/nuvoui.css.map +1 -1
  3. package/dist/nuvoui.min.css +1 -1
  4. package/dist/nuvoui.min.css.map +1 -1
  5. package/package.json +8 -8
  6. package/src/styles/base/_base.scss +200 -201
  7. package/src/styles/base/_reset.scss +131 -127
  8. package/src/styles/components/_tooltips.scss +218 -216
  9. package/src/styles/functions/_colors.scss +26 -5
  10. package/src/styles/functions/_math.scss +21 -5
  11. package/src/styles/layouts/_container.scss +2 -4
  12. package/src/styles/utilities/_animations.scss +16 -4
  13. package/src/styles/utilities/_backdrop-filters.scss +4 -1
  14. package/src/styles/utilities/_colors.scss +4 -1
  15. package/src/styles/utilities/_typography.scss +4 -1
  16. package/src/styles/utilities/_z-index.scss +4 -1
package/src/styles/components/_tooltips.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "../functions/feature-flags" as fn-flags;
3
3
  @mixin tooltip-variables {
4
4
  // Tooltip core variables
5
- --tooltip-bg: rgba(17 17 17 / 90%);
5
+ --tooltip-bg: rgb(17 17 17 / 90%);
6
6
  --tooltip-shadow-color: rgb(0 0 0 / 20%);
7
7
  --tooltip-text-color: #fff;
8
8
 
@@ -24,248 +24,250 @@
24
24
  }
25
25
 
26
26
  @if fn-flags.feature-enabled("tooltips") {
27
- // Apply variables based on parent selector
28
- @if config-flags.$parent-selector == "" {
29
- :root {
30
- @include tooltip-variables;
27
+ @layer components {
28
+ // Apply variables based on parent selector
29
+ @if config-flags.$parent-selector == "" {
30
+ :root {
31
+ @include tooltip-variables;
32
+ }
33
+ } @else {
34
+ #{config-flags.$parent-selector} {
35
+ @include tooltip-variables;
36
+ }
31
37
  }
32
- } @else {
33
- #{config-flags.$parent-selector} {
34
- @include tooltip-variables;
35
- }
36
- }
37
-
38
- #{config-flags.$parent-selector} [data-tooltip][role~="tooltip"] {
39
- position: relative;
40
-
41
- &::before,
42
- &::after {
43
- transform: translate3d(0, 0, 0);
44
- backface-visibility: hidden;
45
- will-change: transform;
46
- opacity: 0;
47
- pointer-events: none;
48
- transition:
49
- opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay),
50
- transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
51
- position: absolute;
52
- box-sizing: border-box;
53
- z-index: 10;
54
- transform-origin: top;
55
- }
56
-
57
- &::before {
58
- background-size: 100% auto !important;
59
- content: "";
60
- }
61
-
62
- &::after {
63
- background: var(--tooltip-bg);
64
- box-shadow: 0 3px 7px var(--tooltip-shadow-color);
65
- border-radius: var(--tooltip-border-radius);
66
- color: var(--tooltip-text-color);
67
- content: attr(data-tooltip);
68
- font-size: var(--microtip-font-size);
69
- font-weight: var(--microtip-font-weight);
70
- text-transform: var(--microtip-text-transform);
71
- padding: 0.5em 1em;
72
- white-space: nowrap;
73
- box-sizing: content-box;
74
- }
75
-
76
- &:hover::before,
77
- &:hover::after,
78
- &:focus::before,
79
- &:focus::after {
80
- opacity: 1;
81
- pointer-events: auto;
82
- }
83
- }
84
-
85
- // Top position tooltips
86
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
87
- &::before {
88
- border-left: 9px solid transparent;
89
- border-right: 9px solid transparent;
90
- border-top: 6px solid var(--tooltip-bg);
91
- height: 0;
92
- width: 0;
93
- margin-bottom: 6px;
94
- transform: translate3d(-50%, 0, 0);
95
- bottom: 100%;
96
- left: 50%;
97
- z-index: 999;
98
- }
99
-
100
- &::after {
101
- margin-bottom: 11px;
102
- transform: translate3d(-50%, 0, 0);
103
- bottom: 100%;
104
- left: 50%;
105
- }
106
-
107
- &:hover::before {
108
- transform: translate3d(-50%, -5px, 0);
109
- }
110
-
111
- &:hover::after {
112
- transform: translate3d(-50%, -5px, 0);
113
- }
114
- }
115
38
 
116
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
117
- &::after {
118
- transform: translate3d(calc(-100% + 16px), 0, 0);
119
- bottom: 100%;
39
+ #{config-flags.$parent-selector} [data-tooltip][role~="tooltip"] {
40
+ position: relative;
41
+
42
+ &::before,
43
+ &::after {
44
+ transform: translate3d(0, 0, 0);
45
+ backface-visibility: hidden;
46
+ will-change: transform;
47
+ opacity: 0;
48
+ pointer-events: none;
49
+ transition:
50
+ opacity var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay),
51
+ transform var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
52
+ position: absolute;
53
+ box-sizing: border-box;
54
+ z-index: 10;
55
+ transform-origin: top;
56
+ }
57
+
58
+ &::before {
59
+ background-size: 100% auto !important;
60
+ content: "";
61
+ }
62
+
63
+ &::after {
64
+ background: var(--tooltip-bg);
65
+ box-shadow: 0 3px 7px var(--tooltip-shadow-color);
66
+ border-radius: var(--tooltip-border-radius);
67
+ color: var(--tooltip-text-color);
68
+ content: attr(data-tooltip);
69
+ font-size: var(--microtip-font-size);
70
+ font-weight: var(--microtip-font-weight);
71
+ text-transform: var(--microtip-text-transform);
72
+ padding: 0.5em 1em;
73
+ white-space: nowrap;
74
+ box-sizing: content-box;
75
+ }
76
+
77
+ &:hover::before,
78
+ &:hover::after,
79
+ &:focus::before,
80
+ &:focus::after {
81
+ opacity: 1;
82
+ pointer-events: auto;
83
+ }
120
84
  }
121
85
 
122
- &:hover::after {
123
- transform: translate3d(calc(-100% + 16px), -5px, 0);
86
+ // Top position tooltips
87
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
88
+ &::before {
89
+ border-left: 9px solid transparent;
90
+ border-right: 9px solid transparent;
91
+ border-top: 6px solid var(--tooltip-bg);
92
+ height: 0;
93
+ width: 0;
94
+ margin-bottom: 6px;
95
+ transform: translate3d(-50%, 0, 0);
96
+ bottom: 100%;
97
+ left: 50%;
98
+ z-index: 999;
99
+ }
100
+
101
+ &::after {
102
+ margin-bottom: 11px;
103
+ transform: translate3d(-50%, 0, 0);
104
+ bottom: 100%;
105
+ left: 50%;
106
+ }
107
+
108
+ &:hover::before {
109
+ transform: translate3d(-50%, -5px, 0);
110
+ }
111
+
112
+ &:hover::after {
113
+ transform: translate3d(-50%, -5px, 0);
114
+ }
124
115
  }
125
- }
126
116
 
127
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
128
- &::after {
129
- transform: translate3d(calc(0% + -16px), 0, 0);
130
- bottom: 100%;
131
- }
132
-
133
- &:hover::after {
134
- transform: translate3d(calc(0% + -16px), -5px, 0);
135
- }
136
- }
137
-
138
- // Bottom position tooltips
139
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
140
- &::before {
141
- border-left: 9px solid transparent;
142
- border-right: 9px solid transparent;
143
- border-bottom: 6px solid var(--tooltip-bg);
144
- height: 0;
145
- width: 0;
146
- margin-top: 5px;
147
- margin-bottom: 0;
148
- transform: translate3d(-50%, -10px, 0);
149
- bottom: auto;
150
- left: 50%;
151
- top: 100%;
152
- z-index: 999;
153
- }
117
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
118
+ &::after {
119
+ transform: translate3d(calc(-100% + 16px), 0, 0);
120
+ bottom: 100%;
121
+ }
154
122
 
155
- &::after {
156
- margin-top: 11px;
157
- transform: translate3d(-50%, -10px, 0);
158
- top: 100%;
159
- left: 50%;
123
+ &:hover::after {
124
+ transform: translate3d(calc(-100% + 16px), -5px, 0);
125
+ }
160
126
  }
161
127
 
162
- &:hover::before {
163
- transform: translate3d(-50%, 0, 0);
164
- }
128
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
129
+ &::after {
130
+ transform: translate3d(calc(0% + -16px), 0, 0);
131
+ bottom: 100%;
132
+ }
165
133
 
166
- &:hover::after {
167
- transform: translate3d(-50%, 0, 0);
134
+ &:hover::after {
135
+ transform: translate3d(calc(0% + -16px), -5px, 0);
136
+ }
168
137
  }
169
- }
170
138
 
171
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
172
- &::after {
173
- transform: translate3d(calc(-100% + 16px), -10px, 0);
174
- top: 100%;
139
+ // Bottom position tooltips
140
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
141
+ &::before {
142
+ border-left: 9px solid transparent;
143
+ border-right: 9px solid transparent;
144
+ border-bottom: 6px solid var(--tooltip-bg);
145
+ height: 0;
146
+ width: 0;
147
+ margin-top: 5px;
148
+ margin-bottom: 0;
149
+ transform: translate3d(-50%, -10px, 0);
150
+ bottom: auto;
151
+ left: 50%;
152
+ top: 100%;
153
+ z-index: 999;
154
+ }
155
+
156
+ &::after {
157
+ margin-top: 11px;
158
+ transform: translate3d(-50%, -10px, 0);
159
+ top: 100%;
160
+ left: 50%;
161
+ }
162
+
163
+ &:hover::before {
164
+ transform: translate3d(-50%, 0, 0);
165
+ }
166
+
167
+ &:hover::after {
168
+ transform: translate3d(-50%, 0, 0);
169
+ }
175
170
  }
176
171
 
177
- &:hover::after {
178
- transform: translate3d(calc(-100% + 16px), 0, 0);
179
- }
180
- }
172
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
173
+ &::after {
174
+ transform: translate3d(calc(-100% + 16px), -10px, 0);
175
+ top: 100%;
176
+ }
181
177
 
182
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
183
- &::after {
184
- transform: translate3d(calc(0% + -16px), -10px, 0);
185
- top: 100%;
178
+ &:hover::after {
179
+ transform: translate3d(calc(-100% + 16px), 0, 0);
180
+ }
186
181
  }
187
182
 
188
- &:hover::after {
189
- transform: translate3d(calc(0% + -16px), 0, 0);
190
- }
191
- }
192
-
193
- // Left position tooltips
194
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
195
- &::before,
196
- &::after {
197
- inset: auto auto auto 100%;
198
- left: auto; // Remove any left positioning
199
- right: 100%; // Position to the left of the element
200
- top: 50%;
201
- transform: translate3d(10px, -50%, 0);
202
- }
183
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
184
+ &::after {
185
+ transform: translate3d(calc(0% + -16px), -10px, 0);
186
+ top: 100%;
187
+ }
203
188
 
204
- &::before {
205
- border-top: 9px solid transparent;
206
- border-bottom: 9px solid transparent;
207
- border-left: 6px solid var(--tooltip-bg);
208
- height: 0;
209
- width: 0;
210
- margin-right: 5px;
211
- margin-bottom: 0;
212
- z-index: 999;
189
+ &:hover::after {
190
+ transform: translate3d(calc(0% + -16px), 0, 0);
191
+ }
213
192
  }
214
193
 
215
- &::after {
216
- margin-right: 11px;
194
+ // Left position tooltips
195
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
196
+ &::before,
197
+ &::after {
198
+ inset: auto auto auto 100%;
199
+ left: auto; // Remove any left positioning
200
+ right: 100%; // Position to the left of the element
201
+ top: 50%;
202
+ transform: translate3d(10px, -50%, 0);
203
+ }
204
+
205
+ &::before {
206
+ border-top: 9px solid transparent;
207
+ border-bottom: 9px solid transparent;
208
+ border-left: 6px solid var(--tooltip-bg);
209
+ height: 0;
210
+ width: 0;
211
+ margin-right: 5px;
212
+ margin-bottom: 0;
213
+ z-index: 999;
214
+ }
215
+
216
+ &::after {
217
+ margin-right: 11px;
218
+ }
219
+
220
+ &:hover::before,
221
+ &:hover::after {
222
+ transform: translate3d(0, -50%, 0);
223
+ }
217
224
  }
218
225
 
219
- &:hover::before,
220
- &:hover::after {
221
- transform: translate3d(0, -50%, 0);
222
- }
223
- }
224
-
225
- // Right position tooltips
226
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
227
- &::before,
228
- &::after {
229
- bottom: auto;
230
- left: 100%;
231
- top: 50%;
232
- transform: translate3d(-10px, -50%, 0);
226
+ // Right position tooltips
227
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
228
+ &::before,
229
+ &::after {
230
+ bottom: auto;
231
+ left: 100%;
232
+ top: 50%;
233
+ transform: translate3d(-10px, -50%, 0);
234
+ }
235
+
236
+ &::before {
237
+ border-top: 9px solid transparent;
238
+ border-bottom: 9px solid transparent;
239
+ border-right: 6px solid var(--tooltip-bg);
240
+ height: 0;
241
+ width: 0;
242
+ margin-bottom: 0;
243
+ margin-left: 5px;
244
+ z-index: 999;
245
+ }
246
+
247
+ &::after {
248
+ margin-left: 11px;
249
+ }
250
+
251
+ &:hover::before,
252
+ &:hover::after {
253
+ transform: translate3d(0, -50%, 0);
254
+ }
233
255
  }
234
256
 
235
- &::before {
236
- border-top: 9px solid transparent;
237
- border-bottom: 9px solid transparent;
238
- border-right: 6px solid var(--tooltip-bg);
239
- height: 0;
240
- width: 0;
241
- margin-bottom: 0;
242
- margin-left: 5px;
243
- z-index: 999;
257
+ // Tooltip sizes
258
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
259
+ white-space: initial;
260
+ width: var(--tooltip-small-width);
244
261
  }
245
262
 
246
- &::after {
247
- margin-left: 11px;
263
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
264
+ white-space: initial;
265
+ width: var(--tooltip-medium-width);
248
266
  }
249
267
 
250
- &:hover::before,
251
- &:hover::after {
252
- transform: translate3d(0, -50%, 0);
268
+ #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
269
+ white-space: initial;
270
+ width: var(--tooltip-large-width);
253
271
  }
254
- }
255
-
256
- // Tooltip sizes
257
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
258
- white-space: initial;
259
- width: var(--tooltip-small-width);
260
- }
261
-
262
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
263
- white-space: initial;
264
- width: var(--tooltip-medium-width);
265
- }
266
-
267
- #{config-flags.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
268
- white-space: initial;
269
- width: var(--tooltip-large-width);
270
- }
272
+ } // end @layer components
271
273
  }
package/src/styles/functions/_colors.scss CHANGED
@@ -83,7 +83,10 @@
83
83
  $b: "";
84
84
  $a: "";
85
85
  $has-alpha: $length == 5 or $length == 9;
86
- $component-size: if($length < 6, 1, 2);
86
+ $component-size: 2;
87
+ @if $length < 6 {
88
+ $component-size: 1;
89
+ }
87
90
 
88
91
  // Validate and extract color components
89
92
  @for $i from 2 through $length {
@@ -255,9 +258,23 @@ $color-cache: (); // to store the generated colors
255
258
  $green: math.div(color.channel($color, "green"), 255);
256
259
  $blue: math.div(color.channel($color, "blue"), 255);
257
260
 
258
- $red: if($red <= 0.0393, math.div($red, 12.92), math.pow((math.div($red + 0.055, 1.055)), 2.4));
259
- $green: if($green <= 0.0393, math.div($green, 12.92), math.pow((math.div($green + 0.055, 1.055)), 2.4));
260
- $blue: if($blue <= 0.0393, math.div($blue, 12.92), math.pow((math.div($blue + 0.055, 1.055)), 2.4));
261
+ @if $red <= 0.0393 {
262
+ $red: math.div($red, 12.92);
263
+ } @else {
264
+ $red: math.pow(math.div($red + 0.055, 1.055), 2.4);
265
+ }
266
+
267
+ @if $green <= 0.0393 {
268
+ $green: math.div($green, 12.92);
269
+ } @else {
270
+ $green: math.pow(math.div($green + 0.055, 1.055), 2.4);
271
+ }
272
+
273
+ @if $blue <= 0.0393 {
274
+ $blue: math.div($blue, 12.92);
275
+ } @else {
276
+ $blue: math.pow(math.div($blue + 0.055, 1.055), 2.4);
277
+ }
261
278
 
262
279
  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
263
280
  }
@@ -274,7 +291,11 @@ $color-cache: (); // to store the generated colors
274
291
  @if map.has-key(config-theme.$light-theme, "text-inverted") {
275
292
  $light-color: map.get(config-theme.$light-theme, "text-inverted");
276
293
  }
277
- @return if($luminance > 0.55, $dark-color, $light-color);
294
+ @if $luminance > 0.55 {
295
+ @return $dark-color;
296
+ } @else {
297
+ @return $light-color;
298
+ }
278
299
  }
279
300
 
280
301
  @function is-valid-shade($shade) {
package/src/styles/functions/_math.scss CHANGED
@@ -32,8 +32,12 @@
32
32
  "9": 9,
33
33
  );
34
34
  $number-chars-end: 0;
35
+ $start-index: 1;
36
+ @if $minus {
37
+ $start-index: 2;
38
+ }
35
39
 
36
- @for $i from if($minus, 2, 1) through string.length($val) {
40
+ @for $i from $start-index through string.length($val) {
37
41
  $character: string.slice($val, $i, $i);
38
42
 
39
43
  @if list.index(map.keys($numbers), $character) or $character == "." {
@@ -54,19 +58,31 @@
54
58
  // Look for valid unit
55
59
  @each $unit in config-constants.$units {
56
60
  @if $rest == $unit {
57
- @return if($minus, -$result, $result) + string.unquote($unit);
61
+ @if $minus {
62
+ @return (-1 * $result) + string.unquote($unit);
63
+ } @else {
64
+ @return $result + string.unquote($unit);
65
+ }
58
66
  }
59
67
  }
60
68
 
61
69
  // No valid unit - return null for non-numeric strings
62
- @if $i == if($minus, 2, 1) {
70
+ @if $i == $start-index {
63
71
  @return null; // First char is non-numeric
64
72
  }
65
73
 
66
74
  // Otherwise return just the parsed number
67
- @return if($minus, -$result, $result);
75
+ @if $minus {
76
+ @return -1 * $result;
77
+ } @else {
78
+ @return $result;
79
+ }
68
80
  }
69
81
  }
70
82
 
71
- @return if($minus, -$result, $result);
83
+ @if $minus {
84
+ @return -1 * $result;
85
+ } @else {
86
+ @return $result;
87
+ }
72
88
  }
package/src/styles/layouts/_container.scss CHANGED
@@ -11,10 +11,8 @@
11
11
  }
12
12
 
13
13
  @mixin container-padding($padding) {
14
- & {
15
- padding-top: $padding;
16
- padding-bottom: $padding;
17
- }
14
+ padding-top: $padding;
15
+ padding-bottom: $padding;
18
16
  }
19
17
 
20
18
  // Responsive container mixin
package/src/styles/utilities/_animations.scss CHANGED
@@ -39,12 +39,24 @@ $generated-keyframes: ();
39
39
  $iteration: map.get($props, "iteration");
40
40
 
41
41
  // Handle units
42
- $x-unit: if($x, fn-units.safe-unit-name(math.unit($x)), "-");
43
- $y-unit: if($y, fn-units.safe-unit-name(math.unit($y)), "-");
42
+ $x-unit: "-";
43
+ @if $x {
44
+ $x-unit: fn-units.safe-unit-name(math.unit($x));
45
+ }
46
+ $y-unit: "-";
47
+ @if $y {
48
+ $y-unit: fn-units.safe-unit-name(math.unit($y));
49
+ }
44
50
 
45
51
  // Clean values (remove units)
46
- $clean-x: if($x, fn-units.strip-unit($x), 0);
47
- $clean-y: if($y, fn-units.strip-unit($y), 0);
52
+ $clean-x: 0;
53
+ @if $x {
54
+ $clean-x: fn-units.strip-unit($x);
55
+ }
56
+ $clean-y: 0;
57
+ @if $y {
58
+ $clean-y: fn-units.strip-unit($y);
59
+ }
48
60
 
49
61
  $animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
50
62
 
package/src/styles/utilities/_backdrop-filters.scss CHANGED
@@ -216,7 +216,10 @@ $backdrop-filter-presets: (
216
216
 
217
217
  // Generate utility classes
218
218
  @mixin generate-backdrop-filter-utilities($breakpoint: null) {
219
- $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
219
+ $suffix: "";
220
+ @if $breakpoint {
221
+ $suffix: "\\@#{$breakpoint}";
222
+ }
220
223
 
221
224
  // Base layer class
222
225
  #{config-flags.$parent-selector} .backdrop-layer#{$suffix} {
package/src/styles/utilities/_colors.scss CHANGED
@@ -18,7 +18,10 @@
18
18
  color: color-fn.find-text-color($color);
19
19
 
20
20
  @media (prefers-contrast: more) {
21
- $adjusted: if(color.lightness($color) > 50%, color.adjust($color, $lightness: -10%), color.adjust($color, $lightness: 10%));
21
+ $adjusted: color.adjust($color, $lightness: 10%);
22
+ @if color.lightness($color) > 50% {
23
+ $adjusted: color.adjust($color, $lightness: -10%);
24
+ }
22
25
 
23
26
  background-color: $adjusted;
24
27
  color: color-fn.find-text-color($adjusted);
package/src/styles/utilities/_typography.scss CHANGED
@@ -271,7 +271,10 @@
271
271
  }
272
272
 
273
273
  @mixin responsive-config-typo($breakpoint: null) {
274
- $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
274
+ $suffix: "";
275
+ @if $breakpoint {
276
+ $suffix: "\\@#{$breakpoint}";
277
+ }
275
278
 
276
279
  @each $size, $val in config-typo.$font-sizes {
277
280
  #{config-flags.$parent-selector} .text-#{$size}#{$suffix} {
package/src/styles/utilities/_z-index.scss CHANGED
@@ -66,7 +66,10 @@ $z-index-levels: (
66
66
  // Generate z-index utility classes
67
67
  // @param {String} $breakpoint - Optional breakpoint name for responsive variants
68
68
  @mixin z-index-utilities($breakpoint: null) {
69
- $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
69
+ $suffix: "";
70
+ @if $breakpoint {
71
+ $suffix: "\\@#{$breakpoint}";
72
+ }
70
73
 
71
74
  // Standard numbered z-index utilities
72
75
  @each $key, $value in $z-indexes {