@haiilo/catalyst 0.7.1 → 0.7.2

package/dist/catalyst/scss/_mixins.scss

@@ -0,0 +1,9 @@
+@forward 'fonts/fonts.mixins';
+@forward 'utils/disabled.mixins';
+@forward 'utils/elevation.mixins';
+@forward 'utils/media.mixins';
+@forward 'utils/sizing.mixins';
+@forward 'utils/spacing.mixins';
+@forward 'utils/typography.mixins';
+@forward 'utils/visibility.mixins';
+@forward 'utils/ratio.mixins';

package/dist/catalyst/scss/_variables.scss

@@ -0,0 +1,64 @@
+@use 'variables.tokens' as *;
+@forward 'variables.tokens';
+
+// --------
+// -- Composits
+// --------
+
+$cat-head-margin-bottom: cat-token('size.spacing.s');
+$cat-body-margin-bottom: cat-token('size.spacing.m');
+$cat-nav-padding-horizontal: cat-token('size.spacing.m');
+
+// --------
+// -- z-indexes
+// --------
+
+$cat-menu-z-index: 100;
+$cat-tooltip-z-index: 200;
+
+// --------
+// -- Typography
+// --------
+
+/* 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, '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;
+$cat-link-text-decoration: none;
+$cat-link-text-decoration-hover: underline;
+$cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
+/* stylelint-enable value-keyword-case */
+
+// --------
+// -- Scrollable
+// --------
+
+$cat-scrollable-shadow: 0 0 4px 1px rgba(16, 29, 48, 20%);
+$cat-scrollable-shadow-transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+// --------
+// -- Elevations
+// --------
+
+$cat-elevation-transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+$cat-elevation: (
+  0: none,
+  1: (
+    0 1px 4px 0 rgba(16, 29, 48, 20%)
+  ),
+  2: (
+    0 2px 4px -1px rgba(16, 29, 48, 20%),
+    0 4px 5px 0 rgba(16, 29, 48, 26%),
+    0 1px 10px -1px rgba(16, 29, 48, 12%)
+  ),
+  3: (
+    0 2px 4px -1px rgba(16, 29, 48, 20%),
+    0 9px 16px -3px rgba(16, 29, 48, 14%),
+    0 10px 20px -8px rgba(16, 29, 48, 12%)
+  ),
+  4: (
+    0 2px 4px -1px rgba(16, 29, 48, 5%),
+    0 9px 16px -3px rgba(16, 29, 48, 14%),
+    0 32px 20px -20px rgba(16, 29, 48, 20%)
+  )
+);

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

@@ -0,0 +1,84 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:string';
+
+@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *;
+@forward '~@haiilo/catalyst-tokens/dist/scss/variables' show $tokens;
+
+// -----
+// -- Split a string using the given separator.
+// -----
+@function -cat-split($string, $separator: ' ') {
+  $result: ();
+  $index: string.index($string, $separator);
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $result: list.append($result, $item);
+    $string: string.slice($string, $index + string.length($separator));
+    $index: string.index($string, $separator);
+  }
+  $result: list.append($result, $string);
+  @return $result;
+}
+
+// -----
+// -- Join strings using the given separator.
+// -----
+@function -cat-join($strings, $separator: ' ') {
+  $result: '';
+  @each $string in $strings {
+    $result: $result + $separator + $string;
+  }
+  @return string.slice($result, string.length($separator) + 1);
+}
+
+// -----
+// -- Deep map.get using a dot-separated key.
+// -----
+@function -cat-get($map, $key) {
+  $keys: -cat-split('' + $key, '.');
+  @each $key in $keys {
+    @if $map {
+      $map: map.get($map, $key);
+    }
+  }
+  @return $map;
+}
+
+@function cat-token-wrap($value, $alpha: 1) {
+  @if meta.type-of($value) == 'string' {
+    @if $alpha < 1 {
+      @return rgba($value, $alpha);
+    } @else {
+      @return rgb($value);
+    }
+  } @else if meta.type-of($value) == 'list' {
+    @return color.adjust(
+      #00000000,
+      $red: list.nth($value, 1),
+      $green: list.nth($value, 2),
+      $blue: list.nth($value, 3),
+      $alpha: $alpha
+    );
+  } @else {
+    @return $value;
+  }
+}
+
+// -----
+// -- Accessor for $tokens using a dot-separated key.
+// -- Automatically wraps RGB partials into an rgb() expression and
+// -- optionally adds an RGB alpha value.
+// -----
+@function cat-token($key, $alpha: 1, $wrap: true) {
+  $value: -cat-get($tokens, $key);
+  @if not $value {
+    @error 'Unknown token "#{-cat-join($key, '.')}".';
+  }
+  @if $wrap and string.index($key, 'color.') == 1 {
+    @return cat-token-wrap($value, $alpha);
+  }
+  @return $value;
+}

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

@@ -0,0 +1,12 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// ---- Typography
+
+body {
+  @include cat-body('m');
+  font-family: cat-body-font-family();
+  font-weight: cat-token('font.weight.body');
+  color: cat-token('color.ui.font.body');
+  background-color: cat-token('color.ui.background.canvas');
+}

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

@@ -0,0 +1,23 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+nav {
+  hr,
+  .cat-hr {
+    margin-top: $cat-nav-padding-horizontal * 0.5;
+    margin-bottom: $cat-nav-padding-horizontal * 0.5;
+  }
+
+  .cat-head,
+  .cat-text {
+    padding: $cat-nav-padding-horizontal * 0.5 $cat-nav-padding-horizontal;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .cat-head {
+    @include cat-head(5);
+  }
+}

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

@@ -0,0 +1,237 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.cat-h1,
+.cat-h2,
+.cat-h3,
+.cat-h4,
+.cat-h5,
+.cat-h6 {
+  margin-top: 0;
+  margin-bottom: $cat-head-margin-bottom;
+  font-weight: cat-token('font.weight.head');
+}
+
+// -- head styles
+@each $key, $value in cat-token('size.font.head') {
+  h#{$key},
+  .cat-h#{$key} {
+    @include cat-head($key);
+  }
+}
+
+// -- body styles
+@each $key, $value in cat-token('size.font.body') {
+  .cat-text-#{$key} {
+    @include cat-body($key);
+  }
+}
+
+// -- mono styles
+@each $key, $value in cat-token('size.font.mono') {
+  .cat-mono-#{$key} {
+    @include cat-mono($key);
+  }
+}
+
+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');
+  overflow: hidden;
+}
+
+// ----- links
+
+a {
+  color: cat-token('color.theme.primary.text');
+  text-decoration: $cat-link-text-decoration;
+  transition: color cat-token('time.transition.s') linear;
+
+  &:hover {
+    color: cat-token('color.theme.primary.textHover');
+    text-decoration: $cat-link-text-decoration-hover;
+  }
+
+  &:active {
+    color: cat-token('color.theme.primary.textActive');
+  }
+
+  &:focus-visible {
+    outline: 2px solid cat-token('color.ui.border.focus');
+    // outline-offset: -2px;
+  }
+}
+
+a[tabindex='-1']:focus {
+  outline: none;
+}
+
+// ----- emphasis
+
+b,
+strong,
+.cat-strong {
+  font-weight: 600;
+}
+
+mark,
+.cat-mark {
+  padding: 0.125rem 0.25rem;
+  background-color: $cat-mark-color;
+}
+
+small,
+.cat-small {
+  font-size: 0.875em;
+}
+
+.cat-underline {
+  text-decoration: underline;
+}
+
+.cat-line-through {
+  text-decoration: line-through;
+}
+
+.cat-muted {
+  color: cat-token('color.ui.font.muted');
+}
+
+// ----- lists
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  ol,
+  ul,
+  dl {
+    margin-bottom: 0;
+  }
+}
+
+nav {
+  ol,
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+dt {
+  font-weight: 600;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+// ----- lead
+
+.cat-lead {
+  @include cat-body('xl', 300);
+}
+
+// ----- blockquotes & figures
+
+blockquote {
+  margin: 0 0 $cat-body-margin-bottom;
+  font-style: italic;
+  @include cat-body('l');
+  color: cat-token('color.ui.font.quote');
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+figure {
+  margin: 0 0 $cat-body-margin-bottom;
+
+  figcaption {
+    margin-top: -$cat-body-margin-bottom * 0.5;
+    margin-bottom: 0;
+    @include cat-body('s');
+    color: cat-token('color.ui.font.muted');
+
+    &::before {
+      content: '\2014\00A0'; // em dash, nbsp
+    }
+  }
+}
+
+// ----- code
+
+code,
+samp,
+kbd,
+pre {
+  @include cat-mono('m');
+  font-weight: cat-token('font.weight.mono');
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $cat-body-margin-bottom;
+  overflow: auto;
+
+  code {
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+    word-wrap: normal;
+    word-break: normal;
+  }
+}
+
+kbd,
+code {
+  margin: 0 0.125rem;
+  color: cat-token('color.ui.font.muted');
+  background: cat-token('color.ui.background.body');
+  box-shadow: 0 0 0 2px cat-token('color.ui.border.default');
+  border-radius: cat-border-radius('s');
+}
+
+kbd {
+  font-size: cat-mono-font-size('s');
+  display: inline-block;
+  min-width: 1.5rem;
+  line-height: cat-body-line-height('m');
+  padding: 0 0.375rem;
+  text-align: center;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+code {
+  @include cat-break-word;
+  padding: 0.0625rem 0.25rem;
+}

package/dist/catalyst/scss/fonts/_fonts.mixins.azeret.scss

@@ -0,0 +1,14 @@
+@use 'sass:list';
+@use '../variables' as *;
+
+@mixin cat-font-azeret($path, $weights...) {
+  @if list.index($weights, 400) {
+    @font-face {
+      font-family: 'Azeret Mono';
+      src: url('#{$path}#{cat-token("asset.font.azeretMono.woff2Regular")}') format('woff2');
+      font-style: normal;
+      font-weight: 400;
+      @content;
+    }
+  }
+}

package/dist/catalyst/scss/fonts/_fonts.mixins.dm.scss

@@ -0,0 +1,53 @@
+@use 'sass:list';
+@use '../variables' as *;
+
+@mixin cat-font-dm-sans($path, $weights...) {
+  @if list.index($weights, 400) {
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Regular")}') format('woff2');
+      font-style: normal;
+      font-weight: 400;
+      @content;
+    }
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Italic")}') format('woff2');
+      font-style: italic;
+      font-weight: 400;
+      @content;
+    }
+  }
+  @if list.index($weights, 500) {
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Medium")}') format('woff2');
+      font-style: normal;
+      font-weight: 500;
+      @content;
+    }
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2MediumItalic")}') format('woff2');
+      font-style: italic;
+      font-weight: 500;
+      @content;
+    }
+  }
+  @if list.index($weights, 700) {
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Bold")}') format('woff2');
+      font-style: normal;
+      font-weight: 700;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'DM Sans';
+      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2BoldItalic")}') format('woff2');
+      font-style: italic;
+      font-weight: 700;
+      font-display: swap;
+    }
+  }
+}

package/dist/catalyst/scss/fonts/_fonts.mixins.lato.scss

@@ -0,0 +1,185 @@
+@use 'sass:list';
+@use '../variables' as *;
+
+@mixin cat-font-lato($path, $weights...) {
+  @if list.index($weights, 100) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffHairline")}') format('woff');
+      font-style: normal;
+      font-weight: 100;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 100;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 200) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffThin")}') format('woff');
+      font-style: normal;
+      font-weight: 200;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffThinItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 200;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 300) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Light")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffLight")}') format('woff');
+      font-style: normal;
+      font-weight: 300;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffLightItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 300;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 400) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffRegular")}') format('woff');
+      font-style: normal;
+      font-weight: 400;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 400;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 500) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffMedium")}') format('woff');
+      font-style: normal;
+      font-weight: 500;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 500;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 600) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffSemibold")}') format('woff');
+      font-style: normal;
+      font-weight: 600;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 600;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 700) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffBold")}') format('woff');
+      font-style: normal;
+      font-weight: 700;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 700;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 800) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffHeavy")}') format('woff');
+      font-style: normal;
+      font-weight: 800;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 800;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+  @if list.index($weights, 900) {
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2Black")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffBlack")}') format('woff');
+      font-style: normal;
+      font-weight: 900;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+    @font-face {
+      font-family: Lato;
+      src: url('#{$path}#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'),
+        url('#{$path}#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff');
+      font-style: italic;
+      font-weight: 900;
+      text-rendering: optimizeLegibility;
+      @content;
+    }
+  }
+}

package/dist/catalyst/scss/fonts/_fonts.mixins.scss

@@ -0,0 +1,3 @@
+@forward 'fonts.mixins.azeret';
+@forward 'fonts.mixins.dm';
+@forward 'fonts.mixins.lato';

package/dist/catalyst/scss/fonts/_fonts.scss

@@ -0,0 +1,13 @@
+@use 'fonts.mixins' as *;
+
+@include cat-font-dm-sans('./assets/fonts/', 500) {
+  font-display: swap;
+}
+
+@include cat-font-lato('./assets/fonts/', 300, 400, 500, 700) {
+  font-display: fallback;
+}
+
+@include cat-font-azeret('./assets/fonts/', 400) {
+  font-display: fallback;
+}