@adia-ai/web-components 0.0.1

package/styles/tokens.css

@@ -0,0 +1,304 @@
+/* ═══════════════════════════════════════════════════════════════
+   Tokens — Design tokens for chat-ui component system.
+   OKLCH color space · light-dark() adaptive · rem spatial units
+
+   Aesthetic: dark-first, high-contrast, monochromatic.
+   Dark mode uses pure grayscale (zero chroma, zero hue).
+   Light mode carries a cool tint (hue 225).
+   Hierarchy is luminance-only — no accent color for decoration,
+   accent reserved strictly for interactive elements.
+
+   Distinguishing choices (from design reference):
+   · Hero numbers use weight-thin (300) at display scale — elegant, not bold
+   · Dark bg is true black — depth comes from luminance steps, never shadows
+   · Overline labels are uppercase + wide tracking (0.06em) for categorization
+   · Flat dark mode — zero shadows, surfaces separated by bg color shifts only
+   · Monospace font is the default — data-confident, technical character
+   ═══════════════════════════════════════════════════════════════ */
+
+@import "./colors/index.css";
+@import "./typography.css";
+@import "./prose.css";
+@import "./themes.css";
+
+/* ═══════════════════════════════════════════════════════════════
+   PARAMETRIC MULTIPLIERS — @property declarations
+   Two knobs that rescale the entire spatial system.
+   Set on :root for global effect, or on [density]/[radius] for scoped.
+
+   --a-density   Controls ALL spatial dimensions: spacing, padding,
+                 gaps, component heights. One knob for everything.
+   --a-radius-k  Controls corner rounding independently.
+   ═══════════════════════════════════════════════════════════════ */
+
+@property --a-density {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --a-radius-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+:root {
+  /* ═══════════════════════════════════════════════════════════
+     PRIMITIVES — context-free building blocks
+     ═══════════════════════════════════════════════════════════ */
+
+  /* ── Spacing ──
+     Parametric: each token = --a-density × base.
+     At d=1, values match the original fixed scale.
+     Base unit: 0.5rem (8px). Named by multiplier of 0.25rem. */
+  --a-space-0: 0;
+  --a-space-px: 1px;
+  --a-space-0-5: calc(var(--a-density) * 0.125rem); /*  2px at d=1 */
+  --a-space-1: calc(var(--a-density) * 0.25rem); /*  4px at d=1 */
+  --a-space-1-5: calc(var(--a-density) * 0.375rem); /*  6px at d=1 */
+  --a-space-2: calc(var(--a-density) * 0.5rem); /*  8px at d=1 */
+  --a-space-2-5: calc(var(--a-density) * 0.625rem); /* 10px at d=1 */
+  --a-space-3: calc(var(--a-density) * 0.75rem); /* 12px at d=1 */
+  --a-space-3-5: calc(var(--a-density) * 0.875rem); /* 14px at d=1 */
+  --a-space-4: calc(var(--a-density) * 1rem); /* 16px at d=1 */
+  --a-space-4-5: calc(var(--a-density) * 1.125rem); /* 18px at d=1 */
+  --a-space-5: calc(var(--a-density) * 1.25rem); /* 20px at d=1 */
+  --a-space-6: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
+  --a-space-7: calc(var(--a-density) * 1.75rem); /* 28px at d=1 */
+  --a-space-8: calc(var(--a-density) * 2rem); /* 32px at d=1 */
+  --a-space-9: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
+  --a-space-10: calc(var(--a-density) * 2.5rem); /* 40px at d=1 */
+  --a-space-12: calc(var(--a-density) * 3rem); /* 48px at d=1 */
+  --a-space-16: calc(var(--a-density) * 4rem); /* 64px at d=1 */
+
+  /* ── Radius ──
+     Parametric: each token = clamp(min, --a-radius-k × base, max).
+     At k=1, values match the original fixed scale.
+     k=0 → sharp (clamped to min). k=2 → extra round (clamped to max). */
+  --a-radius-min: 0.25rem;
+  --a-radius-max: 1.5rem;
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.25), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.50), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.75), var(--a-radius-max));
+  --a-radius-full: 100rem;
+  --a-radius: var(--a-radius-md);
+
+  /* ── Inset ── */
+  --a-inset-sm: var(--a-space-4);
+  --a-inset-md: var(--a-space-6);
+  --a-inset-lg: var(--a-space-8);
+  --a-inset: var(--a-inset-md);
+
+  /* ── Gaps ── */
+  --a-gap-sm: var(--a-space-3);
+  --a-gap-md: var(--a-space-4);
+  --a-gap-lg: var(--a-space-6);
+  --a-gap: var(--a-gap-md);
+
+  /* ── Sizing (component heights) ──
+     Heights scale with density via the space tokens. */
+  --a-size-sm: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
+  --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px at d=1 */
+  --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
+  --a-size: var(--a-size-md);
+
+  /* ── Toggle-control size (check, radio, switch) ──
+     Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
+  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */
+
+  /* ── Motion ── */
+  --a-duration-fast: 120ms;
+  --a-duration: 250ms;
+  --a-duration-slow: 300ms;
+  --a-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --a-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* ── Shadows ──
+     Material-style soft, diffused 4-layer shadows:
+     ambient + penumbra + umbra + contact edge.
+     Hue-tinted via neutral hue. Intensity multiplier
+     allows themes to control shadow strength (0 = flat, 2 = heavy). */
+  --a-shadow-intensity: 1;
+  --a-shadow-color: oklch(0.2 0.01 var(--a-neutral-hue));
+  --a-shadow-sm:
+    0 1px 1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
+    0 1px 2px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
+    0 2px 4px  var(--a-shadow-color) / calc(0.02 * var(--a-shadow-intensity)),
+    0 0   1px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity));
+  --a-shadow-md:
+    0 1px 2px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
+    0 2px 4px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
+    0 4px 12px var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
+    0 0   1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity));
+  --a-shadow-lg:
+    0 2px 4px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
+    0 4px 8px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
+    0 8px 24px var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
+    0 0   1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity));
+
+    --a-icon-size: 1.00rem;
+    --a-caret-size: 0.875rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DENSITY PRESETS — scoped via [density] attribute.
+   --a-density controls spacing, padding, gaps, AND component heights.
+   --a-radius-k is coupled for visual consistency.
+
+   Usage:
+     <div density="compact">...tight layout...</div>
+     <div density="spacious">...generous layout...</div>
+   ═══════════════════════════════════════════════════════════════ */
+
+[density="compact"] {
+  --a-density: 0.85;
+  --a-radius-k: 0.75;
+}
+
+[density="spacious"] {
+  --a-density: 1.15;
+  --a-radius-k: 1.25;
+}
+
+/* ── Radius presets — scoped via [radius] attribute ── */
+
+[radius="sharp"] {
+  --a-radius-k: 0;
+  --a-radius-min: 0rem;
+  --a-radius-max: 0rem;
+}
+
+[radius="rounded"] {
+  --a-radius-k: 1.5;
+}
+
+[radius="round"] {
+  --a-radius-k: 2;
+  --a-radius-max: 3rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SIZE PRESETS — universal [size="sm|md|lg"] attribute.
+
+   Sets BOTH component tokens AND container tokens.
+   Each tier shifts the entire typescale to its sm/md/lg variant.
+
+   Component: --a-size, --a-ui-px, --a-ui-size, --a-icon-size
+   Container: --a-inset, --a-gap
+   Typography: all 13 role sizes shift to the tier's variant
+
+   Usage:
+     <button-ui size="sm">            — compact button
+     <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
+     <div size="sm">...</div>        — everything inside scales down
+   ═══════════════════════════════════════════════════════════════ */
+/* ── sm — dense data UIs, sidebars, inspectors ── */
+[size] {
+  font-size: var(--a-body-size);
+}
+[size="sm"] {
+  /* Component */
+  --a-size: calc(var(--a-density) * 1.5rem);
+  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px at d=1 */
+  --a-ui-px: var(--a-space-1-5);
+  --a-ui-size: var(--a-ui-sm);
+  --a-icon-size: 0.875rem;
+  --a-caret-size: 0.75rem;
+  /* Container */
+  --a-inset: var(--a-inset-sm);
+  --a-gap: var(--a-gap-sm);
+  --a-radius: var(--a-radius-sm);
+  /* Typography — all roles shift to -sm */
+  --a-display-size: var(--a-display-sm);
+  --a-title-size: var(--a-title-sm);
+  --a-heading-size: var(--a-heading-sm);
+  --a-section-size: var(--a-section-sm);
+  --a-subsection-size: var(--a-subsection-sm);
+  --a-body-size: var(--a-body-sm);
+  --a-deck-size: var(--a-deck-sm);
+  --a-caption-size: var(--a-caption-sm);
+  --a-kicker-size: var(--a-kicker-sm);
+  --a-label-size: var(--a-label-sm);
+  --a-metric-size: var(--a-metric-sm);
+  --a-code-size: var(--a-code-sm);
+}
+
+/* [size="md"] is the default — no overrides needed */
+
+/* ── lg — pages, hero sections, marketing ── */
+[size="lg"] {
+  /* Component */
+  --a-size: calc(var(--a-density) * 2.25rem);
+  --a-toggle-size: var(--a-size-sm); /* 24px at d=1 */
+  --a-ui-px: var(--a-space-3);
+  --a-ui-size: var(--a-ui-lg);
+  --a-icon-size: 1.25rem;
+  --a-caret-size: 1rem;
+  /* Container */
+  --a-inset: var(--a-inset-lg);
+  --a-gap: var(--a-gap-lg);
+  --a-radius: var(--a-radius-lg);
+  /* Typography — all roles shift to -lg */
+  --a-display-size: var(--a-display-lg);
+  --a-title-size: var(--a-title-lg);
+  --a-heading-size: var(--a-heading-lg);
+  --a-section-size: var(--a-section-lg);
+  --a-subsection-size: var(--a-subsection-lg);
+  --a-body-size: var(--a-body-lg);
+  --a-deck-size: var(--a-deck-lg);
+  --a-caption-size: var(--a-caption-lg);
+  --a-kicker-size: var(--a-kicker-lg);
+  --a-label-size: var(--a-label-lg);
+  --a-metric-size: var(--a-metric-lg);
+  --a-code-size: var(--a-code-lg);
+}
+
+[gap="0"] {
+  --a-gap: 0;
+}
+[gap="1"] {
+  --a-gap: var(--a-space-1);
+}
+[gap="2"] {
+  --a-gap: var(--a-space-2);
+}
+[gap="3"] {
+  --a-gap: var(--a-space-3);
+}
+[gap="4"] {
+  --a-gap: var(--a-space-4);
+}
+[gap="5"] {
+  --a-gap: var(--a-space-5);
+}
+[gap="6"] {
+  --a-gap: var(--a-space-6);
+}
+[gap="7"] {
+  --a-gap: var(--a-space-7);
+}
+[gap="8"] {
+  --a-gap: var(--a-space-8);
+}
+[gap="9"] {
+  --a-gap: var(--a-space-9);
+}
+[gap="10"] {
+  --a-gap: var(--a-space-10);
+}
+[gap="12"] {
+  --a-gap: var(--a-space-12);
+}
+[gap="16"] {
+  --a-gap: var(--a-space-16);
+}
+
+[gap="sm"] {
+  --a-gap: var(--a-space-4);
+}
+[gap="md"] {
+  --a-gap: var(--a-space-6);
+}
+[gap="lg"] {
+  --a-gap: var(--a-space-8);
+}