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

package/src/styles/surfaces/backend.scss

@@ -0,0 +1,142 @@
+/* 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-page-section-gap, var(--viking-space-7, 56px));
+  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;
+  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-1);
+}
+
+/* ── Feature cards (VikingCard WC + icon tile) ─────────────────────────────── */
+.backend-feature-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-space-3);
+  width: 100%;
+}
+
+.backend-feature-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+  gap: var(--viking-space-3);
+  width: 100%;
+}
+
+.backend-feature-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-space-2);
+}
+
+.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

@@ -0,0 +1,73 @@
+*,
+*::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

@@ -0,0 +1,412 @@
+.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: var(--viking-space-4) var(--viking-space-2);
+}
+
+@media (min-width: 768px) {
+  .docs-content {
+    padding: var(--viking-space-5) var(--viking-space-4);
+  }
+}
+
+.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-space-2);
+  counter-reset: step;
+}
+
+.contribute-step {
+  padding: var(--viking-space-3);
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-lg);
+  background: var(--viking-surface);
+}
+
+.contribute-step h3::before {
+  counter-increment: step;
+  content: counter(step, decimal-leading-zero) ' — ';
+  color: var(--viking-accent);
+}