Fix portrait background colors

components/reps/CharacterRep/index.module.scss

@@ -47,32 +47,32 @@
     }
 
     &.fire {
-      background: var(--fire-hover-bg);
+      background: var(--fire-portrait-bg);
       border-color: var(--fire-bg);
     }
 
     &.water {
-      background: var(--water-hover-bg);
+      background: var(--water-portrait-bg);
       border-color: var(--water-bg);
     }
 
     &.wind {
-      background: var(--wind-hover-bg);
+      background: var(--wind-portrait-bg);
       border-color: var(--wind-bg);
     }
 
     &.earth {
-      background: var(--earth-hover-bg);
+      background: var(--earth-portrait-bg);
       border-color: var(--earth-bg);
     }
 
     &.light {
-      background: var(--light-hover-bg);
+      background: var(--light-portrait-bg);
       border-color: var(--light-bg);
     }
 
     &.dark {
-      background: var(--dark-hover-bg);
+      background: var(--dark-portrait-bg);
       border-color: var(--dark-bg);
     }
 

styles/themes.scss

@@ -173,6 +173,7 @@
 
   --wind-bg: #{$wind--bg--light};
   --wind-bg-hover: #{$wind--bg--hover--light};
+  --wind-portrait-bg: #{$wind--portrait--bg--light};
   --wind-text: #{$wind--text--light};
   --wind-raid-text: #{$wind--text--raid--light};
   --wind-text-hover: #{$wind--text--hover--light};
@@ -181,6 +182,7 @@
 
   --fire-bg: #{$fire--bg--light};
   --fire-bg-hover: #{$fire--bg--hover--light};
+  --fire-portrait-bg: #{$fire--portrait--bg--light};
   --fire-text: #{$fire--text--light};
   --fire-raid-text: #{$fire--text--raid--light};
   --fire-text-hover: #{$fire--text--hover--light};
@@ -189,6 +191,7 @@
 
   --water-bg: #{$water--bg--light};
   --water-bg-hover: #{$water--bg--hover--light};
+  --water-portrait-bg: #{$water--portrait--bg--light};
   --water-text: #{$water--text--light};
   --water-raid-text: #{$water--text--raid--light};
   --water-text-hover: #{$water--text--hover--light};
@@ -197,6 +200,7 @@
 
   --earth-bg: #{$earth--bg--light};
   --earth-bg-hover: #{$earth--bg--hover--light};
+  --earth-portrait-bg: #{$earth--portrait--bg--light};
   --earth-text: #{$earth--text--light};
   --earth-raid-text: #{$earth--text--raid--light};
   --earth-text-hover: #{$earth--text--hover--light};
@@ -205,6 +209,7 @@
 
   --dark-bg: #{$dark--bg--light};
   --dark-bg-hover: #{$dark--bg--hover--light};
+  --dark-portrait-bg: #{$dark--portrait--bg--light};
   --dark-text: #{$dark--text--light};
   --dark-raid-text: #{$dark--text--raid--light};
   --dark-text-hover: #{$dark--text--hover--light};
@@ -213,6 +218,7 @@
 
   --light-bg: #{$light--bg--light};
   --light-bg-hover: #{$light--bg--hover--light};
+  --light-portrait-bg: #{$light--portrait--bg--light};
   --light-text: #{$light--text--light};
   --light-raid-text: #{$light--text--raid--light};
   --light-text-hover: #{$light--text--hover--light};
@@ -399,6 +405,7 @@
 
   --wind-bg: #{$wind--bg--dark};
   --wind-bg-hover: #{$wind--bg--hover--dark};
+  --wind-portrait-bg: #{$wind--portrait--bg--dark};
   --wind-text: #{$wind--text--dark};
   --wind-raid-text: #{$wind--text--raid--dark};
   --wind-text-hover: #{$wind--text--hover--dark};
@@ -407,6 +414,7 @@
 
   --fire-bg: #{$fire--bg--dark};
   --fire-bg-hover: #{$fire--bg--hover--dark};
+  --fire-portrait-bg: #{$fire--portrait--bg--dark};
   --fire-text: #{$fire--text--dark};
   --fire-raid-text: #{$fire--text--raid--dark};
   --fire-text-hover: #{$fire--text--hover--dark};
@@ -415,6 +423,7 @@
 
   --water-bg: #{$water--bg--dark};
   --water-bg-hover: #{$water--bg--hover--dark};
+  --water-portrait-bg: #{$water--portrait--bg--dark};
   --water-text: #{$water--text--dark};
   --water-raid-text: #{$water--text--raid--dark};
   --water-text-hover: #{$water--text--hover--dark};
@@ -423,6 +432,7 @@
 
   --earth-bg: #{$earth--bg--dark};
   --earth-bg-hover: #{$earth--bg--hover--dark};
+  --earth-portrait-bg: #{$earth--portrait--bg--dark};
   --earth-text: #{$earth--text--dark};
   --earth-raid-text: #{$earth--text--raid--dark};
   --earth-text-hover: #{$earth--text--hover--dark};
@@ -431,6 +441,7 @@
 
   --dark-bg: #{$dark--bg--dark};
   --dark-bg-hover: #{$dark--bg--hover--dark};
+  --dark-portrait-bg: #{$dark--portrait--bg--dark};
   --dark-text: #{$dark--text--dark};
   --dark-raid-text: #{$dark--text--raid--dark};
   --dark-text-hover: #{$dark--text--hover--dark};
@@ -439,6 +450,7 @@
 
   --light-bg: #{$light--bg--dark};
   --light-bg-hover: #{$light--bg--hover--dark};
+  --light-portrait-bg: #{$light--portrait--bg--dark};
   --light-text: #{$light--text--dark};
   --light-raid-text: #{$light--text--raid--dark};
   --light-text-hover: #{$light--text--hover--dark};

styles/variables.scss

@@ -450,6 +450,9 @@ $tag--text--dark: $grey-50;
 $wind--bg--light: $wind-bg-10;
 $wind--bg--dark: $wind-bg-10;
 
+$wind--portrait--bg--light: $wind-bg-20;
+$wind--portrait--bg--dark: $wind-bg-20;
+
 $wind--bg--hover--light: $wind-bg-00;
 $wind--bg--hover--dark: $wind-bg-00;
 
@@ -494,6 +497,9 @@ $null--shadow--dark--hover: fade-out($grey-10, 0.3);
 $fire--bg--light: $fire-bg-10;
 $fire--bg--dark: $fire-bg-10;
 
+$fire--portrait--bg--light: $fire-bg-20;
+$fire--portrait--bg--dark: $fire-bg-20;
+
 $fire--bg--hover--light: $fire-bg-00;
 $fire--bg--hover--dark: $fire-bg-00;
 
@@ -516,6 +522,9 @@ $fire--shadow--dark--hover: fade-out($fire-text-00, 0.3);
 $water--bg--light: $water-bg-10;
 $water--bg--dark: $water-bg-10;
 
+$water--portrait--bg--light: $water-bg-20;
+$water--portrait--bg--dark: $water-bg-20;
+
 $water--bg--hover--light: $water-bg-00;
 $water--bg--hover--dark: $water-bg-00;
 
@@ -538,6 +547,9 @@ $water--shadow--dark--hover: fade-out($water-text-00, 0.3);
 $earth--bg--light: $earth-bg-10;
 $earth--bg--dark: $earth-bg-10;
 
+$earth--portrait--bg--light: $earth-bg-20;
+$earth--portrait--bg--dark: $earth-bg-20;
+
 $earth--bg--hover--light: $earth-bg-00;
 $earth--bg--hover--dark: $earth-bg-00;
 
@@ -560,6 +572,9 @@ $earth--shadow--dark--hover: fade-out($earth-text-00, 0.3);
 $dark--bg--light: $dark-bg-10;
 $dark--bg--dark: $dark-bg-10;
 
+$dark--portrait--bg--light: $dark-bg-20;
+$dark--portrait--bg--dark: $dark-bg-20;
+
 $dark--bg--hover--light: $dark-bg-00;
 $dark--bg--hover--dark: $dark-bg-00;
 
@@ -582,6 +597,9 @@ $dark--shadow--dark--hover: fade-out($dark-text-00, 0.3);
 $light--bg--light: $light-bg-10;
 $light--bg--dark: $light-bg-10;
 
+$light--portrait--bg--light: $light-bg-20;
+$light--portrait--bg--dark: $light-bg-20;
+
 $light--bg--hover--light: $light-bg-00;
 $light--bg--hover--dark: $light-bg-00;