@swiftsolve/rove-tokens 0.0.0-stage → 1.1.0

package/DESIGN.md

@@ -0,0 +1,138 @@
+# Rove design
+
+How to build Rove's interface with these tokens, for anyone writing Rove UI, people and coding agents alike. The [token reference](#token-reference) at the end lists every value; [`docs/rationale.md`](docs/rationale.md) explains why they are what they are.
+
+## Setup
+
+```css
+@import '@swiftsolve/rove-tokens/tokens.css';
+```
+
+Dark is the default, on `:root`. Add the `theme-light` class to the root element for Light. Every token has both values, so a screen that only uses tokens themes itself.
+
+## Rules
+
+- **Use a token, never a raw value.** No hex colours, no pixel gaps, no font sizes typed by hand. If nothing fits, the design needs a new token in Figma, not a one-off in code.
+- **Name by job, not by look.** Pick `--bg-surface` because it's content on the backdrop, not because it's the right grey. The Palette shades (`neutral/850`) aren't CSS variables, on purpose.
+
+### Surfaces
+
+- Three backgrounds: `--bg-base` for the backdrop, `--bg-surface` for content that sits on it (cards, dialogs), `--bg-inset` for areas sunk into a surface (bands, inputs, soft and icon buttons). `--bg-chrome` is the title bar and rail, a half step off the backdrop. `--bg-popover` is a step lighter in Dark, for tooltips and menus. `--bg-hover` is a hovered surface, `--bg-scrim` goes behind dialogs.
+- Cards get depth from `--shadow-panel`, not hard outlines. Tooltips and menus use `--shadow-popover` on `--bg-popover`; dialogs and hovered cards use `--shadow-raised`.
+- Every line is `--border-default`: hairlines, and the edges of menus, tooltips and dialogs.
+- For hovers, chips and tracks on a surface, use the `--fill-*` overlays, by strength: `--fill-faint` (3%), `--fill-subtle` (5%), `--fill-default` (7%), `--fill-strong` (16%). They flip with the theme, so they stay visible on both. A hovered row or expandable header uses `--fill-hover`: 3% white in Dark, 2% ink in Light, so in Light it stays lighter than an open `--bg-inset` panel below it.
+
+### Text and icons
+
+- `--text-primary` for content, `--text-secondary` for supporting lines, `--text-tertiary` for the quietest text and for icons by default.
+- On a solid fill (accent or negative), labels and icons use `--text-on-fill`.
+- Words in the accent (a link, a highlighted value) use `--text-accent`, on a surface or on `--accent-muted` (a selected item, a tinted button).
+
+### Accent and buttons
+
+- `--accent-default` is for accent icons and lines. It's too light for words in Light mode, and under a white label.
+- Solid buttons use `--accent-fill`, hovering to `--accent-fill-hover`. Hovers deepen, never lighten, so the white label keeps its contrast.
+- A solid red control (a solid negative button, the window close hover) uses `--status-negative-fill` and `--status-negative-fill-hover`.
+
+### Status
+
+- `--status-*` (positive, good, warning, poor, negative) colour icons, bars and dots.
+- Words in a status colour use `--text-*` of the same name, which also clear a tint of their hue (a badge). The `--status-*` shades are too light for text in Light mode.
+- Download and upload in charts are `--series-down` and `--series-up`.
+
+### Tints and opacity
+
+Tints are a colour mixed with transparent at one of the shared strengths, so a tinted tile reads the same everywhere:
+
+```css
+background: color-mix(in srgb, var(--status-positive) var(--opacity-tint-md), transparent);
+```
+
+Disabled controls use `--opacity-disabled`.
+
+### Spacing and shape
+
+- Every gap, padding and margin is a `--spacing-*` step.
+- Cards use `--card-padding` on every side. The rail and the content column share the side inset `--spacing-12`.
+- Corners are `--radius-*`. `--radius-md` is for nav items and the page-header chip, a step rounder than `--radius-sm`; `--radius-full` makes pills.
+
+### Type
+
+- Set text with a text style's class from `text-styles.css` (`.type-heading-large`), or all four of its `--type-<style>-*` variables, never a font size alone. Each style's use is in [Text styles](#text-styles).
+- Numbers that are data (speeds, totals, chart labels) use the Number styles (`number-*`), set in Questrial; everything else is Inter.
+
+### Focus and motion
+
+- Keyboard focus is `outline: var(--focus-outline)` with `outline-offset: var(--focus-offset)`. Rows flush with a card's edge draw it inside instead, with `--focus-inset`.
+- Animate with `--ease-out` (or `--ease-in-out`) over `--duration-fast` or `--duration-normal`. A looping pulse uses `--ease-pulse`, which is symmetric, so it fades out and back in alike.
+
+### Icons
+
+- Icons share a 24px grid, a 1.75px stroke and round caps.
+- Icons are `--text-tertiary` by default. The active nav item's is `--accent-default`, an icon button's `--text-secondary`, a download icon `--series-down`, a secured or passing one `--status-positive`.
+- The brand mark is always `--accent-default`, 22px in the title bar.
+
+## Changing the design
+
+Figma is the source of truth. Change a token in the Rove Design System Figma file, export it with the plugin in `figma-plugin/` into `src/figma/`, then run `npm run build` (see the [README](README.md#update-the-tokens)). Don't edit `tokens.css`, `tokens/` or the values in `src/figma/` by hand. What Figma can't hold (shadows, easing curves, the focus outline) lives in `src/code-tokens.json`.
+
+Everything below the next line is rewritten by `npm run build`; edit only above it.
+
+<!-- Generated by npm run build from the Figma export and tokens.css. Edit above this line. -->
+
+## Token reference
+
+Names and uses, from Figma. The values are in `tokens.css`; Dark and Light differ only in colour and shadow.
+
+### Colour
+
+- **Backgrounds:** `--bg-base` (backdrop), `--bg-surface` (content on the backdrop), `--bg-hover` (hovered rows and buttons), `--bg-scrim` (behind dialogs), `--bg-inset` (sunken areas inside a surface), `--bg-popover` (tooltips and menus), `--bg-chrome` (title bar and rail)
+- **Lines:** `--border-default` (hairlines)
+- **Fills and overlays:** `--fill-default` (overlay), `--fill-subtle` (light overlay), `--fill-faint` (faintest overlay), `--fill-strong` (strong overlay), `--fill-selection` (text selection), `--fill-hover` (hovered rows and headers)
+- **Text:** `--text-primary`, `--text-secondary`, `--text-tertiary` (default icon colour), `--text-accent` (accent words, also on accent/muted), `--text-positive`, `--text-good`, `--text-warning`, `--text-poor`, `--text-negative`, `--text-on-fill` (labels and icons on solid fills)
+- **Accent:** `--accent-default`, `--accent-hover`, `--accent-press`, `--accent-muted` (tinted accent background), `--accent-fill` (fill under white labels), `--accent-fill-hover`
+- **Status:** `--status-positive`, `--status-good` (between positive and warning), `--status-warning`, `--status-poor` (between warning and negative), `--status-negative`, `--status-negative-fill` (solid negative under white labels), `--status-negative-fill-hover` (negative fill hover)
+- **Chart series:** `--series-down` (download), `--series-up` (upload)
+- **Focus:** `--focus-ring` (keyboard focus ring)
+
+### Scales
+
+- **Spacing:** `--spacing-<n>`, n in px: 2, 4, 6, 8, 10, 12, 14, 16, 20
+- **Radius:** `--radius-xs` 5px, `--radius-sm` 8px, `--radius-md` 10px, `--radius-lg` 13px, `--radius-full` 999px
+- **Font sizes:** `--font-size-2xs` 10px, `--font-size-xs` 11px, `--font-size-sm` 12px, `--font-size-md` 13px, `--font-size-lg` 14px, `--font-size-xl` 15px (dialog titles), `--font-size-2xl` 17px, `--font-size-3xl` 28px
+- **Font families:** `--font-family-sans` Inter, `--font-family-numeric` Questrial
+- **Focus:** `--focus-ring-width` 1px (focus ring stroke), `--focus-offset` 2px (focus ring offset)
+- **Opacity:** `--opacity-tint-xs` 8% (faintest tint), `--opacity-tint-sm` 10% (light tint), `--opacity-tint-md` 14% (tint), `--opacity-tint-lg` 22% (strong tint), `--opacity-tint-xl` 28% (strongest tint), `--opacity-high` 80% (nearly opaque), `--opacity-disabled` 40% (disabled controls)
+- **Layout:** `--rail-item-size` 38px (rail items), `--titlebar-height` 56px (title bar)
+- **Cards:** `--card-padding` `var(--spacing-14)` (card inset), `--card-header-padding-y` `var(--card-padding)`, `--card-header-padding-x` `var(--card-padding)`, `--card-header-min-height` 42px (compact card header), `--card-header-height` 44px (card header), `--card-body-padding` `var(--card-padding)`, `--row-padding-y` 8px (data row, above and below)
+- **Font weights:** `--weight-regular` 400, `--weight-medium` 500, `--weight-semibold` 600
+- **Motion:** `--duration-fast` 140ms (hovers, small changes), `--duration-normal` 220ms (panels, page changes)
+
+### Text styles
+
+Apply a style with its class from `text-styles.css`. Each class reads four variables, `--type-<style>-size`, `-weight`, `-line-height` and `-letter-spacing`; set all four if you use them directly.
+
+| Style | Class | Size, weight | Use |
+| --- | --- | --- | --- |
+| Heading/Large | `.type-heading-large` | 17px 600 | Page titles, the wordmark. Code: .type-heading-large |
+| Heading/Medium | `.type-heading-medium` | 15px 600 | Dialog titles. Code: .type-heading-medium |
+| Heading/Small | `.type-heading-small` | 14px 600 | Card headings. Code: .type-heading-small |
+| Body/Default | `.type-body-default` | 13px 400 | Body text. Code: .type-body-default |
+| Overline | `.type-overline` | 11px 500 | Uppercase labels above values. Code: .type-overline |
+| Caption | `.type-caption` | 11px 400 | Badges, captions, footer hints. Code: .type-caption |
+| Label/Large | `.type-label-large` | 12px 600 | Solid button labels. Code: Button variant=solid |
+| Number/Display | `.type-number-display` | 28px 400, Questrial | Live speeds. Add a 0.43px outside stroke. Code: .type-number-display .metric-value, at weight 600: Questrial has one weight, so the browser emboldens it. |
+| Number/Large | `.type-number-large` | 17px 400, Questrial | Stat totals. Add a 0.26px outside stroke. Code: Readout size=compact |
+| Number/Default | `.type-number-default` | 13px 400, Questrial | Data row values. Code: .type-number-default |
+| Number/Small | `.type-number-small` | 10px 400, Questrial | Chart axes and scale. Code: .type-number-small |
+| Label/Default | `.type-label-default` | 11px 600 | Bold small labels on tinted chips. Code: .type-label-default |
+| Label/Small | `.type-label-small` | 11px 500 | Soft buttons, title bar status. Code: .type-label-small |
+| Body/Small | `.type-body-small` | 12px 400 | Helper text, hints and units. Code: .type-body-small |
+
+### Code-only tokens
+
+What Figma variables can't hold, from `src/code-tokens.json`.
+
+- **Shadows:** `--shadow-panel`, `--shadow-raised`, `--shadow-popover`
+- **Focus:** `--focus-outline`, `--focus-inset`
+- **Motion:** `--ease-out`, `--ease-in-out`, `--ease-pulse`

package/README.md

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+<div align="center">
 
-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.
+<img src="docs/assets/rove-mark.svg" width="72" height="72" alt="Rove Mark">
+
+# Rove Tokens
+
+Tokens for Rove, straight from the Rove Design System in Figma.
+
+`@swiftsolve/rove-tokens`
+
+[![Build](https://img.shields.io/github/actions/workflow/status/swiftsolve/rove-tokens/build.yml?label=build&labelColor=17181b)](https://github.com/swiftsolve/rove-tokens/actions/workflows/build.yml)
+[![Slideshow](https://img.shields.io/github/actions/workflow/status/swiftsolve/rove-tokens/presentation.yml?label=slideshow&labelColor=17181b)](https://github.com/swiftsolve/rove-tokens/actions/workflows/presentation.yml)
+[![Version](https://img.shields.io/github/package-json/v/swiftsolve/rove-tokens?label=version&labelColor=17181b&color=5b8cff)](https://github.com/swiftsolve/rove-tokens/tags)
+[![Figma](https://img.shields.io/badge/Figma-source_of_truth-5b8cff?logo=figma&logoColor=white&labelColor=17181b)](https://www.figma.com/design/NoICIoyhWNOya9tOnNfEhH/Rove-Design-System)
+[![DTCG](https://img.shields.io/badge/DTCG-2025.10-5b8cff?labelColor=17181b)](https://www.designtokens.org/tr/2025.10/format/)
+[![Style Dictionary](https://img.shields.io/badge/Style_Dictionary-5-5b8cff?labelColor=17181b)](https://styledictionary.com/)
+[![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-5b8cff?labelColor=17181b)](#-contrast)
+[![Themes](https://img.shields.io/badge/themes-Dark_·_Light-5b8cff?labelColor=17181b)](#-use)
+[![Node](https://img.shields.io/badge/node-%E2%89%A522-5b8cff?logo=nodedotjs&logoColor=white&labelColor=17181b)](.nvmrc)
+
+[🎨 Figma file](https://www.figma.com/design/NoICIoyhWNOya9tOnNfEhH/Rove-Design-System) &nbsp;·&nbsp;
+[🖼️ Slideshow](https://swiftsolve.github.io/rove-tokens/) &nbsp;·&nbsp;
+[📐 DESIGN.md](DESIGN.md) &nbsp;·&nbsp;
+[💡 Rationale](docs/rationale.md)
+
+</div>
+
+---
+
+Figma is the source of truth; this package turns its variables and text styles into DTCG token files, and those into CSS with [Style Dictionary](https://styledictionary.com/).
+
+> [!TIP]
+> **Building Rove UI?** [`DESIGN.md`](DESIGN.md) says which token to use for what, with every value. It ships in the package, so coding agents in Rove can read it from `node_modules/@swiftsolve/rove-tokens/DESIGN.md`.
+
+## 📦 Use
+
+```bash
+npm install @swiftsolve/rove-tokens
+```
+
+The package ships `tokens.css`, `text-styles.css` and `tokens/` built. You can also install straight from a version tag (`github:swiftsolve/rove-tokens#v1.0.0`); then npm builds them on install, which needs Node 22 (see `.nvmrc`).
+
+```css
+@import '@swiftsolve/rove-tokens/tokens.css';
+@import '@swiftsolve/rove-tokens/text-styles.css'; /* optional: a class per text style */
+```
+
+Dark values sit on `:root`, Light values on `:root.theme-light`. CSS names follow the Figma names: `bg/base` is `--bg-base`, `spacing/12` is `--spacing-12`.
+
+Each Figma text style becomes four tokens: `--type-<style>-size`, `-weight`, `-line-height` (a unitless ratio) and `-letter-spacing` (in `em`). `Number/Display` gives `--type-number-display-size` and so on. A size bound to a variable comes through as that variable (`var(--font-size-3xl)`).
+
+`text-styles.css` applies a style whole: `.type-heading-large` sets the font family and all four, plus the text case (Overline is uppercase). The classes set no colour and sit in `@layer components`, so Tailwind utilities on the same element still win.
+
+### 🧩 DTCG
+
+`tokens/` holds the same tokens in the [Design Tokens Format](https://www.designtokens.org/tr/2025.10/format/) (2025.10), for Style Dictionary, Tokens Studio and similar tools:
+
+| File | What |
+| --- | --- |
+| `palette.tokens.json` | Every colour, once |
+| `color.dark.tokens.json`, `color.light.tokens.json` | The Color tokens in each theme, pointing at the palette (`{neutral.850}`) |
+| `spacing.tokens.json`, `typography.tokens.json`, `opacity.tokens.json`, `layout.tokens.json`, `motion.tokens.json` | The other Figma collections |
+| `text-styles.tokens.json` | Each text style as a `typography` token |
+| `code.tokens.json` | The code-only tokens (shadows, easing curves, the focus outline) |
+
+A theme is every file plus one of the two color files. Paths follow the Figma names (`bg/base` is `bg.base`). Tokens that other tokens point at but that aren't CSS variables (the palette, the shadow colours) are marked `"$extensions": { "net.swiftsolve.rove-tokens": { "css": false } }`. CSS-only expressions (`--focus-inset`, a `calc()`) aren't in them.
+
+## ♿ Contrast
+
+The colours meet [WCAG 2.2](https://www.w3.org/TR/WCAG22/) level AA in both themes, on the surfaces they sit on: text clears 4.5:1 ([1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)), and icons, bars and dots 3:1 ([1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)). AAA (7:1) isn't a target. [Rationale](docs/rationale.md) has the close calls.
+
+## 📖 Storybook
+
+**Rove Tokens** is a Storybook of every token in both themes: colour, palette, type, spacing, radius, effects, motion and layout.
+
+```bash
+npm run storybook
+```
+
+It opens on <http://localhost:6007>; the Theme menu in the toolbar switches Dark and Light. The pages read the DTCG files in `tokens/` and are styled with `tokens.css`, so a new build shows up without editing them. `npm run build:storybook` writes a static copy to `storybook-static/`.
+
+## 🔄 Update the tokens
+
+1. Change the variables or text styles in Figma.
+2. Export them to `src/figma/variables.json` and `src/figma/text-styles.json`, either with the plugin in `figma-plugin/` (Figma desktop: Plugins → Development → Import plugin from manifest; then **Export**) or by asking Claude to export them through the Figma connection.
+3. Run `npm run build` (Node 22) and check `tokens.css`. It writes the DTCG files, then generates `tokens.css` from them with Style Dictionary and `text-styles.css` from the text styles, then rewrites the token reference at the end of `DESIGN.md`. The build stops if a variable's code syntax doesn't match its name, or a DTCG reference doesn't resolve.
+4. Commit the change.
+
+## 🚀 Release
+
+1. On the Figma cover (`COVER` page), set **Version** to the one you're about to release and **Updated** to today's date (`27 Oct 2026`). They're the one place a release can't be stamped from here: Figma's API can't edit canvas text on this plan, so do it by hand or ask Claude to through the Figma connection.
+2. Bump, commit and tag in one step, then push both:
+
+   ```bash
+   npm version minor
+   ```
+
+   ```bash
+   git push --follow-tags
+   ```
+
+   Use `patch` for fixes and `major` for breaking changes.
+3. The tag runs three workflows: **Build** checks the tokens, **Publish** puts the version on [npm](https://www.npmjs.com/package/@swiftsolve/rove-tokens), and **Presentation** exports the Figma file and republishes <https://swiftsolve.github.io/rove-tokens/>. The page's header shows the version from `package.json`. To republish the slideshow between releases (after Figma edits), run Presentation by hand from the Actions tab.
+4. Update Rove to the new version (`npm install @swiftsolve/rove-tokens@latest`).
+
+## 🗂️ What's where
+
+| Path | What |
+| --- | --- |
+| `src/figma/variables.json` | Raw Figma export. Every variable with a Web code syntax becomes that CSS variable. |
+| `src/figma/text-styles.json` | Raw export of the local text styles: font, size, weight, line height, letter spacing, text case (when set) and the variables bound to them. Each style becomes a `--type-*` group. |
+| `figma-plugin/` | The Figma plugin that writes the two exports. |
+| `src/code-tokens.json` | What Figma variables can't hold: font stacks for the font-family variables, shadows, easing curves and the CSS expressions built on variables (`--focus-outline`). `{figma/name}` pulls a Figma value in per theme. |
+| `DESIGN.md` | How to build Rove UI with the tokens. The rules at the top are written by hand; the token reference below the marker line is generated by the build. |
+| `scripts/tokens/build.mjs` | `npm run build`: runs the steps below and writes `tokens.css` and `text-styles.css` at the package root, where the import paths point. |
+| `scripts/tokens/dtcg.mjs` | Figma export → the DTCG files in `tokens/`, checking that every reference resolves in both themes. |
+| `scripts/tokens/css.mjs` | DTCG files → `tokens.css`, with Style Dictionary and a `rove/css` format: Dark on `:root`, what differs in Light on `:root.theme-light`, each text style as four `--type-*` variables (letter spacing included). |
+| `scripts/tokens/text-styles.mjs` | DTCG text styles → `text-styles.css`: a `.type-<style>` class per style that reads its `--type-*` variables. |
+| `scripts/tokens/design.mjs` | Figma export and `tokens.css` → the token reference in `DESIGN.md`: every token by name and Figma description, with values for the scales (spacing, radius, type, opacity) but not the colours, so nobody copies a hex. |
+| `scripts/presentation/export.mjs` | `npm run present`: exports the Figma file's pages to `presentation/index.html`, a slideshow styled with the tokens. Needs `FIGMA_TOKEN` (a Figma personal access token, `file_content:read`) in `.env.local`. |
+| `scripts/presentation/open.mjs` | `npm run present:open`: opens the exported presentation in your browser. |
+| `.storybook/` | The Rove Tokens Storybook's config, and the Inter and Questrial files it serves. |
+| `stories/` | Its pages, one file per sidebar group. `tokens.js` reads the DTCG files. |
+| `scripts/presentation/publish.mjs` | `npm run present:publish`: pushes the exported presentation to the `gh-pages` branch, which GitHub Pages serves at <https://swiftsolve.github.io/rove-tokens/>. Each publish replaces the last. |
+| `.github/workflows/presentation.yml` | Runs the export and publish on every `v*` tag, or by hand. Needs the `FIGMA_TOKEN` repository secret. |
+| `docs/rationale.md` | Why the values are what they are (contrast targets, theme choices). |
+
+Every colour lives once in the Palette collection (`neutral/850`, `blue/450`; higher numbers are darker; a see-through shade adds `-a` and its opacity, `neutral/850-a10`), and the Color tokens point at it. The Palette isn't in `tokens.css`: a token that points at a shade gets the shade's value there. Figma-only collections (Icon tone, Capability level) and variables without a code syntax aren't in `tokens.css` either.

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@swiftsolve/rove-tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "Rove's design tokens, exported from the Rove Design System in Figma, as CSS and DTCG.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/swiftsolve/rove-tokens.git"
+  },
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./text-styles.css": "./text-styles.css",
+    "./tokens/*": "./tokens/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "tokens.css",
+    "text-styles.css",
+    "tokens",
+    "src",
+    "DESIGN.md"
+  ],
+  "scripts": {
+    "build": "node scripts/tokens/build.mjs",
+    "present": "npm run build && node scripts/presentation/export.mjs",
+    "present:open": "node scripts/presentation/open.mjs",
+    "present:publish": "node scripts/presentation/publish.mjs",
+    "prepare": "npm run build",
+    "storybook": "storybook dev -p 6007",
+    "build:storybook": "storybook build"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
+    "@vitejs/plugin-react": "^5.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.6.5",
+    "style-dictionary": "^5.7.1",
+    "vite": "^7.3.7"
+  }
+}

package/src/code-tokens.json

@@ -0,0 +1,19 @@
+{
+  "description": "What Figma variables can't hold. `figma` sets how a Figma variable is written in CSS; `tokens` adds code-only tokens. `{figma/name}` pulls a Figma variable's raw value in for each theme.",
+  "figma": {
+    "font-family/sans": "'{font-family/sans}', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "font-family/numeric": "'{font-family/numeric}', ui-sans-serif, system-ui, sans-serif"
+  },
+  "tokens": {
+    "--shadow-panel": "0 1px 2px {shadow-color/panel-1}, 0 4px 12px {shadow-color/panel-2}",
+    "--shadow-raised": "0 12px 32px {shadow-color/raised}",
+    "--shadow-popover": "0 2px 6px {shadow-color/popover-1}, 0 6px 16px {shadow-color/popover-2}",
+
+    "--focus-outline": "var(--focus-ring-width) solid var(--focus-ring)",
+    "--focus-inset": "calc(-1 * var(--focus-ring-width))",
+
+    "--ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "--ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "--ease-pulse": "cubic-bezier(0.42, 0, 0.58, 1)"
+  }
+}

package/src/figma/text-styles.json

@@ -0,0 +1,289 @@
+{
+  "file": {
+    "name": "Rove Design System",
+    "key": "NoICIoyhWNOya9tOnNfEhH"
+  },
+  "styles": [
+    {
+      "name": "Heading/Large",
+      "description": "Page titles, the wordmark. Code: .type-heading-large",
+      "fontFamily": "Inter",
+      "fontStyle": "Semi Bold",
+      "fontWeight": 600,
+      "fontSize": 17,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 125
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/2xl"
+      }
+    },
+    {
+      "name": "Heading/Medium",
+      "description": "Dialog titles. Code: .type-heading-medium",
+      "fontFamily": "Inter",
+      "fontStyle": "Semi Bold",
+      "fontWeight": 600,
+      "fontSize": 15,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/xl"
+      }
+    },
+    {
+      "name": "Heading/Small",
+      "description": "Card headings. Code: .type-heading-small",
+      "fontFamily": "Inter",
+      "fontStyle": "Semi Bold",
+      "fontWeight": 600,
+      "fontSize": 14,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 120
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/lg"
+      }
+    },
+    {
+      "name": "Body/Default",
+      "description": "Body text. Code: .type-body-default",
+      "fontFamily": "Inter",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 13,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/md"
+      }
+    },
+    {
+      "name": "Overline",
+      "description": "Uppercase labels above values. Code: .type-overline",
+      "fontFamily": "Inter",
+      "fontStyle": "Medium",
+      "fontWeight": 500,
+      "fontSize": 11,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 120
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 6
+      },
+      "textCase": "UPPER",
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/xs"
+      }
+    },
+    {
+      "name": "Caption",
+      "description": "Badges, captions, footer hints. Code: .type-caption",
+      "fontFamily": "Inter",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 11,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/xs"
+      }
+    },
+    {
+      "name": "Label/Large",
+      "description": "Solid button labels. Code: Button variant=solid",
+      "fontFamily": "Inter",
+      "fontStyle": "Semi Bold",
+      "fontWeight": 600,
+      "fontSize": 12,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/sm"
+      }
+    },
+    {
+      "name": "Number/Display",
+      "description": "Live speeds. Add a 0.43px outside stroke. Code: .type-number-display .metric-value, at weight 600: Questrial has one weight, so the browser emboldens it.",
+      "fontFamily": "Questrial",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 28,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 100
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/numeric",
+        "fontSize": "font-size/3xl"
+      }
+    },
+    {
+      "name": "Number/Large",
+      "description": "Stat totals. Add a 0.26px outside stroke. Code: Readout size=compact",
+      "fontFamily": "Questrial",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 17,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 100
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/numeric",
+        "fontSize": "font-size/2xl"
+      }
+    },
+    {
+      "name": "Number/Default",
+      "description": "Data row values. Code: .type-number-default",
+      "fontFamily": "Questrial",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 13,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 135
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/numeric",
+        "fontSize": "font-size/md"
+      }
+    },
+    {
+      "name": "Number/Small",
+      "description": "Chart axes and scale. Code: .type-number-small",
+      "fontFamily": "Questrial",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 10,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 100
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/numeric",
+        "fontSize": "font-size/2xs"
+      }
+    },
+    {
+      "name": "Label/Default",
+      "description": "Bold small labels on tinted chips. Code: .type-label-default",
+      "fontFamily": "Inter",
+      "fontStyle": "Semi Bold",
+      "fontWeight": 600,
+      "fontSize": 11,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/xs"
+      }
+    },
+    {
+      "name": "Label/Small",
+      "description": "Soft buttons, title bar status. Code: .type-label-small",
+      "fontFamily": "Inter",
+      "fontStyle": "Medium",
+      "fontWeight": 500,
+      "fontSize": 11,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/xs"
+      }
+    },
+    {
+      "name": "Body/Small",
+      "description": "Helper text, hints and units. Code: .type-body-small",
+      "fontFamily": "Inter",
+      "fontStyle": "Regular",
+      "fontWeight": 400,
+      "fontSize": 12,
+      "lineHeight": {
+        "unit": "PERCENT",
+        "value": 145
+      },
+      "letterSpacing": {
+        "unit": "PERCENT",
+        "value": 0
+      },
+      "boundVariables": {
+        "fontFamily": "font-family/sans",
+        "fontSize": "font-size/sm"
+      }
+    }
+  ]
+}