feat(mixins): export mixins (#256)

* feat(mixins): export mixins

* refactor: remove redundant mixins

* docs: restructure mixins list in README

README.md

@@ -84,14 +84,29 @@ To use the supplied config, add `monday-ui-style/stylelint-config` as a [Styleli
 ```
 
 ## Functions
-We exporting the following scss functions:
-- camelize: camelcase string
-- capitalize: capitalize string
-- contain: return whether `$value` is contained in `$list` as Boolean
-- map-collect: merge maps from different scopes into one
-- extract-rgb: we use "extract-rgb" when we want to return a comma separated list of rgb values from a color.
+
+The following SCSS functions are exported:
+
+- `camelize`: camelcase string
+- `capitalize`: capitalize string
+- `contain`: returns whether `$value` is contained in `$list` as a Boolean
+- `map-collect`: merges maps from different scopes into one
+- `extract-rgb`: returns a comma separated list of rgb values from a color
 
 ## Mixins
-We exporting the following scss mixins:
-- vibe-heading(type, weight)
-- vibe-text(type, weight)
+
+The following SCSS mixins are exported:
+
+- Common:
+  - `hidden-element`
+  - `grid-auto-fit($grid-gap, $grid-column-gap, $grid-row-gap. $grid-cell-min-width, $grid-cell-array-calc, $important)`
+  - `scroller($width, $height, $color)`
+- States:
+  - `disabled`
+  - `reset-button`
+  - `focus-style($focus-radius)`
+- Typography:
+  - `vibe-text($type, $weight)`
+  - `vibe-heading($type, $weight)`
+  - `line-clamp($lines)`
+  - `ellipsis`

src/_mixins.scss

@@ -1 +1,3 @@
+@import "mixins/common";
+@import "mixins/states";
 @import "mixins/typography";

src/mixins/_common.scss

@@ -0,0 +1,67 @@
+$expand-animation-timing: cubic-bezier(0, 0, 0.35, 1);
+
+// Grid auto fit sizes
+$grid-auto-fit-cell-width-small: 120px;
+$grid-auto-fit-cell-width-medium: 180px;
+$grid-auto-fit-cell-width-large: 240px;
+$grid-auto-fit-cell-width-xl: 300px;
+
+@mixin hidden-element() {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+// Grid auto fit
+// - This mixin defines a grid with auto fit repeat cells using min-max funtion.
+// -- This allows grid to accommodate container width without media queries.
+// -- it uses a repeat grid function with auto fix and minmax.
+// -- grid adaptation is due to the min value along with auto-fit and 1fr max value.
+
+// @params:
+// - $grid-gap: null , defines grid "gap" attribute.
+// - $grid-column-gap: null,  defines grid "column-gap" attribute.
+// - $grid-row-gap: null,  defines grid "row-gap" attribute.
+// - $grid-cell-min-width: {mandatory}, defined min value in for grid-template-columns
+// - $grid-cell-array-calc: {mandatory}, defined max num of items using calc
+
+@mixin grid-auto-fit(
+  $grid-gap: null,
+  $grid-column-gap: null,
+  $grid-row-gap: null,
+  $grid-cell-min-width,
+  $grid-cell-array-calc: null,
+  $important: false
+) {
+  display: grid;
+  @if $important {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)
+    ) !important;
+    gap: $grid-gap !important;
+    column-gap: $grid-column-gap !important;
+    row-gap: $grid-row-gap !important;
+  } @else {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)
+    );
+    gap: $grid-gap;
+    column-gap: $grid-column-gap;
+    row-gap: $grid-row-gap;
+  }
+}
+
+@mixin scroller($width: 4px, $height: 6px, $color: var(--ui-border-color)) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $height;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: 4px;
+  }
+}

src/mixins/_states.scss

@@ -0,0 +1,48 @@
+@mixin disabled {
+  border-color: var(--disabled-background-color);
+  color: var(--disabled-text-color);
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+@mixin reset-button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+
+  @include focus-style;
+}
+
+@mixin focus-style($focus-radius: 4px) {
+  &:focus-visible,
+  &.focus-visible {
+    outline: none;
+    z-index: 11;
+    border-radius: $focus-radius;
+    box-shadow: 0 0 0 3px hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;
+  }
+
+  &:focus:not(.focus-visible) {
+    outline: none;
+  }
+}

src/mixins/_typography.scss

@@ -8,3 +8,17 @@
   -webkit-font-smoothing: var(--font-smoothing-webkit);
   -moz-osx-font-smoothing: var(--font-smoothing-moz);
 }
+
+@mixin line-clamp($lines: 1le) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  white-space: initial; // doesn't work with white-space: no-wrap
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}