@nordmanai/nif 0.2.8 → 0.2.9

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

@@ -18,7 +18,7 @@
   .nm-sidebar-provider[data-height='sm'],
   .nm-sidebar-provider[data-height='lg'] {
     min-height: 0;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
   }
   .nm-sidebar-provider[data-height='sm'] {
@@ -48,10 +48,10 @@
     order: 1;
   }
   .nm-sidebar[data-variant='sidebar'][data-side='left'] {
-    border-inline-end: var(--nm-rule) solid var(--nm-divider);
+    border-inline-end: var(--nm-rule) solid var(--nm-border-divider);
   }
   .nm-sidebar[data-variant='sidebar'][data-side='right'] {
-    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+    border-inline-start: var(--nm-rule) solid var(--nm-border-divider);
   }
   .nm-sidebar[data-collapsible='offcanvas'] {
     width: 0;
@@ -95,20 +95,20 @@
     inset-block: 0;
     inset-inline-start: 0;
     width: var(--nm-sidebar-width);
-    border-inline-end: var(--nm-rule) solid var(--nm-line-strong);
+    border-inline-end: var(--nm-rule) solid var(--nm-border-strong);
     background: var(--nm-raised);
   }
   .nm-sidebar[data-side='right'][data-peek] .nm-sidebar__inner {
     inset-inline-start: auto;
     inset-inline-end: 0;
     border-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-sidebar[data-variant='floating'][data-peek] .nm-sidebar__inner,
   .nm-sidebar[data-variant='inset'][data-peek] .nm-sidebar__inner {
     inset-block: var(--nm-space-8);
     inset-inline-start: var(--nm-space-8);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
   }
   .nm-sidebar[data-variant='floating'][data-side='right'][data-peek] .nm-sidebar__inner,
@@ -132,7 +132,7 @@
     padding-inline-start: 0;
   }
   .nm-sidebar[data-variant='floating'] .nm-sidebar__inner {
-    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);
   }
@@ -392,7 +392,7 @@
     opacity: var(--control-disabled-opacity);
   }
   .nm-sidebar__menu-button[data-variant='outline'] {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
     background: var(--nm-raised);
   }
   .nm-sidebar__menu-button[data-variant='outline']:hover,
@@ -514,7 +514,7 @@
     margin-inline-start: calc(var(--nm-icon-pad) + var(--nm-icon-button) / 2);
     padding-inline-start: calc(var(--nm-icon-pad) + var(--nm-icon-button) / 2);
     padding-block: var(--nm-space-2);
-    border-inline-start: var(--nm-rule) solid var(--nm-line);
+    border-inline-start: var(--nm-rule) solid var(--nm-border);
   }
   .nm-sidebar__menu-sub-button {
     display: flex;

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

@@ -3,7 +3,7 @@
     box-sizing: border-box;
     width: var(--nm-icon);
     height: var(--nm-icon);
-    border: 2px solid var(--nm-line-strong);
+    border: 2px solid var(--nm-border-strong);
     border-top-color: var(--nm-fg);
     border-radius: 50%;
     animation: nm-spinner-turn 0.8s linear infinite;

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

@@ -7,7 +7,7 @@
     width: calc(var(--nm-switch-thumb) * 2);
     height: var(--nm-switch-thumb);
     padding: var(--nm-space-2);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--toggle-r);
     background: var(--nm-panel);
     cursor: pointer;

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

@@ -32,7 +32,7 @@
 
   .nm-table__head {
     padding: var(--nm-table-pad-y) var(--nm-table-pad-x);
-    border-bottom: var(--nm-rule) solid var(--nm-line-strong);
+    border-bottom: var(--nm-rule) solid var(--nm-border-strong);
     color: var(--nm-fg-muted);
     font-size: var(--nm-type-ui-sm);
     font-weight: var(--nm-weight-medium);
@@ -75,7 +75,7 @@
 
   .nm-table[data-variant='default'] .nm-table__body .nm-table__row:not(:last-child),
   .nm-table[data-variant='striped'] .nm-table__body .nm-table__row:not(:last-child) {
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-table[data-variant='striped'] .nm-table__body .nm-table__row:nth-child(even) {
@@ -84,7 +84,7 @@
 
   .nm-table[data-variant='lined'] .nm-table__head,
   .nm-table[data-variant='lined'] .nm-table__cell {
-    border: var(--nm-rule) solid var(--nm-line);
+    border: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-table[data-variant='plain'] .nm-table__head {
@@ -112,7 +112,7 @@
   }
 
   .nm-table__footer {
-    border-top: var(--nm-rule) solid var(--nm-line-strong);
+    border-top: var(--nm-rule) solid var(--nm-border-strong);
     background: var(--nm-raised);
     font-weight: var(--nm-weight-medium);
   }

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

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--nm-space-4);
-  border-bottom: var(--nm-rule) solid var(--nm-line);
+  border-bottom: var(--nm-rule) solid var(--nm-border);
 }
 
 .nm-tabs__item {

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

@@ -4,7 +4,7 @@
     width: 100%;
     min-height: calc(var(--control-h) * 2.5);
     padding: var(--field-area-py) 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-textarea:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-textarea:focus-visible {
@@ -102,7 +102,7 @@
     flex: none;
     flex-direction: column;
     width: var(--nm-side-panel-basis, 50%);
-    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);
   }
 
@@ -133,7 +133,7 @@
     height: 100%;
     min-height: 100%;
     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-control-r);
     outline: none;
     resize: none;
@@ -156,7 +156,7 @@
     height: 100%;
     padding: var(--nm-space-16);
     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-control-r);
     background: var(--nm-raised);
   }

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

@@ -31,7 +31,7 @@
   }
 
   .nm-toggle-button[data-variant='outline'] {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
   }
 
   .nm-toggle-button:hover:not([data-disabled]) {

package/registry/ui/components/nordman-icon-button/nordman-icon-button.css

@@ -33,7 +33,7 @@
   /* Raised sits on a surface of its own with an edge, so it reads on any background. Panel has no edge. */
   .nm-icon-button--raised {
     background: var(--nm-raised);
-    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-line-strong);
+    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-border-strong);
   }
 
   .nm-icon-button--quiet {
@@ -48,7 +48,7 @@
   .nm-icon-button--quiet.nm-icon-button--active:not(:disabled) {
     background: var(--nm-raised);
     color: var(--nm-fg);
-    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-line);
+    box-shadow: inset 0 0 0 var(--nm-rule) var(--nm-border);
   }
 
   .nm-icon-button--solid {

package/registry/ui/components/nordman-login/nordman-login.css

@@ -47,7 +47,7 @@
 .nm-login__error {
   margin: 0;
   color: var(--nm-fg);
-  border: var(--nm-rule) solid var(--nm-line-strong);
+  border: var(--nm-rule) solid var(--nm-border-strong);
   border-radius: var(--nm-control-r);
   padding: var(--control-px);
   font-size: var(--control-fs);
@@ -89,7 +89,7 @@
   width: 100%;
   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);
@@ -98,7 +98,7 @@
 }
 
 .nm-login__control:focus {
-  border-color: var(--nm-stroke);
+  border-color: var(--nm-border-stroke);
   outline: none;
 }
 

package/registry/ui/components/nordman-toggle/nordman-toggle.css

@@ -6,7 +6,7 @@
     max-width: 100%;
     overflow-x: auto;
     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);
   }
 

package/registry/ui/config/nm-appearance.ts

@@ -55,6 +55,21 @@ export const NM_UI_SPACE_PERCENT = {
   default: 100,
 } as const;
 
+/**
+ * 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 const NM_BORDER_STYLES = ['default', 'subtle', 'none'] as const;
+export type NmBorderStyle = (typeof NM_BORDER_STYLES)[number];
+export const NM_BORDER_STRENGTH: Record<NmBorderStyle, string> = {
+  default: '100%',
+  subtle: '35%',
+  none: '0%',
+};
+/** Set on the root beside the tokens, so a product can style a state without the appearance script: `:root[data-nm-borders="none"]`. */
+export const NM_BORDER_ATTRIBUTE = 'data-nm-borders' as const;
 export const NM_APPEARANCE_CONTRAST = {
   min: 0,
   max: 100,
@@ -183,6 +198,7 @@ export const NM_APPEARANCE_DEFAULTS = {
   uiRadiusPercent: NM_UI_RADIUS_PERCENT.default,
   uiSpacePercent: NM_UI_SPACE_PERCENT.default,
   contrast: NM_APPEARANCE_CONTRAST.default,
+  borders: 'default' as NmBorderStyle,
 } as const;
 
 export const NM_APPEARANCE_CSS_VARS = [
@@ -241,6 +257,7 @@ export const NM_APPEARANCE_CSS_VARS = [
   '--nm-ui-chip-min-height',
   '--nm-radius-scale',
   '--nm-space-scale',
+  '--nm-border-strength',
   '--text-primary',
   '--text-secondary',
   '--text-tertiary',

package/registry/ui/lib/appearance/appearanceState.ts

@@ -4,6 +4,7 @@ import {
   NM_APPEARANCE_DEFAULTS,
   NM_APPEARANCE_MODES,
   NM_APPEARANCE_STORAGE_KEY,
+  NM_BORDER_STYLES,
   NM_UI_FONT_SIZE_PX,
   NM_UI_FONT_WEIGHT,
   NM_UI_ICON_SIZE_PX,
@@ -12,6 +13,7 @@ import {
   findThemePreset,
   type NmAccentPreset,
   type NmAppearanceMode,
+  type NmBorderStyle,
 } from '../../config/nm-appearance.ts';
 import { normalizeHexColor } from './color.ts';
 
@@ -28,6 +30,7 @@ export type NmAppearanceState = {
   uiRadiusPercent: number;
   uiSpacePercent: number;
   contrast: number;
+  borders: NmBorderStyle;
 };
 
 export { NM_APPEARANCE_STORAGE_KEY };
@@ -36,6 +39,9 @@ function isMode(value: unknown): value is NmAppearanceMode {
   return typeof value === 'string' && (NM_APPEARANCE_MODES as readonly string[]).includes(value);
 }
 
+function isBorderStyle(value: unknown): value is NmBorderStyle {
+  return typeof value === 'string' && (NM_BORDER_STYLES as readonly string[]).includes(value);
+}
 function isAccentPreset(value: unknown): value is NmAccentPreset {
   return typeof value === 'string' && (NM_ACCENT_PRESETS as readonly string[]).includes(value);
 }
@@ -82,6 +88,7 @@ export function createDefaultAppearanceState(): NmAppearanceState {
     uiRadiusPercent: NM_APPEARANCE_DEFAULTS.uiRadiusPercent,
     uiSpacePercent: NM_APPEARANCE_DEFAULTS.uiSpacePercent,
     contrast: NM_APPEARANCE_CONTRAST.default,
+    borders: NM_APPEARANCE_DEFAULTS.borders,
   };
   return applyThemePresetPalette(base);
 }
@@ -185,6 +192,7 @@ export function parseAppearanceState(raw: unknown): NmAppearanceState {
       NM_APPEARANCE_CONTRAST.max,
       defaults.contrast,
     ),
+    borders: isBorderStyle(record.borders) ? record.borders : defaults.borders,
   };
 }
 

package/registry/ui/lib/appearance/applyAppearance.ts

@@ -1,5 +1,5 @@
 import type { NmAppearanceState } from './appearanceState.ts';
-import { NM_APPEARANCE_APPLIED_EVENT, NM_APPEARANCE_CSS_VARS } from '../../config/nm-appearance.ts';
+import { NM_APPEARANCE_APPLIED_EVENT, NM_APPEARANCE_CSS_VARS, NM_BORDER_ATTRIBUTE } from '../../config/nm-appearance.ts';
 import { resolveAppearanceScheme } from './appearanceState.ts';
 import { deriveAppearanceTokens } from './deriveTokens.ts';
 import { createLogger } from '../../kit-logger.ts';
@@ -17,6 +17,7 @@ export function clearAppliedAppearance(root: HTMLElement = document.documentElem
   NM_APPEARANCE_CSS_VARS.forEach((property) => {
     root.style.removeProperty(property);
   });
+  root.removeAttribute(NM_BORDER_ATTRIBUTE);
 }
 
 export function applyAppearanceState(
@@ -29,6 +30,7 @@ export function applyAppearanceState(
   Object.entries(tokens).forEach(([property, value]) => {
     root.style.setProperty(property, value);
   });
+  root.setAttribute(NM_BORDER_ATTRIBUTE, state.borders);
   if (typeof window !== 'undefined') {
     window.dispatchEvent(new CustomEvent(NM_APPEARANCE_APPLIED_EVENT));
   }

package/registry/ui/lib/appearance/deriveTokens.ts

@@ -2,6 +2,7 @@ import type { NmAppearanceState } from './appearanceState.ts';
 import {
   NM_ACCENT_HEX,
   NM_APPEARANCE_CONTRAST,
+  NM_BORDER_STRENGTH,
   NM_THEME_PRESETS,
   NM_UI_FONT_SIZE_PX,
   NM_UI_FONT_WEIGHT,
@@ -205,6 +206,7 @@ export function deriveAppearanceTokens(
     ...deriveUiControlTokens(state.uiFontSizePx, state.uiIconSizePx),
     ...deriveRadiusScale(state.uiRadiusPercent),
     ...deriveSpaceScale(state.uiSpacePercent),
+    '--nm-border-strength': NM_BORDER_STRENGTH[state.borders],
   };
 
   return {

package/registry/ui/styles/light-appearance.css

@@ -1,10 +1,10 @@
 html.light .nm-panel-bar {
-  border-bottom-color: var(--nm-line);
+  border-bottom-color: var(--nm-border);
 }
 
 html.light .nm-collection__stage-bar {
-  border-bottom-color: var(--nm-line);
-  border-left-color: var(--nm-line);
+  border-bottom-color: var(--nm-border);
+  border-left-color: var(--nm-border);
 }
 
 html.light .nm-list-item:not(.nm-list-item--face) {

package/registry/ui/styles/tokens.css

@@ -321,6 +321,18 @@
   --nm-knot-pulse: 3.2s;
   --nm-knot-pulse-min: 0.4;
   --nm-rule: 1px;
+  /* Borders. Every border colour is one of the line colours mixed through one strength, so a product can turn its
+     borders subtle or off in one place while the fills and tracks that share those colours keep theirs. The border
+     keeps its width and turns transparent, so nothing moves. State is not part of this: focus, selection, checked and error
+     borders keep the foreground or destructive colour, so a keyboard user and an active tab are never lost. */
+  --nm-border-strength: 100%;
+  --nm-border: color-mix(in srgb, var(--nm-line) var(--nm-border-strength), transparent);
+  --nm-border-strong: color-mix(in srgb, var(--nm-line-strong) var(--nm-border-strength), transparent);
+  --nm-border-stroke: color-mix(in srgb, var(--nm-stroke) var(--nm-border-strength), transparent);
+  --nm-border-divider: color-mix(in srgb, var(--nm-divider) var(--nm-border-strength), transparent);
+  /* A control whose only shape is its border (checkbox, radio) takes this fill, so it still has a shape with the
+     borders off. Transparent until then. */
+  --nm-borderless-fill: transparent;
   --nm-rule-dash: 4px;
   --nm-rule-gap: 4px;
   --nm-rule-pair: 2.5rem;
@@ -439,3 +451,12 @@ html.light {
   --nm-syntax-function: #6f42c1;
   --nm-syntax-constant: #005cc5;
 }
+
+/* The border setting without the appearance script: set the attribute on the root. */
+:root[data-nm-borders='subtle'] {
+  --nm-border-strength: 35%;
+}
+:root[data-nm-borders='none'] {
+  --nm-border-strength: 0%;
+  --nm-borderless-fill: var(--nm-inset);
+}