this.gui 1.3.41 → 1.3.42

package/src/gui/Theme/catalog/Seafoam/light.tokens.ts

@@ -0,0 +1,47 @@
+// src/themes/Seafoam/light.tokens.ts
+const lightTokens = {
+  "$description": "Seafoam Light theme — a fresh, tranquil palette inspired by ocean hues and coastal light.",
+  "id": "Seafoam-light",
+  "extends": "global.tokens.json",
+  "color": {
+    "primary": { "$type": "color", "$value": "#2C6675" }, // deep teal blue
+    "secondary": { "$type": "color", "$value": "#5FA8B0" }, // cool sea blue
+    "accent": { "$type": "color", "$value": "#A9D7D3" }, // soft seafoam
+    "icon": { "$type": "color", "$value": "#37474f" }, // dark slate gray
+    "background": {
+      "default": { "$type": "color", "$value": "#E8F0EF" }, // misty aqua-white
+      "paper": { "$type": "color", "$value": "#F6F9F9" }, // light and airy
+      "nav": { "$type": "color", "$value": "#D6E7E5" } // subtle ocean breeze tone
+    },
+    "textPrimary": { "$type": "color", "$value": "#1C2626" },
+    "textSecondary": { "$type": "color", "$value": "rgba(28, 38, 38, 0.7)" },
+    "link": { "$type": "color", "$value": "#2C6675" },
+    "linkVisited": { "$type": "color", "$value": "#457B84" },
+    "border": { "$type": "color", "$value": "rgba(44, 102, 117, 0.2)" },
+    "section": {
+      "default": { "$type": "color", "$value": "#E3EFEE" }, // pale aqua background
+      "subtle": { "$type": "color", "$value": "#F5FBFB" }, // soft ocean mist
+      "strong": { "$type": "color", "$value": "#D1E3E1" }, // calm turquoise section
+      "accent": { "$type": "color", "$value": "#F3E0CF" }, // sandy warmth
+      "highlight": { "$type": "color", "$value": "#FFE9DD" } // light coral-beige
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(200, 245, 250, 0.45)" }, // seafoam mist — bright and fresh
+      "medium": { "$type": "color", "$value": "rgba(180, 235, 240, 0.65)" }, // soft aqua drift
+      "heavy": { "$type": "color", "$value": "rgba(160, 225, 235, 0.85)" }, // deep ocean calm
+      "all": { "$type": "color", "$value": "rgba(145, 215, 230, 1)" } // Caribbean blue glow
+    }
+  },
+  "effects": {
+    "shadow": {
+      "$type": "shadow",
+      "$value": "0px 4px 12px rgba(28, 38, 38, 0.1)"
+    },
+    "glow": {
+      "$type": "shadow",
+      "$value": "0px 0px 16px rgba(95, 168, 176, 0.25)"
+    }
+  }
+};
+
+export default lightTokens;

package/src/gui/Theme/catalog/Seafoam/manifest.ts

@@ -0,0 +1,24 @@
+// src/themes/tokens/Seafoam/manifest.ts
+import type { ThemeManifest } from '@/types/theme';
+import badgeImage from './seaFoam.png';
+import lightTokens from './light.tokens';
+import darkTokens from './dark.tokens';
+const SeafoamManifest: ThemeManifest = {
+  themeId: 'seafoam',
+  themeName: 'Seafoam',
+  description: 'A refreshing theme inspired by the colors of the sea, perfect for a calm and serene coding experience.',
+  author: 'suiGn',
+  version: '1.0.0',
+  license: 'MIT',
+  homepage: 'https://neurons.me/',
+  tags: ['official', 'default'],
+  createdAt: '2025-09-16T00:00:00.000Z',
+  updatedAt: '2025-09-16T00:00:00.000Z',
+  badgeUrl: badgeImage,
+  mode: {
+    light: lightTokens,
+    dark: darkTokens,
+  },
+  defaultMode: 'dark'
+};
+export default SeafoamManifest;

package/src/gui/Theme/catalog/neurons/dark.tokens.ts

@@ -0,0 +1,58 @@
+// src/themes/catalog/neurons/dark.tokens.ts
+// Neurons Dark Theme Tokens — overrides applied on top of global.tokens.json
+const darkTokens = {
+  "id": "neurons-dark",
+  "$description": "Neurons Dark Theme Tokens — overrides applied on top of global.tokens.json",
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": "#90caf9"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "#6FC7B5"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "#a8a8a8"
+    },
+    "background": {
+      "default": { "$type": "color", "$value": "#121214" },
+      "paper": { "$type": "color", "$value": "#181a1c" },
+      "nav": { "$type": "color", "$value": "rgba(18,18,20,0.95)" }
+    },
+    "textPrimary": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "textSecondary": {
+      "$type": "color",
+      "$value": "rgba(255,255,255,0.75)"
+    },
+    "link": {
+      "$type": "color",
+      "$value": "#00aa96"
+    },
+    "linkVisited": {
+      "$type": "color",
+      "$value": "#008278"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "rgb(45,45,55)"
+    },
+    "section": {
+      "default": { "$type": "color", "$value": "#121212" },
+      "subtle": { "$type": "color", "$value": "#1a1a1a" },
+      "strong": { "$type": "color", "$value": "#202020" }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(34, 83, 70, 0.55);" },
+      "medium": { "$type": "color", "$value": "rgba(34, 83, 70, 0.69)" },
+      "heavy": { "$type": "color", "$value": "rgba(21, 27, 25, 0.89);" },
+      "all": { "$type": "color", "$value": "rgba(31, 38, 36, 0.98);" }
+    }
+  }
+};
+
+export default darkTokens;

package/src/gui/Theme/catalog/neurons/light.tokens.ts

@@ -0,0 +1,74 @@
+// src/themes/catalog/neurons/light.tokens.ts
+const lightTokens = {
+  "$description": "Design tokens for neurons.light theme — part of This.GUI ecosystem",
+  "id": "neurons-light",
+  "extends": "global.tokens.json",
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": "#0a3a42"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "#e5396f"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "#5e5e5e"
+    },
+    "default": {
+      "$type": "color",
+      "$value": "#f8f9fa"
+    },
+    "paper": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "nav": {
+      "$type": "color",
+      "$value": "#fdfdfd"
+    },
+    "textPrimary": {
+      "$type": "color",
+      "$value": "#111111"
+    },
+    "textSecondary": {
+      "$type": "color",
+      "$value": "#444444"
+    },
+    "link": {
+      "$type": "color",
+      "$value": "#008c7d"
+    },
+    "linkVisited": {
+      "$type": "color",
+      "$value": "#006e64"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "rgba(0,0,0,0.08)"
+    },
+    "section": {
+      "default": {
+        "$type": "color",
+        "$value": "#f9f9fb"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "#f0f2f5"
+      }
+    },
+    "blur": {
+      "light": { "$type": "color", "$value": "rgba(34, 83, 70, 0.55);" },
+      "medium": { "$type": "color", "$value": "rgba(34, 83, 70, 0.69)" },
+      "heavy": { "$type": "color", "$value": "rgba(21, 27, 25, 0.89);" },
+      "all": { "$type": "color", "$value": "rgba(31, 38, 36, 0.98);" }
+    }
+  }
+};
+
+export default lightTokens;

package/src/gui/Theme/catalog/neurons/manifest.ts

@@ -0,0 +1,24 @@
+// src/themes/catalog/neurons/manifest.ts
+import type { ThemeManifest } from '@/types/theme';
+import badgeImage from './neurons.me.png';
+import lightTokens from './light.tokens';
+import darkTokens from './dark.tokens';
+const neuronsManifest: ThemeManifest = {
+  themeId: 'neurons.me',
+  themeName: 'neurons.me',
+  description: 'A modern, flexible theme for the Neuroverse, designed to enhance productivity and creativity.',
+  author: 'suiGn',
+  version: '1.0.0',
+  license: 'MIT',
+  homepage: 'https://neurons.me/',
+  tags: ['official', 'default'],
+  createdAt: '2025-09-16T00:00:00.000Z',
+  updatedAt: '2025-09-16T00:00:00.000Z',
+  badgeUrl: badgeImage,
+  mode: {
+    light: lightTokens,
+    dark: darkTokens,
+  },
+  defaultMode: 'dark'
+};
+export default neuronsManifest;

package/src/gui/Theme/fromTokens.ts

@@ -0,0 +1,272 @@
+// src/themes/fromTokens.ts
+import { createTheme, type Theme } from '@mui/material/styles';
+import { buildShadows } from '@/gui/Theme/styles/buildShadows';
+// Helpers ------------------------------------------------------------
+declare module '@mui/material/styles' {
+  interface Palette {
+    section: {
+      default: string;
+      subtle: string;
+      strong: string;
+    };
+    blur: {
+      light: string;
+      medium: string;
+      heavy: string;
+      all: string;
+    };
+  }
+  interface PaletteOptions {
+    section?: {
+      default?: string;
+      subtle?: string;
+      strong?: string;
+    };
+    blur?: {
+      light?: string;
+      medium?: string;
+      heavy?: string;
+      all?: string;
+    };
+  }
+}
+
+export const pxToRem = (n: number): string => `${n / 16}rem`;
+const pick = <T = any,>(obj: any, path: Array<string | number>, fallback?: T): T => {
+  // Safely read nested token value supporting multiple token shapes
+  // - Tokens Studio style: { $value: '...' }
+  // - simple style: { value: '...' }
+  // - raw primitive values
+  const raw = path.reduce<any>((acc, k) => (acc && acc[k] !== undefined ? acc[k] : undefined), obj) ?? undefined;
+  if (raw && typeof raw === 'object') {
+    if ('$value' in raw) return (raw as any).$value as T;
+    if ('value' in raw) return (raw as any).value as T;
+  }
+  return (raw ?? fallback) as T;
+};
+
+const readNumber = (v: unknown, fb: number): number => {
+  if (v === undefined || v === null) return fb;
+  const n = typeof v === 'string' ? parseFloat(v) : (v as number);
+  return Number.isFinite(n) ? (n as number) : fb;
+};
+
+// Main compiler ------------------------------------------------------
+export function makeMuiTheme(themeTokens: any, modeTokens: any, mode: 'light' | 'dark' = 'light'): Theme {
+  const g = themeTokens || {};
+  const c = modeTokens?.color || {};
+  const blurTokens = pick(modeTokens, ['blur'], pick(c, ['blur'], undefined));
+  const blurRadiusTokens =
+    pick(g, ['blur', 'radius'], undefined) ??
+    pick(g, ['custom', 'blurRadius'], undefined) ??
+    pick(g, ['blurRadius'], undefined);
+  // Core primitives
+  const radius = readNumber(pick(g, ['radius', 'md'], 10), 10);
+  const spacing = readNumber(pick(g, ['spacing', 'base'], 8), 8);
+  const fontFamily = pick<string>(g, ['font', 'family'], 'Roboto, sans-serif');
+  const borderDefault =
+    pick<string | undefined>(g, ['border', 'default'], undefined) ??
+    (mode === 'dark' ? 'rgb(45,45,55)' : 'rgba(0,0,0,0.08)');
+  // Extended tokens
+  const semantic = modeTokens?.extendedColors || modeTokens?.semantic || {};
+  const gradients = semantic?.gradients || {};
+  const overlays = semantic?.overlays || {};
+  const zIndexTokens = g.zIndex || {};
+  const breakpointsTokens = g.breakpoints || {};
+  const motion = g.motion || {};
+  const opacity = g.opacity || {};
+  const iconSizes = g.iconSizes || {};
+  const lineHeights = g.lineHeights || {};
+  const shadowsTokens = g.shadows;
+  // Build MUI theme
+  const theme = createTheme({
+    // Palette accepts custom keys like `link` and `background.nav` in our design system,
+    // so we cast to any to avoid fighting MUI's strict palette types.
+    palette: {
+      mode,
+      primary: { main: pick(c, ['primary'], '#1976d2') },
+      secondary: { main: pick(c, ['secondary'], '#9c27b0') },
+      icon: { main: pick(c, ['icon'], '#5e5e5e') },
+      background: {
+        default: pick(c, ['background','default'], mode === 'dark' ? '#121214' : '#f8f9fa'),
+        paper: pick(c, ['background','paper'], mode === 'dark' ? '#181a1c' : '#fff'),
+        nav: pick(c, ['background','nav'], mode === 'dark' ? '#16181a' : '#fdfdfd'),
+      },
+      text: {
+        primary: pick(c, ['textPrimary'], mode === 'dark' ? '#fff' : '#111'),
+        secondary: pick(
+          c,
+          ['textSecondary'],
+          mode === 'dark' ? 'rgba(255,255,255,0.7)' : '#444'
+        ),
+      },
+      link: {
+        main: pick(c, ['link'], mode === 'dark' ? '#00aa96' : '#008c7d'),
+        visited: pick(c, ['linkVisited'], mode === 'dark' ? '#008278' : '#006e64'),
+      },
+      error:   { main: pick(semantic, ['error'],   mode === 'dark' ? '#ef5350' : '#d32f2f') },
+      warning: { main: pick(semantic, ['warning'], '#ed6c02') },
+      info:    { main: pick(semantic, ['info'],    '#0288d1') },
+      success: { main: pick(semantic, ['success'], '#2e7d32') },
+      divider: pick(c, ['border'], borderDefault),
+      action: {
+        hoverOpacity:     readNumber(pick(opacity, ['hover'],     0.08), 0.08),
+        selectedOpacity:  readNumber(pick(opacity, ['selected'],  0.12), 0.12),
+        disabledOpacity:  readNumber(pick(opacity, ['disabled'],  0.38), 0.38),
+        focusOpacity:     readNumber(pick(opacity, ['focus'],     0.12), 0.12),
+        activatedOpacity: readNumber(pick(opacity, ['activated'], 0.12), 0.12),
+      },
+      section: mode === 'dark' ? {
+        default: '#121212',
+        subtle: '#1a1a1a',
+        strong: '#202020',
+      } : {
+        default: '#f9f9fb',
+        subtle: '#ffffff',
+        strong: '#f0f2f5',
+      },
+      blur: blurTokens ?? (
+        mode === 'dark'
+          ? {
+              light: 'rgba(25, 37, 36, 1)',
+              medium: 'rgba(25, 37, 36, 1)',
+              heavy: 'rgba(25, 37, 36, 1)',
+              all: 'rgba(25, 37, 36, 1)',
+            }
+          : {
+              light: 'rgba(255, 245, 250, 1)',
+              medium: 'rgba(255, 240, 245, 1)',
+              heavy: 'rgba(255, 235, 240, 1)',
+              all: 'rgba(255, 220, 230, 1)',
+            }
+      ),
+    },
+    // All tokens exposed under theme.custom for easy access
+    custom: {
+      border: pick(c, ['border'], borderDefault),
+      gradients,
+      overlays,
+      iconSizes,
+      lineHeights,
+      blurRadius: {
+        light: pick(blurRadiusTokens, ['light'], '6px'),
+        medium: pick(blurRadiusTokens, ['medium'], '12px'),
+        heavy: pick(blurRadiusTokens, ['heavy'], '24px'),
+        all: pick(blurRadiusTokens, ['all'], '32px'),
+      },
+    },
+    shape: { borderRadius: Number.isFinite(radius) ? (radius as number) : 10 },
+    spacing: Number.isFinite(spacing) ? (spacing as number) : 8,
+    breakpoints: {
+      values: {
+        xs: readNumber(pick(breakpointsTokens, ['values', 'xs'], 0), 0),
+        sm: readNumber(pick(breakpointsTokens, ['values', 'sm'], 600), 600),
+        md: readNumber(pick(breakpointsTokens, ['values', 'md'], 900), 900),
+        lg: readNumber(pick(breakpointsTokens, ['values', 'lg'], 1200), 1200),
+        xl: readNumber(pick(breakpointsTokens, ['values', 'xl'], 1536), 1536),
+      },
+    },
+    zIndex: {
+      appBar: readNumber(pick(zIndexTokens, ['appBar'], 1100), 1100),
+      drawer: readNumber(pick(zIndexTokens, ['drawer'], 1200), 1200),
+      modal: readNumber(pick(zIndexTokens, ['modal'], 1300), 1300),
+      snackbar: readNumber(pick(zIndexTokens, ['snackbar'], 1400), 1400),
+      tooltip: readNumber(pick(zIndexTokens, ['tooltip'], 1500), 1500),
+    },
+    transitions: {
+      easing: {
+        easeInOut: pick(motion, ['easing', 'standard'], 'cubic-bezier(0.4, 0, 0.2, 1)'),
+        easeOut: pick(motion, ['easing', 'decelerate'], 'cubic-bezier(0.0, 0, 0.2, 1)'),
+        easeIn: pick(motion, ['easing', 'accelerate'], 'cubic-bezier(0.4, 0, 1, 1)'),
+        sharp: pick(motion, ['easing', 'sharp'], 'cubic-bezier(0.4, 0, 0.6, 1)'),
+      },
+      duration: {
+        shortest: readNumber(pick(motion, ['duration', 'shortest'], 150), 150),
+        shorter: readNumber(pick(motion, ['duration', 'shorter'], 200), 200),
+        short: readNumber(pick(motion, ['duration', 'short'], 250), 250),
+        standard: readNumber(pick(motion, ['duration', 'standard'], 300), 300),
+        complex: readNumber(pick(motion, ['duration', 'complex'], 375), 375),
+        enteringScreen: readNumber(pick(motion, ['duration', 'entering'], 225), 225),
+        leavingScreen: readNumber(pick(motion, ['duration', 'leaving'], 195), 195),
+      },
+    },
+    typography: {
+      fontFamily,
+      // existing variants
+      h1: { fontSize: pxToRem(40), fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.01em' },
+      h2: { fontSize: pxToRem(32), fontWeight: 600, lineHeight: 1.25 },
+      h3: { fontSize: pxToRem(26), fontWeight: 600, lineHeight: 1.3 },
+      h4: { fontSize: pxToRem(21), fontWeight: 600, lineHeight: 1.35 },
+      h5: { fontSize: pxToRem(18), fontWeight: 600, lineHeight: 1.35 },
+      subtitle1: { fontSize: pxToRem(16), fontWeight: 600, lineHeight: 1.4 },
+      body1: { fontSize: pxToRem(16), lineHeight: 1.6 },
+      body2: { fontSize: pxToRem(14), lineHeight: 1.6 },
+      button: { textTransform: 'none', fontWeight: 700, letterSpacing: '0.02em' },
+    },
+    shadows: buildShadows(shadowsTokens, mode),
+    layout: {
+      insets: {
+        left:   readNumber(pick(g, ['layout', 'insets', 'left'],   0), 0),
+        right:  readNumber(pick(g, ['layout', 'insets', 'right'],  0), 0),
+        top:    readNumber(pick(g, ['layout', 'insets', 'top'],    0), 0),
+        bottom: readNumber(pick(g, ['layout', 'insets', 'bottom'], 0), 0),
+      },
+    },
+    components: {
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: ({ theme }) => ({ borderRadius: theme.shape.borderRadius }),
+          sizeLarge: { padding: '12px 20px' },
+          sizeMedium: { padding: '10px 18px' },
+          sizeSmall: { padding: '8px 14px' },
+        },
+      },
+      MuiPaper: { styleOverrides: { rounded: { borderRadius: 14 } } },
+      MuiTextField: { defaultProps: { size: 'small' } },
+      MuiCssBaseline: {
+        styleOverrides: (theme) => ({
+          ':root': {
+            '--gui-primary': theme.palette.primary.main,
+            '--gui-secondary': theme.palette.secondary.main,
+            '--gui-bg-default': theme.palette.background.default,
+            '--gui-bg-paper': theme.palette.background.paper,
+            '--gui-bg-nav': theme.palette.background.nav || theme.palette.background.paper,
+            '--gui-text-primary': theme.palette.text.primary,
+            '--gui-text-secondary': theme.palette.text.secondary,
+            '--gui-link': theme.palette.link.main,
+            '--gui-link-visited': theme.palette.link.visited || theme.palette.link.main,
+            '--gui-border': theme.custom?.border || theme.palette.divider,
+            // Motion / opacity / icon sizes CSS vars for non-MUI DOM
+            '--gui-ease-standard': theme.transitions.easing.easeInOut,
+            '--gui-duration-standard': `${theme.transitions.duration.standard}ms`,
+            '--gui-opacity-hover': theme.palette.action.hoverOpacity,
+            '--gui-opacity-disabled': theme.palette.action.disabledOpacity,
+            '--gui-icon-size-sm': (iconSizes as any).sm ?? '16px',
+            '--gui-icon-size-md': (iconSizes as any).md ?? '20px',
+            '--gui-icon-size-lg': (iconSizes as any).lg ?? '24px',
+            '--gui-radius': `${theme.shape.borderRadius}px`,
+            '--gui-font-family': theme.typography.fontFamily,
+            '--gui-spacing': typeof theme.spacing === 'function' ? theme.spacing(1) : `${(theme as any).spacing}px`,
+            '--gui-inset-left': theme.layout.insets.left + 'px',
+            '--gui-inset-right': theme.layout.insets.right + 'px',
+            '--gui-inset-top': theme.layout.insets.top + 'px',
+            '--gui-inset-bottom': theme.layout.insets.bottom + 'px',
+          },
+          body: {
+            fontFamily: theme.typography.fontFamily,
+            backgroundColor: theme.palette.background.default,
+            color: theme.palette.text.primary,
+          },
+          a: {
+            color: theme.palette.link.main,
+            textDecoration: 'none',
+            '&:hover': { textDecoration: 'underline' },
+            '&:visited': { color: theme.palette.link.visited || theme.palette.link.main },
+          },
+        }),
+      },
+    },
+  });
+  return theme;
+}

package/src/gui/Theme/gui.css

@@ -0,0 +1,31 @@
+/* themes/GUI.css  
+GUI Theme CSS Variables and Layout */
+:root {
+  /* Layout insets, injected and/or overridden by theme or runtime */
+  --gui-inset-left: 0px;
+  --gui-inset-right: 0px;
+  --gui-inset-top: 48px;
+  --gui-inset-bottom: 0px;
+  /* Example additional tokens */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --z-index-navbar: 1100;
+  --z-index-drawer: 1200;
+}
+
+/* Default body layout respecting insets */
+body {
+  padding-top: var(--gui-inset-top);
+  padding-left: var(--gui-inset-left);
+  padding-right: var(--gui-inset-right);
+  padding-bottom: var(--gui-inset-bottom);
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* Utility container class */
+.gui-container {
+  padding: var(--gui-inset-top) var(--gui-inset-right) var(--gui-inset-bottom) var(--gui-inset-left);
+  box-sizing: border-box;
+}

package/src/gui/Theme/index.ts

@@ -0,0 +1,17 @@
+// src/themes/index.ts
+// Global tokens shared by all themes (radius, spacing, zIndex, etc.)
+export type { Theme } from '@mui/material/styles';
+// Theme persistence utilities
+export { getInitialThemeId, usePersistentThemeId } from './utils/persistence';
+// Theme context and provider
+export { ThemeContext, useThemeContext } from '@/gui/contexts/ThemeContext';
+export { default as GuiProvider } from './GuiProvider';
+// Theme catalog access
+export {
+  GuiThemes,
+  FlatGuiThemes,
+  getGuiThemes,
+  getFlatGuiThemes,
+  getGuiTheme,
+  getFlatGuiTheme,
+} from './utils/catalog';

package/src/gui/Theme/styles/buildShadows.ts

@@ -0,0 +1,83 @@
+// themes/styles/buildShadows.ts
+import { Theme } from '@mui/material/styles';
+export const buildShadows = (shadowTokens: any, mode: 'light' | 'dark'): Theme['shadows'] => {
+  const DEFAULT_SHADOWS: string[] =
+    mode === 'dark'
+      ? [
+          'none',
+          '0px 1px 2px rgba(0,0,0,0.6)',
+          '0px 2px 4px rgba(0,0,0,0.55)',
+          '0px 3px 6px rgba(0,0,0,0.5)',
+          '0px 4px 8px rgba(0,0,0,0.45)',
+          '0px 5px 10px rgba(0,0,0,0.4)',
+          '0px 6px 12px rgba(0,0,0,0.38)',
+          '0px 7px 14px rgba(0,0,0,0.36)',
+          '0px 8px 16px rgba(0,0,0,0.34)',
+          '0px 9px 18px rgba(0,0,0,0.32)',
+          '0px 10px 20px rgba(0,0,0,0.3)',
+          '0px 11px 22px rgba(0,0,0,0.28)',
+          '0px 12px 24px rgba(0,0,0,0.26)',
+          '0px 13px 26px rgba(0,0,0,0.24)',
+          '0px 14px 28px rgba(0,0,0,0.22)',
+          '0px 15px 30px rgba(0,0,0,0.2)',
+          '0px 16px 32px rgba(0,0,0,0.19)',
+          '0px 17px 34px rgba(0,0,0,0.18)',
+          '0px 18px 36px rgba(0,0,0,0.17)',
+          '0px 19px 38px rgba(0,0,0,0.16)',
+          '0px 20px 40px rgba(0,0,0,0.15)',
+          '0px 22px 44px rgba(0,0,0,0.14)',
+          '0px 24px 48px rgba(0,0,0,0.13)',
+          '0px 26px 52px rgba(0,0,0,0.12)',
+          '0px 28px 56px rgba(0,0,0,0.11)',
+        ]
+      : [
+          'none',
+          '0px 1px 2px rgba(0,0,0,0.08)',
+          '0px 2px 4px rgba(0,0,0,0.1)',
+          '0px 3px 6px rgba(0,0,0,0.12)',
+          '0px 4px 8px rgba(0,0,0,0.14)',
+          '0px 5px 10px rgba(0,0,0,0.15)',
+          '0px 6px 12px rgba(0,0,0,0.16)',
+          '0px 7px 14px rgba(0,0,0,0.17)',
+          '0px 8px 16px rgba(0,0,0,0.18)',
+          '0px 9px 18px rgba(0,0,0,0.19)',
+          '0px 10px 20px rgba(0,0,0,0.2)',
+          '0px 11px 22px rgba(0,0,0,0.21)',
+          '0px 12px 24px rgba(0,0,0,0.22)',
+          '0px 13px 26px rgba(0,0,0,0.23)',
+          '0px 14px 28px rgba(0,0,0,0.24)',
+          '0px 15px 30px rgba(0,0,0,0.25)',
+          '0px 16px 32px rgba(0,0,0,0.26)',
+          '0px 17px 34px rgba(0,0,0,0.27)',
+          '0px 18px 36px rgba(0,0,0,0.28)',
+          '0px 19px 38px rgba(0,0,0,0.29)',
+          '0px 20px 40px rgba(0,0,0,0.3)',
+          '0px 22px 44px rgba(0,0,0,0.31)',
+          '0px 24px 48px rgba(0,0,0,0.32)',
+          '0px 26px 52px rgba(0,0,0,0.33)',
+          '0px 28px 56px rgba(0,0,0,0.34)',
+        ];
+
+  const ensureArrayLen = <T,>(arr: T[] | unknown, len: number, filler: T): T[] => {
+    const a = Array.isArray(arr) ? ([...arr] as T[]) : [];
+    for (let i = a.length; i < len; i++) a.push(filler);
+    return a.slice(0, len);
+  };
+
+  if (Array.isArray(shadowTokens)) {
+    return ensureArrayLen<string>(shadowTokens, 25, DEFAULT_SHADOWS[0]) as Theme['shadows'];
+  }
+
+  if (shadowTokens && typeof shadowTokens === 'object') {
+    const arr: string[] = [];
+    for (let i = 0; i < 25; i++) {
+      const v =
+        shadowTokens?.[i] ??
+        shadowTokens?.[`s${i}`];
+      arr.push(v ?? DEFAULT_SHADOWS[i] ?? DEFAULT_SHADOWS[0]);
+    }
+    return arr as Theme['shadows'];
+  }
+
+  return DEFAULT_SHADOWS as Theme['shadows'];
+};