@cfx-dev/ui-components 4.3.8 → 4.3.10

package/dist/styles-scss/_ui.scss

@@ -1,8 +1,9 @@
-@use "sass:math";
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "colors";
+/* stylelint-disable selector-no-vendor-prefix */
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'colors';
 
 @mixin def($var, $value) {
   --#{$var}: #{$value};
@@ -12,7 +13,7 @@
   @return var(--#{$var}, $default);
 }
 
-@function color($name, $luminance: 'pure', $alpha: 1.0) {
+@function color($name, $luminance: 'pure', $alpha: 1) {
   @if $luminance == 'pure' {
     @return rgba(var(--color-#{$name}), #{$alpha});
   }
@@ -26,7 +27,7 @@
 
 @function q($multiplier: 1) {
   @if $multiplier == 1 {
-      @return var(--quant);
+    @return var(--quant);
   }
 
   @return calc(var(--quant) * #{$multiplier});
@@ -52,28 +53,15 @@
   @return var(--border-radius-#{$size});
 }
 
-@function viewport-width($multiplier: 1.0) {
+@function viewport-width($multiplier: 1) {
   @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
 }
 
-@function viewport-height($multiplier: 1.0) {
+@function viewport-height($multiplier: 1) {
   @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
 }
 
-$cfxuiColorLuminance: (
-  'pure',
-  950,
-  900,
-  800,
-  700,
-  600,
-  500,
-  400,
-  300,
-  200,
-  100,
-  50,
-);
+$cfxuiColorLuminance: ('pure', 950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50);
 $cfxuiColorAlpha: (
   '100': 1,
   '90': 0.9,
@@ -93,10 +81,12 @@ $cfxuiColorAlpha: (
 }
 
 @mixin define-color($name, $color, $bg, $fg) {
-  .cfx-color-#{$name} { color: $color }
+  .cfx-color-#{$name} {
+    color: $color;
+  }
 
   --color-#{$name}: #{colors.color-triplet($color)};
-  --color-#{$name}-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 1, 7))};
+  --color-#{$name}-50: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 1, 7))};
   --color-#{$name}-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 2, 7))};
   --color-#{$name}-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 3, 7))};
   --color-#{$name}-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 4, 7))};
@@ -111,29 +101,32 @@ $cfxuiColorAlpha: (
 
 @mixin define-main-color($bg, $fg) {
   --color-main: #{colors.color-triplet($bg)};
-  --color-main-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1,  12))};
-  --color-main-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 2,  12))};
-  --color-main-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 3,  12))};
-  --color-main-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 4,  12))};
-  --color-main-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 5,  12))};
-  --color-main-500: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 6,  12))};
-  --color-main-600: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 7,  12))};
-  --color-main-700: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 8,  12))};
-  --color-main-800: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 9,  12))};
+  --color-main-50: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1, 12))};
+  --color-main-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 2, 12))};
+  --color-main-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 3, 12))};
+  --color-main-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 4, 12))};
+  --color-main-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 5, 12))};
+  --color-main-500: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 6, 12))};
+  --color-main-600: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 7, 12))};
+  --color-main-700: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 8, 12))};
+  --color-main-800: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 9, 12))};
   --color-main-900: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 10, 12))};
   --color-main-950: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 11, 12))};
 }
 
 @mixin define-main-colors($bg, $fg, $overrides: ()) {
-  $colors: map.merge((
-    'primary': #f50551,
-    'success': #01a370,
-    'warning': #ffae00,
-    'error': #ff2600,
-    'teal': #007892,
-    'aurum': #aa6f0d,
-    'silver': #a5a5a5
-  ), $overrides);
+  $colors: map.merge(
+    (
+      'primary': #f50551,
+      'success': #01a370,
+      'warning': #ffae00,
+      'error': #ff2600,
+      'teal': #007892,
+      'aurum': #aa6f0d,
+      'silver': #a5a5a5,
+    ),
+    $overrides
+  );
 
   @include define-main-color($bg, $fg);
 
@@ -143,23 +136,26 @@ $cfxuiColorAlpha: (
 }
 
 @mixin define-theme($bg, $fg, $overrides: ()) {
-  $colors: map.merge((
-    'accent': #F40552,
-    'primary': #F1F1E4,
-    'secondary': #9EA4BD,
-    'tertiary': #FF75AC,
-    'green': #22BF4E,
-    'yellow': #FDA640,
-    'red': #E33131,
-    'argentum': #A3A3A3,
-    'aurum': #BFA45E,
-    'platinum': #F1F1F1,
-    'bg': #11131C,
-    'bg-light': #1C202E,
-    'bg-dark': #1C202E,
-    'bg-dark-grey': #1A1A1A,
-    'bg-black': #000,
-  ), $overrides);
+  $colors: map.merge(
+    (
+      'accent': #f40552,
+      'primary': #f1f1e4,
+      'secondary': #9ea4bd,
+      'tertiary': #ff75ac,
+      'green': #22bf4e,
+      'yellow': #fda640,
+      'red': #e33131,
+      'argentum': #a3a3a3,
+      'aurum': #bfa45e,
+      'platinum': #f1f1f1,
+      'bg': #11131c,
+      'bg-light': #1c202e,
+      'bg-dark': #1c202e,
+      'bg-dark-grey': #1a1a1a,
+      'bg-black': #000,
+    ),
+    $overrides
+  );
 
   @each $colorName, $colorValue in $colors {
     @include define-color($colorName, $colorValue, $bg, $fg);
@@ -170,7 +166,7 @@ $cfxuiColorAlpha: (
   --color-#{$name}: #{$color};
 }
 
-@function color-token($name, ) {
+@function color-token($name) {
   @return var(--color-#{$name});
 }
 
@@ -207,18 +203,18 @@ $cfxuiColorAlpha: (
     $transition: ();
 
     @each $property in $props {
-      $transition: list.append(
-          $transition, ($property .25s ease), $separator: comma
-      );
+      $transition: list.append($transition, ($property 0.25s ease), $separator: comma);
     }
     #{$subClass} {
-      transition: $transition,
+      transition:
+        $transition,
         outline-offset 0s,
         outline 0s;
     }
   } @else {
     #{$subClass} {
-      transition: #{$props} .25s ease,
+      transition:
+        #{$props} 0.25s ease,
         outline-offset 0s,
         outline 0s;
     }
@@ -227,7 +223,7 @@ $cfxuiColorAlpha: (
 
 @mixin fake-backdrop-blur($topLayer: false, $topLayerBlend: false, $topLayerSize: false, $topLayerAttachement: false) {
   --over-backdrop-color: var(--backdrop-color, transparent);
-  --over-backdrop-image-blur: var(--backdrop-image-blur, url("assets/images/bg2-blur.png"));
+  --over-backdrop-image-blur: var(--backdrop-image-blur, url('assets/images/bg2-blur.png'));
 
   @if not $topLayer {
     $topLayer: linear-gradient(use('over-backdrop-color'), use('over-backdrop-color'));
@@ -247,10 +243,8 @@ $cfxuiColorAlpha: (
 
   background-color: use('over-backdrop-color');
   background-image:
-    $topLayer,
-    linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
-    use('over-backdrop-image-blur'),
-    use('over-backdrop-image-blur');
+    $topLayer, linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
+    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;
@@ -260,8 +254,8 @@ $offsets: (
   'none': 0px,
   'hairthin': 1px,
   'thin': 2px,
-  'xxsmall': q(.25),
-  'xsmall': q(.5),
+  'xxsmall': q(0.25),
+  'xsmall': q(0.5),
   'small': q(1),
   'normal': q(2),
   'medium': q(2.5),
@@ -293,9 +287,9 @@ $offsets: (
 
   ::-webkit-scrollbar-thumb {
     @include border-radius('pill');
-  
+
     background-color: color-token('scrollbar');
-  
+
     &:hover {
       background-color: color-token('scrollbar-hover');
     }
@@ -311,24 +305,39 @@ $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}
+  &::placeholder {
+    color: $color;
+  }
+
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  &::-moz-placeholder {
+    color: $color;
+  }
+
+  &:-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)}
+  &::placeholder {
+    @include animated($props, $subClass);
+  }
+
+  &::-webkit-input-placeholder {
+    @include animated($props, $subClass);
+  }
+
+  &::-moz-placeholder {
+    @include animated($props, $subClass);
+  }
+
+  &:-ms-input-placeholder {
+    @include animated($props, $subClass);
+  }
 }
 
 $zindexMap: (
@@ -357,10 +366,14 @@ $mediaMap: (
     @if $size == 'initial' {
       @content;
     } @else {
-      @media (width >= calc(map.get($mediaMap, $size) - 1px)) { @content; }
+      @media (width >= calc(map.get($mediaMap, $size) - 1px)) {
+        @content;
+      }
     }
   } @else {
-    @media (min-width: $fix) { @content; }
+    @media (min-width: $fix) {
+      @content;
+    }
   }
 }
 
@@ -369,10 +382,14 @@ $mediaMap: (
     @if $size == 'initial' {
       @content;
     } @else {
-      @media (min-width: map.get($mediaMap, $size)) { @content; }
+      @media (min-width: map.get($mediaMap, $size)) {
+        @content;
+      }
     }
   } @else {
-    @media (min-width: $fix) { @content; }
+    @media (min-width: $fix) {
+      @content;
+    }
   }
 }
 
@@ -398,9 +415,9 @@ $controlHeightsMap: (
 );
 $borderRadiusMap: (
   'none': 0px,
-  'xxsmall': q(.25),
-  'xsmall': q(.5),
-  'small': q(.75),
+  'xxsmall': q(0.25),
+  'xsmall': q(0.5),
+  'small': q(0.75),
   'normal': q(1.5),
   'pill': 9999px,
-)
+);

package/dist/styles-scss/global.scss

@@ -1,5 +1,5 @@
-@use "typography";
-@use "tokens";
+@use 'typography';
+@use 'tokens';
 
 body {
   // Set default font styles
@@ -61,7 +61,7 @@ a {
 
   @include ui.animated;
 
-  &:not([aria-disabled="true"]) {
+  &:not([aria-disabled='true']) {
     text-decoration-color: currentcolor;
 
     &:hover {
@@ -73,19 +73,24 @@ a {
     }
   }
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: .5;
+    opacity: 0.5;
     text-decoration: none;
   }
 
-  &[aria-disabled="true"]:active {
+  &[aria-disabled='true']:active {
     pointer-events: none;
   }
 }
 
 // Default headers styles
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   @include ui.font-family('secondary');
 }
 
@@ -127,7 +132,7 @@ h6 {
 
 kbd {
   font-weight: 300;
-  padding: 2px ui.q(.5);
+  padding: 2px ui.q(0.5);
   background-color: ui.color-token('kbd-background');
   border-radius: 2px;
   border: solid 1px ui.color-token('kbd-border');

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

@@ -1,22 +1,22 @@
-@use "../ui";
+@use '../ui';
 
 $fg: #fffff0;
 $bg: #161923;
 $colors: (
-  'accent': #F40552,
-  'primary': #F1F1E4,
-  'secondary': #9EA4BD,
-  'tertiary': #FF75AC,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
-  'bg': #11131C,
-  'bg-light': #1C202E,
-  'bg-dark': #1C202E,
-  'bg-dark-grey': #1A1A1A,
+  'accent': #f40552,
+  'primary': #f1f1e4,
+  'secondary': #9ea4bd,
+  'tertiary': #ff75ac,
+  'green': #22bf4e,
+  'yellow': #fda640,
+  'red': #e33131,
+  'argentum': #a3a3a3,
+  'aurum': #bfa45e,
+  'platinum': #f1f1f1,
+  'bg': #11131c,
+  'bg-light': #1c202e,
+  'bg-dark': #1c202e,
+  'bg-dark-grey': #1a1a1a,
   'bg-black': #000,
 );
 

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

@@ -1,22 +1,22 @@
-@use "../ui";
+@use '../ui';
 
 $fg: #fffff0;
 $bg: #161923;
 $colors: (
-  'accent': #5B8F22,
-  'primary': #FFF,
-  'secondary': #ABABAB,
-  'tertiary': #BBE093,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
+  'accent': #5b8f22,
+  'primary': #fff,
+  'secondary': #ababab,
+  'tertiary': #bbe093,
+  'green': #22bf4e,
+  'yellow': #fda640,
+  'red': #e33131,
+  'argentum': #a3a3a3,
+  'aurum': #bfa45e,
+  'platinum': #f1f1f1,
   'bg': #000,
   'bg-light': #252525,
   'bg-dark': #131313,
-  'bg-dark-grey': #1A1A1A,
+  'bg-dark-grey': #1a1a1a,
   'bg-black': #000,
 );
 

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

@@ -1,22 +1,22 @@
-@use "../ui";
+@use '../ui';
 
 $fg: #fffff0;
 $bg: #161923;
 $colors: (
-  'accent': #D80D0D,
-  'primary': #F1F1E4,
-  'secondary': #ABABAB,
-  'tertiary': #F68888,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
+  'accent': #d80d0d,
+  'primary': #f1f1e4,
+  'secondary': #ababab,
+  'tertiary': #f68888,
+  'green': #22bf4e,
+  'yellow': #fda640,
+  'red': #e33131,
+  'argentum': #a3a3a3,
+  'aurum': #bfa45e,
+  'platinum': #f1f1f1,
   'bg': #000,
   'bg-light': #252525,
   'bg-dark': #131313,
-  'bg-dark-grey': #1A1A1A,
+  'bg-dark-grey': #1a1a1a,
   'bg-black': #000,
 );
 

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

@@ -1,4 +1,4 @@
-@use "../ui";
+@use '../ui';
 
 $fg: #fffff0;
 $bg: #161923;
@@ -6,17 +6,17 @@ $colors: (
   'accent': #444,
   'primary': #202123,
   'secondary': #797979,
-  'tertiary': #9D9D9D,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
-  'bg': #FFF,
-  'bg-light': #DADADA,
-  'bg-dark': #DADADA,
-  'bg-dark-grey': #1A1A1A,
+  'tertiary': #9d9d9d,
+  'green': #22bf4e,
+  'yellow': #fda640,
+  'red': #e33131,
+  'argentum': #a3a3a3,
+  'aurum': #bfa45e,
+  'platinum': #f1f1f1,
+  'bg': #fff,
+  'bg-light': #dadada,
+  'bg-dark': #dadada,
+  'bg-dark-grey': #1a1a1a,
   'bg-black': #444,
 );
 

package/dist/styles-scss/themes.scss

@@ -1,4 +1,4 @@
-@use "./themes/theme_cfx";
-@use "./themes/theme_fivem";
-@use "./themes/theme_redm";
-@use "./themes/theme_wireframe";
+@use './themes/theme_cfx';
+@use './themes/theme_fivem';
+@use './themes/theme_redm';
+@use './themes/theme_wireframe';