@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/styles/tokens-export.scss

@@ -1,18 +0,0 @@
-/*! DEML Design Tokens — compiled from Viking-UI canonical tokens.
- *  Static CSS: npm run build:viking-ui:package */
-@use 'tokens';
-
-body {
-  font-size: var(--base-font-size);
-  color: var(--text-color);
-  background-color: var(--bg-color);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  letter-spacing: var(--header-letter-spacing);
-}

package/src/styles/tokens.scss

@@ -1,5 +0,0 @@
-/*! DEML Design Tokens — canonical source: packages/viking-ui/src/styles/_variables.scss
- *  Static CSS: npm run build:viking-ui:package (or python scripts/sync_design_system.py) */
-@use 'variables';
-@use 'series-colors';
-@use 'legacy-aliases';

package/src/styles/viking-ui-bundle.scss

@@ -1,23 +0,0 @@
-// Static CSS bundle entry — tokens + page shell + footer + navbar + a11y for non-Angular apps.
-@use 'fonts';
-@use 'typography';
-@use 'viking-ui' as *;
-@use 'static-primitives';
-@use 'buttons' as *;
-@use 'input' as *;
-@use 'drakkar-buttons' as *;
-@use 'components/a11y' as *;
-@use 'static-navbar' as *;
-@use 'components/footer' as *;
-@use 'components/whitepaper-cta' as *;
-@use 'surfaces/marketing-theme' as *;
-@use 'surfaces/marketing-cta' as *;
-@use 'surfaces/marketing-global' as *;
-@use 'surfaces/marketing-docs-bento' as *;
-@use 'surfaces/marketing-landing' as *;
-@use 'surfaces/marketing-publication' as *;
-@use 'surfaces/docs-showcase' as *;
-@use 'surfaces/docs-global' as *;
-@use 'surfaces/docs-shell' as *;
-@use 'surfaces/backend' as *;
-@use 'surfaces/swagger-ui' as *;

package/src/styles/viking-ui.scss

@@ -1,272 +0,0 @@
-@use 'variables';
-@use 'series-colors';
-@use 'legacy-aliases';
-@use 'typography';
-@use 'component-primitives';
-@use 'forms';
-@use 'buttons';
-@use 'layout-rhythm';
-@use 'layout-enforcement';
-@use 'page-shell';
-@use 'layout-shell';
-@use 'static-navbar';
-@use 'components/footer';
-
-// ============================================================================
-// Viking-UI design tokens
-// ----------------------------------------------------------------------------
-// Premium engineering aesthetic — dark-first navy surfaces, metallic accents,
-// electric blue primary + crimson secondary. Maps to parent DEML tokens when
-// present for Angular app compatibility; falls back to _variables.scss.
-// ============================================================================
-
-:root {
-  /* Accent — electric blue primary, crimson secondary */
-  --viking-accent: var(--color-primary, var(--viking-electric-500));
-  --viking-accent-hover: var(--viking-electric-400);
-  --viking-accent-content: var(--color-on-primary, var(--viking-white-pure));
-  --viking-accent-soft: color-mix(in srgb, var(--viking-accent) 18%, transparent);
-  --viking-accent-strong: var(--color-primary-container, var(--viking-electric-300));
-
-  --viking-accent-secondary: var(--accent-color, var(--viking-crimson-600));
-  --viking-accent-secondary-hover: var(--viking-crimson-500);
-  --viking-accent-secondary-content: var(--viking-white-pure);
-  --viking-accent-secondary-soft: color-mix(in srgb, var(--viking-accent-secondary) 16%, transparent);
-
-  /* Surfaces */
-  --viking-bg: var(--bg-color, var(--viking-charcoal-900));
-  --viking-surface: var(--card-bg, var(--viking-charcoal-800));
-  --viking-surface-alt: var(--color-surface-variant, var(--viking-charcoal-700));
-  --viking-surface-raised: var(--viking-charcoal-600);
-  --viking-overlay-backdrop: color-mix(in srgb, var(--viking-charcoal-950) 72%, transparent);
-
-  /* Text */
-  --viking-text: var(--text-color, var(--viking-white));
-  --viking-text-muted: var(--text-muted, var(--viking-metallic-200));
-  --viking-text-subtle: var(--viking-metallic-300);
-  --viking-text-inverted: var(--color-on-primary, var(--viking-charcoal-900));
-
-  /* Borders / focus — fallbacks match _variables.scss premium v2.1 depths */
-  --viking-border: var(--border, color-mix(in srgb, var(--viking-metallic-600) 48%, transparent));
-  --viking-border-strong: var(--border-layout, color-mix(in srgb, var(--viking-metallic-400) 68%, transparent));
-  --viking-border-subtle: color-mix(in srgb, var(--viking-metallic-600) 28%, transparent);
-  --viking-ring: var(--focus-ring-color, var(--viking-electric-400));
-  --viking-ring-width: var(--focus-ring-width, 2px);
-  --viking-ring-offset: var(--focus-ring-offset, 2px);
-
-  /* Status */
-  --viking-success: var(--color-success, var(--viking-green-500));
-  --viking-warning: var(--color-warning, var(--viking-gold-500));
-  --viking-danger: var(--color-error, var(--viking-crimson-500));
-  --viking-info: var(--color-info, var(--viking-blue-500));
-  --viking-danger-text: color-mix(in srgb, var(--viking-danger) 50%, var(--viking-charcoal-900));
-  --viking-on-danger: var(--viking-white-pure);
-
-  /* Shape */
-  --viking-radius-xs: 4px;
-  --viking-radius-sm: 6px;
-  --viking-radius: var(--border-radius-md, 8px);
-  --viking-radius-md: 10px;
-  --viking-radius-lg: var(--border-radius-lg, 12px);
-  --viking-radius-xl: 16px;
-  --viking-radius-pill: var(--border-radius-pill, 999px);
-
-  /* Elevation */
-  --viking-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --viking-shadow-sm: var(
-    --shadow-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)
-  );
-  --viking-shadow-md: var(
-    --shadow-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)
-  );
-  --viking-shadow-lg: var(
-    --shadow-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)
-  );
-  --viking-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.14);
-
-  /* Typography — 16px body floor, 14px Drakkar shell controls */
-  --viking-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
-  --viking-font-family-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas,
-    monospace;
-
-  --viking-font-size-2xs: 11px;
-  --viking-font-size-xs: 12px;
-  --viking-font-size-sm: max(14px, var(--ui-font-size, 14px));
-  --viking-font-size: max(16px, var(--base-font-size, 16px));
-  --viking-font-size-md: max(16px, calc(var(--viking-font-size) * 1.125));
-  --viking-font-size-lg: max(16px, calc(var(--viking-font-size) * 1.25));
-  --viking-font-size-xl: max(18px, calc(var(--viking-font-size) * 1.5));
-  --viking-font-size-2xl: max(20px, calc(var(--viking-font-size) * 1.875));
-  --viking-font-size-3xl: max(24px, calc(var(--viking-font-size) * 2.25));
-  --viking-font-size-4xl: max(30px, calc(var(--viking-font-size) * 3));
-
-  /* Legacy aliases (backward compatible) */
-  --viking-font-size-ui: var(--viking-font-size-sm);
-
-  --viking-font-weight-regular: 400;
-  --viking-font-weight-medium: 500;
-  --viking-font-weight-semibold: 600;
-  --viking-font-weight-bold: 700;
-
-  --viking-line-height-tight: 1.25;
-  --viking-line-height-snug: 1.375;
-  --viking-line-height-normal: 1.5;
-  --viking-line-height-relaxed: 1.625;
-  --viking-line-height-loose: 1.75;
-
-  --viking-letter-spacing-tight: var(--header-letter-spacing, -0.02em);
-  --viking-letter-spacing-normal: 0;
-  --viking-letter-spacing-wide: 0.025em;
-  --viking-letter-spacing-wider: 0.05em;
-  --viking-letter-spacing-caps: 0.08em;
-
-  /* Controls */
-  --viking-control-height: var(--viking-touch-target-min, 44px);
-  --viking-control-height-sm: 40px;
-  --viking-control-height-xs: 24px;
-  --viking-control-padding-x: var(--viking-space-2, 16px);
-  --viking-btn-min-width: var(--btn-min-width, 120px);
-
-  /* Spacing — canonical 4px grid. Legacy --space-* aliases map to these values. */
-  --viking-grid-unit: 4px;
-  --viking-space-0: 0;
-  --viking-space-half: 4px;
-  --viking-space-1: 8px;
-  --viking-space-1-5: 12px;
-  --viking-space-2: 16px;
-  --viking-space-3: 24px;
-  --viking-space-4: 32px;
-  --viking-space-5: 40px;
-  --viking-space-6: 48px;
-  --viking-space-7: 56px;
-  --viking-space-8: 64px;
-
-  /* Chart axis labels */
-  --viking-chart-axis-size: 12px;
-
-  /* Page shell */
-  --viking-container-max-width: var(--container-max-width, 1260px);
-  --viking-navbar-height: var(--navbar-height, 64px);
-  --viking-sidebar-width: 256px;
-
-  /* Motion */
-  --viking-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-  --viking-duration-fast: 150ms;
-  --viking-duration: 250ms;
-  --viking-duration-slow: 350ms;
-  --viking-transition-colors:
-    color var(--viking-duration) var(--viking-ease-default),
-    background-color var(--viking-duration) var(--viking-ease-default),
-    border-color var(--viking-duration) var(--viking-ease-default),
-    box-shadow var(--viking-duration) var(--viking-ease-default);
-  --viking-transition: var(--transition-smooth, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
-
-  /* Layering */
-  --viking-z-overlay: 1000;
-  --viking-z-toast: 1100;
-  --viking-z-tooltip: 1200;
-}
-
-/* Dark surfaces — danger text uses full crimson */
-html[data-theme='dark'] {
-  --viking-danger-text: var(--viking-danger);
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([data-theme='light']) {
-    --viking-danger-text: var(--viking-danger);
-  }
-}
-
-/* Smooth theme transitions on root surfaces */
-html {
-  color-scheme: dark light;
-}
-
-html,
-body,
-.viking-btn,
-.viking-card,
-.viking-hud-panel,
-.viking-metric-card,
-.viking-panel-card {
-  transition: var(--viking-transition-colors);
-}
-
-/* Mobile-first control sizing — compact controls from tablet/desktop up */
-@media (min-width: 768px) {
-  :root {
-    --viking-control-height: 40px;
-    --viking-control-height-sm: 32px;
-  }
-}
-
-/* Global tooltip surface (rendered on document.body by vikingTooltip directive) */
-.viking-tooltip {
-  position: fixed;
-  z-index: var(--viking-z-tooltip);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  max-width: min(20rem, calc(100vw - var(--viking-space-4)));
-  padding: var(--viking-space-half) var(--viking-space-1);
-  font-family: var(--viking-font-family);
-  font-size: var(--viking-font-size-ui);
-  line-height: var(--viking-line-height-snug);
-  color: var(--viking-text-inverted);
-  background: var(--viking-charcoal-900);
-  border: 1px solid var(--viking-border-strong);
-  border-radius: var(--viking-radius);
-  box-shadow: var(--viking-shadow-md);
-  pointer-events: none;
-  animation: viking-tooltip-in var(--viking-duration-fast) var(--viking-ease-out);
-}
-
-html[data-theme='light'] .viking-tooltip {
-  color: var(--viking-white-pure);
-  background: var(--viking-charcoal-800);
-  border-color: color-mix(in srgb, var(--viking-charcoal-600) 45%, transparent);
-}
-
-@media (prefers-color-scheme: light) {
-  html:not([data-theme='dark']) .viking-tooltip {
-    color: var(--viking-white-pure);
-    background: var(--viking-charcoal-800);
-    border-color: color-mix(in srgb, var(--viking-charcoal-600) 45%, transparent);
-  }
-}
-
-.viking-tooltip-text {
-  flex: 1;
-  min-width: 0;
-}
-
-.viking-tooltip-kbd {
-  font-family: var(--viking-font-family-mono);
-  font-size: var(--viking-font-size-xs);
-  padding: 0 var(--viking-space-half);
-  border: 1px solid color-mix(in srgb, var(--viking-text-inverted) 35%, transparent);
-  border-radius: var(--viking-radius-xs);
-  line-height: 1.4;
-  white-space: nowrap;
-}
-
-.viking-tooltip-host {
-  -webkit-tap-highlight-color: transparent;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .viking-tooltip {
-    animation: none;
-  }
-}

package/src/tokens/series-presets.ts

@@ -1,15 +0,0 @@
-/** 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/src/tokens/tailwind.preset.js

@@ -1,209 +0,0 @@
-/**
- * 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)",
-      },
-    },
-  },
-};