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 1 commit
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
6 changes: 3 additions & 3 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 Expand Up @@ -197,7 +197,7 @@
border-radius: $radius-round;
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
border: 1px solid transparent;
Copy link
Contributor

Choose a reason for hiding this comment

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

This one is fine to change, but there are many cases where there are 2 or even 3px outlines destined for high contrast mode, so it's less uniform here. In other words, this one could intentionally diverge. Either is fine, just noting.

border: $border-width solid transparent;
box-sizing: inherit;
}

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: $shadow-popover;
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: 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
2 changes: 1 addition & 1 deletion 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,7 +9,7 @@
}

.editor-block-manager__disabled-blocks-count {
border: 1px solid $gray-300;
border: $border-width solid $gray-300;
border-width: 1px 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably want it here too no? I.e. 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;
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
2 changes: 1 addition & 1 deletion 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 @@ -11,7 +11,7 @@
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
border: $border-width dotted $gray-300;
height: auto !important; // Need to override the default sidebar positionnings
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm sorry for widening the rabbit hole! The CSS comment here both has a typo, and could use a period at the end. Something like // Necessary to override the default sidebar positioning.

padding: $grid-unit-30;
display: flex;
Expand Down
6 changes: 3 additions & 3 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,7 +4,7 @@
}
background: $white;
border-radius: $radius-block-ui;
border: 1px solid $gray-900;
border: $border-width solid $gray-900;
padding: $grid-unit-15 - 1px; // Subtract the border width.
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a place where the variable can actually be helpful in the math. You can even remove the CSS comment if you do this:

padding: $grid-unit-15 - $border-width;

max-height: calc(100vh - 2px); // Subtract the border width (both top and bottom).
Copy link
Contributor

Choose a reason for hiding this comment

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

This one would be slightly tricker since we need to output the sass variable. But this should work:

calc(100vh - #{ $border-width } - #{ $border-width });

overflow-y: scroll;
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