Skip to content

Remove remaining color sass function uses #4655

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

Merged
merged 9 commits into from
Nov 22, 2021
Merged

Remove remaining color sass function uses #4655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4c53bfc
remove straglers
Nov 16, 2021
befbc78
removing commented out code and usused vars
Nov 22, 2021
1cd6488
Merge https://github.com/Shopify/polaris-react into follow-up-color-f…
Nov 22, 2021
66a7d96
hardcoding button border color
Nov 22, 2021
9af3dc6
added unreleased line item
Nov 22, 2021
abe67fd
removing button-outline-disabled use from button
Nov 22, 2021
9c92aec
Merge https://github.com/Shopify/polaris-react into follow-up-color-f…
Nov 22, 2021
1ab4105
disable lint error
Nov 22, 2021
d25be20
Update UNRELEASED.md
Nov 22, 2021
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
14 changes: 9 additions & 5 deletions src/components/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,15 +150,16 @@ $stacking-order: (
}

.outline {
@include button-outline(color('ink', 'lighter'));
Copy link
Member

@BPScott BPScott Nov 22, 2021

Choose a reason for hiding this comment

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

The $outline-color parameter doesn't seem to be used anymore. https://github.com/Shopify/polaris-react/blob/main/src/styles/shared/_buttons.scss#L118

Perhaps we can just remove passing in the argument entirely: @include button-outline()

@include button-outline(var(--p-border));

&.disabled {
@include button-outline-disabled(color('ink', 'lighter'));
background: transparent;
box-shadow: none;
}
}

.destructive.outline {
@include button-outline(color('red'));
@include button-outline(var(--p-border-critical));
Copy link
Member

@BPScott BPScott Nov 22, 2021

Choose a reason for hiding this comment

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

As above

}

.disabled {
Expand Down Expand Up @@ -485,9 +486,12 @@ $stacking-order: (
border-bottom-left-radius: 0;
height: 100%;

// Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color.
// Note 1: Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color.
// Note 2: hardcoding this value because we can't use custom css properties in sass functions. Will clean up in a follow-up
// https://github.com/Shopify/polaris-react/pull/4655#discussion_r750793847
&.outline:not(:focus) {
border-left-color: rgba(color('ink', 'lighter'), 0);
/* stylelint-disable color-no-hex */
border-left-color: rgba(#d2d5d8, 0);
}

&:focus,
Expand Down
3 changes: 0 additions & 3 deletions src/components/Navigation/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ $item-font-size: rem(16px);
$item-font-size-small: rem(14px);
$item-line-height-small: rem(32px);
$item-line-height-large: rem(36px);
// This is the only place this color is used.
// stylelint-disable-next-line color-no-hex
$item-selected-background: rgba(color('indigo'), 0.12);
$text-line-height: rem(20px);
$nav-variables: (
mobile-spacing: rem(10px),
Expand Down
4 changes: 0 additions & 4 deletions src/styles/shared/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,11 +197,7 @@

@mixin button-outline-disabled($outline-color) {
background: transparent;
// border-color: rgba($outline-color, 0.25);
box-shadow: none;
// color: color('ink', 'lightest');

// @include recolor-icon(color('ink', 'lightest'));
}

@mixin button-full-width {
Expand Down