@boyernick/standard-ui-tokens 0.1.0 → 0.1.1-canary.2

package/css/tokens.css

@@ -25,6 +25,7 @@
   --text-primary-inverted: var(--gray-0);
   --text-secondary-inverted: var(--gray-200);
 
+  --border-subtle: var(--alpha-06);
   --border-primary: var(--alpha-10);
   --border-primary-solid: var(--gray-100);
   --border-secondary: var(--alpha-15);
@@ -58,19 +59,24 @@
   --ring: var(--gray-1000);
 
   /*
-   * Code syntax — White (arthurwhite.White), mapped to gray scale
-   * strings ≈ greyStrong (#6b7a88 → gray-450), comments ≈ grey (#bec9d3 → gray-200)
+   * Code syntax — Rare UI's red light theme, rebuilt on our own scales.
+   * That theme generates every token from one accent hue (hsl 3.2) by ramping
+   * lightness and scaling saturation, so each role below is the nearest token
+   * to the colour it generates. Punctuation and comments are desaturated warm
+   * mid-tones the red scale cannot reach on its own, so they are mixed toward
+   * gray. Hierarchy comes from colour alone — the previous mapping was
+   * monochrome and leaned on font-weight instead.
    */
-  --sh-class: var(--gray-1000);
-  --sh-identifier: var(--gray-1000);
-  --sh-sign: var(--gray-1000);
-  --sh-space: var(--gray-1000);
-  --sh-property: var(--gray-1000);
-  --sh-entity: var(--gray-1000);
-  --sh-jsxliterals: var(--gray-1000);
-  --sh-string: var(--gray-450);
-  --sh-keyword: var(--gray-1000);
-  --sh-comment: var(--gray-200);
+  --sh-keyword: var(--red-500);
+  --sh-string: var(--red-700);
+  --sh-jsxliterals: var(--red-800);
+  --sh-property: var(--red-800);
+  --sh-entity: var(--red-950);
+  --sh-class: var(--red-1000);
+  --sh-identifier: var(--gray-925);
+  --sh-space: var(--gray-925);
+  --sh-sign: color-mix(in oklab, var(--red-200) 49%, var(--gray-950));
+  --sh-comment: color-mix(in oklab, var(--red-300) 47%, var(--gray-450));
 
   /* Spacing base — 4px unit for Tailwind spacing scale */
   --spacing: 0.25rem;
@@ -136,19 +142,20 @@
   --ring: var(--gray-1000);
 
   /*
-   * Code syntax — White Night via inverted gray scale
-   * strings ≈ #a8a8b1 → gray-700, comments ≈ #65696e → gray-550
+   * Code syntax — dark half of the same theme. The red scale does not flip
+   * between themes (only gray does), so the dark ramp walks the light end of
+   * the same reds rather than the dark end.
    */
-  --sh-class: var(--gray-1000);
+  --sh-keyword: var(--red-400);
+  --sh-string: var(--red-200);
+  --sh-jsxliterals: var(--red-100);
+  --sh-property: var(--red-100);
+  --sh-entity: var(--red-50);
+  --sh-class: var(--red-25);
   --sh-identifier: var(--gray-1000);
-  --sh-sign: var(--gray-1000);
   --sh-space: var(--gray-1000);
-  --sh-property: var(--gray-1000);
-  --sh-entity: var(--gray-1000);
-  --sh-jsxliterals: var(--gray-1000);
-  --sh-string: var(--gray-700);
-  --sh-keyword: var(--gray-1000);
-  --sh-comment: var(--gray-550);
+  --sh-sign: color-mix(in oklab, var(--red-300) 36%, var(--gray-600));
+  --sh-comment: color-mix(in oklab, var(--red-600) 52%, var(--gray-500));
 
   --shadow-alpha-100: 0.2;
   --shadow-alpha-200: 0.2;
@@ -190,6 +197,7 @@
   --color-fg-inverted: var(--text-primary-inverted);
   --color-fg-inverted-secondary: var(--text-secondary-inverted);
 
+  --color-border-subtle: var(--border-subtle);
   --color-border-primary: var(--border-primary);
   --color-border-primary-solid: var(--border-primary-solid);
   --color-border-secondary: var(--border-secondary);
@@ -391,7 +399,7 @@
   font-family: var(--font-sans);
   font-size: 2.25rem;
   line-height: 2.625rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -399,7 +407,7 @@
   font-family: var(--font-display);
   font-size: 2.25rem;
   line-height: 2.625rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -407,7 +415,7 @@
   font-family: var(--font-sans);
   font-size: 2rem;
   line-height: 2.375rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -415,7 +423,7 @@
   font-family: var(--font-display);
   font-size: 2rem;
   line-height: 2.375rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -423,7 +431,7 @@
   font-family: var(--font-sans);
   font-size: 1.5rem;
   line-height: 1.75rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -431,7 +439,7 @@
   font-family: var(--font-display);
   font-size: 1.5rem;
   line-height: 1.75rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -439,7 +447,7 @@
   font-family: var(--font-sans);
   font-size: 1.25rem;
   line-height: 1.625rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -447,7 +455,7 @@
   font-family: var(--font-sans);
   font-size: 1.125rem;
   line-height: 1.625rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 
@@ -455,7 +463,7 @@
   font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.5rem;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0em;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1-canary.2",
   "description": "Design tokens for StandardUI",
   "license": "MIT",
   "files": [