@weeehaoooz/talos-ui 0.1.0

package/styles/_variables.scss

@@ -0,0 +1,590 @@
+/* ==========================================================================
+   Talos UI Design System - Modern 3-Tier Design Tokens
+   ========================================================================== */
+
+:root {
+  /* ========================================================================
+     1. Primitives & Scales
+     ======================================================================== */
+  --talos-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --talos-font-display: var(--talos-font-sans);
+  
+  /* Radii Scale */
+  --talos-radius-none: 0px;
+  --talos-radius-xs: 0.125rem; /* 2px */
+  --talos-radius-sm: 0.25rem;  /* 4px */
+  --talos-radius-md: 0.375rem; /* 6px */
+  --talos-radius-lg: 0.5rem;   /* 8px */
+  --talos-radius-xl: 0.75rem;  /* 12px */
+  --talos-radius-2xl: 1rem;    /* 16px */
+  --talos-radius-full: 9999px;
+
+  /* Metric & Sizing Scale */
+  --talos-height-sm: 2rem;     /* 32px */
+  --talos-height-md: 2.25rem;  /* 36px */
+  --talos-height-lg: 2.625rem; /* 42px */
+
+  /* Typography Scale */
+  --talos-font-size-2xs: 0.6875rem; /* 11px */
+  --talos-font-size-xs: 0.75rem;     /* 12px */
+  --talos-font-size-sm: 0.8125rem;   /* 13px */
+  --talos-font-size-base: 0.875rem;  /* 14px */
+  --talos-font-size-md: 0.875rem;    /* 14px */
+  --talos-font-size-lg: 1rem;        /* 16px */
+  --talos-font-size-xl: 1.125rem;    /* 18px */
+  --talos-font-size-2xl: 1.25rem;    /* 20px */
+  --talos-font-size-3xl: 1.5rem;     /* 24px */
+  --talos-font-size-4xl: 1.875rem;   /* 30px */
+  --talos-font-size-5xl: 2.25rem;    /* 36px */
+
+  --talos-font-weight-light: 300;
+  --talos-font-weight-regular: 400;
+  --talos-font-weight-medium: 500;
+  --talos-font-weight-semibold: 600;
+  --talos-font-weight-bold: 700;
+  --talos-font-weight-extrabold: 800;
+
+  --talos-line-height-none: 1;
+  --talos-line-height-tight: 1.25;
+  --talos-line-height-snug: 1.375;
+  --talos-line-height-normal: 1.5;
+  --talos-line-height-relaxed: 1.625;
+  --talos-line-height-loose: 2;
+
+  --talos-control-padding-x: 0.625rem;
+  --talos-control-font-size: var(--talos-font-size-sm);
+  --talos-control-height: var(--talos-height-md);
+  --talos-border-radius: var(--talos-radius-md);
+
+  /* Shadows & Elevation */
+  --talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+  --talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+  --talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
+  --talos-shadow-dialog: var(--talos-shadow-xl);
+  --talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+
+  /* Motion & Animation */
+  --talos-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  --talos-transition-slow: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ========================================================================
+     2. Semantic Surfaces, Typography & Borders (Light Mode)
+     ======================================================================== */
+  --talos-bg-canvas: #f8fafc;
+  --talos-bg-surface: #ffffff;
+  --talos-bg-subtle: #f1f5f9;
+  --talos-bg-overlay: rgba(15, 23, 42, 0.5);
+
+  --talos-border-subtle: #f1f5f9;
+  --talos-border-default: #cbd5e1;
+  --talos-border-hover: #94a3b8;
+  --talos-border-focus: #2563eb;
+  --talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
+
+  --talos-text-primary: #0f172a;
+  --talos-text-secondary: #334155;
+  --talos-text-muted: #64748b;
+  --talos-text-inverse: #ffffff;
+
+  /* Aliases for global consistency */
+  --talos-bg-color: var(--talos-bg-canvas);
+  --talos-card-bg: var(--talos-bg-surface);
+  --talos-card-bg-subtle: var(--talos-bg-subtle);
+  --talos-border-color: var(--talos-border-default);
+  --talos-text-color: var(--talos-text-primary);
+  --talos-error-color: #ef4444;
+  --talos-warning-color: #d97706;
+  --talos-success-color: #16a34a;
+
+  /* Global Shorthand Aliases */
+  --bg-color: var(--talos-bg-canvas);
+  --bg-subtle: var(--talos-bg-subtle);
+  --card-bg: var(--talos-bg-surface);
+  --card-bg-subtle: var(--talos-bg-subtle);
+  --border-color: var(--talos-border-default);
+  --border-hover: var(--talos-border-hover);
+  --border-focus: var(--talos-border-focus);
+  --text-color: var(--talos-text-primary);
+  --text-muted: var(--talos-text-muted);
+  --primary-color: var(--talos-primary);
+  --primary-hover: var(--talos-primary-hover);
+  --primary-active: var(--talos-primary-active);
+  --primary-light: var(--talos-primary-subtle-bg);
+  --primary-light-hover: var(--talos-primary-subtle-bg-hover);
+
+  /* ========================================================================
+     3. Semantic Intents Palette (Light Mode)
+     ======================================================================== */
+  /* Primary (Blue) */
+  --talos-primary: #2563eb;
+  --talos-primary-hover: #1d4ed8;
+  --talos-primary-active: #1e40af;
+  --talos-primary-subtle-bg: #eff6ff;
+  --talos-primary-subtle-bg-hover: #dbeafe;
+  --talos-primary-subtle-border: #bfdbfe;
+  --talos-primary-text: #1e40af;
+  --talos-primary-solid-bg: #2563eb;
+  --talos-primary-solid-text: #ffffff;
+  --talos-primary-color: var(--talos-primary);
+  --talos-primary-light: var(--talos-primary-subtle-bg);
+  --talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);
+
+  /* Neutral / Secondary (Slate) */
+  --talos-neutral: #475569;
+  --talos-neutral-hover: #334155;
+  --talos-neutral-active: #1e293b;
+  --talos-neutral-subtle-bg: #f8fafc;
+  --talos-neutral-subtle-bg-hover: #f1f5f9;
+  --talos-neutral-subtle-border: #e2e8f0;
+  --talos-neutral-text: #334155;
+  --talos-neutral-solid-bg: #475569;
+  --talos-neutral-solid-text: #ffffff;
+
+  /* Success (Emerald) */
+  --talos-success: #16a34a;
+  --talos-success-hover: #15803d;
+  --talos-success-active: #166534;
+  --talos-success-subtle-bg: #f0fdf4;
+  --talos-success-subtle-bg-hover: #dcfce7;
+  --talos-success-subtle-border: #bbf7d0;
+  --talos-success-text: #166534;
+  --talos-success-solid-bg: #16a34a;
+  --talos-success-solid-text: #ffffff;
+
+  /* Warning (Amber) */
+  --talos-warning: #d97706;
+  --talos-warning-hover: #b45309;
+  --talos-warning-active: #92400e;
+  --talos-warning-subtle-bg: #fffbeb;
+  --talos-warning-subtle-bg-hover: #fef3c7;
+  --talos-warning-subtle-border: #fde68a;
+  --talos-warning-text: #92400e;
+  --talos-warning-solid-bg: #d97706;
+  --talos-warning-solid-text: #ffffff;
+
+  /* Danger / Error (Rose / Red) */
+  --talos-danger: #ef4444;
+  --talos-danger-hover: #dc2626;
+  --talos-danger-active: #b91c1c;
+  --talos-danger-subtle-bg: #fef2f2;
+  --talos-danger-subtle-bg-hover: #fee2e2;
+  --talos-danger-subtle-border: #fecaca;
+  --talos-danger-text: #991b1b;
+  --talos-danger-solid-bg: #dc2626;
+  --talos-danger-solid-text: #ffffff;
+
+  /* Info (Sky / Cyan) */
+  --talos-info: #0284c7;
+  --talos-info-hover: #0369a1;
+  --talos-info-active: #075985;
+  --talos-info-subtle-bg: #f0f9ff;
+  --talos-info-subtle-bg-hover: #e0f2fe;
+  --talos-info-subtle-border: #bae6fd;
+  --talos-info-text: #0369a1;
+  --talos-info-solid-bg: #0284c7;
+  --talos-info-solid-text: #ffffff;
+
+  /* Purple / Accent (Violet) */
+  --talos-purple: #7c3aed;
+  --talos-purple-hover: #6d28d9;
+  --talos-purple-active: #5b21b6;
+  --talos-purple-subtle-bg: #f5f3ff;
+  --talos-purple-subtle-bg-hover: #ede9fe;
+  --talos-purple-subtle-border: #ddd6fe;
+  --talos-purple-text: #6d28d9;
+  --talos-purple-solid-bg: #7c3aed;
+  --talos-purple-solid-text: #ffffff;
+
+  /* ========================================================================
+     4. Form Control Tokens
+     ======================================================================== */
+  --talos-input-bg: var(--talos-bg-surface);
+  --talos-input-border: var(--talos-border-default);
+  --talos-input-border-hover: var(--talos-border-hover);
+  --talos-input-border-focus: var(--talos-border-focus);
+  --talos-input-color: var(--talos-text-primary);
+  --talos-input-placeholder-color: var(--talos-text-muted);
+  --talos-input-disabled-bg: var(--talos-bg-subtle);
+  --talos-input-disabled-border: var(--talos-border-default);
+  --talos-input-disabled-color: var(--talos-text-muted);
+  --talos-input-radius: var(--talos-radius-md);
+  --talos-input-height: var(--talos-height-md);
+
+  /* Affix Buttons & Action Tokens */
+  --talos-affix-btn-size-sm: 1.375rem; /* 22px */
+  --talos-affix-btn-size-md: 1.5rem;   /* 24px */
+  --talos-affix-btn-size-lg: 1.75rem;  /* 28px */
+  --talos-affix-btn-radius: var(--talos-radius-sm, 0.25rem);
+  --talos-affix-btn-icon-size-sm: 0.8125rem; /* 13px */
+  --talos-affix-btn-icon-size-md: 0.875rem;  /* 14px */
+  --talos-affix-btn-icon-size-lg: 1rem;      /* 16px */
+  --talos-affix-btn-color: var(--talos-text-muted, #64748b);
+  --talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);
+  --talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, 0.15)));
+  --talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, 0.25));
+
+  /* ========================================================================
+     5. Component Tokens (Mapped to Semantic Tier)
+     ======================================================================== */
+  /* Navigation & Layout */
+  --talos-sidebar-width: 260px;
+  --talos-sidebar-collapsed-width: 68px;
+  --talos-nav-bg: var(--talos-bg-surface);
+  --talos-nav-border-color: var(--talos-border-subtle);
+  --talos-active-nav-bg: var(--talos-primary-subtle-bg);
+  --talos-active-nav-text: var(--talos-primary);
+  --talos-nav-hover-bg: var(--talos-bg-subtle);
+  --talos-nav-hover-text: var(--talos-text-primary);
+  --talos-avatar-bg: var(--talos-primary-subtle-bg);
+  --talos-avatar-text: var(--talos-primary-text);
+  --talos-badge-bg: var(--talos-primary-subtle-bg);
+  --talos-badge-text: var(--talos-primary-text);
+
+  --talos-header-bg: var(--talos-bg-surface);
+  --talos-header-border-color: var(--talos-border-subtle);
+  --talos-right-panel-bg: var(--talos-bg-surface);
+  --talos-right-panel-border: var(--talos-border-subtle);
+  --talos-loading-overlay-bg: rgba(255, 255, 255, 0.75);
+
+  /* Dropdown & Popover */
+  --talos-dropdown-bg: var(--talos-bg-surface);
+  --talos-dropdown-border: var(--talos-border-default);
+  --talos-dropdown-shadow: var(--talos-shadow-dropdown);
+  --talos-dropdown-hover-bg: var(--talos-bg-subtle);
+  --talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);
+
+  /* Buttons */
+  --talos-btn-font-family: inherit;
+  --talos-btn-border-radius: var(--talos-radius-md);
+  --talos-btn-font-weight: 600;
+  --talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);
+  --talos-btn-ripple-color: rgba(255, 255, 255, 0.35);
+
+  --talos-btn-primary-bg: var(--talos-primary-solid-bg);
+  --talos-btn-primary-hover: var(--talos-primary-hover);
+  --talos-btn-primary-active: var(--talos-primary-active);
+  --talos-btn-primary-text: var(--talos-primary-solid-text);
+
+  --talos-btn-secondary-bg: var(--talos-neutral-solid-bg);
+  --talos-btn-secondary-hover: var(--talos-neutral-hover);
+  --talos-btn-secondary-active: var(--talos-neutral-active);
+  --talos-btn-secondary-text: var(--talos-neutral-solid-text);
+
+  --talos-btn-outline-bg: transparent;
+  --talos-btn-outline-border: var(--talos-border-default);
+  --talos-btn-outline-hover-bg: var(--talos-bg-subtle);
+  --talos-btn-outline-hover-border: var(--talos-border-hover);
+  --talos-btn-outline-text: var(--talos-text-secondary);
+
+  --talos-btn-ghost-bg: transparent;
+  --talos-btn-ghost-text: var(--talos-text-muted);
+  --talos-btn-ghost-hover-bg: var(--talos-bg-subtle);
+  --talos-btn-ghost-hover-text: var(--talos-text-primary);
+  --talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);
+
+  --talos-btn-danger-bg: var(--talos-danger-solid-bg);
+  --talos-btn-danger-hover: var(--talos-danger-hover);
+  --talos-btn-danger-active: var(--talos-danger-active);
+  --talos-btn-danger-text: var(--talos-danger-solid-text);
+
+  --talos-btn-success-bg: var(--talos-success-solid-bg);
+  --talos-btn-success-hover: var(--talos-success-hover);
+  --talos-btn-success-active: var(--talos-success-active);
+  --talos-btn-success-text: var(--talos-success-solid-text);
+
+  --talos-btn-height-sm: var(--talos-height-sm);
+  --talos-btn-height-md: var(--talos-height-md);
+  --talos-btn-height-lg: var(--talos-height-lg);
+
+  --talos-btn-padding-x-sm: 0.625rem;
+  --talos-btn-padding-x-md: 0.875rem;
+  --talos-btn-padding-x-lg: 1.125rem;
+
+  --talos-btn-font-size-sm: var(--talos-font-size-xs);
+  --talos-btn-font-size-md: var(--talos-font-size-sm);
+  --talos-btn-font-size-lg: var(--talos-font-size-md);
+
+  /* Category Bar */
+  --talos-category-bar-gap: 2px;
+  --talos-category-bar-track-bg: var(--talos-bg-subtle);
+  --talos-category-bar-border-radius: var(--talos-radius-md);
+  --talos-category-bar-height-xs: 0.25rem;
+  --talos-category-bar-height-sm: 0.375rem;
+  --talos-category-bar-height-md: 0.5rem;
+  --talos-category-bar-height-lg: 0.75rem;
+  --talos-category-bar-marker-ring: var(--talos-bg-surface);
+
+  /* Range Input */
+  --talos-range-track-bg: var(--talos-border-default);
+  --talos-range-track-fill: var(--talos-primary);
+  --talos-range-track-disabled-bg: var(--talos-border-subtle);
+  --talos-range-track-disabled-fill: var(--talos-text-muted);
+  --talos-range-track-height-sm: 0.25rem;
+  --talos-range-track-height-md: 0.375rem;
+  --talos-range-track-height-lg: 0.5rem;
+  --talos-range-thumb-size-sm: 1rem;
+  --talos-range-thumb-size-md: 1.25rem;
+  --talos-range-thumb-size-lg: 1.5rem;
+  --talos-range-thumb-bg: var(--talos-bg-surface);
+  --talos-range-thumb-border: var(--talos-primary);
+  --talos-range-thumb-shadow: var(--talos-shadow-sm);
+  --talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
+  --talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25);
+  --talos-range-tick-color: var(--talos-text-muted);
+  --talos-range-tick-active-color: #ffffff;
+  --talos-range-tick-label-color: var(--talos-text-muted);
+  --talos-range-tooltip-bg: #0f172a;
+  --talos-range-tooltip-text: #ffffff;
+
+  /* Slide Toggle */
+  --talos-toggle-track-bg: var(--talos-border-default);
+  --talos-toggle-track-bg-hover: var(--talos-border-hover);
+  --talos-toggle-thumb-bg: var(--talos-bg-surface);
+
+  /* Snackbar */
+  --talos-snackbar-bg: var(--talos-bg-surface);
+  --talos-snackbar-text: var(--talos-text-primary);
+  --talos-snackbar-border: var(--talos-border-default);
+  --talos-snackbar-border-radius: var(--talos-radius-lg);
+
+  /* Dialog / Modal */
+  --talos-dialog-bg: var(--talos-bg-surface);
+  --talos-dialog-border: var(--talos-border-default);
+  --talos-dialog-radius: var(--talos-radius-xl);
+  --talos-dialog-shadow: var(--talos-shadow-dialog);
+  --talos-dialog-backdrop-bg: var(--talos-bg-overlay);
+  --talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, 0.35);
+  --talos-dialog-title-color: var(--talos-text-primary);
+  --talos-dialog-subtitle-color: var(--talos-text-muted);
+
+  /* Tooltip */
+  --talos-tooltip-bg: #0f172a;
+  --talos-tooltip-text: #ffffff;
+
+  /* Drop Zone */
+  --talos-dropzone-bg: var(--talos-bg-surface);
+  --talos-dropzone-hover-bg: var(--talos-bg-subtle);
+  --talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);
+  --talos-dropzone-border: var(--talos-border-default);
+  --talos-dropzone-hover-border: var(--talos-border-hover);
+  --talos-dropzone-drag-border: var(--talos-primary);
+  --talos-dropzone-radius: var(--talos-radius-lg);
+  --talos-dropzone-text: var(--talos-text-primary);
+  --talos-dropzone-subtext: var(--talos-text-muted);
+  --talos-dropzone-icon-color: var(--talos-primary);
+  --talos-dropzone-file-bg: var(--talos-bg-surface);
+  --talos-dropzone-file-border: var(--talos-border-default);
+
+  /* Rating / Star Review */
+  --talos-rating-fill-warning: var(--talos-warning);
+  --talos-rating-fill-primary: var(--talos-primary);
+  --talos-rating-fill-danger: var(--talos-danger);
+  --talos-rating-fill-success: var(--talos-success);
+  --talos-rating-fill-purple: var(--talos-purple);
+  --talos-rating-unfilled: var(--talos-border-default);
+  --talos-rating-size-sm: 1.125rem;
+  --talos-rating-size-md: 1.375rem;
+  --talos-rating-size-lg: 1.75rem;
+  --talos-rating-size-xl: 2.25rem;
+}
+
+/* ==========================================================================
+   Dark Mode Tokens (Consolidated Override Layer)
+   ========================================================================== */
+:root[data-theme="dark"],
+:root.dark,
+[data-theme="dark"],
+[data-mode="dark"],
+.dark,
+.dark-theme {
+  /* Surfaces & Backgrounds */
+  --talos-bg-canvas: #090d16;
+  --talos-bg-surface: #0f172a;
+  --talos-bg-subtle: #131d31;
+  --talos-bg-overlay: rgba(3, 7, 18, 0.75);
+
+  /* Borders & Focus */
+  --talos-border-subtle: rgba(255, 255, 255, 0.06);
+  --talos-border-default: rgba(255, 255, 255, 0.1);
+  --talos-border-hover: rgba(255, 255, 255, 0.2);
+  --talos-border-focus: #3b82f6;
+  --talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+
+  /* Typography */
+  --talos-text-primary: #f8fafc;
+  --talos-text-secondary: #e2e8f0;
+  --talos-text-muted: #94a3b8;
+  --talos-text-inverse: #090d16;
+
+  /* Shadows */
+  --talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+  /* Intents in Dark Mode */
+  --talos-primary: #3b82f6;
+  --talos-primary-hover: #60a5fa;
+  --talos-primary-active: #2563eb;
+  --talos-primary-subtle-bg: rgba(59, 130, 246, 0.16);
+  --talos-primary-subtle-bg-hover: rgba(59, 130, 246, 0.26);
+  --talos-primary-subtle-border: rgba(59, 130, 246, 0.35);
+  --talos-primary-text: #93c5fd;
+  --talos-primary-solid-bg: #2563eb;
+  --talos-primary-solid-text: #ffffff;
+
+  --talos-neutral: #94a3b8;
+  --talos-neutral-hover: #cbd5e1;
+  --talos-neutral-active: #f1f5f9;
+  --talos-neutral-subtle-bg: rgba(148, 163, 184, 0.12);
+  --talos-neutral-subtle-bg-hover: rgba(148, 163, 184, 0.2);
+  --talos-neutral-subtle-border: rgba(148, 163, 184, 0.25);
+  --talos-neutral-text: #e2e8f0;
+  --talos-neutral-solid-bg: #334155;
+  --talos-neutral-solid-text: #f8fafc;
+
+  --talos-success: #22c55e;
+  --talos-success-hover: #4ade80;
+  --talos-success-active: #16a34a;
+  --talos-success-subtle-bg: rgba(34, 197, 94, 0.16);
+  --talos-success-subtle-bg-hover: rgba(34, 197, 94, 0.26);
+  --talos-success-subtle-border: rgba(34, 197, 94, 0.35);
+  --talos-success-text: #86efac;
+  --talos-success-solid-bg: #16a34a;
+  --talos-success-solid-text: #ffffff;
+
+  --talos-warning: #f59e0b;
+  --talos-warning-hover: #fbbf24;
+  --talos-warning-active: #d97706;
+  --talos-warning-subtle-bg: rgba(245, 158, 11, 0.16);
+  --talos-warning-subtle-bg-hover: rgba(245, 158, 11, 0.26);
+  --talos-warning-subtle-border: rgba(245, 158, 11, 0.35);
+  --talos-warning-text: #fde047;
+  --talos-warning-solid-bg: #d97706;
+  --talos-warning-solid-text: #ffffff;
+
+  --talos-danger: #ef4444;
+  --talos-danger-hover: #f87171;
+  --talos-danger-active: #dc2626;
+  --talos-danger-subtle-bg: rgba(239, 68, 68, 0.16);
+  --talos-danger-subtle-bg-hover: rgba(239, 68, 68, 0.26);
+  --talos-danger-subtle-border: rgba(239, 68, 68, 0.35);
+  --talos-danger-text: #fca5a5;
+  --talos-danger-solid-bg: #dc2626;
+  --talos-danger-solid-text: #ffffff;
+
+  --talos-info: #0ea5e9;
+  --talos-info-hover: #38bdf8;
+  --talos-info-active: #0284c7;
+  --talos-info-subtle-bg: rgba(14, 165, 233, 0.16);
+  --talos-info-subtle-bg-hover: rgba(14, 165, 233, 0.26);
+  --talos-info-subtle-border: rgba(14, 165, 233, 0.35);
+  --talos-info-text: #7dd3fc;
+  --talos-info-solid-bg: #0284c7;
+  --talos-info-solid-text: #ffffff;
+
+  --talos-purple: #8b5cf6;
+  --talos-purple-hover: #a78bfa;
+  --talos-purple-active: #7c3aed;
+  --talos-purple-subtle-bg: rgba(139, 92, 246, 0.16);
+  --talos-purple-subtle-bg-hover: rgba(139, 92, 246, 0.26);
+  --talos-purple-subtle-border: rgba(139, 92, 246, 0.35);
+  --talos-purple-text: #c4b5fd;
+  --talos-purple-solid-bg: #7c3aed;
+  --talos-purple-solid-text: #ffffff;
+
+  /* Tooltip in Dark Mode */
+  --talos-tooltip-bg: #1e293b;
+  --talos-tooltip-text: #f8fafc;
+  --talos-range-tooltip-bg: #1e293b;
+  --talos-range-tooltip-text: #f8fafc;
+  --talos-range-tick-active-color: #f8fafc;
+
+  /* Component adjustments for Dark Mode */
+  --talos-loading-overlay-bg: rgba(9, 13, 22, 0.8);
+  --talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* System Dark Mode Fallback */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) {
+    --talos-bg-canvas: #090d16;
+    --talos-bg-surface: #0f172a;
+    --talos-bg-subtle: #131d31;
+    --talos-bg-overlay: rgba(3, 7, 18, 0.75);
+
+    --talos-border-subtle: rgba(255, 255, 255, 0.06);
+    --talos-border-default: rgba(255, 255, 255, 0.1);
+    --talos-border-hover: rgba(255, 255, 255, 0.2);
+    --talos-border-focus: #3b82f6;
+    --talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+
+    --talos-text-primary: #f8fafc;
+    --talos-text-secondary: #e2e8f0;
+    --talos-text-muted: #94a3b8;
+    --talos-text-inverse: #090d16;
+
+    --talos-primary: #3b82f6;
+    --talos-primary-hover: #60a5fa;
+    --talos-primary-active: #2563eb;
+    --talos-primary-subtle-bg: rgba(59, 130, 246, 0.16);
+    --talos-primary-subtle-bg-hover: rgba(59, 130, 246, 0.26);
+    --talos-primary-subtle-border: rgba(59, 130, 246, 0.35);
+    --talos-primary-text: #93c5fd;
+
+    --talos-neutral: #94a3b8;
+    --talos-neutral-hover: #cbd5e1;
+    --talos-neutral-active: #f1f5f9;
+    --talos-neutral-subtle-bg: rgba(148, 163, 184, 0.12);
+    --talos-neutral-subtle-bg-hover: rgba(148, 163, 184, 0.2);
+    --talos-neutral-subtle-border: rgba(148, 163, 184, 0.25);
+    --talos-neutral-text: #e2e8f0;
+
+    --talos-success: #22c55e;
+    --talos-success-hover: #4ade80;
+    --talos-success-active: #16a34a;
+    --talos-success-subtle-bg: rgba(34, 197, 94, 0.16);
+    --talos-success-subtle-bg-hover: rgba(34, 197, 94, 0.26);
+    --talos-success-subtle-border: rgba(34, 197, 94, 0.35);
+    --talos-success-text: #86efac;
+
+    --talos-warning: #f59e0b;
+    --talos-warning-hover: #fbbf24;
+    --talos-warning-active: #d97706;
+    --talos-warning-subtle-bg: rgba(245, 158, 11, 0.16);
+    --talos-warning-subtle-bg-hover: rgba(245, 158, 11, 0.26);
+    --talos-warning-subtle-border: rgba(245, 158, 11, 0.35);
+    --talos-warning-text: #fde047;
+
+    --talos-danger: #ef4444;
+    --talos-danger-hover: #f87171;
+    --talos-danger-active: #dc2626;
+    --talos-danger-subtle-bg: rgba(239, 68, 68, 0.16);
+    --talos-danger-subtle-bg-hover: rgba(239, 68, 68, 0.26);
+    --talos-danger-subtle-border: rgba(239, 68, 68, 0.35);
+    --talos-danger-text: #fca5a5;
+
+    --talos-info: #0ea5e9;
+    --talos-info-hover: #38bdf8;
+    --talos-info-active: #0284c7;
+    --talos-info-subtle-bg: rgba(14, 165, 233, 0.16);
+    --talos-info-subtle-bg-hover: rgba(14, 165, 233, 0.26);
+    --talos-info-subtle-border: rgba(14, 165, 233, 0.35);
+    --talos-info-text: #7dd3fc;
+
+    --talos-purple: #8b5cf6;
+    --talos-purple-hover: #a78bfa;
+    --talos-purple-active: #7c3aed;
+    --talos-purple-subtle-bg: rgba(139, 92, 246, 0.16);
+    --talos-purple-subtle-bg-hover: rgba(139, 92, 246, 0.26);
+    --talos-purple-subtle-border: rgba(139, 92, 246, 0.35);
+    --talos-purple-text: #c4b5fd;
+
+    --talos-tooltip-bg: #1e293b;
+    --talos-tooltip-text: #f8fafc;
+    --talos-range-tooltip-bg: #1e293b;
+    --talos-range-tooltip-text: #f8fafc;
+    --talos-range-tick-active-color: #f8fafc;
+  }
+}

package/styles/index.scss

@@ -0,0 +1,15 @@
+/* Main Theme Entrypoint for @talos/components */
+@use './variables';
+@use './typography';
+@use './form-controls';
+@use './buttons';
+@use './button-group';
+@use './tooltip';
+@use './slide-toggle';
+@use './status-tag';
+@use './card';
+@use './dialog';
+@use './drop-zone';
+@use './badge';
+@use './alert';
+@use './timeline';

package/types/weeehaoooz-talos-ui-button-button-group.d.ts

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as i4 from '@weeehaoooz/talos-ui/button/button';
+import { ButtonSize, TalosButtonDirective } from '@weeehaoooz/talos-ui/button/button';
+import * as i3 from '@weeehaoooz/talos-ui/feedback/tooltip';
+
+declare class TalosButtonGroupItemDirective {
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Value associated with this button item in selection mode */
+    readonly value: _angular_core.InputSignal<any>;
+    /** Explicit selected / active state override */
+    readonly selected: _angular_core.WritableSignal<boolean>;
+    /** Focus target method */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TalosButtonGroupItemDirective, "button[talosButtonGroupItem], a[talosButtonGroupItem], [talos-button-group-item]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupVariant = 'attached' | 'segmented' | 'outline' | 'subtle' | 'pill';
+type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
+declare class TalosButtonGroupComponent {
+    private readonly elementRef;
+    /** Layout orientation: horizontal or vertical */
+    readonly orientation: _angular_core.InputSignal<ButtonGroupOrientation>;
+    /** Visual variant style */
+    readonly variant: _angular_core.InputSignal<ButtonGroupVariant>;
+    /** Button size propagation */
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    /** Selection behavior: none, single (radio), or multiple (checkbox) */
+    readonly selectionMode: _angular_core.InputSignal<ButtonGroupSelectionMode>;
+    /** Model value for single or multiple selection */
+    readonly value: _angular_core.ModelSignal<any>;
+    /** Apply fully rounded pill shape */
+    readonly pill: _angular_core.InputSignal<boolean>;
+    /** Disable all buttons in group */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Child items using TalosButtonGroupItemDirective */
+    readonly items: _angular_core.Signal<readonly TalosButtonGroupItemDirective[]>;
+    /** Child directives using TalosButtonDirective */
+    readonly buttons: _angular_core.Signal<readonly TalosButtonDirective[]>;
+    private selectionModel;
+    constructor();
+    private syncChildSelectionStates;
+    onClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalosButtonGroupComponent, "talos-button-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items", "buttons"], ["*"], true, never>;
+}
+
+declare class TalosButtonGroupModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<TalosButtonGroupModule, never, [typeof TalosButtonGroupComponent, typeof TalosButtonGroupItemDirective, typeof i3.TalosTooltipDirective, typeof i3.TalosTooltipComponent, typeof i4.TalosButtonDirective], [typeof TalosButtonGroupComponent, typeof TalosButtonGroupItemDirective, typeof i3.TalosTooltipDirective, typeof i3.TalosTooltipComponent, typeof i4.TalosButtonDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<TalosButtonGroupModule>;
+}
+
+export { TalosButtonGroupComponent, TalosButtonGroupItemDirective, TalosButtonGroupModule };
+export type { ButtonGroupOrientation, ButtonGroupSelectionMode, ButtonGroupVariant };
+//# sourceMappingURL=weeehaoooz-talos-ui-button-button-group.d.ts.map

package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weeehaoooz-talos-ui-button-button-group.d.ts","sources":["../../../projects/talos-ui/button/button-group/button-group-item/button-group-item.directive.ts","../../../projects/talos-ui/button/button-group/button-group/button-group.component.ts","../../../projects/talos-ui/button/button-group/button-group.module.ts"],"mappings":";;;;;;AAEA,cASa,6BAA6B;yBACrB,UAAA,CAAA,WAAA;;oBAGL,aAAA,CAAA,WAAA;;uBAGG,aAAA,CAAA,cAAA;;AAGjB;oDAVW,6BAA6B;sDAA7B,6BAA6B;AAazC;;KCTW,sBAAsB;AAC5B,KAAM,kBAAkB;AACxB,KAAM,wBAAwB;AAEpC,cAqBa,yBAAyB;AACpC;;0BAGoB,aAAA,CAAA,WAAA,CAAA,sBAAA;;sBAGJ,aAAA,CAAA,WAAA,CAAA,kBAAA;;mBAGH,aAAA,CAAA,WAAA,CAAA,UAAA;;4BAGS,aAAA,CAAA,WAAA,CAAA,wBAAA;;oBAGR,aAAA,CAAA,WAAA;;mBAGD,aAAA,CAAA,WAAA;;uBAGI,aAAA,CAAA,WAAA;;oBAGH,aAAA,CAAA,MAAA,UAAA,6BAAA;;sBAGE,aAAA,CAAA,MAAA,UAAA,oBAAA;;;AAqChB;AAWA,mBAAe,UAAU;AA8CzB,qBAAiB,aAAa;oDA1HnB,yBAAyB;sDAAzB,yBAAyB;AAwJrC;;AC1LD,cAgBa,sBAAsB;oDAAtB,sBAAsB;qDAAtB,sBAAsB,iBAAAA,yBAAA,SAAAC,6BAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,oBAAA,WAAAD,yBAAA,SAAAC,6BAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,oBAAA;qDAAtB,sBAAsB;AAAI;;;;","names":["i1.TalosButtonGroupComponent","i2.TalosButtonGroupItemDirective"]}