Merge pull request #1497 from cozy/inverted-override

react/CozyTheme/styles.styl

@@ -1,20 +1,24 @@
 $translucentWhite1=rgba(255, 255, 255, 0.24)
 $translucentWhite2=rgba(255, 255, 255, 0.88)
 
+:root
+    --invertedBackgroundColor: var(--primaryColor)
+    --invertedContrastTextColor: var(--primaryContrastTextColor)
+
 .CozyTheme--inverted
-    background: var(--primaryColor)
+    background: var(--invertedBackgroundColor)
 
-    --primaryTextColor: var(--primaryContrastTextColor)
-    --secondaryTextColor: var(--primaryContrastTextColor)
-    --barIconColor var(--primaryContrastTextColor)
+    --primaryTextColor: var(--invertedContrastTextColor)
+    --secondaryTextColor: var(--invertedContrastTextColor)
+    --barIconColor var(--invertedContrastTextColor)
     --barIconColorDisabled $translucentWhite2
 
-    --regularButtonPrimaryColor: var(--primaryContrastTextColor)
-    --regularButtonSecondaryColor: var(--primaryContrastTextColor)
+    --regularButtonPrimaryColor: var(--invertedContrastTextColor)
+    --regularButtonSecondaryColor: var(--invertedContrastTextColor)
     --regularButtonActiveColor: $translucentWhite2
-    --regularButtonConstrastColor: var(--primaryColor)
+    --regularButtonConstrastColor: var(--invertedBackgroundColor)
 
-    --secondaryButtonPrimaryColor: var(--primaryColor)
-    --secondaryButtonSecondaryColor: var(--white)
+    --secondaryButtonPrimaryColor: var(--invertedBackgroundColor)
+    --secondaryButtonSecondaryColor: var(--invertedContrastTextColor)
     --secondaryButtonActiveColor: $translucentWhite1
-    --secondaryButtonContrastColor: var(--white)
+    --secondaryButtonContrastColor: var(--invertedContrastTextColor)

stylus/components/tabs.styl

@@ -10,10 +10,10 @@ $tabs-base
         display flex
 
     .coz-tab-list--inverted
-        --tabsActiveTextColor var(--primaryContrastTextColor)
-        --tabsInactiveTextColor var(--primaryContrastTextColor)
-        --tabsIndicatorColor var(--primaryContrastTextColor)
-        --tabsBackgroundColor var(--primaryColor)
+        --tabsActiveTextColor var(--invertedTabsActiveTextColor)
+        --tabsInactiveTextColor var(--invertedTabsInactiveTextColor)
+        --tabsIndicatorColor var(--invertedTabsIndicatorColor)
+        --tabsBackgroundColor var(--invertedTabsBackgroundColor)
 
     .coz-tab
         flex           0 0 auto

stylus/settings/palette.styl

@@ -163,6 +163,11 @@
     --secondaryTextColor var(--coolGrey)
     --primaryContrastTextColor var(--white)
 
+    --invertedTabsActiveTextColor var(--primaryContrastTextColor)
+    --invertedTabsInactiveTextColor var(--primaryContrastTextColor)
+    --invertedTabsIndicatorColor var(--primaryContrastTextColor)
+    --invertedTabsBackgroundColor var(--primaryColor)
+
     --regularButtonPrimaryColor: var(--primaryColor)
     --regularButtonSecondaryColor: var(--primaryColor)
     --regularButtonActiveColor: var(--primaryColorDark)