Skip to content

Commit e8fc4c9

Browse files
techniqtechniq
committed
Use a local copy of Skeleton themes to fix Cloudflare build (work around Node.js runtime issue)
1 parent 9532946 commit e8fc4c9

File tree

12 files changed

+1258
-1
lines changed

12 files changed

+1258
-1
lines changed

Diff for: ‎packages/svelte-ux/src/lib/styles/skeleton.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
import { getThemeProperties } from '@skeletonlabs/tw-plugin';
1+
/*
2+
* Use local copy of Skeleton themes/getThemeProperties() due to:
3+
* - Skeleton themse only available in `@skeletonlabs/tw-plugin` package, which
4+
* - Does not publish the `src` directly
5+
* - Requires the Node.js runtime (fs, path, tty, url, util)
6+
* - Cloudflare not support Node.js runtime (unless using `require('node:...'))
7+
* - https://developers.cloudflare.com/workers/runtime-apis/nodejs/
8+
* - Builds work on Vercel (since they support the Node.js runtime)
9+
* - See: https://github.com/techniq/svelte-ux/pull/192
10+
*/
11+
//
12+
// https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/tailwind/themes/index.ts#L17-L19
13+
// import { getThemeProperties } from '@skeletonlabs/tw-plugin';
14+
import { getThemeProperties } from './skeleton/index';
215

316
const themeNames = [
417
'skeleton',

Diff for: ‎packages/svelte-ux/src/lib/styles/skeleton/crimson.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import type { PresetTheme } from './index.js';
2+
3+
const crimson = {
4+
name: 'crimson',
5+
properties: {
6+
'--theme-font-family-base':
7+
"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
8+
'--theme-font-family-heading': 'system-ui',
9+
'--theme-font-color-base': 'var(--color-surface-900)',
10+
'--theme-font-color-dark': 'var(--color-surface-50)',
11+
'--theme-rounded-base': '24px',
12+
'--theme-rounded-container': '24px',
13+
'--theme-border-base': '1px',
14+
'--on-primary': '255 255 255',
15+
'--on-secondary': '255 255 255',
16+
'--on-tertiary': '0 0 0',
17+
'--on-success': '0 0 0',
18+
'--on-warning': '0 0 0',
19+
'--on-error': '0 0 0',
20+
'--on-surface': '255 255 255',
21+
'--color-primary-50': '249 220 226',
22+
'--color-primary-100': '246 208 216',
23+
'--color-primary-200': '244 197 206',
24+
'--color-primary-300': '238 162 177',
25+
'--color-primary-400': '225 92 119',
26+
'--color-primary-500': '212 22 60',
27+
'--color-primary-600': '191 20 54',
28+
'--color-primary-700': '159 17 45',
29+
'--color-primary-800': '127 13 36',
30+
'--color-primary-900': '104 11 29',
31+
'--color-secondary-50': '227 237 243',
32+
'--color-secondary-100': '218 231 239',
33+
'--color-secondary-200': '209 225 235',
34+
'--color-secondary-300': '181 206 223',
35+
'--color-secondary-400': '126 170 199',
36+
'--color-secondary-500': '70 133 175',
37+
'--color-secondary-600': '63 120 158',
38+
'--color-secondary-700': '53 100 131',
39+
'--color-secondary-800': '42 80 105',
40+
'--color-secondary-900': '34 65 86',
41+
'--color-tertiary-50': '246 244 244',
42+
'--color-tertiary-100': '242 240 240',
43+
'--color-tertiary-200': '239 237 236',
44+
'--color-tertiary-300': '230 226 225',
45+
'--color-tertiary-400': '211 204 203',
46+
'--color-tertiary-500': '192 182 180',
47+
'--color-tertiary-600': '173 164 162',
48+
'--color-tertiary-700': '144 137 135',
49+
'--color-tertiary-800': '115 109 108',
50+
'--color-tertiary-900': '94 89 88',
51+
'--color-success-50': '246 250 239',
52+
'--color-success-100': '243 248 234',
53+
'--color-success-200': '240 247 229',
54+
'--color-success-300': '230 241 213',
55+
'--color-success-400': '212 231 182',
56+
'--color-success-500': '193 221 151',
57+
'--color-success-600': '174 199 136',
58+
'--color-success-700': '145 166 113',
59+
'--color-success-800': '116 133 91',
60+
'--color-success-900': '95 108 74',
61+
'--color-warning-50': '251 246 231',
62+
'--color-warning-100': '250 243 223',
63+
'--color-warning-200': '248 240 215',
64+
'--color-warning-300': '244 231 191',
65+
'--color-warning-400': '236 212 142',
66+
'--color-warning-500': '228 194 94',
67+
'--color-warning-600': '205 175 85',
68+
'--color-warning-700': '171 146 71',
69+
'--color-warning-800': '137 116 56',
70+
'--color-warning-900': '112 95 46',
71+
'--color-error-50': '248 236 236',
72+
'--color-error-100': '246 229 230',
73+
'--color-error-200': '244 223 224',
74+
'--color-error-300': '237 204 205',
75+
'--color-error-400': '224 165 167',
76+
'--color-error-500': '210 127 129',
77+
'--color-error-600': '189 114 116',
78+
'--color-error-700': '158 95 97',
79+
'--color-error-800': '126 76 77',
80+
'--color-error-900': '103 62 63',
81+
'--color-surface-50': '223 224 226',
82+
'--color-surface-100': '213 213 217',
83+
'--color-surface-200': '202 203 207',
84+
'--color-surface-300': '170 171 179',
85+
'--color-surface-400': '107 109 121',
86+
'--color-surface-500': '43 46 64',
87+
'--color-surface-600': '39 41 58',
88+
'--color-surface-700': '32 35 48',
89+
'--color-surface-800': '26 28 38',
90+
'--color-surface-900': '21 23 31'
91+
},
92+
properties_dark: {},
93+
enhancements: {}
94+
} satisfies PresetTheme;
95+
96+
export default crimson;

Diff for: ‎packages/svelte-ux/src/lib/styles/skeleton/gold-nouveau.ts

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import type { PresetTheme } from './index.js';
2+
3+
const goldNouveau = {
4+
name: 'gold-nouveau',
5+
properties: {
6+
'--theme-font-family-base': 'system-ui, sans-serif',
7+
'--theme-font-family-heading': "'Quicksand', sans-serif",
8+
'--theme-font-color-base': 'var(--color-surface-900)',
9+
'--theme-font-color-dark': 'var(--color-surface-50)',
10+
'--theme-rounded-base': '4px',
11+
'--theme-rounded-container': '4px',
12+
'--theme-border-base': '1px',
13+
'--on-primary': '255 255 255',
14+
'--on-secondary': '255 255 255',
15+
'--on-tertiary': '255 255 255',
16+
'--on-success': '0 0 0',
17+
'--on-warning': '0 0 0',
18+
'--on-error': '255 255 255',
19+
'--on-surface': '255 255 255',
20+
'--color-primary-50': '250 248 252',
21+
'--color-primary-100': '242 238 247',
22+
'--color-primary-200': '229 220 239',
23+
'--color-primary-300': '209 192 226',
24+
'--color-primary-400': '162 129 197',
25+
'--color-primary-500': '116 74 161',
26+
'--color-primary-600': '83 53 115',
27+
'--color-primary-700': '60 39 84',
28+
'--color-primary-800': '35 22 49',
29+
'--color-primary-900': '18 11 24',
30+
'--color-secondary-50': '218 234 251',
31+
'--color-secondary-100': '205 227 250',
32+
'--color-secondary-200': '193 220 249',
33+
'--color-secondary-300': '155 199 245',
34+
'--color-secondary-400': '81 156 237',
35+
'--color-secondary-500': '6 114 229',
36+
'--color-secondary-600': '5 103 206',
37+
'--color-secondary-700': '5 86 172',
38+
'--color-secondary-800': '4 68 137',
39+
'--color-secondary-900': '3 56 112',
40+
'--color-tertiary-50': '236 235 250',
41+
'--color-tertiary-100': '229 228 248',
42+
'--color-tertiary-200': '223 221 247',
43+
'--color-tertiary-300': '204 201 241',
44+
'--color-tertiary-400': '165 161 231',
45+
'--color-tertiary-500': '127 120 221',
46+
'--color-tertiary-600': '114 108 199',
47+
'--color-tertiary-700': '95 90 166',
48+
'--color-tertiary-800': '76 72 133',
49+
'--color-tertiary-900': '62 59 108',
50+
'--color-success-50': '234 246 237',
51+
'--color-success-100': '227 243 231',
52+
'--color-success-200': '220 241 225',
53+
'--color-success-300': '199 232 206',
54+
'--color-success-400': '156 214 170',
55+
'--color-success-500': '114 197 133',
56+
'--color-success-600': '103 177 120',
57+
'--color-success-700': '86 148 100',
58+
'--color-success-800': '68 118 80',
59+
'--color-success-900': '56 97 65',
60+
'--color-warning-50': '251 236 218',
61+
'--color-warning-100': '250 229 206',
62+
'--color-warning-200': '249 223 193',
63+
'--color-warning-300': '245 204 156',
64+
'--color-warning-400': '238 165 82',
65+
'--color-warning-500': '231 127 8',
66+
'--color-warning-600': '208 114 7',
67+
'--color-warning-700': '173 95 6',
68+
'--color-warning-800': '139 76 5',
69+
'--color-warning-900': '113 62 4',
70+
'--color-error-50': '238 219 222',
71+
'--color-error-100': '233 207 211',
72+
'--color-error-200': '227 195 200',
73+
'--color-error-300': '210 159 167',
74+
'--color-error-400': '177 87 100',
75+
'--color-error-500': '143 15 34',
76+
'--color-error-600': '129 14 31',
77+
'--color-error-700': '107 11 26',
78+
'--color-error-800': '86 9 20',
79+
'--color-error-900': '70 7 17',
80+
'--color-surface-50': '250 248 252',
81+
'--color-surface-100': '242 238 247',
82+
'--color-surface-200': '229 220 239',
83+
'--color-surface-300': '209 192 226',
84+
'--color-surface-400': '162 129 197',
85+
'--color-surface-500': '116 74 161',
86+
'--color-surface-600': '83 53 115',
87+
'--color-surface-700': '60 39 84',
88+
'--color-surface-800': '35 22 49',
89+
'--color-surface-900': '18 11 24',
90+
},
91+
properties_dark: {
92+
'--on-primary': '0 0 0',
93+
'--color-primary-50': '251 247 224',
94+
'--color-primary-100': '250 244 214',
95+
'--color-primary-200': '249 241 204',
96+
'--color-primary-300': '245 233 173',
97+
'--color-primary-400': '238 217 112',
98+
'--color-primary-500': '230 200 51',
99+
'--color-primary-600': '207 180 46',
100+
'--color-primary-700': '173 150 38',
101+
'--color-primary-800': '138 120 31',
102+
'--color-primary-900': '113 98 25',
103+
},
104+
enhancements: {
105+
"[data-theme='gold-nouveau'] h1,\n[data-theme='gold-nouveau'] h2,\n[data-theme='gold-nouveau'] h3,\n[data-theme='gold-nouveau'] h4,\n[data-theme='gold-nouveau'] h5,\n[data-theme='gold-nouveau'] h6":
106+
{ fontWeight: 'bold' },
107+
"[data-theme='gold-nouveau']": {
108+
backgroundImage:
109+
'radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),\n\t\tradial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
110+
backgroundAttachment: 'fixed',
111+
backgroundPosition: 'center',
112+
backgroundRepeat: 'no-repeat',
113+
backgroundSize: 'cover',
114+
},
115+
},
116+
} satisfies PresetTheme;
117+
118+
export default goldNouveau;

Diff for: ‎packages/svelte-ux/src/lib/styles/skeleton/hamlindigo.ts

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { PresetTheme } from './index.js';
2+
3+
const hamlindigo = {
4+
name: 'hamlindigo',
5+
properties: {
6+
'--theme-font-family-base':
7+
"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
8+
'--theme-font-family-heading': 'serif',
9+
'--theme-font-color-base': '0 0 0',
10+
'--theme-font-color-dark': '255 255 255',
11+
'--theme-rounded-base': '2px',
12+
'--theme-rounded-container': '2px',
13+
'--theme-border-base': '2px',
14+
'--on-primary': '0 0 0',
15+
'--on-secondary': '255 255 255',
16+
'--on-tertiary': '255 255 255',
17+
'--on-success': '255 255 255',
18+
'--on-warning': '0 0 0',
19+
'--on-error': '255 255 255',
20+
'--on-surface': '255 255 255',
21+
'--color-primary-50': '242 245 253',
22+
'--color-primary-100': '238 242 252',
23+
'--color-primary-200': '233 239 252',
24+
'--color-primary-300': '220 229 249',
25+
'--color-primary-400': '194 210 245',
26+
'--color-primary-500': '168 190 241',
27+
'--color-primary-600': '151 171 217',
28+
'--color-primary-700': '126 143 181',
29+
'--color-primary-800': '101 114 145',
30+
'--color-primary-900': '82 93 118',
31+
'--color-secondary-50': '241 238 230',
32+
'--color-secondary-100': '237 232 222',
33+
'--color-secondary-200': '232 227 214',
34+
'--color-secondary-300': '219 210 189',
35+
'--color-secondary-400': '191 176 140',
36+
'--color-secondary-500': '164 142 91',
37+
'--color-secondary-600': '148 128 82',
38+
'--color-secondary-700': '123 107 68',
39+
'--color-secondary-800': '98 85 55',
40+
'--color-secondary-900': '80 70 45',
41+
'--color-tertiary-50': '231 239 241',
42+
'--color-tertiary-100': '223 234 237',
43+
'--color-tertiary-200': '216 229 232',
44+
'--color-tertiary-300': '192 213 218',
45+
'--color-tertiary-400': '144 182 191',
46+
'--color-tertiary-500': '97 151 163',
47+
'--color-tertiary-600': '87 136 147',
48+
'--color-tertiary-700': '73 113 122',
49+
'--color-tertiary-800': '58 91 98',
50+
'--color-tertiary-900': '48 74 80',
51+
'--color-success-50': '227 239 236',
52+
'--color-success-100': '218 234 229',
53+
'--color-success-200': '209 228 223',
54+
'--color-success-300': '181 212 203',
55+
'--color-success-400': '126 180 164',
56+
'--color-success-500': '71 148 125',
57+
'--color-success-600': '64 133 113',
58+
'--color-success-700': '53 111 94',
59+
'--color-success-800': '43 89 75',
60+
'--color-success-900': '35 73 61',
61+
'--color-warning-50': '249 242 226',
62+
'--color-warning-100': '248 238 216',
63+
'--color-warning-200': '246 234 207',
64+
'--color-warning-300': '240 221 178',
65+
'--color-warning-400': '229 195 120',
66+
'--color-warning-500': '218 169 62',
67+
'--color-warning-600': '196 152 56',
68+
'--color-warning-700': '164 127 47',
69+
'--color-warning-800': '131 101 37',
70+
'--color-warning-900': '107 83 30',
71+
'--color-error-50': '241 231 234',
72+
'--color-error-100': '236 223 227',
73+
'--color-error-200': '232 216 221',
74+
'--color-error-300': '218 192 200',
75+
'--color-error-400': '190 144 158',
76+
'--color-error-500': '162 97 117',
77+
'--color-error-600': '146 87 105',
78+
'--color-error-700': '122 73 88',
79+
'--color-error-800': '97 58 70',
80+
'--color-error-900': '79 48 57',
81+
'--color-surface-50': '232 234 241',
82+
'--color-surface-100': '224 228 237',
83+
'--color-surface-200': '216 221 232',
84+
'--color-surface-300': '193 200 218',
85+
'--color-surface-400': '146 159 191',
86+
'--color-surface-500': '99 118 163',
87+
'--color-surface-600': '89 106 147',
88+
'--color-surface-700': '74 89 122',
89+
'--color-surface-800': '59 71 98',
90+
'--color-surface-900': '49 58 80',
91+
},
92+
properties_dark: {},
93+
enhancements: {
94+
"[data-theme='hamlindigo']": {
95+
backgroundImage:
96+
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23e0e4ed' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",
97+
},
98+
".dark [data-theme='hamlindigo']": {
99+
backgroundImage:
100+
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%233b4762' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")",
101+
},
102+
},
103+
} satisfies PresetTheme;
104+
105+
export default hamlindigo;

0 commit comments

Comments
 (0)