@asteby/metacore-theme 2.26.0 → 2.27.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/README.md +18 -0
- package/package.json +1 -1
- package/styles/glass.css +16 -10
package/README.md
CHANGED
|
@@ -94,6 +94,24 @@ behaves exactly as before.
|
|
|
94
94
|
}
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
+
### Brand backdrop
|
|
98
|
+
|
|
99
|
+
The backdrop is three radial blobs over a base color. A brand changes the hues
|
|
100
|
+
by overriding the variables only — never `background-image` — so pack updates
|
|
101
|
+
keep applying (import after `glass.css`):
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
[data-ui-theme='glass'] {
|
|
105
|
+
--glass-gradient-1: radial-gradient(48rem 34rem at 10% -8%, oklch(0.42 0.1 255 / 0.55), transparent 70%);
|
|
106
|
+
--glass-gradient-2: radial-gradient(40rem 30rem at 105% 20%, oklch(0.5 0.09 250 / 0.4), transparent 68%);
|
|
107
|
+
--glass-gradient-3: radial-gradient(38rem 28rem at 60% 115%, oklch(0.6 0.07 235 / 0.35), transparent 70%);
|
|
108
|
+
}
|
|
109
|
+
.dark[data-ui-theme='glass'] { /* same three variables for dark */ }
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
`--glass-backdrop` sets the base color under the blobs. Set a gradient to
|
|
113
|
+
`none` to drop it.
|
|
114
|
+
|
|
97
115
|
An inset with no sidebar sibling (chat-like screens) floats on desktop with
|
|
98
116
|
`<SidebarInset data-glass-float>`.
|
|
99
117
|
|
package/package.json
CHANGED
package/styles/glass.css
CHANGED
|
@@ -81,11 +81,15 @@
|
|
|
81
81
|
--ui-surface-blur: var(--glass-blur);
|
|
82
82
|
--ui-card-alpha: 0.5;
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
/* Backdrop: brand packs override these three blobs (or --glass-backdrop)
|
|
85
|
+
instead of rewriting background-image. */
|
|
86
|
+
--glass-gradient-1: radial-gradient(48rem 34rem at 10% -8%, oklch(0.8 0.11 250 / 0.9), transparent 70%);
|
|
87
|
+
--glass-gradient-2: radial-gradient(40rem 30rem at 105% 20%, oklch(0.78 0.12 295 / 0.75), transparent 68%);
|
|
88
|
+
--glass-gradient-3: radial-gradient(38rem 28rem at 60% 115%, oklch(0.9 0.12 90 / 0.7), transparent 70%);
|
|
89
|
+
--glass-backdrop: oklch(0.93 0.035 270);
|
|
90
|
+
|
|
91
|
+
background-color: var(--glass-backdrop);
|
|
92
|
+
background-image: var(--glass-gradient-1), var(--glass-gradient-2), var(--glass-gradient-3);
|
|
89
93
|
background-attachment: fixed;
|
|
90
94
|
}
|
|
91
95
|
|
|
@@ -126,11 +130,13 @@
|
|
|
126
130
|
--glass-row-hover: oklch(1 0 0 / 0.05);
|
|
127
131
|
--glass-thead: oklch(0.25 0.03 255 / 0.7);
|
|
128
132
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
133
|
+
--glass-gradient-1: radial-gradient(42rem 28rem at 8% -8%, oklch(0.45 0.16 250 / 0.7), transparent 70%);
|
|
134
|
+
--glass-gradient-2: radial-gradient(32rem 24rem at 100% 0%, oklch(0.4 0.12 200 / 0.55), transparent 68%);
|
|
135
|
+
--glass-gradient-3: radial-gradient(28rem 22rem at 70% 100%, oklch(0.42 0.14 300 / 0.45), transparent 70%);
|
|
136
|
+
--glass-backdrop: oklch(0.16 0.03 260);
|
|
137
|
+
|
|
138
|
+
background-color: var(--glass-backdrop);
|
|
139
|
+
background-image: var(--glass-gradient-1), var(--glass-gradient-2), var(--glass-gradient-3);
|
|
134
140
|
background-attachment: fixed;
|
|
135
141
|
}
|
|
136
142
|
|