decantr 0.9.0

package/src/css/styles/addons/prismatic.js

@@ -0,0 +1,100 @@
+/**
+ * Prismatic — Chromatic depth shifting. Iridescent, futuristic.
+ * Surfaces change hue as they layer deeper, creating a rainbow-depth effect.
+ * Each elevation level has a different hue tint.
+ */
+export const prismatic = {
+  id: 'prismatic',
+  name: 'Prismatic',
+  seed: {
+    primary: '#6366f1',
+    accent: '#ec4899',
+    tertiary: '#14b8a6',
+    neutral: '#71717a',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+    bg: '#fafafa',
+    bgDark: '#0a0a0f',
+  },
+  personality: {
+    radius: 'rounded',
+    elevation: 'raised',
+    motion: 'smooth',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '700',
+    '--d-fw-title': '600',
+    '--d-ls-heading': '0',
+  },
+  overrides: {
+    light: {
+      // Hue-shifted surfaces — each depth has a different tint
+      '--d-surface-0': '#fafafa',
+      '--d-surface-1': 'rgba(99,102,241,0.04)',
+      '--d-surface-1-fg': '#1a1a2e',
+      '--d-surface-2': 'rgba(236,72,153,0.05)',
+      '--d-surface-2-fg': '#1a1a2e',
+      '--d-surface-3': 'rgba(20,184,166,0.06)',
+      '--d-surface-3-fg': '#1a1a2e',
+      '--d-field-bg': 'rgba(255,255,255,0.8)',
+      '--d-field-border': 'rgba(99,102,241,0.15)',
+      '--d-field-border-hover': 'rgba(99,102,241,0.3)',
+      '--d-item-hover-bg': 'rgba(99,102,241,0.05)',
+    },
+    dark: {
+      // Hue-shifted surfaces — dark mode
+      '--d-surface-0': '#0a0a0f',
+      '--d-surface-1': 'rgba(99,102,241,0.08)',
+      '--d-surface-1-fg': '#e8e8f0',
+      '--d-surface-2': 'rgba(236,72,153,0.08)',
+      '--d-surface-2-fg': '#e8e8f0',
+      '--d-surface-3': 'rgba(20,184,166,0.08)',
+      '--d-surface-3-fg': '#e8e8f0',
+      '--d-border': 'rgba(99,102,241,0.12)',
+      '--d-border-strong': 'rgba(99,102,241,0.22)',
+      '--d-field-bg': 'rgba(255,255,255,0.04)',
+      '--d-field-border': 'rgba(99,102,241,0.15)',
+      '--d-field-border-hover': 'rgba(99,102,241,0.3)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.05)',
+      '--d-chart-0': '#6366f1',
+      '--d-chart-1': '#ec4899',
+      '--d-chart-2': '#14b8a6',
+      '--d-chart-3': '#f59e0b',
+      '--d-chart-4': '#ef4444',
+      '--d-chart-5': '#8b5cf6',
+      '--d-chart-6': '#06b6d4',
+      '--d-chart-7': '#f97316',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-selection-bg);color:var(--d-selection-fg)}',
+    // Scrollbar — iridescent gradient thumb
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--d-primary),var(--d-accent),var(--d-tertiary));border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--d-accent),var(--d-tertiary),var(--d-primary))}',
+    // Card — chromatic border based on depth
+    '.d-card{border:var(--d-border-width) solid rgba(99,102,241,0.15);box-shadow:var(--d-elevation-1)}',
+    '.d-card-inner{border:var(--d-border-width) solid rgba(99,102,241,0.08);box-shadow:none}',
+    // Modal — gradient border
+    '.d-modal-content{border:var(--d-border-width) solid rgba(236,72,153,0.15);box-shadow:var(--d-elevation-3)}',
+    // Button — indigo glow
+    '.d-btn-primary{box-shadow:0 0 12px rgba(99,102,241,0.2)}',
+    '.d-btn-primary:hover{box-shadow:0 0 20px rgba(99,102,241,0.35)}',
+    // Prismatic utilities
+    '.d-prismatic-shift{transition:filter var(--d-tr-normal) var(--d-ease-standard)}',
+    '.d-prismatic-shift:hover{filter:hue-rotate(30deg)}',
+    '.d-prismatic-border{border-image:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary)) 1}',
+    // Gradient text
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Mesh — iridescent
+    '.d-mesh{background:radial-gradient(ellipse at 20% 50%,rgba(99,102,241,0.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(236,72,153,0.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(20,184,166,0.06) 0%,transparent 50%),var(--d-bg)}',
+  ].join(''),
+};

package/src/css/styles/addons/retro.js

@@ -0,0 +1,63 @@
+/**
+ * Retro Style — Neobrutalism. Bold borders, offset shadows, sharp corners, snappy motion.
+ * Opinionated and distinctive. Everything feels physical and tactile.
+ *
+ * Personality: sharp + brutalist elevation + snappy motion + bold borders + no gradients
+ * Works in both light and dark mode from the same definition.
+ */
+export const retro = {
+  id: 'retro',
+  name: 'Retro',
+  seed: {
+    primary: '#e63946',
+    accent: '#457b9d',
+    tertiary: '#2a9d8f',
+    neutral: '#6b7280',
+    success: '#1a7a42',
+    warning: '#e06600',
+    error: '#c41e1e',
+    info: '#2e6b8a',
+    bg: '#fffef5',
+    bgDark: '#1a1a1a',
+  },
+  personality: {
+    radius: 'sharp',
+    elevation: 'brutalist',
+    motion: 'snappy',
+    borders: 'bold',
+    density: 'comfortable',
+    gradient: 'none',
+  },
+  /** Typography overrides — retro uses heavier weights and wider letter spacing */
+  typography: {
+    '--d-fw-heading': '800',
+    '--d-fw-title': '800',
+    '--d-fw-medium': '700',
+    '--d-ls-heading': '0.05em',
+  },
+  overrides: {
+    light: {
+      '--d-field-border-width': 'var(--d-border-width-strong)',
+    },
+    dark: {
+      '--d-bg': '#1a1a1a',
+      '--d-field-border-width': 'var(--d-border-width-strong)',
+    },
+  },
+  /** Component CSS — only for effects that tokens alone can't express */
+  components: [
+    // Global
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-primary);color:var(--d-primary-fg)}',
+    // Neobrutalist uppercase accents
+    '.d-btn{text-transform:uppercase;letter-spacing:0.05em}',
+    '.d-badge,.d-badge-sup{text-transform:uppercase;letter-spacing:0.05em}',
+    '.d-chip{text-transform:uppercase;letter-spacing:0.03em}',
+    // Retro-specific keyframes
+    '@keyframes d-drop-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}',
+    // Bold scrollbar
+    '::-webkit-scrollbar{width:10px;height:10px}',
+    '::-webkit-scrollbar-track{background:var(--d-surface-0);border:var(--d-border-width) var(--d-border-style) var(--d-border)}',
+    '::-webkit-scrollbar-thumb{background:var(--d-fg);border:var(--d-border-width) var(--d-border-style) var(--d-border)}',
+  ].join(''),
+};

package/src/css/styles/auradecantism.js

@@ -0,0 +1,96 @@
+/**
+ * Auradecantism — Decantr's signature design style.
+ * Dark glass aesthetic with vibrant purple/cyan/pink palette,
+ * mesh gradient backgrounds, and luminous glow effects.
+ * Default style for all Decantr implementations.
+ */
+export const auradecantism = {
+  id: 'auradecantism',
+  name: 'Auradecantism',
+  seed: {
+    primary: '#FE4474',
+    accent: '#0AF3EB',
+    tertiary: '#6500C6',
+    neutral: '#8892a4',
+    success: '#00C388',
+    warning: '#FDA303',
+    error: '#EF233C',
+    info: '#0AF3EB',
+    bg: '#f0f4ff',
+    bgDark: '#060918',
+  },
+  personality: {
+    radius: 'pill',
+    elevation: 'glass',
+    motion: 'bouncy',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '800',
+    '--d-fw-title': '700',
+    '--d-ls-heading': '-0.03em',
+  },
+  overrides: {
+    light: {
+      '--d-surface-1-filter': 'blur(16px) saturate(1.6)',
+      '--d-surface-2-filter': 'blur(20px) saturate(1.8)',
+      '--d-surface-3-filter': 'blur(24px) saturate(2)',
+      '--d-field-bg': 'rgba(255,255,255,0.5)',
+      '--d-field-border': 'rgba(0,0,0,0.12)',
+      '--d-field-border-hover': 'rgba(0,0,0,0.22)',
+      '--d-item-hover-bg': 'rgba(0,0,0,0.06)',
+    },
+    dark: {
+      '--d-surface-1': 'rgba(12,15,40,0.55)',
+      '--d-surface-2': 'rgba(12,15,40,0.7)',
+      '--d-surface-3': 'rgba(12,15,40,0.8)',
+      '--d-surface-1-filter': 'blur(16px) saturate(1.6)',
+      '--d-surface-2-filter': 'blur(20px) saturate(1.8)',
+      '--d-surface-3-filter': 'blur(24px) saturate(2)',
+      '--d-border': 'rgba(255,255,255,0.08)',
+      '--d-border-strong': 'rgba(255,255,255,0.15)',
+      '--d-field-bg': 'rgba(255,255,255,0.04)',
+      '--d-field-border': 'rgba(255,255,255,0.08)',
+      '--d-field-border-hover': 'rgba(255,255,255,0.15)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.06)',
+      '--d-chart-0': '#FE4474',
+      '--d-chart-1': '#0AF3EB',
+      '--d-chart-2': '#6500C6',
+      '--d-chart-3': '#00C388',
+      '--d-chart-4': '#FDA303',
+      '--d-chart-5': '#EF233C',
+      '--d-chart-6': '#8B5CF6',
+      '--d-chart-7': '#38BDF8',
+    },
+  },
+  components: [
+    // Body + selection + font smoothing
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-selection-bg);color:var(--d-selection-fg)}',
+    // Scrollbar
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:var(--d-primary-border);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:var(--d-primary-hover)}',
+    // Glass card enhancements
+    '.d-card{border:var(--d-border-width) solid rgba(255,255,255,0.1);box-shadow:var(--d-elevation-1),inset 0 1px 0 rgba(255,255,255,0.06)}',
+    '.d-card-inner{border:var(--d-border-width) solid rgba(255,255,255,0.06);box-shadow:none}',
+    '.d-modal-panel{border:var(--d-border-width) solid rgba(255,255,255,0.12);box-shadow:var(--d-elevation-3),inset 0 1px 0 rgba(255,255,255,0.08)}',
+    // Button glow
+    '.d-btn-primary{box-shadow:0 0 12px rgba(254,68,116,0.25)}',
+    '.d-btn-primary:hover{box-shadow:0 0 20px rgba(254,68,116,0.4)}',
+    // Mesh gradient background utility
+    '.d-mesh{background:radial-gradient(ellipse at 20% 50%,rgba(254,68,116,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(10,243,235,0.1) 0%,transparent 50%),radial-gradient(ellipse at 60% 80%,rgba(101,0,198,0.08) 0%,transparent 50%),var(--d-bg)}',
+    // Gradient text utilities
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Glass panel utilities
+    '.d-glass-subtle{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(255,255,255,0.05);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-0)}',
+    '.d-glass{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(255,255,255,0.1);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-1),inset 0 1px 0 rgba(255,255,255,0.06)}',
+    '.d-glass-strong{background:var(--d-surface-2);backdrop-filter:var(--d-surface-2-filter);-webkit-backdrop-filter:var(--d-surface-2-filter);border:var(--d-border-width) solid rgba(255,255,255,0.12);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-2),inset 0 1px 0 rgba(255,255,255,0.08)}',
+    // Frosted-glass dialog backdrops
+    'dialog::backdrop{background:rgba(6,9,24,0.45);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}',
+  ].join(''),
+};