@ivds/core 0.1.1 → 1.0.0

package/lib/components/{_notification-mixin.scss → notification/_notification-mixin.scss}

@@ -1,239 +1,211 @@
-// Notification component mixins and private styles
-// This file contains mixins for notification variants, dismissible functionality, and internal utilities
-
-@use '../../variables/variables' as vars;
-
-// Base notification mixin with common styles
-@mixin notification-base {
-  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 variant mixin
-@mixin notification-variant($bg-color, $border-color, $text-color, $title-color) {
-  background-color: $bg-color;
-  border-left-color: $border-color;
-  
-  .ivds-notification__title {
-    color: $title-color;
-  }
-  
-  .ivds-notification__message {
-    color: $text-color;
-  }
-  
-  .ivds-notification__icon {
-    color: $border-color;
-  }
-}
-
-// Notification icon mixin
-@mixin 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;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Notification content mixin
-@mixin notification-content {
-  flex: 1;
-  min-width: 0; // Prevent flex item from overflowing
-}
-
-// Notification title mixin
-@mixin notification-title($font-size: var(--fontSize-base, 1rem), $font-weight: var(--fontWeight-medium, 500)) {
-  margin: 0 0 var(--spacing-1, 0.25rem) 0;
-  font-size: $font-size;
-  font-weight: $font-weight;
-  line-height: var(--lineHeight-tight, 1.25);
-}
-
-// Notification message mixin
-@mixin notification-message($font-size: var(--fontSize-sm, 0.875rem)) {
-  margin: 0;
-  font-size: $font-size;
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-
-// Dismissible notification mixin
-@mixin notification-dismissible {
-  padding-right: var(--spacing-12, 3rem);
-  
-  .ivds-notification__dismiss {
-    position: absolute;
-    top: var(--spacing-3, 0.75rem);
-    right: var(--spacing-3, 0.75rem);
-    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;
-    
-    &:hover {
-      opacity: 1;
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    
-    &:focus {
-      outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-      outline-offset: 2px;
-      opacity: 1;
-    }
-    
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-}
-
-// Notification actions mixin
-@mixin notification-actions {
-  display: flex;
-  gap: var(--spacing-2, 0.5rem);
-  margin-top: var(--spacing-3, 0.75rem);
-  align-items: center;
-}
-
-// Notification size variants
-@mixin notification-compact {
-  padding: var(--spacing-3, 0.75rem);
-  
-  .ivds-notification__icon {
-    margin-right: var(--spacing-2, 0.5rem);
-    width: 1rem;
-    height: 1rem;
-  }
-  
-  .ivds-notification__title {
-    @include notification-title(var(--fontSize-sm, 0.875rem));
-  }
-  
-  .ivds-notification__message {
-    @include notification-message(var(--fontSize-xs, 0.75rem));
-  }
-  
-  &.ivds-notification--dismissible {
-    padding-right: var(--spacing-10, 2.5rem);
-    
-    .ivds-notification__dismiss {
-      top: var(--spacing-2, 0.5rem);
-      right: var(--spacing-2, 0.5rem);
-    }
-  }
-}
-
-@mixin notification-spacious {
-  padding: var(--spacing-6, 1.5rem);
-  
-  .ivds-notification__icon {
-    margin-right: var(--spacing-4, 1rem);
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  
-  .ivds-notification__title {
-    @include notification-title(var(--fontSize-lg, 1.125rem), var(--fontWeight-semibold, 600));
-
-    margin-bottom: var(--spacing-2, 0.5rem);
-  }
-  
-  .ivds-notification__message {
-    @include notification-message(var(--fontSize-base, 1rem));
-  }
-  
-  &.ivds-notification--dismissible {
-    padding-right: var(--spacing-14, 3.5rem);
-    
-    .ivds-notification__dismiss {
-      top: var(--spacing-4, 1rem);
-      right: var(--spacing-4, 1rem);
-    }
-  }
-}
-
-// Notification with actions mixin
-@mixin notification-with-actions {
-  .ivds-notification__content {
-    padding-bottom: var(--spacing-1, 0.25rem);
-  }
-}
-
-// Notification animation mixins
-@mixin notification-slide-in {
-  animation: ivds-notification-slide-in 0.3s ease-out;
-}
-
-@mixin notification-slide-out {
-  animation: ivds-notification-slide-out 0.2s ease-in forwards;
-}
-
-@mixin notification-fade-in {
-  animation: ivds-notification-fade-in 0.3s ease-out;
-}
-
-@mixin notification-fade-out {
-  animation: ivds-notification-fade-out 0.2s ease-in forwards;
-}
-
-// Keyframes for animations
-@keyframes ivds-notification-slide-in {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes ivds-notification-slide-out {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes ivds-notification-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes ivds-notification-fade-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
+// Notification component mixins and private styles
+
+@use '../../base/focus' as *;
+
+@mixin notification-base {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-4, 1rem);
+  border: 1px solid var(--ivds-border-subtle, #e2e7ec);
+  border-left-width: 4px;
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  box-shadow: none;
+}
+
+@mixin notification-variant($bg-color, $border-color, $text-color, $title-color) {
+  background-color: $bg-color;
+  border-color: $border-color;
+  border-left-color: $border-color;
+
+  .ivds-notification__title {
+    color: $title-color;
+  }
+
+  .ivds-notification__message {
+    color: $text-color;
+  }
+
+  .ivds-notification__icon {
+    color: $border-color;
+  }
+}
+
+@mixin notification-icon {
+  flex-shrink: 0;
+  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;
+}
+
+@mixin notification-content {
+  min-width: 0;
+  flex: 1;
+}
+
+@mixin notification-title($font-size: var(--fontSize-base, 1rem), $font-weight: var(--fontWeight-semibold, 600)) {
+  margin: 0 0 var(--spacing-1, 0.25rem);
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+
+@mixin notification-message($font-size: var(--fontSize-sm, 0.875rem)) {
+  margin: 0;
+  font-size: $font-size;
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+
+@mixin notification-dismissible {
+  padding-right: var(--spacing-12, 3rem);
+
+  .ivds-notification__dismiss {
+    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;
+    color: inherit;
+    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);
+
+    &:hover {
+      opacity: 1;
+      border-color: rgba(18, 26, 36, 0.16);
+      background-color: rgba(18, 26, 36, 0.06);
+    }
+
+    @include focus-ring;
+
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin notification-actions {
+  margin-top: var(--spacing-3, 0.75rem);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+@mixin notification-compact {
+  padding: var(--spacing-3, 0.75rem);
+
+  .ivds-notification__icon {
+    margin-right: var(--spacing-2, 0.5rem);
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .ivds-notification__title {
+    @include notification-title(var(--fontSize-sm, 0.875rem));
+  }
+
+  .ivds-notification__message {
+    @include notification-message(var(--fontSize-xs, 0.75rem));
+  }
+}
+
+@mixin notification-spacious {
+  padding: var(--spacing-6, 1.5rem);
+
+  .ivds-notification__icon {
+    margin-right: var(--spacing-4, 1rem);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .ivds-notification__title {
+    @include notification-title(var(--fontSize-lg, 1.125rem), var(--fontWeight-semibold, 600));
+  }
+
+  .ivds-notification__message {
+    @include notification-message(var(--fontSize-base, 1rem));
+  }
+}
+
+@mixin notification-with-actions {
+  .ivds-notification__content {
+    padding-bottom: var(--spacing-1, 0.25rem);
+  }
+}
+
+@mixin notification-slide-in {
+  animation: ivds-notification-slide-in 0.28s ease-out;
+}
+
+@mixin notification-slide-out {
+  animation: ivds-notification-slide-out 0.2s ease-in forwards;
+}
+
+@mixin notification-fade-in {
+  animation: ivds-notification-fade-in 0.26s ease-out;
+}
+
+@mixin notification-fade-out {
+  animation: ivds-notification-fade-out 0.2s ease-in forwards;
+}
+
+@keyframes ivds-notification-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ivds-notification-slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+@keyframes ivds-notification-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ivds-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}