@rowkit/tokens 0.4.0 → 1.0.0-beta.1

package/dist/typography.d.ts

@@ -1,85 +1,108 @@
 /**
- * Typography scale.
+ * Typography.
  *
- * Weighted toward the small end: a dashboard spends most of its type budget
- * between 12px and 16px, and the sizes above `xl` exist for empty states and
- * page titles rather than for data.
+ * Two registers, as in the design: the interface, and long text for
+ * documentation. The interface is set at 13px — Windows 98's 8pt in its
+ * "Large Fonts" mode (120 DPI), which the system offered for exactly this
+ * reason: at 96 DPI 8pt is 11px, and on today's screens, whose pixels are far
+ * smaller than a 1998 monitor's, 11px is too small to read for long. The sizes
+ * are named after the Figma text styles (`ui/body` is `text-ui`, `doc/h1` is
+ * `text-doc-h1`), so a style picked in the design maps to one utility.
+ *
+ * Sizes are in `rem`, so a reader who raised their browser's base size gets
+ * larger text; at the default 16px base they land on the design's pixels.
  */
 /**
  * Font families.
  *
- * rowkit's face is **Geist** — designed for tools, not marketing pages. The
- * stack names the webfont first; system fallbacks keep layout honest before
- * the file lands. Loading the font is the app's job (one import from
- * `@fontsource-variable/geist`); without it, the stack falls through cleanly.
+ * The interface face is **PT Sans** (ParaType, OFL): the closest open match
+ * to Tahoma, which succeeded MS Sans Serif, and compact enough for dense
+ * tables. It covers Latin and Cyrillic in regular and bold. The fixed-width
+ * face is **VT323** (OFL), drawn after the Fixedsys terminal font.
+ *
+ * rowkit does not ship either font file: the app loads them, one import each
+ * from `@fontsource/pt-sans` and `@fontsource/vt323`. Without them the stacks
+ * fall through to Tahoma and the faces operating systems already ship.
  */
 export declare const fontFamily: {
     /** UI and body text. */
     readonly sans: string;
-    /** IDs, hashes, numeric columns that must align vertically. */
+    /** Code, IDs and numbers that must align in a column. */
     readonly mono: string;
 };
 /**
- * Font sizes, each paired with the line height it should almost always use.
+ * Font sizes, each paired with the line height the design sets it in.
  *
  * Pairing them prevents the most common typographic bug in a dense table:
- * shrinking the font without shrinking leading, so rows stay tall and the
- * density gain evaporates.
+ * changing the size without the leading, so rows stay tall and the density
+ * the size was meant to buy evaporates.
  */
 export declare const fontSize: {
-    /** 12px — table metadata, badges, column headers. */
-    readonly xs: {
-        readonly size: "0.75rem";
+    /** 13/16 — every control, label, menu and table cell. Bold for titles and the default button. */
+    readonly ui: {
+        readonly size: "0.8125rem";
         readonly lineHeight: "1rem";
     };
-    /** 14px — the default for table cells and form controls. */
-    readonly sm: {
-        readonly size: "0.875rem";
+    /** 16/20, bold — the heading of an empty state or a group. */
+    readonly heading: {
+        readonly size: "1rem";
         readonly lineHeight: "1.25rem";
     };
-    /** 16px — body copy outside of data views. */
-    readonly base: {
+    /**
+     * 16/16 — the fixed-width face beside interface text. VT323's x-height is
+     * 0.4em to PT Sans's 0.5em, so 16px VT323 stands exactly as tall as 13px
+     * PT Sans.
+     */
+    readonly mono: {
         readonly size: "1rem";
-        readonly lineHeight: "1.5rem";
+        readonly lineHeight: "1rem";
     };
-    /** 18px — card titles. */
-    readonly lg: {
-        readonly size: "1.125rem";
-        readonly lineHeight: "1.75rem";
+    /** 16/26 — documentation paragraphs, about seventy characters to a line. */
+    readonly doc: {
+        readonly size: "1rem";
+        readonly lineHeight: "1.625rem";
     };
-    /** 20px — section headings. */
-    readonly xl: {
+    /** 20/20 — code beside documentation text: as tall as 16px PT Sans, for the same reason as `mono`. */
+    readonly 'doc-mono': {
         readonly size: "1.25rem";
-        readonly lineHeight: "1.75rem";
+        readonly lineHeight: "1.25rem";
+    };
+    /** 26/30, bold — a documentation page title. */
+    readonly 'doc-h1': {
+        readonly size: "1.625rem";
+        readonly lineHeight: "1.875rem";
     };
-    /** 24px — page titles, empty-state headings. */
-    readonly '2xl': {
-        readonly size: "1.5rem";
-        readonly lineHeight: "2rem";
+    /** 19/24, bold — a documentation section. */
+    readonly 'doc-h2': {
+        readonly size: "1.1875rem";
+        readonly lineHeight: "1.5rem";
     };
-    /** 30px — the largest size rowkit ships. */
-    readonly '3xl': {
-        readonly size: "1.875rem";
-        readonly lineHeight: "2.25rem";
+    /** 15/20, bold — a documentation subsection. */
+    readonly 'doc-h3': {
+        readonly size: "0.9375rem";
+        readonly lineHeight: "1.25rem";
     };
 };
-/** Font weights. */
+/**
+ * Font weights. Two, because PT Sans has two: anything in between would be
+ * synthesised by the browser, and a faked weight is blurrier than either real
+ * one.
+ */
 export declare const fontWeight: {
     /** Body text. */
     readonly normal: "400";
-    /** Buttons, labels, card titles — prefer this over semibold in dense UI. */
-    readonly medium: "500";
-    /** Page titles and dialog headings. */
-    readonly semibold: "600";
-    /** Display only. Rarely needed in data views. */
+    /** Window titles, headings, the default button. */
     readonly bold: "700";
+    /**
+     * The weight a theme gives emphasis: titles, headings, a table's totals.
+     * Components use this rather than `bold`, so a theme can make emphasis
+     * semibold without changing what `font-bold` means in the app around it.
+     */
+    readonly strong: "700";
 };
-/** Letter spacing. Tightening only pays off at display sizes. */
+/** Letter spacing. Windows 98 sets every size at the face's own spacing. */
 export declare const letterSpacing: {
-    readonly tight: "-0.015em";
     readonly normal: "0em";
-    /** For uppercase micro-labels, which need air to stay readable. */
-    readonly wide: "0.04em";
 };
 /** Standalone line heights, for when text is not using a paired {@link fontSize}. */
 export declare const lineHeight: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowkit/tokens",
-  "version": "0.4.0",
+  "version": "1.0.0-beta.1",
   "description": "Design tokens for rowkit — consumable without importing components.",
   "license": "MIT",
   "author": "Nikolai Kushner",
@@ -29,6 +29,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./reference": {
+      "types": "./dist/reference.d.ts",
+      "import": "./dist/reference.js"
+    },
     "./css": "./dist/tokens.css",
     "./package.json": "./package.json"
   },
@@ -40,8 +44,8 @@
     "node": ">=20.19.0"
   },
   "scripts": {
-    "build": "vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs && node scripts/emit-reference.mjs",
+    "build": "vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs",
     "typecheck": "vue-tsc -b --force",
-    "reference": "pnpm build && open dist/reference.html"
+    "docs:reference": "node scripts/generate-reference.mjs"
   }
 }

package/dist/blur.d.ts

@@ -1,18 +0,0 @@
-/**
- * Backdrop blur radii.
- *
- * One entry, and named for its job rather than a t-shirt size. Blur is not a
- * scale rowkit designs with — it appears in exactly one place, behind a modal,
- * and a second value would be a decision nobody has had to make yet.
- *
- * Deliberately small. The scrim separates the planes; the blur only stops the
- * page behind from competing for the eye. Anything heavier reads as an effect
- * and makes the content behind unrecognisable, which defeats the reason a
- * modal shows its context at all.
- */
-export declare const blur: {
-    /** The dialog scrim. The reference `backdrop-blur-xs`. */
-    readonly overlay: "4px";
-};
-/** Names of every blur token. */
-export type BlurName = keyof typeof blur;