@furystack/shades-common-components 12.6.0 → 13.0.0

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

@@ -0,0 +1,121 @@
+import { neonRunnerPalette } from './neon-runner-palette.js'
+import type { Theme } from '../services/theme-provider-service.js'
+
+/**
+ * Cyberpunk-inspired theme with dark backgrounds, neon accents,
+ * monospace typography, and a hi-tech polished aesthetic.
+ *
+ * @remarks Recommended Google Font: Share Tech Mono
+ */
+export const neonRunnerTheme = {
+  name: 'neon-runner-theme',
+  text: {
+    primary: '#e0f0ff',
+    secondary: 'rgba(224, 240, 255, 0.65)',
+    disabled: 'rgba(224, 240, 255, 0.35)',
+  },
+  button: {
+    active: '#e0f0ff',
+    hover: 'rgba(0, 240, 255, 0.1)',
+    selected: 'rgba(0, 240, 255, 0.18)',
+    disabled: 'rgba(224, 240, 255, 0.3)',
+    disabledBackground: 'rgba(224, 240, 255, 0.06)',
+  },
+  background: {
+    default: '#0a0e17',
+    paper: '#111827',
+    paperImage: '',
+  },
+  palette: neonRunnerPalette,
+  divider: 'rgba(0, 240, 255, 0.15)',
+  action: {
+    hoverBackground: 'rgba(0, 240, 255, 0.08)',
+    selectedBackground: 'rgba(0, 240, 255, 0.14)',
+    activeBackground: 'rgba(0, 240, 255, 0.22)',
+    focusRing: '0 0 0 2px rgba(0, 240, 255, 0.5)',
+    disabledOpacity: '0.4',
+    backdrop: 'rgba(4, 6, 14, 0.85)',
+    subtleBorder: 'rgba(0, 240, 255, 0.2)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '2px',
+      sm: '3px',
+      md: '4px',
+      lg: '6px',
+      full: '50%',
+    },
+    borderWidth: '1px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 4px rgba(0, 0, 0, 0.4), 0 0 6px rgba(0, 240, 255, 0.08)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.12)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.15)',
+    xl: '0 12px 36px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.18)',
+  },
+  typography: {
+    fontFamily: "'Share Tech Mono', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace",
+    fontSize: {
+      xs: '11px',
+      sm: '12px',
+      md: '14px',
+      lg: '16px',
+      xl: '22px',
+      xxl: '28px',
+      xxxl: '34px',
+      xxxxl: '44px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.55',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '-0.25px',
+      dense: '0px',
+      normal: '0.5px',
+      wide: '1px',
+      wider: '1.5px',
+      widest: '2.5px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.1s',
+      normal: '0.2s',
+      slow: '0.35s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.16, 1.0, 0.3, 1.0)',
+      easeInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+    },
+  },
+  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/paladin-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by the Warcraft 1 Human faction UI.
+ * Gold as the primary brand color, Alliance royal blue as secondary,
+ * with warm medieval tones for semantic colors.
+ */
+export const paladinPalette: Palette = {
+  primary: {
+    light: '#dcc06e',
+    lightContrast: '#000000',
+    main: '#c8a84e',
+    mainContrast: '#000000',
+    dark: '#9a7e30',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#4a7dc4',
+    lightContrast: '#ffffff',
+    main: '#2a5daa',
+    mainContrast: '#ffffff',
+    dark: '#1a3d7a',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#d45050',
+    lightContrast: '#000000',
+    main: '#c03030',
+    mainContrast: '#ffffff',
+    dark: '#8a2020',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#e4a64a',
+    lightContrast: '#000000',
+    main: '#d4862a',
+    mainContrast: '#000000',
+    dark: '#a46420',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#6aac5c',
+    lightContrast: '#000000',
+    main: '#4a8c3c',
+    mainContrast: '#000000',
+    dark: '#346a2a',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#7aaad4',
+    lightContrast: '#000000',
+    main: '#5a8ab4',
+    mainContrast: '#000000',
+    dark: '#3a6a94',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/paladin-theme.ts

@@ -0,0 +1,125 @@
+import { paladinPalette } from './paladin-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.04" numOctaves="5" stitchTiles="stitch" result="n"/><feDiffuseLighting in="n" lighting-color="#667" surfaceScale="3"><feDistantLight azimuth="45" elevation="55"/></feDiffuseLighting></filter><rect width="200" height="200" filter="url(#t)" opacity="0.18"/></svg>`)}")`
+
+/**
+ * Theme inspired by the Warcraft 1 Human faction UI.
+ * Cold dark stone backgrounds, white text, gold primary accents,
+ * angular shapes, and serif typography for a medieval fantasy feel.
+ *
+ * @remarks Recommended Google Font: Silkscreen
+ */
+export const paladinTheme = {
+  name: 'paladin-theme',
+  text: {
+    primary: '#ffffff',
+    secondary: 'rgba(255, 255, 255, 0.7)',
+    disabled: 'rgba(255, 255, 255, 0.4)',
+  },
+  button: {
+    active: '#ffffff',
+    hover: 'rgba(255, 255, 255, 0.08)',
+    selected: 'rgba(255, 255, 255, 0.16)',
+    disabled: 'rgba(255, 255, 255, 0.3)',
+    disabledBackground: 'rgba(255, 255, 255, 0.08)',
+  },
+  background: {
+    default: '#1c2126',
+    paper: '#282e34',
+    paperImage: paperImageValue,
+  },
+  palette: paladinPalette,
+  divider: 'rgba(80, 88, 96, 0.3)',
+  action: {
+    hoverBackground: 'rgba(255, 255, 255, 0.06)',
+    selectedBackground: 'rgba(200, 168, 78, 0.15)',
+    activeBackground: 'rgba(200, 168, 78, 0.22)',
+    focusRing: '0 0 0 3px rgba(200, 168, 78, 0.3)',
+    disabledOpacity: '0.5',
+    backdrop: 'rgba(14, 18, 22, 0.8)',
+    subtleBorder: 'rgba(180, 192, 205, 0.28)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '0px',
+      sm: '0px',
+      md: '0px',
+      lg: '0px',
+      full: '50%',
+    },
+    borderWidth: '4px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.22)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25)',
+    xl: '0 12px 32px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.3)',
+  },
+  typography: {
+    fontFamily: 'Silkscreen, "Courier New", monospace',
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '14px',
+      lg: '16px',
+      xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '400',
+      semibold: '700',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '0px',
+      dense: '0px',
+      normal: '0.5px',
+      wide: '1px',
+      wider: '1.5px',
+      widest: '2px',
+    },
+    textShadow: '2px 2px 0px rgba(0, 0, 0, 0.8)',
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.2s',
+      slow: '0.3s',
+    },
+    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/plumber-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by the Super Mario universe.
+ * Nintendo red primary, Mario blue secondary,
+ * with bright, cheerful tones for semantic colors.
+ */
+export const plumberPalette: Palette = {
+  primary: {
+    light: '#ff4040',
+    lightContrast: '#ffffff',
+    main: '#e60012',
+    mainContrast: '#ffffff',
+    dark: '#b0000e',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#5090e0',
+    lightContrast: '#ffffff',
+    main: '#2060c0',
+    mainContrast: '#ffffff',
+    dark: '#104090',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#ff5252',
+    lightContrast: '#ffffff',
+    main: '#d32f2f',
+    mainContrast: '#ffffff',
+    dark: '#a02020',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#ffca28',
+    lightContrast: '#000000',
+    main: '#f9a825',
+    mainContrast: '#000000',
+    dark: '#c48800',
+    darkContrast: '#000000',
+  },
+  success: {
+    light: '#60d060',
+    lightContrast: '#000000',
+    main: '#2e9e2e',
+    mainContrast: '#ffffff',
+    dark: '#1b7a1b',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#64b5f6',
+    lightContrast: '#000000',
+    main: '#2196f3',
+    mainContrast: '#ffffff',
+    dark: '#1565c0',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/plumber-theme.ts

@@ -0,0 +1,122 @@
+import { plumberPalette } from './plumber-palette.js'
+import type { Theme } from '../services/theme-provider-service.js'
+
+/**
+ * Theme inspired by the Super Mario / Nintendo universe.
+ * Bright white backgrounds, Nintendo red primary, Mario blue secondary,
+ * rounded playful shapes, and friendly sans-serif typography.
+ *
+ * @remarks Recommended Google Font: Nunito
+ */
+export const plumberTheme = {
+  name: 'plumber-theme',
+  text: {
+    primary: '#1a1a2e',
+    secondary: 'rgba(26, 26, 46, 0.65)',
+    disabled: 'rgba(26, 26, 46, 0.38)',
+  },
+  button: {
+    active: '#1a1a2e',
+    hover: 'rgba(230, 0, 18, 0.08)',
+    selected: 'rgba(230, 0, 18, 0.14)',
+    disabled: 'rgba(26, 26, 46, 0.3)',
+    disabledBackground: 'rgba(26, 26, 46, 0.08)',
+  },
+  background: {
+    default: '#f8f8ff',
+    paper: '#ffffff',
+    paperImage: '',
+  },
+  palette: plumberPalette,
+  divider: 'rgba(26, 26, 46, 0.12)',
+  action: {
+    hoverBackground: 'rgba(230, 0, 18, 0.06)',
+    selectedBackground: 'rgba(230, 0, 18, 0.1)',
+    activeBackground: 'rgba(230, 0, 18, 0.16)',
+    focusRing: '0 0 0 3px rgba(230, 0, 18, 0.25)',
+    disabledOpacity: '0.45',
+    backdrop: 'rgba(26, 26, 46, 0.5)',
+    subtleBorder: 'rgba(26, 26, 46, 0.15)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '6px',
+      sm: '8px',
+      md: '12px',
+      lg: '16px',
+      full: '50%',
+    },
+    borderWidth: '2px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 3px rgba(26, 26, 46, 0.1), 0 1px 2px rgba(26, 26, 46, 0.06)',
+    md: '0 4px 12px rgba(26, 26, 46, 0.12), 0 2px 4px rgba(26, 26, 46, 0.08)',
+    lg: '0 8px 24px rgba(26, 26, 46, 0.14), 0 4px 8px rgba(26, 26, 46, 0.1)',
+    xl: '0 12px 32px rgba(26, 26, 46, 0.16), 0 6px 12px rgba(26, 26, 46, 0.12)',
+  },
+  typography: {
+    fontFamily: "Nunito, 'Segoe UI', Tahoma, sans-serif",
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '15px',
+      lg: '17px',
+      xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '600',
+      semibold: '700',
+      bold: '800',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '-0.25px',
+      dense: '0px',
+      normal: '0.15px',
+      wide: '0.5px',
+      wider: '1px',
+      widest: '1.5px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.12s',
+      normal: '0.2s',
+      slow: '0.3s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      easeInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+    },
+  },
+  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: '12px',
+    blurXl: '16px',
+  },
+} satisfies Theme

package/src/themes/replicant-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from '../services/theme-provider-service.js'
+
+/**
+ * Color palette inspired by Blade Runner's noir aesthetic.
+ * Warm amber primary, cold teal secondary,
+ * with moody, rain-washed tones for semantic colors.
+ */
+export const replicantPalette: Palette = {
+  primary: {
+    light: '#ffc050',
+    lightContrast: '#000000',
+    main: '#ff9e00',
+    mainContrast: '#000000',
+    dark: '#c47800',
+    darkContrast: '#000000',
+  },
+  secondary: {
+    light: '#50b0b8',
+    lightContrast: '#000000',
+    main: '#2a8a94',
+    mainContrast: '#ffffff',
+    dark: '#1a6870',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#d45858',
+    lightContrast: '#000000',
+    main: '#b83030',
+    mainContrast: '#ffffff',
+    dark: '#882020',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#e0a840',
+    lightContrast: '#000000',
+    main: '#c48c20',
+    mainContrast: '#000000',
+    dark: '#946818',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#50a878',
+    lightContrast: '#000000',
+    main: '#308858',
+    mainContrast: '#ffffff',
+    dark: '#206840',
+    darkContrast: '#ffffff',
+  },
+  info: {
+    light: '#60a0c0',
+    lightContrast: '#000000',
+    main: '#4080a0',
+    mainContrast: '#ffffff',
+    dark: '#286080',
+    darkContrast: '#ffffff',
+  },
+}

package/src/themes/replicant-theme.ts

@@ -0,0 +1,124 @@
+import { replicantPalette } from './replicant-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="r" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.15 0.01" numOctaves="3" stitchTiles="stitch" result="n"/><feDiffuseLighting in="n" lighting-color="#405060" surfaceScale="1.5"><feDistantLight azimuth="90" elevation="70"/></feDiffuseLighting></filter><rect width="200" height="200" filter="url(#r)" opacity="0.08"/></svg>`)}")`
+
+/**
+ * Theme inspired by Blade Runner's rain-soaked noir aesthetic.
+ * Dark blue-grey backgrounds, warm amber primary, cold teal secondary,
+ * geometric futuristic typography with heavy atmospheric blur.
+ *
+ * @remarks Recommended Google Font: Orbitron
+ */
+export const replicantTheme = {
+  name: 'replicant-theme',
+  text: {
+    primary: '#d8dce4',
+    secondary: 'rgba(216, 220, 228, 0.6)',
+    disabled: 'rgba(216, 220, 228, 0.35)',
+  },
+  button: {
+    active: '#d8dce4',
+    hover: 'rgba(255, 158, 0, 0.1)',
+    selected: 'rgba(255, 158, 0, 0.16)',
+    disabled: 'rgba(216, 220, 228, 0.3)',
+    disabledBackground: 'rgba(216, 220, 228, 0.06)',
+  },
+  background: {
+    default: '#0e1218',
+    paper: '#181e28',
+    paperImage: paperImageValue,
+  },
+  palette: replicantPalette,
+  divider: 'rgba(42, 138, 148, 0.18)',
+  action: {
+    hoverBackground: 'rgba(255, 158, 0, 0.07)',
+    selectedBackground: 'rgba(255, 158, 0, 0.13)',
+    activeBackground: 'rgba(255, 158, 0, 0.2)',
+    focusRing: '0 0 0 2px rgba(255, 158, 0, 0.4)',
+    disabledOpacity: '0.4',
+    backdrop: 'rgba(6, 8, 12, 0.85)',
+    subtleBorder: 'rgba(42, 138, 148, 0.2)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '2px',
+      sm: '3px',
+      md: '4px',
+      lg: '6px',
+      full: '50%',
+    },
+    borderWidth: '1px',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 158, 0, 0.05)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 158, 0, 0.08)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 158, 0, 0.1)',
+    xl: '0 12px 36px rgba(0, 0, 0, 0.7), 0 0 36px rgba(255, 158, 0, 0.12)',
+  },
+  typography: {
+    fontFamily: "Orbitron, 'Segoe UI', sans-serif",
+    fontSize: {
+      xs: '10px',
+      sm: '11px',
+      md: '13px',
+      lg: '15px',
+      xl: '20px',
+      xxl: '26px',
+      xxxl: '32px',
+      xxxxl: '42px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.55',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '0px',
+      dense: '0.5px',
+      normal: '1px',
+      wide: '1.5px',
+      wider: '2px',
+      widest: '3px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.25s',
+      slow: '0.4s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.16, 1.0, 0.3, 1.0)',
+      easeInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  zIndex: {
+    drawer: '1000',
+    appBar: '1100',
+    modal: '1200',
+    tooltip: '1300',
+    dropdown: '1400',
+  },
+  effects: {
+    blurSm: '6px',
+    blurMd: '12px',
+    blurLg: '20px',
+    blurXl: '30px',
+  },
+} satisfies Theme