noecosystem-design 0.1.0

package/packages/data-ui/src/pagination.tsx

@@ -0,0 +1,67 @@
+
+
+import type * as React from 'react';
+import { ChevronIcon } from '@noe/icons';
+import { Button } from '@noe/ui/button';
+import { cn } from '@noe/ui/lib/cn';
+
+export interface PaginationProps extends React.ComponentProps<'nav'> {
+  label: string;
+  status: React.ReactNode;
+  previousLabel: string;
+  nextLabel: string;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  canPrevious?: boolean;
+  canNext?: boolean;
+}
+
+export function Pagination({
+  label,
+  status,
+  previousLabel,
+  nextLabel,
+  onPrevious,
+  onNext,
+  canPrevious = true,
+  canNext = true,
+  className,
+  ...props
+}: PaginationProps) {
+  return (
+    <nav
+      aria-label={label}
+      className={cn('flex items-center justify-between gap-4', className)}
+      data-slot="pagination"
+      {...props}
+    >
+      <Button
+        aria-label={previousLabel}
+        variant="outline"
+        size="sm"
+        data-slot="pagination-previous"
+        disabled={!onPrevious || !canPrevious}
+        onClick={onPrevious}
+      >
+        <ChevronIcon direction="backward" className="size-4" />
+      </Button>
+      <span
+        aria-live="polite"
+        className="text-sm leading-normal tabular-nums text-muted-foreground"
+        data-slot="pagination-status"
+      >
+        {status}
+      </span>
+      <Button
+        aria-label={nextLabel}
+        variant="outline"
+        size="sm"
+        data-slot="pagination-next"
+        disabled={!onNext || !canNext}
+        onClick={onNext}
+      >
+        <ChevronIcon direction="forward" className="size-4" />
+      </Button>
+    </nav>
+  );
+}

package/packages/data-ui/src/pie-chart.tsx

@@ -0,0 +1,38 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+export function PieChart({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('rounded-md border border-border bg-surface-raised p-4', className)}
+      data-slot="pie-chart"
+      {...props}
+    >
+      <svg viewBox="0 0 100 100" width="100%" height="120" aria-label="Pie Chart">
+        <circle
+          cx="50"
+          cy="50"
+          r="40"
+          fill="none"
+          stroke="var(--noe-color-accent)"
+          strokeWidth="8"
+          strokeDasharray="60 40"
+        />
+      </svg>
+      <table className="sr-only">
+        <caption>Pie Chart</caption>
+        <thead>
+          <tr>
+            <th scope="col">Label</th>
+            <th scope="col">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>A</td>
+            <td>40</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/data-ui/src/radar-chart.tsx

@@ -0,0 +1,38 @@
+import type * as React from 'react';
+import { cn } from '@noe/ui/lib/cn';
+export function RadarChart({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('rounded-md border border-border bg-surface-raised p-4', className)}
+      data-slot="radar-chart"
+      {...props}
+    >
+      <svg viewBox="0 0 100 100" width="100%" height="120" aria-label="Radar Chart">
+        <circle
+          cx="50"
+          cy="50"
+          r="40"
+          fill="none"
+          stroke="var(--noe-color-accent)"
+          strokeWidth="8"
+          strokeDasharray="60 40"
+        />
+      </svg>
+      <table className="sr-only">
+        <caption>Radar Chart</caption>
+        <thead>
+          <tr>
+            <th scope="col">Label</th>
+            <th scope="col">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>A</td>
+            <td>40</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/design-tokens/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@noe/design-tokens",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node ../../scripts/generate-design-tokens.mjs",
+    "check:generated": "node ../../scripts/generate-design-tokens.mjs --check"
+  },
+  "devDependencies": {
+    "vitest": "4.1.11"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./base.css": "./src/base.css",
+    "./fonts.css": "./src/fonts.css",
+    "./theme.css": "./src/theme.css",
+    "./tokens.css": "./src/tokens.css",
+    "./tailwind.css": "./src/tailwind.css",
+    "./tokens.json": "./src/tokens.json",
+    "./palette": "./src/palette.ts"
+  }
+}

package/packages/design-tokens/src/base.css

@@ -0,0 +1,255 @@
+@import "./fonts.css";
+
+/*
+ * Language-aware typography contract — aligned with NOEcosystem-Frontend-Light-Dark.
+ *
+ * English / Latin: SF Pro Display + SF Pro Text + Helvetica Neue first, matching the
+ * landing-site --font-sf-pro stack. IRANYekanX / IRANYekanXFaNum are same-script
+ * fallbacks limited to Persian/Arabic unicode-range, so Latin glyphs never silently
+ * mix SF and IRANYekan metrics.
+ *
+ * Persian/Arabic scopes invert the order: IRANYekanX (variable) becomes primary
+ * so every glyph in a fa/ar run — including embedded Latin, digits, punctuation —
+ * shares one font's metrics. The variable IRANYekanXVF.ttf (100-1000) is preferred
+ * for weight flexibility; static FaNum woff2 remain as fallback.
+ */
+@layer base {
+  :root {
+    --font-sf-pro:
+      "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
+      sans-serif;
+  }
+
+  :where(html[lang="fa"], html[lang="ar"], [lang="fa"], [lang="ar"]) {
+    --noe-font-family-sans:
+      "IRANYekanX", "IRANYekanXFaNum", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+    --noe-font-family-heading:
+      "IRANYekanX", "IRANYekanXFaNum", "SF Pro Display", -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+  }
+
+  /* Continuous canvas and cinematic detail tokens — derived from semantic tokens
+     so landing-site hero/kinetic palettes track the active theme automatically. */
+  :root,
+  [data-theme="light"],
+  [data-theme="dark"] {
+    --noe-continuous-canvas: var(--noe-color-background);
+    --noe-graphite: var(--noe-color-background);
+    --noe-graphite-raised: var(--noe-color-surface-raised);
+    --noe-paper: var(--noe-color-surface);
+    --noe-paper-bright: var(--noe-color-foreground);
+    --noe-canvas-copy: var(--noe-color-foreground);
+    --noe-canvas-muted: var(--noe-color-muted-foreground);
+    --noe-canvas-line: var(--noe-color-border);
+  }
+
+  /* Categorical signal colors — token-backed, derived from primitives.
+     Graphite palette uses semantic tokens; these aliases keep landing-compat
+     variable names but do not duplicate raw hex values. */
+  :root,
+  [data-theme="light"] {
+    --noe-coral: var(--noe-primitive-color-coral-500);
+    --noe-amber: var(--noe-primitive-color-amber-500);
+    --noe-cyan: var(--noe-primitive-color-cyan-500);
+    --noe-violet: var(--noe-primitive-color-violet-500);
+    --mint: var(--noe-primitive-color-mint-500);
+    --teal: var(--noe-primitive-color-mint-500);
+    --deep-teal: var(--noe-primitive-color-mint-600);
+  }
+
+  [data-theme="dark"] {
+    --noe-coral: var(--noe-primitive-color-coral-400);
+    --noe-amber: var(--noe-primitive-color-amber-400);
+    --noe-cyan: var(--noe-primitive-color-cyan-400);
+    --noe-violet: var(--noe-primitive-color-violet-400);
+    --mint: var(--noe-primitive-color-mint-100);
+    --teal: var(--noe-primitive-color-mint-300);
+    --deep-teal: var(--noe-primitive-color-mint-400);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      --noe-coral: var(--noe-primitive-color-coral-400);
+      --noe-amber: var(--noe-primitive-color-amber-400);
+      --noe-cyan: var(--noe-primitive-color-cyan-400);
+      --noe-violet: var(--noe-primitive-color-violet-400);
+      --mint: var(--noe-primitive-color-mint-100);
+      --teal: var(--noe-primitive-color-mint-300);
+      --deep-teal: var(--noe-primitive-color-mint-400);
+    }
+  }
+
+  /* Palette: Graphite is the only approved palette. Default is graphite when no preference.
+     Architecture is extensible: future palettes add [data-noe-palette="..."] overrides for
+     --noe-color-* semantic tokens, but UI must only expose registered palettes. */
+  :root,
+  [data-noe-palette="graphite"] {
+    /* Graphite uses the semantic tokens as defined above — no overrides needed.
+       This block documents the approved palette and provides a hook for future palettes. */
+  }
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border-color: var(--noe-color-border);
+  }
+
+  html {
+    min-width: 20rem;
+    min-height: 100%;
+    background: var(--noe-color-background);
+    color: var(--noe-color-foreground);
+    font-family: var(--noe-font-family-sans);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
+
+  /* Keep Safari elastic overscroll on the same canvas as the public landing page. */
+  html:has(body main.kinetic-ready),
+  body:has(> main.kinetic-ready) {
+    background-color: var(--noe-continuous-canvas);
+  }
+
+  body {
+    position: relative;
+    min-height: 100dvh;
+    margin: 0;
+    background: var(--noe-color-background);
+    color: var(--noe-color-foreground);
+  }
+
+  /* Persian/Arabic language scopes use IRANYekanX; all other text resolves to SF Pro.
+     IMPORTANT: dir="rtl" must NOT change font-family. Only lang="fa" does. */
+  :where(html[lang="fa"], [lang="fa"], :lang(fa)) {
+    --noe-font-family-sans:
+      "IRANYekanX", "IRANYekanXFaNum", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+    --noe-font-family-heading:
+      "IRANYekanX", "IRANYekanXFaNum", "SF Pro Display", -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+  }
+  :lang(fa),
+  [lang="fa"] {
+    font-family: "IRANYekanX", "IRANYekanXFaNum", sans-serif;
+  }
+
+  /* English inside Persian page must stay Latin — even when page is RTL. */
+  :where(html[lang="fa"]) :where([lang="en"], :lang(en)) {
+    font-family: var(--font-sf-pro, var(--noe-font-family-sans));
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  ::selection {
+    background: var(--noe-color-accent);
+    color: var(--noe-color-accent-foreground);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--noe-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Ensure focus indicators remain visible in both themes with adequate contrast */
+  @media (forced-colors: active) {
+    :focus-visible {
+      outline-color: CanvasText;
+    }
+  }
+
+  /* Logical Icons8 chevrons opt into direction-aware motion. Brand and
+   * semantic glyphs do not receive a global transform. */
+  .noe-logical-icon[data-logical-direction="backward"],
+  [dir="rtl"] .noe-logical-icon[data-logical-direction="forward"] {
+    transform: rotate(180deg);
+  }
+
+  [dir="rtl"] .noe-logical-icon[data-logical-direction="backward"] {
+    transform: none;
+  }
+
+  /* Theme toggle — ported from NOEcosystem-Frontend-Light-Dark/public/theme.js styling.
+     Uses logical inset-inline-end so it mirrors to start edge in RTL. */
+  .noe-theme-toggle {
+    position: fixed;
+    inset-inline-end: 1rem;
+    bottom: 1rem;
+    z-index: 80;
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--noe-color-border);
+    border-radius: 999px;
+    background: var(--noe-color-surface-raised);
+    color: var(--noe-color-foreground);
+    box-shadow: var(--noe-shadow-raised);
+    cursor: pointer;
+    transition:
+      border-color var(--noe-motion-duration-fast) var(--noe-motion-easing-standard),
+      background var(--noe-motion-duration-fast) var(--noe-motion-easing-standard),
+      transform var(--noe-motion-duration-fast) var(--noe-motion-easing-standard);
+  }
+
+  .noe-theme-toggle:hover {
+    border-color: var(--mint);
+    transform: translateY(-1px);
+  }
+
+  .noe-theme-toggle svg {
+    width: 20px;
+    height: 20px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .noe-theme-toggle__sun,
+  .noe-theme-toggle__moon {
+    transition: opacity var(--noe-motion-duration-fast) var(--noe-motion-easing-standard);
+  }
+
+  [data-theme="dark"] .noe-theme-toggle__sun {
+    opacity: 0;
+  }
+
+  [data-theme="light"] .noe-theme-toggle__moon {
+    opacity: 0;
+  }
+
+  :root:not([data-theme]) .noe-theme-toggle__sun {
+    opacity: 0;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root:not([data-theme]) .noe-theme-toggle__sun {
+      opacity: 1;
+    }
+    :root:not([data-theme]) .noe-theme-toggle__moon {
+      opacity: 0;
+    }
+  }
+}
+
+[data-noe-app-root] {
+  isolation: isolate;
+  min-height: 100dvh;
+}

package/packages/design-tokens/src/fonts/README.md

@@ -0,0 +1,13 @@
+# NOE interface fonts — LICENSED
+
+**Status: LICENSED — `IRANYekanXVF.ttf` licensed to NOE (owner-provided).**
+
+* **File:** `IRANYekanXVF.ttf` ~254 KB (100–1000 variable), preferred for Persian weight flexibility; static `IRANYekanXFaNum` WOFF2 (400/500/600/700) as fallback. Provenance: supplied via `NOEcosystem-Frontend-Light-Dark.zip` and `injast-core` prototype; license now confirmed as **owner-provided (user)** per 2026-08-27. Recorded here; do not redistribute outside NOE without re-confirmation.
+* **License:** Owner-provided — permitted for NOE Design System publishing. File remains in `design-tokens` as reference; not moved en masse into `@noe/ui`.
+* **Mitigations implemented:**
+  * Subsetting to Persian/Arabic Unicode-range enforced in `fonts.css` (`U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+25CC, U+FB50-FDFF, U+FE70-FEFF`) — English never downloads Persian bytes; nested `[lang]` scopes resolve independently.
+  * Format: variable TTF 254k kept as variable source; WOFF2 static 25–28k each remain fallback. Evaluate WOFF2 variable subset + `unicode-range` split per weight in Phase 5.
+  * Loading: `font-display: swap` (in `fonts.css`), no preload (not justified without measured LCP); fallback metrics: `IRANYekanXFaNum` → `Tahoma, Arial, sans-serif` with `size-adjust` pending measurement.
+* **Usage:** `base.css` language-aware contract mirrors `app/globals.css`; `IRANYekanXVF` is primary for `fa`/`ar` scopes, `SF Pro` for `en`.
+
+English / Latin UI uses `--font-sf-pro` stack — `SF Pro Display` + `SF Pro Text` — matching landing-site `NOEcosystem-Frontend-Light-Dark`. Platform fallbacks intentional; Apple fonts not redistributed.

package/packages/design-tokens/src/fonts.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: "IRANYekanXFaNum";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./fonts/IRANYekanXFaNum-Regular.woff2") format("woff2");
+  unicode-range:
+    U+0600-06ff, U+0750-077f, U+08a0-08ff, U+200c-200d, U+25cc, U+fb50-fdff, U+fe70-feff;
+}
+
+@font-face {
+  font-family: "IRANYekanXFaNum";
+  font-style: normal;
+  font-weight: 500;
+  font-display: block;
+  src: url("./fonts/IRANYekanXFaNum-Medium.woff2") format("woff2");
+  unicode-range:
+    U+0600-06ff, U+0750-077f, U+08a0-08ff, U+200c-200d, U+25cc, U+fb50-fdff, U+fe70-feff;
+}
+
+@font-face {
+  font-family: "IRANYekanXFaNum";
+  font-style: normal;
+  font-weight: 600;
+  font-display: block;
+  src: url("./fonts/IRANYekanXFaNum-DemiBold.woff2") format("woff2");
+  unicode-range:
+    U+0600-06ff, U+0750-077f, U+08a0-08ff, U+200c-200d, U+25cc, U+fb50-fdff, U+fe70-feff;
+}
+
+@font-face {
+  font-family: "IRANYekanXFaNum";
+  font-style: normal;
+  font-weight: 700;
+  font-display: block;
+  src: url("./fonts/IRANYekanXFaNum-Bold.woff2") format("woff2");
+  unicode-range:
+    U+0600-06ff, U+0750-077f, U+08a0-08ff, U+200c-200d, U+25cc, U+fb50-fdff, U+fe70-feff;
+}
+
+@font-face {
+  font-family: "IRANYekanX";
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: block;
+  src: url("./fonts/IRANYekanXVF.ttf") format("truetype");
+  unicode-range:
+    U+0600-06ff, U+0750-077f, U+08a0-08ff, U+200c-200d, U+25cc, U+fb50-fdff, U+fe70-feff;
+}

package/packages/design-tokens/src/index.test.ts

@@ -0,0 +1,36 @@
+import { readFile } from 'node:fs/promises';
+
+import { describe, expect, it } from 'vitest';
+
+import { tokens } from './index';
+
+describe('NOE semantic tokens', () => {
+  it('defines independent light and dark semantic surfaces', () => {
+    expect(tokens.color.light.background).not.toBe(tokens.color.dark.background);
+    expect(tokens.color.light.foreground).not.toBe(tokens.color.dark.foreground);
+  });
+
+  it('defines focus, motion, control, and icon contracts', () => {
+    expect(tokens.color.light.focusRing).toBeTruthy();
+    expect(tokens.motion.duration.fast).toBeTruthy();
+    expect(tokens.control.height.md).toBeTruthy();
+    expect(tokens.icon.size.md).toBeTruthy();
+  });
+
+  it('uses SF Pro for Latin UI and self-hosted IRANYekan for Persian UI', async () => {
+    expect(tokens.font.family.sans).toContain('SF Pro Text');
+    expect(tokens.font.family.heading).toContain('SF Pro Display');
+
+    const fontCss = await readFile(new URL('./fonts.css', import.meta.url), 'utf8');
+    expect(fontCss).toMatch(/font-family:\s*["']IRANYekanXFaNum["']/);
+    expect(fontCss).toMatch(/unicode-range:\s*U\+0600-06ff/);
+  });
+
+  it('explicitly selects IRANYekan for Persian and Arabic language scopes', async () => {
+    const baseCss = await readFile(new URL('./base.css', import.meta.url), 'utf8');
+    expect(baseCss).toMatch(/html\[lang="fa"\][\s\S]*--noe-font-family-sans/);
+    expect(baseCss).toMatch(/html\[lang="ar"\]/);
+    expect(baseCss).toMatch(/"IRANYekanXFaNum",\s*"SF Pro Text"/);
+    expect(baseCss).toMatch(/"IRANYekanXFaNum",\s*"SF Pro Display"/);
+  });
+});

package/packages/design-tokens/src/index.ts

@@ -0,0 +1,5 @@
+import tokens from './tokens.json' with { type: 'json' };
+
+export { tokens };
+export type NoeTheme = 'light' | 'dark' | 'system';
+export type NoeSemanticColor = keyof typeof tokens.color.light;

package/packages/design-tokens/src/palette.ts

@@ -0,0 +1,27 @@
+/**
+ * Palette registry — single source of truth for approved document palettes.
+ * Graphite is the only approved palette. Future palettes must be added here
+ * and in tokens pipeline; ThemeProvider, init script, CSS and tests all derive
+ * from this registry to avoid hard-coded duplication.
+ */
+
+export const PALETTES = ["graphite"] as const;
+
+export type Palette = (typeof PALETTES)[number];
+
+export const DEFAULT_PALETTE: Palette = "graphite";
+
+export const PALETTE_STORAGE_KEY = "noecosystem-palette";
+export const PALETTE_COOKIE_KEY = "noecosystem-palette";
+
+export function isPalette(value: unknown): value is Palette {
+  return (PALETTES as readonly string[]).includes(value as string);
+}
+
+export const paletteRegistry = {
+  palettes: PALETTES,
+  defaultPalette: DEFAULT_PALETTE,
+  storageKey: PALETTE_STORAGE_KEY,
+  cookieKey: PALETTE_COOKIE_KEY,
+  isPalette,
+} as const;

package/packages/design-tokens/src/tailwind.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./base.css";

package/packages/design-tokens/src/theme.css

@@ -0,0 +1,67 @@
+@import "./tokens.css";
+
+@theme inline {
+  --color-background: var(--noe-color-background);
+  --color-foreground: var(--noe-color-foreground);
+  --color-surface: var(--noe-color-surface);
+  --color-surface-raised: var(--noe-color-surface-raised);
+  --color-surface-sunken: var(--noe-color-surface-sunken);
+  --color-muted: var(--noe-color-muted);
+  --color-muted-foreground: var(--noe-color-muted-foreground);
+  --color-border: var(--noe-color-border);
+  --color-border-strong: var(--noe-color-border-strong);
+  --color-accent: var(--noe-color-accent);
+  --color-accent-hover: var(--noe-color-accent-hover);
+  --color-accent-foreground: var(--noe-color-accent-foreground);
+  --color-signal: var(--noe-color-signal);
+  --color-success: var(--noe-color-success);
+  --color-success-foreground: var(--noe-color-success-foreground);
+  --color-warning: var(--noe-color-warning);
+  --color-warning-foreground: var(--noe-color-warning-foreground);
+  --color-destructive: var(--noe-color-destructive);
+  --color-destructive-foreground: var(--noe-color-destructive-foreground);
+  --color-info: var(--noe-color-info);
+  --color-info-foreground: var(--noe-color-info-foreground);
+  --color-focus-ring: var(--noe-color-focus-ring);
+  --color-overlay: var(--noe-color-overlay);
+
+  --font-sans: var(--noe-font-family-sans);
+  --font-heading: var(--noe-font-family-heading);
+  --font-mono: var(--noe-font-family-mono);
+
+  --text-xs: var(--noe-font-size-xs);
+  --text-sm: var(--noe-font-size-sm);
+  --text-base: var(--noe-font-size-md);
+  --text-lg: var(--noe-font-size-lg);
+  --text-xl: var(--noe-font-size-xl);
+  --text-2xl: var(--noe-font-size-2xl);
+
+  --radius-sm: var(--noe-radius-sm);
+  --radius-md: var(--noe-radius-md);
+  --radius-lg: var(--noe-radius-lg);
+  --radius-xl: var(--noe-radius-xl);
+  --radius-pill: var(--noe-radius-pill);
+
+  --spacing-0: var(--noe-space-0);
+  --spacing-1: var(--noe-space-1);
+  --spacing-2: var(--noe-space-2);
+  --spacing-3: var(--noe-space-3);
+  --spacing-4: var(--noe-space-4);
+  --spacing-5: var(--noe-space-5);
+  --spacing-6: var(--noe-space-6);
+  --spacing-8: var(--noe-space-8);
+  --spacing-10: var(--noe-space-10);
+  --spacing-12: var(--noe-space-12);
+  --spacing-16: var(--noe-space-16);
+  --spacing-20: var(--noe-space-20);
+  --spacing-24: var(--noe-space-24);
+  --spacing-icon-sm: var(--noe-icon-size-sm);
+  --spacing-icon-md: var(--noe-icon-size-md);
+  --spacing-icon-lg: var(--noe-icon-size-lg);
+
+  --shadow-raised: var(--noe-shadow-raised);
+  --shadow-overlay: var(--noe-shadow-overlay);
+
+  --ease-standard: var(--noe-motion-easing-standard);
+  --ease-emphasized: var(--noe-motion-easing-emphasized);
+}