@haiilo/catalyst 1.3.0 → 2.0.0

package/dist/catalyst/scss/core/_nav.scss

@@ -8,8 +8,8 @@ nav {
     margin-bottom: $cat-nav-padding-horizontal * 0.5;
   }
 
-  .cat-head,
-  .cat-text {
+  .cat-nav-head,
+  .cat-nav-text {
     padding: $cat-nav-padding-horizontal * 0.5 $cat-nav-padding-horizontal;
 
     > :last-child {
@@ -17,7 +17,7 @@ nav {
     }
   }
 
-  .cat-head {
+  .cat-nav-head {
     @include cat-head(5);
   }
 }

package/dist/catalyst/scss/core/_notification.scss

@@ -0,0 +1,48 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.cat-toastify {
+  display: flex;
+  border-radius: cat-border-radius('l');
+  background: cat-token('color.ui.background.body');
+  padding: 1.25rem;
+  box-shadow: none;
+  color: cat-token('color.ui.font.body');
+  width: 400px;
+  max-width: 400px;
+  cursor: unset;
+
+  &.cat-toastify-dark {
+    --cat-font-color-head: #{cat-token('color.ui.font.headDark', $wrap: false)};
+    --cat-font-color-body: #{cat-token('color.ui.font.bodyDark', $wrap: false)};
+    --cat-primary-text: #{cat-token('color.theme.primaryDark.text', $wrap: false)};
+    --cat-primary-text-hover: #{cat-token('color.theme.primaryDark.textHover', $wrap: false)};
+    --cat-primary-text-active: #{cat-token('color.theme.primaryDark.textActive', $wrap: false)};
+    --cat-secondary-text: #{cat-token('color.theme.secondaryDark.text', $wrap: false)};
+    --cat-secondary-text-hover: #{cat-token('color.theme.secondaryDark.textHover', $wrap: false)};
+    --cat-secondary-text-active: #{cat-token('color.theme.secondaryDark.textActive', $wrap: false)};
+    background: cat-token('color.ui.background.bodyDark');
+  }
+}
+
+.cat-toastify-wrapper {
+  display: flex;
+  gap: 1.75rem;
+  align-items: flex-start;
+  flex: 1 1 auto;
+}
+
+.cat-toastify-icon {
+  padding: 0.25rem;
+  margin: -0.375rem;
+  margin-right: -1.375rem;
+}
+
+.cat-toastify-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 0.875rem;
+  column-gap: 1rem;
+}

package/dist/catalyst/scss/index.scss

@@ -11,8 +11,9 @@
 
 // -- Core
 @import 'core/base';
+@import 'core/form';
 @import 'core/nav';
-@import 'core/toast';
+@import 'core/notification';
 @import 'core/typography';
 
 // -- Utils

package/dist/catalyst/scss/utils/_typography.scss

@@ -1,5 +1,9 @@
 @use 'typography.mixins' as *;
 
+.cat-line-height-1 {
+  line-height: 1 !important;
+}
+
 .cat-text-left {
   text-align: left !important;
 }