@misoto22/design 0.3.1 → 0.5.0

package/dist/tokens.json

@@ -269,29 +269,58 @@
     "category": "space",
     "light": "clamp(40px, calc(5 * var(--fluid)), 68px)"
   },
+  "radius-factor": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "1"
+  },
+  "radius-gate": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "min(1, var(--radius-factor))",
+    "comment": "Clamps the factor at 1 for the ADDING direction only. A frame's air is a fixed number of pixels, so `--radius-lg + 16px` would leave a rounded frame around a square panel the moment the theme went square; gated, it collapses to nothing along with everything else."
+  },
+  "radius-xs": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(4px * var(--radius-factor))",
+    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+  },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
-    "light": "6px",
-    "comment": "─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was \"0 everywhere\"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here."
+    "light": "calc(6px * var(--radius-factor))",
+    "comment": "a mark inside a tight box"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
-    "light": "8px",
-    "comment": "images, thumbnails, media frames"
+    "light": "calc(8px * var(--radius-factor))",
+    "comment": "chips, keys, list rows"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
-    "light": "14px",
-    "comment": "inputs, buttons, small plates"
+    "light": "calc(12px * var(--radius-factor))",
+    "comment": "inputs, code, small plates"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
-    "light": "999px",
-    "comment": "feature panels, dark plates"
+    "light": "calc(999px * var(--radius-factor))",
+    "comment": "cards, dialogs, menu panels"
+  },
+  "radius-row": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
+    "comment": "The nesting law, applied to the two insets this system actually uses."
+  },
+  "radius-frame": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
+    "comment": "a row in a 6px-padded panel"
   },
   "control-h-sm": {
     "layer": "tokens",
@@ -367,6 +396,22 @@
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "panel-bg": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Floating surfaces ────────────────────────────────────────────────── What a panel that FLOATS fills with, and what it does to whatever is behind it. A dialog, a menu, a popover, a palette — the surfaces that sit OVER the page rather than in it, and therefore the only ones with anything behind them to treat. Both default to the plain surface and cost nothing. `--panel-filter: none` matters more than it looks: a `backdrop-filter` of any value, `blur(0px)` included, promotes its element to its own compositing layer and makes it a containing block for fixed descendants. Paid on every menu in the system, for a theme most readers will never turn on. `none` is not a blur of zero; it is no filter at all. A card is deliberately NOT on this list. It sits on the page ground, so there is nothing behind it to see through, and a card that blurs its own background is drawing an effect rather than an object."
+  },
+  "panel-border": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "panel-filter": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "none"
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@misoto22/design",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": false,
-  "description": "Monochrome design system \u2014 CSS tokens and accessible React primitives",
+  "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
   "author": "Henry Chen",
   "type": "module",
@@ -29,23 +29,11 @@
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
-    "./themes.css": "./dist/themes.css"
+    "./themes.css": "./dist/themes.css",
+    "./article.css": "./dist/article.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "build:fonts": "node scripts/vendor-fonts.mjs",
-    "build:js": "NODE_OPTIONS=--max-old-space-size=6144 tsup",
-    "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify && node scripts/copy-portable-css.mjs && node scripts/emit-tokens.mjs",
-    "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "check:size": "node scripts/check-size.mjs"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -78,6 +66,7 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@fontsource/hanken-grotesk": "^5.2.5",
     "@fontsource/ibm-plex-mono": "^5.2.5",
     "@fontsource/newsreader": "^5.2.5",
@@ -94,6 +83,7 @@
     "esbuild": "^0.28.2",
     "esbuild-fix-imports-plugin": "^1.0.23",
     "jsdom": "^29.1.1",
+    "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwindcss": "4.3.3",
@@ -105,10 +95,9 @@
     "node": ">=24",
     "pnpm": ">=11"
   },
-  "packageManager": "pnpm@11.9.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Misoto22/misoto22-design.git",
+    "url": "git+https://github.com/Misoto22/misoto22-design.git",
     "directory": "packages/design"
   },
   "keywords": [
@@ -126,5 +115,19 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build:fonts": "node scripts/vendor-fonts.mjs",
+    "build:js": "NODE_OPTIONS=--max-old-space-size=6144 tsup",
+    "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify && node scripts/copy-portable-css.mjs && node scripts/emit-tokens.mjs",
+    "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "check:size": "node scripts/check-size.mjs",
+    "check:publish": "node scripts/check-publish.mjs"
   }
-}
+}