@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/styles/_forms.scss

@@ -1,66 +0,0 @@
-// ============================================================================
-// Viking-UI Form Control Primitives — field stack foundation
-// Shared `.viking-control` surface used by viking-input, viking-select, etc.
-// ============================================================================
-
-@mixin viking-control-surface {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  min-height: var(--viking-control-height);
-  padding: 0 var(--viking-space-2);
-  font-family: var(--viking-font-family);
-  font-size: var(--viking-font-size);
-  color: var(--viking-text);
-  background: var(--viking-surface-alt);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-sm);
-  box-shadow: var(--viking-shadow-xs);
-  transition: var(--viking-transition-interactive);
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-
-  &:hover:not(.viking-disabled):not(.viking-loading):not(:disabled) {
-    border-color: color-mix(in srgb, var(--viking-accent) 35%, var(--viking-border-strong));
-    box-shadow: var(--viking-shadow-sm);
-  }
-
-  &:focus-within:not(.viking-loading) {
-    outline: var(--viking-ring-width) solid var(--viking-ring);
-    outline-offset: var(--viking-ring-offset);
-    border-color: var(--viking-accent);
-    box-shadow: var(--viking-shadow-sm);
-  }
-}
-
-.viking-control {
-  @include viking-control-surface;
-}
-
-.viking-form-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-  width: 100%;
-  max-width: var(--viking-form-max-width);
-
-  @media (min-width: 600px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.viking-form-row--3 {
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-// Form action buttons — no forced min-width in inline toolbars
-.viking-form-section-actions viking-button .viking-btn,
-.viking-modal-footer viking-button .viking-btn,
-.viking-sheet-footer viking-button .viking-btn,
-.viking-empty-state-actions viking-button .viking-btn,
-.viking-chart-empty-actions viking-button .viking-btn {
-  min-width: 0;
-}

package/src/styles/_input.scss

@@ -1,106 +0,0 @@
-// ============================================================================
-// 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

@@ -1,229 +0,0 @@
-// ============================================================================
-// 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), inset 0 1px 0 color-mix(
-      in srgb,
-      var(--viking-white-pure) 6%,
-      transparent
-    );
-  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);
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0 auto auto 0;
-    right: 0;
-    width: 1px;
-    height: 28px;
-    background: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--viking-metallic-100) 22%, transparent),
-      transparent
-    );
-    pointer-events: none;
-  }
-
-  @include viking-surface-hairline;
-
-  &.viking-card-compact,
-  &--compact {
-    padding: var(--viking-card-padding-compact);
-  }
-
-  &.viking-card-interactive:hover,
-  &[data-interactive='true']:hover {
-    border-color: var(--viking-accent-strong);
-    box-shadow: var(--viking-shadow-hover),
-      inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &.viking-card-interactive:active,
-  &[data-interactive='true']:active {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    box-shadow: inset 0 1px 2px
-        color-mix(in srgb, var(--viking-black) 24%, transparent),
-      var(--viking-shadow-sm);
-  }
-
-  &.viking-card-interactive:focus-visible,
-  &[data-interactive='true']:focus-visible {
-    outline: var(--viking-ring-width) solid var(--viking-ring);
-    outline-offset: var(--viking-ring-offset);
-  }
-
-  &.viking-card-loading {
-    pointer-events: none;
-  }
-}
-
-.viking-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--viking-space-2);
-  margin-bottom: var(--viking-space-2);
-}
-
-.viking-card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--viking-space-2);
-  margin-top: var(--viking-space-2);
-}
-
-.viking-card-title {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-// ── 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

@@ -1,158 +0,0 @@
-// ============================================================================
-// 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;
-}