@marianmeres/stuic 3.75.0 → 3.76.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.
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
|
|
143
143
|
data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
|
|
144
144
|
data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
|
|
145
|
+
data-x={!unstyled && !!_xProps ? "true" : undefined}
|
|
145
146
|
use:tooltip={_tooltipConfig}
|
|
146
147
|
{...rest as HTMLAnchorAttributes}
|
|
147
148
|
>
|
|
@@ -175,6 +176,7 @@
|
|
|
175
176
|
data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
|
|
176
177
|
data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
|
|
177
178
|
data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
|
|
179
|
+
data-x={!unstyled && !!_xProps ? "true" : undefined}
|
|
178
180
|
use:tooltip={_tooltipConfig}
|
|
179
181
|
{...rest}
|
|
180
182
|
>
|
|
@@ -42,6 +42,14 @@
|
|
|
42
42
|
/* Raised (3D push) effect */
|
|
43
43
|
--stuic-button-raised-offset: 2px;
|
|
44
44
|
--stuic-button-raised-color: rgb(0 0 0 / 0.8);
|
|
45
|
+
|
|
46
|
+
/* Neutral overlay hover for "pure rounded X" (ghost + x + roundedFull).
|
|
47
|
+
Intentionally non-themed — sits on top of any background color. */
|
|
48
|
+
--stuic-button-x-bg-hover: rgb(0 0 0 / 0.1);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:root.dark {
|
|
52
|
+
--stuic-button-x-bg-hover: rgb(255 255 255 / 0.05);
|
|
45
53
|
}
|
|
46
54
|
|
|
47
55
|
@layer components {
|
|
@@ -416,4 +424,14 @@
|
|
|
416
424
|
.stuic-button[data-icon-button] {
|
|
417
425
|
--stuic-button-radius: 9999px;
|
|
418
426
|
}
|
|
427
|
+
|
|
428
|
+
/* ============================================================================
|
|
429
|
+
PURE ROUNDED X
|
|
430
|
+
Ghost variant + x icon + fully rounded — replace the intent-tinted ghost
|
|
431
|
+
hover with a neutral overlay so the button reads on any background.
|
|
432
|
+
============================================================================ */
|
|
433
|
+
.stuic-button[data-variant="ghost"][data-x][data-rounded-full] {
|
|
434
|
+
--_bg-hover: var(--stuic-button-x-bg-hover);
|
|
435
|
+
--_bg-active: var(--stuic-button-x-bg-hover);
|
|
436
|
+
}
|
|
419
437
|
}
|
|
@@ -8,11 +8,6 @@
|
|
|
8
8
|
--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
|
|
9
9
|
--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
|
|
10
10
|
--stuic-dismissible-x-padding: calc(var(--spacing) * 1);
|
|
11
|
-
--stuic-dismissible-x-bg-hover: rgb(0 0 0 / 0.1);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:root.dark {
|
|
15
|
-
--stuic-dismissible-x-bg-hover: rgb(255 255 255 / 0.05);
|
|
16
11
|
}
|
|
17
12
|
|
|
18
13
|
@layer components {
|
|
@@ -73,8 +68,6 @@
|
|
|
73
68
|
/* Dismiss button inherits message text color */
|
|
74
69
|
.stuic-dismissible-message > .dismiss .stuic-button {
|
|
75
70
|
color: var(--_text);
|
|
76
|
-
--_bg-hover: var(--stuic-dismissible-x-bg-hover);
|
|
77
|
-
--_bg-active: var(--stuic-dismissible-x-bg-hover);
|
|
78
71
|
}
|
|
79
72
|
|
|
80
73
|
/* =============================================================================
|