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

package/src/styles/_input.scss

@@ -0,0 +1,106 @@
+// ============================================================================
+// Viking-UI Input System — canonical styles for viking-input + static HTML
+// Single source of truth aligned to THEME.md §8 (composable field stack)
+// ============================================================================
+
+@use 'forms' as forms;
+
+@mixin viking-input-shell {
+  @include forms.viking-control-surface;
+}
+
+@mixin viking-input-native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none !important;
+  background: transparent;
+  color: var(--viking-text);
+  font-family: var(--viking-font-family);
+  font-size: var(--viking-font-size);
+  padding: 0;
+
+  &::placeholder {
+    color: var(--viking-text-muted);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+@mixin viking-input-clear-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--viking-touch-target-comfort);
+  min-height: var(--viking-touch-target-comfort);
+  border: none;
+  background: transparent;
+  color: var(--viking-text-muted);
+  cursor: pointer;
+  padding: var(--viking-space-half);
+  border-radius: var(--viking-radius-pill);
+  transition: var(--viking-transition-interactive);
+  position: relative;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    color: var(--viking-text);
+    background: var(--viking-accent-soft);
+  }
+
+  &:focus-visible {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+  }
+
+  &:active {
+    transform: scale(var(--viking-state-active-scale));
+  }
+}
+
+// Static HTML / Django / Astro native inputs
+.viking-input,
+.viking-input-shell {
+  @include viking-input-shell;
+}
+
+.viking-input input,
+.viking-input-shell input,
+input.viking-input-native {
+  @include viking-input-native;
+}
+
+.viking-input-clear {
+  @include viking-input-clear-btn;
+}
+
+.viking-input-kbd {
+  font-family: var(--viking-font-family-mono);
+  font-size: var(--viking-font-size-xs);
+  color: var(--viking-text-muted);
+  background: var(--viking-surface-alt);
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-xs);
+  padding: 0 var(--viking-space-half);
+  line-height: 1.4;
+}
+
+.viking-input-icon {
+  color: var(--viking-text-muted);
+  flex-shrink: 0;
+}
+
+.viking-input-shell.viking-disabled,
+.viking-input-shell.viking-loading,
+.viking-input.viking-disabled,
+.viking-input.viking-loading {
+  opacity: var(--viking-state-disabled-opacity);
+}
+
+.viking-input-shell.viking-loading,
+.viking-input.viking-loading {
+  cursor: wait;
+}

package/src/styles/_layout-enforcement.scss

@@ -0,0 +1,166 @@
+// ============================================================================
+// Viking-UI Layout Enforcement — premium rhythm applied globally
+// Prevents Spartan-style drift: generous gutters, card padding, readable widths.
+// Imported by viking-ui.scss and viking-ui-bundle.scss on every DEML surface.
+// ============================================================================
+
+@mixin viking-surface-hairline {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(
+        in srgb,
+        var(--viking-metallic-200) var(--viking-surface-hairline-strength, 22%),
+        transparent
+      ),
+      transparent
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+// ── Page shell rhythm (deml.app, backend, dashboards) ───────────────────────
+.dashboard-page-container .page-inner-wrapper,
+.viking-app-page .page-inner-wrapper,
+.viking-dashboard-page .page-inner-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-page-stack-gap);
+  flex: 1;
+  padding-block: var(--viking-page-gutter-lg);
+  padding-inline: var(--viking-page-gutter-lg);
+  box-sizing: border-box;
+
+  @media (min-width: 1440px) {
+    padding-inline: var(--viking-page-gutter-xl);
+  }
+}
+
+.viking-page-stack,
+.viking-content-stack {
+  gap: var(--viking-page-stack-gap);
+}
+
+// ── Static card surface (non-Angular HTML, Django, Swagger) ─────────────────
+.viking-card {
+  display: block;
+  background: var(--viking-surface-recipe, var(--viking-surface));
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-lg);
+  box-shadow: var(--viking-shadow-sm);
+  padding: var(--viking-card-padding);
+  color: var(--viking-text);
+  min-width: var(--viking-card-min-width);
+  max-width: var(--viking-card-max-width);
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: var(--viking-transition-interactive);
+
+  @include viking-surface-hairline;
+
+  &.viking-card-compact,
+  &--compact {
+    padding: var(--viking-card-padding-compact);
+  }
+
+  &.viking-card-interactive:hover {
+    border-color: var(--viking-accent-strong);
+    box-shadow: var(--viking-shadow-hover);
+    transform: translateY(var(--viking-state-hover-lift));
+  }
+}
+
+// ── Form width constraints ──────────────────────────────────────────────────
+.viking-form-constrained,
+.viking-form-narrow,
+.viking-login-form,
+.login-shell .viking-card,
+.login-shell form {
+  width: 100%;
+  max-width: var(--viking-form-max-width);
+  margin-inline: auto;
+}
+
+.viking-form-narrow,
+.login-shell .viking-card,
+.login-shell form {
+  max-width: var(--viking-form-narrow-max-width);
+}
+
+.viking-form-constrained .viking-form-section,
+.viking-form-constrained viking-form-section,
+.viking-form-narrow .viking-form-section,
+.viking-form-narrow viking-form-section {
+  max-width: var(--viking-form-max-width);
+}
+
+.viking-readable-prose,
+.viking-section-lead,
+.viking-page-header-subtitle {
+  max-width: var(--viking-content-readable-max-width);
+}
+
+// ── Panel / HUD depth — override Spartan flat defaults ──────────────────────
+.viking-hud-panel,
+.panel-section,
+.viking-panel-card,
+.status-card-outlined,
+.panel-card {
+  min-width: var(--viking-card-min-width);
+}
+
+.viking-hud-panel-header,
+.panel-header,
+.viking-panel-card-header,
+.card-header-clean {
+  padding: var(--viking-panel-header-padding);
+}
+
+.viking-panel-card-body,
+.card-body-clean,
+.viking-hud-panel-body,
+.panel-body {
+  padding: var(--viking-panel-padding);
+}
+
+.panel-card {
+  padding: var(--viking-panel-padding);
+}
+
+// ── Metric tiles stay compact; panels get generous rhythm ─────────────────────
+.viking-metric-card,
+.metric-card {
+  padding: var(--viking-card-padding-compact);
+}
+
+// ── Page headers — generous section break ───────────────────────────────────
+.viking-page-header,
+.hud-header,
+.dashboard-topbar {
+  gap: var(--viking-space-3);
+  padding-bottom: var(--viking-space-3);
+  margin-bottom: var(--viking-page-section-gap);
+}
+
+.viking-page-header-sidebar.dashboard-topbar {
+  padding: var(--viking-space-3);
+}
+
+// ── Footer — match marketing generous padding ───────────────────────────────
+.viking-footer,
+.mega-footer {
+  padding: var(--viking-space-6) var(--viking-page-gutter-lg);
+}
+
+// ── Bento grid pairing (docs / marketing panels) ─────────────────────────────
+// When a full-width lead card spans the grid, remaining half-width tiles MUST
+// be an even count (2, 4, 6…) so 2-column layouts never orphan a single tile.
+// Mark compliant grids with data-bento-even-pairs="true" (DocsBentoGrid evenPairs).
+// Orphan safety net lives in surfaces/marketing-docs-bento.scss.

package/src/styles/_layout-rhythm.scss

@@ -0,0 +1,158 @@
+// ============================================================================
+// Viking-UI Layout Rhythm — composable spacing primitives
+// All gaps resolve to the 4px grid via --viking-space-* tokens.
+// ============================================================================
+
+.viking-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-stack-gap, var(--viking-space-3));
+  align-items: var(--viking-stack-align, stretch);
+}
+
+.viking-stack--tight {
+  --viking-stack-gap: var(--viking-space-1);
+}
+
+.viking-stack--compact {
+  --viking-stack-gap: var(--viking-space-1-5);
+}
+
+.viking-stack--loose {
+  --viking-stack-gap: var(--viking-space-4);
+}
+
+.viking-stack--center {
+  --viking-stack-align: center;
+}
+
+.viking-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--viking-cluster-gap, var(--viking-space-2));
+  align-items: var(--viking-cluster-align, center);
+  justify-content: var(--viking-cluster-justify, flex-start);
+}
+
+.viking-cluster--between {
+  --viking-cluster-justify: space-between;
+}
+
+.viking-cluster--end {
+  --viking-cluster-justify: flex-end;
+}
+
+.viking-cluster--tight {
+  --viking-cluster-gap: var(--viking-space-half);
+}
+
+.viking-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-inline-gap, var(--viking-space-half));
+}
+
+.viking-inline--wide {
+  --viking-inline-gap: var(--viking-space-1);
+}
+
+.viking-grid {
+  display: grid;
+  gap: var(--viking-grid-gap, var(--viking-space-3));
+  width: 100%;
+}
+
+.viking-grid--tight {
+  --viking-grid-gap: var(--viking-space-1);
+}
+
+.viking-grid--loose {
+  --viking-grid-gap: var(--viking-space-4);
+}
+
+.viking-grid--2,
+.viking-grid--3,
+.viking-grid--4 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .viking-grid--2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .viking-grid--3,
+  .viking-grid--4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .viking-grid--3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .viking-grid--4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.viking-divider {
+  border: 0;
+  border-top: 1px solid var(--viking-border-subtle);
+  margin: var(--viking-space-3) 0;
+}
+
+.viking-divider--strong {
+  border-top-color: var(--viking-border);
+}
+
+.viking-surface-panel,
+.glass-panel {
+  background: var(--viking-surface);
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-lg);
+  box-shadow: var(--viking-shadow-sm);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--viking-metallic-200) var(--viking-surface-hairline-strength, 22%), transparent),
+      transparent
+    );
+    pointer-events: none;
+  }
+}
+
+.viking-status-dot {
+  display: inline-block;
+  width: var(--viking-space-1);
+  height: var(--viking-space-1);
+  border-radius: var(--viking-radius-pill);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.viking-status-dot--pulse,
+.telemetry-pulse {
+  position: relative;
+}
+
+.viking-status-dot--pulse::after,
+.telemetry-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: currentColor;
+  opacity: 0.35;
+  animation: viking-pulse-soft 2s var(--viking-ease-default) infinite;
+  pointer-events: none;
+}

package/src/styles/_legacy-aliases.scss

@@ -0,0 +1,212 @@
+// ============================================================================
+// Legacy DEML token aliases
+// ----------------------------------------------------------------------------
+// Maps pre-Viking-UI variable names to canonical --viking-* tokens so parent
+// apps, Django templates, and static CSS bundles stay compatible.
+// ============================================================================
+
+:root {
+  /* Primitive aliases (short names used in older SCSS) */
+  --charcoal-950: var(--viking-charcoal-950);
+  --charcoal-900: var(--viking-charcoal-900);
+  --charcoal-800: var(--viking-charcoal-800);
+  --charcoal-700: var(--viking-charcoal-700);
+  --charcoal-600: var(--viking-charcoal-600);
+  --charcoal-500: var(--viking-charcoal-500);
+
+  --metallic-600: var(--viking-metallic-600);
+  --metallic-500: var(--viking-metallic-500);
+  --metallic-400: var(--viking-metallic-400);
+  --metallic-300: var(--viking-metallic-300);
+  --metallic-200: var(--viking-metallic-200);
+  --metallic-100: var(--viking-metallic-100);
+
+  --white: var(--viking-white-pure);
+  --black: var(--viking-black);
+
+  /* Typography floors */
+  --base-font-size: var(--viking-font-size-base);
+  --ui-font-size: var(--viking-font-size-sm);
+  --header-letter-spacing: var(--viking-letter-spacing-tight);
+
+  /* Spacing — legacy --space-N (4px grid) */
+  --grid-unit: var(--viking-grid-unit);
+  --space-0: var(--viking-space-0);
+  --space-half: var(--viking-space-half);
+  --space-0-5: var(--viking-space-0-5);
+  --space-1: var(--viking-space-1);
+  --space-1-5: var(--viking-space-1-5);
+  --space-2: var(--viking-space-2);
+  --space-2-5: var(--viking-space-2-5);
+  --space-3: var(--viking-space-3);
+  --space-4: var(--viking-space-4);
+  --space-5: var(--viking-space-5);
+  --space-6: var(--viking-space-6);
+  --space-7: var(--viking-space-7);
+  --space-8: var(--viking-space-8);
+  --space-8-5: var(--viking-space-8-5);
+  --space-9: var(--viking-space-9);
+  --space-10: var(--viking-space-10);
+  --space-11: var(--viking-space-11);
+  --space-12: var(--viking-space-12);
+  --space-14: var(--viking-space-14);
+  --space-16: var(--viking-space-16);
+  --space-20: var(--viking-space-20);
+  --space-24: var(--viking-space-24);
+  --grid-gap: var(--viking-space-3);
+  --card-padding: var(--viking-card-padding);
+
+  /* Layout rhythm aliases */
+  --page-gutter: var(--viking-page-gutter);
+  --page-gutter-lg: var(--viking-page-gutter-lg);
+  --page-stack-gap: var(--viking-page-stack-gap);
+  --page-section-gap: var(--viking-page-section-gap);
+  --form-max-width: var(--viking-form-max-width);
+  --form-narrow-max-width: var(--viking-form-narrow-max-width);
+  --content-readable-max-width: var(--viking-content-readable-max-width);
+
+  /* Layout */
+  --container-max-width: var(--viking-container-max-width);
+  --navbar-height: var(--viking-navbar-height);
+  --btn-min-width: var(--viking-btn-min-width);
+
+  /* Radii */
+  --border-radius-xs: var(--viking-radius-xs);
+  --border-radius-sm: var(--viking-radius-sm);
+  --border-radius-md: var(--viking-radius);
+  --border-radius-lg: var(--viking-radius-lg);
+  --border-radius-xl: var(--viking-radius-xl);
+  --border-radius-pill: var(--viking-radius-pill);
+
+  /* Motion & elevation */
+  --transition-smooth: var(--viking-transition);
+  --shadow-sm: var(--viking-shadow-sm);
+  --shadow-md: var(--viking-shadow-md);
+  --shadow-lg: var(--viking-shadow-lg);
+  --shadow-hover: var(--viking-shadow-hover);
+
+  /* Semantic short names */
+  --primary-color: var(--viking-electric-500);
+  --accent-color: var(--viking-crimson-600);
+
+  /* Focus */
+  --focus-ring-width: var(--viking-ring-width);
+  --focus-ring-offset: var(--viking-ring-offset);
+}
+
+:root,
+html[data-theme='dark'] {
+  --color-primary: var(--viking-electric-500);
+  --color-on-primary: var(--viking-white-pure);
+  --color-primary-container: var(--viking-electric-400);
+  --color-on-primary-container: var(--viking-charcoal-900);
+
+  --color-surface: var(--viking-charcoal-800);
+  --color-on-surface: var(--viking-white);
+  --color-background: var(--viking-charcoal-900);
+  --color-on-background: var(--viking-white);
+  --color-surface-variant: var(--viking-charcoal-700);
+
+  --color-success: var(--viking-green-500);
+  --color-warning: var(--viking-gold-500);
+  --color-error: var(--viking-crimson-500);
+  --color-info: var(--viking-blue-500);
+  --color-gauge-red: var(--color-error);
+
+  --border: var(--viking-border);
+  --border-layout: var(--viking-border-strong);
+
+  --hover-color: var(--viking-electric-400);
+  --bg-color: var(--viking-bg);
+  --text-color: var(--viking-text);
+  --text-muted: var(--viking-text-muted);
+  --card-bg: var(--viking-surface);
+  --navbar-bg: color-mix(in srgb, var(--viking-bg) 96%, transparent);
+  --link-color: var(--viking-electric-300);
+  --link-hover-color: var(--viking-electric-400);
+  --hero-title-color: var(--viking-white);
+  --primary-text-color: var(--viking-electric-300);
+
+  --button-primary: var(--color-primary);
+  --button-primary-text: var(--viking-white-pure);
+  --color-dark-grey-btn-bg: var(--viking-charcoal-700);
+  --color-dark-grey-btn-text: var(--viking-white);
+
+  --focus-ring-color: var(--viking-electric-400);
+}
+
+html[data-theme='light'] {
+  --color-primary: var(--viking-electric-600);
+  --color-on-primary: var(--viking-white-pure);
+  --color-primary-container: var(--viking-teal-500);
+  --color-on-primary-container: var(--viking-white-pure);
+
+  --color-surface: var(--viking-white-pure);
+  --color-on-surface: var(--viking-charcoal-900);
+  --color-background: var(--viking-white-pure);
+  --color-on-background: var(--viking-charcoal-900);
+  --color-surface-variant: var(--viking-surface-alt);
+
+  --color-success: var(--viking-green-500);
+  --color-warning: var(--viking-gold-500);
+  --color-error: var(--viking-crimson-700);
+  --color-info: var(--viking-blue-500);
+  --color-gauge-red: var(--color-error);
+
+  --border: var(--viking-border);
+  --border-layout: var(--viking-border-strong);
+
+  --hover-color: var(--viking-electric-500);
+  --bg-color: var(--viking-bg);
+  --text-color: var(--viking-text);
+  --text-muted: var(--viking-text-muted);
+  --card-bg: var(--viking-surface);
+  --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
+  --link-color: var(--viking-electric-700);
+  --link-hover-color: var(--viking-electric-600);
+  --hero-title-color: var(--viking-charcoal-900);
+  --primary-text-color: var(--viking-electric-700);
+
+  --button-primary: var(--color-primary);
+  --button-primary-text: var(--color-on-primary);
+  --color-dark-grey-btn-bg: var(--viking-charcoal-800);
+  --color-dark-grey-btn-text: var(--viking-white);
+
+  --focus-ring-color: var(--viking-electric-500);
+}
+
+@media (prefers-color-scheme: light) {
+  html:not([data-theme='dark']) {
+    --color-primary: var(--viking-electric-600);
+    --color-on-primary: var(--viking-white-pure);
+    --color-primary-container: var(--viking-teal-500);
+    --color-on-primary-container: var(--viking-white-pure);
+    --color-surface: var(--viking-white-pure);
+    --color-on-surface: var(--viking-charcoal-900);
+    --color-background: var(--viking-white-pure);
+    --color-on-background: var(--viking-charcoal-900);
+    --color-surface-variant: var(--viking-surface-alt);
+    --color-success: var(--viking-green-500);
+    --color-warning: var(--viking-gold-500);
+    --color-error: var(--viking-crimson-700);
+    --color-info: var(--viking-blue-500);
+    --color-gauge-red: var(--color-error);
+    --border: var(--viking-border);
+    --border-layout: var(--viking-border-strong);
+    --hover-color: var(--viking-electric-500);
+    --bg-color: var(--viking-bg);
+    --text-color: var(--viking-text);
+    --text-muted: var(--viking-text-muted);
+    --card-bg: var(--viking-surface);
+    --navbar-bg: color-mix(in srgb, var(--viking-white-pure) 96%, transparent);
+    --link-color: var(--viking-electric-700);
+    --link-hover-color: var(--viking-electric-600);
+    --hero-title-color: var(--viking-charcoal-900);
+    --primary-text-color: var(--viking-electric-700);
+    --button-primary: var(--color-primary);
+    --button-primary-text: var(--color-on-primary);
+    --color-dark-grey-btn-bg: var(--viking-charcoal-800);
+    --color-dark-grey-btn-text: var(--viking-white);
+    --focus-ring-color: var(--viking-electric-500);
+  }
+}

package/src/styles/_series-colors.scss

@@ -0,0 +1,24 @@
+// ============================================================================
+// Viking-UI Series Color Tokens
+// ----------------------------------------------------------------------------
+// Fixed palette for telemetry series, chart lines, and viking-color-picker.
+// Values mirror THEME.md §8.4 — do not add off-palette swatches in product UI.
+// ============================================================================
+
+:root {
+  --viking-series-1: var(--viking-electric-500);
+  --viking-series-2: var(--viking-crimson-600);
+  --viking-series-3: var(--viking-green-500);
+  --viking-series-4: var(--viking-gold-500);
+  --viking-series-5: var(--viking-crimson-500);
+  --viking-series-6: var(--viking-blue-500);
+  --viking-series-7: var(--viking-charcoal-700);
+  --viking-series-8: var(--viking-metallic-500);
+
+  --viking-series-default: var(--viking-series-1);
+
+  /* Premium palette v3 — electric primary, crimson secondary, semantic + muted slots */
+  --viking-series-palette: var(--viking-series-1), var(--viking-series-2),
+    var(--viking-series-3), var(--viking-series-4), var(--viking-series-5),
+    var(--viking-series-6), var(--viking-series-7), var(--viking-series-8);
+}