@nexub/themes 0.0.2 → 1.0.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.
- package/package.json +3 -2
- package/src/glass.css +44 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/themes",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "CSS theme files for Nexub Design System — light, dark, and brand themes (Leap, Bookub, Payub, Founderub) as importable CSS.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
|
|
@@ -29,12 +29,13 @@
|
|
|
29
29
|
"./base": "./src/base.css",
|
|
30
30
|
"./light": "./src/light.css",
|
|
31
31
|
"./dark": "./src/dark.css",
|
|
32
|
+
"./glass": "./src/glass.css",
|
|
32
33
|
"./leap": "./src/leap.css",
|
|
33
34
|
"./bookub": "./src/bookub.css",
|
|
34
35
|
"./payub": "./src/payub.css",
|
|
35
36
|
"./founderub": "./src/founderub.css"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@nexub/tokens": "0.0
|
|
39
|
+
"@nexub/tokens": "1.0.0"
|
|
39
40
|
}
|
|
40
41
|
}
|
package/src/glass.css
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* @nexub/themes — glass.css
|
|
2
|
+
Liquid-glass MATERIAL layer. Orthogonal to light/dark: set data-material="glass"
|
|
3
|
+
on a surface (components do this via surface="glass") IN ADDITION to the normal
|
|
4
|
+
theme. Import once, after base/light/dark. Selectors mirror dark.css so the
|
|
5
|
+
dark palette resolves both for an explicit [data-theme='dark'] and for the
|
|
6
|
+
prefers-color-scheme auto case. */
|
|
7
|
+
|
|
8
|
+
[data-material='glass'] {
|
|
9
|
+
--glass-bg: rgba(255, 255, 255, 0.55);
|
|
10
|
+
--glass-border: rgba(255, 255, 255, 0.35);
|
|
11
|
+
--glass-highlight: rgba(255, 255, 255, 0.65);
|
|
12
|
+
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
13
|
+
--glass-blur: 16px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* glass-on-dark — explicit theme */
|
|
17
|
+
[data-theme='dark'] [data-material='glass'],
|
|
18
|
+
[data-theme='dark'][data-material='glass'] {
|
|
19
|
+
--glass-bg: rgba(20, 20, 24, 0.55);
|
|
20
|
+
--glass-border: rgba(255, 255, 255, 0.12);
|
|
21
|
+
--glass-highlight: rgba(255, 255, 255, 0.10);
|
|
22
|
+
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* glass-on-dark — auto (no explicit theme + OS dark) */
|
|
26
|
+
@media (prefers-color-scheme: dark) {
|
|
27
|
+
:root:not([data-theme]) [data-material='glass'],
|
|
28
|
+
:root:not([data-theme])[data-material='glass'] {
|
|
29
|
+
--glass-bg: rgba(20, 20, 24, 0.55);
|
|
30
|
+
--glass-border: rgba(255, 255, 255, 0.12);
|
|
31
|
+
--glass-highlight: rgba(255, 255, 255, 0.10);
|
|
32
|
+
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* a11y: drop translucency + blur when the user opts out — fall back to the
|
|
37
|
+
solid surface tokens Card/Dialog/etc. already use. Load-bearing, not polish. */
|
|
38
|
+
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
|
|
39
|
+
[data-material='glass'] {
|
|
40
|
+
--glass-bg: var(--color-bg-default);
|
|
41
|
+
--glass-border: var(--color-border-default);
|
|
42
|
+
--glass-blur: 0px;
|
|
43
|
+
}
|
|
44
|
+
}
|