@rowkit/tokens 0.2.0 → 0.4.0

package/README.md

@@ -46,7 +46,7 @@ Or in TypeScript, fully typed, when a value has to reach JavaScript:
 ```ts
 import { tokens } from '@rowkit/tokens'
 
-tokens.color.primary[600] // 'oklch(0.546 0.209 259)'
+tokens.color.primary[800] // 'oklch(0.32 0.09 255)' — ink blue
 
 const series = [tokens.color.primary[500], tokens.color.success[500]]
 ```

package/dist/color.d.ts

@@ -41,19 +41,26 @@ export declare const neutral: {
     readonly 900: "oklch(0.21 0.033 264)";
     readonly 950: "oklch(0.13 0.036 264)";
 };
-/** Brand blue (hue 259). Drives links, focus rings and primary actions. */
+/**
+ * Ink blue (hue 255).
+ *
+ * Cool and current — the step after warm espresso. Chroma stays low so a
+ * solid button is ink, not a brand shout, and the selected-row wash
+ * (`primary-50`) reads as a cool mist instead of a pink one.
+ */
 export declare const primary: {
-    readonly 50: "oklch(0.97 0.014 259)";
-    readonly 100: "oklch(0.936 0.03 259)";
-    readonly 200: "oklch(0.885 0.055 259)";
-    readonly 300: "oklch(0.809 0.095 259)";
-    readonly 400: "oklch(0.715 0.147 259)";
-    readonly 500: "oklch(0.623 0.201 259)";
-    readonly 600: "oklch(0.546 0.209 259)";
-    readonly 700: "oklch(0.488 0.187 259)";
-    readonly 800: "oklch(0.442 0.165 259)";
-    readonly 900: "oklch(0.396 0.135 259)";
-    readonly 950: "oklch(0.282 0.086 259)";
+    readonly 50: "oklch(0.975 0.011 255)";
+    readonly 100: "oklch(0.948 0.022 255)";
+    readonly 200: "oklch(0.90 0.034 255)";
+    readonly 300: "oklch(0.80 0.05 255)";
+    readonly 400: "oklch(0.68 0.07 255)";
+    readonly 500: "oklch(0.52 0.09 255)";
+    readonly 600: "oklch(0.44 0.095 255)";
+    readonly 700: "oklch(0.38 0.095 255)";
+    /** Solid actions — ink blue, deep enough for white labels. */
+    readonly 800: "oklch(0.32 0.09 255)";
+    readonly 900: "oklch(0.27 0.075 255)";
+    readonly 950: "oklch(0.19 0.05 255)";
 };
 /** Green (hue 152). Reserved for successful outcomes, never for brand accent. */
 export declare const success: {
@@ -121,9 +128,9 @@ export declare const gray: {
     /** the reference `--secondary`, `--muted`, `--accent` — kept for dark primary fill. */
     readonly 970: "oklch(0.97 0 0)";
     /**
-     * Cool decorative hairline. Lighter than the reference `--border` (0.922) and
-     * barely tinted — table row rules and card outlines that stay visible without
-     * dividing the page into boxes.
+     * Cool decorative hairline / recessed fill step. Lighter than the reference
+     * `--border` (0.922) — table rules, card outlines, and secondary button fill
+     * (`surface-active`) that must read as a surface next to white outline chrome.
      */
     readonly 940: "oklch(0.940 0.004 264)";
     /** the reference `--border`. Kept for pressed fills that still need a step of weight. */
@@ -198,10 +205,16 @@ export declare const gray: {
  * on the label in both themes and still clears 4.04:1 against the dark page.
  */
 export declare const red: {
+    /** Soft text on a dark subtle wash. Chroma clamped for sRGB. */
+    readonly 850: "oklch(0.85 0.08 25)";
     /** Destructive fill. The reference design's lightness, chroma clamped. */
     readonly 577: "oklch(0.577 0.235 27.325)";
     /** Destructive hover — darkens in both themes, so the white label improves. */
     readonly 520: "oklch(0.52 0.212 27.325)";
+    /** Soft border on a dark subtle wash. */
+    readonly 350: "oklch(0.38 0.055 25)";
+    /** Soft fill in dark mode — quiet red wash, not a solid brick. */
+    readonly 260: "oklch(0.32 0.045 25)";
 };
 /**
  * Success and warning, at the reference design's weight. Keyed by lightness, like `gray`.
@@ -329,22 +342,25 @@ export declare const colorPrimitives: {
     readonly "white-alpha-15": string;
     readonly "amber-400": string;
     readonly "amber-950": string;
-    readonly "amber-520": string;
-    readonly "amber-880": string;
     readonly "amber-850": string;
-    readonly "amber-550": string;
+    readonly "amber-520": string;
     readonly "amber-350": string;
     readonly "amber-260": string;
+    readonly "amber-880": string;
+    readonly "amber-550": string;
     readonly "green-400": string;
     readonly "green-950": string;
-    readonly "green-520": string;
-    readonly "green-880": string;
     readonly "green-850": string;
-    readonly "green-550": string;
+    readonly "green-520": string;
     readonly "green-350": string;
     readonly "green-260": string;
+    readonly "green-880": string;
+    readonly "green-550": string;
+    readonly "red-850": string;
     readonly "red-577": string;
     readonly "red-520": string;
+    readonly "red-350": string;
+    readonly "red-260": string;
     readonly "gray-988": string;
     readonly "gray-985": string;
     readonly "gray-972": string;
@@ -441,19 +457,23 @@ export declare const semanticColorLight: {
     /** Barely-there separation inside a dense group. */
     readonly 'border-subtle': `var(--color-${string})`;
     /**
-     * Boundary of an interactive control — text inputs, checkboxes, outlined
+     * Boundary of an interactive control — text inputs, selects, outlined
      * buttons.
      *
-     * Cooler and a touch lighter than the old pure `gray-635`, still ≥3:1 on the
-     * page, a card and a toolbar. Matches the cool hairline language without
-     * dropping below WCAG 1.4.11.
+     * Quiet on purpose (structure without severity). Resting edges sit near the
+     * decorative hairline; the focus treatment (`border-ring` + ring) is what
+     * carries WCAG 1.4.11. Matching the reference design's soft resting edge
+     * rather than a 3:1 ink outline that shouted next to every field.
      */
     readonly input: `var(--color-${string})`;
     /**
      * Focus ring. Never remove the ring — recolour it.
      *
-     * Matches the brand primary so focused controls and the primary button speak
-     * one language. Clears 1.4.11 against the page and recessed surfaces.
+     * Soft silver — the payment-form / shadcn weight (`gray-708`), not ink.
+     * Intentionally under 3:1 as a solid; the visible treatment is
+     * `border-ring` plus a translucent outer ring, not a black halo.
+     * Every control that focuses (Button, Input, Select, Dialog close,
+     * Pagination, FilterBar chips, DataTable, Toast) reads this same token.
      */
     readonly ring: `var(--color-${string})`;
     /** Base colour shadows are mixed from. */
@@ -464,6 +484,10 @@ export declare const semanticColorLight: {
     readonly 'neutral-subtle': `var(--color-${string})`;
     readonly 'neutral-on-subtle': `var(--color-${string})`;
     readonly 'neutral-border': `var(--color-${string})`;
+    /**
+     * Ink-blue solid — cool, not a black brick and not a saturated brand blue.
+     * `primary-800` ≈ `oklch(0.32 0.09 255)`.
+     */
     readonly 'primary-solid': `var(--color-${string})`;
     readonly 'primary-solid-hover': `var(--color-${string})`;
     readonly 'primary-on-solid': `var(--color-${string})`;
@@ -492,11 +516,8 @@ export declare const semanticColorLight: {
 /**
  * Dark-mode semantic colours, applied under `.dark`.
  *
- * Solid fills use the bright `400` step with dark text rather than mirroring
- * light mode's `600` with white text. On a near-black page a `600` fill only
- * reaches 3.6–4.4:1 against the background — the button itself becomes hard to
- * locate even though its label is legible. The `400` fill scores 7.4–8.5:1 on
- * both label and background.
+ * Soft ink fills invert on dark pages: a near-white solid with dark type,
+ * rather than a mid-grey that disappears into the chrome.
  */
 export declare const semanticColorDark: {
     readonly background: `var(--color-${string})`;
@@ -515,6 +536,10 @@ export declare const semanticColorDark: {
     readonly 'border-strong': `var(--color-${string})`;
     readonly 'border-subtle': `var(--color-${string})`;
     readonly input: `var(--color-${string})`;
+    /**
+     * Soft focus — white at the same quiet weight as the control border, not a
+     * bright primary wash. Reads as a silver edge on dark surfaces.
+     */
     readonly ring: `var(--color-${string})`;
     readonly shadow: `var(--color-${string})`;
     readonly 'neutral-solid': `var(--color-${string})`;

package/dist/index.d.ts

@@ -9,7 +9,7 @@
  * @example Typed access to a primitive
  * ```ts
  * import { tokens } from '@rowkit/tokens'
- * tokens.color.primary[600] // 'oklch(0.546 0.209 259)'
+ * tokens.color.primary[800] // 'oklch(0.32 0.09 255)' — ink blue
  * ```
  *
  * @example The stylesheet
@@ -101,21 +101,24 @@ export declare const tokens: {
             readonly 950: "oklch(0.13 0.036 264)";
         };
         readonly primary: {
-            readonly 50: "oklch(0.97 0.014 259)";
-            readonly 100: "oklch(0.936 0.03 259)";
-            readonly 200: "oklch(0.885 0.055 259)";
-            readonly 300: "oklch(0.809 0.095 259)";
-            readonly 400: "oklch(0.715 0.147 259)";
-            readonly 500: "oklch(0.623 0.201 259)";
-            readonly 600: "oklch(0.546 0.209 259)";
-            readonly 700: "oklch(0.488 0.187 259)";
-            readonly 800: "oklch(0.442 0.165 259)";
-            readonly 900: "oklch(0.396 0.135 259)";
-            readonly 950: "oklch(0.282 0.086 259)";
+            readonly 50: "oklch(0.975 0.011 255)";
+            readonly 100: "oklch(0.948 0.022 255)";
+            readonly 200: "oklch(0.90 0.034 255)";
+            readonly 300: "oklch(0.80 0.05 255)";
+            readonly 400: "oklch(0.68 0.07 255)";
+            readonly 500: "oklch(0.52 0.09 255)";
+            readonly 600: "oklch(0.44 0.095 255)";
+            readonly 700: "oklch(0.38 0.095 255)";
+            readonly 800: "oklch(0.32 0.09 255)";
+            readonly 900: "oklch(0.27 0.075 255)";
+            readonly 950: "oklch(0.19 0.05 255)";
         };
         readonly red: {
+            readonly 850: "oklch(0.85 0.08 25)";
             readonly 577: "oklch(0.577 0.235 27.325)";
             readonly 520: "oklch(0.52 0.212 27.325)";
+            readonly 350: "oklch(0.38 0.055 25)";
+            readonly 260: "oklch(0.32 0.045 25)";
         };
         readonly success: {
             readonly 50: "oklch(0.97 0.014 152)";
@@ -218,22 +221,25 @@ export declare const tokens: {
             readonly "white-alpha-15": string;
             readonly "amber-400": string;
             readonly "amber-950": string;
-            readonly "amber-520": string;
-            readonly "amber-880": string;
             readonly "amber-850": string;
-            readonly "amber-550": string;
+            readonly "amber-520": string;
             readonly "amber-350": string;
             readonly "amber-260": string;
+            readonly "amber-880": string;
+            readonly "amber-550": string;
             readonly "green-400": string;
             readonly "green-950": string;
-            readonly "green-520": string;
-            readonly "green-880": string;
             readonly "green-850": string;
-            readonly "green-550": string;
+            readonly "green-520": string;
             readonly "green-350": string;
             readonly "green-260": string;
+            readonly "green-880": string;
+            readonly "green-550": string;
+            readonly "red-850": string;
             readonly "red-577": string;
             readonly "red-520": string;
+            readonly "red-350": string;
+            readonly "red-260": string;
             readonly "gray-988": string;
             readonly "gray-985": string;
             readonly "gray-972": string;
@@ -438,7 +444,7 @@ export declare const tokens: {
         readonly lg: string;
         readonly xl: string;
     };
-    readonly radiusBase: "0.625rem";
+    readonly radiusBase: "0.5rem";
     readonly blur: {
         readonly overlay: "4px";
     };

package/dist/index.js

@@ -1,5 +1,5 @@
 //#region package.json
-var e = "0.2.0", t = { overlay: "4px" }, n = [
+var e = "0.4.0", t = { overlay: "4px" }, n = [
 	50,
 	100,
 	200,
@@ -24,17 +24,17 @@ var e = "0.2.0", t = { overlay: "4px" }, n = [
 	900: "oklch(0.21 0.033 264)",
 	950: "oklch(0.13 0.036 264)"
 }, i = {
-	50: "oklch(0.97 0.014 259)",
-	100: "oklch(0.936 0.03 259)",
-	200: "oklch(0.885 0.055 259)",
-	300: "oklch(0.809 0.095 259)",
-	400: "oklch(0.715 0.147 259)",
-	500: "oklch(0.623 0.201 259)",
-	600: "oklch(0.546 0.209 259)",
-	700: "oklch(0.488 0.187 259)",
-	800: "oklch(0.442 0.165 259)",
-	900: "oklch(0.396 0.135 259)",
-	950: "oklch(0.282 0.086 259)"
+	50: "oklch(0.975 0.011 255)",
+	100: "oklch(0.948 0.022 255)",
+	200: "oklch(0.90 0.034 255)",
+	300: "oklch(0.80 0.05 255)",
+	400: "oklch(0.68 0.07 255)",
+	500: "oklch(0.52 0.09 255)",
+	600: "oklch(0.44 0.095 255)",
+	700: "oklch(0.38 0.095 255)",
+	800: "oklch(0.32 0.09 255)",
+	900: "oklch(0.27 0.075 255)",
+	950: "oklch(0.19 0.05 255)"
 }, a = {
 	50: "oklch(0.97 0.014 152)",
 	100: "oklch(0.936 0.036 152)",
@@ -90,8 +90,11 @@ var e = "0.2.0", t = { overlay: "4px" }, n = [
 	205: "oklch(0.205 0 0)",
 	145: "oklch(0.145 0 0)"
 }, l = {
+	850: "oklch(0.85 0.08 25)",
 	577: "oklch(0.577 0.235 27.325)",
-	520: "oklch(0.52 0.212 27.325)"
+	520: "oklch(0.52 0.212 27.325)",
+	350: "oklch(0.38 0.055 25)",
+	260: "oklch(0.32 0.045 25)"
 }, u = {
 	950: "oklch(0.95 0.05 152)",
 	880: "oklch(0.88 0.05 152)",
@@ -154,8 +157,8 @@ var g = (e) => `var(--color-${e})`, _ = {
 	border: g("gray-940"),
 	"border-strong": g("gray-905"),
 	"border-subtle": g("gray-972"),
-	input: g("gray-642"),
-	ring: g("primary-600"),
+	input: g("gray-870"),
+	ring: g("gray-708"),
 	shadow: g("black"),
 	"neutral-solid": g("gray-972"),
 	"neutral-solid-hover": g("gray-940"),
@@ -163,11 +166,11 @@ var g = (e) => `var(--color-${e})`, _ = {
 	"neutral-subtle": g("gray-972"),
 	"neutral-on-subtle": g("gray-205"),
 	"neutral-border": g("gray-940"),
-	"primary-solid": g("primary-600"),
-	"primary-solid-hover": g("primary-700"),
-	"primary-on-solid": g("white"),
+	"primary-solid": g("primary-800"),
+	"primary-solid-hover": g("primary-900"),
+	"primary-on-solid": g("gray-985"),
 	"primary-subtle": g("primary-50"),
-	"primary-on-subtle": g("primary-700"),
+	"primary-on-subtle": g("primary-900"),
 	"primary-border": g("primary-200"),
 	"success-solid": g("green-550"),
 	"success-solid-hover": g("green-520"),
@@ -184,7 +187,7 @@ var g = (e) => `var(--color-${e})`, _ = {
 	"danger-solid": g("red-577"),
 	"danger-solid-hover": g("red-520"),
 	"danger-on-solid": g("white"),
-	"danger-subtle": g("danger-50"),
+	"danger-subtle": g("danger-100"),
 	"danger-on-subtle": g("danger-700"),
 	"danger-border": g("danger-200")
 }, v = {
@@ -193,7 +196,7 @@ var g = (e) => `var(--color-${e})`, _ = {
 	muted: g("gray-269"),
 	accent: g("gray-269"),
 	"surface-active": g("gray-371"),
-	"surface-selected": g("primary-950"),
+	"surface-selected": g("gray-269"),
 	"surface-disabled": g("gray-269"),
 	skeleton: g("gray-269"),
 	foreground: g("gray-985"),
@@ -204,7 +207,7 @@ var g = (e) => `var(--color-${e})`, _ = {
 	"border-strong": g("white-alpha-15"),
 	"border-subtle": g("white-alpha-8"),
 	input: g("white-alpha-15"),
-	ring: g("primary-400"),
+	ring: g("white-alpha-15"),
 	shadow: g("black"),
 	"neutral-solid": g("gray-269"),
 	"neutral-solid-hover": g("gray-371"),
@@ -212,12 +215,12 @@ var g = (e) => `var(--color-${e})`, _ = {
 	"neutral-subtle": g("gray-269"),
 	"neutral-on-subtle": g("gray-985"),
 	"neutral-border": g("gray-371"),
-	"primary-solid": g("primary-400"),
-	"primary-solid-hover": g("primary-300"),
-	"primary-on-solid": g("gray-145"),
-	"primary-subtle": g("primary-950"),
-	"primary-on-subtle": g("primary-300"),
-	"primary-border": g("primary-800"),
+	"primary-solid": g("primary-100"),
+	"primary-solid-hover": g("primary-50"),
+	"primary-on-solid": g("primary-900"),
+	"primary-subtle": g("primary-900"),
+	"primary-on-subtle": g("primary-200"),
+	"primary-border": g("primary-700"),
 	"success-solid": g("green-550"),
 	"success-solid-hover": g("green-520"),
 	"success-on-solid": g("white"),
@@ -233,9 +236,9 @@ var g = (e) => `var(--color-${e})`, _ = {
 	"danger-solid": g("red-577"),
 	"danger-solid-hover": g("red-520"),
 	"danger-on-solid": g("white"),
-	"danger-subtle": g("danger-950"),
-	"danger-on-subtle": g("danger-300"),
-	"danger-border": g("danger-800")
+	"danger-subtle": g("red-260"),
+	"danger-on-subtle": g("red-850"),
+	"danger-border": g("red-350")
 }, y = {
 	instant: "0ms",
 	fast: "120ms",
@@ -246,7 +249,7 @@ var g = (e) => `var(--color-${e})`, _ = {
 	standard: "cubic-bezier(0.2, 0, 0, 1)",
 	enter: "cubic-bezier(0, 0, 0.2, 1)",
 	exit: "cubic-bezier(0.4, 0, 1, 1)"
-}, x = "0.625rem", S = {
+}, x = "0.5rem", S = {
 	none: 0,
 	xs: .4,
 	sm: .6,
@@ -294,6 +297,8 @@ var O = {
 	24: "6rem"
 }, A = "0.25rem", j = {
 	sans: [
+		"\"Geist Variable\"",
+		"Geist",
 		"ui-sans-serif",
 		"system-ui",
 		"-apple-system",
@@ -304,6 +309,8 @@ var O = {
 		"sans-serif"
 	].join(", "),
 	mono: [
+		"\"Geist Mono Variable\"",
+		"Geist Mono",
 		"ui-monospace",
 		"SFMono-Regular",
 		"Menlo",