@heliux-org/ui-style 1.0.127 → 1.0.130

package/src/config/tokens/themes/hacker/keys/_hacker-theme-keys.scss

@@ -37,6 +37,7 @@ $theme-hacker-surface-success: $colors-green-700;
 $theme-hacker-surface-alert: $colors-red-700;
 $theme-hacker-surface-warning: $colors-yellow-900;
 $theme-hacker-surface-overlay: rgba($colors-gray-950, $opacity-30);
+$theme-hacker-surface-level-100-transparent:  rgba($colors-green-950, $opacity-80);
 
 // BRAND COLORS
 $theme-hacker-primary-color: $colors-lime-600;

package/src/files/colors.json

@@ -45,6 +45,7 @@
     "surface-level-300": "#f6f7fb",
     "surface-level-400": "#f6f7fb",
     "surface-gradient-bg": "#f6f7fb",
+    "surface-level-100-transparent": "#ffffff",
     "surface-inverse": "#323338",
     "surface-success": "#359970",
     "surface-warning": "#ffd533",
@@ -204,6 +205,7 @@
     "surface-level-300": "#181b34",
     "surface-level-400": "#181b34",
     "surface-gradient-bg": "#f6f7fb",
+    "surface-level-100-transparent": "#ffffff",
     "surface-inverse": "#ffffff",
     "surface-success": "#359970",
     "surface-warning": "#ffd533",
@@ -364,6 +366,7 @@
     "surface-level-300": "#111111",
     "surface-level-400": "#2c2c2c",
     "surface-gradient-bg": "#f6f7fb",
+    "surface-level-100-transparent": "#ffffff",
     "surface-inverse": "#eeeeee",
     "surface-success": "#359970",
     "surface-warning": "#ffd533",
@@ -522,6 +525,7 @@
     "surface-level-300": "#282a36",
     "surface-level-400": "#282a36",
     "surface-gradient-bg": "#f6f7fb",
+    "surface-level-100-transparent": "#ffffff",
     "surface-inverse": "#ffffff",
     "surface-success": "#359970",
     "surface-warning": "#ffd533",
@@ -731,6 +735,7 @@
     "surface-level-300": "#282a36",
     "surface-level-400": "#282a36",
     "surface-gradient-bg": "#f6f7fb",
+    "surface-level-100-transparent": "#ffffff",
     "surface-inverse": "#ffffff",
     "surface-success": "#359970",
     "surface-warning": "#ffd533",

package/dist/fonts/fonts.scss

@@ -1,270 +0,0 @@
-@font-face {
-    font-family: 'Alliance Mono';
-    src: url('Alliance-Mono.woff2') format('woff2'),
-        url('Alliance-Mono.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueBlack.woff2') format('woff2'),
-        url('Alliance-NeueBlack.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueBlackItalic.woff2') format('woff2'),
-        url('Alliance-NeueBlackItalic.woff') format('woff');
-    font-weight: 900;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueMedium.woff2') format('woff2'),
-        url('Alliance-NeueMedium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueRegularItalic.woff2') format('woff2'),
-        url('Alliance-NeueRegularItalic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueRegular.woff2') format('woff2'),
-        url('Alliance-NeueRegular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueBold.woff2') format('woff2'),
-        url('Alliance-NeueBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueMediumItalic.woff2') format('woff2'),
-        url('Alliance-NeueMediumItalic.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueLight.woff2') format('woff2'),
-        url('Alliance-NeueLight.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueLightItalic.woff2') format('woff2'),
-        url('Alliance-NeueLightItalic.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueExtraBold.woff2') format('woff2'),
-        url('Alliance-NeueExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueBoldItalic.woff2') format('woff2'),
-        url('Alliance-NeueBoldItalic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue ExtraBold talic';
-    src: url('Alliance-NeueExtraBoldtalic.woff2') format('woff2'),
-        url('Alliance-NeueExtraBoldtalic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueSemiBold.woff2') format('woff2'),
-        url('Alliance-NeueSemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattMedium.woff2') format('woff2'),
-        url('Alliance-PlattMedium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattRegular.woff2') format('woff2'),
-        url('Alliance-PlattRegular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattSemiBold.woff2') format('woff2'),
-        url('Alliance-PlattSemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattExtraBold.woff2') format('woff2'),
-        url('Alliance-PlattExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattBold.woff2') format('woff2'),
-        url('Alliance-PlattBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Neue';
-    src: url('Alliance-NeueSemiBoldItalic.woff2') format('woff2'),
-        url('Alliance-NeueSemiBoldItalic.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextBlack.woff2') format('woff2'),
-        url('Alliance-TextBlack.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattBlack.woff2') format('woff2'),
-        url('Alliance-PlattBlack.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Platt';
-    src: url('Alliance-PlattLight.woff2') format('woff2'),
-        url('Alliance-PlattLight.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextBoldItalic.woff2') format('woff2'),
-        url('Alliance-TextBoldItalic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextBlackItalic.woff2') format('woff2'),
-        url('Alliance-TextBlackItalic.woff') format('woff');
-    font-weight: 900;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextLight.woff2') format('woff2'),
-        url('Alliance-TextLight.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextBold.woff2') format('woff2'),
-        url('Alliance-TextBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextLightItalic.woff2') format('woff2'),
-        url('Alliance-TextLightItalic.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextExtraBold.woff2') format('woff2'),
-        url('Alliance-TextExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alliance Text';
-    src: url('Alliance-TextExtraBoldItalic.woff2') format('woff2'),
-        url('Alliance-TextExtraBoldItalic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-

package/dist/functions/functions/_camelize.scss

@@ -1,25 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-// 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

@@ -1,17 +0,0 @@
-// 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

@@ -1,67 +0,0 @@
-$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;
-  }
-}