@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/styles/_buttons.scss

@@ -1,386 +0,0 @@
-// ============================================================================
-// Viking-UI Button System — canonical styles for viking-button + static HTML
-// Single source of truth aligned to THEME.md §8.1 (composable primitives)
-// ============================================================================
-
-@mixin viking-btn-base {
-  font-family: var(--viking-font-family);
-  font-size: var(--viking-font-size-ui);
-  font-weight: var(--viking-font-weight-semibold);
-  letter-spacing: var(--viking-letter-spacing-wide);
-  line-height: var(--viking-line-height-snug);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--viking-space-1);
-  min-height: var(--viking-control-height);
-  padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius-lg);
-  border: 1px solid transparent;
-  cursor: pointer;
-  text-decoration: none;
-  transition: var(--viking-transition-interactive);
-  width: auto;
-  min-width: var(--viking-btn-min-width, 120px);
-  white-space: nowrap;
-  position: relative;
-  background-clip: padding-box;
-  isolation: isolate;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  overflow: hidden;
-  box-shadow: var(--viking-shadow-sm);
-
-  &:focus-visible {
-    outline: var(--viking-ring-width) solid var(--viking-ring);
-    outline-offset: var(--viking-ring-offset);
-    z-index: 1;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 1px 1px auto 1px;
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      color-mix(
-        in srgb,
-        var(--viking-metallic-100) 45%,
-        transparent
-      ),
-      transparent
-    );
-    pointer-events: none;
-    opacity: 0.82;
-    transition: var(--viking-transition-interactive);
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: auto 0 0 0;
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      color-mix(
-        in srgb,
-        var(--viking-metallic-100) 18%,
-        transparent
-      ),
-      transparent
-    );
-    pointer-events: none;
-    opacity: 0.45;
-    transition: var(--viking-transition-interactive);
-  }
-
-  &:disabled,
-  &[aria-busy='true'] {
-    opacity: var(--viking-state-disabled-opacity);
-    cursor: not-allowed;
-    transform: none !important;
-    box-shadow: none !important;
-  }
-
-  &[aria-busy='true']::before,
-  &[aria-busy='true'] .viking-btn-label {
-    opacity: 0.85;
-    transform: translateY(1px);
-  }
-
-  viking-icon,
-  .viking-icon,
-  [data-viking-icon] {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--viking-icon-size-md);
-    height: var(--viking-icon-size-md);
-    line-height: 1;
-    pointer-events: none;
-    flex: 0 0 auto;
-  }
-
-  .viking-btn-label {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--viking-space-1);
-    line-height: 1.2;
-    min-width: 0;
-    justify-content: center;
-    text-align: center;
-    white-space: nowrap;
-  }
-}
-
-@mixin viking-btn-outline {
-  background: var(--viking-surface);
-  color: var(--viking-text);
-  border-color: var(--viking-border-strong);
-  box-shadow: var(--viking-shadow-sm);
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    background: var(--viking-surface-alt);
-    border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
-    color: var(--viking-text);
-    box-shadow: var(--viking-shadow-md);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    border-color: var(--viking-border-strong);
-    box-shadow: inset 0 1px 2px
-        color-mix(in srgb, var(--viking-black) 28%, transparent),
-      var(--viking-shadow-sm);
-  }
-}
-
-@mixin viking-btn-primary {
-  background: var(--viking-accent);
-  color: var(--viking-accent-content);
-  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    background: var(--viking-accent-hover);
-    border-color: var(--viking-accent-hover);
-    color: var(--viking-accent-content);
-    box-shadow: var(--viking-shadow-hover);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
-    box-shadow: inset 0 1px 2px
-        color-mix(in srgb, var(--viking-black) 28%, transparent),
-      var(--viking-shadow-sm);
-  }
-}
-
-@mixin viking-btn-secondary {
-  background: var(--viking-accent-secondary);
-  color: var(--viking-accent-secondary-content);
-  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    background: var(--viking-accent-secondary-hover);
-    border-color: var(--viking-accent-secondary-hover);
-    color: var(--viking-accent-secondary-content);
-    box-shadow: var(--viking-shadow-hover);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
-    box-shadow: inset 0 1px 2px
-        color-mix(in srgb, var(--viking-black) 28%, transparent),
-      var(--viking-shadow-sm);
-  }
-}
-
-@mixin viking-btn-filled {
-  background: var(--viking-surface-alt);
-  color: var(--viking-text);
-  border-color: var(--viking-border);
-  box-shadow: var(--viking-shadow-xs);
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
-    background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
-    box-shadow: var(--viking-shadow-sm);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    box-shadow: var(--viking-shadow-sm);
-    border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
-    background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
-  }
-}
-
-@mixin viking-btn-danger {
-  background: var(--viking-danger);
-  color: var(--viking-on-danger);
-  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
-    border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
-    color: var(--viking-on-danger);
-    box-shadow: var(--viking-shadow-hover);
-    transform: translateY(var(--viking-state-hover-lift));
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
-    background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
-    box-shadow: var(--viking-shadow-sm);
-  }
-}
-
-@mixin viking-btn-ghost {
-  background: transparent;
-  color: var(--viking-text);
-  min-width: auto;
-  box-shadow: none;
-  border-color: transparent;
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    background: var(--viking-accent-soft);
-    color: var(--viking-accent-strong);
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    background: var(--viking-accent-soft);
-    color: var(--viking-accent-strong);
-  }
-}
-
-@mixin viking-btn-subtle {
-  background: transparent;
-  color: var(--viking-text-muted);
-  border-color: var(--viking-border-subtle);
-  min-width: auto;
-  box-shadow: none;
-
-  &:hover:not(:disabled):not([aria-busy='true']) {
-    color: var(--viking-text);
-    background: var(--viking-accent-soft);
-    border-color: var(--viking-border-strong);
-  }
-
-  &:active:not(:disabled):not([aria-busy='true']) {
-    transform: translateY(0) scale(var(--viking-state-active-scale));
-    border-color: var(--viking-border);
-    background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
-    box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 24%, transparent);
-  }
-}
-
-@mixin viking-btn-size-sm {
-  min-height: var(--viking-control-height-sm);
-  padding: 0 var(--viking-space-2);
-  font-size: var(--viking-font-size-xs);
-  min-width: auto;
-}
-
-@mixin viking-btn-size-xs {
-  min-height: var(--viking-control-height-xs);
-  padding: 0 var(--viking-space-1);
-  font-size: var(--viking-font-size-xs);
-  min-width: auto;
-}
-
-@mixin viking-btn-compact {
-  min-width: 0;
-}
-
-@mixin viking-btn-full {
-  width: 100%;
-  min-width: 0;
-}
-
-// Static HTML / marketing native buttons (legacy class names preserved)
-.viking-btn,
-a.viking-btn,
-button.viking-btn {
-  @include viking-btn-base;
-}
-
-.viking-btn-primary,
-a.viking-btn-primary,
-button.viking-btn-primary {
-  @include viking-btn-base;
-  @include viking-btn-primary;
-}
-
-.viking-btn-secondary,
-a.viking-btn-secondary,
-button.viking-btn-secondary {
-  @include viking-btn-base;
-  @include viking-btn-secondary;
-}
-
-.viking-btn-outline,
-a.viking-btn-outline,
-button.viking-btn-outline {
-  @include viking-btn-base;
-  @include viking-btn-outline;
-}
-
-.viking-btn-danger,
-a.viking-btn-danger,
-button.viking-btn-danger {
-  @include viking-btn-base;
-  @include viking-btn-danger;
-}
-
-.viking-btn-ghost,
-a.viking-btn-ghost,
-button.viking-btn-ghost {
-  @include viking-btn-base;
-  @include viking-btn-ghost;
-}
-
-.viking-btn-subtle,
-a.viking-btn-subtle,
-button.viking-btn-subtle {
-  @include viking-btn-base;
-  @include viking-btn-subtle;
-}
-
-// Component variant class aliases (global fallback when styles bleed outside encapsulation)
-.viking-btn.viking-outline {
-  @include viking-btn-outline;
-}
-
-.viking-btn.viking-primary {
-  @include viking-btn-primary;
-}
-
-.viking-btn.viking-secondary {
-  @include viking-btn-secondary;
-}
-
-.viking-btn.viking-filled {
-  @include viking-btn-filled;
-}
-
-.viking-btn.viking-danger {
-  @include viking-btn-danger;
-}
-
-.viking-btn.viking-ghost {
-  @include viking-btn-ghost;
-}
-
-.viking-btn.viking-subtle {
-  @include viking-btn-subtle;
-}
-
-.viking-btn.viking-compact {
-  @include viking-btn-compact;
-}
-
-.viking-btn.viking-full {
-  @include viking-btn-full;
-}
-
-.viking-btn-label {
-  display: inline-flex;
-  align-items: center;
-  line-height: inherit;
-}

package/src/styles/_component-primitives.scss

@@ -1,183 +0,0 @@
-// ============================================================================
-// Viking-UI Component Primitives
-// Shared interactive state tokens, keyframes, and surface recipes used by
-// core components. Reference via CSS custom properties in inline styles.
-// ============================================================================
-
-:root {
-  /* Touch targets — WCAG 2.5.5 / mobile-first minimum hit area */
-  --viking-touch-target-min: 44px;
-  --viking-touch-target-comfort: 44px;
-
-  /* Interactive state */
-  --viking-state-disabled-opacity: 0.48;
-  --viking-state-hover-lift: -1px;
-  --viking-state-active-scale: 0.985;
-  --viking-state-press-inset: inset 0 1px 2px rgba(0, 0, 0, 0.18);
-
-  --viking-shadow-hover: var(
-    --shadow-hover,
-    0 8px 16px rgba(0, 0, 0, 0.14),
-    0 4px 8px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.06)
-  );
-
-  --viking-surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-  --viking-surface-recipe: var(--viking-surface) linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
-
-  --viking-transition-interactive:
-    color var(--viking-duration) var(--viking-ease-default),
-    background-color var(--viking-duration) var(--viking-ease-default),
-    border-color var(--viking-duration) var(--viking-ease-default),
-    box-shadow var(--viking-duration) var(--viking-ease-default),
-    transform var(--viking-duration-fast) var(--viking-ease-default),
-    opacity var(--viking-duration-fast) var(--viking-ease-default);
-
-  --viking-transition-transform: transform var(--viking-duration-fast) var(--viking-ease-default);
-}
-
-/* Shared keyframes */
-@keyframes viking-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes viking-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes viking-slide-in-right {
-  from {
-    opacity: 0;
-    transform: translateX(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes viking-modal-in {
-  from {
-    opacity: 0;
-    transform: translateY(12px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes viking-backdrop-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes viking-shimmer {
-  from {
-    background-position: 120% 0;
-  }
-  to {
-    background-position: -80% 0;
-  }
-}
-
-@keyframes viking-pulse-soft {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.72;
-  }
-}
-
-@keyframes viking-shake {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-  20%,
-  60% {
-    transform: translateX(-4px);
-  }
-  40%,
-  80% {
-    transform: translateX(4px);
-  }
-}
-
-@keyframes viking-tooltip-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes viking-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Shared focus-ring utilities — use on interactive hosts without duplicating tokens */
-.viking-focus-ring:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: var(--viking-ring-offset);
-}
-
-.viking-focus-ring-inset:focus-visible {
-  outline: var(--viking-ring-width) solid var(--viking-ring);
-  outline-offset: calc(var(--viking-ring-offset) * -1);
-}
-
-/* Expand visual-only controls to touch-friendly hit areas without changing layout */
-.viking-touch-target {
-  position: relative;
-  min-width: var(--viking-touch-target-min);
-  min-height: var(--viking-touch-target-min);
-}
-
-.viking-touch-target::before {
-  content: '';
-  position: absolute;
-  inset: 50%;
-  width: max(100%, var(--viking-touch-target-min));
-  height: max(100%, var(--viking-touch-target-min));
-  transform: translate(-50%, -50%);
-}
-
-@media (min-width: 768px) {
-  :root {
-    --viking-touch-target-comfort: 36px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  ::before,
-  ::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}

package/src/styles/_drakkar-buttons.scss

@@ -1,85 +0,0 @@
-// Shared Drakkar shell CTA styles — mirrors viking-button variants for static navbar / marketing HTML.
-@use 'buttons' as btn;
-
-@mixin viking-drakkar-btn-base {
-  @include btn.viking-btn-base;
-  text-transform: uppercase;
-}
-
-@mixin viking-drakkar-btn-primary {
-  @include viking-drakkar-btn-base;
-  @include btn.viking-btn-primary;
-
-  svg,
-  .material-icons {
-    flex-shrink: 0;
-    transition: transform var(--viking-duration-fast, 150ms) var(--viking-ease-default, ease);
-  }
-
-  &:hover svg {
-    transform: translateX(2px);
-  }
-}
-
-@mixin viking-drakkar-btn-outline {
-  @include viking-drakkar-btn-base;
-  @include btn.viking-btn-outline;
-
-  &:hover svg {
-    transform: none;
-  }
-}
-
-.auth-btn,
-a.auth-btn,
-button.auth-btn {
-  @include viking-drakkar-btn-primary;
-  color: var(--viking-white-pure, var(--viking-white-pure)) !important;
-
-  svg,
-  .material-icons,
-  [data-viking-icon],
-  viking-icon,
-  span {
-    color: inherit !important;
-  }
-}
-
-.auth-btn.auth-btn-outline,
-a.auth-btn.auth-btn-outline {
-  @include viking-drakkar-btn-outline;
-}
-
-.mobile-auth-btn,
-a.mobile-auth-btn,
-button.mobile-auth-btn {
-  @include viking-drakkar-btn-primary;
-  width: 100%;
-  min-width: 0;
-  justify-content: center;
-  color: var(--viking-white-pure, var(--viking-white-pure)) !important;
-
-  svg,
-  .material-icons,
-  [data-viking-icon],
-  viking-icon,
-  span {
-    color: inherit !important;
-  }
-
-  &:hover,
-  &:focus-visible {
-    color: var(--viking-white-pure, var(--viking-white-pure)) !important;
-  }
-}
-
-.mobile-auth-btn.auth-signout-btn,
-a.mobile-auth-btn.auth-signout-btn,
-button.mobile-auth-btn.auth-signout-btn {
-  color: var(--viking-text-muted) !important;
-}
-
-.mobile-auth-btn.auth-btn-outline,
-a.mobile-auth-btn.auth-btn-outline {
-  @include viking-drakkar-btn-outline;
-}

package/src/styles/_fonts.scss

@@ -1,22 +0,0 @@
-// Self-hosted Inter variable font — single woff2 covers weights 100–900.
-// Default relative path resolves from viking-ui.css in package dist or copied static roots.
-
-$font-base-path: 'fonts/inter' !default;
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('#{$font-base-path}/InterVariable.woff2') format('woff2 supports variations'),
-    url('#{$font-base-path}/InterVariable.woff2') format('woff2-variations');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('#{$font-base-path}/InterVariable-Italic.woff2') format('woff2 supports variations'),
-    url('#{$font-base-path}/InterVariable-Italic.woff2') format('woff2-variations');
-}