@archetypeai/ds-lib-tokens 0.13.0 → 0.15.0

package/README.md

@@ -34,7 +34,7 @@ Import the theme before Tailwind in your global CSS:
 
 | Feature | Details |
 |---------|---------|
-| **Semantic Tokens** | OKLCH CSS variables (shadcn-style): `background`, `foreground`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `border`, `input`, `ring`, `chart-1`–`5`, `sidebar`, `atai-neutral`, `atai-good`, `atai-warning`, `atai-critical`, `atai-always-black`, `atai-always-white` |
+| **Semantic Tokens** | OKLCH CSS variables (shadcn-style): `background`, `foreground`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `border`, `separator`, `scrollbar`, `scrollbar-track`, `input`, `ring`, `chart-1`–`5`, `sidebar`, `atai-neutral`, `atai-good`, `atai-warning`, `atai-critical`, `atai-always-black`, `atai-always-white` |
 | **Brand Tokens** | 8 OKLCH palettes with shades 50–950: `atai-tangerine`, `atai-sunshine-yellow` (amber-leaning scale), `atai-lime`, `atai-screen-green`, `atai-fire-red`, `atai-energy-pink`, `atai-cool-purple`, `atai-baby-blue` |
 | **Spacing scale** | `--spacing-xs` (0.25rem) → `--spacing-xl` (1.5rem), used as `p-md`, `gap-lg`, … |
 | **Radius scale** | `--radius-xs` → `--radius-xl`, `--radius-full`, plus `--atai-radius-interactive` (radius for interactive elements, `rounded-interactive`) |
@@ -42,6 +42,7 @@ Import the theme before Tailwind in your global CSS:
 | **Width scale guard** | `--max-width-*`/`--min-width-*` alias Tailwind's `--container-*` scale, so `max-w-md` resolves to container sizes instead of the t-shirt spacing tokens |
 | **Dark mode** | `.dark` class via `@custom-variant dark (&:where(.dark, .dark *))` |
 | **Typography** | Font-family stacks with system fallbacks and semantic HTML base styles |
+| **Scrollbars** | `--scrollbar`/`--scrollbar-track` (thumb + track colour, `bg-scrollbar`) and `--scrollbar-width`. Applied globally in the base layer, so every scroller follows the theme with no app code |
 
 Brand tokens are defined in `colors.css` and loaded automatically via `theme.css`.
 
@@ -49,6 +50,10 @@ Brand tokens are defined in `colors.css` and loaded automatically via `theme.css
 
 `theme.css` styles bare HTML elements so plain markup is on-brand without utility classes: `body`, `h1`–`h6`, `p`, `small`, `span`, `strong`, `em`, `label`, `a`, `code`, `blockquote`. All elements default to `border-border` and `outline-ring/50`.
 
+**Scrollbars are governed by the base layer too**: the universal `*` rule sets `scrollbar-color` / `scrollbar-width` from `--scrollbar` / `--scrollbar-track` / `--scrollbar-width`, so every `overflow` box — including ones in your own app — gets a themed bar with **no classes**. The declaration sits on `*` rather than `:root` on purpose: both properties are inherited, but `var()` substitutes where the declaration lives, so `*` is what lets a `.dark` on *any* subtree flip that subtree's scrollbars.
+
+Only the **standard** scrollbar properties are used. In Chromium 121+ / WebKit 18.2+ a non-`auto` `scrollbar-color` or `scrollbar-width` opts an element out of the legacy `::-webkit-scrollbar` pseudo-elements, so the two are mutually exclusive rather than layered — and the standard pair is the only one Chromium, WebKit and Gecko all implement. Consequences: thumb radius and an explicit hover colour are not expressible (engines derive hover from the thumb colour), `--scrollbar-width` takes only `auto | thin | none`, and macOS renders **overlay** scrollbars that take no layout space and ignore thickness. Retheme by redefining the tokens; hide a single scroller's bar with `[scrollbar-width:none]`.
+
 ---
 
 ## Fonts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archetypeai/ds-lib-tokens",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Archetype AI Design System Tokens",
   "type": "module",
   "exports": {

package/theme.css

@@ -29,12 +29,15 @@
   --destructive: var(--color-red-600);
   --border: var(--color-zinc-200);
   --separator: var(--color-zinc-200);
+  --scrollbar: var(--color-zinc-400);
+  --scrollbar-track: transparent;
+  --scrollbar-width: thin;
   --input: var(--color-zinc-200);
   --ring: var(--color-atai-brand-babyblue);
   --chart-1: var(--color-yellow-600);
   --chart-2: var(--color-emerald-700);
   --chart-3: var(--color-fuchsia-500);
-  --chart-4: var(--color-violet-700);
+  --chart-4: var(--color-indigo-500);
   --chart-5: var(--color-yellow-800);
   --sidebar: var(--color-zinc-50);
   --sidebar-foreground: var(--color-zinc-950);
@@ -84,12 +87,15 @@
   --destructive: var(--color-red-400);
   --border: var(--color-zinc-800);
   --separator: var(--color-zinc-700);
+  --scrollbar: var(--color-zinc-600);
+  --scrollbar-track: transparent;
+  --scrollbar-width: thin;
   --input: var(--color-zinc-800);
   --ring: var(--color-atai-brand-babyblue);
   --chart-1: var(--color-yellow-600);
   --chart-2: var(--color-emerald-700);
   --chart-3: var(--color-fuchsia-500);
-  --chart-4: var(--color-violet-700);
+  --chart-4: var(--color-indigo-500);
   --chart-5: var(--color-yellow-800);
   --sidebar: var(--color-zinc-900);
   --sidebar-foreground: var(--color-zinc-50);
@@ -156,6 +162,8 @@
   --color-destructive: var(--destructive);
   --color-border: var(--border);
   --color-separator: var(--separator);
+  --color-scrollbar: var(--scrollbar);
+  --color-scrollbar-track: var(--scrollbar-track);
   --color-input: var(--input);
   --color-ring: var(--ring);
   --color-chart-1: var(--chart-1);
@@ -218,6 +226,8 @@
   * {
     @apply border-border;
     @apply outline-ring/50;
+    scrollbar-color: var(--scrollbar) var(--scrollbar-track);
+    scrollbar-width: var(--scrollbar-width);
   }
   body {
     @apply bg-background text-foreground font-sans;