From d7a0f04bec283153f7f3a6fd2e735bb216239931 Mon Sep 17 00:00:00 2001 From: JF-Cozy Date: Wed, 31 May 2023 16:51:46 +0200 Subject: [PATCH] feat: Export shadows value in --shadowX css variables --- react/MuiCozyTheme/makeShadows.js | 54 ++++++++++++++++--------------- stylus/settings/palette.styl | 30 +++++++++++++++++ 2 files changed, 58 insertions(+), 26 deletions(-) diff --git a/react/MuiCozyTheme/makeShadows.js b/react/MuiCozyTheme/makeShadows.js index cb7170a9dc..872f6855b6 100644 --- a/react/MuiCozyTheme/makeShadows.js +++ b/react/MuiCozyTheme/makeShadows.js @@ -1,28 +1,30 @@ +import { getCssVariableValue } from '../utils/color' + export const makeShadows = () => [ - 'var(--shadow0, none)', - 'var(--shadow1, rgba(29, 33, 42, 0.08) 0px 2px 4px 0px, rgba(29, 33, 42, 0.06) 0px 4px 16px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow2, rgba(29, 33, 42, 0.09) 0px 3px 5px 0px, rgba(29, 33, 42, 0.07) 0px 4px 17px 0px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow3, rgba(29, 33, 42, 0.09) 0px 3px 5px -1px, rgba(29, 33, 42, 0.08) 0px 5px 19px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow4, rgba(29, 33, 42, 0.1) 0px 3px 6px -1px, rgba(29, 33, 42, 0.08) 0px 5px 20px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow5, rgba(29, 33, 42, 0.11) 0px 4px 6px -1px, rgba(29, 33, 42, 0.09) 0px 5px 22px 1px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow6, rgba(29, 33, 42, 0.11) 0px 4px 7px -2px, rgba(29, 33, 42, 0.10) 0px 6px 23px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow7, rgba(29, 33, 42, 0.12) 0px 5px 7px -2px, rgba(29, 33, 42, 0.11) 0px 6px 24px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow8, rgba(29, 33, 42, 0.13) 0px 5px 8px -2px, rgba(29, 33, 42, 0.11) 0px 6px 26px 2px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow9, rgba(29, 33, 42, 0.14) 0px 5px 8px -3px, rgba(29, 33, 42, 0.12) 0px 7px 27px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow10, rgba(29, 33, 42, 0.14) 0px 6px 9px -3px, rgba(29, 33, 42, 0.13) 0px 7px 29px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow11, rgba(29, 33, 42, 0.15) 0px 6px 9px -3px, rgba(29, 33, 42, 0.14) 0px 7px 30px 3px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow12, rgba(29, 33, 42, 0.16) 0px 7px 10px -4px, rgba(29, 33, 42, 0.15) 0px 8px 31px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow13, rgba(29, 33, 42, 0.16) 0px 7px 10px -4px, rgba(29, 33, 42, 0.15) 0px 8px 33px 4px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow14, rgba(29, 33, 42, 0.17) 0px 8px 11px -5px, rgba(29, 33, 42, 0.16) 0px 9px 34px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow15, rgba(29, 33, 42, 0.18) 0px 8px 11px -5px, rgba(29, 33, 42, 0.17) 0px 9px 35px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow16, rgba(29, 33, 42, 0.18) 0px 9px 12px -5px, rgba(29, 33, 42, 0.18) 0px 9px 37px 5px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow17, rgba(29, 33, 42, 0.19) 0px 9px 12px -6px, rgba(29, 33, 42, 0.19) 0px 10px 38px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow18, rgba(29, 33, 42, 0.2) 0px 9px 13px -6px, rgba(29, 33, 42, 0.19) 0px 10px 40px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow19, rgba(29, 33, 42, 0.21) 0px 10px 13px -6px, rgba(29, 33, 42, 0.2) 0px 10px 41px 6px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow20, rgba(29, 33, 42, 0.21) 0px 10px 14px -7px, rgba(29, 33, 42, 0.21) 0px 11px 42px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow21, rgba(29, 33, 42, 0.22) 0px 11px 14px -7px, rgba(29, 33, 42, 0.22) 0px 11px 44px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow22, rgba(29, 33, 42, 0.23) 0px 11px 15px -7px, rgba(29, 33, 42, 0.22) 0px 11px 45px 7px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow23, rgba(29, 33, 42, 0.23) 0px 12px 15px -8px, rgba(29, 33, 42, 0.23) 0px 12px 47px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow24, rgba(29, 33, 42, 0.24) 0px 12px 16px -8px, rgba(29, 33, 42, 0.24) 0px 12px 48px 8px, rgba(29, 33, 42, 0.12) 0px 0px 0px 0.5px)', - 'var(--shadow25, rgba(29, 33, 42, 0.04) 0px 1px 4px)' + getCssVariableValue('shadow0'), + getCssVariableValue('shadow1'), + getCssVariableValue('shadow2'), + getCssVariableValue('shadow3'), + getCssVariableValue('shadow4'), + getCssVariableValue('shadow5'), + getCssVariableValue('shadow6'), + getCssVariableValue('shadow7'), + getCssVariableValue('shadow8'), + getCssVariableValue('shadow9'), + getCssVariableValue('shadow10'), + getCssVariableValue('shadow11'), + getCssVariableValue('shadow12'), + getCssVariableValue('shadow13'), + getCssVariableValue('shadow14'), + getCssVariableValue('shadow15'), + getCssVariableValue('shadow16'), + getCssVariableValue('shadow17'), + getCssVariableValue('shadow18'), + getCssVariableValue('shadow19'), + getCssVariableValue('shadow20'), + getCssVariableValue('shadow21'), + getCssVariableValue('shadow22'), + getCssVariableValue('shadow23'), + getCssVariableValue('shadow24'), + getCssVariableValue('shadow25') ] diff --git a/stylus/settings/palette.styl b/stylus/settings/palette.styl index df8ad45c58..daae66c013 100644 --- a/stylus/settings/palette.styl +++ b/stylus/settings/palette.styl @@ -341,6 +341,36 @@ html, .CozyTheme--normal --infoColorDark palette.Info['700'] --infoColorContrastText palette.Common['white'] + /* + Shadow colors + */ + --shadow0 none + --shadow1 0px 2px 4px 0px rgba(29, 33, 42, 0.08), 0px 4px 16px 0px rgba(29, 33, 42, 0.06), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow2 0px 3px 5px 0px rgba(29, 33, 42, 0.09), 0px 4px 17px 0px rgba(29, 33, 42, 0.07), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow3 0px 3px 5px -1px rgba(29, 33, 42, 0.09), 0px 5px 19px 1px rgba(29, 33, 42, 0.08), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow4 0px 3px 6px -1px rgba(29, 33, 42, 0.1), 0px 5px 20px 1px rgba(29, 33, 42, 0.08), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow5 0px 4px 6px -1px rgba(29, 33, 42, 0.11), 0px 5px 22px 1px rgba(29, 33, 42, 0.09), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow6 0px 4px 7px -2px rgba(29, 33, 42, 0.11), 0px 6px 23px 2px rgba(29, 33, 42, 0.10), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow7 0px 5px 7px -2px rgba(29, 33, 42, 0.12), 0px 6px 24px 2px rgba(29, 33, 42, 0.11), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow8 0px 5px 8px -2px rgba(29, 33, 42, 0.13), 0px 6px 26px 2px rgba(29, 33, 42, 0.11), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow9 0px 5px 8px -3px rgba(29, 33, 42, 0.14), 0px 7px 27px 3px rgba(29, 33, 42, 0.12), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow10 0px 6px 9px -3px rgba(29, 33, 42, 0.14), 0px 7px 29px 3px rgba(29, 33, 42, 0.13), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow11 0px 6px 9px -3px rgba(29, 33, 42, 0.15), 0px 7px 30px 3px rgba(29, 33, 42, 0.14), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow12 0px 7px 10px -4px rgba(29, 33, 42, 0.16), 0px 8px 31px 4px rgba(29, 33, 42, 0.15), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow13 0px 7px 10px -4px rgba(29, 33, 42, 0.16), 0px 8px 33px 4px rgba(29, 33, 42, 0.15), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow14 0px 8px 11px -5px rgba(29, 33, 42, 0.17), 0px 9px 34px 5px rgba(29, 33, 42, 0.16), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow15 0px 8px 11px -5px rgba(29, 33, 42, 0.18), 0px 9px 35px 5px rgba(29, 33, 42, 0.17), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow16 0px 9px 12px -5px rgba(29, 33, 42, 0.18), 0px 9px 37px 5px rgba(29, 33, 42, 0.18), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow17 0px 9px 12px -6px rgba(29, 33, 42, 0.19), 0px 10px 38px 6px rgba(29, 33, 42, 0.19), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow18 0px 9px 13px -6px rgba(29, 33, 42, 0.2), 0px 10px 40px 6px rgba(29, 33, 42, 0.19), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow19 0px 10px 13px -6px rgba(29, 33, 42, 0.21), 0px 10px 41px 6px rgba(29, 33, 42, 0.2), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow20 0px 10px 14px -7px rgba(29, 33, 42, 0.21), 0px 11px 42px 7px rgba(29, 33, 42, 0.21), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow21 0px 11px 14px -7px rgba(29, 33, 42, 0.22), 0px 11px 44px 7px rgba(29, 33, 42, 0.22), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow22 0px 11px 15px -7px rgba(29, 33, 42, 0.23), 0px 11px 45px 7px rgba(29, 33, 42, 0.22), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow23 0px 12px 15px -8px rgba(29, 33, 42, 0.23), 0px 12px 47px 8px rgba(29, 33, 42, 0.23), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow24 0px 12px 16px -8px rgba(29, 33, 42, 0.24), 0px 12px 48px 8px rgba(29, 33, 42, 0.24), 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12) + --shadow25 0px 1px 4px rgba(29, 33, 42, 0.04) + /* --------------------------------------------------------------------- */