@iyulab/house-style 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.1.3] - 2026-10-06
+
+### Fixed
+
+- **A sidebar group holding the current page keeps a readable header.** `@iyulab/modern-app` derived that header's
+  text from the active background, which this theme makes light (`--hs-brand-soft`), so the text sank into the
+  panel (about 1.6:1 light, 1.1:1 dark). The theme now sets `--app-sidebar-group-active-fg` to `--hs-brand-ink`, the
+  color it already uses for text on that background (`@iyulab/modern-app` 0.39 reads it).
+- **Patterns follow the type ladder.** `patterns.css` set font sizes in px (11, 12, 13, 28 — 19 places) and flex-table
+  cells and headers did too, so a consumer who rescaled `--u-text-*-size` saw components and body text change while
+  tables, pagers, definition lists and stats stayed put. They now read the steps — label, caption and overline, plus
+  two house steps derived from the ladder: `--hs-text-dense-size` (between body and label — the 13px of table cells,
+  definition lists, callouts) and `--hs-text-hero-size` (display + 6px — the 28px headline figure). Each read keeps
+  the current px as its fallback, so nothing changes at the house ladder. Button and field font sizes stay literal:
+  they are terms of the 28/32/40 control-height formula.
+
 ## [0.1.2] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -77,6 +77,11 @@ Everything else — warm-grey neutrals, the ink primary action, blue for links a
 tints, the 22/18/15/14/13/12/11 type ladder, 28/32/40 controls, 40px table rows — comes from the
 theme and can be overridden token by token.
 
+The type ladder is the `--u-text-*-size` steps plus two house steps derived from them —
+`--hs-text-dense-size` (between body and label: table cells, definition lists, callouts) and
+`--hs-text-hero-size` (display + 6px: a headline figure). Every pattern reads a step, so rescaling the
+ladder (a larger mode, a product system) carries the patterns along.
+
 ## The guide
 
 **Live**: https://iyulab.github.io/house-style/ — this is the guide. There is no
@@ -130,6 +135,15 @@ npm run check:start-here -w @iyulab/house-style
 packed in place of the registry's — run it before tagging a release. The deploy workflow runs
 both on every push to `main`.
 
+The guide itself is checked too: after a build, every page (the landing page and each category)
+must draw its section in a browser, with no page errors — a build can drop the section modules and
+still succeed. The deploy workflow runs it before uploading the site:
+
+```bash
+npm run build -w @iyulab/house-style
+npm run check:guide -w @iyulab/house-style
+```
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The iyulab house theme: a CSS-only theme for @iyulab components — tokens, component recipes, line-of-business layout patterns and a Tailwind CSS v4 preset — plus the guide site that documents it.",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,9 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./src/**",
+    "./src-app/**"
   ],
   "scripts": {
     "preversion": "node -e \"if(require('fs').existsSync('../../scripts/preversion-check.mjs'))require('child_process').execFileSync('node',['../../scripts/preversion-check.mjs'],{stdio:'inherit'})\"",
@@ -33,6 +35,7 @@
     "build": "npm run typecheck && vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
+    "check:guide": "node scripts/check-guide.mjs",
     "check:start-here": "node scripts/check-start-here.mjs",
     "check:start-here:local": "node scripts/check-start-here.mjs --local",
     "pretest": "node -e \"if(require('fs').existsSync('../../scripts/sibling-dist-check.js'))require('child_process').execFileSync('node',['../../scripts/sibling-dist-check.js'],{stdio:'inherit'})\"",
@@ -59,11 +62,11 @@
   },
   "devDependencies": {
     "@iyulab/components": "^2.0.0",
-    "@iyulab/data-components": "^0.35.0",
-    "@iyulab/enterprise": "^0.24.0",
-    "@iyulab/modern-app": "^0.34.0",
-    "@iyulab/router": "^0.19.0",
-    "@iyulab/u-widgets": "^0.24.0",
+    "@iyulab/data-components": "^0.39.0",
+    "@iyulab/enterprise": "^0.25.0",
+    "@iyulab/modern-app": "^0.39.0",
+    "@iyulab/router": "^0.20.0",
+    "@iyulab/u-widgets": "^0.25.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",

package/styles/components.css

@@ -31,7 +31,10 @@
 
 /* ── Button — 28 / 32 / 40, medium weight ─────────────────────────────── *
  * Height follows the components' own formula (1.5em line + 2 × padding + 2px border), so
- * these are padding values, not fixed heights: text and icon-only buttons stay equal.     */
+ * these are padding values, not fixed heights: text and icon-only buttons stay equal.
+ * The font sizes here are literal on purpose: they are terms of that height formula (the
+ * control ladder 28/32/40), not steps of the text ladder — tying them to `--u-text-*` would
+ * change control heights whenever the text ladder is rescaled.                            */
 u-button:not([size]),
 u-button[size='md'] {
   font-size: 13px;
@@ -90,10 +93,10 @@ u-drawer::part(body) {
  *    no zebra (hover and selection carry the row), tabular figures. ──────── */
 flex-table {
   --ft-font-family: var(--u-font-base);
-  --ft-font-size: 13px;
+  --ft-font-size: var(--hs-text-dense-size, 13px);
   --ft-row-height: var(--hs-row);
   --ft-cell-padding-inline: 12px;
-  --ft-header-font-size: 12px;
+  --ft-header-font-size: var(--u-text-label-size, 12px);
   --ft-header-font-weight: 500;
   --ft-header-text-color: var(--u-txt-color-weak);
   --ft-header-bg: var(--u-bg-color-raised);

package/styles/patterns.css

@@ -87,7 +87,7 @@
   border-bottom: 2px solid transparent;
   background: none;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
   color: var(--u-txt-color-weak);
   text-decoration: none;   /* a tab may be a link (`aria-current="page"`) */
@@ -114,7 +114,7 @@
   border-radius: var(--u-radius-pill, 9999px);
   background: var(--u-bg-color-raised);
   color: var(--u-txt-color-weak);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   line-height: 16px;
   font-weight: 500;
   text-align: center;
@@ -182,17 +182,17 @@
 }
 .hs-stat__unit {
   margin-inline-start: 2px;
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   font-weight: 500;
   color: var(--u-txt-color-weak);
 }
 .hs-stat__sub {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-txt-color-weaker);
 }
 .hs-stat--hero .hs-stat__value {
-  font-size: 28px;
+  font-size: var(--hs-text-hero-size, 28px);
   line-height: 34px;
   letter-spacing: -0.01em;
 }
@@ -232,7 +232,7 @@
   background: var(--u-primary-bg-color);
 }
 .hs-table-toolbar__title {
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
 }
 .hs-pager {
@@ -242,7 +242,7 @@
   gap: var(--u-space-sm, 8px);
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
   border-top: 1px solid var(--u-border-color);
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   color: var(--u-txt-color-weak);
   font-variant-numeric: tabular-nums;
 }
@@ -251,7 +251,7 @@
 .hs-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
   color: var(--u-txt-color);
 }
@@ -259,7 +259,7 @@
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
   text-align: start;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   line-height: 16px;
   font-weight: 500;
   color: var(--u-txt-color-weak);
@@ -309,7 +309,7 @@ a.hs-id:hover,
 .hs-table .hs-group td {
   height: 32px;
   background: var(--u-bg-color-raised);
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   font-weight: 600;
   color: var(--u-txt-color-weak);
 }
@@ -353,7 +353,7 @@ tr[aria-selected='true'] .hs-row-actions {
   font-weight: 600;
 }
 .hs-card__link {
-  font-size: 12px;
+  font-size: var(--u-text-label-size, 12px);
   font-weight: 500;
   color: var(--u-link-txt-color);
   text-decoration: none;
@@ -375,7 +375,7 @@ a.hs-card:hover,
   grid-template-columns: max-content minmax(0, 1fr);
   gap: 6px var(--u-space-lg, 16px);
   margin: 0;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
 }
 .hs-dl > dt { color: var(--u-txt-color-weak); }
@@ -412,7 +412,7 @@ a.hs-card:hover,
   padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
   border-radius: var(--u-radius-xl, 10px);
   background: var(--u-bg-color-raised);
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   line-height: 20px;
 }
 .hs-callout__icon { color: var(--u-txt-color-weak); line-height: 20px; }
@@ -450,7 +450,7 @@ a.hs-card:hover,
   width: 100%;
   margin: 0 0 var(--u-space-md, 12px);
   padding: 0;
-  font-size: 13px;
+  font-size: var(--hs-text-dense-size, 13px);
   font-weight: 600;
   color: var(--u-txt-color);
 }
@@ -475,12 +475,12 @@ a.hs-card:hover,
   color: var(--u-danger-color-strong);
 }
 .hs-field__help {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-txt-color-weaker);
 }
 .hs-field__error {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   line-height: 18px;
   color: var(--u-danger-color-strong);
 }
@@ -517,7 +517,7 @@ a.hs-card:hover,
   background: var(--u-bg-color);
 }
 .hs-sheet-footer__summary {
-  font-size: 12px;
+  font-size: var(--u-text-caption-size, 12px);
   color: var(--u-txt-color-weak);
 }
 .hs-sheet-footer__actions {
@@ -534,7 +534,7 @@ a.hs-card:hover,
   padding: 0 5px;
   border: 1px solid var(--u-border-color);
   border-radius: var(--u-radius-md, 4px);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   line-height: 16px;
   font-weight: 500;
   color: var(--u-txt-color-weak);
@@ -548,7 +548,7 @@ a.hs-card:hover,
   height: 18px;
   padding: 0 6px;
   border-radius: var(--u-radius-pill, 9999px);
-  font-size: 11px;
+  font-size: var(--u-text-overline-size, 11px);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   background: var(--u-bg-color-raised);

package/styles/tokens.css

@@ -140,6 +140,7 @@
   --app-sidebar-width:       232px;
   --app-sidebar-active-bg:   var(--hs-brand-soft);
   --app-sidebar-active-fg:   var(--hs-brand-ink);
+  --app-sidebar-group-active-fg: var(--hs-brand-ink);
 
   /* Brand — the application's identity colour. The house default is neutral, so an
      unbranded app looks finished; an application sets these three and nothing else. */
@@ -304,6 +305,12 @@
   --hs-row-compact: 32px;
   --hs-page-padding: 24px;
 
+  /* House type steps beyond the shared ladder — derived from it, so a rescaled ladder (density, a product system)
+     carries them along. Dense = the step between body and label (13 at 14/12): table cells, definition lists,
+     callouts. Hero = a headline figure, display + 6 (28 at 22). */
+  --hs-text-dense-size: calc((var(--u-text-body-size) + var(--u-text-label-size)) / 2);
+  --hs-text-hero-size:  calc(var(--u-text-display-size) + 6px);
+
   /* Field box (`@iyulab/components`) — 32px fields beside 32px buttons; 40px inside form sections */
   --u-field-padding-block:  4.5px;
   --u-field-padding-inline: 12px;