@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/styles/tokens.css

@@ -0,0 +1,424 @@
+@property --nm-header-rule-top {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --nm-header-band {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+:root {
+  --ink: #000000;
+  --paper: #e8e7d9;
+  --sand: #d2bb9c;
+  --nm-accent: var(--sand);
+  --sand-deep: #b9a893;
+  --sand-mid: #d9c9b2;
+  --sand-light: #e6d9c6;
+  --blush: #d4aa9a;
+  --radius: 8px;
+  --content: 80rem;
+  --page-x: 5rem;
+  --page-y-top: 1.5rem;
+  --page-y: 5rem;
+  --gap-section: 12.5rem;
+  --gap-block: 5rem;
+  --gap-card: 2.5rem;
+  --gap-copy: 1.5rem;
+  --prose-max: 56rem;
+  --statement-max: 50rem;
+  --type-hero: 2.5rem;
+  --type-section: 2.5rem;
+  --type-card: 2rem;
+  --type-lede: 1.375rem;
+  --type-body: 1rem;
+  --type-caption: 0.8125rem;
+  --type-mission: 3.5rem;
+  --type-kicker: 1.5rem;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --reveal: 250ms;
+  --header-logo: 1rem;
+  --header-z: 10;
+  --header-scroll-pad: 6rem;
+  --nav-menu-min: 22rem;
+  --nav-menu-max: 22rem;
+  --nav-menu-desc-lines: 3;
+  --nav-menu-pad: 0.5rem;
+  --nav-menu-gap: 0.15rem;
+  --nav-menu-offset: 0.75rem;
+  --nav-menu-z: 50;
+  --nav-menu-trigger-gap: 0.45rem;
+  --nav-menu-chevron: 0.35rem;
+  --nav-menu-chevron-stroke: 0.1rem;
+  --chain-arrow: 0.75rem;
+  --chain-arrow-stroke: 0.125rem;
+  --nav-menu-link-gap: 0.25rem;
+  --nav-menu-link-pad: 0.65rem 0.75rem;
+  --header-to-hero: 5rem;
+  --hero-sticky-top: var(--header-scroll-pad);
+  --hero-aspect: 16 / 9;
+  --hero-player-z: 2;
+  --hero-player-controls-z: 3;
+  --hero-player-inset: 1rem;
+  --hero-player-control: 2.5rem;
+  --hero-player-control-radius: 50%;
+  --hero-player-icon: 1.25rem;
+  --action-icon: 1rem;
+  --action-icon-gap: 0.5rem;
+  --control-hover-opacity: 0.75;
+  --control-disabled-opacity: 0.55;
+  --control-duration: var(--reveal);
+  --hero-player-cluster-gap: 0.5rem;
+  --hero-player-scrim: color-mix(in srgb, var(--ink) 42%, transparent);
+  --hero-mini-width: 18rem;
+  --hero-mini-inset: 1.25rem;
+  --hero-mini-z: 12;
+  --footer-logo: 3.5rem;
+  --mark-inline: 0.2em;
+  --type-mark: 700;
+  --cursor-circle: var(--paper);
+  --cursor-dot: var(--paper);
+  --cursor-blend: difference;
+  --cursor-z: 9999;
+  --cursor-border: 2px;
+  --nm-destructive: #f87171;
+  --nm-destructive-rgb: 248 113 113;
+  --nm-status-idle: var(--nm-stroke);
+  --nm-status-busy: #f5c451;
+  --nm-status-live: #3ddc84;
+  --nm-radius-scale: 1;
+  --nm-radius-sm: calc(4px * var(--nm-radius-scale));
+  --nm-radius-md: calc(8px * var(--nm-radius-scale));
+  --nm-radius-lg: calc(12px * var(--nm-radius-scale));
+  /* 100% by default. The Space setting scales every spacing token. */
+  --nm-space-scale: 1;
+  --nm-space-2: calc(0.125rem * var(--nm-space-scale));
+  --nm-space-4: calc(0.25rem * var(--nm-space-scale));
+  --nm-space-6: calc(0.375rem * var(--nm-space-scale));
+  --nm-space-8: calc(0.5rem * var(--nm-space-scale));
+  --nm-space-10: calc(0.625rem * var(--nm-space-scale));
+  --nm-space-12: calc(0.75rem * var(--nm-space-scale));
+  --nm-space-16: calc(1rem * var(--nm-space-scale));
+  --nm-space-24: calc(1.5rem * var(--nm-space-scale));
+  --nm-space-40: calc(2.5rem * var(--nm-space-scale));
+  --nm-type-ui: 0.875rem;
+  --nm-type-ui-sm: 0.75rem;
+  --nm-mark-morph: 12s;
+  --nm-shimmer-duration: 2s;
+  --nm-shimmer-spread: 20%;
+  --nm-shimmer-travel: 250%;
+  --nm-mark-loader: 1.5rem;
+  --nm-app-bar: 5.125rem;
+  --nm-chatbox-width: 50rem;
+  --nm-landing-chat-lift: calc(var(--nm-space-40) * 2);
+  --nm-collection-tile: 10rem;
+  --nm-collection-search: 12.5rem;
+  --nm-frame: 90rem;
+  --nm-content: 80rem;
+  --nm-grund-measure: 75rem;
+  --nm-page-x: 5rem;
+  --nm-rail: 2.5rem;
+  --nm-header-band-rest: 8rem;
+  --nm-header-band: var(--nm-header-band-rest);
+  --nm-header-band-docked: calc(
+    (var(--nm-header-band-rest) + var(--nm-header-content)) / 2
+  );
+  --nm-header-content: 3rem;
+  --nm-header-rule-top-rest: var(--nm-rail);
+  --nm-header-rule-top: var(--nm-header-rule-top-rest);
+  --nm-header-rule-top-docked: calc(var(--nm-rail) / 2);
+  --nm-header-y: calc(
+    var(--nm-header-rule-top) +
+      (var(--nm-header-band) - var(--nm-header-content)) / 2
+  );
+  --nm-header-pad-bottom: calc(
+    var(--nm-gap-section) + (var(--nm-header-band) - var(--nm-header-content)) / 2
+  );
+  --nm-header-scroll-pad: calc(
+    var(--nm-header-rule-top-docked) + var(--nm-header-band-docked)
+  );
+  --nm-header-dock-y: 0px;
+  --nm-header-dock-duration: var(--reveal);
+  --nm-header-z: 20;
+  --nm-rail-z: calc(var(--nm-header-z) + 1);
+  --nm-v-logo: calc(var(--nm-page-x) + var(--nm-mark) + var(--nm-rail));
+  --nm-header-nav-offset: calc(
+    (var(--nm-header-band) - var(--nm-header-content)) / 2
+  );
+  --nm-menu-z: 50;
+  --nm-menu-bar-width: var(--nm-icon);
+  --nm-menu-bar-thick: 0.125rem;
+  --nm-menu-bar-gap: 0.3125rem;
+  --nm-type-hero: 5rem;
+  --nm-hero-leading: 6.25rem;
+  --nm-type-statement: 4rem;
+  --nm-statement-leading: 5rem;
+  --nm-type-section: 2.5rem;
+  --nm-type-card: 2rem;
+  --nm-type-lede: 1.5rem;
+  --nm-type-body: 1rem;
+  --nm-type-spec: 0.875rem;
+  --nm-type-caption: 0.75rem;
+  --nm-spec-leading: 1.5rem;
+  --nm-spec-gap: 1rem;
+  --nm-type-brand: 1.5rem;
+  --nm-gap-section: calc(5rem * var(--nm-space-scale));
+  --nm-footer-y: calc(var(--nm-gap-section) + var(--nm-gap-block));
+  --nm-gap-block: calc(2.5rem * var(--nm-space-scale));
+  --nm-gap-copy: calc(1.5rem * var(--nm-space-scale));
+  --nm-gap-title: calc(1rem * var(--nm-space-scale));
+  --nm-gap-nav: calc(1.5rem * var(--nm-space-scale));
+  --nm-gap-cta: calc(1.5rem * var(--nm-space-scale));
+  --nm-gap-icon: calc(0.625rem * var(--nm-space-scale));
+  --nm-gap-tight: calc(0.5rem * var(--nm-space-scale));
+  --nm-pad-card: calc(2.5rem * var(--nm-space-scale));
+  --nm-list-indent: 1.5rem;
+  --nm-pad-cta-y: calc(0.75rem * var(--nm-space-scale));
+  --nm-pad-cta-x: calc(1rem * var(--nm-space-scale));
+  --nm-mark: 1.5rem;
+  --nm-mark-inline: 0.2em;
+  --nm-icon: 1.25rem;
+  --nm-icon-sm: 0.875rem;
+  --nm-icon-button: 1.125rem;
+  --nm-list-row: calc(var(--nm-space-40) + var(--nm-space-4));
+  --nm-list-face: var(--nm-list-row);
+  --nm-modal-width: 37.5rem;
+  --nm-modal-menu: 62.5rem;
+  --nm-modal-wide: 75rem;
+  --nm-modal-nav: 17.0625rem;
+  --nm-modal-min-inline: 0px;
+  --nm-modal-min-block: 0px;
+  --nm-modal-max-block: 52rem;
+  /* Command palette: fixed near the top, list capped like cmdk (500px). */
+  --nm-command-central-top: 15dvh;
+  --nm-command-central-list-max: 31.25rem;
+  --nm-modal-inset: var(--nm-space-16);
+  --nm-modal-pad-block: var(--nm-space-40);
+  --nm-modal-pad-inline: var(--nm-space-24);
+  --nm-modal-pane-min: var(--nm-login-form);
+  --nm-modal-layout: row;
+  --nm-modal-footer-offset: calc(var(--nm-modal-nav) + var(--nm-gap-section));
+  --nm-field-area: 18.75rem;
+  --nm-width-tile: 9rem;
+  --nm-width-panel-min: 16rem;
+  --nm-width-panel-max: 80%;
+  --nm-height-workspace-sm: 20rem;
+  --nm-height-workspace-lg: 36rem;
+  /* 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);
+  --nm-track: 0.01em;
+  --nm-track-tight: -0.02em;
+  --nm-track-wide: 0.06em;
+  --nm-leading-none: 1;
+  --nm-leading-tight: 1.25;
+  --nm-leading-snug: 1.4;
+  --nm-leading-normal: 1.5;
+  --nm-leading-relaxed: 1.65;
+  --nm-leading-ui: 1.25rem;
+  /* Syntax colours for code blocks. They read on the dark canvas, and have a light set below. */
+  --nm-syntax-keyword: #f47067;
+  --nm-syntax-string: #9ecbff;
+  --nm-syntax-function: #b392f0;
+  --nm-syntax-constant: #79b8ff;
+  --nm-syntax-comment: var(--nm-fg-subtle);
+  /* Older names for the monospace typeface. */
+  --nm-font-spec: var(--nm-font-mono);
+  --font-nordman: var(--nm-font-mono);
+  --nm-spectrum-1: #ffaa80;
+  --nm-spectrum-2: #80ff80;
+  --nm-spectrum-3: #ffd480;
+  --nm-spectrum-4: #80d4ff;
+  --nm-spectrum-5: #80ffd4;
+  --nm-spectrum-6: #ff80ff;
+  --nm-spectrum-7: #8080ff;
+  --nm-spectrum-8: #ffea80;
+  --nm-spectrum-9: #ff8080;
+  --nm-icon-pad: var(--nm-space-8);
+  --nm-icon-control: calc(var(--nm-icon-button) + var(--nm-icon-pad) * 2);
+  /* Radius SSOT — config/nm-radius.ts; scale from appearance `--nm-radius-scale` */
+  --nm-control-radius: calc(var(--nm-icon-control) / 2 * var(--nm-radius-scale));
+  --nm-control-r: calc(var(--control-r) * var(--nm-radius-scale));
+  /* One scale. A control (button, field, chip, row) has the control radius. Every surface (card, menu, popover, dialog,
+     panel, composer) has the surface radius. A row inside a surface is concentric: surface radius minus the surface padding. */
+  --nm-composer-radius: var(--nm-radius-lg);
+  --nm-field-radius: var(--nm-control-r);
+  --nm-menu-radius: var(--nm-radius-lg);
+  --nm-row-radius: var(--nm-control-r);
+  /* One rule for a control and the menu it opens. The menu uses the control's radius, its options sit
+     inside the menu padding, so option radius = menu radius - menu padding. Text and icons share one
+     inset: --control-px from the control edge, in the control and in the menu. */
+  --nm-menu-pad: var(--nm-list-pad);
+  --nm-control-menu-radius: var(--nm-menu-radius);
+  --nm-control-option-radius: max(0px, calc(var(--nm-control-r) - var(--nm-menu-pad)));
+  --nm-control-inset: calc(var(--control-px) + var(--nm-rule));
+  --nm-control-option-inset: calc(var(--nm-control-inset) - var(--nm-menu-pad));
+  /* Widths of the floating parts and the narrow content columns. */
+  --nm-width-menu: 15rem;
+  --nm-width-popup-sm: 16rem;
+  --nm-width-popup: 18rem;
+  --nm-width-tooltip: 20rem;
+  --nm-width-form: 28rem;
+  --nm-code-gutter: 3ch;
+  --nm-width-date: 11rem;
+  --nm-width-dialog: 40rem;
+  --nm-height-command: 28rem;
+  --nm-height-picker: 14rem;
+  --nm-height-color: 9rem;
+  --nm-height-thread: 28rem;
+  /* Panels of rows (dropdown, composer menu): row radius = panel radius - panel padding. */
+  --nm-panel-pad: var(--nm-space-12);
+  /* Padding of a list of rows (menus). Row radius = surface radius - list padding = control radius. */
+  --nm-list-pad: var(--nm-space-6);
+  --nm-panel-item-radius: max(0px, calc(var(--nm-menu-radius) - var(--nm-list-pad)));
+  /* A trailing icon button carries icon padding, so its glyph sits as far from the row end as the text sits from the start. */
+  --nm-row-inline: var(--nm-space-16);
+  --nm-row-inline-end: calc(var(--nm-row-inline) - var(--nm-icon-pad));
+  --nm-rail-icon: var(--nm-icon-button);
+  --nm-rail-well: var(--nm-icon-control);
+  --nm-rail-compact-well: var(--nm-icon-control);
+  --nm-rail-title-duration: calc(var(--reveal) * 8);
+  --nm-rail-scrollbar: var(--nm-space-4);
+  --nm-rail-scroll-idle: calc(var(--reveal) * 3);
+  --nm-rail-face-hold: 7s;
+  /* Menus show every row. They scroll only when taller than the viewport. */
+  --nm-dropdown-max: 100dvh;
+  /* Resting scale of a menu before it eases open. Motion reads this. */
+  --nm-menu-scale: 0.98;
+  --nm-menu-highlight: var(--nm-panel);
+  --nm-menu-highlight-rgb: var(--nm-panel-rgb);
+  --nm-menu-surface: var(--nm-panel);
+  --nm-menu-surface-rgb: var(--nm-panel-rgb);
+  --nm-menu-option: var(--nm-inset);
+  --nm-menu-option-rgb: var(--nm-inset-rgb);
+  --nm-toggle-pad: 0.75rem;
+  --nm-panel-stage: 15.625rem;
+  --nm-repo-columns: 4;
+  --nm-knot: 1.25rem;
+  --nm-knot-half: 0.625rem;
+  --nm-knot-inset: calc(var(--nm-rail) - var(--nm-knot-half));
+  --nm-knot-inset-y: calc(var(--nm-header-rule-top) - var(--nm-knot-half));
+  --nm-knot-pulse: 3.2s;
+  --nm-knot-pulse-min: 0.4;
+  --nm-rule: 1px;
+  --nm-rule-dash: 4px;
+  --nm-rule-gap: 4px;
+  --nm-rule-pair: 2.5rem;
+  --nm-radius: 0;
+  --nm-film-scrim: #000000;
+  --nm-soon-opacity: 0.5;
+  --nm-ok: #6fbf73;
+  --nm-hero-max: 100%;
+  --nm-hero-y: calc(var(--nm-gap-section) + var(--nm-gap-block));
+  --nm-hero-wave-z: 0;
+  --nm-hero-copy-z: 1;
+  --nm-hero-copy-x: calc(var(--nm-page-x) - var(--nm-rail));
+  --nm-statement-max: 62.5rem;
+  --nm-code-tree: 16rem;
+  --nm-code-gutter: 3.5rem;
+  --nm-code-stage: 32rem;
+  --nm-heat-0: var(--nm-line);
+  --nm-heat-1: color-mix(in srgb, var(--nm-fg) 28%, var(--nm-canvas));
+  --nm-heat-2: color-mix(in srgb, var(--nm-fg) 48%, var(--nm-canvas));
+  --nm-heat-3: color-mix(in srgb, var(--nm-fg) 70%, var(--nm-canvas));
+  --nm-heat-4: var(--nm-fg);
+  --nm-heat-cell: 1rem;
+  --nm-heat-gap: var(--nm-rule-gap);
+  --nm-heat-span: 22rem;
+  --nm-login-form: 22.5rem;
+  --nm-login-visual-mobile: 14rem;
+  --nm-login-control-y: 0.75rem;
+  --nm-login-reveal: 2.75rem;
+  --nm-heat-stage: calc(
+    var(--nm-heat-cell) * 7 + var(--nm-heat-gap) * 8 + var(--nm-mark) * 2
+  );
+}
+
+html.light {
+  --nm-film-scrim: #0a0a0a;
+  --nm-kompis-filter: saturate(0.75) brightness(0.95);
+  --nm-spectrum-1: #c9957a;
+  --nm-spectrum-2: #7fbf7f;
+  --nm-spectrum-3: #c9ad66;
+  --nm-spectrum-4: #7aacc9;
+  --nm-spectrum-5: #7abfae;
+  --nm-spectrum-6: #bf7abf;
+  --nm-spectrum-7: #7a7abf;
+  --nm-spectrum-8: #c9bc7a;
+  --nm-spectrum-9: #bf7a7a;
+}
+
+@media (max-width: 64rem) {
+  :root {
+    --page-x: 1.5rem;
+    --page-y: 2rem;
+    --gap-section: 6rem;
+    --gap-block: 3rem;
+    --type-hero: 1.75rem;
+    --type-section: 2rem;
+    --type-card: 1.5rem;
+    --type-lede: 1.125rem;
+    --type-mission: 2rem;
+    --nm-page-x: 2.5rem;
+    --nm-rail: 1.5rem;
+    --nm-header-band-rest: 6rem;
+    --nm-header-pad-bottom: calc(var(--nm-gap-copy) + var(--nm-gap-section));
+    --nm-type-hero: 3.25rem;
+    --nm-hero-leading: 4rem;
+    --nm-type-statement: 2.5rem;
+    --nm-statement-leading: 3.125rem;
+    --nm-type-section: 2rem;
+    --nm-type-card: 1.5rem;
+    --nm-type-lede: 1.25rem;
+    --nm-type-brand: 1.25rem;
+    --nm-gap-section: calc(3.5rem * var(--nm-space-scale));
+    --nm-gap-block: calc(2rem * var(--nm-space-scale));
+    --nm-gap-nav: calc(1rem * var(--nm-space-scale));
+    --nm-pad-card: calc(1.75rem * var(--nm-space-scale));
+    --nm-modal-pad-block: var(--nm-pad-card);
+    --nm-modal-pad-inline: var(--nm-pad-card);
+    --nm-hero-max: 100%;
+    --nm-statement-max: 100%;
+  }
+}
+
+@media (max-width: 48rem) {
+  :root {
+    --nm-page-x: 1.25rem;
+    --nm-rail: 1rem;
+    --nm-header-band-rest: 4rem;
+    --nm-header-content: 2.5rem;
+    --nm-type-hero: 2.25rem;
+    --nm-hero-leading: 2.75rem;
+    --nm-type-statement: 1.75rem;
+    --nm-statement-leading: 2.25rem;
+    --nm-type-section: 1.75rem;
+    --nm-type-card: 1.375rem;
+    --nm-type-lede: 1.125rem;
+    --nm-type-brand: 1.125rem;
+    --nm-gap-section: calc(2.5rem * var(--nm-space-scale));
+    --nm-gap-block: calc(1.5rem * var(--nm-space-scale));
+    --nm-gap-copy: calc(1.25rem * var(--nm-space-scale));
+    --nm-gap-nav: calc(0.75rem * var(--nm-space-scale));
+    --nm-gap-cta: calc(0.75rem * var(--nm-space-scale));
+    --nm-pad-card: calc(1.25rem * var(--nm-space-scale));
+    --nm-modal-inset: var(--nm-space-8);
+    --nm-modal-pad-block: var(--nm-pad-card);
+    --nm-modal-pad-inline: var(--nm-pad-card);
+    --nm-modal-max-block: 100%;
+    --nm-modal-nav: 100%;
+    --nm-modal-layout: column;
+    --nm-modal-footer-offset: 0px;
+  }
+}
+
+:root.light,
+:root[data-theme='light'] {
+  --nm-syntax-keyword: #d73a49;
+  --nm-syntax-string: #032f62;
+  --nm-syntax-function: #6f42c1;
+  --nm-syntax-constant: #005cc5;
+}

package/registry/ui/styles/utilities.css

@@ -0,0 +1,12 @@
+/* Text for screen readers only. Hidden from sight, present in the page. */
+.nm-sr-only {
+  position: absolute;
+  width: var(--nm-rule);
+  height: var(--nm-rule);
+  margin: calc(var(--nm-rule) * -1);
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}