@ivds/core 0.1.1 → 1.0.0

package/lib/base/base.css

@@ -1,41 +1,47 @@
-/* Base styles entry point*/
-/* This file imports all base styles for the IVDS Core package*/
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
+
 * {
   margin: 0;
   padding: 0;
 }
+
 ul[role=list],
 ol[role=list] {
   list-style: none;
 }
+
 html:focus-within {
   scroll-behavior: smooth;
 }
+
 body {
   min-height: 100vh;
   text-rendering: optimizespeed;
   line-height: 1.5;
 }
+
 a:not([class]) {
   -webkit-text-decoration-skip: ink;
           text-decoration-skip-ink: auto;
 }
+
 img,
 picture {
   max-width: 100%;
   display: block;
 }
+
 input,
 button,
 textarea,
 select {
   font: inherit;
 }
+
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
     scroll-behavior: auto;
@@ -49,167 +55,329 @@ select {
     scroll-behavior: auto !important;
   }
 }
+
 .ivds-reset {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
+
 .ivds-reset *,
 .ivds-reset *::before,
 .ivds-reset *::after {
   box-sizing: inherit;
 }
+
+:root {
+  color-scheme: light;
+  --fontFamily-primary: var(--typography-fontFamilies-primary, "Inter", "Noto Sans", sans-serif);
+  --fontFamily-secondary: var(--typography-fontFamilies-secondary, "IBM Plex Sans", "Inter", sans-serif);
+  --fontFamily-display: var(--typography-fontFamilies-display, "IBM Plex Sans", "Inter", sans-serif);
+  --color-semantic-neutral-50: var(--color-ui-neutral-50, #f7f8fa);
+  --color-semantic-neutral-100: var(--color-ui-neutral-100, #f1f3f5);
+  --color-semantic-neutral-200: var(--color-ui-neutral-200, #e2e7ec);
+  --color-semantic-neutral-300: var(--color-ui-neutral-300, #cfd6dd);
+  --color-semantic-neutral-400: var(--color-ui-neutral-400, #a1adba);
+  --color-semantic-neutral-500: var(--color-ui-neutral-500, #6b7785);
+  --color-semantic-neutral-600: var(--color-ui-neutral-600, #4d5968);
+  --color-semantic-neutral-700: var(--color-ui-neutral-700, #36414f);
+  --color-semantic-neutral-800: var(--color-ui-neutral-800, #202a36);
+  --color-semantic-neutral-900: var(--color-ui-neutral-900, #121a24);
+  --color-semantic-success-50: var(--color-ui-success-50, #edf9f4);
+  --color-semantic-success-500: var(--color-ui-success-500, #19895d);
+  --color-semantic-success-600: var(--color-ui-success-600, #0f6f4a);
+  --color-semantic-success-700: var(--color-ui-success-700, #0a573a);
+  --color-semantic-warning-50: var(--color-ui-warning-50, #fff8eb);
+  --color-semantic-warning-500: var(--color-ui-warning-500, #ce790b);
+  --color-semantic-warning-600: var(--color-ui-warning-600, #a76009);
+  --color-semantic-warning-700: var(--color-ui-warning-700, #834b08);
+  --color-semantic-error-50: var(--color-ui-error-50, #fff1f2);
+  --color-semantic-error-500: var(--color-ui-error-500, #d73a50);
+  --color-semantic-error-600: var(--color-ui-error-600, #b72a41);
+  --color-semantic-error-700: var(--color-ui-error-700, #922036);
+  --color-semantic-info-50: var(--color-ui-info-50, #edf4ff);
+  --color-semantic-info-500: var(--color-ui-info-500, #1f6fe5);
+  --color-semantic-info-600: var(--color-ui-info-600, #0050c8);
+  --color-semantic-info-700: var(--color-ui-info-700, #003d99);
+  --ivds-surface-page: var(--color-semantic-neutral-50);
+  --ivds-surface-base: #fff;
+  --ivds-surface-muted: var(--color-semantic-neutral-100);
+  --ivds-surface-strong: var(--color-semantic-neutral-900);
+  --ivds-border-subtle: var(--color-semantic-neutral-200);
+  --ivds-border-strong: var(--color-semantic-neutral-400);
+  --ivds-border-brand: var(--color-brand-accent-600);
+  --ivds-text-primary: var(--color-semantic-neutral-900);
+  --ivds-text-secondary: var(--color-semantic-neutral-800);
+  --ivds-text-muted: var(--color-semantic-neutral-600);
+  --ivds-text-on-strong: #fff;
+  --ivds-interactive-primary-bg: var(--color-brand-accent-600);
+  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-700);
+  --ivds-interactive-primary-bg-active: var(--color-brand-accent-800);
+  --ivds-interactive-primary-text: #fff;
+  --ivds-interactive-secondary-bg: #fff;
+  --ivds-interactive-secondary-bg-hover: var(--color-brand-accent-50);
+  --ivds-interactive-secondary-border: var(--color-brand-accent-600);
+  --ivds-interactive-secondary-text: var(--color-brand-accent-700);
+  --ivds-interactive-supplementary-bg: var(--color-semantic-neutral-100);
+  --ivds-interactive-supplementary-bg-hover: var(--color-semantic-neutral-200);
+  --ivds-interactive-supplementary-text: var(--color-brand-accent-700);
+  --ivds-radius-xs: var(--borderRadius-xs, 0);
+  --ivds-radius-s: var(--borderRadius-sm, 0.125rem);
+  --ivds-radius-m: var(--borderRadius-md, 0.25rem);
+  --ivds-radius-l: var(--borderRadius-lg, 0.375rem);
+  --ivds-shadow-sm: var(--shadow-xs, 0 1px 0 rgba(7, 11, 16, 0.10));
+  --ivds-shadow-md: var(--shadow-sm, 0 1px 2px rgba(7, 11, 16, 0.12));
+  --ivds-shadow-lg: var(--shadow-md, 0 4px 10px rgba(7, 11, 16, 0.14));
+  --container-max-width: 1240px;
+  --ivds-focus-ring-color: var(--color-brand-accent-600, #1058b8);
+  --ivds-focus-ring-width: 3px;
+  --ivds-focus-ring-offset: 2px;
+  --ivds-focus-ring: 0 0 0 3px rgba(0, 80, 200, 0.30);
+  --ivds-motion-fast: var(--animation-duration-fast, 150ms);
+  --ivds-motion-normal: var(--animation-duration-normal, 250ms);
+  --ivds-motion-ease: var(--animation-easing-easeOut, cubic-bezier(0, 0, 0.2, 1));
+}
+
+[data-ivds-theme=dark] {
+  color-scheme: dark;
+  --ivds-surface-page: #0f1620;
+  --ivds-surface-base: #141e2a;
+  --ivds-surface-muted: #1c2734;
+  --ivds-surface-strong: #070b10;
+  --ivds-border-subtle: #283443;
+  --ivds-border-strong: #415065;
+  --ivds-text-primary: #f6f8fb;
+  --ivds-text-secondary: #dde3ea;
+  --ivds-text-muted: #b7c2ce;
+  --ivds-text-on-strong: #fff;
+  --ivds-interactive-primary-bg: var(--color-brand-accent-500);
+  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-600);
+  --ivds-interactive-primary-bg-active: var(--color-brand-accent-700);
+  --ivds-interactive-secondary-bg: transparent;
+  --ivds-interactive-secondary-bg-hover: rgba(147, 188, 255, 0.15);
+  --ivds-interactive-secondary-border: var(--color-brand-accent-400);
+  --ivds-interactive-secondary-text: var(--color-brand-accent-300);
+  --ivds-interactive-supplementary-bg: rgba(255, 255, 255, 0.08);
+  --ivds-interactive-supplementary-bg-hover: rgba(255, 255, 255, 0.14);
+  --ivds-interactive-supplementary-text: #e7eefb;
+  --ivds-focus-ring-color: var(--color-brand-accent-400, #5a93f5);
+}
+
+.ivds-theme-surface {
+  background-color: var(--ivds-surface-base);
+  border: 1px solid var(--ivds-border-subtle);
+  border-radius: var(--ivds-radius-m);
+  box-shadow: var(--ivds-shadow-sm);
+}
+
+.ivds-theme-eyebrow {
+  display: inline-block;
+  color: var(--color-brand-accent-700, #0b4593);
+  font-size: var(--fontSize-xs, 0.75rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+html {
+  font-size: 100%;
+  text-rendering: optimizelegibility;
+}
+
 body {
   font-family: var(--typography-fontFamilies-primary);
   font-size: var(--fontSize-base);
-  font-weight: var(--fontWeight-normal);
-  line-height: var(--lineHeight-normal);
-  color: var(--color-semantic-neutral-900);
+  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 {
-  font-family: var(--typography-fontFamilies-primary);
-  font-weight: var(--fontWeight-semibold);
-  line-height: var(--lineHeight-tight);
-  color: var(--color-semantic-neutral-900);
-  margin-bottom: var(--spacing-4);
-}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 var(--spacing-4);
+  color: var(--ivds-text-primary);
+  font-family: var(--fontFamily-display, var(--typography-fontFamilies-secondary));
+  font-weight: var(--fontWeight-semibold, 600);
+  letter-spacing: -0.01em;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+
 h1 {
-  font-size: var(--fontSize-4xl);
+  font-size: clamp(2.25rem, 4.2vw, 4.25rem);
+  line-height: 1.08;
 }
+
 h2 {
-  font-size: var(--fontSize-3xl);
+  font-size: clamp(1.75rem, 2.7vw, 3rem);
 }
+
 h3 {
-  font-size: var(--fontSize-2xl);
+  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
 }
+
 h4 {
-  font-size: var(--fontSize-xl);
+  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
 }
+
 h5 {
   font-size: var(--fontSize-lg);
 }
+
 h6 {
   font-size: var(--fontSize-base);
 }
+
 p {
-  margin-bottom: var(--spacing-4);
+  margin: 0 0 var(--spacing-4);
+  color: var(--ivds-text-secondary);
+  max-width: 72ch;
 }
+
 p:last-child {
   margin-bottom: 0;
 }
+
 a {
-  color: var(--color-brand-primary-600);
+  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);
 }
+
 a:hover {
-  color: var(--color-brand-primary-700);
+  color: var(--color-brand-accent-600, #1058b8);
+  text-decoration-color: currentcolor;
+}
+
+a:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-a:focus {
-  outline: 2px solid var(--color-brand-primary-500);
-  outline-offset: 2px;
+
+a:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
+
 code {
-  font-family: var(--typography-fontFamilies-secondary);
+  font-family: var(--typography-fontFamilies-mono, "JetBrains Mono", monospace);
   font-size: var(--fontSize-sm);
-  background-color: var(--color-semantic-neutral-100);
+  background-color: var(--ivds-surface-muted);
+  color: var(--ivds-text-primary);
   padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--borderRadius-sm);
+  border-radius: var(--ivds-radius-s);
 }
+
 pre {
-  font-family: var(--typography-fontFamilies-secondary);
+  margin: 0 0 var(--spacing-4);
+  font-family: var(--typography-fontFamilies-mono, "JetBrains Mono", monospace);
   font-size: var(--fontSize-sm);
-  background-color: var(--color-semantic-neutral-100);
+  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: var(--spacing-4);
-  border-radius: var(--borderRadius-md);
   overflow-x: auto;
 }
+
 pre code {
   background-color: transparent;
   padding: 0;
 }
+
 .ivds-typography {
+  color: var(--ivds-text-primary);
   font-family: var(--typography-fontFamilies-primary);
   font-size: var(--fontSize-base);
-  line-height: var(--lineHeight-normal);
-  color: var(--color-semantic-neutral-900);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-html {
-  height: 100%;
+  line-height: var(--lineHeight-normal, 1.5);
 }
+
+html,
 body {
   min-height: 100%;
+}
+
+body {
+  margin: 0;
   display: flex;
   flex-direction: column;
 }
+
 main {
   flex: 1;
 }
+
 .ivds-container {
   width: 100%;
+  max-width: var(--container-max-width, 1200px);
   margin-left: auto;
   margin-right: auto;
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
+  padding-left: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));
+  padding-right: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));
 }
+
 .ivds-container--xs {
-  max-width: calc(var(--breakpoints-xs) - var(--spacing-8));
+  max-width: 540px;
 }
+
 .ivds-container--sm {
-  max-width: calc(var(--breakpoints-sm) - var(--spacing-8));
+  max-width: 720px;
 }
+
 .ivds-container--md {
-  max-width: calc(var(--breakpoints-md) - var(--spacing-8));
+  max-width: 920px;
 }
+
 .ivds-container--lg {
-  max-width: calc(var(--breakpoints-lg) - var(--spacing-8));
+  max-width: 1160px;
 }
+
 .ivds-container--xl {
-  max-width: calc(var(--breakpoints-xl) - var(--spacing-8));
-}
-@media (min-width: var(--breakpoints-sm)) {
-  .ivds-container {
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-  }
-}
-@media (min-width: var(--breakpoints-lg)) {
-  .ivds-container {
-    padding-left: var(--spacing-8);
-    padding-right: var(--spacing-8);
-  }
+  max-width: 1320px;
 }
+
 .ivds-layout {
   width: 100%;
   min-height: 100vh;
 }
+
 .ivds-layout--flex {
   display: flex;
 }
+
 .ivds-layout--grid {
   display: grid;
 }
+
 .ivds-layout--centered {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .ivds-section {
-  padding-top: var(--spacing-12);
-  padding-bottom: var(--spacing-12);
+  padding-top: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));
+  padding-bottom: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));
 }
-@media (min-width: var(--breakpoints-md)) {
-  .ivds-section {
-    padding-top: var(--spacing-16);
-    padding-bottom: var(--spacing-16);
-  }
+
+.ivds-stack {
+  display: grid;
+  gap: var(--spacing-6, 1.5rem);
 }
-@media (min-width: var(--breakpoints-lg)) {
-  .ivds-section {
-    padding-top: var(--spacing-20);
-    padding-bottom: var(--spacing-20);
-  }
+
+.ivds-grid-shell {
+  display: grid;
+  gap: var(--spacing-6, 1.5rem);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
 }

package/lib/base/base.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/base/_reset.scss","../../src/base/base.scss","../../src/base/_theme.scss","../../src/base/_typography.scss","../../src/variables/_typography.scss","../../src/base/_focus.scss","../../src/variables/_spacing.scss","../../src/base/_layout.scss"],"names":[],"mappings":"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","file":"base.css","sourcesContent":["// Modern CSS Reset for IVDS Core\r\n// Provides a consistent baseline across browsers based on modern reset practices\r\n\r\n// Import design tokens\r\n@use '../variables/variables' as vars;\r\n\r\n// Box sizing rules\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n// Remove default margin and padding\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n// Remove list styles on ul, ol elements with a list role\r\nul[role='list'],\r\nol[role='list'] {\r\n  list-style: none;\r\n}\r\n\r\n// Set core root defaults\r\nhtml:focus-within {\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n// Set core body defaults\r\nbody {\r\n  min-height: 100vh;\r\n  text-rendering: optimizespeed;\r\n  line-height: 1.5;\r\n}\r\n\r\n// A elements that don't have a class get default styles\r\na:not([class]) {\r\n  text-decoration-skip-ink: auto;\r\n}\r\n\r\n// Make images easier to work with\r\nimg,\r\npicture {\r\n  max-width: 100%;\r\n  display: block;\r\n}\r\n\r\n// Inherit fonts for inputs and buttons\r\ninput,\r\nbutton,\r\ntextarea,\r\nselect {\r\n  font: inherit;\r\n}\r\n\r\n// Remove all animations, transitions and smooth scroll for people that prefer not to see them\r\n@media (prefers-reduced-motion: reduce) {\r\n  html:focus-within {\r\n   scroll-behavior: auto;\r\n  }\r\n  \r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n}\r\n\r\n// IVDS specific reset class for scoped usage\r\n.ivds-reset {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  \r\n  *,\r\n  *::before,\r\n  *::after {\r\n    box-sizing: inherit;\r\n  }\r\n}","// Base styles entry point\r\n// This file imports all base styles for the IVDS Core package\r\n\r\n@use 'reset';\n@use 'theme';\n@use 'typography';\n@use 'layout';\n","// Global IVDS theme contract\n// Civic modern direction inspired by institutional systems:\n// high contrast, strong typography, clear state feedback.\n\n:root {\n  color-scheme: light;\n\n  // Typography aliases for existing components\n  --fontFamily-primary: var(--typography-fontFamilies-primary, 'Inter', 'Noto Sans', sans-serif);\n  --fontFamily-secondary: var(--typography-fontFamilies-secondary, 'IBM Plex Sans', 'Inter', sans-serif);\n  --fontFamily-display: var(--typography-fontFamilies-display, 'IBM Plex Sans', 'Inter', sans-serif);\n\n  // Brand colors are defined by @ivds/design-tokens (all.css).\n  // No re-declaration here — tokens provide the full brand palette:\n  //   --color-brand-primary-{50..950}   (burnt orange)\n  //   --color-brand-secondary-{50..950} (green)\n  //   --color-brand-accent-{50..950}    (blue)\n\n  // Neutral aliases\n  --color-semantic-neutral-50: var(--color-ui-neutral-50, #f7f8fa);\n  --color-semantic-neutral-100: var(--color-ui-neutral-100, #f1f3f5);\n  --color-semantic-neutral-200: var(--color-ui-neutral-200, #e2e7ec);\n  --color-semantic-neutral-300: var(--color-ui-neutral-300, #cfd6dd);\n  --color-semantic-neutral-400: var(--color-ui-neutral-400, #a1adba);\n  --color-semantic-neutral-500: var(--color-ui-neutral-500, #6b7785);\n  --color-semantic-neutral-600: var(--color-ui-neutral-600, #4d5968);\n  --color-semantic-neutral-700: var(--color-ui-neutral-700, #36414f);\n  --color-semantic-neutral-800: var(--color-ui-neutral-800, #202a36);\n  --color-semantic-neutral-900: var(--color-ui-neutral-900, #121a24);\n\n  // Feedback aliases\n  --color-semantic-success-50: var(--color-ui-success-50, #edf9f4);\n  --color-semantic-success-500: var(--color-ui-success-500, #19895d);\n  --color-semantic-success-600: var(--color-ui-success-600, #0f6f4a);\n  --color-semantic-success-700: var(--color-ui-success-700, #0a573a);\n  --color-semantic-warning-50: var(--color-ui-warning-50, #fff8eb);\n  --color-semantic-warning-500: var(--color-ui-warning-500, #ce790b);\n  --color-semantic-warning-600: var(--color-ui-warning-600, #a76009);\n  --color-semantic-warning-700: var(--color-ui-warning-700, #834b08);\n  --color-semantic-error-50: var(--color-ui-error-50, #fff1f2);\n  --color-semantic-error-500: var(--color-ui-error-500, #d73a50);\n  --color-semantic-error-600: var(--color-ui-error-600, #b72a41);\n  --color-semantic-error-700: var(--color-ui-error-700, #922036);\n  --color-semantic-info-50: var(--color-ui-info-50, #edf4ff);\n  --color-semantic-info-500: var(--color-ui-info-500, #1f6fe5);\n  --color-semantic-info-600: var(--color-ui-info-600, #0050c8);\n  --color-semantic-info-700: var(--color-ui-info-700, #003d99);\n\n  // Surface + text system\n  --ivds-surface-page: var(--color-semantic-neutral-50);\n  --ivds-surface-base: #fff;\n  --ivds-surface-muted: var(--color-semantic-neutral-100);\n  --ivds-surface-strong: var(--color-semantic-neutral-900);\n  --ivds-border-subtle: var(--color-semantic-neutral-200);\n  --ivds-border-strong: var(--color-semantic-neutral-400);\n  --ivds-border-brand: var(--color-brand-accent-600);\n  --ivds-text-primary: var(--color-semantic-neutral-900);\n  --ivds-text-secondary: var(--color-semantic-neutral-800);\n  --ivds-text-muted: var(--color-semantic-neutral-600);\n  --ivds-text-on-strong: #fff;\n\n  // Interactive aliases\n  --ivds-interactive-primary-bg: var(--color-brand-accent-600);\n  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-700);\n  --ivds-interactive-primary-bg-active: var(--color-brand-accent-800);\n  --ivds-interactive-primary-text: #fff;\n  --ivds-interactive-secondary-bg: #fff;\n  --ivds-interactive-secondary-bg-hover: var(--color-brand-accent-50);\n  --ivds-interactive-secondary-border: var(--color-brand-accent-600);\n  --ivds-interactive-secondary-text: var(--color-brand-accent-700);\n  --ivds-interactive-supplementary-bg: var(--color-semantic-neutral-100);\n  --ivds-interactive-supplementary-bg-hover: var(--color-semantic-neutral-200);\n  --ivds-interactive-supplementary-text: var(--color-brand-accent-700);\n\n  // Radius + shadow aliases\n  --ivds-radius-xs: var(--borderRadius-xs, 0);\n  --ivds-radius-s: var(--borderRadius-sm, 0.125rem);\n  --ivds-radius-m: var(--borderRadius-md, 0.25rem);\n  --ivds-radius-l: var(--borderRadius-lg, 0.375rem);\n  --ivds-shadow-sm: var(--shadow-xs, 0 1px 0 rgba(7, 11, 16, 0.10));\n  --ivds-shadow-md: var(--shadow-sm, 0 1px 2px rgba(7, 11, 16, 0.12));\n  --ivds-shadow-lg: var(--shadow-md, 0 4px 10px rgba(7, 11, 16, 0.14));\n\n  // Layout defaults\n  --container-max-width: 1240px;\n\n  // Focus treatment — outline-based (no box-shadow conflict with elevated components)\n  --ivds-focus-ring-color: var(--color-brand-accent-600, #1058b8);\n  --ivds-focus-ring-width: 3px;\n  --ivds-focus-ring-offset: 2px;\n  --ivds-focus-ring: 0 0 0 3px rgba(0, 80, 200, 0.30); // legacy alias\n\n  // Motion\n  --ivds-motion-fast: var(--animation-duration-fast, 150ms);\n  --ivds-motion-normal: var(--animation-duration-normal, 250ms);\n  --ivds-motion-ease: var(--animation-easing-easeOut, cubic-bezier(0, 0, 0.2, 1));\n}\n\n[data-ivds-theme='dark'] {\n  color-scheme: dark;\n\n  --ivds-surface-page: #0f1620;\n  --ivds-surface-base: #141e2a;\n  --ivds-surface-muted: #1c2734;\n  --ivds-surface-strong: #070b10;\n  --ivds-border-subtle: #283443;\n  --ivds-border-strong: #415065;\n  --ivds-text-primary: #f6f8fb;\n  --ivds-text-secondary: #dde3ea;\n  --ivds-text-muted: #b7c2ce;\n  --ivds-text-on-strong: #fff;\n  --ivds-interactive-primary-bg: var(--color-brand-accent-500);\n  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-600);\n  --ivds-interactive-primary-bg-active: var(--color-brand-accent-700);\n  --ivds-interactive-secondary-bg: transparent;\n  --ivds-interactive-secondary-bg-hover: rgba(147, 188, 255, 0.15);\n  --ivds-interactive-secondary-border: var(--color-brand-accent-400);\n  --ivds-interactive-secondary-text: var(--color-brand-accent-300);\n  --ivds-interactive-supplementary-bg: rgba(255, 255, 255, 0.08);\n  --ivds-interactive-supplementary-bg-hover: rgba(255, 255, 255, 0.14);\n  --ivds-interactive-supplementary-text: #e7eefb;\n  --ivds-focus-ring-color: var(--color-brand-accent-400, #5a93f5);\n}\n\n.ivds-theme-surface {\n  background-color: var(--ivds-surface-base);\n  border: 1px solid var(--ivds-border-subtle);\n  border-radius: var(--ivds-radius-m);\n  box-shadow: var(--ivds-shadow-sm);\n}\n\n.ivds-theme-eyebrow {\n  display: inline-block;\n  color: var(--color-brand-accent-700, #0b4593);\n  font-size: var(--fontSize-xs, 0.75rem);\n  font-weight: var(--fontWeight-semibold, 600);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n","// Base typography styles for IVDS Core\n\n@use '../variables/variables' as vars;\n@use 'focus' as *;\n\nhtml {\n  font-size: 100%;\n  text-rendering: optimizelegibility;\n}\n\nbody {\n  font-family: vars.$fontFamily-primary;\n  font-size: vars.$fontSize-base;\n  font-weight: var(--fontWeight-normal, 400);\n  line-height: var(--lineHeight-normal, 1.5);\n  color: var(--ivds-text-primary);\n  background-color: var(--ivds-surface-page);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0 0 vars.$spacing-4;\n  color: var(--ivds-text-primary);\n  font-family: var(--fontFamily-display, vars.$fontFamily-secondary);\n  font-weight: var(--fontWeight-semibold, 600);\n  letter-spacing: -0.01em;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\nh1 {\n  font-size: clamp(2.25rem, 4.2vw, 4.25rem);\n  line-height: 1.08;\n}\n\nh2 {\n  font-size: clamp(1.75rem, 2.7vw, 3rem);\n}\n\nh3 {\n  font-size: clamp(1.375rem, 2.1vw, 2.125rem);\n}\n\nh4 {\n  font-size: clamp(1.125rem, 1.6vw, 1.5rem);\n}\n\nh5 {\n  font-size: vars.$fontSize-lg;\n}\n\nh6 {\n  font-size: vars.$fontSize-base;\n}\n\np {\n  margin: 0 0 vars.$spacing-4;\n  color: var(--ivds-text-secondary);\n  max-width: 72ch;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\na {\n  color: var(--color-brand-accent-700, #0b4593);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.16em;\n  transition:\n    color var(--ivds-motion-fast) var(--ivds-motion-ease),\n    text-decoration-color var(--ivds-motion-fast) var(--ivds-motion-ease);\n\n  &:hover {\n    color: var(--color-brand-accent-600, #1058b8);\n    text-decoration-color: currentcolor;\n  }\n\n  @include focus-ring;\n}\n\ncode {\n  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);\n  font-size: vars.$fontSize-sm;\n  background-color: var(--ivds-surface-muted);\n  color: var(--ivds-text-primary);\n  padding: vars.$spacing-1 vars.$spacing-2;\n  border-radius: var(--ivds-radius-s);\n}\n\npre {\n  margin: 0 0 vars.$spacing-4;\n  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);\n  font-size: vars.$fontSize-sm;\n  line-height: var(--lineHeight-relaxed, 1.625);\n  background-color: var(--ivds-surface-base);\n  color: var(--ivds-text-primary);\n  border: 1px solid var(--ivds-border-subtle);\n  border-radius: var(--ivds-radius-m);\n  box-shadow: var(--ivds-shadow-sm);\n  padding: vars.$spacing-4;\n  overflow-x: auto;\n\n  code {\n    background-color: transparent;\n    padding: 0;\n  }\n}\n\n.ivds-typography {\n  color: var(--ivds-text-primary);\n  font-family: vars.$fontFamily-primary;\n  font-size: vars.$fontSize-base;\n  line-height: var(--lineHeight-normal, 1.5);\n}\n","// Typography design token imports\r\n// This file provides SCSS variable mappings for typography tokens from @ivds/design-tokens\r\n// The CSS custom properties are imported at the top level in all.scss\r\n\r\n// SCSS variable mappings for easier development\r\n\r\n// Font families\r\n$fontFamily-primary: var(--typography-fontFamilies-primary) !default;\r\n$fontFamily-secondary: var(--typography-fontFamilies-secondary) !default;\r\n\r\n// Convenience aliases for easier usage\r\n$fontFamily-sans: var(--typography-fontFamilies-primary) !default;\r\n$fontFamily-serif: var(--typography-fontFamilies-secondary) !default;\r\n\r\n// Font sizes\r\n$fontSize-xs: var(--fontSize-xs) !default;\r\n$fontSize-sm: var(--fontSize-sm) !default;\r\n$fontSize-base: var(--fontSize-base) !default;\r\n$fontSize-lg: var(--fontSize-lg) !default;\r\n$fontSize-xl: var(--fontSize-xl) !default;\r\n$fontSize-2xl: var(--fontSize-2xl) !default;\r\n$fontSize-3xl: var(--fontSize-3xl) !default;\r\n$fontSize-4xl: var(--fontSize-4xl) !default;\r\n$fontSize-5xl: var(--fontSize-5xl) !default;\r\n$fontSize-6xl: var(--fontSize-6xl) !default;\r\n$fontSize-7xl: var(--fontSize-7xl) !default;\r\n$fontSize-8xl: var(--fontSize-8xl) !default;\r\n$fontSize-9xl: var(--fontSize-9xl) !default;\r\n\r\n// Font weights\r\n$fontWeight-thin: var(--fontWeight-thin) !default;\r\n$fontWeight-extralight: var(--fontWeight-extralight) !default;\r\n$fontWeight-light: var(--fontWeight-light) !default;\r\n$fontWeight-normal: var(--fontWeight-normal) !default;\r\n$fontWeight-medium: var(--fontWeight-medium) !default;\r\n$fontWeight-semibold: var(--fontWeight-semibold) !default;\r\n$fontWeight-bold: var(--fontWeight-bold) !default;\r\n$fontWeight-extrabold: var(--fontWeight-extrabold) !default;\r\n$fontWeight-black: var(--fontWeight-black) !default;\r\n\r\n// Line heights\r\n$lineHeight-none: var(--lineHeight-none) !default;\r\n$lineHeight-tight: var(--lineHeight-tight) !default;\r\n$lineHeight-snug: var(--lineHeight-snug) !default;\r\n$lineHeight-normal: var(--lineHeight-normal) !default;\r\n$lineHeight-relaxed: var(--lineHeight-relaxed) !default;\r\n$lineHeight-loose: var(--lineHeight-loose) !default;","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n","// Spacing design token imports\r\n// This file provides SCSS variable mappings for spacing tokens from @ivds/design-tokens\r\n// The CSS custom properties are imported at the top level in all.scss\r\n\r\n// SCSS variable mappings for easier development\r\n\r\n$spacing-0: var(--spacing-0) !default;\r\n$spacing-1: var(--spacing-1) !default;\r\n$spacing-2: var(--spacing-2) !default;\r\n$spacing-3: var(--spacing-3) !default;\r\n$spacing-4: var(--spacing-4) !default;\r\n$spacing-5: var(--spacing-5) !default;\r\n$spacing-6: var(--spacing-6) !default;\r\n$spacing-8: var(--spacing-8) !default;\r\n$spacing-10: var(--spacing-10) !default;\r\n$spacing-12: var(--spacing-12) !default;\r\n$spacing-16: var(--spacing-16) !default;\r\n$spacing-20: var(--spacing-20) !default;\r\n$spacing-24: var(--spacing-24) !default;\r\n$spacing-32: var(--spacing-32) !default;\r\n$spacing-40: var(--spacing-40) !default;\r\n$spacing-48: var(--spacing-48) !default;\r\n$spacing-56: var(--spacing-56) !default;\r\n$spacing-64: var(--spacing-64) !default;","// Base layout styles for IVDS Core\n\n@use '../variables/variables' as vars;\n\nhtml,\nbody {\n  min-height: 100%;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n}\n\nmain {\n  flex: 1;\n}\n\n.ivds-container {\n  width: 100%;\n  max-width: var(--container-max-width, 1200px);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));\n  padding-right: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));\n\n  &--xs {\n    max-width: 540px;\n  }\n\n  &--sm {\n    max-width: 720px;\n  }\n\n  &--md {\n    max-width: 920px;\n  }\n\n  &--lg {\n    max-width: 1160px;\n  }\n\n  &--xl {\n    max-width: 1320px;\n  }\n}\n\n.ivds-layout {\n  width: 100%;\n  min-height: 100vh;\n\n  &--flex {\n    display: flex;\n  }\n\n  &--grid {\n    display: grid;\n  }\n\n  &--centered {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.ivds-section {\n  padding-top: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));\n  padding-bottom: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));\n}\n\n.ivds-stack {\n  display: grid;\n  gap: var(--spacing-6, 1.5rem);\n}\n\n.ivds-grid-shell {\n  display: grid;\n  gap: var(--spacing-6, 1.5rem);\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n"]}

package/lib/base/base.min.css

@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.ivds-reset{box-sizing:border-box;margin:0;padding:0}.ivds-reset *,.ivds-reset :after,.ivds-reset :before{box-sizing:inherit}body{font-size:var(--fontSize-base);font-weight:var(--fontWeight-normal);line-height:var(--lineHeight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,h1,h2,h3,h4,h5,h6{color:var(--color-semantic-neutral-900);font-family:var(--typography-fontFamilies-primary)}h1,h2,h3,h4,h5,h6{font-weight:var(--fontWeight-semibold);line-height:var(--lineHeight-tight);margin-bottom:var(--spacing-4)}h1{font-size:var(--fontSize-4xl)}h2{font-size:var(--fontSize-3xl)}h3{font-size:var(--fontSize-2xl)}h4{font-size:var(--fontSize-xl)}h5{font-size:var(--fontSize-lg)}h6{font-size:var(--fontSize-base)}p{margin-bottom:var(--spacing-4)}p:last-child{margin-bottom:0}a{color:var(--color-brand-primary-600);text-decoration:underline}a:hover{color:var(--color-brand-primary-700)}a:focus{outline:2px solid var(--color-brand-primary-500);outline-offset:2px}code{border-radius:var(--borderRadius-sm);padding:var(--spacing-1) var(--spacing-2)}code,pre{background-color:var(--color-semantic-neutral-100);font-family:var(--typography-fontFamilies-secondary);font-size:var(--fontSize-sm)}pre{border-radius:var(--borderRadius-md);overflow-x:auto;padding:var(--spacing-4)}pre code{background-color:transparent;padding:0}.ivds-typography{color:var(--color-semantic-neutral-900);font-family:var(--typography-fontFamilies-primary);font-size:var(--fontSize-base);line-height:var(--lineHeight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%}body{display:flex;flex-direction:column;min-height:100%}main{flex:1}.ivds-container{margin-left:auto;margin-right:auto;padding-left:var(--spacing-4);padding-right:var(--spacing-4);width:100%}.ivds-container--xs{max-width:calc(var(--breakpoints-xs) - var(--spacing-8))}.ivds-container--sm{max-width:calc(var(--breakpoints-sm) - var(--spacing-8))}.ivds-container--md{max-width:calc(var(--breakpoints-md) - var(--spacing-8))}.ivds-container--lg{max-width:calc(var(--breakpoints-lg) - var(--spacing-8))}.ivds-container--xl{max-width:calc(var(--breakpoints-xl) - var(--spacing-8))}@media (min-width:var(--breakpoints-sm )){.ivds-container{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}}@media (min-width:var(--breakpoints-lg )){.ivds-container{padding-left:var(--spacing-8);padding-right:var(--spacing-8)}}.ivds-layout{min-height:100vh;width:100%}.ivds-layout--flex{display:flex}.ivds-layout--grid{display:grid}.ivds-layout--centered{align-items:center;display:flex;justify-content:center}.ivds-section{padding-bottom:var(--spacing-12);padding-top:var(--spacing-12)}@media (min-width:var(--breakpoints-md )){.ivds-section{padding-bottom:var(--spacing-16);padding-top:var(--spacing-16)}}@media (min-width:var(--breakpoints-lg )){.ivds-section{padding-bottom:var(--spacing-20);padding-top:var(--spacing-20)}}
+*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.ivds-reset{box-sizing:border-box;margin:0;padding:0}.ivds-reset *,.ivds-reset :after,.ivds-reset :before{box-sizing:inherit}:root{color-scheme:light;--fontFamily-primary:var(--typography-fontFamilies-primary,"Inter","Noto Sans",sans-serif);--fontFamily-secondary:var(--typography-fontFamilies-secondary,"IBM Plex Sans","Inter",sans-serif);--fontFamily-display:var(--typography-fontFamilies-display,"IBM Plex Sans","Inter",sans-serif);--color-semantic-neutral-50:var(--color-ui-neutral-50,#f7f8fa);--color-semantic-neutral-100:var(--color-ui-neutral-100,#f1f3f5);--color-semantic-neutral-200:var(--color-ui-neutral-200,#e2e7ec);--color-semantic-neutral-300:var(--color-ui-neutral-300,#cfd6dd);--color-semantic-neutral-400:var(--color-ui-neutral-400,#a1adba);--color-semantic-neutral-500:var(--color-ui-neutral-500,#6b7785);--color-semantic-neutral-600:var(--color-ui-neutral-600,#4d5968);--color-semantic-neutral-700:var(--color-ui-neutral-700,#36414f);--color-semantic-neutral-800:var(--color-ui-neutral-800,#202a36);--color-semantic-neutral-900:var(--color-ui-neutral-900,#121a24);--color-semantic-success-50:var(--color-ui-success-50,#edf9f4);--color-semantic-success-500:var(--color-ui-success-500,#19895d);--color-semantic-success-600:var(--color-ui-success-600,#0f6f4a);--color-semantic-success-700:var(--color-ui-success-700,#0a573a);--color-semantic-warning-50:var(--color-ui-warning-50,#fff8eb);--color-semantic-warning-500:var(--color-ui-warning-500,#ce790b);--color-semantic-warning-600:var(--color-ui-warning-600,#a76009);--color-semantic-warning-700:var(--color-ui-warning-700,#834b08);--color-semantic-error-50:var(--color-ui-error-50,#fff1f2);--color-semantic-error-500:var(--color-ui-error-500,#d73a50);--color-semantic-error-600:var(--color-ui-error-600,#b72a41);--color-semantic-error-700:var(--color-ui-error-700,#922036);--color-semantic-info-50:var(--color-ui-info-50,#edf4ff);--color-semantic-info-500:var(--color-ui-info-500,#1f6fe5);--color-semantic-info-600:var(--color-ui-info-600,#0050c8);--color-semantic-info-700:var(--color-ui-info-700,#003d99);--ivds-surface-page:var(--color-semantic-neutral-50);--ivds-surface-base:#fff;--ivds-surface-muted:var(--color-semantic-neutral-100);--ivds-surface-strong:var(--color-semantic-neutral-900);--ivds-border-subtle:var(--color-semantic-neutral-200);--ivds-border-strong:var(--color-semantic-neutral-400);--ivds-border-brand:var(--color-brand-accent-600);--ivds-text-primary:var(--color-semantic-neutral-900);--ivds-text-secondary:var(--color-semantic-neutral-800);--ivds-text-muted:var(--color-semantic-neutral-600);--ivds-text-on-strong:#fff;--ivds-interactive-primary-bg:var(--color-brand-accent-600);--ivds-interactive-primary-bg-hover:var(--color-brand-accent-700);--ivds-interactive-primary-bg-active:var(--color-brand-accent-800);--ivds-interactive-primary-text:#fff;--ivds-interactive-secondary-bg:#fff;--ivds-interactive-secondary-bg-hover:var(--color-brand-accent-50);--ivds-interactive-secondary-border:var(--color-brand-accent-600);--ivds-interactive-secondary-text:var(--color-brand-accent-700);--ivds-interactive-supplementary-bg:var(--color-semantic-neutral-100);--ivds-interactive-supplementary-bg-hover:var(--color-semantic-neutral-200);--ivds-interactive-supplementary-text:var(--color-brand-accent-700);--ivds-radius-xs:var(--borderRadius-xs,0);--ivds-radius-s:var(--borderRadius-sm,0.125rem);--ivds-radius-m:var(--borderRadius-md,0.25rem);--ivds-radius-l:var(--borderRadius-lg,0.375rem);--ivds-shadow-sm:var(--shadow-xs,0 1px 0 rgba(7,11,16,.1));--ivds-shadow-md:var(--shadow-sm,0 1px 2px rgba(7,11,16,.12));--ivds-shadow-lg:var(--shadow-md,0 4px 10px rgba(7,11,16,.14));--container-max-width:1240px;--ivds-focus-ring-color:var(--color-brand-accent-600,#1058b8);--ivds-focus-ring-width:3px;--ivds-focus-ring-offset:2px;--ivds-focus-ring:0 0 0 3px rgba(0,80,200,.3);--ivds-motion-fast:var(--animation-duration-fast,150ms);--ivds-motion-normal:var(--animation-duration-normal,250ms);--ivds-motion-ease:var(--animation-easing-easeOut,cubic-bezier(0,0,0.2,1))}[data-ivds-theme=dark]{color-scheme:dark;--ivds-surface-page:#0f1620;--ivds-surface-base:#141e2a;--ivds-surface-muted:#1c2734;--ivds-surface-strong:#070b10;--ivds-border-subtle:#283443;--ivds-border-strong:#415065;--ivds-text-primary:#f6f8fb;--ivds-text-secondary:#dde3ea;--ivds-text-muted:#b7c2ce;--ivds-text-on-strong:#fff;--ivds-interactive-primary-bg:var(--color-brand-accent-500);--ivds-interactive-primary-bg-hover:var(--color-brand-accent-600);--ivds-interactive-primary-bg-active:var(--color-brand-accent-700);--ivds-interactive-secondary-bg:transparent;--ivds-interactive-secondary-bg-hover:rgba(147,188,255,.15);--ivds-interactive-secondary-border:var(--color-brand-accent-400);--ivds-interactive-secondary-text:var(--color-brand-accent-300);--ivds-interactive-supplementary-bg:hsla(0,0%,100%,.08);--ivds-interactive-supplementary-bg-hover:hsla(0,0%,100%,.14);--ivds-interactive-supplementary-text:#e7eefb;--ivds-focus-ring-color:var(--color-brand-accent-400,#5a93f5)}.ivds-theme-surface{background-color:var(--ivds-surface-base);border:1px solid var(--ivds-border-subtle);border-radius:var(--ivds-radius-m);box-shadow:var(--ivds-shadow-sm)}.ivds-theme-eyebrow{color:var(--color-brand-accent-700,#0b4593);display:inline-block;font-size:var(--fontSize-xs,.75rem);font-weight:var(--fontWeight-semibold,600);letter-spacing:.08em;text-transform:uppercase}html{font-size:100%;text-rendering:optimizelegibility}body{background-color:var(--ivds-surface-page);font-family:var(--typography-fontFamilies-primary);font-size:var(--fontSize-base);font-weight:var(--fontWeight-normal,400);line-height:var(--lineHeight-normal,1.5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,h1,h2,h3,h4,h5,h6{color:var(--ivds-text-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--fontFamily-display,var(--typography-fontFamilies-secondary));font-weight:var(--fontWeight-semibold,600);letter-spacing:-.01em;line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-4)}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:var(--fontSize-lg)}h6{font-size:var(--fontSize-base)}p{color:var(--ivds-text-secondary);margin:0 0 var(--spacing-4);max-width:72ch}p:last-child{margin-bottom:0}a{color:var(--color-brand-accent-700,#0b4593);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;transition:color var(--ivds-motion-fast) var(--ivds-motion-ease),text-decoration-color var(--ivds-motion-fast) var(--ivds-motion-ease)}a:hover{color:var(--color-brand-accent-600,#1058b8);text-decoration-color:currentcolor}a:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}a:focus:not(:focus-visible){box-shadow:none;outline:none}code{background-color:var(--ivds-surface-muted);border-radius:var(--ivds-radius-s);padding:var(--spacing-1) var(--spacing-2)}code,pre{color:var(--ivds-text-primary);font-family:var(--typography-fontFamilies-mono,"JetBrains Mono",monospace);font-size:var(--fontSize-sm)}pre{background-color:var(--ivds-surface-base);border:1px solid var(--ivds-border-subtle);border-radius:var(--ivds-radius-m);box-shadow:var(--ivds-shadow-sm);line-height:var(--lineHeight-relaxed,1.625);margin:0 0 var(--spacing-4);overflow-x:auto;padding:var(--spacing-4)}pre code{background-color:transparent;padding:0}.ivds-typography{color:var(--ivds-text-primary);font-family:var(--typography-fontFamilies-primary);font-size:var(--fontSize-base);line-height:var(--lineHeight-normal,1.5)}body,html{min-height:100%}body{display:flex;flex-direction:column;margin:0}main{flex:1}.ivds-container{margin-left:auto;margin-right:auto;max-width:var(--container-max-width,1200px);padding-left:clamp(var(--spacing-4,1rem),3vw,var(--spacing-8,2rem));padding-right:clamp(var(--spacing-4,1rem),3vw,var(--spacing-8,2rem));width:100%}.ivds-container--xs{max-width:540px}.ivds-container--sm{max-width:720px}.ivds-container--md{max-width:920px}.ivds-container--lg{max-width:1160px}.ivds-container--xl{max-width:1320px}.ivds-layout{min-height:100vh;width:100%}.ivds-layout--flex{display:flex}.ivds-layout--grid{display:grid}.ivds-layout--centered{align-items:center;display:flex;justify-content:center}.ivds-section{padding-bottom:clamp(var(--spacing-10,2.5rem),6vw,var(--spacing-16,4rem));padding-top:clamp(var(--spacing-10,2.5rem),6vw,var(--spacing-16,4rem))}.ivds-grid-shell,.ivds-stack{display:grid;gap:var(--spacing-6,1.5rem)}.ivds-grid-shell{grid-template-columns:repeat(12,minmax(0,1fr))}

package/lib/base/base.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/base/_reset.scss","../../src/base/base.scss","../../src/base/_theme.scss","../../src/base/_typography.scss","../../src/variables/_typography.scss","../../src/base/_focus.scss","../../src/base/_layout.scss"],"names":[],"mappings":"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","file":"base.min.css","sourcesContent":["// Modern CSS Reset for IVDS Core\r\n// Provides a consistent baseline across browsers based on modern reset practices\r\n\r\n// Import design tokens\r\n@use '../variables/variables' as vars;\r\n\r\n// Box sizing rules\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n// Remove default margin and padding\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n// Remove list styles on ul, ol elements with a list role\r\nul[role='list'],\r\nol[role='list'] {\r\n  list-style: none;\r\n}\r\n\r\n// Set core root defaults\r\nhtml:focus-within {\r\n  scroll-behavior: smooth;\r\n}\r\n\r\n// Set core body defaults\r\nbody {\r\n  min-height: 100vh;\r\n  text-rendering: optimizespeed;\r\n  line-height: 1.5;\r\n}\r\n\r\n// A elements that don't have a class get default styles\r\na:not([class]) {\r\n  text-decoration-skip-ink: auto;\r\n}\r\n\r\n// Make images easier to work with\r\nimg,\r\npicture {\r\n  max-width: 100%;\r\n  display: block;\r\n}\r\n\r\n// Inherit fonts for inputs and buttons\r\ninput,\r\nbutton,\r\ntextarea,\r\nselect {\r\n  font: inherit;\r\n}\r\n\r\n// Remove all animations, transitions and smooth scroll for people that prefer not to see them\r\n@media (prefers-reduced-motion: reduce) {\r\n  html:focus-within {\r\n   scroll-behavior: auto;\r\n  }\r\n  \r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n}\r\n\r\n// IVDS specific reset class for scoped usage\r\n.ivds-reset {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  \r\n  *,\r\n  *::before,\r\n  *::after {\r\n    box-sizing: inherit;\r\n  }\r\n}","// Base styles entry point\r\n// This file imports all base styles for the IVDS Core package\r\n\r\n@use 'reset';\n@use 'theme';\n@use 'typography';\n@use 'layout';\n","// Global IVDS theme contract\n// Civic modern direction inspired by institutional systems:\n// high contrast, strong typography, clear state feedback.\n\n:root {\n  color-scheme: light;\n\n  // Typography aliases for existing components\n  --fontFamily-primary: var(--typography-fontFamilies-primary, 'Inter', 'Noto Sans', sans-serif);\n  --fontFamily-secondary: var(--typography-fontFamilies-secondary, 'IBM Plex Sans', 'Inter', sans-serif);\n  --fontFamily-display: var(--typography-fontFamilies-display, 'IBM Plex Sans', 'Inter', sans-serif);\n\n  // Brand colors are defined by @ivds/design-tokens (all.css).\n  // No re-declaration here — tokens provide the full brand palette:\n  //   --color-brand-primary-{50..950}   (burnt orange)\n  //   --color-brand-secondary-{50..950} (green)\n  //   --color-brand-accent-{50..950}    (blue)\n\n  // Neutral aliases\n  --color-semantic-neutral-50: var(--color-ui-neutral-50, #f7f8fa);\n  --color-semantic-neutral-100: var(--color-ui-neutral-100, #f1f3f5);\n  --color-semantic-neutral-200: var(--color-ui-neutral-200, #e2e7ec);\n  --color-semantic-neutral-300: var(--color-ui-neutral-300, #cfd6dd);\n  --color-semantic-neutral-400: var(--color-ui-neutral-400, #a1adba);\n  --color-semantic-neutral-500: var(--color-ui-neutral-500, #6b7785);\n  --color-semantic-neutral-600: var(--color-ui-neutral-600, #4d5968);\n  --color-semantic-neutral-700: var(--color-ui-neutral-700, #36414f);\n  --color-semantic-neutral-800: var(--color-ui-neutral-800, #202a36);\n  --color-semantic-neutral-900: var(--color-ui-neutral-900, #121a24);\n\n  // Feedback aliases\n  --color-semantic-success-50: var(--color-ui-success-50, #edf9f4);\n  --color-semantic-success-500: var(--color-ui-success-500, #19895d);\n  --color-semantic-success-600: var(--color-ui-success-600, #0f6f4a);\n  --color-semantic-success-700: var(--color-ui-success-700, #0a573a);\n  --color-semantic-warning-50: var(--color-ui-warning-50, #fff8eb);\n  --color-semantic-warning-500: var(--color-ui-warning-500, #ce790b);\n  --color-semantic-warning-600: var(--color-ui-warning-600, #a76009);\n  --color-semantic-warning-700: var(--color-ui-warning-700, #834b08);\n  --color-semantic-error-50: var(--color-ui-error-50, #fff1f2);\n  --color-semantic-error-500: var(--color-ui-error-500, #d73a50);\n  --color-semantic-error-600: var(--color-ui-error-600, #b72a41);\n  --color-semantic-error-700: var(--color-ui-error-700, #922036);\n  --color-semantic-info-50: var(--color-ui-info-50, #edf4ff);\n  --color-semantic-info-500: var(--color-ui-info-500, #1f6fe5);\n  --color-semantic-info-600: var(--color-ui-info-600, #0050c8);\n  --color-semantic-info-700: var(--color-ui-info-700, #003d99);\n\n  // Surface + text system\n  --ivds-surface-page: var(--color-semantic-neutral-50);\n  --ivds-surface-base: #fff;\n  --ivds-surface-muted: var(--color-semantic-neutral-100);\n  --ivds-surface-strong: var(--color-semantic-neutral-900);\n  --ivds-border-subtle: var(--color-semantic-neutral-200);\n  --ivds-border-strong: var(--color-semantic-neutral-400);\n  --ivds-border-brand: var(--color-brand-accent-600);\n  --ivds-text-primary: var(--color-semantic-neutral-900);\n  --ivds-text-secondary: var(--color-semantic-neutral-800);\n  --ivds-text-muted: var(--color-semantic-neutral-600);\n  --ivds-text-on-strong: #fff;\n\n  // Interactive aliases\n  --ivds-interactive-primary-bg: var(--color-brand-accent-600);\n  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-700);\n  --ivds-interactive-primary-bg-active: var(--color-brand-accent-800);\n  --ivds-interactive-primary-text: #fff;\n  --ivds-interactive-secondary-bg: #fff;\n  --ivds-interactive-secondary-bg-hover: var(--color-brand-accent-50);\n  --ivds-interactive-secondary-border: var(--color-brand-accent-600);\n  --ivds-interactive-secondary-text: var(--color-brand-accent-700);\n  --ivds-interactive-supplementary-bg: var(--color-semantic-neutral-100);\n  --ivds-interactive-supplementary-bg-hover: var(--color-semantic-neutral-200);\n  --ivds-interactive-supplementary-text: var(--color-brand-accent-700);\n\n  // Radius + shadow aliases\n  --ivds-radius-xs: var(--borderRadius-xs, 0);\n  --ivds-radius-s: var(--borderRadius-sm, 0.125rem);\n  --ivds-radius-m: var(--borderRadius-md, 0.25rem);\n  --ivds-radius-l: var(--borderRadius-lg, 0.375rem);\n  --ivds-shadow-sm: var(--shadow-xs, 0 1px 0 rgba(7, 11, 16, 0.10));\n  --ivds-shadow-md: var(--shadow-sm, 0 1px 2px rgba(7, 11, 16, 0.12));\n  --ivds-shadow-lg: var(--shadow-md, 0 4px 10px rgba(7, 11, 16, 0.14));\n\n  // Layout defaults\n  --container-max-width: 1240px;\n\n  // Focus treatment — outline-based (no box-shadow conflict with elevated components)\n  --ivds-focus-ring-color: var(--color-brand-accent-600, #1058b8);\n  --ivds-focus-ring-width: 3px;\n  --ivds-focus-ring-offset: 2px;\n  --ivds-focus-ring: 0 0 0 3px rgba(0, 80, 200, 0.30); // legacy alias\n\n  // Motion\n  --ivds-motion-fast: var(--animation-duration-fast, 150ms);\n  --ivds-motion-normal: var(--animation-duration-normal, 250ms);\n  --ivds-motion-ease: var(--animation-easing-easeOut, cubic-bezier(0, 0, 0.2, 1));\n}\n\n[data-ivds-theme='dark'] {\n  color-scheme: dark;\n\n  --ivds-surface-page: #0f1620;\n  --ivds-surface-base: #141e2a;\n  --ivds-surface-muted: #1c2734;\n  --ivds-surface-strong: #070b10;\n  --ivds-border-subtle: #283443;\n  --ivds-border-strong: #415065;\n  --ivds-text-primary: #f6f8fb;\n  --ivds-text-secondary: #dde3ea;\n  --ivds-text-muted: #b7c2ce;\n  --ivds-text-on-strong: #fff;\n  --ivds-interactive-primary-bg: var(--color-brand-accent-500);\n  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-600);\n  --ivds-interactive-primary-bg-active: var(--color-brand-accent-700);\n  --ivds-interactive-secondary-bg: transparent;\n  --ivds-interactive-secondary-bg-hover: rgba(147, 188, 255, 0.15);\n  --ivds-interactive-secondary-border: var(--color-brand-accent-400);\n  --ivds-interactive-secondary-text: var(--color-brand-accent-300);\n  --ivds-interactive-supplementary-bg: rgba(255, 255, 255, 0.08);\n  --ivds-interactive-supplementary-bg-hover: rgba(255, 255, 255, 0.14);\n  --ivds-interactive-supplementary-text: #e7eefb;\n  --ivds-focus-ring-color: var(--color-brand-accent-400, #5a93f5);\n}\n\n.ivds-theme-surface {\n  background-color: var(--ivds-surface-base);\n  border: 1px solid var(--ivds-border-subtle);\n  border-radius: var(--ivds-radius-m);\n  box-shadow: var(--ivds-shadow-sm);\n}\n\n.ivds-theme-eyebrow {\n  display: inline-block;\n  color: var(--color-brand-accent-700, #0b4593);\n  font-size: var(--fontSize-xs, 0.75rem);\n  font-weight: var(--fontWeight-semibold, 600);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n","// Base typography styles for IVDS Core\n\n@use '../variables/variables' as vars;\n@use 'focus' as *;\n\nhtml {\n  font-size: 100%;\n  text-rendering: optimizelegibility;\n}\n\nbody {\n  font-family: vars.$fontFamily-primary;\n  font-size: vars.$fontSize-base;\n  font-weight: var(--fontWeight-normal, 400);\n  line-height: var(--lineHeight-normal, 1.5);\n  color: var(--ivds-text-primary);\n  background-color: var(--ivds-surface-page);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0 0 vars.$spacing-4;\n  color: var(--ivds-text-primary);\n  font-family: var(--fontFamily-display, vars.$fontFamily-secondary);\n  font-weight: var(--fontWeight-semibold, 600);\n  letter-spacing: -0.01em;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\nh1 {\n  font-size: clamp(2.25rem, 4.2vw, 4.25rem);\n  line-height: 1.08;\n}\n\nh2 {\n  font-size: clamp(1.75rem, 2.7vw, 3rem);\n}\n\nh3 {\n  font-size: clamp(1.375rem, 2.1vw, 2.125rem);\n}\n\nh4 {\n  font-size: clamp(1.125rem, 1.6vw, 1.5rem);\n}\n\nh5 {\n  font-size: vars.$fontSize-lg;\n}\n\nh6 {\n  font-size: vars.$fontSize-base;\n}\n\np {\n  margin: 0 0 vars.$spacing-4;\n  color: var(--ivds-text-secondary);\n  max-width: 72ch;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\na {\n  color: var(--color-brand-accent-700, #0b4593);\n  text-decoration: underline;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.16em;\n  transition:\n    color var(--ivds-motion-fast) var(--ivds-motion-ease),\n    text-decoration-color var(--ivds-motion-fast) var(--ivds-motion-ease);\n\n  &:hover {\n    color: var(--color-brand-accent-600, #1058b8);\n    text-decoration-color: currentcolor;\n  }\n\n  @include focus-ring;\n}\n\ncode {\n  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);\n  font-size: vars.$fontSize-sm;\n  background-color: var(--ivds-surface-muted);\n  color: var(--ivds-text-primary);\n  padding: vars.$spacing-1 vars.$spacing-2;\n  border-radius: var(--ivds-radius-s);\n}\n\npre {\n  margin: 0 0 vars.$spacing-4;\n  font-family: var(--typography-fontFamilies-mono, 'JetBrains Mono', monospace);\n  font-size: vars.$fontSize-sm;\n  line-height: var(--lineHeight-relaxed, 1.625);\n  background-color: var(--ivds-surface-base);\n  color: var(--ivds-text-primary);\n  border: 1px solid var(--ivds-border-subtle);\n  border-radius: var(--ivds-radius-m);\n  box-shadow: var(--ivds-shadow-sm);\n  padding: vars.$spacing-4;\n  overflow-x: auto;\n\n  code {\n    background-color: transparent;\n    padding: 0;\n  }\n}\n\n.ivds-typography {\n  color: var(--ivds-text-primary);\n  font-family: vars.$fontFamily-primary;\n  font-size: vars.$fontSize-base;\n  line-height: var(--lineHeight-normal, 1.5);\n}\n","// Typography design token imports\r\n// This file provides SCSS variable mappings for typography tokens from @ivds/design-tokens\r\n// The CSS custom properties are imported at the top level in all.scss\r\n\r\n// SCSS variable mappings for easier development\r\n\r\n// Font families\r\n$fontFamily-primary: var(--typography-fontFamilies-primary) !default;\r\n$fontFamily-secondary: var(--typography-fontFamilies-secondary) !default;\r\n\r\n// Convenience aliases for easier usage\r\n$fontFamily-sans: var(--typography-fontFamilies-primary) !default;\r\n$fontFamily-serif: var(--typography-fontFamilies-secondary) !default;\r\n\r\n// Font sizes\r\n$fontSize-xs: var(--fontSize-xs) !default;\r\n$fontSize-sm: var(--fontSize-sm) !default;\r\n$fontSize-base: var(--fontSize-base) !default;\r\n$fontSize-lg: var(--fontSize-lg) !default;\r\n$fontSize-xl: var(--fontSize-xl) !default;\r\n$fontSize-2xl: var(--fontSize-2xl) !default;\r\n$fontSize-3xl: var(--fontSize-3xl) !default;\r\n$fontSize-4xl: var(--fontSize-4xl) !default;\r\n$fontSize-5xl: var(--fontSize-5xl) !default;\r\n$fontSize-6xl: var(--fontSize-6xl) !default;\r\n$fontSize-7xl: var(--fontSize-7xl) !default;\r\n$fontSize-8xl: var(--fontSize-8xl) !default;\r\n$fontSize-9xl: var(--fontSize-9xl) !default;\r\n\r\n// Font weights\r\n$fontWeight-thin: var(--fontWeight-thin) !default;\r\n$fontWeight-extralight: var(--fontWeight-extralight) !default;\r\n$fontWeight-light: var(--fontWeight-light) !default;\r\n$fontWeight-normal: var(--fontWeight-normal) !default;\r\n$fontWeight-medium: var(--fontWeight-medium) !default;\r\n$fontWeight-semibold: var(--fontWeight-semibold) !default;\r\n$fontWeight-bold: var(--fontWeight-bold) !default;\r\n$fontWeight-extrabold: var(--fontWeight-extrabold) !default;\r\n$fontWeight-black: var(--fontWeight-black) !default;\r\n\r\n// Line heights\r\n$lineHeight-none: var(--lineHeight-none) !default;\r\n$lineHeight-tight: var(--lineHeight-tight) !default;\r\n$lineHeight-snug: var(--lineHeight-snug) !default;\r\n$lineHeight-normal: var(--lineHeight-normal) !default;\r\n$lineHeight-relaxed: var(--lineHeight-relaxed) !default;\r\n$lineHeight-loose: var(--lineHeight-loose) !default;","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n","// Base layout styles for IVDS Core\n\n@use '../variables/variables' as vars;\n\nhtml,\nbody {\n  min-height: 100%;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n}\n\nmain {\n  flex: 1;\n}\n\n.ivds-container {\n  width: 100%;\n  max-width: var(--container-max-width, 1200px);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));\n  padding-right: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));\n\n  &--xs {\n    max-width: 540px;\n  }\n\n  &--sm {\n    max-width: 720px;\n  }\n\n  &--md {\n    max-width: 920px;\n  }\n\n  &--lg {\n    max-width: 1160px;\n  }\n\n  &--xl {\n    max-width: 1320px;\n  }\n}\n\n.ivds-layout {\n  width: 100%;\n  min-height: 100vh;\n\n  &--flex {\n    display: flex;\n  }\n\n  &--grid {\n    display: grid;\n  }\n\n  &--centered {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.ivds-section {\n  padding-top: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));\n  padding-bottom: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));\n}\n\n.ivds-stack {\n  display: grid;\n  gap: var(--spacing-6, 1.5rem);\n}\n\n.ivds-grid-shell {\n  display: grid;\n  gap: var(--spacing-6, 1.5rem);\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n"]}

package/lib/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;
+}