@code-coaching/vuetiful 0.23.1 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/types/components/VBootstrap.vue.d.ts +1 -1
  3. package/dist/types/components/atoms/VAvatar.vue.d.ts +1 -1
  4. package/dist/types/components/atoms/VLightSwitch.vue.d.ts +7 -3
  5. package/dist/types/components/atoms/index.d.ts +13 -13
  6. package/dist/types/components/index.d.ts +2 -2
  7. package/dist/types/components/molecules/VAlert.vue.d.ts +1 -1
  8. package/dist/types/components/molecules/VCodeBlock.vue.d.ts +2 -2
  9. package/dist/types/components/molecules/VDrawer.vue.d.ts +1 -1
  10. package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +1 -1
  11. package/dist/types/components/molecules/VRail/VRail.vue.d.ts +1 -1
  12. package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +1 -1
  13. package/dist/types/components/molecules/index.d.ts +21 -21
  14. package/dist/types/directives/clipboard.d.ts +1 -1
  15. package/dist/types/directives/index.d.ts +1 -1
  16. package/dist/types/index.d.ts +6 -6
  17. package/dist/types/props/props.d.ts +1 -1
  18. package/dist/types/services/dark-mode.service.d.ts +13 -13
  19. package/dist/types/services/drawer.service.d.ts +1 -1
  20. package/dist/types/services/index.d.ts +6 -6
  21. package/dist/types/types/index.d.ts +1 -1
  22. package/dist/types/utils/colors/colors.service.d.ts +69 -0
  23. package/dist/types/utils/index.d.ts +7 -3
  24. package/dist/types/utils/theme/theme-switcher.vue.d.ts +1 -1
  25. package/dist/types/utils/theme/theme.service.d.ts +9 -24
  26. package/dist/types/utils/theme/themes.d.ts +35 -0
  27. package/dist/vuetiful.es.mjs +456 -161
  28. package/dist/vuetiful.umd.js +71 -16
  29. package/package.json +1 -1
  30. package/src/assets/main.css +6 -6
  31. package/src/components/VBootstrap.vue +43 -43
  32. package/src/components/atoms/VAvatar.test.ts +71 -71
  33. package/src/components/atoms/VAvatar.vue +22 -23
  34. package/src/components/atoms/VBadge.test.ts +11 -11
  35. package/src/components/atoms/VBadge.vue +2 -2
  36. package/src/components/atoms/VButton.test.ts +82 -82
  37. package/src/components/atoms/VButton.vue +20 -21
  38. package/src/components/atoms/VChip.test.ts +11 -11
  39. package/src/components/atoms/VChip.vue +3 -3
  40. package/src/components/atoms/VLightSwitch.test.ts +63 -14
  41. package/src/components/atoms/VLightSwitch.vue +35 -46
  42. package/src/components/atoms/VRadio/VRadioDescription.test.ts +13 -13
  43. package/src/components/atoms/VRadio/VRadioDescription.vue +2 -2
  44. package/src/components/atoms/VRadio/VRadioGroup.test.ts +40 -40
  45. package/src/components/atoms/VRadio/VRadioGroup.vue +19 -22
  46. package/src/components/atoms/VRadio/VRadioItem.test.ts +67 -67
  47. package/src/components/atoms/VRadio/VRadioItem.vue +10 -13
  48. package/src/components/atoms/VRadio/VRadioLabel.test.ts +13 -13
  49. package/src/components/atoms/VRadio/VRadioLabel.vue +5 -3
  50. package/src/components/atoms/VSwitch/VSwitch.test.ts +33 -33
  51. package/src/components/atoms/VSwitch/VSwitch.vue +24 -27
  52. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +13 -13
  53. package/src/components/atoms/VSwitch/VSwitchDescription.vue +2 -2
  54. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +9 -9
  55. package/src/components/atoms/VSwitch/VSwitchGroup.vue +2 -2
  56. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +19 -19
  57. package/src/components/atoms/VSwitch/VSwitchLabel.vue +2 -2
  58. package/src/components/atoms/index.ts +13 -13
  59. package/src/components/index.ts +2 -2
  60. package/src/components/molecules/VAccordion/VAccordion.test.ts +11 -17
  61. package/src/components/molecules/VAccordion/VAccordion.vue +3 -3
  62. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +55 -55
  63. package/src/components/molecules/VAccordion/VAccordionItem.vue +9 -22
  64. package/src/components/molecules/VAlert.test.ts +38 -38
  65. package/src/components/molecules/VAlert.vue +25 -47
  66. package/src/components/molecules/VCard/VCard.test.ts +25 -25
  67. package/src/components/molecules/VCard/VCard.vue +13 -15
  68. package/src/components/molecules/VCard/VCardBody.test.ts +14 -14
  69. package/src/components/molecules/VCard/VCardBody.vue +4 -8
  70. package/src/components/molecules/VCard/VCardFooter.test.ts +22 -22
  71. package/src/components/molecules/VCard/VCardFooter.vue +10 -8
  72. package/src/components/molecules/VCard/VCardHeader.test.ts +25 -25
  73. package/src/components/molecules/VCard/VCardHeader.vue +7 -8
  74. package/src/components/molecules/VCodeBlock.test.ts +63 -63
  75. package/src/components/molecules/VCodeBlock.vue +27 -34
  76. package/src/components/molecules/VDrawer.test.ts +5 -5
  77. package/src/components/molecules/VDrawer.vue +10 -10
  78. package/src/components/molecules/VListbox/VListbox.test.ts +53 -53
  79. package/src/components/molecules/VListbox/VListbox.vue +31 -32
  80. package/src/components/molecules/VListbox/VListboxButton.test.ts +13 -13
  81. package/src/components/molecules/VListbox/VListboxButton.vue +5 -5
  82. package/src/components/molecules/VListbox/VListboxItem.test.ts +25 -25
  83. package/src/components/molecules/VListbox/VListboxItem.vue +7 -8
  84. package/src/components/molecules/VListbox/VListboxItems.test.ts +14 -14
  85. package/src/components/molecules/VListbox/VListboxItems.vue +9 -11
  86. package/src/components/molecules/VListbox/VListboxLabel.test.ts +10 -10
  87. package/src/components/molecules/VListbox/VListboxLabel.vue +2 -2
  88. package/src/components/molecules/VPreview.test.ts +26 -26
  89. package/src/components/molecules/VPreview.vue +22 -27
  90. package/src/components/molecules/VRail/VRail.test.ts +5 -5
  91. package/src/components/molecules/VRail/VRail.vue +7 -7
  92. package/src/components/molecules/VRail/VRailTile.test.ts +26 -28
  93. package/src/components/molecules/VRail/VRailTile.vue +13 -11
  94. package/src/components/molecules/VShell.test.ts +5 -5
  95. package/src/components/molecules/VShell.vue +11 -20
  96. package/src/components/molecules/VTabs/VTab.test.ts +69 -52
  97. package/src/components/molecules/VTabs/VTab.vue +13 -17
  98. package/src/components/molecules/VTabs/VTabPanel.test.ts +8 -8
  99. package/src/components/molecules/VTabs/VTabPanel.vue +1 -1
  100. package/src/components/molecules/VTabs/VTabs.test.ts +36 -36
  101. package/src/components/molecules/VTabs/VTabs.vue +18 -22
  102. package/src/components/molecules/index.ts +21 -21
  103. package/src/directives/clipboard.test.ts +9 -9
  104. package/src/directives/clipboard.ts +2 -2
  105. package/src/directives/index.ts +1 -1
  106. package/src/env.d.ts +2 -2
  107. package/src/index.ts +7 -7
  108. package/src/props/index.ts +1 -1
  109. package/src/props/props.ts +44 -44
  110. package/src/services/dark-mode.service.test.ts +64 -194
  111. package/src/services/dark-mode.service.ts +35 -54
  112. package/src/services/drawer.service.test.ts +21 -21
  113. package/src/services/drawer.service.ts +10 -10
  114. package/src/services/highlight.service.test.ts +12 -12
  115. package/src/services/highlight.service.ts +1 -1
  116. package/src/services/index.ts +6 -6
  117. package/src/services/rail.service.test.ts +7 -7
  118. package/src/services/rail.service.ts +2 -2
  119. package/src/services/settings.service.test.ts +5 -5
  120. package/src/services/settings.service.ts +1 -1
  121. package/src/styles/all.css +7 -7
  122. package/src/styles/elements/buttons.css +1 -1
  123. package/src/styles/elements/forms.css +7 -7
  124. package/src/styles/elements.css +13 -13
  125. package/src/styles/transitions.css +2 -2
  126. package/src/styles/typography.css +5 -5
  127. package/src/themes/theme-rocket.css +10 -10
  128. package/src/themes/theme-sahara.css +13 -13
  129. package/src/themes/theme-seafoam.css +13 -13
  130. package/src/themes/theme-seasonal.css +4 -4
  131. package/src/themes/theme-skeleton.css +7 -7
  132. package/src/themes/theme-vintage.css +12 -12
  133. package/src/themes/theme-vuetiful-0.0.1.css +13 -13
  134. package/src/types/index.ts +46 -46
  135. package/src/types/tailwind.ts +2 -21
  136. package/src/utils/colors/colors.service.ts +293 -0
  137. package/src/utils/index.ts +7 -3
  138. package/src/utils/platform/platform.service.test.ts +6 -6
  139. package/src/utils/platform/platform.service.ts +1 -1
  140. package/src/utils/theme/callback.test.ts +11 -7
  141. package/src/utils/theme/remove.test.ts +11 -9
  142. package/src/utils/theme/theme-switcher.vue +43 -49
  143. package/src/utils/theme/theme.service.test.ts +194 -84
  144. package/src/utils/theme/theme.service.ts +141 -81
  145. package/src/utils/theme/themes.ts +122 -0
  146. package/dist/types/components/index.test.d.ts +0 -1
  147. package/dist/types/index.test.d.ts +0 -1
  148. package/dist/types/utils/index.test.d.ts +0 -1
  149. package/src/components/index.test.ts +0 -10
  150. package/src/index.test.ts +0 -26
  151. package/src/utils/index.test.ts +0 -11
package/src/utils/theme/theme.service.ts CHANGED
@@ -1,110 +1,170 @@
1
- import { readonly, Ref, ref } from "vue";
2
- import { usePlatform } from "../platform/platform.service";
1
+ import { Ref, ref } from 'vue';
2
+ import { usePlatform } from '../platform/platform.service';
3
+ import { ColorSettings, Palette, useColors } from '../colors/colors.service';
4
+ import { Theme, themes } from './themes';
3
5
 
4
6
  const { isBrowser } = usePlatform();
5
-
6
- export interface Theme {
7
- name: string;
8
- url: string;
9
- }
10
-
11
- const THEMES = {
12
- VUETIFUL: "vuetiful",
13
- ROCKET: "rocket",
14
- SAHARA: "sahara",
15
- SEAFOAM: "seafoam",
16
- SEASONAL: "seasonal",
17
- SKELETON: "skeleton",
18
- VINTAGE: "vintage",
19
- };
20
-
21
- const builtInUrl = (name: string): string => {
22
- return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
7
+ const chosenTheme: Ref<Theme> = ref(themes[0]);
8
+ const { generatePalette, hexValuesAreValid } = useColors();
9
+
10
+ const generateColorCSS = (theme: Theme): string => {
11
+ let newCSS = '';
12
+ const newPalette: Record<string, Palette> = {};
13
+ Object.values(theme.colors).forEach((color: ColorSettings) => {
14
+ const colorKey = color.key;
15
+ newPalette[color.key] = generatePalette(color.hex);
16
+ newCSS += '\n\t';
17
+ newCSS += `/* ${colorKey} | ${newPalette[colorKey][500].hex} */\n\t`;
18
+ for (let [k, v] of Object.entries(newPalette[colorKey])) {
19
+ newCSS += `--color-${colorKey}-${k}: ${v.rgb}; /* ⬅ ${v.hex} */\n\t`;
20
+ }
21
+ });
22
+ return newCSS;
23
23
  };
24
24
 
25
- const builtInThemes: Array<Theme> = [
26
- { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
27
- { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
28
- { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
29
- { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
30
- { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
31
- { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
32
- { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) },
33
- ];
34
-
35
- const themes: Ref<Array<Theme>> = ref([...builtInThemes]);
36
-
37
- const defaultTheme = THEMES.VUETIFUL;
38
- const chosenTheme = ref(defaultTheme);
39
-
40
25
  const useTheme = () => {
41
- const saveThemeToStorage = (name: string): void => {
42
- const theme = themes.value.find((t) => t.name === name);
43
- if (!theme) return;
26
+ const changeDataTheme = (name: string) => document.body.setAttribute('data-theme', name);
44
27
 
45
- if (isBrowser) {
46
- localStorage.setItem("vuetiful-theme", theme.name);
47
- document.body.setAttribute("data-theme", theme.name);
48
- }
28
+ const getThemeFromCookie = (cookies: string): Theme => {
29
+ const themeName = getThemeNameFromCookie(cookies);
30
+ const theme = themes.find((t) => t.name === themeName);
31
+ if (theme) return theme;
32
+ return themes[0];
49
33
  };
50
34
 
51
- const initializeTheme = (callback?: Function): void => {
52
- if (isBrowser) {
53
- const storedTheme = localStorage.getItem("vuetiful-theme");
54
- if (storedTheme) loadTheme(storedTheme, callback);
55
- else loadTheme(defaultTheme, callback);
56
- }
35
+ const getThemeNameFromCookie = (cookies: string): string => {
36
+ const cookie = cookies.split(';').find((c) => c.trim().startsWith(`vuetiful-theme=`));
37
+ const value = cookie?.split('=')[1];
38
+ return value || '';
57
39
  };
58
40
 
59
- const loadTheme = (themeName: string, callback?: Function) => {
60
- let themeToLoad = themes.value.find((t) => t.name === themeName);
61
- if (!themeToLoad)
62
- themeToLoad = themes.value.find((t) => t.name === defaultTheme) || themes.value[0];
41
+ const applyThemeSSR = (html: string, theme: Theme): string => {
42
+ chosenTheme.value = theme;
43
+ const css = generateCss(theme);
44
+ html = html.replace('</head>', `<style type="text/css" id="vuetiful-theme">${css}</style></head>`);
45
+ html = html.replace('<body', `<body data-theme="${theme.name}"`);
46
+ return html;
47
+ };
63
48
 
64
- const theme: Theme = themeToLoad;
65
- chosenTheme.value = theme.name;
49
+ const generateCss = (theme: Theme): string => {
50
+ if (hexValuesAreValid(Object.values(theme.colors))) {
51
+ return `${theme.fonts.baseImports}
52
+ ${theme.fonts.headingImports}
53
+ :root {
54
+ /* =~= Theme Properties =~= */
55
+ --theme-font-family-base: ${theme.fonts.customBase ? `"${theme.fonts.customBase}", ` : ''}${theme.fonts.base};
56
+ --theme-font-family-heading: ${theme.fonts.customHeadings ? `"${theme.fonts.customHeadings}", ` : ''}${
57
+ theme.fonts.headings
58
+ };
59
+ --theme-font-color-base: ${theme.textColorLight};
60
+ --theme-font-color-dark: ${theme.textColorDark};
61
+ --theme-rounded-base: ${theme.roundedBase};
62
+ --theme-rounded-container: ${theme.roundedContainer};
63
+ --theme-border-base: ${theme.borderBase};
64
+
65
+ /* =~= Theme On-X Colors =~= */
66
+ --on-primary: ${theme.colors.primary.on};
67
+ --on-secondary: ${theme.colors.secondary.on};
68
+ --on-tertiary: ${theme.colors.tertiary.on};
69
+ --on-success: ${theme.colors.success.on};
70
+ --on-warning: ${theme.colors.warning.on};
71
+ --on-error: ${theme.colors.error.on};
72
+ --on-surface: ${theme.colors.surface.on};
73
+
74
+ /* =~= Theme Colors =~= */
75
+ ${generateColorCSS(theme)}
76
+ }
77
+
78
+ ${
79
+ theme.gradients.light.length
80
+ ? `[data-theme="${theme.name}"] {
81
+ background-image:
82
+ ${theme.gradients.light};
83
+ }`
84
+ : ''
85
+ }
86
+ ${
87
+ theme.gradients.dark.length
88
+ ? `.dark [data-theme="${theme.name}"] {
89
+ background-image:
90
+ ${theme.gradients.dark};
91
+ }`
92
+ : ''
93
+ }
94
+ ${theme.customCss}
95
+ `;
96
+ }
97
+ return '';
98
+ };
66
99
 
67
- const existingStyle = document.getElementById("theme");
68
- let themeUrl = theme.url;
100
+ const applyTheme = (theme: Theme, callback?: Function) => {
101
+ const existingStyle = document.getElementById('vuetiful-theme');
102
+ const themeCss = generateCss(theme);
69
103
 
70
- const link = document.createElement("link");
71
- link.id = "theme";
72
- link.href = themeUrl;
73
- link.type = "text/css";
74
- link.rel = "stylesheet";
75
- link.onload = () => {
104
+ const style = document.createElement('style');
105
+ style.innerHTML = themeCss;
106
+ style.id = 'vuetiful-theme';
107
+ style.onload = () => {
76
108
  if (existingStyle) existingStyle.remove();
77
- saveThemeToStorage(theme.name);
78
109
  if (callback) callback();
79
110
  };
80
111
 
81
- const head = document.querySelector("head");
82
- if (head) head.appendChild(link);
83
- };
112
+ const head = document.querySelector('head');
113
+ if (head) head.appendChild(style);
84
114
 
85
- const registerAllBuiltInThemes = (): Array<Theme> => {
86
- return [...builtInThemes];
115
+ chosenTheme.value = theme;
116
+ if (isBrowser) {
117
+ document.cookie = `vuetiful-theme=${theme.name};path=/;max-age=31536000;SameSite=Lax`;
118
+ changeDataTheme(theme.name);
119
+ }
87
120
  };
88
121
 
89
- const registerTheme = (name: string, url: string): Theme => {
90
- return { url, name };
122
+ const initializeTheme = (callback?: Function): void => {
123
+ if (isBrowser) {
124
+ const themeName = getThemeNameFromCookie(document.cookie);
125
+
126
+ if (themeName === 'custom') {
127
+ const storedThemeJson = localStorage.getItem('vuetiful-custom-theme');
128
+ let storedTheme: Theme | null = null;
129
+
130
+ try {
131
+ storedTheme = storedThemeJson ? JSON.parse(storedThemeJson) : null;
132
+ if (storedTheme) {
133
+ applyTheme(storedTheme, callback);
134
+ registerTheme(storedTheme);
135
+ }
136
+ } catch (e) {
137
+ applyTheme(themes[0], callback);
138
+ }
139
+ } else {
140
+ const theme = themes.find((t) => t.name === themeName);
141
+ if (theme) {
142
+ applyTheme(theme, callback);
143
+ } else {
144
+ applyTheme(themes[0], callback);
145
+ }
146
+ }
147
+ }
91
148
  };
92
149
 
93
- const overwriteThemes = (newThemes: Array<Theme>): void => {
94
- themes.value = [...newThemes];
150
+ const registerTheme = (theme: Theme): void => {
151
+ const existingTheme = themes.find((t) => t.name === theme.name);
152
+ if (existingTheme) {
153
+ const index = themes.indexOf(existingTheme);
154
+ themes[index] = theme;
155
+ } else {
156
+ themes.push(theme);
157
+ }
95
158
  };
96
159
 
97
160
  return {
98
- themes: readonly(themes),
99
- chosenTheme: readonly(chosenTheme),
100
-
161
+ chosenTheme,
162
+ themes,
163
+ applyThemeSSR,
164
+ applyTheme,
165
+ getThemeFromCookie,
101
166
  initializeTheme,
102
- loadTheme,
103
- saveThemeToStorage,
104
-
105
- THEMES,
106
- overwriteThemes,
107
- registerAllBuiltInThemes,
167
+ changeDataTheme,
108
168
  registerTheme,
109
169
  };
110
170
  };
package/src/utils/theme/themes.ts ADDED
@@ -0,0 +1,122 @@
1
+ import { ColorSettings } from '../colors/colors.service';
2
+
3
+ export const themes: Array<Theme> = [
4
+ {
5
+ name: 'vuetiful',
6
+ gradients: {
7
+ light:
8
+ 'radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%), radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%), radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%)',
9
+ dark: 'radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%), radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%), radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%)',
10
+ },
11
+ colors: {
12
+ primary: { key: 'primary', label: 'Primary', hex: '#EC4899', rgb: '0 0 0', on: '0 0 0' },
13
+ secondary: { key: 'secondary', label: 'Secondary', hex: '#06B6D4', rgb: '0 0 0', on: '0 0 0' },
14
+ tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#14B8A6', rgb: '0 0 0', on: '0 0 0' },
15
+ success: { key: 'success', label: 'Success', hex: '#84CC16', rgb: '0 0 0', on: '0 0 0' },
16
+ warning: { key: 'warning', label: 'Warning', hex: '#EAB308', rgb: '0 0 0', on: '0 0 0' },
17
+ error: { key: 'error', label: 'Error', hex: '#EF4444', rgb: '0 0 0', on: '255 255 255' },
18
+ surface: { key: 'surface', label: 'Surface', hex: '#6366F1', rgb: '0 0 0', on: '255 255 255' },
19
+ },
20
+ fonts: {
21
+ base: 'system',
22
+ customBase: 'Quicksand',
23
+ baseImports:
24
+ '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
25
+ headings: 'system',
26
+ customHeadings: 'Quicksand',
27
+ headingImports: '',
28
+ },
29
+ textColorLight: '0 0 0',
30
+ textColorDark: '255 255 255',
31
+ roundedBase: '12px',
32
+ roundedContainer: '12px',
33
+ borderBase: '0px',
34
+ customCss: `
35
+ [data-theme="vuetiful"] h1,
36
+ [data-theme="vuetiful"] h2,
37
+ [data-theme="vuetiful"] h3,
38
+ [data-theme="vuetiful"] h4,
39
+ [data-theme="vuetiful"] h5,
40
+ [data-theme="vuetiful"] h6,
41
+ [data-theme="vuetiful"] a,
42
+ [data-theme="vuetiful"] button {
43
+ font-weight: bold;
44
+ }`,
45
+ },
46
+ {
47
+ name: 'rocket',
48
+ gradients: {
49
+ light:
50
+ 'radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
51
+ dark: 'radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
52
+ },
53
+ colors: {
54
+ primary: { key: 'primary', label: 'Primary', hex: '#06b6d4', rgb: '0 0 0', on: '0 0 0' },
55
+ secondary: { key: 'secondary', label: 'Secondary', hex: '#3b82f6', rgb: '0 0 0', on: '255 255 255' },
56
+ tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#3b82f6', rgb: '0 0 0', on: '255 255 255' },
57
+ success: { key: 'success', label: 'Success', hex: '#4ccb15', rgb: '0 0 0', on: '0 0 0' },
58
+ warning: { key: 'warning', label: 'Warning', hex: '#f4c12a', rgb: '0 0 0', on: '0 0 0' },
59
+ error: { key: 'error', label: 'Error', hex: '#b52c55', rgb: '0 0 0', on: '255 255 255' },
60
+ surface: { key: 'surface', label: 'Surface', hex: '#64748b', rgb: '0 0 0', on: '255 255 255' },
61
+ },
62
+ fonts: {
63
+ base: 'system',
64
+ customBase: 'Roboto',
65
+ baseImports: '@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
66
+ headings: 'system',
67
+ customHeadings: 'Space Grotesk',
68
+ headingImports:
69
+ '@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");',
70
+ },
71
+ textColorLight: '0 0 0',
72
+ textColorDark: '255 255 255',
73
+ roundedBase: '0px',
74
+ roundedContainer: '0px',
75
+ borderBase: '0px',
76
+ customCss: `
77
+ [data-theme='rocket'] h1,
78
+ [data-theme='rocket'] h2,
79
+ [data-theme='rocket'] h3,
80
+ [data-theme='rocket'] h4,
81
+ [data-theme='rocket'] h5,
82
+ [data-theme='rocket'] h6 {
83
+ font-weight: bold;
84
+ }`,
85
+ },
86
+ ];
87
+
88
+ export interface Theme {
89
+ name: string;
90
+ gradients: Gradients;
91
+ colors: {
92
+ primary: ColorSettings;
93
+ secondary: ColorSettings;
94
+ tertiary: ColorSettings;
95
+ success: ColorSettings;
96
+ warning: ColorSettings;
97
+ error: ColorSettings;
98
+ surface: ColorSettings;
99
+ };
100
+ fonts: Fonts;
101
+ textColorLight: string;
102
+ textColorDark: string;
103
+ roundedBase: string;
104
+ roundedContainer: string;
105
+ borderBase: string;
106
+ customCss: string;
107
+ [key: string]: any;
108
+ }
109
+
110
+ export interface Fonts {
111
+ base: string;
112
+ customBase: string;
113
+ baseImports: string;
114
+ headings: string;
115
+ customHeadings: string;
116
+ headingImports: string;
117
+ }
118
+
119
+ export interface Gradients {
120
+ light: string;
121
+ dark: string;
122
+ }
package/dist/types/components/index.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/types/index.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/types/utils/index.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/src/components/index.test.ts DELETED
@@ -1,10 +0,0 @@
1
- import { describe, expect, it, vi } from "vitest";
2
- import * as index from "./index";
3
-
4
- describe("src", () => {
5
- Object.entries(index).forEach(([key, value]) => {
6
- it(`${key} is defined`, () => {
7
- expect(value).toBeDefined();
8
- });
9
- });
10
- });
package/src/index.test.ts DELETED
@@ -1,26 +0,0 @@
1
- import { describe, expect, it, vi } from "vitest";
2
- import * as components from "./components";
3
- import plugin, * as index from "./index";
4
-
5
- describe("src", () => {
6
- Object.entries(index).forEach(([key, value]) => {
7
- it(`${key} is defined`, () => {
8
- expect(value).toBeDefined();
9
- });
10
- });
11
-
12
- describe("given install is called", () => {
13
- it("should register all components", () => {
14
- const app = {
15
- component: vi.fn(),
16
- };
17
-
18
- plugin.install(app);
19
-
20
- for (const key in components) {
21
- // @ts-expect-error
22
- expect(app.component).toHaveBeenCalledWith(key, components[key]);
23
- }
24
- });
25
- });
26
- });
package/src/utils/index.test.ts DELETED
@@ -1,11 +0,0 @@
1
- // test that all exports are defined
2
- import * as utils from "./index";
3
- import { describe, it, expect } from "vitest";
4
-
5
- describe("utils", () => {
6
- Object.entries(utils).forEach(([key, value]) => {
7
- it(`${key} is defined`, () => {
8
- expect(value).toBeDefined();
9
- });
10
- });
11
- });