@xingxingmofashu/ui 0.1.0 → 0.1.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/README.md +111 -69
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,48 +1,59 @@
|
|
|
1
1
|
# @xingxingmofashu/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[![npm version][npm-version-src]][npm-version-href]
|
|
4
|
+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
5
|
+
[![License][license-src]][license-href]
|
|
6
|
+
[![React][react-src]][react-href]
|
|
7
|
+
[![Tailwind CSS][tailwind-src]][tailwind-href]
|
|
8
|
+
|
|
9
|
+
Liquid Glass UI is a collection of accessible, typed [React](https://react.dev)
|
|
10
|
+
components built on [Base UI](https://base-ui.com),
|
|
11
|
+
[Tailwind CSS](https://tailwindcss.com), and
|
|
12
|
+
[Tailwind Variants](https://www.tailwind-variants.org). Glass surfaces, rim
|
|
13
|
+
highlights, and inner shadows are drawn entirely with CSS.
|
|
4
14
|
|
|
5
15
|
The package ships fifteen components: Accordion, Alert Dialog, Button, Card,
|
|
6
16
|
Checkbox, Dialog, Drawer, Input, Popover, Scroll Area, Slider, Switch, Toast,
|
|
7
|
-
Toggle, and Toggle Group.
|
|
8
|
-
drawn entirely with CSS. The interactive components are built on Base UI and do
|
|
9
|
-
not add a custom rendering engine; `Card` is a native layout primitive.
|
|
17
|
+
Toggle, and Toggle Group.
|
|
10
18
|
|
|
11
|
-
|
|
19
|
+
> [!NOTE]
|
|
20
|
+
> Requires React 19, React DOM 19, Tailwind CSS 4, Node.js 22+, and an
|
|
21
|
+
> ESM-capable bundler. `Card` is server-safe; the interactive components are
|
|
22
|
+
> client components.
|
|
12
23
|
|
|
13
|
-
|
|
14
|
-
- React and React DOM 19.
|
|
15
|
-
- Tailwind CSS 4.
|
|
16
|
-
- An ESM-capable bundler. The package publishes ES modules only.
|
|
24
|
+
## Documentation
|
|
17
25
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
`ToggleGroup` are client components. `Card` is server-safe and can be rendered
|
|
21
|
-
from a React Server Component.
|
|
26
|
+
- [English documentation](https://xingxingmofashu.github.io/ui/docs/en/get-started)
|
|
27
|
+
- [简体中文文档](https://xingxingmofashu.github.io/ui/docs/zh/get-started)
|
|
22
28
|
|
|
23
|
-
##
|
|
29
|
+
## Installation
|
|
24
30
|
|
|
25
|
-
```bash
|
|
31
|
+
```bash [pnpm]
|
|
26
32
|
pnpm add @xingxingmofashu/ui
|
|
27
33
|
```
|
|
28
34
|
|
|
29
|
-
|
|
35
|
+
```bash [yarn]
|
|
36
|
+
yarn add @xingxingmofashu/ui
|
|
37
|
+
```
|
|
30
38
|
|
|
31
|
-
|
|
39
|
+
```bash [npm]
|
|
40
|
+
npm install @xingxingmofashu/ui
|
|
41
|
+
```
|
|
32
42
|
|
|
33
|
-
|
|
43
|
+
```bash [bun]
|
|
44
|
+
bun add @xingxingmofashu/ui
|
|
45
|
+
```
|
|
34
46
|
|
|
35
|
-
|
|
47
|
+
Add the package styles to your Tailwind CSS entry:
|
|
48
|
+
|
|
49
|
+
```css [app.css]
|
|
36
50
|
@import "tailwindcss";
|
|
37
51
|
@import "@xingxingmofashu/ui";
|
|
38
|
-
|
|
39
|
-
/* Adjust this path to point at the package inside node_modules. */
|
|
40
|
-
@source "../node_modules/@xingxingmofashu/ui/dist";
|
|
41
52
|
```
|
|
42
53
|
|
|
43
|
-
The package root resolves to `dist/index.css` through its `style` export.
|
|
44
|
-
|
|
45
|
-
|
|
54
|
+
The package root resolves to `dist/index.css` through its `style` export. The
|
|
55
|
+
stylesheet includes its own Tailwind source scan, so component utilities are
|
|
56
|
+
generated without an extra `@source` directive.
|
|
46
57
|
|
|
47
58
|
## Usage
|
|
48
59
|
|
|
@@ -59,19 +70,47 @@ export function Example() {
|
|
|
59
70
|
}
|
|
60
71
|
```
|
|
61
72
|
|
|
62
|
-
Deep imports
|
|
73
|
+
### Deep imports
|
|
74
|
+
|
|
75
|
+
Import a single component or theme recipe without going through the package
|
|
76
|
+
root:
|
|
63
77
|
|
|
64
78
|
```tsx
|
|
65
79
|
import { Button } from "@xingxingmofashu/ui/components/button";
|
|
66
80
|
import buttonTheme from "@xingxingmofashu/ui/theme/button";
|
|
67
81
|
```
|
|
68
82
|
|
|
69
|
-
|
|
70
|
-
|
|
83
|
+
Toast hooks live under `@xingxingmofashu/ui/composables`.
|
|
84
|
+
|
|
85
|
+
## Components
|
|
86
|
+
|
|
87
|
+
### Element
|
|
88
|
+
|
|
89
|
+
- Accordion
|
|
90
|
+
- Button
|
|
91
|
+
- Card
|
|
92
|
+
- Scroll Area
|
|
93
|
+
- Toggle
|
|
94
|
+
- Toggle Group
|
|
95
|
+
|
|
96
|
+
### Form
|
|
97
|
+
|
|
98
|
+
- Checkbox
|
|
99
|
+
- Input
|
|
100
|
+
- Slider
|
|
101
|
+
- Switch
|
|
102
|
+
|
|
103
|
+
### Overlay
|
|
104
|
+
|
|
105
|
+
- Alert Dialog
|
|
106
|
+
- Dialog
|
|
107
|
+
- Drawer
|
|
108
|
+
- Popover
|
|
109
|
+
- Toast
|
|
71
110
|
|
|
72
111
|
## Theming
|
|
73
112
|
|
|
74
|
-
Light and dark
|
|
113
|
+
Light and dark tokens are selected by `.light` / `.dark`, or by
|
|
75
114
|
`data-theme="light"` / `data-theme="dark"`:
|
|
76
115
|
|
|
77
116
|
```html
|
|
@@ -82,38 +121,14 @@ Light and dark values are selected by `.light` / `.dark`, or by
|
|
|
82
121
|
```
|
|
83
122
|
|
|
84
123
|
A nested `.light` / `[data-theme="light"]` subtree can switch back to light
|
|
85
|
-
tokens. Shared colors and glass parameters live in the `--ui-*` tokens
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
`Button`, `Card`, `Checkbox`, `Dialog`, `Drawer`, `Input`, `Popover`,
|
|
91
|
-
`ScrollArea`, `Slider`, `Switch`, `Toggle`, `ToggleGroup`, `ToastProvider`,
|
|
92
|
-
`Accordion`, and `AlertDialog` inherit the host font and do not force a font
|
|
93
|
-
family.
|
|
94
|
-
|
|
95
|
-
The visual material relies on modern CSS: `backdrop-filter`, `color-mix`,
|
|
96
|
-
container units, individual `translate` / `scale` properties, and `:has`.
|
|
97
|
-
Use a current evergreen browser.
|
|
98
|
-
|
|
99
|
-
## Components
|
|
100
|
-
|
|
101
|
-
- `Accordion`
|
|
102
|
-
- `AlertDialog`
|
|
103
|
-
- `Button`
|
|
104
|
-
- `Card`
|
|
105
|
-
- `Checkbox`
|
|
106
|
-
- `Dialog`
|
|
107
|
-
- `Drawer`
|
|
108
|
-
- `Input`
|
|
109
|
-
- `Popover`
|
|
110
|
-
- `ScrollArea`
|
|
111
|
-
- `Slider`
|
|
112
|
-
- `Switch`
|
|
113
|
-
- `ToastProvider`
|
|
114
|
-
- `Toggle`
|
|
115
|
-
- `ToggleGroup`
|
|
124
|
+
tokens. Shared colors and glass parameters live in the `--ui-*` tokens; override
|
|
125
|
+
them in your own theme layer. Tailwind aliases use the `ui-` prefix
|
|
126
|
+
(`text-ui-ink`, `outline-ui-glass-focus`, and so on) to avoid colliding with
|
|
127
|
+
host tokens.
|
|
116
128
|
|
|
129
|
+
The components inherit the host font. The visual material relies on modern CSS:
|
|
130
|
+
`backdrop-filter`, `color-mix`, container units, individual `translate` /
|
|
131
|
+
`scale` properties, and `:has`. Use a current evergreen browser.
|
|
117
132
|
|
|
118
133
|
## Development
|
|
119
134
|
|
|
@@ -121,19 +136,46 @@ Use a current evergreen browser.
|
|
|
121
136
|
pnpm install
|
|
122
137
|
pnpm build # build dist with unbuild
|
|
123
138
|
pnpm lint # lint with oxlint
|
|
124
|
-
pnpm lint:fix # apply oxlint's safe fixes
|
|
125
139
|
pnpm test # run the Vitest suite
|
|
126
140
|
pnpm typecheck # typecheck the package
|
|
127
|
-
pnpm docs:dev #
|
|
128
|
-
pnpm
|
|
129
|
-
pnpm playground:dev # start the component playground on port 3002
|
|
141
|
+
pnpm docs:dev # docs site on http://localhost:3001
|
|
142
|
+
pnpm playground:dev # component playground on http://localhost:3002
|
|
130
143
|
```
|
|
131
144
|
|
|
132
|
-
The documentation site lives in `docs/` and
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
145
|
+
The documentation site lives in `docs/` and the playground lives in
|
|
146
|
+
`playground/`; both import the package from the workspace.
|
|
147
|
+
|
|
148
|
+
## Contribution
|
|
149
|
+
|
|
150
|
+
Found a bug? [Open an issue](https://github.com/xingxingmofashu/ui/issues) with
|
|
151
|
+
a reproduction. Before opening a pull request, run `pnpm lint`, `pnpm test`, and
|
|
152
|
+
`pnpm typecheck`.
|
|
153
|
+
|
|
154
|
+
> [!TIP]
|
|
155
|
+
> [`AGENTS.md`](https://github.com/xingxingmofashu/ui/blob/main/AGENTS.md)
|
|
156
|
+
> describes the component, theme, test, and documentation conventions used in
|
|
157
|
+
> this repository.
|
|
158
|
+
|
|
159
|
+
## Credits
|
|
160
|
+
|
|
161
|
+
- [Base UI](https://base-ui.com)
|
|
162
|
+
- [Tailwind CSS](https://tailwindcss.com)
|
|
163
|
+
- [Tailwind Variants](https://www.tailwind-variants.org)
|
|
164
|
+
- [cn](https://github.com/shadcn-ui/cn)
|
|
136
165
|
|
|
137
166
|
## License
|
|
138
167
|
|
|
139
|
-
MIT
|
|
168
|
+
Licensed under the [MIT license](https://github.com/xingxingmofashu/ui/blob/main/LICENSE).
|
|
169
|
+
|
|
170
|
+
<!-- Badges -->
|
|
171
|
+
|
|
172
|
+
[npm-version-src]: https://img.shields.io/npm/v/@xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
|
|
173
|
+
[npm-version-href]: https://www.npmjs.com/package/@xingxingmofashu/ui
|
|
174
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/@xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
|
|
175
|
+
[npm-downloads-href]: https://npm.chart.dev/@xingxingmofashu/ui
|
|
176
|
+
[license-src]: https://img.shields.io/github/license/xingxingmofashu/ui.svg?style=flat&colorA=18181B&colorB=52525B
|
|
177
|
+
[license-href]: https://github.com/xingxingmofashu/ui/blob/main/LICENSE
|
|
178
|
+
[react-src]: https://img.shields.io/badge/React-19-18181B?style=flat&logo=react&logoColor=white
|
|
179
|
+
[react-href]: https://react.dev
|
|
180
|
+
[tailwind-src]: https://img.shields.io/badge/Tailwind_CSS-4-18181B?style=flat&logo=tailwindcss&logoColor=white
|
|
181
|
+
[tailwind-href]: https://tailwindcss.com
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "./keyframes.css";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-checkbox-mark:#141414;--ui-checkbox-rim:hsla(0,0%,100%,.14);--ui-checkbox-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04),0 1px 2px rgba(0,0,0,.4);--ui-dialog-surface:#141414;--ui-glass-surface:hsla(0,0%,100%,.06);--ui-glass-border:hsla(0,0%,100%,.14);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.9);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:2px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px;--ui-glass-edge-shadow:inset 1px -1px 2px hsla(0,0%,100%,.55),inset -1px 1px 2px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.2);--ui-glass-thumb-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 0 0 1px hsla(0,0%,100%,.55);--ui-glass-lens-blur:1.5px;--ui-glass-lens-saturate:160%;--ui-glass-lens-border:hsla(0,0%,100%,.55);--ui-glass-lens-surface:linear-gradient(180deg,hsla(0,0%,100%,.72),hsla(0,0%,100%,.3));--ui-glass-lens-surface-active:hsla(0,0%,100%,.12);--ui-glass-lens-shadow:0 4px 10px rgba(0,30,63,.14),0 0 2px rgba(0,9,20,.12),inset 1px 1px 0 hsla(0,0%,100%,.8),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-shadow-active:0 6px 18px rgba(0,30,63,.18),0 0 3px rgba(0,9,20,.14),inset 1px 1px 0 hsla(0,0%,100%,.72),inset -1px -1px 0 rgba(69,168,243,.2);--ui-glass-lens-specular:inset 1px 1px 0 hsla(0,0%,100%,.7),inset 1px 3px 0 rgba(28,63,90,.05),inset 0 0 18px hsla(0,0%,100%,.55),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-glare:linear-gradient(180deg,hsla(0,0%,100%,.75),hsla(0,0%,100%,0))}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-dialog-surface:var(--ui-dialog-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,2px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.9)) contrast(var(--ui-glass-contrast,3));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
|
|
1
|
+
@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-checkbox-mark:#141414;--ui-checkbox-rim:hsla(0,0%,100%,.14);--ui-checkbox-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04),0 1px 2px rgba(0,0,0,.4);--ui-dialog-surface:#141414;--ui-glass-surface:hsla(0,0%,100%,.06);--ui-glass-border:hsla(0,0%,100%,.14);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.9);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-checkbox-mark:#fff;--ui-checkbox-rim:hsla(0,0%,100%,.18);--ui-checkbox-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.16);--ui-dialog-surface:#fff;--ui-glass-surface:rgba(0,0,0,.02);--ui-glass-border:rgba(51,51,51,.08);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.9);--ui-glass-contrast:3;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:2px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px;--ui-glass-edge-shadow:inset 1px -1px 2px hsla(0,0%,100%,.55),inset -1px 1px 2px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.2);--ui-glass-thumb-shadow:0 1px 3px rgba(0,0,0,.2),inset 0 0 0 1px hsla(0,0%,100%,.55);--ui-glass-lens-blur:1.5px;--ui-glass-lens-saturate:160%;--ui-glass-lens-border:hsla(0,0%,100%,.55);--ui-glass-lens-surface:linear-gradient(180deg,hsla(0,0%,100%,.72),hsla(0,0%,100%,.3));--ui-glass-lens-surface-active:hsla(0,0%,100%,.12);--ui-glass-lens-shadow:0 4px 10px rgba(0,30,63,.14),0 0 2px rgba(0,9,20,.12),inset 1px 1px 0 hsla(0,0%,100%,.8),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-shadow-active:0 6px 18px rgba(0,30,63,.18),0 0 3px rgba(0,9,20,.14),inset 1px 1px 0 hsla(0,0%,100%,.72),inset -1px -1px 0 rgba(69,168,243,.2);--ui-glass-lens-specular:inset 1px 1px 0 hsla(0,0%,100%,.7),inset 1px 3px 0 rgba(28,63,90,.05),inset 0 0 18px hsla(0,0%,100%,.55),inset -1px -1px 0 rgba(69,168,243,.16);--ui-glass-lens-glare:linear-gradient(180deg,hsla(0,0%,100%,.75),hsla(0,0%,100%,0))}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-dialog-surface:var(--ui-dialog-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,2px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.9)) contrast(var(--ui-glass-contrast,3));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
|