@ivds/core 0.1.1 → 1.1.0

package/src/components/navigation/_navigation-mixins.scss

@@ -1,270 +1,166 @@
-// Navigation component mixins and private styles
-// This file contains mixins for navigation variants and internal utilities
-
-@use '../../variables/variables' as vars;
-
-// Base navigation mixin with common styles
-@mixin navigation-base {
-  --nav-link-color: var(--color-semantic-neutral-700, #404040);
-  --nav-link-color-hover: var(--color-brand-primary-600, #ea580c);
-  --nav-link-color-active: var(--color-brand-primary-600, #ea580c);
-  --nav-link-bg-hover: var(--color-brand-primary-50, #fff7ed);
-  --nav-link-bg-active: var(--color-brand-primary-100, #ffedd5);
-  --nav-spacing-x: var(--spacing-4, 1rem);
-  --nav-spacing-y: var(--spacing-3, 0.75rem);
-
-  display: flex;
-  align-items: center;
-}
-
-// Navigation list mixin
-@mixin navigation-list {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: 0;
-}
-
-// Navigation item mixin
-@mixin navigation-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-// Navigation link mixin
-@mixin navigation-link {
-  display: flex;
-  align-items: center;
-  padding: var(--nav-spacing-y) var(--nav-spacing-x);
-  color: var(--nav-link-color);
-  text-decoration: none;
-  font-weight: var(--fontWeight-medium, 500);
-  font-size: var(--fontSize-base, 1rem);
-  line-height: var(--lineHeight-tight, 1.25);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  transition: all 0.15s ease-in-out;
-  white-space: nowrap;
-  
-  &:hover {
-    color: var(--nav-link-color-hover);
-    background-color: var(--nav-link-bg-hover);
-  }
-  
-  &:focus {
-    outline: 2px solid var(--color-brand-primary-500, #f97316);
-    outline-offset: 2px;
-    text-decoration: none;
-  }
-  
-  &:active {
-    background-color: var(--nav-link-bg-active);
-  }
-}
-
-// Active navigation link mixin
-@mixin navigation-link-active {
-  color: var(--nav-link-color-active);
-  background-color: var(--nav-link-bg-active);
-  font-weight: var(--fontWeight-semibold, 600);
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    height: 2px;
-    background-color: var(--color-brand-primary-500, #f97316);
-    border-radius: var(--borderRadius-full, 9999px);
-  }
-}
-
-// Navigation with icons
-@mixin navigation-with-icons {
-  .ivds-navigation__link {
-    gap: var(--spacing-2, 0.5rem);
-  }
-  
-  .ivds-navigation__icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
-    
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: currentcolor;
-    }
-  }
-}
-
-// Horizontal navigation variant
-@mixin navigation-horizontal {
-  .ivds-navigation__list {
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  .ivds-navigation__link--active::after {
-    bottom: -2px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    height: 2px;
-  }
-}
-
-// Vertical navigation variant
-@mixin navigation-vertical {
-  flex-direction: column;
-  align-items: stretch;
-  
-  .ivds-navigation__list {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .ivds-navigation__item {
-    width: 100%;
-  }
-  
-  .ivds-navigation__link {
-    width: 100%;
-    justify-content: flex-start;
-    
-    &--active::after {
-      top: 50%;
-      left: -2px;
-      transform: translateY(-50%);
-      width: 2px;
-      height: 80%;
-    }
-  }
-}
-
-// Navigation size variants
-@mixin navigation-compact {
-  --nav-spacing-x: var(--spacing-3, 0.75rem);
-  --nav-spacing-y: var(--spacing-2, 0.5rem);
-  
-  .ivds-navigation__link {
-    font-size: var(--fontSize-sm, 0.875rem);
-  }
-}
-
-@mixin navigation-spacious {
-  --nav-spacing-x: var(--spacing-6, 1.5rem);
-  --nav-spacing-y: var(--spacing-4, 1rem);
-  
-  .ivds-navigation__link {
-    font-size: var(--fontSize-lg, 1.125rem);
-  }
-}
-
-// Navigation theme variants
-@mixin navigation-theme-dark {
-  --nav-link-color: var(--color-semantic-neutral-200, #e5e5e5);
-  --nav-link-color-hover: var(--color-brand-primary-300, #fdba74);
-  --nav-link-color-active: var(--color-brand-primary-400, #fb923c);
-  --nav-link-bg-hover: rgba(249, 115, 22, 0.1);
-  --nav-link-bg-active: rgba(249, 115, 22, 0.2);
-}
-
-@mixin navigation-theme-minimal {
-  --nav-link-bg-hover: transparent;
-  --nav-link-bg-active: transparent;
-  
-  .ivds-navigation__link {
-    &:hover {
-      text-decoration: underline;
-    }
-    
-    &--active {
-      text-decoration: underline;
-      text-decoration-thickness: 2px;
-      text-underline-offset: 4px;
-    }
-    
-    &--active::after {
-      display: none;
-    }
-  }
-}
-
-// Navigation with dropdown support
-@mixin navigation-with-dropdown {
-  .ivds-navigation__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    min-width: 200px;
-    background-color: var(--color-semantic-neutral-50, #fafafa);
-    border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e5e5e5);
-    border-radius: var(--borderRadius-md, 0.375rem);
-    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-8px);
-    transition: all 0.15s ease-in-out;
-    z-index: 50;
-    
-    .ivds-navigation__list {
-      flex-direction: column;
-      padding: var(--spacing-2, 0.5rem);
-    }
-    
-    .ivds-navigation__link {
-      width: 100%;
-      justify-content: flex-start;
-      
-      &--active::after {
-        display: none;
-      }
-    }
-  }
-  
-  .ivds-navigation__item {
-    &--has-dropdown {
-      position: relative;
-      
-      &:hover .ivds-navigation__dropdown {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0);
-      }
-    }
-  }
-}
-
-// Breadcrumb navigation variant
-@mixin navigation-breadcrumb {
-  .ivds-navigation__list {
-    flex-wrap: wrap;
-  }
-  
-  .ivds-navigation__item {
-    &:not(:last-child)::after {
-      content: '/';
-      margin: 0 var(--spacing-2, 0.5rem);
-      color: var(--color-semantic-neutral-500, #737373);
-      font-weight: var(--fontWeight-normal, 400);
-    }
-  }
-  
-  .ivds-navigation__link {
-    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-    
-    &--active {
-      background-color: transparent;
-      font-weight: var(--fontWeight-medium, 500);
-      cursor: default;
-      
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
+// Navigation component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin navigation-base {
+  display: flex;
+  align-items: center;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+
+@mixin navigation-list {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  padding: 0;
+  margin: 0;
+}
+
+@mixin navigation-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  min-height: 42px;
+  padding: var(--spacing-2, 0.5rem) 0;
+  border-bottom: 3px solid transparent;
+  color: var(--ivds-text-secondary, #36414f);
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  text-decoration: none;
+  transition:
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+    border-color: var(--ivds-border-strong, #a1adba);
+  }
+
+  @include focus-ring;
+
+  &.ivds-navigation__link--active {
+    color: var(--color-brand-accent-700, #0b4593);
+    border-color: var(--color-brand-accent-600, #1058b8);
+    font-weight: var(--fontWeight-semibold, 600);
+  }
+}
+
+@mixin side-navigation-base {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 100%;
+  padding: var(--spacing-6, 1.5rem);
+  background-color: var(--ivds-surface-base, #fff);
+  border-right: 1px solid var(--ivds-border-subtle, #e2e7ec);
+}
+
+@mixin side-navigation-item {
+  width: 100%;
+
+  .ivds-side-nav__link {
+    width: 100%;
+    justify-content: flex-start;
+    min-height: 42px;
+    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+    border-radius: var(--ivds-radius-s, 0.125rem);
+
+    &--active {
+      background-color: var(--color-brand-accent-50, #eef4ff);
+      color: var(--color-brand-accent-700, #0b4593);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 8px;
+        bottom: 8px;
+        width: 3px;
+        background-color: var(--color-brand-accent-600, #1058b8);
+      }
+    }
+  }
+}
+
+@mixin tabs-base {
+  display: flex;
+  gap: var(--spacing-5, 1.25rem);
+  border-bottom: 2px solid var(--ivds-border-subtle, #e2e7ec);
+}
+
+@mixin tab-item {
+  position: relative;
+  padding: var(--spacing-3, 0.75rem) 0;
+  color: var(--ivds-text-muted, #4d5968);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -2px;
+    height: 3px;
+    background-color: var(--color-brand-accent-600, #1058b8);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  }
+
+  &:hover {
+    color: var(--ivds-text-primary, #121a24);
+  }
+
+  &--active {
+    color: var(--color-brand-accent-700, #0b4593);
+    font-weight: var(--fontWeight-semibold, 600);
+
+    &::after {
+      transform: scaleX(1);
+    }
+  }
+}
+
+@mixin dropdown-menu-base {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 230px;
+  padding: var(--spacing-2, 0.5rem);
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  background-color: var(--ivds-surface-base, #fff);
+  box-shadow: var(--ivds-shadow-lg, 0 4px 10px rgba(7, 11, 16, 0.14));
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition:
+    opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  z-index: 200;
+}
+
+@mixin dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  color: var(--ivds-text-secondary, #36414f);
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition:
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+    color: var(--ivds-text-primary, #121a24);
+  }
+}

package/src/components/navigation/navigation.scss

@@ -1,7 +1,8 @@
 // Navigation component styles
-// Provides styling for the IVDS navigation component following Helsinki Design System patterns
+// Core styling for horizontal, vertical, and tabbed navigation menus
+/* stylelint-disable no-descending-specificity */
 
-@use 'navigation-mixins' as nav;
+@use '_navigation-mixins' as nav;
 
 .ivds-navigation {
   @include nav.navigation-base;
@@ -10,55 +11,44 @@
     @include nav.navigation-list;
   }
   
-  &__item {
-    @include nav.navigation-item;
-  }
-  
   &__link {
     @include nav.navigation-link;
-    
-    &--active {
-      @include nav.navigation-link-active;
-    }
-  }
-  
-  // Layout variants
-  &--horizontal {
-    @include nav.navigation-horizontal;
-  }
-  
-  &--vertical {
-    @include nav.navigation-vertical;
-  }
-  
-  // Size variants
-  &--compact {
-    @include nav.navigation-compact;
-  }
-  
-  &--spacious {
-    @include nav.navigation-spacious;
   }
+}
+
+// Side Navigation
+.ivds-side-nav {
+  @include nav.side-navigation-base;
   
-  // Theme variants
-  &--theme-dark {
-    @include nav.navigation-theme-dark;
+  &__item {
+    @include nav.side-navigation-item;
   }
+}
+
+// Tabs
+.ivds-tabs {
+  @include nav.tabs-base;
   
-  &--theme-minimal {
-    @include nav.navigation-theme-minimal;
+  &__item {
+    @include nav.tab-item;
   }
+}
+
+// Dropdown Menu
+.ivds-dropdown {
+  position: relative;
   
-  // Feature variants
-  &--with-icons {
-    @include nav.navigation-with-icons;
+  &__menu {
+    @include nav.dropdown-menu-base;
   }
   
-  &--with-dropdown {
-    @include nav.navigation-with-dropdown;
+  &__item {
+    @include nav.dropdown-item;
   }
   
-  &--breadcrumb {
-    @include nav.navigation-breadcrumb;
+  &:hover &__menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
   }
 }