@sandilya/ui 0.2.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @sandilya/ui
 
-Color tokens, brand themes, base styles and the Tailwind CSS 4 theme for [san-ui](https://ui.sandilya.dev).
+Design tokens, themes, base styles and the Tailwind CSS 4 theme for [san-ui](https://ui.sandilya.dev): OKLCH color roles that stay WCAG AA for any theme, density, type, springs and materials.
 
 ```bash
 bun add @sandilya/ui
@@ -10,16 +10,16 @@ bun add @sandilya/ui
 /* src/index.css */
 @import 'tailwindcss';
 @import '@sandilya/ui/tokens.css';
-@import '@sandilya/ui/themes/eloovor.css'; /* or your own theme */
+@import '@sandilya/ui/themes/forest.css'; /* optional: or your own theme */
 @import '@sandilya/ui/theme.css';
 @import '@sandilya/ui/base.css';
 ```
 
-| File           | What it is                                                                      |
-| -------------- | ------------------------------------------------------------------------------- |
-| `tokens.css`   | The shared base: every color role in light and dark, radius                     |
-| `themes/*.css` | A brand: color ramps, the hues neutrals lean toward, fonts                      |
-| `theme.css`    | Tailwind names for the tokens, radius, shadows, fonts, dark variant, animations |
-| `base.css`     | Border, cursor, page and selection defaults the components assume               |
+| File           | What it is                                                                           |
+| -------------- | ------------------------------------------------------------------------------------ |
+| `tokens.css`   | Every role in light and dark, derived from the theme inputs; density; radius; motion |
+| `themes/*.css` | Five inputs: accent hue and chroma, neutral hue and chroma, radius scale             |
+| `theme.css`    | Tailwind names for the roles, in place of Tailwind's defaults; keyframes; `material` |
+| `base.css`     | Page, border, selection and placeholder defaults the components assume               |
 
 To make your own theme, copy `themes/template.css` into your app. The components come from the shadcn registry; setup, the theme contract and the rules are in the [repository README](https://github.com/anand-san/ui#readme).

package/base.css

@@ -1,23 +1,58 @@
 /*
- * san-ui base element styles. Import it with the other @imports at
- * the top of the app's CSS; `@layer base` puts it after Tailwind's preflight.
- * Components assume borders default to the border token and the page sits
- * on the background token.
+ * san-ui base element styles. Import it after theme.css; `@layer base`
+ * puts it after Tailwind's preflight.
  */
 @layer base {
   *,
   ::before,
   ::after {
-    border-color: hsl(var(--border));
+    border-color: var(--separator);
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* The roles are in tokens.css; the paint is here so utilities win */
+  .surface-accent {
+    background-color: var(--surface);
+    color: var(--ink);
   }
 
   html,
   body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    background-color: var(--canvas);
+    color: var(--ink);
     font-family: var(--font-sans);
+    line-height: 1.45;
+    font-optical-sizing: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    caret-color: var(--accent);
+    accent-color: var(--accent);
+  }
+
+  /* On body only: on html it would change the rem every token is sized in */
+  body {
+    font-size: var(--type-body);
+  }
+
+  p,
+  li,
+  figcaption,
+  blockquote {
+    text-wrap: pretty;
+  }
+
+  /* Smooth the jump when the theme switches, like the system does */
+  @media (prefers-reduced-motion: no-preference) {
+    body {
+      transition:
+        background-color var(--duration-base) var(--ease-out),
+        color var(--duration-base) var(--ease-out);
+    }
   }
 
   button:not(:disabled),
@@ -26,7 +61,38 @@
   }
 
   ::selection {
-    background-color: hsl(var(--highlight) / 0.55);
-    color: hsl(var(--highlight-foreground));
+    background-color: color-mix(in oklch, var(--highlight) 70%, transparent);
+    color: var(--highlight-foreground);
+  }
+
+  ::placeholder {
+    color: var(--ink-secondary);
+    opacity: 1;
+  }
+
+  * {
+    scrollbar-color: var(--fill-strong) transparent;
+    scrollbar-width: thin;
+  }
+
+  a {
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: from-font;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+    font-size: 0.92em;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      scroll-behavior: auto !important;
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sandilya/ui",
-  "version": "0.2.0",
-  "description": "Design tokens, themes and the Tailwind CSS 4 theme for san-ui",
+  "version": "0.4.0",
+  "description": "Design tokens, themes and the Tailwind CSS 4 theme for san-ui: OKLCH colors that stay WCAG AA for any theme, density, type, motion and materials",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -14,7 +14,8 @@
     "design-tokens",
     "tailwindcss",
     "tailwind-theme",
-    "design-system"
+    "design-system",
+    "oklch"
   ],
   "exports": {
     "./theme.css": "./theme.css",
@@ -33,11 +34,8 @@
   "sideEffects": [
     "*.css"
   ],
-  "dependencies": {
-    "tw-animate-css": "^1.4.0"
-  },
   "peerDependencies": {
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.3.0"
   },
   "publishConfig": {
     "access": "public"

package/theme.css

@@ -1,91 +1,278 @@
 /*
- * Tailwind names for the san-ui tokens (tokens.css plus a theme from
- * themes/). Import it after `tailwindcss`; an app's CSS adds only its own
- * domain colors and motion in its own @theme block.
+ * Tailwind names for the san-ui tokens. Import it after `tailwindcss` and
+ * tokens.css (and a theme).
+ *
+ * It replaces Tailwind's default colors, type sizes, radii and shadows with
+ * the san-ui roles, so off-system classes like `bg-slate-500` or `text-sm`
+ * don't build. An app adds its own domain colors in its own @theme block.
  */
-@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
-/* The faces come from the theme (--font-sans, --font-display) */
+@theme {
+  --color-*: initial;
+  --text-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --font-*: initial;
+  --animate-*: initial;
+  --ease-*: initial;
+}
+
 @theme inline reference {
   --font-sans: var(--font-sans);
   --font-display: var(--font-display);
+  --font-rounded: var(--font-rounded);
+  --font-mono: var(--font-mono);
+
+  /* Neutrals */
+  --color-canvas: var(--canvas);
+  --color-surface: var(--surface);
+  --color-surface-inset: var(--surface-inset);
+  --color-overlay: var(--overlay);
+  --color-ink: var(--ink);
+  --color-ink-secondary: var(--ink-secondary);
+  --color-ink-tertiary: var(--ink-tertiary);
+  --color-separator: var(--separator);
+  --color-control: var(--border-control);
+  --color-fill: var(--fill);
+  --color-fill-hover: var(--fill-hover);
+  --color-fill-strong: var(--fill-strong);
+  --color-scrim: var(--scrim);
+  --color-focus: var(--focus);
+
+  /* The same in every mode, like a switch's thumb */
+  --color-white: oklch(1 0 0);
+  --color-black: oklch(0 0 0);
+
+  /*
+   * Accent and status. `bg-accent` is the fill under white text;
+   * `text-accent` is the shade that reads as text on any surface.
+   */
+  --color-accent: var(--accent);
+  --color-accent-pressed: var(--accent-pressed);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-soft-hover: var(--accent-soft-hover);
+  --text-color-accent: var(--accent-text);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-soft: var(--success-soft);
+  --text-color-success: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-soft: var(--warning-soft);
+  --text-color-warning: var(--warning-text);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-danger-soft: var(--danger-soft);
+  --text-color-danger: var(--danger-text);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-soft: var(--info-soft);
+  --text-color-info: var(--info-text);
+
+  --color-highlight: var(--highlight);
+  --color-highlight-foreground: var(--highlight-foreground);
+
+  /*
+   * Type roles: size, leading, tracking and weight as one set. Tracking
+   * tightens as size grows. Sizes follow the density.
+   */
+  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
+  --text-display--line-height: 1.05;
+  --text-display--letter-spacing: -0.028em;
+  --text-display--font-weight: 700;
+  --text-title-1: var(--type-title-1);
+  --text-title-1--line-height: 1.15;
+  --text-title-1--letter-spacing: -0.022em;
+  --text-title-1--font-weight: 700;
+  --text-title-2: var(--type-title-2);
+  --text-title-2--line-height: 1.25;
+  --text-title-2--letter-spacing: -0.016em;
+  --text-title-2--font-weight: 600;
+  --text-title-3: var(--type-title-3);
+  --text-title-3--line-height: 1.3;
+  --text-title-3--letter-spacing: -0.012em;
+  --text-title-3--font-weight: 600;
+  --text-headline: var(--type-body);
+  --text-headline--line-height: 1.35;
+  --text-headline--letter-spacing: -0.006em;
+  --text-headline--font-weight: 600;
+  --text-body: var(--type-body);
+  --text-body--line-height: 1.45;
+  --text-body--letter-spacing: -0.003em;
+  --text-subhead: var(--type-subhead);
+  --text-subhead--line-height: 1.4;
+  --text-caption: var(--type-caption);
+  --text-caption--line-height: 1.35;
+  --text-caption--letter-spacing: 0.006em;
+
+  /* Radius by role; panels, items and sheets are concentric */
+  --radius-xs: calc(4px * var(--radius-scale));
+  --radius-control: var(--radius-control);
+  --radius-item: var(--radius-item);
+  --radius-card: var(--radius-card);
+  --radius-panel: var(--radius-panel);
+  --radius-sheet: var(--radius-sheet);
+
+  /* Sizes that follow the density: h-control-md, min-h-row, p-inset */
+  --spacing-control-sm: var(--control-sm);
+  --spacing-control-md: var(--control-md);
+  --spacing-control-lg: var(--control-lg);
+  --spacing-row: var(--row);
+  --spacing-inset: var(--inset);
+  --spacing-panel: var(--panel-inset);
+  --spacing-touch: 2.75rem;
+
+  /* Shadows are tinted with the neutral hue and kept for things that float */
+  --shadow-control:
+    0 1px 2px color-mix(in oklch, var(--shadow-color) 14%, transparent),
+    0 2px 6px color-mix(in oklch, var(--shadow-color) 8%, transparent);
+  --shadow-floating:
+    0 12px 32px -8px color-mix(in oklch, var(--shadow-color) 22%, transparent),
+    0 2px 6px color-mix(in oklch, var(--shadow-color) 8%, transparent);
+  --shadow-modal:
+    0 24px 64px -12px color-mix(in oklch, var(--shadow-color) 32%, transparent),
+    0 4px 12px color-mix(in oklch, var(--shadow-color) 10%, transparent);
+
+  --ease-spring: var(--ease-spring);
+  --ease-out: var(--ease-out);
+
+  --animate-pop-in: pop-in var(--duration-spring) var(--ease-spring);
+  --animate-pop-out: pop-out var(--duration-fast) var(--ease-out) forwards;
+  --animate-fade-in: fade-in var(--duration-base) var(--ease-out);
+  --animate-fade-out: fade-out var(--duration-fast) var(--ease-out) forwards;
+  --animate-disclose: disclose var(--duration-spring) var(--ease-spring);
+  --animate-conceal: conceal var(--duration-fast) var(--ease-out) forwards;
+  --animate-shimmer: shimmer 1.6s ease-in-out infinite;
+  --animate-spin: spin 0.8s linear infinite;
+}
+
+/*
+ * Floating panels grow from the control that opened them (Radix sets the
+ * origin), and shrink back toward it.
+ */
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+
+@keyframes pop-out {
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+/* Accordion and collapsible content opens to the height Radix measures */
+@keyframes disclose {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes conceal {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Reduced motion keeps the state change but drops the movement */
+@media (prefers-reduced-motion: reduce) {
+  @keyframes pop-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes pop-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes disclose {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes conceal {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes shimmer {
+    50% {
+      opacity: 0.8;
+    }
+  }
+}
+
+/*
+ * Materials: translucent layers for chrome that floats over content. Thicker
+ * materials hide more of what is behind them. With reduced transparency or
+ * more contrast they turn solid.
+ */
+@utility material-thin {
+  background-color: color-mix(in oklch, var(--overlay) 88%, transparent);
+  backdrop-filter: blur(16px) saturate(180%);
+}
+
+@utility material {
+  background-color: color-mix(in oklch, var(--overlay) 93%, transparent);
+  backdrop-filter: blur(24px) saturate(180%);
+}
+
+@utility material-thick {
+  background-color: color-mix(in oklch, var(--overlay) 97%, transparent);
+  backdrop-filter: blur(32px) saturate(180%);
 }
 
-@theme inline {
-  /* Radius by role: xs for chips, md for fields, lg for small cards,
-     xl for section cards, 2xl for dialogs. Buttons are pills. */
-  --radius-xs: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-
-  /* Ink-tinted shadows, only for things that float: menus, dialogs, toasts */
-  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
-  --shadow-sm:
-    0 1px 3px hsl(var(--shadow-color) / 0.08),
-    0 1px 2px hsl(var(--shadow-color) / 0.04);
-  --shadow-md:
-    0 4px 12px -2px hsl(var(--shadow-color) / 0.1),
-    0 2px 4px hsl(var(--shadow-color) / 0.04);
-  --shadow-lg:
-    0 12px 32px -8px hsl(var(--shadow-color) / 0.18),
-    0 2px 6px hsl(var(--shadow-color) / 0.06);
-  --shadow-xl:
-    0 24px 56px -12px hsl(var(--shadow-color) / 0.26),
-    0 4px 12px hsl(var(--shadow-color) / 0.08);
-
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-surface: hsl(var(--surface));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-brand: hsl(var(--brand));
-  --color-brand-foreground: hsl(var(--brand-foreground));
-  --color-brand-50: hsl(var(--brand-50));
-  --color-brand-100: hsl(var(--brand-100));
-  --color-brand-200: hsl(var(--brand-200));
-  --color-brand-300: hsl(var(--brand-300));
-  --color-brand-400: hsl(var(--brand-400));
-  --color-brand-500: hsl(var(--brand-500));
-  --color-brand-600: hsl(var(--brand-600));
-  --color-brand-700: hsl(var(--brand-700));
-  --color-brand-800: hsl(var(--brand-800));
-  --color-brand-900: hsl(var(--brand-900));
-  --color-brand-950: hsl(var(--brand-950));
-
-  --color-highlight: hsl(var(--highlight));
-  --color-highlight-foreground: hsl(var(--highlight-foreground));
-  --color-highlight-50: hsl(var(--highlight-50));
-  --color-highlight-100: hsl(var(--highlight-100));
-  --color-highlight-200: hsl(var(--highlight-200));
-  --color-highlight-300: hsl(var(--highlight-300));
-  --color-highlight-400: hsl(var(--highlight-400));
-  --color-highlight-500: hsl(var(--highlight-500));
-  --color-highlight-600: hsl(var(--highlight-600));
-  --color-highlight-700: hsl(var(--highlight-700));
-  --color-highlight-800: hsl(var(--highlight-800));
-  --color-highlight-900: hsl(var(--highlight-900));
-  --color-highlight-950: hsl(var(--highlight-950));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-success: hsl(var(--success));
-  --color-success-foreground: hsl(var(--success-foreground));
-  --color-warning: hsl(var(--warning));
-  --color-warning-foreground: hsl(var(--warning-foreground));
-  --color-info: hsl(var(--info));
-  --color-info-foreground: hsl(var(--info-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .material-thin,
+  .material,
+  .material-thick {
+    background-color: var(--overlay);
+    backdrop-filter: none;
+  }
 }

package/themes/ember.css

@@ -0,0 +1,8 @@
+/* Ember: a red-orange accent over warm greys, with tighter corners */
+:root {
+  --accent-hue: 38;
+  --accent-chroma: 0.19;
+  --neutral-hue: 60;
+  --neutral-chroma: 0.01;
+  --radius-scale: 0.7;
+}

package/themes/forest.css

@@ -0,0 +1,8 @@
+/* Forest: a green accent over slightly green greys, with softer corners */
+:root {
+  --accent-hue: 155;
+  --accent-chroma: 0.15;
+  --neutral-hue: 150;
+  --neutral-chroma: 0.012;
+  --radius-scale: 1.25;
+}

package/themes/graphite.css

@@ -0,0 +1,8 @@
+/* Graphite: a grey accent and pure greys, for tools that stay quiet */
+:root {
+  --accent-hue: 260;
+  --accent-chroma: 0.02;
+  --neutral-hue: 260;
+  --neutral-chroma: 0;
+  --radius-scale: 0.85;
+}

package/themes/template.css

@@ -1,62 +1,28 @@
 /*
- * Starting point for a new app's theme. Copy it into the app, rename it,
- * and replace the values. It works as is, with a teal brand, a lemon
- * highlighter and system fonts.
+ * A starting point for an app's theme. Copy it into the app (for example as
+ * src/theme.css), import it after @sandilya/ui/tokens.css, and change the
+ * values. Everything else, light and dark, follows from these.
  *
- * Import after tokens.css. Everything else (surfaces, feedback colors,
- * lines, radius) comes from the base and follows these hues.
- *
- * Checks before shipping a theme:
- * - --brand-600 on white and white on --brand-600 are at least 4.5:1.
- * - --highlight-300 behind --highlight-950 text is at least 4.5:1.
- * - --tint-hue is the brand hue, or near it, so greys feel related.
- * - Look at every Storybook story in light and dark.
+ * Contrast is handled by the base for any hue: it fixes each role's
+ * lightness, so white text on the accent and accent text on every surface
+ * stay at WCAG AA. Overriding a role directly (say --accent) takes it off
+ * that guarantee; check it in both modes if you do.
  */
+:root {
+  /* The accent: buttons, links, selection, focus. Hue in degrees, 0 to 360 */
+  --accent-hue: 250;
+  /* How vivid the accent is: 0 is grey, 0.2 (the cap) is as vivid as it gets */
+  --accent-chroma: 0.2;
+  /* The hue the greys lean toward, and how far (0 is pure grey, cap 0.03) */
+  --neutral-hue: 250;
+  --neutral-chroma: 0.008;
+  /* Multiplies every corner radius: 0.5 is sharper, 1.5 is softer */
+  --radius-scale: 1;
 
-:root,
-.force-light-mode,
-.dark .force-light-mode {
-  /* Neutrals lean toward this hue; text and light shadows use --ink-hue */
-  --tint-hue: 190;
-  --ink-hue: 195;
-
-  /* System fonts. To use your own, load the files in the app and name them
-     here, e.g. 'Inter Variable', ui-sans-serif, system-ui, sans-serif */
-  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --font-display: var(--font-sans);
-
-  /* Brand ramp. --brand-600 is the primary button. */
-  --brand-50: 185 45% 96%;
-  --brand-100: 186 45% 91%;
-  --brand-200: 187 42% 82%;
-  --brand-300: 188 40% 69%;
-  --brand-400: 189 38% 53%;
-  --brand-500: 190 45% 40%;
-  --brand-600: 191 55% 31%;
-  --brand-700: 192 55% 25%;
-  --brand-800: 193 52% 20%;
-  --brand-900: 194 50% 16%;
-  --brand-950: 196 55% 9%;
-
-  /* Highlight ramp. --highlight-300 is the marker fill. */
-  --highlight-50: 60 100% 96%;
-  --highlight-100: 58 97% 88%;
-  --highlight-200: 56 95% 78%;
-  --highlight-300: 54 92% 66%;
-  --highlight-400: 51 90% 55%;
-  --highlight-500: 48 88% 47%;
-  --highlight-600: 44 85% 39%;
-  --highlight-700: 40 80% 32%;
-  --highlight-800: 36 70% 26%;
-  --highlight-900: 32 64% 21%;
-  --highlight-950: 30 70% 11%;
-}
-
-.dark {
-  --tint-hue: 195;
-  --ink-hue: 190;
-
-  /* Optional: the base uses brand-300 and highlight-300 here */
-  /* --primary: 188 50% 70%; */
-  /* --ring: 188 50% 64%; */
+  /*
+   * Faces. The system font is the default and usually the right one. To use
+   * your own, load the files in the app and name them here.
+   */
+  /* --font-sans: 'Inter Variable', system-ui, sans-serif; */
+  /* --font-display: var(--font-sans); */
 }

package/tokens.css

@@ -1,129 +1,316 @@
 /*
- * san-ui base tokens: every color role, light and dark.
+ * san-ui tokens: every color, type, size, radius, shadow and motion value.
  *
- * Values are bare HSL channels so Tailwind opacity modifiers keep working
- * (bg-success/10, text-brand/80). Tailwind names for them live in
- * theme.css.
+ * Colors are OKLCH. A theme sets only the inputs below; the base fixes each
+ * role's lightness, so every role pair meets WCAG AA for any hue a theme
+ * picks (scripts/tokens.test.ts sweeps all 360). Tailwind names for these
+ * live in theme.css.
  *
- * This file holds what every app shares: the neutral surfaces, feedback
- * colors, lines, radius and the paper reset. The brand comes from a theme
- * (themes/*.css), imported after this file. A theme supplies:
- *
- *   --brand-50 … --brand-950       the primary color ramp
- *   --highlight-50 … --highlight-950 the highlighter ramp
- *   --tint-hue                     the hue neutrals lean toward
- *   --ink-hue                      the hue of text and light-mode shadows
- *   --font-sans, --font-display    optional, system fonts otherwise
- *
- * and may override any role below, usually primary, brand, highlight and
- * ring in dark mode.
+ * Light is the default. `.dark` on an ancestor (usually <html>) switches a
+ * subtree to dark, `.light` switches one back.
  */
 
-/*
- * Light values. `.dark .force-light-mode` is listed here so printed pages
- * stay light inside dark mode; its specificity beats `.dark`.
- */
+:root {
+  /* Theme inputs. Hues are unitless degrees. */
+  --accent-hue: 250;
+  --accent-chroma: 0.2; /* capped at 0.2 */
+  --neutral-hue: 250;
+  --neutral-chroma: 0.008; /* how far greys lean toward the hue, capped at 0.03 */
+  --radius-scale: 1;
+
+  --font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --font-display: var(--font-sans);
+  --font-rounded: ui-rounded, var(--font-sans);
+  --font-mono:
+    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* The capped inputs every role reads */
+  --a-c: min(var(--accent-chroma), 0.2);
+  --n-c: min(var(--neutral-chroma), 0.03);
+  /*
+   * The lightest accent white text still reads on, at 4.6:1, for this hue:
+   * cyans need a darker accent than blues or reds at the same lightness.
+   * A fit of the per-hue limit, kept under it at every hue.
+   */
+  --accent-l: calc(
+    0.5398 + 0.0239 * cos(var(--accent-hue) * 1deg) + 0.002 *
+      sin(var(--accent-hue) * 1deg) - 0.0136 * cos(var(--accent-hue) * 2deg) -
+      0.0036 * sin(var(--accent-hue) * 2deg)
+  );
+  --accent-base: oklch(var(--accent-l) var(--a-c) var(--accent-hue));
+}
+
+/* Light */
 :root,
-.force-light-mode,
-.dark .force-light-mode {
+.light,
+.dark .light {
   color-scheme: light;
 
-  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --font-display: var(--font-sans);
+  /* Grouped surfaces: a tinted canvas, white groups on it */
+  --canvas: oklch(0.967 var(--n-c) var(--neutral-hue));
+  --surface: oklch(1 0 0);
+  --surface-inset: oklch(0.975 calc(var(--n-c) * 0.6) var(--neutral-hue));
+  --overlay: oklch(0.995 calc(var(--n-c) * 0.3) var(--neutral-hue));
+
+  /* Text, like Apple's label colors */
+  --ink: oklch(0.2 calc(var(--n-c) * 1.5) var(--neutral-hue));
+  --ink-secondary: oklch(0.46 calc(var(--n-c) * 1.5) var(--neutral-hue));
+  --ink-tertiary: oklch(0.68 var(--n-c) var(--neutral-hue));
 
-  /* Surfaces: a tinted canvas, white cards that sit on it */
-  --background: var(--tint-hue) 33% 99%;
-  --foreground: var(--ink-hue) 30% 13%; /* ink */
-  --surface: var(--tint-hue) 26% 96.5%; /* soft section cards */
-  --card: 0 0% 100%; /* outline cards */
-  --card-foreground: var(--ink-hue) 30% 13%;
-  --popover: 0 0% 100%; /* menus, popovers, dialogs */
-  --popover-foreground: var(--ink-hue) 30% 13%;
-  --muted: var(--tint-hue) 20% 93.5%;
-  --muted-foreground: var(--tint-hue) 10% 42%; /* secondary text, 5.6:1 on the canvas */
-
-  /* Actions and brand */
-  --primary: var(--brand-600); /* main buttons, selection, child card tints */
-  --primary-foreground: 0 0% 100%;
-  --brand: var(--brand-600);
-  --brand-foreground: 0 0% 100%;
-  --highlight: var(--highlight-300); /* highlighter fill */
-  --highlight-foreground: var(--highlight-950);
-  --destructive: 2 58% 47%; /* brick red, 5.6:1 on white */
-  --destructive-foreground: 0 0% 100%;
-
-  /* Feedback */
-  --success: 152 62% 27%; /* leaf green */
-  --success-foreground: 0 0% 100%;
-  --warning: 26 90% 36%; /* burnt orange, kept apart from a yellow highlight */
-  --warning-foreground: 0 0% 100%;
-  --info: 214 72% 44%; /* ink blue */
-  --info-foreground: 0 0% 100%;
-
-  /* Lines */
-  --border: var(--tint-hue) 20% 90%;
-  --input: var(--tint-hue) 16% 84%; /* a step darker than border, so fields read as fields */
-  --ring: var(--brand-500);
-
-  /* Shadows are tinted with ink, never pure black */
-  --shadow-color: var(--ink-hue) 30% 20%;
-
-  --radius: 0.625rem;
+  /* Lines. Control borders keep 3:1 against every surface. */
+  --separator: oklch(0.885 var(--n-c) var(--neutral-hue));
+  --border-control: oklch(0.62 var(--n-c) var(--neutral-hue));
+
+  /* Neutral fills are translucent, so they read on any surface */
+  --fill: oklch(0.55 calc(var(--n-c) * 2) var(--neutral-hue) / 0.1);
+  --fill-hover: oklch(0.55 calc(var(--n-c) * 2) var(--neutral-hue) / 0.15);
+  --fill-strong: oklch(0.55 calc(var(--n-c) * 2) var(--neutral-hue) / 0.22);
+  --scrim: oklch(0.15 var(--n-c) var(--neutral-hue) / 0.32);
+
+  /* Accent: `accent` is a fill under white text, `accent-text` reads as text */
+  --accent: var(--accent-base);
+  --accent-pressed: oklch(
+    calc(var(--accent-l) - 0.06) var(--a-c) var(--accent-hue)
+  );
+  --accent-foreground: oklch(1 0 0);
+  --accent-text: oklch(
+    calc(var(--accent-l) - 0.06) var(--a-c) var(--accent-hue)
+  );
+  --accent-soft: oklch(0.955 calc(var(--a-c) * 0.22) var(--accent-hue));
+  --accent-soft-hover: oklch(0.935 calc(var(--a-c) * 0.3) var(--accent-hue));
+  --focus: var(--accent-base);
+
+  /* Status: a solid fill, its text color, and a soft fill */
+  --success: oklch(0.53 0.14 150);
+  --success-foreground: oklch(1 0 0);
+  --success-text: oklch(0.49 0.13 150);
+  --success-soft: oklch(0.955 0.035 150);
+  --warning: oklch(0.56 0.15 55);
+  --warning-foreground: oklch(1 0 0);
+  --warning-text: oklch(0.51 0.14 55);
+  --warning-soft: oklch(0.955 0.035 70);
+  --danger: oklch(0.55 0.19 27);
+  --danger-foreground: oklch(1 0 0);
+  --danger-text: oklch(0.51 0.18 27);
+  --danger-soft: oklch(0.955 0.025 20);
+  --info: oklch(0.54 0.17 245);
+  --info-foreground: oklch(1 0 0);
+  --info-text: oklch(0.5 0.16 245);
+  --info-soft: oklch(0.955 0.025 245);
+
+  /* The highlighter, for Mark and text selection */
+  --highlight: oklch(0.9 0.15 98);
+  --highlight-foreground: oklch(0.22 0.03 80);
+
+  --shadow-color: oklch(0.25 calc(var(--n-c) * 2) var(--neutral-hue));
 }
 
-.dark {
+/* Dark: elevation is lightness, so raised and floating surfaces get lighter */
+.dark,
+.light .dark {
   color-scheme: dark;
 
-  /* Surfaces: deep ink, not charcoal */
-  --background: var(--tint-hue) 20% 8%;
-  --foreground: var(--ink-hue) 22% 92%;
-  --surface: var(--tint-hue) 17% 11%;
-  --card: var(--tint-hue) 17% 11%;
-  --card-foreground: var(--ink-hue) 22% 92%;
-  --popover: var(--tint-hue) 17% 12.5%;
-  --popover-foreground: var(--ink-hue) 22% 92%;
-  --muted: var(--tint-hue) 14% 16%;
-  --muted-foreground: var(--ink-hue) 10% 66%;
-
-  /* Light brand steps with dark text on them; themes usually tune these */
-  --primary: var(--brand-300);
-  --primary-foreground: var(--brand-950);
-  --brand: var(--brand-300);
-  --brand-foreground: var(--brand-950);
-  --highlight: var(--highlight-300);
-  --highlight-foreground: var(--highlight-950);
-  --destructive: 2 62% 67%;
-  --destructive-foreground: 2 70% 14%;
-
-  --success: 150 46% 58%;
-  --success-foreground: 152 60% 10%;
-  --warning: 30 88% 62%;
-  --warning-foreground: 24 80% 12%;
-  --info: 214 85% 70%;
-  --info-foreground: 220 60% 14%;
-
-  --border: var(--tint-hue) 14% 18%;
-  --input: var(--tint-hue) 13% 25%;
-  --ring: var(--brand-400);
-
-  --shadow-color: var(--tint-hue) 40% 2%;
+  --canvas: oklch(0.155 var(--n-c) var(--neutral-hue));
+  --surface: oklch(0.205 var(--n-c) var(--neutral-hue));
+  --surface-inset: oklch(0.25 var(--n-c) var(--neutral-hue));
+  --overlay: oklch(0.255 var(--n-c) var(--neutral-hue));
+
+  --ink: oklch(0.965 calc(var(--n-c) * 0.5) var(--neutral-hue));
+  --ink-secondary: oklch(0.75 var(--n-c) var(--neutral-hue));
+  --ink-tertiary: oklch(0.52 var(--n-c) var(--neutral-hue));
+
+  --separator: oklch(0.31 var(--n-c) var(--neutral-hue));
+  --border-control: oklch(0.57 var(--n-c) var(--neutral-hue));
+
+  --fill: oklch(0.6 calc(var(--n-c) * 2) var(--neutral-hue) / 0.16);
+  --fill-hover: oklch(0.6 calc(var(--n-c) * 2) var(--neutral-hue) / 0.22);
+  --fill-strong: oklch(0.6 calc(var(--n-c) * 2) var(--neutral-hue) / 0.3);
+  --scrim: oklch(0 0 0 / 0.5);
+
+  --accent: var(--accent-base);
+  --accent-pressed: oklch(
+    calc(var(--accent-l) - 0.06) var(--a-c) var(--accent-hue)
+  );
+  --accent-foreground: oklch(1 0 0);
+  --accent-text: oklch(0.77 min(var(--a-c), 0.14) var(--accent-hue));
+  --accent-soft: oklch(0.29 calc(var(--a-c) * 0.4) var(--accent-hue));
+  --accent-soft-hover: oklch(0.33 calc(var(--a-c) * 0.45) var(--accent-hue));
+  --focus: var(--accent-text);
+
+  --success-text: oklch(0.78 0.13 150);
+  --success-soft: oklch(0.29 0.05 150);
+  --warning-text: oklch(0.8 0.12 65);
+  --warning-soft: oklch(0.29 0.05 60);
+  --danger-text: oklch(0.77 0.13 25);
+  --danger-soft: oklch(0.29 0.06 25);
+  --info-text: oklch(0.77 0.11 245);
+  --info-soft: oklch(0.29 0.05 245);
+
+  --highlight: oklch(0.85 0.15 95);
+
+  --shadow-color: oklch(0.08 var(--n-c) var(--neutral-hue));
 }
 
 /*
- * Printed pages (documents, invoices, resumes) are paper, not app: plain neutral
- * greys and a print font, so the preview matches the download.
+ * An accent-colored surface, like a promo card. Inside it the roles point at
+ * white, so text and every button variant stay legible without special cases.
  */
-.force-light-mode,
-.dark .force-light-mode {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --surface: 0 0% 98%;
-  --card-foreground: 0 0% 3.9%;
-  --popover-foreground: 0 0% 3.9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-
-  font-family: Helvetica, Arial, sans-serif;
+.surface-accent {
+  --surface: oklch(calc(var(--accent-l) - 0.05) var(--a-c) var(--accent-hue));
+  --surface-inset: oklch(0 0 0 / 0.12);
+  --overlay: var(--surface);
+  --ink: oklch(1 0 0);
+  --ink-secondary: oklch(1 0 0 / 0.88);
+  --ink-tertiary: oklch(1 0 0 / 0.6);
+  --separator: oklch(1 0 0 / 0.25);
+  --border-control: oklch(1 0 0 / 0.7);
+  --fill: oklch(0 0 0 / 0.12);
+  --fill-hover: oklch(0 0 0 / 0.18);
+  --fill-strong: oklch(0 0 0 / 0.24);
+  --accent: oklch(1 0 0);
+  --accent-pressed: oklch(0.92 0 0);
+  --accent-foreground: var(--surface);
+  --accent-text: oklch(1 0 0);
+  --accent-soft: oklch(0 0 0 / 0.12);
+  --accent-soft-hover: oklch(0 0 0 / 0.18);
+  --focus: oklch(1 0 0);
+}
+
+/* More contrast on request: solid lines, darker secondary text */
+@media (prefers-contrast: more) {
+  :root,
+  .light {
+    --ink-secondary: oklch(0.36 calc(var(--n-c) * 1.5) var(--neutral-hue));
+    --separator: oklch(0.7 var(--n-c) var(--neutral-hue));
+    --border-control: oklch(0.45 var(--n-c) var(--neutral-hue));
+  }
+  .dark {
+    --ink-secondary: oklch(0.85 var(--n-c) var(--neutral-hue));
+    --separator: oklch(0.5 var(--n-c) var(--neutral-hue));
+    --border-control: oklch(0.72 var(--n-c) var(--neutral-hue));
+  }
+}
+
+/*
+ * Density: one set of sizes for a desk, one for touch. Regular on a mouse,
+ * comfortable on a touch screen; `data-density` on any element overrides it.
+ * Type is in rem, so it follows the user's text size.
+ */
+:root,
+[data-density='regular'] {
+  --type-title-1: 1.75rem;
+  --type-title-2: 1.25rem;
+  --type-title-3: 1.0625rem;
+  --type-body: 0.9375rem;
+  --type-subhead: 0.875rem;
+  --type-caption: 0.75rem;
+
+  --control-sm: 1.75rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.75rem;
+  --row: 2.75rem;
+  --inset: 1rem;
+  --radius-control: calc(9px * var(--radius-scale));
+  --radius-card: calc(14px * var(--radius-scale));
+}
+
+@media (pointer: coarse) {
+  :root:not([data-density]) {
+    --type-title-1: 2.125rem;
+    --type-title-2: 1.375rem;
+    --type-title-3: 1.25rem;
+    --type-body: 1.0625rem;
+    --type-subhead: 0.9375rem;
+    --type-caption: 0.8125rem;
+
+    --control-sm: 2rem;
+    --control-md: 2.75rem;
+    --control-lg: 3.25rem;
+    --row: 3rem;
+    --inset: 1rem;
+    --radius-control: calc(12px * var(--radius-scale));
+    --radius-card: calc(18px * var(--radius-scale));
+  }
+}
+
+[data-density='compact'] {
+  --type-title-1: 1.5rem;
+  --type-title-2: 1.125rem;
+  --type-title-3: 0.9375rem;
+  --type-body: 0.875rem;
+  --type-subhead: 0.8125rem;
+  --type-caption: 0.75rem;
+
+  --control-sm: 1.5rem;
+  --control-md: 2rem;
+  --control-lg: 2.5rem;
+  --row: 2.25rem;
+  --inset: 0.75rem;
+  --radius-control: calc(7px * var(--radius-scale));
+  --radius-card: calc(10px * var(--radius-scale));
+}
+
+[data-density='comfortable'] {
+  --type-title-1: 2.125rem;
+  --type-title-2: 1.375rem;
+  --type-title-3: 1.25rem;
+  --type-body: 1.0625rem;
+  --type-subhead: 0.9375rem;
+  --type-caption: 0.8125rem;
+
+  --control-sm: 2rem;
+  --control-md: 2.75rem;
+  --control-lg: 3.25rem;
+  --row: 3rem;
+  --inset: 1rem;
+  --radius-control: calc(12px * var(--radius-scale));
+  --radius-card: calc(18px * var(--radius-scale));
+}
+
+:root {
+  /* Floating panels and sheets keep their shape at every density */
+  --radius-panel: calc(14px * var(--radius-scale));
+  --panel-inset: 0.3125rem;
+  --radius-item: max(calc(var(--radius-panel) - var(--panel-inset) - 1px), 4px);
+  --radius-sheet: calc(22px * var(--radius-scale));
+
+  /*
+   * Motion. Springs from Apple's defaults as CSS curves: critically damped
+   * (no overshoot) for anything that appears, a little bounce only after a
+   * gesture. The JS versions for Motion are in foundations/motion.ts.
+   */
+  --ease-spring: linear(
+    0,
+    0.0454,
+    0.1465,
+    0.2678,
+    0.3895,
+    0.5015,
+    0.5993,
+    0.6819,
+    0.75,
+    0.8052,
+    0.8493,
+    0.884,
+    0.9113,
+    0.9324,
+    0.9487,
+    0.9612,
+    0.9707,
+    0.978,
+    0.9835,
+    0.9877,
+    0.9908,
+    0.9931,
+    0.9949,
+    0.9962,
+    1
+  );
+  --duration-spring: 450ms;
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration-press: 100ms;
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
 }

package/themes/eloovor.css

@@ -1,62 +0,0 @@
-/*
- * Eloovor theme: "ink and highlighter".
- *
- * The logo violet does the work of a pen: primary actions, focus,
- * selection. Neutrals are that same ink, thinned, so greys lean slightly
- * violet instead of reading as dead grey. Marigold is the highlighter: a
- * fill for the few things that should jump out, like matched keywords or
- * Elo's suggestions. It is never used for text on white.
- *
- * Import after tokens.css. Fonts are loaded by the app
- * (@fontsource-variable/figtree, @fontsource-variable/bricolage-grotesque).
- */
-
-:root,
-.force-light-mode,
-.dark .force-light-mode {
-  --tint-hue: 252;
-  --ink-hue: 255;
-
-  --font-sans:
-    'Figtree Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
-    sans-serif;
-  --font-display:
-    'Bricolage Grotesque Variable', 'Figtree Variable', ui-sans-serif,
-    system-ui, sans-serif;
-
-  /* Brand ramp, built around the logo violet #574a7d (brand-600) */
-  --brand-50: 255 33% 97%;
-  --brand-100: 255 33% 94%;
-  --brand-200: 255 30% 87%;
-  --brand-300: 255 29% 77%;
-  --brand-400: 255 26% 64%;
-  --brand-500: 255 24% 51%;
-  --brand-600: 255 26% 39%;
-  --brand-700: 255 28% 32%;
-  --brand-800: 255 30% 25%;
-  --brand-900: 255 32% 19%;
-  --brand-950: 255 36% 12%;
-
-  /* Highlight ramp: marigold */
-  --highlight-50: 46 100% 96%;
-  --highlight-100: 45 97% 89%;
-  --highlight-200: 44 95% 79%;
-  --highlight-300: 42 93% 68%;
-  --highlight-400: 40 91% 58%;
-  --highlight-500: 37 88% 50%;
-  --highlight-600: 33 85% 42%;
-  --highlight-700: 29 80% 35%;
-  --highlight-800: 26 70% 29%;
-  --highlight-900: 24 64% 23%;
-  --highlight-950: 22 70% 12%;
-}
-
-.dark {
-  --tint-hue: 255;
-  --ink-hue: 250;
-
-  --primary: 255 48% 78%; /* lavender, dark text on it */
-  --brand: 255 44% 74%;
-  --highlight: 42 86% 62%;
-  --ring: 255 48% 72%;
-}