fix: modal css vars (#784)

* css vars for width, background and border radius

* more border radius

* remove max-width from dialog

Author: JesmoDev

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

@@ -15,11 +15,21 @@ export class UUIModalDialogElement extends UUIModalElement {
   static styles = [
     ...UUIModalElement.styles,
     css`
+      :host {
+        --uui-modal-dialog-background: var(--uui-color-surface);
+      }
       dialog {
         margin: auto;
         max-width: 100%;
         max-height: 100%;
-        border-radius: 12px;
+        border-radius: var(
+          --uui-modal-dialog-border-radius,
+          calc(var(--uui-border-radius) * 4)
+        );
+        background: var(
+          --uui-modal-dialog-background,
+          var(--uui-color-surface)
+        );
       }
       :host([index='0']) dialog {
         box-shadow: var(--uui-shadow-depth-5);

packages/uui-modal/lib/uui-modal-sidebar.element.ts

@@ -68,6 +68,7 @@ export class UUIModalSidebarElement extends UUIModalElement {
     css`
       :host {
         --uui-modal-sidebar-left-gap: 24px;
+        --uui-modal-sidebar-background: var(--uui-color-surface);
       }
       @media (min-width: 600px) {
         :host {
@@ -82,6 +83,10 @@ export class UUIModalSidebarElement extends UUIModalElement {
         margin-left: auto;
         right: var(--uui-modal-offset);
         transition: right var(--uui-modal-transition-duration, 250ms);
+        background: var(
+          --uui-modal-sidebar-background,
+          var(--uui-color-surface)
+        );
       }
       :host([index='0']) dialog {
         box-shadow: var(--uui-shadow-depth-5);