@haiilo/catalyst 0.7.0 → 0.7.3

package/dist/collection/scss/core/_toast.scss

@@ -0,0 +1,77 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+$-background-color: cat-token('color.base.neutral.0');
+$-text-color: cat-token('color.base.neutral.900');
+$-title-border: cat-token('color.base.neutral.300');
+$-shadow: cat-token('color.ui.border.dark');
+$-error-color: cat-token('color.theme.danger.text');
+$-info-color: cat-token('color.theme.secondary.text');
+$-success-color: cat-token('color.theme.success.text');
+
+.cat-toastify {
+  background: $-background-color;
+  color: $-text-color;
+  padding: 0;
+  @include cat-elevation(1);
+
+  .toast-close {
+    float: right;
+    font-size: 20px;
+    margin-top: 0.5rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  .cat-toastify-wrapper {
+    display: block;
+    position: relative;
+
+    .cat-toastify-icon-wrapper {
+      position: absolute;
+      top: 6px;
+      left: 5px;
+
+      &.info {
+        color: $-info-color;
+      }
+
+      &.error {
+        color: $-error-color;
+      }
+
+      &.success {
+        color: $-success-color;
+      }
+    }
+
+    .cat-toastify-title-wrapper {
+      width: 100%;
+      padding: 0.5rem 0.5rem 0.5rem 2rem;
+
+      &.has-message {
+        border-bottom: 1px solid $-title-border;
+      }
+
+      .cat-toastify-title {
+        width: 100%;
+        padding-right: 25px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 15px;
+        line-height: 20px;
+        font-weight: 600;
+        color: $-text-color;
+      }
+    }
+
+    .cat-toastify-message {
+      width: 100%;
+      padding: 0.5rem;
+      color: $-text-color;
+    }
+  }
+}

package/dist/collection/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/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,17 @@
+@forward 'fonts.mixins.azeret';
+@forward 'fonts.mixins.dm';
+@forward 'fonts.mixins.lato';
+
+@mixin cat-fonts($path) {
+  @include cat-font-dm-sans($path, 500) {
+    font-display: swap;
+  }
+
+  @include cat-font-lato($path, 300, 400, 500, 700) {
+    font-display: fallback;
+  }
+
+  @include cat-font-azeret($path, 400) {
+    font-display: fallback;
+  }
+}

package/dist/collection/scss/index.scss

@@ -0,0 +1,34 @@
+// -- Reset
+
+@import '~sanitize.css/sanitize.css';
+@import '~sanitize.css/assets.css';
+@import '~sanitize.css/reduce-motion.css';
+
+// -- Vendor
+
+@import '~toastify-js/src/toastify.css';
+
+// -- Fonts
+
+@import 'fonts/fonts.mixins';
+$cat-font-path: 'assets/fonts' !default;
+@include cat-fonts($cat-font-path);
+
+// -- Core
+
+@import 'core/base';
+@import 'core/nav';
+@import 'core/toast';
+@import 'core/typography';
+
+// -- Utils
+
+@import 'utils/color';
+@import 'utils/display';
+@import 'utils/elevation';
+@import 'utils/layout';
+@import 'utils/sizing';
+@import 'utils/spacing';
+@import 'utils/typography';
+@import 'utils/visibility';
+@import 'utils/ratio';

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;
+      }
+    }
+  }
+}