@haiilo/catalyst 0.6.0 → 0.7.2

package/dist/collection/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/collection/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/collection/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/collection/scss/fonts/_fonts.mixins.scss

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

package/dist/collection/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;
+}

package/dist/collection/scss/index.scss

@@ -0,0 +1,32 @@
+// -- Reset
+
+@use '~sanitize.css/sanitize.css';
+@use '~sanitize.css/assets.css';
+@use '~sanitize.css/reduce-motion.css';
+
+// -- Vendor
+
+@use '~toastify-js/src/toastify.css';
+
+// -- Core
+
+@use 'core/base' as *;
+@use 'core/nav' as *;
+@use 'core/typography' as *;
+
+// -- Fonts
+
+@use 'fonts/fonts' as *;
+
+// -- Utils
+
+@use 'utils/color';
+@use 'utils/display';
+@use 'utils/elevation';
+@use 'utils/layout';
+@use 'utils/sizing';
+@use 'utils/spacing';
+@use 'utils/typography';
+@use 'utils/visibility';
+@use 'utils/ratio';
+@use 'utils/toast';

package/dist/collection/scss/utils/_color.scss

@@ -0,0 +1,52 @@
+@use '../variables' as *;
+
+@each $name, $theme in cat-token('color.theme') {
+  .cat-bg-#{$name} {
+    background-color: cat-token('color.theme.#{$name}.bg') !important;
+    color: cat-token('color.theme.#{$name}.fill') !important;
+  }
+
+  .cat-bg-#{$name}-hover {
+    transition: background-color cat-token('time.transition.s'), color cat-token('time.transition.s');
+
+    &:hover {
+      background-color: cat-token('color.theme.#{$name}.bgHover') !important;
+      color: cat-token('color.theme.#{$name}.fillHover') !important;
+    }
+  }
+
+  .cat-text-#{$name},
+  .cat-link-#{$name} {
+    color: cat-token('color.theme.#{$name}.text') !important;
+  }
+
+  .cat-link-#{$name},
+  .cat-text-#{$name}-hover {
+    transition: color cat-token('time.transition.s');
+
+    &:hover {
+      color: cat-token('color.theme.#{$name}.textHover') !important;
+    }
+
+    &:active {
+      color: cat-token('color.theme.#{$name}.textActive') !important;
+    }
+  }
+}
+
+.cat-active {
+  color: cat-token('color.theme.primary.text') !important;
+}
+
+.cat-muted {
+  color: cat-token('color.ui.font.muted') !important;
+}
+
+.cat-text-reset {
+  color: inherit !important;
+}
+
+.cat-link-reset {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}

package/dist/collection/scss/utils/_disabled.mixins.scss

@@ -0,0 +1,7 @@
+@use '../variables' as *;
+
+@mixin cat-disabled() {
+  cursor: not-allowed;
+  opacity: cat-token('opacity.disabled');
+  filter: grayscale(100%);
+}

package/dist/collection/scss/utils/_display.scss

@@ -0,0 +1,20 @@
+@use '../variables' as *;
+@use 'media.mixins' as *;
+
+$-display-props: none, inline, inline-block, block, grid, flex, inline-flex;
+
+@each $prop in $-display-props {
+  .cat-#{$prop} {
+    display: $prop !important;
+  }
+}
+
+@each $key, $value in cat-token('size.screen') {
+  @include from($key) {
+    @each $prop in $-display-props {
+      .cat-#{$prop}\:#{$key} {
+        display: $prop !important;
+      }
+    }
+  }
+}

package/dist/collection/scss/utils/_elevation.mixins.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../variables' as *;
+
+@mixin cat-elevation($level) {
+  box-shadow: map.get($cat-elevation, $level);
+}
+
+@mixin cat-elevation-transition {
+  transition: $cat-elevation-transition;
+}

package/dist/collection/scss/utils/_elevation.scss

@@ -0,0 +1,19 @@
+@use '../variables' as *;
+@use 'elevation.mixins' as *;
+
+.cat-elevation-transition {
+  @include cat-elevation-transition;
+}
+
+@each $level, $_def in $cat-elevation {
+  .cat-elevation-#{$level} {
+    @include cat-elevation($level);
+  }
+  .cat-elevation-hover-#{$level} {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      @include cat-elevation($level);
+    }
+  }
+}

package/dist/collection/scss/utils/_layout.scss

@@ -0,0 +1,78 @@
+@use '../variables' as *;
+
+@mixin -layout-property($name, $property, $value) {
+  .cat-#{$name} {
+    #{$property}: #{$value};
+    @content;
+  }
+}
+
+// -- Direction
+
+@include -layout-property('flex-row', 'flex-direction', 'row');
+@include -layout-property('flex-col', 'flex-direction', 'column');
+
+// -- Flex
+
+@include -layout-property('flex-1', 'flex', '1 1 0%');
+@include -layout-property('flex-auto', 'flex', '1 1 auto');
+@include -layout-property('flex-init', 'flex', '0 1 auto');
+@include -layout-property('flex-none', 'flex', 'none');
+
+// -- Wrap
+
+@include -layout-property('flex-wrap', 'flex-wrap', 'wrap');
+@include -layout-property('flex-nowrap', 'flex-wrap', 'nowrap');
+
+// -- Gap
+
+@each $size, $value in cat-token('size.spacing') {
+  @include -layout-property('gap-#{$size}', 'gap', $value);
+  @include -layout-property('gap-x-#{$size}', 'column-gap', $value);
+  @include -layout-property('gap-y-#{$size}', 'row-gap', $value);
+}
+
+// -- Alignment
+
+@include -layout-property('justify-start', 'justify-content', 'flex-start');
+@include -layout-property('justify-end', 'justify-content', 'flex-end');
+@include -layout-property('justify-center', 'justify-content', 'center');
+@include -layout-property('justify-between', 'justify-content', 'space-between');
+// @include -layout-property('justify-around', 'justify-content', 'space-around');
+// @include -layout-property('justify-evenly', 'justify-content', 'space-evenly');
+
+@include -layout-property('justify-items-start', 'justify-items', 'flex-start');
+@include -layout-property('justify-items-end', 'justify-items', 'flex-end');
+@include -layout-property('justify-items-center', 'justify-items', 'flex-center');
+@include -layout-property('justify-items-stretch', 'justify-items', 'flex-stretch');
+
+@include -layout-property('content-start', 'align-content', 'flex-start');
+@include -layout-property('content-end', 'align-content', 'flex-end');
+@include -layout-property('content-center', 'align-content', 'center');
+@include -layout-property('content-between', 'align-content', 'space-between');
+// @include -layout-property('content-around', 'align-content', 'space-around');
+// @include -layout-property('content-evenly', 'align-content', 'space-evenly');
+
+@include -layout-property('items-start', 'align-items', 'flex-start');
+@include -layout-property('items-end', 'align-items', 'flex-end');
+@include -layout-property('items-center', 'align-items', 'flex-center');
+@include -layout-property('items-stretch', 'align-items', 'flex-stretch');
+
+// -- Grid
+
+@for $i from 1 through 12 {
+  @include -layout-property('grid-#{$i}', 'grid-template-columns', 'repeat(#{$i}, minmax(0, 1fr))');
+  @include -layout-property('grid-col-#{$i}', 'grid-column', 'span #{$i} / span #{$i}');
+}
+
+@for $i from 1 through 6 {
+  @include -layout-property('grid-row-#{$i}', 'grid-row', 'span #{$i} / span #{$i}');
+}
+
+@include -layout-property(
+  'grid-auto',
+  'grid-template-columns',
+  'repeat(auto-fill,minmax(min(var(--grid-min),100%),1fr))'
+) {
+  --grid-min: 100%;
+}

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

@@ -0,0 +1,37 @@
+@use '../variables' as *;
+
+// ---- Responsive
+
+@mixin until($size, $media-type: screen) {
+  @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) {
+    @content;
+  }
+}
+
+@mixin from($size, $media-type: screen) {
+  @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) {
+    @content;
+  }
+}
+
+// ---- Print
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+// ---- Interaction
+
+@mixin pointer($pointer: fine) {
+  @media (pointer: #{$pointer}) {
+    @content;
+  }
+}
+
+@mixin hover($hover: hover) {
+  @media (hover: #{$hover}) {
+    @content;
+  }
+}

package/dist/collection/scss/utils/_ratio.mixins.scss

@@ -0,0 +1,12 @@
+@mixin cat-ratio($aspect-ratio) {
+  position: relative;
+  aspect-ratio: $aspect-ratio;
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/collection/scss/utils/_ratio.scss

@@ -0,0 +1,20 @@
+@use 'ratio.mixins' as *;
+
+$aspect-ratios: (
+  '1x1': 1,
+  '3x1': 3,
+  '6x1': 6,
+  '4x3': calc(4 / 3),
+  '16x9': calc(16 / 9),
+  '21x9': calc(21 / 9)
+);
+
+.cat-ratio {
+  @include cat-ratio(var(--cat-aspect-ratio));
+}
+
+@each $key, $ratio in $aspect-ratios {
+  .cat-ratio-#{$key} {
+    --cat-aspect-ratio: #{$ratio};
+  }
+}

package/dist/collection/scss/utils/_sizing.mixins.scss

@@ -0,0 +1,15 @@
+@use '../variables' as *;
+
+@function cat-size($size) {
+  @return cat-token('size.base.#{$size}');
+}
+
+@function cat-border-radius($size) {
+  @if $size == '0' or $size == 0 {
+    @return none;
+  } @else if $size == 'full' {
+    @return 100rem;
+  } @else {
+    @return cat-token('size.border.radius.#{$size}');
+  }
+}

package/dist/collection/scss/utils/_sizing.scss

@@ -0,0 +1,16 @@
+@use '../variables' as *;
+@use 'sizing.mixins' as *;
+
+@each $size, $_def in cat-token('size.border.radius') {
+  .cat-radius-#{$size} {
+    border-radius: cat-border-radius($size);
+  }
+}
+
+.cat-radius-0 {
+  border-radius: cat-border-radius('0');
+}
+
+.cat-radius-full {
+  border-radius: cat-border-radius('full');
+}

package/dist/collection/scss/utils/_spacing.mixins.scss

@@ -0,0 +1,5 @@
+@use '../variables' as *;
+
+@function cat-spacing($size) {
+  @return cat-token('size.spacing.#{$size}');
+}

package/dist/collection/scss/utils/_spacing.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../variables' as *;
+@use 'spacing.mixins' as *;
+
+$-spacings: map.merge(
+  (
+    'auto': auto,
+    '0': 0
+  ),
+  cat-token('size.spacing')
+);
+
+@each $name, $spacing in $-spacings {
+  .cat-m-#{$name} {
+    margin: $spacing !important;
+  }
+  .cat-mv-#{$name} {
+    margin-top: $spacing !important;
+    margin-bottom: $spacing !important;
+  }
+  .cat-mh-#{$name} {
+    margin-left: $spacing !important;
+    margin-right: $spacing !important;
+  }
+  @each $dir in (top, bottom, left, right) {
+    .cat-m#{str-slice($dir, 0, 1)}-#{$name} {
+      margin-#{$dir}: $spacing !important;
+    }
+  }
+
+  @if $spacing != auto {
+    .cat-p-#{$name} {
+      padding: $spacing !important;
+    }
+    .cat-pv-#{$name} {
+      padding-top: $spacing !important;
+      padding-bottom: $spacing !important;
+    }
+    .cat-ph-#{$name} {
+      padding-left: $spacing !important;
+      padding-right: $spacing !important;
+    }
+    @each $dir in (top, bottom, left, right) {
+      .cat-p#{str-slice($dir, 0, 1)}-#{$name} {
+        padding-#{$dir}: $spacing !important;
+      }
+    }
+  }
+}