@wallarm-org/design-system 0.1.0

package/dist/theme/semantic.css

@@ -0,0 +1,470 @@
+@theme {
+    /* ========================================
+   * TEXT COLORS
+   * ======================================== */
+    --color-text-primary: var(--color-slate-900);
+    --color-text-primary-alt: var(--color-white);
+    --color-text-primary-fixed: var(--color-slate-900);
+    --color-text-primary-alt-fixed: var(--color-white);
+    --color-text-secondary: var(--color-slate-500);
+    --color-text-secondary-alt: --alpha(var(--color-white) / 80%);
+    --color-text-tertiary: var(--color-slate-300);
+    --color-text-tertiary-alt: --alpha(var(--color-white) / 70%);
+    --color-text-hint: var(--color-slate-300);
+
+    /* Brand & Semantic Text */
+    --color-text-brand: var(--color-w-orange-600);
+    --color-text-danger: var(--color-red-600);
+    --color-text-warning: var(--color-amber-700);
+    --color-text-success: var(--color-green-600);
+    --color-text-info: var(--color-blue-600);
+    --color-text-ai: var(--color-purple-600);
+
+    /* Disabled Text */
+    --color-text-disable-primary: --alpha(var(--color-slate-900) / 40%);
+    --color-text-disable-primary-alt: --alpha(var(--color-white) / 40%);
+    --color-text-disable-brand: var(--color-w-orange-200);
+    --color-text-disable-danger: var(--color-red-200);
+    --color-text-disable-warning: var(--color-amber-300);
+    --color-text-disable-succes: var(--color-green-200);
+    --color-text-disable-info: var(--color-blue-200);
+    --color-text-disable-ai: var(--color-purple-200);
+
+    /* Link Text */
+    --color-text-link-default: var(--color-blue-600);
+    --color-text-link-hover: var(--color-blue-800);
+    --color-text-link-default-alt: var(--color-blue-300);
+    --color-text-link-hover-alt: var(--color-blue-200);
+
+    /* ========================================
+   * ICON COLORS
+   * ======================================== */
+    --color-icon-primary: var(--color-slate-900);
+    --color-icon-primary-alt: var(--color-white);
+    --color-icon-primary-fixed: var(--color-slate-900);
+    --color-icon-primary-alt-fixed: var(--color-white);
+    --color-icon-primary-disable: --alpha(var(--color-slate-900) / 40%);
+    --color-icon-primary-alt-disable: --alpha(var(--color-white) / 40%);
+    --color-icon-secondary: var(--color-slate-500);
+    --color-icon-secondary-alt: --alpha(var(--color-white) / 80%);
+
+    /* Brand & Semantic Icons */
+    --color-icon-brand: var(--color-w-orange-600);
+    --color-icon-danger: var(--color-red-600);
+    --color-icon-warning: var(--color-amber-600);
+    --color-icon-success: var(--color-green-600);
+    --color-icon-info: var(--color-blue-600);
+    --color-icon-ai: var(--color-purple-600);
+
+    /* ========================================
+   * BACKGROUND COLORS
+   * ======================================== */
+    /* Page & Surface */
+    --color-bg-page-bg: var(--color-white);
+    --color-bg-surface-1: var(--color-white);
+    --color-bg-surface-2: var(--color-white);
+    --color-bg-surface-3: var(--color-white);
+    --color-bg-surface-4: var(--color-white);
+    --color-bg-surface-5: var(--color-slate-100);
+
+    /* Primary Backgrounds */
+    --color-bg-primary: var(--color-slate-100);
+    --color-bg-light-primary: var(--color-slate-50);
+    --color-bg-strong-primary: var(--color-slate-300);
+
+    /* Brand Backgrounds */
+    --color-bg-brand: var(--color-w-orange-100);
+    --color-bg-light-brand: var(--color-w-orange-50);
+    --color-bg-strong-brand: var(--color-w-orange-300);
+
+    /* Semantic Backgrounds */
+    --color-bg-danger: var(--color-red-100);
+    --color-bg-light-danger: var(--color-red-50);
+    --color-bg-strong-danger: var(--color-red-300);
+
+    --color-bg-warning: var(--color-amber-100);
+    --color-bg-light-warning: var(--color-amber-50);
+    --color-bg-strong-warning: var(--color-amber-100);
+
+    --color-bg-success: var(--color-green-100);
+    --color-bg-light-success: var(--color-green-50);
+    --color-bg-strong-success: var(--color-green-300);
+
+    --color-bg-info: var(--color-blue-100);
+    --color-bg-light-info: var(--color-blue-50);
+    --color-bg-strong-info: var(--color-blue-300);
+
+    --color-bg-ai: var(--color-purple-100);
+    --color-bg-light-ai: var(--color-purple-50);
+    --color-bg-strong-ai: var(--color-purple-300);
+
+    /* Fill Backgrounds */
+    --color-bg-fill-brand: var(--color-w-orange-600);
+    --color-bg-fill-danger: var(--color-red-600);
+    --color-bg-fill-warning: var(--color-amber-500);
+    --color-bg-fill-success: var(--color-green-600);
+    --color-bg-fill-info: var(--color-blue-600);
+    --color-bg-fill-ai: var(--color-purple-600);
+    --color-bg-fill-btn-fiil-grae-tbd: var(--color-pink-400);
+
+    /* ========================================
+   * BORDER COLORS
+   * ======================================== */
+    --color-border-primary: var(--color-slate-300);
+    --color-border-primary-light: var(--color-slate-200);
+    --color-border-strong-primary: var(--color-slate-500);
+
+    /* ========================================
+   * FOCUS RING COLORS
+   * ======================================== */
+    --color-focus-ring-primary: --alpha(var(--color-slate-400) / 30%);
+
+    /* Brand Borders */
+    --color-border-brand: var(--color-w-orange-300);
+    --color-border-strong-brand: var(--color-w-orange-500);
+
+    /* Semantic Borders */
+    --color-border-danger: var(--color-red-300);
+    --color-border-strong-danger: var(--color-red-600);
+
+    --color-border-warning: var(--color-amber-300);
+    --color-border-strong-warning: var(--color-amber-500);
+
+    --color-border-success: var(--color-green-300);
+    --color-border-strong-success: var(--color-green-500);
+
+    --color-border-info: var(--color-blue-300);
+    --color-border-strong-info: var(--color-blue-500);
+
+    --color-border-ai: var(--color-purple-300);
+    --color-border-strong-ai: var(--color-purple-500);
+
+    /* ========================================
+   * STATE COLORS
+   * ======================================== */
+    /* General State Colors */
+    --color-states-default-all: --alpha(var(--color-white) / 0%);
+    --color-states-on-fill-hover: --alpha(var(--color-white) / 10%);
+    --color-states-on-fill-pressed: --alpha(var(--color-white) / 40%);
+    --color-states-on-fill-disabled: --alpha(var(--color-white) / 40%);
+
+    /* Primary States */
+    --color-states-primary-default-alt: --alpha(var(--color-slate-500) / 6%);
+    --color-states-primary-hover: --alpha(var(--color-slate-500) / 8%);
+    --color-states-primary-pressed: --alpha(var(--color-slate-500) / 16%);
+    --color-states-primary-active: --alpha(var(--color-slate-500) / 10%);
+    --color-states-primary-alt-default-alt: --alpha(var(--color-white) / 6%);
+    --color-states-primary-alt-hover: --alpha(var(--color-white) / 8%);
+    --color-states-primary-alt-pressed: --alpha(var(--color-white) / 16%);
+    --color-states-primary-alt-active: --alpha(var(--color-white) / 12%);
+
+    /* Brand States */
+    --color-states-brand-default-alt: --alpha(var(--color-w-orange-500) / 6%);
+    --color-states-brand-hover: --alpha(var(--color-w-orange-500) / 8%);
+    --color-states-brand-pressed: --alpha(var(--color-w-orange-500) / 16%);
+    --color-states-brand-active: --alpha(var(--color-w-orange-500) / 12%);
+
+    /* Danger States */
+    --color-states-danger-default-alt: --alpha(var(--color-red-500) / 6%);
+    --color-states-danger-hover: --alpha(var(--color-red-500) / 8%);
+    --color-states-danger-pressed: --alpha(var(--color-red-500) / 16%);
+    --color-states-danger-active: --alpha(var(--color-red-500) / 12%);
+
+    /* Warning States */
+    --color-states-warning-default-alt: --alpha(var(--color-amber-500) / 6%);
+    --color-states-warning-hover: --alpha(var(--color-amber-500) / 8%);
+    --color-states-warning-pressed: --alpha(var(--color-amber-500) / 16%);
+    --color-states-warning-active: --alpha(var(--color-amber-500) / 12%);
+
+    /* Success States */
+    --color-states-success-default-alt: --alpha(var(--color-green-500) / 6%);
+    --color-states-success-hover: --alpha(var(--color-green-500) / 8%);
+    --color-states-success-pressed: --alpha(var(--color-green-500) / 16%);
+    --color-states-success-active: --alpha(var(--color-green-500) / 12%);
+
+    /* Info States */
+    --color-states-info-default-alt: --alpha(var(--color-blue-500) / 6%);
+    --color-states-info-hover: --alpha(var(--color-blue-500) / 8%);
+    --color-states-info-pressed: --alpha(var(--color-blue-500) / 16%);
+    --color-states-info-active: --alpha(var(--color-blue-500) / 12%);
+
+    /* AI States */
+    --color-states-ai-default-alt: --alpha(var(--color-purple-500) / 6%);
+    --color-states-ai-hover: --alpha(var(--color-purple-500) / 8%);
+    --color-states-ai-pressed: --alpha(var(--color-purple-500) / 16%);
+    --color-states-ai-active: --alpha(var(--color-purple-500) / 12%);
+
+    /* ========================================
+   * COMPONENT-SPECIFIC COLORS
+   * ======================================== */
+    --color-component-outline-button-bg: var(--color-white);
+    --color-component-input-bg: var(--color-white);
+    --color-component-switcher-bg: var(--color-slate-200);
+    --color-component-border-hotkey: var(--color-slate-200);
+    --color-component-border-input-hover: var(--color-slate-400);
+    --color-component-overlay: --alpha(var(--color-slate-600) / 60%);
+    --color-component-tooltip-bg: --alpha(var(--color-slate-950) / 80%);
+    --color-component-logo-ic: var(--color-w-orange-600);
+    --color-component-logo-wordmark: var(--color-slate-950);
+    --color-component-logo-wordmark-alt: var(--color-white);
+    --color-component-kbi-tooltip-bg: --alpha(var(--color-white) / 20%);
+    --color-component-dialog-overlay: --alpha(var(--color-white) / 60%);
+    --color-component-code-snippet-bg: --alpha(var(--color-slate-500) / 6%);
+
+    /* ========================================
+   * SYNTAX COLORS
+   * ======================================== */
+    --color-syntax-no-syntax: var(--color-slate-900);
+
+    /* Syntax Highlighting */
+    --color-syntax-function: var(--color-blue-600);
+    --color-syntax-keyword: #7008e7;
+    --color-syntax-tag: #00786f;
+    --color-syntax-comment: var(--color-slate-500);
+
+    /* Syntax Highlight - Neutral */
+    --color-syntax-highlight-neutral-code: var(--color-slate-900);
+    --color-syntax-highlight-neutral-indicator: #45556c;
+    --color-syntax-highlight-neutral-highlight: --alpha(var(--color-slate-500) / 6%);
+    --color-syntax-highlight-selected-code: var(--color-white);
+    --color-syntax-highlight-selected-bg: var(--color-syntax-highlight-neutral-code);
+
+    /* Syntax Highlight - Info */
+    --color-syntax-highlight-info-code: var(--color-blue-600);
+    --color-syntax-highlight-info-indicator: var(--color-blue-600);
+    --color-syntax-highlight-info-highlight: --alpha(var(--color-blue-500) / 6%);
+
+    /* Syntax Highlight - Error */
+    --color-syntax-highlight-error-code: var(--color-red-600);
+    --color-syntax-highlight-error-indicator: var(--color-red-600);
+    --color-syntax-highlight-error-highlight: --alpha(var(--color-red-500) / 6%);
+
+    /* Syntax Highlight - Warning */
+    --color-syntax-highlight-warning-code: var(--color-amber-700);
+    --color-syntax-highlight-warning-indicator: #e17100;
+    --color-syntax-highlight-warning-highlight: --alpha(var(--color-amber-500) / 6%);
+
+    /* Syntax Highlight - Success */
+    --color-syntax-highlight-success-code: var(--color-green-600);
+    --color-syntax-highlight-success-indicator: var(--color-green-600);
+    --color-syntax-highlight-success-highlight: --alpha(var(--color-green-500) / 6%);
+
+    /* Syntax Highlight - Brand */
+    --color-syntax-highlight-brand-code: var(--color-w-orange-600);
+    --color-syntax-highlight-brand-indicator: var(--color-w-orange-600);
+    --color-syntax-highlight-brand-highlight: --alpha(var(--color-w-orange-500) / 6%);
+
+    /* Syntax Highlight - AI */
+    --color-syntax-highlight-ai-code: var(--color-purple-600);
+    --color-syntax-highlight-ai-indicator: var(--color-purple-600);
+    --color-syntax-highlight-ai-highlight: --alpha(var(--color-purple-500) / 6%);
+
+    /* ========================================
+   * BADGE COLORS
+   * ======================================== */
+    --color-badge-on-solid: --alpha(var(--color-white) / 95%);
+    --color-badge-badge-bg: var(--color-white);
+    --color-badge-label-primary: var(--color-slate-700);
+
+    /* Color-specific Badge Variants */
+    --color-badge-slate-light: var(--color-slate-100);
+    --color-badge-slate-strong: var(--color-slate-700);
+    --color-badge-slate-dark: var(--color-slate-700);
+    --color-badge-slate-dark-alt: var(--color-slate-500);
+
+    --color-badge-gray-light: var(--color-gray-100);
+    --color-badge-gray-strong: var(--color-gray-700);
+    --color-badge-gray-dark: var(--color-gray-700);
+    --color-badge-gray-dark-alt: var(--color-gray-500);
+
+    --color-badge-zinc-light: var(--color-zinc-100);
+    --color-badge-zinc-strong: var(--color-zinc-700);
+    --color-badge-zinc-dark: var(--color-zinc-700);
+    --color-badge-zinc-dark-alt: var(--color-zinc-500);
+
+    --color-badge-neutral-light: var(--color-neutral-100);
+    --color-badge-neutral-strong: var(--color-neutral-700);
+    --color-badge-neutral-dark: var(--color-neutral-700);
+    --color-badge-neutral-dark-alt: var(--color-neutral-500);
+
+    --color-badge-stone-light: var(--color-stone-100);
+    --color-badge-stone-strong: var(--color-stone-700);
+    --color-badge-stone-dark: var(--color-stone-700);
+    --color-badge-stone-dark-alt: var(--color-stone-500);
+
+    --color-badge-red-light: var(--color-red-100);
+    --color-badge-red-strong: var(--color-red-500);
+    --color-badge-red-dark: var(--color-red-800);
+
+    --color-badge-w-orange-light: var(--color-w-orange-100);
+    --color-badge-w-orange-strong: var(--color-w-orange-500);
+    --color-badge-w-orange-dark: var(--color-w-orange-800);
+
+    --color-badge-amber-light: var(--color-amber-100);
+    --color-badge-amber-strong: var(--color-amber-500);
+    --color-badge-amber-dark: var(--color-amber-800);
+
+    --color-badge-yellow-light: var(--color-yellow-100);
+    --color-badge-yellow-strong: var(--color-yellow-500);
+    --color-badge-yellow-dark: var(--color-yellow-800);
+
+    --color-badge-lime-light: var(--color-lime-100);
+    --color-badge-lime-strong: var(--color-lime-500);
+    --color-badge-lime-dark: var(--color-lime-800);
+
+    --color-badge-green-light: var(--color-green-100);
+    --color-badge-green-strong: var(--color-green-500);
+    --color-badge-green-dark: var(--color-green-800);
+
+    --color-badge-emerald-light: var(--color-emerald-100);
+    --color-badge-emerald-strong: var(--color-emerald-500);
+    --color-badge-emerald-dark: var(--color-emerald-800);
+
+    --color-badge-teal-light: var(--color-teal-100);
+    --color-badge-teal-strong: var(--color-teal-500);
+    --color-badge-teal-dark: var(--color-teal-800);
+
+    --color-badge-cyan-light: var(--color-cyan-100);
+    --color-badge-cyan-strong: var(--color-cyan-500);
+    --color-badge-cyan-dark: var(--color-cyan-800);
+
+    --color-badge-sky-light: var(--color-sky-100);
+    --color-badge-sky-strong: var(--color-sky-500);
+    --color-badge-sky-dark: var(--color-sky-800);
+
+    --color-badge-blue-light: var(--color-blue-100);
+    --color-badge-blue-strong: var(--color-blue-500);
+    --color-badge-blue-dark: var(--color-blue-800);
+
+    --color-badge-indigo-light: var(--color-indigo-100);
+    --color-badge-indigo-strong: var(--color-indigo-500);
+    --color-badge-indigo-dark: var(--color-indigo-800);
+
+    --color-badge-violet-light: var(--color-violet-100);
+    --color-badge-violet-strong: var(--color-violet-500);
+    --color-badge-violet-dark: var(--color-violet-800);
+
+    --color-badge-purple-light: var(--color-purple-100);
+    --color-badge-purple-strong: var(--color-purple-500);
+    --color-badge-purple-dark: var(--color-purple-800);
+
+    --color-badge-fuchsia-light: var(--color-fuchsia-100);
+    --color-badge-fuchsia-strong: var(--color-fuchsia-500);
+    --color-badge-fuchsia-dark: var(--color-fuchsia-800);
+
+    --color-badge-pink-light: var(--color-pink-100);
+    --color-badge-pink-strong: var(--color-pink-500);
+    --color-badge-pink-dark: var(--color-pink-800);
+
+    --color-badge-rose-light: var(--color-rose-100);
+    --color-badge-rose-strong: var(--color-rose-500);
+    --color-badge-rose-dark: var(--color-rose-800);
+
+    /* ========================================
+   * MISC TOKENS
+   * ======================================== */
+    --color-data-viz-1: #ffffff;
+    --temp-token: #ffffff;
+}
+
+.dark {
+    /* ========================================
+     * TEXT COLORS
+     * ======================================== */
+    --color-text-primary: var(--color-white);
+    --color-text-primary-alt: var(--color-white);
+    --color-text-primary-fixed: var(--color-white);
+    --color-text-primary-alt-fixed: var(--color-slate-900);
+    --color-text-secondary: --alpha(var(--color-white) / 80%);
+    --color-text-secondary-alt: var(--color-slate-500);
+    --color-text-tertiary: --alpha(var(--color-white) / 70%);
+    --color-text-tertiary-alt: var(--color-slate-300);
+    --color-text-hint: var(--color-slate-300);
+
+    /* Disabled Text */
+    --color-text-disable-primary: --alpha(var(--color-white) / 40%);
+    --color-text-disable-primary-alt: --alpha(var(--color-slate-900) / 40%);
+
+    /* ========================================
+       * ICON COLORS
+       * ======================================== */
+    --color-icon-primary: var(--color-white);
+    --color-icon-primary-alt: var(--color-slate-900);
+    --color-icon-primary-fixed: var(--color-white);
+    --color-icon-primary-alt-fixed: var(--color-slate-900);
+    --color-icon-primary-disable: --alpha(var(--color-white) / 40%);
+    --color-icon-primary-alt-disable: --alpha(var(--color-slate-900) / 40%);
+    --color-icon-secondary: --alpha(var(--color-white) / 80%);
+    --color-icon-secondary-alt: var(--color-slate-500);
+
+    /* ========================================
+       * SYNTAX COLORS
+       * ======================================== */
+    --color-syntax-no-syntax: var(--color-white);
+
+    /* Syntax Highlighting */
+    --color-syntax-function: var(--color-blue-400);
+    --color-syntax-keyword: #a855f7;
+    --color-syntax-tag: #2dd4bf;
+    --color-syntax-comment: --alpha(var(--color-white) / 60%);
+
+    /* Syntax Highlight - Neutral */
+    --color-syntax-highlight-neutral-code: var(--color-white);
+    --color-syntax-highlight-selected-code: var(--color-slate-900);
+    --color-syntax-highlight-selected-bg: var(--color-syntax-highlight-neutral-code);
+
+    /* ========================================
+       * BACKGROUND COLORS
+       * ======================================== */
+    /* Page & Surface */
+    --color-bg-page-bg: var(--color-black);
+    --color-bg-surface-1: var(--color-black);
+    --color-bg-surface-2: var(--color-black);
+    --color-bg-surface-3: var(--color-black);
+    --color-bg-surface-4: var(--color-black);
+    --color-bg-surface-5: var(--color-slate-950);
+
+    /* Primary Backgrounds */
+    --color-bg-primary: var(--color-slate-950);
+    --color-bg-light-primary: var(--color-slate-800);
+    --color-bg-strong-primary: var(--color-slate-700);
+
+    /* ========================================
+       * BORDER COLORS
+       * ======================================== */
+    --color-border-primary: var(--color-slate-300);
+    --color-border-primary-light: var(--color-slate-200);
+    --color-border-strong-primary: var(--color-slate-500);
+
+    /* ========================================
+       * FOCUS RING COLORS
+       * ======================================== */
+    --color-focus-ring-primary: --alpha(var(--color-slate-400) / 30%);
+
+    /* ========================================
+       * COMPONENT-SPECIFIC COLORS
+       * ======================================== */
+    --color-component-outline-button-bg: var(--color-black);
+    --color-component-input-bg: var(--color-black);
+    --color-component-switcher-bg: var(--color-slate-800);
+    --color-component-border-hotkey: var(--color-slate-800);
+    --color-component-border-input-hover: var(--color-slate-400);
+    --color-component-overlay: --alpha(var(--color-slate-600) / 60%);
+    --color-component-tooltip-bg: --alpha(var(--color-slate-950) / 80%);
+    --color-component-logo-ic: var(--color-w-orange-600);
+    --color-component-logo-wordmark: var(--color-slate-950);
+    --color-component-logo-wordmark-alt: var(--color-black);
+
+    /* ========================================
+       * BADGE COLORS
+       * ======================================== */
+    --color-badge-on-solid: --alpha(var(--color-black) / 95%);
+    --color-badge-badge-bg: var(--color-black);
+    --color-badge-label-primary: var(--color-slate-700);
+
+    /* ========================================
+       * MISC TOKENS
+       * ======================================== */
+    --color-data-viz-1: #ffffff;
+    --temp-token: #ffffff;
+}

package/dist/theme/shadow.css

@@ -0,0 +1,9 @@
+@theme {
+    --shadow-2xs: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}

package/dist/theme/spacing.css

@@ -0,0 +1,26 @@
+@theme {
+    --spacing: 1px;
+    --spacing-none: 0px;
+    --spacing-1: 1px;
+    --spacing-2: 2px;
+    --spacing-4: 4px;
+    --spacing-6: 6px;
+    --spacing-8: 8px;
+    --spacing-12: 12px;
+    --spacing-16: 16px;
+    --spacing-20: 20px;
+    --spacing-24: 24px;
+    --spacing-28: 28px;
+    --spacing-32: 32px;
+    --spacing-36: 36px;
+    --spacing-40: 40px;
+    --spacing-44: 44px;
+    --spacing-48: 48px;
+    --spacing-56: 56px;
+    --spacing-64: 64px;
+    --spacing-80: 80px;
+    --spacing-96: 96px;
+    --spacing-112: 112px;
+    --spacing-128: 128px;
+    --spacing-144: 144px;
+}

package/dist/theme/typography.css

@@ -0,0 +1,79 @@
+@theme {
+    --font-sans:
+        'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans-display:
+        'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono:
+        'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        'Liberation Mono', 'Courier New', monospace;
+    --font-serif: 'Inter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrablod: 800;
+    --font-weight-black: 900;
+
+    --text-2xs: 10px;
+    --text-2xs--line-height: 12px;
+
+    --text-xs: 12px;
+    --text-xs--line-height: 16px;
+
+    --text-sm: 14px;
+    --text-sm--line-height: 20px;
+
+    --text-base: 16px;
+    --text-base--line-height: 24px;
+
+    --text-lg: 18px;
+    --text-lg--line-height: 24px;
+
+    --text-xl: 20px;
+    --text-xl--line-height: 28px;
+
+    --text-2xl: 24px;
+    --text-2xl--line-height: 32px;
+
+    --text-3xl: 30px;
+    --text-3xl--line-height: 36px;
+
+    --text-4xl: 36px;
+    --text-4xl--line-height: 40px;
+
+    --text-5xl: 48px;
+    --text-5xl--line-height: 48px;
+
+    --text-6xl: 60px;
+    --text-6xl--line-height: 60px;
+
+    --text-7xl: 72px;
+    --text-7xl--line-height: 72px;
+
+    --text-8xl: 96px;
+    --text-8xl--line-height: 96px;
+
+    --text-9xl: 128px;
+    --text-9xl--line-height: 128px;
+
+    --leading-2xs: 12px;
+    --leading-xs: 16px;
+    --leading-sm: 20px;
+    --leading-base: 24px;
+    --leading-lg: 24px;
+    --leading-xl: 28px;
+    --leading-2xl: 32px;
+    --leading-3xl: 36px;
+    --leading-4xl: 40px;
+    --leading-5xl: 48px;
+    --leading-6xl: 60px;
+    --leading-7xl: 72px;
+    --leading-8xl: 96px;
+    --leading-9xl: 128px;
+}

package/dist/theme/utilities/hover-overlay.css

@@ -0,0 +1,27 @@
+@utility overlay {
+    position: relative;
+    overflow: hidden;
+
+    &:before {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background: transparent;
+
+        @apply transition-colors;
+    }
+}
+
+@utility overlay-* {
+    position: relative;
+
+    &:before {
+        background: --value(--color-*);
+        border-radius: inherit;
+    }
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassArray } from 'clsx';
+export declare const cn: (...inputs: ClassArray) => string;

package/dist/utils/cn.js

@@ -0,0 +1,4 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+const cn = (...inputs)=>twMerge(clsx(inputs));
+export { cn };

package/dist/utils/hasNonTextEnd.d.ts

@@ -0,0 +1,2 @@
+import { type PropsWithChildren } from 'react';
+export declare const hasNonTextEnd: (children: PropsWithChildren["children"]) => boolean;

package/dist/utils/hasNonTextEnd.js

@@ -0,0 +1,11 @@
+import { Children, isValidElement } from "react";
+import { Text } from "../components/Text/index.js";
+const hasNonTextEnd = (children)=>{
+    const childrenArray = Children.toArray(children);
+    const hasMultipleChildren = childrenArray.length > 1;
+    const lastChild = childrenArray[childrenArray.length - 1];
+    const isTextComponent = isValidElement(lastChild) && lastChild.type === Text;
+    const isLastChildText = 'string' == typeof lastChild || 'number' == typeof lastChild || isTextComponent;
+    return hasMultipleChildren && !isLastChildText;
+};
+export { hasNonTextEnd };

package/dist/utils/isIconOnly.d.ts

@@ -0,0 +1,2 @@
+import { type PropsWithChildren } from 'react';
+export declare const isIconOnly: (children: PropsWithChildren["children"]) => boolean;

package/dist/utils/isIconOnly.js

@@ -0,0 +1,4 @@
+import { Children } from "react";
+import { isSvgElement } from "./isValidSvg.js";
+const isIconOnly = (children)=>1 === Children.count(children) && isSvgElement(children);
+export { isIconOnly };

package/dist/utils/isValidSvg.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare const isSvgElement: (node: ReactNode) => boolean;

package/dist/utils/isValidSvg.js

@@ -0,0 +1,8 @@
+import { isValidElement } from "react";
+const isSvgElement = (node)=>{
+    if (!isValidElement(node)) return false;
+    if ('svg' === node.type) return true;
+    const displayName = node.type.displayName;
+    return 'string' == typeof displayName && displayName.endsWith('Icon');
+};
+export { isSvgElement };