oobe-adaptive-dialog: move inside all related CCS styles and vars

Move classes related to text styles inside the dialog.
Use host-context to check the orientation so the minimum number of CSS
vars are set outside of the object.

Bug: 1151292
Change-Id: Ic372098d24dc4af123d5b6ee737b970d3959ae34
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2593631Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#837597}

chrome/browser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog.html

@@ -61,10 +61,52 @@
         height: var(--oobe-adaptive-dialog-height);
         width: var(--oobe-adaptive-dialog-width);
         @apply --oobe-default-font;
+        --text-line-height: 18px;
         --oobe-adaptive-dialog-buttons-horizontal-padding: min(40px,
           max(24px, calc(var(--oobe-adaptive-dialog-width) * 0.025)));
         --oobe-adaptive-dialog-buttons-vertical-padding: min(40px,
           max(24px, calc(var(--oobe-adaptive-dialog-height) * 0.025)));
+        --oobe-adaptive-dialog-content-padding: 40px;
+      }
+
+      :host-context([orientation=horizontal]) {
+        --oobe-adaptive-dialog-content-direction: row;
+        --oobe-adaptive-dialog-item-alignment: unset;
+        --oobe-text-alignment: start;
+        --oobe-adaptive-dialog-content-width: calc(
+            var(--oobe-adaptive-dialog-width) -
+            4 * var(--oobe-adaptive-dialog-content-padding) -
+            var(--oobe-adaptive-dialog-header-width));
+        /* Header takes 40% of the width remaining after applying padding */
+        --oobe-adaptive-dialog-header-width: clamp(302px,
+            calc(0.4 * (var(--oobe-adaptive-dialog-width) -
+            4 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
+      }
+
+      :host-context([orientation=vertical]) {
+        --oobe-adaptive-dialog-content-direction: column;
+        --oobe-adaptive-dialog-item-alignment: center;
+        --oobe-text-alignment: center;
+        --oobe-adaptive-dialog-content-width: 100%;
+        /* Header takes 40% of the width remaining after applying padding */
+        --oobe-adaptive-dialog-header-width: clamp(302px,
+            calc(0.4 * (var(--oobe-adaptive-dialog-width) -
+            2 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
+      }
+
+      #oobe-title ::slotted(h1) {
+        color: var(--oobe-header-text-color);
+        @apply --oobe-header-font;
+        margin: 0;
+        text-align: var(--oobe-text-alignment);
+      }
+
+      #oobe-subtitle ::slotted(*) {
+        color: var(--oobe-subheader-text-color);
+        line-height: var(--text-line-height);
+        margin: 0;
+        overflow-wrap: break-word;
+        text-align: var(--oobe-text-alignment);
       }
 
       #main-container {

chrome/browser/resources/chromeos/login/components/oobe_fonts.css

@@ -39,17 +39,3 @@
     font-weight: var(--oobe-modal-dialog-header-font-weight);
   };
 }
-
-.title {
-  color: var(--oobe-header-text-color);
-  @apply --oobe-header-font;
-  margin: 0;
-}
-
-.subtitle {
-  color: var(--oobe-subheader-text-color);
-  line-height: var(--text-line-height);
-  margin: 0;
-  overflow-wrap: break-word;
-  text-align: var(--oobe-subtitle-text-alignment);
-}

chrome/browser/resources/chromeos/login/md_screen_container.css

@@ -104,9 +104,9 @@ html[new-layout] #oobe {
 }
 
 html:not([new-layout]) #outer-container.fullscreen,
-#outer-container.fullscreen #oobe,
-#inner-container,
-#inner-container > .step {
+html:not([new-layout]) #outer-container.fullscreen #oobe,
+html:not([new-layout]) #inner-container,
+html:not([new-layout]) #inner-container > .step {
   height: 100%;
   width: 100%;
 }

ui/login/oobe.css

@@ -46,36 +46,10 @@ html[screen=oobe] body {
   background-color: white;
 }
 
-/* New default paddings and constants */
+/* New dialog size */
 html {
   --oobe-adaptive-dialog-width: var(--oobe-oobe-dialog-width-base);
   --oobe-adaptive-dialog-height: var(--oobe-oobe-dialog-height-base);
-  --oobe-adaptive-dialog-content-padding: 40px;
-}
-
-html[orientation=horizontal] {
-  --oobe-adaptive-dialog-content-direction: row;
-  --oobe-adaptive-dialog-item-alignment: unset;
-  --oobe-subtitle-text-alignment: start;
-  --oobe-adaptive-dialog-content-width: calc(
-      var(--oobe-adaptive-dialog-width) -
-      4 * var(--oobe-adaptive-dialog-content-padding) -
-      var(--oobe-adaptive-dialog-header-width));
-  /* Header width takes 40% of the width remaining after applying padding */
-  --oobe-adaptive-dialog-header-width: clamp(302px,
-      calc(0.4 * (var(--oobe-adaptive-dialog-width) -
-      4 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
-}
-
-html[orientation=vertical] {
-  --oobe-adaptive-dialog-content-direction: column;
-  --oobe-adaptive-dialog-item-alignment: center;
-  --oobe-subtitle-text-alignment: center;
-  --oobe-adaptive-dialog-content-width: 100%;
-  /* Header width takes 40% of the width remaining after applying padding */
-  --oobe-adaptive-dialog-header-width: clamp(302px,
-      calc(0.4 * (var(--oobe-adaptive-dialog-width) -
-      2 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
 }
 
 /* Padding defaults */