@3df-spa/ui 1.0.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/LICENSE +21 -0
- package/README.md +89 -0
- package/package.json +74 -0
- package/src/styles/theme.css +999 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 3DF Space
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @3df/ui
|
|
2
|
+
|
|
3
|
+
> Librería de componentes Vue 3 · TypeScript strict · Tailwind CSS v4
|
|
4
|
+
|
|
5
|
+
[](../../LICENSE)
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @3df/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
**Peer dependencies:**
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add class-variance-authority clsx tailwind-merge vue
|
|
17
|
+
# Opcionales:
|
|
18
|
+
pnpm add date-fns # Calendar / DatePicker
|
|
19
|
+
pnpm add embla-carousel # Carousel
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
En tu CSS principal:
|
|
25
|
+
|
|
26
|
+
```css
|
|
27
|
+
@import "tailwindcss";
|
|
28
|
+
@import "@3df/ui/theme.css";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Uso básico
|
|
32
|
+
|
|
33
|
+
```vue
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { Button, Card, CardContent } from '@3df/ui';
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Card>
|
|
40
|
+
<CardContent>
|
|
41
|
+
<Button>Default</Button>
|
|
42
|
+
<Button variant="outline">Outline</Button>
|
|
43
|
+
<Button variant="destructive">Delete</Button>
|
|
44
|
+
</CardContent>
|
|
45
|
+
</Card>
|
|
46
|
+
</template>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Temas
|
|
50
|
+
|
|
51
|
+
| Clase CSS | Descripción |
|
|
52
|
+
|---|---|
|
|
53
|
+
| *(sin clase)* | Light default |
|
|
54
|
+
| `.dark` | Dark default |
|
|
55
|
+
| `.light-3df` | Light 3DF (verde/dorado) |
|
|
56
|
+
| `.dark-3df` | Dark 3DF |
|
|
57
|
+
| `.light-coffe` | Light café cálido |
|
|
58
|
+
| `.dark-coffe` | Dark café |
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<body class="dark-3df">...</body>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Personalizar bordes
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
:root {
|
|
68
|
+
--ui-border-width: 1px; /* default: 2px */
|
|
69
|
+
--ui-radius: 1rem; /* default: 0.625rem */
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Componentes
|
|
74
|
+
|
|
75
|
+
**Formularios** — `Button` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch` · `Toggle` · `Slider` · `Label` · `InputOTP` · `Calendar` · `DatePicker` · `DateRangePicker` · `Combobox`
|
|
76
|
+
|
|
77
|
+
**Layout** — `Card` · `Separator` · `ScrollArea` · `Table` · `Skeleton` · `Progress` · `Tabs` · `Accordion` · `Collapsible` · `Carousel` · `Banner` · `Item` · `EmptyState`
|
|
78
|
+
|
|
79
|
+
**Navegación** — `Sidebar` · `NavigationMenu` · `Menubar` · `Breadcrumb` · `Pagination` · `Command`
|
|
80
|
+
|
|
81
|
+
**Overlays** — `Dialog` · `Drawer` · `Sheet` · `AlertDialog` · `DropdownMenu` · `ContextMenu` · `Popover` · `HoverCard` · `Tooltip` · `Toaster`
|
|
82
|
+
|
|
83
|
+
**Feedback** — `Alert` · `Badge` · `Avatar`
|
|
84
|
+
|
|
85
|
+
**Marketing** — `Hero` (6 variantes) · `LogoCloud` · `LogoMarquee`
|
|
86
|
+
|
|
87
|
+
## Licencia
|
|
88
|
+
|
|
89
|
+
MIT © 2026 [3DF Space](https://github.com/3df-space)
|
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@3df-spa/ui",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Vue 3 component library — TypeScript strict, Tailwind CSS v4, accessible, zero-runtime",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"vue3",
|
|
8
|
+
"components",
|
|
9
|
+
"ui",
|
|
10
|
+
"design-system",
|
|
11
|
+
"tailwind",
|
|
12
|
+
"typescript",
|
|
13
|
+
"accessible"
|
|
14
|
+
],
|
|
15
|
+
"homepage": "https://github.com/3DF-SpA/3df-ui#readme",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/3DF-SpA/3df-ui/issues"
|
|
18
|
+
},
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "https://github.com/3DF-SpA/3df-ui.git",
|
|
22
|
+
"directory": "packages/ui"
|
|
23
|
+
},
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"type": "module",
|
|
26
|
+
"sideEffects": [
|
|
27
|
+
"**/*.css"
|
|
28
|
+
],
|
|
29
|
+
"exports": {
|
|
30
|
+
".": {
|
|
31
|
+
"import": {
|
|
32
|
+
"types": "./dist/index.d.ts",
|
|
33
|
+
"default": "./dist/index.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"./theme.css": "./src/styles/theme.css",
|
|
37
|
+
"./styles.css": "./dist/styles.css",
|
|
38
|
+
"./safelist": "./dist/safelist.html"
|
|
39
|
+
},
|
|
40
|
+
"main": "./dist/index.js",
|
|
41
|
+
"types": "./dist/index.d.ts",
|
|
42
|
+
"files": [
|
|
43
|
+
"dist",
|
|
44
|
+
"src/styles",
|
|
45
|
+
"README.md",
|
|
46
|
+
"LICENSE"
|
|
47
|
+
],
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"class-variance-authority": "^0.7.1",
|
|
50
|
+
"clsx": "^2.1.1",
|
|
51
|
+
"date-fns": "^3.0.0 || ^4.0.0",
|
|
52
|
+
"embla-carousel": "^8.0.0",
|
|
53
|
+
"tailwind-merge": "^3.4.0",
|
|
54
|
+
"vue": "^3.0.0"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
58
|
+
"date-fns": "^4.1.0",
|
|
59
|
+
"embla-carousel": "^8.6.0",
|
|
60
|
+
"vite": "^7.3.1",
|
|
61
|
+
"@tailwindcss/cli": "^4.1.18",
|
|
62
|
+
"tailwindcss": "^4.1.18",
|
|
63
|
+
"vite-plugin-dts": "^4.5.4",
|
|
64
|
+
"vue": "^3.5.27"
|
|
65
|
+
},
|
|
66
|
+
"publishConfig": {
|
|
67
|
+
"access": "public",
|
|
68
|
+
"registry": "https://registry.npmjs.org"
|
|
69
|
+
},
|
|
70
|
+
"scripts": {
|
|
71
|
+
"build": "vite build && node scripts/generate-safelist.mjs && node scripts/generate-styles.mjs",
|
|
72
|
+
"dev": "vite build --watch"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,999 @@
|
|
|
1
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
2
|
+
|
|
3
|
+
/* Auto-register compiled components as Tailwind source.
|
|
4
|
+
Resolved relative to THIS file → ../../dist = packages/ui/dist/.
|
|
5
|
+
Consumers no longer need their own @source directive. */
|
|
6
|
+
@source "../../dist";
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
/* ── Color Tokens ─────────────────────────────── */
|
|
10
|
+
--color-background: hsl(0 0% 98%);
|
|
11
|
+
--color-foreground: hsl(0 0% 3.9%);
|
|
12
|
+
|
|
13
|
+
--color-card: hsl(0 0% 100%);
|
|
14
|
+
--color-card-foreground: hsl(0 0% 3.9%);
|
|
15
|
+
|
|
16
|
+
--color-popover: hsl(0 0% 100%);
|
|
17
|
+
--color-popover-foreground: hsl(0 0% 3.9%);
|
|
18
|
+
|
|
19
|
+
--color-primary: hsl(0 0% 0%);
|
|
20
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
21
|
+
|
|
22
|
+
--color-secondary: hsl(0 0% 94%);
|
|
23
|
+
--color-secondary-foreground: hsl(0 0% 9%);
|
|
24
|
+
|
|
25
|
+
--color-muted: hsl(0 0% 96%);
|
|
26
|
+
--color-muted-foreground: hsl(0 0% 45%);
|
|
27
|
+
|
|
28
|
+
--color-accent: hsl(0 0% 92%);
|
|
29
|
+
--color-accent-foreground: hsl(0 0% 9%);
|
|
30
|
+
|
|
31
|
+
--color-destructive: hsl(0 84% 50%);
|
|
32
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
33
|
+
|
|
34
|
+
--color-success: hsl(152 69% 31%);
|
|
35
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
36
|
+
|
|
37
|
+
--color-warning: hsl(38 92% 50%);
|
|
38
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
39
|
+
|
|
40
|
+
--color-info: hsl(217 91% 60%);
|
|
41
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
42
|
+
|
|
43
|
+
--color-border: hsl(0 0% 85%);
|
|
44
|
+
--color-input: hsl(0 0% 85%);
|
|
45
|
+
--color-ring: hsl(0 0% 25%);
|
|
46
|
+
|
|
47
|
+
--color-sidebar: hsl(0 0% 98%);
|
|
48
|
+
--color-sidebar-foreground: hsl(0 0% 0%);
|
|
49
|
+
--color-sidebar-primary: hsl(0 0% 0%);
|
|
50
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
51
|
+
--color-sidebar-accent: hsl(0 0% 92%);
|
|
52
|
+
--color-sidebar-accent-foreground: hsl(0 0% 0%);
|
|
53
|
+
--color-sidebar-border: hsl(0 0% 85%);
|
|
54
|
+
--color-sidebar-ring: hsl(0 0% 25%);
|
|
55
|
+
|
|
56
|
+
/* ── Chart Colors ─────────────────────────────── */
|
|
57
|
+
--color-chart-1: hsl(215 20% 42%);
|
|
58
|
+
--color-chart-2: hsl(215 12% 58%);
|
|
59
|
+
--color-chart-3: hsl(170 25% 38%);
|
|
60
|
+
--color-chart-4: hsl(340 18% 48%);
|
|
61
|
+
--color-chart-5: hsl(255 18% 52%);
|
|
62
|
+
--color-chart-6: hsl(25 70% 55%);
|
|
63
|
+
--color-chart-7: hsl(280 55% 58%);
|
|
64
|
+
--color-chart-8: hsl(175 55% 45%);
|
|
65
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
66
|
+
--color-chart-10: hsl(330 60% 58%);
|
|
67
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
68
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
69
|
+
|
|
70
|
+
/* ── Radius ───────────────────────────────────── */
|
|
71
|
+
--radius-sm: calc(var(--ui-radius, 0.625rem) * 0.72);
|
|
72
|
+
--radius-md: var(--ui-radius, 0.625rem);
|
|
73
|
+
--radius-lg: calc(var(--ui-radius, 0.625rem) * 1.2);
|
|
74
|
+
--radius-xl: calc(var(--ui-radius, 0.625rem) * 1.6);
|
|
75
|
+
|
|
76
|
+
/* ── Shadows ──────────────────────────────────── */
|
|
77
|
+
--shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.04);
|
|
78
|
+
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.06);
|
|
79
|
+
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.06);
|
|
80
|
+
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.08), 0 2px 4px -2px hsl(0 0% 0% / 0.06);
|
|
81
|
+
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.06);
|
|
82
|
+
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.12), 0 8px 10px -6px hsl(0 0% 0% / 0.08);
|
|
83
|
+
--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.22);
|
|
84
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.06);
|
|
85
|
+
|
|
86
|
+
/* ── Animation Durations ──────────────────────── */
|
|
87
|
+
--duration-instant: 75ms;
|
|
88
|
+
--duration-fast: 150ms;
|
|
89
|
+
--duration-normal: 250ms;
|
|
90
|
+
--duration-slow: 350ms;
|
|
91
|
+
--duration-deliberate: 500ms;
|
|
92
|
+
|
|
93
|
+
/* ── Animation Easings ────────────────────────── */
|
|
94
|
+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
95
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
96
|
+
--ease-snappy: cubic-bezier(0.25, 0, 0, 1);
|
|
97
|
+
--ease-bounce-in: cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
98
|
+
--ease-bounce-out: cubic-bezier(0.215, 0.61, 0.355, 1.0);
|
|
99
|
+
|
|
100
|
+
/* ── Named Animations ─────────────────────────── */
|
|
101
|
+
--animate-fade-in: fade-in var(--duration-normal) var(--ease-smooth) both;
|
|
102
|
+
--animate-fade-out: fade-out var(--duration-fast) var(--ease-smooth) both;
|
|
103
|
+
--animate-slide-up: slide-up var(--duration-normal) var(--ease-snappy) both;
|
|
104
|
+
--animate-slide-down: slide-down var(--duration-normal) var(--ease-snappy) both;
|
|
105
|
+
--animate-scale-in: scale-in var(--duration-normal) var(--ease-spring) both;
|
|
106
|
+
--animate-scale-out: scale-out var(--duration-fast) var(--ease-smooth) both;
|
|
107
|
+
--animate-shimmer: shimmer 1.6s var(--ease-smooth) infinite;
|
|
108
|
+
--animate-pulse-soft: pulse-soft 2.2s var(--ease-smooth) infinite;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@utility border-ui {
|
|
112
|
+
border-width: var(--ui-border-width, 2px);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@utility border-t-ui {
|
|
116
|
+
border-top-width: var(--ui-border-width, 2px);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@utility border-r-ui {
|
|
120
|
+
border-right-width: var(--ui-border-width, 2px);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@utility border-b-ui {
|
|
124
|
+
border-bottom-width: var(--ui-border-width, 2px);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@utility border-l-ui {
|
|
128
|
+
border-left-width: var(--ui-border-width, 2px);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* ── Keyframes ────────────────────────────────────── */
|
|
132
|
+
@keyframes fade-in {
|
|
133
|
+
from { opacity: 0; }
|
|
134
|
+
to { opacity: 1; }
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes fade-out {
|
|
138
|
+
from { opacity: 1; }
|
|
139
|
+
to { opacity: 0; }
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@keyframes slide-up {
|
|
143
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
144
|
+
to { opacity: 1; transform: translateY(0); }
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@keyframes slide-down {
|
|
148
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
149
|
+
to { opacity: 1; transform: translateY(0); }
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@keyframes scale-in {
|
|
153
|
+
from { opacity: 0; transform: scale(0.95); }
|
|
154
|
+
to { opacity: 1; transform: scale(1); }
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@keyframes scale-out {
|
|
158
|
+
from { opacity: 1; transform: scale(1); }
|
|
159
|
+
to { opacity: 0; transform: scale(0.95); }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@keyframes shimmer {
|
|
163
|
+
0% { background-position: -200% 0; }
|
|
164
|
+
100% { background-position: 200% 0; }
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
@keyframes pulse-soft {
|
|
168
|
+
0%, 100% { opacity: 1; }
|
|
169
|
+
50% { opacity: 0.55; }
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.dark {
|
|
173
|
+
color-scheme: dark;
|
|
174
|
+
|
|
175
|
+
--color-background: hsl(0 0% 2%);
|
|
176
|
+
--color-foreground: hsl(0 0% 100%);
|
|
177
|
+
|
|
178
|
+
--color-card: hsl(0 0% 4%);
|
|
179
|
+
--color-card-foreground: hsl(0 0% 100%);
|
|
180
|
+
|
|
181
|
+
--color-popover: hsl(0 0% 5%);
|
|
182
|
+
--color-popover-foreground: hsl(0 0% 100%);
|
|
183
|
+
|
|
184
|
+
--color-primary: hsl(0 0% 100%);
|
|
185
|
+
--color-primary-foreground: hsl(0 0% 0%);
|
|
186
|
+
|
|
187
|
+
--color-secondary: hsl(0 0% 12%);
|
|
188
|
+
--color-secondary-foreground: hsl(0 0% 100%);
|
|
189
|
+
|
|
190
|
+
--color-muted: hsl(0 0% 10%);
|
|
191
|
+
--color-muted-foreground: hsl(0 0% 64%);
|
|
192
|
+
|
|
193
|
+
--color-accent: hsl(0 0% 16%);
|
|
194
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
195
|
+
|
|
196
|
+
--color-destructive: hsl(0 72% 51%);
|
|
197
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
198
|
+
|
|
199
|
+
--color-success: hsl(160 84% 39%);
|
|
200
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
201
|
+
|
|
202
|
+
--color-warning: hsl(45 93% 47%);
|
|
203
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
204
|
+
|
|
205
|
+
--color-info: hsl(213 94% 68%);
|
|
206
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
207
|
+
|
|
208
|
+
--color-border: hsl(0 0% 20%);
|
|
209
|
+
--color-input: hsl(0 0% 20%);
|
|
210
|
+
--color-ring: hsl(0 0% 30%);
|
|
211
|
+
|
|
212
|
+
--color-sidebar: hsl(0 0% 4%);
|
|
213
|
+
--color-sidebar-foreground: hsl(0 0% 100%);
|
|
214
|
+
--color-sidebar-primary: hsl(0 0% 100%);
|
|
215
|
+
--color-sidebar-primary-foreground: hsl(0 0% 0%);
|
|
216
|
+
--color-sidebar-accent: hsl(0 0% 16%);
|
|
217
|
+
--color-sidebar-accent-foreground: hsl(0 0% 100%);
|
|
218
|
+
--color-sidebar-border: hsl(0 0% 20%);
|
|
219
|
+
--color-sidebar-ring: hsl(0 0% 30%);
|
|
220
|
+
|
|
221
|
+
--color-chart-1: hsl(215 20% 55%);
|
|
222
|
+
--color-chart-2: hsl(215 12% 45%);
|
|
223
|
+
--color-chart-3: hsl(170 22% 48%);
|
|
224
|
+
--color-chart-4: hsl(340 16% 56%);
|
|
225
|
+
--color-chart-5: hsl(255 16% 62%);
|
|
226
|
+
--color-chart-6: hsl(25 75% 62%);
|
|
227
|
+
--color-chart-7: hsl(280 60% 68%);
|
|
228
|
+
--color-chart-8: hsl(175 60% 55%);
|
|
229
|
+
--color-chart-9: hsl(58 85% 60%);
|
|
230
|
+
--color-chart-10: hsl(330 65% 65%);
|
|
231
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
232
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
233
|
+
|
|
234
|
+
--shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.10);
|
|
235
|
+
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.20);
|
|
236
|
+
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.25), 0 1px 2px -1px hsl(0 0% 0% / 0.20);
|
|
237
|
+
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.28), 0 2px 4px -2px hsl(0 0% 0% / 0.20);
|
|
238
|
+
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.32), 0 4px 6px -4px hsl(0 0% 0% / 0.22);
|
|
239
|
+
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.40), 0 8px 10px -6px hsl(0 0% 0% / 0.28);
|
|
240
|
+
--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.55);
|
|
241
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.20);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.light-3df {
|
|
245
|
+
color-scheme: light;
|
|
246
|
+
|
|
247
|
+
--color-background: hsl(140 20% 98%);
|
|
248
|
+
--color-foreground: hsl(160 50% 5%);
|
|
249
|
+
|
|
250
|
+
--color-card: hsl(140 20% 96%);
|
|
251
|
+
--color-card-foreground: hsl(160 50% 10%);
|
|
252
|
+
|
|
253
|
+
--color-popover: hsl(140 15% 99%);
|
|
254
|
+
--color-popover-foreground: hsl(160 50% 5%);
|
|
255
|
+
|
|
256
|
+
--color-primary: hsl(45 95% 47%);
|
|
257
|
+
--color-primary-foreground: hsl(45 10% 5%);
|
|
258
|
+
|
|
259
|
+
--color-secondary: hsl(160 30% 20%);
|
|
260
|
+
--color-secondary-foreground: hsl(160 10% 98%);
|
|
261
|
+
|
|
262
|
+
--color-muted: hsl(140 10% 90%);
|
|
263
|
+
--color-muted-foreground: hsl(160 10% 35%);
|
|
264
|
+
|
|
265
|
+
--color-accent: hsl(178 75% 40%);
|
|
266
|
+
--color-accent-foreground: hsl(160 50% 5%);
|
|
267
|
+
|
|
268
|
+
--color-destructive: hsl(0 84% 50%);
|
|
269
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
270
|
+
|
|
271
|
+
--color-success: hsl(152 69% 31%);
|
|
272
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
273
|
+
|
|
274
|
+
--color-warning: hsl(38 92% 50%);
|
|
275
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
276
|
+
|
|
277
|
+
--color-info: hsl(200 80% 50%);
|
|
278
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
279
|
+
|
|
280
|
+
--color-border: hsl(140 15% 85%);
|
|
281
|
+
--color-input: hsl(140 15% 85%);
|
|
282
|
+
--color-ring: hsl(45 90% 45%);
|
|
283
|
+
|
|
284
|
+
--color-sidebar: hsl(140 20% 96%);
|
|
285
|
+
--color-sidebar-foreground: hsl(160 50% 5%);
|
|
286
|
+
--color-sidebar-primary: hsl(45 90% 45%);
|
|
287
|
+
--color-sidebar-primary-foreground: hsl(45 10% 5%);
|
|
288
|
+
--color-sidebar-accent: hsl(140 15% 90%);
|
|
289
|
+
--color-sidebar-accent-foreground: hsl(160 50% 5%);
|
|
290
|
+
--color-sidebar-border: hsl(140 15% 85%);
|
|
291
|
+
--color-sidebar-ring: hsl(45 90% 45%);
|
|
292
|
+
|
|
293
|
+
--color-chart-1: hsl(45 90% 45%);
|
|
294
|
+
--color-chart-2: hsl(160 40% 30%);
|
|
295
|
+
--color-chart-3: hsl(180 60% 40%);
|
|
296
|
+
--color-chart-4: hsl(25 70% 50%);
|
|
297
|
+
--color-chart-5: hsl(140 20% 50%);
|
|
298
|
+
--color-chart-6: hsl(35 80% 52%);
|
|
299
|
+
--color-chart-7: hsl(280 40% 52%);
|
|
300
|
+
--color-chart-8: hsl(178 65% 40%);
|
|
301
|
+
--color-chart-9: hsl(60 85% 48%);
|
|
302
|
+
--color-chart-10: hsl(335 55% 52%);
|
|
303
|
+
--color-chart-11: hsl(150 65% 40%);
|
|
304
|
+
--color-chart-12: hsl(0 75% 50%);
|
|
305
|
+
|
|
306
|
+
--shadow-2xs: 0 1px 0 0 hsl(45 80% 30% / 0.06);
|
|
307
|
+
--shadow-xs: 0 1px 2px 0 hsl(45 80% 30% / 0.08);
|
|
308
|
+
--shadow-sm: 0 1px 3px 0 hsl(45 80% 30% / 0.10), 0 1px 2px -1px hsl(45 80% 30% / 0.08);
|
|
309
|
+
--shadow-md: 0 4px 6px -1px hsl(45 80% 30% / 0.12), 0 2px 4px -2px hsl(45 80% 30% / 0.08);
|
|
310
|
+
--shadow-lg: 0 10px 15px -3px hsl(45 80% 30% / 0.14), 0 4px 6px -4px hsl(45 80% 30% / 0.08);
|
|
311
|
+
--shadow-xl: 0 20px 25px -5px hsl(45 80% 30% / 0.16), 0 8px 10px -6px hsl(45 80% 30% / 0.10);
|
|
312
|
+
--shadow-2xl: 0 25px 50px -12px hsl(45 80% 30% / 0.25);
|
|
313
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(45 80% 30% / 0.08);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.dark-3df {
|
|
317
|
+
color-scheme: dark;
|
|
318
|
+
|
|
319
|
+
--color-background: hsl(160 25% 4%);
|
|
320
|
+
--color-foreground: hsl(140 10% 95%);
|
|
321
|
+
|
|
322
|
+
--color-card: hsl(160 20% 8%);
|
|
323
|
+
--color-card-foreground: hsl(140 10% 95%);
|
|
324
|
+
|
|
325
|
+
--color-popover: hsl(160 15% 12%);
|
|
326
|
+
--color-popover-foreground: hsl(140 10% 98%);
|
|
327
|
+
|
|
328
|
+
--color-primary: hsl(45 100% 50%);
|
|
329
|
+
--color-primary-foreground: hsl(160 40% 2%);
|
|
330
|
+
|
|
331
|
+
--color-secondary: hsl(160 50% 15%);
|
|
332
|
+
--color-secondary-foreground: hsl(140 20% 90%);
|
|
333
|
+
|
|
334
|
+
--color-muted: hsl(160 30% 8%);
|
|
335
|
+
--color-muted-foreground: hsl(160 10% 65%);
|
|
336
|
+
|
|
337
|
+
--color-accent: hsl(180 85% 50%);
|
|
338
|
+
--color-accent-foreground: hsl(160 40% 2%);
|
|
339
|
+
|
|
340
|
+
--color-destructive: hsl(0 70% 35%);
|
|
341
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
342
|
+
|
|
343
|
+
--color-success: hsl(160 84% 39%);
|
|
344
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
345
|
+
|
|
346
|
+
--color-warning: hsl(45 93% 47%);
|
|
347
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
348
|
+
|
|
349
|
+
--color-info: hsl(200 85% 60%);
|
|
350
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
351
|
+
|
|
352
|
+
--color-border: hsl(160 15% 15%);
|
|
353
|
+
--color-input: hsl(160 30% 15%);
|
|
354
|
+
--color-ring: hsl(45 100% 50%);
|
|
355
|
+
|
|
356
|
+
--color-sidebar: hsl(160 40% 3%);
|
|
357
|
+
--color-sidebar-foreground: hsl(140 10% 95%);
|
|
358
|
+
--color-sidebar-primary: hsl(45 100% 50%);
|
|
359
|
+
--color-sidebar-primary-foreground: hsl(160 40% 2%);
|
|
360
|
+
--color-sidebar-accent: hsl(160 30% 10%);
|
|
361
|
+
--color-sidebar-accent-foreground: hsl(140 10% 95%);
|
|
362
|
+
--color-sidebar-border: hsl(160 30% 15%);
|
|
363
|
+
--color-sidebar-ring: hsl(45 100% 50%);
|
|
364
|
+
|
|
365
|
+
--color-chart-1: hsl(45 100% 50%);
|
|
366
|
+
--color-chart-2: hsl(180 80% 50%);
|
|
367
|
+
--color-chart-3: hsl(150 60% 50%);
|
|
368
|
+
--color-chart-4: hsl(30 90% 60%);
|
|
369
|
+
--color-chart-5: hsl(200 70% 60%);
|
|
370
|
+
--color-chart-6: hsl(35 90% 62%);
|
|
371
|
+
--color-chart-7: hsl(280 70% 70%);
|
|
372
|
+
--color-chart-8: hsl(178 75% 60%);
|
|
373
|
+
--color-chart-9: hsl(60 90% 60%);
|
|
374
|
+
--color-chart-10: hsl(335 65% 65%);
|
|
375
|
+
--color-chart-11: hsl(150 70% 55%);
|
|
376
|
+
--color-chart-12: hsl(0 70% 60%);
|
|
377
|
+
|
|
378
|
+
--shadow-2xs: 0 1px 0 0 hsl(45 100% 30% / 0.15);
|
|
379
|
+
--shadow-xs: 0 1px 2px 0 hsl(45 100% 20% / 0.30);
|
|
380
|
+
--shadow-sm: 0 1px 3px 0 hsl(45 100% 20% / 0.35), 0 1px 2px -1px hsl(45 100% 20% / 0.25);
|
|
381
|
+
--shadow-md: 0 4px 6px -1px hsl(45 100% 20% / 0.40), 0 2px 4px -2px hsl(45 100% 20% / 0.28);
|
|
382
|
+
--shadow-lg: 0 10px 15px -3px hsl(45 100% 20% / 0.45), 0 4px 6px -4px hsl(45 100% 20% / 0.30);
|
|
383
|
+
--shadow-xl: 0 20px 25px -5px hsl(45 100% 20% / 0.55), 0 8px 10px -6px hsl(45 100% 20% / 0.35);
|
|
384
|
+
--shadow-2xl: 0 25px 50px -12px hsl(45 100% 20% / 0.65);
|
|
385
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(45 100% 20% / 0.25);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.light-coffee {
|
|
389
|
+
color-scheme: light;
|
|
390
|
+
|
|
391
|
+
--color-background: hsl(36 30% 98%);
|
|
392
|
+
--color-foreground: hsl(25 20% 15%);
|
|
393
|
+
|
|
394
|
+
--color-card: hsl(36 30% 96%);
|
|
395
|
+
--color-card-foreground: hsl(25 20% 15%);
|
|
396
|
+
|
|
397
|
+
--color-popover: hsl(36 30% 98%);
|
|
398
|
+
--color-popover-foreground: hsl(25 20% 15%);
|
|
399
|
+
|
|
400
|
+
--color-primary: hsl(28 50% 45%);
|
|
401
|
+
--color-primary-foreground: hsl(36 30% 98%);
|
|
402
|
+
|
|
403
|
+
--color-secondary: hsl(30 25% 90%);
|
|
404
|
+
--color-secondary-foreground: hsl(25 30% 20%);
|
|
405
|
+
|
|
406
|
+
--color-muted: hsl(30 20% 94%);
|
|
407
|
+
--color-muted-foreground: hsl(25 10% 45%);
|
|
408
|
+
|
|
409
|
+
--color-accent: hsl(35 40% 92%);
|
|
410
|
+
--color-accent-foreground: hsl(28 50% 45%);
|
|
411
|
+
|
|
412
|
+
--color-destructive: hsl(0 84% 60%);
|
|
413
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
414
|
+
|
|
415
|
+
--color-success: hsl(152 69% 31%);
|
|
416
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
417
|
+
|
|
418
|
+
--color-warning: hsl(38 92% 50%);
|
|
419
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
420
|
+
|
|
421
|
+
--color-info: hsl(217 91% 60%);
|
|
422
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
423
|
+
|
|
424
|
+
--color-border: hsl(30 15% 88%);
|
|
425
|
+
--color-input: hsl(30 15% 88%);
|
|
426
|
+
--color-ring: hsl(28 50% 45%);
|
|
427
|
+
|
|
428
|
+
--color-sidebar: hsl(36 25% 95%);
|
|
429
|
+
--color-sidebar-foreground: hsl(25 20% 15%);
|
|
430
|
+
--color-sidebar-primary: hsl(28 50% 45%);
|
|
431
|
+
--color-sidebar-primary-foreground: hsl(36 30% 98%);
|
|
432
|
+
--color-sidebar-accent: hsl(35 30% 88%);
|
|
433
|
+
--color-sidebar-accent-foreground: hsl(28 50% 45%);
|
|
434
|
+
--color-sidebar-border: hsl(30 15% 85%);
|
|
435
|
+
--color-sidebar-ring: hsl(28 50% 45%);
|
|
436
|
+
|
|
437
|
+
--color-chart-1: hsl(28 60% 50%);
|
|
438
|
+
--color-chart-2: hsl(150 30% 40%);
|
|
439
|
+
--color-chart-3: hsl(35 80% 45%);
|
|
440
|
+
--color-chart-4: hsl(10 60% 55%);
|
|
441
|
+
--color-chart-5: hsl(200 40% 50%);
|
|
442
|
+
--color-chart-6: hsl(25 75% 55%);
|
|
443
|
+
--color-chart-7: hsl(275 35% 52%);
|
|
444
|
+
--color-chart-8: hsl(172 45% 42%);
|
|
445
|
+
--color-chart-9: hsl(42 85% 52%);
|
|
446
|
+
--color-chart-10: hsl(350 55% 55%);
|
|
447
|
+
--color-chart-11: hsl(148 60% 38%);
|
|
448
|
+
--color-chart-12: hsl(5 70% 52%);
|
|
449
|
+
|
|
450
|
+
--shadow-2xs: 0 1px 0 0 hsl(28 50% 25% / 0.06);
|
|
451
|
+
--shadow-xs: 0 1px 2px 0 hsl(28 50% 25% / 0.08);
|
|
452
|
+
--shadow-sm: 0 1px 3px 0 hsl(28 50% 25% / 0.10), 0 1px 2px -1px hsl(28 50% 25% / 0.08);
|
|
453
|
+
--shadow-md: 0 4px 6px -1px hsl(28 50% 25% / 0.12), 0 2px 4px -2px hsl(28 50% 25% / 0.08);
|
|
454
|
+
--shadow-lg: 0 10px 15px -3px hsl(28 50% 25% / 0.14), 0 4px 6px -4px hsl(28 50% 25% / 0.08);
|
|
455
|
+
--shadow-xl: 0 20px 25px -5px hsl(28 50% 25% / 0.16), 0 8px 10px -6px hsl(28 50% 25% / 0.10);
|
|
456
|
+
--shadow-2xl: 0 25px 50px -12px hsl(28 50% 25% / 0.25);
|
|
457
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(28 50% 25% / 0.08);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.dark-coffee {
|
|
461
|
+
color-scheme: dark;
|
|
462
|
+
|
|
463
|
+
--color-background: hsl(24 25% 6%);
|
|
464
|
+
--color-foreground: hsl(36 20% 90%);
|
|
465
|
+
|
|
466
|
+
--color-card: hsl(24 15% 12%);
|
|
467
|
+
--color-card-foreground: hsl(36 20% 90%);
|
|
468
|
+
|
|
469
|
+
--color-popover: hsl(24 15% 12%);
|
|
470
|
+
--color-popover-foreground: hsl(36 20% 90%);
|
|
471
|
+
|
|
472
|
+
--color-primary: hsl(33 90% 52%);
|
|
473
|
+
--color-primary-foreground: hsl(24 30% 10%);
|
|
474
|
+
|
|
475
|
+
--color-secondary: hsl(24 20% 18%);
|
|
476
|
+
--color-secondary-foreground: hsl(36 20% 90%);
|
|
477
|
+
|
|
478
|
+
--color-muted: hsl(24 15% 16%);
|
|
479
|
+
--color-muted-foreground: hsl(36 10% 65%);
|
|
480
|
+
|
|
481
|
+
--color-accent: hsl(24 25% 20%);
|
|
482
|
+
--color-accent-foreground: hsl(35 85% 55%);
|
|
483
|
+
|
|
484
|
+
--color-destructive: hsl(0 62% 30%);
|
|
485
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
486
|
+
|
|
487
|
+
--color-success: hsl(160 84% 39%);
|
|
488
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
489
|
+
|
|
490
|
+
--color-warning: hsl(45 93% 47%);
|
|
491
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
492
|
+
|
|
493
|
+
--color-info: hsl(213 94% 68%);
|
|
494
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
495
|
+
|
|
496
|
+
--color-border: hsl(24 15% 20%);
|
|
497
|
+
--color-input: hsl(24 15% 20%);
|
|
498
|
+
--color-ring: hsl(35 85% 55%);
|
|
499
|
+
|
|
500
|
+
--color-sidebar: hsl(24 20% 6%);
|
|
501
|
+
--color-sidebar-foreground: hsl(36 20% 90%);
|
|
502
|
+
--color-sidebar-primary: hsl(35 85% 55%);
|
|
503
|
+
--color-sidebar-primary-foreground: hsl(24 30% 10%);
|
|
504
|
+
--color-sidebar-accent: hsl(24 20% 16%);
|
|
505
|
+
--color-sidebar-accent-foreground: hsl(35 85% 55%);
|
|
506
|
+
--color-sidebar-border: hsl(24 15% 18%);
|
|
507
|
+
--color-sidebar-ring: hsl(35 85% 55%);
|
|
508
|
+
|
|
509
|
+
--color-chart-1: hsl(35 90% 55%);
|
|
510
|
+
--color-chart-2: hsl(150 40% 50%);
|
|
511
|
+
--color-chart-3: hsl(28 80% 60%);
|
|
512
|
+
--color-chart-4: hsl(340 60% 60%);
|
|
513
|
+
--color-chart-5: hsl(200 60% 60%);
|
|
514
|
+
--color-chart-6: hsl(25 80% 65%);
|
|
515
|
+
--color-chart-7: hsl(275 50% 65%);
|
|
516
|
+
--color-chart-8: hsl(172 55% 55%);
|
|
517
|
+
--color-chart-9: hsl(42 90% 62%);
|
|
518
|
+
--color-chart-10: hsl(350 65% 65%);
|
|
519
|
+
--color-chart-11: hsl(148 65% 52%);
|
|
520
|
+
--color-chart-12: hsl(5 68% 60%);
|
|
521
|
+
|
|
522
|
+
--shadow-2xs: 0 1px 0 0 hsl(24 30% 5% / 0.30);
|
|
523
|
+
--shadow-xs: 0 1px 2px 0 hsl(24 30% 5% / 0.40);
|
|
524
|
+
--shadow-sm: 0 1px 3px 0 hsl(24 30% 5% / 0.45), 0 1px 2px -1px hsl(24 30% 5% / 0.35);
|
|
525
|
+
--shadow-md: 0 4px 6px -1px hsl(24 30% 5% / 0.50), 0 2px 4px -2px hsl(24 30% 5% / 0.38);
|
|
526
|
+
--shadow-lg: 0 10px 15px -3px hsl(24 30% 5% / 0.55), 0 4px 6px -4px hsl(24 30% 5% / 0.40);
|
|
527
|
+
--shadow-xl: 0 20px 25px -5px hsl(24 30% 5% / 0.62), 0 8px 10px -6px hsl(24 30% 5% / 0.44);
|
|
528
|
+
--shadow-2xl: 0 25px 50px -12px hsl(24 30% 5% / 0.70);
|
|
529
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(24 30% 5% / 0.30);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* ── Ocean Theme (Azul profundo, SaaS, enterprise) ── */
|
|
533
|
+
.light-ocean {
|
|
534
|
+
color-scheme: light;
|
|
535
|
+
--color-background: hsl(210 40% 98%);
|
|
536
|
+
--color-foreground: hsl(222 47% 8%);
|
|
537
|
+
--color-card: hsl(210 40% 100%);
|
|
538
|
+
--color-card-foreground: hsl(222 47% 8%);
|
|
539
|
+
--color-popover: hsl(210 40% 100%);
|
|
540
|
+
--color-popover-foreground: hsl(222 47% 8%);
|
|
541
|
+
--color-primary: hsl(221 83% 53%);
|
|
542
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
543
|
+
--color-secondary: hsl(210 30% 92%);
|
|
544
|
+
--color-secondary-foreground: hsl(222 47% 15%);
|
|
545
|
+
--color-muted: hsl(210 30% 95%);
|
|
546
|
+
--color-muted-foreground: hsl(215 20% 45%);
|
|
547
|
+
--color-accent: hsl(191 91% 37%);
|
|
548
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
549
|
+
--color-destructive: hsl(0 84% 50%);
|
|
550
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
551
|
+
--color-success: hsl(152 69% 31%);
|
|
552
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
553
|
+
--color-warning: hsl(38 92% 50%);
|
|
554
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
555
|
+
--color-info: hsl(221 83% 53%);
|
|
556
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
557
|
+
--color-border: hsl(214 32% 88%);
|
|
558
|
+
--color-input: hsl(214 32% 88%);
|
|
559
|
+
--color-ring: hsl(221 83% 53%);
|
|
560
|
+
--color-sidebar: hsl(210 40% 97%);
|
|
561
|
+
--color-sidebar-foreground: hsl(222 47% 8%);
|
|
562
|
+
--color-sidebar-primary: hsl(221 83% 53%);
|
|
563
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
564
|
+
--color-sidebar-accent: hsl(210 30% 92%);
|
|
565
|
+
--color-sidebar-accent-foreground: hsl(222 47% 15%);
|
|
566
|
+
--color-sidebar-border: hsl(214 32% 88%);
|
|
567
|
+
--color-sidebar-ring: hsl(221 83% 53%);
|
|
568
|
+
--color-chart-1: hsl(221 83% 53%);
|
|
569
|
+
--color-chart-2: hsl(191 91% 37%);
|
|
570
|
+
--color-chart-3: hsl(199 89% 48%);
|
|
571
|
+
--color-chart-4: hsl(250 75% 58%);
|
|
572
|
+
--color-chart-5: hsl(175 60% 42%);
|
|
573
|
+
--color-chart-6: hsl(217 70% 65%);
|
|
574
|
+
--color-chart-7: hsl(260 65% 62%);
|
|
575
|
+
--color-chart-8: hsl(185 75% 48%);
|
|
576
|
+
--color-chart-9: hsl(45 85% 55%);
|
|
577
|
+
--color-chart-10: hsl(350 60% 58%);
|
|
578
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
579
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
580
|
+
--shadow-2xs: 0 1px 0 0 hsl(221 83% 30% / 0.06);
|
|
581
|
+
--shadow-xs: 0 1px 2px 0 hsl(221 83% 30% / 0.08);
|
|
582
|
+
--shadow-sm: 0 1px 3px 0 hsl(221 83% 30% / 0.10), 0 1px 2px -1px hsl(221 83% 30% / 0.08);
|
|
583
|
+
--shadow-md: 0 4px 6px -1px hsl(221 83% 30% / 0.12), 0 2px 4px -2px hsl(221 83% 30% / 0.08);
|
|
584
|
+
--shadow-lg: 0 10px 15px -3px hsl(221 83% 30% / 0.14), 0 4px 6px -4px hsl(221 83% 30% / 0.08);
|
|
585
|
+
--shadow-xl: 0 20px 25px -5px hsl(221 83% 30% / 0.18), 0 8px 10px -6px hsl(221 83% 30% / 0.10);
|
|
586
|
+
--shadow-2xl: 0 25px 50px -12px hsl(221 83% 30% / 0.28);
|
|
587
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(221 83% 30% / 0.08);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.dark-ocean {
|
|
591
|
+
color-scheme: dark;
|
|
592
|
+
--color-background: hsl(222 47% 5%);
|
|
593
|
+
--color-foreground: hsl(210 40% 96%);
|
|
594
|
+
--color-card: hsl(222 47% 8%);
|
|
595
|
+
--color-card-foreground: hsl(210 40% 96%);
|
|
596
|
+
--color-popover: hsl(222 47% 10%);
|
|
597
|
+
--color-popover-foreground: hsl(210 40% 98%);
|
|
598
|
+
--color-primary: hsl(217 91% 60%);
|
|
599
|
+
--color-primary-foreground: hsl(222 47% 4%);
|
|
600
|
+
--color-secondary: hsl(222 30% 15%);
|
|
601
|
+
--color-secondary-foreground: hsl(210 40% 90%);
|
|
602
|
+
--color-muted: hsl(222 30% 12%);
|
|
603
|
+
--color-muted-foreground: hsl(215 20% 60%);
|
|
604
|
+
--color-accent: hsl(191 95% 45%);
|
|
605
|
+
--color-accent-foreground: hsl(222 47% 4%);
|
|
606
|
+
--color-destructive: hsl(0 72% 51%);
|
|
607
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
608
|
+
--color-success: hsl(160 84% 39%);
|
|
609
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
610
|
+
--color-warning: hsl(45 93% 47%);
|
|
611
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
612
|
+
--color-info: hsl(213 94% 68%);
|
|
613
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
614
|
+
--color-border: hsl(222 30% 18%);
|
|
615
|
+
--color-input: hsl(222 30% 18%);
|
|
616
|
+
--color-ring: hsl(217 91% 60%);
|
|
617
|
+
--color-sidebar: hsl(222 47% 3%);
|
|
618
|
+
--color-sidebar-foreground: hsl(210 40% 96%);
|
|
619
|
+
--color-sidebar-primary: hsl(217 91% 60%);
|
|
620
|
+
--color-sidebar-primary-foreground: hsl(222 47% 4%);
|
|
621
|
+
--color-sidebar-accent: hsl(222 30% 14%);
|
|
622
|
+
--color-sidebar-accent-foreground: hsl(210 40% 90%);
|
|
623
|
+
--color-sidebar-border: hsl(222 30% 18%);
|
|
624
|
+
--color-sidebar-ring: hsl(217 91% 60%);
|
|
625
|
+
--color-chart-1: hsl(217 91% 60%);
|
|
626
|
+
--color-chart-2: hsl(191 95% 50%);
|
|
627
|
+
--color-chart-3: hsl(199 89% 58%);
|
|
628
|
+
--color-chart-4: hsl(250 80% 68%);
|
|
629
|
+
--color-chart-5: hsl(175 65% 52%);
|
|
630
|
+
--color-chart-6: hsl(217 75% 70%);
|
|
631
|
+
--color-chart-7: hsl(260 70% 72%);
|
|
632
|
+
--color-chart-8: hsl(185 80% 58%);
|
|
633
|
+
--color-chart-9: hsl(45 90% 62%);
|
|
634
|
+
--color-chart-10: hsl(350 65% 65%);
|
|
635
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
636
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
637
|
+
--shadow-2xs: 0 1px 0 0 hsl(221 83% 10% / 0.30);
|
|
638
|
+
--shadow-xs: 0 1px 2px 0 hsl(221 83% 10% / 0.40);
|
|
639
|
+
--shadow-sm: 0 1px 3px 0 hsl(221 83% 10% / 0.45), 0 1px 2px -1px hsl(221 83% 10% / 0.35);
|
|
640
|
+
--shadow-md: 0 4px 6px -1px hsl(221 83% 10% / 0.50), 0 2px 4px -2px hsl(221 83% 10% / 0.38);
|
|
641
|
+
--shadow-lg: 0 10px 15px -3px hsl(221 83% 10% / 0.55), 0 4px 6px -4px hsl(221 83% 10% / 0.40);
|
|
642
|
+
--shadow-xl: 0 20px 25px -5px hsl(221 83% 10% / 0.62), 0 8px 10px -6px hsl(221 83% 10% / 0.44);
|
|
643
|
+
--shadow-2xl: 0 25px 50px -12px hsl(221 83% 10% / 0.70);
|
|
644
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(221 83% 10% / 0.30);
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
/* ── Aurora Theme (Violeta/índigo, startups creativas, AI) ── */
|
|
648
|
+
.light-aurora {
|
|
649
|
+
color-scheme: light;
|
|
650
|
+
--color-background: hsl(270 30% 98%);
|
|
651
|
+
--color-foreground: hsl(270 50% 8%);
|
|
652
|
+
--color-card: hsl(270 30% 100%);
|
|
653
|
+
--color-card-foreground: hsl(270 50% 8%);
|
|
654
|
+
--color-popover: hsl(270 30% 100%);
|
|
655
|
+
--color-popover-foreground: hsl(270 50% 8%);
|
|
656
|
+
--color-primary: hsl(262 83% 58%);
|
|
657
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
658
|
+
--color-secondary: hsl(270 25% 92%);
|
|
659
|
+
--color-secondary-foreground: hsl(270 50% 15%);
|
|
660
|
+
--color-muted: hsl(270 20% 95%);
|
|
661
|
+
--color-muted-foreground: hsl(270 15% 45%);
|
|
662
|
+
--color-accent: hsl(316 72% 55%);
|
|
663
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
664
|
+
--color-destructive: hsl(0 84% 50%);
|
|
665
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
666
|
+
--color-success: hsl(152 69% 31%);
|
|
667
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
668
|
+
--color-warning: hsl(38 92% 50%);
|
|
669
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
670
|
+
--color-info: hsl(221 83% 53%);
|
|
671
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
672
|
+
--color-border: hsl(270 20% 88%);
|
|
673
|
+
--color-input: hsl(270 20% 88%);
|
|
674
|
+
--color-ring: hsl(262 83% 58%);
|
|
675
|
+
--color-sidebar: hsl(270 30% 97%);
|
|
676
|
+
--color-sidebar-foreground: hsl(270 50% 8%);
|
|
677
|
+
--color-sidebar-primary: hsl(262 83% 58%);
|
|
678
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
679
|
+
--color-sidebar-accent: hsl(270 25% 92%);
|
|
680
|
+
--color-sidebar-accent-foreground: hsl(270 50% 15%);
|
|
681
|
+
--color-sidebar-border: hsl(270 20% 88%);
|
|
682
|
+
--color-sidebar-ring: hsl(262 83% 58%);
|
|
683
|
+
--color-chart-1: hsl(262 83% 58%);
|
|
684
|
+
--color-chart-2: hsl(316 72% 55%);
|
|
685
|
+
--color-chart-3: hsl(240 75% 60%);
|
|
686
|
+
--color-chart-4: hsl(291 64% 58%);
|
|
687
|
+
--color-chart-5: hsl(199 89% 48%);
|
|
688
|
+
--color-chart-6: hsl(280 70% 65%);
|
|
689
|
+
--color-chart-7: hsl(330 65% 60%);
|
|
690
|
+
--color-chart-8: hsl(220 80% 62%);
|
|
691
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
692
|
+
--color-chart-10: hsl(175 60% 45%);
|
|
693
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
694
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
695
|
+
--shadow-2xs: 0 1px 0 0 hsl(262 83% 30% / 0.06);
|
|
696
|
+
--shadow-xs: 0 1px 2px 0 hsl(262 83% 30% / 0.08);
|
|
697
|
+
--shadow-sm: 0 1px 3px 0 hsl(262 83% 30% / 0.10), 0 1px 2px -1px hsl(262 83% 30% / 0.08);
|
|
698
|
+
--shadow-md: 0 4px 6px -1px hsl(262 83% 30% / 0.12), 0 2px 4px -2px hsl(262 83% 30% / 0.08);
|
|
699
|
+
--shadow-lg: 0 10px 15px -3px hsl(262 83% 30% / 0.14), 0 4px 6px -4px hsl(262 83% 30% / 0.08);
|
|
700
|
+
--shadow-xl: 0 20px 25px -5px hsl(262 83% 30% / 0.18), 0 8px 10px -6px hsl(262 83% 30% / 0.10);
|
|
701
|
+
--shadow-2xl: 0 25px 50px -12px hsl(262 83% 30% / 0.28);
|
|
702
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(262 83% 30% / 0.08);
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.dark-aurora {
|
|
706
|
+
color-scheme: dark;
|
|
707
|
+
--color-background: hsl(270 50% 4%);
|
|
708
|
+
--color-foreground: hsl(270 30% 96%);
|
|
709
|
+
--color-card: hsl(270 45% 7%);
|
|
710
|
+
--color-card-foreground: hsl(270 30% 96%);
|
|
711
|
+
--color-popover: hsl(270 45% 9%);
|
|
712
|
+
--color-popover-foreground: hsl(270 30% 98%);
|
|
713
|
+
--color-primary: hsl(262 83% 70%);
|
|
714
|
+
--color-primary-foreground: hsl(270 50% 4%);
|
|
715
|
+
--color-secondary: hsl(270 30% 14%);
|
|
716
|
+
--color-secondary-foreground: hsl(270 30% 90%);
|
|
717
|
+
--color-muted: hsl(270 30% 11%);
|
|
718
|
+
--color-muted-foreground: hsl(270 20% 60%);
|
|
719
|
+
--color-accent: hsl(316 72% 65%);
|
|
720
|
+
--color-accent-foreground: hsl(270 50% 4%);
|
|
721
|
+
--color-destructive: hsl(0 72% 51%);
|
|
722
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
723
|
+
--color-success: hsl(160 84% 39%);
|
|
724
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
725
|
+
--color-warning: hsl(45 93% 47%);
|
|
726
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
727
|
+
--color-info: hsl(213 94% 68%);
|
|
728
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
729
|
+
--color-border: hsl(270 30% 16%);
|
|
730
|
+
--color-input: hsl(270 30% 16%);
|
|
731
|
+
--color-ring: hsl(262 83% 70%);
|
|
732
|
+
--color-sidebar: hsl(270 50% 3%);
|
|
733
|
+
--color-sidebar-foreground: hsl(270 30% 96%);
|
|
734
|
+
--color-sidebar-primary: hsl(262 83% 70%);
|
|
735
|
+
--color-sidebar-primary-foreground: hsl(270 50% 4%);
|
|
736
|
+
--color-sidebar-accent: hsl(270 30% 13%);
|
|
737
|
+
--color-sidebar-accent-foreground: hsl(270 30% 90%);
|
|
738
|
+
--color-sidebar-border: hsl(270 30% 16%);
|
|
739
|
+
--color-sidebar-ring: hsl(262 83% 70%);
|
|
740
|
+
--color-chart-1: hsl(262 83% 70%);
|
|
741
|
+
--color-chart-2: hsl(316 72% 68%);
|
|
742
|
+
--color-chart-3: hsl(240 75% 72%);
|
|
743
|
+
--color-chart-4: hsl(291 64% 68%);
|
|
744
|
+
--color-chart-5: hsl(199 89% 60%);
|
|
745
|
+
--color-chart-6: hsl(280 70% 75%);
|
|
746
|
+
--color-chart-7: hsl(330 65% 70%);
|
|
747
|
+
--color-chart-8: hsl(220 80% 72%);
|
|
748
|
+
--color-chart-9: hsl(58 85% 62%);
|
|
749
|
+
--color-chart-10: hsl(175 65% 55%);
|
|
750
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
751
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
752
|
+
--shadow-2xs: 0 1px 0 0 hsl(262 83% 10% / 0.30);
|
|
753
|
+
--shadow-xs: 0 1px 2px 0 hsl(262 83% 10% / 0.40);
|
|
754
|
+
--shadow-sm: 0 1px 3px 0 hsl(262 83% 10% / 0.45), 0 1px 2px -1px hsl(262 83% 10% / 0.35);
|
|
755
|
+
--shadow-md: 0 4px 6px -1px hsl(262 83% 10% / 0.50), 0 2px 4px -2px hsl(262 83% 10% / 0.38);
|
|
756
|
+
--shadow-lg: 0 10px 15px -3px hsl(262 83% 10% / 0.55), 0 4px 6px -4px hsl(262 83% 10% / 0.40);
|
|
757
|
+
--shadow-xl: 0 20px 25px -5px hsl(262 83% 10% / 0.62), 0 8px 10px -6px hsl(262 83% 10% / 0.44);
|
|
758
|
+
--shadow-2xl: 0 25px 50px -12px hsl(262 83% 10% / 0.70);
|
|
759
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(262 83% 10% / 0.30);
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
/* ── Ember Theme (Rojo/naranja, energía, bold) ── */
|
|
763
|
+
.light-ember {
|
|
764
|
+
color-scheme: light;
|
|
765
|
+
--color-background: hsl(15 30% 98%);
|
|
766
|
+
--color-foreground: hsl(15 50% 8%);
|
|
767
|
+
--color-card: hsl(15 30% 100%);
|
|
768
|
+
--color-card-foreground: hsl(15 50% 8%);
|
|
769
|
+
--color-popover: hsl(15 30% 100%);
|
|
770
|
+
--color-popover-foreground: hsl(15 50% 8%);
|
|
771
|
+
--color-primary: hsl(16 90% 50%);
|
|
772
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
773
|
+
--color-secondary: hsl(15 25% 92%);
|
|
774
|
+
--color-secondary-foreground: hsl(15 50% 15%);
|
|
775
|
+
--color-muted: hsl(15 20% 95%);
|
|
776
|
+
--color-muted-foreground: hsl(15 15% 45%);
|
|
777
|
+
--color-accent: hsl(35 95% 52%);
|
|
778
|
+
--color-accent-foreground: hsl(15 50% 8%);
|
|
779
|
+
--color-destructive: hsl(0 84% 50%);
|
|
780
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
781
|
+
--color-success: hsl(152 69% 31%);
|
|
782
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
783
|
+
--color-warning: hsl(38 92% 50%);
|
|
784
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
785
|
+
--color-info: hsl(217 91% 60%);
|
|
786
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
787
|
+
--color-border: hsl(15 20% 88%);
|
|
788
|
+
--color-input: hsl(15 20% 88%);
|
|
789
|
+
--color-ring: hsl(16 90% 50%);
|
|
790
|
+
--color-sidebar: hsl(15 30% 97%);
|
|
791
|
+
--color-sidebar-foreground: hsl(15 50% 8%);
|
|
792
|
+
--color-sidebar-primary: hsl(16 90% 50%);
|
|
793
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
794
|
+
--color-sidebar-accent: hsl(15 25% 92%);
|
|
795
|
+
--color-sidebar-accent-foreground: hsl(15 50% 15%);
|
|
796
|
+
--color-sidebar-border: hsl(15 20% 88%);
|
|
797
|
+
--color-sidebar-ring: hsl(16 90% 50%);
|
|
798
|
+
--color-chart-1: hsl(16 90% 50%);
|
|
799
|
+
--color-chart-2: hsl(35 95% 52%);
|
|
800
|
+
--color-chart-3: hsl(0 80% 55%);
|
|
801
|
+
--color-chart-4: hsl(50 90% 50%);
|
|
802
|
+
--color-chart-5: hsl(350 75% 48%);
|
|
803
|
+
--color-chart-6: hsl(25 85% 55%);
|
|
804
|
+
--color-chart-7: hsl(280 45% 55%);
|
|
805
|
+
--color-chart-8: hsl(175 50% 45%);
|
|
806
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
807
|
+
--color-chart-10: hsl(330 60% 55%);
|
|
808
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
809
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
810
|
+
--shadow-2xs: 0 1px 0 0 hsl(16 90% 25% / 0.06);
|
|
811
|
+
--shadow-xs: 0 1px 2px 0 hsl(16 90% 25% / 0.08);
|
|
812
|
+
--shadow-sm: 0 1px 3px 0 hsl(16 90% 25% / 0.10), 0 1px 2px -1px hsl(16 90% 25% / 0.08);
|
|
813
|
+
--shadow-md: 0 4px 6px -1px hsl(16 90% 25% / 0.12), 0 2px 4px -2px hsl(16 90% 25% / 0.08);
|
|
814
|
+
--shadow-lg: 0 10px 15px -3px hsl(16 90% 25% / 0.14), 0 4px 6px -4px hsl(16 90% 25% / 0.08);
|
|
815
|
+
--shadow-xl: 0 20px 25px -5px hsl(16 90% 25% / 0.18), 0 8px 10px -6px hsl(16 90% 25% / 0.10);
|
|
816
|
+
--shadow-2xl: 0 25px 50px -12px hsl(16 90% 25% / 0.28);
|
|
817
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(16 90% 25% / 0.08);
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
.dark-ember {
|
|
821
|
+
color-scheme: dark;
|
|
822
|
+
--color-background: hsl(15 40% 4%);
|
|
823
|
+
--color-foreground: hsl(15 30% 95%);
|
|
824
|
+
--color-card: hsl(15 35% 7%);
|
|
825
|
+
--color-card-foreground: hsl(15 30% 95%);
|
|
826
|
+
--color-popover: hsl(15 35% 9%);
|
|
827
|
+
--color-popover-foreground: hsl(15 30% 98%);
|
|
828
|
+
--color-primary: hsl(16 90% 58%);
|
|
829
|
+
--color-primary-foreground: hsl(15 40% 4%);
|
|
830
|
+
--color-secondary: hsl(15 25% 15%);
|
|
831
|
+
--color-secondary-foreground: hsl(15 30% 88%);
|
|
832
|
+
--color-muted: hsl(15 25% 12%);
|
|
833
|
+
--color-muted-foreground: hsl(15 15% 58%);
|
|
834
|
+
--color-accent: hsl(35 95% 55%);
|
|
835
|
+
--color-accent-foreground: hsl(15 40% 4%);
|
|
836
|
+
--color-destructive: hsl(0 72% 51%);
|
|
837
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
838
|
+
--color-success: hsl(160 84% 39%);
|
|
839
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
840
|
+
--color-warning: hsl(45 93% 47%);
|
|
841
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
842
|
+
--color-info: hsl(213 94% 68%);
|
|
843
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
844
|
+
--color-border: hsl(15 25% 18%);
|
|
845
|
+
--color-input: hsl(15 25% 18%);
|
|
846
|
+
--color-ring: hsl(16 90% 58%);
|
|
847
|
+
--color-sidebar: hsl(15 40% 3%);
|
|
848
|
+
--color-sidebar-foreground: hsl(15 30% 95%);
|
|
849
|
+
--color-sidebar-primary: hsl(16 90% 58%);
|
|
850
|
+
--color-sidebar-primary-foreground: hsl(15 40% 4%);
|
|
851
|
+
--color-sidebar-accent: hsl(15 25% 14%);
|
|
852
|
+
--color-sidebar-accent-foreground: hsl(15 30% 88%);
|
|
853
|
+
--color-sidebar-border: hsl(15 25% 18%);
|
|
854
|
+
--color-sidebar-ring: hsl(16 90% 58%);
|
|
855
|
+
--color-chart-1: hsl(16 90% 60%);
|
|
856
|
+
--color-chart-2: hsl(35 95% 60%);
|
|
857
|
+
--color-chart-3: hsl(0 80% 62%);
|
|
858
|
+
--color-chart-4: hsl(50 90% 58%);
|
|
859
|
+
--color-chart-5: hsl(350 75% 58%);
|
|
860
|
+
--color-chart-6: hsl(25 85% 65%);
|
|
861
|
+
--color-chart-7: hsl(280 50% 65%);
|
|
862
|
+
--color-chart-8: hsl(175 55% 55%);
|
|
863
|
+
--color-chart-9: hsl(58 85% 60%);
|
|
864
|
+
--color-chart-10: hsl(330 65% 65%);
|
|
865
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
866
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
867
|
+
--shadow-2xs: 0 1px 0 0 hsl(15 50% 5% / 0.30);
|
|
868
|
+
--shadow-xs: 0 1px 2px 0 hsl(15 50% 5% / 0.40);
|
|
869
|
+
--shadow-sm: 0 1px 3px 0 hsl(15 50% 5% / 0.45), 0 1px 2px -1px hsl(15 50% 5% / 0.35);
|
|
870
|
+
--shadow-md: 0 4px 6px -1px hsl(15 50% 5% / 0.50), 0 2px 4px -2px hsl(15 50% 5% / 0.38);
|
|
871
|
+
--shadow-lg: 0 10px 15px -3px hsl(15 50% 5% / 0.55), 0 4px 6px -4px hsl(15 50% 5% / 0.40);
|
|
872
|
+
--shadow-xl: 0 20px 25px -5px hsl(15 50% 5% / 0.62), 0 8px 10px -6px hsl(15 50% 5% / 0.44);
|
|
873
|
+
--shadow-2xl: 0 25px 50px -12px hsl(15 50% 5% / 0.70);
|
|
874
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(15 50% 5% / 0.30);
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
/* ── Sakura Theme (Rosa/elegancia) ── */
|
|
878
|
+
.light-sakura {
|
|
879
|
+
color-scheme: light;
|
|
880
|
+
--color-background: hsl(340 30% 98%);
|
|
881
|
+
--color-foreground: hsl(340 40% 8%);
|
|
882
|
+
--color-card: hsl(340 30% 100%);
|
|
883
|
+
--color-card-foreground: hsl(340 40% 8%);
|
|
884
|
+
--color-popover: hsl(340 30% 100%);
|
|
885
|
+
--color-popover-foreground: hsl(340 40% 8%);
|
|
886
|
+
--color-primary: hsl(340 75% 55%);
|
|
887
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
888
|
+
--color-secondary: hsl(340 25% 92%);
|
|
889
|
+
--color-secondary-foreground: hsl(340 40% 15%);
|
|
890
|
+
--color-muted: hsl(340 20% 95%);
|
|
891
|
+
--color-muted-foreground: hsl(340 15% 45%);
|
|
892
|
+
--color-accent: hsl(355 80% 60%);
|
|
893
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
894
|
+
--color-destructive: hsl(0 84% 50%);
|
|
895
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
896
|
+
--color-success: hsl(152 69% 31%);
|
|
897
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
898
|
+
--color-warning: hsl(38 92% 50%);
|
|
899
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
900
|
+
--color-info: hsl(217 91% 60%);
|
|
901
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
902
|
+
--color-border: hsl(340 20% 88%);
|
|
903
|
+
--color-input: hsl(340 20% 88%);
|
|
904
|
+
--color-ring: hsl(340 75% 55%);
|
|
905
|
+
--color-sidebar: hsl(340 30% 97%);
|
|
906
|
+
--color-sidebar-foreground: hsl(340 40% 8%);
|
|
907
|
+
--color-sidebar-primary: hsl(340 75% 55%);
|
|
908
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
909
|
+
--color-sidebar-accent: hsl(340 25% 92%);
|
|
910
|
+
--color-sidebar-accent-foreground: hsl(340 40% 15%);
|
|
911
|
+
--color-sidebar-border: hsl(340 20% 88%);
|
|
912
|
+
--color-sidebar-ring: hsl(340 75% 55%);
|
|
913
|
+
--color-chart-1: hsl(340 75% 55%);
|
|
914
|
+
--color-chart-2: hsl(355 80% 60%);
|
|
915
|
+
--color-chart-3: hsl(320 65% 55%);
|
|
916
|
+
--color-chart-4: hsl(280 55% 58%);
|
|
917
|
+
--color-chart-5: hsl(10 75% 55%);
|
|
918
|
+
--color-chart-6: hsl(350 70% 65%);
|
|
919
|
+
--color-chart-7: hsl(300 50% 60%);
|
|
920
|
+
--color-chart-8: hsl(175 50% 45%);
|
|
921
|
+
--color-chart-9: hsl(45 80% 55%);
|
|
922
|
+
--color-chart-10: hsl(220 65% 58%);
|
|
923
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
924
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
925
|
+
--shadow-2xs: 0 1px 0 0 hsl(340 75% 30% / 0.06);
|
|
926
|
+
--shadow-xs: 0 1px 2px 0 hsl(340 75% 30% / 0.08);
|
|
927
|
+
--shadow-sm: 0 1px 3px 0 hsl(340 75% 30% / 0.10), 0 1px 2px -1px hsl(340 75% 30% / 0.08);
|
|
928
|
+
--shadow-md: 0 4px 6px -1px hsl(340 75% 30% / 0.12), 0 2px 4px -2px hsl(340 75% 30% / 0.08);
|
|
929
|
+
--shadow-lg: 0 10px 15px -3px hsl(340 75% 30% / 0.14), 0 4px 6px -4px hsl(340 75% 30% / 0.08);
|
|
930
|
+
--shadow-xl: 0 20px 25px -5px hsl(340 75% 30% / 0.18), 0 8px 10px -6px hsl(340 75% 30% / 0.10);
|
|
931
|
+
--shadow-2xl: 0 25px 50px -12px hsl(340 75% 30% / 0.28);
|
|
932
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(340 75% 30% / 0.08);
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.dark-sakura {
|
|
936
|
+
color-scheme: dark;
|
|
937
|
+
--color-background: hsl(340 40% 4%);
|
|
938
|
+
--color-foreground: hsl(340 25% 95%);
|
|
939
|
+
--color-card: hsl(340 35% 7%);
|
|
940
|
+
--color-card-foreground: hsl(340 25% 95%);
|
|
941
|
+
--color-popover: hsl(340 35% 9%);
|
|
942
|
+
--color-popover-foreground: hsl(340 25% 98%);
|
|
943
|
+
--color-primary: hsl(340 75% 65%);
|
|
944
|
+
--color-primary-foreground: hsl(340 40% 4%);
|
|
945
|
+
--color-secondary: hsl(340 25% 14%);
|
|
946
|
+
--color-secondary-foreground: hsl(340 25% 88%);
|
|
947
|
+
--color-muted: hsl(340 25% 11%);
|
|
948
|
+
--color-muted-foreground: hsl(340 15% 58%);
|
|
949
|
+
--color-accent: hsl(355 80% 68%);
|
|
950
|
+
--color-accent-foreground: hsl(340 40% 4%);
|
|
951
|
+
--color-destructive: hsl(0 72% 51%);
|
|
952
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
953
|
+
--color-success: hsl(160 84% 39%);
|
|
954
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
955
|
+
--color-warning: hsl(45 93% 47%);
|
|
956
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
957
|
+
--color-info: hsl(213 94% 68%);
|
|
958
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
959
|
+
--color-border: hsl(340 25% 16%);
|
|
960
|
+
--color-input: hsl(340 25% 16%);
|
|
961
|
+
--color-ring: hsl(340 75% 65%);
|
|
962
|
+
--color-sidebar: hsl(340 40% 3%);
|
|
963
|
+
--color-sidebar-foreground: hsl(340 25% 95%);
|
|
964
|
+
--color-sidebar-primary: hsl(340 75% 65%);
|
|
965
|
+
--color-sidebar-primary-foreground: hsl(340 40% 4%);
|
|
966
|
+
--color-sidebar-accent: hsl(340 25% 13%);
|
|
967
|
+
--color-sidebar-accent-foreground: hsl(340 25% 88%);
|
|
968
|
+
--color-sidebar-border: hsl(340 25% 16%);
|
|
969
|
+
--color-sidebar-ring: hsl(340 75% 65%);
|
|
970
|
+
--color-chart-1: hsl(340 75% 65%);
|
|
971
|
+
--color-chart-2: hsl(355 80% 68%);
|
|
972
|
+
--color-chart-3: hsl(320 65% 65%);
|
|
973
|
+
--color-chart-4: hsl(280 55% 68%);
|
|
974
|
+
--color-chart-5: hsl(10 75% 65%);
|
|
975
|
+
--color-chart-6: hsl(350 70% 72%);
|
|
976
|
+
--color-chart-7: hsl(300 50% 68%);
|
|
977
|
+
--color-chart-8: hsl(175 55% 55%);
|
|
978
|
+
--color-chart-9: hsl(45 85% 62%);
|
|
979
|
+
--color-chart-10: hsl(220 65% 68%);
|
|
980
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
981
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
982
|
+
--shadow-2xs: 0 1px 0 0 hsl(340 50% 5% / 0.30);
|
|
983
|
+
--shadow-xs: 0 1px 2px 0 hsl(340 50% 5% / 0.40);
|
|
984
|
+
--shadow-sm: 0 1px 3px 0 hsl(340 50% 5% / 0.45), 0 1px 2px -1px hsl(340 50% 5% / 0.35);
|
|
985
|
+
--shadow-md: 0 4px 6px -1px hsl(340 50% 5% / 0.50), 0 2px 4px -2px hsl(340 50% 5% / 0.38);
|
|
986
|
+
--shadow-lg: 0 10px 15px -3px hsl(340 50% 5% / 0.55), 0 4px 6px -4px hsl(340 50% 5% / 0.40);
|
|
987
|
+
--shadow-xl: 0 20px 25px -5px hsl(340 50% 5% / 0.62), 0 8px 10px -6px hsl(340 50% 5% / 0.44);
|
|
988
|
+
--shadow-2xl: 0 25px 50px -12px hsl(340 50% 5% / 0.70);
|
|
989
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(340 50% 5% / 0.30);
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
:root {
|
|
993
|
+
color-scheme: light;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
body {
|
|
997
|
+
background: var(--color-background);
|
|
998
|
+
color: var(--color-foreground);
|
|
999
|
+
}
|