@nordmanai/nif 0.2.8 → 0.2.9

package/dist/ui/config/nm-appearance.d.ts

@@ -60,6 +60,17 @@ export declare const NM_UI_SPACE_PERCENT: {
     readonly max: 125;
     readonly default: 100;
 };
+/**
+ * How visible the borders are. Every border colour in the kit is mixed through one strength, so default is the kit as
+ * drawn, subtle is barely there, and none removes them. Geometry does not change: the border turns transparent and keeps
+ * its width. Fills and tracks that share the line colours are untouched, and so are state borders: focus, selection, checked and
+ * error keep their colour.
+ */
+export declare const NM_BORDER_STYLES: readonly ['default', 'subtle', 'none'];
+export type NmBorderStyle = (typeof NM_BORDER_STYLES)[number];
+export declare const NM_BORDER_STRENGTH: Record<NmBorderStyle, string>;
+/** Set on the root beside the tokens, so a product can style a state without the appearance script: `:root[data-nm-borders="none"]`. */
+export declare const NM_BORDER_ATTRIBUTE: 'data-nm-borders';
 export declare const NM_APPEARANCE_CONTRAST: {
     readonly min: 0;
     readonly max: 100;
@@ -94,7 +105,8 @@ export declare const NM_APPEARANCE_DEFAULTS: {
     readonly uiRadiusPercent: 100;
     readonly uiSpacePercent: 100;
     readonly contrast: 0;
+    readonly borders: NmBorderStyle;
 };
-export declare const NM_APPEARANCE_CSS_VARS: readonly ['--nm-canvas', '--nm-fg', '--nm-fg-muted', '--nm-fg-subtle', '--nm-stroke', '--nm-line', '--nm-line-strong', '--nm-divider', '--control-fs', '--nm-panel', '--nm-raised', '--nm-inset', '--nm-mark-primary', '--nm-mark-secondary', '--nm-mark-tertiary', '--nm-mark-surface', '--nm-canvas-rgb', '--nm-fg-rgb', '--nm-fg-muted-rgb', '--nm-fg-subtle-rgb', '--nm-stroke-rgb', '--nm-line-rgb', '--nm-panel-rgb', '--nm-raised-rgb', '--nm-inset-rgb', '--sand', '--nm-accent', '--nm-accent-rgb', '--orb-ui-cloud-appearance-deepColor', '--orb-ui-cloud-appearance-upperColor', '--orb-ui-cloud-appearance-lowerColor', '--orb-ui-cloud-appearance-highlightColor', '--orb-ui-cloud-appearance-launchColor', '--orb-ui-cloud-appearance-spinnerColor', '--nm-weight-light', '--nm-weight-regular', '--nm-weight-medium', '--nm-weight-semibold', '--nm-weight-bold', '--nm-type-body', '--nm-type-ui', '--nm-type-ui-sm', '--nm-type-lede', '--nm-type-section', '--nm-type-card', '--nm-type-caption', '--markdown-font-size', '--font-size-base', '--font-size-sm', '--nm-icon-button', '--nm-icon-sm', '--nm-rail-icon', '--nm-ui-chip-min-height', '--nm-radius-scale', '--nm-space-scale', '--text-primary', '--text-secondary', '--text-tertiary', '--text-muted', '--presentation', '--surface-primary', '--surface-chat', '--surface-secondary', '--surface-secondary-alt', '--surface-tertiary', '--surface-primary-alt', '--surface-dialog', '--surface-hover', '--surface-active', '--border-light', '--border-medium', '--link', '--link-hover', '--link-visited', '--accent-primary', '--ring-primary', '--brand-purple', '--nordman-accent'];
+export declare const NM_APPEARANCE_CSS_VARS: readonly ['--nm-canvas', '--nm-fg', '--nm-fg-muted', '--nm-fg-subtle', '--nm-stroke', '--nm-line', '--nm-line-strong', '--nm-divider', '--control-fs', '--nm-panel', '--nm-raised', '--nm-inset', '--nm-mark-primary', '--nm-mark-secondary', '--nm-mark-tertiary', '--nm-mark-surface', '--nm-canvas-rgb', '--nm-fg-rgb', '--nm-fg-muted-rgb', '--nm-fg-subtle-rgb', '--nm-stroke-rgb', '--nm-line-rgb', '--nm-panel-rgb', '--nm-raised-rgb', '--nm-inset-rgb', '--sand', '--nm-accent', '--nm-accent-rgb', '--orb-ui-cloud-appearance-deepColor', '--orb-ui-cloud-appearance-upperColor', '--orb-ui-cloud-appearance-lowerColor', '--orb-ui-cloud-appearance-highlightColor', '--orb-ui-cloud-appearance-launchColor', '--orb-ui-cloud-appearance-spinnerColor', '--nm-weight-light', '--nm-weight-regular', '--nm-weight-medium', '--nm-weight-semibold', '--nm-weight-bold', '--nm-type-body', '--nm-type-ui', '--nm-type-ui-sm', '--nm-type-lede', '--nm-type-section', '--nm-type-card', '--nm-type-caption', '--markdown-font-size', '--font-size-base', '--font-size-sm', '--nm-icon-button', '--nm-icon-sm', '--nm-rail-icon', '--nm-ui-chip-min-height', '--nm-radius-scale', '--nm-space-scale', '--nm-border-strength', '--text-primary', '--text-secondary', '--text-tertiary', '--text-muted', '--presentation', '--surface-primary', '--surface-chat', '--surface-secondary', '--surface-secondary-alt', '--surface-tertiary', '--surface-primary-alt', '--surface-dialog', '--surface-hover', '--surface-active', '--border-light', '--border-medium', '--link', '--link-hover', '--link-visited', '--accent-primary', '--ring-primary', '--brand-purple', '--nordman-accent'];
 export declare function findThemePreset(id: string): NmThemePresetDefinition | undefined;
 export declare function defaultThemePresetId(): string;

package/dist/ui/lib/appearance/appearanceState.d.ts

@@ -1,4 +1,4 @@
-import { NM_APPEARANCE_STORAGE_KEY, type NmAccentPreset, type NmAppearanceMode } from '../../config/nm-appearance.ts';
+import { NM_APPEARANCE_STORAGE_KEY, type NmAccentPreset, type NmAppearanceMode, type NmBorderStyle } from '../../config/nm-appearance.ts';
 export type NmAppearanceState = {
     mode: NmAppearanceMode;
     themePresetId: string;
@@ -12,6 +12,7 @@ export type NmAppearanceState = {
     uiRadiusPercent: number;
     uiSpacePercent: number;
     contrast: number;
+    borders: NmBorderStyle;
 };
 export { NM_APPEARANCE_STORAGE_KEY };
 export declare function resolveAppearanceScheme(mode: NmAppearanceMode, prefersDark?: boolean): 'light' | 'dark';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.8",
+  "version": "0.2.9",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

package/registry/ui/components/nm-ai/nm-ai.css

@@ -50,7 +50,7 @@
     box-sizing: border-box;
     width: 100%;
     padding: var(--nm-space-12);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -94,7 +94,7 @@
     gap: var(--nm-space-12);
     width: 100%;
     padding: var(--nm-panel-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);
@@ -248,7 +248,7 @@
     flex-shrink: 0;
     height: var(--control-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--toggle-r);
     background: transparent;
     color: var(--nm-fg);

package/registry/ui/components/nm-alert/nm-alert.css

@@ -6,7 +6,7 @@
     row-gap: var(--nm-space-4);
     align-items: start;
     padding: var(--nm-space-16);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-button/nm-button.css

@@ -41,7 +41,7 @@
   }
 
   .nm-button--outline {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
     background: var(--nm-raised);
     color: var(--nm-fg);
   }
@@ -53,7 +53,7 @@
   }
 
   .nm-button--panel {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
     background: var(--nm-panel);
     color: var(--nm-fg);
   }

package/registry/ui/components/nm-button-group/nm-button-group.css

@@ -88,7 +88,7 @@
     gap: var(--nm-space-8);
     min-height: var(--control-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg-muted);

package/registry/ui/components/nm-calendar/nm-calendar.css

@@ -126,7 +126,7 @@
   }
 
   .nm-calendar__day--today .nm-calendar__day-button {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-calendar__day--outside .nm-calendar__day-button {

package/registry/ui/components/nm-card/nm-card.css

@@ -6,7 +6,7 @@
     gap: var(--nm-space-12);
     min-width: 0;
     padding: var(--nm-card-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -39,7 +39,7 @@
   }
 
   .nm-card[data-interactive]:hover:not([data-disabled]) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
     background: var(--nm-inset);
   }
 

package/registry/ui/components/nm-chatbox/nm-chatbox.css

@@ -407,7 +407,7 @@
     align-items: center;
     gap: var(--nm-space-4);
     padding: var(--nm-icon-pad);
-    border: var(--nm-rule) solid var(--nm-line);
+    border: var(--nm-rule) solid var(--nm-border);
     border-radius: calc((var(--nm-icon-control) + var(--nm-rule) * 2) / 2);
     background: transparent;
     color: var(--nm-fg-subtle);

package/registry/ui/components/nm-checkbox/nm-checkbox.css

@@ -8,9 +8,9 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: var(--nm-radius-sm);
-    background: transparent;
+    background: var(--nm-borderless-fill);
     color: var(--nm-canvas);
     cursor: pointer;
     transition:

package/registry/ui/components/nm-chip/nm-chip.css

@@ -62,7 +62,7 @@
   }
 
   .nm-chip[data-tone='outline'] {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
     background: transparent;
     color: var(--nm-fg);
   }

package/registry/ui/components/nm-code-block/nm-code-block.css

@@ -5,7 +5,7 @@
     width: 100%;
     min-width: 0;
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-inset);
     color: var(--nm-fg);

package/registry/ui/components/nm-collection/nm-collection.css

@@ -96,7 +96,7 @@
     justify-content: space-between;
     gap: var(--nm-space-8);
     padding: var(--table-cell-py) var(--table-gap);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
     border-radius: 0;
     color: var(--nm-fg-subtle);
     font-size: var(--table-fs);
@@ -111,7 +111,7 @@
   .nm-collection__head:hover,
   .nm-collection__head:focus-within {
     padding-block: var(--table-head-py);
-    border-bottom-color: var(--nm-line-strong);
+    border-bottom-color: var(--nm-border-strong);
     background: transparent;
     color: var(--nm-fg-subtle);
     font-size: var(--table-head-fs);

package/registry/ui/components/nm-color-picker/nm-color-picker.css

@@ -9,7 +9,7 @@
     box-sizing: border-box;
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-sm);
     background: var(--nm-swatch);
   }

package/registry/ui/components/nm-combobox/nm-combobox.css

@@ -7,7 +7,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -23,7 +23,7 @@
   }
 
   .nm-combobox__group:not([data-bare]):focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-combobox__input {

package/registry/ui/components/nm-command/nm-command.css

@@ -7,7 +7,7 @@
     width: 100%;
     padding: var(--nm-space-12) var(--nm-space-24) var(--nm-space-24);
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-composer/nm-composer.css

@@ -6,7 +6,7 @@
     gap: var(--nm-space-24);
     width: 100%;
     padding: var(--nm-space-12);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -15,7 +15,7 @@
   }
 
   .nm-composer:focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-composer[data-disabled='true'] {
@@ -217,7 +217,7 @@
     margin: 0;
     padding: 0 0 var(--nm-space-12);
     list-style: none;
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-composer__queued {

package/registry/ui/components/nm-date-picker/nm-date-picker.css

@@ -7,7 +7,7 @@
     min-width: var(--nm-width-date);
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -28,7 +28,7 @@
   }
 
   .nm-picker__trigger:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-picker__trigger:focus-visible,

package/registry/ui/components/nm-dialog/nm-dialog.css

@@ -23,7 +23,7 @@
     width: min(var(--nm-width-dialog), calc(100% - var(--nm-space-24) * 2));
     max-height: 70%;
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-drawer/nm-drawer.css

@@ -29,11 +29,11 @@
   }
   .nm-drawer[data-side='left'] {
     inset-inline-start: 0;
-    border-inline-end: var(--nm-rule) solid var(--nm-line-strong);
+    border-inline-end: var(--nm-rule) solid var(--nm-border-strong);
   }
   .nm-drawer[data-side='right'] {
     inset-inline-end: 0;
-    border-inline-start: var(--nm-rule) solid var(--nm-line-strong);
+    border-inline-start: var(--nm-rule) solid var(--nm-border-strong);
   }
   .nm-drawer[data-starting-style],
   .nm-drawer[data-ending-style] {

package/registry/ui/components/nm-dropdown/nm-dropdown.css

@@ -83,7 +83,7 @@
     max-height: var(--nm-dropdown-max);
     margin: 0;
     padding: var(--nm-list-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);
@@ -160,7 +160,7 @@
     height: 0;
     margin: var(--nm-space-8) 0;
     border: 0;
-    border-top: var(--nm-rule) solid var(--nm-line);
+    border-top: var(--nm-rule) solid var(--nm-border);
     background: transparent;
   }
 

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.css

@@ -15,7 +15,7 @@
     padding: var(--nm-list-pad);
     overflow-x: hidden;
     overflow-y: auto;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-field/nm-field.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
     min-height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg-subtle);
@@ -22,7 +22,7 @@
 
   .nm-field:not(.nm-field--stack):focus-within,
   .nm-field__box:focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-field__icon,
@@ -131,7 +131,7 @@
     min-height: var(--nm-field-h);
     max-height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
   }
@@ -256,7 +256,7 @@
     width: var(--nm-field-h);
     height: var(--nm-field-h);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -279,7 +279,7 @@
     padding: var(--nm-menu-pad);
     overflow: auto;
     list-style: none;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     max-height: var(--nm-dropdown-max);
@@ -290,7 +290,7 @@
     align-items: center;
     gap: var(--nm-space-8);
     padding: var(--nm-space-8) var(--nm-control-option-inset);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-field__search-input {

package/registry/ui/components/nm-hover-card/nm-hover-card.css

@@ -9,7 +9,7 @@
     gap: var(--nm-space-12);
     width: var(--nm-width-popup-sm);
     padding: var(--nm-panel-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-input/nm-input.css

@@ -5,7 +5,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -24,7 +24,7 @@
   }
 
   .nm-input:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-input:focus-visible {
@@ -51,7 +51,7 @@
     margin-right: var(--control-px);
     padding: 0 var(--control-px);
     border: 0;
-    border-right: var(--nm-rule) solid var(--nm-line-strong);
+    border-right: var(--nm-rule) solid var(--nm-border-strong);
     background: var(--nm-panel);
     color: var(--nm-fg);
     font: inherit;

package/registry/ui/components/nm-input-group/nm-input-group.css

@@ -4,14 +4,14 @@
     box-sizing: border-box;
     width: 100%;
     height: var(--nm-field-h);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     transition: border-color 0.15s;
   }
 
   .nm-input-group:hover {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-input-group:focus-within {

package/registry/ui/components/nm-message/nm-message.css

@@ -169,7 +169,7 @@
     margin-top: 0.75em;
     margin-bottom: 0.75em;
     color: var(--nm-fg-subtle);
-    border-left-color: var(--nm-line);
+    border-left-color: var(--nm-border);
     font-weight: var(--nm-weight-regular);
   }
 

package/registry/ui/components/nm-native-select/nm-native-select.css

@@ -8,7 +8,7 @@
     width: 100%;
     height: var(--nm-field-h);
     padding: 0 calc(var(--control-px) + var(--nm-icon-button) + var(--nm-space-8)) 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -21,7 +21,7 @@
   }
 
   .nm-native-select__control:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-native-select__control:focus-visible {

package/registry/ui/components/nm-popover/nm-popover.css

@@ -9,7 +9,7 @@
     gap: var(--nm-space-12);
     width: var(--nm-width-popup);
     padding: var(--nm-panel-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-prose/nm-prose.css

@@ -45,7 +45,7 @@
 
   .nm-prose blockquote {
     padding-inline-start: var(--nm-space-12);
-    border-inline-start: var(--nm-space-2) solid var(--nm-line-strong);
+    border-inline-start: var(--nm-space-2) solid var(--nm-border-strong);
     color: var(--nm-fg-muted);
   }
 
@@ -66,7 +66,7 @@
   .nm-prose hr {
     margin: var(--nm-space-24) 0;
     border: 0;
-    border-top: var(--nm-rule) solid var(--nm-divider);
+    border-top: var(--nm-rule) solid var(--nm-border-divider);
   }
 
   .nm-prose table {
@@ -76,6 +76,6 @@
 
   .nm-prose :is(th, td) {
     padding: var(--nm-space-8) var(--nm-space-12);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
     text-align: start;
   }

package/registry/ui/components/nm-questionnaire/nm-questionnaire.css

@@ -12,7 +12,7 @@
 
   .nm-questionnaire--card {
     padding: var(--nm-space-24);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
   }
@@ -68,7 +68,7 @@
     gap: var(--nm-space-12);
     box-sizing: border-box;
     padding: var(--nm-space-12);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: transparent;
     cursor: pointer;
@@ -102,7 +102,7 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     margin-top: var(--nm-space-2);
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: 50%;
     color: var(--nm-canvas);
   }

package/registry/ui/components/nm-radio-group/nm-radio-group.css

@@ -15,9 +15,9 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: 50%;
-    background: transparent;
+    background: var(--nm-borderless-fill);
     cursor: pointer;
     transition: border-color 0.15s;
   }

package/registry/ui/components/nm-segmented/nm-segmented.css

@@ -3,7 +3,7 @@
     align-items: stretch;
     gap: var(--nm-space-2);
     padding: var(--toggle-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--toggle-r);
     background: transparent;
   }

package/registry/ui/components/nm-select/nm-select.css

@@ -7,7 +7,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -27,7 +27,7 @@
   .nm-select__trigger:hover,
   .nm-select__trigger[data-popup-open],
   .nm-select__trigger:focus-visible {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
     outline: none;
   }
 

package/registry/ui/components/nm-separator/nm-separator.css

@@ -1,6 +1,6 @@
   .nm-separator {
     flex-shrink: 0;
-    background: var(--nm-line);
+    background: var(--nm-border);
   }
 
   .nm-separator[data-orientation='horizontal'] {

package/registry/ui/components/nm-side-panel/nm-side-panel.css

@@ -40,7 +40,7 @@
     flex: 0 0 var(--nm-side-panel-basis);
     flex-direction: column;
     min-height: 0;
-    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+    border-inline-start: var(--nm-rule) solid var(--nm-border-divider);
     background: var(--nm-canvas);
   }