@cfx-dev/ui-components 2.1.24 → 3.0.1

package/dist/styles-scss/global.scss

@@ -1,142 +1,142 @@
-@import "typography";
-@import "tokens";
-
-body {
-  // initiat tokens
-  @include color-tokens;
-  @include offset-tokens;
-  @include control-height-tokens;
-  @include text-tokens;
-  @include border-radius-tokens;
-  @include switch-tokens;
-  @include input-dropzone-tokens;
-  @include checkbox-tokens;
-  @include input-tokens;
-  @include select-tokens;
-  @include icon-tokens;
-  @include info-panel-tokens;
-  @include tabular-tokens;
-  @include modal-tokens;
-  @include scrollable-tokens;
-  @include avatar-tokens;
-  @include title-tokens;
-  @include button-tokens;
-  @include badge-tokens;
-  @include accordion-tokens;
-  @include mp-tokens;
-  @include anchor-tokens;
-
-  // initiat fonts
-  @include 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 {
-  display: inline-flex;
-  color: ui.color-token('anchor-color');
-  cursor: pointer;
-  text-decoration: underline;
-
-  @include ui.animated();
-
-  &:not([aria-disabled="true"]) {
-    text-decoration-color: currentColor;
-
-    &:hover {
-      text-decoration-color: ui.color-token('anchor-decoration-color-hover');
-    }
-  }
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: .5;
-    text-decoration: none;
-  }
-
-  &[aria-disabled="true"]:active {
-    pointer-events: none;
-  }
-}
-
-// Default headers styles
-h1, h2, h3, h4, h5, h6 {
-  @include ui.font-family('secondary');
-}
-
-h1 {
-  @include ui.font-size('xxxlarge');
-  @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');
-  @include ui.font-weight('normal');
-}
-
-kbd {
-  font-weight: 300;
-  padding: 2px ui.q(.5);
-  background-color: ui.color-token('kbd-background');
-  border-radius: 2px;
-  border: solid 1px ui.color-token('kbd-border');
-}
-
-p {
-  margin: ui.offset('small') 0;
-}
-
-li::marker {
-  color: ui.color-token('li-marker');
-}
-
-// Utilities
-.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;
-}
+@import "typography";
+@import "tokens";
+
+body {
+  // initiat tokens
+  @include color-tokens;
+  @include offset-tokens;
+  @include control-height-tokens;
+  @include text-tokens;
+  @include border-radius-tokens;
+  @include switch-tokens;
+  @include input-dropzone-tokens;
+  @include checkbox-tokens;
+  @include input-tokens;
+  @include select-tokens;
+  @include icon-tokens;
+  @include info-panel-tokens;
+  @include tabular-tokens;
+  @include modal-tokens;
+  @include scrollable-tokens;
+  @include avatar-tokens;
+  @include title-tokens;
+  @include button-tokens;
+  @include badge-tokens;
+  @include accordion-tokens;
+  @include mp-tokens;
+  @include anchor-tokens;
+
+  // initiat fonts
+  @include 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 {
+  display: inline-flex;
+  color: ui.color-token('anchor-color');
+  cursor: pointer;
+  text-decoration: underline;
+
+  @include ui.animated();
+
+  &:not([aria-disabled="true"]) {
+    text-decoration-color: currentColor;
+
+    &:hover {
+      text-decoration-color: ui.color-token('anchor-decoration-color-hover');
+    }
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: .5;
+    text-decoration: none;
+  }
+
+  &[aria-disabled="true"]:active {
+    pointer-events: none;
+  }
+}
+
+// Default headers styles
+h1, h2, h3, h4, h5, h6 {
+  @include ui.font-family('secondary');
+}
+
+h1 {
+  @include ui.font-size('xxxlarge');
+  @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');
+  @include ui.font-weight('normal');
+}
+
+kbd {
+  font-weight: 300;
+  padding: 2px ui.q(.5);
+  background-color: ui.color-token('kbd-background');
+  border-radius: 2px;
+  border: solid 1px ui.color-token('kbd-border');
+}
+
+p {
+  margin: ui.offset('small') 0;
+}
+
+li::marker {
+  color: ui.color-token('li-marker');
+}
+
+// Utilities
+.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

@@ -1,32 +1,32 @@
-$fg: #fffff0;
-$bg: #161923;
-
-$theme-cfx-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,
-  'bg-black': #000000,
-);
-
-.cfxui-theme-cfx {
-  // TODO: remove
-  @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-cfx-colors);
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}
+$fg: #fffff0;
+$bg: #161923;
+
+$theme-cfx-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,
+  'bg-black': #000000,
+);
+
+.cfxui-theme-cfx {
+  // TODO: remove
+  @include ui.define-main-colors($bg, $fg);
+
+  @include ui.define-theme($bg, $fg, $theme-cfx-colors);
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

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

@@ -1,32 +1,32 @@
-$fg: #fffff0;
-$bg: #161923;
-
-$theme-fivem-colors: (
-  'accent': #5B8F22,
-  'primary': #FFFFFF,
-  'secondary': #ABABAB,
-  'tertiary': #BBE093,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
-  'bg': #000000,
-  'bg-light': #252525,
-  'bg-dark': #131313,
-  'bg-dark-grey': #1A1A1A,
-  'bg-black': #000000,
-);
-
-.cfxui-theme-fivem {
-  // TODO: remove
-  @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-fivem-colors);
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}
+$fg: #fffff0;
+$bg: #161923;
+
+$theme-fivem-colors: (
+  'accent': #5B8F22,
+  'primary': #FFFFFF,
+  'secondary': #ABABAB,
+  'tertiary': #BBE093,
+  'green': #22BF4E,
+  'yellow': #FDA640,
+  'red': #E33131,
+  'argentum': #A3A3A3,
+  'aurum': #BFA45E,
+  'platinum': #F1F1F1,
+  'bg': #000000,
+  'bg-light': #252525,
+  'bg-dark': #131313,
+  'bg-dark-grey': #1A1A1A,
+  'bg-black': #000000,
+);
+
+.cfxui-theme-fivem {
+  // TODO: remove
+  @include ui.define-main-colors($bg, $fg);
+
+  @include ui.define-theme($bg, $fg, $theme-fivem-colors);
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

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

@@ -1,32 +1,32 @@
-$fg: #fffff0;
-$bg: #161923;
-
-$theme-redm-colors: (
-  'accent': #D80D0D,
-  'primary': #F1F1E4,
-  'secondary': #ABABAB,
-  'tertiary': #F68888,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
-  'bg': #000000,
-  'bg-light': #252525,
-  'bg-dark': #131313,
-  'bg-dark-grey': #1A1A1A,
-  'bg-black': #000000,
-);
-
-.cfxui-theme-redm {
-  // TODO: remove
-  @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-redm-colors);
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}
+$fg: #fffff0;
+$bg: #161923;
+
+$theme-redm-colors: (
+  'accent': #D80D0D,
+  'primary': #F1F1E4,
+  'secondary': #ABABAB,
+  'tertiary': #F68888,
+  'green': #22BF4E,
+  'yellow': #FDA640,
+  'red': #E33131,
+  'argentum': #A3A3A3,
+  'aurum': #BFA45E,
+  'platinum': #F1F1F1,
+  'bg': #000000,
+  'bg-light': #252525,
+  'bg-dark': #131313,
+  'bg-dark-grey': #1A1A1A,
+  'bg-black': #000000,
+);
+
+.cfxui-theme-redm {
+  // TODO: remove
+  @include ui.define-main-colors($bg, $fg);
+
+  @include ui.define-theme($bg, $fg, $theme-redm-colors);
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

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

@@ -1,32 +1,32 @@
-$fg: #fffff0;
-$bg: #161923;
-
-$theme-wireframe-colors: (
-  'accent': #444444,
-  'primary': #202123,
-  'secondary': #797979,
-  'tertiary': #9D9D9D,
-  'green': #22BF4E,
-  'yellow': #FDA640,
-  'red': #E33131,
-  'argentum': #A3A3A3,
-  'aurum': #BFA45E,
-  'platinum': #F1F1F1,
-  'bg': #FFFFFF,
-  'bg-light': #DADADA,
-  'bg-dark': #DADADA,
-  'bg-dark-grey': #1A1A1A,
-  'bg-black': #444444,
-);
-
-.cfxui-theme-wireframe {
-  // TODO: remove
-  @include ui.define-main-colors($bg, $fg);
-
-  @include ui.define-theme($bg, $fg, $theme-wireframe-colors);
-
-  // Invert black indicators for date/time inputs
-  ::-webkit-calendar-picker-indicator {
-    filter: invert(1);
-  }
-}
+$fg: #fffff0;
+$bg: #161923;
+
+$theme-wireframe-colors: (
+  'accent': #444444,
+  'primary': #202123,
+  'secondary': #797979,
+  'tertiary': #9D9D9D,
+  'green': #22BF4E,
+  'yellow': #FDA640,
+  'red': #E33131,
+  'argentum': #A3A3A3,
+  'aurum': #BFA45E,
+  'platinum': #F1F1F1,
+  'bg': #FFFFFF,
+  'bg-light': #DADADA,
+  'bg-dark': #DADADA,
+  'bg-dark-grey': #1A1A1A,
+  'bg-black': #444444,
+);
+
+.cfxui-theme-wireframe {
+  // TODO: remove
+  @include ui.define-main-colors($bg, $fg);
+
+  @include ui.define-theme($bg, $fg, $theme-wireframe-colors);
+
+  // Invert black indicators for date/time inputs
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

package/dist/styles-scss/themes.scss

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