feat: Add dark mode

react/MuiCozyTheme/makePalette.js

@@ -40,6 +40,44 @@ const opacityByTheme = {
         contrastOpacity: 0.24
       }
     }
+  },
+  dark: {
+    normal: {
+      action: {
+        hoverOpacity: 0.08,
+        selectedOpacity: 0.16,
+        disabledOpacity: 0.32,
+        focusOpacity: 0.24,
+        activatedOpacity: 0.24,
+        ghostOpacity: 0.08,
+        hoverGhostOpacity: 0.16
+      },
+      border: {
+        opacity: 0.24,
+        ghostOpacity: 0.48
+      },
+      background: {
+        contrastOpacity: 0.24
+      }
+    },
+    inverted: {
+      action: {
+        hoverOpacity: 0.04,
+        selectedOpacity: 0.08,
+        disabledOpacity: 0.32,
+        focusOpacity: 0.12,
+        activatedOpacity: 0.12,
+        ghostOpacity: 0.08,
+        hoverGhostOpacity: 0.16
+      },
+      border: {
+        opacity: 0.16,
+        ghostOpacity: 0.48
+      },
+      background: {
+        contrastOpacity: 0.12
+      }
+    }
   }
 }
 

react/MuiCozyTheme/makeTheme.jsx

@@ -5,11 +5,17 @@ import { makeTypography } from './makeTypography'
 import { makeShadows } from './makeShadows'
 import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides'
 import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides'
+import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides'
+import { makeDarkInvertedOverrides } from './overrides/makeDarkInvertedOverrides'
 
 const makeOverridesByTheme = theme => ({
   light: {
     normal: makeLightNormalOverrides(theme),
     inverted: makeLightInvertedOverrides(theme)
+  },
+  dark: {
+    normal: makeDarkNormalOverrides(theme),
+    inverted: makeDarkInvertedOverrides(theme)
   }
 })
 

react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.js

@@ -0,0 +1,5 @@
+import { makeLightInvertedOverrides } from './makeLightInvertedOverrides'
+
+export const makeDarkInvertedOverrides = theme => {
+  return makeLightInvertedOverrides(theme)
+}

react/MuiCozyTheme/overrides/makeDarkNormalOverrides.js

@@ -0,0 +1,5 @@
+import { makeLightNormalOverrides } from './makeLightNormalOverrides'
+
+export const makeDarkNormalOverrides = theme => {
+  return makeLightNormalOverrides(theme)
+}

react/MuiCozyTheme/theme.jsx

@@ -1,12 +1,18 @@
 import { makeTheme } from './makeTheme'
 
-export const normalTheme = makeTheme('light', 'normal')
-export const invertedTheme = makeTheme('light', 'inverted')
+export const lightNormalTheme = makeTheme('light', 'normal')
+export const lightInvertedTheme = makeTheme('light', 'inverted')
+export const darkNormalTheme = makeTheme('dark', 'normal')
+export const darkInvertedTheme = makeTheme('dark', 'inverted')
 
 const themes = {
   light: {
-    normal: normalTheme,
-    inverted: invertedTheme
+    normal: lightNormalTheme,
+    inverted: lightInvertedTheme
+  },
+  dark: {
+    normal: darkNormalTheme,
+    inverted: darkInvertedTheme
   }
 }
 

stylus/settings/palettes.styl

@@ -1,5 +1,7 @@
 @require './themes/light-normal'
 @require './themes/light-inverted'
+@require './themes/dark-normal'
+@require './themes/dark-inverted'
 palette=json('../../theme/palette.json', { hash: true })
 
 // @stylint off

stylus/settings/themes/dark-inverted.styl

@@ -0,0 +1,89 @@
+palette=json('../../../theme/palette.json', { hash: true })
+
+// @stylint off
+
+.CozyTheme--dark-inverted
+    --primaryTextColor alpha(palette.Grey['900'], 0.9)
+    --secondaryTextColor alpha(palette.Grey['900'], 0.48)
+    --disabledTextColor alpha(palette.Grey['900'], 0.32)
+    --hintTextColor alpha(palette.Grey['900'], 0.32)
+    --iconTextColor alpha(palette.Grey['900'], 0.72)
+
+    --actionColorActive alpha(palette.Grey['900'], 0.56)
+    --actionColorHover alpha(palette.Grey['900'], 0.04)
+    --actionColorSelected alpha(palette.Grey['900'], 0.08)
+    --actionColorDisabled alpha(palette.Grey['900'], 0.24)
+    --actionColorDisabledBackground alpha(palette.Grey['900'], 0.12)
+    --actionColorFocus alpha(palette.Grey['900'], 0.12)
+    --actionColorGhost alpha(palette.Grey['900'], 0.08)
+    --actionColorHoverGhost alpha(palette.Grey['900'], 0.16)
+
+    --dividerColor alpha(palette.Grey['900'], 0.12)
+
+    --borderMainColor alpha(palette.Grey['900'], 0.16)
+    --borderDisabledColor alpha(palette.Grey['900'], 0.08)
+    --borderGhostColor alpha(palette.Grey['900'], 0.48)
+    --borderGhostDisabledColor alpha(palette.Grey['900'], 0.16)
+
+    --paperBackgroundColor palette.Primary['400']
+    --defaultBackgroundColor palette.Primary['400']
+    --contrastBackgroundColor alpha(palette.Grey['900'], 0.16)
+
+    --primaryColorLight palette.Grey['700']
+    --primaryColor palette.Grey['800']
+    --primaryColorDark palette.Grey['A400']
+    --primaryContrastTextColor palette.Common['white']
+
+    --secondaryColorLight palette.Grey['700']
+    --secondaryColor palette.Grey['800']
+    --secondaryColorDark palette.Grey['A400']
+    --secondaryContrastTextColor palette.Common['white']
+
+    --errorColorLight palette.Error['700']
+    --errorColor palette.Error['800']
+    --errorColorDark palette.Error['A400']
+    --errorColorContrastText palette.Common['white']
+    --errorBackground palette.Error['A400']
+
+    --warningColorLight palette.Warning['700']
+    --warningColor palette.Warning['800']
+    --warningColorDark palette.Warning['A400']
+    --warningColorContrastText palette.Common['white']
+
+    --successColorLight palette.Success['700']
+    --successColor palette.Success['800']
+    --successColorDark palette.Success['A400']
+    --successColorContrastText palette.Common['white']
+
+    --infoColorLight palette.Info['700']
+    --infoColor palette.Info['800']
+    --infoColorDark palette.Info['A400']
+    --infoColorContrastText palette.Common['white']
+
+    /*
+    The CSS variables below are historic and we should strive not to
+    use them. Prefer to use directly semantic colors above.
+    */
+    --iconColor currentColor
+    --textIconColor palette.Common['white']
+    --actionMenuIconColor palette.Common['white']
+    --barIconColor palette.Common['white']
+    --barIconColorDisabled rgba(255, 255, 255, 0.88)
+
+    --spinnerColor palette.Common['white']
+    --linkColor palette.Common['white']
+    --linkColorActive palette.Common['white']
+    --linkTextDecoration underline
+
+    --regularButtonPrimaryColor palette.Common['white']
+    --regularButtonSecondaryColor palette.Common['white']
+    --regularButtonActiveColor rgba(255, 255, 255, 0.88)
+    --regularButtonConstrastColor palette.Primary['600']
+
+    --secondaryButtonPrimaryColor palette.Primary['600']
+    --secondaryButtonSecondaryColor palette.Common['white']
+    --secondaryButtonActiveColor rgba(255, 255, 255, 0.24)
+    --secondaryButtonContrastColor palette.Common['white']
+
+    --dividerColor2: rgba(255, 255, 255, 0.16)
+// @stylint on

stylus/settings/themes/dark-normal.styl

@@ -0,0 +1,89 @@
+palette=json('../../../theme/palette.json', { hash: true })
+
+// @stylint off
+
+.CozyTheme--dark-normal
+    --primaryTextColor palette.Common['white']
+    --secondaryTextColor alpha(palette.Common['white'], 0.64)
+    --disabledTextColor alpha(palette.Common['white'], 0.4)
+    --hintTextColor alpha(palette.Common['white'], 0.4)
+    --iconTextColor palette.Common['white']
+
+    --actionColorActive palette.Common['white']
+    --actionColorHover alpha(palette.Common['white'], 0.08)
+    --actionColorSelected alpha(palette.Common['white'], 0.16)
+    --actionColorDisabled alpha(palette.Common['white'], 0.32)
+    --actionColorDisabledBackground alpha(palette.Common['white'], 0.12)
+    --actionColorFocus alpha(palette.Common['white'], 0.24)
+    --actionColorGhost alpha(palette.Common['white'], 0.08)
+    --actionColorHoverGhost alpha(palette.Common['white'], 0.16)
+
+    --dividerColor alpha(palette.Common['white'], 0.16)
+
+    --borderMainColor alpha(palette.Common['white'], 0.24)
+    --borderDisabledColor alpha(palette.Common['white'], 0.12)
+    --borderGhostColor alpha(palette.Common['white'], 0.48)
+    --borderGhostDisabledColor alpha(palette.Common['white'], 0.24)
+
+    --paperBackgroundColor palette.Grey['800']
+    --defaultBackgroundColor palette.Grey['A400']
+    --contrastBackgroundColor alpha(palette.Common['white'], 0.072)
+
+    --primaryColorLight palette.Primary['300']
+    --primaryColor palette.Primary['400']
+    --primaryColorDark palette.Primary['500']
+    --primaryContrastTextColor alpha(palette.Grey['900'], 0.9)
+
+    --secondaryColorLight palette.Grey['300']
+    --secondaryColor palette.Grey['400']
+    --secondaryColorDark palette.Grey['500']
+    --secondaryContrastTextColor alpha(palette.Grey['900'], 0.9)
+
+    --errorColorLight palette.Error['300']
+    --errorColor palette.Error['400']
+    --errorColorDark palette.Error['500']
+    --errorColorContrastText alpha(palette.Grey['900'], 0.9)
+    --errorBackground palette.Error['700']
+
+    --warningColorLight palette.Warning['300']
+    --warningColor palette.Warning['400']
+    --warningColorDark palette.Warning['500']
+    --warningColorContrastText alpha(palette.Grey['900'], 0.9)
+
+    --successColorLight palette.Success['300']
+    --successColor palette.Success['400']
+    --successColorDark palette.Success['500']
+    --successColorContrastText alpha(palette.Grey['900'], 0.9)
+
+    --infoColorLight palette.Info['300']
+    --infoColor palette.Info['400']
+    --infoColorDark palette.Info['500']
+    --infoColorContrastText alpha(palette.Grey['900'], 0.9)
+
+    /*
+    The CSS variables below are historic and we should strive not to
+    use them. Prefer to use directly semantic colors above.
+    */
+    --iconColor currentColor
+    --textIconColor palette.Common['white']
+    --actionMenuIconColor palette.Common['white']
+    --barIconColor palette.Common['white']
+    --barIconColorDisabled rgba(255, 255, 255, 0.88)
+
+    --spinnerColor palette.Common['white']
+    --linkColor palette.Common['white']
+    --linkColorActive palette.Common['white']
+    --linkTextDecoration underline
+
+    --regularButtonPrimaryColor palette.Common['white']
+    --regularButtonSecondaryColor palette.Common['white']
+    --regularButtonActiveColor rgba(255, 255, 255, 0.88)
+    --regularButtonConstrastColor palette.Primary['600']
+
+    --secondaryButtonPrimaryColor palette.Primary['600']
+    --secondaryButtonSecondaryColor palette.Common['white']
+    --secondaryButtonActiveColor rgba(255, 255, 255, 0.24)
+    --secondaryButtonContrastColor palette.Common['white']
+
+    --dividerColor2: rgba(255, 255, 255, 0.16)
+// @stylint on