feat: Remove some css vars

BREAKING CHANGE:
- Remove some css vars. You should use semantic var instead. List of removed css vars :

```
--invertedBackgroundColor
--invertedContrastTextColor
--spinnerColor
--linkColor
--linkTextDecoration
--linkColorActive
--invertedTabsActiveTextColor
--invertedTabsInactiveTextColor
--invertedTabsIndicatorColor
--invertedTabsBackgroundColor
--regularButtonPrimaryColor
--regularButtonSecondaryColor
--regularButtonActiveColor
--regularButtonConstrastColor
--secondaryButtonPrimaryColor
--secondaryButtonSecondaryColor
--secondaryButtonActiveColor
--secondaryButtonContrastColor
--dividerColor2
--iconColor
--textIconColor
--actionMenuIconColor
--neutralBackground
--buttonTextTransform
--buttonBorderRadius
--alertErrorColor
--alertErrorBackgroundColor
--alertSuccessColor
--alertSuccessBackgroundColor
--alertInfoColor
--alertInfoBackgroundColor
```

Author: JF-Cozy

react/HistoryRow/styles.styl

@@ -30,7 +30,7 @@ HISTORYROWMEDIA_PADDING=1rem
 
 .HistoryRowMedia::before
     content ''
-    border-left 1px var(--dividerColor2) dashed
+    border-left 1px var(--coolGrey) dashed
     position absolute
     margin-left 20px
     top CIRCLE_HEIGHT + HISTORYROWMEDIA_PADDING

react/Icon/styles.styl

@@ -1,7 +1,7 @@
 @require 'settings/icons.styl'
 
 .icon
-    fill var(--iconColor)
+    fill currentColor
     // Fix blurry icons on Firefox
     transform translateZ(0)
 

react/Spinner/index.jsx

@@ -69,7 +69,7 @@ Spinner.defaultProps = {
   loadingType: '',
   middle: false,
   noMargin: false,
-  color: 'var(--spinnerColor)',
+  color: 'var(--primaryColor)',
   size: 'medium',
   className: ''
 }

react/deprecated/Infos/styles.styl

@@ -14,7 +14,7 @@
         background-color var(--primaryColorLightBackground)
 
     &.Infos--secondary
-        background-color var(--neutralBackground)
+        background-color var(--paleGrey)
 
     &.Infos--danger
         background-color var(--errorBackground)

stylus/components/action-menu.styl

@@ -8,7 +8,7 @@ $smallScreenPaddingTop=.5rem
 $actionmenu
     @extend $popover
     color var(--primaryTextColor)
-    --iconColor: var(--actionMenuIconColor)
+    --iconColor: var(--slateGrey)
     padding-bottom rem(9)
     padding-bottom env(safe-area-inset-bottom)
 

stylus/components/alerts.styl

@@ -70,13 +70,13 @@ $alert-title
     font-weight bold
 
 $alert--error
-    color var(--alertErrorColor)
-    background-color var(--alertErrorBackgroundColor)
+    color var(--white)
+    background-color var(--errorColor)
 
 $alert--success
-    color var(--alertSuccessColor)
-    background-color var(--alertSuccessBackgroundColor)
+    color var(--white)
+    background-color var(--successColor)
 
 $alert--info
-    color var(--alertInfoColor)
-    background-color var(--alertInfoBackgroundColor)
+    color var(--white)
+    background-color var(--slateGrey)

stylus/components/button.styl

@@ -9,16 +9,16 @@ palette=json('../settings/palette.json', { hash: true })
   Variants
 \*------------------------------------*/
 regularTheme = {
-    primaryColor: var(--regularButtonPrimaryColor),
-    secondaryColor: var(--regularButtonSecondaryColor),
-    activeColor: var(--regularButtonActiveColor),
-    contrastColor: var(--regularButtonConstrastColor)
+    primaryColor: var(--primaryColor),
+    secondaryColor: var(--primaryColor),
+    activeColor: var(--primaryColorDark),
+    contrastColor: var(--primaryContrastTextColor)
 }
 secondaryTheme = {
-    primaryColor: var(--secondaryButtonPrimaryColor),
-    secondaryColor: var(--secondaryButtonSecondaryColor),
-    activeColor: var(--secondaryButtonActiveColor),
-    contrastColor: var(--secondaryButtonContrastColor)
+    primaryColor: var(--white),
+    secondaryColor: var(--silver),
+    activeColor: var(--silver),
+    contrastColor: var(--black)
 }
 ghostTheme = {
     primaryColor: var(--zircon), secondaryColor: palette['frenchPass'], activeColor: palette['frenchPass'], contrastColor: var(--primaryColor)
@@ -73,7 +73,7 @@ $button
     margin           0 rem(4)
     border-width     rem(1)
     border-style     solid
-    border-radius    var(--buttonBorderRadius)
+    border-radius    rem(2)
     min-height       rem(40)
     min-width        rem(112)
     padding          rem(3 16)
@@ -82,7 +82,7 @@ $button
     font-size        rem(14)
     font-weight      bold
     line-height      1
-    text-transform   var(--buttonTextTransform)
+    text-transform   uppercase
     text-decoration  none
     cursor           pointer
     align-items      center

stylus/components/tabs.styl

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

stylus/settings/palette.json

@@ -16,7 +16,7 @@
   "info": "var(--infoColor)",
   "errorBackground": "var(--errorBackground)",
   "primaryBackgroundLight": "var(--primaryBackgroundLight)",
-  "neutralBackground": "var(--neutralBackground)",
+  "neutralBackground": "var(--paleGrey)",
   "zircon": "#F5FAFF",
   "frenchPass": "#C2DCFF",
   "dodgerBlue": "#297EF2",

stylus/settings/palettes.styl

@@ -139,4 +139,5 @@ html
     --fuchsia      #FC4C83
     --pomegranate  #F52D2D
     --monza        #DD0505
+
 // @stylint on