Merge branch 'bgfix/use-shadow-custom-properties' into bugfix/replace-postcss-custom-properties-fallback-with-local-version

Author: nielslyngsoe

packages/uui-box/lib/uui-box.element.ts

@@ -15,8 +15,7 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        /* TODO: fix automatic fallback values for shadows shadows.*/
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         background-color: var(--uui-interface-surface);
       }

packages/uui-card/lib/uui-card.element.ts

@@ -27,8 +27,7 @@ export class UUICardElement extends SelectOnlyMixin(
         width: 100%;
         justify-content: center;
         box-sizing: border-box;
-        /* TODO: fix automatic fallback values for shadows before we use them: var(--uui-shadow-depth-1)*/
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         min-height: var(--uui-layout-medium);
         background-color: var(--uui-interface-surface);

packages/uui-dialog/lib/uui-dialog.element.ts

@@ -20,12 +20,7 @@ export class UUIDialogElement extends LitElement {
           var(--uui-interface-surface)
         );
 
-        /* TODO: fix automatic fallback values for shadows shadows. var(--uui-shadow-depth-5) */
-        box-shadow: var(
-          --uui-dialog-box-shadow,
-          0 19px 38px rgba(0, 0, 0, 0.3),
-          0 15px 12px rgba(0, 0, 0, 0.22)
-        );
+        box-shadow: var(--uui-shadow-depth-5);
         border-radius: var(
           --uui-dialog-border-radius,
           calc(var(--uui-border-radius) * 2)

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -67,7 +67,7 @@ export class UUIToastNotificationElement extends LitElement {
         display: block;
 
         box-sizing: border-box;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.21);
+        box-shadow: var(--uui-shadow-depth-1);
         background-color: var(--uui-interface-surface);
         padding: var(--uui-size-layout-1);
         padding-right: var(--uui-size-layout-1);