Add non-CR2023 styles for Compose

Non-CR2023: http://screen/7S6pG7EWmf8v4Te Non-CR2023: http://screen/8FrecAS9h7qT8Ku CR2023: http://screen/6ViN6K3YrmRLppY CR2023: http://screen/BvLwZiX7W4jgQyg Bug: b:307771457 Change-Id: I6fff713de56590304b80366a9c734f52dbdceb03 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4989768 Commit-Queue: John Lee <johntlee@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/main@{#1217331}
chromium · Oct 31, 2023 · d931397 · d931397
1 parent bb06823
commit d931397
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 17 deletions.
diff --git a/chrome/browser/resources/compose/app.html b/chrome/browser/resources/compose/app.html
@@ -9,6 +9,10 @@
   }
 
   a {
+    color: var(--cr-link-color);
+  }
+
+  :host-context([chrome-refresh-2023]) a {
     color: var(--color-compose-dialog-link);
   }
 
@@ -20,12 +24,19 @@
   }
 
   h1 {
+    color: var(--cr-primary-text-color);
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 20px;
+    margin: 0;
+    margin-inline-end: auto;
+  }
+
+  :host-context([chrome-refresh-2023]) h1 {
     color: var(--color-compose-dialog-title);
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    margin: 0;
-    margin-inline-end: auto;
   }
 
   cr-icon-button {
@@ -41,6 +52,7 @@
   }
 
   #body {
+    --results-background_: rgb(234, 240, 249);
     --scrollbar-width_: 4px;
     box-sizing: border-box;
     display: flex;
@@ -53,11 +65,30 @@
     scrollbar-gutter: stable;
   }
 
+  @media (prefers-color-scheme: dark) {
+    #body {
+      --results-background_: rgb(56, 58, 62);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]) #body {
+    --results-background_: var(--color-compose-dialog-result-background);
+  }
+
   #body.is-scrolled {
+    border-top: var(--cr-hairline);
+  }
+
+  :host-context([chrome-refresh-2023]) #body.is-scrolled {
     border-top: solid 1px var(--color-compose-dialog-divider);
   }
 
   #body.can-scroll:not(.scrolled-to-bottom) {
+    border-bottom: var(--cr-hairline);
+  }
+
+  :host-context([chrome-refresh-2023])
+      #body.can-scroll:not(.scrolled-to-bottom) {
     border-bottom: solid 1px var(--color-compose-dialog-divider);
   }
 
@@ -67,26 +98,40 @@
   }
 
   #body::-webkit-scrollbar-thumb {
+    background: var(--google-grey-300);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #body::-webkit-scrollbar-thumb {
+      background: var(--google-grey-500);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]) #body::-webkit-scrollbar-thumb {
     background: var(--color-compose-dialog-scrollbar-thumb);
   }
 
   #loading {
     display: flex;
-    border: solid 1px var(--color-compose-dialog-result-background);
+    border: solid 1px var(--results-background_);
     border-radius: 8px;
     padding: 16px;
   }
 
   #resultContainer {
     border-radius: 8px;
     padding: 16px;
-    background: var(--color-compose-dialog-result-background);
-    color: var(--color-compose-dialog-result-foreground);
-    font-size: 13px;
-    font-weight: 400;
+    background: var(--results-background_);
+    color: var(--cr-primary-text-color);
+    font-size: 12px;
     line-height: 20px;
   }
 
+  :host-context([chrome-refresh-2023]) #resultContainer {
+    color: var(--color-compose-dialog-result-foreground);
+    line-height: 16px;
+  }
+
   #resultOptions {
     display: flex;
     align-items: flex-end;
@@ -95,9 +140,14 @@
   }
 
   #resultOptions .md-select {
+    --md-select-bg-color: transparent;
     width: 82px;
   }
 
+  :host-context(html:not([chrome-refresh-2023])) #resultOptions .md-select {
+    border: solid 1px var(--google-grey-400);
+  }
+
   .icon-buttons-row {
     display: grid;
     grid-auto-columns: var(--cr-icon-size);
@@ -110,11 +160,15 @@
   }
 
   .icon-buttons-row cr-icon-button {
-    --cr-icon-button-fill-color: var(--color-compose-dialog-result-icon);
+    --cr-icon-button-fill-color: var(--cr-secondary-text-color);
     --cr-icon-button-icon-size: var(--cr-icon-size);
     margin: 0;
   }
 
+  :host-context([chrome-refresh-2023]) .icon-buttons-row cr-icon-button {
+    --cr-icon-button-fill-color: var(--color-compose-dialog-result-icon);
+  }
+
   .footer {
     align-items: center;
     display: flex;
@@ -127,8 +181,13 @@
     align-items: center;
     gap: 28px;
     margin-inline-end: auto;
-    color: var(--color-compose-dialog-foreground-subtle);
+    color: var(--cr-secondary-text-color);
     font-size: 12px;
+    line-height: 20px;
+  }
+
+  :host-context([chrome-refresh-2023]) .footer-text {
+    color: var(--color-compose-dialog-foreground-subtle);
     line-height: 16px;
   }
 

diff --git a/chrome/browser/resources/compose/compose.html b/chrome/browser/resources/compose/compose.html
@@ -4,6 +4,7 @@
   <head>
     <meta charset="utf-8">
     <title>Compose</title>
+    <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
     <link rel="stylesheet" href="chrome://theme/colors.css?sets=ui,chrome">
     <style>
@@ -15,7 +16,13 @@
         overflow: hidden;
       }
 
-      html {
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: var(--md-background-color);
+        }
+      }
+
+      html[chrome-refresh-2023] {
         background: var(--color-compose-dialog-background);
       }
     </style>

diff --git a/chrome/browser/resources/compose/textarea.html b/chrome/browser/resources/compose/textarea.html
@@ -12,12 +12,12 @@
   textarea {
     appearance: none;
     background: transparent;
-    border: solid 1px var(--color-compose-dialog-textarea-outline);
+    border: solid 1px var(--google-grey-300);
     border-radius: 8px;
-    color: var(--color-compose-dialog-textarea);
+    color: var(--cr-primary-text-color);
     font: inherit;
     font-size: 12px;
-    line-height: 16px;
+    line-height: 20px;
     resize: none;
     outline: none;
     width: 100%;
@@ -26,22 +26,58 @@
     padding: 10px;
   }
 
+  @media (prefers-color-scheme: dark) {
+    textarea {
+      border-color: var(--google-grey-500);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]) textarea {
+    border-color: var(--color-compose-dialog-textarea-outline);
+    color: var(--color-compose-dialog-textarea);
+    line-height: 16px;
+  }
+
   textarea::placeholder {
+    color: var(--cr-secondary-text-color);
+  }
+
+  :host-context([chrome-refresh-2023]) textarea::placeholder {
     color: var(--color-compose-dialog-textarea-placeholder);
   }
 
   :host([too-long_]) textarea {
-    outline: solid 2px var(--color-compose-dialog-error);
+    outline: solid 2px var(--google-red-600);
     outline-offset: -2px;
   }
 
+  @media (prefers-color-scheme: dark) {
+    :host([too-long_]) textarea {
+      outline-color: var(--google-red-300);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]):host([too-long_]) #textarea {
+    outline-color: var(--color-compose-dialog-error);
+  }
+
   #error {
     margin: 4px 10px 0;
-    color: var(--color-compose-dialog-error);
+    color: var(--google-red-600);
     font-size: 11px;
     line-height: 16px;
   }
 
+  @media (prefers-color-scheme: dark) {
+    #error {
+      color: var(--google-red-300);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]) #error {
+    color: var(--color-compose-dialog-error);
+  }
+
   textarea:focus {
     outline: solid 2px var(--cr-focus-outline-color);
     outline-offset: -2px;
@@ -51,18 +87,36 @@
     display: flex;
     align-items: center;
     padding: 16px;
+    background: var(--google-grey-100);
+    color: var(--cr-primary-text-color);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #readonlyContainer {
+      background: rgba(0, 0, 0, .3);
+    }
+  }
+
+  :host-context([chrome-refresh-2023]) #readonlyContainer {
     background: var(--color-compose-dialog-textarea-readonly-background);
-    color: var(--color-compose-dialog-textarea-readonly-foreground)
+    color: var(--color-compose-dialog-textarea-readonly-foreground);
   }
 
   #readonlyText {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
     overflow: hidden;
-    line-height: 16px;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
   }
 
+  :host-context([chrome-refresh-2023]) #readonlyText {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
   #editButtonContainer {
     --cr-icon-button-icon-size: var(--cr-icon-size);
     width: var(--cr-icon-size);