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

package/src/styles/_buttons.scss

@@ -0,0 +1,301 @@
+// ============================================================================
+// 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);
+  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;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:focus-visible {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+    z-index: 1;
+  }
+
+  &:disabled,
+  &[aria-busy='true'] {
+    opacity: var(--viking-state-disabled-opacity);
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  &[aria-busy='true'] .viking-btn-label {
+    opacity: 0.85;
+  }
+
+  viking-icon,
+  .viking-icon {
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+}
+
+@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));
+    box-shadow: 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));
+    box-shadow: 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));
+    box-shadow: 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));
+  }
+}
+
+@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));
+    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: scale(var(--viking-state-active-scale));
+  }
+}
+
+@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: scale(var(--viking-state-active-scale));
+  }
+}
+
+@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

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

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

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

package/src/styles/_forms.scss

@@ -0,0 +1,66 @@
+// ============================================================================
+// Viking-UI Form Control Primitives — field stack foundation
+// Shared `.viking-control` surface used by viking-input, viking-select, etc.
+// ============================================================================
+
+@mixin viking-control-surface {
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  min-height: var(--viking-control-height);
+  padding: 0 var(--viking-space-2);
+  font-family: var(--viking-font-family);
+  font-size: var(--viking-font-size);
+  color: var(--viking-text);
+  background: var(--viking-surface-alt);
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-sm);
+  box-shadow: var(--viking-shadow-xs);
+  transition: var(--viking-transition-interactive);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+
+  &:hover:not(.viking-disabled):not(.viking-loading):not(:disabled) {
+    border-color: color-mix(in srgb, var(--viking-accent) 35%, var(--viking-border-strong));
+    box-shadow: var(--viking-shadow-sm);
+  }
+
+  &:focus-within:not(.viking-loading) {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+    border-color: var(--viking-accent);
+    box-shadow: var(--viking-shadow-sm);
+  }
+}
+
+.viking-control {
+  @include viking-control-surface;
+}
+
+.viking-form-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--viking-space-3);
+  width: 100%;
+  max-width: var(--viking-form-max-width);
+
+  @media (min-width: 600px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.viking-form-row--3 {
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+// Form action buttons — no forced min-width in inline toolbars
+.viking-form-section-actions viking-button .viking-btn,
+.viking-modal-footer viking-button .viking-btn,
+.viking-sheet-footer viking-button .viking-btn,
+.viking-empty-state-actions viking-button .viking-btn,
+.viking-chart-empty-actions viking-button .viking-btn {
+  min-width: 0;
+}