diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index 51887e346b79ae..b0416284e49723 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -8,7 +8,7 @@ $gray-900: #1e1e1e; $gray-700: #757575; // Meets 4.6:1 text contrast against white. $gray-600: #949494; // Meets 3:1 UI or large text contrast against white. $gray-400: #ccc; -$gray-200: #ddd; +$gray-200: #ddd; // Used for most borders. $gray-100: #f0f0f0; $white: #fff; @@ -42,4 +42,3 @@ $light-gray-900: #a2aab2; $light-gray-800: #b5bcc2; $light-gray-700: #ccd0d4; $light-gray-600: #d7dade; -$light-gray-500: #e2e4e7; diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss index 3bd6319344f760..96e40a62bd1190 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss +++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss @@ -10,8 +10,8 @@ justify-content: center; background: transparent; word-break: break-word; - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; + border-bottom: $border-width solid $gray-200; transition: all 0.05s ease-in-out; @include reduce-motion("transition"); position: relative; diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index 64ff2aa53ab6fb..808a81f3d5075f 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -8,7 +8,7 @@ } .components-panel__body { border: none; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-100; } .block-editor-block-card { diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.scss index c78b0e5d1d72ef..d0f521f822d3d2 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/style.scss +++ b/packages/block-editor/src/components/block-mobile-toolbar/style.scss @@ -1,7 +1,7 @@ .block-editor-block-mobile-toolbar { display: flex; flex-direction: row; - border-right: $border-width solid $light-gray-500; + border-right: $border-width solid $gray-200; .block-editor-block-mover-button { width: $button-size; diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 0267e5fc56879a..ca48ac5fe687d0 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -98,7 +98,7 @@ } .components-panel__body + .components-panel__body { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-100; } } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index dd9e83f5c658a5..63763752f08cd8 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -34,7 +34,7 @@ border: 0; // Add a border after item groups to show as separator in the block toolbar. - border-right: $border-width solid $light-gray-500; + border-right: $border-width solid $gray-200; } > :last-child, diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 92863646a7d7d3..5eafcc9108e9f1 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -135,7 +135,7 @@ $block-inserter-tabs-height: 44px; top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60; background: $white; z-index: 1; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; .components-tab-panel__tabs-item { flex-grow: 1; @@ -220,7 +220,7 @@ $block-inserter-tabs-height: 44px; width: 300px; background: $white; border-radius: $radius-block-ui; - border: $border-width solid $light-gray-500; + border: $border-width solid $gray-200; position: absolute; top: $grid-unit-20; left: calc(100% + #{$grid-unit-20}); @@ -257,7 +257,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__tips { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; padding: $grid-unit-20; flex-shrink: 0; } @@ -283,7 +283,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__quick-inserter-separator { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } .block-editor-inserter__popover.is-quick > .components-popover__content > div { diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 679accdcc91184..338c93ee5d6c9a 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -28,7 +28,7 @@ $block-editor-link-control-number-of-actions: 1; padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons margin: $grid-unit-20; position: relative; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; border-radius: $radius-block-ui; } @@ -228,7 +228,7 @@ $block-editor-link-control-number-of-actions: 1; left: 0; display: block; width: 100%; - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; } } @@ -238,7 +238,7 @@ $block-editor-link-control-number-of-actions: 1; } .block-editor-link-control__settings { - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; margin: 0; padding: $grid-unit-20 $grid-unit-30; diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss index c8d17df0db0f78..3062776e6383b6 100644 --- a/packages/block-editor/src/components/tool-selector/style.scss +++ b/packages/block-editor/src/components/tool-selector/style.scss @@ -4,6 +4,6 @@ margin-right: -$grid-unit-15; margin-bottom: -$grid-unit-15; padding: $grid-unit-15 ($grid-unit-15 + $grid-unit-10); - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; color: $dark-gray-300; } diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index e645b7b3fac0c8..b7ac9c8123d0a0 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -88,7 +88,7 @@ $input-size: 300px; box-shadow: none; &:hover { - background: $light-gray-500; + background: $gray-200; } &:focus, @@ -116,13 +116,13 @@ $input-size: 300px; width: 1px; height: 24px; right: -1px; - background: $light-gray-500; + background: $gray-200; } } .block-editor-url-input__button-modal { box-shadow: $shadow-popover; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; background: $white; } diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index 7a7987dca0f6f5..0d0096234fe31e 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -1,5 +1,5 @@ .block-editor-url-popover__additional-controls { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } .block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg { @@ -45,7 +45,7 @@ // Add a left divider to the toggle button. border-radius: 0; - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; margin-left: 1px; &[aria-expanded="true"] .dashicon { @@ -62,7 +62,7 @@ .block-editor-url-popover__settings { display: block; padding: $grid-unit-20; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } .block-editor-url-popover__link-editor, diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index b0a821744bfaf7..85f2c675cdfc26 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -4,7 +4,7 @@ th, tbody td { padding: 4px; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; } tfoot td { diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss index 0c5ef1f3c109f9..8f50a4004b0ff2 100644 --- a/packages/block-library/src/classic/editor.scss +++ b/packages/block-library/src/classic/editor.scss @@ -13,7 +13,7 @@ blockquote { margin: 0; - box-shadow: inset 0 0 0 0 $light-gray-500; + box-shadow: inset 0 0 0 0 $gray-200; border-left: 4px solid $black; padding-left: 1em; } @@ -244,7 +244,7 @@ div[data-type="core/freeform"] { &::before { transition: border-color 0.1s linear, box-shadow 0.1s linear; @include reduce-motion("transition"); - border: $border-width solid $light-gray-500; + border: $border-width solid $gray-200; // Windows High Contrast mode will show this outline. outline: $border-width solid transparent; @@ -299,7 +299,7 @@ div[data-type="core/freeform"] { position: sticky; z-index: z-index(".block-library-classic__toolbar"); top: 0; - border: $border-width solid $light-gray-500; + border: $border-width solid $gray-200; border-bottom: none; border-radius: $radius-block-ui; margin-bottom: $grid-unit-10; diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss index bd0cdf9d93f9c0..6ba170d3ab2ac4 100644 --- a/packages/block-library/src/code/theme.scss +++ b/packages/block-library/src/code/theme.scss @@ -3,6 +3,6 @@ font-size: $text-editor-font-size; color: $gray-900; padding: 0.8em 1em; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; border-radius: 4px; } diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss index e2a6a9119965aa..600b6da63d1aec 100644 --- a/packages/block-library/src/html/editor.scss +++ b/packages/block-library/src/html/editor.scss @@ -13,7 +13,7 @@ font-family: $editor-html-font; color: $gray-900; padding: 0.8em 1em; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; border-radius: 4px; max-height: 250px; diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index d6a6c99668c811..f3efd2b9c4001b 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -38,7 +38,7 @@ // Separator .wp-block-navigation-link__separator { margin: $grid-unit-10 0 $grid-unit-10; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } // Popover styles diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index a42a8ea9906b6d..4c501686f7eea8 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -7,7 +7,7 @@ } .wp-block-template-part__placeholder-preview-search-form { - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; } .wp-block-template-part__placeholder-preview-container { diff --git a/packages/block-library/src/text-columns/editor.scss b/packages/block-library/src/text-columns/editor.scss index 94eee7497b8f82..9c06352ba1da21 100644 --- a/packages/block-library/src/text-columns/editor.scss +++ b/packages/block-library/src/text-columns/editor.scss @@ -1,5 +1,5 @@ .wp-block-text-columns { .block-editor-rich-text__editable:focus { - outline: $border-width solid $light-gray-500; + outline: $border-width solid $gray-200; } } diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss index 0c4fe58ada0bb8..4ed994bc2af73f 100644 --- a/packages/components/src/combobox-control/style.scss +++ b/packages/components/src/combobox-control/style.scss @@ -60,7 +60,7 @@ padding: 10px 5px 10px 25px; &.is-highlighted { - background: $light-gray-500; + background: $gray-200; } &-icon { diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index a987841625f9f8..7bc1e60cc685ba 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -64,7 +64,7 @@ &.is-highlighted { - background: $light-gray-500; + background: $gray-200; } &-icon { diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 28d6513b1e4ad1..27a1fef8540fc8 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -48,7 +48,7 @@ .components-datetime__date { min-height: 236px; - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; // Override external DatePicker styles. .DayPickerNavigation_leftButton__horizontalDefault { diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index a2769cdf4ab62b..70ef60d17e4af5 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -26,7 +26,7 @@ display: block; content: ""; box-sizing: content-box; - background-color: $light-gray-500; + background-color: $gray-200; position: absolute; top: -3px; left: 0; diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss index c09cc1cac521be..e0693185040f91 100644 --- a/packages/components/src/focal-point-picker/style.scss +++ b/packages/components/src/focal-point-picker/style.scss @@ -1,6 +1,6 @@ .components-focal-point-picker-wrapper { background-color: transparent; - border: 1px solid $light-gray-500; + border: 1px solid $gray-200; height: 200px; width: 100%; padding: 14px; diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 5904e4299b07db..e19cd3853d6843 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -10,7 +10,7 @@ &.is-disabled { - background: $light-gray-500; + background: $gray-200; border-color: $light-gray-700; } @@ -126,7 +126,7 @@ display: inline-block; line-height: 24px; height: auto; - background: $light-gray-500; + background: $gray-200; transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); @include reduce-motion; } diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index d99814775f22e9..bbd01f45a8d4d4 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -23,7 +23,7 @@ left: 0; box-sizing: border-box; margin: 0; - border: $border-width solid $light-gray-500; + border: $border-width solid $gray-200; background: $white; box-shadow: $shadow-modal; overflow: auto; @@ -60,7 +60,7 @@ // modal screen). .components-modal__header { box-sizing: border-box; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; padding: 0 $grid-unit-30; display: flex; flex-direction: row; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 039713122a8519..f64cfb697f7182 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -1,6 +1,6 @@ .components-panel { background: $white; - border: $border-width solid $light-gray-500; + border: $border-width solid $gray-100; > .components-panel__header:first-child, > .components-panel__body:first-child { @@ -18,8 +18,8 @@ } .components-panel__body { - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-100; + border-bottom: $border-width solid $gray-100; h3 { margin: 0 0 0.5em; @@ -36,8 +36,8 @@ align-items: center; padding: 0 $grid-unit-20; height: $grid-unit-60; - border-top: $border-width solid $light-gray-500; - border-bottom: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; + border-bottom: $border-width solid $gray-200; h2 { margin: 0; diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index 0a45244c8cd1e6..2bab095e5a47d3 100644 --- a/packages/components/src/toolbar-group/style.scss +++ b/packages/components/src/toolbar-group/style.scss @@ -49,7 +49,7 @@ div.components-toolbar { display: inline-block; content: ""; box-sizing: content-box; - background-color: $light-gray-500; + background-color: $gray-200; position: absolute; top: 8px; left: -3px; diff --git a/packages/components/src/visually-hidden/style.scss b/packages/components/src/visually-hidden/style.scss index 02fec4486afa23..372e14bd7ebe19 100644 --- a/packages/components/src/visually-hidden/style.scss +++ b/packages/components/src/visually-hidden/style.scss @@ -13,7 +13,7 @@ } .components-visually-hidden:focus { - background-color: $light-gray-500; + background-color: $gray-200; clip: auto !important; clip-path: none; color: #444; diff --git a/packages/edit-navigation/src/components/navigation-editor/style.scss b/packages/edit-navigation/src/components/navigation-editor/style.scss index 4735a9603437b5..2375e12138099f 100644 --- a/packages/edit-navigation/src/components/navigation-editor/style.scss +++ b/packages/edit-navigation/src/components/navigation-editor/style.scss @@ -34,7 +34,7 @@ border: 0; // Add a border after item groups to show as separator in the block toolbar. - border-right: $border-width solid $light-gray-500; + border-right: $border-width solid $gray-200; } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 4284d0b3e043f4..88d319a63a316d 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -56,7 +56,7 @@ left: 0; right: 0; background: $white; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; &:empty { display: none; @@ -93,7 +93,7 @@ } .block-editor-block-toolbar { - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; } .block-editor-block-toolbar .components-toolbar-group, diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss index db1249bad37c53..f2cff486b82690 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss @@ -17,11 +17,11 @@ display: flex; align-items: baseline; padding: 0.6rem 0; - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; margin-bottom: 0; &:last-child { - border-bottom: 1px solid $light-gray-500; + border-bottom: 1px solid $gray-200; } &:empty { diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 9840d628855966..f9450581e4418b 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -2,7 +2,7 @@ flex-shrink: 0; } .edit-post-layout__metaboxes:not(:empty) { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; padding: 10px 0 10px; clear: both; @@ -35,7 +35,7 @@ top: $admin-bar-height; left: auto; width: $sidebar-width + $border-width; - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; transform: translateX(+100%); animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards; @include reduce-motion("animation"); @@ -77,7 +77,7 @@ right: 0; width: $sidebar-width; background-color: $white; - border: 1px dotted $light-gray-500; + border: 1px dotted $gray-200; height: auto !important; // Need to override the default sidebar positionnings padding: $grid-unit-30; display: flex; diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss index b6fe126da29703..e23efa0acf0a2f 100644 --- a/packages/edit-post/src/components/manage-blocks-modal/style.scss +++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss @@ -46,7 +46,7 @@ } .edit-post-manage-blocks-modal__disabled-blocks-count { - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; margin-left: -$grid-unit-30; margin-right: -$grid-unit-30; padding-top: 0.6rem; @@ -88,10 +88,10 @@ .edit-post-manage-blocks-modal__checklist-item { margin-bottom: 0; padding-left: $grid-unit-20; - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; &:last-child { - border-bottom: 1px solid $light-gray-500; + border-bottom: 1px solid $gray-200; } .components-base-control__field { @@ -125,5 +125,5 @@ margin-right: -$grid-unit-30; padding-left: $grid-unit-30; padding-right: $grid-unit-30; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss index 3f050647f9af61..e83c1c53026b12 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss +++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss @@ -30,7 +30,7 @@ #poststuff h3.hndle, #poststuff .stuffbox > h3, #poststuff h2.hndle { /* WordPress selectors yolo */ - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; box-sizing: border-box; color: inherit; font-weight: 600; @@ -47,7 +47,7 @@ } .postbox > .inside { - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; color: inherit; padding: 0 $block-padding $block-padding; margin: 0; diff --git a/packages/edit-post/src/components/options-modal/style.scss b/packages/edit-post/src/components/options-modal/style.scss index 8592234beb2446..de3c1546acd75c 100644 --- a/packages/edit-post/src/components/options-modal/style.scss +++ b/packages/edit-post/src/components/options-modal/style.scss @@ -9,10 +9,10 @@ } &__option { - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; &:last-child { - border-bottom: 1px solid $light-gray-500; + border-bottom: 1px solid $gray-200; } .components-base-control__field { diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 64d20d01606d48..1821fcb1021d23 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -7,7 +7,7 @@ right: 0; width: $sidebar-width; background-color: $white; - border: 1px dotted $light-gray-500; + border: 1px dotted $gray-200; height: auto !important; // Need to override the default sidebar positioning padding: $grid-unit-30; display: flex; diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 63953755afd2ba..1a41dcd3aaa50b 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -57,7 +57,7 @@ left: 0; right: 0; background: $white; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; &:empty { display: none; @@ -94,7 +94,7 @@ } .block-editor-block-toolbar { - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; } .block-editor-block-toolbar .components-toolbar-group, diff --git a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss index 42555bfdd42c05..8bb5919d13cdb1 100644 --- a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss +++ b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/style.scss @@ -2,7 +2,7 @@ position: relative; .edit-widgets-header { margin-top: -16px; - border-top: 1px solid $light-gray-500; + border-top: 1px solid $gray-200; } .edit-widgets-header, diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index 415046250de156..7009503efb8f65 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -17,6 +17,6 @@ } .edit-widgets-header__block-toolbar { - border-bottom: 1px solid $light-gray-500; - border-top: 1px solid $light-gray-500; + border-bottom: 1px solid $gray-200; + border-top: 1px solid $gray-200; } diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss index bbd48a7f433148..fcf97194ce607a 100644 --- a/packages/edit-widgets/src/components/sidebar/style.scss +++ b/packages/edit-widgets/src/components/sidebar/style.scss @@ -90,9 +90,9 @@ li { margin: 0; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; &:first-child { - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-200; } button { diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 2d69a48dc61c24..13146b071f676e 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -16,7 +16,7 @@ } .document-outline__emdash::before { - color: $light-gray-500; + color: $gray-200; margin-right: 4px; } @@ -66,7 +66,7 @@ } .document-outline__level { - background: $light-gray-500; + background: $gray-200; color: $gray-900; border-radius: 3px; font-size: $default-font-size; diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index 7a48cb8efc4675..003ebc5c3732f2 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -22,7 +22,7 @@ top: $admin-bar-height; left: auto; width: $sidebar-width; - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; body.is-fullscreen-mode & { top: 0; @@ -41,7 +41,7 @@ padding-left: $grid-unit-10; padding-right: $grid-unit-10; height: $header-height + $border-width; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; display: flex; align-items: center; align-content: space-between; @@ -57,7 +57,7 @@ } .entities-saved-states__text-prompt { - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; padding: $grid-unit-20; padding-bottom: $grid-unit-05; } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 3b684c59154107..e0800dcfff527f 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -17,7 +17,7 @@ padding-left: $grid-unit-20; padding-right: $grid-unit-20; height: $header-height + $border-width; - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-200; display: flex; align-items: center; align-content: space-between; @@ -95,7 +95,7 @@ } .post-publish-panel__postpublish .components-panel__body { - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-100; border-top: none; } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 1c9d151f268ba9..33be1f4c204f8d 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -61,7 +61,7 @@ hr { border-top: none; - border-bottom: 1px solid $light-gray-500; + border-bottom: 1px solid $gray-100; margin: 1.5em 0; } diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 6dae0e0dd1037b..aaef09de6094e9 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -97,20 +97,20 @@ html.interface-interface-skeleton__html-container { .interface-interface-skeleton__sidebar { @include break-medium() { overflow: auto; - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-100; } } .interface-interface-skeleton__left-sidebar { @include break-medium() { - border-right: $border-width solid $light-gray-500; + border-right: $border-width solid $gray-100; } } .interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. - border-bottom: $border-width solid $light-gray-500; + border-bottom: $border-width solid $gray-100; z-index: z-index(".interface-interface-skeleton__header"); color: $gray-900; @@ -128,7 +128,7 @@ html.interface-interface-skeleton__html-container { .interface-interface-skeleton__footer { height: auto; // Keep the height flexible. flex-shrink: 0; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $gray-100; color: $gray-900; // On Mobile the footer is hidden diff --git a/storybook/stories/playground/style.scss b/storybook/stories/playground/style.scss index a9dc2af8c21b8c..54423bf6b122db 100644 --- a/storybook/stories/playground/style.scss +++ b/storybook/stories/playground/style.scss @@ -34,7 +34,7 @@ right: 0; bottom: 0; width: $sidebar-width; - border-left: $border-width solid $light-gray-500; + border-left: $border-width solid $gray-200; height: auto; overflow: auto; -webkit-overflow-scrolling: touch;