@handamade/psi-tokens 0.7.1 → 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dmitry Kurkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/base.css

@@ -51,6 +51,7 @@
     --psi-text-16-20-regular: 400 1rem/1.25rem var(--psi-font-sans);
     --psi-text-16-24-regular: 400 1rem/1.5rem var(--psi-font-sans);
     --psi-text-16-24-medium: 500 1rem/1.5rem var(--psi-font-sans);
+    --psi-text-18-28-regular: 400 1.125rem/1.75rem var(--psi-font-sans);
     --psi-text-18-28-medium: 500 1.125rem/1.75rem var(--psi-font-sans);
     --psi-text-20-28-semibold: 600 1.25rem/1.75rem var(--psi-font-sans);
     --psi-text-24-32-medium: 500 1.5rem/2rem var(--psi-font-sans);

package/dist/components/button.vars.css

@@ -35,5 +35,26 @@
     --psi-button-outline-fg-hover: var(--psi-button-accent-fg);
     --psi-button-outline-border: var(--psi-border-strong);
     --psi-button-focus-ring: var(--psi-border-focus);
+    --psi-button-radius: var(--psi-control-radius);
+    --psi-button-24-height: var(--psi-control-24-height);
+    --psi-button-32-height: var(--psi-control-32-height);
+    --psi-button-40-height: var(--psi-control-40-height);
+    --psi-button-48-height: var(--psi-control-48-height);
+    --psi-button-24-padding-inline: var(--psi-control-24-padding-inline);
+    --psi-button-32-padding-inline: var(--psi-control-32-padding-inline);
+    --psi-button-40-padding-inline: var(--psi-control-40-padding-inline);
+    --psi-button-48-padding-inline: var(--psi-control-48-padding-inline);
+    --psi-button-24-padding-inline-icon: var(--psi-control-24-padding-inline-icon);
+    --psi-button-32-padding-inline-icon: var(--psi-control-32-padding-inline-icon);
+    --psi-button-40-padding-inline-icon: var(--psi-control-40-padding-inline-icon);
+    --psi-button-48-padding-inline-icon: var(--psi-control-48-padding-inline-icon);
+    --psi-button-24-gap: var(--psi-control-24-gap);
+    --psi-button-32-gap: var(--psi-control-32-gap);
+    --psi-button-40-gap: var(--psi-control-40-gap);
+    --psi-button-48-gap: var(--psi-control-48-gap);
+    --psi-button-24-font: var(--psi-control-24-font);
+    --psi-button-32-font: var(--psi-control-32-font);
+    --psi-button-40-font: var(--psi-control-40-font);
+    --psi-button-48-font: var(--psi-control-48-font);
   }
 }

package/dist/components/checkbox.vars.css

@@ -5,6 +5,7 @@
     --psi-checkbox-box-border: var(--psi-border-neutral);
     --psi-checkbox-box-bg-checked: var(--psi-fill-accent);
     --psi-checkbox-box-border-checked: var(--psi-fill-accent);
+    --psi-checkbox-box-radius: min(var(--psi-control-radius), var(--psi-radius-4));
     --psi-checkbox-check-fg: var(--psi-fg-on-accent);
     --psi-checkbox-focus-ring: var(--psi-border-focus);
   }

package/dist/components/control.vars.css

@@ -0,0 +1,33 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-control-24-height: var(--psi-size-24);
+    --psi-control-32-height: var(--psi-size-32);
+    --psi-control-40-height: var(--psi-size-40);
+    --psi-control-48-height: var(--psi-size-48);
+    --psi-control-24-gap: var(--psi-space-4);
+    --psi-control-32-gap: var(--psi-space-8);
+    --psi-control-40-gap: var(--psi-space-8);
+    --psi-control-48-gap: var(--psi-space-8);
+    --psi-control-24-padding-inline: var(--psi-space-8);
+    --psi-control-32-padding-inline: var(--psi-space-12);
+    --psi-control-40-padding-inline: var(--psi-space-16);
+    --psi-control-48-padding-inline: var(--psi-space-20);
+    --psi-control-24-padding-inline-icon: var(--psi-space-6);
+    --psi-control-32-padding-inline-icon: var(--psi-space-8);
+    --psi-control-40-padding-inline-icon: var(--psi-space-12);
+    --psi-control-48-padding-inline-icon: var(--psi-space-16);
+    --psi-control-24-font: var(--psi-text-12-16-medium);
+    --psi-control-32-font: var(--psi-text-14-20-medium);
+    --psi-control-40-font: var(--psi-text-16-24-medium);
+    --psi-control-48-font: var(--psi-text-18-28-medium);
+    --psi-control-value-24-padding-inline: var(--psi-space-8);
+    --psi-control-value-32-padding-inline: var(--psi-space-8);
+    --psi-control-value-40-padding-inline: var(--psi-space-12);
+    --psi-control-value-48-padding-inline: var(--psi-space-16);
+    --psi-control-value-24-font: var(--psi-text-12-16-regular);
+    --psi-control-value-32-font: var(--psi-text-14-20-regular);
+    --psi-control-value-40-font: var(--psi-text-16-24-regular);
+    --psi-control-value-48-font: var(--psi-text-18-28-regular);
+    --psi-control-radius: var(--psi-radius-8);
+  }
+}

package/dist/components/input.vars.css

@@ -7,5 +7,18 @@
     --psi-input-border-hover: var(--psi-border-strong);
     --psi-input-border-error: var(--psi-fg-danger);
     --psi-input-focus-ring: var(--psi-border-focus);
+    --psi-input-radius: var(--psi-control-radius);
+    --psi-input-24-height: var(--psi-control-24-height);
+    --psi-input-32-height: var(--psi-control-32-height);
+    --psi-input-40-height: var(--psi-control-40-height);
+    --psi-input-48-height: var(--psi-control-48-height);
+    --psi-input-24-padding-inline: var(--psi-control-value-24-padding-inline);
+    --psi-input-32-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-input-40-padding-inline: var(--psi-control-value-40-padding-inline);
+    --psi-input-48-padding-inline: var(--psi-control-value-48-padding-inline);
+    --psi-input-24-font: var(--psi-control-value-24-font);
+    --psi-input-32-font: var(--psi-control-value-32-font);
+    --psi-input-40-font: var(--psi-control-value-40-font);
+    --psi-input-48-font: var(--psi-control-value-48-font);
   }
 }

package/dist/components/menu.vars.css

@@ -0,0 +1,15 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-menu-bg: var(--psi-surface-bg);
+    --psi-menu-border: var(--psi-surface-border);
+    --psi-menu-radius: var(--psi-surface-radius);
+    --psi-menu-fg: var(--psi-fg-primary);
+    --psi-menu-item-bg: transparent;
+    --psi-menu-item-bg-hover: var(--psi-fill-neutral3);
+    --psi-menu-item-bg-active: var(--psi-fill-neutral4);
+    --psi-menu-item-fg: var(--psi-fg-primary);
+    --psi-menu-item-fg-danger: var(--psi-fg-danger);
+    --psi-menu-item-fg-disabled: var(--psi-fg-quaternary);
+    --psi-menu-separator-border: var(--psi-border-faint);
+  }
+}

package/dist/components/select.vars.css

@@ -8,5 +8,26 @@
     --psi-select-border-error: var(--psi-fg-danger);
     --psi-select-focus-ring: var(--psi-border-focus);
     --psi-select-chevron-fg: var(--psi-fg-secondary);
+    --psi-select-radius: var(--psi-control-radius);
+    --psi-select-24-height: var(--psi-control-24-height);
+    --psi-select-32-height: var(--psi-control-32-height);
+    --psi-select-40-height: var(--psi-control-40-height);
+    --psi-select-48-height: var(--psi-control-48-height);
+    --psi-select-24-padding-inline: var(--psi-control-value-24-padding-inline);
+    --psi-select-32-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-select-40-padding-inline: var(--psi-control-value-40-padding-inline);
+    --psi-select-48-padding-inline: var(--psi-control-value-48-padding-inline);
+    --psi-select-24-font: var(--psi-control-value-24-font);
+    --psi-select-32-font: var(--psi-control-value-32-font);
+    --psi-select-40-font: var(--psi-control-value-40-font);
+    --psi-select-48-font: var(--psi-control-value-48-font);
+    --psi-select-24-chevron-offset: var(--psi-control-value-24-padding-inline);
+    --psi-select-32-chevron-offset: var(--psi-control-value-32-padding-inline);
+    --psi-select-40-chevron-offset: var(--psi-control-value-40-padding-inline);
+    --psi-select-48-chevron-offset: var(--psi-control-value-48-padding-inline);
+    --psi-select-24-padding-inline-end: calc(var(--psi-control-value-24-padding-inline) + var(--psi-space-16));
+    --psi-select-32-padding-inline-end: calc(var(--psi-control-value-32-padding-inline) + var(--psi-space-16));
+    --psi-select-40-padding-inline-end: calc(var(--psi-control-value-40-padding-inline) + var(--psi-space-16));
+    --psi-select-48-padding-inline-end: calc(var(--psi-control-value-48-padding-inline) + var(--psi-space-16));
   }
 }

package/dist/components/tooltip.vars.css

@@ -2,5 +2,6 @@
   :where(:root, [data-psi-theme]) {
     --psi-tooltip-bg: var(--psi-bg-inverted);
     --psi-tooltip-fg: var(--psi-fg-on-inverted);
+    --psi-tooltip-radius: min(var(--psi-control-radius), var(--psi-radius-6));
   }
 }

package/dist/components.css

@@ -35,6 +35,27 @@
     --psi-button-outline-fg-hover: var(--psi-button-accent-fg);
     --psi-button-outline-border: var(--psi-border-strong);
     --psi-button-focus-ring: var(--psi-border-focus);
+    --psi-button-radius: var(--psi-control-radius);
+    --psi-button-24-height: var(--psi-control-24-height);
+    --psi-button-32-height: var(--psi-control-32-height);
+    --psi-button-40-height: var(--psi-control-40-height);
+    --psi-button-48-height: var(--psi-control-48-height);
+    --psi-button-24-padding-inline: var(--psi-control-24-padding-inline);
+    --psi-button-32-padding-inline: var(--psi-control-32-padding-inline);
+    --psi-button-40-padding-inline: var(--psi-control-40-padding-inline);
+    --psi-button-48-padding-inline: var(--psi-control-48-padding-inline);
+    --psi-button-24-padding-inline-icon: var(--psi-control-24-padding-inline-icon);
+    --psi-button-32-padding-inline-icon: var(--psi-control-32-padding-inline-icon);
+    --psi-button-40-padding-inline-icon: var(--psi-control-40-padding-inline-icon);
+    --psi-button-48-padding-inline-icon: var(--psi-control-48-padding-inline-icon);
+    --psi-button-24-gap: var(--psi-control-24-gap);
+    --psi-button-32-gap: var(--psi-control-32-gap);
+    --psi-button-40-gap: var(--psi-control-40-gap);
+    --psi-button-48-gap: var(--psi-control-48-gap);
+    --psi-button-24-font: var(--psi-control-24-font);
+    --psi-button-32-font: var(--psi-control-32-font);
+    --psi-button-40-font: var(--psi-control-40-font);
+    --psi-button-48-font: var(--psi-control-48-font);
   }
 }
 
@@ -54,11 +75,46 @@
     --psi-checkbox-box-border: var(--psi-border-neutral);
     --psi-checkbox-box-bg-checked: var(--psi-fill-accent);
     --psi-checkbox-box-border-checked: var(--psi-fill-accent);
+    --psi-checkbox-box-radius: min(var(--psi-control-radius), var(--psi-radius-4));
     --psi-checkbox-check-fg: var(--psi-fg-on-accent);
     --psi-checkbox-focus-ring: var(--psi-border-focus);
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-control-24-height: var(--psi-size-24);
+    --psi-control-32-height: var(--psi-size-32);
+    --psi-control-40-height: var(--psi-size-40);
+    --psi-control-48-height: var(--psi-size-48);
+    --psi-control-24-gap: var(--psi-space-4);
+    --psi-control-32-gap: var(--psi-space-8);
+    --psi-control-40-gap: var(--psi-space-8);
+    --psi-control-48-gap: var(--psi-space-8);
+    --psi-control-24-padding-inline: var(--psi-space-8);
+    --psi-control-32-padding-inline: var(--psi-space-12);
+    --psi-control-40-padding-inline: var(--psi-space-16);
+    --psi-control-48-padding-inline: var(--psi-space-20);
+    --psi-control-24-padding-inline-icon: var(--psi-space-6);
+    --psi-control-32-padding-inline-icon: var(--psi-space-8);
+    --psi-control-40-padding-inline-icon: var(--psi-space-12);
+    --psi-control-48-padding-inline-icon: var(--psi-space-16);
+    --psi-control-24-font: var(--psi-text-12-16-medium);
+    --psi-control-32-font: var(--psi-text-14-20-medium);
+    --psi-control-40-font: var(--psi-text-16-24-medium);
+    --psi-control-48-font: var(--psi-text-18-28-medium);
+    --psi-control-value-24-padding-inline: var(--psi-space-8);
+    --psi-control-value-32-padding-inline: var(--psi-space-8);
+    --psi-control-value-40-padding-inline: var(--psi-space-12);
+    --psi-control-value-48-padding-inline: var(--psi-space-16);
+    --psi-control-value-24-font: var(--psi-text-12-16-regular);
+    --psi-control-value-32-font: var(--psi-text-14-20-regular);
+    --psi-control-value-40-font: var(--psi-text-16-24-regular);
+    --psi-control-value-48-font: var(--psi-text-18-28-regular);
+    --psi-control-radius: var(--psi-radius-8);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-dialog-bg: var(--psi-surface-bg);
@@ -89,6 +145,19 @@
     --psi-input-border-hover: var(--psi-border-strong);
     --psi-input-border-error: var(--psi-fg-danger);
     --psi-input-focus-ring: var(--psi-border-focus);
+    --psi-input-radius: var(--psi-control-radius);
+    --psi-input-24-height: var(--psi-control-24-height);
+    --psi-input-32-height: var(--psi-control-32-height);
+    --psi-input-40-height: var(--psi-control-40-height);
+    --psi-input-48-height: var(--psi-control-48-height);
+    --psi-input-24-padding-inline: var(--psi-control-value-24-padding-inline);
+    --psi-input-32-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-input-40-padding-inline: var(--psi-control-value-40-padding-inline);
+    --psi-input-48-padding-inline: var(--psi-control-value-48-padding-inline);
+    --psi-input-24-font: var(--psi-control-value-24-font);
+    --psi-input-32-font: var(--psi-control-value-32-font);
+    --psi-input-40-font: var(--psi-control-value-40-font);
+    --psi-input-48-font: var(--psi-control-value-48-font);
   }
 }
 
@@ -98,6 +167,22 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-menu-bg: var(--psi-surface-bg);
+    --psi-menu-border: var(--psi-surface-border);
+    --psi-menu-radius: var(--psi-surface-radius);
+    --psi-menu-fg: var(--psi-fg-primary);
+    --psi-menu-item-bg: transparent;
+    --psi-menu-item-bg-hover: var(--psi-fill-neutral3);
+    --psi-menu-item-bg-active: var(--psi-fill-neutral4);
+    --psi-menu-item-fg: var(--psi-fg-primary);
+    --psi-menu-item-fg-danger: var(--psi-fg-danger);
+    --psi-menu-item-fg-disabled: var(--psi-fg-quaternary);
+    --psi-menu-separator-border: var(--psi-border-faint);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-navbar-height: 4rem;
@@ -129,6 +214,27 @@
     --psi-select-border-error: var(--psi-fg-danger);
     --psi-select-focus-ring: var(--psi-border-focus);
     --psi-select-chevron-fg: var(--psi-fg-secondary);
+    --psi-select-radius: var(--psi-control-radius);
+    --psi-select-24-height: var(--psi-control-24-height);
+    --psi-select-32-height: var(--psi-control-32-height);
+    --psi-select-40-height: var(--psi-control-40-height);
+    --psi-select-48-height: var(--psi-control-48-height);
+    --psi-select-24-padding-inline: var(--psi-control-value-24-padding-inline);
+    --psi-select-32-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-select-40-padding-inline: var(--psi-control-value-40-padding-inline);
+    --psi-select-48-padding-inline: var(--psi-control-value-48-padding-inline);
+    --psi-select-24-font: var(--psi-control-value-24-font);
+    --psi-select-32-font: var(--psi-control-value-32-font);
+    --psi-select-40-font: var(--psi-control-value-40-font);
+    --psi-select-48-font: var(--psi-control-value-48-font);
+    --psi-select-24-chevron-offset: var(--psi-control-value-24-padding-inline);
+    --psi-select-32-chevron-offset: var(--psi-control-value-32-padding-inline);
+    --psi-select-40-chevron-offset: var(--psi-control-value-40-padding-inline);
+    --psi-select-48-chevron-offset: var(--psi-control-value-48-padding-inline);
+    --psi-select-24-padding-inline-end: calc(var(--psi-control-value-24-padding-inline) + var(--psi-space-16));
+    --psi-select-32-padding-inline-end: calc(var(--psi-control-value-32-padding-inline) + var(--psi-space-16));
+    --psi-select-40-padding-inline-end: calc(var(--psi-control-value-40-padding-inline) + var(--psi-space-16));
+    --psi-select-48-padding-inline-end: calc(var(--psi-control-value-48-padding-inline) + var(--psi-space-16));
   }
 }
 
@@ -181,5 +287,6 @@
   :where(:root, [data-psi-theme]) {
     --psi-tooltip-bg: var(--psi-bg-inverted);
     --psi-tooltip-fg: var(--psi-fg-on-inverted);
+    --psi-tooltip-radius: min(var(--psi-control-radius), var(--psi-radius-6));
   }
 }

package/dist/dtcg/acme.json

@@ -673,6 +673,15 @@
         "fontWeight": 500
       }
     },
+    "18-28-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 400
+      }
+    },
     "18-28-medium": {
       "$type": "typography",
       "$value": {

package/dist/dtcg/dark.json

@@ -673,6 +673,15 @@
         "fontWeight": 500
       }
     },
+    "18-28-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 400
+      }
+    },
     "18-28-medium": {
       "$type": "typography",
       "$value": {

package/dist/dtcg/ember.json

@@ -673,6 +673,15 @@
         "fontWeight": 500
       }
     },
+    "18-28-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 400
+      }
+    },
     "18-28-medium": {
       "$type": "typography",
       "$value": {

package/dist/dtcg/light.json

@@ -673,6 +673,15 @@
         "fontWeight": 500
       }
     },
+    "18-28-regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "18px",
+        "lineHeight": "28px",
+        "fontWeight": 400
+      }
+    },
     "18-28-medium": {
       "$type": "typography",
       "$value": {

package/dist/guidance.json

@@ -128,5 +128,63 @@
       "status": "success | warning | danger"
     },
     "tagApi": "On Tag, subtle is a boolean prop, not part of the variant union: accent-subtle is spelled variant=\"accent\" subtle (Tag variants: neutral | accent | success | warning | danger)."
+  },
+  "geometry": {
+    "sizes": [
+      24,
+      32,
+      40,
+      48
+    ],
+    "label": {
+      "paddingInline": [
+        8,
+        12,
+        16,
+        20
+      ],
+      "paddingInlineIcon": [
+        6,
+        8,
+        12,
+        16
+      ],
+      "gap": [
+        4,
+        8,
+        8,
+        8
+      ],
+      "font": [
+        "12-16-medium",
+        "14-20-medium",
+        "16-24-medium",
+        "18-28-medium"
+      ]
+    },
+    "value": {
+      "paddingInline": [
+        8,
+        8,
+        12,
+        16
+      ],
+      "font": [
+        "12-16-regular",
+        "14-20-regular",
+        "16-24-regular",
+        "18-28-regular"
+      ]
+    },
+    "components": {
+      "Button": "label",
+      "IconButton": "height-only",
+      "Input": "value",
+      "Select": "value"
+    },
+    "note": "Per-size geometry is data, not CSS literals (D54). Arrays are indexed by sizes[]. Read a value as --psi-control-{size}-{prop} for the label ramp and --psi-control-value-{size}-{prop} for the value ramp; components alias these as --psi-{component}-{size}-{prop}, which is the layer to override. The value ramp is one step tighter than the label ramp because a left-aligned value wants less air than a centred label (D55).",
+    "iconInset": "A leading icon sits one step closer to the edge than text — an icon is a solid shape with no side bearing (D55). Applied by .size{n}:has(> svg:first-child) on Button. IconButton is height-only: it is square with padding 0, so no padding/gap/font token applies to it.",
+    "iconInsetLimits": "The selector matches on element order, and :first-child ignores text nodes. Two consequences. (1) An icon wrapped in a <span> never matches — fails safe, no inset; set --psi-button-{size}-padding-inline-icon yourself. (2) A TRAILING icon (<Button>Next<IconChevronRight /></Button>) makes the svg the first ELEMENT child, so the rule fires and narrows the start (text) side while the icon keeps full padding — the inverse of the intent. CSS cannot tell the two apart without a DOM signal. Put the icon first, or override --psi-button-{size}-padding-inline-icon to match --psi-button-{size}-padding-inline to disable the inset.",
+    "radius": "Control radius is size-invariant (D56) — it does NOT ride the size ramp, because border-radius sits on each component's base rule and all four sizes resolve to radius-8. One dial, --psi-control-radius, is the layer to override, aliased per component: --psi-button-radius (Button, and IconButton via the same token), --psi-input-radius, --psi-select-radius, --psi-checkbox-box-radius, and --psi-tooltip-radius. Checkbox and Tooltip cap themselves with min(var(--psi-control-radius), var(--psi-radius-4)) and min(…, var(--psi-radius-6)) respectively so neither over-rounds a small object — but the published radius scale's floor is radius-4, so Checkbox's cap is a no-op for every on-scale value a theme can set; it only bites at an off-scale value like 0px. Tooltip's higher ceiling does track a sharper theme, down to radius-4. Tag and Switch stay --psi-radius-full: pill-ness is component identity, not theme expression. A theme retunes every control's shape by setting --psi-control-radius once. Psi now has two radius dials, not one: --psi-control-radius (here, for interactive controls) and --psi-surface-radius (for elevated surfaces — Dialog, Panel, Menu). --psi-card-radius sits on neither dial, so a theme that retunes controls or surfaces leaves Card at its own default of radius-8."
   }
 }

package/dist/resolved/acme.json

@@ -629,6 +629,13 @@
       "weight": "medium",
       "cssWeight": 500
     },
+    {
+      "name": "18-28-regular",
+      "fontSize": 18,
+      "lineHeight": 28,
+      "weight": "regular",
+      "cssWeight": 400
+    },
     {
       "name": "18-28-medium",
       "fontSize": 18,

package/dist/resolved/dark.json

@@ -629,6 +629,13 @@
       "weight": "medium",
       "cssWeight": 500
     },
+    {
+      "name": "18-28-regular",
+      "fontSize": 18,
+      "lineHeight": 28,
+      "weight": "regular",
+      "cssWeight": 400
+    },
     {
       "name": "18-28-medium",
       "fontSize": 18,

package/dist/resolved/ember.json

@@ -629,6 +629,13 @@
       "weight": "medium",
       "cssWeight": 500
     },
+    {
+      "name": "18-28-regular",
+      "fontSize": 18,
+      "lineHeight": 28,
+      "weight": "regular",
+      "cssWeight": 400
+    },
     {
       "name": "18-28-medium",
       "fontSize": 18,

package/dist/resolved/light.json

@@ -629,6 +629,13 @@
       "weight": "medium",
       "cssWeight": 500
     },
+    {
+      "name": "18-28-regular",
+      "fontSize": 18,
+      "lineHeight": 28,
+      "weight": "regular",
+      "cssWeight": 400
+    },
     {
       "name": "18-28-medium",
       "fontSize": 18,

package/dist/scope-map.json

@@ -9,7 +9,8 @@
     ],
     "surface": [
       "background",
-      "background-color"
+      "background-color",
+      "accent-color"
     ],
     "border": [
       "border",
@@ -350,6 +351,36 @@
     "input-border-error": [
       "border"
     ],
+    "menu-bg": [
+      "surface"
+    ],
+    "menu-border": [
+      "border"
+    ],
+    "menu-fg": [
+      "text"
+    ],
+    "menu-item-bg": [
+      "surface"
+    ],
+    "menu-item-bg-hover": [
+      "surface"
+    ],
+    "menu-item-bg-active": [
+      "surface"
+    ],
+    "menu-item-fg": [
+      "text"
+    ],
+    "menu-item-fg-danger": [
+      "text"
+    ],
+    "menu-item-fg-disabled": [
+      "text"
+    ],
+    "menu-separator-border": [
+      "border"
+    ],
     "navbar-bg": [
       "surface"
     ],

package/dist/utilities.css

@@ -128,6 +128,7 @@
   .psi-text-16-20-regular { font: var(--psi-text-16-20-regular); }
   .psi-text-16-24-regular { font: var(--psi-text-16-24-regular); }
   .psi-text-16-24-medium { font: var(--psi-text-16-24-medium); }
+  .psi-text-18-28-regular { font: var(--psi-text-18-28-regular); }
   .psi-text-18-28-medium { font: var(--psi-text-18-28-medium); }
   .psi-text-20-28-semibold { font: var(--psi-text-20-28-semibold); }
   .psi-text-24-32-medium { font: var(--psi-text-24-32-medium); }

package/llms.txt

@@ -14,7 +14,7 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
 - Override --psi-{component}-* tokens for one-off component theming; never fork semantic tokens.
 - Scales are pixel-true: --psi-space-8 is 8px (0.5rem). Typography: --psi-text-{size}-{lh}-{weight}.
 - Themes: import base.css + {theme}.css + components.css + utilities.css; set data-psi-theme="{name}" ({light,dark,acme,ember}).
-- Scoped tokens bind only their declared property groups (D46): fg* → text properties, bg*/fill*/scrim* → surfaces, border* → borders, --psi-space-* → gaps/padding/margin. Cross-family bindings that are design decisions carry both scopes (fgDanger: text+border for error borders; fillAccent: surface+border for selected controls). The token build enforces component bindings; stylelint (psi/token-scopes) enforces consumer CSS.
+- Scoped tokens bind only their declared property groups (D46): fg* → text properties, bg*/fill*/scrim* → surfaces, border* → borders, --psi-space-* → gaps/padding/margin. Cross-family bindings that are design decisions carry both scopes (fgDanger: text+border for error borders; fillAccent: surface+border for selected controls). The token build enforces component bindings; the repo's stylelint rule (psi/token-scopes) enforces first-party consumer CSS (component modules + apps/). External consumers aren't gated automatically — dist/scope-map.json carries the machine-readable scopes to lint against.
 
 ## Motion (--psi-duration-*, --psi-ease-*)
 - Durations: 150/200/350/450/600ms. Easings: --psi-ease-standard, --psi-ease-in-out, --psi-ease-soft.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@handamade/psi-tokens",
-  "version": "0.7.1",
+  "version": "0.8.0",
+  "license": "MIT",
   "type": "module",
   "exports": {
     "./*.css": "./dist/*.css",