liquidglass-tailwind 0.1.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 +153 -0
- package/dist/chunk-IOEEC6F5.js +36 -0
- package/dist/chunk-IOEEC6F5.js.map +1 -0
- package/dist/filters.css +46 -0
- package/dist/index.cjs +304 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +129 -0
- package/dist/index.d.ts +129 -0
- package/dist/index.js +239 -0
- package/dist/index.js.map +1 -0
- package/dist/theme.cjs +60 -0
- package/dist/theme.cjs.map +1 -0
- package/dist/theme.d.cts +33 -0
- package/dist/theme.d.ts +33 -0
- package/dist/theme.js +7 -0
- package/dist/theme.js.map +1 -0
- package/package.json +56 -0
- package/scripts/postinstall.mjs +26 -0
- package/skill/liquidglass-design.md +332 -0
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# liquidglass-tailwind
|
|
2
|
+
|
|
3
|
+
Apple's iOS 26 **Liquid Glass** design system for Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
One install gives you **two things**:
|
|
6
|
+
|
|
7
|
+
1. **Tailwind CSS plugin** — ready-to-use glass component classes
|
|
8
|
+
2. **Claude Code skill** — AI-assisted Liquid Glass design guidance (auto-installed to `~/.claude/skills/`)
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install liquidglass-tailwind
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
That's it. The Tailwind plugin is ready and the Claude Code skill is automatically installed.
|
|
17
|
+
|
|
18
|
+
## Setup
|
|
19
|
+
|
|
20
|
+
### Tailwind v4
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
/* styles.css */
|
|
24
|
+
@import "tailwindcss";
|
|
25
|
+
@plugin "liquidglass-tailwind";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Tailwind v3
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
// tailwind.config.ts
|
|
32
|
+
import liquidGlass from "liquidglass-tailwind";
|
|
33
|
+
|
|
34
|
+
export default {
|
|
35
|
+
plugins: [liquidGlass],
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
### Components
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<!-- Card -->
|
|
45
|
+
<div class="glass-card glass-shine">
|
|
46
|
+
<h2>Hello</h2>
|
|
47
|
+
<p>Translucent card with specular highlight</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- Elevated card -->
|
|
51
|
+
<div class="glass-card-elevated glass-shine">
|
|
52
|
+
Featured content with deeper blur
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<!-- Buttons -->
|
|
56
|
+
<button class="glass-btn text-white">Primary</button>
|
|
57
|
+
<button class="glass-btn-secondary text-white/90">Secondary</button>
|
|
58
|
+
<button class="glass-btn-pill text-white/90">Pill</button>
|
|
59
|
+
|
|
60
|
+
<!-- Navbar -->
|
|
61
|
+
<nav class="glass-nav h-16 flex items-center px-6">
|
|
62
|
+
Navigation
|
|
63
|
+
</nav>
|
|
64
|
+
|
|
65
|
+
<!-- Modal / Sheet -->
|
|
66
|
+
<div class="glass-modal p-6">
|
|
67
|
+
Sheet content
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- Input -->
|
|
71
|
+
<input class="glass-input text-white" placeholder="Email" />
|
|
72
|
+
|
|
73
|
+
<!-- Segmented control -->
|
|
74
|
+
<div class="glass-segment">
|
|
75
|
+
<button class="glass-segment-item glass-segment-item-active text-white">Tab 1</button>
|
|
76
|
+
<button class="glass-segment-item text-white/60">Tab 2</button>
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Utilities
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<!-- Glass surfaces (backdrop-filter + saturate) -->
|
|
84
|
+
<div class="glass-surface">...</div> <!-- blur 16px -->
|
|
85
|
+
<div class="glass-surface-sm">...</div> <!-- blur 8px -->
|
|
86
|
+
<div class="glass-surface-lg">...</div> <!-- blur 24px -->
|
|
87
|
+
<div class="glass-surface-xl">...</div> <!-- blur 40px -->
|
|
88
|
+
|
|
89
|
+
<!-- Specular shine overlay -->
|
|
90
|
+
<div class="glass-card glass-shine">...</div>
|
|
91
|
+
<div class="glass-card glass-shine-subtle">...</div>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Theme tokens
|
|
95
|
+
|
|
96
|
+
The plugin extends your Tailwind theme with glass-specific tokens:
|
|
97
|
+
|
|
98
|
+
| Token | Example classes |
|
|
99
|
+
|-------|----------------|
|
|
100
|
+
| `colors.glass.*` | `bg-glass-light`, `bg-glass-subtle`, `bg-glass-dark` |
|
|
101
|
+
| `colors.glass-border.*` | `border-glass-border`, `border-glass-border-subtle` |
|
|
102
|
+
| `borderRadius.glass*` | `rounded-glass`, `rounded-glass-lg`, `rounded-glass-xl` |
|
|
103
|
+
| `boxShadow.glass*` | `shadow-glass`, `shadow-glass-lg`, `shadow-glass-elevated` |
|
|
104
|
+
|
|
105
|
+
### Coloring buttons
|
|
106
|
+
|
|
107
|
+
Combine glass classes with Tailwind color utilities:
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<button class="glass-btn text-white bg-blue-500/25 border-blue-400/20">Accent</button>
|
|
111
|
+
<button class="glass-btn text-white bg-emerald-500/25 border-emerald-400/20">Success</button>
|
|
112
|
+
<button class="glass-btn text-white bg-red-500/25 border-red-400/20">Danger</button>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Accessibility
|
|
116
|
+
|
|
117
|
+
The plugin ships with built-in accessibility support:
|
|
118
|
+
|
|
119
|
+
- **`prefers-reduced-transparency`** — glass surfaces fall back to solid opaque backgrounds
|
|
120
|
+
- **`prefers-reduced-motion`** — hover/active animations are disabled
|
|
121
|
+
|
|
122
|
+
Always ensure sufficient text contrast over translucent backgrounds.
|
|
123
|
+
|
|
124
|
+
## Claude Code skill
|
|
125
|
+
|
|
126
|
+
After install, the skill is available at `~/.claude/skills/liquidglass-design.md`.
|
|
127
|
+
|
|
128
|
+
It provides Claude Code with:
|
|
129
|
+
|
|
130
|
+
- Liquid Glass design principles and guidelines
|
|
131
|
+
- Component patterns and anti-patterns
|
|
132
|
+
- Opacity hierarchy tables
|
|
133
|
+
- Dark mode adaptation rules
|
|
134
|
+
- Accessibility requirements
|
|
135
|
+
- Performance best practices
|
|
136
|
+
|
|
137
|
+
Invoke it by mentioning "liquid glass", "glass design", or "iOS 26 style" in your Claude Code session.
|
|
138
|
+
|
|
139
|
+
To reinstall the skill manually:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
cp node_modules/liquidglass-tailwind/skill/liquidglass-design.md ~/.claude/skills/
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Demo
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
cd demo && npm install && npm run dev
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// src/theme.ts
|
|
2
|
+
var liquidGlassTheme = {
|
|
3
|
+
colors: {
|
|
4
|
+
glass: {
|
|
5
|
+
light: "rgba(255, 255, 255, 0.15)",
|
|
6
|
+
medium: "rgba(255, 255, 255, 0.10)",
|
|
7
|
+
subtle: "rgba(255, 255, 255, 0.08)",
|
|
8
|
+
strong: "rgba(255, 255, 255, 0.25)",
|
|
9
|
+
dark: "rgba(0, 0, 0, 0.15)",
|
|
10
|
+
"dark-medium": "rgba(0, 0, 0, 0.25)",
|
|
11
|
+
"dark-strong": "rgba(0, 0, 0, 0.35)"
|
|
12
|
+
},
|
|
13
|
+
"glass-border": {
|
|
14
|
+
DEFAULT: "rgba(255, 255, 255, 0.20)",
|
|
15
|
+
subtle: "rgba(255, 255, 255, 0.10)",
|
|
16
|
+
strong: "rgba(255, 255, 255, 0.30)"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
borderRadius: {
|
|
20
|
+
"glass-sm": "12px",
|
|
21
|
+
glass: "16px",
|
|
22
|
+
"glass-lg": "24px",
|
|
23
|
+
"glass-xl": "32px"
|
|
24
|
+
},
|
|
25
|
+
boxShadow: {
|
|
26
|
+
glass: "0 8px 32px rgba(31, 38, 135, 0.15)",
|
|
27
|
+
"glass-lg": "0 8px 32px rgba(31, 38, 135, 0.20), inset 0 4px 20px rgba(255, 255, 255, 0.15)",
|
|
28
|
+
"glass-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.20)",
|
|
29
|
+
"glass-elevated": "0 16px 48px rgba(31, 38, 135, 0.25), inset 0 2px 12px rgba(255, 255, 255, 0.10)"
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export {
|
|
34
|
+
liquidGlassTheme
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=chunk-IOEEC6F5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/theme.ts"],"sourcesContent":["export const liquidGlassTheme = {\n colors: {\n glass: {\n light: \"rgba(255, 255, 255, 0.15)\",\n medium: \"rgba(255, 255, 255, 0.10)\",\n subtle: \"rgba(255, 255, 255, 0.08)\",\n strong: \"rgba(255, 255, 255, 0.25)\",\n dark: \"rgba(0, 0, 0, 0.15)\",\n \"dark-medium\": \"rgba(0, 0, 0, 0.25)\",\n \"dark-strong\": \"rgba(0, 0, 0, 0.35)\",\n },\n \"glass-border\": {\n DEFAULT: \"rgba(255, 255, 255, 0.20)\",\n subtle: \"rgba(255, 255, 255, 0.10)\",\n strong: \"rgba(255, 255, 255, 0.30)\",\n },\n },\n borderRadius: {\n \"glass-sm\": \"12px\",\n glass: \"16px\",\n \"glass-lg\": \"24px\",\n \"glass-xl\": \"32px\",\n },\n boxShadow: {\n glass: \"0 8px 32px rgba(31, 38, 135, 0.15)\",\n \"glass-lg\":\n \"0 8px 32px rgba(31, 38, 135, 0.20), inset 0 4px 20px rgba(255, 255, 255, 0.15)\",\n \"glass-inset\": \"inset 0 1px 0 rgba(255, 255, 255, 0.20)\",\n \"glass-elevated\":\n \"0 16px 48px rgba(31, 38, 135, 0.25), inset 0 2px 12px rgba(255, 255, 255, 0.10)\",\n },\n} as const;\n\nexport type LiquidGlassTheme = typeof liquidGlassTheme;\n"],"mappings":";AAAO,IAAM,mBAAmB;AAAA,EAC9B,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,eAAe;AAAA,MACf,eAAe;AAAA,IACjB;AAAA,IACA,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,YACE;AAAA,IACF,eAAe;AAAA,IACf,kBACE;AAAA,EACJ;AACF;","names":[]}
|
package/dist/filters.css
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Liquid Glass SVG Filters
|
|
3
|
+
*
|
|
4
|
+
* Include this CSS file to get the SVG filter markup injected.
|
|
5
|
+
* Usage: backdrop-filter: url(#liquid-glass-refraction) brightness(150%);
|
|
6
|
+
*
|
|
7
|
+
* NOTE: SVG filters in backdrop-filter only work in Chromium browsers.
|
|
8
|
+
* Always pair with a @supports fallback.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
@layer components {
|
|
12
|
+
/* Reduced transparency fallback */
|
|
13
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
14
|
+
.glass-surface,
|
|
15
|
+
.glass-surface-sm,
|
|
16
|
+
.glass-surface-lg,
|
|
17
|
+
.glass-surface-xl,
|
|
18
|
+
.glass-card,
|
|
19
|
+
.glass-card-elevated,
|
|
20
|
+
.glass-nav,
|
|
21
|
+
.glass-modal {
|
|
22
|
+
backdrop-filter: none !important;
|
|
23
|
+
-webkit-backdrop-filter: none !important;
|
|
24
|
+
background-color: rgba(30, 30, 30, 0.95) !important;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Reduced motion */
|
|
29
|
+
@media (prefers-reduced-motion: reduce) {
|
|
30
|
+
.glass-btn,
|
|
31
|
+
.glass-btn-secondary,
|
|
32
|
+
.glass-btn-pill {
|
|
33
|
+
transition: none !important;
|
|
34
|
+
}
|
|
35
|
+
.glass-btn:hover,
|
|
36
|
+
.glass-btn-secondary:hover,
|
|
37
|
+
.glass-btn-pill:hover {
|
|
38
|
+
transform: none !important;
|
|
39
|
+
}
|
|
40
|
+
.glass-btn:active,
|
|
41
|
+
.glass-btn-secondary:active,
|
|
42
|
+
.glass-btn-pill:active {
|
|
43
|
+
transform: none !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
33
|
+
default: () => src_default,
|
|
34
|
+
liquidGlassTheme: () => liquidGlassTheme
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(src_exports);
|
|
37
|
+
var import_plugin = __toESM(require("tailwindcss/plugin"), 1);
|
|
38
|
+
|
|
39
|
+
// src/theme.ts
|
|
40
|
+
var liquidGlassTheme = {
|
|
41
|
+
colors: {
|
|
42
|
+
glass: {
|
|
43
|
+
light: "rgba(255, 255, 255, 0.15)",
|
|
44
|
+
medium: "rgba(255, 255, 255, 0.10)",
|
|
45
|
+
subtle: "rgba(255, 255, 255, 0.08)",
|
|
46
|
+
strong: "rgba(255, 255, 255, 0.25)",
|
|
47
|
+
dark: "rgba(0, 0, 0, 0.15)",
|
|
48
|
+
"dark-medium": "rgba(0, 0, 0, 0.25)",
|
|
49
|
+
"dark-strong": "rgba(0, 0, 0, 0.35)"
|
|
50
|
+
},
|
|
51
|
+
"glass-border": {
|
|
52
|
+
DEFAULT: "rgba(255, 255, 255, 0.20)",
|
|
53
|
+
subtle: "rgba(255, 255, 255, 0.10)",
|
|
54
|
+
strong: "rgba(255, 255, 255, 0.30)"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
borderRadius: {
|
|
58
|
+
"glass-sm": "12px",
|
|
59
|
+
glass: "16px",
|
|
60
|
+
"glass-lg": "24px",
|
|
61
|
+
"glass-xl": "32px"
|
|
62
|
+
},
|
|
63
|
+
boxShadow: {
|
|
64
|
+
glass: "0 8px 32px rgba(31, 38, 135, 0.15)",
|
|
65
|
+
"glass-lg": "0 8px 32px rgba(31, 38, 135, 0.20), inset 0 4px 20px rgba(255, 255, 255, 0.15)",
|
|
66
|
+
"glass-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.20)",
|
|
67
|
+
"glass-elevated": "0 16px 48px rgba(31, 38, 135, 0.25), inset 0 2px 12px rgba(255, 255, 255, 0.10)"
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
// src/index.ts
|
|
72
|
+
var liquidGlass = (0, import_plugin.default)(
|
|
73
|
+
({ addComponents, addUtilities, addBase, theme }) => {
|
|
74
|
+
addUtilities({
|
|
75
|
+
".glass-surface": {
|
|
76
|
+
"backdrop-filter": "blur(16px) saturate(180%)",
|
|
77
|
+
"-webkit-backdrop-filter": "blur(16px) saturate(180%)"
|
|
78
|
+
},
|
|
79
|
+
".glass-surface-sm": {
|
|
80
|
+
"backdrop-filter": "blur(8px) saturate(150%)",
|
|
81
|
+
"-webkit-backdrop-filter": "blur(8px) saturate(150%)"
|
|
82
|
+
},
|
|
83
|
+
".glass-surface-lg": {
|
|
84
|
+
"backdrop-filter": "blur(24px) saturate(200%)",
|
|
85
|
+
"-webkit-backdrop-filter": "blur(24px) saturate(200%)"
|
|
86
|
+
},
|
|
87
|
+
".glass-surface-xl": {
|
|
88
|
+
"backdrop-filter": "blur(40px) saturate(200%)",
|
|
89
|
+
"-webkit-backdrop-filter": "blur(40px) saturate(200%)"
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
addComponents({
|
|
93
|
+
".glass-shine": {
|
|
94
|
+
position: "relative",
|
|
95
|
+
overflow: "hidden",
|
|
96
|
+
"&::after": {
|
|
97
|
+
content: '""',
|
|
98
|
+
position: "absolute",
|
|
99
|
+
inset: "0",
|
|
100
|
+
"border-radius": "inherit",
|
|
101
|
+
background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%)",
|
|
102
|
+
"pointer-events": "none"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
".glass-shine-subtle": {
|
|
106
|
+
position: "relative",
|
|
107
|
+
overflow: "hidden",
|
|
108
|
+
"&::after": {
|
|
109
|
+
content: '""',
|
|
110
|
+
position: "absolute",
|
|
111
|
+
inset: "0",
|
|
112
|
+
"border-radius": "inherit",
|
|
113
|
+
background: "linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)",
|
|
114
|
+
"pointer-events": "none"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
addBase({
|
|
119
|
+
"@media (prefers-reduced-transparency: reduce)": {
|
|
120
|
+
".glass-surface, .glass-surface-sm, .glass-surface-lg, .glass-surface-xl, .glass-card, .glass-card-elevated, .glass-nav, .glass-modal": {
|
|
121
|
+
"backdrop-filter": "none",
|
|
122
|
+
"-webkit-backdrop-filter": "none",
|
|
123
|
+
background: "rgba(30, 30, 30, 0.95)"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"@media (prefers-reduced-motion: reduce)": {
|
|
127
|
+
".glass-btn, .glass-btn-secondary, .glass-btn-pill": {
|
|
128
|
+
transition: "none"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
addComponents({
|
|
133
|
+
".glass-card": {
|
|
134
|
+
"background-color": theme("colors.glass.light"),
|
|
135
|
+
"backdrop-filter": "blur(16px) saturate(180%)",
|
|
136
|
+
"-webkit-backdrop-filter": "blur(16px) saturate(180%)",
|
|
137
|
+
"border-radius": theme("borderRadius.glass-lg"),
|
|
138
|
+
border: `1px solid ${theme("colors.glass-border.DEFAULT")}`,
|
|
139
|
+
"box-shadow": theme("boxShadow.glass"),
|
|
140
|
+
padding: theme("spacing.6")
|
|
141
|
+
},
|
|
142
|
+
".glass-card-elevated": {
|
|
143
|
+
"background-color": theme("colors.glass.strong"),
|
|
144
|
+
"backdrop-filter": "blur(24px) saturate(200%)",
|
|
145
|
+
"-webkit-backdrop-filter": "blur(24px) saturate(200%)",
|
|
146
|
+
"border-radius": theme("borderRadius.glass-lg"),
|
|
147
|
+
border: `1px solid ${theme("colors.glass-border.strong")}`,
|
|
148
|
+
"box-shadow": theme("boxShadow.glass-elevated"),
|
|
149
|
+
padding: theme("spacing.6")
|
|
150
|
+
},
|
|
151
|
+
".glass-btn": {
|
|
152
|
+
display: "inline-flex",
|
|
153
|
+
"align-items": "center",
|
|
154
|
+
"justify-content": "center",
|
|
155
|
+
gap: theme("spacing.2"),
|
|
156
|
+
"padding-left": theme("spacing.5"),
|
|
157
|
+
"padding-right": theme("spacing.5"),
|
|
158
|
+
"padding-top": theme("spacing.2.5"),
|
|
159
|
+
"padding-bottom": theme("spacing.2.5"),
|
|
160
|
+
"border-radius": theme("borderRadius.glass"),
|
|
161
|
+
"font-weight": "500",
|
|
162
|
+
"background-color": theme("colors.glass.light"),
|
|
163
|
+
"backdrop-filter": "blur(16px)",
|
|
164
|
+
"-webkit-backdrop-filter": "blur(16px)",
|
|
165
|
+
border: `1px solid ${theme("colors.glass-border.subtle")}`,
|
|
166
|
+
"box-shadow": theme("boxShadow.glass"),
|
|
167
|
+
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
168
|
+
"&:hover": {
|
|
169
|
+
transform: "translateY(-2px)",
|
|
170
|
+
"box-shadow": theme("boxShadow.glass-lg")
|
|
171
|
+
},
|
|
172
|
+
"&:active": {
|
|
173
|
+
transform: "scale(0.95)"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
".glass-btn-secondary": {
|
|
177
|
+
display: "inline-flex",
|
|
178
|
+
"align-items": "center",
|
|
179
|
+
"justify-content": "center",
|
|
180
|
+
gap: theme("spacing.2"),
|
|
181
|
+
"padding-left": theme("spacing.5"),
|
|
182
|
+
"padding-right": theme("spacing.5"),
|
|
183
|
+
"padding-top": theme("spacing.2.5"),
|
|
184
|
+
"padding-bottom": theme("spacing.2.5"),
|
|
185
|
+
"border-radius": theme("borderRadius.glass"),
|
|
186
|
+
"font-weight": "500",
|
|
187
|
+
"background-color": theme("colors.glass.subtle"),
|
|
188
|
+
"backdrop-filter": "blur(16px)",
|
|
189
|
+
"-webkit-backdrop-filter": "blur(16px)",
|
|
190
|
+
border: `1px solid ${theme("colors.glass-border.subtle")}`,
|
|
191
|
+
"box-shadow": theme("boxShadow.glass"),
|
|
192
|
+
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
193
|
+
"&:hover": {
|
|
194
|
+
transform: "translateY(-2px)",
|
|
195
|
+
"background-color": theme("colors.glass.medium")
|
|
196
|
+
},
|
|
197
|
+
"&:active": {
|
|
198
|
+
transform: "scale(0.95)"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
".glass-btn-pill": {
|
|
202
|
+
display: "inline-flex",
|
|
203
|
+
"align-items": "center",
|
|
204
|
+
"justify-content": "center",
|
|
205
|
+
gap: theme("spacing.2"),
|
|
206
|
+
"padding-left": theme("spacing.5"),
|
|
207
|
+
"padding-right": theme("spacing.5"),
|
|
208
|
+
"padding-top": theme("spacing.2.5"),
|
|
209
|
+
"padding-bottom": theme("spacing.2.5"),
|
|
210
|
+
"border-radius": "9999px",
|
|
211
|
+
"font-size": theme("fontSize.sm"),
|
|
212
|
+
"font-weight": "500",
|
|
213
|
+
"background-color": theme("colors.glass.subtle"),
|
|
214
|
+
"backdrop-filter": "blur(16px)",
|
|
215
|
+
"-webkit-backdrop-filter": "blur(16px)",
|
|
216
|
+
border: `1px solid ${theme("colors.glass-border.subtle")}`,
|
|
217
|
+
"box-shadow": theme("boxShadow.glass"),
|
|
218
|
+
transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
219
|
+
"&:hover": {
|
|
220
|
+
transform: "translateY(-2px)"
|
|
221
|
+
},
|
|
222
|
+
"&:active": {
|
|
223
|
+
transform: "scale(0.95)"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
".glass-nav": {
|
|
227
|
+
position: "fixed",
|
|
228
|
+
top: "0",
|
|
229
|
+
left: "0",
|
|
230
|
+
right: "0",
|
|
231
|
+
"z-index": "50",
|
|
232
|
+
"background-color": theme("colors.glass.medium"),
|
|
233
|
+
"backdrop-filter": "blur(24px) saturate(180%)",
|
|
234
|
+
"-webkit-backdrop-filter": "blur(24px) saturate(180%)",
|
|
235
|
+
"border-bottom": `1px solid ${theme("colors.glass-border.subtle")}`
|
|
236
|
+
},
|
|
237
|
+
".glass-modal": {
|
|
238
|
+
"background-color": theme("colors.glass.light"),
|
|
239
|
+
"backdrop-filter": "blur(40px) saturate(180%)",
|
|
240
|
+
"-webkit-backdrop-filter": "blur(40px) saturate(180%)",
|
|
241
|
+
"border-radius": `${theme("borderRadius.glass-xl")} ${theme("borderRadius.glass-xl")} 0 0`,
|
|
242
|
+
border: `1px solid ${theme("colors.glass-border.DEFAULT")}`,
|
|
243
|
+
"box-shadow": "0 -8px 32px rgba(31, 38, 135, 0.2)"
|
|
244
|
+
},
|
|
245
|
+
".glass-input": {
|
|
246
|
+
width: "100%",
|
|
247
|
+
"padding-left": theme("spacing.4"),
|
|
248
|
+
"padding-right": theme("spacing.4"),
|
|
249
|
+
"padding-top": theme("spacing.3"),
|
|
250
|
+
"padding-bottom": theme("spacing.3"),
|
|
251
|
+
"border-radius": theme("borderRadius.glass-sm"),
|
|
252
|
+
"background-color": theme("colors.glass.subtle"),
|
|
253
|
+
"backdrop-filter": "blur(16px)",
|
|
254
|
+
"-webkit-backdrop-filter": "blur(16px)",
|
|
255
|
+
border: `1px solid ${theme("colors.glass-border.subtle")}`,
|
|
256
|
+
outline: "none",
|
|
257
|
+
transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
258
|
+
"&::placeholder": {
|
|
259
|
+
color: "rgba(255, 255, 255, 0.5)"
|
|
260
|
+
},
|
|
261
|
+
"&:focus": {
|
|
262
|
+
"border-color": theme("colors.glass-border.strong"),
|
|
263
|
+
"background-color": theme("colors.glass.medium")
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
".glass-segment": {
|
|
267
|
+
display: "inline-flex",
|
|
268
|
+
"border-radius": theme("borderRadius.glass-sm"),
|
|
269
|
+
"background-color": theme("colors.glass.subtle"),
|
|
270
|
+
"backdrop-filter": "blur(16px)",
|
|
271
|
+
"-webkit-backdrop-filter": "blur(16px)",
|
|
272
|
+
border: `1px solid ${theme("colors.glass-border.subtle")}`,
|
|
273
|
+
padding: theme("spacing.1")
|
|
274
|
+
},
|
|
275
|
+
".glass-segment-item": {
|
|
276
|
+
"padding-left": theme("spacing.4"),
|
|
277
|
+
"padding-right": theme("spacing.4"),
|
|
278
|
+
"padding-top": theme("spacing.2"),
|
|
279
|
+
"padding-bottom": theme("spacing.2"),
|
|
280
|
+
"border-radius": theme("borderRadius.glass-sm"),
|
|
281
|
+
"font-size": theme("fontSize.sm"),
|
|
282
|
+
"font-weight": "500",
|
|
283
|
+
transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"
|
|
284
|
+
},
|
|
285
|
+
".glass-segment-item-active": {
|
|
286
|
+
"background-color": theme("colors.glass.light"),
|
|
287
|
+
"box-shadow": theme("boxShadow.glass")
|
|
288
|
+
}
|
|
289
|
+
});
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
theme: {
|
|
293
|
+
extend: {
|
|
294
|
+
...liquidGlassTheme
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
var src_default = liquidGlass;
|
|
300
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
301
|
+
0 && (module.exports = {
|
|
302
|
+
liquidGlassTheme
|
|
303
|
+
});
|
|
304
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/theme.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin\";\nimport { liquidGlassTheme } from \"./theme\";\n\nconst liquidGlass = plugin(\n ({ addComponents, addUtilities, addBase, theme }) => {\n // Base glass surface utility\n addUtilities({\n \".glass-surface\": {\n \"backdrop-filter\": \"blur(16px) saturate(180%)\",\n \"-webkit-backdrop-filter\": \"blur(16px) saturate(180%)\",\n },\n \".glass-surface-sm\": {\n \"backdrop-filter\": \"blur(8px) saturate(150%)\",\n \"-webkit-backdrop-filter\": \"blur(8px) saturate(150%)\",\n },\n \".glass-surface-lg\": {\n \"backdrop-filter\": \"blur(24px) saturate(200%)\",\n \"-webkit-backdrop-filter\": \"blur(24px) saturate(200%)\",\n },\n \".glass-surface-xl\": {\n \"backdrop-filter\": \"blur(40px) saturate(200%)\",\n \"-webkit-backdrop-filter\": \"blur(40px) saturate(200%)\",\n },\n });\n\n // Specular shine overlay\n addComponents({\n \".glass-shine\": {\n position: \"relative\",\n overflow: \"hidden\",\n \"&::after\": {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n \"border-radius\": \"inherit\",\n background:\n \"linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%)\",\n \"pointer-events\": \"none\",\n },\n },\n \".glass-shine-subtle\": {\n position: \"relative\",\n overflow: \"hidden\",\n \"&::after\": {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n \"border-radius\": \"inherit\",\n background:\n \"linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)\",\n \"pointer-events\": \"none\",\n },\n },\n });\n\n // Accessibility: reduced transparency & motion fallbacks\n addBase({\n \"@media (prefers-reduced-transparency: reduce)\": {\n \".glass-surface, .glass-surface-sm, .glass-surface-lg, .glass-surface-xl, .glass-card, .glass-card-elevated, .glass-nav, .glass-modal\":\n {\n \"backdrop-filter\": \"none\",\n \"-webkit-backdrop-filter\": \"none\",\n background: \"rgba(30, 30, 30, 0.95)\",\n },\n },\n \"@media (prefers-reduced-motion: reduce)\": {\n \".glass-btn, .glass-btn-secondary, .glass-btn-pill\": {\n transition: \"none\",\n },\n },\n });\n\n // Component presets\n addComponents({\n \".glass-card\": {\n \"background-color\": theme(\"colors.glass.light\"),\n \"backdrop-filter\": \"blur(16px) saturate(180%)\",\n \"-webkit-backdrop-filter\": \"blur(16px) saturate(180%)\",\n \"border-radius\": theme(\"borderRadius.glass-lg\"),\n border: `1px solid ${theme(\"colors.glass-border.DEFAULT\")}`,\n \"box-shadow\": theme(\"boxShadow.glass\"),\n padding: theme(\"spacing.6\"),\n },\n \".glass-card-elevated\": {\n \"background-color\": theme(\"colors.glass.strong\"),\n \"backdrop-filter\": \"blur(24px) saturate(200%)\",\n \"-webkit-backdrop-filter\": \"blur(24px) saturate(200%)\",\n \"border-radius\": theme(\"borderRadius.glass-lg\"),\n border: `1px solid ${theme(\"colors.glass-border.strong\")}`,\n \"box-shadow\": theme(\"boxShadow.glass-elevated\"),\n padding: theme(\"spacing.6\"),\n },\n \".glass-btn\": {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n gap: theme(\"spacing.2\"),\n \"padding-left\": theme(\"spacing.5\"),\n \"padding-right\": theme(\"spacing.5\"),\n \"padding-top\": theme(\"spacing.2.5\"),\n \"padding-bottom\": theme(\"spacing.2.5\"),\n \"border-radius\": theme(\"borderRadius.glass\"),\n \"font-weight\": \"500\",\n \"background-color\": theme(\"colors.glass.light\"),\n \"backdrop-filter\": \"blur(16px)\",\n \"-webkit-backdrop-filter\": \"blur(16px)\",\n border: `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n \"box-shadow\": theme(\"boxShadow.glass\"),\n transition: \"all 300ms cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&:hover\": {\n transform: \"translateY(-2px)\",\n \"box-shadow\": theme(\"boxShadow.glass-lg\"),\n },\n \"&:active\": {\n transform: \"scale(0.95)\",\n },\n },\n \".glass-btn-secondary\": {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n gap: theme(\"spacing.2\"),\n \"padding-left\": theme(\"spacing.5\"),\n \"padding-right\": theme(\"spacing.5\"),\n \"padding-top\": theme(\"spacing.2.5\"),\n \"padding-bottom\": theme(\"spacing.2.5\"),\n \"border-radius\": theme(\"borderRadius.glass\"),\n \"font-weight\": \"500\",\n \"background-color\": theme(\"colors.glass.subtle\"),\n \"backdrop-filter\": \"blur(16px)\",\n \"-webkit-backdrop-filter\": \"blur(16px)\",\n border: `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n \"box-shadow\": theme(\"boxShadow.glass\"),\n transition: \"all 300ms cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&:hover\": {\n transform: \"translateY(-2px)\",\n \"background-color\": theme(\"colors.glass.medium\"),\n },\n \"&:active\": {\n transform: \"scale(0.95)\",\n },\n },\n \".glass-btn-pill\": {\n display: \"inline-flex\",\n \"align-items\": \"center\",\n \"justify-content\": \"center\",\n gap: theme(\"spacing.2\"),\n \"padding-left\": theme(\"spacing.5\"),\n \"padding-right\": theme(\"spacing.5\"),\n \"padding-top\": theme(\"spacing.2.5\"),\n \"padding-bottom\": theme(\"spacing.2.5\"),\n \"border-radius\": \"9999px\",\n \"font-size\": theme(\"fontSize.sm\"),\n \"font-weight\": \"500\",\n \"background-color\": theme(\"colors.glass.subtle\"),\n \"backdrop-filter\": \"blur(16px)\",\n \"-webkit-backdrop-filter\": \"blur(16px)\",\n border: `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n \"box-shadow\": theme(\"boxShadow.glass\"),\n transition: \"all 300ms cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&:hover\": {\n transform: \"translateY(-2px)\",\n },\n \"&:active\": {\n transform: \"scale(0.95)\",\n },\n },\n \".glass-nav\": {\n position: \"fixed\",\n top: \"0\",\n left: \"0\",\n right: \"0\",\n \"z-index\": \"50\",\n \"background-color\": theme(\"colors.glass.medium\"),\n \"backdrop-filter\": \"blur(24px) saturate(180%)\",\n \"-webkit-backdrop-filter\": \"blur(24px) saturate(180%)\",\n \"border-bottom\": `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n },\n \".glass-modal\": {\n \"background-color\": theme(\"colors.glass.light\"),\n \"backdrop-filter\": \"blur(40px) saturate(180%)\",\n \"-webkit-backdrop-filter\": \"blur(40px) saturate(180%)\",\n \"border-radius\": `${theme(\"borderRadius.glass-xl\")} ${theme(\"borderRadius.glass-xl\")} 0 0`,\n border: `1px solid ${theme(\"colors.glass-border.DEFAULT\")}`,\n \"box-shadow\":\n \"0 -8px 32px rgba(31, 38, 135, 0.2)\",\n },\n \".glass-input\": {\n width: \"100%\",\n \"padding-left\": theme(\"spacing.4\"),\n \"padding-right\": theme(\"spacing.4\"),\n \"padding-top\": theme(\"spacing.3\"),\n \"padding-bottom\": theme(\"spacing.3\"),\n \"border-radius\": theme(\"borderRadius.glass-sm\"),\n \"background-color\": theme(\"colors.glass.subtle\"),\n \"backdrop-filter\": \"blur(16px)\",\n \"-webkit-backdrop-filter\": \"blur(16px)\",\n border: `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n outline: \"none\",\n transition: \"all 200ms cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&::placeholder\": {\n color: \"rgba(255, 255, 255, 0.5)\",\n },\n \"&:focus\": {\n \"border-color\": theme(\"colors.glass-border.strong\"),\n \"background-color\": theme(\"colors.glass.medium\"),\n },\n },\n \".glass-segment\": {\n display: \"inline-flex\",\n \"border-radius\": theme(\"borderRadius.glass-sm\"),\n \"background-color\": theme(\"colors.glass.subtle\"),\n \"backdrop-filter\": \"blur(16px)\",\n \"-webkit-backdrop-filter\": \"blur(16px)\",\n border: `1px solid ${theme(\"colors.glass-border.subtle\")}`,\n padding: theme(\"spacing.1\"),\n },\n \".glass-segment-item\": {\n \"padding-left\": theme(\"spacing.4\"),\n \"padding-right\": theme(\"spacing.4\"),\n \"padding-top\": theme(\"spacing.2\"),\n \"padding-bottom\": theme(\"spacing.2\"),\n \"border-radius\": theme(\"borderRadius.glass-sm\"),\n \"font-size\": theme(\"fontSize.sm\"),\n \"font-weight\": \"500\",\n transition: \"all 200ms cubic-bezier(0.4, 0, 0.2, 1)\",\n },\n \".glass-segment-item-active\": {\n \"background-color\": theme(\"colors.glass.light\"),\n \"box-shadow\": theme(\"boxShadow.glass\"),\n },\n });\n },\n {\n theme: {\n extend: {\n ...liquidGlassTheme,\n },\n },\n }\n);\n\nexport default liquidGlass;\nexport { liquidGlassTheme } from \"./theme\";\n","export const liquidGlassTheme = {\n colors: {\n glass: {\n light: \"rgba(255, 255, 255, 0.15)\",\n medium: \"rgba(255, 255, 255, 0.10)\",\n subtle: \"rgba(255, 255, 255, 0.08)\",\n strong: \"rgba(255, 255, 255, 0.25)\",\n dark: \"rgba(0, 0, 0, 0.15)\",\n \"dark-medium\": \"rgba(0, 0, 0, 0.25)\",\n \"dark-strong\": \"rgba(0, 0, 0, 0.35)\",\n },\n \"glass-border\": {\n DEFAULT: \"rgba(255, 255, 255, 0.20)\",\n subtle: \"rgba(255, 255, 255, 0.10)\",\n strong: \"rgba(255, 255, 255, 0.30)\",\n },\n },\n borderRadius: {\n \"glass-sm\": \"12px\",\n glass: \"16px\",\n \"glass-lg\": \"24px\",\n \"glass-xl\": \"32px\",\n },\n boxShadow: {\n glass: \"0 8px 32px rgba(31, 38, 135, 0.15)\",\n \"glass-lg\":\n \"0 8px 32px rgba(31, 38, 135, 0.20), inset 0 4px 20px rgba(255, 255, 255, 0.15)\",\n \"glass-inset\": \"inset 0 1px 0 rgba(255, 255, 255, 0.20)\",\n \"glass-elevated\":\n \"0 16px 48px rgba(31, 38, 135, 0.25), inset 0 2px 12px rgba(255, 255, 255, 0.10)\",\n },\n} as const;\n\nexport type LiquidGlassTheme = typeof liquidGlassTheme;\n"],"mappings":"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","names":["plugin"]}
|