Map Skeleton themes to Svelte UX themes

Author: techniq

.changeset/rare-flowers-flash.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Map Skeleton themes to Svelte UX themes

packages/svelte-ux/package.json

@@ -20,6 +20,7 @@
     "prepare": "svelte-kit sync"
   },
   "devDependencies": {
+    "@skeletonlabs/tw-plugin": "^0.3.1",
     "@sveltejs/adapter-auto": "^2.1.1",
     "@sveltejs/kit": "^1.30.3",
     "@sveltejs/package": "^2.2.5",

packages/svelte-ux/src/lib/styles/skeleton.cjs

@@ -0,0 +1,100 @@
+const { getThemeProperties } = require('@skeletonlabs/tw-plugin');
+
+const themeNames = [
+  'skeleton',
+  'wintry',
+  'modern',
+  'rocket',
+  'seafoam',
+  'vintage',
+  'sahara',
+  'hamlindigo',
+  'gold-nouveau',
+];
+
+// Map Skeleton to Svelte UX theme colors
+const skeletonColorMap = {
+  // Semantic
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'accent',
+  // '': 'neutral',
+  // State
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+  // Surface
+  surface: 'surface',
+};
+
+function processTheme(themeName, scheme) {
+  const properties = getThemeProperties(themeName);
+
+  let mappedThemeProperties = Object.entries(properties)
+    .map(([key, value]) => {
+      if (key.startsWith('--color')) {
+        // `--color-primary-500` => `primary-500`
+        // `--color-primary-500` => `primary`
+        const matches = key.match(/--color-(\w*)-([0-9]{3})/);
+        const skeletonColorName = matches?.[1];
+        const skeletonColorShade = matches?.[2];
+        const themeColorName = skeletonColorMap[skeletonColorName];
+        if (themeColorName) {
+          return [`${themeColorName}-${skeletonColorShade}`, `rgb(${value})`];
+        }
+      } else if (key.startsWith('--on-')) {
+        // `--on-primary` => `primary-content`
+        const matches = key.match(/--on-(\w*)/);
+        const skeletonColorName = matches?.[1];
+        const themeColorName = skeletonColorMap[skeletonColorName];
+        if (themeColorName) {
+          return [`${themeColorName}-content`, `rgb(${value})`];
+        }
+      } else {
+        // consider mapping additional properties
+        // '--theme-font-family-base': 'system-ui',
+        // '--theme-font-family-heading': 'system-ui',
+        // '--theme-font-color-base': '0 0 0',
+        // '--theme-font-color-dark': '255 255 255',
+        // '--theme-rounded-base': '9999px',
+        // '--theme-rounded-container': '8px',
+        // '--theme-border-base': '1px',
+      }
+    })
+    .filter((d) => d);
+
+  mappedThemeProperties =
+    scheme === 'light'
+      ? [
+          ...mappedThemeProperties,
+          ['color-scheme', 'light'],
+          ['surface-100', `rgb(${properties['--color-surface-50']})`],
+          ['surface-200', `rgb(${properties['--color-surface-100']})`],
+          ['surface-300', `rgb(${properties['--color-surface-200']})`],
+          ['surface-content', `rgb(0 0 0)`],
+        ]
+      : [
+          ...mappedThemeProperties,
+          ['color-scheme', 'dark'],
+          ['surface-100', `rgb(${properties['--color-surface-700']})`],
+          ['surface-200', `rgb(${properties['--color-surface-800']})`],
+          ['surface-300', `rgb(${properties['--color-surface-900']})`],
+          ['surface-content', `rgb(255 255 255)`],
+        ];
+
+  return [
+    themeName === 'skeleton' ? scheme : scheme === 'dark' ? themeName + '-dark' : themeName,
+    Object.fromEntries(mappedThemeProperties),
+  ];
+}
+
+const themes = Object.fromEntries(
+  themeNames.flatMap((themeName) => {
+    return [processTheme(themeName, 'light'), processTheme(themeName, 'dark')];
+  })
+);
+
+const lightThemes = Object.keys(themes).filter((themeName) => !themeName.endsWith('dark'));
+const darkThemes = Object.keys(themes).filter((themeName) => themeName.endsWith('dark'));
+
+module.exports = { themes, lightThemes, darkThemes };

packages/svelte-ux/src/lib/styles/skeleton.ts

@@ -0,0 +1,18 @@
+const themeNames = [
+  'skeleton',
+  'wintry',
+  'modern',
+  'rocket',
+  'seafoam',
+  'vintage',
+  'sahara',
+  'hamlindigo',
+  'gold-nouveau',
+];
+
+const lightThemes = themeNames.map((themeName) => (themeName === 'skeleton' ? 'light' : themeName));
+const darkThemes = themeNames.map((themeName) =>
+  themeName === 'skeleton' ? 'dark' : themeName + '-dark'
+);
+
+export { lightThemes, darkThemes };

packages/svelte-ux/src/routes/+layout.svelte

@@ -20,7 +20,8 @@
   import { settings } from '$lib/components/settings';
   import type { PageData } from './$types';
   import { DateToken } from '$lib/utils/date';
-  import { lightThemes, darkThemes } from '$lib/styles/daisy';
+  // import { lightThemes, darkThemes } from '$lib/styles/daisy';
+  import { lightThemes, darkThemes } from '$lib/styles/skeleton';
 
   export let data: PageData;
 

packages/svelte-ux/tailwind.config.cjs

@@ -2,12 +2,14 @@ const plugin = require('tailwindcss/plugin');
 const colors = require('tailwindcss/colors');
 
 const svelteUx = require('./src/lib/plugins/tailwind.cjs');
-const { themes } = require('./src/lib/styles/daisy.cjs');
+const { themes: daisyThemes } = require('./src/lib/styles/daisy.cjs');
+const { themes: skeletonThemes } = require('./src/lib/styles/skeleton.cjs');
 
 module.exports = {
   content: ['./src/**/*.{html,svelte,md,ts,js}'],
   ux: {
-    themes,
+    // themes: daisyThemes,
+    themes: skeletonThemes,
     // themes: {
     //   light: {
     //     primary: colors['blue']['500'],