Skip to content

Commit

Permalink
Retire light gray 500, update borders.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasmussen
jasmussen committed Jul 3, 2020
1 parent b1f5680 commit da1b926
Show file tree
Hide file tree
Showing 46 changed files with 83 additions and 84 deletions.
3 changes: 1 addition & 2 deletions packages/base-styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -42,4 +42,3 @@ $light-gray-900: #a2aab2;
$light-gray-800: #b5bcc2;
$light-gray-700: #ccd0d4;
$light-gray-600: #d7dade;
$light-gray-500: #e2e4e7;
4 changes: 2 additions & 2 deletions packages/block-directory/src/components/downloadable-block-list-item/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-inspector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-mobile-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-switcher/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/inserter/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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});
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/link-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
}

Expand All @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/tool-selector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/url-input/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ $input-size: 300px;
box-shadow: none;

&:hover {
background: $light-gray-500;
background: $gray-200;
}

&:focus,
Expand Down Expand Up @@ -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;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/url-popover/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/calendar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
th,
tbody td {
padding: 4px;
border: 1px solid $light-gray-500;
border: 1px solid $gray-200;
}

tfoot td {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/classic/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/code/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/html/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation-link/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/template-part/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/text-columns/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion packages/components/src/combobox-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
padding: 10px 5px 10px 25px;

&.is-highlighted {
background: $light-gray-500;
background: $gray-200;
}

&-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-select-control/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@


&.is-highlighted {
background: $light-gray-500;
background: $gray-200;
}

&-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/date-time/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dropdown-menu/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/focal-point-picker/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/form-token-field/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@


&.is-disabled {
background: $light-gray-500;
background: $gray-200;
border-color: $light-gray-700;
}

Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/modal/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/panel/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toolbar-group/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/visually-hidden/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-navigation/src/components/navigation-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}


Expand Down
Loading

0 comments on commit da1b926

Please sign in to comment.