skeletonlabs · AdrianGonz97 · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023
diff --git a/.changeset/silent-games-drop.md b/.changeset/silent-games-drop.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": minor
+---
+
+feat: Added a new `wintry` preset theme
diff --git a/packages/plugin/scripts/convert-theme.ts b/packages/plugin/scripts/convert-theme.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'fs';
 import { writeFile } from 'fs/promises';
 import postcss from 'postcss';
 import postcssJs from 'postcss-js';
-import type { Theme } from '../src/tailwind/themes';
+import type { PresetTheme } from '../src/tailwind/themes';
 
 // Converts a theme's .css file into a .ts file.
 export async function convertTheme(name: string) {
@@ -17,9 +17,11 @@ export async function convertTheme(name: string) {
 	delete cssInJs[':root'];
 
 	const theme = {
+		name,
 		properties: properties,
-		enhancements: { ...cssInJs }
-	} satisfies Theme;
+		enhancements: { ...cssInJs },
+		properties_dark: {}
+	} satisfies PresetTheme;
 
 	// Creates the generated CSS-in-JS file
 	await writeFile(

diff --git a/packages/plugin/src/tailwind/themes/crimson.ts b/packages/plugin/src/tailwind/themes/crimson.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const crimson = {
+	name: 'crimson',
 	properties: {
 		'--theme-font-family-base':
 			"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'",
@@ -90,6 +91,6 @@ const crimson = {
 	},
 	properties_dark: {},
 	enhancements: {}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default crimson;
diff --git a/packages/plugin/src/tailwind/themes/gold-nouveau.ts b/packages/plugin/src/tailwind/themes/gold-nouveau.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const goldNouveau = {
+	name: 'gold-nouveau',
 	properties: {
 		'--theme-font-family-base': 'system-ui, sans-serif',
 		'--theme-font-family-heading': "'Quicksand', sans-serif",
@@ -112,6 +113,6 @@ const goldNouveau = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default goldNouveau;
diff --git a/packages/plugin/src/tailwind/themes/hamlindigo.ts b/packages/plugin/src/tailwind/themes/hamlindigo.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const hamlindigo = {
+	name: 'hamlindigo',
 	properties: {
 		'--theme-font-family-base':
 			"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'",
@@ -99,6 +100,6 @@ const hamlindigo = {
 				"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\")"
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default hamlindigo;
diff --git a/packages/plugin/src/tailwind/themes/index.ts b/packages/plugin/src/tailwind/themes/index.ts
@@ -7,22 +7,27 @@ import sahara from './sahara.js';
 import seafoam from './seafoam.js';
 import skeleton from './skeleton.js';
 import vintage from './vintage.js';
+import wintry from './wintry.js';
 import type { CSSRuleObject } from 'tailwindcss/types/config.js';
 
-export const themes = { crimson, 'gold-nouveau': goldNouveau, hamlindigo, modern, rocket, sahara, seafoam, skeleton, vintage };
+export const themes = { crimson, 'gold-nouveau': goldNouveau, hamlindigo, modern, rocket, sahara, seafoam, skeleton, vintage, wintry };
 
-export type PresetTheme = ObjectKeys<typeof themes>;
+export type PresetThemeName = ObjectKeys<typeof themes>;
 
-export function getThemeProperties(themeName: PresetTheme) {
+export function getThemeProperties(themeName: PresetThemeName) {
 	return themes[themeName].properties;
 }
 
 export type ObjectValues<T> = T[keyof T];
 export type ObjectKeys<T> = keyof T;
 
-export type Theme = {
+export type BaseTheme = {
+	name: string;
 	properties: ThemeProperties;
 	properties_dark: Partial<ThemeProperties>;
+};
+
+export type PresetTheme = BaseTheme & {
 	enhancements: CSSRuleObject;
 };
 

diff --git a/packages/plugin/src/tailwind/themes/modern.ts b/packages/plugin/src/tailwind/themes/modern.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const modern = {
+	name: 'modern',
 	properties: {
 		'--theme-font-family-base': "'Quicksand', sans-serif",
 		'--theme-font-family-heading': "'Quicksand', sans-serif",
@@ -108,6 +109,6 @@ const modern = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default modern;
diff --git a/packages/plugin/src/tailwind/themes/rocket.ts b/packages/plugin/src/tailwind/themes/rocket.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const rocket = {
+	name: 'rocket',
 	properties: {
 		'--theme-font-family-base': 'system-ui',
 		'--theme-font-family-heading': "'Space Grotesk', sans-serif",
@@ -100,6 +101,6 @@ const rocket = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default rocket;
diff --git a/packages/plugin/src/tailwind/themes/sahara.ts b/packages/plugin/src/tailwind/themes/sahara.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const sahara = {
+	name: 'sahara',
 	properties: {
 		'--theme-font-family-base':
 			"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'",
@@ -111,6 +112,6 @@ const sahara = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default sahara;
diff --git a/packages/plugin/src/tailwind/themes/seafoam.ts b/packages/plugin/src/tailwind/themes/seafoam.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const seafoam = {
+	name: 'seafoam',
 	properties: {
 		'--theme-font-family-base':
 			"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'",
@@ -107,6 +108,6 @@ const seafoam = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default seafoam;
diff --git a/packages/plugin/src/tailwind/themes/skeleton.ts b/packages/plugin/src/tailwind/themes/skeleton.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const skeleton = {
+	name: 'skeleton',
 	properties: {
 		'--theme-font-family-base': 'system-ui',
 		'--theme-font-family-heading': 'system-ui',
@@ -100,6 +101,6 @@ const skeleton = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default skeleton;
diff --git a/packages/plugin/src/tailwind/themes/vintage.ts b/packages/plugin/src/tailwind/themes/vintage.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';
 
 const vintage = {
+	name: 'vintage',
 	properties: {
 		'--theme-font-family-base':
 			"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'",
@@ -109,6 +110,6 @@ const vintage = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;
 
 export default vintage;
diff --git a/packages/plugin/src/tailwind/themes/wintry.ts b/packages/plugin/src/tailwind/themes/wintry.ts
@@ -0,0 +1,110 @@
+import type { PresetTheme } from './index.js';
+
+const wintry = {
+	name: 'wintry',
+	properties: {
+		'--theme-font-family-heading': 'Inter, system-ui, sans-serif',
+		'--theme-font-family-base': 'system-ui',
+		'--theme-font-color-base': '23 37 84',
+		'--theme-font-color-dark': '255 255 255',
+		'--theme-rounded-base': '9999px',
+		'--theme-rounded-container': '6px',
+		'--theme-border-base': '1px',
+		'--on-primary': '255 255 255',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '255 255 255',
+		'--on-success': '0 0 0',
+		'--on-warning': '0 0 0',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		'--color-primary-50': '239 246 255',
+		'--color-primary-100': '219 234 254',
+		'--color-primary-200': '191 219 254',
+		'--color-primary-300': '147 197 253',
+		'--color-primary-400': '96 165 250',
+		'--color-primary-500': '59 130 246',
+		'--color-primary-600': '37 99 235',
+		'--color-primary-700': '29 78 216',
+		'--color-primary-800': '30 64 175',
+		'--color-primary-900': '30 58 138',
+		'--color-secondary-50': '240 249 255',
+		'--color-secondary-100': '224 242 254',
+		'--color-secondary-200': '186 230 253',
+		'--color-secondary-300': '125 211 252',
+		'--color-secondary-400': '56 189 248',
+		'--color-secondary-500': '14 165 233',
+		'--color-secondary-600': '2 132 199',
+		'--color-secondary-700': '3 105 161',
+		'--color-secondary-800': '7 89 133',
+		'--color-secondary-900': '12 74 110',
+		'--color-tertiary-50': '238 242 255',
+		'--color-tertiary-100': '224 231 255',
+		'--color-tertiary-200': '199 210 254',
+		'--color-tertiary-300': '165 180 252',
+		'--color-tertiary-400': '129 140 248',
+		'--color-tertiary-500': '99 102 241',
+		'--color-tertiary-600': '79 70 229',
+		'--color-tertiary-700': '67 56 202',
+		'--color-tertiary-800': '55 48 163',
+		'--color-tertiary-900': '49 46 129',
+		'--color-success-50': '237 247 220',
+		'--color-success-100': '230 245 208',
+		'--color-success-200': '224 242 197',
+		'--color-success-300': '206 235 162',
+		'--color-success-400': '169 219 92',
+		'--color-success-500': '132 204 22',
+		'--color-success-600': '119 184 20',
+		'--color-success-700': '99 153 17',
+		'--color-success-800': '79 122 13',
+		'--color-success-900': '65 100 11',
+		'--color-warning-50': '252 244 218',
+		'--color-warning-100': '251 240 206',
+		'--color-warning-200': '250 236 193',
+		'--color-warning-300': '247 225 156',
+		'--color-warning-400': '240 202 82',
+		'--color-warning-500': '234 179 8',
+		'--color-warning-600': '211 161 7',
+		'--color-warning-700': '176 134 6',
+		'--color-warning-800': '140 107 5',
+		'--color-warning-900': '115 88 4',
+		'--color-error-50': '249 221 234',
+		'--color-error-100': '246 209 228',
+		'--color-error-200': '244 198 221',
+		'--color-error-300': '238 163 200',
+		'--color-error-400': '225 94 159',
+		'--color-error-500': '212 25 118',
+		'--color-error-600': '191 23 106',
+		'--color-error-700': '159 19 89',
+		'--color-error-800': '127 15 71',
+		'--color-error-900': '104 12 58',
+		'--color-surface-50': '249 250 251',
+		'--color-surface-100': '243 244 246',
+		'--color-surface-200': '229 231 235',
+		'--color-surface-300': '209 213 219',
+		'--color-surface-400': '156 163 175',
+		'--color-surface-500': '107 114 128',
+		'--color-surface-600': '75 85 99',
+		'--color-surface-700': '55 65 81',
+		'--color-surface-800': '31 41 55',
+		'--color-surface-900': '17 24 39'
+	},
+	properties_dark: {},
+	enhancements: {
+		"[data-theme='wintry'] h1,\n[data-theme='wintry'] h2,\n[data-theme='wintry'] h3,\n[data-theme='wintry'] h4,\n[data-theme='wintry'] h5,\n[data-theme='wintry'] h6":
+			{ fontWeight: 'bold' },
+		"[data-theme='wintry']": {
+			backgroundImage:
+				'radial-gradient(at 50% 0%, rgba(var(--color-secondary-500) / 0.50) 0px, transparent 75%), radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.40) 0px, transparent 50%)',
+			backgroundAttachment: 'fixed',
+			backgroundPosition: 'center',
+			backgroundRepeat: 'no-repeat',
+			backgroundSize: 'cover'
+		},
+		".dark [data-theme='wintry']": {
+			backgroundImage:
+				'radial-gradient(at 50% 0%, rgba(var(--color-secondary-500) / 0.18) 0px, transparent 75%), radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.18) 0px, transparent 50%)'
+		}
+	}
+} satisfies PresetTheme;
+
+export default wintry;