@cfx-dev/ui-components 1.0.0 → 2.0.0

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

@@ -0,0 +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);
+  }
+}

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

@@ -0,0 +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);
+  }
+}

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

@@ -0,0 +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);
+  }
+}

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

@@ -0,0 +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);
+  }
+}

package/dist/styles-scss/themes.scss

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