@dataengineeringformachinelearning/viking-ui 3.0.0-alpha.4 → 4.0.0

package/dist/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@dataengineeringformachinelearning/viking-ui",
+  "version": "4.0.0",
+  "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "private": false,
+  "main": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+  "module": "fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+  "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+  "style": "./dist/viking-ui.css",
+  "browser": "./dist/viking-ui-elements.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dataengineeringformachinelearning/dataengineeringformachinelearning.git",
+    "directory": "packages/viking-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+      "types": "./types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "default": "./fesm2022/dataengineeringformachinelearning-viking-ui.mjs"
+    },
+    "./dist/index.js": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+    "./dist/viking-ui.css": "./dist/viking-ui.css",
+    "./dist/viking-ui-elements.js": "./dist/viking-ui-elements.js",
+    "./dist/web-components.js": "./dist/web-components.js",
+    "./dist/widget.js": "./dist/widget.js",
+    "./elements": {
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/web-components.js",
+      "default": "./dist/web-components.js"
+    },
+    "./elements.js": "./dist/viking-ui-elements.js",
+    "./viking-ui-elements.js": "./dist/viking-ui-elements.js",
+    "./web-components.js": "./dist/web-components.js",
+    "./web-components": {
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/web-components.js",
+      "default": "./dist/web-components.js"
+    },
+    "./css": "./dist/viking-ui.css",
+    "./css/index.css": "./dist/viking-ui.css",
+    "./css/viking-ui.css": "./dist/viking-ui.css",
+    "./css/design-tokens.css": "./dist/design-tokens.css",
+    "./css/viking-components.css": "./dist/viking-components.css",
+    "./css/deml-components.css": "./dist/deml-components.css",
+    "./css/tokens.css": "./dist/design-tokens.css",
+    "./css/components.css": "./dist/viking-components.css",
+    "./design-tokens.css": "./dist/design-tokens.css",
+    "./tokens.css": "./dist/design-tokens.css",
+    "./tokens": "./dist/viking-tokens.json",
+    "./tokens.json": "./dist/viking-tokens.json",
+    "./viking-tokens.json": "./dist/viking-tokens.json",
+    "./components.css": "./dist/viking-components.css",
+    "./deml-components.css": "./dist/deml-components.css",
+    "./viking-ui.css": "./dist/viking-ui.css",
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0"
+  },
+  "sideEffects": [
+    "./dist/viking-ui-elements.js",
+    "./dist/viking-ui.css",
+    "./dist/design-tokens.css",
+    "./dist/viking-components.css",
+    "./dist/deml-components.css",
+    "./src/index.ts"
+  ],
+  "typings": "types/dataengineeringformachinelearning-viking-ui.d.ts",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/dist/scripts/build-web-components.mjs

@@ -0,0 +1,37 @@
+/**
+ * Bundles Viking-UI Web Components for framework-agnostic usage.
+ * Output: viking-ui-elements.js (IIFE, auto-registers custom elements)
+ */
+import { execSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkgDir = path.join(dirname, "..");
+const rootDir = path.join(pkgDir, "..", "..");
+const docsDir = path.join(rootDir, "viking-ui-docs");
+const outDir = path.join(docsDir, "dist", "static-css");
+const entry = path.join(pkgDir, "src", "web", "index.ts");
+const outFile = path.join(outDir, "viking-ui-elements.js");
+
+const esbuildCandidates = [
+  path.join(rootDir, "frontend", "node_modules", ".bin", "esbuild"),
+  path.join(docsDir, "node_modules", ".bin", "esbuild"),
+];
+const esbuildBin =
+  esbuildCandidates.find((candidate) => fs.existsSync(candidate)) ?? "esbuild";
+
+fs.mkdirSync(outDir, { recursive: true });
+
+execSync(
+  `"${esbuildBin}" "${entry}" --bundle --format=iife --global-name=VikingUI --outfile="${outFile}" --target=es2022 --minify`,
+  { cwd: pkgDir, stdio: "inherit" },
+);
+
+console.log(`Wrote ${outFile}`);
+
+// Mirror to docs public assets
+const publicAssetsDir = path.join(docsDir, "public", "assets");
+fs.mkdirSync(publicAssetsDir, { recursive: true });
+fs.copyFileSync(outFile, path.join(publicAssetsDir, "viking-ui-elements.js"));

package/dist/src/tokens/series-presets.ts

@@ -0,0 +1,15 @@
+/** Fixed series palette — keep in sync with viking-tokens.json and THEME.md §8.4 */
+export const VIKING_SERIES_PRESETS = [
+  "var(--viking-electric-500)",
+  "var(--viking-crimson-600)",
+  "var(--viking-green-500)",
+  "var(--viking-gold-500)",
+  "var(--viking-crimson-500)",
+  "var(--viking-blue-500)",
+  "var(--viking-charcoal-700)",
+  "var(--viking-metallic-500)",
+] as const;
+
+export const VIKING_SERIES_DEFAULT = VIKING_SERIES_PRESETS[0];
+
+export type VikingSeriesPreset = (typeof VIKING_SERIES_PRESETS)[number];

package/dist/src/tokens/tailwind.preset.js

@@ -0,0 +1,209 @@
+/**
+ * Viking-UI Tailwind CSS preset
+ * ---------------------------------------------------------------------------
+ * Maps Tailwind utilities to canonical --viking-* CSS custom properties.
+ * Use with Tailwind v3/v4: presets: [require('@dataengineeringformachinelearning/viking-ui/tokens/tailwind.preset')]
+ *
+ * Load viking-ui.css or design-tokens.css before Tailwind so variables resolve.
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        viking: {
+          bg: "var(--viking-bg)",
+          surface: "var(--viking-surface)",
+          "surface-alt": "var(--viking-surface-alt)",
+          "surface-raised": "var(--viking-surface-raised)",
+          text: "var(--viking-text)",
+          "text-muted": "var(--viking-text-muted)",
+          "text-subtle": "var(--viking-text-subtle)",
+          "text-inverted": "var(--viking-text-inverted)",
+          border: "var(--viking-border)",
+          "border-strong": "var(--viking-border-strong)",
+          "border-subtle": "var(--viking-border-subtle)",
+          accent: "var(--viking-accent)",
+          "accent-hover": "var(--viking-accent-hover)",
+          "accent-content": "var(--viking-accent-content)",
+          "accent-soft": "var(--viking-accent-soft)",
+          "accent-strong": "var(--viking-accent-strong)",
+          "accent-secondary": "var(--viking-accent-secondary)",
+          "accent-secondary-hover": "var(--viking-accent-secondary-hover)",
+          "accent-secondary-content": "var(--viking-accent-secondary-content)",
+          "accent-secondary-soft": "var(--viking-accent-secondary-soft)",
+          success: "var(--viking-success)",
+          warning: "var(--viking-warning)",
+          danger: "var(--viking-danger)",
+          info: "var(--viking-info)",
+          ring: "var(--viking-ring)",
+          charcoal: {
+            950: "var(--viking-charcoal-950)",
+            900: "var(--viking-charcoal-900)",
+            800: "var(--viking-charcoal-800)",
+            700: "var(--viking-charcoal-700)",
+            600: "var(--viking-charcoal-600)",
+            500: "var(--viking-charcoal-500)",
+          },
+          metallic: {
+            600: "var(--viking-metallic-600)",
+            500: "var(--viking-metallic-500)",
+            400: "var(--viking-metallic-400)",
+            300: "var(--viking-metallic-300)",
+            200: "var(--viking-metallic-200)",
+            100: "var(--viking-metallic-100)",
+          },
+          electric: {
+            900: "var(--viking-electric-900)",
+            800: "var(--viking-electric-800)",
+            700: "var(--viking-electric-700)",
+            600: "var(--viking-electric-600)",
+            500: "var(--viking-electric-500)",
+            400: "var(--viking-electric-400)",
+            300: "var(--viking-electric-300)",
+            200: "var(--viking-electric-200)",
+            100: "var(--viking-electric-100)",
+          },
+          teal: {
+            700: "var(--viking-electric-700)",
+            600: "var(--viking-electric-600)",
+            500: "var(--viking-electric-500)",
+            400: "var(--viking-electric-400)",
+            300: "var(--viking-electric-300)",
+          },
+          crimson: {
+            700: "var(--viking-crimson-700)",
+            600: "var(--viking-crimson-600)",
+            500: "var(--viking-crimson-500)",
+            400: "var(--viking-crimson-400)",
+          },
+          series: {
+            1: "var(--viking-series-1)",
+            2: "var(--viking-series-2)",
+            3: "var(--viking-series-3)",
+            4: "var(--viking-series-4)",
+            5: "var(--viking-series-5)",
+            6: "var(--viking-series-6)",
+            7: "var(--viking-series-7)",
+            8: "var(--viking-series-8)",
+            DEFAULT: "var(--viking-series-default)",
+          },
+        },
+      },
+      fontFamily: {
+        sans: ["var(--viking-font-family)"],
+        mono: ["var(--viking-font-family-mono)"],
+      },
+      fontSize: {
+        "viking-2xs": [
+          "var(--viking-font-size-2xs)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-xs": [
+          "var(--viking-font-size-xs)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-sm": [
+          "var(--viking-font-size-sm)",
+          { lineHeight: "var(--viking-line-height-normal)" },
+        ],
+        viking: [
+          "var(--viking-font-size)",
+          { lineHeight: "var(--viking-line-height-relaxed)" },
+        ],
+        "viking-md": [
+          "var(--viking-font-size-md)",
+          { lineHeight: "var(--viking-line-height-relaxed)" },
+        ],
+        "viking-lg": [
+          "var(--viking-font-size-lg)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-xl": [
+          "var(--viking-font-size-xl)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-2xl": [
+          "var(--viking-font-size-2xl)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-3xl": [
+          "var(--viking-font-size-3xl)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+        "viking-4xl": [
+          "var(--viking-font-size-4xl)",
+          { lineHeight: "var(--viking-line-height-tight)" },
+        ],
+      },
+      spacing: {
+        "viking-0": "var(--viking-space-0)",
+        "viking-px": "var(--viking-space-px)",
+        "viking-half": "var(--viking-space-half)",
+        "viking-1": "var(--viking-space-1)",
+        "viking-1.5": "var(--viking-space-1-5)",
+        "viking-2": "var(--viking-space-2)",
+        "viking-3": "var(--viking-space-3)",
+        "viking-4": "var(--viking-space-4)",
+        "viking-5": "var(--viking-space-5)",
+        "viking-6": "var(--viking-space-6)",
+        "viking-7": "var(--viking-space-7)",
+        "viking-8": "var(--viking-space-8)",
+        "viking-9": "var(--viking-space-9)",
+        "viking-10": "var(--viking-space-10)",
+      },
+      borderRadius: {
+        "viking-xs": "var(--viking-radius-xs)",
+        "viking-sm": "var(--viking-radius-sm)",
+        viking: "var(--viking-radius)",
+        "viking-md": "var(--viking-radius-md)",
+        "viking-lg": "var(--viking-radius-lg)",
+        "viking-xl": "var(--viking-radius-xl)",
+        "viking-pill": "var(--viking-radius-pill)",
+      },
+      boxShadow: {
+        "viking-xs": "var(--viking-shadow-xs)",
+        "viking-sm": "var(--viking-shadow-sm)",
+        "viking-md": "var(--viking-shadow-md)",
+        "viking-lg": "var(--viking-shadow-lg)",
+        "viking-inner": "var(--viking-shadow-inner)",
+        "viking-hover": "var(--viking-shadow-hover)",
+      },
+      transitionTimingFunction: {
+        viking: "var(--viking-ease-default)",
+        "viking-in": "var(--viking-ease-in)",
+        "viking-out": "var(--viking-ease-out)",
+      },
+      transitionDuration: {
+        "viking-fast": "var(--viking-duration-fast)",
+        viking: "var(--viking-duration)",
+        "viking-slow": "var(--viking-duration-slow)",
+      },
+      maxWidth: {
+        "viking-container": "var(--viking-container-max-width)",
+      },
+      height: {
+        "viking-control": "var(--viking-control-height)",
+        "viking-control-sm": "var(--viking-control-height-sm)",
+        "viking-control-xs": "var(--viking-control-height-xs)",
+        "viking-navbar": "var(--viking-navbar-height)",
+      },
+      width: {
+        "viking-sidebar": "var(--viking-sidebar-width)",
+        "viking-btn-min": "var(--viking-btn-min-width)",
+      },
+      zIndex: {
+        "viking-overlay": "var(--viking-z-overlay)",
+        "viking-toast": "var(--viking-z-toast)",
+        "viking-tooltip": "var(--viking-z-tooltip)",
+      },
+      outlineWidth: {
+        viking: "var(--viking-ring-width)",
+      },
+      outlineOffset: {
+        viking: "var(--viking-ring-offset)",
+      },
+    },
+  },
+};

package/dist/src/tokens/viking-tokens.json

@@ -0,0 +1,318 @@
+{
+  "$schema": "./viking-tokens.schema.json",
+  "meta": {
+    "name": "viking-ui",
+    "version": "2.1.0",
+    "description": "Canonical DEML design tokens — single source of truth for primitives, semantic aliases, and component foundations",
+    "canonicalScss": "../styles/_variables.scss",
+    "documentation": "../../../THEME.md"
+  },
+  "color": {
+    "navy": {
+      "1000": "#01030a",
+      "950": "#030818",
+      "900": "#0a1024",
+      "800": "#101b33",
+      "700": "#162544",
+      "600": "#1e3054",
+      "500": "#284068",
+      "400": "#39547f",
+      "300": "#58719e",
+      "200": "#8fa2c2",
+      "100": "#d7e0ef"
+    },
+    "charcoal": {
+      "950": "{color.navy.950}",
+      "900": "{color.navy.900}",
+      "800": "{color.navy.800}",
+      "700": "{color.navy.700}",
+      "600": "{color.navy.600}",
+      "500": "{color.navy.500}",
+      "400": "{color.navy.400}",
+      "300": "{color.navy.300}",
+      "200": "{color.navy.200}",
+      "100": "{color.navy.100}"
+    },
+    "electric": {
+      "900": "#04225f",
+      "800": "#073a99",
+      "700": "#0a4fd4",
+      "600": "#1565f0",
+      "500": "#2176ff",
+      "400": "#4d94ff",
+      "300": "#7ab0ff",
+      "200": "#b6d3ff",
+      "100": "#e7f1ff"
+    },
+    "metallic": {
+      "600": "#555555",
+      "500": "#666666",
+      "400": "#777777",
+      "300": "#999999",
+      "200": "#aaaaaa",
+      "100": "#bbbbbb",
+      "050": "#e6e8ec"
+    },
+    "teal": {
+      "700": "{color.electric.700}",
+      "600": "{color.electric.600}",
+      "500": "{color.electric.500}",
+      "400": "{color.electric.400}",
+      "300": "{color.electric.300}"
+    },
+    "crimson": {
+      "700": "#7a2231",
+      "600": "#922b3e",
+      "500": "#a83344",
+      "400": "#c44355",
+      "300": "#dc6b78",
+      "100": "#fde8ec"
+    },
+    "cyan": { "600": "#168aad", "500": "#1fa2c9", "400": "#47bee0" },
+    "violet": { "600": "#6f5bd7", "500": "#8674f0" },
+    "amber": { "600": "#a77912", "500": "#d69e2e" },
+    "green": { "500": "#2a9d8f" },
+    "gold": { "500": "#c4a035" },
+    "blue": { "500": "{color.electric.400}" },
+    "red": { "500": "{color.crimson.500}" },
+    "ink": {
+      "1000": "#000000",
+      "950": "#050609",
+      "900": "#0c0f14",
+      "800": "#151a22",
+      "700": "#202735"
+    },
+    "slate": { "100": "#f4f7fb", "050": "#fbfcfe" },
+    "white": "#f5f5f5",
+    "whitePure": "#ffffff",
+    "black": "#000000"
+  },
+  "series": {
+    "1": {
+      "hex": "#2176ff",
+      "token": "--viking-series-1",
+      "role": "Primary series, default selection"
+    },
+    "2": {
+      "hex": "#922b3e",
+      "token": "--viking-series-2",
+      "role": "Secondary / comparison series"
+    },
+    "3": {
+      "hex": "#2a9d8f",
+      "token": "--viking-series-3",
+      "role": "Success / stable metrics"
+    },
+    "4": {
+      "hex": "#c4a035",
+      "token": "--viking-series-4",
+      "role": "Warning / threshold proximity"
+    },
+    "5": {
+      "hex": "#a83344",
+      "token": "--viking-series-5",
+      "role": "Critical / anomaly series"
+    },
+    "6": {
+      "hex": "#4d94ff",
+      "token": "--viking-series-6",
+      "role": "Info / auxiliary series"
+    },
+    "7": {
+      "hex": "#162544",
+      "token": "--viking-series-7",
+      "role": "Baseline / muted series"
+    },
+    "8": {
+      "hex": "#666666",
+      "token": "--viking-series-8",
+      "role": "Disabled / archived series"
+    },
+    "default": "#2176ff"
+  },
+  "semantic": {
+    "dark": {
+      "bg": "navy.900",
+      "bgSubtle": "ink.950",
+      "surface": "navy.800",
+      "surfaceAlt": "navy.700",
+      "surfaceInset": "navy.950",
+      "surfaceRaised": "navy.600",
+      "surfaceOverlay": "ink.800",
+      "text": "white",
+      "textMuted": "metallic.200",
+      "textSubtle": "metallic.300",
+      "textDisabled": "metallic.400",
+      "textLink": "electric.300",
+      "accent": "electric.500",
+      "accentHover": "electric.400",
+      "accentActive": "electric.700",
+      "accentSoft": "color-mix(in srgb, #2176ff 18%, transparent)",
+      "accentSecondary": "crimson.600",
+      "success": "green.500",
+      "warning": "gold.500",
+      "danger": "crimson.500",
+      "info": "blue.500",
+      "ring": "electric.400"
+    },
+    "light": {
+      "bg": "slate.050",
+      "bgSubtle": "slate.100",
+      "surface": "whitePure",
+      "surfaceAlt": "slate.100",
+      "surfaceInset": "metallic.050",
+      "surfaceRaised": "whitePure",
+      "surfaceOverlay": "whitePure",
+      "text": "navy.900",
+      "textMuted": "metallic.500",
+      "textSubtle": "metallic.400",
+      "textDisabled": "metallic.300",
+      "textLink": "electric.700",
+      "accent": "electric.600",
+      "accentHover": "electric.500",
+      "accentActive": "electric.700",
+      "accentSoft": "color-mix(in srgb, #1565f0 14%, transparent)",
+      "accentSecondary": "crimson.700",
+      "success": "green.500",
+      "warning": "gold.500",
+      "danger": "crimson.500",
+      "info": "blue.500",
+      "ring": "electric.500"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "mono": "ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace"
+    },
+    "fontSize": {
+      "2xs": "11px",
+      "xs": "12px",
+      "sm": "14px",
+      "base": "16px",
+      "md": "18px",
+      "lg": "20px",
+      "xl": "24px",
+      "2xl": "30px",
+      "3xl": "36px",
+      "4xl": "48px",
+      "5xl": "60px",
+      "6xl": "72px"
+    },
+    "fontWeight": {
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700,
+      "extrabold": 800
+    },
+    "lineHeight": {
+      "tight": 1.25,
+      "snug": 1.375,
+      "normal": 1.5,
+      "relaxed": 1.625,
+      "loose": 1.75
+    },
+    "letterSpacing": {
+      "tighter": "-0.03em",
+      "tight": "-0.02em",
+      "normal": "0",
+      "wide": "0.025em",
+      "wider": "0.05em",
+      "caps": "0.08em"
+    }
+  },
+  "spacing": {
+    "gridUnit": "4px",
+    "spaceUnit": "8px",
+    "0": "0",
+    "px": "1px",
+    "half": "4px",
+    "0.5": "4px",
+    "1": "8px",
+    "1.5": "12px",
+    "2": "16px",
+    "2.5": "20px",
+    "3": "24px",
+    "4": "32px",
+    "5": "40px",
+    "6": "48px",
+    "7": "56px",
+    "8": "64px",
+    "8.5": "72px",
+    "9": "80px",
+    "10": "96px",
+    "11": "112px",
+    "12": "128px",
+    "14": "160px",
+    "16": "192px",
+    "20": "256px",
+    "24": "320px"
+  },
+  "radius": {
+    "xs": "4px",
+    "sm": "6px",
+    "DEFAULT": "8px",
+    "md": "10px",
+    "lg": "12px",
+    "xl": "16px",
+    "2xl": "24px",
+    "pill": "999px",
+    "full": "999px"
+  },
+  "shadow": {
+    "xs": "0 1px 2px rgba(0, 0, 0, 0.2)",
+    "sm": "0 1px 2px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04)",
+    "md": "0 2px 4px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05)",
+    "lg": "0 4px 8px rgba(0,0,0,0.14), 0 12px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06)",
+    "inner": "inset 0 1px 2px rgba(0, 0, 0, 0.14)",
+    "hover": "0 8px 16px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.06)",
+    "focus": "0 0 0 var(--viking-ring-offset) var(--viking-bg), 0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width)) var(--viking-ring)",
+    "surfaceHighlight": "inset 0 1px 0 rgba(255,255,255,0.06)"
+  },
+  "motion": {
+    "ease": {
+      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "emphasized": "cubic-bezier(0.2, 0, 0, 1)"
+    },
+    "duration": {
+      "instant": "75ms",
+      "fast": "150ms",
+      "DEFAULT": "250ms",
+      "slow": "350ms",
+      "slower": "500ms"
+    },
+    "state": {
+      "hoverLift": "-1px",
+      "activeScale": "0.985",
+      "disabledOpacity": "0.48"
+    }
+  },
+  "layout": {
+    "containerMaxWidth": "1260px",
+    "navbarHeight": "64px",
+    "sidebarWidth": "256px",
+    "controlHeight": "40px",
+    "controlHeightSm": "32px",
+    "controlHeightXs": "24px",
+    "btnMinWidth": "120px",
+    "touchTargetMin": "44px",
+    "pageGutter": "16px",
+    "pageGutterLg": "24px",
+    "pageStackGap": "24px",
+    "pageSectionGap": "32px",
+    "cardPadding": "24px",
+    "cardPaddingCompact": "16px",
+    "panelPadding": "24px",
+    "formMaxWidth": "42rem",
+    "formNarrowMaxWidth": "28rem",
+    "contentReadableMaxWidth": "48rem"
+  },
+  "zIndex": {
+    "overlay": 1000,
+    "toast": 1100,
+    "tooltip": 1200
+  }
+}