@citizenplane/pimp 10.0.8 → 10.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.0.8",
+  "version": "10.1.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/css/base.css

@@ -8,7 +8,7 @@ html {
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol';
   font-size: 100%;
-  color: var(--pimp-text-primary);
+  color: var(--cp-text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -ms-text-size-adjust: 100%;
@@ -62,3 +62,18 @@ input {
   font-size: inherit;
   border: none;
 }
+
+/* Disable default shadows globally */
+.v-popper__popper,
+.v-popper__inner {
+  border: none !important;
+  filter: none !important;
+}
+
+.v-popper__inner {
+  box-shadow: var(--cp-shadows-overlay) !important;
+}
+
+.v-popper__popper {
+  box-shadow: none !important;
+}

package/src/assets/css/colors.css

@@ -1,123 +1,124 @@
 :root {
-  --pimp-colors-black: #000000;
+  --cp-colors-black: #000000;
 
-  --pimp-colors-blue-100: #e5efff;
-  --pimp-colors-blue-1000: #00133a;
-  --pimp-colors-blue-200: #bdd6ff;
-  --pimp-colors-blue-300: #90baff;
-  --pimp-colors-blue-400: #4c8dfa;
-  --pimp-colors-blue-50: #f6faff;
-  --pimp-colors-blue-500: #1564de;
-  --pimp-colors-blue-600: #0049b1;
-  --pimp-colors-blue-700: #003382;
-  --pimp-colors-blue-800: #00286a;
-  --pimp-colors-blue-900: #001e53;
+  --cp-colors-blue-50: #f6faff;
+  --cp-colors-blue-100: #e5efff;
+  --cp-colors-blue-200: #bdd6ff;
+  --cp-colors-blue-300: #90baff;
+  --cp-colors-blue-400: #4c8dfa;
+  --cp-colors-blue-500: #1564de;
+  --cp-colors-blue-600: #0049b1;
+  --cp-colors-blue-700: #003382;
+  --cp-colors-blue-800: #00286a;
+  --cp-colors-blue-900: #001e53;
+  --cp-colors-blue-1000: #00133a;
 
-  --pimp-colors-green-100: #dcf9e8;
-  --pimp-colors-green-1000: #001c0f;
-  --pimp-colors-green-200: #98eabe;
-  --pimp-colors-green-300: #54d599;
-  --pimp-colors-green-400: #00ac71;
-  --pimp-colors-green-50: #ecfff4;
-  --pimp-colors-green-500: #008254;
-  --pimp-colors-green-600: #00623e;
-  --pimp-colors-green-700: #00462b;
-  --pimp-colors-green-800: #003822;
-  --pimp-colors-green-900: #002b19;
+  --cp-colors-green-50: #ecfff4;
+  --cp-colors-green-100: #dcf9e8;
+  --cp-colors-green-200: #98eabe;
+  --cp-colors-green-300: #54d599;
+  --cp-colors-green-400: #00ac71;
+  --cp-colors-green-500: #008254;
+  --cp-colors-green-600: #00623e;
+  --cp-colors-green-700: #00462b;
+  --cp-colors-green-800: #003822;
+  --cp-colors-green-900: #002b19;
+  --cp-colors-green-1000: #001c0f;
 
-  --pimp-colors-grey-100: #f2f3fa;
-  --pimp-colors-grey-1000: #20212f;
-  --pimp-colors-grey-200: #e9eaf6;
-  --pimp-colors-grey-300: #d1d3e6;
-  --pimp-colors-grey-400: #b4b7d3;
-  --pimp-colors-grey-50: #f9f9fd;
-  --pimp-colors-grey-500: #989bba;
-  --pimp-colors-grey-600: #717496;
-  --pimp-colors-grey-700: #525470;
-  --pimp-colors-grey-800: #36384d;
-  --pimp-colors-grey-900: #2b2c3e;
+  --cp-colors-grey-50: #f9f9fd;
+  --cp-colors-grey-100: #f2f3fa;
+  --cp-colors-grey-200: #e9eaf6;
+  --cp-colors-grey-300: #d1d3e6;
+  --cp-colors-grey-400: #b4b7d3;
+  --cp-colors-grey-500: #989bba;
+  --cp-colors-grey-600: #717496;
+  --cp-colors-grey-700: #525470;
+  --cp-colors-grey-800: #36384d;
+  --cp-colors-grey-900: #2b2c3e;
+  --cp-colors-grey-1000: #20212f;
 
-  --pimp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
-  --pimp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
-  --pimp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
-  --pimp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
-  --pimp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
-  --pimp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
-  --pimp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
-  --pimp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
-  --pimp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
+  --cp-colors-magenta-50: #fff7f9;
+  --cp-colors-magenta-100: #ffe7ed;
+  --cp-colors-magenta-200: #ffc1d2;
+  --cp-colors-magenta-300: #ff92b5;
+  --cp-colors-magenta-400: #e8528c;
+  --cp-colors-magenta-500: #c40d68;
+  --cp-colors-magenta-600: #97004e;
+  --cp-colors-magenta-700: #6e0037;
+  --cp-colors-magenta-800: #59002c;
+  --cp-colors-magenta-900: #450020;
+  --cp-colors-magenta-1000: #300015;
 
-  --pimp-colors-magenta-100: #ffe7ed;
-  --pimp-colors-magenta-1000: #300015;
-  --pimp-colors-magenta-200: #ffc1d2;
-  --pimp-colors-magenta-300: #ff92b5;
-  --pimp-colors-magenta-400: #e8528c;
-  --pimp-colors-magenta-50: #fff7f9;
-  --pimp-colors-magenta-500: #c40d68;
-  --pimp-colors-magenta-600: #97004e;
-  --pimp-colors-magenta-700: #6e0037;
-  --pimp-colors-magenta-800: #59002c;
-  --pimp-colors-magenta-900: #450020;
+  --cp-colors-orange-50: #fff8f2;
+  --cp-colors-orange-100: #ffeddf;
+  --cp-colors-orange-200: #fec89e;
+  --cp-colors-orange-300: #f9a255;
+  --cp-colors-orange-400: #de7c00;
+  --cp-colors-orange-500: #a05800;
+  --cp-colors-orange-600: #7a4100;
+  --cp-colors-orange-700: #582e00;
+  --cp-colors-orange-800: #472400;
+  --cp-colors-orange-900: #371a00;
+  --cp-colors-orange-1000: #251000;
 
-  --pimp-colors-orange-100: #ffeddf;
-  --pimp-colors-orange-1000: #251000;
-  --pimp-colors-orange-200: #fec89e;
-  --pimp-colors-orange-300: #f9a255;
-  --pimp-colors-orange-400: #de7c00;
-  --pimp-colors-orange-50: #fff8f2;
-  --pimp-colors-orange-500: #a05800;
-  --pimp-colors-orange-600: #7a4100;
-  --pimp-colors-orange-700: #582e00;
-  --pimp-colors-orange-800: #472400;
-  --pimp-colors-orange-900: #371a00;
+  --cp-colors-pink-50: #fff6ff;
+  --cp-colors-pink-100: #fce6fd;
+  --cp-colors-pink-200: #f8bdfb;
+  --cp-colors-pink-300: #f08ef6;
+  --cp-colors-pink-400: #d054d8;
+  --cp-colors-pink-500: #a825b1;
+  --cp-colors-pink-600: #84068c;
+  --cp-colors-pink-700: #600067;
+  --cp-colors-pink-800: #4e0054;
+  --cp-colors-pink-900: #3c0040;
+  --cp-colors-pink-1000: #29002d;
 
-  --pimp-colors-pink-100: #fce6fd;
-  --pimp-colors-pink-1000: #29002d;
-  --pimp-colors-pink-200: #f8bdfb;
-  --pimp-colors-pink-300: #f08ef6;
-  --pimp-colors-pink-400: #d054d8;
-  --pimp-colors-pink-50: #fff6ff;
-  --pimp-colors-pink-500: #a825b1;
-  --pimp-colors-pink-600: #84068c;
-  --pimp-colors-pink-700: #600067;
-  --pimp-colors-pink-800: #4e0054;
-  --pimp-colors-pink-900: #3c0040;
+  --cp-colors-red-50: #fff7f7;
+  --cp-colors-red-100: #fce9e8;
+  --cp-colors-red-200: #ffc3c2;
+  --cp-colors-red-300: #ff9798;
+  --cp-colors-red-400: #f24e5c;
+  --cp-colors-red-500: #d52841;
+  --cp-colors-red-600: #9c0025;
+  --cp-colors-red-700: #710019;
+  --cp-colors-red-800: #5d0012;
+  --cp-colors-red-900: #48000c;
+  --cp-colors-red-1000: #320006;
 
-  --pimp-colors-red-100: #fce9e8;
-  --pimp-colors-red-1000: #320006;
-  --pimp-colors-red-200: #ffc3c2;
-  --pimp-colors-red-300: #ff9798;
-  --pimp-colors-red-400: #f24e5c;
-  --pimp-colors-red-50: #fff7f7;
-  --pimp-colors-red-500: #d52841;
-  --pimp-colors-red-600: #9c0025;
-  --pimp-colors-red-700: #710019;
-  --pimp-colors-red-800: #5d0012;
-  --pimp-colors-red-900: #48000c;
+  --cp-colors-violet-50: #f8f9ff;
+  --cp-colors-violet-100: #eaecff;
+  --cp-colors-violet-200: #ccd0ff;
+  --cp-colors-violet-300: #acb1ff;
+  --cp-colors-violet-400: #807dff;
+  --cp-colors-violet-500: #603dfd;
+  --cp-colors-violet-600: #4a00da;
+  --cp-colors-violet-700: #3400a0;
+  --cp-colors-violet-800: #2a0084;
+  --cp-colors-violet-900: #1f0067;
+  --cp-colors-violet-1000: #13004a;
 
-  --pimp-colors-violet-100: #eaecff;
-  --pimp-colors-violet-1000: #13004a;
-  --pimp-colors-violet-200: #ccd0ff;
-  --pimp-colors-violet-300: #acb1ff;
-  --pimp-colors-violet-400: #807dff;
-  --pimp-colors-violet-50: #f8f9ff;
-  --pimp-colors-violet-500: #603dfd;
-  --pimp-colors-violet-600: #4a00da;
-  --pimp-colors-violet-700: #3400a0;
-  --pimp-colors-violet-800: #2a0084;
-  --pimp-colors-violet-900: #1f0067;
+  --cp-colors-white: #ffffff;
 
-  --pimp-colors-white: #ffffff;
+  --cp-colors-yellow-50: #fefeea;
+  --cp-colors-yellow-100: #fcfacc;
+  --cp-colors-yellow-200: #f0df80;
+  --cp-colors-yellow-300: #dfbb35;
+  --cp-colors-yellow-400: #b68900;
+  --cp-colors-yellow-500: #906300;
+  --cp-colors-yellow-600: #724700;
+  --cp-colors-yellow-700: #553000;
+  --cp-colors-yellow-800: #452600;
+  --cp-colors-yellow-900: #351c00;
+  --cp-colors-yellow-1000: #211300;
 
-  --pimp-colors-yellow-100: #fcfacc;
-  --pimp-colors-yellow-1000: #211300;
-  --pimp-colors-yellow-200: #f0df80;
-  --pimp-colors-yellow-300: #dfbb35;
-  --pimp-colors-yellow-400: #b68900;
-  --pimp-colors-yellow-50: #fefeea;
-  --pimp-colors-yellow-500: #906300;
-  --pimp-colors-yellow-600: #724700;
-  --pimp-colors-yellow-700: #553000;
-  --pimp-colors-yellow-800: #452600;
-  --pimp-colors-yellow-900: #351c00;
+  --cp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
+  --cp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
+  --cp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
+  --cp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
+  --cp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
+  --cp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
+  --cp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
+  --cp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
+  --cp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
+  --cp-colors-grey-shadow-color-50: rgba(108, 110, 181, 0.5);
 }

package/src/assets/css/dimensions.css

@@ -1,37 +1,38 @@
 :root {
-  --pimp-dimensions-0: 0;
-  --pimp-dimensions-0_5: 2px;
-  --pimp-dimensions-1: 4px;
-  --pimp-dimensions-1_5: 6px;
-  --pimp-dimensions-2: 8px;
-  --pimp-dimensions-2_5: 10px;
-  --pimp-dimensions-3: 12px;
-  --pimp-dimensions-3_5: 14px;
-  --pimp-dimensions-4: 16px;
-  --pimp-dimensions-5: 20px;
-  --pimp-dimensions-6: 24px;
-  --pimp-dimensions-8: 32px;
-  --pimp-dimensions-10: 40px;
-  --pimp-dimensions-12: 48px;
-  --pimp-dimensions-16: 64px;
-  --pimp-dimensions-20: 80px;
-  --pimp-dimensions-24: 96px;
-  --pimp-dimensions-32: 128px;
-  --pimp-dimensions-40: 160px;
-  --pimp-dimensions-48: 192px;
-  --pimp-dimensions-56: 224px;
-  --pimp-dimensions-64: 256px;
-  --pimp-dimensions-80: 320px;
-  --pimp-dimensions-96: 384px;
-  --pimp-dimensions-120: 480px;
-  --pimp-dimensions-140: 560px;
-  --pimp-dimensions-160: 640px;
-  --pimp-dimensions-180: 720px;
-  --pimp-dimensions-192: 768px;
-  --pimp-dimensions-256: 1024px;
-  --pimp-dimensions-320: 1280px;
-  --pimp-dimensions-360: 1440px;
-  --pimp-dimensions-384: 1536px;
-  --pimp-dimensions-400: 1600px;
-  --pimp-dimensions-480: 1920px;
+  --cp-dimensions-0: 0;
+  --cp-dimensions-0_25: 0.0625rem;
+  --cp-dimensions-0_5: 0.125rem;
+  --cp-dimensions-1: 0.25rem;
+  --cp-dimensions-1_5: 0.375rem;
+  --cp-dimensions-2: 0.5rem;
+  --cp-dimensions-2_5: 0.625rem;
+  --cp-dimensions-3: 0.75rem;
+  --cp-dimensions-3_5: 0.875rem;
+  --cp-dimensions-4: 1rem;
+  --cp-dimensions-5: 1.25rem;
+  --cp-dimensions-6: 1.5rem;
+  --cp-dimensions-8: 2rem;
+  --cp-dimensions-10: 2.5rem;
+  --cp-dimensions-12: 3rem;
+  --cp-dimensions-16: 4rem;
+  --cp-dimensions-20: 5rem;
+  --cp-dimensions-24: 6rem;
+  --cp-dimensions-32: 8rem;
+  --cp-dimensions-40: 10rem;
+  --cp-dimensions-48: 12rem;
+  --cp-dimensions-56: 14rem;
+  --cp-dimensions-64: 16rem;
+  --cp-dimensions-80: 20rem;
+  --cp-dimensions-96: 24rem;
+  --cp-dimensions-120: 30rem;
+  --cp-dimensions-140: 35rem;
+  --cp-dimensions-160: 40rem;
+  --cp-dimensions-180: 45rem;
+  --cp-dimensions-192: 48rem;
+  --cp-dimensions-256: 64rem;
+  --cp-dimensions-320: 80rem;
+  --cp-dimensions-360: 90rem;
+  --cp-dimensions-384: 96rem;
+  --cp-dimensions-400: 100rem;
+  --cp-dimensions-480: 120rem;
 }

package/src/assets/css/easings.css

@@ -1,3 +1,4 @@
 :root {
-  --pimp-easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);
+  --cp-easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);
+  --cp-easing-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
 }

package/src/assets/css/shadows.css

@@ -1,67 +1,69 @@
 :root {
-  --pimp-drop-shadow-2xs-blur: 6px;
-  --pimp-drop-shadow-2xs-color: var(--pimp-colors-grey-shadow-color-7-5);
-  --pimp-drop-shadow-2xs-offset-x: 0;
-  --pimp-drop-shadow-2xs-offset-y: 3px;
-  --pimp-drop-shadow-2xs-spread: -2px;
-  --pimp-drop-shadow-3xs-blur: 2px;
-  --pimp-drop-shadow-3xs-color: var(--pimp-colors-grey-shadow-color-7-5);
-  --pimp-drop-shadow-3xs-offset-x: 0;
-  --pimp-drop-shadow-3xs-offset-y: 3px;
-  --pimp-drop-shadow-3xs-spread: -2px;
-  --pimp-drop-shadow-lg-blur: 25px;
-  --pimp-drop-shadow-lg-color: var(--pimp-colors-grey-shadow-color-17-5);
-  --pimp-drop-shadow-lg-offset-x: 0;
-  --pimp-drop-shadow-lg-offset-y: 11px;
-  --pimp-drop-shadow-lg-spread: -2px;
-  --pimp-drop-shadow-md-blur: 20px;
-  --pimp-drop-shadow-md-color: var(--pimp-colors-grey-shadow-color-15);
-  --pimp-drop-shadow-md-offset-x: 0;
-  --pimp-drop-shadow-md-offset-y: 9px;
-  --pimp-drop-shadow-md-spread: -2px;
-  --pimp-drop-shadow-overlay-1-blur: 4px;
-  --pimp-drop-shadow-overlay-1-color: var(--pimp-colors-grey-shadow-color-4);
-  --pimp-drop-shadow-overlay-1-offset-x: 0;
-  --pimp-drop-shadow-overlay-1-offset-y: 2px;
-  --pimp-drop-shadow-overlay-1-spread: 0;
-  --pimp-drop-shadow-overlay-2-blur: 8px;
-  --pimp-drop-shadow-overlay-2-color: var(--pimp-colors-grey-shadow-color-4);
-  --pimp-drop-shadow-overlay-2-offset-x: 0;
-  --pimp-drop-shadow-overlay-2-offset-y: 5px;
-  --pimp-drop-shadow-overlay-2-spread: 0;
-  --pimp-drop-shadow-overlay-3-blur: 18px;
-  --pimp-drop-shadow-overlay-3-color: var(--pimp-colors-grey-shadow-color-3);
-  --pimp-drop-shadow-overlay-3-offset-x: 0;
-  --pimp-drop-shadow-overlay-3-offset-y: 10px;
-  --pimp-drop-shadow-overlay-3-spread: 0;
-  --pimp-drop-shadow-overlay-4-blur: 48px;
-  --pimp-drop-shadow-overlay-4-color: var(--pimp-colors-grey-shadow-color-3);
-  --pimp-drop-shadow-overlay-4-offset-x: 0;
-  --pimp-drop-shadow-overlay-4-offset-y: 24px;
-  --pimp-drop-shadow-overlay-4-spread: 0;
-  --pimp-drop-shadow-overlay-5-blur: 0;
-  --pimp-drop-shadow-overlay-5-color: var(--pimp-colors-grey-shadow-color-10);
-  --pimp-drop-shadow-overlay-5-offset-x: 0;
-  --pimp-drop-shadow-overlay-5-offset-y: 0;
-  --pimp-drop-shadow-overlay-5-spread: 1px;
-  --pimp-drop-shadow-side-panel-blur: 60px;
-  --pimp-drop-shadow-side-panel-color: var(--pimp-colors-grey-shadow-color-10);
-  --pimp-drop-shadow-side-panel-offset-x: 0;
-  --pimp-drop-shadow-side-panel-offset-y: 0;
-  --pimp-drop-shadow-side-panel-spread: 0;
-  --pimp-drop-shadow-sm-blur: 16px;
-  --pimp-drop-shadow-sm-color: var(--pimp-colors-grey-shadow-color-12-5);
-  --pimp-drop-shadow-sm-offset-x: 0;
-  --pimp-drop-shadow-sm-offset-y: 7px;
-  --pimp-drop-shadow-sm-spread: -2px;
-  --pimp-drop-shadow-xl-blur: 30px;
-  --pimp-drop-shadow-xl-color: var(--pimp-colors-grey-shadow-color-20);
-  --pimp-drop-shadow-xl-offset-x: 0;
-  --pimp-drop-shadow-xl-offset-y: 13px;
-  --pimp-drop-shadow-xl-spread: -2px;
-  --pimp-drop-shadow-xs-blur: 11px;
-  --pimp-drop-shadow-xs-color: var(--pimp-colors-grey-shadow-color-12-5);
-  --pimp-drop-shadow-xs-offset-x: 0;
-  --pimp-drop-shadow-xs-offset-y: 5px;
-  --pimp-drop-shadow-xs-spread: -2px;
+  --cp-drop-shadow-3xs-blur: 2px;
+  --cp-drop-shadow-3xs-color: var(--cp-colors-grey-shadow-color-7-5);
+  --cp-drop-shadow-3xs-offset-x: 0;
+  --cp-drop-shadow-3xs-offset-y: 3px;
+  --cp-drop-shadow-3xs-spread: -2px;
+  --cp-drop-shadow-2xs-blur: 6px;
+  --cp-drop-shadow-2xs-color: var(--cp-colors-grey-shadow-color-7-5);
+  --cp-drop-shadow-2xs-offset-x: 0;
+  --cp-drop-shadow-2xs-offset-y: 3px;
+  --cp-drop-shadow-2xs-spread: -2px;
+  --cp-drop-shadow-xs-blur: 11px;
+  --cp-drop-shadow-xs-color: var(--cp-colors-grey-shadow-color-12-5);
+  --cp-drop-shadow-xs-offset-x: 0;
+  --cp-drop-shadow-xs-offset-y: 5px;
+  --cp-drop-shadow-xs-spread: -2px;
+  --cp-drop-shadow-sm-blur: 16px;
+  --cp-drop-shadow-sm-color: var(--cp-colors-grey-shadow-color-12-5);
+  --cp-drop-shadow-sm-offset-x: 0;
+  --cp-drop-shadow-sm-offset-y: 7px;
+  --cp-drop-shadow-sm-spread: -2px;
+  --cp-drop-shadow-md-blur: 20px;
+  --cp-drop-shadow-md-color: var(--cp-colors-grey-shadow-color-15);
+  --cp-drop-shadow-md-offset-x: 0;
+  --cp-drop-shadow-md-offset-y: 9px;
+  --cp-drop-shadow-md-spread: -2px;
+  --cp-drop-shadow-lg-blur: 25px;
+  --cp-drop-shadow-lg-color: var(--cp-colors-grey-shadow-color-17-5);
+  --cp-drop-shadow-lg-offset-x: 0;
+  --cp-drop-shadow-lg-offset-y: 11px;
+  --cp-drop-shadow-lg-spread: -2px;
+  --cp-drop-shadow-xl-blur: 30px;
+  --cp-drop-shadow-xl-color: var(--cp-colors-grey-shadow-color-20);
+  --cp-drop-shadow-xl-offset-x: 0;
+  --cp-drop-shadow-xl-offset-y: 13px;
+  --cp-drop-shadow-xl-spread: -2px;
+
+  --cp-drop-shadow-overlay-1-blur: 4px;
+  --cp-drop-shadow-overlay-1-color: var(--cp-colors-grey-shadow-color-4);
+  --cp-drop-shadow-overlay-1-offset-x: 0;
+  --cp-drop-shadow-overlay-1-offset-y: 2px;
+  --cp-drop-shadow-overlay-1-spread: 0;
+  --cp-drop-shadow-overlay-2-blur: 8px;
+  --cp-drop-shadow-overlay-2-color: var(--cp-colors-grey-shadow-color-4);
+  --cp-drop-shadow-overlay-2-offset-x: 0;
+  --cp-drop-shadow-overlay-2-offset-y: 5px;
+  --cp-drop-shadow-overlay-2-spread: 0;
+  --cp-drop-shadow-overlay-3-blur: 18px;
+  --cp-drop-shadow-overlay-3-color: var(--cp-colors-grey-shadow-color-3);
+  --cp-drop-shadow-overlay-3-offset-x: 0;
+  --cp-drop-shadow-overlay-3-offset-y: 10px;
+  --cp-drop-shadow-overlay-3-spread: 0;
+  --cp-drop-shadow-overlay-4-blur: 48px;
+  --cp-drop-shadow-overlay-4-color: var(--cp-colors-grey-shadow-color-3);
+  --cp-drop-shadow-overlay-4-offset-x: 0;
+  --cp-drop-shadow-overlay-4-offset-y: 24px;
+  --cp-drop-shadow-overlay-4-spread: 0;
+  --cp-drop-shadow-overlay-5-blur: 0;
+  --cp-drop-shadow-overlay-5-color: var(--cp-colors-grey-shadow-color-10);
+  --cp-drop-shadow-overlay-5-offset-x: 0;
+  --cp-drop-shadow-overlay-5-offset-y: 0;
+  --cp-drop-shadow-overlay-5-spread: 1px;
+
+  --cp-drop-shadow-side-panel-blur: 60px;
+  --cp-drop-shadow-side-panel-color: var(--cp-colors-grey-shadow-color-10);
+  --cp-drop-shadow-side-panel-offset-x: 0;
+  --cp-drop-shadow-side-panel-offset-y: 0;
+  --cp-drop-shadow-side-panel-spread: 0;
 }