@code-coaching/vuetiful 0.24.2 → 0.24.4
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/vuetiful.es.mjs +153 -4
- package/dist/vuetiful.umd.js +41 -12
- package/package.json +1 -1
- package/src/themes/theme-seafoam.css +1 -3
- package/src/themes/theme-skeleton.css +0 -3
- package/src/themes/theme-vuetiful.css +27 -10
- package/src/utils/theme/theme-switcher.vue +1 -1
- package/src/utils/theme/themes.ts +160 -5
package/package.json
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
:root {
|
|
5
5
|
/* =~= Theme Styles =~= */
|
|
6
|
-
--theme-font-family-base:
|
|
7
|
-
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
8
|
-
'Noto Color Emoji';
|
|
6
|
+
--theme-font-family-base: system-ui;
|
|
9
7
|
--theme-font-family-heading: 'Playfair Display', serif;
|
|
10
8
|
--theme-font-color-base: var(--color-surface-900);
|
|
11
9
|
--theme-font-color-dark: var(--color-secondary-100);
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/* https://fonts.google.com/specimen/Lato?query=lato¬o.query=Abril */
|
|
2
|
-
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
|
|
3
|
-
|
|
4
1
|
:root {
|
|
5
2
|
/* =~= Theme Properties =~= */
|
|
6
3
|
--theme-font-family-base: system-ui;
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
:root {
|
|
5
5
|
/* =~= Theme Properties =~= */
|
|
6
|
-
--theme-font-family-base: 'Quicksand', system;
|
|
7
|
-
--theme-font-family-heading: 'Quicksand', system;
|
|
6
|
+
--theme-font-family-base: 'Quicksand', system-ui;
|
|
7
|
+
--theme-font-family-heading: 'Quicksand', system-ui;
|
|
8
8
|
--theme-font-color-base: 0 0 0;
|
|
9
9
|
--theme-font-color-dark: 255 255 255;
|
|
10
10
|
--theme-rounded-base: 12px;
|
|
@@ -107,13 +107,30 @@
|
|
|
107
107
|
--color-surface-900: 49 50 118; /* ⬅ #313276 */
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
[data-theme='
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
[data-theme='vuetiful'] h1,
|
|
111
|
+
[data-theme='vuetiful'] h2,
|
|
112
|
+
[data-theme='vuetiful'] h3,
|
|
113
|
+
[data-theme='vuetiful'] h4,
|
|
114
|
+
[data-theme='vuetiful'] h5,
|
|
115
|
+
[data-theme='vuetiful'] h6,
|
|
116
|
+
[data-theme='vuetiful'] a,
|
|
117
|
+
[data-theme='vuetiful'] button {
|
|
118
|
+
font-weight: bold;
|
|
114
119
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
120
|
+
|
|
121
|
+
/* Applied to body with `<body data-theme="vuetiful">` */
|
|
122
|
+
/* Created with: https://csshero.org/mesher/ */
|
|
123
|
+
[data-theme='vuetiful'] {
|
|
124
|
+
/* prettier-ignore */
|
|
125
|
+
background-image:
|
|
126
|
+
radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
|
|
127
|
+
radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
|
|
128
|
+
radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
|
|
129
|
+
}
|
|
130
|
+
.dark [data-theme='vuetiful'] {
|
|
131
|
+
/* prettier-ignore */
|
|
132
|
+
background-image:
|
|
133
|
+
radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
|
|
134
|
+
radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),
|
|
135
|
+
radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%);
|
|
119
136
|
}
|
|
@@ -18,11 +18,11 @@ export const themes: Array<Theme> = [
|
|
|
18
18
|
surface: { key: 'surface', label: 'Surface', hex: '#6366F1', rgb: '0 0 0', on: '255 255 255' },
|
|
19
19
|
},
|
|
20
20
|
fonts: {
|
|
21
|
-
base: 'system',
|
|
21
|
+
base: 'system-ui',
|
|
22
22
|
customBase: 'Quicksand',
|
|
23
23
|
baseImports:
|
|
24
24
|
'@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
|
|
25
|
-
headings: 'system',
|
|
25
|
+
headings: 'system-ui',
|
|
26
26
|
customHeadings: 'Quicksand',
|
|
27
27
|
headingImports: '',
|
|
28
28
|
},
|
|
@@ -60,10 +60,10 @@ export const themes: Array<Theme> = [
|
|
|
60
60
|
surface: { key: 'surface', label: 'Surface', hex: '#64748b', rgb: '0 0 0', on: '255 255 255' },
|
|
61
61
|
},
|
|
62
62
|
fonts: {
|
|
63
|
-
base: 'system',
|
|
63
|
+
base: 'system-ui',
|
|
64
64
|
customBase: 'Roboto',
|
|
65
65
|
baseImports: '@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
|
|
66
|
-
headings: 'system',
|
|
66
|
+
headings: 'system-ui',
|
|
67
67
|
customHeadings: 'Space Grotesk',
|
|
68
68
|
headingImports:
|
|
69
69
|
'@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");',
|
|
@@ -83,12 +83,167 @@ export const themes: Array<Theme> = [
|
|
|
83
83
|
font-weight: bold;
|
|
84
84
|
}`,
|
|
85
85
|
},
|
|
86
|
+
{
|
|
87
|
+
name: 'sahara',
|
|
88
|
+
gradients: {
|
|
89
|
+
light:
|
|
90
|
+
'radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%), radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)',
|
|
91
|
+
dark: 'radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%), radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)',
|
|
92
|
+
},
|
|
93
|
+
colors: {
|
|
94
|
+
primary: { key: 'primary', label: 'Primary', hex: '#ecaa36', rgb: '0 0 0', on: '0 0 0' },
|
|
95
|
+
secondary: { key: 'secondary', label: 'Secondary', hex: '#3acbba', rgb: '0 0 0', on: '0 0 0' },
|
|
96
|
+
tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#bbdf86', rgb: '0 0 0', on: '0 0 0' },
|
|
97
|
+
success: { key: 'success', label: 'Success', hex: '#84cc16', rgb: '0 0 0', on: '0 0 0' },
|
|
98
|
+
warning: { key: 'warning', label: 'Warning', hex: '#e5c157', rgb: '0 0 0', on: '0 0 0' },
|
|
99
|
+
error: { key: 'error', label: 'Error', hex: '#db5c9c', rgb: '0 0 0', on: '255 255 255' },
|
|
100
|
+
surface: { key: 'surface', label: 'Surface', hex: '#da4e65', rgb: '0 0 0', on: '255 255 255' },
|
|
101
|
+
},
|
|
102
|
+
fonts: {
|
|
103
|
+
base: 'sans-serif',
|
|
104
|
+
customBase: 'Lato',
|
|
105
|
+
baseImports:
|
|
106
|
+
'@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");',
|
|
107
|
+
headings: 'sans-serif',
|
|
108
|
+
customHeadings: 'Raleway',
|
|
109
|
+
headingImports:
|
|
110
|
+
'@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");',
|
|
111
|
+
},
|
|
112
|
+
textColorLight: '0 0 0',
|
|
113
|
+
textColorDark: '255 255 255',
|
|
114
|
+
roundedBase: '9999px',
|
|
115
|
+
roundedContainer: '24px',
|
|
116
|
+
borderBase: '1px',
|
|
117
|
+
customCss: `
|
|
118
|
+
[data-theme='sahara'] h1,
|
|
119
|
+
[data-theme='sahara'] h2,
|
|
120
|
+
[data-theme='sahara'] h3,
|
|
121
|
+
[data-theme='sahara'] h4,
|
|
122
|
+
[data-theme='sahara'] h5,
|
|
123
|
+
[data-theme='sahara'] h6 {
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
}
|
|
126
|
+
[data-theme='sahara'] p {
|
|
127
|
+
font-weight: 400;
|
|
128
|
+
}`,
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
name: 'seafoam',
|
|
132
|
+
gradients: {
|
|
133
|
+
light: 'linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%)',
|
|
134
|
+
dark: 'linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%)',
|
|
135
|
+
},
|
|
136
|
+
colors: {
|
|
137
|
+
primary: { key: 'primary', label: 'Primary', hex: '#86d0cb', rgb: '0 0 0', on: '0 0 0' },
|
|
138
|
+
secondary: { key: 'secondary', label: 'Secondary', hex: '#213355', rgb: '0 0 0', on: '255 255 255' },
|
|
139
|
+
tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#ff3d00', rgb: '0 0 0', on: '255 255 255' },
|
|
140
|
+
success: { key: 'success', label: 'Success', hex: '#06e5a2', rgb: '0 0 0', on: '0 0 0' },
|
|
141
|
+
warning: { key: 'warning', label: 'Warning', hex: '#eae557', rgb: '0 0 0', on: '0 0 0' },
|
|
142
|
+
error: { key: 'error', label: 'Error', hex: '#d24646', rgb: '0 0 0', on: '255 255 255' },
|
|
143
|
+
surface: { key: 'surface', label: 'Surface', hex: '#25d1d4', rgb: '0 0 0', on: '0 0 0' },
|
|
144
|
+
},
|
|
145
|
+
fonts: {
|
|
146
|
+
base: 'system-ui',
|
|
147
|
+
customBase: '',
|
|
148
|
+
baseImports:
|
|
149
|
+
'',
|
|
150
|
+
headings: 'serif',
|
|
151
|
+
customHeadings: 'Playfair Display',
|
|
152
|
+
headingImports:
|
|
153
|
+
'@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");',
|
|
154
|
+
},
|
|
155
|
+
textColorLight: '0 0 0',
|
|
156
|
+
textColorDark: '255 255 255',
|
|
157
|
+
roundedBase: '16px',
|
|
158
|
+
roundedContainer: '16px',
|
|
159
|
+
borderBase: '3px',
|
|
160
|
+
customCss: `
|
|
161
|
+
[data-theme='seafoam'] h1,
|
|
162
|
+
[data-theme='seafoam'] h2,
|
|
163
|
+
[data-theme='seafoam'] h3,
|
|
164
|
+
[data-theme='seafoam'] h4,
|
|
165
|
+
[data-theme='seafoam'] h5,
|
|
166
|
+
[data-theme='seafoam'] h6 {
|
|
167
|
+
font-weight: bold;
|
|
168
|
+
font-style: italic;
|
|
169
|
+
letter-spacing: 1px;
|
|
170
|
+
}`
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'seasonal',
|
|
174
|
+
gradients: {
|
|
175
|
+
light: 'radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%), radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%)',
|
|
176
|
+
dark: 'radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%)',
|
|
177
|
+
},
|
|
178
|
+
colors: {
|
|
179
|
+
primary: { key: 'primary', label: 'Primary', hex: '#40b09d', rgb: '0 0 0', on: '0 0 0' },
|
|
180
|
+
secondary: { key: 'secondary', label: 'Secondary', hex: '#d7a12d', rgb: '0 0 0', on: '255 255 255' },
|
|
181
|
+
tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#411d96', rgb: '0 0 0', on: '255 255 255' },
|
|
182
|
+
success: { key: 'success', label: 'Success', hex: '#aad765', rgb: '0 0 0', on: '0 0 0' },
|
|
183
|
+
warning: { key: 'warning', label: 'Warning', hex: '#e1ca84', rgb: '0 0 0', on: '0 0 0' },
|
|
184
|
+
error: { key: 'error', label: 'Error', hex: '#e1565d', rgb: '0 0 0', on: '255 255 255' },
|
|
185
|
+
surface: { key: 'surface', label: 'Surface', hex: '#0f233e', rgb: '0 0 0', on: '255 255 255' },
|
|
186
|
+
},
|
|
187
|
+
fonts: {
|
|
188
|
+
base: 'system-ui',
|
|
189
|
+
customBase: '',
|
|
190
|
+
baseImports: '',
|
|
191
|
+
headings: 'sans-serif',
|
|
192
|
+
customHeadings: 'Quicksand',
|
|
193
|
+
headingImports:
|
|
194
|
+
'@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
|
|
195
|
+
},
|
|
196
|
+
textColorLight: '0 0 0',
|
|
197
|
+
textColorDark: '255 255 255',
|
|
198
|
+
roundedBase: '12px',
|
|
199
|
+
roundedContainer: '12px',
|
|
200
|
+
borderBase: '0px',
|
|
201
|
+
customCss: ''
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
name: 'skeleton',
|
|
205
|
+
gradients: {
|
|
206
|
+
light: '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%);',
|
|
207
|
+
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%);',
|
|
208
|
+
},
|
|
209
|
+
colors: {
|
|
210
|
+
primary: { key: 'primary', label: 'Primary', hex: '#0FBA81', rgb: '0 0 0', on: '0 0 0' },
|
|
211
|
+
secondary: { key: 'secondary', label: 'Secondary', hex: '#4F46E5', rgb: '0 0 0', on: '255 255 255' },
|
|
212
|
+
tertiary: { key: 'tertiary', label: 'Tertiary', hex: '#0EA5E9', rgb: '0 0 0', on: '0 0 0' },
|
|
213
|
+
success: { key: 'success', label: 'Success', hex: '#84cc16', rgb: '0 0 0', on: '0 0 0' },
|
|
214
|
+
warning: { key: 'warning', label: 'Warning', hex: '#EAB308', rgb: '0 0 0', on: '0 0 0' },
|
|
215
|
+
error: { key: 'error', label: 'Error', hex: '#D41976', rgb: '0 0 0', on: '255 255 255' },
|
|
216
|
+
surface: { key: 'surface', label: 'Surface', hex: '#495a8f', rgb: '0 0 0', on: '255 255 255' },
|
|
217
|
+
},
|
|
218
|
+
fonts: {
|
|
219
|
+
base: 'system-ui',
|
|
220
|
+
customBase: '',
|
|
221
|
+
baseImports: '',
|
|
222
|
+
headings: 'system-ui',
|
|
223
|
+
customHeadings: '',
|
|
224
|
+
headingImports: '',
|
|
225
|
+
},
|
|
226
|
+
textColorLight: '0 0 0',
|
|
227
|
+
textColorDark: '255 255 255',
|
|
228
|
+
roundedBase: '9999px',
|
|
229
|
+
roundedContainer: '8px',
|
|
230
|
+
borderBase: 'px',
|
|
231
|
+
customCss: `
|
|
232
|
+
[data-theme='skeleton'] h1,
|
|
233
|
+
[data-theme='skeleton'] h2,
|
|
234
|
+
[data-theme='skeleton'] h3,
|
|
235
|
+
[data-theme='skeleton'] h4,
|
|
236
|
+
[data-theme='skeleton'] h5,
|
|
237
|
+
[data-theme='skeleton'] h6 {
|
|
238
|
+
font-weight: bold;
|
|
239
|
+
}`
|
|
240
|
+
}
|
|
86
241
|
];
|
|
87
242
|
|
|
88
243
|
export const THEME = {
|
|
89
244
|
VUETIFUL: themes[0],
|
|
90
245
|
ROCKET: themes[1],
|
|
91
|
-
}
|
|
246
|
+
};
|
|
92
247
|
|
|
93
248
|
export interface Theme {
|
|
94
249
|
name: string;
|