CR2023: Update spacing and fonts inside cards in Customize Chrome

http://screen/8jsBgiXvjyhgCcS Bug: 1430915 Change-Id: I45bd1fa207cb42a5eec2092f6f18f07daef8d395 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4582129 Reviewed-by: Riley Tatum <rtatum@google.com> Commit-Queue: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/main@{#1154009}
chromium · Jun 6, 2023 · 83ea097 · 83ea097
1 parent 61289d5
commit 83ea097
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 1 deletion.
diff --git a/chrome/browser/resources/side_panel/customize_chrome/app.html b/chrome/browser/resources/side_panel/customize_chrome/app.html
@@ -38,6 +38,9 @@
   }
 
   :host-context([chrome-refresh-2023]) .sp-card {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
     max-width: calc(320px - 2 * var(--sp-body-padding));
   }
 

diff --git a/chrome/browser/resources/side_panel/customize_chrome/button_label.html b/chrome/browser/resources/side_panel/customize_chrome/button_label.html
@@ -10,6 +10,11 @@
   #labelDescription {
     color: var(--cr-secondary-text-color)
   }
+
+  :host-context([chrome-refresh-2023]) #labelDescription {
+    font-weight: 400;
+    margin-block-start: 4px;
+  }
 </style>
 <div id="label">[[label]]</div>
 <div id="labelDescription" hidden="[[!labelDescription]]">

diff --git a/chrome/browser/resources/side_panel/customize_chrome/cards.html b/chrome/browser/resources/side_panel/customize_chrome/cards.html
@@ -7,6 +7,13 @@
     margin: 0 16px 16px;
   }
 
+  :host-context([chrome-refresh-2023]) #showToggleContainer {
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: var(--sp-card-padding);
+  }
+
   #showToggleTitle {
     flex-grow: 1;
   }
@@ -16,23 +23,43 @@
     margin: 0 16px;
   }
 
+  :host-context([chrome-refresh-2023]) #cards {
+    margin: 0;
+  }
+
   .card {
     display: flex;
     justify-content: space-between;
     margin-bottom: 16px;
   }
 
+  :host-context([chrome-refresh-2023]) .card {
+    margin: 0;
+    padding: var(--sp-card-padding);
+    padding-inline-start: 32px;
+  }
+
   .card-name {
     font-size: 13px;
     line-height: 20px;
     margin-inline-start: 24px;
   }
 
+  :host-context([chrome-refresh-2023]) .card-name {
+    font-size: inherit;
+    line-height: inherit;
+    margin-inline-start: 0;
+  }
+
   .card-checkbox {
     margin-inline-end: 3px;
     width: 16px;
   }
 
+  :host-context([chrome-refresh-2023]) .card-checkbox {
+    margin-inline-end: 0;
+  }
+
   .card-option-name {
     margin-inline-start: 40px;
   }
@@ -46,6 +73,11 @@
     margin-bottom: 16px;
   }
 
+  :host-context([chrome-refresh-2023]) hr {
+    margin: var(--sp-card-block-padding) var(--sp-card-inline-padding);
+    width: auto;
+  }
+
   cr-toggle {
     margin-inline-start: 16px;
   }

diff --git a/chrome/browser/resources/side_panel/customize_chrome/shortcuts.html b/chrome/browser/resources/side_panel/customize_chrome/shortcuts.html
@@ -5,18 +5,34 @@
     margin: 0 16px 16px 16px;
   }
 
+  :host-context([chrome-refresh-2023]) #showShortcutsToggleContainer {
+    align-items: center;
+    margin: 0;
+    padding: var(--sp-card-padding);
+  }
+
   #showShortcutsToggleTitle {
     font-size: 13px;
     line-height: 20px;
   }
 
+  :host-context([chrome-refresh-2023]) #showShortcutsToggleTitle {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
   #options {
     align-items: center;
     display: flex;
     line-height: 20px;
     margin: 0 16px;
   }
 
+  :host-context([chrome-refresh-2023]) #options {
+    line-height: inherit;
+    margin: 0;
+  }
+
   iron-collapse {
     --iron-collapse-transition-duration: 300ms;
   }
@@ -36,6 +52,10 @@
     float: left;
   }
 
+  :host-context([chrome-refresh-2023]) cr-radio-button {
+    margin: var(--sp-card-padding);
+  }
+
   /**
    * Members of this class are accessible text not meant to be seen by the user.
    * Screen readers ignore elements styled with display:none or
@@ -52,11 +72,21 @@
     margin-inline-start: 24px;
   }
 
+  :host-context([chrome-refresh-2023]) customize-chrome-button-label {
+    margin: 0;
+    padding: var(--sp-card-block-padding) 32px;
+  }
+
   hr {
     margin-bottom: 16px;
   }
+
+  :host-context([chrome-refresh-2023]) hr {
+    margin: var(--sp-card-block-padding) var(--sp-card-inline-padding);
+    width: auto;
+  }
 </style>
-<div id="showShortcutsToggleContainer">
+<div id="showShortcutsToggleContainer" class="sp-card-content">
   <div id="showShortcutsToggleTitle">$i18n{showShortcutsToggle}</div>
   <cr-toggle id="showShortcutsToggle" title="$i18n{showShortcutsToggle}"
     checked="[[show_]]" on-change="onShowShortcutsToggleChange_"></cr-toggle>

diff --git a/chrome/browser/resources/side_panel/shared/sp_shared_vars.css b/chrome/browser/resources/side_panel/shared/sp_shared_vars.css
@@ -10,6 +10,7 @@ html[chrome-refresh-2023] {
   --sp-body-padding: 8px;
   --sp-card-block-padding: 8px;
   --sp-card-inline-padding: 16px;
+  --sp-card-padding: var(--sp-card-block-padding) var(--sp-card-inline-padding);
   --sp-card-gap: 12px;
 
   /* Override default WebUI vars from cr_shared_vars. */