@ivds/core 0.1.1

package/src/base/_typography.scss

@@ -0,0 +1,105 @@
+// Base typography styles for IVDS Core
+// Imports design tokens and sets up foundational text styles
+
+@use '../variables/variables' as vars;
+
+// Global typography defaults
+body {
+  font-family: vars.$fontFamily-primary;
+  font-size: vars.$fontSize-base;
+  font-weight: vars.$fontWeight-normal;
+  line-height: vars.$lineHeight-normal;
+  color: vars.$color-semantic-neutral-900;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Heading defaults
+h1, h2, h3, h4, h5, h6 {
+  font-family: vars.$fontFamily-primary;
+  font-weight: vars.$fontWeight-semibold;
+  line-height: vars.$lineHeight-tight;
+  color: vars.$color-semantic-neutral-900;
+  margin-bottom: vars.$spacing-4;
+}
+
+h1 {
+  font-size: vars.$fontSize-4xl;
+}
+
+h2 {
+  font-size: vars.$fontSize-3xl;
+}
+
+h3 {
+  font-size: vars.$fontSize-2xl;
+}
+
+h4 {
+  font-size: vars.$fontSize-xl;
+}
+
+h5 {
+  font-size: vars.$fontSize-lg;
+}
+
+h6 {
+  font-size: vars.$fontSize-base;
+}
+
+// Paragraph defaults
+p {
+  margin-bottom: vars.$spacing-4;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Link defaults
+a {
+  color: vars.$color-brand-primary-600;
+  text-decoration: underline;
+  
+  &:hover {
+    color: vars.$color-brand-primary-700;
+  }
+  
+  &:focus {
+    outline: 2px solid vars.$color-brand-primary-500;
+    outline-offset: 2px;
+  }
+}
+
+// Code and pre defaults
+code {
+  font-family: vars.$fontFamily-secondary;
+  font-size: vars.$fontSize-sm;
+  background-color: vars.$color-semantic-neutral-100;
+  padding: vars.$spacing-1 vars.$spacing-2;
+  border-radius: vars.$borderRadius-sm;
+}
+
+pre {
+  font-family: vars.$fontFamily-secondary;
+  font-size: vars.$fontSize-sm;
+  background-color: vars.$color-semantic-neutral-100;
+  padding: vars.$spacing-4;
+  border-radius: vars.$borderRadius-md;
+  overflow-x: auto;
+  
+  code {
+    background-color: transparent;
+    padding: 0;
+  }
+}
+
+// IVDS scoped typography class
+.ivds-typography {
+  font-family: vars.$fontFamily-primary;
+  font-size: vars.$fontSize-base;
+  line-height: vars.$lineHeight-normal;
+  color: vars.$color-semantic-neutral-900;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/base/base.scss

@@ -0,0 +1,6 @@
+// Base styles entry point
+// This file imports all base styles for the IVDS Core package
+
+@use 'reset';
+@use 'typography';
+@use 'layout';

package/src/components/all.scss

@@ -0,0 +1,22 @@
+// All components bundle
+// This file imports all component styles for the IVDS Core package
+
+// Form components
+@use './button/button.scss';
+@use './text-input/text-input.scss';
+@use './checkbox/checkbox.scss';
+@use './radio-button/radio-button.scss';
+
+// Content and layout components
+@use './card/card.scss';
+@use './notification/notification.scss';
+@use './tag/tag.scss';
+
+// Navigation components
+@use './breadcrumb/breadcrumb.scss';
+@use './navigation/navigation.scss';
+@use './pagination/pagination.scss';
+
+// Structural components
+@use './header/header.scss';
+@use './footer/footer.scss';

package/src/components/breadcrumb/_breadcrumb-mixins.scss

@@ -0,0 +1,173 @@
+// Breadcrumb component mixins and private styles
+// This file contains mixins for breadcrumb variants and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base breadcrumb mixin with common styles
+@mixin breadcrumb-base {
+  --separator-content: '/';
+  --separator-spacing: var(--spacing-2, 0.5rem);
+  --link-color: var(--color-brand-primary-500, #f97316);
+  --link-color-hover: var(--color-brand-primary-600, #ea580c);
+  --current-color: var(--color-semantic-neutral-700, #404040);
+  --separator-color: var(--color-semantic-neutral-500, #737373);
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+
+// Breadcrumb list mixin
+@mixin breadcrumb-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+
+// Breadcrumb item mixin
+@mixin breadcrumb-item {
+  display: flex;
+  align-items: center;
+  
+  &:not(:last-child)::after {
+    content: var(--separator-content);
+    margin: 0 var(--separator-spacing);
+    color: var(--separator-color);
+    font-weight: var(--fontWeight-normal, 400);
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+// Breadcrumb link mixin
+@mixin breadcrumb-link {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: all 0.15s ease-in-out;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+  
+  &:hover {
+    color: var(--link-color-hover);
+    text-decoration: underline;
+    background-color: var(--color-brand-primary-50, #fff7ed);
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #f97316);
+    outline-offset: 2px;
+    text-decoration: none;
+  }
+  
+  &:active {
+    background-color: var(--color-brand-primary-100, #ffedd5);
+  }
+}
+
+// Current page mixin
+@mixin breadcrumb-current {
+  color: var(--current-color);
+  font-weight: var(--fontWeight-medium, 500);
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+}
+
+// Breadcrumb separator variants
+@mixin breadcrumb-separator-arrow {
+  --separator-content: '→';
+}
+
+@mixin breadcrumb-separator-chevron {
+  --separator-content: '›';
+}
+
+@mixin breadcrumb-separator-bullet {
+  --separator-content: '•';
+}
+
+// Breadcrumb size variants
+@mixin breadcrumb-small {
+  --separator-spacing: var(--spacing-1, 0.25rem);
+
+  font-size: var(--fontSize-xs, 0.75rem);
+}
+
+@mixin breadcrumb-large {
+  --separator-spacing: var(--spacing-3, 0.75rem);
+
+  font-size: var(--fontSize-base, 1rem);
+}
+
+// Breadcrumb theme variants
+@mixin breadcrumb-theme-dark {
+  --link-color: var(--color-brand-primary-400, #fb923c);
+  --link-color-hover: var(--color-brand-primary-300, #fdba74);
+  --current-color: var(--color-semantic-neutral-200, #e5e5e5);
+  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
+}
+
+@mixin breadcrumb-theme-muted {
+  --link-color: var(--color-semantic-neutral-600, #525252);
+  --link-color-hover: var(--color-semantic-neutral-700, #404040);
+  --current-color: var(--color-semantic-neutral-800, #262626);
+  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
+}
+
+// Breadcrumb with icons
+@mixin breadcrumb-with-icons {
+  .ivds-breadcrumb__link,
+  .ivds-breadcrumb__current {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1, 0.25rem);
+  }
+  
+  .ivds-breadcrumb__icon {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+}
+
+// Responsive breadcrumb behavior
+@mixin breadcrumb-responsive {
+  @media (max-width: 640px) {
+    .ivds-breadcrumb__list {
+      flex-wrap: wrap;
+    }
+    
+    .ivds-breadcrumb__item {
+      &:nth-last-child(2)::after {
+        content: '...';
+        margin: 0 var(--separator-spacing);
+        color: var(--separator-color);
+      }
+      
+      &:not(:last-child, :nth-last-child(2))::after {
+        display: none;
+      }
+      
+      &:not(:last-child, :nth-last-child(2)) {
+        display: none;
+      }
+    }
+  }
+}
+
+// Breadcrumb truncation for long paths
+@mixin breadcrumb-truncate {
+  .ivds-breadcrumb__link,
+  .ivds-breadcrumb__current {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,68 @@
+// Breadcrumb component styles
+// Provides styling for the IVDS breadcrumb component following Helsinki Design System patterns
+
+@use 'breadcrumb-mixins' as breadcrumb;
+
+.ivds-breadcrumb {
+  @include breadcrumb.breadcrumb-base;
+  
+  &__list {
+    @include breadcrumb.breadcrumb-list;
+  }
+  
+  &__item {
+    @include breadcrumb.breadcrumb-item;
+  }
+  
+  &__link {
+    @include breadcrumb.breadcrumb-link;
+  }
+  
+  &__current {
+    @include breadcrumb.breadcrumb-current;
+  }
+  
+  // Size variants
+  &--small {
+    @include breadcrumb.breadcrumb-small;
+  }
+  
+  &--large {
+    @include breadcrumb.breadcrumb-large;
+  }
+  
+  // Separator variants
+  &--separator-arrow {
+    @include breadcrumb.breadcrumb-separator-arrow;
+  }
+  
+  &--separator-chevron {
+    @include breadcrumb.breadcrumb-separator-chevron;
+  }
+  
+  &--separator-bullet {
+    @include breadcrumb.breadcrumb-separator-bullet;
+  }
+  
+  // Theme variants
+  &--theme-dark {
+    @include breadcrumb.breadcrumb-theme-dark;
+  }
+  
+  &--theme-muted {
+    @include breadcrumb.breadcrumb-theme-muted;
+  }
+  
+  // Feature variants
+  &--with-icons {
+    @include breadcrumb.breadcrumb-with-icons;
+  }
+  
+  &--responsive {
+    @include breadcrumb.breadcrumb-responsive;
+  }
+  
+  &--truncate {
+    @include breadcrumb.breadcrumb-truncate;
+  }
+}