@adamarant/designsystem 0.11.2

package/src/tokens/colors.css

@@ -0,0 +1,256 @@
+/* ==========================================================================
+   Design Tokens: Colors
+   Refined zinc palette, editorial warmth.
+   Light-first with elegant dark mode. Override any --ds-* variable to re-theme.
+   ========================================================================== */
+
+/* Light theme (default) */
+:root,
+[data-theme="light"] {
+  /* --- Background — page-level only --- */
+  --ds-color-bg: #fafafa;
+
+  /* --- Surface — everything on top of bg --- */
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-hover: #fafafa;
+  --ds-color-surface-muted: #e4e4e7;
+  --ds-color-surface-muted-hover: #d4d4d8;
+  --ds-color-surface-elevated: #f4f4f5;
+  --ds-color-surface-elevated-hover: #e4e4e7;
+  --ds-color-surface-active: #f4f4f5; /* same value as elevated, different semantics — selected/active state */
+
+  /* @deprecated — use surface-* instead. Will be removed in a future major.
+     Kept for backward compatibility with consumer projects. */
+  --ds-color-bg-subtle: #ffffff;
+  --ds-color-bg-muted: #e4e4e7;
+  --ds-color-bg-muted-hover: #d4d4d8;
+  --ds-color-bg-muted-active: #a1a1aa;
+  --ds-color-bg-elevated: #f4f4f5;
+  --ds-color-bg-elevated-hover: #e4e4e7;
+
+  /* --- Text — zinc hierarchy ---
+     Contrast ratios on --ds-color-bg (#fafafa):
+     --text:           #09090b → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #52525b → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #71717a → ~4.2:1  ✅ WCAG AA (large text), close to AAA
+     --text-disabled:  #d4d4d8 → ~1.5:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
+  --ds-color-text: #09090b;
+  --ds-color-text-secondary: #52525b;
+  --ds-color-text-tertiary: #71717a;
+  --ds-color-text-disabled: #d4d4d8;
+
+  /* --- Inverted (primary buttons: dark bg + light text) --- */
+  --ds-color-inverted: #18181b;
+  --ds-color-on-inverted: #fafafa;
+
+  /* --- Borders — solid zinc --- */
+  --ds-color-border: #e4e4e7;
+  --ds-color-border-hover: #d4d4d8;
+  --ds-color-border-active: #a1a1aa;
+  --ds-color-border-subtle: #f4f4f5;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #3f3f46;
+  --ds-color-interactive-hover: #27272a;
+  --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
+  --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
+
+  /* --- Brand (override per-project to match your identity) --- */
+  --ds-color-brand: #2563eb;
+  --ds-color-brand-hover: #1d4ed8;
+  --ds-color-brand-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-brand-border: rgba(37, 99, 235, 0.2);
+  --ds-color-on-brand: #ffffff;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.5);
+  --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
+
+  /* @deprecated — use surface-hover / surface-active instead */
+  --ds-color-overlay-hover: rgba(0, 0, 0, 0.08);
+  --ds-color-overlay-active: rgba(0, 0, 0, 0.12);
+
+  /* @deprecated — use color-surface + backdrop-filter for glass effect.
+     Too specific as tokens. Kept for backward compat. */
+  --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
+  --ds-color-nav-border: rgba(228, 228, 231, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #09090b;
+  --ds-color-selection-text: #fafafa;
+
+  /* --- Shadows --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #d4d4d4;
+  --ds-scrollbar-thumb-hover: #a3a3a3;
+
+  color-scheme: light;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  /* --- Background — page-level only --- */
+  --ds-color-bg: #09090b;
+
+  /* --- Surface --- */
+  --ds-color-surface: #0f0f11;
+  --ds-color-surface-hover: #18181b;
+  --ds-color-surface-muted: #18181b;
+  --ds-color-surface-muted-hover: #212124;
+  --ds-color-surface-elevated: #2d2d31;
+  --ds-color-surface-elevated-hover: #3a3a40;
+  --ds-color-surface-active: #27272a;
+
+  /* @deprecated */
+  --ds-color-bg-subtle: #0f0f11;
+  --ds-color-bg-muted: #18181b;
+  --ds-color-bg-muted-hover: #212124;
+  --ds-color-bg-muted-active: #3f3f46;
+  --ds-color-bg-elevated: #2d2d31;
+  --ds-color-bg-elevated-hover: #3a3a40;
+
+  /* --- Text ---
+     Contrast ratios on --ds-color-bg (#09090b):
+     --text:           #fafafa → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #a1a1aa → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #71717a → ~3.8:1  ⚠ Decorative/non-essential only (does not meet 4.5:1)
+     --text-disabled:  #3f3f46 → ~2.0:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
+  --ds-color-text: #fafafa;
+  --ds-color-text-secondary: #a1a1aa;
+  --ds-color-text-tertiary: #71717a;
+  --ds-color-text-disabled: #3f3f46;
+
+  /* --- Inverted (primary buttons: light bg + dark text) --- */
+  --ds-color-inverted: #fafafa;
+  --ds-color-on-inverted: #09090b;
+
+  /* --- Borders --- */
+  --ds-color-border: #27272a;
+  --ds-color-border-hover: #3f3f46;
+  --ds-color-border-active: #52525b;
+  --ds-color-border-subtle: #18181b;
+
+  /* --- Interactive --- */
+  --ds-color-interactive: #d4d4d8;
+  --ds-color-interactive-hover: #fafafa;
+  --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
+  --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
+
+  /* --- Brand --- */
+  --ds-color-brand: #3b82f6;
+  --ds-color-brand-hover: #60a5fa;
+  --ds-color-brand-subtle: rgba(59, 130, 246, 0.1);
+  --ds-color-brand-border: rgba(59, 130, 246, 0.2);
+  --ds-color-on-brand: #ffffff;
+
+  /* --- Overlays --- */
+  --ds-color-overlay: rgba(0, 0, 0, 0.7);
+  --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
+
+  /* @deprecated */
+  --ds-color-overlay-hover: rgba(255, 255, 255, 0.1);
+  --ds-color-overlay-active: rgba(255, 255, 255, 0.15);
+
+  /* @deprecated */
+  --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
+  --ds-color-nav-border: rgba(39, 39, 42, 0.6);
+
+  /* --- Selection --- */
+  --ds-color-selection-bg: #fafafa;
+  --ds-color-selection-text: #09090b;
+
+  /* --- Shadows (stronger in dark) --- */
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* --- Scrollbar --- */
+  --ds-scrollbar-thumb: #27272a;
+  --ds-scrollbar-thumb-hover: #3f3f46;
+
+  color-scheme: dark;
+}
+
+/* Shared tokens (same in both themes) */
+:root {
+  /* --- Static (theme-independent, never change between light/dark) --- */
+  --ds-color-static-white: #fafafa;
+  --ds-color-static-black: #09090b;
+
+  /* --- Semantic Status --- */
+  --ds-color-success: #16a34a;
+  --ds-color-success-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-success-border: rgba(22, 163, 74, 0.2);
+
+  --ds-color-warning: #d97706;
+  --ds-color-warning-subtle: rgba(217, 119, 6, 0.1);
+  --ds-color-warning-border: rgba(217, 119, 6, 0.2);
+
+  --ds-color-error: #dc2626;
+  --ds-color-error-subtle: rgba(220, 38, 38, 0.1);
+  --ds-color-error-border: rgba(220, 38, 38, 0.2);
+
+  --ds-color-info: #2563eb;
+  --ds-color-info-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-info-border: rgba(37, 99, 235, 0.2);
+
+  /* @deprecated — use color-success/warning/error/info directly.
+     The -solid variant was identical in value and confusing in name.
+     Kept for backward compatibility. */
+  --ds-color-success-solid: #16a34a;
+  --ds-color-warning-solid: #d97706;
+  --ds-color-error-solid: #dc2626;
+  --ds-color-info-solid: #2563eb;
+
+  /* --- Accent Colors (for badges, categories) --- */
+  --ds-color-accent-blue: #2563eb;
+  --ds-color-accent-purple: #7c3aed;
+  --ds-color-accent-green: #16a34a;
+  --ds-color-accent-orange: #d97706;
+  --ds-color-accent-blue-subtle: rgba(37, 99, 235, 0.1);
+  --ds-color-accent-blue-border: rgba(37, 99, 235, 0.2);
+  --ds-color-accent-purple-subtle: rgba(124, 58, 237, 0.1);
+  --ds-color-accent-purple-border: rgba(124, 58, 237, 0.2);
+  --ds-color-accent-green-subtle: rgba(22, 163, 74, 0.1);
+  --ds-color-accent-green-border: rgba(22, 163, 74, 0.2);
+  --ds-color-accent-orange-subtle: rgba(217, 119, 6, 0.1);
+  --ds-color-accent-orange-border: rgba(217, 119, 6, 0.2);
+}
+
+/* Dark overrides for status/accent (brighter for contrast) */
+[data-theme="dark"] {
+  --ds-color-success: #4ade80;
+  --ds-color-success-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-success-border: rgba(74, 222, 128, 0.2);
+
+  --ds-color-warning: #fbbf24;
+  --ds-color-warning-subtle: rgba(251, 191, 36, 0.1);
+  --ds-color-warning-border: rgba(251, 191, 36, 0.2);
+
+  --ds-color-error: #f87171;
+  --ds-color-error-subtle: rgba(248, 113, 113, 0.1);
+  --ds-color-error-border: rgba(248, 113, 113, 0.2);
+
+  --ds-color-info: #60a5fa;
+  --ds-color-info-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-info-border: rgba(96, 165, 250, 0.2);
+
+  --ds-color-accent-blue: #60a5fa;
+  --ds-color-accent-purple: #a78bfa;
+  --ds-color-accent-green: #4ade80;
+  --ds-color-accent-orange: #fbbf24;
+  --ds-color-accent-blue-subtle: rgba(96, 165, 250, 0.1);
+  --ds-color-accent-blue-border: rgba(96, 165, 250, 0.2);
+  --ds-color-accent-purple-subtle: rgba(167, 139, 250, 0.1);
+  --ds-color-accent-purple-border: rgba(167, 139, 250, 0.2);
+  --ds-color-accent-green-subtle: rgba(74, 222, 128, 0.1);
+  --ds-color-accent-green-border: rgba(74, 222, 128, 0.2);
+  --ds-color-accent-orange-subtle: rgba(251, 191, 36, 0.1);
+  --ds-color-accent-orange-border: rgba(251, 191, 36, 0.2);
+}

package/src/tokens/index.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   Design Tokens — All tokens in one import
+
+   To override: just redeclare any --ds-* variable in your project's CSS.
+   Your values win. Nothing breaks.
+   ========================================================================== */
+
+@import './colors.css';
+@import './typography.css';
+@import './spacing.css';
+@import './shadows.css';

package/src/tokens/shadows.css

@@ -0,0 +1,55 @@
+/* ==========================================================================
+   Design Tokens: Effects & Transitions
+   Expo easing, smooth editorial motion.
+   Shadows are defined per-theme in colors.css.
+   ========================================================================== */
+
+:root {
+  /* --- Focus Ring --- */
+  --ds-ring-width: 2px;
+  --ds-ring-offset: 2px;
+  --ds-ring-color: var(--ds-color-border-active);
+
+  /* --- Transitions --- */
+  --ds-duration-fast: 100ms;
+  --ds-duration-normal: 200ms;
+  --ds-duration-slow: 400ms;
+  --ds-duration-slower: 800ms;
+
+  --ds-ease-default: ease;
+  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Backdrop Blur --- */
+  --ds-blur-sm: 4px;
+  --ds-blur-md: 12px;
+  --ds-blur-lg: 20px;
+
+  /* --- Indicator Sizes --- */
+  --ds-dot-size: 6px;
+
+  /* --- Accent Border --- */
+  --ds-accent-border-width: 3px;
+
+  /* --- Popover/Tooltip Offset --- */
+  --ds-offset-sm: 4px;
+  --ds-offset-md: 8px;
+
+  /* --- Opacity --- */
+  --ds-opacity-disabled: 0.5;
+}
+
+/* --- Reduced Motion ---
+   Zero out duration tokens so every component that uses
+   var(--ds-duration-*) transitions instantly.
+   Keyframe animations are handled per-component.
+   -------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ds-duration-fast: 0s;
+    --ds-duration-normal: 0s;
+    --ds-duration-slow: 0s;
+    --ds-duration-slower: 0s;
+  }
+}

package/src/tokens/spacing.css

@@ -0,0 +1,82 @@
+/* ==========================================================================
+   Design Tokens: Spacing & Layout
+   Generous whitespace, responsive sections.
+   ========================================================================== */
+
+/* Breakpoints (reference only — CSS cannot use vars in @media)
+   --ds-breakpoint-sm:  640px
+   --ds-breakpoint-md:  768px
+   --ds-breakpoint-lg:  1024px
+   --ds-breakpoint-xl:  1280px
+*/
+
+:root {
+  /* --- Spacing Scale --- */
+  --ds-space-0: 0;
+  --ds-space-0-5: 0.125rem;  /* 2px */
+  --ds-space-1: 0.25rem;     /* 4px */
+  --ds-space-1-5: 0.375rem;  /* 6px */
+  --ds-space-2: 0.5rem;      /* 8px */
+  --ds-space-2-5: 0.625rem;  /* 10px */
+  --ds-space-3: 0.75rem;     /* 12px */
+  --ds-space-4: 1rem;        /* 16px */
+  --ds-space-5: 1.25rem;     /* 20px */
+  --ds-space-6: 1.5rem;      /* 24px */
+  --ds-space-8: 2rem;        /* 32px */
+  --ds-space-10: 2.5rem;     /* 40px */
+  --ds-space-12: 3rem;       /* 48px */
+  --ds-space-16: 4rem;       /* 64px */
+  --ds-space-20: 5rem;       /* 80px */
+  --ds-space-24: 6rem;       /* 96px */
+  --ds-space-32: 8rem;       /* 128px */
+
+  /* --- Component Height Scale ---
+       Inline components at the same size tier share the same height.
+       Button SM + Input SM = both 32px. Always.
+       Based on Radix Themes convention (multiples of 8).
+
+       --ds-size-1: 24px — xs (btn--xs, input--xs)
+       --ds-size-2: 32px — sm (btn--sm, input--sm)
+       --ds-size-3: 40px — md (btn, input — default)
+       --ds-size-4: 48px — lg (btn--lg, input--lg)
+       --ds-size-5: 56px — xl (btn--xl)
+       --ds-size-6: 64px — 2xl (btn--2xl) */
+  --ds-size-1: 1.5rem;
+  --ds-size-2: 2rem;
+  --ds-size-3: 2.5rem;
+  --ds-size-4: 3rem;
+  --ds-size-5: 3.5rem;
+  --ds-size-6: 4rem;
+
+  /* --- Component-Specific Heights --- */
+  --ds-search-bar-height: 3.5rem;
+  --ds-toolbar-row-height: 2.5rem;
+
+  /* --- Section Padding (responsive, generous) --- */
+  --ds-section-padding: clamp(80px, 12vw, 160px);
+
+  /* --- Container --- */
+  --ds-container-max: 1440px;
+  --ds-container-padding: clamp(8px, 5vw, 80px);
+  --ds-container-sm: 640px;
+  --ds-container-md: 768px;
+  --ds-container-lg: 1024px;
+
+  /* --- Border Radius (refined, slightly larger) --- */
+  --ds-radius-none: 0;
+  --ds-radius-sm: 6px;
+  --ds-radius-md: 8px;
+  --ds-radius-lg: 12px;
+  --ds-radius-xl: 16px;
+  --ds-radius-2xl: 20px;
+  --ds-radius-full: 9999px;
+
+  /* --- Z-Index Scale --- */
+  --ds-z-base: 0;
+  --ds-z-dropdown: 50;
+  --ds-z-sticky: 60;
+  --ds-z-overlay: 80;
+  --ds-z-modal: 100;
+  --ds-z-toast: 150;
+  --ds-z-tooltip: 200;
+}