@kungal/ui-tokens 1.8.0 → 1.8.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.
- package/CHANGELOG.md +22 -0
- package/package.json +1 -1
- package/src/palette.generated.css +1 -1
- package/src/tokens.css +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @kungal/ui-tokens
|
|
2
2
|
|
|
3
|
+
## 1.8.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- c2f4bda: feat(tokens): add `--kun-surface-opacity` for themeable surface transparency (glass)
|
|
8
|
+
|
|
9
|
+
The raised surface (`content1` — cards, popovers, dropdowns, inputs, modal,
|
|
10
|
+
drawer) now resolves its alpha through `--kun-surface-opacity`, default `1`
|
|
11
|
+
(fully opaque, no visual change). A site with a background image (e.g. a galgame
|
|
12
|
+
page) can make every surface see-through at once, with no component changes:
|
|
13
|
+
|
|
14
|
+
```css
|
|
15
|
+
:root {
|
|
16
|
+
--kun-surface-opacity: 0.7;
|
|
17
|
+
--kun-background-blur: 12px;
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Components don't ship a `backdrop-blur` on every surface, so set
|
|
22
|
+
`--kun-background-blur` too if you want true frosted glass rather than plain
|
|
23
|
+
translucency. Default sites are unaffected.
|
|
24
|
+
|
|
3
25
|
## 1.8.0
|
|
4
26
|
|
|
5
27
|
### 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));
|
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.
|