Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

border: 1px → $border-width #64680

Merged
merged 5 commits into from
Aug 21, 2024
Merged

border: 1px → $border-width #64680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cae0835
1px -> $border-width
jameskoster Aug 21, 2024
d909800
More variable instances
jameskoster Aug 21, 2024
2987ed7
Comment formatting
jameskoster Aug 21, 2024
e06dace
Rebase
jameskoster Aug 21, 2024
0d1f9a1
Update changelog
jameskoster Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-directory/src/components/downloadable-block-icon/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
width: $button-size * 1.5;
height: $button-size * 1.5;
vertical-align: middle;
border: 1px solid $gray-300;
border: $border-width solid $gray-300;
}
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
}

.block-editor-block-parent-selector__button {
border: 1px solid $gray-900;
border: $border-width solid $gray-900;
padding-right: 6px;
padding-left: 6px;
background-color: $white;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-variation-transforms/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
width: 100%;

.components-dropdown-menu__toggle {
border: 1px solid $gray-700;
border: $border-width solid $gray-700;
border-radius: $radius-block-ui;
min-height: 30px;
width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@


.block-editor-global-styles-background-panel__inspector-media-replace-container {
border: 1px solid $gray-300;
border: $border-width solid $gray-300;
border-radius: 2px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rabbit hole is endless. Should these 2px be $radius-block-ui;? Or even the new scale, small?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next steps for radius is a bit tricky, we need to:

  1. Eliminate any hard-coded values like this
  2. Apply the radius scale in the editor
  3. Tidy up any unnecessary border-radius overrides (there are quite a few in the editor)

So potential next steps would be:

  • Replace any hard-coded values like this one with $radius-block-ui
  • Use $radius-block-ui as a to-do list; manually go through and replace instances of it with the appropriate values from the new scale.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zero rush. Doesn't have to be here, or now, or you. Just wanted to mention it as I saw it.

// Full width. ToolsPanel lays out children in a grid.
grid-column: 1 / -1;
Expand Down Expand Up @@ -101,7 +101,7 @@
}

.block-editor-global-styles-background-panel__image-tools-panel-item {
border: 1px solid $gray-300;
border: $border-width solid $gray-300;
border-radius: 2px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same radius question here.


// Full width. ToolsPanel lays out children in a grid.
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ $block-editor-link-control-number-of-actions: 1;
&.block-editor-url-input input[type="text"].block-editor-url-input__input {
@include input-control;
display: block;
border: 1px solid $gray-600;
border: $border-width solid $gray-600;
border-radius: $radius-block-ui;
height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/url-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ $input-size: 300px;

.block-editor-url-input__button-modal {
box-shadow: $elevation-x-small;
border: 1px solid $gray-300;
border: $border-width solid $gray-300;
background: $white;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/commands/src/components/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
.components-button {
height: $grid-unit-70;
width: $grid-unit-70;
border: 1px solid $gray-600;
border: $border-width solid $gray-600;
border-right: 0;
justify-content: center;
border-radius: $radius-block-ui 0 0 $radius-block-ui;
Expand Down
2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
- `Popover`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
- `Snackbar`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
- `TextareaControl`: Update styles ([#64586](https://github.com/WordPress/gutenberg/pull/64586)).
- `CircularOptionPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).
- `CustomGradientPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).

### Bug Fixes

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ $color-palette-circle-spacing: 12px;
border-radius: $radius-round;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
border: 1px solid transparent;
border: $border-width solid transparent;
box-sizing: inherit;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-gradient-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
&.is-pressed {
> svg {
background: $white;
border: 1px solid $gray-600;
border: $border-width solid $gray-600;
border-radius: 2px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another radius.

}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/dataviews/src/components/dataviews-filters/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

.dataviews-filters__summary-chip {
border-radius: $grid-unit-20;
border: 1px solid transparent;
border: $border-width solid transparent;
cursor: pointer;
padding: $grid-unit-05 $grid-unit-15;
min-height: $grid-unit-40;
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/add-new-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
}

.edit-site-custom-template-modal__no-results {
border: 1px solid $gray-400;
border: $border-width solid $gray-400;
border-radius: $radius-block-ui;
padding: $grid-unit-20;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
border: $border-width dotted $gray-300;
padding: $grid-unit-30;
display: flex;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/font-library-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ $footer-height: 70px;
}

.font-library-modal__font-card {
border: 1px solid $gray-200;
border: $border-width solid $gray-200;
width: 100%;
height: auto;
padding: $grid-unit-20;
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/components/block-manager/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
}

.editor-block-manager__disabled-blocks-count {
border: 1px solid $gray-300;
border-width: 1px 0;
border: $border-width solid $gray-300;
border-width: $border-width 0;
// Cover up horizontal areas off the sides of the box rectangle
box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
padding: $grid-unit-10;
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/error-boundary/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
}

.copy-button__container--secondary {
border: 1px #c6c6c8;
border: $border-width #c6c6c8;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Speaking of rabbit holes, what's this color? 😱

background-color: $white;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/editor/src/components/save-publish-panels/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
.editor-layout__toggle-sidebar-panel,
.editor-layout__toggle-entities-saved-states-panel {
z-index: z-index(".editor-layout__toggle-sidebar-panel");
position: fixed !important; // Need to override the default relative positionning
position: fixed !important; // Necessary to override the default relative positioning.
top: -9999em;
bottom: auto;
left: auto;
right: 0;
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
height: auto !important; // Need to override the default sidebar positionnings
border: $border-width dotted $gray-300;
height: auto !important; // Necessary to override the default sidebar positioning.
padding: $grid-unit-30;
display: flex;
justify-content: center;
Expand Down
10 changes: 5 additions & 5 deletions packages/widgets/src/blocks/legacy-widget/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
}
background: $white;
border-radius: $radius-block-ui;
border: 1px solid $gray-900;
padding: $grid-unit-15 - 1px; // Subtract the border width.
max-height: calc(100vh - 2px); // Subtract the border width (both top and bottom).
border: $border-width solid $gray-900;
padding: $grid-unit-15 - $border-width;
max-height: calc(100vh - #{ $border-width } - #{ $border-width });
overflow-y: scroll;

.wp-block-legacy-widget__edit-form-title {
Expand Down Expand Up @@ -57,7 +57,7 @@
font-family: system-ui;
background-color: transparent;
box-sizing: border-box;
border: 1px solid $gray-700;
border: $border-width solid $gray-700;
border-radius: 3px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also unrelated, but I cannot help myself. Should this be $radius-small + $border-width?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe, I'm not too familiar with the legacy widget editor.

box-shadow: none;
color: $black;
Expand Down Expand Up @@ -96,7 +96,7 @@

&:hover::after {
border-radius: $radius-block-ui;
border: 1px solid $gray-600;
border: $border-width solid $gray-600;
bottom: 0;
content: "";
left: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/widgets/src/blocks/widget-group/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.wp-block-widget-group {
&.has-child-selected::after {
border-radius: $radius-block-ui;
border: 1px solid var(--wp-admin-theme-color);
border: $border-width solid var(--wp-admin-theme-color);
bottom: 0;
content: "";
left: 0;
Expand Down
Loading