cozy-ui 117.3.0 → 119.0.0

package/react/providers/I18n/format.jsx

@@ -1,50 +1,47 @@
 import format from 'date-fns/format'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import {
+  enGB as enLocale,
+  fr as frLocale,
+  es as esLocale
+} from 'date-fns/locale'
 
 import { DEFAULT_LANG } from '.'
 
-const locales = {}
-let lang = DEFAULT_LANG
+let currentLocale
 
-/**
- * Ensure that the locale is in the correct format for date-fns (see 2.0.0 BC https://github.com/date-fns/date-fns/blob/main/CHANGELOG.md#200---2019-08-20)
- * @param {string} lang
- */
-const ensureLocaleFormat = lang => {
+const getDateFnsLocale = lang => {
   switch (lang) {
     case 'en':
-      return 'en-US'
-    case 'zh_cn':
-      return 'zh-CN'
-    case 'zh_tw':
-      return 'zh-TW'
+      return enLocale
+    case 'fr':
+      return frLocale
+    case 'es':
+      return esLocale
     default:
-      return lang
+      throw new Error('Locale not found')
   }
 }
 
 const getWarningMessage = lang =>
-  `The "${lang}" locale isn't supported by date-fns. or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.`
+  `The "${lang}" locale isn't supported by date-fns or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.`
 
 export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
-  lang = ensureLocaleFormat(userLang)
-  const ensureDefaultLang = ensureLocaleFormat(defaultLang)
   try {
-    locales[
-      ensureDefaultLang
-    ] = require(`date-fns/locale/${ensureDefaultLang}/index.js`)
-  } catch (err) {
-    console.warn(getWarningMessage(ensureDefaultLang))
+    const userLocale = getDateFnsLocale(userLang)
+    currentLocale = userLocale
+    return userLocale
+  } catch (e) {
+    console.warn(getWarningMessage(userLang))
   }
 
-  if (lang && lang !== ensureDefaultLang) {
-    try {
-      locales[lang] = require(`date-fns/locale/${lang}/index.js`)
-    } catch (e) {
-      console.warn(getWarningMessage(lang))
-    }
+  try {
+    const defaultLocale = getDateFnsLocale(defaultLang)
+    currentLocale = defaultLocale
+    return defaultLocale
+  } catch (err) {
+    console.warn(getWarningMessage(defaultLang))
   }
-  return locales[lang]
 }
 
 export const initFormat =
@@ -61,5 +58,5 @@ export const initFormat =
   }
 
 export const formatLocallyDistanceToNow = date => {
-  return formatDistanceToNow(date, { locale: locales[lang] })
+  return formatDistanceToNow(date, { locale: currentLocale })
 }

package/react/providers/I18n/format.spec.jsx

@@ -4,9 +4,11 @@ describe('initFormat', () => {
   beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation(() => {})
   })
+
   afterEach(() => {
     console.warn.mockRestore()
   })
+
   it('should not throw if a date-fns locale can not be found', () => {
     expect(() => initFormat('unknown-lang', 'unknown-default')).not.toThrow()
   })
@@ -17,7 +19,13 @@ describe('initFormat', () => {
     expect(date).toBe('1970-janvier-01')
   })
 
-  it('should fallback english if a date-fns locale can not be found', () => {
+  it('should use the correct default locale if user locale can not be found', () => {
+    const f = initFormat('it', 'fr')
+    const date = f(0, 'yyyy-LLLL-dd')
+    expect(date).toBe('1970-janvier-01')
+  })
+
+  it('should fallback english if user locale and default locale can not be found', () => {
     const f = initFormat('unknown-lang', 'unknown-default')
     const date = f(0, 'yyyy-LLLL-dd')
     expect(date).toBe('1970-January-01')
@@ -25,6 +33,12 @@ describe('initFormat', () => {
 })
 
 describe('formatLocallyDistanceToNow', () => {
+  beforeEach(() => {
+    // To avoid currentLocale set to 'fr' because of previous tests
+    const f = initFormat('en')
+    f(0, 'yyyy-LLLL-dd')
+  })
+
   it('should formatDistanceToNow with small value', () => {
     const date = Date.now() + 29 * 1000 // 29s
 

package/react/utils/color.js

@@ -1,4 +1,8 @@
-const getThemeNodeClassName = (type, variant) => `CozyTheme--${type}-${variant}`
+const getThemeNodeClassName = (type, variant) => {
+  const uiTypeName = localStorage.getItem('ui-theme-name') || 'Cozy'
+
+  return `${uiTypeName}Theme--${type}-${variant}`
+}
 
 const getNodeWithThemeCssVars = (type, variant) => {
   const className = getThemeNodeClassName(type, variant)

package/scripts/generate-svgr-icon-twake.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+streamEditor=$([[ $(uname -s) == "Linux" ]] && echo sed || echo gsed)
+
+createSvgr()
+{
+  svgFileFullPath=$1
+  svgFilename=`basename $svgFileFullPath`
+  jsFilename=`echo $svgFilename | $streamEditor -E 's/^([a-z])/\U\1/g; s/-([a-z])/\U\1/g; s/svg$/jsx/g'`
+  jsFileFullPath="react/Icons/${jsFilename}"
+
+  echo $svgFileFullPath
+
+  node_modules/.bin/svgr $svgFileFullPath \
+    --no-dimensions \
+    --template scripts/svgr-template-twake.js > $jsFileFullPath
+  node_modules/.bin/eslint --fix $jsFileFullPath
+}
+
+if [ -d "$1" ]; then
+  for i in "$1"/*.svg
+  do
+    createSvgr $i
+  done
+else
+  createSvgr $1
+fi

package/scripts/make-icon-sprite.sh

@@ -10,4 +10,4 @@ echo "Making icon sprite, output file : ${outfile}..."
 echo $icons | xargs yarn svgstore --inline -o /tmp/icons-sprite.svg
 echo "// GENERATED FILE, DO NOT EDIT THIS FILE BY HAND" > $outfile
 echo "// Use yarn sprite to regenerate" >> $outfile
-echo "module.exports = \``cat /tmp/icons-sprite.svg`\`" >> $outfile
+echo "export default \``cat /tmp/icons-sprite.svg`\`" >> $outfile

package/scripts/make-palette.sh

@@ -7,5 +7,5 @@ JS_PALETTE='react/palette.js'
 
 echo "Making palette, output file : ${JS_PALETTE}..."
 echo "// GENERATED AUTOMATICALLY FROM stylus/settings/palette.json" > $JS_PALETTE
-echo "module.exports = `cat stylus/settings/palette.json`" >> $JS_PALETTE
+echo "export default `cat stylus/settings/palette.json`" >> $JS_PALETTE
 node_modules/.bin/eslint --fix $JS_PALETTE

package/scripts/svgr-template-twake.js

@@ -0,0 +1,47 @@
+function defaultTemplate(
+  { template },
+  opts,
+  { imports, interfaces, componentName, props, jsx, exports }
+) {
+  const plugins = ['jsx']
+  if (opts.typescript) {
+    plugins.push('typescript')
+  }
+  const typeScriptTpl = template.smart({ plugins, preserveComments: true })
+  const twakeFileName =
+    opts.state.filePath.replace(/^.*[\\/]/, '').split('.svg')[0] + '_twake'
+  const capTwakeFileName =
+    twakeFileName.charAt(0).toUpperCase() + twakeFileName.slice(1)
+  const TwakeComponentName = componentName.name + 'Twake'
+
+  const header = `// Automatically created, please run \`scripts/generate-svgr-icon.sh ${opts.state.filePath}\` to regenerate
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+import ${TwakeComponentName} from './${capTwakeFileName}'`
+
+  for (let imp of imports) {
+    if (imp.source.value !== 'react') {
+      continue
+    }
+    for (let specifier of imp.specifiers) {
+      if (
+        specifier.type === 'ImportNamespaceSpecifier' &&
+        specifier.local.name === 'React'
+      ) {
+        specifier.type = 'ImportDefaultSpecifier'
+      }
+    }
+  }
+
+  return typeScriptTpl.ast`${header}
+
+${imports}
+${interfaces}
+function ${componentName}(${props}) {
+  if (isTwakeTheme()) return ${TwakeComponentName}(${props})
+
+  return ${jsx};
+}
+${exports}
+  `
+}
+module.exports = defaultTemplate

package/stylus/components/nav.styl

@@ -14,14 +14,14 @@ $nav
     +medium-screen()
         display          flex
         justify-content  space-around
-        margin           rem(5 0 4)
+        margin           6px 0 4px
         padding-right    0
 
 
 $nav-item
     position        relative
     z-index         var(--zIndex-app)
-    height          rem(48)
+    height          rem(44)
     box-sizing      border-box
     cursor          pointer
 
@@ -29,7 +29,7 @@ $nav-item
         content        ''
         position       absolute
         z-index        var(--zIndex-below)
-        border-radius  rem(0 3 3 0)
+        border-radius  0 8px 8px 0
         top 0
         left 0
         right rem(16)
@@ -52,42 +52,47 @@ $nav-item
 
 $nav-item-icon
     display inline-block
-    margin-right rem(11)
-    color var(--actionColorActive)
+    margin-right 12px
+    color var(--primaryTextColor)
     fill currentColor
 
     svg
         display block
 
-    .is-active &
-        color var(--primaryColor)
-
     :hover > &
-        color var(--actionColorActive)
+        // color var(--actionColorActive)
 
     +medium-screen()
         display block
         margin-right 0
 
         svg
-            margin 0 auto 3px
-            width rem(24)
-            height rem(24)
+            margin 4px auto 5px
+            width rem(16)
+            height rem(16)
 
 $nav-item-text
+    font-size 16px
+    font-weight 500
+    letter-spacing .15px
+
     +medium-screen()
         display block
         text-align center
         white-space nowrap
+        font-size 12px
+
+        .is-active &
+            color var(--primaryTextColor)
 
 $nav-link
     display              flex
     box-shadow           border-box
     padding-left         rem(24)
     padding-right        rem(16)
-    line-height          1.5
+    line-height          1.375
     text-decoration      none
-    color                var(--actionColorActive)
+    color                var(--primaryTextColor)
     height               100%
     align-items          center
     flex                 1
@@ -102,15 +107,22 @@ $nav-link
         font-weight  bold
         color  var(--primaryTextColor)
 
+        +medium-screen()
+            background-color initial
+
         .c-nav-icon
             color var(--primaryColor)
 
+            +medium-screen()
+                color var(--primaryTextColor)
+
+
     +medium-screen()
         display              block
         height               auto
         padding              0
         text-align           center
-        font-size            rem(10)
+        font-size            rem(11)
         line-height          rem(12)
         background-position  center top
         background-size      rem(24)
@@ -122,9 +134,7 @@ $nav-link
 
 $nav-item-secondary
     height auto
-
-    & + &
-        margin-top .125rem
+    margin 3px 0
 
     +medium-screen()
         &
@@ -135,10 +145,10 @@ $nav-item-secondary
         content        ''
         position       absolute
         z-index        var(--zIndex-below)
-        border-radius  rem(3 0 0 3)
+        border-radius  8px 0 0 8px
         top 0
         right 0
-        left rem(48)
+        left rem(45)
         bottom 0
         background     var(--actionColorHover)
 
@@ -147,19 +157,18 @@ $nav-item-secondary
             content none
 
 $nav-link-secondary
-    padding .5rem 1rem
-    margin-left 3rem
-    border-radius 4px 0 0 4px
+    padding 8px 16px
+    margin-left 2.8rem
+    border-radius 8px 0 0 8px
     box-shadow none
     font-size $small-font-size
-    color var(--actionColorActive)
+    color var(--primaryTextColor)
     text-decoration none
     height auto
 
     &.is-active
         color var(--primaryContrastTextColor)
-        border-right 1px solid var(--actionColorActive)
-        background-color var(--actionColorActive)
+        background-color var(--secondaryColor)
 
 $nav-limiter
     background transparent

package/stylus/cozy-ui/build.styl

@@ -607,7 +607,7 @@ Display an avatar of a user or contact with initials or an image
 
  Styleguide Components.avatar
 */
-@require '../../react/Avatar/styles.styl'
+@require '../../react/legacy/Avatar/styles.styl'
 
 /*
  Chip

package/stylus/objects/sidebar.styl

@@ -6,7 +6,7 @@
 \*------------------------------------*/
 
 :root
-    --sidebarHeight: rem(48)
+    --sidebarHeight: rem(52)
 
 $sidebar
     width rem(220)

package/stylus/settings/themes/dark-inverted.styl

@@ -1,4 +1,5 @@
 palette=json('../../../theme/palette.json', { hash: true })
+paletteTwake=json('../../theme/palette_twake.json', { hash: true })
 
 // @stylint off
 
@@ -92,4 +93,94 @@ palette=json('../../../theme/palette.json', { hash: true })
     --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
     --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
 
+.TwakeTheme--dark-inverted
+    --primaryTextColor alpha(paletteTwake.Grey['900'], 0.9)
+    --secondaryTextColor alpha(paletteTwake.Grey['900'], 0.48)
+    --disabledTextColor alpha(paletteTwake.Grey['900'], 0.32)
+    --hintTextColor alpha(paletteTwake.Grey['900'], 0.32)
+    --iconTextColor alpha(paletteTwake.Grey['900'], 0.72)
+
+    --actionColorActive alpha(paletteTwake.Grey['900'], 0.56)
+    --actionColorHover alpha(paletteTwake.Grey['900'], 0.04)
+    --actionColorSelected alpha(paletteTwake.Grey['900'], 0.08)
+    --actionColorDisabled alpha(paletteTwake.Grey['900'], 0.24)
+    --actionColorDisabledBackground alpha(paletteTwake.Grey['900'], 0.12)
+    --actionColorFocus alpha(paletteTwake.Grey['900'], 0.12)
+    --actionColorGhost alpha(paletteTwake.Grey['900'], 0.08)
+    --actionColorHoverGhost alpha(paletteTwake.Grey['900'], 0.16)
+
+    --dividerColor alpha(paletteTwake.Grey['900'], 0.12)
+
+    --borderMainColor alpha(paletteTwake.Grey['900'], 0.16)
+    --borderDisabledColor alpha(paletteTwake.Grey['900'], 0.08)
+    --borderGhostColor alpha(paletteTwake.Grey['900'], 0.48)
+    --borderGhostDisabledColor alpha(paletteTwake.Grey['900'], 0.16)
+
+    --paperBackgroundColor paletteTwake.Primary['400']
+    --defaultBackgroundColor paletteTwake.Primary['400']
+    --contrastBackgroundColor alpha(paletteTwake.Grey['900'], 0.08)
+
+    --primaryColorLight paletteTwake.Grey['700']
+    --primaryColor paletteTwake.Grey['800']
+    --primaryColorDark paletteTwake.Grey['A400']
+    --primaryContrastTextColor paletteTwake.Common['white']
+    --primaryBackground alpha(paletteTwake.Grey['800'], 0.12) // only for deprecated Info & Alerter
+
+    --secondaryColorLight paletteTwake.Grey['700']
+    --secondaryColor paletteTwake.Grey['800']
+    --secondaryColorDark paletteTwake.Grey['A400']
+    --secondaryContrastTextColor paletteTwake.Common['white']
+    --secondaryBackground alpha(paletteTwake.Grey['800'], 0.12) // only for deprecated Info & Alerter
+
+    --errorColorLight paletteTwake.Error['700']
+    --errorColor paletteTwake.Error['800']
+    --errorColorDark paletteTwake.Error['A400']
+    --errorColorContrastText paletteTwake.Common['white']
+    --errorBackground paletteTwake.Error['A400']
+    --errorBackground alpha(paletteTwake.Error['800'], 0.12) // only for deprecated Info & Alerter
+
+    --warningColorLight paletteTwake.Warning['700']
+    --warningColor paletteTwake.Warning['800']
+    --warningColorDark paletteTwake.Warning['A400']
+    --warningColorContrastText paletteTwake.Common['white']
+
+    --successColorLight paletteTwake.Success['700']
+    --successColor paletteTwake.Success['800']
+    --successColorDark paletteTwake.Success['A400']
+    --successColorContrastText paletteTwake.Common['white']
+    --successBackground alpha(paletteTwake.Success['800'], 0.12) // only for deprecated Info & Alerter
+
+    --infoColorLight paletteTwake.Info['700']
+    --infoColor paletteTwake.Info['800']
+    --infoColorDark paletteTwake.Info['A400']
+    --infoColorContrastText paletteTwake.Common['white']
+
+    $shadowColor = paletteTwake.Common['black']
+    --shadow0 none
+    --shadow1 0px 2px 4px 0px alpha($shadowColor, 0.08), 0px 4px 16px 0px alpha($shadowColor, 0.06), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow2 0px 3px 5px 0px alpha($shadowColor, 0.09), 0px 4px 17px 0px alpha($shadowColor, 0.07), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow3 0px 3px 5px -1px alpha($shadowColor, 0.09), 0px 5px 19px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow4 0px 3px 6px -1px alpha($shadowColor, 0.1), 0px 5px 20px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow5 0px 4px 6px -1px alpha($shadowColor, 0.11), 0px 5px 22px 1px alpha($shadowColor, 0.09), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow6 0px 4px 7px -2px alpha($shadowColor, 0.11), 0px 6px 23px 2px alpha($shadowColor, 0.10), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow7 0px 5px 7px -2px alpha($shadowColor, 0.12), 0px 6px 24px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow8 0px 5px 8px -2px alpha($shadowColor, 0.13), 0px 6px 26px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow9 0px 5px 8px -3px alpha($shadowColor, 0.14), 0px 7px 27px 3px alpha($shadowColor, 0.12), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow10 0px 6px 9px -3px alpha($shadowColor, 0.14), 0px 7px 29px 3px alpha($shadowColor, 0.13), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow11 0px 6px 9px -3px alpha($shadowColor, 0.15), 0px 7px 30px 3px alpha($shadowColor, 0.14), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow12 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 31px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow13 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 33px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow14 0px 8px 11px -5px alpha($shadowColor, 0.17), 0px 9px 34px 5px alpha($shadowColor, 0.16), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow15 0px 8px 11px -5px alpha($shadowColor, 0.18), 0px 9px 35px 5px alpha($shadowColor, 0.17), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow16 0px 9px 12px -5px alpha($shadowColor, 0.18), 0px 9px 37px 5px alpha($shadowColor, 0.18), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow17 0px 9px 12px -6px alpha($shadowColor, 0.19), 0px 10px 38px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow18 0px 9px 13px -6px alpha($shadowColor, 0.2), 0px 10px 40px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow19 0px 10px 13px -6px alpha($shadowColor, 0.21), 0px 10px 41px 6px alpha($shadowColor, 0.2), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow20 0px 10px 14px -7px alpha($shadowColor, 0.21), 0px 11px 42px 7px alpha($shadowColor, 0.21), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow21 0px 11px 14px -7px alpha($shadowColor, 0.22), 0px 11px 44px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow22 0px 11px 15px -7px alpha($shadowColor, 0.23), 0px 11px 45px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow23 0px 12px 15px -8px alpha($shadowColor, 0.23), 0px 12px 47px 8px alpha($shadowColor, 0.23), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
+
 // @stylint on

package/stylus/settings/themes/dark-normal.styl

@@ -1,4 +1,5 @@
 palette=json('../../../theme/palette.json', { hash: true })
+paletteTwake=json('../../theme/palette_twake.json', { hash: true })
 
 // @stylint off
 
@@ -91,4 +92,93 @@ palette=json('../../../theme/palette.json', { hash: true })
     --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
     --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
 
-// @stylint on
+.TwakeTheme--dark-normal
+    --primaryTextColor paletteTwake.Common['white']
+    --secondaryTextColor alpha(paletteTwake.Common['white'], 0.64)
+    --disabledTextColor alpha(paletteTwake.Common['white'], 0.4)
+    --hintTextColor alpha(paletteTwake.Common['white'], 0.4)
+    --iconTextColor paletteTwake.Common['white']
+
+    --actionColorActive paletteTwake.Common['white']
+    --actionColorHover alpha(paletteTwake.Common['white'], 0.08)
+    --actionColorSelected alpha(paletteTwake.Common['white'], 0.16)
+    --actionColorDisabled alpha(paletteTwake.Common['white'], 0.32)
+    --actionColorDisabledBackground alpha(paletteTwake.Common['white'], 0.12)
+    --actionColorFocus alpha(paletteTwake.Common['white'], 0.24)
+    --actionColorGhost alpha(paletteTwake.Common['white'], 0.08)
+    --actionColorHoverGhost alpha(paletteTwake.Common['white'], 0.16)
+
+    --dividerColor alpha(paletteTwake.Common['white'], 0.16)
+
+    --borderMainColor alpha(paletteTwake.Common['white'], 0.24)
+    --borderDisabledColor alpha(paletteTwake.Common['white'], 0.12)
+    --borderGhostColor alpha(paletteTwake.Common['white'], 0.48)
+    --borderGhostDisabledColor alpha(paletteTwake.Common['white'], 0.24)
+
+    --paperBackgroundColor paletteTwake.Grey['800']
+    --defaultBackgroundColor paletteTwake.Grey['A400']
+    --contrastBackgroundColor alpha(paletteTwake.Common['white'], 0.072)
+
+    --primaryColorLight paletteTwake.Primary['300']
+    --primaryColor paletteTwake.Primary['400']
+    --primaryColorDark paletteTwake.Primary['500']
+    --primaryContrastTextColor alpha(paletteTwake.Grey['900'], 0.9)
+    --primaryBackground alpha(paletteTwake.Primary['400'], 0.24) // only for deprecated Info & Alerter
+
+    --secondaryColorLight paletteTwake.Grey['300']
+    --secondaryColor paletteTwake.Grey['400']
+    --secondaryColorDark paletteTwake.Grey['500']
+    --secondaryContrastTextColor alpha(paletteTwake.Grey['900'], 0.9)
+    --secondaryBackground alpha(paletteTwake.Grey['400'], 0.24) // only for deprecated Info & Alerter
+
+    --errorColorLight paletteTwake.Error['300']
+    --errorColor paletteTwake.Error['400']
+    --errorColorDark paletteTwake.Error['500']
+    --errorColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+    --errorBackground alpha(paletteTwake.Error['400'], 0.24)
+
+    --warningColorLight paletteTwake.Warning['300']
+    --warningColor paletteTwake.Warning['400']
+    --warningColorDark paletteTwake.Warning['500']
+    --warningColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+
+    --successColorLight paletteTwake.Success['300']
+    --successColor paletteTwake.Success['400']
+    --successColorDark paletteTwake.Success['500']
+    --successColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+    --successBackground alpha(paletteTwake.Success['400'], 0.24) // only for deprecated Info & Alerter
+
+    --infoColorLight paletteTwake.Info['300']
+    --infoColor paletteTwake.Info['400']
+    --infoColorDark paletteTwake.Info['500']
+    --infoColorContrastText alpha(paletteTwake.Grey['900'], 0.9)
+
+    $shadowColor = paletteTwake.Common['black']
+    --shadow0 none
+    --shadow1 0px 2px 4px 0px alpha($shadowColor, 0.08), 0px 4px 16px 0px alpha($shadowColor, 0.06), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow2 0px 3px 5px 0px alpha($shadowColor, 0.09), 0px 4px 17px 0px alpha($shadowColor, 0.07), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow3 0px 3px 5px -1px alpha($shadowColor, 0.09), 0px 5px 19px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow4 0px 3px 6px -1px alpha($shadowColor, 0.1), 0px 5px 20px 1px alpha($shadowColor, 0.08), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow5 0px 4px 6px -1px alpha($shadowColor, 0.11), 0px 5px 22px 1px alpha($shadowColor, 0.09), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow6 0px 4px 7px -2px alpha($shadowColor, 0.11), 0px 6px 23px 2px alpha($shadowColor, 0.10), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow7 0px 5px 7px -2px alpha($shadowColor, 0.12), 0px 6px 24px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow8 0px 5px 8px -2px alpha($shadowColor, 0.13), 0px 6px 26px 2px alpha($shadowColor, 0.11), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow9 0px 5px 8px -3px alpha($shadowColor, 0.14), 0px 7px 27px 3px alpha($shadowColor, 0.12), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow10 0px 6px 9px -3px alpha($shadowColor, 0.14), 0px 7px 29px 3px alpha($shadowColor, 0.13), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow11 0px 6px 9px -3px alpha($shadowColor, 0.15), 0px 7px 30px 3px alpha($shadowColor, 0.14), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow12 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 31px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow13 0px 7px 10px -4px alpha($shadowColor, 0.16), 0px 8px 33px 4px alpha($shadowColor, 0.15), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow14 0px 8px 11px -5px alpha($shadowColor, 0.17), 0px 9px 34px 5px alpha($shadowColor, 0.16), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow15 0px 8px 11px -5px alpha($shadowColor, 0.18), 0px 9px 35px 5px alpha($shadowColor, 0.17), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow16 0px 9px 12px -5px alpha($shadowColor, 0.18), 0px 9px 37px 5px alpha($shadowColor, 0.18), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow17 0px 9px 12px -6px alpha($shadowColor, 0.19), 0px 10px 38px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow18 0px 9px 13px -6px alpha($shadowColor, 0.2), 0px 10px 40px 6px alpha($shadowColor, 0.19), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow19 0px 10px 13px -6px alpha($shadowColor, 0.21), 0px 10px 41px 6px alpha($shadowColor, 0.2), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow20 0px 10px 14px -7px alpha($shadowColor, 0.21), 0px 11px 42px 7px alpha($shadowColor, 0.21), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow21 0px 11px 14px -7px alpha($shadowColor, 0.22), 0px 11px 44px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow22 0px 11px 15px -7px alpha($shadowColor, 0.23), 0px 11px 45px 7px alpha($shadowColor, 0.22), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow23 0px 12px 15px -8px alpha($shadowColor, 0.23), 0px 12px 47px 8px alpha($shadowColor, 0.23), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow24 0px 12px 16px -8px alpha($shadowColor, 0.24), 0px 12px 48px 8px alpha($shadowColor, 0.24), 0px 0px 0px 0.5px alpha($shadowColor, 0.12)
+    --shadow25 0px 1px 4px alpha($shadowColor, 0.04)
+
+// @stylint on