@haiilo/catalyst 0.7.1 → 0.7.2

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

package/dist/collection/scss/utils/_toast.scss

@@ -0,0 +1,77 @@
+@import 'variables';
+@import 'mixins';
+
+$-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/utils/_typography.mixins.scss

@@ -0,0 +1,102 @@
+@use '../variables' as *;
+
+// ---- Head
+
+@function cat-head-font-family() {
+  @return cat-token('font.family.head'), $font-fallback-sans-serif;
+}
+
+@function cat-head-font-size($size) {
+  @return cat-token('size.font.head.#{$size}');
+}
+
+@function cat-head-line-height($size) {
+  @return cat-token('size.line.head.#{$size}');
+}
+
+@mixin cat-head($size, $weight: null) {
+  font-family: cat-head-font-family();
+  font-size: cat-head-font-size($size);
+  line-height: cat-head-line-height($size);
+  color: cat-token('color.ui.font.head');
+  font-weight: $weight;
+}
+
+// ---- Body
+
+@function cat-body-font-family() {
+  @return cat-token('font.family.body'), $font-fallback-sans-serif;
+}
+
+@function cat-body-font-size($size) {
+  @return cat-token('size.font.body.#{$size}');
+}
+
+@function cat-body-line-height($size) {
+  @return cat-token('size.line.body.#{$size}');
+}
+
+@mixin cat-body($size, $weight: null) {
+  // skip font family, as it is set on the body
+  // skip color, as it is set on the body
+  font-size: cat-body-font-size($size);
+  line-height: cat-body-line-height($size);
+  font-weight: $weight;
+}
+
+// ---- Mono
+
+@function cat-mono-font-family() {
+  @return cat-token('font.family.mono'), $font-fallback-monospace;
+}
+
+@function cat-mono-font-size($size) {
+  @return cat-token('size.font.mono.#{$size}');
+}
+
+@function cat-mono-line-height($size) {
+  @return cat-token('size.line.mono.#{$size}');
+}
+
+@mixin cat-mono($size, $weight: null) {
+  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');
+  font-weight: $weight;
+}
+
+// ---- Utils
+
+@mixin cat-break-word {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+@mixin cat-ellipsis($lines: 1) {
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+}
+
+@mixin cat-select($select: auto) {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: $select;
+  -ms-user-select: $select;
+  user-select: $select;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+@mixin cat-font-smooth() {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: greyscale;
+}

package/dist/collection/scss/utils/_typography.scss

@@ -0,0 +1,34 @@
+@use 'typography.mixins' as *;
+
+.cat-text-left {
+  text-align: left !important;
+}
+
+.cat-text-center {
+  text-align: center !important;
+}
+
+.cat-text-right {
+  text-align: right !important;
+}
+
+.cat-ellipsis {
+  @include cat-ellipsis;
+}
+@for $i from 1 through 5 {
+  .cat-ellipsis-#{$i} {
+    @include cat-ellipsis($i);
+  }
+}
+
+.cat-select {
+  @include cat-select;
+}
+
+.cat-no-select {
+  @include cat-select(none);
+}
+
+.cat-break-word {
+  @include cat-break-word;
+}

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

@@ -0,0 +1,29 @@
+@mixin cat-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+@mixin cat-visually-hidden-focusable {
+  &:not(:focus):not(:focus-within) {
+    @include cat-visually-hidden;
+  }
+}
+
+@mixin cat-visually-hidden-hoverable($container: null) {
+  @if $container {
+    #{$container}:not(:hover):not(:focus):not(:focus-within) & {
+      @include cat-visually-hidden;
+    }
+  } @else {
+    *:not(:hover):not(:focus):not(:focus-within) > & {
+      @include cat-visually-hidden;
+    }
+  }
+}

package/dist/collection/scss/utils/_visibility.scss

@@ -0,0 +1,13 @@
+@use 'visibility.mixins' as *;
+
+.cat-visually-hidden {
+  @include cat-visually-hidden;
+}
+
+.cat-visually-hidden-focusable {
+  @include cat-visually-hidden-focusable;
+}
+
+.cat-visually-hidden-hoverable {
+  @include cat-visually-hidden-hoverable;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {