@kungal/ui-tokens 1.8.0 → 1.8.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.
- package/CHANGELOG.md +39 -0
- package/package.json +1 -1
- package/src/palette.generated.css +2 -2
- package/src/tokens.css +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,44 @@
|
|
|
1
1
|
# @kungal/ui-tokens
|
|
2
2
|
|
|
3
|
+
## 1.8.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 117063e: fix(tokens,vue): give surfaces breathing room + refine KunCard hover
|
|
8
|
+
|
|
9
|
+
- The light page background is a touch deeper (`#f5f5f7` → `#eeeef1`) so white
|
|
10
|
+
cards/surfaces pop more (≈17 vs ≈10 units) and there's room for interaction
|
|
11
|
+
states. Dark mode is unchanged (it already had ample headroom).
|
|
12
|
+
- KunCard hover feedback now applies only to interactive cards (`href` /
|
|
13
|
+
`clickable`) or an explicit `isHoverable`; a plain static card no longer reacts.
|
|
14
|
+
- Hover is a faint `foreground` state layer (≈3%, via `::after`) — darkens
|
|
15
|
+
slightly in light, lightens in dark — and stays clearly brighter than the page
|
|
16
|
+
(no surface-colour swap, no shadow change).
|
|
17
|
+
- KunNumberInput stepper buttons use `hover:bg-foreground/8` (a normal control
|
|
18
|
+
hover) instead of the absolute `bg-default-100`.
|
|
19
|
+
|
|
20
|
+
## 1.8.1
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- c2f4bda: feat(tokens): add `--kun-surface-opacity` for themeable surface transparency (glass)
|
|
25
|
+
|
|
26
|
+
The raised surface (`content1` — cards, popovers, dropdowns, inputs, modal,
|
|
27
|
+
drawer) now resolves its alpha through `--kun-surface-opacity`, default `1`
|
|
28
|
+
(fully opaque, no visual change). A site with a background image (e.g. a galgame
|
|
29
|
+
page) can make every surface see-through at once, with no component changes:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
:root {
|
|
33
|
+
--kun-surface-opacity: 0.7;
|
|
34
|
+
--kun-background-blur: 12px;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Components don't ship a `backdrop-blur` on every surface, so set
|
|
39
|
+
`--kun-background-blur` too if you want true frosted glass rather than plain
|
|
40
|
+
translucency. Default sites are unaffected.
|
|
41
|
+
|
|
3
42
|
## 1.8.0
|
|
4
43
|
|
|
5
44
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
@theme {
|
|
12
12
|
--color-background: oklch(var(--background) / var(--kun-global-opacity));
|
|
13
13
|
--color-foreground: oklch(var(--foreground));
|
|
14
|
-
--color-content1: oklch(var(--content1));
|
|
14
|
+
--color-content1: oklch(var(--content1) / var(--kun-surface-opacity));
|
|
15
15
|
--color-content2: oklch(var(--content2));
|
|
16
16
|
--color-content3: oklch(var(--content3));
|
|
17
17
|
--color-content4: oklch(var(--content4));
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
|
|
118
118
|
@layer base {
|
|
119
119
|
:root {
|
|
120
|
-
--background: 0.
|
|
120
|
+
--background: 0.95 0.004 286.32;
|
|
121
121
|
--foreground: 0.2057 0.0132 233.66;
|
|
122
122
|
--content1: 1 0 0;
|
|
123
123
|
--content2: 0.9683 0.0014 286.37;
|
package/src/tokens.css
CHANGED
|
@@ -31,6 +31,15 @@
|
|
|
31
31
|
* default-100). Lower = more see-through. Apps may override in :root. */
|
|
32
32
|
--kun-global-opacity: 0.7;
|
|
33
33
|
|
|
34
|
+
/* Opacity of the RAISED surface (`content1`) — cards, popovers, dropdowns,
|
|
35
|
+
* inputs, modal, drawer. Default 1 = fully opaque (the clean elevation look).
|
|
36
|
+
* A site with a background image (e.g. a galgame page) can make every surface
|
|
37
|
+
* frosted at once by lowering this and adding a blur, with NO component changes:
|
|
38
|
+
* :root { --kun-surface-opacity: 0.7; --kun-background-blur: 12px; }
|
|
39
|
+
* (Components don't ship a backdrop-blur on every surface, so set the blur too
|
|
40
|
+
* if you want true frosted glass rather than plain see-through.) */
|
|
41
|
+
--kun-surface-opacity: 1;
|
|
42
|
+
|
|
34
43
|
/* Backdrop blur strength for glass surfaces (Card / Modal / sticky
|
|
35
44
|
* topbar). 0 = no blur. Referenced as
|
|
36
45
|
* `backdrop-blur-[var(--kun-background-blur)]` by those components.
|