@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/styles/tokens/colors-usage.css

@@ -0,0 +1,272 @@
+/**
+ * Cocoar Design System - Semantic Color Tokens
+ *
+ * Maps primitive colors to semantic usage contexts.
+ * Uses CSS variable references for automatic dark mode support.
+ *
+ * NAMING PATTERN:
+ *   --coar-{usage}-{category}-{variant}
+ *
+ *   Usage:     background | border | text | icon
+ *   Category:  neutral | brand | accent | semantic-{status}
+ *   Variant:   primary | secondary | tertiary | bold | subtle | disabled
+ */
+
+/* ============================================================================
+   LIGHT MODE (default)
+   ============================================================================ */
+
+:root,
+.light-mode {
+  /* ==========================================================================
+     NEUTRAL - Default UI colors (gray scale)
+     ========================================================================== */
+
+  /* Background */
+  --coar-background-neutral-primary: var(--coar-color-white);
+  --coar-background-neutral-secondary: var(--coar-color-gray-50);
+  --coar-background-neutral-tertiary: var(--coar-color-gray-100);
+  --coar-background-neutral-disabled: var(--coar-color-gray-200);
+  --coar-background-neutral-active: var(--coar-color-gray-200);
+
+  /* Text */
+  --coar-text-neutral-primary: var(--coar-color-gray-900);
+  --coar-text-neutral-secondary: var(--coar-color-gray-800);
+  --coar-text-neutral-tertiary: var(--coar-color-gray-700);
+  --coar-text-neutral-disabled: var(--coar-color-gray-500);
+
+  /* Border */
+  --coar-border-neutral-primary: var(--coar-color-gray-900);
+  --coar-border-neutral-secondary: var(--coar-color-gray-800);
+  --coar-border-neutral-tertiary: var(--coar-color-gray-200);
+  --coar-border-neutral: var(--coar-color-gray-200); /* Alias for tertiary - used in dropdowns */
+
+  /* Icon */
+  --coar-icon-neutral-primary: var(--coar-color-gray-900);
+  --coar-icon-neutral-secondary: var(--coar-color-gray-800);
+  --coar-icon-neutral-tertiary: var(--coar-color-gray-700);
+  --coar-icon-neutral-disabled: var(--coar-color-gray-500);
+
+  /* ==========================================================================
+     BRAND - Company identity colors (slate)
+     ========================================================================== */
+
+  /* Background */
+  --coar-background-brand-primary: var(--coar-color-slate-500);
+  --coar-background-brand-secondary: var(--coar-color-slate-200);
+  --coar-background-brand-tertiary: var(--coar-color-slate-50);
+
+  /* Text */
+  --coar-text-brand-primary: var(--coar-color-slate-800);
+
+  /* Border */
+  --coar-border-brand-primary: var(--coar-color-slate-800);
+
+  /* Icon */
+  --coar-icon-brand-primary: var(--coar-color-slate-800);
+
+  /* ==========================================================================
+     ACCENT - Interactive/action colors (themeable)
+     Used for: primary buttons, links, focus rings, active states
+     THEMING: Override --coar-color-accent-* primitives to change these
+     ========================================================================== */
+
+  /* Background */
+  --coar-background-accent-primary: var(--coar-color-accent-700);
+  --coar-background-accent-secondary: var(--coar-color-accent-200);
+  --coar-background-accent-tertiary: var(--coar-color-accent-50);
+  --coar-background-accent-hover: var(--coar-color-accent-800);
+  --coar-background-accent-active: var(--coar-color-accent-900);
+  --coar-background-accent-tertiary-active: var(--coar-color-accent-300);
+
+  /* Text */
+  --coar-text-accent-primary: var(--coar-color-accent-700);
+  --coar-text-accent-secondary: var(--coar-color-accent-600);
+
+  /* Border */
+  --coar-border-accent-primary: var(--coar-color-accent-500);
+  --coar-border-accent-secondary: var(--coar-color-accent-400);
+
+  /* Icon */
+  --coar-icon-accent-primary: var(--coar-color-accent-700);
+
+  /* ==========================================================================
+     SEMANTIC - Status/feedback colors (success, error, warning, info)
+     Bold = high emphasis (solid backgrounds, strong text)
+     Subtle = low emphasis (light backgrounds, muted borders)
+     ========================================================================== */
+
+  /* Success (green) */
+  --coar-background-semantic-success-bold: var(--coar-color-green-600);
+  --coar-background-semantic-success-subtle: var(--coar-color-green-100);
+  --coar-text-semantic-success-bold: var(--coar-color-green-800);
+  --coar-text-semantic-success-subtle: var(--coar-color-green-700);
+  --coar-border-semantic-success-bold: var(--coar-color-green-800);
+  --coar-border-semantic-success-subtle: var(--coar-color-green-200);
+  --coar-icon-semantic-success-bold: var(--coar-color-green-800);
+  --coar-icon-semantic-success-subtle: var(--coar-color-green-700);
+
+  /* Error (red) */
+  --coar-background-semantic-error-bold: var(--coar-color-red-600);
+  --coar-background-semantic-error-hover: var(--coar-color-red-700);
+  --coar-background-semantic-error-active: var(--coar-color-red-800);
+  --coar-background-semantic-error-subtle: var(--coar-color-red-100);
+  --coar-text-semantic-error-bold: var(--coar-color-red-800);
+  --coar-text-semantic-error-subtle: var(--coar-color-red-700);
+  --coar-border-semantic-error-bold: var(--coar-color-red-800);
+  --coar-border-semantic-error-subtle: var(--coar-color-red-200);
+  --coar-icon-semantic-error-bold: var(--coar-color-red-800);
+  --coar-icon-semantic-error-subtle: var(--coar-color-red-700);
+
+  /* Warning (amber) */
+  --coar-background-semantic-warning-bold: var(--coar-color-amber-600);
+  --coar-background-semantic-warning-subtle: var(--coar-color-amber-100);
+  --coar-text-semantic-warning-bold: var(--coar-color-amber-900);
+  --coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
+  --coar-border-semantic-warning-bold: var(--coar-color-amber-900);
+  --coar-border-semantic-warning-subtle: var(--coar-color-amber-200);
+  --coar-icon-semantic-warning-bold: var(--coar-color-amber-900);
+  --coar-icon-semantic-warning-subtle: var(--coar-color-amber-800);
+
+  /* Info (slate blue) */
+  --coar-background-semantic-info-bold: var(--coar-color-slate-700);
+  --coar-background-semantic-info-subtle: var(--coar-color-slate-100);
+  --coar-text-semantic-info-bold: var(--coar-color-white);
+  --coar-text-semantic-info-subtle: var(--coar-color-slate-700);
+  --coar-border-semantic-info-bold: var(--coar-color-slate-900);
+  --coar-border-semantic-info-subtle: var(--coar-color-slate-200);
+  --coar-icon-semantic-info-bold: var(--coar-color-white);
+  --coar-icon-semantic-info-subtle: var(--coar-color-slate-700);
+
+  /* ==========================================================================
+     SPECIAL PURPOSE
+     ========================================================================== */
+
+  /* White/light text for use on bold/colored surfaces
+     Used for: text on primary buttons, badges, bold semantic backgrounds */
+  --coar-text-on-bold: var(--coar-color-white);
+
+  /* ==========================================================================
+     SURFACE - Elevated surfaces for form controls and interactive elements
+     In light mode, inputs are white. In dark mode, they're slightly elevated.
+     ========================================================================== */
+
+  /* Input surfaces - backgrounds for form controls */
+  --coar-surface-input: var(--coar-color-white);
+  --coar-surface-input-disabled: var(--coar-color-gray-100);
+
+  /* Input borders - more visible than neutral-tertiary */
+  --coar-border-input: var(--coar-color-gray-300);
+  --coar-border-input-hover: var(--coar-color-gray-400);
+}
+
+/* ============================================================================
+   DARK MODE
+   Only override values that change - inherits everything else from light mode
+   ============================================================================ */
+
+:root.dark-mode,
+.dark-mode {
+  /* ==========================================================================
+     NEUTRAL - Invert the gray scale
+     Background uses lighter grays to allow for shadows and depth
+     ========================================================================== */
+
+  /* Background */
+  --coar-background-neutral-primary: var(--coar-color-gray-200);
+  --coar-background-neutral-secondary: var(--coar-color-gray-100);
+  --coar-background-neutral-tertiary: var(--coar-color-gray-50);
+  --coar-background-neutral-active: var(--coar-color-gray-300);
+
+  /* Text */
+  --coar-text-neutral-primary: var(--coar-color-gray-900);
+  --coar-text-neutral-secondary: var(--coar-color-gray-700);
+  --coar-text-neutral-tertiary: var(--coar-color-gray-600);
+
+  /* Border */
+  --coar-border-neutral-primary: var(--coar-color-gray-700);
+  --coar-border-neutral-secondary: var(--coar-color-gray-600);
+  --coar-border-neutral-tertiary: var(--coar-color-gray-300);
+
+  /* Icon */
+  --coar-icon-neutral-primary: var(--coar-color-gray-900);
+  --coar-icon-neutral-secondary: var(--coar-color-gray-700);
+  --coar-icon-neutral-tertiary: var(--coar-color-gray-600);
+
+  /* ==========================================================================
+     ACCENT - Lighter values for visibility on dark backgrounds
+     ========================================================================== */
+
+  /* Background */
+  --coar-background-accent-primary: var(--coar-color-accent-500);
+  --coar-background-accent-secondary: var(--coar-color-accent-300);
+  --coar-background-accent-tertiary: var(--coar-color-accent-100);
+  --coar-background-accent-hover: var(--coar-color-accent-400);
+  --coar-background-accent-active: var(--coar-color-accent-300);
+  --coar-background-accent-tertiary-active: var(--coar-color-accent-400);
+
+  /* Text */
+  --coar-text-accent-primary: var(--coar-color-accent-500);
+  --coar-text-accent-secondary: var(--coar-color-accent-400);
+
+  /* ==========================================================================
+     SEMANTIC - Adjusted for dark backgrounds
+     Bold backgrounds are slightly lighter for better contrast
+     ========================================================================== */
+
+  /* Success */
+  --coar-background-semantic-success-bold: var(--coar-color-green-500);
+  --coar-background-semantic-success-subtle: var(--coar-color-green-200);
+  --coar-text-semantic-success-bold: var(--coar-color-green-900);
+  --coar-text-semantic-success-subtle: var(--coar-color-green-700);
+  --coar-border-semantic-success-bold: var(--coar-color-green-600);
+  --coar-border-semantic-success-subtle: var(--coar-color-green-300);
+  --coar-icon-semantic-success-bold: var(--coar-color-green-900);
+  --coar-icon-semantic-success-subtle: var(--coar-color-green-700);
+
+  /* Error */
+  --coar-background-semantic-error-bold: var(--coar-color-red-500);
+  --coar-background-semantic-error-hover: var(--coar-color-red-400);
+  --coar-background-semantic-error-active: var(--coar-color-red-300);
+  --coar-background-semantic-error-subtle: var(--coar-color-red-200);
+  --coar-text-semantic-error-bold: var(--coar-color-red-900);
+  --coar-text-semantic-error-subtle: var(--coar-color-red-700);
+  --coar-border-semantic-error-bold: var(--coar-color-red-600);
+  --coar-border-semantic-error-subtle: var(--coar-color-red-300);
+  --coar-icon-semantic-error-bold: var(--coar-color-red-900);
+  --coar-icon-semantic-error-subtle: var(--coar-color-red-700);
+
+  /* Warning */
+  --coar-background-semantic-warning-bold: var(--coar-color-amber-400);
+  --coar-background-semantic-warning-subtle: var(--coar-color-amber-200);
+  --coar-text-semantic-warning-bold: var(--coar-color-amber-900);
+  --coar-text-semantic-warning-subtle: var(--coar-color-amber-800);
+  --coar-border-semantic-warning-bold: var(--coar-color-amber-500);
+  --coar-border-semantic-warning-subtle: var(--coar-color-amber-300);
+  --coar-icon-semantic-warning-bold: var(--coar-color-amber-900);
+  --coar-icon-semantic-warning-subtle: var(--coar-color-amber-800);
+
+  /* Info */
+  --coar-background-semantic-info-bold: var(--coar-color-slate-400);
+  --coar-background-semantic-info-subtle: var(--coar-color-slate-300);
+  --coar-text-semantic-info-bold: var(--coar-color-slate-50);
+  --coar-text-semantic-info-subtle: var(--coar-color-slate-700);
+  --coar-border-semantic-info-bold: var(--coar-color-slate-600);
+  --coar-border-semantic-info-subtle: var(--coar-color-slate-400);
+  --coar-icon-semantic-info-bold: var(--coar-color-slate-50);
+  --coar-icon-semantic-info-subtle: var(--coar-color-slate-700);
+
+  /* ==========================================================================
+     SURFACE - Input surfaces in dark mode are slightly elevated from page bg
+     Creates visual depth hierarchy: page bg (gray-200) → card (gray-100) → input (gray-50)
+     Note: In dark mode primitives, gray-50 is #18181b which is darker than page bg
+     ========================================================================== */
+
+  /* Input surfaces - slightly lighter than page background for visibility */
+  --coar-surface-input: var(--coar-color-gray-100);
+  --coar-surface-input-disabled: var(--coar-color-gray-50);
+
+  /* Input borders - visible on dark backgrounds */
+  --coar-border-input: var(--coar-color-gray-400);
+  --coar-border-input-hover: var(--coar-color-gray-500);
+}

package/styles/tokens/components-shared.css

@@ -0,0 +1,42 @@
+/**
+ * Cocoar Design System - Shared Component Size Tokens
+ *
+ * These tokens define the shared sizing system used across
+ * buttons, inputs, labels, and other form elements.
+ *
+ * Component-specific tokens (button, input, label, card, etc.)
+ * are now defined in their respective component token files
+ * within @cocoar/ui/components.
+ */
+
+:root {
+  /* ========================================
+     COMPONENT SIZE SYSTEM
+     Shared sizing tokens for consistent component sizes
+     across buttons, inputs, labels, and other form elements
+     ======================================== */
+
+  /* Component Heights */
+  --coar-component-xs-height: 27px;
+  --coar-component-s-height: 32px;
+  --coar-component-m-height: 40px;
+  --coar-component-l-height: 48px;
+
+  /* Component Font Sizes */
+  --coar-component-xs-font-size: 11px;
+  --coar-component-s-font-size: 13px;
+  --coar-component-m-font-size: 14px;
+  --coar-component-l-font-size: 16px;
+
+  /* Component Label Font Sizes (slightly smaller for labels) */
+  --coar-component-xs-label-font-size: 11px;
+  --coar-component-s-label-font-size: 13px;
+  --coar-component-m-label-font-size: 14px;
+  --coar-component-l-label-font-size: 15px;
+
+  /* Component Label Margins */
+  --coar-component-xs-label-margin: 4px;
+  --coar-component-s-label-margin: 6px;
+  --coar-component-m-label-margin: 8px;
+  --coar-component-l-label-margin: 10px;
+}

package/styles/tokens/elevation.css

@@ -0,0 +1,30 @@
+/**
+ * Cocoar Design System - Elevation Tokens
+ *
+ * Semantic elevation levels for UI depth hierarchy.
+ * Elevation describes how "raised" an element appears from the surface.
+ *
+ * These tokens reference shadow primitives from shadows.css,
+ * providing a semantic layer for component usage.
+ */
+
+:root {
+  /* ========================================
+     SEMANTIC ELEVATION (usage intent)
+     ======================================== */
+
+  /* No elevation - flat on the surface */
+  --coar-elevation-none: none;
+
+  /* Low elevation - subtle lift for grouped content */
+  --coar-elevation-low: var(--coar-shadow-s);
+
+  /* Medium elevation - cards, panels, raised containers */
+  --coar-elevation-medium: var(--coar-shadow-m);
+
+  /* High elevation - dropdowns, popovers, tooltips */
+  --coar-elevation-high: var(--coar-shadow-l);
+
+  /* Highest elevation - modals, dialogs, overlays */
+  --coar-elevation-highest: var(--coar-shadow-xl);
+}

package/styles/tokens/focus.css

@@ -0,0 +1,30 @@
+/**
+ * Focus Tokens
+ * Part of the global token set (not component-specific)
+ * Used by: buttons, inputs, dropdowns, checkboxes, tabs, lists, menus, etc.
+ */
+
+:root {
+  /* The visible color of the focus ring */
+  --coar-focus-color: var(--coar-color-accent-300);
+
+  /* The width of the focus outline or ring */
+  --coar-focus-width: 3px;
+
+  /* Optional offset between the component and the ring */
+  --coar-focus-offset: 2px;
+
+  /* Style: solid, dashed, dotted (rare), or even none */
+  --coar-focus-style: solid;
+
+  /* If you want a shadow-based focus instead of outline */
+  --coar-focus-shadow: 0 0 0 var(--coar-focus-width) var(--coar-focus-color);
+}
+
+/* Dark mode override */
+:root.dark-mode,
+.dark-mode {
+  /* Typically slightly brighter or desaturated…
+     You can tune this later via semantic building blocks */
+  --coar-focus-color: var(--coar-color-accent-300);
+}

package/styles/tokens/layers.css

@@ -0,0 +1,17 @@
+/**
+ * Cocoar Design System - Layering Tokens
+ *
+ * Z-index values used for UI layering.
+ *
+ * Notes:
+ * - These are intentionally minimal. Overlays manage stacking by adding small runtime offsets.
+ * - Backdrop must always be below its overlay host.
+ */
+
+:root {
+  /* Overlay hosts (menus, tooltips, dialogs, etc.) */
+  --coar-z-overlay: 1000;
+
+  /* Modal backdrop behind overlays */
+  --coar-z-overlay-backdrop: 999;
+}

package/styles/tokens/menu.css

@@ -0,0 +1,53 @@
+/**
+ * Cocoar Design System - Menu Tokens
+ * Theming tokens for coar-menu and menu items.
+ *
+ * Default styling optimized for context menus (overlays).
+ * For sidebar navigation, these can be overridden via CSS variables.
+ */
+
+:root {
+  /* Menu container background - clean white for context menus */
+  --coar-menu-background: var(--coar-background-neutral-primary, #ffffff);
+
+  /* Item interactive states - subtle hover, accent for active */
+  --coar-menu-item-background-hover: var(--coar-background-neutral-secondary, #f5f5f5);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-secondary, #f5f5f5);
+  --coar-menu-item-background-open: var(--coar-background-accent-tertiary, #e6f0ff);
+  --coar-menu-item-background-active: var(--coar-background-accent-tertiary, #e6f0ff);
+
+  /* Text color for active items */
+  --coar-menu-item-text-active: var(--coar-text-accent-primary, #0066cc);
+}
+
+:root.dark-mode,
+.dark-mode,
+[data-theme='dark'] {
+  /* Menu container background - dark, subtle for context menus */
+  --coar-menu-background: var(--coar-color-gray-100, #27272a);
+
+  /* Item interactive states - subtle hover/active for context menus */
+  --coar-menu-item-background-hover: var(--coar-color-gray-200, #3f3f46);
+  --coar-menu-item-background-focus: var(--coar-color-gray-200, #3f3f46);
+  --coar-menu-item-background-open: var(--coar-color-gray-200, #3f3f46);
+  --coar-menu-item-background-active: var(--coar-color-gray-200, #3f3f46);
+}
+
+/* Sidebar variant - darker, more grounded colors for permanent navigation */
+.coar-menu--sidebar {
+  --coar-menu-background: var(--coar-background-neutral-secondary, #ededed);
+  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #d9d9d9);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #d9d9d9);
+  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #d9d9d9);
+  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #d9d9d9);
+}
+
+:root.dark-mode .coar-menu--sidebar,
+.dark-mode .coar-menu--sidebar,
+[data-theme='dark'] .coar-menu--sidebar {
+  --coar-menu-background: var(--coar-background-neutral-secondary, #27272a);
+  --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #3f3f46);
+  --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #3f3f46);
+  --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #3f3f46);
+  --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #3f3f46);
+}

package/styles/tokens/motion.css

@@ -0,0 +1,93 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Motion / Animation
+ * Consistent timing and easing for UI transitions
+ */
+
+:root {
+  /* ========================================
+     DURATION
+     ========================================
+     How long animations take to complete.
+     Use shorter durations for small/simple changes,
+     longer for complex/large movements.
+  */
+
+  /* Instant - for color changes, opacity */
+  --coar-duration-instant: 0ms;
+
+  /* Fast - micro-interactions, hover states, focus rings */
+  --coar-duration-fast: 100ms;
+
+  /* Normal - buttons, inputs, small movements */
+  --coar-duration-normal: 200ms;
+
+  /* Slow - dropdowns, panels, medium movements */
+  --coar-duration-slow: 300ms;
+
+  /* Slower - modals, large overlays, page transitions */
+  --coar-duration-slower: 400ms;
+
+  /* Slowest - complex animations, onboarding */
+  --coar-duration-slowest: 500ms;
+
+  /* ========================================
+     EASING
+     ========================================
+     How animations accelerate and decelerate.
+     Based on Material Design motion principles.
+  */
+
+  /* Linear - constant speed, use sparingly */
+  --coar-ease-linear: linear;
+
+  /* Ease Out - starts fast, ends slow (entering elements) */
+  --coar-ease-out: cubic-bezier(0, 0, 0.2, 1);
+
+  /* Ease In - starts slow, ends fast (exiting elements) */
+  --coar-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* Ease In-Out - slow start and end (moving elements) */
+  --coar-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Bounce - slight overshoot for playful interactions */
+  --coar-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ========================================
+     COMMON TRANSITIONS
+     ========================================
+     Pre-composed transitions for common use cases.
+  */
+
+  /* Default transition for most interactive elements */
+  --coar-transition-default: all var(--coar-duration-normal) var(--coar-ease-out);
+
+  /* Fast transition for hover/focus states */
+  --coar-transition-fast: all var(--coar-duration-fast) var(--coar-ease-out);
+
+  /* Color-only transitions */
+  --coar-transition-colors: color var(--coar-duration-fast) var(--coar-ease-out),
+    background-color var(--coar-duration-fast) var(--coar-ease-out),
+    border-color var(--coar-duration-fast) var(--coar-ease-out);
+
+  /* Transform transitions (scale, translate) */
+  --coar-transition-transform: transform var(--coar-duration-normal) var(--coar-ease-out);
+
+  /* Opacity transitions */
+  --coar-transition-opacity: opacity var(--coar-duration-normal) var(--coar-ease-out);
+
+  /* Shadow transitions (elevation changes) */
+  --coar-transition-shadow: box-shadow var(--coar-duration-normal) var(--coar-ease-out);
+}
+
+/* Reduced motion preference - respect user settings */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --coar-duration-instant: 0ms;
+    --coar-duration-fast: 0ms;
+    --coar-duration-normal: 0ms;
+    --coar-duration-slow: 0ms;
+    --coar-duration-slower: 0ms;
+    --coar-duration-slowest: 0ms;
+  }
+}

package/styles/tokens/new-components.css

@@ -0,0 +1,104 @@
+/**
+ * Cocoar Design System - New Component Tokens
+ * Tokens for: Switch, Progress Bar, Spinner, Navbar, Breadcrumb, Pagination, Dialog, Toast
+ */
+
+:root {
+  /* ==========================================================================
+     SWITCH
+     ========================================================================== */
+
+  /* Track dimensions */
+  --coar-switch-s-track-width: 32px;
+  --coar-switch-s-track-height: 18px;
+  --coar-switch-m-track-width: 40px;
+  --coar-switch-m-track-height: 22px;
+  --coar-switch-l-track-width: 48px;
+  --coar-switch-l-track-height: 26px;
+
+  /* Thumb dimensions (circle inside track) */
+  --coar-switch-s-thumb-size: 14px;
+  --coar-switch-m-thumb-size: 18px;
+  --coar-switch-l-thumb-size: 22px;
+
+  /* Thumb offset from track edge */
+  --coar-switch-thumb-offset: 2px;
+
+  /* ==========================================================================
+     PROGRESS BAR
+     ========================================================================== */
+
+  --coar-progress-bar-s-height: 2px;
+  --coar-progress-bar-m-height: 4px;
+  --coar-progress-bar-l-height: 8px;
+  --coar-progress-bar-radius: var(--coar-radius-full);
+  --coar-progress-bar-background: var(--coar-background-neutral-tertiary);
+
+  /* ==========================================================================
+     SPINNER
+     ========================================================================== */
+
+  --coar-spinner-xs-size: 16px;
+  --coar-spinner-s-size: 20px;
+  --coar-spinner-m-size: 24px;
+  --coar-spinner-l-size: 32px;
+  --coar-spinner-stroke-width: 2.5;
+  --coar-spinner-color: var(--coar-background-accent-primary);
+
+  /* ==========================================================================
+     NAVBAR
+     ========================================================================== */
+
+  --coar-navbar-height: 56px;
+  --coar-navbar-padding-x: var(--coar-spacing-l);
+  --coar-navbar-background: var(--coar-background-neutral-primary);
+  --coar-navbar-border-color: var(--coar-border-neutral-tertiary);
+
+  /* ==========================================================================
+     BREADCRUMB
+     ========================================================================== */
+
+  --coar-breadcrumb-separator-color: var(--coar-text-neutral-tertiary);
+  --coar-breadcrumb-separator-gap: var(--coar-spacing-s);
+  --coar-breadcrumb-font-size: var(--coar-component-m-font-size);
+  --coar-breadcrumb-active-color: var(--coar-text-neutral-primary);
+  --coar-breadcrumb-link-color: var(--coar-text-accent-primary);
+
+  /* ==========================================================================
+     PAGINATION
+     ========================================================================== */
+
+  --coar-pagination-button-size: 32px;
+  --coar-pagination-gap: var(--coar-spacing-xs);
+  --coar-pagination-font-size: var(--coar-component-s-font-size);
+  --coar-pagination-active-background: var(--coar-background-accent-primary);
+  --coar-pagination-active-color: var(--coar-text-on-bold);
+  --coar-pagination-hover-background: var(--coar-background-neutral-tertiary);
+
+  /* ==========================================================================
+     DIALOG
+     ========================================================================== */
+
+  --coar-dialog-s-width: 400px;
+  --coar-dialog-m-width: 560px;
+  --coar-dialog-l-width: 720px;
+  --coar-dialog-padding: var(--coar-spacing-l);
+  --coar-dialog-header-gap: var(--coar-spacing-m);
+  --coar-dialog-border-radius: var(--coar-radius-l);
+  --coar-dialog-background: var(--coar-background-neutral-primary);
+
+  /* ==========================================================================
+     TOAST
+     ========================================================================== */
+
+  --coar-toast-width: 380px;
+  --coar-toast-padding: var(--coar-spacing-m);
+  --coar-toast-gap: var(--coar-spacing-m);
+  --coar-toast-border-radius: var(--coar-radius-m);
+  --coar-toast-border-width: 3px;
+  --coar-toast-background: var(--coar-background-neutral-primary);
+  --coar-toast-container-offset: var(--coar-spacing-m);
+  --coar-toast-stack-gap: var(--coar-spacing-s);
+  --coar-toast-progress-height: 3px;
+  --coar-toast-max-stack: 5;
+}

package/styles/tokens/radius.css

@@ -0,0 +1,15 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Border Radius
+ * Auto-generated from Figma - Do not edit manually
+ */
+
+:root {
+  --coar-radius-full: 999px;
+  --coar-radius-l: 5px;
+  --coar-radius-m: 4px;
+  --coar-radius-s: 3px;
+  --coar-radius-xl: 6px;
+  --coar-radius-xs: 2px;
+  --coar-radius-xxs: 1px;
+}