@furystack/shades-common-components 12.7.0 → 13.0.0

package/src/{services → themes}/default-dark-theme.ts

@@ -1,6 +1,10 @@
 import { defaultDarkPalette } from './default-dark-palette.js'
-import type { Theme } from './theme-provider-service.js'
+import type { Theme } from '../services/theme-provider-service.js'
 
+/**
+ * Default dark theme with neutral colors and system font stack.
+ * Uses the dark Material-style palette on a dark (#121212) background.
+ */
 export const defaultDarkTheme = {
   name: 'default-dark-theme',
   text: {
@@ -18,6 +22,7 @@ export const defaultDarkTheme = {
   background: {
     default: '#121212',
     paper: '#1e1e1e',
+    paperImage: 'none',
   },
   palette: defaultDarkPalette,
   divider: 'rgba(255, 255, 255, 0.12)',
@@ -38,6 +43,7 @@ export const defaultDarkTheme = {
       lg: '12px',
       full: '50%',
     },
+    borderWidth: '0px',
   },
   shadows: {
     none: 'none',

package/src/{services → themes}/default-light-theme.ts

@@ -1,6 +1,10 @@
 import { defaultPalette } from './default-palette.js'
-import type { Theme } from './theme-provider-service.js'
+import type { Theme } from '../services/theme-provider-service.js'
 
+/**
+ * Default light theme with neutral colors and system font stack.
+ * Uses the standard Material-style palette on a light (#fafafa) background.
+ */
 export const defaultLightTheme = {
   name: 'default-light-theme',
   palette: defaultPalette,
@@ -19,6 +23,7 @@ export const defaultLightTheme = {
   background: {
     default: '#fafafa',
     paper: '#fff',
+    paperImage: 'none',
   },
   divider: 'rgba(0, 0, 0, 0.12)',
   action: {
@@ -38,6 +43,7 @@ export const defaultLightTheme = {
       lg: '12px',
       full: '50%',
     },
+    borderWidth: '0px',
   },
   shadows: {
     none: 'none',

package/src/{services → themes}/default-palette.ts

@@ -1,4 +1,4 @@
-import type { Palette } from './theme-provider-service.js'
+import type { Palette } from '../services/theme-provider-service.js'
 
 /**
  * Default color palette with semantic colors for the application.

package/src/themes/dragonborn-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by Skyrim and the Elder Scrolls.
+ * Muted gold-amber primary, steel blue secondary,
+ * with desaturated Nordic tones for semantic colors.
+ */
+export const dragonbornPalette: Palette = {
+  primary: {
+    light: '#dcc070',
+    lightContrast: '#000000',
+    main: '#c8a050',
+    mainContrast: '#000000',
+    dark: '#987830',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#7a9cbe',
+    lightContrast: '#000000',
+    main: '#5a7c9e',
+    mainContrast: '#ffffff',
+    dark: '#3a5c7e',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#c06060',
+    lightContrast: '#000000',
+    main: '#a04040',
+    mainContrast: '#ffffff',
+    dark: '#702828',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#d4a050',
+    lightContrast: '#000000',
+    main: '#b88030',
+    mainContrast: '#000000',
+    dark: '#886020',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#6a9a60',
+    lightContrast: '#000000',
+    main: '#4a7a40',
+    mainContrast: '#ffffff',
+    dark: '#305a28',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#6a8aaa',
+    lightContrast: '#000000',
+    main: '#4a6a8a',
+    mainContrast: '#ffffff',
+    dark: '#304a6a',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/dragonborn-theme.ts

@@ -0,0 +1,124 @@
+import { dragonbornPalette } from './dragonborn-palette.js'
+import type { Theme } from '../services/theme-provider-service.js'
+
+const paperImageValue = `url("data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="t" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="6" stitchTiles="stitch" result="n"/><feDiffuseLighting in="n" lighting-color="#8a9aaa" surfaceScale="2"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting></filter><rect width="200" height="200" filter="url(#t)" opacity="0.12"/></svg>`)}")`
+
+/**
+ * Theme inspired by Skyrim and the Elder Scrolls.
+ * Ashen grey backgrounds, muted gold primary, steel blue secondary,
+ * medieval uncial typography for a cold Nordic fantasy feel.
+ *
+ * @remarks Recommended Google Font: MedievalSharp
+ */
+export const dragonbornTheme = {
+  name: 'dragonborn-theme',
+  text: {
+    primary: '#dce0e4',
+    secondary: 'rgba(220, 224, 228, 0.65)',
+    disabled: 'rgba(220, 224, 228, 0.35)',
+  },
+  button: {
+    active: '#dce0e4',
+    hover: 'rgba(200, 160, 80, 0.1)',
+    selected: 'rgba(200, 160, 80, 0.16)',
+    disabled: 'rgba(220, 224, 228, 0.3)',
+    disabledBackground: 'rgba(220, 224, 228, 0.06)',
+  },
+  background: {
+    default: '#1a1c20',
+    paper: '#24272c',
+    paperImage: paperImageValue,
+  },
+  palette: dragonbornPalette,
+  divider: 'rgba(90, 124, 158, 0.2)',
+  action: {
+    hoverBackground: 'rgba(200, 160, 80, 0.06)',
+    selectedBackground: 'rgba(200, 160, 80, 0.14)',
+    activeBackground: 'rgba(200, 160, 80, 0.22)',
+    focusRing: '0 0 0 3px rgba(200, 160, 80, 0.3)',
+    disabledOpacity: '0.5',
+    backdrop: 'rgba(10, 12, 14, 0.8)',
+    subtleBorder: 'rgba(140, 154, 170, 0.22)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '0px',
+      sm: '0px',
+      md: '0px',
+      lg: '0px',
+      full: '50%',
+    },
+    borderWidth: '2px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3)',
+    xl: '0 12px 32px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.35)',
+  },
+  typography: {
+    fontFamily: "MedievalSharp, 'Palatino Linotype', Palatino, serif",
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '15px',
+      lg: '17px',
+      xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '400',
+      semibold: '400',
+      bold: '400',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '-0.25px',
+      dense: '0px',
+      normal: '0.25px',
+      wide: '0.5px',
+      wider: '1px',
+      widest: '1.5px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.25s',
+      slow: '0.35s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+      easeInOut: 'ease-in-out',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  zIndex: {
+    drawer: '1000',
+    appBar: '1100',
+    modal: '1200',
+    tooltip: '1300',
+    dropdown: '1400',
+  },
+  effects: {
+    blurSm: '2px',
+    blurMd: '4px',
+    blurLg: '8px',
+    blurXl: '12px',
+  },
+} satisfies Theme

package/src/themes/hawkins-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by Stranger Things and the town of Hawkins, Indiana.
+ * Christmas-light red primary, eerie Upside Down teal secondary,
+ * with warm, desaturated 80s tones for semantic colors.
+ */
+export const hawkinsPalette: Palette = {
+  primary: {
+    light: '#e05858',
+    lightContrast: '#000000',
+    main: '#cc3333',
+    mainContrast: '#ffffff',
+    dark: '#961e1e',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#5ea8a8',
+    lightContrast: '#000000',
+    main: '#3a8888',
+    mainContrast: '#ffffff',
+    dark: '#246666',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#d85050',
+    lightContrast: '#000000',
+    main: '#b83030',
+    mainContrast: '#ffffff',
+    dark: '#881c1c',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#d4a048',
+    lightContrast: '#000000',
+    main: '#b88028',
+    mainContrast: '#000000',
+    dark: '#8c6018',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#5a9860',
+    lightContrast: '#000000',
+    main: '#3c7842',
+    mainContrast: '#ffffff',
+    dark: '#285a2e',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#5888a8',
+    lightContrast: '#000000',
+    main: '#3c6888',
+    mainContrast: '#ffffff',
+    dark: '#264a68',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/hawkins-theme.ts

@@ -0,0 +1,124 @@
+import { hawkinsPalette } from './hawkins-palette.js'
+import type { Theme } from '../services/theme-provider-service.js'
+
+const paperImageValue = `url("data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="none"/><line x1="0" y1="3.5" x2="4" y2="3.5" stroke="#cc3333" stroke-width="0.5" opacity="0.03"/></svg>`)}")`
+
+/**
+ * Dark theme inspired by Stranger Things and the town of Hawkins, Indiana.
+ * Warm dark backgrounds with a tiling CRT scanline pattern, Christmas-light red accents,
+ * eerie teal secondary, and a retro rounded typeface evoking 80s nostalgia.
+ *
+ * @remarks Recommended Google Font: Quicksand
+ */
+export const hawkinsTheme = {
+  name: 'hawkins-theme',
+  text: {
+    primary: '#e0d8d0',
+    secondary: 'rgba(224, 216, 208, 0.62)',
+    disabled: 'rgba(224, 216, 208, 0.34)',
+  },
+  button: {
+    active: '#cc3333',
+    hover: 'rgba(204, 51, 51, 0.1)',
+    selected: 'rgba(204, 51, 51, 0.18)',
+    disabled: 'rgba(224, 216, 208, 0.3)',
+    disabledBackground: 'rgba(224, 216, 208, 0.06)',
+  },
+  background: {
+    default: '#12100e',
+    paper: '#1c1816',
+    paperImage: paperImageValue,
+  },
+  palette: hawkinsPalette,
+  divider: 'rgba(204, 51, 51, 0.15)',
+  action: {
+    hoverBackground: 'rgba(204, 51, 51, 0.08)',
+    selectedBackground: 'rgba(204, 51, 51, 0.14)',
+    activeBackground: 'rgba(204, 51, 51, 0.22)',
+    focusRing: '0 0 0 2px rgba(204, 51, 51, 0.45)',
+    disabledOpacity: '0.4',
+    backdrop: 'rgba(8, 6, 4, 0.9)',
+    subtleBorder: 'rgba(204, 51, 51, 0.18)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '3px',
+      sm: '5px',
+      md: '8px',
+      lg: '12px',
+      full: '50%',
+    },
+    borderWidth: '1px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 4px rgba(0, 0, 0, 0.45), 0 0 5px rgba(204, 51, 51, 0.06)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(204, 51, 51, 0.08)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(204, 51, 51, 0.1)',
+    xl: '0 12px 36px rgba(0, 0, 0, 0.75), 0 0 30px rgba(204, 51, 51, 0.12)',
+  },
+  typography: {
+    fontFamily: "'Quicksand', 'Nunito', 'Segoe UI', system-ui, sans-serif",
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '14px',
+      lg: '16px',
+      xl: '22px',
+      xxl: '28px',
+      xxxl: '36px',
+      xxxxl: '46px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.7',
+    },
+    letterSpacing: {
+      tight: '-0.25px',
+      dense: '0px',
+      normal: '0.2px',
+      wide: '0.5px',
+      wider: '1px',
+      widest: '2px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.12s',
+      normal: '0.25s',
+      slow: '0.4s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+      easeInOut: 'ease-in-out',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  zIndex: {
+    drawer: '1000',
+    appBar: '1100',
+    modal: '1200',
+    tooltip: '1300',
+    dropdown: '1400',
+  },
+  effects: {
+    blurSm: '4px',
+    blurMd: '8px',
+    blurLg: '16px',
+    blurXl: '24px',
+  },
+} satisfies Theme

package/src/themes/jedi-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by the Star Wars Jedi Order.
+ * Lightsaber blue primary, warm Tatooine sand secondary,
+ * with calm, balanced tones for semantic colors.
+ */
+export const jediPalette: Palette = {
+  primary: {
+    light: '#7db8f0',
+    lightContrast: '#000000',
+    main: '#4a90d9',
+    mainContrast: '#ffffff',
+    dark: '#2a6ab0',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#d8c8a0',
+    lightContrast: '#000000',
+    main: '#c4a86c',
+    mainContrast: '#000000',
+    dark: '#9a8450',
+    darkContrast: '#000000',
+  },
+  error: {
+    light: '#e87070',
+    lightContrast: '#000000',
+    main: '#d04848',
+    mainContrast: '#ffffff',
+    dark: '#a83030',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#e8c060',
+    lightContrast: '#000000',
+    main: '#d4a830',
+    mainContrast: '#000000',
+    dark: '#a88418',
+    darkContrast: '#000000',
+  },
+  success: {
+    light: '#68b870',
+    lightContrast: '#000000',
+    main: '#48984c',
+    mainContrast: '#ffffff',
+    dark: '#307834',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#68a8e0',
+    lightContrast: '#000000',
+    main: '#4088c4',
+    mainContrast: '#ffffff',
+    dark: '#28689e',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/jedi-theme.ts

@@ -0,0 +1,124 @@
+import { jediPalette } from './jedi-palette.js'
+import type { Theme } from '../services/theme-provider-service.js'
+
+const paperImageValue = `url("data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="48" height="48" fill="none"/><circle cx="24" cy="24" r="16" fill="none" stroke="#4a90d9" stroke-width="0.4" opacity="0.06"/><circle cx="24" cy="24" r="8" fill="none" stroke="#4a90d9" stroke-width="0.3" opacity="0.04"/><line x1="24" y1="4" x2="24" y2="44" stroke="#4a90d9" stroke-width="0.3" opacity="0.03"/><line x1="4" y1="24" x2="44" y2="24" stroke="#4a90d9" stroke-width="0.3" opacity="0.03"/></svg>`)}")`
+
+/**
+ * Light theme inspired by the Star Wars Jedi Order.
+ * Warm parchment backgrounds, lightsaber-blue accents with subtle glow,
+ * and a clean sans-serif typeface evoking calm wisdom.
+ *
+ * @remarks Recommended Google Font: Nunito
+ */
+export const jediTheme = {
+  name: 'jedi-theme',
+  text: {
+    primary: 'rgba(30, 26, 20, 0.9)',
+    secondary: 'rgba(30, 26, 20, 0.6)',
+    disabled: 'rgba(30, 26, 20, 0.35)',
+  },
+  button: {
+    active: '#4a90d9',
+    hover: 'rgba(74, 144, 217, 0.08)',
+    selected: 'rgba(74, 144, 217, 0.14)',
+    disabled: 'rgba(30, 26, 20, 0.26)',
+    disabledBackground: 'rgba(30, 26, 20, 0.08)',
+  },
+  background: {
+    default: '#f5f0e8',
+    paper: '#faf6ef',
+    paperImage: paperImageValue,
+  },
+  palette: jediPalette,
+  divider: 'rgba(74, 144, 217, 0.15)',
+  action: {
+    hoverBackground: 'rgba(74, 144, 217, 0.06)',
+    selectedBackground: 'rgba(74, 144, 217, 0.12)',
+    activeBackground: 'rgba(74, 144, 217, 0.18)',
+    focusRing: '0 0 0 3px rgba(74, 144, 217, 0.3)',
+    disabledOpacity: '0.5',
+    backdrop: 'rgba(30, 26, 20, 0.45)',
+    subtleBorder: 'rgba(74, 144, 217, 0.18)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '3px',
+      sm: '5px',
+      md: '8px',
+      lg: '12px',
+      full: '50%',
+    },
+    borderWidth: '0px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 3px rgba(0, 0, 0, 0.06), 0 0 4px rgba(74, 144, 217, 0.06)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.08), 0 0 12px rgba(74, 144, 217, 0.08)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(74, 144, 217, 0.1)',
+    xl: '0 12px 32px rgba(0, 0, 0, 0.12), 0 0 30px rgba(74, 144, 217, 0.12)',
+  },
+  typography: {
+    fontFamily: "'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif",
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '14px',
+      lg: '16px',
+      xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '-0.25px',
+      dense: '0px',
+      normal: '0.15px',
+      wide: '0.4px',
+      wider: '0.75px',
+      widest: '1.5px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.25s',
+      slow: '0.35s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+      easeInOut: 'ease-in-out',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  zIndex: {
+    drawer: '1000',
+    appBar: '1100',
+    modal: '1200',
+    tooltip: '1300',
+    dropdown: '1400',
+  },
+  effects: {
+    blurSm: '4px',
+    blurMd: '8px',
+    blurLg: '15px',
+    blurXl: '20px',
+  },
+} satisfies Theme

package/src/themes/neon-runner-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by cyberpunk neon aesthetics.
+ * Electric cyan primary, hot magenta secondary,
+ * with vivid neon tones for semantic colors.
+ */
+export const neonRunnerPalette: Palette = {
+  primary: {
+    light: '#66f7ff',
+    lightContrast: '#000000',
+    main: '#00f0ff',
+    mainContrast: '#000000',
+    dark: '#00b8c4',
+    darkContrast: '#000000',
+  },
+  secondary: {
+    light: '#ff6db5',
+    lightContrast: '#000000',
+    main: '#ff2d95',
+    mainContrast: '#000000',
+    dark: '#c4006e',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#ff6680',
+    lightContrast: '#000000',
+    main: '#ff3860',
+    mainContrast: '#000000',
+    dark: '#c41840',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#ffc850',
+    lightContrast: '#000000',
+    main: '#ffb020',
+    mainContrast: '#000000',
+    dark: '#c48800',
+    darkContrast: '#000000',
+  },
+  success: {
+    light: '#50f098',
+    lightContrast: '#000000',
+    main: '#20e070',
+    mainContrast: '#000000',
+    dark: '#10a850',
+    darkContrast: '#000000',
+  },
+  info: {
+    light: '#60b0ff',
+    lightContrast: '#000000',
+    main: '#3090ff',
+    mainContrast: '#000000',
+    dark: '#1060c4',
+    darkContrast: '#ffffff',
+  },
+}