@moontra/moonui 2.4.13 → 2.5.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/dist/chunk-X5ULQZNC.global.js +33 -0
- package/dist/chunk-X5ULQZNC.global.js.map +1 -0
- package/dist/index.global.js +16 -14
- package/dist/index.global.js.map +1 -1
- package/dist/lib/theme.d.mts +90 -0
- package/dist/lib/theme.d.ts +90 -0
- package/dist/lib/theme.global.js +41 -0
- package/dist/lib/theme.global.js.map +1 -0
- package/dist/lib/theme.js +596 -0
- package/dist/lib/theme.js.map +1 -0
- package/dist/lib/theme.mjs +571 -0
- package/dist/lib/theme.mjs.map +1 -0
- package/package.json +23 -10
- package/src/lib/theme-presets.ts +480 -0
- package/src/lib/theme.tsx +227 -363
- package/src/styles/tokens.css +88 -14
- package/tailwind-preset.js +175 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moontra/moonui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"description": "Premium React component library with modern design and customization",
|
|
5
5
|
"author": "MoonUI",
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,12 +17,15 @@
|
|
|
17
17
|
"types": "dist/index.d.ts",
|
|
18
18
|
"unpkg": "dist/index.global.js",
|
|
19
19
|
"jsdelivr": "dist/index.global.js",
|
|
20
|
-
"sideEffects":
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"**/*.css"
|
|
22
|
+
],
|
|
21
23
|
"files": [
|
|
22
24
|
"dist/**",
|
|
23
25
|
"src/**",
|
|
24
26
|
"README.md",
|
|
25
|
-
"LICENSE"
|
|
27
|
+
"LICENSE",
|
|
28
|
+
"tailwind-preset.js"
|
|
26
29
|
],
|
|
27
30
|
"exports": {
|
|
28
31
|
".": {
|
|
@@ -30,11 +33,20 @@
|
|
|
30
33
|
"import": "./dist/index.mjs",
|
|
31
34
|
"require": "./dist/index.js"
|
|
32
35
|
},
|
|
36
|
+
"./theme": {
|
|
37
|
+
"types": "./dist/lib/theme.d.ts",
|
|
38
|
+
"import": "./dist/lib/theme.mjs",
|
|
39
|
+
"require": "./dist/lib/theme.js"
|
|
40
|
+
},
|
|
41
|
+
"./tokens.css": "./src/styles/tokens.css",
|
|
42
|
+
"./design-system.css": "./src/styles/design-system.css",
|
|
33
43
|
"./components/*": {
|
|
34
44
|
"source": "./src/components/ui/*.tsx",
|
|
35
45
|
"import": "./dist/components/ui/*.mjs",
|
|
36
46
|
"require": "./dist/components/ui/*.js"
|
|
37
|
-
}
|
|
47
|
+
},
|
|
48
|
+
"./package.json": "./package.json",
|
|
49
|
+
"./tailwind-preset": "./tailwind-preset.js"
|
|
38
50
|
},
|
|
39
51
|
"keywords": [
|
|
40
52
|
"ui",
|
|
@@ -48,17 +60,17 @@
|
|
|
48
60
|
"scripts": {
|
|
49
61
|
"dev": "tsup src/index.tsx --format esm,cjs --dts --watch --sourcemap",
|
|
50
62
|
"build": "npm run build:js && npm run build:dts && node scripts/postbuild.js",
|
|
51
|
-
"build:js": "tsup src/index.tsx --format esm,cjs",
|
|
52
|
-
"build:dts": "tsup src/index.tsx --format esm,cjs --dts-only",
|
|
63
|
+
"build:js": "tsup src/index.tsx src/lib/theme.tsx --format esm,cjs",
|
|
64
|
+
"build:dts": "tsup src/index.tsx src/lib/theme.tsx --format esm,cjs --dts-only",
|
|
53
65
|
"lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
|
|
54
66
|
"clean": "rm -rf dist",
|
|
55
67
|
"prepublishOnly": "npm run clean && npm run build",
|
|
56
68
|
"pub": "npm version patch && npm run build && npm publish --access=public",
|
|
57
69
|
"pub:minor": "npm version minor && npm run build && npm publish --access=public",
|
|
58
70
|
"pub:major": "npm version major && npm run build && npm publish --access=public",
|
|
59
|
-
"test": "jest",
|
|
60
|
-
"test:watch": "jest --watch",
|
|
61
|
-
"test:coverage": "jest --coverage"
|
|
71
|
+
"test": "cd ../.. && npx jest packages/moonui",
|
|
72
|
+
"test:watch": "cd ../.. && npx jest packages/moonui --watch",
|
|
73
|
+
"test:coverage": "cd ../.. && npx jest packages/moonui --coverage"
|
|
62
74
|
},
|
|
63
75
|
"peerDependencies": {
|
|
64
76
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -109,5 +121,6 @@
|
|
|
109
121
|
"tailwindcss": "^3.4.17",
|
|
110
122
|
"tsup": "^7.1.0",
|
|
111
123
|
"typescript": "^5.1.6"
|
|
112
|
-
}
|
|
124
|
+
},
|
|
125
|
+
"style": "src/styles/tokens.css"
|
|
113
126
|
}
|
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MoonUI tema preset'leri
|
|
3
|
+
*
|
|
4
|
+
* Degerler tokens.css ile AYNI SOZLESMEDE: ham HSL ucusu ("217.2 91.2% 59.8%"),
|
|
5
|
+
* cunku Tailwind preset'i renkleri `hsl(var(--primary) / <alpha-value>)` olarak
|
|
6
|
+
* baglar. Tam hsl(...) fonksiyonu yazilirsa `hsl(hsl(...))` olusur ve renk kirilir.
|
|
7
|
+
*
|
|
8
|
+
* 'default' preset'i tokens.css'in GERCEK degerleridir; ThemeProvider bu preset
|
|
9
|
+
* icin DOM'a hicbir sey yazmaz, statik CSS gecerli kalir (sifir delta).
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/** Bir temanin tasidigi token'lar. Anahtarlar camelCase; DOM'a kebab-case yazilir
|
|
13
|
+
* (cardForeground -> --card-foreground). */
|
|
14
|
+
export interface ThemeTokens {
|
|
15
|
+
background: string;
|
|
16
|
+
foreground: string;
|
|
17
|
+
card: string;
|
|
18
|
+
cardForeground: string;
|
|
19
|
+
popover: string;
|
|
20
|
+
popoverForeground: string;
|
|
21
|
+
primary: string;
|
|
22
|
+
primaryForeground: string;
|
|
23
|
+
secondary: string;
|
|
24
|
+
secondaryForeground: string;
|
|
25
|
+
muted: string;
|
|
26
|
+
mutedForeground: string;
|
|
27
|
+
accent: string;
|
|
28
|
+
accentForeground: string;
|
|
29
|
+
destructive: string;
|
|
30
|
+
destructiveForeground: string;
|
|
31
|
+
border: string;
|
|
32
|
+
input: string;
|
|
33
|
+
ring: string;
|
|
34
|
+
chart1?: string;
|
|
35
|
+
chart2?: string;
|
|
36
|
+
chart3?: string;
|
|
37
|
+
chart4?: string;
|
|
38
|
+
chart5?: string;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface ThemePresetDefinition {
|
|
42
|
+
name: string;
|
|
43
|
+
description: string;
|
|
44
|
+
category: "general" | "business" | "creative";
|
|
45
|
+
/** rem cinsinden; --radius olarak yazilir */
|
|
46
|
+
radius: number;
|
|
47
|
+
light: ThemeTokens;
|
|
48
|
+
dark: ThemeTokens;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export type ThemePresetName =
|
|
52
|
+
"default"
|
|
53
|
+
| "brand"
|
|
54
|
+
| "corporate"
|
|
55
|
+
| "creative"
|
|
56
|
+
| "nature"
|
|
57
|
+
| "minimal"
|
|
58
|
+
| "ocean";
|
|
59
|
+
|
|
60
|
+
export const themePresets: Record<ThemePresetName, ThemePresetDefinition> = {
|
|
61
|
+
default: {
|
|
62
|
+
name: "Default",
|
|
63
|
+
description: "MoonUI's standard theme",
|
|
64
|
+
category: "general",
|
|
65
|
+
radius: 0.5,
|
|
66
|
+
light: {
|
|
67
|
+
background: "0 0% 100%",
|
|
68
|
+
foreground: "222.2 84% 4.9%",
|
|
69
|
+
card: "0 0% 100%",
|
|
70
|
+
cardForeground: "222.2 84% 4.9%",
|
|
71
|
+
popover: "0 0% 100%",
|
|
72
|
+
popoverForeground: "222.2 84% 4.9%",
|
|
73
|
+
primary: "217.2 91.2% 59.8%",
|
|
74
|
+
primaryForeground: "222.2 47.4% 11.2%",
|
|
75
|
+
secondary: "217.2 32.6% 94%",
|
|
76
|
+
secondaryForeground: "217.2 91.2% 59.8%",
|
|
77
|
+
muted: "217.2 32.6% 96%",
|
|
78
|
+
mutedForeground: "215.4 16.3% 46.9%",
|
|
79
|
+
accent: "217.2 32.6% 94%",
|
|
80
|
+
accentForeground: "217.2 91.2% 59.8%",
|
|
81
|
+
destructive: "0 84.2% 60.2%",
|
|
82
|
+
destructiveForeground: "210 40% 98%",
|
|
83
|
+
border: "214.3 31.8% 91.4%",
|
|
84
|
+
input: "214.3 31.8% 91.4%",
|
|
85
|
+
ring: "217.2 91.2% 59.8%",
|
|
86
|
+
chart1: "12 76% 61%",
|
|
87
|
+
chart2: "173 58% 39%",
|
|
88
|
+
chart3: "197 37% 24%",
|
|
89
|
+
chart4: "43 74% 66%",
|
|
90
|
+
chart5: "27 87% 67%",
|
|
91
|
+
},
|
|
92
|
+
dark: {
|
|
93
|
+
background: "224 71% 4%",
|
|
94
|
+
foreground: "213 31% 91%",
|
|
95
|
+
card: "224 71% 4%",
|
|
96
|
+
cardForeground: "213 31% 91%",
|
|
97
|
+
popover: "224 71% 4%",
|
|
98
|
+
popoverForeground: "213 31% 91%",
|
|
99
|
+
primary: "210 40% 98%",
|
|
100
|
+
primaryForeground: "222.2 47.4% 1.2%",
|
|
101
|
+
secondary: "222.2 84% 4.9%",
|
|
102
|
+
secondaryForeground: "210 40% 98%",
|
|
103
|
+
muted: "223 47% 11%",
|
|
104
|
+
mutedForeground: "215.4 16.3% 56.9%",
|
|
105
|
+
accent: "216 34% 17%",
|
|
106
|
+
accentForeground: "210 40% 98%",
|
|
107
|
+
destructive: "0 63% 31%",
|
|
108
|
+
destructiveForeground: "210 40% 98%",
|
|
109
|
+
border: "216 34% 17%",
|
|
110
|
+
input: "216 34% 17%",
|
|
111
|
+
ring: "216 34% 17%",
|
|
112
|
+
chart1: "220 70% 50%",
|
|
113
|
+
chart2: "160 60% 45%",
|
|
114
|
+
chart3: "30 80% 55%",
|
|
115
|
+
chart4: "280 65% 60%",
|
|
116
|
+
chart5: "340 75% 55%",
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* MoonUI marka temasi — mor butonlar.
|
|
122
|
+
*
|
|
123
|
+
* BILEREK OPT-IN: --primary'nin kendisi mora CEKILMEDI. Cekilseydi paketi
|
|
124
|
+
* kullanan tum projelerin butonlari surum yukseltmesinde sessizce maviden mora
|
|
125
|
+
* doner, renk akislari bozulurdu. Marka rengi isteyen bu preset'i secer ya da
|
|
126
|
+
* dogrudan `bg-brand-600` yazar; hicbir mevcut tuketici etkilenmez.
|
|
127
|
+
*
|
|
128
|
+
* default ile tek farki --primary ailesi: brand-600 (= --brand-600, purple-600).
|
|
129
|
+
* Beyaz metinle kontrast 5.38:1 — WCAG AA gecer (varsayilan mavi 3.68 ile GECMEZ).
|
|
130
|
+
*/
|
|
131
|
+
brand: {
|
|
132
|
+
name: "Brand",
|
|
133
|
+
description: "MoonUI's purple brand identity",
|
|
134
|
+
category: "general",
|
|
135
|
+
radius: 0.5,
|
|
136
|
+
light: {
|
|
137
|
+
background: "0 0% 100%",
|
|
138
|
+
foreground: "222.2 84% 4.9%",
|
|
139
|
+
card: "0 0% 100%",
|
|
140
|
+
cardForeground: "222.2 84% 4.9%",
|
|
141
|
+
popover: "0 0% 100%",
|
|
142
|
+
popoverForeground: "222.2 84% 4.9%",
|
|
143
|
+
primary: "271.5 81.3% 55.9%",
|
|
144
|
+
primaryForeground: "0 0% 100%",
|
|
145
|
+
secondary: "217.2 32.6% 94%",
|
|
146
|
+
secondaryForeground: "271.5 81.3% 55.9%",
|
|
147
|
+
muted: "217.2 32.6% 96%",
|
|
148
|
+
mutedForeground: "215.4 16.3% 46.9%",
|
|
149
|
+
accent: "217.2 32.6% 94%",
|
|
150
|
+
accentForeground: "271.5 81.3% 55.9%",
|
|
151
|
+
destructive: "0 84.2% 60.2%",
|
|
152
|
+
destructiveForeground: "210 40% 98%",
|
|
153
|
+
border: "214.3 31.8% 91.4%",
|
|
154
|
+
input: "214.3 31.8% 91.4%",
|
|
155
|
+
ring: "271.5 81.3% 55.9%",
|
|
156
|
+
chart1: "12 76% 61%",
|
|
157
|
+
chart2: "173 58% 39%",
|
|
158
|
+
chart3: "197 37% 24%",
|
|
159
|
+
chart4: "43 74% 66%",
|
|
160
|
+
chart5: "27 87% 67%",
|
|
161
|
+
},
|
|
162
|
+
dark: {
|
|
163
|
+
background: "224 71% 4%",
|
|
164
|
+
foreground: "213 31% 91%",
|
|
165
|
+
card: "224 71% 4%",
|
|
166
|
+
cardForeground: "213 31% 91%",
|
|
167
|
+
popover: "224 71% 4%",
|
|
168
|
+
popoverForeground: "213 31% 91%",
|
|
169
|
+
primary: "271.5 81.3% 55.9%",
|
|
170
|
+
primaryForeground: "0 0% 100%",
|
|
171
|
+
secondary: "222.2 84% 4.9%",
|
|
172
|
+
secondaryForeground: "210 40% 98%",
|
|
173
|
+
muted: "223 47% 11%",
|
|
174
|
+
mutedForeground: "215.4 16.3% 56.9%",
|
|
175
|
+
accent: "216 34% 17%",
|
|
176
|
+
accentForeground: "210 40% 98%",
|
|
177
|
+
destructive: "0 63% 31%",
|
|
178
|
+
destructiveForeground: "210 40% 98%",
|
|
179
|
+
border: "216 34% 17%",
|
|
180
|
+
input: "216 34% 17%",
|
|
181
|
+
ring: "270.7 91% 65.1%",
|
|
182
|
+
chart1: "220 70% 50%",
|
|
183
|
+
chart2: "160 60% 45%",
|
|
184
|
+
chart3: "30 80% 55%",
|
|
185
|
+
chart4: "280 65% 60%",
|
|
186
|
+
chart5: "340 75% 55%",
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
|
|
190
|
+
corporate: {
|
|
191
|
+
name: "Corporate",
|
|
192
|
+
description: "Professional theme for business applications",
|
|
193
|
+
category: "business",
|
|
194
|
+
radius: 0.25,
|
|
195
|
+
light: {
|
|
196
|
+
background: "0 0% 100%",
|
|
197
|
+
foreground: "221 39% 11%",
|
|
198
|
+
card: "0 0% 100%",
|
|
199
|
+
cardForeground: "221 39% 11%",
|
|
200
|
+
popover: "0 0% 100%",
|
|
201
|
+
popoverForeground: "221 39% 11%",
|
|
202
|
+
primary: "221 83% 53%",
|
|
203
|
+
primaryForeground: "0 0% 100%",
|
|
204
|
+
secondary: "215 28% 17%",
|
|
205
|
+
secondaryForeground: "0 0% 100%",
|
|
206
|
+
muted: "213 27% 84%",
|
|
207
|
+
mutedForeground: "215 20% 40%",
|
|
208
|
+
accent: "213 27% 84%",
|
|
209
|
+
accentForeground: "221 39% 11%",
|
|
210
|
+
destructive: "0 84.2% 60.2%",
|
|
211
|
+
destructiveForeground: "0 0% 100%",
|
|
212
|
+
border: "214 32% 91%",
|
|
213
|
+
input: "214 32% 91%",
|
|
214
|
+
ring: "221 83% 53%",
|
|
215
|
+
chart1: "221 83% 53%",
|
|
216
|
+
chart2: "212 95% 68%",
|
|
217
|
+
chart3: "216 92% 60%",
|
|
218
|
+
chart4: "210 98% 78%",
|
|
219
|
+
chart5: "212 97% 87%",
|
|
220
|
+
},
|
|
221
|
+
dark: {
|
|
222
|
+
background: "221 39% 7%",
|
|
223
|
+
foreground: "213 31% 91%",
|
|
224
|
+
card: "221 39% 9%",
|
|
225
|
+
cardForeground: "213 31% 91%",
|
|
226
|
+
popover: "0 0% 100%",
|
|
227
|
+
popoverForeground: "221 39% 11%",
|
|
228
|
+
primary: "217 91% 60%",
|
|
229
|
+
primaryForeground: "221 39% 11%",
|
|
230
|
+
secondary: "215 28% 25%",
|
|
231
|
+
secondaryForeground: "213 31% 91%",
|
|
232
|
+
muted: "215 28% 17%",
|
|
233
|
+
mutedForeground: "215 20% 65%",
|
|
234
|
+
accent: "215 28% 20%",
|
|
235
|
+
accentForeground: "213 31% 91%",
|
|
236
|
+
destructive: "0 84.2% 60.2%",
|
|
237
|
+
destructiveForeground: "0 0% 100%",
|
|
238
|
+
border: "215 28% 17%",
|
|
239
|
+
input: "215 28% 17%",
|
|
240
|
+
ring: "217 91% 60%",
|
|
241
|
+
chart1: "221 83% 53%",
|
|
242
|
+
chart2: "212 95% 68%",
|
|
243
|
+
chart3: "216 92% 60%",
|
|
244
|
+
chart4: "210 98% 78%",
|
|
245
|
+
chart5: "212 97% 87%",
|
|
246
|
+
},
|
|
247
|
+
},
|
|
248
|
+
creative: {
|
|
249
|
+
name: "Creative",
|
|
250
|
+
description: "Vibrant theme for creative projects",
|
|
251
|
+
category: "creative",
|
|
252
|
+
radius: 1,
|
|
253
|
+
light: {
|
|
254
|
+
background: "0 0% 100%",
|
|
255
|
+
foreground: "240 10% 3.9%",
|
|
256
|
+
card: "0 0% 100%",
|
|
257
|
+
cardForeground: "240 10% 3.9%",
|
|
258
|
+
popover: "0 0% 100%",
|
|
259
|
+
popoverForeground: "240 10% 3.9%",
|
|
260
|
+
primary: "262 83% 58%",
|
|
261
|
+
primaryForeground: "0 0% 100%",
|
|
262
|
+
secondary: "270 95% 75%",
|
|
263
|
+
secondaryForeground: "240 10% 3.9%",
|
|
264
|
+
muted: "270 95% 95%",
|
|
265
|
+
mutedForeground: "240 5% 45%",
|
|
266
|
+
accent: "292 84% 61%",
|
|
267
|
+
accentForeground: "0 0% 100%",
|
|
268
|
+
destructive: "0 84.2% 60.2%",
|
|
269
|
+
destructiveForeground: "0 0% 100%",
|
|
270
|
+
border: "270 50% 90%",
|
|
271
|
+
input: "270 50% 90%",
|
|
272
|
+
ring: "262 83% 58%",
|
|
273
|
+
chart1: "262 83% 58%",
|
|
274
|
+
chart2: "292 84% 61%",
|
|
275
|
+
chart3: "330 81% 60%",
|
|
276
|
+
chart4: "350 80% 72%",
|
|
277
|
+
chart5: "10 80% 80%",
|
|
278
|
+
},
|
|
279
|
+
dark: {
|
|
280
|
+
background: "240 10% 3.9%",
|
|
281
|
+
foreground: "0 0% 95%",
|
|
282
|
+
card: "240 10% 5.9%",
|
|
283
|
+
cardForeground: "0 0% 95%",
|
|
284
|
+
popover: "0 0% 100%",
|
|
285
|
+
popoverForeground: "240 10% 3.9%",
|
|
286
|
+
primary: "262 83% 68%",
|
|
287
|
+
primaryForeground: "240 10% 3.9%",
|
|
288
|
+
secondary: "270 50% 20%",
|
|
289
|
+
secondaryForeground: "0 0% 95%",
|
|
290
|
+
muted: "270 50% 15%",
|
|
291
|
+
mutedForeground: "270 10% 60%",
|
|
292
|
+
accent: "292 84% 71%",
|
|
293
|
+
accentForeground: "240 10% 3.9%",
|
|
294
|
+
destructive: "0 84.2% 60.2%",
|
|
295
|
+
destructiveForeground: "0 0% 100%",
|
|
296
|
+
border: "270 50% 18%",
|
|
297
|
+
input: "270 50% 18%",
|
|
298
|
+
ring: "262 83% 68%",
|
|
299
|
+
chart1: "262 83% 58%",
|
|
300
|
+
chart2: "292 84% 61%",
|
|
301
|
+
chart3: "330 81% 60%",
|
|
302
|
+
chart4: "350 80% 72%",
|
|
303
|
+
chart5: "10 80% 80%",
|
|
304
|
+
},
|
|
305
|
+
},
|
|
306
|
+
nature: {
|
|
307
|
+
name: "Nature",
|
|
308
|
+
description: "Nature-inspired green tones",
|
|
309
|
+
category: "creative",
|
|
310
|
+
radius: 0.75,
|
|
311
|
+
light: {
|
|
312
|
+
background: "0 0% 100%",
|
|
313
|
+
foreground: "140 10% 13%",
|
|
314
|
+
card: "0 0% 100%",
|
|
315
|
+
cardForeground: "140 10% 13%",
|
|
316
|
+
popover: "0 0% 100%",
|
|
317
|
+
popoverForeground: "140 10% 13%",
|
|
318
|
+
primary: "142 71% 45%",
|
|
319
|
+
primaryForeground: "0 0% 100%",
|
|
320
|
+
secondary: "138 76% 97%",
|
|
321
|
+
secondaryForeground: "140 10% 13%",
|
|
322
|
+
muted: "138 50% 95%",
|
|
323
|
+
mutedForeground: "140 10% 40%",
|
|
324
|
+
accent: "142 76% 36%",
|
|
325
|
+
accentForeground: "0 0% 100%",
|
|
326
|
+
destructive: "0 84.2% 60.2%",
|
|
327
|
+
destructiveForeground: "0 0% 100%",
|
|
328
|
+
border: "140 30% 90%",
|
|
329
|
+
input: "140 30% 90%",
|
|
330
|
+
ring: "142 71% 45%",
|
|
331
|
+
chart1: "142 71% 45%",
|
|
332
|
+
chart2: "120 61% 50%",
|
|
333
|
+
chart3: "100 61% 45%",
|
|
334
|
+
chart4: "80 61% 50%",
|
|
335
|
+
chart5: "60 70% 50%",
|
|
336
|
+
},
|
|
337
|
+
dark: {
|
|
338
|
+
background: "140 10% 8%",
|
|
339
|
+
foreground: "138 31% 91%",
|
|
340
|
+
card: "140 10% 10%",
|
|
341
|
+
cardForeground: "138 31% 91%",
|
|
342
|
+
popover: "0 0% 100%",
|
|
343
|
+
popoverForeground: "140 10% 13%",
|
|
344
|
+
primary: "142 71% 55%",
|
|
345
|
+
primaryForeground: "140 10% 13%",
|
|
346
|
+
secondary: "138 30% 20%",
|
|
347
|
+
secondaryForeground: "138 31% 91%",
|
|
348
|
+
muted: "138 30% 15%",
|
|
349
|
+
mutedForeground: "138 10% 60%",
|
|
350
|
+
accent: "142 76% 46%",
|
|
351
|
+
accentForeground: "140 10% 13%",
|
|
352
|
+
destructive: "0 84.2% 60.2%",
|
|
353
|
+
destructiveForeground: "0 0% 100%",
|
|
354
|
+
border: "138 30% 18%",
|
|
355
|
+
input: "138 30% 18%",
|
|
356
|
+
ring: "142 71% 55%",
|
|
357
|
+
chart1: "142 71% 45%",
|
|
358
|
+
chart2: "120 61% 50%",
|
|
359
|
+
chart3: "100 61% 45%",
|
|
360
|
+
chart4: "80 61% 50%",
|
|
361
|
+
chart5: "60 70% 50%",
|
|
362
|
+
},
|
|
363
|
+
},
|
|
364
|
+
minimal: {
|
|
365
|
+
name: "Minimal",
|
|
366
|
+
description: "Clean and minimal design",
|
|
367
|
+
category: "general",
|
|
368
|
+
radius: 0,
|
|
369
|
+
light: {
|
|
370
|
+
background: "0 0% 100%",
|
|
371
|
+
foreground: "0 0% 9%",
|
|
372
|
+
card: "0 0% 100%",
|
|
373
|
+
cardForeground: "0 0% 9%",
|
|
374
|
+
popover: "0 0% 100%",
|
|
375
|
+
popoverForeground: "0 0% 9%",
|
|
376
|
+
primary: "0 0% 9%",
|
|
377
|
+
primaryForeground: "0 0% 100%",
|
|
378
|
+
secondary: "0 0% 96%",
|
|
379
|
+
secondaryForeground: "0 0% 9%",
|
|
380
|
+
muted: "0 0% 96%",
|
|
381
|
+
mutedForeground: "0 0% 45%",
|
|
382
|
+
accent: "0 0% 85%",
|
|
383
|
+
accentForeground: "0 0% 9%",
|
|
384
|
+
destructive: "0 84.2% 60.2%",
|
|
385
|
+
destructiveForeground: "0 0% 100%",
|
|
386
|
+
border: "0 0% 91%",
|
|
387
|
+
input: "0 0% 91%",
|
|
388
|
+
ring: "0 0% 9%",
|
|
389
|
+
chart1: "0 0% 20%",
|
|
390
|
+
chart2: "0 0% 40%",
|
|
391
|
+
chart3: "0 0% 60%",
|
|
392
|
+
chart4: "0 0% 80%",
|
|
393
|
+
chart5: "0 0% 90%",
|
|
394
|
+
},
|
|
395
|
+
dark: {
|
|
396
|
+
background: "0 0% 3.9%",
|
|
397
|
+
foreground: "0 0% 98%",
|
|
398
|
+
card: "0 0% 5.9%",
|
|
399
|
+
cardForeground: "0 0% 98%",
|
|
400
|
+
popover: "0 0% 100%",
|
|
401
|
+
popoverForeground: "0 0% 9%",
|
|
402
|
+
primary: "0 0% 98%",
|
|
403
|
+
primaryForeground: "0 0% 3.9%",
|
|
404
|
+
secondary: "0 0% 14%",
|
|
405
|
+
secondaryForeground: "0 0% 98%",
|
|
406
|
+
muted: "0 0% 14%",
|
|
407
|
+
mutedForeground: "0 0% 60%",
|
|
408
|
+
accent: "0 0% 20%",
|
|
409
|
+
accentForeground: "0 0% 98%",
|
|
410
|
+
destructive: "0 84.2% 60.2%",
|
|
411
|
+
destructiveForeground: "0 0% 100%",
|
|
412
|
+
border: "0 0% 14%",
|
|
413
|
+
input: "0 0% 14%",
|
|
414
|
+
ring: "0 0% 98%",
|
|
415
|
+
chart1: "0 0% 20%",
|
|
416
|
+
chart2: "0 0% 40%",
|
|
417
|
+
chart3: "0 0% 60%",
|
|
418
|
+
chart4: "0 0% 80%",
|
|
419
|
+
chart5: "0 0% 90%",
|
|
420
|
+
},
|
|
421
|
+
},
|
|
422
|
+
ocean: {
|
|
423
|
+
name: "Ocean",
|
|
424
|
+
description: "Ocean-inspired blue tones",
|
|
425
|
+
category: "creative",
|
|
426
|
+
radius: 0.5,
|
|
427
|
+
light: {
|
|
428
|
+
background: "0 0% 100%",
|
|
429
|
+
foreground: "200 20% 10%",
|
|
430
|
+
card: "0 0% 100%",
|
|
431
|
+
cardForeground: "200 20% 10%",
|
|
432
|
+
popover: "0 0% 100%",
|
|
433
|
+
popoverForeground: "200 20% 10%",
|
|
434
|
+
primary: "199 89% 48%",
|
|
435
|
+
primaryForeground: "0 0% 100%",
|
|
436
|
+
secondary: "197 71% 95%",
|
|
437
|
+
secondaryForeground: "200 20% 10%",
|
|
438
|
+
muted: "197 71% 95%",
|
|
439
|
+
mutedForeground: "200 15% 40%",
|
|
440
|
+
accent: "186 100% 94%",
|
|
441
|
+
accentForeground: "200 20% 10%",
|
|
442
|
+
destructive: "0 84.2% 60.2%",
|
|
443
|
+
destructiveForeground: "0 0% 100%",
|
|
444
|
+
border: "197 50% 90%",
|
|
445
|
+
input: "197 50% 90%",
|
|
446
|
+
ring: "199 89% 48%",
|
|
447
|
+
chart1: "199 89% 48%",
|
|
448
|
+
chart2: "195 89% 50%",
|
|
449
|
+
chart3: "190 89% 52%",
|
|
450
|
+
chart4: "185 89% 54%",
|
|
451
|
+
chart5: "180 89% 56%",
|
|
452
|
+
},
|
|
453
|
+
dark: {
|
|
454
|
+
background: "200 20% 6%",
|
|
455
|
+
foreground: "197 71% 93%",
|
|
456
|
+
card: "200 20% 8%",
|
|
457
|
+
cardForeground: "197 71% 93%",
|
|
458
|
+
popover: "0 0% 100%",
|
|
459
|
+
popoverForeground: "200 20% 10%",
|
|
460
|
+
primary: "199 89% 58%",
|
|
461
|
+
primaryForeground: "200 20% 10%",
|
|
462
|
+
secondary: "200 50% 15%",
|
|
463
|
+
secondaryForeground: "197 71% 93%",
|
|
464
|
+
muted: "200 50% 12%",
|
|
465
|
+
mutedForeground: "200 15% 65%",
|
|
466
|
+
accent: "186 100% 40%",
|
|
467
|
+
accentForeground: "200 20% 10%",
|
|
468
|
+
destructive: "0 84.2% 60.2%",
|
|
469
|
+
destructiveForeground: "0 0% 100%",
|
|
470
|
+
border: "200 50% 15%",
|
|
471
|
+
input: "200 50% 15%",
|
|
472
|
+
ring: "199 89% 58%",
|
|
473
|
+
chart1: "199 89% 48%",
|
|
474
|
+
chart2: "195 89% 50%",
|
|
475
|
+
chart3: "190 89% 52%",
|
|
476
|
+
chart4: "185 89% 54%",
|
|
477
|
+
chart5: "180 89% 56%",
|
|
478
|
+
},
|
|
479
|
+
},
|
|
480
|
+
};
|