@heliux-org/ui-style 1.0.130 → 1.0.132

package/dist/functions/functions/_camelize.scss

@@ -0,0 +1,25 @@
+// FUNCTIONS: Camelize string
+
+// Modules imports
+@use "sass:string";
+
+// @arguments [string] $string
+// @return camelcase string
+@function camelize($string) {
+  $progress: $string;
+  $result: "";
+  $exclude: " ", "-", "–", "—", "_", ",", ";", ":", ".";
+
+  @while str-length($progress) > 0 {
+    $char: string.slice($progress, 1, 1);
+
+    @if contain($exclude, $char) {
+      $progress: capitalize(string.slice($progress, 2, 2)) + string.slice($progress, 3);
+    } @else {
+      $result: $result + $char;
+      $progress: string.slice($progress, 2);
+    }
+  }
+
+  @return $result;
+}

package/dist/functions/functions/_capitalize.scss

@@ -0,0 +1,11 @@
+// MIXINS: Capitalize
+// - Helper function
+
+// Modules imports
+@use "sass:string";
+
+// @arguments: $string
+// @return capitalize string
+@function capitalize($string) {
+  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}

package/dist/functions/functions/_contain.scss

@@ -0,0 +1,8 @@
+// FUNCTIONS: Contain
+// - Helper function
+// @arguments [list] $list
+// @arguments [$value] $value
+// Return whether `$value` is contained in `$list` , Boolean
+@function contain($list, $value) {
+  @return not not index($list, $value);
+}

package/dist/functions/functions/_extract-rgb.scss

@@ -0,0 +1,8 @@
+// MIXINS: Extract Rgb
+// @arguments $color (can be hardcoded or $color)
+// @return: comma separated RGB values
+// Use: We use "extract-rgb" when we want to return a comma separated list of rgb values from a color.
+// - We use it in some of our token assignments and their custom-properties output.
+@function extract-rgb($color) {
+  @return red($color), green($color), blue($color);
+}

package/dist/functions/functions/_map-collect.scss

@@ -0,0 +1,17 @@
+// MIXINS: Map Collect
+
+// Modules imports
+@use "sass:map";
+
+// @arguments: multiple coma separated $maps.
+// @return: a single map with merged values.
+// Use: we use "map-collect" to merge maps from different scopes.
+// - We assume there will be no key duplication since scopes are separated.
+@function map-collect($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map.merge($collection, $map);
+  }
+  @return $collection;
+}

package/dist/mixins/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(--divider-primary)) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $height;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $color;
+    border-radius: 4px;
+  }
+}

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

package/dist/mixins/mixins/_typography.scss

@@ -0,0 +1,24 @@
+@mixin vibe-text($type-prefix, $weight-type) {
+  font: var(--font-#{$type-prefix}-#{$weight-type});
+}
+
+@mixin vibe-heading($type-prefix, $weight-type) {
+  font: var(--font-#{$type-prefix}-#{$weight-type});
+  letter-spacing: var(--letter-spacing-#{$type-prefix}-#{$weight-type});
+  -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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heliux-org/ui-style",
-  "version": "1.0.130",
+  "version": "1.0.132",
   "description": "Heliux UI CSS Foundations",
   "main": "dist/index.css",
   "scripts": {
@@ -66,5 +66,5 @@
     "sass": "^1.70.0",
     "stylelint-config-recommended-scss": "^6.0.0"
   },
-  "gitHead": "7fe72c5340712b733b749eb79bf6ae6cb192639f"
+  "gitHead": "245fe57e9958d7e68ff14188f43eb0beb5cbc2e1"
 }