snice 1.14.3 → 2.1.0

package/components/tabs/snice-tabs.ts

@@ -0,0 +1,332 @@
+import { element, property, query, queryAll, on, watch, ready, dispatch } from 'snice';
+import css from './snice-tabs.css?inline';
+import type { TabsPlacement, SniceTabElement, SniceTabPanelElement, TabChangeDetail, TabSelectDetail } from './snice-tabs.types';
+import { transitions } from '../transitions';
+
+@element('snice-tabs')
+export class SniceTabs extends HTMLElement {
+  @property({ reflect: true })
+  placement: TabsPlacement = 'top';
+
+  @property({ reflect: true })
+  selected = 0;
+
+  @property({ type: Boolean, reflect: true })
+  noScrollControls = false;
+
+  @property({ reflect: true })
+  transition = 'none';
+
+
+
+  @query('.tabs__nav')
+  nav?: HTMLElement;
+
+  @query('.tabs__nav-track')
+  navTrack?: HTMLElement;
+
+  @query('.tabs__indicator')
+  indicator?: HTMLElement;
+
+  @query('.tabs__scroll-button--start')
+  scrollButtonStart?: HTMLButtonElement;
+
+  @query('.tabs__scroll-button--end')
+  scrollButtonEnd?: HTMLButtonElement;
+  
+  @query('.tabs')
+  tabsContainer?: HTMLElement;
+  
+  @queryAll('snice-tab[slot="nav"]', { light: true, shadow: false })
+  tabs?: NodeListOf<SniceTabElement>;
+  
+  @queryAll('snice-tab-panel', { light: true, shadow: false })
+  panels?: NodeListOf<SniceTabPanelElement>;
+  
+  @query('.tabs__panels')
+  panelsContainer?: HTMLElement;
+
+
+  html() {
+    return /*html*/`
+      <div class="tabs tabs--${this.placement}" part="base">
+        <div class="tabs__nav-container" part="nav-container">
+          ${!this.noScrollControls ? /*html*/`
+            <button class="tabs__scroll-button tabs__scroll-button--start" part="scroll-button scroll-button-start" tabindex="-1" aria-label="Scroll left">
+              <svg viewBox="0 0 24 24" width="16" height="16">
+                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
+              </svg>
+            </button>
+          ` : ''}
+          
+          <div class="tabs__nav" part="nav" role="tablist">
+            <div class="tabs__nav-track">
+              <slot name="nav"></slot>
+              <div class="tabs__indicator" part="indicator"></div>
+            </div>
+          </div>
+          
+          ${!this.noScrollControls ? /*html*/`
+            <button class="tabs__scroll-button tabs__scroll-button--end" part="scroll-button scroll-button-end" tabindex="-1" aria-label="Scroll right">
+              <svg viewBox="0 0 24 24" width="16" height="16">
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"/>
+              </svg>
+            </button>
+          ` : ''}
+        </div>
+        
+        <div class="tabs__panels" part="panels">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+
+  @ready()
+  init() {
+    this.setupTabs();
+    this.updateScrollButtons();
+    
+    // Update scroll buttons on resize
+    const resizeObserver = new ResizeObserver(() => {
+      this.updateScrollButtons();
+      this.updateIndicator();
+    });
+    
+    if (this.nav) {
+      resizeObserver.observe(this.nav);
+    }
+  }
+
+  @watch('selected')
+  handleSelectedChange() {
+    this.updateSelection();
+    this.updateIndicator();
+  }
+
+  @watch('placement')
+  handlePlacementChange() {
+    if (!this.tabsContainer) return;
+    
+    // Remove all placement classes
+    this.tabsContainer.classList.remove('tabs--top', 'tabs--bottom', 'tabs--start', 'tabs--end');
+    // Add the new placement class
+    this.tabsContainer.classList.add(`tabs--${this.placement}`);
+    // Update indicator position
+    this.updateIndicator();
+    // Update scroll buttons visibility
+    this.updateScrollButtons();
+  }
+
+  @on('click', '.tabs__scroll-button--start')
+  scrollStart() {
+    if (!this.nav) return;
+    
+    const isHorizontal = this.placement === 'top' || this.placement === 'bottom';
+    if (isHorizontal) {
+      this.nav.scrollBy({ left: -200, behavior: 'smooth' });
+    } else {
+      this.nav.scrollBy({ top: -200, behavior: 'smooth' });
+    }
+  }
+
+  @on('click', '.tabs__scroll-button--end')
+  scrollEnd() {
+    if (!this.nav) return;
+    
+    const isHorizontal = this.placement === 'top' || this.placement === 'bottom';
+    if (isHorizontal) {
+      this.nav.scrollBy({ left: 200, behavior: 'smooth' });
+    } else {
+      this.nav.scrollBy({ top: 200, behavior: 'smooth' });
+    }
+  }
+
+  @on('scroll', '.tabs__nav')
+  handleScroll() {
+    this.updateScrollButtons();
+    this.updateIndicator();
+  }
+
+  @on('@snice/tab-select')
+  handleTabSelect(event: CustomEvent<TabSelectDetail>) {
+    if (!this.tabs) return;
+    const tab = event.detail.tab;
+    const index = Array.from(this.tabs).indexOf(tab);
+    if (index >= 0) {
+      this.selectTab(index);
+    }
+  }
+
+  setupTabs() {
+    this.updateSelection();
+    // Delay indicator update to ensure DOM is ready
+    requestAnimationFrame(() => {
+      this.updateIndicator();
+    });
+  }
+
+  @dispatch('@snice/tab-change', { bubbles: true, composed: true })
+  selectTab(index: number): TabChangeDetail | undefined {
+    if (!this.tabs || !this.panels || index < 0 || index >= this.tabs.length) return;
+    
+    const oldIndex = this.selected;
+    this.selected = index;
+    
+    return { 
+      index,
+      oldIndex,
+      tab: this.tabs[index],
+      panel: this.panels[index]
+    };
+  }
+
+  private previousSelected = -1;
+
+  updateSelection() {
+    if (!this.tabs || !this.panels) return;
+    
+    this.tabs.forEach((tab, index) => {
+      const isSelected = index === this.selected;
+      tab.setAttribute('aria-selected', String(isSelected));
+      tab.setAttribute('tabindex', isSelected ? '0' : '-1');
+      tab.classList.toggle('snice-tab--active', isSelected);
+    });
+
+    // Handle panel transitions
+    const oldPanel = this.previousSelected >= 0 ? this.panels[this.previousSelected] : null;
+    const newPanel = this.panels[this.selected];
+    
+    if (this.transition && this.transition !== 'none' && oldPanel && newPanel && oldPanel !== newPanel) {
+      // Get transition config and set CSS variables for timing
+      const transitionConfig = transitions[this.transition];
+      const outDuration = transitionConfig?.outDuration || 300;
+      const inDuration = transitionConfig?.inDuration || 300;
+      const maxDuration = Math.max(outDuration, inDuration);
+      
+      // Update CSS custom property for transition duration
+      this.style.setProperty('--snice-tabs-transition-duration', `${maxDuration}ms`);
+      
+      // Lock container height BEFORE any changes to prevent ANY reflow
+      if (this.panelsContainer) {
+        const currentHeight = this.panelsContainer.offsetHeight;
+        this.panelsContainer.style.height = `${currentHeight}px`;
+        this.panelsContainer.style.overflow = 'hidden';
+      }
+      
+      // Now show new panel to measure it
+      newPanel.hidden = false;
+      newPanel.setAttribute('transition-in', this.transition);
+      oldPanel.setAttribute('transition-out', this.transition);
+      
+      // Pass timing info to panels via properties
+      (newPanel as any).transitionDuration = inDuration;
+      (oldPanel as any).transitionDuration = outDuration;
+      
+      // Hide old panel well before transition completes to avoid flicker
+      setTimeout(() => {
+        oldPanel.hidden = true;
+        oldPanel.removeAttribute('transition-out');
+      }, outDuration - 50); // Hide 50ms early to prevent flicker
+      
+      // Clean up new panel transition attribute and unlock height
+      setTimeout(() => {
+        newPanel.removeAttribute('transition-in');
+        if (this.panelsContainer) {
+          // Reset to auto height without animation to prevent bounce
+          this.panelsContainer.style.height = '';
+          this.panelsContainer.style.overflow = '';
+        }
+      }, maxDuration);
+    } else {
+      // No transition - immediate switch
+      this.panels.forEach((panel, index) => {
+        const isSelected = index === this.selected;
+        panel.setAttribute('aria-hidden', String(!isSelected));
+        panel.hidden = !isSelected;
+      });
+    }
+    
+    // Update aria attributes
+    this.panels.forEach((panel, index) => {
+      panel.setAttribute('aria-hidden', String(index !== this.selected));
+    });
+    
+    this.previousSelected = this.selected;
+  }
+
+  updateIndicator() {
+    if (!this.indicator || !this.tabs || !this.tabs.length || !this.navTrack) return;
+
+    const activeTab = this.tabs[this.selected];
+    if (!activeTab) return;
+
+    const isHorizontal = this.placement === 'top' || this.placement === 'bottom';
+    
+    // Get the position of the active tab relative to the nav track container
+    // We need to calculate this manually since tabs are in light DOM and indicator is in shadow DOM
+    let offset = 0;
+    
+    // Sum up the widths/heights of all tabs before the active one
+    for (let i = 0; i < this.selected; i++) {
+      if (isHorizontal) {
+        offset += this.tabs[i].offsetWidth;
+      } else {
+        offset += this.tabs[i].offsetHeight;
+      }
+    }
+    
+    if (isHorizontal) {
+      this.indicator.style.width = `${activeTab.offsetWidth}px`;
+      this.indicator.style.height = '2px';
+      this.indicator.style.transform = `translateX(${offset}px)`;
+    } else {
+      this.indicator.style.width = '2px';
+      this.indicator.style.height = `${activeTab.offsetHeight}px`;
+      this.indicator.style.transform = `translateY(${offset}px)`;
+    }
+  }
+
+  updateScrollButtons() {
+    if (!this.nav || this.noScrollControls) return;
+
+    const isHorizontal = this.placement === 'top' || this.placement === 'bottom';
+    
+    const hasOverflow = isHorizontal 
+      ? this.nav.scrollWidth > this.nav.clientWidth
+      : this.nav.scrollHeight > this.nav.clientHeight;
+      
+    const canScrollStart = isHorizontal
+      ? this.nav.scrollLeft > 0
+      : this.nav.scrollTop > 0;
+      
+    const canScrollEnd = isHorizontal
+      ? this.nav.scrollLeft < this.nav.scrollWidth - this.nav.clientWidth
+      : this.nav.scrollTop < this.nav.scrollHeight - this.nav.clientHeight;
+
+    // Show/hide buttons based on overflow
+    this.scrollButtonStart?.classList.toggle('tabs__scroll-button--visible', hasOverflow);
+    this.scrollButtonEnd?.classList.toggle('tabs__scroll-button--visible', hasOverflow);
+    
+    // Disable buttons when can't scroll in that direction
+    this.scrollButtonStart?.classList.toggle('tabs__scroll-button--disabled', !canScrollStart);
+    this.scrollButtonEnd?.classList.toggle('tabs__scroll-button--disabled', !canScrollEnd);
+  }
+
+
+  show(index: number) {
+    this.selectTab(index);
+  }
+
+  getTab(index: number): SniceTabElement | undefined {
+    return this.tabs?.[index];
+  }
+
+  getPanel(index: number): SniceTabPanelElement | undefined {
+    return this.panels?.[index];
+  }
+}

package/components/tabs/snice-tabs.types.ts

@@ -0,0 +1,28 @@
+export type TabsPlacement = 'top' | 'bottom' | 'start' | 'end';
+
+export interface SniceTabElement extends HTMLElement {
+  disabled: boolean;
+  closable: boolean;
+  focus(options?: FocusOptions): void;
+  blur(): void;
+}
+
+export interface SniceTabPanelElement extends HTMLElement {
+  name: string;
+  hidden: boolean;
+}
+
+export interface TabChangeDetail {
+  index: number;
+  oldIndex: number;
+  tab: SniceTabElement;
+  panel: SniceTabPanelElement;
+}
+
+export interface TabSelectDetail {
+  tab: SniceTabElement;
+}
+
+export interface TabCloseDetail {
+  tab: SniceTabElement;
+}

package/components/theme/theme.css

@@ -0,0 +1,234 @@
+:root {
+  /* Color primitives */
+  --snice-color-gray-50: 250 250 250;
+  --snice-color-gray-100: 241 241 241;
+  --snice-color-gray-200: 226 226 226;
+  --snice-color-gray-300: 204 204 204;
+  --snice-color-gray-400: 163 163 163;
+  --snice-color-gray-500: 115 115 115;
+  --snice-color-gray-600: 82 82 82;
+  --snice-color-gray-700: 64 64 64;
+  --snice-color-gray-800: 38 38 38;
+  --snice-color-gray-900: 23 23 23;
+  --snice-color-gray-950: 10 10 10;
+
+  --snice-color-blue-50: 239 246 255;
+  --snice-color-blue-100: 219 234 254;
+  --snice-color-blue-200: 191 219 254;
+  --snice-color-blue-300: 147 197 253;
+  --snice-color-blue-400: 96 165 250;
+  --snice-color-blue-500: 59 130 246;
+  --snice-color-blue-600: 37 99 235;
+  --snice-color-blue-700: 29 78 216;
+  --snice-color-blue-800: 30 64 175;
+  --snice-color-blue-900: 30 58 138;
+  --snice-color-blue-950: 23 37 84;
+
+  --snice-color-green-50: 240 253 244;
+  --snice-color-green-100: 220 252 231;
+  --snice-color-green-200: 187 247 208;
+  --snice-color-green-300: 134 239 172;
+  --snice-color-green-400: 74 222 128;
+  --snice-color-green-500: 34 197 94;
+  --snice-color-green-600: 22 163 74;
+  --snice-color-green-700: 21 128 61;
+  --snice-color-green-800: 22 101 52;
+  --snice-color-green-900: 20 83 45;
+  --snice-color-green-950: 5 46 22;
+
+  --snice-color-red-50: 254 242 242;
+  --snice-color-red-100: 254 226 226;
+  --snice-color-red-200: 254 202 202;
+  --snice-color-red-300: 252 165 165;
+  --snice-color-red-400: 248 113 113;
+  --snice-color-red-500: 239 68 68;
+  --snice-color-red-600: 220 38 38;
+  --snice-color-red-700: 185 28 28;
+  --snice-color-red-800: 153 27 27;
+  --snice-color-red-900: 127 29 29;
+  --snice-color-red-950: 69 10 10;
+
+  --snice-color-yellow-50: 254 252 232;
+  --snice-color-yellow-100: 254 249 195;
+  --snice-color-yellow-200: 254 240 138;
+  --snice-color-yellow-300: 253 224 71;
+  --snice-color-yellow-400: 250 204 21;
+  --snice-color-yellow-500: 234 179 8;
+  --snice-color-yellow-600: 202 138 4;
+  --snice-color-yellow-700: 161 98 7;
+  --snice-color-yellow-800: 133 77 14;
+  --snice-color-yellow-900: 113 63 18;
+  --snice-color-yellow-950: 66 32 6;
+
+  /* Light theme (default) */
+  --snice-color-primary: rgb(var(--snice-color-blue-600));
+  --snice-color-success: rgb(var(--snice-color-green-600));
+  --snice-color-warning: rgb(var(--snice-color-yellow-600));
+  --snice-color-danger: rgb(var(--snice-color-red-600));
+  --snice-color-neutral: rgb(var(--snice-color-gray-600));
+
+  --snice-color-primary-hover: rgb(var(--snice-color-blue-700));
+  --snice-color-success-hover: rgb(var(--snice-color-green-700));
+  --snice-color-warning-hover: rgb(var(--snice-color-yellow-700));
+  --snice-color-danger-hover: rgb(var(--snice-color-red-700));
+  --snice-color-neutral-hover: rgb(var(--snice-color-gray-700));
+
+  /* Semantic colors */
+  --snice-color-text: rgb(var(--snice-color-gray-900));
+  --snice-color-text-secondary: rgb(var(--snice-color-gray-600));
+  --snice-color-text-tertiary: rgb(var(--snice-color-gray-500));
+  --snice-color-text-inverse: rgb(var(--snice-color-gray-50));
+
+  --snice-color-background: rgb(255 255 255);
+  --snice-color-background-secondary: rgb(var(--snice-color-gray-50));
+  --snice-color-background-tertiary: rgb(var(--snice-color-gray-100));
+  --snice-color-background-element: rgb(252 251 249);
+
+  --snice-color-border: rgb(var(--snice-color-gray-200));
+  --snice-color-border-hover: rgb(var(--snice-color-gray-300));
+  --snice-color-border-focus: rgb(var(--snice-color-blue-500));
+
+  /* Spacing */
+  --snice-spacing-3xs: 0.125rem;  /* 2px */
+  --snice-spacing-2xs: 0.25rem;   /* 4px */
+  --snice-spacing-xs: 0.5rem;     /* 8px */
+  --snice-spacing-sm: 0.75rem;    /* 12px */
+  --snice-spacing-md: 1rem;       /* 16px */
+  --snice-spacing-lg: 1.5rem;     /* 24px */
+  --snice-spacing-xl: 2rem;       /* 32px */
+  --snice-spacing-2xl: 3rem;      /* 48px */
+  --snice-spacing-3xl: 4rem;      /* 64px */
+
+  /* Typography */
+  --snice-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --snice-font-family-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+
+  --snice-font-size-2xs: 0.625rem;   /* 10px */
+  --snice-font-size-xs: 0.75rem;     /* 12px */
+  --snice-font-size-sm: 0.875rem;    /* 14px */
+  --snice-font-size-md: 1rem;        /* 16px */
+  --snice-font-size-lg: 1.125rem;    /* 18px */
+  --snice-font-size-xl: 1.25rem;     /* 20px */
+  --snice-font-size-2xl: 1.5rem;     /* 24px */
+  --snice-font-size-3xl: 1.875rem;   /* 30px */
+  --snice-font-size-4xl: 2.25rem;    /* 36px */
+
+  --snice-font-weight-light: 300;
+  --snice-font-weight-normal: 400;
+  --snice-font-weight-medium: 500;
+  --snice-font-weight-semibold: 600;
+  --snice-font-weight-bold: 700;
+
+  --snice-line-height-dense: 1.25;
+  --snice-line-height-normal: 1.5;
+  --snice-line-height-loose: 1.75;
+
+  /* Border radius */
+  --snice-border-radius-sm: 0.125rem;  /* 2px */
+  --snice-border-radius-md: 0.25rem;   /* 4px */
+  --snice-border-radius-lg: 0.5rem;    /* 8px */
+  --snice-border-radius-xl: 1rem;      /* 16px */
+  --snice-border-radius-circle: 50%;
+  --snice-border-radius-pill: 9999px;
+
+  /* Shadows */
+  --snice-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --snice-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --snice-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --snice-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --snice-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --snice-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Transitions */
+  --snice-transition-fast: 150ms;
+  --snice-transition-medium: 250ms;
+  --snice-transition-slow: 350ms;
+
+  /* Z-index */
+  --snice-z-index-dropdown: 1000;
+  --snice-z-index-sticky: 1020;
+  --snice-z-index-fixed: 1030;
+  --snice-z-index-modal-backdrop: 1040;
+  --snice-z-index-modal: 1050;
+  --snice-z-index-popover: 1060;
+  --snice-z-index-tooltip: 1070;
+
+  /* Focus */
+  --snice-focus-ring-width: 2px;
+  --snice-focus-ring-color: rgb(var(--snice-color-blue-500) / 0.5);
+  --snice-focus-ring-offset: 2px;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --snice-color-primary: rgb(var(--snice-color-blue-500));
+  --snice-color-success: rgb(var(--snice-color-green-500));
+  --snice-color-warning: rgb(var(--snice-color-yellow-500));
+  --snice-color-danger: rgb(var(--snice-color-red-500));
+  --snice-color-neutral: rgb(var(--snice-color-gray-400));
+
+  --snice-color-primary-hover: rgb(var(--snice-color-blue-400));
+  --snice-color-success-hover: rgb(var(--snice-color-green-400));
+  --snice-color-warning-hover: rgb(var(--snice-color-yellow-400));
+  --snice-color-danger-hover: rgb(var(--snice-color-red-400));
+  --snice-color-neutral-hover: rgb(var(--snice-color-gray-300));
+
+  --snice-color-text: rgb(var(--snice-color-gray-50));
+  --snice-color-text-secondary: rgb(var(--snice-color-gray-300));
+  --snice-color-text-tertiary: rgb(var(--snice-color-gray-400));
+  --snice-color-text-inverse: rgb(var(--snice-color-gray-900));
+
+  --snice-color-background: rgb(var(--snice-color-gray-900));
+  --snice-color-background-secondary: rgb(var(--snice-color-gray-800));
+  --snice-color-background-tertiary: rgb(var(--snice-color-gray-700));
+  --snice-color-background-element: rgb(47 45 43);
+
+  --snice-color-border: rgb(var(--snice-color-gray-700));
+  --snice-color-border-hover: rgb(var(--snice-color-gray-600));
+  --snice-color-border-focus: rgb(var(--snice-color-blue-400));
+
+  --snice-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+  --snice-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+  --snice-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+  --snice-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+  --snice-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+  --snice-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.35);
+}
+
+/* Auto dark theme based on system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --snice-color-primary: rgb(var(--snice-color-blue-500));
+    --snice-color-success: rgb(var(--snice-color-green-500));
+    --snice-color-warning: rgb(var(--snice-color-yellow-500));
+    --snice-color-danger: rgb(var(--snice-color-red-500));
+    --snice-color-neutral: rgb(var(--snice-color-gray-400));
+
+    --snice-color-primary-hover: rgb(var(--snice-color-blue-400));
+    --snice-color-success-hover: rgb(var(--snice-color-green-400));
+    --snice-color-warning-hover: rgb(var(--snice-color-yellow-400));
+    --snice-color-danger-hover: rgb(var(--snice-color-red-400));
+    --snice-color-neutral-hover: rgb(var(--snice-color-gray-300));
+
+    --snice-color-text: rgb(var(--snice-color-gray-50));
+    --snice-color-text-secondary: rgb(var(--snice-color-gray-300));
+    --snice-color-text-tertiary: rgb(var(--snice-color-gray-400));
+    --snice-color-text-inverse: rgb(var(--snice-color-gray-900));
+
+    --snice-color-background: rgb(var(--snice-color-gray-900));
+    --snice-color-background-secondary: rgb(var(--snice-color-gray-800));
+    --snice-color-background-tertiary: rgb(var(--snice-color-gray-700));
+    --snice-color-background-element: rgb(47 45 43);
+
+    --snice-color-border: rgb(var(--snice-color-gray-700));
+    --snice-color-border-hover: rgb(var(--snice-color-gray-600));
+    --snice-color-border-focus: rgb(var(--snice-color-blue-400));
+
+    --snice-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --snice-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --snice-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --snice-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --snice-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --snice-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.35);
+  }
+}