@cfx-dev/ui-components 4.3.2 → 4.3.4

package/dist/styles-scss/_colors.scss

@@ -1,11 +1,17 @@
 @use "sass:math";
 @use "sass:list";
+@use "sass:map";
+@use "sass:color";
+
+@function get-channel($color, $channel) {
+  @return color.channel($color, $channel, $space: rgb);
+}
 
 @function get-luminance($color) {
   $colors: (
-    'red': red($color),
-    'green': green($color),
-    'blue': blue($color)
+    'red': get-channel($color, "red"),
+    'green': get-channel($color, "green"),
+    'blue': get-channel($color, "blue"),
   );
 
   @each $name, $value in $colors {
@@ -19,20 +25,19 @@
       $value: math.pow($value, 2.4);
     }
 
-    $colors: map-merge($colors, ($name: $value));
+    $colors: map.merge($colors, ($name: $value));
   }
 
-  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+  @return (map.get($colors, 'red') * .2126) + (map.get($colors, 'green') * .7152) + (map.get($colors, 'blue') * .0722);
 }
 
 @function interpolate($c1, $c2, $f) {
-  $c1r: red($c1);
-  $c1g: green($c1);
-  $c1b: blue($c1);
-
-  $c2r: red($c2);
-  $c2g: green($c2);
-  $c2b: blue($c2);
+  $c1r: get-channel($c1, "red");
+  $c1g: get-channel($c1, "green");
+  $c1b: get-channel($c1, "blue");
+  $c2r: get-channel($c2, "red");
+  $c2g: get-channel($c2, "green");
+  $c2b: get-channel($c2, "blue");
 
   @return rgb(
     $c1r + $f * ($c2r - $c1r),
@@ -43,8 +48,8 @@
 
 @function set-luminance($color, $lum) {
   $itersLeft: 20;
-  $low: rgb(0, 0, 0);
-  $high: rgb(255, 255, 255);
+  $low: rgb(0 0 0);
+  $high: rgb(255 255 255);
 
   @if get-luminance($color) > $lum {
     $high: $color;
@@ -55,9 +60,8 @@
   $mid: interpolate($low, $high, .5);
   $lm: get-luminance($mid);
 
-  @while math.abs($lum - $lm) >= 1e-7 and $itersLeft > 0 {
+  @while math.abs($lum - $lm) >= 1e - 7 and $itersLeft > 0 {
     $itersLeft: $itersLeft - 1;
-
     $mid: interpolate($low, $high, .5);
     $lm: get-luminance($mid);
 
@@ -72,7 +76,7 @@
 }
 
 @function color-triplet($color) {
-  @return #{red($color)}, #{green($color)}, #{blue($color)};
+  @return #{get-channel($color, "red")}, #{get-channel($color, "green")}, #{get-channel($color, "blue")};
 }
 
 
@@ -82,20 +86,22 @@ $_16OVER116: math.div(16, 116);
 $_1OVER2P4: math.div(1, 2.4);
 
 @function rgb2lab($color) {
-  $r: math.div(red($color), 255);
-  $g: math.div(green($color), 255);
-  $b: math.div(blue($color), 255);
+  $r: math.div(get-channel($color, "red"), 255);
+  $g: math.div(get-channel($color, "green"), 255);
+  $b: math.div(get-channel($color, "blue"), 255);
 
   @if $r > 0.04045 {
     $r: math.pow(math.div($r + 0.055, 1.055), 2.4);
   } @else {
     $r: math.div($r, 12.92);
   }
+
   @if $g > 0.04045 {
     $g: math.pow(math.div($g + 0.055, 1.055), 2.4);
   } @else {
     $g: math.div($g, 12.92);
   }
+
   @if $b > 0.04045 {
     $b: math.pow(math.div($b + 0.055, 1.055), 2.4);
   } @else {
@@ -111,11 +117,13 @@ $_1OVER2P4: math.div(1, 2.4);
   } @else {
     $x: (7.787 * $x) + $_16OVER116;
   }
+
   @if $y > 0.008856 {
     $y: math.pow($y, $oneThird);
   } @else {
     $y: (7.787 * $y) + $_16OVER116;
   }
+
   @if $z > 0.008856 {
     $z: math.pow($z, $oneThird);
   } @else {
@@ -130,10 +138,9 @@ $_1OVER2P4: math.div(1, 2.4);
 }
 
 @function lab2rgb($lab) {
-  $y: math.div(map-get($lab, 'L') + 16, 116);
-  $x: math.div(map-get($lab, 'a'), 500) + $y;
-  $z: $y - math.div(map-get($lab, 'b'), 200);
-
+  $y: math.div(map.get($lab, 'L') + 16, 116);
+  $x: math.div(map.get($lab, 'a'), 500) + $y;
+  $z: $y - math.div(map.get($lab, 'b'), 200);
   $x3: math.pow($x, 3);
   $y3: math.pow($y, 3);
   $z3: math.pow($z, 3);
@@ -143,11 +150,13 @@ $_1OVER2P4: math.div(1, 2.4);
   } @else {
     $x: math.div($x - $_16OVER116 , 7.787);
   }
+
   @if $y3 > 0.008856 {
     $y: $y3;
   } @else {
     $y: math.div($y - $_16OVER116 , 7.787);
   }
+
   @if $z3 > 0.008856 {
     $z: $z3;
   } @else {
@@ -157,21 +166,22 @@ $_1OVER2P4: math.div(1, 2.4);
   $x: $x * 0.95047;
   $y: $y * 1.00000;
   $z: $z * 1.08883;
-
-  $r: $x *  3.2406 + $y * -1.5372 + $z * -0.4986;
-  $g: $x * -0.9689 + $y *  1.8758 + $z *  0.0415;
-  $b: $x *  0.0557 + $y * -0.2040 + $z *  1.0570;
+  $r: $x * 3.2406 + $y * -1.5372 + $z * -0.4986;
+  $g: $x * -0.9689 + $y * 1.8758 + $z * 0.0415;
+  $b: $x * 0.0557 + $y * -0.2040 + $z * 1.0570;
 
   @if $r > 0.0031308 {
     $r: 1.055 * math.pow($r, $_1OVER2P4) - 0.055;
   } @else {
     $r: 12.92 * $r;
   }
+
   @if $g > 0.0031308 {
     $g: 1.055 * math.pow($g, $_1OVER2P4) - 0.055;
   } @else {
     $g: 12.92 * $g;
   }
+
   @if $b > 0.0031308 {
     $b: 1.055 * math.pow($b, $_1OVER2P4) - 0.055;
   } @else {
@@ -198,14 +208,13 @@ $_1OVER2P4: math.div(1, 2.4);
 @function lab-gradient-step($s, $e, $i, $stop) {
   $s: rgb2lab($s);
   $e: rgb2lab($e);
-
   $a: math.div($i, $stop - 1);
   $ia: 1 - $a;
 
   @return lab2rgb((
-    'L': $ia * map-get($s, 'L') + $a * map-get($e, 'L'),
-    'a': $ia * map-get($s, 'a') + $a * map-get($e, 'a'),
-    'b': $ia * map-get($s, 'b') + $a * map-get($e, 'b'),
+    'L': $ia * map.get($s, 'L') + $a * map.get($e, 'L'),
+    'a': $ia * map.get($s, 'a') + $a * map.get($e, 'a'),
+    'b': $ia * map.get($s, 'b') + $a * map.get($e, 'b'),
   ));
 }
 

package/dist/styles-scss/_typography.scss

@@ -8,7 +8,7 @@
   @font-face {
     font-style: normal;
     font-weight: 400;
-    font-family: "HelveticaNowDisplay";
+    font-family: HelveticaNowDisplay;
     src: url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplay.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplay.ttf") format("truetype");
@@ -17,7 +17,7 @@
   @font-face {
     font-style: normal;
     font-weight: 700;
-    font-family: "HelveticaNowDisplay";
+    font-family: HelveticaNowDisplay;
     src: url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowDisplayBold.ttf") format("truetype");
@@ -26,7 +26,7 @@
   @font-face {
     font-style: normal;
     font-weight: 400;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowText.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowText.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowText.ttf") format("truetype");
@@ -35,7 +35,7 @@
   @font-face {
     font-style: normal;
     font-weight: 700;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextBold.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextBold.ttf") format("truetype");
@@ -44,7 +44,7 @@
   @font-face {
     font-style: italic;
     font-weight: 400;
-    font-family: "HelveticaNowText";
+    font-family: HelveticaNowText;
     src: url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff2") format("woff2"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextIt.woff") format("woff"),
          url("assets/fonts/HelveticaNow/HelveticaNowTextIt.ttf") format("truetype");

package/dist/styles-scss/_ui.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:list";
 @use "sass:map";
 @use "sass:meta";
 @use "colors";
@@ -6,6 +7,7 @@
 @mixin def($var, $value) {
   --#{$var}: #{$value};
 }
+
 @function use($var, $default: initial) {
   @return var(--#{$var}, $default);
 }
@@ -53,11 +55,12 @@
 @function viewport-width($multiplier: 1.0) {
   @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
 }
+
 @function viewport-height($multiplier: 1.0) {
   @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
 }
 
-$cfxui-color-luminance: (
+$cfxuiColorLuminance: (
   'pure',
   950,
   900,
@@ -71,8 +74,7 @@ $cfxui-color-luminance: (
   100,
   50,
 );
-
-$cfxui-color-alpha: (
+$cfxuiColorAlpha: (
   '100': 1,
   '90': 0.9,
   '80': 0.8,
@@ -123,7 +125,7 @@ $cfxui-color-alpha: (
 }
 
 @mixin define-main-colors($bg, $fg, $overrides: ()) {
-  $colors: map-merge((
+  $colors: map.merge((
     'primary': #f50551,
     'success': #01a370,
     'warning': #ffae00,
@@ -141,7 +143,7 @@ $cfxui-color-alpha: (
 }
 
 @mixin define-theme($bg, $fg, $overrides: ()) {
-  $colors: map-merge((
+  $colors: map.merge((
     'accent': #F40552,
     'primary': #F1F1E4,
     'secondary': #9EA4BD,
@@ -156,7 +158,7 @@ $cfxui-color-alpha: (
     'bg-light': #1C202E,
     'bg-dark': #1C202E,
     'bg-dark-grey': #1A1A1A,
-    'bg-black': #000000,
+    'bg-black': #000,
   ), $overrides);
 
   @each $colorName, $colorValue in $colors {
@@ -167,11 +169,11 @@ $cfxui-color-alpha: (
 @mixin define-color-token($name, $color) {
   --color-#{$name}: #{$color};
 }
+
 @function color-token($name, ) {
   @return var(--color-#{$name});
 }
 
-
 @mixin border-radius($size: 'normal') {
   border-radius: var(--border-radius-#{$size});
 }
@@ -179,12 +181,15 @@ $cfxui-color-alpha: (
 @mixin font-size($size: 'normal') {
   font-size: var(--font-size-#{$size});
 }
+
 @mixin font-family($family: 'primary') {
   font-family: var(--font-family-#{$family});
 }
+
 @mixin font-weight($weight: 'normal') {
   font-weight: var(--font-weight-#{$weight});
 }
+
 @mixin font-color($colorToken) {
   color: color-token($colorToken);
 }
@@ -198,10 +203,11 @@ $cfxui-color-alpha: (
 }
 
 @mixin animated($props: 'all', $subClass: '&') {
-  @if type-of($props) == 'list' {
+  @if meta.type-of($props) == 'list' {
     $transition: ();
+
     @each $property in $props {
-      $transition: append(
+      $transition: list.append(
           $transition, ($property .25s ease), $separator: comma
       );
     }
@@ -220,11 +226,11 @@ $cfxui-color-alpha: (
 }
 
 @mixin fake-backdrop-blur($topLayer: false, $topLayerBlend: false, $topLayerSize: false, $topLayerAttachement: false) {
-  --_backdrop-color: var(--backdrop-color, transparent);
-  --_backdrop-image-blur: var(--backdrop-image-blur, url(assets/images/bg2-blur.png));
+  --over-backdrop-color: var(--backdrop-color, transparent);
+  --over-backdrop-image-blur: var(--backdrop-image-blur, url("assets/images/bg2-blur.png"));
 
   @if not $topLayer {
-    $topLayer: linear-gradient(use('_backdrop-color'), use('_backdrop-color'));
+    $topLayer: linear-gradient(use('over-backdrop-color'), use('over-backdrop-color'));
   }
 
   @if not $topLayerBlend {
@@ -239,12 +245,12 @@ $cfxui-color-alpha: (
     $topLayerAttachement: scroll;
   }
 
-  background-color: use('_backdrop-color');
+  background-color: use('over-backdrop-color');
   background-image:
     $topLayer,
     linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
-    use('_backdrop-image-blur'),
-    use('_backdrop-image-blur');
+    use('over-backdrop-image-blur'),
+    use('over-backdrop-image-blur');
   background-blend-mode: $topLayerBlend, normal, overlay;
   background-size: $topLayerSize, cover, cover, cover;
   background-attachment: $topLayerAttachement, scroll, fixed, fixed;
@@ -276,12 +282,15 @@ $offsets: (
   ::-webkit-scrollbar {
     width: use('scrollable-thumb-size');
   }
+
   ::-webkit-scrollbar:horizontal {
     height: use('scrollable-thumb-size');
   }
+
   ::-webkit-scrollbar-track {
     background-color: color-token('scrollbar-track-background');
   }
+
   ::-webkit-scrollbar-thumb {
     @include border-radius('pill');
   
@@ -290,10 +299,12 @@ $offsets: (
     &:hover {
       background-color: color-token('scrollbar-hover');
     }
+
     &:active {
       background-color: color-token('scrollbar-active');
     }
   }
+
   ::-webkit-scrollbar-corner {
     display: none;
   }
@@ -301,15 +312,22 @@ $offsets: (
 
 @mixin placeholder-color($color) {
   &::placeholder               {color: $color}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::-webkit-input-placeholder {color: $color}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::-moz-placeholder          {color: $color}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &:-ms-input-placeholder      {color: $color}
 }
 
 @mixin placeholder-animated($props: 'all', $subClass: '&') {
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::placeholder               {@include animated($props, $subClass)}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::-webkit-input-placeholder {@include animated($props, $subClass)}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &::-moz-placeholder          {@include animated($props, $subClass)}
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   &:-ms-input-placeholder      {@include animated($props, $subClass)}
 }
 
@@ -339,7 +357,7 @@ $mediaMap: (
     @if $size == 'initial' {
       @content;
     } @else {
-      @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
+      @media (width >= calc(map.get($mediaMap, $size) - 1px)) { @content; }
     }
   } @else {
     @media (min-width: $fix) { @content; }
@@ -370,8 +388,7 @@ $mpMap: (
   pb: padding-bottom,
   pl: padding-left,
 );
-
-$controlHeights: (
+$controlHeightsMap: (
   'xxsmall': q(1.5),
   'xsmall': q(3),
   'small': q(4),
@@ -379,8 +396,7 @@ $controlHeights: (
   'large': q(7),
   'xlarge': q(10),
 );
-
-$borderRadius: (
+$borderRadiusMap: (
   'none': 0px,
   'xxsmall': q(.25),
   'xsmall': q(.5),

package/dist/styles-scss/global.scss

@@ -2,6 +2,13 @@
 @use "tokens";
 
 body {
+  // Set default font styles
+  @include ui.font-color('text');
+  @include ui.font-family('primary');
+  @include ui.font-weight('normal');
+  @include ui.line-height('normal');
+  @include ui.letter-spacing('normal');
+
   // initiat tokens
   @include tokens.color-tokens;
   @include tokens.offset-tokens;
@@ -27,6 +34,9 @@ body {
   @include tokens.separator-tokens;
   @include tokens.zindex-tokens;
 
+  // initiat fonts
+  @include typography.font-HelveticaNow;
+
   // responsive
   @include tokens.mp-tokens;
   @include tokens.responsive-tokens('display');
@@ -40,16 +50,6 @@ body {
   @include tokens.responsive-tokens('flex');
   @include tokens.responsive-tokens('font-size');
   @include tokens.responsive-tokens('line-height');
-
-  // initiat fonts
-  @include typography.font-HelveticaNow;
-
-  // Set default font styles
-  @include ui.font-color('text');
-  @include ui.font-family('primary');
-  @include ui.font-weight('normal');
-  @include ui.line-height('normal');
-  @include ui.letter-spacing('normal');
 }
 
 a {
@@ -59,16 +59,16 @@ a {
   text-decoration: underline;
   border-radius: ui.border-radius('xxsmall');
 
-  @include ui.animated();
+  @include ui.animated;
 
   &:not([aria-disabled="true"]) {
-    text-decoration-color: currentColor;
+    text-decoration-color: currentcolor;
 
     &:hover {
       text-decoration-color: ui.color('tertiary', $alpha: 0.5);
     }
 
-    &:focus-visible:not(:active):not(:hover) {
+    &:focus-visible:not(:active, :hover) {
       box-shadow: 0 0 0 ui.use('anchor-outline-size') ui.color-token('anchor-focus-outline');
     }
   }
@@ -94,26 +94,31 @@ h1 {
   @include ui.line-height('xxxlarge');
   @include ui.font-weight('bold');
 }
+
 h2 {
   @include ui.font-size('xxlarge');
   @include ui.line-height('xxlarge');
   @include ui.font-weight('bold');
 }
+
 h3 {
   @include ui.font-size('xlarge');
   @include ui.line-height('xlarge');
   @include ui.font-weight('bold');
 }
+
 h4 {
   @include ui.font-size('large');
   @include ui.line-height('large');
   @include ui.font-weight('bold');
 }
+
 h5 {
   @include ui.font-size('medium');
   @include ui.line-height('medium');
   @include ui.font-weight('bold');
 }
+
 h6 {
   @include ui.font-size('medium');
   @include ui.line-height('medium');
@@ -140,23 +145,29 @@ li::marker {
 .util-full-height {
   height: 100%;
 }
+
 .util-full-width {
   width: 100%;
 }
+
 .util-z-index-9000 {
   z-index: ui.zindex('max');
 }
+
 .util-text-unselectable,
 .util-text-unselectable * {
   user-select: none !important;
 }
+
 .util-text-selectable,
 .util-text-selectable * {
   user-select: text;
 }
+
 .util-flex-grow {
   flex-grow: 1;
 }
+
 .util-flex-no-shrink {
   flex-shrink: 0;
 }

package/dist/styles-scss/themes/theme_cfx.scss

@@ -2,8 +2,7 @@
 
 $fg: #fffff0;
 $bg: #161923;
-
-$theme-cfx-colors: (
+$colors: (
   'accent': #F40552,
   'primary': #F1F1E4,
   'secondary': #9EA4BD,
@@ -18,14 +17,13 @@ $theme-cfx-colors: (
   'bg-light': #1C202E,
   'bg-dark': #1C202E,
   'bg-dark-grey': #1A1A1A,
-  'bg-black': #000000,
+  'bg-black': #000,
 );
 
 .cfxui-theme-cfx {
   // TODO: remove
   @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-cfx-colors);
+  @include ui.define-theme($bg, $fg, $colors);
 
   // Invert black indicators for date/time inputs
   ::-webkit-calendar-picker-indicator {

package/dist/styles-scss/themes/theme_fivem.scss

@@ -2,10 +2,9 @@
 
 $fg: #fffff0;
 $bg: #161923;
-
-$theme-fivem-colors: (
+$colors: (
   'accent': #5B8F22,
-  'primary': #FFFFFF,
+  'primary': #FFF,
   'secondary': #ABABAB,
   'tertiary': #BBE093,
   'green': #22BF4E,
@@ -14,18 +13,17 @@ $theme-fivem-colors: (
   'argentum': #A3A3A3,
   'aurum': #BFA45E,
   'platinum': #F1F1F1,
-  'bg': #000000,
+  'bg': #000,
   'bg-light': #252525,
   'bg-dark': #131313,
   'bg-dark-grey': #1A1A1A,
-  'bg-black': #000000,
+  'bg-black': #000,
 );
 
 .cfxui-theme-fivem {
   // TODO: remove
   @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-fivem-colors);
+  @include ui.define-theme($bg, $fg, $colors);
 
   // Invert black indicators for date/time inputs
   ::-webkit-calendar-picker-indicator {

package/dist/styles-scss/themes/theme_redm.scss

@@ -2,8 +2,7 @@
 
 $fg: #fffff0;
 $bg: #161923;
-
-$theme-redm-colors: (
+$colors: (
   'accent': #D80D0D,
   'primary': #F1F1E4,
   'secondary': #ABABAB,
@@ -14,18 +13,17 @@ $theme-redm-colors: (
   'argentum': #A3A3A3,
   'aurum': #BFA45E,
   'platinum': #F1F1F1,
-  'bg': #000000,
+  'bg': #000,
   'bg-light': #252525,
   'bg-dark': #131313,
   'bg-dark-grey': #1A1A1A,
-  'bg-black': #000000,
+  'bg-black': #000,
 );
 
 .cfxui-theme-redm {
   // TODO: remove
   @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-redm-colors);
+  @include ui.define-theme($bg, $fg, $colors);
 
   // Invert black indicators for date/time inputs
   ::-webkit-calendar-picker-indicator {

package/dist/styles-scss/themes/theme_wireframe.scss

@@ -2,9 +2,8 @@
 
 $fg: #fffff0;
 $bg: #161923;
-
-$theme-wireframe-colors: (
-  'accent': #444444,
+$colors: (
+  'accent': #444,
   'primary': #202123,
   'secondary': #797979,
   'tertiary': #9D9D9D,
@@ -14,18 +13,17 @@ $theme-wireframe-colors: (
   'argentum': #A3A3A3,
   'aurum': #BFA45E,
   'platinum': #F1F1F1,
-  'bg': #FFFFFF,
+  'bg': #FFF,
   'bg-light': #DADADA,
   'bg-dark': #DADADA,
   'bg-dark-grey': #1A1A1A,
-  'bg-black': #444444,
+  'bg-black': #444,
 );
 
 .cfxui-theme-wireframe {
   // TODO: remove
   @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-wireframe-colors);
+  @include ui.define-theme($bg, $fg, $colors);
 
   // Invert black indicators for date/time inputs
   ::-webkit-calendar-picker-indicator {