@rowkit/tokens 0.3.0 → 1.0.0-beta.0

package/README.md

@@ -1,9 +1,9 @@
 # @rowkit/tokens
 
-[![npm](https://img.shields.io/npm/v/@rowkit/tokens?color=3b5bdb)](https://www.npmjs.com/package/@rowkit/tokens)
+[![npm](https://img.shields.io/npm/v/@rowkit/tokens/beta?color=000080)](https://www.npmjs.com/package/@rowkit/tokens)
 [![license](https://img.shields.io/npm/l/@rowkit/tokens)](https://github.com/NikolaiKushner/rowkit/blob/main/LICENSE)
 
-The design tokens behind [rowkit](https://www.npmjs.com/package/rowkit) — colour, spacing, typography, radii, shadows, layers and motion.
+The design tokens behind [rowkit](https://www.npmjs.com/package/rowkit) — the Windows 98 palette, bevels, type, spacing, radii, layers and motion.
 
 Usable on its own. Nothing here depends on Vue, so a chart library, a design tool or an email template can read the same values the components use.
 
@@ -12,14 +12,14 @@ Usable on its own. Nothing here depends on Vue, so a chart library, a design too
 ## Install
 
 ```bash
-npm i @rowkit/tokens
+npm i @rowkit/tokens@beta
 ```
 
 ## Two layers
 
-**Primitives** are the raw ramps: `--color-primary-600` is one specific blue and means nothing on its own. **Semantic** tokens name a role — `--color-card`, `--color-muted-foreground`, `--color-border` — and point at a primitive through `var()`.
+**Primitives** are the raw palette — the VGA colours and Windows 98's system colours: `--color-vga-navy` is one specific blue and means nothing on its own. **Semantic** tokens name a role — `--color-card`, `--color-muted-foreground`, `--color-border` — and point at a primitive through `var()`.
 
-Only the semantic layer changes under `.dark`, which is what makes dark mode a matter of repointing references rather than hunting hex codes.
+Rebranding is a matter of repointing semantic references rather than hunting hex codes. There is one theme; rowkit has no dark mode.
 
 ## Use
 
@@ -30,7 +30,7 @@ As a Tailwind v4 theme:
 @import '@rowkit/tokens/css';
 ```
 
-Every token becomes a theme value, so `bg-card`, `text-muted-foreground`, `p-4`, `rounded-md` and `shadow-lg` resolve to the scales above.
+Every token becomes a theme value, so `bg-card`, `text-ui`, `p-4` and `shadow-raised` resolve to the scales above.
 
 As CSS custom properties, for anything Tailwind does not cover:
 
@@ -46,18 +46,22 @@ Or in TypeScript, fully typed, when a value has to reach JavaScript:
 ```ts
 import { tokens } from '@rowkit/tokens'
 
-tokens.color.primary[800] // 'oklch(0.31 0.038 48)' — warm espresso
+tokens.color.vga.silver // '#c0c0c0' — the face of every window
 
-const series = [tokens.color.primary[500], tokens.color.success[500]]
+const series = [tokens.color.vga.navy, tokens.color.vga.green, tokens.color.vga.maroon]
 ```
 
-`tokens` is grouped by scale rather than flattened, so `tokens.color.primary[600]` narrows to its literal type and autocompletes at every level.
+`tokens` is grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows to its literal type and autocompletes at every level.
 
 ## Notes on the values
 
-**Colour is OKLCH, clamped to sRGB.** Every chromatic family shares one lightness ramp, so `primary-600`, `danger-600` and `success-600` carry the same perceptual weight. Chroma is clamped to the sRGB gamut on purpose: OKLCH can express colours outside it, and browsers gamut-map those by their own rules — which makes a token render differently on a P3 laptop than on an sRGB monitor.
+**Colour is the exact Windows 98 palette.** Primitives are `#rrggbb` values from the VGA palette and the default Windows 98 scheme, named as in the design's Figma variables.
 
-**Contrast is asserted, not claimed.** Every semantic pairing is checked against WCAG AA in the package's own tests, in both themes.
+**Depth is bevels, not elevation.** `shadow-raised`, `shadow-sunken`, `shadow-window` and the rest are hard inset lines in the four `bevel-*` colours. Corners are square: the radius scale multiplies `--radius`, which is `0rem` until you set it.
+
+**Type is PT Sans and VT323.** The interface is set at 11px (`text-ui`). The font files are not shipped; load `@fontsource/pt-sans` and `@fontsource/vt323` in the app.
+
+**Contrast is asserted, not claimed.** Every semantic text pairing is checked against WCAG AA, and every control boundary and focus ring against 3:1, in the package's own tests.
 
 **Spacing keys are multiples of 4px.** `4` is 1rem, `2` is 8px — the convention most Vue and Tailwind developers already carry.
 
@@ -67,4 +71,4 @@ const series = [tokens.color.primary[500], tokens.color.success[500]]
 
 MIT © Nikolai Kushner
 
-Design language based on [shadcn/ui](https://ui.shadcn.com) by shadcn, adapted for Vue. shadcn/ui is MIT licensed; rowkit adopts its token values and class recipes, not its code.
+The visual language is a tribute to Windows 98. rowkit is not affiliated with or endorsed by Microsoft.