fix: adding new colors

Signed-off-by: Antonio Sonis <[email protected]>
platformatic · Nov 5, 2024 · b5e3048 · b5e3048
1 parent d2128df
commit b5e3048
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 5 deletions.
diff --git a/src/components/Button.module.css b/src/components/Button.module.css
@@ -72,6 +72,12 @@
 .color-fluorescent-cyan {
   @apply text-fluorescent-cyan border-fluorescent-cyan;
 }
+.color-electric-purple {
+  @apply text-electric-purple border-electric-purple;
+}
+.color-giants-orange {
+  @apply text-giants-orange border-giants-orange;
+}
 .no-border {
   @apply border-0;
 }
@@ -114,6 +120,12 @@
 .hover-box-shadow-fluorescent-cyan {
   @apply hover:shadow-fluorescent-cyan;
 }
+.hover-box-shadow-electric-purple {
+  @apply hover:shadow-electric-purple;
+}
+.hover-box-shadow-giants-orange {
+  @apply hover:shadow-giants-orange;
+}
 
 .underline-effect {
   @apply hover:underline;

diff --git a/src/components/ButtonOnlyIcon.module.css b/src/components/ButtonOnlyIcon.module.css
@@ -72,6 +72,12 @@
 .color-fluorescent-cyan{
   @apply text-fluorescent-cyan border-fluorescent-cyan;
 }
+.color-electric-purple {
+  @apply text-electric-purple border-electric-purple;
+}
+.color-giants-orange {
+  @apply text-giants-orange border-giants-orange;
+}
 
 .no-border {
   @apply border-0;
@@ -115,6 +121,12 @@
 .hover-box-shadow-fluorescent-cyan {
   @apply hover:shadow-fluorescent-cyan;
 }
+.hover-box-shadow-electric-purple {
+  @apply hover:shadow-electric-purple;
+}
+.hover-box-shadow-giants-orange {
+  @apply hover:shadow-giants-orange;
+}
 
 .underline-effect {
   @apply hover:underline;

diff --git a/src/components/Common.module.css b/src/components/Common.module.css
@@ -31,6 +31,12 @@
 .bordered--fluorescent-cyan {
   @apply border-fluorescent-cyan;
 }
+.bordered--electric-purple {
+  @apply border-electric-purple;
+}
+.bordered--giants-orange {
+  @apply border-giants-orange;
+}
 .bordered--transparent {
   @apply border-none;
 }
@@ -64,6 +70,12 @@
 .bordered--fluorescent-cyan-100 {
   @apply border-fluorescent-cyan/100;
 }
+.bordered--electric-purple-100 {
+  @apply border-electric-purple/100;
+}
+.bordered--giants-orange-100 {
+  @apply border-giants-orange/100;
+}
 .bordered--main-green-70 {
   @apply border-main-green/70;
 }
@@ -94,6 +106,12 @@
 .bordered--fluorescent-cyan-70 {
   @apply border-fluorescent-cyan/70;
 }
+.bordered--electric-purple-70 {
+  @apply border-electric-purple/70;
+}
+.bordered--giants-orange-70 {
+  @apply border-giants-orange/70;
+}
 .bordered--main-green-30 {
   @apply border-main-green/30;
 }
@@ -121,6 +139,12 @@
 .bordered--fluorescent-cyan-30 {
   @apply border-fluorescent-cyan/30;
 }
+.bordered--electric-purple-30 {
+  @apply border-electric-purple/30;
+}
+.bordered--giants-orange-30 {
+  @apply border-giants-orange/30;
+}
 .bordered--tertiary-blue-30 {
   @apply border-tertiary-blue/30;
 }
@@ -151,6 +175,12 @@
 .bordered--fluorescent-cyan-20 {
   @apply border-fluorescent-cyan/20;
 }
+.bordered--electric-purple-20 {
+  @apply border-electric-purple/20;
+}
+.bordered--giants-orange-20 {
+  @apply border-giants-orange/20;
+}
 .bordered--tertiary-blue-20 {
   @apply border-tertiary-blue/20;
 }
@@ -169,6 +199,12 @@
 .bordered--fluorescent-cyan-15 {
   @apply border-fluorescent-cyan/15;
 }
+.bordered--electric-purple-15 {
+  @apply border-electric-purple/15;
+}
+.bordered--giants-orange-15 {
+  @apply border-giants-orange/15;
+}
 .bordered--tertiary-blue-15 {
   @apply border-tertiary-blue/15;
 }
@@ -187,6 +223,12 @@
 .bordered--fluorescent-cyan-10 {
   @apply border-fluorescent-cyan/10;
 }
+.bordered--electric-purple-10 {
+  @apply border-electric-purple/10;
+}
+.bordered--giants-orange-10 {
+  @apply border-giants-orange/10;
+}
 .bordered--tertiary-blue-10 {
   @apply border-tertiary-blue/10;
 }
@@ -248,6 +290,12 @@
 .text--fluorescent-cyan {
   @apply text-fluorescent-cyan;
 }
+.text--giants-orange {
+  @apply text-giants-orange;
+}
+.text--electric-purple {
+  @apply text-electric-purple;
+}
 .text--rich-black-70 {
   @apply text-rich-black/70;
 }
@@ -257,7 +305,12 @@
 .text--fluorescent-cyan-70 {
   @apply text-fluorescent-cyan/70;
 }
-
+.text--giants-orange-70 {
+  @apply text-giants-orange/70;
+}
+.text--electric-purple-70 {
+  @apply text-electric-purple/70;
+}
 .text--base {
   @apply text-base
 }
@@ -301,9 +354,16 @@
 .background-color-fluorescent-cyan {
   @apply bg-fluorescent-cyan ;
 }
+.background-color-giants-orange {
+  @apply bg-giants-orange ;
+}
+.background-color-electric-purple {
+  @apply bg-electric-purple ;
+}
 .background-color-black-russian {
   @apply bg-black-russian ;
 }
+
 .background-color-night {
   @apply bg-night ;
 }
@@ -394,6 +454,12 @@
 .hover-background-color-opaque-fluorescent-cyan{
   @apply hover:bg-fluorescent-cyan hover:bg-opacity-15;
 }
+.hover-background-color-opaque-giants-orange{
+  @apply hover:bg-giants-orange hover:bg-opacity-15;
+}
+.hover-background-color-opaque-electric-purple{
+  @apply hover:bg-electric-purple hover:bg-opacity-15;
+}
 .hover-background-color-opaque-night{
   @apply hover:bg-night hover:bg-opacity-15;
 }
@@ -424,6 +490,12 @@
 .selected-background-color-fluorescent-cyan {
   @apply !bg-fluorescent-cyan bg-opacity-15;
 }
+.selected-background-color-electric-purple {
+  @apply !bg-electric-purple bg-opacity-15;
+}
+.selected-background-color-giants-orange {
+  @apply !bg-giants-orange bg-opacity-15;
+}
 .selected-background-color-night {
   @apply !bg-night bg-opacity-15;
 }

diff --git a/src/components/constants.js b/src/components/constants.js
@@ -16,6 +16,8 @@ export const ANTI_FLASH_WHITE = 'anti-flash-white'
 export const FIRE_ENGINE_RED = 'fire-engine-red'
 export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
 export const FLUORESCENT_CYAN = 'fluorescent-cyan'
+export const GIANTS_ORANGE = 'giants-orange'
+export const ELECTRIC_PURPLE = 'electric-purple'
 
 export const NONE = 'none'
 export const MINI = 'mini'
@@ -38,9 +40,9 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
 
-export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN]
-export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN]
-export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN]
+export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
+export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
+export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
 
 export const MODAL_POPUP = 'popup'
 export const MODAL_POPUP_V2 = 'popup-v2'

diff --git a/src/components/icons/Icons.module.css b/src/components/icons/Icons.module.css
@@ -127,6 +127,40 @@
 }
 
 
+.giants-orange > circle,
+.giants-orange > ellipse,
+.giants-orange > rect,
+.giants-orange > line, 
+.giants-orange > path {
+  @apply stroke-giants-orange;
+}
+
+.important-giants-orange > circle,
+.important-giants-orange > ellipse,
+.important-giants-orange > rect,
+.important-giants-orange > line, 
+.important-giants-orange > path {
+  @apply !stroke-giants-orange;
+}
+
+
+.electric-purple > circle,
+.electric-purple > ellipse,
+.electric-purple > rect,
+.electric-purple > line, 
+.electric-purple > path {
+  @apply stroke-electric-purple;
+}
+
+.important-electric-purple > circle,
+.important-electric-purple > ellipse,
+.important-electric-purple > rect,
+.important-electric-purple > line, 
+.important-electric-purple > path {
+  @apply !stroke-electric-purple;
+}
+
+
 .filled-rich-black {
   @apply fill-rich-black;
 }
@@ -151,6 +185,12 @@
 .filled-fluorescent-cyan {
   @apply fill-fluorescent-cyan;
 }
+.filled-giants-orange {
+  @apply fill-giants-orange;
+}
+.filled-electric-purple {
+  @apply fill-electric-purple;
+}
 
 
 .fill-circle-green > circle {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -52,7 +52,9 @@ module.exports = {
       'anti-flash-white': '#EDEDED',
       'fire-engine-red': '#D71919',
       'alternate-rich-black': '#12171D',
-      'fluorescent-cyan': '#44FFEC'
+      'fluorescent-cyan': '#44FFEC',
+      'giants-orange': '#FA6221'
+
     },
     fontFamily: {
       sans: ['Montserrat'],