@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/styles/components/footer.scss

@@ -1,168 +0,0 @@
-.viking-footer,
-.mega-footer {
-  background-color: var(--viking-surface, var(--card-bg, #05070f));
-  border-top: 1px solid
-    var(--viking-border-strong, var(--border-layout, var(--border, #243246)));
-  padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
-  font-family: var(--viking-font-family);
-  color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
-}
-
-.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, var(--border, #243246)));
-}
-
-@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, var(--text-color, #e5edf5));
-  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, var(--text-muted, #a4b0be));
-  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, var(--text-color, #e5edf5));
-  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, var(--border, #243246));
-  cursor: pointer;
-  transition: var(--viking-transition-colors);
-  font-size: var(--viking-font-size);
-  font-weight: 500;
-  color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
-}
-
-.viking-usa-badge:focus-visible,
-.usa-badge:focus-visible {
-  outline: var(--viking-ring-width, 2px) solid
-    var(--viking-ring, var(--focus-ring-color, #38e6f7));
-  outline-offset: var(--viking-ring-offset, 2px);
-}
-
-.viking-usa-badge:hover,
-.usa-badge:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--viking-surface, var(--card-bg, #05070f)) 95%,
-    var(--viking-accent, var(--color-primary, #12a3a8)) 5%
-  );
-  border-color: var(--viking-border-strong, var(--viking-border, var(--border, #243246)));
-  color: var(--viking-text, var(--text-color, #e5edf5));
-  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

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

@@ -1,101 +0,0 @@
-// 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;
-}
-
-[data-viking-icon] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-[data-viking-icon] svg {
-  display: inline-block;
-  line-height: 1;
-}
-
-.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,
-.nav-btn [data-viking-icon],
-.mobile-nav-btn [data-viking-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;
-}
-
-.nav-btn [data-viking-icon] svg,
-.mobile-nav-btn [data-viking-icon] svg,
-.auth-btn [data-viking-icon] svg,
-.mobile-auth-btn [data-viking-icon] svg {
-  width: var(--viking-icon-size-md, var(--base-font-size));
-  height: var(--viking-icon-size-md, var(--base-font-size));
-}
-
-.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

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

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

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