@nordmanai/nif 0.2.5 → 0.2.9

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/config/nm-drawer.ts

@@ -0,0 +1,3 @@
+/** The edge a drawer slides in from. */
+export const NM_DRAWER_SIDES = ['left', 'right'] as const;
+export type NmDrawerSide = (typeof NM_DRAWER_SIDES)[number];

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

@@ -0,0 +1,37 @@
+/** Which edge of the view the sidebar sits on. */
+export const NM_SIDEBAR_SIDES = ['left', 'right'] as const;
+export type NmSidebarSide = (typeof NM_SIDEBAR_SIDES)[number];
+
+/** `sidebar` is flush with the edge. `floating` is a raised card inside a margin. `inset` sits in a margin and the main area is the raised card. */
+export const NM_SIDEBAR_VARIANTS = ['sidebar', 'floating', 'inset'] as const;
+export type NmSidebarVariant = (typeof NM_SIDEBAR_VARIANTS)[number];
+
+/**
+ * How the sidebar collapses.
+ * `offcanvas` slides out of view; the trigger lives in the main area.
+ * `icon` keeps a column of icons, one per row.
+ * `toggle` keeps only the toggle button, in the sidebar's own header.
+ * `none` never collapses.
+ */
+export const NM_SIDEBAR_COLLAPSIBLE = ['offcanvas', 'icon', 'toggle', 'none'] as const;
+export type NmSidebarCollapsible = (typeof NM_SIDEBAR_COLLAPSIBLE)[number];
+
+export const NM_SIDEBAR_STATES = ['expanded', 'collapsed'] as const;
+export type NmSidebarState = (typeof NM_SIDEBAR_STATES)[number];
+
+/** Row heights of a menu button: the small, default and large control heights. */
+export const NM_SIDEBAR_BUTTON_SIZES = ['sm', 'default', 'lg'] as const;
+export type NmSidebarButtonSize = (typeof NM_SIDEBAR_BUTTON_SIZES)[number];
+
+/** `default` is a quiet row that fills on hover. `outline` draws the row's line and raises it. */
+export const NM_SIDEBAR_BUTTON_VARIANTS = ['default', 'outline'] as const;
+export type NmSidebarButtonVariant = (typeof NM_SIDEBAR_BUTTON_VARIANTS)[number];
+
+/** The key that toggles the sidebar with the platform modifier: ⌘B on Mac, Ctrl+B elsewhere. */
+export const NM_SIDEBAR_SHORTCUT = 'b';
+
+/** How long the pointer may be between the toggle and the peeked sidebar before the peek closes, in ms. */
+export const NM_SIDEBAR_PEEK_LEAVE_MS = 200;
+
+/** Below this width the sidebar opens over the page instead of beside it. The same breakpoint as the tokens' phone step. */
+export const NM_SIDEBAR_MOBILE_QUERY = '(max-width: 48rem)';

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

@@ -205,8 +205,17 @@
   --nm-width-tile: 9rem;
   --nm-width-panel-min: 16rem;
   --nm-width-panel-max: 80%;
+  /* The sidebar beside the main area: open, on a phone, and collapsed to icons (a square row inside the group padding). */
+  --nm-width-sidebar: 16rem;
+  --nm-width-sidebar-mobile: 18rem;
+  /* A drawer over the page from an edge. */
+  --nm-width-drawer: 20rem;
+  --nm-width-sidebar-icon: calc(var(--control-h) + var(--nm-space-8) * 2);
   --nm-height-workspace-sm: 20rem;
   --nm-height-workspace-lg: 36rem;
+  /* A sidebar shown inside a page. */
+  --nm-height-sidebar-sm: 26rem;
+  --nm-height-sidebar-lg: 42rem;
   /* Typography. Line height, tracking and weight come from here. The typeface itself is in assets/tokens.css. */
   /* Structural dividers and resize handles. Invisible at Contrast 0, and they appear as Contrast rises. */
   --nm-divider: var(--nm-canvas);
@@ -268,6 +277,7 @@
   --nm-code-gutter: 3ch;
   --nm-width-date: 11rem;
   --nm-width-dialog: 40rem;
+  --nm-width-alert-dialog: 26rem;
   /* A page column, such as a settings page: a share of the view, never narrower or wider than its bounds. */
   --nm-width-column: 90%;
   --nm-width-column-min: 20rem;
@@ -311,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;
@@ -429,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);
+}