@haiilo/catalyst 0.7.1 → 0.7.4

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.4",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {