feat(modal): add tokens and update shim (#836)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/src/modal/_modal.clarity.scss

@@ -33,55 +33,88 @@
   .modal-dialog {
     position: relative;
     z-index: map.get(variables.$clr-layers, modal);
-    width: modal-variables.$clr-modal-md-width;
+    @include mixins.css-var(
+      width,
+      clr-modal-md-width,
+      modal-variables.$clr-modal-md-width,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      border-radius,
+      clr-modal-border-radius,
+      modal-variables.$clr-modal-border-radius,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      box-shadow,
+      clr-modal-content-box-shadow,
+      0 variables.$clr_baselineRem_1px variables.$clr_baselineRem_2px variables.$clr_baselineRem_2px
+        modal-variables.$clr-modal-content-box-shadow-color,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(border-style, clr-modal-content-border-style, none, variables.$clr-use-custom-properties);
+    @include mixins.css-var(border-width, clr-modal-content-border-width, 0, variables.$clr-use-custom-properties);
+    @include mixins.css-var(
+      border-color,
+      clr-modal-content-border-color,
+      transparent,
+      variables.$clr-use-custom-properties
+    );
+    overflow: hidden;
     max-width: 100%;
 
     &.modal-sm {
-      width: modal-variables.$clr-modal-sm-width;
+      @include mixins.css-var(
+        width,
+        clr-modal-sm-width,
+        modal-variables.$clr-modal-sm-width,
+        variables.$clr-use-custom-properties
+      );
     }
 
     &.modal-lg {
-      width: modal-variables.$clr-modal-lg-width;
+      @include mixins.css-var(
+        width,
+        clr-modal-lg-width,
+        modal-variables.$clr-modal-lg-width,
+        variables.$clr-use-custom-properties
+      );
     }
 
     &.modal-xl {
-      width: modal-variables.$clr-modal-xl-width;
+      @include mixins.css-var(
+        width,
+        clr-modal-xl-width,
+        modal-variables.$clr-modal-xl-width,
+        variables.$clr-use-custom-properties
+      );
     }
 
-    $modal-boxshadow-y: variables.$clr_baselineRem_1px;
-    $modal-boxshadow-spread: variables.$clr_baselineRem_2px;
-
     .modal-content {
-      padding: modal-variables.$clr-modal-content-padding-top modal-variables.$clr-modal-content-padding-right
-        modal-variables.$clr-modal-content-padding-bottom modal-variables.$clr-modal-content-padding-left;
       @include mixins.css-var(
-        background-color,
-        clr-modal-bg-color,
-        modal-variables.$clr-modal-bg-color,
+        padding,
+        clr-modal-content-padding,
+        modal-variables.$clr-modal-content-padding-top modal-variables.$clr-modal-content-padding-right
+          modal-variables.$clr-modal-content-padding-bottom modal-variables.$clr-modal-content-padding-left,
         variables.$clr-use-custom-properties
       );
       @include mixins.css-var(
-        border-radius,
-        clr-modal-border-radius,
-        modal-variables.$clr-modal-border-radius,
+        background-color,
+        clr-modal-bg-color,
+        modal-variables.$clr-modal-bg-color,
         variables.$clr-use-custom-properties
       );
-      // IE/OldEdge
-      box-shadow: 0 $modal-boxshadow-y $modal-boxshadow-spread $modal-boxshadow-spread
-        modal-variables.$clr-modal-content-box-shadow-color;
-      @if variables.$clr-use-custom-properties == true {
-        box-shadow: 0
-          $modal-boxshadow-y
-          $modal-boxshadow-spread
-          $modal-boxshadow-spread
-          var(--clr-modal-content-box-shadow-color);
-      }
     }
   }
 
   .modal-header {
     border-bottom: none;
-    padding: 0 0 variables.$clr_baselineRem_1 0;
+    @include mixins.css-var(
+      padding,
+      clr-modal-header-padding,
+      0 0 variables.$clr_baselineRem_1 0,
+      variables.$clr-use-custom-properties
+    );
 
     // TODO: This class is used only in the clr-modal template.
     // It should be merged this with `.modal-header` in a major version
@@ -159,6 +192,15 @@
     overflow-x: hidden;
     padding: 0 variables.$clr_baselineRem_0_125;
 
+    .modal-body {
+      @include mixins.css-var(
+        color,
+        clr-modal-text-color,
+        variables.$clr-p1-color,
+        variables.$clr-use-custom-properties
+      );
+    }
+
     & > :first-child {
       margin-top: 0;
     }
@@ -170,11 +212,22 @@
   .modal-footer {
     display: flex;
     justify-content: flex-end;
-    padding: variables.$clr_baselineRem_1 0 0 0;
+    @include mixins.css-var(
+      padding,
+      clr-modal-footer-padding,
+      variables.$clr_baselineRem_1 0 0 0,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      gap,
+      clr-modal-footer-gap,
+      variables.$clr_baselineRem_0_5,
+      variables.$clr-use-custom-properties
+    );
 
     .btn {
       //switched right margin to left because footer is right aligned
-      margin: 0 0 0 variables.$clr_baselineRem_0_5;
+      margin: 0;
     }
   }
 
@@ -186,19 +239,34 @@
 
   @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, sm)) {
     .modal-content {
-      padding: variables.$clr_baselineRem_0_5 0 variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_1;
+      @include mixins.css-var(
+        padding,
+        clr-modal-sm-content-padding,
+        variables.$clr_baselineRem_0_5 0 variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_1,
+        variables.$clr-use-custom-properties
+      );
     }
 
     .modal-header {
-      padding: 0 variables.$clr_baselineRem_1 variables.$clr_baselineRem_0_5 0;
+      @include mixins.css-var(
+        padding,
+        clr-modal-sm-header-padding,
+        0 variables.$clr_baselineRem_1 variables.$clr_baselineRem_0_5 0,
+        variables.$clr-use-custom-properties
+      );
     }
 
     .modal-body-wrapper {
       max-height: 55vh;
     }
 
     .modal-footer {
-      padding: variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_1 0 0;
+      @include mixins.css-var(
+        padding,
+        clr-modal-sm-footer-padding,
+        variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_1 0 0,
+        variables.$clr-use-custom-properties
+      );
     }
   }
 

projects/angular/src/modal/_properties.modal.scss

@@ -11,6 +11,11 @@
   @if variables.$clr-use-custom-properties == true {
     :root {
       // Usage: ../modal/_modal.clarity.scss
+      --clr-modal-sm-width: #{variables.$clr_baselineRem_12};
+      --clr-modal-md-width: #{variables.$clr_baselineRem_24};
+      --clr-modal-lg-width: #{variables.$clr_baselineRem_36};
+      --clr-modal-xl-width: #{variables.$clr_baselineRem_48};
+      --clr-modal-text-color: #{variables.$clr-p1-color};
       --clr-modal-close-color: var(--clr-color-neutral-600);
       --clr-modal-bg-color: var(--clr-color-neutral-0);
       --clr-modal-content-box-shadow-color: rgba(
@@ -19,14 +24,33 @@
         #{color.blue(variables.$clr-color-neutral-1000)},
         0.2
       );
+      --clr-modal-content-box-shadow: 0
+        #{variables.$clr_baselineRem_1px}
+        #{variables.$clr_baselineRem_2px}
+        #{variables.$clr_baselineRem_2px}
+        var(--clr-modal-content-box-shadow-color);
       --clr-modal-backdrop-color: var(--clr-color-neutral-900);
       --clr-modal-backdrop-opacity: 0.85;
       --clr-modal-border-radius: var(--clr-global-borderradius);
+      --clr-modal-content-border-style: none;
+      --clr-modal-content-border-color: transparent;
+      --clr-modal-content-border-width: 0;
+      --clr-modal-content-border-radius: unset;
+      --clr-modal-content-padding: #{variables.$clr_baselineRem_1};
+      --clr-modal-sm-content-padding: #{variables.$clr_baselineRem_0_5}
+        0
+        #{variables.$clr_baselineRem_0_5}
+        #{variables.$clr_baselineRem_1};
 
       // Usage: ../modal/_modal.clarity.scss
       --clr-modal-title-color: var(--clr-h3-color);
       --clr-modal-title-font-family: var(--clr-h3-font-family);
       --clr-modal-title-font-weight: var(--clr-h3-font-weight);
+      --clr-modal-header-padding: 0 0 #{variables.$clr_baselineRem_1} 0;
+      --clr-modal-sm-header-padding: 0 #{variables.$clr_baselineRem_1} #{variables.$clr_baselineRem_0_5} 0;
+      --clr-modal-footer-padding: #{variables.$clr_baselineRem_1} 0 0 0;
+      --clr-modal-sm-footer-padding: #{variables.$clr_baselineRem_0_5} #{variables.$clr_baselineRem_1} 0 0;
+      --clr-modal-footer-gap: #{variables.$clr_baselineRem_0_5};
     }
   }
 }

projects/ui/src/shim.cds-core.scss

@@ -708,10 +708,27 @@
 
   /* Modal */
 
+  --clr-modal-border-radius: var(--cds-alias-object-border-radius-100);
   --clr-modal-title-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400));
-  --clr-modal-close-color: var(--cds-alias-object-interaction-color); // var(--clr-color-neutral-600);
-  --clr-modal-bg-color: var(--cds-alias-object-overlay-background); // var(--clr-color-neutral-0);
+  --clr-modal-text-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400));
+  --clr-modal-close-color: var(--cds-alias-typography-color-450); // var(--clr-color-neutral-600);
+  --clr-modal-bg-color: var(--cds-alias-object-container-background); // var(--clr-color-neutral-0);
   --clr-modal-backdrop-color: var(--cds-alias-object-overlay-backdrop-background); // var(--clr-color-neutral-900);
+  --clr-modal-content-box-shadow: var(--cds-alias-object-shadow-300);
+  --clr-modal-content-border-style: solid;
+  --clr-modal-content-border-color: var(--cds-alias-object-container-border-color);
+  --clr-modal-content-border-width: var(--cds-alias-object-border-width-100);
+  --clr-modal-content-padding: var(--cds-global-space-9);
+  --clr-modal-sm-content-padding: var(--cds-global-space-9);
+  --clr-modal-header-padding: 0 0 var(--cds-global-space-9) 0;
+  --clr-modal-sm-header-padding: 0 0 var(--cds-global-space-9) 0;
+  --clr-modal-footer-padding: var(--cds-global-space-9) 0 0 0;
+  --clr-modal-sm-footer-padding: var(--cds-global-space-9) 0 0 0;
+  --clr-modal-footer-gap: var(--cds-global-space-5);
+  --clr-modal-sm-width: calc(288 * (1rem / var(--clr-global-font-size)));
+  --clr-modal-md-width: calc(576 * (1rem / var(--clr-global-font-size)));
+  --clr-modal-lg-width: calc(864 * (1rem / var(--clr-global-font-size)));
+  --clr-modal-xl-width: calc(1152 * (1rem / var(--clr-global-font-size)));
 
   /* Navigation */