snice 2.1.5 → 2.2.0

package/components/tabs/snice-tabs.ts

@@ -1,332 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,234 +0,0 @@
-: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);
-  }
-}