@una-ui/nuxt-edge 1.0.0-alpha.0-29178877.ef4e1af → 1.0.0-alpha.0-29178897.6286913

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.
Files changed (11) hide show
  1. package/dist/module.d.mts +2 -2
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +4 -2
  4. package/dist/runtime/components/misc/ThemeSwitcher.vue +39 -34
  5. package/dist/runtime/composables/useUnaSettings.js +6 -1
  6. package/dist/runtime/composables/useUnaThemes.d.ts +1 -73
  7. package/dist/runtime/composables/useUnaThemes.js +2 -368
  8. package/dist/runtime/plugins/theme.client.js +4 -3
  9. package/dist/runtime/plugins/theme.server.js +5 -2
  10. package/dist/runtime/types/index.d.ts +7 -6
  11. package/package.json +3 -3
package/dist/module.d.mts CHANGED
@@ -4,10 +4,10 @@ export * from '../dist/runtime/types/index.js';
4
4
 
5
5
  declare module '@nuxt/schema' {
6
6
  interface AppConfigInput {
7
- una?: Partial<Omit<UnaSettings, 'primaryColors' | 'grayColors'>>;
7
+ una?: Partial<UnaSettings>;
8
8
  }
9
9
  interface AppConfig {
10
- una: Omit<UnaSettings, 'primaryColors' | 'grayColors'>;
10
+ una: UnaSettings;
11
11
  }
12
12
  }
13
13
  interface ModuleOptions {
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@una-ui/nuxt-edge",
3
3
  "configKey": "una",
4
- "version": "1.0.0-alpha.0-29178877.ef4e1af",
4
+ "version": "1.0.0-alpha.0-29178897.6286913",
5
5
  "compatibility": {
6
6
  "nuxt": ">=3.0.0"
7
7
  },
package/dist/module.mjs CHANGED
@@ -8,7 +8,7 @@ import 'unocss';
8
8
  import 'unocss-preset-animations';
9
9
 
10
10
  const name = "@una-ui/nuxt-edge";
11
- const version = "1.0.0-alpha.0-29178877.ef4e1af";
11
+ const version = "1.0.0-alpha.0-29178897.6286913";
12
12
 
13
13
  const module = defineNuxtModule({
14
14
  meta: {
@@ -34,7 +34,9 @@ const module = defineNuxtModule({
34
34
  primary: "yellow",
35
35
  gray: "stone",
36
36
  radius: 0.625,
37
- fontSize: 16
37
+ fontSize: 16,
38
+ theme: null,
39
+ themes: []
38
40
  },
39
41
  ...nuxt.options.appConfig.una || {}
40
42
  };
package/dist/runtime/components/misc/ThemeSwitcher.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup>
2
- import { useColorMode } from "#imports";
2
+ import { useAppConfig, useColorMode } from "#imports";
3
3
  import { useToggle } from "@vueuse/core";
4
4
  import { capitalize, computed } from "vue";
5
5
  import { useUnaSettings } from "../../composables/useUnaSettings";
@@ -12,12 +12,13 @@ import Popover from "../elements/popover/Popover.vue";
12
12
  import Separator from "../elements/Separator.vue";
13
13
  const colorMode = useColorMode();
14
14
  const [value, toggle] = useToggle();
15
- const { primaryThemes, grayThemes, predefinedThemes } = useUnaThemes();
15
+ const { primaryThemes, grayThemes } = useUnaThemes();
16
+ const { una: { themes } } = useAppConfig();
16
17
  const { settings, reset } = useUnaSettings();
17
18
  const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.["--una-primary-hex"]);
18
19
  const currentPrimaryThemeName = computed(() => {
19
20
  if (settings.value.theme) {
20
- return settings.value.theme.name;
21
+ return settings.value.theme;
21
22
  }
22
23
  const theme = primaryThemes.find(([, theme2]) => theme2["--una-primary-hex"] === currentPrimaryThemeHex.value);
23
24
  return theme ? theme[0] : "";
@@ -93,44 +94,48 @@ function shuffleTheme() {
93
94
  </p>
94
95
  </div>
95
96
 
96
- <Separator />
97
+ <template v-if="themes.length > 0">
98
+ <Separator />
97
99
 
98
- <div class="space-y-2">
99
- <Label for="color" class="text-xs"> Themes</Label>
100
- <div class="grid grid-cols-2 gap-3">
101
- <template
102
- v-for="theme in predefinedThemes"
103
- :key="theme.name"
104
- >
105
- <Button
106
- v-if="theme"
107
- btn="outline-gray"
108
- size="xs"
109
- :title="capitalize(theme?.name)"
110
- class="justify-start gap-2 ring-primary"
111
- :aria-label="`Theme: ${theme.name}`"
112
- :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
113
- @click="updateColor(theme)"
100
+ <div
101
+ class="space-y-2"
102
+ >
103
+ <Label for="color" class="text-xs"> Themes</Label>
104
+ <div class="grid grid-cols-2 gap-3">
105
+ <template
106
+ v-for="theme in themes"
107
+ :key="theme"
114
108
  >
115
- <template #leading>
116
- <Icon
117
- name="i-tabler-circle-filled"
118
- square="4.5"
119
- :style="{
109
+ <Button
110
+ v-if="theme"
111
+ btn="outline-gray"
112
+ size="xs"
113
+ :title="capitalize(theme?.name)"
114
+ class="justify-start gap-2 ring-primary"
115
+ :aria-label="`Theme: ${theme.name}`"
116
+ :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
117
+ @click="updateColor(theme.name)"
118
+ >
119
+ <template #leading>
120
+ <Icon
121
+ name="i-tabler-circle-filled"
122
+ square="4.5"
123
+ :style="{
120
124
  '--c-primary': `oklch(${theme?.cssVars.dark['--una-primary']})`,
121
125
  '--c-primary-foreground': `oklch(${theme?.cssVars.dark['--una-background']})`
122
126
  }"
123
- class="shrink-0 rounded-full from-$c-primary to-$c-primary-foreground from-20% bg-gradient-to-b"
124
- />
125
- </template>
127
+ class="shrink-0 rounded-full from-$c-primary to-$c-primary-foreground from-20% bg-gradient-to-b"
128
+ />
129
+ </template>
126
130
 
127
- <span class="truncate text-xs">
128
- {{ theme.name }}
129
- </span>
130
- </Button>
131
- </template>
131
+ <span class="truncate text-xs">
132
+ {{ theme.name }}
133
+ </span>
134
+ </Button>
135
+ </template>
136
+ </div>
132
137
  </div>
133
- </div>
138
+ </template>
134
139
 
135
140
  <Separator />
136
141
 
package/dist/runtime/composables/useUnaSettings.js CHANGED
@@ -12,7 +12,8 @@ export function useUnaSettings() {
12
12
  gray: una.gray,
13
13
  radius: una.radius,
14
14
  fontSize: una.fontSize,
15
- theme: null
15
+ theme: una.theme,
16
+ themes: una.themes
16
17
  };
17
18
  const settings = useStorage("una-settings", defaultSettings, void 0, {
18
19
  mergeDefaults: defu
@@ -26,6 +27,10 @@ export function useUnaSettings() {
26
27
  { immediate: true }
27
28
  );
28
29
  function reset() {
30
+ if (una.theme) {
31
+ settings.value.theme = una.theme;
32
+ return;
33
+ }
29
34
  settings.value.primary = defaultSettings.primary;
30
35
  settings.value.gray = defaultSettings.gray;
31
36
  settings.value.fontSize = defaultSettings.fontSize;
package/dist/runtime/composables/useUnaThemes.d.ts CHANGED
@@ -2,79 +2,7 @@ import type { Colors } from '../types/index.js';
2
2
  export declare function useUnaThemes(): {
3
3
  primaryThemes: [string, Colors][];
4
4
  grayThemes: [string, Colors][];
5
- predefinedThemes: {
6
- name: string;
7
- cssVars: {
8
- light: {
9
- '--una-background': string;
10
- '--una-foreground': string;
11
- '--una-card': string;
12
- '--una-card-foreground': string;
13
- '--una-popover': string;
14
- '--una-popover-foreground': string;
15
- '--una-primary': string;
16
- '--una-primary-foreground': string;
17
- '--una-secondary': string;
18
- '--una-secondary-foreground': string;
19
- '--una-muted': string;
20
- '--una-muted-foreground': string;
21
- '--una-accent': string;
22
- '--una-accent-foreground': string;
23
- '--una-destructive': string;
24
- '--una-destructive-foreground': string;
25
- '--una-border': string;
26
- '--una-input': string;
27
- '--una-ring': string;
28
- '--una-chart-1': string;
29
- '--una-chart-2': string;
30
- '--una-chart-3': string;
31
- '--una-chart-4': string;
32
- '--una-chart-5': string;
33
- '--una-sidebar': string;
34
- '--una-sidebar-foreground': string;
35
- '--una-sidebar-primary': string;
36
- '--una-sidebar-primary-foreground': string;
37
- '--una-sidebar-accent': string;
38
- '--una-sidebar-accent-foreground': string;
39
- '--una-sidebar-border': string;
40
- '--una-sidebar-ring': string;
41
- };
42
- dark: {
43
- '--una-background': string;
44
- '--una-foreground': string;
45
- '--una-card': string;
46
- '--una-card-foreground': string;
47
- '--una-popover': string;
48
- '--una-popover-foreground': string;
49
- '--una-primary': string;
50
- '--una-primary-foreground': string;
51
- '--una-secondary': string;
52
- '--una-secondary-foreground': string;
53
- '--una-muted': string;
54
- '--una-muted-foreground': string;
55
- '--una-accent': string;
56
- '--una-accent-foreground': string;
57
- '--una-destructive': string;
58
- '--una-destructive-foreground': string;
59
- '--una-border': string;
60
- '--una-input': string;
61
- '--una-ring': string;
62
- '--una-chart-1': string;
63
- '--una-chart-2': string;
64
- '--una-chart-3': string;
65
- '--una-chart-4': string;
66
- '--una-chart-5': string;
67
- '--una-sidebar': string;
68
- '--una-sidebar-foreground': string;
69
- '--una-sidebar-primary': string;
70
- '--una-sidebar-primary-foreground': string;
71
- '--una-sidebar-accent': string;
72
- '--una-sidebar-accent-foreground': string;
73
- '--una-sidebar-border': string;
74
- '--una-sidebar-ring': string;
75
- };
76
- };
77
- }[];
5
+ themes: never[];
78
6
  getPrimaryColors: (color: string, defaultColor?: string) => Colors;
79
7
  getGrayColors: (color: string, defaultColor?: string) => Colors;
80
8
  };
package/dist/runtime/composables/useUnaThemes.js CHANGED
@@ -72,377 +72,11 @@ export function useUnaThemes() {
72
72
  return getGrayColors(defaultColor);
73
73
  return theme[1];
74
74
  }
75
- const predefinedThemes = [
76
- {
77
- name: "T3-Chat",
78
- cssVars: {
79
- light: {
80
- "--una-background": "0.9754 0.0084 325.6414",
81
- "--una-foreground": "0.3257 0.1161 325.0372",
82
- "--una-card": "0.9754 0.0084 325.6414",
83
- "--una-card-foreground": "0.3257 0.1161 325.0372",
84
- "--una-popover": "1.0000 0 0",
85
- "--una-popover-foreground": "0.3257 0.1161 325.0372",
86
- "--una-primary": "0.5316 0.1409 355.1999",
87
- "--una-primary-foreground": "1.0000 0 0",
88
- "--una-secondary": "0.8696 0.0675 334.8991",
89
- "--una-secondary-foreground": "0.4448 0.1341 324.7991",
90
- "--una-muted": "0.9395 0.0260 331.5454",
91
- "--una-muted-foreground": "0.4924 0.1244 324.4523",
92
- "--una-accent": "0.8696 0.0675 334.8991",
93
- "--una-accent-foreground": "0.4448 0.1341 324.7991",
94
- "--una-destructive": "0.5248 0.1368 20.8317",
95
- "--una-destructive-foreground": "1.0000 0 0",
96
- "--una-border": "0.8568 0.0829 328.9110",
97
- "--una-input": "0.8517 0.0558 336.6002",
98
- "--una-ring": "0.5916 0.2180 0.5844",
99
- "--una-chart-1": "0.6038 0.2363 344.4657",
100
- "--una-chart-2": "0.4445 0.2251 300.6246",
101
- "--una-chart-3": "0.3790 0.0438 226.1538",
102
- "--una-chart-4": "0.8330 0.1185 88.3461",
103
- "--una-chart-5": "0.7843 0.1256 58.9964",
104
- "--una-sidebar": "0.9360 0.0288 320.5788",
105
- "--una-sidebar-foreground": "0.4948 0.1909 354.5435",
106
- "--una-sidebar-primary": "0.3963 0.0251 285.1962",
107
- "--una-sidebar-primary-foreground": "0.9668 0.0124 337.5228",
108
- "--una-sidebar-accent": "0.9789 0.0013 106.4235",
109
- "--una-sidebar-accent-foreground": "0.3963 0.0251 285.1962",
110
- "--una-sidebar-border": "0.8568 0.0829 328.9110",
111
- "--una-sidebar-ring": "0.5916 0.2180 0.5844"
112
- },
113
- dark: {
114
- "--una-background": "0.2409 0.0201 307.5346",
115
- "--una-foreground": "0.8398 0.0387 309.5391",
116
- "--una-card": "0.2803 0.0232 307.5413",
117
- "--una-card-foreground": "0.8456 0.0302 341.4597",
118
- "--una-popover": "0.1548 0.0132 338.9015",
119
- "--una-popover-foreground": "0.9647 0.0091 341.8035",
120
- "--una-primary": "0.4607 0.1853 4.0994",
121
- "--una-primary-foreground": "0.8560 0.0618 346.3684",
122
- "--una-secondary": "0.3137 0.0306 310.0610",
123
- "--una-secondary-foreground": "0.8483 0.0382 307.9613",
124
- "--una-muted": "0.2634 0.0219 309.4748",
125
- "--una-muted-foreground": "0.7940 0.0372 307.1032",
126
- "--una-accent": "0.3649 0.0508 308.4911",
127
- "--una-accent-foreground": "0.9647 0.0091 341.8035",
128
- "--una-destructive": "0.2258 0.0524 12.6119",
129
- "--una-destructive-foreground": "1.0000 0 0",
130
- "--una-border": "0.3286 0.0154 343.4461",
131
- "--una-input": "0.3387 0.0195 332.8347",
132
- "--una-ring": "0.5916 0.2180 0.5844",
133
- "--una-chart-1": "0.5316 0.1409 355.1999",
134
- "--una-chart-2": "0.5633 0.1912 306.8561",
135
- "--una-chart-3": "0.7227 0.1502 60.5799",
136
- "--una-chart-4": "0.6193 0.2029 312.7422",
137
- "--una-chart-5": "0.6118 0.2093 6.1387",
138
- "--una-sidebar": "0.1893 0.0163 331.0475",
139
- "--una-sidebar-foreground": "0.8607 0.0293 343.6612",
140
- "--una-sidebar-primary": "0.4882 0.2172 264.3763",
141
- "--una-sidebar-primary-foreground": "1.0000 0 0",
142
- "--una-sidebar-accent": "0.2337 0.0261 338.1961",
143
- "--una-sidebar-accent-foreground": "0.9674 0.0013 286.3752",
144
- "--una-sidebar-border": "0.3286 0.0154 343.4461",
145
- "--una-sidebar-ring": "0.5916 0.2180 0.5844"
146
- }
147
- }
148
- },
149
- {
150
- name: "Vercel",
151
- cssVars: {
152
- light: {
153
- "--una-background": "0.9900 0 0",
154
- "--una-foreground": "0 0 0",
155
- "--una-card": "1 0 0",
156
- "--una-card-foreground": "0 0 0",
157
- "--una-popover": "0.9900 0 0",
158
- "--una-popover-foreground": "0 0 0",
159
- "--una-primary": "0 0 0",
160
- "--una-primary-foreground": "1 0 0",
161
- "--una-secondary": "0.9400 0 0",
162
- "--una-secondary-foreground": "0 0 0",
163
- "--una-muted": "0.9700 0 0",
164
- "--una-muted-foreground": "0.4400 0 0",
165
- "--una-accent": "0.9400 0 0",
166
- "--una-accent-foreground": "0 0 0",
167
- "--una-destructive": "0.6300 0.1900 23.0300",
168
- "--una-destructive-foreground": "1 0 0",
169
- "--una-border": "0.9200 0 0",
170
- "--una-input": "0.9400 0 0",
171
- "--una-ring": "0 0 0",
172
- "--una-chart-1": "0.8100 0.1700 75.3500",
173
- "--una-chart-2": "0.5500 0.2200 264.5300",
174
- "--una-chart-3": "0.7200 0 0",
175
- "--una-chart-4": "0.9200 0 0",
176
- "--una-chart-5": "0.5600 0 0",
177
- "--una-sidebar": "0.9900 0 0",
178
- "--una-sidebar-foreground": "0 0 0",
179
- "--una-sidebar-primary": "0 0 0",
180
- "--una-sidebar-primary-foreground": "1 0 0",
181
- "--una-sidebar-accent": "0.9400 0 0",
182
- "--una-sidebar-accent-foreground": "0 0 0",
183
- "--una-sidebar-border": "0.9400 0 0",
184
- "--una-sidebar-ring": "0 0 0"
185
- },
186
- dark: {
187
- "--una-background": "0 0 0",
188
- "--una-foreground": "1 0 0",
189
- "--una-card": "0.1400 0 0",
190
- "--una-card-foreground": "1 0 0",
191
- "--una-popover": "0.1800 0 0",
192
- "--una-popover-foreground": "1 0 0",
193
- "--una-primary": "1 0 0",
194
- "--una-primary-foreground": "0 0 0",
195
- "--una-secondary": "0.2500 0 0",
196
- "--una-secondary-foreground": "1 0 0",
197
- "--una-muted": "0.2300 0 0",
198
- "--una-muted-foreground": "0.7200 0 0",
199
- "--una-accent": "0.3200 0 0",
200
- "--una-accent-foreground": "1 0 0",
201
- "--una-destructive": "0.6900 0.2000 23.9100",
202
- "--una-destructive-foreground": "0 0 0",
203
- "--una-border": "0.2600 0 0",
204
- "--una-input": "0.3200 0 0",
205
- "--una-ring": "0.7200 0 0",
206
- "--una-chart-1": "0.8100 0.1700 75.3500",
207
- "--una-chart-2": "0.5800 0.2100 260.8400",
208
- "--una-chart-3": "0.5600 0 0",
209
- "--una-chart-4": "0.4400 0 0",
210
- "--una-chart-5": "0.9200 0 0",
211
- "--una-sidebar": "0.1800 0 0",
212
- "--una-sidebar-foreground": "1 0 0",
213
- "--una-sidebar-primary": "1 0 0",
214
- "--una-sidebar-primary-foreground": "0 0 0",
215
- "--una-sidebar-accent": "0.3200 0 0",
216
- "--una-sidebar-accent-foreground": "1 0 0",
217
- "--una-sidebar-border": "0.3200 0 0",
218
- "--una-sidebar-ring": "0.7200 0 0"
219
- }
220
- }
221
- },
222
- {
223
- name: "Notebook",
224
- cssVars: {
225
- light: {
226
- "--una-background": "0.9821 0 0",
227
- "--una-foreground": "0.3485 0 0",
228
- "--una-card": "1.0000 0 0",
229
- "--una-card-foreground": "0.3485 0 0",
230
- "--una-popover": "1.0000 0 0",
231
- "--una-popover-foreground": "0.3485 0 0",
232
- "--una-primary": "0.4891 0 0",
233
- "--una-primary-foreground": "0.9551 0 0",
234
- "--una-secondary": "0.9006 0 0",
235
- "--una-secondary-foreground": "0.3485 0 0",
236
- "--una-muted": "0.9158 0 0",
237
- "--una-muted-foreground": "0.4313 0 0",
238
- "--una-accent": "0.9354 0.0456 94.8549",
239
- "--una-accent-foreground": "0.4015 0.0436 37.9587",
240
- "--una-destructive": "0.6627 0.0978 20.0041",
241
- "--una-destructive-foreground": "1.0000 0 0",
242
- "--una-border": "0.5538 0.0025 17.2320",
243
- "--una-input": "1.0000 0 0",
244
- "--una-ring": "0.7058 0 0",
245
- "--una-chart-1": "0.3211 0 0",
246
- "--una-chart-2": "0.4495 0 0",
247
- "--una-chart-3": "0.5693 0 0",
248
- "--una-chart-4": "0.6830 0 0",
249
- "--una-chart-5": "0.7921 0 0",
250
- "--una-sidebar": "0.9551 0 0",
251
- "--una-sidebar-foreground": "0.3485 0 0",
252
- "--una-sidebar-primary": "0.4891 0 0",
253
- "--una-sidebar-primary-foreground": "0.9551 0 0",
254
- "--una-sidebar-accent": "0.9354 0.0456 94.8549",
255
- "--una-sidebar-accent-foreground": "0.4015 0.0436 37.9587",
256
- "--una-sidebar-border": "0.8078 0 0",
257
- "--una-sidebar-ring": "0.7058 0 0"
258
- },
259
- dark: {
260
- "--una-background": "0.2891 0 0",
261
- "--una-foreground": "0.8945 0 0",
262
- "--una-card": "0.3211 0 0",
263
- "--una-card-foreground": "0.8945 0 0",
264
- "--una-popover": "0.3211 0 0",
265
- "--una-popover-foreground": "0.8945 0 0",
266
- "--una-primary": "0.7572 0 0",
267
- "--una-primary-foreground": "0.2891 0 0",
268
- "--una-secondary": "0.4676 0 0",
269
- "--una-secondary-foreground": "0.8078 0 0",
270
- "--una-muted": "0.3904 0 0",
271
- "--una-muted-foreground": "0.7058 0 0",
272
- "--una-accent": "0.9067 0 0",
273
- "--una-accent-foreground": "0.3211 0 0",
274
- "--una-destructive": "0.7915 0.0491 18.2410",
275
- "--una-destructive-foreground": "0.2891 0 0",
276
- "--una-border": "0.4276 0 0",
277
- "--una-input": "0.3211 0 0",
278
- "--una-ring": "0.8078 0 0",
279
- "--una-chart-1": "0.9521 0 0",
280
- "--una-chart-2": "0.8576 0 0",
281
- "--una-chart-3": "0.7572 0 0",
282
- "--una-chart-4": "0.6534 0 0",
283
- "--una-chart-5": "0.5452 0 0",
284
- "--una-sidebar": "0.2478 0 0",
285
- "--una-sidebar-foreground": "0.8945 0 0",
286
- "--una-sidebar-primary": "0.7572 0 0",
287
- "--una-sidebar-primary-foreground": "0.2478 0 0",
288
- "--una-sidebar-accent": "0.9067 0 0",
289
- "--una-sidebar-accent-foreground": "0.3211 0 0",
290
- "--una-sidebar-border": "0.4276 0 0",
291
- "--una-sidebar-ring": "0.8078 0 0"
292
- }
293
- }
294
- },
295
- {
296
- name: "Sunset Horizon",
297
- cssVars: {
298
- light: {
299
- "--una-background": "0.9856 0.0084 56.3169",
300
- "--una-foreground": "0.3353 0.0132 2.7676",
301
- "--una-card": "1.0000 0 0",
302
- "--una-card-foreground": "0.3353 0.0132 2.7676",
303
- "--una-popover": "1.0000 0 0",
304
- "--una-popover-foreground": "0.3353 0.0132 2.7676",
305
- "--una-primary": "0.7357 0.1641 34.7091",
306
- "--una-primary-foreground": "1.0000 0 0",
307
- "--una-secondary": "0.9596 0.0200 28.9029",
308
- "--una-secondary-foreground": "0.5587 0.1294 32.7364",
309
- "--una-muted": "0.9656 0.0176 39.4009",
310
- "--una-muted-foreground": "0.5534 0.0116 58.0708",
311
- "--una-accent": "0.8278 0.1131 57.9984",
312
- "--una-accent-foreground": "0.3353 0.0132 2.7676",
313
- "--una-destructive": "0.6122 0.2082 22.2410",
314
- "--una-destructive-foreground": "1.0000 0 0",
315
- "--una-border": "0.9296 0.0370 38.6868",
316
- "--una-input": "0.9296 0.0370 38.6868",
317
- "--una-ring": "0.7357 0.1641 34.7091",
318
- "--una-chart-1": "0.7357 0.1641 34.7091",
319
- "--una-chart-2": "0.8278 0.1131 57.9984",
320
- "--una-chart-3": "0.8773 0.0763 54.9314",
321
- "--una-chart-4": "0.8200 0.1054 40.8859",
322
- "--una-chart-5": "0.6368 0.1306 32.0721",
323
- "--una-sidebar": "0.9656 0.0176 39.4009",
324
- "--una-sidebar-foreground": "0.3353 0.0132 2.7676",
325
- "--una-sidebar-primary": "0.7357 0.1641 34.7091",
326
- "--una-sidebar-primary-foreground": "1.0000 0 0",
327
- "--una-sidebar-accent": "0.8278 0.1131 57.9984",
328
- "--una-sidebar-accent-foreground": "0.3353 0.0132 2.7676",
329
- "--una-sidebar-border": "0.9296 0.0370 38.6868",
330
- "--una-sidebar-ring": "0.7357 0.1641 34.7091"
331
- },
332
- dark: {
333
- "--una-background": "0.2569 0.0169 352.4042",
334
- "--una-foreground": "0.9397 0.0119 51.3156",
335
- "--una-card": "0.3184 0.0176 341.4465",
336
- "--una-card-foreground": "0.9397 0.0119 51.3156",
337
- "--una-popover": "0.3184 0.0176 341.4465",
338
- "--una-popover-foreground": "0.9397 0.0119 51.3156",
339
- "--una-primary": "0.7357 0.1641 34.7091",
340
- "--una-primary-foreground": "1.0000 0 0",
341
- "--una-secondary": "0.3637 0.0203 342.2664",
342
- "--una-secondary-foreground": "0.9397 0.0119 51.3156",
343
- "--una-muted": "0.3184 0.0176 341.4465",
344
- "--una-muted-foreground": "0.8378 0.0237 52.6346",
345
- "--una-accent": "0.8278 0.1131 57.9984",
346
- "--una-accent-foreground": "0.2569 0.0169 352.4042",
347
- "--una-destructive": "0.6122 0.2082 22.2410",
348
- "--una-destructive-foreground": "1.0000 0 0",
349
- "--una-border": "0.3637 0.0203 342.2664",
350
- "--una-input": "0.3637 0.0203 342.2664",
351
- "--una-ring": "0.7357 0.1641 34.7091",
352
- "--una-chart-1": "0.7357 0.1641 34.7091",
353
- "--una-chart-2": "0.8278 0.1131 57.9984",
354
- "--una-chart-3": "0.8773 0.0763 54.9314",
355
- "--una-chart-4": "0.8200 0.1054 40.8859",
356
- "--una-chart-5": "0.6368 0.1306 32.0721",
357
- "--una-sidebar": "0.2569 0.0169 352.4042",
358
- "--una-sidebar-foreground": "0.9397 0.0119 51.3156",
359
- "--una-sidebar-primary": "0.7357 0.1641 34.7091",
360
- "--una-sidebar-primary-foreground": "1.0000 0 0",
361
- "--una-sidebar-accent": "0.8278 0.1131 57.9984",
362
- "--una-sidebar-accent-foreground": "0.2569 0.0169 352.4042",
363
- "--una-sidebar-border": "0.3637 0.0203 342.2664",
364
- "--una-sidebar-ring": "0.7357 0.1641 34.7091"
365
- }
366
- }
367
- },
368
- {
369
- name: "Claude",
370
- cssVars: {
371
- light: {
372
- "--una-background": "0.9818 0.0054 95.0986",
373
- "--una-foreground": "0.3438 0.0269 95.7226",
374
- "--una-card": "0.9818 0.0054 95.0986",
375
- "--una-card-foreground": "0.1908 0.0020 106.5859",
376
- "--una-popover": "1.0000 0 0",
377
- "--una-popover-foreground": "0.2671 0.0196 98.9390",
378
- "--una-primary": "0.6171 0.1375 39.0427",
379
- "--una-primary-foreground": "1.0000 0 0",
380
- "--una-secondary": "0.9245 0.0138 92.9892",
381
- "--una-secondary-foreground": "0.4334 0.0177 98.6048",
382
- "--una-muted": "0.9341 0.0153 90.2390",
383
- "--una-muted-foreground": "0.6059 0.0075 97.4233",
384
- "--una-accent": "0.9245 0.0138 92.9892",
385
- "--una-accent-foreground": "0.2671 0.0196 98.9390",
386
- "--una-destructive": "0.1908 0.0020 106.5859",
387
- "--una-destructive-foreground": "1.0000 0 0",
388
- "--una-border": "0.8847 0.0069 97.3627",
389
- "--una-input": "0.7621 0.0156 98.3528",
390
- "--una-ring": "0.5937 0.1673 253.0630",
391
- "--una-chart-1": "0.5583 0.1276 42.9956",
392
- "--una-chart-2": "0.6898 0.1581 290.4107",
393
- "--una-chart-3": "0.8816 0.0276 93.1280",
394
- "--una-chart-4": "0.8822 0.0403 298.1792",
395
- "--una-chart-5": "0.5608 0.1348 42.0584",
396
- "--una-sidebar": "0.9663 0.0080 98.8792",
397
- "--una-sidebar-foreground": "0.3590 0.0051 106.6524",
398
- "--una-sidebar-primary": "0.6171 0.1375 39.0427",
399
- "--una-sidebar-primary-foreground": "0.9881 0 0",
400
- "--una-sidebar-accent": "0.9245 0.0138 92.9892",
401
- "--una-sidebar-accent-foreground": "0.3250 0 0",
402
- "--una-sidebar-border": "0.9401 0 0",
403
- "--una-sidebar-ring": "0.7731 0 0"
404
- },
405
- dark: {
406
- "--una-background": "0.2679 0.0036 106.6427",
407
- "--una-foreground": "0.8074 0.0142 93.0137",
408
- "--una-card": "0.2679 0.0036 106.6427",
409
- "--una-card-foreground": "0.9818 0.0054 95.0986",
410
- "--una-popover": "0.3085 0.0035 106.6039",
411
- "--una-popover-foreground": "0.9211 0.0040 106.4781",
412
- "--una-primary": "0.6724 0.1308 38.7559",
413
- "--una-primary-foreground": "1.0000 0 0",
414
- "--una-secondary": "0.9818 0.0054 95.0986",
415
- "--una-secondary-foreground": "0.3085 0.0035 106.6039",
416
- "--una-muted": "0.2213 0.0038 106.7070",
417
- "--una-muted-foreground": "0.7713 0.0169 99.0657",
418
- "--una-accent": "0.2130 0.0078 95.4245",
419
- "--una-accent-foreground": "0.9663 0.0080 98.8792",
420
- "--una-destructive": "0.6368 0.2078 25.3313",
421
- "--una-destructive-foreground": "1.0000 0 0",
422
- "--una-border": "0.3618 0.0101 106.8928",
423
- "--una-input": "0.4336 0.0113 100.2195",
424
- "--una-ring": "0.5937 0.1673 253.0630",
425
- "--una-chart-1": "0.5583 0.1276 42.9956",
426
- "--una-chart-2": "0.6898 0.1581 290.4107",
427
- "--una-chart-3": "0.2130 0.0078 95.4245",
428
- "--una-chart-4": "0.3074 0.0516 289.3230",
429
- "--una-chart-5": "0.5608 0.1348 42.0584",
430
- "--una-sidebar": "0.2357 0.0024 67.7077",
431
- "--una-sidebar-foreground": "0.8074 0.0142 93.0137",
432
- "--una-sidebar-primary": "0.3250 0 0",
433
- "--una-sidebar-primary-foreground": "0.9881 0 0",
434
- "--una-sidebar-accent": "0.1680 0.0020 106.6177",
435
- "--una-sidebar-accent-foreground": "0.8074 0.0142 93.0137",
436
- "--una-sidebar-border": "0.3618 0.0101 106.8928",
437
- "--una-sidebar-ring": "0.7731 0 0"
438
- }
439
- }
440
- }
441
- ];
75
+ const themes = [];
442
76
  return {
443
77
  primaryThemes,
444
78
  grayThemes,
445
- predefinedThemes,
79
+ themes,
446
80
  getPrimaryColors,
447
81
  getGrayColors
448
82
  };
package/dist/runtime/plugins/theme.client.js CHANGED
@@ -10,15 +10,16 @@ export default defineNuxtPlugin(() => {
10
10
  const html = document.documentElement;
11
11
  html.removeAttribute("style");
12
12
  const computedStyles = computed(() => {
13
- if (settings.value.theme) {
13
+ const theme = settings.value.themes.find((t) => t.name === settings.value.theme);
14
+ if (settings.value.theme && theme) {
14
15
  return `
15
16
  :root {
16
- ${Object.entries(settings.value.theme.cssVars.light).map(([k, v]) => `${k}: ${v};`).join("\n")}
17
+ ${Object.entries(theme.cssVars.light).map(([k, v]) => `${k}: ${v};`).join("\n")}
17
18
  --una-radius: ${settings.value.radius}rem;
18
19
  --una-font-size: ${settings.value.fontSize}px;
19
20
  }
20
21
  .dark {
21
- ${Object.entries(settings.value.theme.cssVars.dark).map(([k, v]) => `${k}: ${v};`).join("\n")}
22
+ ${Object.entries(theme.cssVars.dark).map(([k, v]) => `${k}: ${v};`).join("\n")}
22
23
  }
23
24
  `;
24
25
  }
package/dist/runtime/plugins/theme.server.js CHANGED
@@ -17,8 +17,11 @@ export default defineNuxtPlugin(() => {
17
17
  ${process.dev ? "console.log({ settings })" : ""}
18
18
 
19
19
  if (settings.theme) {
20
- Object.entries(settings.theme.cssVars.light).map(i => html.style.setProperty(i[0], i[1]))
21
- Object.entries(settings.theme.cssVars.dark).map(i => html.style.setProperty(i[0], i[1]))
20
+ const theme = settings.themes.find(t => t.name === settings.theme)
21
+ if (theme) {
22
+ Object.entries(theme.cssVars.light).map(i => html.style.setProperty(i[0], i[1]))
23
+ Object.entries(theme.cssVars.dark).map(i => html.style.setProperty(i[0], i[1]))
24
+ }
22
25
 
23
26
  html.style.setProperty('--una-radius', settings.radius + 'rem')
24
27
  html.style.setProperty('--una-font-size', settings.fontSize + 'px')
package/dist/runtime/types/index.d.ts CHANGED
@@ -62,17 +62,18 @@ export interface ColorPalette {
62
62
  export interface UnaSettings {
63
63
  primaryColors: Colors;
64
64
  grayColors: Colors;
65
- theme: {
65
+ theme: string | null | false | undefined;
66
+ primary: string;
67
+ gray: string;
68
+ fontSize: number;
69
+ radius: number;
70
+ themes: {
66
71
  name: string;
67
72
  cssVars: {
68
73
  light: Colors;
69
74
  dark: Colors;
70
75
  };
71
- } | null | false | undefined;
72
- primary: string;
73
- gray: string;
74
- fontSize: number;
75
- radius: number;
76
+ }[];
76
77
  }
77
78
  export type OutsideEvent<T extends Event> = CustomEvent<{
78
79
  originalEvent: T;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@una-ui/nuxt-edge",
3
3
  "type": "module",
4
- "version": "1.0.0-alpha.0-29178877.ef4e1af",
4
+ "version": "1.0.0-alpha.0-29178897.6286913",
5
5
  "description": "Nuxt module for @una-ui",
6
6
  "author": "Phojie Rengel <phojrengel@gmail.com>",
7
7
  "license": "MIT",
@@ -41,8 +41,8 @@
41
41
  "@nuxt/kit": "^3.17.5",
42
42
  "@nuxtjs/color-mode": "^3.5.2",
43
43
  "@tanstack/vue-table": "^8.21.3",
44
- "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.0-29178877.ef4e1af",
45
- "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.0-29178877.ef4e1af",
44
+ "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.0-29178897.6286913",
45
+ "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.0-29178897.6286913",
46
46
  "@unocss/core": "^66.2.0",
47
47
  "@unocss/nuxt": "^66.2.0",
48
48
  "@unocss/preset-attributify": "^66.2.0",