@ivds/core 0.1.1 → 1.0.0

package/lib/components/notification/notification.css

@@ -1,75 +1,71 @@
-/* Notification component styles*/
-/* Provides styling for the IVDS notification component with all variants, dismissible functionality, and states*/
 @keyframes ivds-notification-slide-in {
   from {
-    transform: translateX(100%);
     opacity: 0;
+    transform: translateX(24px);
   }
   to {
-    transform: translateX(0);
     opacity: 1;
+    transform: translateX(0);
   }
 }
 @keyframes ivds-notification-slide-out {
   from {
-    transform: translateX(0);
     opacity: 1;
+    transform: translateX(0);
   }
   to {
-    transform: translateX(100%);
     opacity: 0;
+    transform: translateX(24px);
   }
 }
 @keyframes ivds-notification-fade-in {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: translateY(8px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
   }
 }
 @keyframes ivds-notification-fade-out {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
   }
   to {
     opacity: 0;
-    transform: scale(0.95);
+    transform: translateY(8px);
   }
 }
-/* Notification Base*/
 .ivds-notification {
+  position: relative;
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-4, 1rem);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  border-left: var(--borderWidth-4, 4px) solid;
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-  position: relative;
-  transition: all 0.15s ease-in-out;
-  /* Notification elements*/
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-left-width: 4px;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  box-shadow: none;
 }
 .ivds-notification__icon {
   flex-shrink: 0;
-  margin-right: var(--spacing-3, 0.75rem);
-  margin-top: var(--spacing-1, 0.25rem);
   width: 1.25rem;
   height: 1.25rem;
+  margin-right: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-1, 0.25rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .ivds-notification__content {
-  flex: 1;
   min-width: 0;
+  flex: 1;
 }
 .ivds-notification__title {
-  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  margin: 0 0 var(--spacing-1, 0.25rem);
   font-size: var(--fontSize-base, 1rem);
-  font-weight: var(--fontWeight-medium, 500);
+  font-weight: var(--fontWeight-semibold, 600);
   line-height: var(--lineHeight-tight, 1.25);
 }
 .ivds-notification__message {
@@ -78,13 +74,10 @@
   line-height: var(--lineHeight-relaxed, 1.625);
 }
 .ivds-notification__actions {
-  display: flex;
-  gap: var(--spacing-2, 0.5rem);
   margin-top: var(--spacing-3, 0.75rem);
+  display: flex;
   align-items: center;
-}
-.ivds-notification {
-  /* Dismiss button (added when dismissible)*/
+  gap: var(--spacing-2, 0.5rem);
 }
 .ivds-notification__dismiss {
   display: inline-flex;
@@ -98,60 +91,62 @@
   height: 1rem;
   fill: currentcolor;
 }
-/* Notification Variants*/
 .ivds-notification--success {
-  background-color: var(--color-semantic-success-50, #f0fdf4);
-  border-left-color: var(--color-semantic-success-500, #22c55e);
+  background-color: var(--color-semantic-success-50, #edf9f4);
+  border-color: var(--color-semantic-success-500, #19895d);
+  border-left-color: var(--color-semantic-success-500, #19895d);
 }
 .ivds-notification--success .ivds-notification__title {
-  color: var(--color-semantic-success-800, #166534);
+  color: var(--color-semantic-success-700, #0a573a);
 }
 .ivds-notification--success .ivds-notification__message {
-  color: var(--color-semantic-success-700, #15803d);
+  color: var(--color-semantic-success-700, #0a573a);
 }
 .ivds-notification--success .ivds-notification__icon {
-  color: var(--color-semantic-success-500, #22c55e);
+  color: var(--color-semantic-success-500, #19895d);
 }
 .ivds-notification--warning {
-  background-color: var(--color-semantic-warning-50, #fffbeb);
-  border-left-color: var(--color-semantic-warning-500, #f59e0b);
+  background-color: var(--color-semantic-warning-50, #fff8eb);
+  border-color: var(--color-semantic-warning-500, #ce790b);
+  border-left-color: var(--color-semantic-warning-500, #ce790b);
 }
 .ivds-notification--warning .ivds-notification__title {
-  color: var(--color-semantic-warning-800, #92400e);
+  color: var(--color-semantic-warning-700, #834b08);
 }
 .ivds-notification--warning .ivds-notification__message {
-  color: var(--color-semantic-warning-700, #b45309);
+  color: var(--color-semantic-warning-700, #834b08);
 }
 .ivds-notification--warning .ivds-notification__icon {
-  color: var(--color-semantic-warning-500, #f59e0b);
+  color: var(--color-semantic-warning-500, #ce790b);
 }
 .ivds-notification--error {
-  background-color: var(--color-semantic-error-50, #fef2f2);
-  border-left-color: var(--color-semantic-error-500, #ef4444);
+  background-color: var(--color-semantic-error-50, #fff1f2);
+  border-color: var(--color-semantic-error-500, #d73a50);
+  border-left-color: var(--color-semantic-error-500, #d73a50);
 }
 .ivds-notification--error .ivds-notification__title {
-  color: var(--color-semantic-error-800, #991b1b);
+  color: var(--color-semantic-error-700, #922036);
 }
 .ivds-notification--error .ivds-notification__message {
-  color: var(--color-semantic-error-700, #b91c1c);
+  color: var(--color-semantic-error-700, #922036);
 }
 .ivds-notification--error .ivds-notification__icon {
-  color: var(--color-semantic-error-500, #ef4444);
+  color: var(--color-semantic-error-500, #d73a50);
 }
 .ivds-notification--info {
-  background-color: var(--color-semantic-info-50, #eff6ff);
-  border-left-color: var(--color-semantic-info-500, #3b82f6);
+  background-color: var(--color-semantic-info-50, #edf4ff);
+  border-color: var(--color-semantic-info-500, #1f6fe5);
+  border-left-color: var(--color-semantic-info-500, #1f6fe5);
 }
 .ivds-notification--info .ivds-notification__title {
-  color: var(--color-semantic-info-800, #1e40af);
+  color: var(--color-semantic-info-700, #003d99);
 }
 .ivds-notification--info .ivds-notification__message {
-  color: var(--color-semantic-info-700, #1d4ed8);
+  color: var(--color-semantic-info-700, #003d99);
 }
 .ivds-notification--info .ivds-notification__icon {
-  color: var(--color-semantic-info-500, #3b82f6);
+  color: var(--color-semantic-info-500, #1f6fe5);
 }
-/* Dismissible notifications*/
 .ivds-notification--dismissible {
   padding-right: var(--spacing-12, 3rem);
 }
@@ -159,28 +154,36 @@
   position: absolute;
   top: var(--spacing-3, 0.75rem);
   right: var(--spacing-3, 0.75rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 1px solid transparent;
+  border-radius: var(--ivds-radius-xs, 0);
   background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-1, 0.25rem);
-  border-radius: var(--borderRadius-sm, 0.25rem);
   color: inherit;
-  opacity: 0.7;
-  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  cursor: pointer;
+  opacity: 0.78;
+  transition: opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-notification--dismissible .ivds-notification__dismiss:hover {
   opacity: 1;
-  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(18, 26, 36, 0.16);
+  background-color: rgba(18, 26, 36, 0.06);
 }
-.ivds-notification--dismissible .ivds-notification__dismiss:focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-  opacity: 1;
+.ivds-notification--dismissible .ivds-notification__dismiss: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;
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
-.ivds-notification--dismissible .ivds-notification__dismiss:active {
-  transform: scale(0.95);
+.ivds-notification--dismissible .ivds-notification__dismiss:focus-visible {
+  opacity: 1;
 }
-/* Size variants*/
 .ivds-notification--compact {
   padding: var(--spacing-3, 0.75rem);
 }
@@ -190,9 +193,9 @@
   height: 1rem;
 }
 .ivds-notification--compact .ivds-notification__title {
-  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  margin: 0 0 var(--spacing-1, 0.25rem);
   font-size: var(--fontSize-sm, 0.875rem);
-  font-weight: var(--fontWeight-medium, 500);
+  font-weight: var(--fontWeight-semibold, 600);
   line-height: var(--lineHeight-tight, 1.25);
 }
 .ivds-notification--compact .ivds-notification__message {
@@ -200,13 +203,6 @@
   font-size: var(--fontSize-xs, 0.75rem);
   line-height: var(--lineHeight-relaxed, 1.625);
 }
-.ivds-notification--compact.ivds-notification--dismissible {
-  padding-right: var(--spacing-10, 2.5rem);
-}
-.ivds-notification--compact.ivds-notification--dismissible .ivds-notification__dismiss {
-  top: var(--spacing-2, 0.5rem);
-  right: var(--spacing-2, 0.5rem);
-}
 .ivds-notification--spacious {
   padding: var(--spacing-6, 1.5rem);
 }
@@ -216,37 +212,27 @@
   height: 1.5rem;
 }
 .ivds-notification--spacious .ivds-notification__title {
-  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  margin: 0 0 var(--spacing-1, 0.25rem);
   font-size: var(--fontSize-lg, 1.125rem);
   font-weight: var(--fontWeight-semibold, 600);
   line-height: var(--lineHeight-tight, 1.25);
-  margin-bottom: var(--spacing-2, 0.5rem);
 }
 .ivds-notification--spacious .ivds-notification__message {
   margin: 0;
   font-size: var(--fontSize-base, 1rem);
   line-height: var(--lineHeight-relaxed, 1.625);
 }
-.ivds-notification--spacious.ivds-notification--dismissible {
-  padding-right: var(--spacing-14, 3.5rem);
-}
-.ivds-notification--spacious.ivds-notification--dismissible .ivds-notification__dismiss {
-  top: var(--spacing-4, 1rem);
-  right: var(--spacing-4, 1rem);
-}
-/* Notifications with actions*/
 .ivds-notification--with-actions .ivds-notification__content {
   padding-bottom: var(--spacing-1, 0.25rem);
 }
-/* Animation classes*/
 .ivds-notification--slide-in {
-  animation: ivds-notification-slide-in 0.3s ease-out;
+  animation: ivds-notification-slide-in 0.28s ease-out;
 }
 .ivds-notification--slide-out {
   animation: ivds-notification-slide-out 0.2s ease-in forwards;
 }
 .ivds-notification--fade-in {
-  animation: ivds-notification-fade-in 0.3s ease-out;
+  animation: ivds-notification-fade-in 0.26s ease-out;
 }
 .ivds-notification--fade-out {
   animation: ivds-notification-fade-out 0.2s ease-in forwards;

package/lib/components/notification/notification.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/notification/_notification-mixin.scss","../../../src/components/notification/notification.scss","../../../src/components/notification/notification.scss%23sass","../../../src/base/_focus.scss"],"names":[],"mappings":"AAoKA;ECnKA;IDqKI,UAAA;ICnKJ,2BAAA;EACE;EACF;IACA,UAAA;IACE,wBAAA;EACA;AACF;ADuKA;EACE;ICrKA,UAAA;IDuKE,wBAAA;ECrKF;EDwKA;ICtKA,UAAA;IDwKE,2BAAA;ECtKF;AACF;ADyKA;EACE;ICvKA,UAAA;IDyKE,0BAAA;ECvKF;ED0KA;ICxKA,UAAA;ID0KE,wBAAA;ECxKF;AACF;AD2KA;EACE;IACE,UAAA;IACA,wBAAA;ECzKF;ED4KA;IACE,UAAA;IACA,0BAAA;EC1KF;AACF;ACjCA;EFDE,kBAAA;EACA,aAAA;EACA,uBAAA;ECqCF,+BAAA;EDnCE,oDAAA;ECqCF,sBDpCE;ECqCF,6CAAA;EDnCE,gBAAA;ACqCF;ACvCE;EFwBA,cAAA;EACA,cAAA;EACA,eAAA;ECkBF,uCAAA;EDhBE,qCAAA;ECkBF,oBAAA;EDhBE,mBAAA;EACA,uBAAA;ACkBF;AC7CE;EF+BA,YAAA;EACA,OAAA;ACiBF;AC7CE;ED+CF,qCAAA;EDdE,qCAAA;EACA,4CAH8E;EAI9E,0CAAA;ACgBF;AC/CE;EFmCA,SAAA;ECeF,uCAAA;EDbE,6CAAA;ACeF;AChDE;EF0EA,qCAAA;EACA,aAAA;EACA,mBAAA;EACA,6BAAA;ACvBF;ACjDE;EACE,oBAAA;EDmDJ,mBAAA;EACA,uBAAA;ECjDI,aAAA;EDmDJ,cAAA;AACA;ACjDI;EDmDJ,WAAA;ECjDM,YAAA;EDmDN,kBAAA;AACA;AC7CA;EDgDA,2DAAA;ED9EE,wDEiCE;ED+CJ,6DC/CI;ADgDJ;AD9EE;ECgFF,iDAAA;AACA;AD7EE;EC+EF,iDAAA;AACA;AD5EE;EACE,iDEqBA;ADyDJ;ACnDA;EFxCE,2DE0CE;EDqDJ,wDAAA;ED7FE,6DEyCE;ADsDJ;AD7FE;EC+FF,iDAAA;AACA;AD5FE;EACE,iDEmCA;AD2DJ;AD3FE;EACE,iDE8BA;AD+DJ;ACzDA;EFjDE,yDEmDE;EFlDF,sDEmDE;EFlDF,2DEkDE;AD4DJ;AD5GE;EACE,+CEiDA;AD6DJ;AD3GE;EACE,+CE4CA;ADiEJ;AD1GE;EACE,+CEuCA;ADqEJ;AC/DA;EF1DE,wDE4DE;EF3DF,qDE4DE;EF3DF,0DE2DE;ADkEJ;AD3HE;EACE,8CE0DA;ADmEJ;AD1HE;EACE,8CEqDA;ADuEJ;ADzHE;EACE,8CEgDA;AD2EJ;ACpEA;EFrBE,sCAAA;AC6FF;AD3FE;EACE,kBAAA;EACA,8BAAA;EACA,gCAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,6BAAA;EACA,uCAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,aAAA;EACA,0OACE;AC4FN;ADxFI;EACE,UAAA;EACA,oCAAA;EACA,wCAAA;AC0FN;AE7KE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AF+KJ;AE5KE;EACE,aAAA;EACA,gBAAA;AF8KJ;AD9FI;EACE,UAAA;ACgGN;ACrGA;EFkBE,kCAAA;ACuFF;ADrFE;EACE,sCAAA;EACA,WAAA;EACA,YAAA;ACuFJ;ADpFE;EAjEA,qCAAA;EACA,uCAiE8B;EAhE9B,4CAH8E;EAI9E,0CAAA;ACwJF;ADtFE;EA9DA,SAAA;EACA,sCA8DgC;EA7DhC,6CAAA;ACuJF;ACrHA;EFgCE,iCAAA;ACyFF;ADvFE;EACE,oCAAA;EACA,aAAA;EACA,cAAA;ACyFJ;ADtFE;EAnFA,qCAAA;EACA,uCAmF8B;EAlF9B,4CAkF4D;EAjF5D,0CAAA;AC4KF;ADxFE;EAhFA,SAAA;EACA,qCAgFgC;EA/EhC,6CAAA;AC2KF;ADvFE;EACE,yCAAA;AC0FJ;ACnIA;EF8CE,oDAAA;ACyFF;ACnIA;EF8CE,4DAAA;ACyFF;ACnIA;EF8CE,mDAAA;ACyFF;ACnIA;EF8CE,2DAAA;ACyFF","file":"notification.css","sourcesContent":["// Notification component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin notification-base {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: var(--spacing-4, 1rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-left-width: 4px;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  box-shadow: none;\n}\n\n@mixin notification-variant($bg-color, $border-color, $text-color, $title-color) {\n  background-color: $bg-color;\n  border-color: $border-color;\n  border-left-color: $border-color;\n\n  .ivds-notification__title {\n    color: $title-color;\n  }\n\n  .ivds-notification__message {\n    color: $text-color;\n  }\n\n  .ivds-notification__icon {\n    color: $border-color;\n  }\n}\n\n@mixin notification-icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: var(--spacing-3, 0.75rem);\n  margin-top: var(--spacing-1, 0.25rem);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@mixin notification-content {\n  min-width: 0;\n  flex: 1;\n}\n\n@mixin notification-title($font-size: var(--fontSize-base, 1rem), $font-weight: var(--fontWeight-semibold, 600)) {\n  margin: 0 0 var(--spacing-1, 0.25rem);\n  font-size: $font-size;\n  font-weight: $font-weight;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\n@mixin notification-message($font-size: var(--fontSize-sm, 0.875rem)) {\n  margin: 0;\n  font-size: $font-size;\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin notification-dismissible {\n  padding-right: var(--spacing-12, 3rem);\n\n  .ivds-notification__dismiss {\n    position: absolute;\n    top: var(--spacing-3, 0.75rem);\n    right: var(--spacing-3, 0.75rem);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    border: 1px solid transparent;\n    border-radius: var(--ivds-radius-xs, 0);\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    opacity: 0.78;\n    transition:\n      opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      opacity: 1;\n      border-color: rgba(18, 26, 36, 0.16);\n      background-color: rgba(18, 26, 36, 0.06);\n    }\n\n    @include focus-ring;\n\n    &:focus-visible {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin notification-actions {\n  margin-top: var(--spacing-3, 0.75rem);\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n@mixin notification-compact {\n  padding: var(--spacing-3, 0.75rem);\n\n  .ivds-notification__icon {\n    margin-right: var(--spacing-2, 0.5rem);\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .ivds-notification__title {\n    @include notification-title(var(--fontSize-sm, 0.875rem));\n  }\n\n  .ivds-notification__message {\n    @include notification-message(var(--fontSize-xs, 0.75rem));\n  }\n}\n\n@mixin notification-spacious {\n  padding: var(--spacing-6, 1.5rem);\n\n  .ivds-notification__icon {\n    margin-right: var(--spacing-4, 1rem);\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  .ivds-notification__title {\n    @include notification-title(var(--fontSize-lg, 1.125rem), var(--fontWeight-semibold, 600));\n  }\n\n  .ivds-notification__message {\n    @include notification-message(var(--fontSize-base, 1rem));\n  }\n}\n\n@mixin notification-with-actions {\n  .ivds-notification__content {\n    padding-bottom: var(--spacing-1, 0.25rem);\n  }\n}\n\n@mixin notification-slide-in {\n  animation: ivds-notification-slide-in 0.28s ease-out;\n}\n\n@mixin notification-slide-out {\n  animation: ivds-notification-slide-out 0.2s ease-in forwards;\n}\n\n@mixin notification-fade-in {\n  animation: ivds-notification-fade-in 0.26s ease-out;\n}\n\n@mixin notification-fade-out {\n  animation: ivds-notification-fade-out 0.2s ease-in forwards;\n}\n\n@keyframes ivds-notification-slide-in {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes ivds-notification-slide-out {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@keyframes ivds-notification-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes ivds-notification-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n}\n","// Notification component styles\r\n// Provides styling for the IVDS notification component with all variants, dismissible functionality, and states\r\n\r\n@use '_notification-mixin' as notification;\r\n\r\n// Notification Base\r\n.ivds-notification {\r\n  @include notification.notification-base;\r\n  \r\n  // Notification elements\r\n  &__icon {\r\n    @include notification.notification-icon;\r\n  }\r\n  \r\n  &__content {\r\n    @include notification.notification-content;\r\n  }\r\n  \r\n  &__title {\r\n    @include notification.notification-title;\r\n  }\r\n  \r\n  &__message {\r\n    @include notification.notification-message;\r\n  }\r\n  \r\n  &__actions {\r\n    @include notification.notification-actions;\r\n  }\r\n  \r\n  // Dismiss button (added when dismissible)\r\n  &__dismiss {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Notification Variants\r\n.ivds-notification--success {\n  @include notification.notification-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-500, #19895d),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-notification--warning {\n  @include notification.notification-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-semantic-warning-700, #834b08)\n  );\n}\n\n.ivds-notification--error {\n  @include notification.notification-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-700, #922036),\n    var(--color-semantic-error-700, #922036)\n  );\n}\n\n.ivds-notification--info {\n  @include notification.notification-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-500, #1f6fe5),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\r\n// Dismissible notifications\r\n.ivds-notification--dismissible {\r\n  @include notification.notification-dismissible;\r\n}\r\n\r\n// Size variants\r\n.ivds-notification--compact {\r\n  @include notification.notification-compact;\r\n}\r\n\r\n.ivds-notification--spacious {\r\n  @include notification.notification-spacious;\r\n}\r\n\r\n// Notifications with actions\r\n.ivds-notification--with-actions {\r\n  @include notification.notification-with-actions;\r\n}\r\n\r\n// Animation classes\r\n.ivds-notification--slide-in {\r\n  @include notification.notification-slide-in;\r\n}\r\n\r\n.ivds-notification--slide-out {\r\n  @include notification.notification-slide-out;\r\n}\r\n\r\n.ivds-notification--fade-in {\r\n  @include notification.notification-fade-in;\r\n}\r\n\r\n.ivds-notification--fade-out {\r\n  @include notification.notification-fade-out;\r\n}\n","// Notification component styles\r\n// Provides styling for the IVDS notification component with all variants, dismissible functionality, and states\r\n\r\n@use '_notification-mixin' as notification;\r\n\r\n// Notification Base\r\n.ivds-notification {\r\n  @include notification.notification-base;\r\n  \r\n  // Notification elements\r\n  &__icon {\r\n    @include notification.notification-icon;\r\n  }\r\n  \r\n  &__content {\r\n    @include notification.notification-content;\r\n  }\r\n  \r\n  &__title {\r\n    @include notification.notification-title;\r\n  }\r\n  \r\n  &__message {\r\n    @include notification.notification-message;\r\n  }\r\n  \r\n  &__actions {\r\n    @include notification.notification-actions;\r\n  }\r\n  \r\n  // Dismiss button (added when dismissible)\r\n  &__dismiss {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Notification Variants\r\n.ivds-notification--success {\n  @include notification.notification-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-500, #19895d),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-notification--warning {\n  @include notification.notification-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-semantic-warning-700, #834b08)\n  );\n}\n\n.ivds-notification--error {\n  @include notification.notification-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-700, #922036),\n    var(--color-semantic-error-700, #922036)\n  );\n}\n\n.ivds-notification--info {\n  @include notification.notification-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-500, #1f6fe5),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\r\n// Dismissible notifications\r\n.ivds-notification--dismissible {\r\n  @include notification.notification-dismissible;\r\n}\r\n\r\n// Size variants\r\n.ivds-notification--compact {\r\n  @include notification.notification-compact;\r\n}\r\n\r\n.ivds-notification--spacious {\r\n  @include notification.notification-spacious;\r\n}\r\n\r\n// Notifications with actions\r\n.ivds-notification--with-actions {\r\n  @include notification.notification-with-actions;\r\n}\r\n\r\n// Animation classes\r\n.ivds-notification--slide-in {\r\n  @include notification.notification-slide-in;\r\n}\r\n\r\n.ivds-notification--slide-out {\r\n  @include notification.notification-slide-out;\r\n}\r\n\r\n.ivds-notification--fade-in {\r\n  @include notification.notification-fade-in;\r\n}\r\n\r\n.ivds-notification--fade-out {\r\n  @include notification.notification-fade-out;\r\n}\n","// 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"]}

package/lib/components/notification/notification.min.css

@@ -1 +1 @@
-@keyframes ivds-notification-slide-in{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes ivds-notification-slide-out{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes ivds-notification-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes ivds-notification-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.ivds-notification{align-items:flex-start;border-left:var(--borderWidth-4,4px) solid;border-radius:var(--borderRadius-md,.375rem);box-shadow:var(--shadow-sm,0 1px 2px 0 rgba(0,0,0,.05));display:flex;padding:var(--spacing-4,1rem);position:relative;transition:all .15s ease-in-out}.ivds-notification__icon{align-items:center;display:inline-flex;flex-shrink:0;height:1.25rem;justify-content:center;margin-right:var(--spacing-3,.75rem);margin-top:var(--spacing-1,.25rem);width:1.25rem}.ivds-notification__content{flex:1;min-width:0}.ivds-notification__title{font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0}.ivds-notification__message{font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification__actions{align-items:center;display:flex;gap:var(--spacing-2,.5rem);margin-top:var(--spacing-3,.75rem)}.ivds-notification__dismiss{align-items:center;display:inline-flex;height:1.5rem;justify-content:center;width:1.5rem}.ivds-notification__dismiss svg{fill:currentcolor;height:1rem;width:1rem}.ivds-notification--success{background-color:var(--color-semantic-success-50,#f0fdf4);border-left-color:var(--color-semantic-success-500,#22c55e)}.ivds-notification--success .ivds-notification__title{color:var(--color-semantic-success-800,#166534)}.ivds-notification--success .ivds-notification__message{color:var(--color-semantic-success-700,#15803d)}.ivds-notification--success .ivds-notification__icon{color:var(--color-semantic-success-500,#22c55e)}.ivds-notification--warning{background-color:var(--color-semantic-warning-50,#fffbeb);border-left-color:var(--color-semantic-warning-500,#f59e0b)}.ivds-notification--warning .ivds-notification__title{color:var(--color-semantic-warning-800,#92400e)}.ivds-notification--warning .ivds-notification__message{color:var(--color-semantic-warning-700,#b45309)}.ivds-notification--warning .ivds-notification__icon{color:var(--color-semantic-warning-500,#f59e0b)}.ivds-notification--error{background-color:var(--color-semantic-error-50,#fef2f2);border-left-color:var(--color-semantic-error-500,#ef4444)}.ivds-notification--error .ivds-notification__title{color:var(--color-semantic-error-800,#991b1b)}.ivds-notification--error .ivds-notification__message{color:var(--color-semantic-error-700,#b91c1c)}.ivds-notification--error .ivds-notification__icon{color:var(--color-semantic-error-500,#ef4444)}.ivds-notification--info{background-color:var(--color-semantic-info-50,#eff6ff);border-left-color:var(--color-semantic-info-500,#3b82f6)}.ivds-notification--info .ivds-notification__title{color:var(--color-semantic-info-800,#1e40af)}.ivds-notification--info .ivds-notification__message{color:var(--color-semantic-info-700,#1d4ed8)}.ivds-notification--info .ivds-notification__icon{color:var(--color-semantic-info-500,#3b82f6)}.ivds-notification--dismissible{padding-right:var(--spacing-12,3rem)}.ivds-notification--dismissible .ivds-notification__dismiss{background:transparent;border:none;border-radius:var(--borderRadius-sm,.25rem);color:inherit;cursor:pointer;opacity:.7;padding:var(--spacing-1,.25rem);position:absolute;right:var(--spacing-3,.75rem);top:var(--spacing-3,.75rem);transition:opacity .15s ease-in-out,background-color .15s ease-in-out}.ivds-notification--dismissible .ivds-notification__dismiss:hover{background-color:rgba(0,0,0,.05);opacity:1}.ivds-notification--dismissible .ivds-notification__dismiss:focus{opacity:1;outline:2px solid var(--color-brand-primary-500,#0ea5e9);outline-offset:2px}.ivds-notification--dismissible .ivds-notification__dismiss:active{transform:scale(.95)}.ivds-notification--compact{padding:var(--spacing-3,.75rem)}.ivds-notification--compact .ivds-notification__icon{height:1rem;margin-right:var(--spacing-2,.5rem);width:1rem}.ivds-notification--compact .ivds-notification__title{font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0}.ivds-notification--compact .ivds-notification__message{font-size:var(--fontSize-xs,.75rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--compact.ivds-notification--dismissible{padding-right:var(--spacing-10,2.5rem)}.ivds-notification--compact.ivds-notification--dismissible .ivds-notification__dismiss{right:var(--spacing-2,.5rem);top:var(--spacing-2,.5rem)}.ivds-notification--spacious{padding:var(--spacing-6,1.5rem)}.ivds-notification--spacious .ivds-notification__icon{height:1.5rem;margin-right:var(--spacing-4,1rem);width:1.5rem}.ivds-notification--spacious .ivds-notification__title{font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem) 0;margin-bottom:var(--spacing-2,.5rem)}.ivds-notification--spacious .ivds-notification__message{font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--spacious.ivds-notification--dismissible{padding-right:var(--spacing-14,3.5rem)}.ivds-notification--spacious.ivds-notification--dismissible .ivds-notification__dismiss{right:var(--spacing-4,1rem);top:var(--spacing-4,1rem)}.ivds-notification--with-actions .ivds-notification__content{padding-bottom:var(--spacing-1,.25rem)}.ivds-notification--slide-in{animation:ivds-notification-slide-in .3s ease-out}.ivds-notification--slide-out{animation:ivds-notification-slide-out .2s ease-in forwards}.ivds-notification--fade-in{animation:ivds-notification-fade-in .3s ease-out}.ivds-notification--fade-out{animation:ivds-notification-fade-out .2s ease-in forwards}
+@keyframes ivds-notification-slide-in{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@keyframes ivds-notification-slide-out{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}@keyframes ivds-notification-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes ivds-notification-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.ivds-notification{align-items:flex-start;border:1px solid var(--ivds-border-subtle,#e2e7ec);border-left-width:4px;border-radius:var(--ivds-radius-s,.125rem);box-shadow:none;display:flex;padding:var(--spacing-4,1rem);position:relative}.ivds-notification__icon{align-items:center;display:inline-flex;flex-shrink:0;height:1.25rem;justify-content:center;margin-right:var(--spacing-3,.75rem);margin-top:var(--spacing-1,.25rem);width:1.25rem}.ivds-notification__content{flex:1;min-width:0}.ivds-notification__title{font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification__message{font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification__actions{align-items:center;display:flex;gap:var(--spacing-2,.5rem);margin-top:var(--spacing-3,.75rem)}.ivds-notification__dismiss{align-items:center;display:inline-flex;height:1.5rem;justify-content:center;width:1.5rem}.ivds-notification__dismiss svg{fill:currentcolor;height:1rem;width:1rem}.ivds-notification--success{background-color:var(--color-semantic-success-50,#edf9f4);border-color:var(--color-semantic-success-500,#19895d);border-left-color:var(--color-semantic-success-500,#19895d)}.ivds-notification--success .ivds-notification__message,.ivds-notification--success .ivds-notification__title{color:var(--color-semantic-success-700,#0a573a)}.ivds-notification--success .ivds-notification__icon{color:var(--color-semantic-success-500,#19895d)}.ivds-notification--warning{background-color:var(--color-semantic-warning-50,#fff8eb);border-color:var(--color-semantic-warning-500,#ce790b);border-left-color:var(--color-semantic-warning-500,#ce790b)}.ivds-notification--warning .ivds-notification__message,.ivds-notification--warning .ivds-notification__title{color:var(--color-semantic-warning-700,#834b08)}.ivds-notification--warning .ivds-notification__icon{color:var(--color-semantic-warning-500,#ce790b)}.ivds-notification--error{background-color:var(--color-semantic-error-50,#fff1f2);border-color:var(--color-semantic-error-500,#d73a50);border-left-color:var(--color-semantic-error-500,#d73a50)}.ivds-notification--error .ivds-notification__message,.ivds-notification--error .ivds-notification__title{color:var(--color-semantic-error-700,#922036)}.ivds-notification--error .ivds-notification__icon{color:var(--color-semantic-error-500,#d73a50)}.ivds-notification--info{background-color:var(--color-semantic-info-50,#edf4ff);border-color:var(--color-semantic-info-500,#1f6fe5);border-left-color:var(--color-semantic-info-500,#1f6fe5)}.ivds-notification--info .ivds-notification__message,.ivds-notification--info .ivds-notification__title{color:var(--color-semantic-info-700,#003d99)}.ivds-notification--info .ivds-notification__icon{color:var(--color-semantic-info-500,#1f6fe5)}.ivds-notification--dismissible{padding-right:var(--spacing-12,3rem)}.ivds-notification--dismissible .ivds-notification__dismiss{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--ivds-radius-xs,0);color:inherit;cursor:pointer;display:inline-flex;height:1.75rem;justify-content:center;opacity:.78;position:absolute;right:var(--spacing-3,.75rem);top:var(--spacing-3,.75rem);transition:opacity var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:1.75rem}.ivds-notification--dismissible .ivds-notification__dismiss:hover{background-color:rgba(18,26,36,.06);border-color:rgba(18,26,36,.16);opacity:1}.ivds-notification--dismissible .ivds-notification__dismiss: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)}.ivds-notification--dismissible .ivds-notification__dismiss:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-notification--dismissible .ivds-notification__dismiss:focus-visible{opacity:1}.ivds-notification--compact{padding:var(--spacing-3,.75rem)}.ivds-notification--compact .ivds-notification__icon{height:1rem;margin-right:var(--spacing-2,.5rem);width:1rem}.ivds-notification--compact .ivds-notification__title{font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification--compact .ivds-notification__message{font-size:var(--fontSize-xs,.75rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--spacious{padding:var(--spacing-6,1.5rem)}.ivds-notification--spacious .ivds-notification__icon{height:1.5rem;margin-right:var(--spacing-4,1rem);width:1.5rem}.ivds-notification--spacious .ivds-notification__title{font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification--spacious .ivds-notification__message{font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--with-actions .ivds-notification__content{padding-bottom:var(--spacing-1,.25rem)}.ivds-notification--slide-in{animation:ivds-notification-slide-in .28s ease-out}.ivds-notification--slide-out{animation:ivds-notification-slide-out .2s ease-in forwards}.ivds-notification--fade-in{animation:ivds-notification-fade-in .26s ease-out}.ivds-notification--fade-out{animation:ivds-notification-fade-out .2s ease-in forwards}

package/lib/components/notification/notification.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/notification/_notification-mixin.scss","../../../src/components/notification/notification.scss","../../../src/components/notification/notification.scss%23sass","../../../src/base/_focus.scss"],"names":[],"mappings":"AAoKA,sCCnKA,GDqKI,SAAA,CCnKJ,0BACE,CACF,GACA,SAAA,CACE,uBACA,CACF,CDuKA,uCACE,GCrKA,SAAA,CDuKE,uBCrKF,CDwKA,GCtKA,SAAA,CDwKE,0BCtKF,CACF,CDyKA,qCACE,GCvKA,SAAA,CDyKE,yBCvKF,CD0KA,GCxKA,SAAA,CD0KE,uBCxKF,CACF,CD2KA,sCACE,GACE,SAAA,CACA,uBCzKF,CD4KA,GACE,SAAA,CACA,yBC1KF,CACF,CCjCA,mBFCE,sBAAA,CCuCF,kDDpCE,CCoCF,qBDpCE,CCqCF,0CAAA,CDnCE,eAAA,CANA,YAAA,CCsCF,6BAAA,CDvCE,iBC4CF,CCvCE,yBF8BA,kBAAA,CCgBF,mBAAA,CDtBE,aAAA,CAEA,cAAA,CAKA,sBAAA,CCaF,oCAAA,CDhBE,kCAAA,CAHA,aCwBF,CC7CE,4BFgCA,MAAA,CADA,WCkBF,CC7CE,0BFiCA,mCAAA,CACA,0CAH8E,CAI9E,wCAAA,CCYF,kCAIA,CC/CE,4BDkDF,oCAAA,CDbE,2CAAA,CAFA,QCiBF,CChDE,4BF4EA,kBAAA,CADA,YAAA,CAEA,0BAAA,CAHA,kCCpBF,CCjDE,4BDoDF,kBAAA,CCnDI,mBAAA,CDsDJ,aAAA,CAFA,sBAAA,CCjDI,YDoDJ,CCjDI,gCDqDJ,iBAAA,CCnDM,WAAA,CDiDN,UAGA,CC7CA,4BDgDA,yDAAA,CD9EE,sDEiCE,CD+CJ,2DACA,CD1EE,8GC+EF,+CACA,CD5EE,qDACE,+CC8EJ,CCnDA,4BFxCE,yDE0CE,CDqDJ,sDAAA,CD7FE,2DC+FF,CDzFE,8GACE,+CC8FJ,CD3FE,qDACE,+CC6FJ,CCzDA,0BFjDE,uDEmDE,CFlDF,oDEmDE,CFlDF,yDC8GF,CDxGE,0GACE,6CC6GJ,CD1GE,mDACE,6CC4GJ,CC/DA,yBF1DE,sDE4DE,CF3DF,mDE4DE,CF3DF,wDC6HF,CDvHE,wGACE,4CC4HJ,CDzHE,kDACE,4CC2HJ,CCpEA,gCFrBE,oCC6FF,CD3FE,4DAKE,kBAAA,CAMA,sBAAA,CAFA,4BAAA,CACA,qCAAA,CAEA,aAAA,CACA,cAAA,CATA,mBAAA,CAIA,cAAA,CAFA,sBAAA,CAQA,WAAA,CAbA,iBAAA,CAEA,6BAAA,CADA,2BAAA,CAaA,8NACE,CATF,aCqGJ,CDxFI,kEAGE,mCAAA,CADA,+BAAA,CADA,SC4FN,CE7KE,0EAGE,eAAA,CAFA,iHAAA,CACA,gDFgLJ,CE5KE,sFAEE,eAAA,CADA,YF+KJ,CD9FI,0EACE,SCgGN,CCrGA,4BFkBE,+BCuFF,CDrFE,qDAGE,WAAA,CAFA,mCAAA,CACA,UCwFJ,CDpFE,sDAhEA,oCAiE8B,CAhE9B,0CAH8E,CAI9E,wCAAA,CAHA,kCC2JF,CDtFE,wDA7DA,mCA8DgC,CA7DhC,2CAAA,CAFA,QCyJF,CCrHA,6BFgCE,+BCyFF,CDvFE,sDAGE,aAAA,CAFA,kCAAA,CACA,YC0FJ,CDtFE,uDAlFA,qCAmF8B,CAlF9B,0CAkF4D,CAjF5D,wCAAA,CAHA,kCC+KF,CDxFE,yDA/EA,mCAgFgC,CA/EhC,2CAAA,CAFA,QC6KF,CDvFE,6DACE,sCC0FJ,CCnIA,6BF8CE,kDCyFF,CCnIA,8BF8CE,0DCyFF,CCnIA,4BF8CE,iDCyFF,CCnIA,6BF8CE,yDCyFF","file":"notification.min.css","sourcesContent":["// Notification component mixins and private styles\n\n@use '../../base/focus' as *;\n\n@mixin notification-base {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: var(--spacing-4, 1rem);\n  border: 1px solid var(--ivds-border-subtle, #e2e7ec);\n  border-left-width: 4px;\n  border-radius: var(--ivds-radius-s, 0.125rem);\n  box-shadow: none;\n}\n\n@mixin notification-variant($bg-color, $border-color, $text-color, $title-color) {\n  background-color: $bg-color;\n  border-color: $border-color;\n  border-left-color: $border-color;\n\n  .ivds-notification__title {\n    color: $title-color;\n  }\n\n  .ivds-notification__message {\n    color: $text-color;\n  }\n\n  .ivds-notification__icon {\n    color: $border-color;\n  }\n}\n\n@mixin notification-icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: var(--spacing-3, 0.75rem);\n  margin-top: var(--spacing-1, 0.25rem);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@mixin notification-content {\n  min-width: 0;\n  flex: 1;\n}\n\n@mixin notification-title($font-size: var(--fontSize-base, 1rem), $font-weight: var(--fontWeight-semibold, 600)) {\n  margin: 0 0 var(--spacing-1, 0.25rem);\n  font-size: $font-size;\n  font-weight: $font-weight;\n  line-height: var(--lineHeight-tight, 1.25);\n}\n\n@mixin notification-message($font-size: var(--fontSize-sm, 0.875rem)) {\n  margin: 0;\n  font-size: $font-size;\n  line-height: var(--lineHeight-relaxed, 1.625);\n}\n\n@mixin notification-dismissible {\n  padding-right: var(--spacing-12, 3rem);\n\n  .ivds-notification__dismiss {\n    position: absolute;\n    top: var(--spacing-3, 0.75rem);\n    right: var(--spacing-3, 0.75rem);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    border: 1px solid transparent;\n    border-radius: var(--ivds-radius-xs, 0);\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    opacity: 0.78;\n    transition:\n      opacity var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      opacity: 1;\n      border-color: rgba(18, 26, 36, 0.16);\n      background-color: rgba(18, 26, 36, 0.06);\n    }\n\n    @include focus-ring;\n\n    &:focus-visible {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin notification-actions {\n  margin-top: var(--spacing-3, 0.75rem);\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n@mixin notification-compact {\n  padding: var(--spacing-3, 0.75rem);\n\n  .ivds-notification__icon {\n    margin-right: var(--spacing-2, 0.5rem);\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .ivds-notification__title {\n    @include notification-title(var(--fontSize-sm, 0.875rem));\n  }\n\n  .ivds-notification__message {\n    @include notification-message(var(--fontSize-xs, 0.75rem));\n  }\n}\n\n@mixin notification-spacious {\n  padding: var(--spacing-6, 1.5rem);\n\n  .ivds-notification__icon {\n    margin-right: var(--spacing-4, 1rem);\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  .ivds-notification__title {\n    @include notification-title(var(--fontSize-lg, 1.125rem), var(--fontWeight-semibold, 600));\n  }\n\n  .ivds-notification__message {\n    @include notification-message(var(--fontSize-base, 1rem));\n  }\n}\n\n@mixin notification-with-actions {\n  .ivds-notification__content {\n    padding-bottom: var(--spacing-1, 0.25rem);\n  }\n}\n\n@mixin notification-slide-in {\n  animation: ivds-notification-slide-in 0.28s ease-out;\n}\n\n@mixin notification-slide-out {\n  animation: ivds-notification-slide-out 0.2s ease-in forwards;\n}\n\n@mixin notification-fade-in {\n  animation: ivds-notification-fade-in 0.26s ease-out;\n}\n\n@mixin notification-fade-out {\n  animation: ivds-notification-fade-out 0.2s ease-in forwards;\n}\n\n@keyframes ivds-notification-slide-in {\n  from {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes ivds-notification-slide-out {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateX(24px);\n  }\n}\n\n@keyframes ivds-notification-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes ivds-notification-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n}\n","// Notification component styles\r\n// Provides styling for the IVDS notification component with all variants, dismissible functionality, and states\r\n\r\n@use '_notification-mixin' as notification;\r\n\r\n// Notification Base\r\n.ivds-notification {\r\n  @include notification.notification-base;\r\n  \r\n  // Notification elements\r\n  &__icon {\r\n    @include notification.notification-icon;\r\n  }\r\n  \r\n  &__content {\r\n    @include notification.notification-content;\r\n  }\r\n  \r\n  &__title {\r\n    @include notification.notification-title;\r\n  }\r\n  \r\n  &__message {\r\n    @include notification.notification-message;\r\n  }\r\n  \r\n  &__actions {\r\n    @include notification.notification-actions;\r\n  }\r\n  \r\n  // Dismiss button (added when dismissible)\r\n  &__dismiss {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Notification Variants\r\n.ivds-notification--success {\n  @include notification.notification-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-500, #19895d),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-notification--warning {\n  @include notification.notification-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-semantic-warning-700, #834b08)\n  );\n}\n\n.ivds-notification--error {\n  @include notification.notification-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-700, #922036),\n    var(--color-semantic-error-700, #922036)\n  );\n}\n\n.ivds-notification--info {\n  @include notification.notification-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-500, #1f6fe5),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\r\n// Dismissible notifications\r\n.ivds-notification--dismissible {\r\n  @include notification.notification-dismissible;\r\n}\r\n\r\n// Size variants\r\n.ivds-notification--compact {\r\n  @include notification.notification-compact;\r\n}\r\n\r\n.ivds-notification--spacious {\r\n  @include notification.notification-spacious;\r\n}\r\n\r\n// Notifications with actions\r\n.ivds-notification--with-actions {\r\n  @include notification.notification-with-actions;\r\n}\r\n\r\n// Animation classes\r\n.ivds-notification--slide-in {\r\n  @include notification.notification-slide-in;\r\n}\r\n\r\n.ivds-notification--slide-out {\r\n  @include notification.notification-slide-out;\r\n}\r\n\r\n.ivds-notification--fade-in {\r\n  @include notification.notification-fade-in;\r\n}\r\n\r\n.ivds-notification--fade-out {\r\n  @include notification.notification-fade-out;\r\n}\n","// Notification component styles\r\n// Provides styling for the IVDS notification component with all variants, dismissible functionality, and states\r\n\r\n@use '_notification-mixin' as notification;\r\n\r\n// Notification Base\r\n.ivds-notification {\r\n  @include notification.notification-base;\r\n  \r\n  // Notification elements\r\n  &__icon {\r\n    @include notification.notification-icon;\r\n  }\r\n  \r\n  &__content {\r\n    @include notification.notification-content;\r\n  }\r\n  \r\n  &__title {\r\n    @include notification.notification-title;\r\n  }\r\n  \r\n  &__message {\r\n    @include notification.notification-message;\r\n  }\r\n  \r\n  &__actions {\r\n    @include notification.notification-actions;\r\n  }\r\n  \r\n  // Dismiss button (added when dismissible)\r\n  &__dismiss {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    \r\n    svg {\r\n      width: 1rem;\r\n      height: 1rem;\r\n      fill: currentcolor;\r\n    }\r\n  }\r\n}\r\n\r\n// Notification Variants\r\n.ivds-notification--success {\n  @include notification.notification-variant(\n    var(--color-semantic-success-50, #edf9f4),\n    var(--color-semantic-success-500, #19895d),\n    var(--color-semantic-success-700, #0a573a),\n    var(--color-semantic-success-700, #0a573a)\n  );\n}\n\n.ivds-notification--warning {\n  @include notification.notification-variant(\n    var(--color-semantic-warning-50, #fff8eb),\n    var(--color-semantic-warning-500, #ce790b),\n    var(--color-semantic-warning-700, #834b08),\n    var(--color-semantic-warning-700, #834b08)\n  );\n}\n\n.ivds-notification--error {\n  @include notification.notification-variant(\n    var(--color-semantic-error-50, #fff1f2),\n    var(--color-semantic-error-500, #d73a50),\n    var(--color-semantic-error-700, #922036),\n    var(--color-semantic-error-700, #922036)\n  );\n}\n\n.ivds-notification--info {\n  @include notification.notification-variant(\n    var(--color-semantic-info-50, #edf4ff),\n    var(--color-semantic-info-500, #1f6fe5),\n    var(--color-semantic-info-700, #003d99),\n    var(--color-semantic-info-700, #003d99)\n  );\n}\n\r\n// Dismissible notifications\r\n.ivds-notification--dismissible {\r\n  @include notification.notification-dismissible;\r\n}\r\n\r\n// Size variants\r\n.ivds-notification--compact {\r\n  @include notification.notification-compact;\r\n}\r\n\r\n.ivds-notification--spacious {\r\n  @include notification.notification-spacious;\r\n}\r\n\r\n// Notifications with actions\r\n.ivds-notification--with-actions {\r\n  @include notification.notification-with-actions;\r\n}\r\n\r\n// Animation classes\r\n.ivds-notification--slide-in {\r\n  @include notification.notification-slide-in;\r\n}\r\n\r\n.ivds-notification--slide-out {\r\n  @include notification.notification-slide-out;\r\n}\r\n\r\n.ivds-notification--fade-in {\r\n  @include notification.notification-fade-in;\r\n}\r\n\r\n.ivds-notification--fade-out {\r\n  @include notification.notification-fade-out;\r\n}\n","// 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"]}

package/lib/components/notification/notification.min.css.ts

@@ -0,0 +1,5 @@
+/**
+ * Auto-generated CSS string for notification.min.css
+ * Do not edit manually
+ */
+export const notification_minCss = `@keyframes ivds-notification-slide-in{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@keyframes ivds-notification-slide-out{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}@keyframes ivds-notification-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes ivds-notification-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.ivds-notification{align-items:flex-start;border:1px solid var(--ivds-border-subtle,#e2e7ec);border-left-width:4px;border-radius:var(--ivds-radius-s,.125rem);box-shadow:none;display:flex;padding:var(--spacing-4,1rem);position:relative}.ivds-notification__icon{align-items:center;display:inline-flex;flex-shrink:0;height:1.25rem;justify-content:center;margin-right:var(--spacing-3,.75rem);margin-top:var(--spacing-1,.25rem);width:1.25rem}.ivds-notification__content{flex:1;min-width:0}.ivds-notification__title{font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification__message{font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification__actions{align-items:center;display:flex;gap:var(--spacing-2,.5rem);margin-top:var(--spacing-3,.75rem)}.ivds-notification__dismiss{align-items:center;display:inline-flex;height:1.5rem;justify-content:center;width:1.5rem}.ivds-notification__dismiss svg{fill:currentcolor;height:1rem;width:1rem}.ivds-notification--success{background-color:var(--color-semantic-success-50,#edf9f4);border-color:var(--color-semantic-success-500,#19895d);border-left-color:var(--color-semantic-success-500,#19895d)}.ivds-notification--success .ivds-notification__message,.ivds-notification--success .ivds-notification__title{color:var(--color-semantic-success-700,#0a573a)}.ivds-notification--success .ivds-notification__icon{color:var(--color-semantic-success-500,#19895d)}.ivds-notification--warning{background-color:var(--color-semantic-warning-50,#fff8eb);border-color:var(--color-semantic-warning-500,#ce790b);border-left-color:var(--color-semantic-warning-500,#ce790b)}.ivds-notification--warning .ivds-notification__message,.ivds-notification--warning .ivds-notification__title{color:var(--color-semantic-warning-700,#834b08)}.ivds-notification--warning .ivds-notification__icon{color:var(--color-semantic-warning-500,#ce790b)}.ivds-notification--error{background-color:var(--color-semantic-error-50,#fff1f2);border-color:var(--color-semantic-error-500,#d73a50);border-left-color:var(--color-semantic-error-500,#d73a50)}.ivds-notification--error .ivds-notification__message,.ivds-notification--error .ivds-notification__title{color:var(--color-semantic-error-700,#922036)}.ivds-notification--error .ivds-notification__icon{color:var(--color-semantic-error-500,#d73a50)}.ivds-notification--info{background-color:var(--color-semantic-info-50,#edf4ff);border-color:var(--color-semantic-info-500,#1f6fe5);border-left-color:var(--color-semantic-info-500,#1f6fe5)}.ivds-notification--info .ivds-notification__message,.ivds-notification--info .ivds-notification__title{color:var(--color-semantic-info-700,#003d99)}.ivds-notification--info .ivds-notification__icon{color:var(--color-semantic-info-500,#1f6fe5)}.ivds-notification--dismissible{padding-right:var(--spacing-12,3rem)}.ivds-notification--dismissible .ivds-notification__dismiss{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--ivds-radius-xs,0);color:inherit;cursor:pointer;display:inline-flex;height:1.75rem;justify-content:center;opacity:.78;position:absolute;right:var(--spacing-3,.75rem);top:var(--spacing-3,.75rem);transition:opacity var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:1.75rem}.ivds-notification--dismissible .ivds-notification__dismiss:hover{background-color:rgba(18,26,36,.06);border-color:rgba(18,26,36,.16);opacity:1}.ivds-notification--dismissible .ivds-notification__dismiss: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)}.ivds-notification--dismissible .ivds-notification__dismiss:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-notification--dismissible .ivds-notification__dismiss:focus-visible{opacity:1}.ivds-notification--compact{padding:var(--spacing-3,.75rem)}.ivds-notification--compact .ivds-notification__icon{height:1rem;margin-right:var(--spacing-2,.5rem);width:1rem}.ivds-notification--compact .ivds-notification__title{font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification--compact .ivds-notification__message{font-size:var(--fontSize-xs,.75rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--spacious{padding:var(--spacing-6,1.5rem)}.ivds-notification--spacious .ivds-notification__icon{height:1.5rem;margin-right:var(--spacing-4,1rem);width:1.5rem}.ivds-notification--spacious .ivds-notification__title{font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-1,.25rem)}.ivds-notification--spacious .ivds-notification__message{font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-relaxed,1.625);margin:0}.ivds-notification--with-actions .ivds-notification__content{padding-bottom:var(--spacing-1,.25rem)}.ivds-notification--slide-in{animation:ivds-notification-slide-in .28s ease-out}.ivds-notification--slide-out{animation:ivds-notification-slide-out .2s ease-in forwards}.ivds-notification--fade-in{animation:ivds-notification-fade-in .26s ease-out}.ivds-notification--fade-out{animation:ivds-notification-fade-out .2s ease-in forwards}`;

package/lib/components/{_pagination-mixins.scss → pagination/_pagination-mixins.scss}

@@ -2,6 +2,7 @@
 // This file contains mixins for pagination variants and internal utilities
 
 @use '../../variables/variables' as vars;
+@use '../../base/focus' as *;
 
 // Base pagination mixin with common styles
 @mixin pagination-base {
@@ -9,14 +10,14 @@
   --pagination-item-size-small: 2rem;
   --pagination-item-size-large: 3rem;
   --pagination-gap: var(--spacing-1, 0.25rem);
-  --pagination-color: var(--color-semantic-neutral-700, #404040);
-  --pagination-color-hover: var(--color-brand-primary-600, #ea580c);
-  --pagination-color-active: var(--color-semantic-neutral-50, #fafafa);
-  --pagination-bg-hover: var(--color-brand-primary-50, #fff7ed);
-  --pagination-bg-active: var(--color-brand-primary-500, #f97316);
-  --pagination-border-color: var(--color-semantic-neutral-300, #d4d4d4);
-  --pagination-border-color-hover: var(--color-brand-primary-500, #f97316);
-  --pagination-border-color-active: var(--color-brand-primary-500, #f97316);
+  --pagination-color: var(--ivds-text-secondary, #36414f);
+  --pagination-color-hover: var(--color-brand-accent-700, #0b4593);
+  --pagination-color-active: #fff;
+  --pagination-bg-hover: var(--color-brand-accent-50, #eef4ff);
+  --pagination-bg-active: var(--color-brand-accent-600, #1058b8);
+  --pagination-border-color: var(--ivds-border-strong, #a1adba);
+  --pagination-border-color-hover: var(--color-brand-accent-600, #1058b8);
+  --pagination-border-color-active: var(--color-brand-accent-600, #1058b8);
 
   display: flex;
   align-items: center;
@@ -49,16 +50,16 @@
   color: var(--pagination-color);
   text-decoration: none;
   border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
-  border-radius: var(--borderRadius-md, 0.375rem);
+  border-radius: var(--ivds-radius-s, 0.125rem);
   font-weight: var(--fontWeight-medium, 500);
   font-size: var(--fontSize-sm, 0.875rem);
   line-height: var(--lineHeight-tight, 1.25);
   transition: all 0.15s ease-in-out;
   user-select: none;
   
-  &:focus {
-    outline: 2px solid var(--color-brand-primary-500, #f97316);
-    outline-offset: 2px;
+  @include focus-ring;
+
+  &:focus-visible {
     text-decoration: none;
   }
   
@@ -81,8 +82,8 @@
   font-weight: var(--fontWeight-semibold, 600);
   
   &:hover {
-    background-color: var(--color-brand-primary-600, #ea580c);
-    border-color: var(--color-brand-primary-600, #ea580c);
+    background-color: var(--color-brand-accent-700, #0b4593);
+    border-color: var(--color-brand-accent-700, #0b4593);
     color: var(--pagination-color-active);
   }
 }
@@ -107,7 +108,7 @@
   justify-content: center;
   min-width: var(--pagination-item-size);
   height: var(--pagination-item-size);
-  color: var(--color-semantic-neutral-500, #737373);
+  color: var(--ivds-text-muted, #4d5968);
   font-weight: var(--fontWeight-medium, 500);
   user-select: none;
 }
@@ -160,13 +161,13 @@
     border-right-width: 0;
     
     &:first-child {
-      border-top-left-radius: var(--borderRadius-md, 0.375rem);
-      border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+      border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
     }
     
     &:last-child {
-      border-top-right-radius: var(--borderRadius-md, 0.375rem);
-      border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+      border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
       border-right-width: var(--borderWidth-1, 1px);
     }
   }
@@ -183,7 +184,7 @@
   --pagination-border-color: transparent;
   --pagination-border-color-hover: transparent;
   --pagination-border-color-active: transparent;
-  --pagination-bg-hover: var(--color-semantic-neutral-100, #f5f5f5);
+  --pagination-bg-hover: var(--ivds-surface-muted, #f1f3f5);
   
   .ivds-pagination__link {
     &:hover:not(.ivds-pagination__link--disabled) {
@@ -200,13 +201,13 @@
 
 @mixin pagination-theme-dark {
   --pagination-color: var(--color-semantic-neutral-200, #e5e5e5);
-  --pagination-color-hover: var(--color-brand-primary-300, #fdba74);
+  --pagination-color-hover: var(--color-brand-accent-300, #93bcff);
   --pagination-color-active: var(--color-semantic-neutral-900, #171717);
-  --pagination-bg-hover: rgba(249, 115, 22, 0.1);
-  --pagination-bg-active: var(--color-brand-primary-400, #fb923c);
+  --pagination-bg-hover: rgba(147, 188, 255, 0.12);
+  --pagination-bg-active: var(--color-brand-accent-400, #5a96f5);
   --pagination-border-color: var(--color-semantic-neutral-600, #525252);
-  --pagination-border-color-hover: var(--color-brand-primary-400, #fb923c);
-  --pagination-border-color-active: var(--color-brand-primary-400, #fb923c);
+  --pagination-border-color-hover: var(--color-brand-accent-400, #5a96f5);
+  --pagination-border-color-active: var(--color-brand-accent-400, #5a96f5);
 }
 
 // Pagination with icons
@@ -247,10 +248,10 @@
       font-size: inherit;
       text-align: center;
       
-      &:focus {
-        outline: 2px solid var(--color-brand-primary-500, #f97316);
-        outline-offset: 2px;
-        border-color: var(--color-brand-primary-500, #f97316);
+      @include focus-ring;
+
+      &:focus-visible {
+        border-color: var(--color-brand-accent-600, #1058b8);
       }
     }
   }
@@ -277,4 +278,4 @@
       display: none;
     }
   }
-}
+}