refactor: rename base styles border color properties (#9937)

jouni · web-flow · commit 1c3f0bb75bde · 2025-08-07T16:51:56.000+03:00
diff --git a/packages/button/src/styles/vaadin-button-base-styles.js b/packages/button/src/styles/vaadin-button-base-styles.js
@@ -33,7 +33,7 @@ export const buttonStyles = css`
     background-origin: border-box;
     border: var(
       --vaadin-button-border,
-      var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--vaadin-border-color))
+      var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--vaadin-border-color-subtle))
     );
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
     touch-action: manipulation;
diff --git a/packages/card/src/styles/vaadin-card-base-styles.js b/packages/card/src/styles/vaadin-card-base-styles.js
@@ -31,7 +31,7 @@ export const cardStyles = css`
 
   /* Could be an inset outline on the host as well, but let's reserve that for a potential focus outline */
   :host::before {
-    border: var(--vaadin-card-border-width, 0) solid var(--vaadin-card-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-card-border-width, 0) solid var(--vaadin-card-border-color, var(--vaadin-border-color-subtle));
     border-radius: inherit;
     content: '';
     inset: 0;
diff --git a/packages/charts/src/styles/vaadin-chart-base-styles.js b/packages/charts/src/styles/vaadin-chart-base-styles.js
@@ -43,15 +43,15 @@ const tooltipStyles = (scope) => css`
 
   ${unsafeCSS(scope)} .highcharts-tooltip-box {
     stroke-width: 1px;
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color));
+    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
     fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
     fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip-box .highcharts-label-box {
     fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
     fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color));
+    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
   }
 
   ${unsafeCSS(scope)} .highcharts-tooltip-header {
@@ -120,13 +120,13 @@ export const chartStyles = css`
     --_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-color-subtle));
     --_disabled-label: var(--vaadin-charts-disabled-label, var(--vaadin-color-disabled));
     --_point-border: var(--vaadin-charts-point-border, var(--_bg));
-    --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color));
+    --_axis-line: var(--vaadin-charts-axis-line, var(--vaadin-border-color-subtle));
     --_axis-title: var(--vaadin-charts-axis-title, var(--_secondary-label));
     --_axis-label: var(--vaadin-charts-axis-label, var(--_secondary-label));
-    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color));
+    --_grid-line: var(--vaadin-charts-grid-line, var(--vaadin-border-color-subtle));
     --_minor-grid-line: var(
       --vaadin-charts-minor-grid-line,
-      color-mix(in srgb, var(--vaadin-border-color) 60%, transparent)
+      color-mix(in srgb, var(--vaadin-border-color-subtle) 60%, transparent)
     );
     --_data-label: var(--vaadin-charts-data-label, var(--_label));
   }
@@ -963,7 +963,7 @@ export const chartStyles = css`
   }
 
   :where([styled-mode]) .highcharts-candlestick-series .highcharts-point {
-    stroke: var(--vaadin-charts-candlestick-line, var(--vaadin-border-color-strong));
+    stroke: var(--vaadin-charts-candlestick-line, var(--vaadin-border-color));
     stroke-width: 1px;
   }
 
@@ -1046,7 +1046,7 @@ export const chartStyles = css`
 
   :where([styled-mode]) .highcharts-null-point {
     fill: transparent;
-    stroke: var(--vaadin-border-color);
+    stroke: var(--vaadin-border-color-subtle);
   }
 
   /* 3d charts */
diff --git a/packages/checkbox/src/styles/vaadin-checkbox-base-styles.js b/packages/checkbox/src/styles/vaadin-checkbox-base-styles.js
@@ -16,7 +16,7 @@ const checkbox = css`
 
   :host([readonly]) {
     --vaadin-checkbox-background: transparent;
-    --vaadin-checkbox-border-color: var(--vaadin-border-color-strong);
+    --vaadin-checkbox-border-color: var(--vaadin-border-color);
     --vaadin-checkbox-color: var(--vaadin-color);
   }
 
diff --git a/packages/component-base/src/styles/style-props.js b/packages/component-base/src/styles/style-props.js
diff --git a/packages/crud/src/styles/vaadin-crud-base-styles.js b/packages/crud/src/styles/vaadin-crud-base-styles.js
@@ -17,7 +17,8 @@ export const crudStyles = css`
     --vaadin-grid-border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
     --vaadin-crud-editor-max-height: 40%;
     --vaadin-crud-editor-max-width: 40%;
-    border: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
     border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
     height: 400px;
     width: 100%;
@@ -60,7 +61,7 @@ export const crudStyles = css`
 
   :host([editor-position='aside'][editor-opened]) #main {
     border-inline-end: var(--vaadin-crud-border-width, 1px) solid
-      var(--vaadin-crud-border-color, var(--vaadin-border-color));
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
   }
 
   :host([editor-position='aside'][editor-opened]) ::slotted(vaadin-crud-grid) {
@@ -75,7 +76,7 @@ export const crudStyles = css`
 
   :host([editor-position='bottom'][editor-opened]) #main {
     border-bottom: var(--vaadin-crud-border-width, 1px) solid
-      var(--vaadin-crud-border-color, var(--vaadin-border-color));
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
   }
 
   :host([editor-position='bottom'][editor-opened]) :is(#container, [part='editor']) {
@@ -86,7 +87,8 @@ export const crudStyles = css`
   [part='toolbar'] {
     align-items: baseline;
     background: var(--vaadin-crud-toolbar-background, transparent);
-    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    border-top: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
     display: flex;
     flex-shrink: 0;
     justify-content: flex-end;
@@ -149,7 +151,8 @@ export const crudStyles = css`
 
   [part='footer'] {
     background: var(--vaadin-crud-footer-background, transparent);
-    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    border-top: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
     display: flex;
     flex: none;
     gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
diff --git a/packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.js b/packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.js
@@ -41,7 +41,8 @@ const crudDialogOverlay = css`
   [part='footer'] {
     justify-content: normal;
     background: var(--vaadin-crud-footer-background, transparent);
-    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    border-top: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));
   }
 `;
 
diff --git a/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js b/packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js
@@ -17,12 +17,12 @@ export const dashboardWidgetAndSectionStyles = css`
     --_widget-background: var(--vaadin-dashboard-widget-background, var(--vaadin-background-color));
     --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--vaadin-radius-m));
     --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
-    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--vaadin-border-color));
+    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--vaadin-border-color-subtle));
     --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
     --_widget-editable-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
     --_widget-selected-shadow: 0 3px 12px -1px rgba(0, 0, 0, 0.3);
     --_drop-target-background: var(--vaadin-dashboard-drop-target-background, var(--vaadin-background-container));
-    --_drop-target-border-color: var(--vaadin-dashboard-drop-target-border-color, var(--vaadin-border-color));
+    --_drop-target-border-color: var(--vaadin-dashboard-drop-target-border-color, var(--vaadin-border-color-subtle));
     --_focus-ring-color: var(--vaadin-focus-ring-color);
     --_focus-ring-width: var(--vaadin-focus-ring-width);
   }
diff --git a/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js b/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js
@@ -57,23 +57,24 @@ export const overlayContentStyles = css`
   }
 
   :host([desktop]) ::slotted([slot='months']) {
-    border-bottom: 1px solid var(--vaadin-border-color);
+    border-bottom: 1px solid var(--vaadin-border-color-subtle);
   }
 
   ::slotted([slot='years']) {
     visibility: hidden;
     background: var(--vaadin-date-picker-year-scroller-background, var(--vaadin-background-container));
     width: var(--vaadin-date-picker-year-scroller-width, 3rem);
     box-sizing: border-box;
-    border-inline-start: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color));
+    border-inline-start: 1px solid
+      var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-subtle));
     overflow: visible;
     min-height: 0;
     clip-path: inset(0);
   }
 
   ::slotted([slot='years'])::before {
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));
-    border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color));
+    border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color-subtle));
     width: 16px;
     height: 16px;
     position: absolute;
@@ -102,6 +103,6 @@ export const overlayContentStyles = css`
 
   :host([fullscreen]) [part='toolbar'] {
     grid-area: header;
-    border-bottom: 1px solid var(--vaadin-border-color);
+    border-bottom: 1px solid var(--vaadin-border-color-subtle);
   }
 `;
diff --git a/packages/date-picker/src/styles/vaadin-month-calendar-base-styles.js b/packages/date-picker/src/styles/vaadin-month-calendar-base-styles.js
@@ -59,7 +59,10 @@ export const monthCalendarStyles = css`
     content: '';
     height: 1px;
     flex: 1;
-    background: var(--vaadin-date-picker-week-divider-color, var(--vaadin-divider-color, var(--vaadin-border-color)));
+    background: var(
+      --vaadin-date-picker-week-divider-color,
+      var(--vaadin-divider-color, var(--vaadin-border-color-subtle))
+    );
   }
 
   [part~='weekday'],
diff --git a/packages/dialog/src/styles/vaadin-dialog-overlay-base-styles.js b/packages/dialog/src/styles/vaadin-dialog-overlay-base-styles.js
@@ -31,7 +31,8 @@ export const dialogOverlayBase = css`
   [part='overlay'] {
     background: var(--vaadin-dialog-background, var(--vaadin-background-color));
     background-origin: border-box;
-    border: var(--vaadin-dialog-border-width, 1px) solid var(--vaadin-dialog-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-dialog-border-width, 1px) solid
+      var(--vaadin-dialog-border-color, var(--vaadin-border-color-subtle));
     box-shadow: var(--vaadin-dialog-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
     width: max-content;
diff --git a/packages/field-base/src/styles/checkable-base-styles.js b/packages/field-base/src/styles/checkable-base-styles.js
@@ -82,7 +82,7 @@ export const checkable = (part, propName = part) => css`
   /* Control container (checkbox, radio button) */
   [part='${unsafeCSS(part)}'] {
     background: var(--vaadin-${unsafeCSS(propName)}-background, var(--vaadin-background-color));
-    border-color: var(--vaadin-${unsafeCSS(propName)}-border-color, var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong)));
+    border-color: var(--vaadin-${unsafeCSS(propName)}-border-color, var(--vaadin-input-field-border-color, var(--vaadin-border-color)));
     border-radius: var(--vaadin-${unsafeCSS(propName)}-border-radius, var(--vaadin-radius-s));
     border-style: solid;
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
diff --git a/packages/field-highlighter/src/styles/vaadin-user-tag-base-styles.js b/packages/field-highlighter/src/styles/vaadin-user-tag-base-styles.js
@@ -18,7 +18,8 @@ export const userTagStyles = css`
     font-size: var(--vaadin-user-tag-font-size, 0.75em);
     font-weight: var(--vaadin-user-tag-font-weight, 500);
     line-height: var(--vaadin-user-tag-line-height, 1);
-    border: var(--vaadin-user-tag-border-width, 0) solid var(--vaadin-user-tag-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-user-tag-border-width, 0) solid
+      var(--vaadin-user-tag-border-color, var(--vaadin-border-color-subtle));
     border-radius: var(--vaadin-user-tag-border-radius, var(--vaadin-radius-m));
     cursor: default;
   }
diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -25,7 +25,7 @@ export const gridStyles = css`
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
     background: var(--vaadin-grid-background, var(--vaadin-background-color));
-    border: var(--_border-width) solid var(--vaadin-grid-border-color, var(--vaadin-border-color));
+    border: var(--_border-width) solid var(--vaadin-grid-border-color, var(--vaadin-border-color-subtle));
     cursor: default;
     --_border-width: 0;
     --_row-border-width: var(--vaadin-grid-cell-border-width, 1px);
@@ -217,23 +217,25 @@ export const gridStyles = css`
 
   [part~='cell']:not([part~='last-column-cell'], [part~='details-cell']) {
     border-inline-end: var(--_column-border-width, 0) solid
-      var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+      var(--vaadin-grid-cell-border-color, var(--vaadin-border-color-subtle));
   }
 
   [part~='cell']:where(:not([part~='details-cell'], [part~='first-row-cell'])) {
-    border-top: var(--_row-border-width) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+    border-top: var(--_row-border-width) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color-subtle));
   }
 
   [part~='first-header-row-cell'] {
     border-top: 0;
   }
 
   [part~='last-header-row-cell'] {
-    border-bottom: var(--_row-border-width, 1px) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+    border-bottom: var(--_row-border-width, 1px) solid
+      var(--vaadin-grid-cell-border-color, var(--vaadin-border-color-subtle));
   }
 
   [part~='first-footer-row-cell'] {
-    border-top: var(--_row-border-width, 1px) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+    border-top: var(--_row-border-width, 1px) solid
+      var(--vaadin-grid-cell-border-color, var(--vaadin-border-color-subtle));
   }
 
   /* Variant: row stripes */
diff --git a/packages/input-container/src/styles/vaadin-input-container-base-styles.js b/packages/input-container/src/styles/vaadin-input-container-base-styles.js
@@ -18,7 +18,7 @@ export const inputContainerStyles = css`
       var(--vaadin-input-field-bottom-end-radius, var(--_radius))
       var(--vaadin-input-field-bottom-start-radius, var(--_radius));
     border: var(--vaadin-input-field-border-width, 1px) solid
-      var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
+      var(--vaadin-input-field-border-color, var(--vaadin-border-color));
     box-sizing: border-box;
     cursor: text;
     padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
diff --git a/packages/list-box/src/styles/vaadin-list-box-base-styles.js b/packages/list-box/src/styles/vaadin-list-box-base-styles.js
@@ -23,7 +23,7 @@ export const listBoxStyles = css`
   }
 
   [part='items'] ::slotted(hr) {
-    border-color: var(--vaadin-divider-color, var(--vaadin-border-color));
+    border-color: var(--vaadin-divider-color, var(--vaadin-border-color-subtle));
     border-width: 0 0 1px;
     margin: 4px 8px;
     margin-inline-start: calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-s)) + 8px);
diff --git a/packages/login/src/styles/vaadin-login-overlay-wrapper-base-styles.js b/packages/login/src/styles/vaadin-login-overlay-wrapper-base-styles.js
@@ -14,7 +14,7 @@ const loginOverlayWrapper = css`
       var(--vaadin-overlay-background, var(--vaadin-background-color))
     );
     border: var(--vaadin-login-overlay-border-width, var(--vaadin-overlay-border-width, 1px)) solid
-      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
+      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-subtle)));
     border-radius: var(--vaadin-login-overlay-border-radius, var(--vaadin-radius-l));
     box-shadow: var(
       --vaadin-login-overlay-box-shadow,
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -37,7 +37,7 @@ export const mapStyles = css`
     content: '';
     position: absolute;
     inset: 0;
-    border: 1px solid var(--vaadin-map-border-color, var(--vaadin-border-color));
+    border: 1px solid var(--vaadin-map-border-color, var(--vaadin-border-color-subtle));
     border-radius: inherit;
     z-index: 1;
     pointer-events: none;
diff --git a/packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js b/packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js
@@ -149,12 +149,12 @@ export const masterDetailLayoutStyles = css`
 
   :host([orientation='horizontal']:not([drawer], [stack])) [part='detail'] {
     border-inline-start: var(--vaadin-master-detail-layout-border-width, 1px) solid
-      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color));
+      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-subtle));
   }
 
   :host([orientation='vertical']:not([drawer], [stack])) [part='detail'] {
     border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
-      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color));
+      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-subtle));
   }
 
   @media (forced-colors: active) {
diff --git a/packages/message-input/src/styles/vaadin-message-input-base-styles.js b/packages/message-input/src/styles/vaadin-message-input-base-styles.js
@@ -13,7 +13,7 @@ export const messageInputStyles = css`
     max-height: 50vh;
     flex-shrink: 0;
     border: var(--vaadin-input-field-border-width, 1px) solid
-      var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
+      var(--vaadin-input-field-border-color, var(--vaadin-border-color));
     border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
     background: var(--vaadin-input-field-background, var(--vaadin-background-color));
   }
diff --git a/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js b/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js
@@ -22,7 +22,8 @@ export const multiSelectComboBoxChipStyles = css`
     padding: 0 var(--vaadin-chip-padding, 0.3em);
     height: var(--vaadin-chip-height, calc(1lh / 0.875));
     border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
-    border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-chip-border-width, 1px) solid
+      var(--vaadin-chip-border-color, var(--vaadin-border-color-subtle));
     cursor: default;
   }
 
@@ -84,7 +85,7 @@ export const multiSelectComboBoxChipStyles = css`
     content: '';
     position: absolute;
     inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
-    border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color-subtle));
     border-radius: inherit;
   }
 
diff --git a/packages/notification/src/styles/vaadin-notification-card-base-styles.js b/packages/notification/src/styles/vaadin-notification-card-base-styles.js
@@ -19,7 +19,7 @@ export const notificationCardStyles = css`
     padding: var(--vaadin-notification-padding, var(--vaadin-padding-s));
     background: var(--vaadin-notification-background, var(--vaadin-background-container));
     border: var(--vaadin-notification-border-width, 1px) solid
-      var(--vaadin-notification-border-color, var(--vaadin-border-color));
+      var(--vaadin-notification-border-color, var(--vaadin-border-color-subtle));
     box-shadow: var(--vaadin-notification-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
     cursor: default;
diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js
@@ -55,7 +55,8 @@ export const overlayStyles = css`
 
   [part='overlay'] {
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));
-    border: var(--vaadin-overlay-border-width, 1px) solid var(--vaadin-overlay-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-overlay-border-width, 1px) solid
+      var(--vaadin-overlay-border-color, var(--vaadin-border-color-subtle));
     border-radius: var(--vaadin-overlay-border-radius, var(--vaadin-radius-m));
     box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
     box-sizing: border-box;
diff --git a/packages/popover/src/styles/vaadin-popover-overlay-base-styles.js b/packages/popover/src/styles/vaadin-popover-overlay-base-styles.js
@@ -36,7 +36,7 @@ const popoverOverlay = css`
     overflow: visible;
     max-height: 100%;
     border: var(--_border-width) solid
-      var(--vaadin-popover-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
+      var(--vaadin-popover-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-subtle)));
     background: var(--vaadin-popover-background, var(--vaadin-overlay-background, var(--vaadin-background-color)));
     box-shadow: var(--vaadin-popover-box-shadow, var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
   }
diff --git a/packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js b/packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js
diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js
diff --git a/packages/scroller/src/styles/vaadin-scroller-base-styles.js b/packages/scroller/src/styles/vaadin-scroller-base-styles.js
diff --git a/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js b/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js
diff --git a/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js b/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js
diff --git a/packages/upload/src/styles/vaadin-upload-base-styles.js b/packages/upload/src/styles/vaadin-upload-base-styles.js
diff --git a/packages/upload/src/styles/vaadin-upload-file-list-base-styles.js b/packages/upload/src/styles/vaadin-upload-file-list-base-styles.js
diff --git a/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js b/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js

Original file line number	Diff line number	Diff line change
@@ -16,7 +16,7 @@ const checkbox = css`
`16`	`16`
`17`	`17`	`:host([readonly]) {`
`18`	`18`	`--vaadin-checkbox-background: transparent;`
`19`		`- --vaadin-checkbox-border-color: var(--vaadin-border-color-strong);`
	`19`	`+ --vaadin-checkbox-border-color: var(--vaadin-border-color);`
`20`	`20`	`--vaadin-checkbox-color: var(--vaadin-color);`
`21`	`21`	`}`
`22`	`22`
Original file line number	Diff line number	Diff line change
@@ -41,7 +41,8 @@ const crudDialogOverlay = css`
`41`	`41`	`[part='footer'] {`
`42`	`42`	`justify-content: normal;`
`43`	`43`	`background: var(--vaadin-crud-footer-background, transparent);`
`44`		`- border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));`
	`44`	`+ border-top: var(--vaadin-crud-border-width, 1px) solid`
	`45`	`+ var(--vaadin-crud-border-color, var(--vaadin-border-color-subtle));`
`45`	`46`	`}`
`46`	`47`	`;
`47`	`48`