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

package/src/styles/components/footer.scss

@@ -0,0 +1,155 @@
+.viking-footer,
+.mega-footer {
+  background-color: var(--viking-surface, var(--color-surface));
+  border-top: 1px solid var(--viking-border-strong, var(--border-layout));
+  padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
+  font-family: var(--viking-font-family);
+  color: var(--viking-text-muted);
+}
+
+.viking-footer-content,
+.footer-content {
+  max-width: var(--container-max-width, 1260px);
+  margin: 0 auto;
+}
+
+.viking-footer-directory,
+.footer-directory {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: calc(var(--viking-space-2) * 1.75);
+  padding-bottom: calc(var(--viking-space-2) * 2);
+  border-bottom: 1px solid var(--viking-border-strong, var(--border-layout));
+}
+
+@media (min-width: 600px) {
+  .viking-footer-directory,
+  .footer-directory {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .viking-footer-directory,
+  .footer-directory {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.viking-footer-column-title,
+.footer-column-title {
+  font-size: var(--viking-font-size);
+  font-weight: 700;
+  color: var(--viking-text);
+  margin: 0 0 var(--viking-space-2);
+  letter-spacing: 0.05em;
+}
+
+.viking-footer-list,
+.footer-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-space-1);
+}
+
+.viking-footer-list a,
+.footer-list a {
+  font-size: var(--viking-font-size);
+  color: var(--viking-text-muted);
+  text-decoration: none !important;
+  border-bottom: 1px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.viking-footer-list a:hover,
+.footer-list a:hover {
+  color: var(--viking-text);
+  border-bottom-color: var(--viking-text);
+}
+
+.viking-footer-bottom,
+.footer-bottom {
+  padding-top: var(--viking-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-space-2);
+}
+
+.viking-footer-badges-top,
+.footer-badges-top {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--viking-space-2);
+}
+
+.viking-footer-compliance-row,
+.footer-compliance-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.viking-copyright-info,
+.copyright-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--viking-space-2);
+  font-size: var(--viking-font-size);
+  color: var(--viking-text-muted);
+  text-align: center;
+}
+
+.viking-copyright-info a,
+.copyright-info a {
+  color: var(--viking-text-muted);
+  text-decoration: none !important;
+  border-bottom: 1px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.viking-copyright-info a:hover,
+.copyright-info a:hover {
+  color: var(--viking-text);
+  border-bottom-color: var(--viking-text);
+}
+
+.viking-usa-badge,
+.usa-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  padding: var(--viking-space-1) var(--viking-space-2);
+  border-radius: var(--viking-radius-pill);
+  background-color: transparent;
+  border: 1px solid var(--viking-border);
+  cursor: default;
+  transition: var(--viking-transition-colors);
+  font-size: var(--viking-font-size);
+  font-weight: 500;
+  color: var(--viking-text-muted);
+}
+
+.viking-usa-badge:hover,
+.usa-badge:hover {
+  background-color: color-mix(in srgb, var(--viking-surface) 95%, var(--viking-accent) 5%);
+  border-color: var(--viking-border-strong);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-sm);
+}
+
+.viking-usa-badge-icon,
+.usa-badge-icon {
+  font-size: 1.1em;
+  line-height: 1;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.viking-usa-badge:hover .viking-usa-badge-icon,
+.usa-badge:hover .usa-badge-icon {
+  transform: scale(1.15) rotate(-5deg);
+}

package/src/styles/components/icon-heading.scss

@@ -0,0 +1,47 @@
+// Icon + title row — bento cards, integration tiles, docs panels.
+// Icons and headings share one flex cross-axis so cap-height aligns (WCAG 2.1 AA).
+
+.viking-icon-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-2, 16px);
+  min-width: 0;
+}
+
+.viking-icon-heading__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--viking-icon-size-lg, 24px);
+  height: var(--viking-icon-size-lg, 24px);
+  line-height: 0;
+  color: var(--viking-accent);
+
+  svg,
+  viking-icon,
+  viking-app-icon {
+    display: block;
+    width: var(--viking-icon-size-lg, 24px);
+    height: var(--viking-icon-size-lg, 24px);
+  }
+}
+
+.viking-icon-heading__icon--brand {
+  color: inherit;
+}
+
+.viking-icon-heading__title {
+  margin: 0;
+  font-family: var(--viking-font-family);
+  font-size: var(--viking-font-size-lg, 20px);
+  font-weight: var(--viking-font-weight-bold, 700);
+  letter-spacing: var(--viking-letter-spacing-tight, -0.02em);
+  line-height: var(--viking-line-height-tight, 1.25);
+  color: var(--viking-text, var(--text-color));
+  text-transform: uppercase;
+}
+
+.viking-icon-heading--lg .viking-icon-heading__title {
+  font-size: var(--viking-font-size-xl, 24px);
+}

package/src/styles/components/icon-inline.scss

@@ -0,0 +1,78 @@
+// Vertical alignment for icons paired with text (buttons, links, titles).
+
+viking-app-icon,
+viking-icon,
+.material-icons,
+.material-symbols-outlined {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.nav-btn,
+.mobile-nav-btn,
+.auth-btn,
+.mobile-auth-btn,
+.back-link,
+.viking-btn,
+.sidebar-brand,
+.gauge-card-footer,
+.gauge-card-header,
+.section-title-premium,
+.panel-title-flex,
+.status-badge-premium,
+.feature-item {
+  viking-app-icon,
+  viking-icon,
+  .material-icons {
+    align-self: center;
+  }
+}
+
+.nav-btn viking-app-icon,
+.nav-btn viking-icon,
+.mobile-nav-btn viking-app-icon,
+.auth-btn viking-app-icon,
+.mobile-auth-btn viking-app-icon {
+  width: var(--viking-icon-size-md, var(--base-font-size));
+  height: var(--viking-icon-size-md, var(--base-font-size));
+  align-self: center;
+}
+
+.theme-toggle-btn viking-app-icon,
+.theme-toggle-btn viking-icon,
+.menu-toggle-btn viking-app-icon,
+.menu-toggle-btn viking-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  line-height: 0;
+}
+
+.section-title-premium viking-app-icon {
+  color: var(--status-accent, var(--viking-accent));
+  width: 22px;
+  height: 22px;
+}
+
+.navbar-brand .material-icons.navbar-logo,
+.navbar-brand deml-brand-logo .material-icons {
+  font-size: 28px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  overflow: visible;
+}
+
+.sidebar-brand .material-icons.brand-icon,
+.sidebar-brand deml-brand-logo .material-icons {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}

package/src/styles/components/layout.scss

@@ -0,0 +1,59 @@
+// Shared layout utilities (4px grid, visibility toggles, typography floor).
+// Page width shell (.page-inner-wrapper) lives in viking-ui layout-shell.scss — do not duplicate here.
+
+.viking-page-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--viking-page-stack-gap, var(--viking-space-4));
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.badge-dot {
+  display: inline-block;
+  width: var(--viking-grid-unit, 4px);
+  height: var(--viking-grid-unit, 4px);
+  border-radius: 50%;
+  background-color: var(--viking-accent, var(--color-primary));
+  margin-right: var(--viking-space-1);
+  flex-shrink: 0;
+}
+
+.badge-dot--success {
+  background-color: var(--viking-success, var(--color-success));
+}
+
+.is-hidden {
+  display: none !important;
+}
+
+.is-visible-block {
+  display: block !important;
+}
+
+.is-visible-flex {
+  display: flex !important;
+}
+
+.progress-bar-fill {
+  width: var(--progress, 0%);
+}
+
+body,
+p,
+li,
+input,
+select,
+textarea,
+button,
+label,
+small,
+td,
+th,
+.badge-text,
+.criteria-desc,
+.criteria-details,
+.log-text,
+.file-name {
+  font-size: max(16px, var(--base-font-size, 16px));
+}

package/src/styles/components/utilities.scss

@@ -0,0 +1,131 @@
+// Semantic layout utilities (4px grid via --space-* / --viking-space-*). Prefer these over hash-suffixed u-style-* classes.
+
+.u-items-center {
+  align-items: center;
+}
+
+.u-items-start {
+  align-items: flex-start;
+}
+
+.u-justify-between {
+  justify-content: space-between;
+}
+
+.u-text-center {
+  text-align: center;
+}
+
+.u-w-full {
+  width: 100%;
+}
+
+.u-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.u-flex {
+  display: flex;
+}
+
+.u-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.u-flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.u-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.u-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.u-gap-half {
+  gap: var(--space-half);
+}
+
+.u-gap-1-5 {
+  gap: var(--space-1-5);
+}
+
+.u-gap-1 {
+  gap: var(--space-1);
+}
+
+.u-gap-2 {
+  gap: var(--space-2);
+}
+
+.u-gap-3 {
+  gap: var(--space-3);
+}
+
+.u-mt-2 {
+  margin-top: var(--space-2);
+}
+
+.u-mt-3 {
+  margin-top: var(--space-3);
+}
+
+.u-mt-4 {
+  margin-top: var(--space-4);
+}
+
+.u-mb-2 {
+  margin-bottom: var(--space-2);
+}
+
+.u-mb-3 {
+  margin-bottom: var(--space-3);
+}
+
+.u-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.u-max-w-500 {
+  max-width: 500px;
+}
+
+.u-text-muted {
+  color: var(--text-muted);
+}
+
+.u-text-primary {
+  color: var(--color-primary);
+}
+
+.u-text-primary-container {
+  color: var(--color-primary-container);
+}
+
+.u-skip-link-surface {
+  color: var(--white);
+  background-color: var(--black);
+}
+
+.u-word-break-all {
+  word-break: break-all;
+}
+
+.u-no-underline {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.u-icon-18 {
+  font-size: var(--base-font-size);
+  width: var(--base-font-size);
+  height: var(--base-font-size);
+}

package/src/styles/components/viking-inspired.scss

@@ -0,0 +1,204 @@
+// Viking-inspired visual patterns (clean, accessible, composable controls)
+// Implemented using ONLY tokens from THEME.md / viking-ui.css.
+// No Tailwind. 4px grid. 16px main / 14px UI font floors. Premium engineering aesthetic.
+//
+// Button variants live in viking-ui _buttons.scss — do not duplicate here.
+
+@use 'sass:color';
+
+// Button group (fused borders like Viking button.group)
+.viking-button-group {
+  display: inline-flex;
+  border-radius: var(--viking-radius, var(--border-radius-md, 8px));
+  overflow: hidden;
+  border: 1px solid var(--viking-border, var(--border));
+
+  > .viking-btn,
+  > button,
+  > a {
+    border-radius: 0;
+    border-right: 1px solid var(--viking-border, var(--border));
+    margin: 0;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover:not(:disabled) {
+      z-index: 1;
+    }
+  }
+}
+
+// ============================================
+// Viking-like Input / Field Groups
+// Prefix, suffix, adjacent controls with fused borders.
+// ============================================
+
+.viking-field {
+  display: block;
+  width: 100%;
+}
+
+.viking-field-label {
+  display: block;
+  font-size: max(16px, var(--base-font-size));
+  font-weight: 500;
+  color: var(--text-color);
+  margin-bottom: var(--space-1);
+}
+
+.viking-field-description {
+  display: block;
+  font-size: 1rem;
+  color: var(--text-muted);
+  margin-bottom: var(--space-1);
+}
+
+.viking-input-group {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+
+  input,
+  select,
+  button,
+  .viking-btn {
+    border-radius: 0;
+  }
+
+  > :first-child {
+    border-top-left-radius: var(--border-radius-md);
+    border-bottom-left-radius: var(--border-radius-md);
+  }
+
+  > :last-child {
+    border-top-right-radius: var(--border-radius-md);
+    border-bottom-right-radius: var(--border-radius-md);
+  }
+
+  > * + * {
+    margin-left: -1px; // fuse borders
+  }
+}
+
+.viking-input-prefix,
+.viking-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-2);
+  background-color: var(--color-surface-variant);
+  color: var(--text-muted);
+  font-size: max(16px, var(--base-font-size));
+  border: 1px solid var(--border);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.viking-input-affix-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-2);
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: var(--transition-smooth);
+
+  &:hover:not(:disabled) {
+    color: var(--text-color);
+    background-color: color-mix(in srgb, var(--hover-color) 12%, transparent);
+  }
+}
+
+// Standalone clean input base (native inputs)
+.viking-input {
+  width: 100%;
+  background-color: var(--card-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-md);
+  padding: var(--space-1) var(--space-2);
+  font-size: max(16px, var(--base-font-size));
+  font-family: var(--viking-font-family);
+  line-height: 1.4;
+  min-height: 44px;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: var(--text-muted);
+    opacity: 0.8;
+  }
+
+  &:hover {
+    border-color: var(--color-primary-container);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border-color: var(--color-primary-container);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-container) 35%, transparent);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// ============================================
+// Select / Dropdown Viking-like polish (used by unified-select too)
+// ============================================
+
+.viking-select-trigger {
+  background-color: var(--card-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-md);
+  padding: var(--space-1) var(--space-2);
+  font-size: max(16px, var(--base-font-size));
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--color-primary-container);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+}
+
+.viking-select-dropdown {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.viking-select-option {
+  padding: var(--space-1) var(--space-2);
+  color: var(--text-color);
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--hover-color) 18%, transparent);
+  }
+
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    font-weight: 600;
+  }
+}