@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/styles/surfaces/backend.scss

@@ -1,154 +0,0 @@
-/* Backend landing & docs — Viking-UI layout helpers (THEME.md v2.1)
- * Surfaces, buttons, cards, and inputs come from synced viking-ui.css +
- * viking-components.css. This file only adds page-specific rhythm.
- */
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-}
-
-body {
-  background-color: var(--viking-bg, var(--bg-color));
-  color: var(--viking-text, var(--text-color));
-  font-family: var(
-    --viking-font-family,
-    "Inter",
-    ui-sans-serif,
-    system-ui,
-    sans-serif
-  );
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── Landing shell ─────────────────────────────────────────────────────────── */
-.backend-landing-shell {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-8);
-  min-height: calc(100vh - var(--viking-navbar-height, 64px));
-}
-
-.backend-hero {
-  text-align: center;
-  align-items: center;
-  max-width: var(--viking-content-readable-max-width, 48rem);
-  margin-inline: auto;
-  padding-block: var(--viking-space-7);
-  box-shadow: var(--viking-shadow-sm);
-}
-
-.backend-status-badge {
-  align-self: center;
-  text-transform: uppercase;
-  letter-spacing: var(--viking-letter-spacing-caps);
-}
-
-.backend-status-dot {
-  width: var(--viking-space-1);
-  height: var(--viking-space-1);
-  border-radius: 50%;
-  background-color: var(--viking-success);
-  animation: backend-status-pulse 2s infinite;
-}
-
-@keyframes backend-status-pulse {
-  0% {
-    box-shadow: 0 0 0 0
-      color-mix(in srgb, var(--viking-success) 70%, transparent);
-  }
-  70% {
-    box-shadow: 0 0 0 var(--viking-space-1)
-      color-mix(in srgb, var(--viking-success) 0%, transparent);
-  }
-  100% {
-    box-shadow: 0 0 0 0
-      color-mix(in srgb, var(--viking-success) 0%, transparent);
-  }
-}
-
-.backend-hero-lead {
-  text-align: center;
-  margin-inline: auto;
-}
-
-.backend-hero-cta {
-  justify-content: center;
-  margin-top: var(--viking-space-3);
-}
-
-/* ── Feature cards (VikingCard WC + icon tile) ─────────────────────────────── */
-.backend-feature-grid {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-4);
-  width: 100%;
-}
-
-.backend-feature-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
-  gap: var(--viking-space-4);
-  width: 100%;
-}
-
-.backend-feature-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-3);
-}
-
-.backend-feature-icon {
-  /* Extends .viking-icon-badge-static — page-specific sizing only */
-  width: var(--viking-space-6);
-  height: var(--viking-space-6);
-  border-radius: var(--viking-radius-lg);
-  box-shadow: var(--viking-shadow-sm);
-  border: none;
-}
-
-/* ── 404 page ──────────────────────────────────────────────────────────────── */
-body.backend-404 main.main {
-  min-height: calc(100vh - var(--viking-navbar-height, 64px));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-body.backend-404 .backend-error-card {
-  max-width: var(--viking-form-max-width, 720px);
-  margin-inline: auto;
-  text-align: center;
-}
-
-body.backend-404 .backend-error-logo {
-  max-width: 100px;
-  width: 100%;
-  margin: 0 auto var(--viking-space-3);
-  filter: drop-shadow(
-    0 4px 12px color-mix(in srgb, var(--viking-black) 15%, transparent)
-  );
-}
-
-body.backend-404 .backend-error-card .viking-heading-xl {
-  text-transform: uppercase;
-}
-
-body.backend-404 .backend-error-card .viking-text-muted {
-  margin-inline: auto;
-}
-
-body.backend-404 .viking-cta-row {
-  justify-content: center;
-  margin-top: var(--viking-space-3);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .backend-status-dot {
-    animation: none;
-  }
-}

package/src/styles/surfaces/docs-global.scss

@@ -1,73 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-body.docs-body {
-  margin: 0;
-  min-height: 100vh;
-  background: var(--viking-bg);
-  color: var(--viking-text);
-  font-family: var(--viking-font-family);
-  font-size: var(--viking-font-size-base);
-  line-height: var(--viking-line-height-normal);
-}
-
-.skip-link {
-  position: absolute;
-  top: var(--viking-space-1);
-  left: var(--viking-space-1);
-  z-index: 1000;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  background: var(--viking-accent);
-  color: var(--viking-accent-content);
-  border-radius: var(--viking-radius);
-  transform: translateY(-200%);
-  transition: transform var(--viking-duration-fast) var(--viking-ease-out);
-}
-
-.skip-link:focus {
-  transform: translateY(0);
-}
-
-.page-inner-wrapper {
-  width: 100%;
-  max-width: var(--viking-container-max-width, 1260px);
-  margin-inline: auto;
-  padding-inline: var(--viking-page-gutter, var(--viking-space-2));
-}
-
-@media (min-width: 768px) {
-  .page-inner-wrapper {
-    padding-inline: var(--viking-page-gutter-lg, var(--viking-space-3));
-  }
-}
-
-a {
-  color: var(--viking-accent);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--viking-accent-hover);
-}
-
-code {
-  font-family: var(--viking-font-family-mono, ui-monospace, monospace);
-  font-size: 0.9em;
-  background: var(--viking-surface-alt);
-  padding: 0.1em 0.35em;
-  border-radius: var(--viking-radius-xs);
-  border: 1px solid var(--viking-border-subtle);
-}

package/src/styles/surfaces/docs-shell.scss

@@ -1,437 +0,0 @@
-.docs-header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  border-bottom: 1px solid var(--viking-border);
-  background: color-mix(in srgb, var(--viking-bg) 92%, transparent);
-  backdrop-filter: blur(8px);
-}
-
-.docs-header-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-2);
-  min-height: var(--viking-navbar-height, 64px);
-}
-
-.docs-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  color: var(--viking-text);
-  text-decoration: none;
-  flex-shrink: 0;
-}
-
-.docs-brand-mark {
-  color: var(--viking-accent);
-}
-
-.docs-brand-text {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.2;
-}
-
-.docs-brand-name {
-  font-weight: var(--viking-font-weight-bold);
-  font-size: var(--viking-font-size-sm);
-  letter-spacing: var(--viking-letter-spacing-wide);
-}
-
-.docs-brand-tag {
-  font-size: var(--viking-font-size-2xs);
-  color: var(--viking-text-muted);
-  letter-spacing: var(--viking-letter-spacing-caps);
-  text-transform: uppercase;
-}
-
-.docs-nav {
-  display: none;
-  align-items: center;
-  gap: var(--viking-space-half);
-  margin-inline: auto;
-}
-
-@media (min-width: 900px) {
-  .docs-nav {
-    display: flex;
-  }
-}
-
-.docs-nav-link {
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border-radius: var(--viking-radius);
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-medium);
-  transition: var(--viking-transition-colors);
-}
-
-.docs-nav-link:hover,
-.docs-nav-link.is-active {
-  color: var(--viking-text);
-  background: var(--viking-surface-alt);
-}
-
-.docs-header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  margin-left: auto;
-}
-
-.docs-github-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-half);
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius);
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-sm);
-  transition: var(--viking-transition-interactive);
-}
-
-.docs-github-link:hover {
-  color: var(--viking-text);
-  border-color: var(--viking-border-strong);
-}
-
-.docs-github-label {
-  display: none;
-}
-
-@media (min-width: 640px) {
-  .docs-github-label {
-    display: inline;
-  }
-}
-
-.theme-toggle-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--viking-control-height, 40px);
-  height: var(--viking-control-height, 40px);
-  border: 1px solid
-    color-mix(in srgb, var(--viking-accent) 32%, var(--viking-border-strong));
-  border-radius: var(--viking-radius);
-  background: color-mix(
-    in srgb,
-    var(--viking-accent) 8%,
-    var(--viking-surface)
-  );
-  color: var(--viking-accent-strong, var(--viking-teal-400));
-  box-shadow: var(--viking-shadow-sm);
-  cursor: pointer;
-  transition: var(--viking-transition-interactive);
-}
-
-.theme-toggle-btn:hover {
-  border-color: var(--viking-accent-strong, var(--viking-teal-400));
-  background: color-mix(
-    in srgb,
-    var(--viking-accent) 14%,
-    var(--viking-surface)
-  );
-  color: var(--viking-accent-strong, var(--viking-teal-400));
-  box-shadow: var(--viking-shadow-md);
-}
-
-.theme-toggle-btn:focus-visible {
-  outline: 2px solid var(--viking-ring);
-  outline-offset: 2px;
-}
-
-html[data-theme="dark"] .theme-icon-sun {
-  display: block;
-}
-html[data-theme="dark"] .theme-icon-moon {
-  display: none;
-}
-html[data-theme="light"] .theme-icon-sun {
-  display: none;
-}
-html[data-theme="light"] .theme-icon-moon {
-  display: block;
-}
-
-/* ── Horizontal sub-navigation (replaces sidebar) ── */
-.showcase-subnav {
-  position: sticky;
-  top: var(--viking-navbar-height, 64px);
-  z-index: 45;
-  border-bottom: 1px solid var(--viking-border);
-  background: color-mix(in srgb, var(--viking-bg) 94%, transparent);
-  backdrop-filter: blur(8px);
-  --showcase-subnav-height: 52px;
-  min-height: var(--showcase-subnav-height);
-}
-
-.showcase-subnav-inner {
-  padding-block: var(--viking-space-1);
-}
-
-.showcase-subnav-scroll {
-  display: flex;
-  gap: var(--viking-space-1);
-  overflow-x: auto;
-  scrollbar-width: none;
-  -webkit-overflow-scrolling: touch;
-}
-
-.showcase-subnav-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.showcase-subnav-link {
-  flex-shrink: 0;
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border: 1px solid transparent;
-  border-radius: var(--viking-radius);
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-sm);
-  font-weight: var(--viking-font-weight-medium);
-  text-decoration: none;
-  white-space: nowrap;
-  min-height: var(--viking-control-height, 44px);
-  display: inline-flex;
-  align-items: center;
-  transition: var(--viking-transition-colors);
-}
-
-.showcase-subnav-link:hover {
-  color: var(--viking-text);
-  background: var(--viking-surface-alt);
-}
-
-.showcase-subnav-link.is-active {
-  color: var(--viking-accent);
-  border-color: color-mix(
-    in srgb,
-    var(--viking-accent) 28%,
-    var(--viking-border)
-  );
-  background: color-mix(
-    in srgb,
-    var(--viking-accent) 10%,
-    var(--viking-surface)
-  );
-}
-
-.docs-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  min-height: calc(100vh - var(--viking-navbar-height, 64px));
-}
-
-.docs-layout-full {
-  grid-template-columns: 1fr;
-}
-
-.docs-main {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.docs-content {
-  flex: 1;
-  padding: 0;
-}
-
-@media (min-width: 768px) {
-  .docs-content {
-    padding: 0;
-  }
-}
-
-.docs-footer {
-  border-top: 1px solid var(--viking-border);
-  padding: var(--viking-space-4) 0;
-  margin-top: var(--viking-space-5);
-}
-
-.docs-footer-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-3);
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.docs-footer-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--viking-space-2);
-}
-
-.docs-footer-nav a {
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-sm);
-}
-
-.docs-footer-copy {
-  margin: var(--viking-space-3) 0 0;
-  font-size: var(--viking-font-size-xs);
-  color: var(--viking-text-muted);
-}
-
-.code-block {
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-lg);
-  overflow: hidden;
-  background: var(--viking-charcoal-950, #0a0a0a);
-}
-
-.code-block-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--viking-space-half);
-  padding: var(--viking-space-1);
-  border-bottom: 1px solid var(--viking-border);
-  background: var(--viking-surface);
-}
-
-.code-block-tab {
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border: none;
-  border-radius: var(--viking-radius-sm);
-  background: transparent;
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-xs);
-  font-weight: var(--viking-font-weight-medium);
-  cursor: pointer;
-  min-height: 36px;
-}
-
-.code-block-tab.is-active {
-  background: var(--viking-surface-alt);
-  color: var(--viking-text);
-}
-
-.code-block-tab:focus-visible {
-  outline: 2px solid var(--viking-ring);
-  outline-offset: 2px;
-}
-
-.code-block-copy {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-half);
-  margin-left: auto;
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-sm);
-  background: transparent;
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-xs);
-  cursor: pointer;
-  min-height: 36px;
-}
-
-.code-block-copy:hover {
-  color: var(--viking-text);
-  border-color: var(--viking-border-strong);
-}
-
-.code-block-panel {
-  margin: 0;
-  padding: var(--viking-space-2);
-  overflow-x: auto;
-  font-size: var(--viking-font-size-sm);
-  line-height: var(--viking-line-height-relaxed);
-  color: var(--viking-text);
-}
-
-.code-block-panel code {
-  background: transparent;
-  border: none;
-  padding: 0;
-  white-space: pre;
-}
-
-.code-block-panel[hidden] {
-  display: none;
-}
-
-/* Legacy component-card aliases — styles live in showcase.scss */
-
-.token-inspector-search {
-  width: 100%;
-  max-width: 28rem;
-  margin-bottom: var(--viking-space-3);
-}
-
-.token-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--viking-font-size-sm);
-}
-
-.token-table th,
-.token-table td {
-  padding: var(--viking-space-1);
-  text-align: left;
-  border-bottom: 1px solid var(--viking-border-subtle);
-}
-
-.token-swatch {
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--viking-radius-sm);
-  border: 1px solid var(--viking-border);
-}
-
-.token-copy-btn {
-  padding: var(--viking-space-half) var(--viking-space-1);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-sm);
-  background: transparent;
-  color: var(--viking-text-muted);
-  font-size: var(--viking-font-size-xs);
-  cursor: pointer;
-  min-height: 32px;
-}
-
-.framework-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--viking-space-3);
-}
-
-@media (min-width: 768px) {
-  .framework-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.framework-card {
-  padding: var(--viking-space-3);
-  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);
-}
-
-.contribute-steps {
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-page-stack-gap);
-  counter-reset: step;
-}
-
-.contribute-step {
-  padding: var(--viking-card-padding);
-  border: 1px solid var(--viking-border);
-  border-radius: var(--viking-radius-lg);
-  background: var(--viking-surface-recipe, var(--viking-surface));
-}
-
-.contribute-step h3::before {
-  counter-increment: step;
-  content: counter(step, decimal-leading-zero) " — ";
-  color: var(--viking-accent);
-}