@ivds/core 0.1.1 → 1.0.0

package/src/base/_typography.scss

@@ -1,105 +1,121 @@
-// 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;
-}
+// Base typography styles for IVDS Core
+
+@use '../variables/variables' as vars;
+@use 'focus' as *;
+
+html {
+  font-size: 100%;
+  text-rendering: optimizelegibility;
+}
+
+body {
+  font-family: vars.$fontFamily-primary;
+  font-size: vars.$fontSize-base;
+  font-weight: var(--fontWeight-normal, 400);
+  line-height: var(--lineHeight-normal, 1.5);
+  color: var(--ivds-text-primary);
+  background-color: var(--ivds-surface-page);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 vars.$spacing-4;
+  color: var(--ivds-text-primary);
+  font-family: var(--fontFamily-display, vars.$fontFamily-secondary);
+  font-weight: var(--fontWeight-semibold, 600);
+  letter-spacing: -0.01em;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+
+h1 {
+  font-size: clamp(2.25rem, 4.2vw, 4.25rem);
+  line-height: 1.08;
+}
+
+h2 {
+  font-size: clamp(1.75rem, 2.7vw, 3rem);
+}
+
+h3 {
+  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
+}
+
+h4 {
+  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
+}
+
+h5 {
+  font-size: vars.$fontSize-lg;
+}
+
+h6 {
+  font-size: vars.$fontSize-base;
+}
+
+p {
+  margin: 0 0 vars.$spacing-4;
+  color: var(--ivds-text-secondary);
+  max-width: 72ch;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+a {
+  color: var(--color-brand-accent-700, #0b4593);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.16em;
+  transition:
+    color var(--ivds-motion-fast) var(--ivds-motion-ease),
+    text-decoration-color var(--ivds-motion-fast) var(--ivds-motion-ease);
+
+  &:hover {
+    color: var(--color-brand-accent-600, #1058b8);
+    text-decoration-color: currentcolor;
+  }
+
+  @include focus-ring;
+}
+
+code {
+  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);
+  font-size: vars.$fontSize-sm;
+  background-color: var(--ivds-surface-muted);
+  color: var(--ivds-text-primary);
+  padding: vars.$spacing-1 vars.$spacing-2;
+  border-radius: var(--ivds-radius-s);
+}
+
+pre {
+  margin: 0 0 vars.$spacing-4;
+  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);
+  font-size: vars.$fontSize-sm;
+  line-height: var(--lineHeight-relaxed, 1.625);
+  background-color: var(--ivds-surface-base);
+  color: var(--ivds-text-primary);
+  border: 1px solid var(--ivds-border-subtle);
+  border-radius: var(--ivds-radius-m);
+  box-shadow: var(--ivds-shadow-sm);
+  padding: vars.$spacing-4;
+  overflow-x: auto;
+
+  code {
+    background-color: transparent;
+    padding: 0;
+  }
+}
+
+.ivds-typography {
+  color: var(--ivds-text-primary);
+  font-family: vars.$fontFamily-primary;
+  font-size: vars.$fontSize-base;
+  line-height: var(--lineHeight-normal, 1.5);
+}

package/src/base/base.scss

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

package/src/components/alert/_alert-mixin.scss

@@ -0,0 +1,55 @@
+// Alert component mixins and private styles
+// Clear institutional banners for contextual messages.
+
+@mixin alert-base {
+  // Per-component CSS variable API
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --accent-color: var(--ivds-border-subtle, #e2e7ec);
+  --color: var(--ivds-text-secondary, #36414f);
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --padding: var(--spacing-4, 1rem);
+
+  display: flex;
+  align-items: flex-start;
+  padding: var(--padding);
+  border: 1px solid var(--border-color);
+  border-left-width: 4px;
+  border-left-color: var(--accent-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  position: relative;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+}
+
+@mixin alert-variant($bg-color, $accent-color, $text-color) {
+  --background-color: #{$bg-color};
+  --border-color: #{$accent-color};
+  --accent-color: #{$accent-color};
+  --color: #{$text-color};
+
+  .ivds-alert__icon {
+    color: var(--accent-color);
+  }
+}
+
+@mixin alert-title {
+  font-weight: var(--fontWeight-bold, 700);
+  margin-bottom: var(--spacing-1, 0.25rem);
+  display: block;
+}
+
+@mixin alert-content {
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+
+@mixin alert-icon {
+  flex-shrink: 0;
+  margin-right: var(--spacing-3, 0.75rem);
+  margin-top: calc(var(--lineHeight-relaxed, 1.625) * 0.1em); 
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/alert/alert.scss

@@ -0,0 +1,62 @@
+@use 'alert-mixin' as alert;
+
+.ivds-alert {
+  @include alert.alert-base;
+  
+  &__icon {
+    @include alert.alert-icon;
+  }
+  
+  &__body {
+    flex: 1;
+  }
+  
+  &__title {
+    @include alert.alert-title;
+  }
+  
+  &__content {
+    @include alert.alert-content;
+  }
+  
+  // Variants
+  &--info {
+    @include alert.alert-variant(
+      var(--color-semantic-info-50, #edf4ff),
+      var(--color-semantic-info-600, #0050c8),
+      var(--color-semantic-info-700, #003d99)
+    );
+  }
+  
+  &--success {
+    @include alert.alert-variant(
+      var(--color-semantic-success-50, #edf9f4),
+      var(--color-semantic-success-600, #0f6f4a),
+      var(--color-semantic-success-700, #0a573a)
+    );
+  }
+  
+  &--warning {
+    @include alert.alert-variant(
+      var(--color-semantic-warning-50, #fff8eb),
+      var(--color-semantic-warning-600, #a76009),
+      var(--color-semantic-warning-700, #834b08)
+    );
+  }
+  
+  &--error {
+    @include alert.alert-variant(
+      var(--color-semantic-error-50, #fff1f2),
+      var(--color-semantic-error-600, #b72a41),
+      var(--color-semantic-error-700, #922036)
+    );
+  }
+  
+  &--orange {
+    @include alert.alert-variant(
+      var(--color-brand-primary-50, #fef5ee),
+      var(--color-brand-primary-600, #b34a00),
+      var(--color-brand-primary-900, #562400)
+    );
+  }
+}

package/src/components/all.scss

@@ -6,11 +6,17 @@
 @use './text-input/text-input.scss';
 @use './checkbox/checkbox.scss';
 @use './radio-button/radio-button.scss';
+@use './switch/switch.scss';
+@use './select/select.scss';
 
 // Content and layout components
 @use './card/card.scss';
 @use './notification/notification.scss';
 @use './tag/tag.scss';
+@use './alert/alert.scss';
+@use './badge/badge.scss';
+@use './modal/modal.scss';
+@use './tabs/tabs.scss';
 
 // Navigation components
 @use './breadcrumb/breadcrumb.scss';

package/src/components/badge/_badge-mixin.scss

@@ -0,0 +1,35 @@
+// Badge component mixins and private styles
+// Small, functional labels with sharp edges
+
+@use '../../variables/variables' as vars;
+
+@mixin badge-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1, 0.25rem);
+  padding: 0 var(--spacing-2, 0.5rem);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-xs, 0.75rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  line-height: normal;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  min-height: 20px;
+  border: 1px solid transparent;
+}
+
+@mixin badge-variant($bg-color, $text-color, $border-color: transparent) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $border-color;
+}
+
+@mixin badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--borderRadius-full, 9999px);
+  margin-right: var(--spacing-1, 0.25rem);
+  background-color: currentcolor;
+}

package/src/components/badge/badge.scss

@@ -0,0 +1,56 @@
+@use 'badge-mixin' as badge;
+
+.ivds-badge {
+  @include badge.badge-base;
+  
+  &__dot {
+    @include badge.badge-dot;
+  }
+  
+  // Variants
+  &--neutral {
+    @include badge.badge-variant(
+      var(--color-semantic-neutral-100, #f1f3f5),
+      var(--color-semantic-neutral-700, #36414f),
+      var(--color-semantic-neutral-300, #cfd6dd)
+    );
+  }
+  
+  &--primary {
+    @include badge.badge-variant(
+      var(--color-brand-accent-50, #eef4ff),
+      var(--color-brand-accent-700, #0b4593),
+      var(--color-brand-accent-200, #bfd7ff)
+    );
+  }
+  
+  &--success {
+    @include badge.badge-variant(
+      var(--color-semantic-success-50, #edf9f4),
+      var(--color-semantic-success-700, #0a573a),
+      var(--color-ui-success-200, #b8e9d2)
+    );
+  }
+  
+  &--warning {
+    @include badge.badge-variant(
+      var(--color-semantic-warning-50, #fff8eb),
+      var(--color-semantic-warning-700, #834b08),
+      var(--color-ui-warning-200, #f6d6a7)
+    );
+  }
+  
+  &--error {
+    @include badge.badge-variant(
+      var(--color-semantic-error-50, #fff1f2),
+      var(--color-semantic-error-700, #922036),
+      var(--color-ui-error-200, #f2b8c1)
+    );
+  }
+  
+  &--outline {
+    background-color: transparent;
+    border: 1px solid var(--ivds-border-strong, #a1adba);
+    color: var(--ivds-text-secondary, #36414f);
+  }
+}

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

@@ -0,0 +1,51 @@
+// Breadcrumb component mixins and private styles
+
+@use '../../base/focus' as *;
+
+@mixin breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: var(--spacing-2, 0.5rem);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-sm, 0.875rem);
+}
+
+@mixin breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  color: var(--ivds-text-muted, #4d5968);
+}
+
+@mixin breadcrumb-link {
+  color: var(--color-brand-accent-700, #0b4593);
+  text-decoration: none;
+  font-weight: var(--fontWeight-medium, 500);
+  transition:
+    color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    text-decoration-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &:hover {
+    color: var(--color-brand-accent-600, #1058b8);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 0.14em;
+  }
+
+  @include focus-ring;
+}
+
+@mixin breadcrumb-separator {
+  color: var(--ivds-border-strong, #a1adba);
+  display: flex;
+  align-items: center;
+}
+
+@mixin breadcrumb-current {
+  color: var(--ivds-text-primary, #121a24);
+  font-weight: var(--fontWeight-semibold, 600);
+}

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

@@ -2,15 +2,16 @@
 // This file contains mixins for breadcrumb variants and internal utilities
 
 @use '../../variables/variables' as vars;
+@use '../../base/focus' as *;
 
 // 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);
+  --link-color: var(--color-brand-accent-700, #0b4593);
+  --link-color-hover: var(--color-brand-accent-600, #1058b8);
+  --current-color: var(--ivds-text-secondary, #36414f);
+  --separator-color: var(--ivds-border-strong, #a1adba);
 
   display: flex;
   align-items: center;
@@ -49,25 +50,27 @@
 @mixin breadcrumb-link {
   color: var(--link-color);
   text-decoration: none;
-  transition: all 0.15s ease-in-out;
-  border-radius: var(--borderRadius-md, 0.375rem);
+  transition: all var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+  border-radius: var(--ivds-radius-xs, 0);
   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);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 0.14em;
+    background-color: var(--color-brand-accent-50, #eef4ff);
   }
   
-  &:focus {
-    outline: 2px solid var(--color-brand-primary-500, #f97316);
-    outline-offset: 2px;
+  @include focus-ring;
+
+  &:focus-visible {
     text-decoration: none;
   }
   
   &:active {
-    background-color: var(--color-brand-primary-100, #ffedd5);
+    background-color: var(--color-brand-accent-100, #dbe9ff);
   }
 }
 
@@ -107,8 +110,8 @@
 
 // Breadcrumb theme variants
 @mixin breadcrumb-theme-dark {
-  --link-color: var(--color-brand-primary-400, #fb923c);
-  --link-color-hover: var(--color-brand-primary-300, #fdba74);
+  --link-color: var(--color-brand-accent-300, #93bcff);
+  --link-color-hover: var(--color-brand-accent-200, #bfd7ff);
   --current-color: var(--color-semantic-neutral-200, #e5e5e5);
   --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
 }
@@ -170,4 +173,4 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-}
+}

package/src/components/breadcrumb/breadcrumb.scss

@@ -1,14 +1,7 @@
-// Breadcrumb component styles
-// Provides styling for the IVDS breadcrumb component following Helsinki Design System patterns
-
-@use 'breadcrumb-mixins' as breadcrumb;
+@use 'breadcrumb-mixin' as breadcrumb;
 
 .ivds-breadcrumb {
-  @include breadcrumb.breadcrumb-base;
-  
-  &__list {
-    @include breadcrumb.breadcrumb-list;
-  }
+  @include breadcrumb.breadcrumb-list;
   
   &__item {
     @include breadcrumb.breadcrumb-item;
@@ -18,51 +11,16 @@
     @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 {
+    @include breadcrumb.breadcrumb-separator;
+    
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
   }
   
-  &--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;
+  &__current {
+    @include breadcrumb.breadcrumb-current;
   }
 }