@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.2

package/src/styles/tokens-export.scss

@@ -0,0 +1,18 @@
+/*! 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

@@ -0,0 +1,5 @@
+/*! 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,5 +1,23 @@
 // Static CSS bundle entry — tokens + page shell + footer + navbar + a11y for non-Angular apps.
+@use 'fonts';
+@use 'typography';
 @use 'viking-ui' as *;
-@use '../../../../../packages/deml-design-system/src/components/a11y' as *;
+@use 'static-primitives';
+@use 'buttons' as *;
+@use 'input' as *;
+@use 'drakkar-buttons' as *;
+@use 'components/a11y' as *;
 @use 'static-navbar' as *;
-@use '../lib/footer/footer' 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,94 +1,173 @@
+@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';
 
 // ============================================================================
 // Viking-UI design tokens
 // ----------------------------------------------------------------------------
-// DEML clinical design system — Viking-UI patterns on THEME.md tokens.
-// Lab coat aesthetic: crayola-blue accents, sharp borders, no gradients.
-// 8px grid. 16px main / 14px UI font floors. No colors outside THEME.md.
+// 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 (Viking "accent" concept -> Material primary) */
-  --viking-accent: var(--color-primary, #2176ff);
-  --viking-accent-content: var(--color-on-primary, #ffffff);
-  --viking-accent-soft: color-mix(in srgb, var(--viking-accent) 12%, transparent);
-  --viking-accent-strong: var(--color-primary-container, #33a1fd);
+  /* 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, #ffffff);
-  --viking-surface: var(--card-bg, #ffffff);
-  --viking-surface-alt: var(--color-surface-variant, color-mix(in srgb, #31393c 5%, #ffffff));
-  --viking-overlay-backdrop: color-mix(in srgb, var(--jet-black, #31393c) 55%, transparent);
+  --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, #31393c);
-  --viking-text-muted: var(--text-muted, color-mix(in srgb, #31393c 72%, #ffffff));
-  --viking-text-inverted: var(--color-on-primary, #ffffff);
-
-  /* Borders / focus */
-  --viking-border: var(--border, color-mix(in srgb, #31393c 15%, transparent));
-  --viking-border-strong: var(--border-layout, color-mix(in srgb, #31393c 25%, transparent));
-  --viking-ring: var(--focus-ring-color, #2176ff);
-  --viking-ring-width: var(--focus-ring-width, 3px);
+  --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 (THEME.md semantic map) */
-  --viking-success: var(--color-success, #33a1fd);
-  --viking-warning: var(--color-warning, #fdca40);
-  --viking-danger: var(--color-error, #f79824);
-  --viking-info: var(--color-info, #2176ff);
-  /* Danger-tinted TEXT on light surfaces needs deepening for WCAG AA. */
-  --viking-danger-text: color-mix(in srgb, var(--viking-danger) 50%, var(--jet-black, #31393c));
-  /* Text placed ON danger-filled surfaces (carrot orange requires dark text). */
-  --viking-on-danger: var(--jet-black, #31393c);
-
-  /* Shape (8px grid) */
+  /* 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-lg: var(--border-radius-lg, 16px);
+  --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 — sharp and clinical, no diffuse glows */
+  /* Elevation */
+  --viking-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
   --viking-shadow-sm: var(
     --shadow-sm,
-    0 1px 2px color-mix(in srgb, #31393c 5%, transparent),
-    0 1px 3px color-mix(in srgb, #31393c 10%, transparent)
+    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 4px 6px -1px color-mix(in srgb, #31393c 10%, transparent),
-    0 2px 4px -1px color-mix(in srgb, #31393c 6%, transparent)
+    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 main content, 14px bold/UI chrome */
-  --viking-font-family: 'Inter', sans-serif;
+  /* 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-ui: max(14px, var(--ui-font-size, 14px));
-  --viking-font-size-lg: max(16px, calc(var(--viking-font-size) * 1.125));
-  --viking-font-size-xl: max(16px, calc(var(--viking-font-size) * 1.25));
+  --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;
 
-  /* Controls (8px grid heights) */
-  --viking-control-height: 40px;
-  --viking-control-height-sm: 32px;
+  --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(--space-2, 16px);
+  --viking-control-padding-x: var(--space-2, var(--viking-space-2, 16px));
   --viking-btn-min-width: var(--btn-min-width, 120px);
 
-  /* Spacing */
+  /* Spacing — 4px grid with legacy aliases */
+  --viking-grid-unit: 4px;
+  --viking-space-0: 0;
+  --viking-space-half: var(--space-half, 4px);
   --viking-space-1: var(--space-1, 8px);
+  --viking-space-1-5: var(--space-1-5, 12px);
   --viking-space-2: var(--space-2, 16px);
   --viking-space-3: var(--space-3, 24px);
   --viking-space-4: var(--space-4, 32px);
+  --viking-space-5: var(--space-5, 40px);
+  --viking-space-6: var(--space-6, 48px);
+  --viking-space-7: var(--space-7, 56px);
+  --viking-space-8: var(--space-8, 64px);
 
-  /* Chart axis labels — compact but WCAG-readable on chart surfaces */
+  /* 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-transition: var(--transition-smooth, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
+  --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;
@@ -96,7 +175,7 @@
   --viking-z-tooltip: 1200;
 }
 
-/* Dark surfaces give the raw danger orange sufficient contrast already. */
+/* Dark surfaces — danger text uses full crimson */
 html[data-theme='dark'] {
   --viking-danger-text: var(--viking-danger);
 }
@@ -106,3 +185,86 @@ html[data-theme='dark'] {
     --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;
+  }
+}