@hirobius/design-system 0.24.0 → 0.24.1

package/dist/types/src/index.d.ts

@@ -384,7 +384,6 @@ export declare const tokens: {
                 $description: string;
             };
             stone: {
-                $description: string;
                 "100": {
                     $value: string;
                     $description: string;
@@ -417,6 +416,7 @@ export declare const tokens: {
                     $value: string;
                     $description: string;
                 };
+                $description: string;
             };
             projectBrand: {
                 microsoftGameDev: {
@@ -1023,34 +1023,34 @@ export declare const tokens: {
                     };
                     $description: string;
                 };
-                "760": {
+                "280": {
                     $type: string;
                     $value: {
                         value: number;
                         unit: string;
                     };
+                    $description: string;
                 };
-                "1200": {
+                "760": {
                     $type: string;
                     $value: {
                         value: number;
                         unit: string;
                     };
                 };
-                "50ch": {
+                "1200": {
                     $type: string;
                     $value: {
                         value: number;
                         unit: string;
                     };
                 };
-                "280": {
+                "50ch": {
                     $type: string;
                     $value: {
                         value: number;
                         unit: string;
                     };
-                    $description: string;
                 };
             };
         };

package/dist/variables.css

@@ -410,8 +410,8 @@
   --component-nav-height: var(--primitive-space-16);
   --component-nav-paddingX: var(--primitive-space-6);
   --component-nav-paddingY: var(--primitive-space-2);
-  --component-tag-background: var(--semantic-accent-subtle);
-  --component-tag-text: var(--semantic-color-content-primary);
+  --component-tag-background: var(--semantic-color-surface-raised);
+  --component-tag-text: var(--semantic-color-content-secondary);
   --component-tag-border: var(--semantic-color-border-default);
   --component-tag-radius: var(--primitive-radius-full);
   --component-tag-fontSize: var(--primitive-typography-size-xs);
@@ -439,47 +439,47 @@
   --component-button-text: var(--semantic-color-content-onAccent);
   --component-button-radius: var(--semantic-radius-action);
   --component-button-paddingX: var(--primitive-space-4);
-  --component-button-paddingY: var(--primitive-space-3);
-  --component-button-size-sm-paddingX: var(--primitive-space-2);
+  --component-button-paddingY: var(--primitive-space-2);
+  --component-button-size-sm-paddingX: var(--primitive-space-3);
   --component-button-size-sm-paddingY: var(--primitive-space-1);
   --component-button-size-sm-fontSize: var(--primitive-typography-size-xs);
   --component-button-size-sm-iconSize: var(--primitive-size-12);
-  --component-button-size-sm-height: var(--primitive-space-7);
-  --component-button-size-sm-itemSpacing: var(--primitive-space-1);
+  --component-button-size-sm-height: var(--primitive-size-32);
+  --component-button-size-sm-itemSpacing: var(--primitive-space-2);
   --component-button-size-md-paddingX: var(--primitive-space-4);
-  --component-button-size-md-paddingY: var(--primitive-space-3);
+  --component-button-size-md-paddingY: var(--primitive-space-2);
   --component-button-size-md-fontSize: var(--primitive-typography-size-sm);
   --component-button-size-md-iconSize: var(--primitive-size-16);
   --component-button-size-md-height: var(--primitive-size-40);
   --component-button-size-md-itemSpacing: var(--primitive-space-2);
   --component-button-size-lg-paddingX: var(--primitive-space-6);
   --component-button-size-lg-paddingY: var(--primitive-space-4);
-  --component-button-size-lg-fontSize: var(--primitive-typography-size-base);
+  --component-button-size-lg-fontSize: var(--primitive-typography-size-sm);
   --component-button-size-lg-iconSize: var(--primitive-size-20);
   --component-button-size-lg-height: var(--primitive-size-48);
   --component-button-size-lg-itemSpacing: var(--primitive-space-2);
   --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
   --component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
   --component-button-secondary-bg-rest: var(--semantic-color-surface-page);
-  --component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
+  --component-button-secondary-bg-hover: var(--semantic-color-surface-accentSubtle);
   --component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
   --component-button-secondary-border-rest: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-hover: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-pressed: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
+  --component-button-secondary-border-hover: var(--semantic-color-border-accent);
+  --component-button-secondary-border-pressed: var(--semantic-color-border-accent);
+  --component-button-secondary-border-disabled: var(--semantic-color-border-interactive);
   --component-button-secondary-text: var(--semantic-color-content-primary);
-  --component-input-bg: var(--semantic-color-surface-raised);
+  --component-input-bg: var(--semantic-color-surface-page);
   --component-input-text: var(--semantic-color-content-primary);
   --component-input-border: var(--semantic-color-border-interactive);
   --component-input-borderError: var(--semantic-color-feedback-error);
   --component-input-radius: var(--semantic-radius-action);
-  --component-input-paddingX: var(--primitive-space-4);
+  --component-input-paddingX: var(--primitive-space-3);
   --component-input-paddingY: var(--primitive-space-3);
   --component-card-bg: var(--semantic-color-surface-raised);
   --component-card-border: var(--semantic-color-border-default);
-  --component-card-radius: var(--primitive-radius-8);
+  --component-card-radius: var(--primitive-radius-12);
   --component-card-padding: var(--primitive-space-6);
-  --component-card-gap: var(--primitive-space-2);
+  --component-card-gap: var(--semantic-space-scale-sm);
   --component-lightbox-backdrop-blur: var(--primitive-blur-16);
 
   /* ── Role aliases (shadcn vocabulary) ──────────────────────────────────── */
@@ -569,8 +569,8 @@
   --component-nav-borderActive: var(--semantic-color-surface-accent);
   --component-nav-text: var(--semantic-color-content-secondary);
   --component-nav-textActive: var(--semantic-color-content-primary);
-  --component-tag-background: var(--semantic-accent-subtle);
-  --component-tag-text: var(--semantic-color-content-primary);
+  --component-tag-background: var(--semantic-color-surface-raised);
+  --component-tag-text: var(--semantic-color-content-secondary);
   --component-tag-border: var(--semantic-color-border-default);
   --component-tag-activeText: var(--semantic-color-content-onAccent);
   --component-tag-activeBackground: var(--semantic-accent-rest);
@@ -583,14 +583,14 @@
   --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
   --component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
   --component-button-secondary-bg-rest: var(--semantic-color-surface-page);
-  --component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
+  --component-button-secondary-bg-hover: var(--semantic-color-surface-accentSubtle);
   --component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
   --component-button-secondary-border-rest: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-hover: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-pressed: var(--semantic-color-border-interactive);
-  --component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
+  --component-button-secondary-border-hover: var(--semantic-color-border-accent);
+  --component-button-secondary-border-pressed: var(--semantic-color-border-accent);
+  --component-button-secondary-border-disabled: var(--semantic-color-border-interactive);
   --component-button-secondary-text: var(--semantic-color-content-primary);
-  --component-input-bg: var(--semantic-color-surface-raised);
+  --component-input-bg: var(--semantic-color-surface-page);
   --component-input-text: var(--semantic-color-content-primary);
   --component-input-border: var(--semantic-color-border-interactive);
   --component-input-borderError: var(--semantic-color-feedback-error);

package/hirobius.tokens.json

@@ -329,7 +329,6 @@
         "$description": "Discrete values within the amber range at defined lightness steps."
       },
       "stone": {
-        "$description": "Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work.",
         "100": {
           "$value": "#F5EFE7",
           "$description": "Stone 100 — near-white warm tint; accent-subtle surface."
@@ -361,7 +360,8 @@
         "950": {
           "$value": "#3A2E1F",
           "$description": "Stone 950 — near-black warm tone; dark-mode subtle accent surface."
-        }
+        },
+        "$description": "Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work."
       },
       "projectBrand": {
         "microsoftGameDev": {
@@ -982,6 +982,14 @@
           },
           "$description": "96px width step."
         },
+        "280": {
+          "$type": "dimension",
+          "$value": {
+            "value": 280,
+            "unit": "px"
+          },
+          "$description": "Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."
+        },
         "760": {
           "$type": "dimension",
           "$value": {
@@ -1002,14 +1010,6 @@
             "value": 50,
             "unit": "ch"
           }
-        },
-        "280": {
-          "$type": "dimension",
-          "$value": {
-            "value": 280,
-            "unit": "px"
-          },
-          "$description": "Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."
         }
       }
     },
@@ -2261,13 +2261,13 @@
     "tag": {
       "background": {
         "$type": "color",
-        "$value": "{semantic.accent.subtle}",
-        "$description": "Base tag surface color."
+        "$value": "{semantic.color.surface.raised}",
+        "$description": "Unselected tag surface color (matches the rendered pill; the active fill is activeBackground)."
       },
       "text": {
         "$type": "color",
-        "$value": "{semantic.color.content.primary}",
-        "$description": "Default tag text color."
+        "$value": "{semantic.color.content.secondary}",
+        "$description": "Unselected tag text color (the active label uses activeText)."
       },
       "border": {
         "$type": "color",
@@ -2418,15 +2418,15 @@
       },
       "paddingY": {
         "$type": "dimension",
-        "$value": "{primitive.space.3}",
-        "$description": "Vertical button padding."
+        "$value": "{primitive.space.2}",
+        "$description": "Vertical button padding (8px, the md size; legacy flat alias of size.md.paddingY)."
       },
       "size": {
         "sm": {
           "paddingX": {
             "$type": "dimension",
-            "$value": "{primitive.space.2}",
-            "$description": "Small button horizontal padding (8px)."
+            "$value": "{primitive.space.3}",
+            "$description": "Small button horizontal padding (12px)."
           },
           "paddingY": {
             "$type": "dimension",
@@ -2445,13 +2445,13 @@
           },
           "height": {
             "$type": "dimension",
-            "$value": "{primitive.space.7}",
-            "$description": "Small button height (28px)."
+            "$value": "{primitive.size.32}",
+            "$description": "Small button height (32px)."
           },
           "itemSpacing": {
             "$type": "dimension",
-            "$value": "{primitive.space.1}",
-            "$description": "Small button icon-to-label gap (4px)."
+            "$value": "{primitive.space.2}",
+            "$description": "Small button icon-to-label gap (8px)."
           }
         },
         "md": {
@@ -2462,8 +2462,8 @@
           },
           "paddingY": {
             "$type": "dimension",
-            "$value": "{primitive.space.3}",
-            "$description": "Medium button vertical padding (12px)."
+            "$value": "{primitive.space.2}",
+            "$description": "Medium button vertical padding (8px; the 40px height drives the box)."
           },
           "fontSize": {
             "$type": "dimension",
@@ -2499,8 +2499,8 @@
           },
           "fontSize": {
             "$type": "dimension",
-            "$value": "{primitive.typography.size.base}",
-            "$description": "Large button label size (16px, hds#283: was 17px)."
+            "$value": "{primitive.typography.size.sm}",
+            "$description": "Large button label size (14px, the same hds-type-ui role as md)."
           },
           "iconSize": {
             "$type": "dimension",
@@ -2540,7 +2540,7 @@
           },
           "hover": {
             "$type": "color",
-            "$value": "{semantic.color.surface.raised}",
+            "$value": "{semantic.color.surface.accentSubtle}",
             "$description": "Secondary button hover fill."
           },
           "pressed": {
@@ -2557,18 +2557,18 @@
           },
           "hover": {
             "$type": "color",
-            "$value": "{semantic.color.border.interactive}",
+            "$value": "{semantic.color.border.accent}",
             "$description": "Secondary button hover border."
           },
           "pressed": {
             "$type": "color",
-            "$value": "{semantic.color.border.interactive}",
-            "$description": "Secondary button pressed border."
+            "$value": "{semantic.color.border.accent}",
+            "$description": "Secondary button pressed border (the hover border still applies while pressed)."
           },
           "disabled": {
             "$type": "color",
-            "$value": "{semantic.color.border.subdued}",
-            "$description": "Secondary button disabled border."
+            "$value": "{semantic.color.border.interactive}",
+            "$description": "Secondary button disabled border (no disabled border class: the rest border stays)."
           }
         },
         "text": {
@@ -2581,7 +2581,7 @@
     "input": {
       "bg": {
         "$type": "color",
-        "$value": "{semantic.color.surface.raised}"
+        "$value": "{semantic.color.surface.page}"
       },
       "text": {
         "$type": "color",
@@ -2601,7 +2601,7 @@
       },
       "paddingX": {
         "$type": "dimension",
-        "$value": "{primitive.space.4}"
+        "$value": "{primitive.space.3}"
       },
       "paddingY": {
         "$type": "dimension",
@@ -2619,7 +2619,7 @@
       },
       "radius": {
         "$type": "dimension",
-        "$value": "{primitive.radius.8}"
+        "$value": "{primitive.radius.12}"
       },
       "padding": {
         "$type": "dimension",
@@ -2627,7 +2627,7 @@
       },
       "gap": {
         "$type": "dimension",
-        "$value": "{primitive.space.2}"
+        "$value": "{semantic.space.scale.sm}"
       }
     },
     "lightbox": {

package/package.json

@@ -19,7 +19,7 @@
   "author": "Adrian Milsap",
   "license": "MIT AND OFL-1.1",
   "private": false,
-  "version": "0.24.0",
+  "version": "0.24.1",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8"

package/public/hds-manifest.json

@@ -2,7 +2,7 @@
   "name": "Hirobius Design System",
   "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
   "version": "1",
-  "generated": "2026-10-11T21:00:30.237Z",
+  "generated": "2026-10-12T02:29:50.977Z",
   "source": "hirobius.tokens.json",
   "format": "W3C DTCG 2025.10",
   "docs": "https://hirobius-hds-components.vercel.app/",
@@ -10676,17 +10676,17 @@
         "path": "component.tag.background",
         "cssVar": "--component-tag-background",
         "type": "color",
-        "description": "Base tag surface color.",
-        "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "#f5f4f4"
+        "description": "Unselected tag surface color (matches the rendered pill; the active fill is activeBackground).",
+        "alias": "{semantic.color.surface.raised}",
+        "resolvedValue": "#fafafa"
       },
       {
         "path": "component.tag.text",
         "cssVar": "--component-tag-text",
         "type": "color",
-        "description": "Default tag text color.",
-        "alias": "{semantic.color.content.primary}",
-        "resolvedValue": "#111111"
+        "description": "Unselected tag text color (the active label uses activeText).",
+        "alias": "{semantic.color.content.secondary}",
+        "resolvedValue": "#525252"
       },
       {
         "path": "component.tag.border",
@@ -10912,17 +10912,17 @@
         "path": "component.button.paddingY",
         "cssVar": "--component-button-paddingY",
         "type": "dimension",
-        "description": "Vertical button padding.",
-        "alias": "{primitive.space.3}",
-        "resolvedValue": "12px"
+        "description": "Vertical button padding (8px, the md size; legacy flat alias of size.md.paddingY).",
+        "alias": "{primitive.space.2}",
+        "resolvedValue": "8px"
       },
       {
         "path": "component.button.size.sm.paddingX",
         "cssVar": "--component-button-size-sm-paddingX",
         "type": "dimension",
-        "description": "Small button horizontal padding (8px).",
-        "alias": "{primitive.space.2}",
-        "resolvedValue": "8px"
+        "description": "Small button horizontal padding (12px).",
+        "alias": "{primitive.space.3}",
+        "resolvedValue": "12px"
       },
       {
         "path": "component.button.size.sm.paddingY",
@@ -10952,17 +10952,17 @@
         "path": "component.button.size.sm.height",
         "cssVar": "--component-button-size-sm-height",
         "type": "dimension",
-        "description": "Small button height (28px).",
-        "alias": "{primitive.space.7}",
-        "resolvedValue": "28px"
+        "description": "Small button height (32px).",
+        "alias": "{primitive.size.32}",
+        "resolvedValue": "32px"
       },
       {
         "path": "component.button.size.sm.itemSpacing",
         "cssVar": "--component-button-size-sm-itemSpacing",
         "type": "dimension",
-        "description": "Small button icon-to-label gap (4px).",
-        "alias": "{primitive.space.1}",
-        "resolvedValue": "4px"
+        "description": "Small button icon-to-label gap (8px).",
+        "alias": "{primitive.space.2}",
+        "resolvedValue": "8px"
       },
       {
         "path": "component.button.size.md.paddingX",
@@ -10976,9 +10976,9 @@
         "path": "component.button.size.md.paddingY",
         "cssVar": "--component-button-size-md-paddingY",
         "type": "dimension",
-        "description": "Medium button vertical padding (12px).",
-        "alias": "{primitive.space.3}",
-        "resolvedValue": "12px"
+        "description": "Medium button vertical padding (8px; the 40px height drives the box).",
+        "alias": "{primitive.space.2}",
+        "resolvedValue": "8px"
       },
       {
         "path": "component.button.size.md.fontSize",
@@ -11032,9 +11032,9 @@
         "path": "component.button.size.lg.fontSize",
         "cssVar": "--component-button-size-lg-fontSize",
         "type": "dimension",
-        "description": "Large button label size (16px, hds#283: was 17px).",
-        "alias": "{primitive.typography.size.base}",
-        "resolvedValue": "16px"
+        "description": "Large button label size (14px, the same hds-type-ui role as md).",
+        "alias": "{primitive.typography.size.sm}",
+        "resolvedValue": "14px"
       },
       {
         "path": "component.button.size.lg.iconSize",
@@ -11089,8 +11089,8 @@
         "cssVar": "--component-button-secondary-bg-hover",
         "type": "color",
         "description": "Secondary button hover fill.",
-        "alias": "{semantic.color.surface.raised}",
-        "resolvedValue": "#fafafa"
+        "alias": "{semantic.color.surface.accentSubtle}",
+        "resolvedValue": "#f5f4f4"
       },
       {
         "path": "component.button.secondary.bg.pressed",
@@ -11113,24 +11113,24 @@
         "cssVar": "--component-button-secondary-border-hover",
         "type": "color",
         "description": "Secondary button hover border.",
-        "alias": "{semantic.color.border.interactive}",
-        "resolvedValue": "#737373"
+        "alias": "{semantic.color.border.accent}",
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.button.secondary.border.pressed",
         "cssVar": "--component-button-secondary-border-pressed",
         "type": "color",
-        "description": "Secondary button pressed border.",
-        "alias": "{semantic.color.border.interactive}",
-        "resolvedValue": "#737373"
+        "description": "Secondary button pressed border (the hover border still applies while pressed).",
+        "alias": "{semantic.color.border.accent}",
+        "resolvedValue": "#433a3f"
       },
       {
         "path": "component.button.secondary.border.disabled",
         "cssVar": "--component-button-secondary-border-disabled",
         "type": "color",
-        "description": "Secondary button disabled border.",
-        "alias": "{semantic.color.border.subdued}",
-        "resolvedValue": "#e5e5e5"
+        "description": "Secondary button disabled border (no disabled border class: the rest border stays).",
+        "alias": "{semantic.color.border.interactive}",
+        "resolvedValue": "#737373"
       },
       {
         "path": "component.button.secondary.text",
@@ -11144,8 +11144,8 @@
         "path": "component.input.bg",
         "cssVar": "--component-input-bg",
         "type": "color",
-        "alias": "{semantic.color.surface.raised}",
-        "resolvedValue": "#fafafa"
+        "alias": "{semantic.color.surface.page}",
+        "resolvedValue": "#ffffff"
       },
       {
         "path": "component.input.text",
@@ -11179,8 +11179,8 @@
         "path": "component.input.paddingX",
         "cssVar": "--component-input-paddingX",
         "type": "dimension",
-        "alias": "{primitive.space.4}",
-        "resolvedValue": "16px"
+        "alias": "{primitive.space.3}",
+        "resolvedValue": "12px"
       },
       {
         "path": "component.input.paddingY",
@@ -11207,8 +11207,8 @@
         "path": "component.card.radius",
         "cssVar": "--component-card-radius",
         "type": "dimension",
-        "alias": "{primitive.radius.8}",
-        "resolvedValue": "8px"
+        "alias": "{primitive.radius.12}",
+        "resolvedValue": "12px"
       },
       {
         "path": "component.card.padding",
@@ -11221,8 +11221,8 @@
         "path": "component.card.gap",
         "cssVar": "--component-card-gap",
         "type": "dimension",
-        "alias": "{primitive.space.2}",
-        "resolvedValue": "8px"
+        "alias": "{semantic.space.scale.sm}",
+        "resolvedValue": "16px"
       },
       {
         "path": "component.lightbox.backdrop.blur",

package/src/app/data/component-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-12T02:43:04.207Z",
+  "generatedAt": "2026-10-12T03:53:49.234Z",
   "source": "react-docgen-typescript@2.4.0",
   "components": {
     "Alert": {

package/upgrade/index.json

@@ -1,6 +1,6 @@
 {
   "package": "@hirobius/design-system",
-  "latest": "0.24.0",
+  "latest": "0.24.1",
   "floor": "0.16.0",
   "versions": [
     {
@@ -79,6 +79,13 @@
       "bump": "minor",
       "breaking": 11,
       "summary": "11 changes to make by hand (11 breaking) and 24 that look different."
+    },
+    {
+      "version": "0.24.1",
+      "date": "2026-10-12",
+      "bump": "patch",
+      "breaking": 0,
+      "summary": "16 that look different."
     }
   ],
   "deprecated": [