refactor(dialog): reduce CSS size

Reduces the size by removing private (`--_*`) custom properties. These are not needed since the component does not share styles across variants.

Size before: 4597b / 1322b gzip
Size after: 4092b (-13%) / 1194b gzip (-10%)

PiperOrigin-RevId: 600905310

Author: asyncliz

dialog/internal/_dialog.scss

@@ -34,37 +34,45 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-dialog-values();
   $md-sys-color: tokens.md-sys-color-values-light();
   $md-sys-motion: tokens.md-sys-motion-values();
+  $tokens: tokens.md-comp-dialog-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
+  }
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-dialog-#{$token}, #{$value});
-    }
+  // Support logical shape properties
+  $tokens: map.merge(
+    $tokens,
+    (
+      'container-shape-start-start':
+        var(
+          --md-dialog-container-shape-start-start,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-start-end':
+        var(
+          --md-dialog-container-shape-start-end,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-end-end':
+        var(
+          --md-dialog-container-shape-end-end,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-end-start':
+        var(
+          --md-dialog-container-shape-end-start,
+          map.get($tokens, 'container-shape')
+        ),
+    )
+  );
 
-    // Support logical shape properties
-    --_container-shape-start-start: var(
-      --md-dialog-container-shape-start-start,
-      var(--_container-shape)
-    );
-    --_container-shape-start-end: var(
-      --md-dialog-container-shape-start-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-end: var(
-      --md-dialog-container-shape-end-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-start: var(
-      --md-dialog-container-shape-end-start,
-      var(--_container-shape)
-    );
-
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
+  :host {
+    border-start-start-radius: map.get($tokens, 'container-shape-start-start');
+    border-start-end-radius: map.get($tokens, 'container-shape-start-end');
+    border-end-end-radius: map.get($tokens, 'container-shape-end-end');
+    border-end-start-radius: map.get($tokens, 'container-shape-end-start');
     display: contents;
     margin: auto;
     max-height: min(560px, calc(100% - 48px));
@@ -123,13 +131,13 @@
 
   .headline {
     align-items: center;
-    color: var(--_headline-color);
+    color: map.get($tokens, 'headline-color');
     display: flex;
     flex-direction: column;
-    font-family: var(--_headline-font);
-    font-size: var(--_headline-size);
-    line-height: var(--_headline-line-height);
-    font-weight: var(--_headline-weight);
+    font-family: map.get($tokens, 'headline-font');
+    font-size: map.get($tokens, 'headline-size');
+    line-height: map.get($tokens, 'headline-line-height');
+    font-weight: map.get($tokens, 'headline-weight');
     position: relative;
   }
 
@@ -147,12 +155,12 @@
   }
 
   slot[name='icon']::slotted(*) {
-    color: var(--_icon-color);
+    color: map.get($tokens, 'icon-color');
     fill: currentColor;
-    font-size: var(--_icon-size);
+    font-size: map.get($tokens, 'icon-size');
     margin-top: 24px;
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    height: map.get($tokens, 'icon-size');
+    width: map.get($tokens, 'icon-size');
   }
 
   .has-icon slot[name='headline']::slotted(*) {
@@ -181,7 +189,7 @@
   }
 
   .container::before {
-    background: var(--_container-color);
+    background: map.get($tokens, 'container-color');
     border-radius: inherit;
     content: '';
     inset: 0;
@@ -208,11 +216,11 @@
   }
 
   .content {
-    color: var(--_supporting-text-color);
-    font-family: var(--_supporting-text-font);
-    font-size: var(--_supporting-text-size);
-    line-height: var(--_supporting-text-line-height);
-    font-weight: var(--_supporting-text-weight);
+    color: map.get($tokens, 'supporting-text-color');
+    font-family: map.get($tokens, 'supporting-text-font');
+    font-size: map.get($tokens, 'supporting-text-size');
+    line-height: map.get($tokens, 'supporting-text-line-height');
+    font-weight: map.get($tokens, 'supporting-text-weight');
     height: min-content; // Needed for Safari
     position: relative;
   }