@ivds/core 0.1.1

package/lib/components/_footer-mixin.scss

@@ -0,0 +1,385 @@
+// Footer component mixins and private styles
+// This file contains mixins for footer layout, multi-column organization, and responsive stacking
+
+@use '../../variables/variables' as vars;
+
+// Base footer mixin with common styles
+@mixin footer-base {
+  padding: var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-900, #0f172a);
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  
+  // Ensure proper contrast and readability
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+
+// Footer container mixin for content width management
+@mixin footer-container($max-width: 1200px) {
+  max-width: $max-width;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Multi-column grid layout mixin
+@mixin footer-grid($columns: 4, $gap: var(--spacing-8, 2rem), $min-column-width: 250px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
+  gap: $gap;
+  margin-bottom: var(--spacing-8, 2rem);
+  
+  // Responsive behavior for different screen sizes
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+  
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+  
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+
+// Footer section mixin for individual column styling
+@mixin footer-section {
+  // Section title styling
+  &-title {
+    margin: 0 0 var(--spacing-4, 1rem) 0;
+    font-size: var(--fontSize-lg, 1.125rem);
+    font-weight: var(--fontWeight-semibold, 600);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    line-height: var(--lineHeight-tight, 1.25);
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-base, 1rem);
+      margin-bottom: var(--spacing-3, 0.75rem);
+    }
+  }
+  
+  // Section list styling
+  &-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  // Section list item styling
+  &-item {
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  // Section link styling
+  &-link {
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    text-decoration: none;
+    font-size: var(--fontSize-sm, 0.875rem);
+    transition: color 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    
+    &:hover {
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+    
+    // Icon support in links
+    svg {
+      margin-right: var(--spacing-2, 0.5rem);
+      flex-shrink: 0;
+    }
+  }
+}
+
+// Footer bottom section mixin (copyright, legal links)
+@mixin footer-bottom($border-color: var(--color-semantic-neutral-700, #374151)) {
+  padding-top: var(--spacing-8, 2rem);
+  border-top: var(--borderWidth-1, 1px) solid $border-color;
+  text-align: center;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+  
+  @media (max-width: 768px) {
+    padding-top: var(--spacing-6, 1.5rem);
+    text-align: left;
+  }
+  
+  // Links in bottom section
+  a {
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    text-decoration: none;
+    
+    &:hover {
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+      text-decoration: underline;
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+  }
+  
+  // Inline legal links
+  &--inline-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-4, 1rem);
+    flex-wrap: wrap;
+    
+    @media (max-width: 768px) {
+      justify-content: flex-start;
+      gap: var(--spacing-3, 0.75rem);
+    }
+  }
+}
+
+// Footer theme variants
+@mixin footer-theme($bg-color, $text-color, $title-color, $border-color) {
+  background-color: $bg-color;
+  color: $text-color;
+  
+  .ivds-footer__section-title {
+    color: $title-color;
+  }
+  
+  .ivds-footer__section-link {
+    color: $text-color;
+    
+    &:hover {
+      color: $title-color;
+    }
+  }
+  
+  .ivds-footer__bottom {
+    border-top-color: $border-color;
+    color: rgba($text-color, 0.8);
+  }
+}
+
+// Light theme footer
+@mixin footer-light {
+  @include footer-theme(
+    var(--color-semantic-neutral-50, #f8fafc),
+    var(--color-semantic-neutral-600, #475569),
+    var(--color-semantic-neutral-900, #0f172a),
+    var(--color-semantic-neutral-200, #e2e8f0)
+  );
+}
+
+// Minimal footer mixin for simple layouts
+@mixin footer-minimal {
+  padding: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+  text-align: center;
+  
+  .ivds-footer__bottom {
+    padding-top: 0;
+    border-top: none;
+  }
+  
+  @media (max-width: 768px) {
+    padding: var(--spacing-4, 1rem);
+  }
+}
+
+// Footer with brand section mixin
+@mixin footer-brand($logo-size: 2rem) {
+  &-logo {
+    height: $logo-size;
+    width: auto;
+    margin-bottom: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 768px) {
+      height: calc(#{$logo-size} * 0.875);
+    }
+  }
+  
+  &-name {
+    font-size: var(--fontSize-xl, 1.25rem);
+    font-weight: var(--fontWeight-bold, 700);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-lg, 1.125rem);
+    }
+  }
+  
+  &-description {
+    font-size: var(--fontSize-sm, 0.875rem);
+    color: var(--color-semantic-neutral-400, #9ca3af);
+    line-height: var(--lineHeight-relaxed, 1.625);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+
+// Social links mixin
+@mixin footer-social($gap: var(--spacing-3, 0.75rem)) {
+  display: flex;
+  gap: $gap;
+  margin-top: var(--spacing-4, 1rem);
+  
+  @media (max-width: 768px) {
+    justify-content: center;
+    margin-top: var(--spacing-3, 0.75rem);
+  }
+  
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--borderRadius-md, 0.375rem);
+    background-color: var(--color-semantic-neutral-800, #1e293b);
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    transition: all 0.2s ease-in-out;
+    
+    &:hover {
+      background-color: var(--color-brand-primary-500, #f97316);
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+      transform: translateY(-2px);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: 0;
+    }
+  }
+}
+
+// Newsletter signup mixin
+@mixin footer-newsletter {
+  &-form {
+    display: flex;
+    gap: var(--spacing-2, 0.5rem);
+    margin-top: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 480px) {
+      flex-direction: column;
+    }
+  }
+  
+  &-input {
+    flex: 1;
+    padding: var(--spacing-3, 0.75rem);
+    border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-600, #475569);
+    border-radius: var(--borderRadius-md, 0.375rem);
+    background-color: var(--color-semantic-neutral-800, #1e293b);
+    color: var(--color-semantic-neutral-100, #f1f5f9);
+    font-size: var(--fontSize-sm, 0.875rem);
+    
+    &::placeholder {
+      color: var(--color-semantic-neutral-500, #64748b);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-color: var(--color-brand-primary-500, #f97316);
+    }
+    
+    @media (max-width: 480px) {
+      width: 100%;
+    }
+  }
+  
+  &-button {
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    background-color: var(--color-brand-primary-500, #f97316);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    border: none;
+    border-radius: var(--borderRadius-md, 0.375rem);
+    font-size: var(--fontSize-sm, 0.875rem);
+    font-weight: var(--fontWeight-medium, 500);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    white-space: nowrap;
+    
+    &:hover {
+      background-color: var(--color-brand-primary-600, #ea580c);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    @media (max-width: 480px) {
+      width: 100%;
+    }
+  }
+  
+  &-description {
+    font-size: var(--fontSize-sm, 0.875rem);
+    color: var(--color-semantic-neutral-400, #9ca3af);
+    margin-bottom: var(--spacing-3, 0.75rem);
+    line-height: var(--lineHeight-relaxed, 1.625);
+  }
+}
+
+// Responsive stacking mixin for mobile
+@mixin footer-responsive-stack {
+  @media (max-width: 768px) {
+    .ivds-footer__grid {
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .ivds-footer__grid {
+      grid-template-columns: 1fr;
+      gap: var(--spacing-6, 1.5rem);
+    }
+    
+    .ivds-footer__section {
+      text-align: center;
+      
+      &:first-child {
+        text-align: left;
+      }
+    }
+  }
+}
+
+// Address styling mixin
+@mixin footer-address {
+  font-style: normal;
+  line-height: var(--lineHeight-relaxed, 1.625);
+  
+  p {
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  strong {
+    color: var(--color-semantic-neutral-200, #e2e8f0);
+    font-weight: var(--fontWeight-medium, 500);
+  }
+}

package/lib/components/_header-mixin.scss

@@ -0,0 +1,275 @@
+// Header component mixins and private styles
+// This file contains mixins for header layout, branding, and responsive behavior
+
+@use '../../variables/variables' as vars;
+
+// Base header mixin with common layout styles
+@mixin header-base {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  min-height: 64px;
+  
+  // Ensure proper z-index for overlays
+  position: relative;
+  z-index: 10;
+}
+
+// Header layout mixin for different arrangements
+@mixin header-layout($justify: space-between, $gap: var(--spacing-6, 1.5rem)) {
+  justify-content: $justify;
+  gap: $gap;
+  
+  // Responsive behavior
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+
+// Branding area mixin
+@mixin header-brand($logo-size: 2rem, $text-size: var(--fontSize-lg, 1.125rem)) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  
+  &-logo {
+    height: $logo-size;
+    width: auto;
+    margin-right: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 768px) {
+      height: calc(#{$logo-size} * 0.875);
+      margin-right: var(--spacing-2, 0.5rem);
+    }
+  }
+  
+  &-text {
+    font-size: $text-size;
+    font-weight: var(--fontWeight-bold, 700);
+    color: var(--color-semantic-neutral-900, #0f172a);
+    text-decoration: none;
+    line-height: var(--lineHeight-tight, 1.25);
+    
+    &:hover {
+      color: var(--color-brand-primary-600, #ea580c);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-base, 1rem);
+    }
+  }
+}
+
+// Navigation area mixin
+@mixin header-nav($gap: var(--spacing-6, 1.5rem)) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  flex: 1;
+  justify-content: center;
+  
+  @media (max-width: 768px) {
+    display: none; // Hide on mobile by default
+    
+    &--mobile-visible {
+      display: flex;
+      flex-basis: 100%;
+      order: 3;
+      justify-content: flex-start;
+      margin-top: var(--spacing-3, 0.75rem);
+      padding-top: var(--spacing-3, 0.75rem);
+      border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+      gap: var(--spacing-4, 1rem);
+    }
+  }
+  
+  a {
+    color: var(--color-semantic-neutral-700, #374151);
+    text-decoration: none;
+    font-weight: var(--fontWeight-medium, 500);
+    font-size: var(--fontSize-sm, 0.875rem);
+    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+    border-radius: var(--borderRadius-md, 0.375rem);
+    transition: all 0.15s ease-in-out;
+    
+    &:hover {
+      color: var(--color-brand-primary-600, #ea580c);
+      background-color: var(--color-brand-primary-50, #fff7ed);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    &[aria-current="page"] {
+      color: var(--color-brand-primary-600, #ea580c);
+      background-color: var(--color-brand-primary-100, #fed7aa);
+      font-weight: var(--fontWeight-semibold, 600);
+    }
+  }
+}
+
+// Actions area mixin
+@mixin header-actions($gap: var(--spacing-3, 0.75rem)) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  flex-shrink: 0;
+  
+  @media (max-width: 768px) {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+
+// Sticky header mixin
+@mixin header-sticky($shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))) {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: $shadow;
+  backdrop-filter: blur(8px);
+  background-color: rgba(252, 252, 253, 0.95);
+  
+  @supports not (backdrop-filter: blur(8px)) {
+    background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  }
+}
+
+// Header variant for different themes
+@mixin header-theme($bg-color, $border-color, $text-color) {
+  background-color: $bg-color;
+  border-bottom-color: $border-color;
+  
+  .ivds-header__brand-text {
+    color: $text-color;
+  }
+  
+  .ivds-header__nav a {
+    color: $text-color;
+    
+    &:hover {
+      background-color: rgba($text-color, 0.1);
+    }
+  }
+}
+
+// Dark theme header
+@mixin header-dark {
+  @include header-theme(
+    var(--color-semantic-neutral-900, #0f172a),
+    var(--color-semantic-neutral-700, #374151),
+    var(--color-semantic-neutral-50, #f8fafc)
+  );
+}
+
+// Transparent header mixin
+@mixin header-transparent {
+  background-color: transparent;
+  border-bottom: none;
+  backdrop-filter: none;
+  
+  &.ivds-header--sticky {
+    background-color: rgba(252, 252, 253, 0.95);
+    border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    backdrop-filter: blur(8px);
+  }
+}
+
+// Compact header mixin for reduced height
+@mixin header-compact {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  min-height: 48px;
+  
+  .ivds-header__brand {
+    &-logo {
+      height: 1.5rem;
+      margin-right: var(--spacing-2, 0.5rem);
+    }
+    
+    &-text {
+      font-size: var(--fontSize-base, 1rem);
+    }
+  }
+  
+  .ivds-header__nav {
+    gap: var(--spacing-4, 1rem);
+    
+    a {
+      padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+      font-size: var(--fontSize-xs, 0.75rem);
+    }
+  }
+  
+  .ivds-header__actions {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+
+// Mobile menu toggle mixin
+@mixin header-mobile-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-2, 0.5rem);
+  cursor: pointer;
+  color: var(--color-semantic-neutral-700, #374151);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  
+  &:hover {
+    background-color: var(--color-semantic-neutral-100, #f3f4f6);
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #f97316);
+    outline-offset: 2px;
+  }
+  
+  @media (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+// Responsive container mixin for header content
+@mixin header-container($max-width: 1200px) {
+  max-width: $max-width;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Search integration mixin
+@mixin header-search($flex-basis: 400px) {
+  flex: 1;
+  max-width: $flex-basis;
+  margin: 0 var(--spacing-4, 1rem);
+  
+  @media (max-width: 768px) {
+    display: none;
+    
+    &--mobile-visible {
+      display: block;
+      flex-basis: 100%;
+      order: 2;
+      margin: var(--spacing-3, 0.75rem) 0 0 0;
+      max-width: none;
+    }
+  }
+}