feat: Export shadows value in --shadowX css variables

cozy · Jun 1, 2023 · d7a0f04 · d7a0f04
1 parent 228f9a3
commit d7a0f04
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 26 deletions.
diff --git 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
@@ -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)
+
     /*
     ---------------------------------------------------------------------
     */