cozy-ui 122.14.1 → 123.1.0

package/react/SquareAppIcon/index.jsx

@@ -5,8 +5,7 @@ import React, { useEffect, useState } from 'react'
 
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
-import stylesCozy from './styles.styl'
-import stylesTwake from './styles_twake.styl'
+import styles from './styles.styl'
 import AppIcon from '../AppIcon'
 import Badge from '../Badge'
 import Icon from '../Icon'
@@ -18,13 +17,10 @@ import iconWarning from '../Icons/WarningCircle'
 import InfosBadge from '../InfosBadge'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import { nameToColor } from '../legacy/Avatar/helpers'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { alpha, makeStyles } from '../styles'
 
-const styles = isTwakeTheme() ? stylesTwake : stylesCozy
-
 const makeTwakeColor = theme =>
   theme.variant === 'inverted' || theme.type === 'dark'
     ? 'var(--white)'
@@ -32,16 +28,13 @@ const makeTwakeColor = theme =>
 
 const useStyles = makeStyles(theme => ({
   name: {
-    color: isTwakeTheme() ? makeTwakeColor(theme) : 'var(--primaryTextColor)',
-    textShadow: isTwakeTheme()
-      ? theme.variant === 'inverted' || theme.type === 'dark'
+    color: makeTwakeColor(theme),
+    textShadow:
+      theme.variant === 'inverted' || theme.type === 'dark'
         ? '0px 0px 10px rgba(0, 0, 0, 0.10), 0px 0px 2px rgba(0, 0, 0, 0.20), 0.5px 0.5px 1px rgba(0, 0, 0, 0.50)'
-        : undefined
-      : undefined,
+        : undefined,
     width: '5.5rem',
     textAlign: 'center',
-    fontSize: isTwakeTheme() ? undefined : '0.875rem',
-    lineHeight: isTwakeTheme() ? undefined : '1.188rem',
     margin: '0.5rem 0.25rem 0 0.25rem',
     lineClamp: '2',
     boxOrient: 'vertical',
@@ -49,8 +42,6 @@ const useStyles = makeStyles(theme => ({
     height: '2.375rem',
     [theme.breakpoints.down('sm')]: {
       width: '3.75rem',
-      fontSize: isTwakeTheme() ? undefined : '0.6875rem',
-      lineHeight: isTwakeTheme() ? undefined : '1rem',
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }
@@ -72,9 +63,6 @@ const useStyles = makeStyles(theme => ({
     color: 'white',
     margin: 'auto'
   },
-  shadow: {
-    boxShadow: isTwakeTheme() ? undefined : theme.shadows[1]
-  },
   errorIcon: {
     fill: 'var(--errorColor)',
     backgroundColor: 'var(--primaryContrastTextColor)',
@@ -140,7 +128,7 @@ export const SquareAppIcon = ({
     prevVariant.current = variant
   }, [variant])
 
-  const exceptionVariant = [isTwakeTheme() ? 'ghost' : 'add', 'ghost']
+  const exceptionVariant = ['ghost']
 
   const squareTheme = exceptionVariant.includes(variant)
     ? themeVariant
@@ -197,8 +185,7 @@ export const SquareAppIcon = ({
             style={
               variant === 'shortcut' && !IconContent
                 ? {
-                    [isTwakeTheme() ? 'background' : 'backgroundColor']:
-                      nameToColor(name)
+                    ['background']: nameToColor(name)
                   }
                 : null
             }
@@ -242,12 +229,10 @@ export const SquareAppIcon = ({
                   <Icon icon={iconPlus} color="var(--primaryColor)" />
                 ) : IconContent ? (
                   IconContent
-                ) : isTwakeTheme() ? (
+                ) : (
                   <div className="u-w-2 u-h-2">
                     <AppIcon {...appIconProps} />
                   </div>
-                ) : (
-                  <AppIcon {...appIconProps} />
                 )}
               </div>
             )}

package/react/SquareAppIcon/styles.styl

@@ -8,8 +8,7 @@ $mobileIconPadding = constants['mobileIconPadding']
 
 .SquareAppIcon-wrapper
     box-sizing border-box
-    background-color var(--white) // we don't want to be theme responsive
-    border-radius rem(12)
+    border-radius 100%
     height $iconSize
     width $iconSize
     transition transform 300ms, border-radius 300ms
@@ -18,12 +17,18 @@ $mobileIconPadding = constants['mobileIconPadding']
         height $mobileIconSize
         width $mobileIconSize
 
+    &--light
+        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 251, 254, 0.80)
+
+    &--dark
+        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), #2C3039
+
 .SquareAppIcon-icon-container
     display flex
     align-items center
     justify-content center
     padding $iconPadding
-    border-radius rem(12)
+    border-radius 100%
     width 100%
 
     +small-screen()
@@ -71,7 +76,7 @@ animation-duration = 1.50s
 icon-duration = 0.2s
 icon-start = 0.2s
 border-radius-start = 50%
-border-radius-end = rem(12)
+border-radius-end = 100%
 opacity-start = 0
 opacity-end = 1
 

package/react/Switch/Readme.md

@@ -21,7 +21,7 @@ const StateSwitch = ({ id, color }) => {
   return <Switch
     color={color}
     checked={checked}
-    {...(isTwakeTheme() && { icon: CheckIcon })}
+    icon={CheckIcon}
     onChange={handleClick}
   />
 }
@@ -48,7 +48,7 @@ const StateSwitch = ({ id, color }) => {
     control={
       <Switch
         color="primary"
-        {...(isTwakeTheme() && { icon: CheckIcon })}
+        icon={CheckIcon}
         disabled
       />
     }
@@ -58,7 +58,7 @@ const StateSwitch = ({ id, color }) => {
     control={
       <Switch
         color="primary"
-        {...(isTwakeTheme() && { icon: CheckIcon })}
+        icon={CheckIcon}
         checked
         disabled
       />

package/react/Switch/index.jsx

@@ -2,7 +2,6 @@ import MuiSwitch from '@material-ui/core/Switch'
 import React from 'react'
 
 import Icon from '../Icon'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
 
 /**
  * @type JSX.Element<HTMLDivElement, import('@material-ui/core/Switch').SwitchProps>
@@ -14,12 +13,7 @@ const Switch = ({ icon, ...props }) => {
     </span>
   )
 
-  return (
-    <MuiSwitch
-      {...props}
-      {...(isTwakeTheme() && { icon: _icon, checkedIcon: _icon })}
-    />
-  )
+  return <MuiSwitch {...props} icon={_icon} checkedIcon={_icon} />
 }
 
 export default Switch

package/react/UploadQueue/useStatusIcon.js

@@ -2,19 +2,16 @@ import React from 'react'
 
 import { uploadStatus } from './index'
 import Icon from '../Icon'
-import CheckIcon from '../Icons/Check'
 import CheckCircleIcon from '../Icons/CheckCircle'
-import CrossIcon from '../Icons/Cross'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import WarningIcon from '../Icons/Warning'
 import Spinner from '../Spinner'
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
 
 export const useStatusIcon = (statusToUse, progress) => {
   const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
     uploadStatus
-  const SuccessIcon = isTwakeTheme() ? CheckCircleIcon : CheckIcon
-  const ErrorIcon = isTwakeTheme() ? CrossCircleIcon : CrossIcon
+  const SuccessIcon = CheckCircleIcon
+  const ErrorIcon = CrossCircleIcon
 
   let statusIcon
 

package/react/legacy/Avatar/helpers.js

@@ -1,39 +1,17 @@
 import { colorMapping } from '../../Avatar/helpers'
-import { isTwakeTheme } from '../../helpers/isTwakeTheme'
-import palette from '../../palette'
 
 const makeKey = (colors, name) =>
   Array.from(name.toUpperCase())
     .map(letter => letter.charCodeAt(0))
     .reduce((sum, number) => sum + number, 0) % colors.length
 
-const colors = [
-  palette['azure'],
-  palette['melon'],
-  palette['blazeOrange'],
-  palette['pomegranate'],
-  palette['mango'],
-  palette['pumpkinOrange'],
-  palette['darkPeriwinkle'],
-  palette['purpley'],
-  palette['lightishPurple'],
-  palette['weirdGreen'],
-  palette['puertoRico'],
-  palette['emerald'],
-  palette['seafoamGreen'],
-  palette['lavender'],
-  palette['brightSun'],
-  palette['fuchsia']
-]
-
-const twakeColors = Object.values(colorMapping).filter(Boolean)
+const colors = Object.values(colorMapping).filter(Boolean)
 
 /**
  * @param {string} name
  * @returns {string}
  */
 export const nameToColor = (name = '') => {
-  const _colors = isTwakeTheme() ? twakeColors : colors
-  const key = makeKey(_colors, name)
-  return _colors[key]
+  const key = makeKey(colors, name)
+  return colors[key]
 }

package/react/legacy/Avatar/index.jsx

@@ -8,14 +8,9 @@ import styles from './styles.styl'
 import { createSizeStyle } from '../../Circle'
 import Icon, { iconPropType } from '../../Icon'
 import PeopleIcon from '../../Icons/People'
-import { isTwakeTheme } from '../../helpers/isTwakeTheme'
 
 const createBgColorStyle = ({ text, textId }) =>
-  text
-    ? isTwakeTheme()
-      ? { background: `${nameToColor(textId || text)}` }
-      : { backgroundColor: `${nameToColor(textId || text)}` }
-    : {}
+  text ? { background: `${nameToColor(textId || text)}` } : {}
 
 export const Avatar = ({
   text,

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -4,7 +4,6 @@ import React from 'react'
 
 import { CozyThemeContext } from './index'
 import MuiCozyTheme from '../../MuiCozyTheme'
-import { isTwakeTheme } from '../../helpers/isTwakeTheme'
 import useMediaQuery from '../../hooks/useMediaQuery'
 
 const DumbCozyTheme = ({
@@ -16,7 +15,6 @@ const DumbCozyTheme = ({
 }) => {
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
-  const uiThemeName = isTwakeTheme() ? 'Twake' : 'Cozy'
 
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
     ? 'dark'
@@ -36,14 +34,13 @@ const DumbCozyTheme = ({
       value={{
         type: selfThemeType,
         variant: selfThemeVariant,
-        name: uiThemeName,
         isLight: selfThemeType === 'light'
       }}
     >
       <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
         <div
           className={cx(className, {
-            [`${uiThemeName}Theme--${selfThemeType}-${selfThemeVariant}`]:
+            [`TwakeTheme--${selfThemeType}-${selfThemeVariant}`]:
               Boolean(selfThemeVariant),
             'u-dc': ignoreItself
           })}

package/react/providers/CozyTheme/index.jsx

@@ -24,8 +24,7 @@ export const useCozyTheme = () => {
     return {
       type: 'light',
       variant: 'normal',
-      isLight: true,
-      name: 'Cozy'
+      isLight: true
     }
   }
 

package/react/utils/color.js

@@ -1,10 +1,5 @@
-import { isTwakeTheme } from '../helpers/isTwakeTheme'
-
-const getThemeNodeClassName = (type, variant) => {
-  const uiTypeName = isTwakeTheme() ? 'Twake' : 'Cozy'
-
-  return `${uiTypeName}Theme--${type}-${variant}`
-}
+const getThemeNodeClassName = (type, variant) =>
+  `TwakeTheme--${type}-${variant}`
 
 const getNodeWithThemeCssVars = (type, variant) => {
   const className = getThemeNodeClassName(type, variant)

package/scripts/make-icon-sprite.sh

@@ -2,30 +2,12 @@
 
 set -eu
 
-streamEditor=$([[ $(uname -s) == "Linux" ]] && echo sed || echo gsed)
+outfile="react/Icon/icons-sprite.js"
 
-# generates Cozy sprites
-
-outfileCozy="react/Icon/icons-sprite.js"
-
-iconsCozy="$(ls assets/icons/*/*.svg | grep -v 'assets/icons/twake/' | sort -d)"
-
-echo "Making icon sprite, output file : ${outfileCozy}..."
-echo $iconsCozy | xargs yarn svgstore --inline -o /tmp/icons-sprite.svg
-echo "// GENERATED FILE, DO NOT EDIT THIS FILE BY HAND" > $outfileCozy
-echo "// Use yarn sprite to regenerate" >> $outfileCozy
-echo "export default \``cat /tmp/icons-sprite.svg`\`" >> $outfileCozy
-
-# generates Twake sprites
-
-outfile="react/Icon/icons-sprite-twake.js"
-
-icons="$(find assets/icons/twake -type f -name '*.svg' | sort -d)"
+icons="$(ls assets/icons/*/*.svg | sort -d)"
 
 echo "Making icon sprite, output file : ${outfile}..."
-echo $icons | xargs yarn svgstore --inline -o /tmp/icons-sprite-twake.svg
-# Edit IDs to remove "_twake" suffixe
-$streamEditor -i 's/id="\([^"]*\)_twake"/id="\1"/g' /tmp/icons-sprite-twake.svg
+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 "export default \``cat /tmp/icons-sprite-twake.svg`\`" >> $outfile
+echo "export default \``cat /tmp/icons-sprite.svg`\`" >> $outfile

package/stylus/settings/fontstack.styl

@@ -5,7 +5,7 @@
 /*
     Font Stack
 
-    There's only one font available, Lato, which is used on body, so basically everywhere. It's also available in bold.
+    There's two available for now, Inter and Lato, which is used on body, so basically everywhere. It's also available in bold.
 
     Markup:
     <p>This is basic text</p>
@@ -14,7 +14,7 @@
     Styleguide Settings.fonts
 */
 html
-    --primaryFont Lato, sans-serif
+    --primaryFont Inter, Lato, sans-serif
 
 $font-labor
     font-family var(--primaryFont)

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

@@ -1,9 +1,8 @@
-palette=json('../../../theme/palette.json', { hash: true })
-paletteTwake=json('../../theme/palette_twake.json', { hash: true })
+palette=json('../../theme/palette.json', { hash: true })
 
 // @stylint off
 
-.CozyTheme--dark-inverted
+.TwakeTheme--dark-inverted
     --primaryTextColor alpha(palette.Grey['900'], 0.9)
     --secondaryTextColor alpha(palette.Grey['900'], 0.48)
     --disabledTextColor alpha(palette.Grey['900'], 0.32)
@@ -93,94 +92,4 @@ paletteTwake=json('../../theme/palette_twake.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,9 +1,8 @@
-palette=json('../../../theme/palette.json', { hash: true })
-paletteTwake=json('../../theme/palette_twake.json', { hash: true })
+palette=json('../../theme/palette.json', { hash: true })
 
 // @stylint off
 
-.CozyTheme--dark-normal
+.TwakeTheme--dark-normal
     --primaryTextColor palette.Common['white']
     --secondaryTextColor alpha(palette.Common['white'], 0.64)
     --disabledTextColor alpha(palette.Common['white'], 0.4)
@@ -92,93 +91,4 @@ paletteTwake=json('../../theme/palette_twake.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-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