astralkit 0.2.0 → 0.3.0

package/astralkit-theme.css

@@ -1,8 +1,8 @@
-@theme {
+:root {
   /* ══════════════════════════════════════════════════════════
-     AstralKit Design Tokens
+     AstralKit Design Tokens (Tailwind v3)
      Default: Black & white neutral theme.
-     Override any variable in your project's @theme to brand it.
+     Override any variable in your own :root block to brand it.
      ══════════════════════════════════════════════════════════ */
 
   /* ── Neutral scale (full 11-shade ramp) ── */
@@ -63,12 +63,12 @@
   --color-ak-text-disabled:   #d4d4d4;
   --color-ak-text-inverse:    #ffffff;
   --color-ak-text-link:       #000000;
-  --color-ak-text-placeholder:#a3a3a3;
+  --color-ak-text-placeholder:#525252;
 
   /* ── Semantic border ── */
-  --color-ak-border:          #e5e5e5;
-  --color-ak-border-subtle:   #f5f5f5;
-  --color-ak-border-strong:   #d4d4d4;
+  --color-ak-border:          #dee2e6;
+  --color-ak-border-subtle:   #e5e5e5;
+  --color-ak-border-strong:   #525252;
   --color-ak-border-focus:    #000000;
 
   /* ── Status colors ── */
@@ -83,6 +83,8 @@
   --color-ak-danger-text:     #b91c1c;
   --color-ak-info:            #2563eb;
   --color-ak-info-subtle:     #eff6ff;
+  --color-ak-pink:            #db2777;
+  --color-ak-pink-subtle:     #fdf2f8;
   --color-ak-info-text:       #1d4ed8;
 
   /* ── Font families ── */
@@ -98,8 +100,8 @@
   --text-ak-lg:     1.125rem;
   --text-ak-xl:     1.25rem;
   --text-ak-2xl:    1.5rem;
-  --text-ak-3xl:    1.875rem;
-  --text-ak-4xl:    2.25rem;
+  --text-ak-3xl:    2rem;
+  --text-ak-4xl:    2.5rem;
   --text-ak-5xl:    3rem;
   --text-ak-6xl:    3.75rem;
   --text-ak-7xl:    4.5rem;
@@ -151,13 +153,16 @@
   --leading-ak-snug:    1.375;
   --leading-ak-normal:  1.5;
   --leading-ak-relaxed: 1.625;
+  --leading-ak-prose:   1.75;
   --leading-ak-loose:   2;
 
   /* ── Letter Spacing ── */
   --tracking-ak-tighter: -0.05em;
   --tracking-ak-tight:   -0.025em;
+  --tracking-ak-subtle:  -0.01em;
   --tracking-ak-normal:  0em;
   --tracking-ak-wide:    0.025em;
+  --tracking-ak-section: 0.08em;
   --tracking-ak-wider:   0.05em;
   --tracking-ak-widest:  0.1em;
 
@@ -178,8 +183,11 @@
   --spacing-ak-6:    3rem;
   --spacing-ak-7:    3.5rem;
   --spacing-ak-8:    4rem;
+  --spacing-ak-9:    4.5rem;
   --spacing-ak-10:   5rem;
+  --spacing-ak-11:   5.5rem;
   --spacing-ak-12:   6rem;
+  --spacing-ak-14:   7rem;
   --spacing-ak-16:   8rem;
   --spacing-ak-20:   10rem;
   --spacing-ak-24:   12rem;
@@ -206,6 +214,14 @@
   --height-ak-control-lg:   3rem;      /* 48px — prominent CTAs */
   --height-ak-control-xl:   3.5rem;    /* 56px — hero CTAs */
 
+  /* ── Table row heights ── */
+  --height-ak-row-compact:     2.5rem;    /* 40px */
+  --height-ak-row-default:     3rem;      /* 48px */
+  --height-ak-row-comfortable: 3.25rem;   /* 52px */
+
+  /* ── Fluid page margin (16px mobile → 80px desktop) ── */
+  --spacing-ak-fl-page-margin: clamp(1rem, 0.26rem + 3.7vw, 5rem);
+
   /* ── Fluid spacing (viewport: 320px → 1400px) ──
      Scales smoothly. Use p-ak-fl-*, gap-ak-fl-*, m-ak-fl-*, etc.
      Named sizes (xs → 3xl) for intuitive selection. ── */
@@ -232,6 +248,7 @@
   --spacing-ak-fl-xl-3xl: clamp(3rem,     0.57rem + 8.33vw, 9rem);
 
   /* ── Border Radius ── */
+  --radius-ak-xs:    0.125rem;
   --radius-ak-none:  0;
   --radius-ak-sm:    0.25rem;
   --radius-ak-md:    0.5rem;
@@ -249,6 +266,25 @@
   --shadow-ak-xl:    0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
   --shadow-ak-2xl:   0 24px 60px rgba(0,0,0,0.14);
 
+  /* ── Neobrutalist ──
+     B&W brutalism toolkit. The core rule: face color is NEVER the same
+     as shadow/ink color. This prevents "invisible shadow" bugs where a
+     black button on a black shadow disappears. */
+  --color-ak-brutal-ink:        #000000;
+  --color-ak-brutal-face:       #ffffff;
+  --color-ak-brutal-face-dark:  #262626;
+  --color-ak-brutal-on-face:    #000000;
+  --color-ak-brutal-on-face-dark: #ffffff;
+  --shadow-ak-brutal-xs:  2px 2px 0 0 var(--color-ak-brutal-ink);
+  --shadow-ak-brutal-sm:  3px 3px 0 0 var(--color-ak-brutal-ink);
+  --shadow-ak-brutal:     4px 4px 0 0 var(--color-ak-brutal-ink);
+  --shadow-ak-brutal-lg:  6px 6px 0 0 var(--color-ak-brutal-ink);
+  --shadow-ak-brutal-xl:  8px 8px 0 0 var(--color-ak-brutal-ink);
+  --border-ak-brutal:     2px;
+  --border-ak-brutal-lg:  3px;
+  --radius-ak-brutal:     0.5rem;
+  --radius-ak-brutal-sm:  0.25rem;
+
   /* ── Component sizes ──
      --size-* namespace → size-* utility (sets both width AND height).
      Use: size-ak-icon-lg, size-ak-avatar-md, etc. ── */
@@ -262,7 +298,11 @@
   --size-ak-icon-2xl:  2rem;
   --size-ak-icon-3xl:  3rem;
 
+  /* Panel width (sidebar flyout panels) */
+  --size-ak-panel-width: 260px;
+
   /* Avatars */
+  --size-ak-avatar-xs:  1.5rem;
   --size-ak-avatar-sm:  2rem;
   --size-ak-avatar-md:  2.5rem;
   --size-ak-avatar-lg:  3rem;
@@ -271,6 +311,7 @@
   --size-ak-avatar-3xl: 8rem;
 
   /* Avatar initials font size */
+  --text-ak-avatar-xs:  0.625rem;
   --text-ak-avatar-sm:  0.6875rem;
   --text-ak-avatar-md:  0.8125rem;
   --text-ak-avatar-lg:  1rem;
@@ -279,25 +320,29 @@
   --text-ak-avatar-3xl: 2.25rem;
 
   /* Status dots */
+  /* Status dots scale with avatar; smaller avatars keep a more
+     subtle indicator, larger avatars match count-badge weight.
+     Target ~28-35% of avatar size for a refined "hero" ratio. */
   --size-ak-status-md:  12px;
   --size-ak-status-lg:  14px;
-  --size-ak-status-xl:  16px;
-  --size-ak-status-2xl: 20px;
-  --size-ak-status-3xl: 24px;
+  --size-ak-status-xl:  20px;
+  --size-ak-status-2xl: 28px;
+  --size-ak-status-3xl: 36px;
 
-  /* Badges (count/notification) */
+  /* Badges (count/notification) — must accommodate 1-2 digit counts
+     while keeping the circle shape. Min-width is applied via CSS. */
   --size-ak-badge-md:   18px;
   --size-ak-badge-lg:   20px;
-  --size-ak-badge-xl:   22px;
-  --size-ak-badge-2xl:  24px;
-  --size-ak-badge-3xl:  28px;
+  --size-ak-badge-xl:   24px;
+  --size-ak-badge-2xl:  32px;
+  --size-ak-badge-3xl:  40px;
 
   /* Badge border widths */
   --size-ak-badge-border-md:  2px;
   --size-ak-badge-border-lg:  2px;
-  --size-ak-badge-border-xl:  2.5px;
-  --size-ak-badge-border-2xl: 3px;
-  --size-ak-badge-border-3xl: 3px;
+  --size-ak-badge-border-xl:  3px;
+  --size-ak-badge-border-2xl: 3.5px;
+  --size-ak-badge-border-3xl: 4px;
 
   /* Icon badges (larger badge with icon inside) */
   --size-ak-icon-badge-md:  22px;
@@ -309,20 +354,20 @@
   /* Badge text sizes */
   --text-ak-badge-md:  0.625rem;
   --text-ak-badge-lg:  0.6875rem;
-  --text-ak-badge-xl:  0.75rem;
-  --text-ak-badge-2xl: 0.8125rem;
-  --text-ak-badge-3xl: 0.875rem;
+  --text-ak-badge-xl:  0.8125rem;
+  --text-ak-badge-2xl: 0.9375rem;
+  --text-ak-badge-3xl: 1.125rem;
 
   /* ── Avatar positioning offsets ──
      Used for absolute-positioned status dots, badges, and icon badges.
      Negative values pull elements inward; positive push outward. ── */
 
   /* Status dot offsets (bottom-right corner) */
-  --offset-ak-status-md:  1px;
-  --offset-ak-status-lg:  1px;
-  --offset-ak-status-xl:  2px;
-  --offset-ak-status-2xl: 5px;
-  --offset-ak-status-3xl: 8px;
+  --offset-ak-status-md:  -1px;
+  --offset-ak-status-lg:  -1px;
+  --offset-ak-status-xl:  -1px;
+  --offset-ak-status-2xl:  2px;
+  --offset-ak-status-3xl:  3px;
 
   /* Status ring offsets (with ring decoration) */
   --offset-ak-status-ring-md:  -2px;
@@ -332,6 +377,15 @@
   --offset-ak-status-ring-3xl: 4px;
 
   /* Badge offsets (top-right corner) */
+  /* Count badges are rectangular (99+ grows wider than tall) so top/right
+     tune independently. Smaller avatars poke out at the corner; larger
+     avatars sit flush-right and inset slightly from the top. */
+  --offset-ak-badge-md-top:    -3px;  --offset-ak-badge-md-right:    -3px;
+  --offset-ak-badge-lg-top:    -3px;  --offset-ak-badge-lg-right:    -3px;
+  --offset-ak-badge-xl-top:    -2px;  --offset-ak-badge-xl-right:    -2px;
+  --offset-ak-badge-2xl-top:    2px;  --offset-ak-badge-2xl-right:    0px;
+  --offset-ak-badge-3xl-top:    5px;  --offset-ak-badge-3xl-right:    0px;
+  /* Legacy single-value token kept for backward compat (equal to -top) */
   --offset-ak-badge-md:  -3px;
   --offset-ak-badge-lg:  -3px;
   --offset-ak-badge-xl:  -2px;
@@ -368,9 +422,189 @@
   --ease-ak-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-ak-bounce:    cubic-bezier(0.25, 1, 0.5, 1);
 
-  /* ── Z-index ── */
-  --z-ak-sticky:     100;
-  --z-ak-dropdown:   200;
-  --z-ak-overlay:    300;
-  --z-ak-modal:      400;
+  /* ── Z-index (Chakra-inspired scale) ── */
+  --z-ak-base:      0;
+  --z-ak-docked:    10;
+  --z-ak-dropdown:  1000;
+  --z-ak-sticky:    1100;
+  --z-ak-banner:    1200;
+  --z-ak-overlay:   1300;
+  --z-ak-modal:     1400;
+  --z-ak-popover:   1500;
+  --z-ak-toast:     1700;
+  --z-ak-tooltip:   1800;
+
+  /* ── Control sizes (legacy --size-ak-control-* aliases) ── */
+  --size-ak-control-sm:  2rem;
+  --size-ak-control-md:  2.5rem;
+  --size-ak-control-lg:  3rem;
+
+  /* ── Touch target minimum ── */
+  --size-ak-touch-min: 3rem;
+
+  /* ── Focus ring style ── */
+  --shadow-ak-focus: 0 0 0 3px rgba(0, 0, 0, 0.08);
+  --shadow-ak-focus-primary: 0 0 0 3px rgba(0, 0, 0, 0.15);
+  --shadow-ak-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.08);
+  --shadow-ak-focus-success: 0 0 0 3px rgba(22, 163, 74, 0.08);
+
+  /* ── Chart colors (colorblind-safe, Tableau 10 derived) ── */
+  --color-ak-chart-1: #4e79a7;
+  --color-ak-chart-2: #f28e2c;
+  --color-ak-chart-3: #e15759;
+  --color-ak-chart-4: #76b7b2;
+  --color-ak-chart-5: #59a14f;
+  --color-ak-chart-6: #edc949;
+
+  /* ── Form input border radius ── */
+  --radius-ak-input: 0.625rem;
+
+  /* ── Sidebar widths ── */
+  --width-ak-sidebar-collapsed: 5rem;
+  --width-ak-sidebar-expanded: 18rem;
+}
+
+/* ══════════════════════════════════════════════════════════
+   Density Modes
+   Wrap any container with data-ak-density="compact|spacious"
+   to override spacing and control sizes within it.
+   Default (comfortable) uses the base tokens above.
+   ══════════════════════════════════════════════════════════ */
+
+[data-ak-density="compact"] {
+  --spacing-ak-1:    0.375rem;   /* 6px  (was 8px)  */
+  --spacing-ak-1_5:  0.5rem;     /* 8px  (was 12px) */
+  --spacing-ak-2:    0.75rem;    /* 12px (was 16px) */
+  --spacing-ak-2_5:  1rem;       /* 16px (was 20px) */
+  --spacing-ak-3:    1.125rem;   /* 18px (was 24px) */
+  --height-ak-control-sm:   1.75rem;   /* 28px (was 32px) */
+  --height-ak-control-md:   2rem;      /* 32px (was 40px) */
+  --height-ak-control-lg:   2.5rem;    /* 40px (was 48px) */
+  --height-ak-row-default:  2.5rem;    /* 40px (was 48px) */
+}
+
+[data-ak-density="spacious"] {
+  --spacing-ak-1:    0.625rem;   /* 10px (was 8px)  */
+  --spacing-ak-1_5:  1rem;       /* 16px (was 12px) */
+  --spacing-ak-2:    1.25rem;    /* 20px (was 16px) */
+  --spacing-ak-2_5:  1.5rem;     /* 24px (was 20px) */
+  --spacing-ak-3:    1.875rem;   /* 30px (was 24px) */
+  --height-ak-control-sm:   2.25rem;   /* 36px (was 32px) */
+  --height-ak-control-md:   3rem;      /* 48px (was 40px) */
+  --height-ak-control-lg:   3.5rem;    /* 56px (was 48px) */
+  --height-ak-row-default:  3.5rem;    /* 56px (was 48px) */
+}
+
+/* ══════════════════════════════════════════════════════════
+   Dark Mode
+   Apply with .dark class on <html> (next-themes standard)
+   or via @media (prefers-color-scheme: dark) — both supported.
+   Neutral base — works with any accent. For branded dark,
+   override --color-ak-primary-* after this block.
+   ══════════════════════════════════════════════════════════ */
+
+.dark,
+[data-theme="dark"] {
+  /* ── Surfaces ── */
+  --color-ak-neutral-0:   #111113;
+  --color-ak-neutral-50:  #18191b;
+  --color-ak-neutral-100: #1e1f21;
+  --color-ak-neutral-200: #252628;
+  --color-ak-neutral-300: #333436;
+  --color-ak-neutral-400: #52525b;
+  --color-ak-neutral-500: #71717a;
+  --color-ak-neutral-600: #a1a1aa;
+  --color-ak-neutral-700: #d4d4d8;
+  --color-ak-neutral-800: #e4e4e7;
+  --color-ak-neutral-900: #f4f4f5;
+  --color-ak-neutral-950: #fafafa;
+
+  --color-ak-bg:              #111113;
+  --color-ak-surface:         #18191b;
+  --color-ak-surface-2:       #1e1f21;
+  --color-ak-hover:           rgba(255,255,255,0.04);
+  --color-ak-active:          rgba(255,255,255,0.08);
+  --color-ak-elevated:        #252628;
+  --color-ak-surface-raised:  #1e1f21;
+  --color-ak-surface-raised-soft: rgba(255,255,255,0.04);
+  --color-ak-surface-glass:   rgba(255,255,255,0.05);
+  --color-ak-surface-glass-strong: rgba(255,255,255,0.08);
+  --color-ak-highlight-soft:  rgba(255,255,255,0.06);
+  --color-ak-highlight-strong: rgba(255,255,255,0.12);
+  --color-ak-skeleton-base:   #1e1f21;
+  --color-ak-skeleton-shine:  rgba(255,255,255,0.06);
+  --color-ak-overlay:         rgba(0,0,0,0.7);
+  --color-ak-on-primary:      #111113;
+  --color-ak-primary-subtle:  rgba(129, 140, 248, 0.15);
+
+  /* ── Text ── */
+  --color-ak-text:            #f4f4f5;
+  --color-ak-text-secondary:  #a1a1aa;
+  --color-ak-text-muted:      #71717a;
+  --color-ak-text-disabled:   #52525b;
+  --color-ak-text-inverse:    #111113;
+  --color-ak-text-link:       #818cf8;
+  --color-ak-text-placeholder:#a1a1aa;
+
+  /* ── Borders (alpha — adapts to any surface) ── */
+  --color-ak-border:          rgba(255, 255, 255, 0.10);
+  --color-ak-border-subtle:   rgba(255, 255, 255, 0.06);
+  --color-ak-border-strong:   rgba(255, 255, 255, 0.16);
+  --color-ak-border-focus:    #ffffff;
+
+  /* ── Primary (lightened for contrast on dark bg) ── */
+  --color-ak-primary:         #818cf8;
+  --color-ak-primary-hover:   #a5b4fc;
+  --color-ak-primary-active:  #6366f1;
+
+  --color-ak-primary-50:  rgba(129, 140, 248, 0.06);
+  --color-ak-primary-100: rgba(129, 140, 248, 0.10);
+  --color-ak-primary-200: rgba(129, 140, 248, 0.16);
+  --color-ak-primary-300: rgba(129, 140, 248, 0.24);
+  --color-ak-primary-400: #6366f1;
+  --color-ak-primary-500: #818cf8;
+  --color-ak-primary-600: #a5b4fc;
+  --color-ak-primary-700: #c7d2fe;
+  --color-ak-primary-800: #e0e7ff;
+  --color-ak-primary-900: #eef2ff;
+  --color-ak-primary-950: #f5f7ff;
+
+  /* ── Status (lighter for dark bg readability) ── */
+  --color-ak-success:         #4ade80;
+  --color-ak-success-subtle:  rgba(34, 197, 94, 0.12);
+  --color-ak-success-text:    #4ade80;
+  --color-ak-warning:         #fbbf24;
+  --color-ak-warning-subtle:  rgba(251, 191, 36, 0.12);
+  --color-ak-warning-text:    #fbbf24;
+  --color-ak-danger:          #f87171;
+  --color-ak-danger-subtle:   rgba(248, 113, 113, 0.12);
+  --color-ak-danger-text:     #f87171;
+  --color-ak-info:            #60a5fa;
+  --color-ak-info-subtle:     rgba(96, 165, 250, 0.12);
+  --color-ak-info-text:       #60a5fa;
+
+  /* ── Shadows (mostly invisible on dark — reduce or remove) ── */
+  --shadow-ak-xs:    none;
+  --shadow-ak-sm:    none;
+  --shadow-ak-md:    0 4px 12px rgba(0,0,0,0.3);
+  --shadow-ak-lg:    0 8px 30px rgba(0,0,0,0.4);
+  --shadow-ak-xl:    0 16px 50px rgba(0,0,0,0.5);
+  --shadow-ak-2xl:   0 24px 60px rgba(0,0,0,0.6);
+
+  /* ── Focus rings (solid for AAA 2.4.13 compliance) ── */
+  --color-ak-border-focus:    #ffffff;
+  --shadow-ak-focus:         0 0 0 3px rgba(255, 255, 255, 0.20);
+  --shadow-ak-focus-primary: 0 0 0 3px rgba(129, 140, 248, 0.30);
+  --shadow-ak-focus-danger:  0 0 0 3px rgba(248, 113, 113, 0.25);
+  --shadow-ak-focus-success: 0 0 0 3px rgba(74, 222, 128, 0.25);
+
+  /* ── Neobrutalist (dark mode — everything flips) ── */
+  --color-ak-brutal-ink:          #ffffff;
+  --color-ak-brutal-face:         #0a0a0a;
+  --color-ak-brutal-face-dark:    #e5e5e5;
+  --color-ak-brutal-on-face:      #ffffff;
+  --color-ak-brutal-on-face-dark: #000000;
+
+  /* ── Sheet handle ── */
+  --color-ak-sheet-handle: #52525b;
 }