@salesmind-ai/design-system 0.3.7 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,7 +9,7 @@
9
9
  }
10
10
  [data-theme=light] .ds-theme-selector,
11
11
  [data-theme=light-contrast] .ds-theme-selector {
12
- background-color: #ffffff;
12
+ background-color: var(--void-base);
13
13
  }
14
14
  [data-theme=dark] .ds-theme-selector,
15
15
  [data-theme=dark-contrast] .ds-theme-selector {
@@ -30,7 +30,7 @@
30
30
  font-weight: 500;
31
31
  border-radius: var(--radius-badge);
32
32
  cursor: pointer;
33
- transition: all 0.2s ease;
33
+ transition: color var(--transition-fast), background-color var(--transition-fast);
34
34
  line-height: 1;
35
35
  white-space: nowrap;
36
36
  }
@@ -49,13 +49,13 @@
49
49
  color: var(--text-secondary);
50
50
  }
51
51
  .ds-theme-selector__btn--active .ds-theme-selector__icon {
52
- color: #F97316;
52
+ color: rgb(var(--accent-rgb));
53
53
  }
54
54
  .ds-theme-selector__icon {
55
55
  width: 16px;
56
56
  height: 16px;
57
57
  color: inherit;
58
- transition: color 0.2s ease;
58
+ transition: color var(--transition-fast);
59
59
  }
60
60
 
61
61
  /* src/components/AppearancePanel/AppearancePanel.css */
@@ -318,7 +318,7 @@
318
318
  justify-content: center;
319
319
  padding: 4px;
320
320
  border: none;
321
- border-radius: var(--radius-sm);
321
+ border-radius: var(--radius-xs);
322
322
  background: transparent;
323
323
  cursor: pointer;
324
324
  transition: background var(--transition-fast);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/ThemeSelector/ThemeSelector.css","../../src/components/AppearancePanel/AppearancePanel.css","../../src/components/ColorPicker/ColorPicker.css","../../src/components/VoidBackground/VoidBackground.css"],"sourcesContent":[".ds-theme-selector {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n padding: 4px;\n gap: 4px;\n}\n\n[data-theme='light'] .ds-theme-selector,\n[data-theme='light-contrast'] .ds-theme-selector {\n background-color: #ffffff;\n}\n\n[data-theme='dark'] .ds-theme-selector,\n[data-theme='dark-contrast'] .ds-theme-selector {\n background: var(--glass-base);\n backdrop-filter: var(--glass-backdrop);\n -webkit-backdrop-filter: var(--glass-backdrop);\n}\n\n.ds-theme-selector__btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: none;\n background: transparent;\n color: var(--text-secondary);\n font-family: inherit;\n font-size: var(--font-size-sm, 14px);\n font-weight: 500;\n border-radius: var(--radius-badge);\n cursor: pointer;\n transition: all 0.2s ease;\n line-height: 1;\n white-space: nowrap;\n}\n\n.ds-theme-selector__btn:hover {\n color: var(--text-primary);\n background-color: var(--interactive-hover-bg);\n}\n\n.ds-theme-selector__btn--active {\n background-color: rgba(var(--accent-rgb),.2);\n box-shadow: none;\n}\n\n[data-theme='light'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='light-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label {\n color: var(--text-secondary);\n}\n\n.ds-theme-selector__btn--active .ds-theme-selector__icon {\n color: #F97316;\n}\n\n.ds-theme-selector__icon {\n width: 16px;\n height: 16px;\n color: inherit;\n transition: color 0.2s ease;\n}\n","/* ============================================================================\n RESPONSIVE MORPHING — Bottom Sheet on Mobile\n ============================================================================ */\n\n@media (max-width: 768px) {\n .ds-appearance-panel {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n max-width: 100%;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n\n /* Ensure it sits above everything */\n z-index: var(--z-modal);\n\n /* Animation: Slide Up */\n animation: ds-panel-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n\n /* Ensure scrollability but keep context visible (60% height) */\n max-height: 60vh;\n overflow-y: auto;\n\n /* Add safe area for iPhone home indicator */\n padding-bottom: env(safe-area-inset-bottom, 24px);\n }\n\n /* Reset border radius for internal items if needed */\n .ds-appearance-panel::before {\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n }\n}\n\n@keyframes ds-panel-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n/* ============================================================================\n APPEARANCE PANEL — Glass Treatment\n ============================================================================ */\n\n.ds-appearance-panel {\n position: relative;\n padding: var(--space-6);\n border-radius: var(--radius-card);\n max-width: 400px;\n\n /* Fix for desktop height overflow */\n max-height: 85vh;\n overflow-y: auto;\n\n /* Glass treatment */\n background: var(--glass-base);\n backdrop-filter: var(--glass-backdrop);\n -webkit-backdrop-filter: var(--glass-backdrop);\n box-shadow: var(--glass-shadow-combined);\n}\n\n/* Rim light */\n.ds-appearance-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: var(--space-px);\n background: linear-gradient(180deg, var(--rim-light-top) 0%, var(--rim-light-bottom) 100%);\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n pointer-events: none;\n}\n\n.ds-appearance-panel__title {\n font-family: var(--font-family);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--text-primary);\n margin: 0 0 var(--space-6);\n}\n\n.ds-appearance-panel__section {\n border: none;\n padding: 0;\n margin: 0 0 var(--space-6);\n}\n\n.ds-appearance-panel__section:last-of-type {\n margin-bottom: var(--space-4);\n}\n\n.ds-appearance-panel__legend {\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n margin-bottom: var(--space-3);\n}\n\n.ds-appearance-panel__options {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* Row layout for toggles (Density, Geometry) */\n.ds-appearance-panel__options--row {\n flex-direction: row;\n gap: var(--space-3);\n}\n\n.ds-appearance-panel__options--row .ds-appearance-panel__option {\n flex: 1;\n}\n\n.ds-appearance-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-radius: var(--radius-button);\n cursor: pointer;\n transition: background var(--transition-glass);\n\n /* Glass base */\n background: transparent;\n}\n\n.ds-appearance-panel__option:hover {\n background: var(--glass-base-hover);\n}\n\n.ds-appearance-panel__option--active {\n background: rgba(var(--accent-rgb), 0.15);\n}\n\n.ds-appearance-panel__option--active:hover {\n background: rgba(var(--accent-rgb), 0.2);\n}\n\n/* Toggle variant styling */\n.ds-appearance-panel__option--toggle {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n padding: var(--space-3);\n text-align: center;\n}\n\n.ds-appearance-panel__option--toggle .ds-appearance-panel__option-content {\n width: 100%;\n text-align: center;\n}\n\n.ds-appearance-panel__radio {\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--text-tertiary);\n transition: all var(--transition-glass);\n flex-shrink: 0;\n}\n\n/* Hide radio in toggle variant */\n.ds-appearance-panel__option--toggle .ds-appearance-panel__radio {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n.ds-appearance-panel__option--active .ds-appearance-panel__radio {\n border-color: rgba(var(--accent-rgb), 1);\n background: rgba(var(--accent-rgb), 1);\n box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);\n}\n\n.ds-appearance-panel__option-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-0-5);\n}\n\n.ds-appearance-panel__option-label {\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n color: var(--text-primary);\n}\n\n.ds-appearance-panel__option-description {\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n color: var(--text-tertiary);\n}\n\n/* ============================================================================\n COLOR PICKER — Custom Brand\n ============================================================================ */\n\n.ds-appearance-panel__color-picker {\n margin-top: var(--space-4);\n padding: var(--space-4);\n border-radius: var(--radius-button);\n background: var(--glass-base);\n border: 1px solid rgba(var(--accent-rgb), 0.2);\n}\n\n.ds-appearance-panel__color-label {\n display: block;\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n color: var(--text-secondary);\n margin-bottom: var(--space-2);\n}\n\n.ds-appearance-panel__color-input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n.ds-appearance-panel__color-input {\n width: 48px;\n height: 48px;\n padding: 0;\n border: none;\n border-radius: var(--radius-badge);\n cursor: pointer;\n background: transparent;\n overflow: hidden;\n}\n\n/* Style the color input swatch */\n.ds-appearance-panel__color-input::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n\n.ds-appearance-panel__color-input::-webkit-color-swatch {\n border: 2px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n box-shadow: var(--shadow-md);\n}\n\n.ds-appearance-panel__color-input::-moz-color-swatch {\n border: 2px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n box-shadow: var(--shadow-md);\n}\n\n.ds-appearance-panel__color-input:focus-visible {\n outline: none;\n box-shadow: var(--focus-ring);\n border-radius: var(--radius-badge);\n}\n\n.ds-appearance-panel__color-value {\n font-family: var(--font-family-mono);\n font-size: var(--font-size-sm);\n color: var(--text-secondary);\n padding: var(--space-2) var(--space-3);\n background: var(--glass-base);\n border-radius: var(--radius-badge);\n border: 1px solid var(--rim-light-bottom);\n}\n\n/* ============================================================================\n RESET BUTTON\n ============================================================================ */\n\n.ds-appearance-panel__reset {\n display: block;\n width: 100%;\n padding: var(--space-3) var(--space-4);\n border: none;\n border-radius: var(--radius-button);\n background: var(--btn-secondary-bg);\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n cursor: pointer;\n transition: all var(--transition-glass);\n}\n\n.ds-appearance-panel__reset:hover {\n background: var(--btn-secondary-bg-hover);\n color: var(--text-primary);\n}\n\n.ds-appearance-panel__reset:focus-visible {\n box-shadow: var(--focus-ring);\n outline: none;\n}\n\n/* ============================================================================\n HIGH CONTRAST MODE\n ============================================================================ */\n\n@media (prefers-contrast: more) {\n .ds-appearance-panel {\n border: 1px solid var(--hc-border);\n }\n\n .ds-appearance-panel__color-picker {\n border: 1px solid var(--hc-border);\n }\n}\n",".ds-color-picker {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n border-radius: var(--radius-badge);\n background: var(--interactive-hover-bg);\n border: 1px solid var(--rim-light-bottom);\n}\n\n.ds-color-picker__swatch {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border: none;\n border-radius: var(--radius-sm);\n background: transparent;\n cursor: pointer;\n transition: background var(--transition-fast);\n}\n\n.ds-color-picker__swatch:hover {\n background: var(--interactive-hover-bg);\n}\n\n.ds-color-picker__swatch--active {\n background: var(--interactive-active-bg);\n}\n\n.ds-color-picker__dot {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: var(--swatch-color);\n border: 1.5px solid var(--rim-light-bottom);\n transition: box-shadow var(--transition-fast);\n}\n\n.ds-color-picker__swatch--active .ds-color-picker__dot {\n box-shadow: 0 0 0 2px var(--swatch-color);\n}\n\n/* Native <input type=\"color\"> hidden behind the custom swatch */\n.ds-color-picker__swatch--custom {\n position: relative;\n}\n\n.ds-color-picker__native-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n border: none;\n padding: 0;\n}\n","/* ============================================================================\n VOID BACKGROUND — LEVEL 0 ATMOSPHERIC SYSTEM\n ============================================================================ */\n\n.void {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 100vh;\n overflow: hidden;\n isolation: isolate;\n}\n\n/* ==========================================================================\n Layer 1: Base Color — Deep purple-black\n ========================================================================== */\n\n.void__base {\n position: absolute;\n inset: 0;\n background-color: var(--void-base);\n z-index: -4;\n}\n\n/* ==========================================================================\n Layer 2: Light Orbs — Brand colors as light sources\n ========================================================================== */\n\n.void__orbs {\n position: absolute;\n inset: 0;\n z-index: -3;\n pointer-events: none;\n}\n\n.void__orb {\n position: absolute;\n border-radius: 50%;\n mix-blend-mode: screen;\n filter: blur(140px);\n opacity: 0.6;\n}\n\n/* Warm Orb: Yellow → Pink gradient, positioned near primary content */\n.void__orb--warm {\n width: 800px;\n height: 800px;\n top: 10%;\n right: 10%;\n background: radial-gradient(\n circle at center,\n rgba(var(--void-orb-yellow-rgb), 0.4) 0%,\n rgba(var(--void-orb-pink-rgb), 0.3) 40%,\n transparent 70%\n );\n}\n\n/* Purple Orb: Deep purple for depth balance */\n.void__orb--purple {\n width: 600px;\n height: 600px;\n bottom: 10%;\n left: 10%;\n background: radial-gradient(\n circle at center,\n rgba(var(--void-orb-purple-rgb), 0.5) 0%,\n rgba(var(--void-orb-purple-rgb), 0.2) 50%,\n transparent 70%\n );\n}\n\n/* ==========================================================================\n Layer 3: Engineered Grid — 80×80px with radial fade\n ========================================================================== */\n\n.void__grid {\n position: absolute;\n inset: 0;\n z-index: -2;\n pointer-events: none;\n background-image:\n linear-gradient(to right, var(--void-grid-color) 1px, transparent 1px),\n linear-gradient(to bottom, var(--void-grid-color) 1px, transparent 1px);\n background-size: var(--void-grid-size) var(--void-grid-size);\n /* Grid fades toward edges — CRITICAL */\n mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n}\n\n/* ==========================================================================\n Layer 4: Film Grain — Static noise texture\n ========================================================================== */\n\n.void__grain {\n position: absolute;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n opacity: var(--void-grid-grain-opacity, 0.04);\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 200px 200px;\n}\n\n/* ==========================================================================\n Content Layer\n ========================================================================== */\n\n.void__content {\n position: relative;\n z-index: 1;\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n/* ==========================================================================\n Utility: Inline Void (for smaller containers)\n ========================================================================== */\n\n.void--inline {\n min-height: auto;\n}\n\n.void--inline .void__content {\n min-height: auto;\n}\n\n/* ==========================================================================\n Reduced Motion: Disable any future animations\n ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .void__orb {\n animation: none;\n }\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/ThemeSelector/ThemeSelector.css","../../src/components/AppearancePanel/AppearancePanel.css","../../src/components/ColorPicker/ColorPicker.css","../../src/components/VoidBackground/VoidBackground.css"],"sourcesContent":[".ds-theme-selector {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n padding: 4px;\n gap: 4px;\n}\n\n[data-theme='light'] .ds-theme-selector,\n[data-theme='light-contrast'] .ds-theme-selector {\n background-color: var(--void-base);\n}\n\n[data-theme='dark'] .ds-theme-selector,\n[data-theme='dark-contrast'] .ds-theme-selector {\n background: var(--glass-base);\n backdrop-filter: var(--glass-backdrop);\n -webkit-backdrop-filter: var(--glass-backdrop);\n}\n\n.ds-theme-selector__btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: none;\n background: transparent;\n color: var(--text-secondary);\n font-family: inherit;\n font-size: var(--font-size-sm, 14px);\n font-weight: 500;\n border-radius: var(--radius-badge);\n cursor: pointer;\n transition: color var(--transition-fast), background-color var(--transition-fast);\n line-height: 1;\n white-space: nowrap;\n}\n\n.ds-theme-selector__btn:hover {\n color: var(--text-primary);\n background-color: var(--interactive-hover-bg);\n}\n\n.ds-theme-selector__btn--active {\n background-color: rgba(var(--accent-rgb),.2);\n box-shadow: none;\n}\n\n[data-theme='light'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='light-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark'] .ds-theme-selector__btn--active .ds-theme-selector__label,\n[data-theme='dark-contrast'] .ds-theme-selector__btn--active .ds-theme-selector__label {\n color: var(--text-secondary);\n}\n\n.ds-theme-selector__btn--active .ds-theme-selector__icon {\n color: rgb(var(--accent-rgb));\n}\n\n.ds-theme-selector__icon {\n width: 16px;\n height: 16px;\n color: inherit;\n transition: color var(--transition-fast);\n}\n","/* ============================================================================\n RESPONSIVE MORPHING — Bottom Sheet on Mobile\n ============================================================================ */\n\n@media (max-width: 768px) {\n .ds-appearance-panel {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n max-width: 100%;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n\n /* Ensure it sits above everything */\n z-index: var(--z-modal);\n\n /* Animation: Slide Up */\n animation: ds-panel-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n\n /* Ensure scrollability but keep context visible (60% height) */\n max-height: 60vh;\n overflow-y: auto;\n\n /* Add safe area for iPhone home indicator */\n padding-bottom: env(safe-area-inset-bottom, 24px);\n }\n\n /* Reset border radius for internal items if needed */\n .ds-appearance-panel::before {\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n }\n}\n\n@keyframes ds-panel-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n/* ============================================================================\n APPEARANCE PANEL — Glass Treatment\n ============================================================================ */\n\n.ds-appearance-panel {\n position: relative;\n padding: var(--space-6);\n border-radius: var(--radius-card);\n max-width: 400px;\n\n /* Fix for desktop height overflow */\n max-height: 85vh;\n overflow-y: auto;\n\n /* Glass treatment */\n background: var(--glass-base);\n backdrop-filter: var(--glass-backdrop);\n -webkit-backdrop-filter: var(--glass-backdrop);\n box-shadow: var(--glass-shadow-combined);\n}\n\n/* Rim light */\n.ds-appearance-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: var(--space-px);\n background: linear-gradient(180deg, var(--rim-light-top) 0%, var(--rim-light-bottom) 100%);\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n pointer-events: none;\n}\n\n.ds-appearance-panel__title {\n font-family: var(--font-family);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--text-primary);\n margin: 0 0 var(--space-6);\n}\n\n.ds-appearance-panel__section {\n border: none;\n padding: 0;\n margin: 0 0 var(--space-6);\n}\n\n.ds-appearance-panel__section:last-of-type {\n margin-bottom: var(--space-4);\n}\n\n.ds-appearance-panel__legend {\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n margin-bottom: var(--space-3);\n}\n\n.ds-appearance-panel__options {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* Row layout for toggles (Density, Geometry) */\n.ds-appearance-panel__options--row {\n flex-direction: row;\n gap: var(--space-3);\n}\n\n.ds-appearance-panel__options--row .ds-appearance-panel__option {\n flex: 1;\n}\n\n.ds-appearance-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-radius: var(--radius-button);\n cursor: pointer;\n transition: background var(--transition-glass);\n\n /* Glass base */\n background: transparent;\n}\n\n.ds-appearance-panel__option:hover {\n background: var(--glass-base-hover);\n}\n\n.ds-appearance-panel__option--active {\n background: rgba(var(--accent-rgb), 0.15);\n}\n\n.ds-appearance-panel__option--active:hover {\n background: rgba(var(--accent-rgb), 0.2);\n}\n\n/* Toggle variant styling */\n.ds-appearance-panel__option--toggle {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n padding: var(--space-3);\n text-align: center;\n}\n\n.ds-appearance-panel__option--toggle .ds-appearance-panel__option-content {\n width: 100%;\n text-align: center;\n}\n\n.ds-appearance-panel__radio {\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--text-tertiary);\n transition: all var(--transition-glass);\n flex-shrink: 0;\n}\n\n/* Hide radio in toggle variant */\n.ds-appearance-panel__option--toggle .ds-appearance-panel__radio {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n.ds-appearance-panel__option--active .ds-appearance-panel__radio {\n border-color: rgba(var(--accent-rgb), 1);\n background: rgba(var(--accent-rgb), 1);\n box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);\n}\n\n.ds-appearance-panel__option-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-0-5);\n}\n\n.ds-appearance-panel__option-label {\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n color: var(--text-primary);\n}\n\n.ds-appearance-panel__option-description {\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n color: var(--text-tertiary);\n}\n\n/* ============================================================================\n COLOR PICKER — Custom Brand\n ============================================================================ */\n\n.ds-appearance-panel__color-picker {\n margin-top: var(--space-4);\n padding: var(--space-4);\n border-radius: var(--radius-button);\n background: var(--glass-base);\n border: 1px solid rgba(var(--accent-rgb), 0.2);\n}\n\n.ds-appearance-panel__color-label {\n display: block;\n font-family: var(--font-family);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n color: var(--text-secondary);\n margin-bottom: var(--space-2);\n}\n\n.ds-appearance-panel__color-input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n.ds-appearance-panel__color-input {\n width: 48px;\n height: 48px;\n padding: 0;\n border: none;\n border-radius: var(--radius-badge);\n cursor: pointer;\n background: transparent;\n overflow: hidden;\n}\n\n/* Style the color input swatch */\n.ds-appearance-panel__color-input::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n\n.ds-appearance-panel__color-input::-webkit-color-swatch {\n border: 2px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n box-shadow: var(--shadow-md);\n}\n\n.ds-appearance-panel__color-input::-moz-color-swatch {\n border: 2px solid var(--rim-light-top);\n border-radius: var(--radius-badge);\n box-shadow: var(--shadow-md);\n}\n\n.ds-appearance-panel__color-input:focus-visible {\n outline: none;\n box-shadow: var(--focus-ring);\n border-radius: var(--radius-badge);\n}\n\n.ds-appearance-panel__color-value {\n font-family: var(--font-family-mono);\n font-size: var(--font-size-sm);\n color: var(--text-secondary);\n padding: var(--space-2) var(--space-3);\n background: var(--glass-base);\n border-radius: var(--radius-badge);\n border: 1px solid var(--rim-light-bottom);\n}\n\n/* ============================================================================\n RESET BUTTON\n ============================================================================ */\n\n.ds-appearance-panel__reset {\n display: block;\n width: 100%;\n padding: var(--space-3) var(--space-4);\n border: none;\n border-radius: var(--radius-button);\n background: var(--btn-secondary-bg);\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-medium);\n cursor: pointer;\n transition: all var(--transition-glass);\n}\n\n.ds-appearance-panel__reset:hover {\n background: var(--btn-secondary-bg-hover);\n color: var(--text-primary);\n}\n\n.ds-appearance-panel__reset:focus-visible {\n box-shadow: var(--focus-ring);\n outline: none;\n}\n\n/* ============================================================================\n HIGH CONTRAST MODE\n ============================================================================ */\n\n@media (prefers-contrast: more) {\n .ds-appearance-panel {\n border: 1px solid var(--hc-border);\n }\n\n .ds-appearance-panel__color-picker {\n border: 1px solid var(--hc-border);\n }\n}\n",".ds-color-picker {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n border-radius: var(--radius-badge);\n background: var(--interactive-hover-bg);\n border: 1px solid var(--rim-light-bottom);\n}\n\n.ds-color-picker__swatch {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border: none;\n border-radius: var(--radius-xs);\n background: transparent;\n cursor: pointer;\n transition: background var(--transition-fast);\n}\n\n.ds-color-picker__swatch:hover {\n background: var(--interactive-hover-bg);\n}\n\n.ds-color-picker__swatch--active {\n background: var(--interactive-active-bg);\n}\n\n.ds-color-picker__dot {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: var(--swatch-color);\n border: 1.5px solid var(--rim-light-bottom);\n transition: box-shadow var(--transition-fast);\n}\n\n.ds-color-picker__swatch--active .ds-color-picker__dot {\n box-shadow: 0 0 0 2px var(--swatch-color);\n}\n\n/* Native <input type=\"color\"> hidden behind the custom swatch */\n.ds-color-picker__swatch--custom {\n position: relative;\n}\n\n.ds-color-picker__native-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n border: none;\n padding: 0;\n}\n","/* ============================================================================\n VOID BACKGROUND — LEVEL 0 ATMOSPHERIC SYSTEM\n ============================================================================ */\n\n.void {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 100vh;\n overflow: hidden;\n isolation: isolate;\n}\n\n/* ==========================================================================\n Layer 1: Base Color — Deep purple-black\n ========================================================================== */\n\n.void__base {\n position: absolute;\n inset: 0;\n background-color: var(--void-base);\n z-index: -4;\n}\n\n/* ==========================================================================\n Layer 2: Light Orbs — Brand colors as light sources\n ========================================================================== */\n\n.void__orbs {\n position: absolute;\n inset: 0;\n z-index: -3;\n pointer-events: none;\n}\n\n.void__orb {\n position: absolute;\n border-radius: 50%;\n mix-blend-mode: screen;\n filter: blur(140px);\n opacity: 0.6;\n}\n\n/* Warm Orb: Yellow → Pink gradient, positioned near primary content */\n.void__orb--warm {\n width: 800px;\n height: 800px;\n top: 10%;\n right: 10%;\n background: radial-gradient(\n circle at center,\n rgba(var(--void-orb-yellow-rgb), 0.4) 0%,\n rgba(var(--void-orb-pink-rgb), 0.3) 40%,\n transparent 70%\n );\n}\n\n/* Purple Orb: Deep purple for depth balance */\n.void__orb--purple {\n width: 600px;\n height: 600px;\n bottom: 10%;\n left: 10%;\n background: radial-gradient(\n circle at center,\n rgba(var(--void-orb-purple-rgb), 0.5) 0%,\n rgba(var(--void-orb-purple-rgb), 0.2) 50%,\n transparent 70%\n );\n}\n\n/* ==========================================================================\n Layer 3: Engineered Grid — 80×80px with radial fade\n ========================================================================== */\n\n.void__grid {\n position: absolute;\n inset: 0;\n z-index: -2;\n pointer-events: none;\n background-image:\n linear-gradient(to right, var(--void-grid-color) 1px, transparent 1px),\n linear-gradient(to bottom, var(--void-grid-color) 1px, transparent 1px);\n background-size: var(--void-grid-size) var(--void-grid-size);\n /* Grid fades toward edges — CRITICAL */\n mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);\n}\n\n/* ==========================================================================\n Layer 4: Film Grain — Static noise texture\n ========================================================================== */\n\n.void__grain {\n position: absolute;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n opacity: var(--void-grid-grain-opacity, 0.04);\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 200px 200px;\n}\n\n/* ==========================================================================\n Content Layer\n ========================================================================== */\n\n.void__content {\n position: relative;\n z-index: 1;\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n/* ==========================================================================\n Utility: Inline Void (for smaller containers)\n ========================================================================== */\n\n.void--inline {\n min-height: auto;\n}\n\n.void--inline .void__content {\n min-height: auto;\n}\n\n/* ==========================================================================\n Reduced Motion: Disable any future animations\n ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .void__orb {\n animation: none;\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,WAAS;AACT,OAAK;AACP;AAEA,CAAC,kBAAoB,CATpB;AAUD,CAAC,2BAA6B,CAV7B;AAWC,oBAAkB,IAAI;AACxB;AAEA,CAAC,iBAAmB,CAdnB;AAeD,CAAC,0BAA4B,CAf5B;AAgBC,cAAY,IAAI;AAChB,mBAAiB,IAAI;AACrB,2BAAyB,IAAI;AAC/B;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS,IAAI;AACb,UAAQ;AACR,cAAY;AACZ,SAAO,IAAI;AACX,eAAa;AACb,aAAW,IAAI,cAAc,EAAE;AAC/B,eAAa;AACb,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,MAAM,IAAI,kBAAkB,EAAE,iBAAiB,IAAI;AAC/D,eAAa;AACb,eAAa;AACf;AAEA,CAlBC,sBAkBsB;AACrB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACxB;AAEA,CAAC;AACC,oBAAkB,KAAK,IAAI,aAAa,EAAC;AACzC,cAAY;AACd;AAEA,CAAC,kBAAoB,CALpB,+BAKoD,CAAC;AACtD,CAAC,2BAA6B,CAN7B,+BAM6D,CADR;AAEtD,CAAC,iBAAmB,CAPnB,+BAOmD,CAFE;AAGtD,CAAC,0BAA4B,CAR5B,+BAQ4D,CAHP;AAIpD,SAAO,IAAI;AACb;AAEA,CAZC,+BAY+B,CAAC;AAC/B,SAAO,IAAI,IAAI;AACjB;AAEA,CAJiC;AAK/B,SAAO;AACP,UAAQ;AACR,SAAO;AACP,cAAY,MAAM,IAAI;AACxB;;;AC7DA,OAAO,CAAC,SAAS,EAAE;AACjB,GAAC;AACC,cAAU;AACV,YAAQ;AACR,UAAM;AACN,WAAO;AACP,eAAW;AACX,mBAAe,IAAI,gBAAgB,IAAI,gBAAgB,EAAE;AAGzD,aAAS,IAAI;AAGb,eAAW,kBAAkB,KAAK,aAAa,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE;AAG7D,gBAAY;AACZ,gBAAY;AAGZ,oBAAgB,IAAI,sBAAsB,EAAE;AAC9C;AAGA,GAvBC,mBAuBmB;AAClB,mBAAe,IAAI,gBAAgB,IAAI,gBAAgB,EAAE;AAC3D;AACF;AAEA,WAhBe;AAiBb;AACE,eAAW,WAAW;AACxB;AACA;AACE,eAAW,WAAW;AACxB;AACF;AAMA,CAzCG;AA0CD,YAAU;AACV,WAAS,IAAI;AACb,iBAAe,IAAI;AACnB,aAAW;AAGX,cAAY;AACZ,cAAY;AAGZ,cAAY,IAAI;AAChB,mBAAiB,IAAI;AACrB,2BAAyB,IAAI;AAC7B,cAAY,IAAI;AAClB;AAGA,CA3DG,mBA2DiB;AAClB,WAAS;AACT,YAAU;AACV,SAAO;AACP,iBAAe;AACf,WAAS,IAAI;AACb;AAAA,IAAY;AAAA,MAAgB,MAAM;AAAA,MAAE,IAAI,iBAAiB,EAAE;AAAA,MAAE,IAAI,oBAAoB;AACrF,QACE,gBAAgB,KAAK,EAAE,GAAG,WAAW,EACrC,gBAAgB,KAAK,EAAE;AACzB,kBAAgB;AAChB,gBACE,gBAAgB,KAAK,EAAE,GAAG,WAAW,EACrC,gBAAgB,KAAK,EAAE;AACzB,0BAAwB;AACxB,kBAAgB;AAClB;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,UAAQ,EAAE,EAAE,IAAI;AAClB;AAEA,CAAC;AACC,UAAQ;AACR,WAAS;AACT,UAAQ,EAAE,EAAE,IAAI;AAClB;AAEA,CANC,4BAM4B;AAC3B,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,kBAAgB;AAChB,kBAAgB,IAAI;AACpB,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAGA,CAAC;AACC,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEA,CALC,kCAKkC,CAAC;AAClC,QAAM;AACR;AAEA,CAJoC;AAKlC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI,WAAW,IAAI;AAC5B,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,WAAW,IAAI;AAG3B,cAAY;AACd;AAEA,CAjBoC,2BAiBR;AAC1B,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,KAAK,IAAI,aAAa,EAAE;AACtC;AAEA,CAJC,mCAImC;AAClC,cAAY,KAAK,IAAI,aAAa,EAAE;AACtC;AAGA,CAAC;AACC,kBAAgB;AAChB,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI;AACb,cAAY;AACd;AAEA,CARC,oCAQoC,CAAC;AACpC,SAAO;AACP,cAAY;AACd;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,cAAY,IAAI,IAAI;AACpB,eAAa;AACf;AAGA,CAxBC,oCAwBoC,CAXpC;AAYC,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;AAEA,CAvCC,oCAuCoC,CAjBpC;AAkBC,gBAAc,KAAK,IAAI,aAAa,EAAE;AACtC,cAAY,KAAK,IAAI,aAAa,EAAE;AACpC,cAAY,EAAE,EAAE,IAAI,KAAK,IAAI,aAAa,EAAE;AAC9C;AAEA,CA5BsC;AA6BpC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;AAMA,CAAC;AACC,cAAY,IAAI;AAChB,WAAS,IAAI;AACb,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,KAAK,IAAI,aAAa,EAAE;AAC5C;AAEA,CAAC;AACC,WAAS;AACT,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACX;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY;AACZ,YAAU;AACZ;AAGA,CAZC,gCAYgC;AAC/B,WAAS;AACX;AAEA,CAhBC,gCAgBgC;AAC/B,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAClB;AAEA,CAtBC,gCAsBgC;AAC/B,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAClB;AAEA,CA5BC,gCA4BgC;AAC/B,WAAS;AACT,cAAY,IAAI;AAChB,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACX,WAAS,IAAI,WAAW,IAAI;AAC5B,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAMA,CAAC;AACC,WAAS;AACT,SAAO;AACP,WAAS,IAAI,WAAW,IAAI;AAC5B,UAAQ;AACR,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,UAAQ;AACR,cAAY,IAAI,IAAI;AACtB;AAEA,CAfC,0BAe0B;AACzB,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CApBC,0BAoB0B;AACzB,cAAY,IAAI;AAChB,WAAS;AACX;AAMA,OAAO,CAAC,gBAAgB,EAAE;AACxB,GAlTC;AAmTC,YAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,GAzGD;AA0GG,YAAQ,IAAI,MAAM,IAAI;AACxB;AACF;;;AC9TA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS;AACT,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,UAAQ,IAAI,MAAM,IAAI;AACxB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACT,UAAQ;AACR,iBAAe,IAAI;AACnB,cAAY;AACZ,UAAQ;AACR,cAAY,WAAW,IAAI;AAC7B;AAEA,CAZC,uBAYuB;AACtB,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY,IAAI;AAChB,UAAQ,MAAM,MAAM,IAAI;AACxB,cAAY,WAAW,IAAI;AAC7B;AAEA,CAbC,gCAagC,CAThC;AAUC,cAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC5B;AAGA,CAAC;AACC,YAAU;AACZ;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,UAAQ;AACR,WAAS;AACX;;;ACrDA,CAAC;AACC,YAAU;AACV,WAAS;AACT,kBAAgB;AAChB,SAAO;AACP,cAAY;AACZ,YAAU;AACV,aAAW;AACb;AAMA,CAAC;AACC,YAAU;AACV,SAAO;AACP,oBAAkB,IAAI;AACtB,WAAS;AACX;AAMA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,YAAU;AACV,iBAAe;AACf,kBAAgB;AAChB,UAAQ,KAAK;AACb,WAAS;AACX;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,OAAK;AACL,SAAO;AACP;AAAA,IAAY;AAAA,MACV,OAAO,GAAG,MAAM;AAAA,MAChB,KAAK,IAAI,sBAAsB,EAAE,KAAK,EAAE;AAAA,MACxC,KAAK,IAAI,oBAAoB,EAAE,KAAK,GAAG;AAAA,MACvC,YAAY;AAEhB;AAGA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,UAAQ;AACR,QAAM;AACN;AAAA,IAAY;AAAA,MACV,OAAO,GAAG,MAAM;AAAA,MAChB,KAAK,IAAI,sBAAsB,EAAE,KAAK,EAAE;AAAA,MACxC,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG;AAAA,MACzC,YAAY;AAEhB;AAMA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB;AAAA,IACE;AAAA,MAAgB,GAAG,KAAK;AAAA,MAAE,IAAI,mBAAmB,GAAG;AAAA,MAAE,YAAY,IAAI;AAAA,IACtE;AAAA,MAAgB,GAAG,MAAM;AAAA,MAAE,IAAI,mBAAmB,GAAG;AAAA,MAAE,YAAY;AACrE,mBAAiB,IAAI,kBAAkB,IAAI;AAE3C;AAAA,IAAY;AAAA,MAAgB,QAAQ,IAAI,IAAI,GAAG,IAAI,GAAG;AAAA,MAAE,MAAM,EAAE;AAAA,MAAE,YAAY;AAC9E;AAAA,IAAoB;AAAA,MAAgB,QAAQ,IAAI,IAAI,GAAG,IAAI,GAAG;AAAA,MAAE,MAAM,EAAE;AAAA,MAAE,YAAY;AACxF;AAMA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI,yBAAyB,EAAE;AACxC,oBAAkB;AAClB,qBAAmB;AACnB,mBAAiB,MAAM;AACzB;AAMA,CAAC;AACC,YAAU;AACV,WAAS;AACT,QAAM;AACN,WAAS;AACT,kBAAgB;AAClB;AAMA,CAAC;AACC,cAAY;AACd;AAEA,CAJC,aAIa,CAhBb;AAiBC,cAAY;AACd;AAMA,OAAO,CAAC,sBAAsB,EAAE;AAC9B,GAlGD;AAmGG,eAAW;AACb;AACF;","names":[]}
@@ -37,6 +37,14 @@ interface ColorPickerProps {
37
37
  className?: string;
38
38
  /** Inline styles. */
39
39
  style?: React__default.CSSProperties;
40
+ /**
41
+ * Hide the custom color swatch and native color input.
42
+ * When `true`, only the curated brand presets are shown.
43
+ * Use this on production surfaces (e.g., marketing website footer)
44
+ * where arbitrary custom colors would undermine brand consistency.
45
+ * @default false
46
+ */
47
+ hideCustom?: boolean;
40
48
  }
41
49
  /**
42
50
  * Compact brand/accent color picker.
@@ -37,6 +37,14 @@ interface ColorPickerProps {
37
37
  className?: string;
38
38
  /** Inline styles. */
39
39
  style?: React__default.CSSProperties;
40
+ /**
41
+ * Hide the custom color swatch and native color input.
42
+ * When `true`, only the curated brand presets are shown.
43
+ * Use this on production surfaces (e.g., marketing website footer)
44
+ * where arbitrary custom colors would undermine brand consistency.
45
+ * @default false
46
+ */
47
+ hideCustom?: boolean;
40
48
  }
41
49
  /**
42
50
  * Compact brand/accent color picker.
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- export { ColorPicker, ThemeSelector, VoidBackground } from '../chunk-EFRAP5ES.js';
2
+ export { ColorPicker, ThemeSelector, VoidBackground } from '../chunk-UQ4SHBMC.js';
3
3
  export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from '../chunk-JPJN4YBC.js';
4
4
  //# sourceMappingURL=out.js.map
5
5
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesmind-ai/design-system",
3
- "version": "0.3.7",
3
+ "version": "0.3.8",
4
4
  "packageManager": "pnpm@9.15.9",
5
5
  "description": "Salesmind AI Design System",
6
6
  "license": "MIT",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/VoidBackground/VoidBackground.tsx","../src/components/ThemeSelector/ThemeSelector.tsx","../src/components/ColorPicker/ColorPicker.tsx"],"names":["clsx","jsx","jsxs","React"],"mappings":"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","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport './VoidBackground.css';\n\nexport interface VoidBackgroundProps {\n /** Show the engineered grid overlay */\n showGrid?: boolean;\n /** Show the film grain texture */\n showGrain?: boolean;\n /** Custom class name */\n className?: string;\n /** Child content rendered above the void */\n children?: React.ReactNode;\n}\n\n/**\n * VoidBackground — The Void Signature Design System Level 0 Environment\n *\n * A four-layer atmospheric background system:\n * 1. Base Color — Deep purple-black (#08040a)\n * 2. Light Orbs — Radial gradients with mix-blend-mode: screen\n * 3. Engineered Grid — 80×80px with radial fade mask\n * 4. Film Grain — Static SVG noise for texture\n *\n * The Void is not decoration — it is the lighting engine for the UI.\n */\nexport const VoidBackground = React.forwardRef<HTMLDivElement, VoidBackgroundProps>(\n ({ showGrid = true, showGrain = true, className, children }, ref) => {\n return (\n <div ref={ref} className={clsx('void', className)}>\n {/* Layer 1: Base Color */}\n <div className=\"void__base\" aria-hidden=\"true\" />\n\n {/* Layer 2: Light Orbs (Infusion Engine) */}\n <div className=\"void__orbs\" aria-hidden=\"true\">\n <div className=\"void__orb void__orb--warm\" />\n <div className=\"void__orb void__orb--purple\" />\n </div>\n\n {/* Layer 3: Engineered Grid */}\n {showGrid && <div className=\"void__grid\" aria-hidden=\"true\" />}\n\n {/* Layer 4: Film Grain */}\n {showGrain && <div className=\"void__grain\" aria-hidden=\"true\" />}\n\n {/* Content Layer */}\n {children && <div className=\"void__content\">{children}</div>}\n </div>\n );\n },\n);\n\nVoidBackground.displayName = 'VoidBackground';\n","import React from 'react';\nimport { Sun, Moon } from 'lucide-react';\nimport clsx from 'clsx';\nimport { useAppearance, Theme } from '../../theme/AppearanceProvider';\nimport './ThemeSelector.css';\n\nexport interface ThemeSelectorProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({ className, style }) => {\n const { theme, setTheme } = useAppearance();\n\n const handleThemeChange = (newTheme: Theme) => {\n setTheme(newTheme);\n };\n\n return (\n <div className={clsx('ds-theme-selector', className)} style={style} role=\"group\" aria-label=\"Theme Selector\">\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light' })}\n onClick={() => handleThemeChange('light')}\n aria-pressed={theme === 'light'}\n >\n <Sun className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Light</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light-contrast' })}\n onClick={() => handleThemeChange('light-contrast')}\n aria-pressed={theme === 'light-contrast'}\n >\n <Sun className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Light HC</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark' })}\n onClick={() => handleThemeChange('dark')}\n aria-pressed={theme === 'dark'}\n >\n <Moon className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Dark</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark-contrast' })}\n onClick={() => handleThemeChange('dark-contrast')}\n aria-pressed={theme === 'dark-contrast'}\n >\n <Moon className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Dark HC</span>\n </button>\n </div>\n );\n};\n\nThemeSelector.displayName = 'ThemeSelector';\n","import React from 'react';\nimport clsx from 'clsx';\nimport { useAppearance, Brand } from '../../theme/AppearanceProvider';\nimport './ColorPicker.css';\n\n/** Pre-configured brand presets shown as swatches. */\nconst BRAND_PRESETS: { value: Brand; label: string; color: string }[] = [\n { value: 'default', label: 'Warm Intelligence', color: '#f97316' },\n { value: 'salesmind', label: 'SalesMind', color: '#ff005a' },\n];\n\nexport interface ColorPickerProps {\n /** Additional CSS class name. */\n className?: string;\n /** Inline styles. */\n style?: React.CSSProperties;\n}\n\n/**\n * Compact brand/accent color picker.\n * Renders preset brand swatches and an optional custom color input.\n * Consumes the `useAppearance()` context for state.\n */\nexport const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n ({ className, style }, ref) => {\n const { brand, setBrand, customColor, setCustomColor } = useAppearance();\n\n return (\n <div\n ref={ref}\n className={clsx('ds-color-picker', className)}\n style={style}\n role=\"group\"\n aria-label=\"Brand Color\"\n >\n {BRAND_PRESETS.map(({ value, label, color }) => (\n <button\n key={value}\n type=\"button\"\n className={clsx('ds-color-picker__swatch', {\n 'ds-color-picker__swatch--active': brand === value,\n })}\n onClick={() => setBrand(value)}\n aria-label={`Switch to ${label} color scheme`}\n aria-pressed={brand === value}\n title={label}\n >\n <span\n className=\"ds-color-picker__dot\"\n style={{ '--swatch-color': color } as React.CSSProperties}\n />\n </button>\n ))}\n\n {/* Custom color — clicking the dot opens the native color picker */}\n <label\n className={clsx('ds-color-picker__swatch', 'ds-color-picker__swatch--custom', {\n 'ds-color-picker__swatch--active': brand === 'custom',\n })}\n title={`Custom: ${customColor}`}\n >\n <span\n className=\"ds-color-picker__dot\"\n style={{ '--swatch-color': customColor } as React.CSSProperties}\n />\n <input\n type=\"color\"\n value={customColor}\n onChange={(e) => setCustomColor(e.target.value)}\n className=\"ds-color-picker__native-input\"\n aria-label=\"Pick a custom accent color\"\n />\n </label>\n </div>\n );\n },\n);\n\nColorPicker.displayName = 'ColorPicker';\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/VoidBackground/VoidBackground.tsx","../src/components/ThemeSelector/ThemeSelector.tsx","../src/components/ColorPicker/ColorPicker.tsx"],"names":["clsx","jsx","jsxs","React"],"mappings":"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","sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport './VoidBackground.css';\n\nexport interface VoidBackgroundProps {\n /** Show the engineered grid overlay */\n showGrid?: boolean;\n /** Show the film grain texture */\n showGrain?: boolean;\n /** Custom class name */\n className?: string;\n /** Child content rendered above the void */\n children?: React.ReactNode;\n}\n\n/**\n * VoidBackground — The Void Signature Design System Level 0 Environment\n *\n * A four-layer atmospheric background system:\n * 1. Base Color — Deep purple-black (#08040a)\n * 2. Light Orbs — Radial gradients with mix-blend-mode: screen\n * 3. Engineered Grid — 80×80px with radial fade mask\n * 4. Film Grain — Static SVG noise for texture\n *\n * The Void is not decoration — it is the lighting engine for the UI.\n */\nexport const VoidBackground = React.forwardRef<HTMLDivElement, VoidBackgroundProps>(\n ({ showGrid = true, showGrain = true, className, children }, ref) => {\n return (\n <div ref={ref} className={clsx('void', className)}>\n {/* Layer 1: Base Color */}\n <div className=\"void__base\" aria-hidden=\"true\" />\n\n {/* Layer 2: Light Orbs (Infusion Engine) */}\n <div className=\"void__orbs\" aria-hidden=\"true\">\n <div className=\"void__orb void__orb--warm\" />\n <div className=\"void__orb void__orb--purple\" />\n </div>\n\n {/* Layer 3: Engineered Grid */}\n {showGrid && <div className=\"void__grid\" aria-hidden=\"true\" />}\n\n {/* Layer 4: Film Grain */}\n {showGrain && <div className=\"void__grain\" aria-hidden=\"true\" />}\n\n {/* Content Layer */}\n {children && <div className=\"void__content\">{children}</div>}\n </div>\n );\n },\n);\n\nVoidBackground.displayName = 'VoidBackground';\n","import React from 'react';\nimport { Sun, Moon } from 'lucide-react';\nimport clsx from 'clsx';\nimport { useAppearance, Theme } from '../../theme/AppearanceProvider';\nimport './ThemeSelector.css';\n\nexport interface ThemeSelectorProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({ className, style }) => {\n const { theme, setTheme } = useAppearance();\n\n const handleThemeChange = (newTheme: Theme) => {\n setTheme(newTheme);\n };\n\n return (\n <div className={clsx('ds-theme-selector', className)} style={style} role=\"group\" aria-label=\"Theme Selector\">\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light' })}\n onClick={() => handleThemeChange('light')}\n aria-pressed={theme === 'light'}\n >\n <Sun className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Light</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'light-contrast' })}\n onClick={() => handleThemeChange('light-contrast')}\n aria-pressed={theme === 'light-contrast'}\n >\n <Sun className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Light HC</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark' })}\n onClick={() => handleThemeChange('dark')}\n aria-pressed={theme === 'dark'}\n >\n <Moon className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Dark</span>\n </button>\n\n <button\n type=\"button\"\n className={clsx('ds-theme-selector__btn', { 'ds-theme-selector__btn--active': theme === 'dark-contrast' })}\n onClick={() => handleThemeChange('dark-contrast')}\n aria-pressed={theme === 'dark-contrast'}\n >\n <Moon className=\"ds-theme-selector__icon\" />\n <span className=\"ds-theme-selector__label\">Dark HC</span>\n </button>\n </div>\n );\n};\n\nThemeSelector.displayName = 'ThemeSelector';\n","import React from 'react';\nimport clsx from 'clsx';\nimport { useAppearance, Brand } from '../../theme/AppearanceProvider';\nimport './ColorPicker.css';\n\n/** Pre-configured brand presets shown as swatches. */\nconst BRAND_PRESETS: { value: Brand; label: string; color: string }[] = [\n { value: 'default', label: 'Warm Intelligence', color: '#f97316' },\n { value: 'salesmind', label: 'SalesMind', color: '#ff005a' },\n];\n\nexport interface ColorPickerProps {\n /** Additional CSS class name. */\n className?: string;\n /** Inline styles. */\n style?: React.CSSProperties;\n}\n\n/**\n * Compact brand/accent color picker.\n * Renders preset brand swatches and an optional custom color input.\n * Consumes the `useAppearance()` context for state.\n */\nexport const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n ({ className, style }, ref) => {\n const { brand, setBrand, customColor, setCustomColor } = useAppearance();\n\n return (\n <div\n ref={ref}\n className={clsx('ds-color-picker', className)}\n style={style}\n role=\"group\"\n aria-label=\"Brand Color\"\n >\n {BRAND_PRESETS.map(({ value, label, color }) => (\n <button\n key={value}\n type=\"button\"\n className={clsx('ds-color-picker__swatch', {\n 'ds-color-picker__swatch--active': brand === value,\n })}\n onClick={() => setBrand(value)}\n aria-label={`Switch to ${label} color scheme`}\n aria-pressed={brand === value}\n title={label}\n >\n <span\n className=\"ds-color-picker__dot\"\n style={{ '--swatch-color': color } as React.CSSProperties}\n />\n </button>\n ))}\n\n {/* Custom color — clicking the dot opens the native color picker */}\n <label\n className={clsx('ds-color-picker__swatch', 'ds-color-picker__swatch--custom', {\n 'ds-color-picker__swatch--active': brand === 'custom',\n })}\n title={`Custom: ${customColor}`}\n >\n <span\n className=\"ds-color-picker__dot\"\n style={{ '--swatch-color': customColor } as React.CSSProperties}\n />\n <input\n type=\"color\"\n value={customColor}\n onChange={(e) => setCustomColor(e.target.value)}\n className=\"ds-color-picker__native-input\"\n aria-label=\"Pick a custom accent color\"\n />\n </label>\n </div>\n );\n },\n);\n\nColorPicker.displayName = 'ColorPicker';\n"]}