chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/ui/legacy/inspectorCommon.css

@@ -27,7 +27,7 @@ body {
   margin: 0;
   cursor: default;
   font-family: var(--default-font-family);
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   tab-size: 4;
   user-select: none;
   color: var(--sys-color-on-surface);
@@ -107,7 +107,7 @@ iframe.fill {
 }
 
 .view-container > devtools-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .flex-auto {
@@ -143,17 +143,17 @@ iframe.widget {
 
 .highlighted-search-result,
 :host::highlight(highlighted-search-result) {
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
   background-color: var(--sys-color-yellow-container);
   color: var(--sys-color-on-yellow-container);
-  outline: 1px solid var(--sys-color-yellow-container);
+  outline: var(--sys-size-1) solid var(--sys-color-yellow-container);
 }
 
 .link {
   cursor: pointer;
   text-decoration: underline;
   color: var(--text-link);
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 button,
@@ -177,8 +177,8 @@ input {
     &:hover::after,
     &:active::before {
       content: '';
-      height: 24px;
-      width: 24px;
+      height: var(--sys-size-11);
+      width: var(--sys-size-11);
       border-radius: var(--sys-shape-corner-full);
       position: absolute;
     }
@@ -202,14 +202,14 @@ input {
       width: 15px;
       border-radius: 5px;
       position: absolute;
-      border: 2px solid var(--sys-color-state-focus-ring);
+      border: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     }
 
     &.small:hover::after,
     &.small:active::before {
-      height: 12px;
-      width: 12px;
-      border-radius: 2px;
+      height: var(--sys-size-6);
+      width: var(--sys-size-6);
+      border-radius: var(--sys-size-2);
     }
   }
 }
@@ -228,10 +228,10 @@ input::placeholder {
 .harmony-input:not([type]),
 .harmony-input[type='number'],
 .harmony-input[type='text'] {
-  padding: 3px 6px;
-  height: 24px;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  padding: 3px var(--sys-size-4);
+  height: var(--sys-size-11);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
 
   &.error-input,
   &:invalid {
@@ -252,7 +252,7 @@ input[type='radio'] {
   height: 17px;
   width: 17px;
   min-width: 17px;
-  border-radius: 8px;
+  border-radius: var(--sys-shape-corner-small);
   vertical-align: sub;
   margin: 0 5px 5px 0;
   accent-color: var(--sys-color-primary-bright);
@@ -292,8 +292,8 @@ input[type='range']::-webkit-slider-thumb,
   margin: 0;
   padding: 0;
   border: 0;
-  width: 12px;
-  height: 12px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
   margin-top: -5px;
   border-radius: 50%;
   background-color: var(--sys-color-primary);
@@ -304,12 +304,12 @@ input[type='range']::-webkit-slider-runnable-track {
   margin: 0;
   padding: 0;
   width: 100%;
-  height: 2px;
+  height: var(--sys-size-2);
   background-color: var(--sys-color-surface-variant);
 }
 
 input[type='range']:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 2px var(--sys-color-inverse-primary);
+  box-shadow: 0 0 0 var(--sys-size-2) var(--sys-color-inverse-primary);
 }
 
 input[type='range']:disabled::-webkit-slider-thumb {
@@ -327,10 +327,10 @@ input[type='range']:disabled::-webkit-slider-thumb {
   /* Note: this value is used in light & dark mode */
   --override-current-search-result-background-color: rgb(255 127 0 / 80%);
 
-  outline: 1px solid var(--sys-color-yellow-container);
-  border-radius: 1px;
-  padding: 1px;
-  margin: -1px;
+  outline: var(--sys-size-1) solid var(--sys-color-yellow-container);
+  border-radius: var(--sys-size-1);
+  padding: var(--sys-size-1);
+  margin: calc(-1 * var(--sys-size-1));
   background-color: var(--override-current-search-result-background-color);
   color: var(--sys-color-on-surface);
 }
@@ -343,12 +343,12 @@ input[type='range']:disabled::-webkit-slider-thumb {
   box-shadow: var(--drop-shadow);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
-  padding-left: 2px;
-  margin-left: -2px;
-  padding-right: 2px;
-  margin-right: -2px;
-  margin-bottom: -1px;
-  padding-bottom: 1px;
+  padding-left: var(--sys-size-2);
+  margin-left: calc(-1 * var(--sys-size-2));
+  padding-right: var(--sys-size-2);
+  margin-right: calc(-1 * var(--sys-size-2));
+  margin-bottom: calc(-1 * var(--sys-size-1));
+  padding-bottom: var(--sys-size-1);
   opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -412,7 +412,7 @@ select {
 
     &:focus {
       outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
-      outline-offset: -1px;
+      outline-offset: calc(-1 * var(--sys-size-1));
     }
   }
 }
@@ -462,7 +462,7 @@ select option {
 .gray-info-message {
   text-align: center;
   font-style: italic;
-  padding: 6px;
+  padding: var(--sys-size-4);
   color: var(--sys-color-token-subtle);
   white-space: nowrap;
 }
@@ -509,10 +509,10 @@ dt-icon-label {
 
 .dot::before {
   content: var(--image-file-empty);
-  width: 6px;
-  height: 6px;
+  width: var(--sys-size-4);
+  height: var(--sys-size-4);
   border-radius: 50%;
-  outline: 1px solid var(--icon-gap-default);
+  outline: var(--sys-size-1) solid var(--icon-gap-default);
   left: 9px;
   position: absolute;
   top: 9px;
@@ -555,9 +555,9 @@ dt-icon-label {
 .undisplayable-text,
 .expandable-inline-button {
   border: none;
-  padding: 1px 3px;
-  margin: 0 2px;
-  font-size: 11px;
+  padding: var(--sys-size-1) 3px;
+  margin: 0 var(--sys-size-2);
+  font-size: var(--sys-typescale-body5-size);
   font-family: inherit;
   white-space: nowrap;
   display: inline-block;
@@ -594,8 +594,8 @@ button.link {
 }
 
 button.link:focus-visible {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
   border-radius: var(--sys-shape-corner-full);
 }
 
@@ -614,19 +614,19 @@ button.link:focus-visible {
   .harmony-input:not([type]),
   .harmony-input[type='number'],
   .harmony-input[type='text'] {
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
   }
 
   .harmony-input:not([type]):focus,
   .harmony-input[type='number']:focus,
   .harmony-input[type='text']:focus {
-    border: 1px solid Highlight;
+    border: var(--sys-size-1) solid Highlight;
   }
 }
 /* search input with customized styling */
 input.custom-search-input::-webkit-search-cancel-button {
   appearance: none;
-  width: 16px;
+  width: var(--sys-size-8);
   height: 15px;
   margin-right: 0;
   opacity: 70%;
@@ -643,11 +643,11 @@ input.custom-search-input::-webkit-search-cancel-button:hover {
 /* loading spinner */
 .spinner::before {
   display: block;
-  width: var(--dimension, 24px);
-  height: var(--dimension, 24px);
+  width: var(--dimension, var(--sys-size-11));
+  height: var(--dimension, var(--sys-size-11));
   border: var(--override-spinner-size, 3px) solid
     var(--override-spinner-color, var(--sys-color-token-subtle));
-  border-radius: 12px;
+  border-radius: var(--sys-shape-corner-medium-small);
   clip-path: rect(0, var(--clip-size, 15px), var(--clip-size, 15px), 0);
   content: '';
   position: absolute;
@@ -762,8 +762,8 @@ devtools-toolbar {
   }
 
   & > devtools-issue-counter {
-    margin-top: -4px;
-    padding: 0 1px;
+    margin-top: calc(-1 * var(--sys-size-3));
+    padding: 0 var(--sys-size-1);
   }
 
   devtools-adorner.fix-perf-icon {
@@ -773,8 +773,8 @@ devtools-toolbar {
   }
 
   devtools-issue-counter.main-toolbar {
-    margin-left: 1px;
-    margin-right: 1px;
+    margin-left: var(--sys-size-1);
+    margin-right: var(--sys-size-1);
   }
 
   .toolbar-dropdown-arrow {
@@ -792,7 +792,7 @@ devtools-toolbar {
   .toolbar-button {
     white-space: nowrap;
     overflow: hidden;
-    min-width: 28px;
+    min-width: var(--sys-size-12);
     background: transparent;
     border-radius: 0;
 
@@ -871,9 +871,9 @@ devtools-toolbar {
 
   .toolbar-button:not(.toolbar-has-dropdown):focus-visible::before {
     position: absolute;
-    inset: 2px;
+    inset: var(--sys-size-2);
     background-color: var(--sys-color-state-focus-highlight);
-    border-radius: 2px;
+    border-radius: var(--sys-size-2);
     content: '';
     /* This ::before rule serves as a background for an element.
     Setting z-index to make sure it's always below the content. */
@@ -898,7 +898,7 @@ devtools-toolbar {
     background: var(--sys-color-cdt-base-container);
     animation: 2s fade-out;
     font-weight: normal;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     border-radius: 3px;
   }
 
@@ -909,11 +909,11 @@ devtools-toolbar {
   .toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {
     content: '';
     position: absolute;
-    bottom: 2px;
+    bottom: var(--sys-size-2);
     background-color: var(--sys-color-primary-bright);
     width: 4.5px;
     height: 4.5px;
-    border: 2px solid
+    border: var(--sys-size-2) solid
       var(--override-toolbar-background-color, --sys-color-cdt-base-container);
     border-radius: 50%;
     right: 0;
@@ -983,18 +983,18 @@ devtools-toolbar {
   /* Input */
 
   .toolbar-input {
-    box-shadow: inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 var(--sys-size-2) transparent;
     box-sizing: border-box;
     width: 120px;
     height: var(--sys-size-9);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
-    margin: 1px 3px;
-    border-radius: 100px;
+    margin: var(--sys-size-1) 3px;
+    border-radius: var(--sys-shape-corner-full);
     min-width: 35px;
     position: relative;
 
     &.focused {
-      box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+      box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
     }
 
     &:not(:has(devtools-button:hover), .disabled):hover {
@@ -1047,9 +1047,9 @@ devtools-toolbar {
 
   .toolbar-divider {
     background-color: var(--sys-color-divider);
-    width: 1px;
-    margin: 5px 4px;
-    height: 16px;
+    width: var(--sys-size-1);
+    margin: 5px var(--sys-size-3);
+    height: var(--sys-size-8);
   }
 
   .toolbar-spacer {
@@ -1067,14 +1067,14 @@ devtools-toolbar {
 
   &:not([floating]) > .toolbar-button:last-child:not(:first-child, select) {
     justify-content: left;
-    margin-right: 2px;
+    margin-right: var(--sys-size-2);
   }
 
   & > .highlight::before {
     content: '';
     position: absolute;
-    inset: 2px;
-    border-radius: 2px;
+    inset: var(--sys-size-2);
+    border-radius: var(--sys-size-2);
     background: var(--sys-color-neutral-container);
     z-index: -1;
   }
@@ -1259,7 +1259,7 @@ devtools-toolbar {
 .devtools-link {
   color: var(--text-link);
   text-decoration: underline;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 
   .elements-disclosure & {
     color: var(--text-link);

package/front_end/ui/legacy/inspectorDrawerTabbedPane.css

@@ -46,7 +46,7 @@ devtools-toolbar.collapsed-vertical-drawer-toolbar-content {
 devtools-toolbar.collapsed-vertical-drawer-toolbar-content .toolbar-button {
   margin: 0 auto;
   padding: 0;
-  padding-right: 1px;
+  padding-right: var(--sys-size-1);
   width: 27px;
   height: 26px;
   display: flex;

package/front_end/ui/legacy/listWidget.css

@@ -23,7 +23,7 @@
 
 .list-separator {
   background: var(--sys-color-divider);
-  height: 1px;
+  height: var(--sys-size-1);
 }
 
 .list-item {
@@ -123,16 +123,16 @@
 }
 
 .text-prompt-container {
-  padding: 3px 6px;
-  height: 24px;
+  padding: 3px var(--sys-size-4);
+  height: var(--sys-size-11);
   border: none;
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
   width: 100%;
   background-color: var(--sys-color-cdt-base-container);
 
   &:focus {
-    border: 1px solid var(--sys-color-state-focus-ring);
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   }
 
   & .text-prompt {

package/front_end/ui/legacy/progressIndicator.css

@@ -8,8 +8,8 @@
   background-color: var(--sys-color-error-bright);
   border: 0;
   width: 10px;
-  height: 12px;
-  border-radius: 2px;
+  height: var(--sys-size-6);
+  border-radius: var(--sys-size-2);
 }
 
 .progress-indicator-shadow-container {
@@ -22,12 +22,12 @@
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 150px;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
   color: var(--sys-color-token-subtle);
 }
 
 .progress-indicator-shadow-container progress {
   flex: auto;
-  margin: 0 2px;
+  margin: 0 var(--sys-size-2);
   width: 100px;
 }

package/front_end/ui/legacy/reportView.css

@@ -18,14 +18,14 @@
 }
 
 .report-header {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   padding: var(--sys-size-7) var(--sys-size-9);
 }
 
 .report-header devtools-toolbar {
-  margin-bottom: -8px;
+  margin-bottom: calc(-1 * var(--sys-size-5));
   margin-top: 5px;
-  margin-left: -8px;
+  margin-left: calc(-1 * var(--sys-size-5));
 }
 
 .report-title {
@@ -44,7 +44,7 @@
 .report-section {
   display: flex;
   padding: var(--sys-size-7) var(--sys-size-9) 11px var(--sys-size-9);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex-direction: column;
 }
 
@@ -68,7 +68,7 @@
   flex: 1 1 auto;
   text-overflow: ellipsis;
   overflow: hidden;
-  line-height: 16px;
+  line-height: var(--sys-size-8);
   color: var(--sys-color-on-surface);
   min-width: var(--sys-size-21);
   white-space: nowrap;
@@ -96,7 +96,7 @@
 .report-field-name {
   font: var(--sys-typescale-body5-medium);
   color: var(--sys-color-on-surface-subtle);
-  flex: 0 0 128px;
+  flex: 0 0 var(--sys-size-21);
   text-align: left;
   white-space: pre-wrap;
 }
@@ -116,7 +116,7 @@
 
 .report-field-value-subtitle {
   color: var(--sys-color-state-disabled);
-  line-height: 14px;
+  line-height: var(--sys-size-7);
 }
 
 .report-row-selectable {

package/front_end/ui/legacy/searchableView.css

@@ -6,7 +6,7 @@
 
 .search-bar {
   flex: 0 0 33px;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 
   devtools-icon[name="search"] {
     width: var(--sys-size-8);
@@ -83,7 +83,7 @@
     grid-column: 1/3;
     display: inline-flex;
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
-    border-radius: 100px;
+    border-radius: var(--sys-shape-corner-full);
     height: var(--sys-size-10);
     position: relative;
 
@@ -100,7 +100,7 @@
       left: 0;
       background: var(--sys-color-cdt-base);
       z-index: -10;
-      border-radius: 100px;
+      border-radius: var(--sys-shape-corner-full);
       padding: var(--sys-size-2);
     }
 
@@ -149,11 +149,11 @@
   }
 
   .replace-element:has(input:focus) {
-    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+    box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
   }
 
   .search-inputs:has(input[type="search"]:focus) .search-input-background {
-    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+    box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
   }
 }
 

package/front_end/ui/legacy/smallBubble.css

@@ -6,13 +6,13 @@
 
 div {
   display: inline-flex;
-  height: 14px;
+  height: var(--sys-size-7);
   align-items: center;
   vertical-align: middle;
   white-space: nowrap;
-  padding: 1px 4px;
+  padding: var(--sys-size-1) var(--sys-size-3);
   text-align: left;
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   line-height: normal;
   font-weight: bold;
   text-shadow: none;

package/front_end/ui/legacy/softContextMenu.css

@@ -6,10 +6,10 @@
 
 .soft-context-menu {
   overflow-y: auto;
-  min-width: 160px !important; /* stylelint-disable-line declaration-no-important */
+  min-width: var(--sys-size-23) !important; /* stylelint-disable-line declaration-no-important */
   /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.ts */
   padding: var(--sys-size-5) 0;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   border-radius: var(--sys-shape-corner-small);
   background-color: var(--app-color-menu-background);
   box-shadow: var(--sys-elevation-level3);
@@ -24,13 +24,13 @@
 }
 
 .dockside-title + devtools-toolbar {
-  margin-right: -8px;
+  margin-right: calc(-1 * var(--sys-size-5));
 }
 
 .soft-context-menu-item {
   display: flex;
   width: 100%;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   height: var(--sys-size-11);
   padding: 0 var(--sys-size-8);
   white-space: nowrap;

package/front_end/ui/legacy/softDropDownButton.css

@@ -38,7 +38,7 @@ button.soft-dropdown:hover:not(:active) > .title {
 
 @media (forced-colors: active) {
   button.soft-dropdown {
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
     background: ButtonFace;
     color: ButtonText;
   }

package/front_end/ui/legacy/splitWidget.css

@@ -1,29 +1,7 @@
 /*
- * Copyright (C) 2011 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
- * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
  */
 
 .shadow-split-widget {
@@ -51,7 +29,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 6px;
+  width: var(--sys-size-4);
   z-index: 4000;
 }
 
@@ -59,7 +37,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  height: 6px;
+  height: var(--sys-size-4);
   z-index: 4000;
 }
 
@@ -69,22 +47,22 @@
 
 .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
   border: 0;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
   border: 0;
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .shadow-split-widget.vbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
   border: 0;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .shadow-split-widget.hbox > .shadow-split-widget-sidebar:first-child:not(.maximized) {
   border: 0;
-  border-right: 1px solid var(--sys-color-divider);
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 :host-context(.disable-resizer-for-elements-hack) .shadow-split-widget-resizer {

package/front_end/ui/legacy/suggestBox.css

@@ -19,9 +19,9 @@
 }
 
 .suggest-box-content-item {
-  padding: 1px 0 1px 1px;
+  padding: var(--sys-size-1) 0 var(--sys-size-1) var(--sys-size-1);
   margin: 0;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
   white-space: nowrap;
   display: flex;
   align-items: center;
@@ -53,7 +53,7 @@
 
 .suggest-box-content-item devtools-icon {
   color: var(--sys-color-on-surface-subtle);
-  margin-right: 1px;
+  margin-right: var(--sys-size-1);
 }
 
 .suggest-box-content-item .query {
@@ -62,7 +62,7 @@
 
 .suggest-box-content-item .spacer {
   display: inline-block;
-  width: 20px;
+  width: var(--sys-size-9);
 }
 
 .suggest-box-content-item.selected {