@holistics/anfra-design 0.0.0-stage → 0.14.2

package/DESIGN.md

@@ -0,0 +1,325 @@
+---
+version: alpha
+name: anfra
+description: anfra's product UI, in anfra core (anfra serve, the SDK's plugin UI) and anfra Cloud. Paper and ink with one violet accent, dense and quiet, on the anfra brand.
+colors:
+  primary: 'oklch(0.565 0.194 300.3)'
+  primary-hover: 'oklch(0.517 0.192 299.1)'
+  on-primary: 'oklch(1 0 0)'
+  surface: 'oklch(1 0 0)'
+  surface-chrome: 'oklch(0.955 0.007 88.6)'
+  surface-sunken: 'oklch(0.973 0.005 95.1)'
+  on-surface: 'oklch(0.201 0.022 301.1)'
+  on-surface-weak: 'oklch(0.392 0.021 304.3)'
+  placeholder: 'oklch(0.485 0.022 306.3)'
+  disabled-surface: 'oklch(0.201 0.022 301.1 / 0.04)'
+  disabled-text: 'oklch(0.723 0.017 306.3)'
+  link: 'oklch(0.484 0.181 298.1)'
+  selected: 'oklch(0.946 0.027 304.8)'
+  inverse-surface: 'oklch(0.201 0.022 301.1)'
+  inverse-on-surface: 'oklch(0.961 0.007 304.2)'
+  error: 'oklch(0.549 0.199 27.1)'
+  error-text: 'oklch(0.501 0.17 27.2)'
+  error-container: 'oklch(0.971 0.014 22.8)'
+  warning-text: 'oklch(0.501 0.1 70.3)'
+  warning-container: 'oklch(0.973 0.028 84.6)'
+  success-text: 'oklch(0.479 0.1 151.8)'
+  success-container: 'oklch(0.972 0.021 152.2)'
+typography:
+  title:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: 600
+    lineHeight: 28px
+  heading:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 20px
+  body:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 20px
+  label:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 20px
+  caption:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 16px
+  code:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: 400
+    lineHeight: 28px
+    letterSpacing: 0.5em
+    fontFeature: '"tnum"'
+  mono-label:
+    fontFamily: Geist Mono
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 16px
+    letterSpacing: 0.025em
+rounded:
+  md: 6px
+  lg: 10px
+  xl: 14px
+  pill: 9999px
+spacing:
+  unit: 4px
+  control-height: 32px
+  field-gap: 8px
+  form-gap: 24px
+  panel-inset: 8px
+  sheet-padding: 24px
+  sheet-width: 384px
+  logomark-sheet: 48px
+components:
+  button-primary:
+    backgroundColor: '{colors.primary}'
+    textColor: '{colors.on-primary}'
+    typography: '{typography.label}'
+    rounded: '{rounded.lg}'
+    height: '{spacing.control-height}'
+    padding: 10px
+  button-primary-hover:
+    backgroundColor: '{colors.primary-hover}'
+    textColor: '{colors.on-primary}'
+  button-outline:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.label}'
+    rounded: '{rounded.lg}'
+    height: '{spacing.control-height}'
+  button-ghost:
+    textColor: '{colors.on-surface-weak}'
+    typography: '{typography.label}'
+    rounded: '{rounded.lg}'
+    height: '{spacing.control-height}'
+  button-link:
+    textColor: '{colors.link}'
+    typography: '{typography.label}'
+    height: '{spacing.control-height}'
+  button-disabled:
+    backgroundColor: '{colors.disabled-surface}'
+    textColor: '{colors.disabled-text}'
+  input:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    typography: '{typography.body}'
+    rounded: '{rounded.lg}'
+    height: '{spacing.control-height}'
+    padding: 10px
+  input-placeholder:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.placeholder}'
+  input-code:
+    typography: '{typography.code}'
+    height: '{spacing.control-height}'
+  panel:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    rounded: '{rounded.xl}'
+  chrome:
+    backgroundColor: '{colors.surface-chrome}'
+    textColor: '{colors.on-surface}'
+  well:
+    backgroundColor: '{colors.surface-sunken}'
+    textColor: '{colors.on-surface-weak}'
+  sheet:
+    backgroundColor: '{colors.surface}'
+    textColor: '{colors.on-surface}'
+    rounded: '{rounded.xl}'
+    padding: '{spacing.sheet-padding}'
+    width: '{spacing.sheet-width}'
+  row-selected:
+    backgroundColor: '{colors.selected}'
+    textColor: '{colors.on-surface}'
+  tooltip:
+    backgroundColor: '{colors.inverse-surface}'
+    textColor: '{colors.inverse-on-surface}'
+    typography: '{typography.caption}'
+    rounded: '{rounded.md}'
+  alert-danger:
+    backgroundColor: '{colors.error-container}'
+    textColor: '{colors.on-surface}'
+    rounded: '{rounded.xl}'
+  field-error:
+    textColor: '{colors.error-text}'
+    typography: '{typography.body}'
+  button-destructive:
+    backgroundColor: '{colors.error}'
+    textColor: '{colors.on-primary}'
+    typography: '{typography.label}'
+    rounded: '{rounded.lg}'
+  status-warning:
+    backgroundColor: '{colors.warning-container}'
+    textColor: '{colors.warning-text}'
+    typography: '{typography.caption}'
+    rounded: '{rounded.pill}'
+  status-success:
+    backgroundColor: '{colors.success-container}'
+    textColor: '{colors.success-text}'
+    typography: '{typography.caption}'
+    rounded: '{rounded.pill}'
+  mono-label:
+    textColor: '{colors.placeholder}'
+    typography: '{typography.mono-label}'
+---
+
+# anfra design
+
+## Overview
+
+anfra's product UI is a working notebook on warm paper: ink for everything, one violet pen for the one thing the reader follows. It is a tool for analysts who read models, metrics and query results all day, so it is dense, calm and exact. Nothing glows, nothing floats without a reason, and no screen tries to impress.
+
+- **Paper and ink first.** Paper chrome frames a white work panel. Text, rules and icons are ink.
+- **One violet.** Violet marks the one primary action of a view, links, focus and selection. It is never decoration.
+- **Drawn, not decorated.** Hairlines carry structure. Shadows only lift what floats.
+- **One density.** Every screen uses the same control height, type scale and spacing.
+
+**One language, two apps.** This file holds the rules every anfra screen follows, in anfra core (`anfra serve`'s pages in `web/appserve`, and the plugin UI the SDK draws in any host) and in anfra Cloud. It is public, and it is the source: anfra Cloud's `web/DESIGN.md` extends it with Cloud-only rules (its signed-out pages, its forms) and its Tailwind and shadcn-vue notes, and never restates or overrides a rule here. The brand's principles, logo and marketing pages live in the brand file (`holistics/anfra-landing`, `DESIGN.md` on `main`).
+
+The front matter holds the light theme's values. The implementation is `tokens.css`, `fonts.css` and `type.css` beside this file, published as `@holistics/anfra-design`; it holds both themes. A change goes into both, here first.
+
+## Colors
+
+Colors are in `tokens.css`, in two tiers, after the Holistics Design System. A host adds its own names on top (a third tier), and never a color of its own.
+
+| Tier | Names | Used by |
+| --- | --- | --- |
+| 1 Primitives | `--anfra-{ink,paper,violet,red,amber,green,white,black}-{step}`, OKLCH | Tier 2 only |
+| 2 Semantic | `--anfra-color-{scope}-{semantic}-{state}`, scope = `background`, `text`, `icon`, `border`, `focus-ring` | Every component, in every host |
+| 3 Host aliases | Cloud: Tailwind's `text-weak`, `bg-hover`, shadcn's `--primary`. appserve: its stylesheet | That host's components |
+
+The same word is a different color for each scope: `--anfra-color-text-weak`, `--anfra-color-background-hover`, `--anfra-color-border-strong`, `--anfra-color-icon-weak`. Below, a token is named without its `--anfra-color-` prefix.
+
+- **Paper** `background-base-default` {colors.surface-chrome} is the chrome: the sidebar and the frame around the panel. **White** `background-default` {colors.surface} is the work panel, cards and dialogs. **Sunken paper** `background-secondary-default` {colors.surface-sunken} is a well inside the panel: code, read-only fields, card footers.
+- **Ink** `text-default` {colors.on-surface} carries titles, body text and values. **Weak ink** `text-weak` {colors.on-surface-weak} is secondary text and quiet controls. **Muted ink** `text-placeholder` {colors.placeholder} is the one muted color: descriptions, captions, muted labels and placeholders. There is no second muted color.
+- **Violet** {colors.primary} is the one accent: `background-highlight-default` for the one filled button of a view, `text-highlight-default` or `text-link-default` {colors.link} for violet text. The violet wash `background-interactive-highlight-default` {colors.selected} marks a selected row or option, always with a checked control and `aria-selected`.
+- **Status** is restrained red, amber and green; info is neutral ink, never blue or violet. A status always has a label or an icon, and never fills a large surface: `background-{danger,warning,success,info}-secondary-default` behind `text-{s}-default`.
+- **Disabled** is `background-disabled` and `text-disabled`, plus `border-disabled` on a control with a border. Never lower the opacity instead.
+- **Neutral states** are `background-hover` and `background-active`; they work on paper and on white.
+- **Errors**: `text-danger-default` {colors.error-text} for error text; `background-danger-default` {colors.error} is the solid fill, never text.
+- **Dark** redefines Tier 2 only, under `.dark` or `[data-theme="dark"]` on `<html>`. A host follows the system by default; light and dark are choices, stored per device.
+
+## Typography
+
+Inter for all text; Geist Mono for code, revisions, mono labels and names the user writes in code. Both are bundled (`fonts.css`, `--anfra-font-sans`, `--anfra-font-mono`), never loaded from a CDN: an on-prem install, or `anfra serve` on a laptop, may be offline.
+
+A screen uses three sizes, 20, 14 and 12px: to add emphasis, change weight or color, not size. `type.css` has each role as a `font` shorthand (`font: var(--anfra-type-body)`).
+
+| Role | Token | Size / leading | Weight | Use |
+| --- | --- | --- | --- | --- |
+| title | {typography.title} | 20 / 28px | 600 | The one heading of a page, a step or a dialog |
+| heading | {typography.heading} | 14 / 20px | 600 | Section headings, card titles |
+| body | {typography.body} | 14 / 20px | 400, 450 in dark | Descriptions, field text, alerts, list rows, menu items |
+| label | {typography.label} | 14 / 20px | 500 | Buttons, links, field labels, the current page, names |
+| caption | {typography.caption} | 12 / 16px | 400 | Dividers, notes under a button, roles, timestamps, tooltips, shortcuts |
+| mono-label | {typography.mono-label} | 12 / 16px | 400 | Uppercase kinds and revisions |
+
+- **No other weights**, except: caption at 500 for badges, status pills, group labels and initial tiles; 500 on a name inside a sentence; 500 on the current item of a nav.
+- **A new role gets a new name**, never a size suffix (`heading`, not `body-lg`).
+- **A name in a sentence** (an organization slug, an address) is Inter 500, never mono.
+- Tabular numbers wherever numbers change or line up.
+
+## Layout
+
+One density for every screen, on a 4px unit {spacing.unit}.
+
+- **Work screens**: the paper chrome holds the sidebar; the white panel is inset {spacing.panel-inset} on the paper, with a 14px radius, a 1px `border-default` and no shadow. The header bar is navigation (a breadcrumb); the page's subject is its own heading.
+- **One control height**: {spacing.control-height} for every field and button.
+- **A panel docked beside the work** (the plugins' panel) sits inside the white panel, behind a 1px `border-default`, with its tabs in a 48px header.
+
+## Elevation & Depth
+
+Depth comes from tone and hairlines: paper behind, white in front, 1px rules between. Shadows are neutral ink, never colored, and only two exist: `--anfra-e1` for a resting card, `--anfra-e2` for what floats (menus, popovers, dialogs). On dark, both become a border.
+
+## Shapes
+
+Soft, not round. Controls and surfaces nest by radius: the smaller the thing, the smaller the corner.
+
+- `--anfra-radius-md` {rounded.md}: menu items, nav items, chips, tooltips.
+- `--anfra-radius-lg` {rounded.lg}: buttons, fields, alerts.
+- `--anfra-radius-xl` {rounded.xl}: cards, popovers, dialogs, the panel.
+- `--anfra-radius-pill` {rounded.pill}: status pills and counters only, never buttons.
+
+## Components
+
+Each host builds these from its own toolkit (Cloud: shadcn-vue; appserve and the SDK: plain HTML and CSS), and each looks the same.
+
+### Buttons
+
+| Variant | Look | Use |
+| --- | --- | --- |
+| default | Violet fill {colors.primary}, white label | The one primary action of a view |
+| outline | White, `border-strong`, ink label | Every other action that needs weight |
+| ghost | No border, weak ink, `background-hover` on hover | Quiet actions: toolbar buttons, "Back", "Sign out" |
+| link | Violet text, underline on hover | Task actions that do the job another way |
+| destructive | Red fill {colors.error}, white label | A destructive action |
+
+- Labels are the label role. Buttons are {spacing.control-height} high; a smaller button never carries an action in a form or a list row.
+- A toggled toolbar button (a panel open, a mode on) shows `background-active` and `aria-pressed`.
+- Every pressable control scales to 0.97 on press.
+
+### Fields
+
+- **Rest**: white, `border-field`, the body role, `text-placeholder` for the placeholder.
+- **Focus**: no outline; the border turns violet (`border-highlight-strong`) and doubles to 2px.
+- **Error**: the border is red (`border-danger-strong`) at rest and on focus, never violet. The message is `text-danger-default` under the field and clears as soon as the user types again.
+
+### Surfaces and status
+
+- **Current nav item**: on the paper, a white chip with a violet icon; in a nav inside the panel (tabs, settings), `background-active` and weight 500. Both carry `aria-current="page"` or `aria-selected`.
+- **Alerts**: a tinted container with an icon and the body role.
+- **Badges and status pills**: caption at 500, a label or an icon always beside the color.
+- **Tooltips**: inverse ink (`background-inverted-default`, `text-inverted-default`), the caption role, `--anfra-radius-md`.
+
+### Icons
+
+Lucide, at 16px in controls and 14px in dense rows, `currentColor`, never filled. Core draws the same icons from their path data, so it carries no icon library.
+
+### Logo
+
+The product shows the logomark only: violet on light, the inverse on dark, at the top of the sidebar. Never set the mark beside typed "anfra".
+
+## Do's and Don'ts
+
+- **Do** use one filled violet button per view; every other action is outline, ghost or link.
+- **Do** pick a type role for every text, and keep three sizes on a screen: 20, 14 and 12px.
+- **Do** give every status a label or an icon; **don't** use red and green for good and bad in charts.
+- **Do** keep every control {spacing.control-height} high.
+- **Don't** lower opacity for disabled, or use a fill color as text.
+- **Don't** add glows, gradients, glass, colored shadows or textures.
+- **Don't** animate more than the properties that change, or for longer than 300ms on a control.
+- **Don't** set the logomark beside typed "anfra".
+- **Don't** add a color to a host: add a token here first.
+
+## Motion
+
+`--anfra-ease-out` for UI, under 300ms: 90ms press (scale to 0.97), 160ms hover, 220ms panels (`--anfra-t-press`, `--anfra-t-hover`, `--anfra-t-ui`). Menus and tooltips scale from 0.97, never slide. `prefers-reduced-motion` removes movement and keeps short fades.
+
+## Content
+
+- "anfra" is lowercase, even first in a sentence.
+- Text of one sentence has no end period; two or more sentences keep all of theirs.
+- Users read "organization", never "org", "tenant" or "workspace". Code and URLs keep `org`.
+
+## Accessibility
+
+- Contrast follows WCAG 2.2 AA: text 4.5:1; icons, field borders and the focus outline 3:1. A new token is measured in both themes before it ships.
+- Focus is a 2px violet outline (`focus-ring-default`) offset 3px on everything focusable; a control keeps its own border. Text fields show focus on their border instead.
+- Color never carries meaning alone: a status, an error or a met rule also has text or an icon.
+
+## Implementation
+
+- **Package**: `@holistics/anfra-design`, released with anfra at its version. `index.css` imports `fonts.css`, `tokens.css` and `type.css`.
+- **anfra Cloud** imports it in `web/src/main.css` and maps Tier 2 onto Tailwind and shadcn's aliases there.
+- **appserve** imports it in `web/appserve/src/style.css`; its stylesheet uses Tier 2 tokens only.
+- **The SDK's plugin UI** reads the theme a host passes (`--anfra-color-bg` and the rest, `web/sdk/src/common/theme.ts`); a host takes those from Tier 2.
+- **To change a rule or a token**: a PR here, with `tokens.css` and this file in step; then each host takes the release. A rule for one page goes in that page's spec, not here.
+- **Checks**: `pnpm --filter @holistics/anfra-design test` (every reference resolves, dark redefines only Tier 2, only Tier 1 holds raw colors); `npx @google/design.md lint web/design/DESIGN.md`.

package/fonts.css

@@ -0,0 +1,11 @@
+/*
+ * Inter for all text, Geist Mono for code and names written in code. Bundled, never loaded from a
+ * CDN: an on-prem install, or `anfra serve` on a laptop, may be offline.
+ */
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/geist-mono';
+
+:root {
+  --anfra-font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+  --anfra-font-mono: 'Geist Mono Variable', ui-monospace, monospace;
+}

package/index.css

@@ -0,0 +1,4 @@
+/* Everything a host needs: the fonts, the tokens and the type roles. */
+@import './fonts.css';
+@import './tokens.css';
+@import './type.css';

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "@holistics/anfra-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.14.2",
+  "description": "anfra's design tokens, type and rules: one design language for anfra core (appserve, the SDK's plugin UI) and anfra Cloud",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/holistics/anfra.git",
+    "directory": "web/design"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./index.css",
+    "./index.css": "./index.css",
+    "./tokens.css": "./tokens.css",
+    "./fonts.css": "./fonts.css",
+    "./type.css": "./type.css",
+    "./DESIGN.md": "./DESIGN.md",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.css",
+    "tokens.css",
+    "fonts.css",
+    "type.css",
+    "DESIGN.md"
+  ],
+  "scripts": {
+    "test": "node --test"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0"
+  }
+}

package/tokens.css

@@ -0,0 +1,319 @@
+/*
+ * anfra's design tokens: the one source of colour, elevation and motion for anfra core (appserve,
+ * the SDK's plugin UI) and anfra Cloud. DESIGN.md beside this file says which token to use for what.
+ *   Tier 1  primitives   --anfra-{hue}-{step}                       raw OKLCH, never used by components
+ *   Tier 2  semantic     --anfra-color-{scope}-{semantic}-{state}   scope = background | text | icon | border | focus-ring
+ * A host maps Tier 2 onto its own names (Cloud: Tailwind and shadcn's aliases; appserve: its stylesheet).
+ * Dark redefines Tier 2 only, under `.dark` (Cloud) or `[data-theme="dark"]` (appserve) on <html>.
+ * Moved from anfra-cloud web/src/main.css, values unchanged.
+ */
+
+/* ------------------------------------------------------------------ Tier 1: primitives */
+:root {
+  --anfra-ink-0: oklch(1 0 0); /* #ffffff */
+  --anfra-ink-100: oklch(0.961 0.007 304.2); /* #f3f1f6 */
+  --anfra-ink-200: oklch(0.879 0.016 302.5); /* #d9d5e0 */
+  --anfra-ink-300: oklch(0.723 0.017 306.3); /* #a8a3ae */
+  --anfra-ink-400: oklch(0.679 0.024 300); /* #9a95a5 */
+  --anfra-ink-500: oklch(0.531 0.024 300.8); /* #6e6978 */
+  --anfra-ink-550: oklch(0.485 0.022 306.3); /* #625c69 */
+  --anfra-ink-600: oklch(0.47 0.023 301.8); /* #5d5866 */
+  --anfra-ink-700: oklch(0.392 0.021 304.3); /* #48434f */
+  --anfra-ink-750: oklch(0.343 0.025 298.2); /* #3a3644 */
+  --anfra-ink-800: oklch(0.286 0.021 301.7); /* #2c2833 */
+  --anfra-ink-850: oklch(0.251 0.017 300.4); /* #232029 */
+  --anfra-ink-875: oklch(0.223 0.014 298.3); /* #1c1a21 */
+  --anfra-ink-900: oklch(0.201 0.022 301.1); /* #18141f */
+  --anfra-ink-950: oklch(0.176 0.008 297); /* #111014 */
+  --anfra-ink-1000: oklch(0.157 0.009 296.9); /* #0d0c10 */
+  --anfra-ink-a4: oklch(0.201 0.022 301.1 / 0.04); /* #18141f @ 4% */
+  --anfra-ink-a5: oklch(0.201 0.022 301.1 / 0.05); /* #18141f @ 5% */
+  --anfra-ink-a8: oklch(0.201 0.022 301.1 / 0.08); /* #18141f @ 8% */
+  --anfra-ink-a9: oklch(0.201 0.022 301.1 / 0.09); /* #18141f @ 9% */
+  --anfra-ink-a12: oklch(0.201 0.022 301.1 / 0.12); /* #18141f @ 12% */
+  --anfra-ink-a24: oklch(0.201 0.022 301.1 / 0.24); /* #18141f @ 24% */
+  --anfra-ink-a40: oklch(0.201 0.022 301.1 / 0.4); /* #18141f @ 40% */
+  --anfra-ink-a48: oklch(0.201 0.022 301.1 / 0.48); /* #18141f @ 48% */
+
+  --anfra-white-a4: oklch(1 0 0 / 0.04); /* #ffffff @ 4% */
+  --anfra-white-a6: oklch(1 0 0 / 0.06); /* #ffffff @ 6% */
+  --anfra-white-a8: oklch(1 0 0 / 0.08); /* #ffffff @ 8% */
+  --anfra-white-a10: oklch(1 0 0 / 0.1); /* #ffffff @ 10% */
+
+  --anfra-black-a60: oklch(0 0 0 / 0.6); /* #000000 @ 60% */
+
+  --anfra-paper-25: oklch(0.985 0.004 91.4); /* #fbfaf7 */
+  --anfra-paper-50: oklch(0.973 0.005 95.1); /* #f7f6f2 */
+  --anfra-paper-100: oklch(0.955 0.007 88.6); /* #f2f0eb */
+  --anfra-paper-200: oklch(0.925 0.01 87.5); /* #e9e6df */
+
+  --anfra-violet-100: oklch(0.946 0.027 304.8); /* #f1e9fc */
+  --anfra-violet-200: oklch(0.904 0.049 303.6); /* #e6d8fb */
+  --anfra-violet-300: oklch(0.878 0.072 302.8); /* #e0ccff */
+  --anfra-violet-400: oklch(0.794 0.124 300.7); /* #c9a9ff */
+  --anfra-violet-500: oklch(0.66 0.18 298.5); /* #a274f0 */
+  --anfra-violet-600: oklch(0.565 0.194 300.3); /* #8a51d4 */
+  --anfra-violet-700: oklch(0.517 0.192 299.1); /* #7a43c4 */
+  --anfra-violet-800: oklch(0.484 0.181 298.1); /* #6e3db5 */
+  --anfra-violet-900: oklch(0.386 0.146 297.6); /* #4f2a86 */
+  --anfra-violet-a18: oklch(0.565 0.194 300.3 / 0.18); /* #8a51d4 @ 18% */
+  --anfra-violet-a26: oklch(0.565 0.194 300.3 / 0.26); /* #8a51d4 @ 26% */
+  --anfra-violet-a40: oklch(0.565 0.194 300.3 / 0.4); /* #8a51d4 @ 40% */
+
+  --anfra-red-50: oklch(0.971 0.014 22.8); /* #fff2f1 */
+  --anfra-red-200: oklch(0.871 0.061 27.2); /* #fac6bf */
+  --anfra-red-300: oklch(0.779 0.121 27); /* #fb988d */
+  --anfra-red-400: oklch(0.7 0.171 27); /* #f66d62 */
+  --anfra-red-500: oklch(0.549 0.199 27.1); /* #cc2827 */
+  --anfra-red-700: oklch(0.501 0.17 27.2); /* #b02b27 */
+  --anfra-red-900: oklch(0.361 0.094 23.9); /* #662524 */
+  --anfra-red-950: oklch(0.239 0.039 12.4); /* #2f171a */
+
+  --anfra-amber-50: oklch(0.973 0.028 84.6); /* #fff5e1 */
+  --anfra-amber-200: oklch(0.881 0.08 78.2); /* #f5d29c */
+  --anfra-amber-300: oklch(0.84 0.12 69.6); /* #fdbc6f */
+  --anfra-amber-400: oklch(0.8 0.15 70.5); /* #faab3f */
+  --anfra-amber-500: oklch(0.64 0.139 69.5); /* #c17a00 */
+  --anfra-amber-700: oklch(0.501 0.1 70.3); /* #875814 */
+  --anfra-amber-900: oklch(0.427 0.072 72.5); /* #67481d */
+  --anfra-amber-950: oklch(0.267 0.028 66.2); /* #2f2317 */
+
+  --anfra-green-50: oklch(0.972 0.021 152.2); /* #ecfaef */
+  --anfra-green-200: oklch(0.87 0.06 151.8); /* #b8e0c1 */
+  --anfra-green-300: oklch(0.8 0.12 151.9); /* #7fd497 */
+  --anfra-green-400: oklch(0.721 0.15 151.9); /* #4dbf74 */
+  --anfra-green-500: oklch(0.559 0.13 152); /* #26894c */
+  --anfra-green-600: oklch(0.53 0.121 151.9); /* #267f47 */
+  --anfra-green-700: oklch(0.479 0.1 151.8); /* #296d40 */
+  --anfra-green-900: oklch(0.394 0.069 155.6); /* #235136 */
+  --anfra-green-950: oklch(0.256 0.025 165.3); /* #172720 */
+  /* dark v2 additions */
+  --anfra-ink-250: oklch(
+    0.835 0.018 300
+  ); /* #cac6d3  dark placeholder text (descriptions, captions), Lc 70+ on chrome/panel/card/raised */
+  --anfra-ink-450: oklch(
+    0.58 0.022 300
+  ); /* #7c7886  dark field border, >= 3.59:1 on all dark grounds */
+  --anfra-ink-825: oklch(0.262 0.017 300); /* #26232c  dark raised surface, current chip */
+  --anfra-ink-925: oklch(0.19 0.012 300); /* #151318  dark work panel */
+  --anfra-violet-350: oklch(0.845 0.085 300); /* #d4c0fc  dark violet text / link */
+  --anfra-red-250: oklch(0.82 0.09 27); /* #f9aea5  dark danger text */
+}
+
+/* ------------------------------------------------------------------ Tier 2: semantic, light (:root) */
+:root {
+  color-scheme: light;
+
+  --anfra-color-background-default: var(
+    --anfra-ink-0
+  ); /* Work panel (inset main area), page default */
+  --anfra-color-background-base-default: var(--anfra-paper-100); /* App chrome and sidebar ground */
+  --anfra-color-background-secondary-default: var(
+    --anfra-paper-50
+  ); /* Sunken area in the panel: code, read-only field, well, card footer */
+  --anfra-color-background-card-default: var(
+    --anfra-ink-0
+  ); /* Card in the panel (light: white + border-default) */
+  --anfra-color-background-raised-default: var(
+    --anfra-ink-0
+  ); /* Popover, menu, dialog, sheet, toast (+ border-strong + shadow-e2) */
+  --anfra-color-background-current-default: var(
+    --anfra-ink-0
+  ); /* Current nav item chip on the chrome */
+  --anfra-color-background-hover: var(
+    --anfra-ink-a5
+  ); /* Neutral hover layer (works on paper and on white) */
+  --anfra-color-background-active: var(--anfra-ink-a9); /* Neutral pressed layer; open trigger */
+  --anfra-color-background-disabled: var(
+    --anfra-ink-a4
+  ); /* Disabled control fill (all variants, never violet) */
+  --anfra-color-background-inverted-default: var(--anfra-ink-900); /* Tooltip, kbd hint */
+  --anfra-color-background-interactive-highlight-default: var(
+    --anfra-violet-100
+  ); /* Selected row / option / cell (violet wash) */
+  --anfra-color-background-interactive-highlight-hover: var(
+    --anfra-violet-200
+  ); /* Hover on a selected item */
+  --anfra-color-background-interactive-overlay: var(
+    --anfra-ink-a40
+  ); /* Scrim behind dialog and sheet */
+  --anfra-color-background-skeleton: var(--anfra-ink-a5); /* Skeleton block */
+  --anfra-color-background-highlight-default: var(--anfra-violet-600); /* Primary (violet) fill */
+  --anfra-color-background-highlight-hover: var(--anfra-violet-700); /* Primary fill hover */
+  --anfra-color-background-highlight-active: var(--anfra-violet-800); /* Primary fill pressed */
+  --anfra-color-background-highlight-secondary-default: var(
+    --anfra-violet-100
+  ); /* Subtle violet: drop target, checked choice card */
+  --anfra-color-background-highlight-secondary-hover: var(
+    --anfra-violet-200
+  ); /* Subtle violet hover */
+  --anfra-color-background-danger-default: var(--anfra-red-500); /* Destructive button fill */
+  --anfra-color-background-danger-hover: var(--anfra-red-700); /* Destructive fill hover/pressed */
+  --anfra-color-background-danger-secondary-default: var(
+    --anfra-red-50
+  ); /* Danger alert/badge bg; destructive menu item highlight */
+  --anfra-color-background-warning-secondary-default: var(
+    --anfra-amber-50
+  ); /* Warning alert/badge bg */
+  --anfra-color-background-success-default: var(
+    --anfra-green-600
+  ); /* Success solid (small badge/dot only) */
+  --anfra-color-background-success-secondary-default: var(
+    --anfra-green-50
+  ); /* Success alert/badge bg */
+  --anfra-color-background-info-secondary-default: var(
+    --anfra-ink-a5
+  ); /* Info alert/badge bg (info = neutral) */
+  --anfra-color-background-selection: var(--anfra-violet-200); /* ::selection background */
+
+  --anfra-color-text-default: var(--anfra-ink-900); /* Headings, body, values */
+  --anfra-color-text-weak: var(--anfra-ink-700); /* Secondary text, nav item at rest, alert body */
+  --anfra-color-text-placeholder: var(
+    --anfra-ink-550
+  ); /* Descriptions, captions, muted labels, input placeholder */
+  --anfra-color-text-disabled: var(--anfra-ink-300); /* Disabled label (WCAG-exempt) */
+  --anfra-color-text-highlight-default: var(
+    --anfra-violet-800
+  ); /* Violet text (= --primary-text) */
+  --anfra-color-text-link-default: var(--anfra-violet-800); /* Links */
+  --anfra-color-text-link-hover: var(--anfra-violet-900); /* Link hover */
+  --anfra-color-text-on-fill: var(--anfra-ink-0); /* Text on violet / danger / success solid */
+  --anfra-color-text-inverted-default: var(
+    --anfra-ink-100
+  ); /* Text on background-inverted-default */
+  --anfra-color-text-danger-default: var(
+    --anfra-red-700
+  ); /* Error message, destructive item text */
+  --anfra-color-text-warning-default: var(--anfra-amber-700); /* Warning text */
+  --anfra-color-text-success-default: var(--anfra-green-700); /* Success text */
+  --anfra-color-text-info-default: var(--anfra-ink-700); /* Info text (neutral) */
+  --anfra-color-text-selection: var(--anfra-ink-900); /* ::selection text */
+
+  --anfra-color-icon-default: var(--anfra-ink-700); /* Icons at rest */
+  --anfra-color-icon-weak: var(--anfra-ink-550); /* Secondary icons, chevrons */
+  --anfra-color-icon-hover: var(--anfra-ink-900); /* Icon on hover */
+  --anfra-color-icon-disabled: var(--anfra-ink-300); /* Disabled icon (exempt) */
+  --anfra-color-icon-highlight-default: var(
+    --anfra-violet-600
+  ); /* Current nav icon, checked mark */
+  --anfra-color-icon-on-fill: var(--anfra-ink-0); /* Icon on solid fills */
+  --anfra-color-icon-inverted-default: var(--anfra-ink-100); /* Icon on inverted bg */
+  --anfra-color-icon-danger-default: var(--anfra-red-500); /* Danger icon */
+  --anfra-color-icon-warning-default: var(--anfra-amber-500); /* Warning icon */
+  --anfra-color-icon-success-default: var(--anfra-green-500); /* Success icon */
+  --anfra-color-icon-info-default: var(--anfra-ink-550); /* Info icon (neutral) */
+
+  --anfra-color-border-default: var(
+    --anfra-ink-a12
+  ); /* Hairlines, card edge, dividers (decorative) */
+  --anfra-color-border-weak: var(--anfra-ink-a8); /* Row dividers, current chip edge (decorative) */
+  --anfra-color-border-strong: var(
+    --anfra-ink-a24
+  ); /* Frames: popover, dialog, outline button, inset panel edge */
+  --anfra-color-border-hover: var(--anfra-ink-550); /* Field / outline button border on hover */
+  --anfra-color-border-field: var(
+    --anfra-ink-a48
+  ); /* Input, checkbox, switch track boundary (3:1) */
+  --anfra-color-border-disabled: var(--anfra-ink-a12); /* Disabled control border */
+  --anfra-color-border-highlight-default: var(--anfra-violet-200); /* Subtle violet edge */
+  --anfra-color-border-highlight-strong: var(
+    --anfra-violet-600
+  ); /* Selected edge, tab indicator, checked choice card (3:1) */
+  --anfra-color-border-danger-default: var(--anfra-red-200); /* Danger alert edge */
+  --anfra-color-border-danger-strong: var(--anfra-red-500); /* Invalid field (3:1) */
+  --anfra-color-border-warning-default: var(--anfra-amber-200); /* Warning alert edge */
+  --anfra-color-border-success-default: var(--anfra-green-200); /* Success alert edge */
+
+  --anfra-color-focus-ring-default: var(--anfra-violet-600); /* 2px focus outline, offset 3px */
+
+  /* Elevation (light): shadows. */
+  --anfra-e1: 0 1px 0 rgb(24 20 31 / 0.04), 0 1px 2px rgb(24 20 31 / 0.06);
+  --anfra-e2:
+    0 1px 0 rgb(24 20 31 / 0.03), 0 18px 40px -18px rgb(24 20 31 / 0.28),
+    0 2px 6px -2px rgb(24 20 31 / 0.08);
+
+  /* Motion (DESIGN.md §10). Unchanged. */
+  --anfra-t-press: 90ms;
+  --anfra-t-hover: 160ms;
+  --anfra-t-ui: 220ms;
+}
+
+/* ------------------------------------------------------------------ Tier 2: semantic, dark (.dark or [data-theme="dark"]) */
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --anfra-color-background-default: var(
+    --anfra-ink-925
+  ); /* was ink-950: chrome -> panel dL 0.019 -> 0.033 */
+  --anfra-color-background-base-default: var(--anfra-ink-1000);
+  --anfra-color-background-secondary-default: var(--anfra-ink-1000);
+  --anfra-color-background-card-default: var(--anfra-ink-875);
+  --anfra-color-background-raised-default: var(
+    --anfra-ink-825
+  ); /* was ink-850: card -> raised dL 0.028 -> 0.039 */
+  --anfra-color-background-current-default: var(
+    --anfra-ink-825
+  ); /* was ink-875 (= nav hover color) */
+  --anfra-color-background-hover: var(--anfra-white-a6);
+  --anfra-color-background-active: var(--anfra-white-a10);
+  --anfra-color-background-disabled: var(--anfra-white-a4);
+  --anfra-color-background-inverted-default: var(--anfra-ink-100);
+  --anfra-color-background-interactive-highlight-default: var(--anfra-violet-a18);
+  --anfra-color-background-interactive-highlight-hover: var(--anfra-violet-a26);
+  --anfra-color-background-interactive-overlay: var(--anfra-black-a60);
+  --anfra-color-background-skeleton: var(--anfra-white-a6);
+  --anfra-color-background-highlight-secondary-default: var(--anfra-violet-a18);
+  --anfra-color-background-highlight-secondary-hover: var(--anfra-violet-a26);
+  --anfra-color-background-danger-secondary-default: var(--anfra-red-950);
+  --anfra-color-background-warning-secondary-default: var(--anfra-amber-950);
+  --anfra-color-background-success-secondary-default: var(--anfra-green-950);
+  --anfra-color-background-info-secondary-default: var(--anfra-white-a6);
+  --anfra-color-background-selection: var(--anfra-violet-a40);
+
+  --anfra-color-text-default: var(--anfra-ink-100);
+  --anfra-color-text-weak: var(--anfra-ink-200);
+  --anfra-color-text-placeholder: var(--anfra-ink-250); /* was ink-400: Lc 45 -> 72 */
+  --anfra-color-text-disabled: var(--anfra-ink-500); /* was ink-600 (exempt) */
+  --anfra-color-text-highlight-default: var(--anfra-violet-350); /* was violet-400: Lc 63 -> 73 */
+  --anfra-color-text-link-default: var(--anfra-violet-350); /* was violet-400 */
+  --anfra-color-text-link-hover: var(--anfra-violet-300);
+  --anfra-color-text-inverted-default: var(--anfra-ink-900);
+  --anfra-color-text-danger-default: var(--anfra-red-250); /* was red-300: Lc 60 -> 68 */
+  --anfra-color-text-warning-default: var(--anfra-amber-300);
+  --anfra-color-text-success-default: var(--anfra-green-300);
+  --anfra-color-text-info-default: var(--anfra-ink-200);
+  --anfra-color-text-selection: var(--anfra-ink-100);
+
+  --anfra-color-icon-default: var(--anfra-ink-200);
+  --anfra-color-icon-weak: var(--anfra-ink-300); /* was ink-400 */
+  --anfra-color-icon-hover: var(--anfra-ink-100);
+  --anfra-color-icon-disabled: var(--anfra-ink-500); /* was ink-600 (exempt) */
+  --anfra-color-icon-highlight-default: var(--anfra-violet-500);
+  --anfra-color-icon-inverted-default: var(--anfra-ink-900);
+  --anfra-color-icon-danger-default: var(--anfra-red-400);
+  --anfra-color-icon-warning-default: var(--anfra-amber-400);
+  --anfra-color-icon-success-default: var(--anfra-green-400);
+  --anfra-color-icon-info-default: var(--anfra-ink-300); /* was ink-400 */
+
+  --anfra-color-border-default: var(--anfra-ink-750); /* was ink-800: card edge 1.20 -> 1.47:1 */
+  --anfra-color-border-weak: var(--anfra-white-a8); /* was white-a6 */
+  --anfra-color-border-strong: var(--anfra-ink-700); /* was ink-750 */
+  --anfra-color-border-hover: var(--anfra-ink-400);
+  --anfra-color-border-field: var(
+    --anfra-ink-450
+  ); /* was ink-500: 3.02 -> 3.59:1 min on rest grounds */
+  --anfra-color-border-disabled: var(--anfra-white-a8);
+  --anfra-color-border-highlight-default: var(--anfra-violet-a40);
+  --anfra-color-border-highlight-strong: var(--anfra-violet-500);
+  --anfra-color-border-danger-default: var(--anfra-red-900);
+  --anfra-color-border-danger-strong: var(--anfra-red-400);
+  --anfra-color-border-warning-default: var(--anfra-amber-900);
+  --anfra-color-border-success-default: var(--anfra-green-900);
+
+  --anfra-color-focus-ring-default: var(--anfra-violet-500);
+
+  /* A shadow does not show on dark: lift with a border instead (DESIGN.md §6). */
+  --anfra-e1: 0 0 0 1px var(--anfra-color-border-default);
+  --anfra-e2: 0 0 0 1px var(--anfra-color-border-strong);
+}

package/type.css

@@ -0,0 +1,33 @@
+/*
+ * The type roles (DESIGN.md, Typography) as `font` shorthands, for hosts without Tailwind:
+ * `font: var(--anfra-type-body)`. A screen uses three sizes, 20, 14 and 12px. Shape and spacing
+ * sit here too, so plain CSS has every scale DESIGN.md names.
+ */
+:root {
+  --anfra-type-title: 600 1.25rem/1.75rem var(--anfra-font-sans);
+  --anfra-type-heading: 600 0.875rem/1.25rem var(--anfra-font-sans);
+  --anfra-type-body: 400 0.875rem/1.25rem var(--anfra-font-sans);
+  --anfra-type-label: 500 0.875rem/1.25rem var(--anfra-font-sans);
+  --anfra-type-caption: 400 0.75rem/1rem var(--anfra-font-sans);
+  --anfra-type-mono-label: 400 0.75rem/1rem var(--anfra-font-mono);
+
+  /* Shapes: the smaller the thing, the smaller the corner. */
+  --anfra-radius-md: 6px; /* menu items, nav items, chips, tooltips */
+  --anfra-radius-lg: 10px; /* buttons, fields, alerts */
+  --anfra-radius-xl: 14px; /* cards, popovers, dialogs, the panel */
+  --anfra-radius-pill: 9999px; /* status pills and counters only */
+
+  /* Spacing, on a 4px unit. */
+  --anfra-space-unit: 4px;
+  --anfra-control-height: 32px;
+  --anfra-field-gap: 8px; /* a label and its field */
+  --anfra-form-gap: 24px; /* one field and the next */
+  --anfra-panel-inset: 8px;
+  --anfra-sheet-padding: 24px;
+  --anfra-sheet-width: 384px;
+  --anfra-logomark-sheet: 48px; /* the logomark atop a sheet */
+
+  /* Motion: under 300ms on a control. */
+  --anfra-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --anfra-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.