Skip to content

Commit

Permalink
Add new $gray-200 and use for skeleton borders (#25491)
Browse files Browse the repository at this point in the history 
* Rename $gray-200 to $gray-300.

* Add a new $gray-200 between the other two.
  • Loading branch information
@jasmussen
jasmussen authored Sep 22, 2020
1 parent d2dfcff commit d2f9ceb
Show file tree
Hide file tree
Showing 51 changed files with 101 additions and 100 deletions.
5 changes: 3 additions & 2 deletions packages/base-styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ $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; // Used for most borders.
$gray-100: #f0f0f0;
$gray-300: #ddd; // Used for most borders.
$gray-200: #e0e0e0; // Used sparingly for light borders.
$gray-100: #f0f0f0; // Used for light gray backgrounds.
$white: #fff;

// Opacities & additional colors.
Expand Down
2 changes: 1 addition & 1 deletion packages/block-directory/src/components/downloadable-block-icon/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
width: $button-size;
height: $button-size;
font-size: $button-size;
background-color: $gray-200;
background-color: $gray-300;
}

> img {
Expand Down
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 $gray-200;
border-bottom: $border-width solid $gray-200;
border-top: $border-width solid $gray-300;
border-bottom: $border-width solid $gray-300;
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-card/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}

.block-editor-block-card__icon {
border: $border-width solid $gray-200;
border: $border-width solid $gray-300;
padding: 7px;
margin-right: 10px;
height: 36px;
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 $gray-100;
border-top: $border-width solid $gray-200;
}

.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 $gray-200;
border-right: $border-width solid $gray-300;

.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 @@ -101,7 +101,7 @@
}

.components-panel__body + .components-panel__body {
border-top: $border-width solid $gray-100;
border-top: $border-width solid $gray-200;
}
}

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 $gray-200;
border-right: $border-width solid $gray-300;
}

> :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 $gray-200;
border-bottom: $border-width solid $gray-300;

.components-tab-panel__tabs-item {
flex-grow: 1;
Expand Down Expand Up @@ -234,7 +234,7 @@ $block-inserter-tabs-height: 44px;
width: 300px;
background: $white;
border-radius: $radius-block-ui;
border: $border-width solid $gray-200;
border: $border-width solid $gray-300;
position: absolute;
top: $grid-unit-20;
left: calc(100% + #{$grid-unit-20});
Expand Down Expand Up @@ -273,7 +273,7 @@ $block-inserter-tabs-height: 44px;
}

.block-editor-inserter__tips {
border-top: $border-width solid $gray-200;
border-top: $border-width solid $gray-300;
padding: $grid-unit-20;
flex-shrink: 0;
}
Expand Down Expand Up @@ -316,7 +316,7 @@ $block-inserter-tabs-height: 44px;
}

.block-editor-inserter__quick-inserter-separator {
border-top: $border-width solid $gray-200;
border-top: $border-width solid $gray-300;
}

.block-editor-inserter__popover.is-quick > .components-popover__content > div {
Expand Down
8 changes: 4 additions & 4 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 $gray-200;
border: 1px solid $gray-300;
border-radius: $radius-block-ui;
}

Expand Down Expand Up @@ -122,7 +122,7 @@ $block-editor-link-control-number-of-actions: 1;

&:hover,
&:focus {
background-color: $gray-200;
background-color: $gray-300;
}

// The added specificity is needed to override.
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 $gray-200;
border-top: 1px solid $gray-300;
}
}

Expand All @@ -238,7 +238,7 @@ $block-editor-link-control-number-of-actions: 1;
}

.block-editor-link-control__settings {
border-top: 1px solid $gray-200;
border-top: 1px solid $gray-300;
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 $gray-200;
border-top: 1px solid $gray-300;
color: $gray-700;
}
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: $gray-200;
background: $gray-300;
}

&:focus,
Expand Down Expand Up @@ -116,13 +116,13 @@ $input-size: 300px;
width: 1px;
height: 24px;
right: -1px;
background: $gray-200;
background: $gray-300;
}
}

.block-editor-url-input__button-modal {
box-shadow: $shadow-popover;
border: 1px solid $gray-200;
border: 1px solid $gray-300;
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 $gray-200;
border-top: $border-width solid $gray-300;
}

.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 $gray-200;
border-left: $border-width solid $gray-300;
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 $gray-200;
border-top: $border-width solid $gray-300;
}

.block-editor-url-popover__link-editor,
Expand Down
4 changes: 2 additions & 2 deletions 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: 0.25em;
border: 1px solid $gray-200;
border: 1px solid $gray-300;
}

tfoot td {
Expand All @@ -18,7 +18,7 @@

table th {
font-weight: 400;
background: $gray-200;
background: $gray-300;
}

a {
Expand Down
12 changes: 6 additions & 6 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 $gray-200;
box-shadow: inset 0 0 0 0 $gray-300;
border-left: 4px solid $black;
padding-left: 1em;
}
Expand Down Expand Up @@ -59,7 +59,7 @@
}

&:focus code[data-mce-selected] {
background: $gray-200;
background: $gray-300;
}

.alignright {
Expand Down Expand Up @@ -152,12 +152,12 @@
}

.loading-placeholder {
border: 1px dashed $gray-200;
border: 1px dashed $gray-300;
padding: 10px;
}

.wpview-error {
border: 1px solid $gray-200;
border: 1px solid $gray-300;
padding: 1em 0;
margin: 0;
word-wrap: break-word;
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 $gray-200;
border: $border-width solid $gray-300;

// 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 $gray-200;
border: $border-width solid $gray-300;
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: 0.9em;
color: $gray-900;
padding: 0.8em 1em;
border: 1px solid $gray-200;
border: 1px solid $gray-300;
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 $gray-200;
border: 1px solid $gray-300;
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 @@ -34,7 +34,7 @@
// Separator
.wp-block-navigation-link__separator {
margin: $grid-unit-10 0 $grid-unit-10;
border-top: $border-width solid $gray-200;
border-top: $border-width solid $gray-300;
}

// Popover styles
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/template-part/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

.wp-block-template-part__selection-preview-search-form {
border-bottom: $border-width solid $gray-200;
border-bottom: $border-width solid $gray-300;
}

.wp-block-template-part__selection-preview-container {
Expand Down Expand Up @@ -118,7 +118,7 @@

&.has-child-selected {
&::after {
box-shadow: 0 0 0 $border-width $gray-200;
box-shadow: 0 0 0 $border-width $gray-300;

.is-dark-theme & {
box-shadow: 0 0 0 $border-width-focus $gray-700;
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 $gray-200;
outline: $border-width solid $gray-300;
}
}
4 changes: 2 additions & 2 deletions packages/components/src/button/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
&.is-secondary,
&.is-tertiary {
&:active:not(:disabled) {
background: $gray-200;
background: $gray-300;
color: var(--wp-admin-theme-color-darker-10);
box-shadow: none;
}
Expand All @@ -121,7 +121,7 @@
&[aria-disabled="true"],
&[aria-disabled="true"]:hover {
color: lighten($gray-700, 5%);
background: lighten($gray-200, 5%);
background: lighten($gray-300, 5%);
transform: none;
opacity: 1;
box-shadow: none;
Expand Down
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 @@ -58,7 +58,7 @@
padding: 10px 5px 10px 25px;

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

&-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: $gray-200;
background: $gray-300;
}

&-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 $gray-200;
border-top: 1px solid $gray-300;

// 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 @@ -25,7 +25,7 @@
display: block;
content: "";
box-sizing: content-box;
background-color: $gray-200;
background-color: $gray-300;
position: absolute;
top: -3px;
left: 0;
Expand Down
Loading

0 comments on commit d2f9ceb

Please sign in to comment.