@cfx-dev/ui-components 4.3.1 → 4.3.3

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 {

package/dist/styles-scss/themes.scss

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