@haiilo/catalyst 6.5.0 → 7.0.0

package/dist/catalyst/scss/_snippets/_form-label.scss

@@ -31,23 +31,19 @@ $cat-input-height: 2.5rem;
   flex-grow: 1;
   justify-content: space-between;
   gap: 0.25rem;
+  color: cat-token('color.ui.font.muted');
 }
 
-.label-optional {
-  display: flex;
+.label-optional,
+.label-character-count {
+  display: inline-flex;
   align-items: center;
   max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
+  @include cat-body('xs', null);
 }
 
 .label-character-count {
-  display: flex;
-  align-items: center;
   margin-left: auto;
-  max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
 }
 
 .input-horizontal,

package/dist/catalyst/scss/_variables.scss

@@ -1,12 +1,25 @@
 @use 'variables.tokens' as *;
 @forward 'variables.tokens';
 
+// --------
+// -- Variables
+//    These variables are not part of the design tokens, as they do not have a
+//    corresponding value assigned to them. They are still used throughout the
+//    design system to allow for easy customization while maintaining correct
+//    style inheritance.
+// --------
+
+$cat-font-family-head: var(--cat-font-family-head);
+$cat-font-color-head: rgb(var(--cat-font-color-head));
+$cat-font-color-mono: rgb(var(--cat-font-color-mono));
+
 // --------
 // -- Spacings
 // --------
 
-$cat-head-margin-bottom: 0.5rem;
-$cat-body-margin-bottom: 1rem;
+$cat-head-margin-bottom: 1rem;
+$cat-body-margin-bottom: 2rem;
+$cat-form-margin-bottom: 1.5rem;
 $cat-nav-padding-horizontal: 0.75rem;
 
 // --------
@@ -14,6 +27,20 @@ $cat-nav-padding-horizontal: 0.75rem;
 // --------
 
 $cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
+/* stylelint-disable value-keyword-case */
+$font-fallback-base:
+  system-ui,
+  -apple-system,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  'Noto Sans',
+  'Liberation Sans',
+  Arial,
+  sans-serif !default;
+$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+/* stylelint-enable value-keyword-case */
 
 // --------
 // -- Elevations

package/dist/catalyst/scss/core/_base.scss

@@ -1,8 +1,6 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
-// ---- Typography
-
 html,
 body {
   background-color: cat-token('color.ui.background.canvas');
@@ -10,6 +8,6 @@ body {
 
 body {
   @include cat-body('m');
-  font-family: cat-body-font-family();
-  color: cat-token('color.ui.font.body');
+  font-family: cat-token('font.family.body'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  color: cat-token('color.ui.font.base');
 }

package/dist/catalyst/scss/core/_form.scss

@@ -0,0 +1,14 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.cat-form {
+  :is(cat-checkbox, cat-datepicker, cat-inline, cat-input, cat-radio-group, cat-select, cat-textarea, cat-toggle):not(
+      :last-child
+    ) {
+    margin-bottom: $cat-form-margin-bottom;
+  }
+
+  cat-radio:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}

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

@@ -7,14 +7,13 @@
   background: cat-token('color.ui.background.surface');
   padding: 1.25rem;
   box-shadow: none;
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   width: 400px;
   max-width: 400px;
   cursor: unset;
 
   &.cat-toastify-dark {
-    --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-font-color-base: #{cat-token('color.ui.font.baseInverted', $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)};

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

@@ -1,15 +1,16 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
-:where(h1, h2, h3, h4, h5, h6),
+// -- reset margins
+
+:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, blockquote, figure, pre, hr),
 .cat-h1,
 .cat-h2,
 .cat-h3,
 .cat-h4,
 .cat-h5,
 .cat-h6 {
-  margin-top: 0;
-  margin-bottom: $cat-head-margin-bottom;
+  margin: 0;
 }
 
 // -- head styles
@@ -34,15 +35,9 @@
   }
 }
 
-:where(p) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 hr,
 .cat-hr {
   display: block;
-  margin: $cat-body-margin-bottom 0;
   border: 0;
   height: 1px;
   background-color: cat-token('color.ui.border.default');
@@ -120,11 +115,6 @@ dl {
   }
 }
 
-:where(ol, ul, dl) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 nav ol,
 nav ul,
 ol.cat-plain,
@@ -151,10 +141,6 @@ dd {
 
 // ----- blockquotes & figures
 
-:where(blockquote, figure) {
-  margin: 0 0 $cat-body-margin-bottom;
-}
-
 blockquote {
   padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
   border-left: 2px solid cat-token('color.ui.border.quote');
@@ -181,7 +167,7 @@ blockquote {
 }
 
 figcaption {
-  @include cat-body('s');
+  @include cat-body('s', null);
 }
 
 // ----- code
@@ -209,11 +195,6 @@ pre {
   }
 }
 
-:where(pre) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 kbd,
 code {
   margin: 0 0.125rem;
@@ -241,81 +222,29 @@ code {
 
 // ----- editorial typography
 
-cat-article,
 .cat-article {
-  font-size: 1rem;
-
-  $cat-head-margin-bottom: 1.5rem;
-  $cat-body-margin-bottom: 2.5rem;
-
-  :where(h1, h2, h3, h4, h5, h6),
-  .cat-h1,
-  .cat-h2,
-  .cat-h3,
-  .cat-h4,
-  .cat-h5,
-  .cat-h6 {
-    margin-top: 0;
+  :where(h1, h2, h3),
+  :is(.cat-h1, .cat-h2, .cat-h3) {
+    color: $cat-font-color-head;
     margin-bottom: $cat-head-margin-bottom;
-  }
-
-  .type-space-small {
-    margin-top: 0;
-    margin-bottom: calc($cat-body-margin-bottom * 0.2);
-  }
 
-  .type-space-medium {
-    margin-top: 0;
-    margin-bottom: calc($cat-body-margin-bottom * 0.4);
+    &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) {
+      margin-bottom: $cat-head-margin-bottom * 0.5;
+    }
   }
 
-  // :where(h1, h2, h3, h4, h5, h6, .cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(
-  //     + h1,
-  //     + h2,
-  //     + h3,
-  //     + h4,
-  //     + h5,
-  //     + h6,
-  //     + .cat-h1,
-  //     + .cat-h2,
-  //     + .cat-h3,
-  //     + .cat-h4,
-  //     + .cat-h5,
-  //     + .cat-h6
-  //   ) {
-  //     margin-top: 0;
-  //     margin-bottom:calc($cat-body-margin-bottom * 0.2);
-  // }
-
-  // :where(h3, h4, h5, h6, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(+ ul, + ol, + p) {
-  //   margin-bottom:calc($cat-body-margin-bottom * 0.4);
-  // }
-
-  h5,
-  .cat-h5 {
-    font-size: 1rem;
+  :where(h4, h5, h6),
+  :is(.cat-h4, .cat-h5, .cat-h6) {
+    color: $cat-font-color-head;
+    margin-bottom: $cat-head-margin-bottom * 0.5;
   }
 
-  :where(p),
-  ol,
-  ul,
-  blockquote,
-  figure {
-    margin-top: 0;
+  :where(p, ol, ul, dl, blockquote, figure, pre, cat-alert, cat-card) {
     margin-bottom: $cat-body-margin-bottom;
   }
 
-  :where(p):has(+ p) {
-    margin-bottom: calc($cat-body-margin-bottom * 0.4);
-  }
-
   hr,
   .cat-hr {
-    margin: $cat-body-margin-bottom 0;
-  }
-
-  ol li,
-  ul li {
-    margin-bottom: calc($cat-body-margin-bottom * 0.2);
+    margin: $cat-body-margin-bottom;
   }
 }

package/dist/catalyst/scss/index.scss

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

package/dist/catalyst/scss/index.shadow.scss

@@ -3,6 +3,7 @@
 @import 'sanitize.css/reduce-motion.css';
 
 // -- Core
+@import 'core/form';
 @import 'core/nav';
 @import 'core/typography';
 

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

@@ -1,26 +1,7 @@
 @use '../variables' as *;
 
-/* stylelint-disable value-keyword-case */
-$font-fallback-sans-serif:
-  system-ui,
-  -apple-system,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  'Noto Sans',
-  'Liberation Sans',
-  Arial,
-  sans-serif !default;
-$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-/* stylelint-enable value-keyword-case */
-
 // ---- Head
 
-@function cat-head-font-family() {
-  @return cat-token('font.family.head'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji;
-}
-
 @function cat-head-font-size($size) {
   @return cat-token('size.font.head.#{$size}');
 }
@@ -30,20 +11,16 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M
 }
 
 @mixin cat-head($size, $weight: cat-token('font.weight.head')) {
-  font-family: cat-head-font-family();
+  // skip color, as it is only set for editorial styles
+  font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
   font-size: cat-head-font-size($size);
   line-height: cat-head-line-height($size);
-  color: cat-token('color.ui.font.head');
   font-weight: $weight;
   font-feature-settings: 'pnum';
 }
 
 // ---- Body
 
-@function cat-body-font-family() {
-  @return cat-token('font.family.body'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji;
-}
-
 @function cat-body-font-size($size) {
   @return cat-token('size.font.body.#{$size}');
 }
@@ -78,7 +55,7 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M
   font-family: cat-mono-font-family();
   font-size: cat-mono-font-size($size);
   line-height: cat-mono-line-height($size);
-  color: cat-token('color.ui.font.mono');
+  color: $cat-font-color-mono;
   font-weight: $weight;
 }
 

package/dist/catalyst/scss/vendor/_flatpickr.scss

@@ -105,7 +105,7 @@
   color: cat-token('color.ui.font.muted');
 
   &:hover {
-    color: cat-token('color.ui.font.body');
+    color: cat-token('color.ui.font.base');
   }
 }
 
@@ -114,7 +114,7 @@
 
   .flatpickr-weekday {
     color: cat-token('color.ui.font.muted');
-    @include cat-body(xs, $weight: 700);
+    @include cat-body(xs, 700);
   }
 }
 
@@ -134,7 +134,7 @@
 
   span.flatpickr-day,
   span.flatpickr-day:hover {
-    @include cat-body(xs, $weight: 700);
+    @include cat-body(xs, 700);
     color: cat-token('color.ui.font.muted');
     text-align: center;
     line-height: 2.25rem;
@@ -152,7 +152,7 @@
 }
 
 .flatpickr-day {
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   height: 2.25rem;
   line-height: 2.25rem;
   border: 0;
@@ -263,7 +263,7 @@
     }
 
     &::after {
-      @include cat-body(xs, $weight: 700);
+      @include cat-body(xs, 700);
       position: static;
       border: 0 !important;
       font-size: 10px;
@@ -273,7 +273,7 @@
     }
 
     &:hover {
-      color: cat-token('color.ui.font.body');
+      color: cat-token('color.ui.font.base');
       background: transparent;
     }
   }
@@ -305,7 +305,7 @@
 .flatpickr-time .flatpickr-am-pm {
   margin: 0 0.25rem;
   @include cat-head(4, 400);
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   line-height: 2.25rem;
 }
 
@@ -325,7 +325,7 @@
 
   input {
     background: transparent !important;
-    color: cat-token('color.ui.font.body');
+    color: cat-token('color.ui.font.base');
     font-size: cat-token('size.font.body.m');
     line-height: 2.25rem;
     font-family: inherit;