@haiilo/catalyst 2.5.0 → 3.0.1

package/dist/catalyst/scss/_variables.tokens.scss

@@ -49,7 +49,7 @@
 
 @function cat-token-wrap($value, $alpha: 1) {
   @if meta.type-of($value) == 'string' {
-    @if $alpha < 1 {
+    @if meta.type-of($alpha) != 'number' or $alpha < 1 {
       @return rgba($value, $alpha);
     } @else {
       @return rgb($value);
@@ -80,7 +80,7 @@
   @if string.index($key, 'color.') == 1 {
     @if $wrap {
       @return cat-token-wrap($value, $alpha);
-    } @else if $alpha < 1 {
+    } @else if meta.type-of($alpha) != 'number' or $alpha < 1 {
       @return $value, $alpha;
     }
   }

package/dist/catalyst/scss/core/_dialog.scss

@@ -0,0 +1,66 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+/**
+ * Dialog makes assumptions about the DOM structure of the dialog content.
+ * The following selectors are used to style the dialog content based on its
+ * position in the DOM hierarchy.
+ *
+ * .cat-backdrop
+ *   |- .cat-dialog
+ *        |- .cat-dialog-header
+ *             |- .cat-dialog-header-content
+ *        |- .cat-dialog-content
+ *        |- .cat-dialog-actions
+**/
+
+$-dialog-padding: 1.5rem;
+
+.cat-backdrop {
+  background-color: cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'));
+}
+
+.cat-dialog {
+  background-color: cat-token('color.ui.background.surface');
+  border-radius: cat-border-radius('l');
+  @include cat-elevation(7);
+  container: dialog / inline-size;
+}
+
+.cat-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: $-dialog-padding;
+}
+
+.cat-dialog-header-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.cat-dialog-content {
+  overflow: auto;
+  padding: 0 $-dialog-padding;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.cat-dialog-actions {
+  display: flex;
+  padding: $-dialog-padding;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @container dialog (max-width: 360px) {
+    cat-button {
+      width: 100%;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@
 .cat-toastify {
   display: flex;
   border-radius: cat-border-radius('l');
-  background: cat-token('color.ui.background.body');
+  background: cat-token('color.ui.background.surface');
   padding: 1.25rem;
   box-shadow: none;
   color: cat-token('color.ui.font.body');
@@ -13,15 +13,15 @@
   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-font-color-head: #{cat-token('color.ui.font.headInverted', $wrap: false)};
+    --cat-font-color-body: #{cat-token('color.ui.font.bodyInverted', $wrap: false)};
+    --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)};
+    --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover', $wrap: false)};
+    --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive', $wrap: false)};
+    --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text', $wrap: false)};
+    --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.textHover', $wrap: false)};
+    --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)};
+    background: cat-token('color.ui.background.surfaceInverted');
   }
 }
 

package/dist/catalyst/scss/core/_typography.scss

@@ -221,7 +221,7 @@ kbd,
 code {
   margin: 0 0.125rem;
   color: cat-token('color.ui.font.muted');
-  background: cat-token('color.ui.background.body');
+  background: cat-token('color.ui.background.surface');
   box-shadow: 0 0 0 2px cat-token('color.ui.border.default');
   border-radius: cat-border-radius('s');
 }

package/dist/catalyst/scss/index.scss

@@ -10,6 +10,7 @@
 
 // -- Core
 @import 'core/base';
+@import 'core/dialog';
 @import 'core/form';
 @import 'core/nav';
 @import 'core/notification';

package/dist/catalyst/scss/utils/_media.mixins.scss

@@ -3,6 +3,7 @@
 // ---- Responsive
 
 @mixin until($size, $media-type: screen) {
+  @debug 'until', $size;
   @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) {
     @content;
   }