Skip to content

Commit

Permalink
Merge pull request #2345 from Shopify/color-system/flatten-states
Browse files Browse the repository at this point in the history 
[Color system] Flatten interaction states
  • Loading branch information
@danrosenthal
danrosenthal authored Oct 24, 2019
2 parents 8fd30e7 + 1087a8a commit d3545fd
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 45 deletions.
88 changes: 70 additions & 18 deletions src/components/ActionList/ActionList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,72 +48,124 @@ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
border-radius: 0;

&.active {
@include state(active);
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
);
}

&:active {
@include state(active);
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
);

&:hover {
@include state(active, hover);
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));

// stylelint-disable-next-line selector-max-specificity
&:focus {
@include state(active, hover, focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}
}
}

&:hover {
@include state(hover);
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);

&:focus {
@include state(hover, focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}
}

&:focus {
@include state(focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);
}

&.destructive {
@include recolor-icon(color('red', 'dark'));
color: color('red', 'dark');

&:active {
@include state(active-destructive);
background-image: linear-gradient(
rgba(220, 56, 37, 0.03),
rgba(220, 56, 37, 0.03)
);

// stylelint-disable-next-line selector-max-specificity
&:hover {
@include state(active-destructive, hover-destructive);
background-image: linear-gradient(
rgba(220, 56, 37, 0.03),
rgba(220, 56, 37, 0.03)
),
linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4));

// stylelint-disable-next-line selector-max-specificity, max-nesting-depth
&:focus {
@include state(
active-destructive,
hover-destructive,
focused-destructive
);
box-shadow: inset 0.2rem 0 0 color('red');
background-image: linear-gradient(
rgba(220, 56, 37, 0.03),
rgba(220, 56, 37, 0.03)
),
linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4)),
linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4));
}
}
}

&:hover {
@include state(hover-destructive);
background-image: linear-gradient(
rgba(251, 234, 229, 0.4),
rgba(251, 234, 229, 0.4)
);

// stylelint-disable-next-line selector-max-specificity
&:focus {
@include state(hover-destructive, focused-destructive);
box-shadow: inset 0.2rem 0 0 color('red');
background-image: linear-gradient(
rgba(251, 234, 229, 0.4),
rgba(251, 234, 229, 0.4)
),
linear-gradient(rgba(251, 234, 229, 0.4), rgba(251, 234, 229, 0.4));
}
}

&:focus {
@include state(focused-destructive);
box-shadow: inset 0.2rem 0 0 color('red');
background-image: linear-gradient(
rgba(251, 234, 229, 0.4),
rgba(251, 234, 229, 0.4)
);
}
}

&.disabled {
@include state(disabled);
background-image: linear-gradient(
rgba(249, 250, 251, 1),
rgba(249, 250, 251, 1)
);
color: color('ink', 'lightest');
pointer-events: none;

Expand Down
11 changes: 9 additions & 2 deletions src/components/Filters/Filters.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,19 @@ $list-filters-footer-height: rem(70px);

&:hover {
cursor: pointer;
@include state(hover);
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);
}

&:focus {
outline: none;
@include state(focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);
}
}

Expand Down
48 changes: 40 additions & 8 deletions src/components/OptionList/components/Option/Option.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ $control-vertical-adjustment: rem(2px);
cursor: pointer;

&:hover {
@include state(hover);
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);
}
}

Expand Down Expand Up @@ -49,35 +52,64 @@ $control-vertical-adjustment: rem(2px);
}

.focused {
@include state(focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);

&:hover {
@include state(focused, hover);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}
}

.disabled {
@include state(disabled);
background-image: linear-gradient(
rgba(249, 250, 251, 1),
rgba(249, 250, 251, 1)
);

.Media {
@include recolor-icon(color('ink', 'lightest'), color('white'));
}
}

.select {
@include state(selected);
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
);

&.focused {
@include state(selected, focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));

&:hover {
@include state(selected, focused, hover);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}
}
}

.active {
@include state(active);
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
);
}

.Media {
Expand Down
62 changes: 52 additions & 10 deletions src/components/ResourceItem/ResourceItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ $resource-list-item-variables: (
cursor: pointer;

&:hover {
@include state(hover);
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);

&:not(.persistActions) {
// stylelint-disable-next-line selector-max-specificity
Expand All @@ -57,39 +60,78 @@ $resource-list-item-variables: (
}

&:active {
@include state(active);
background-image: linear-gradient(
rgba(179, 188, 245, 0.1),
rgba(179, 188, 245, 0.1)
);
}
}

.selected {
@include state(selected);
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
);

&.focused {
@include state(selected, focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));

&:hover {
@include state(selected, focused, hover);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}
}

&:hover {
@include state(selected, hover);
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}

&:active {
@include state(selected, active);
background-image: linear-gradient(
rgba(179, 188, 245, 0.15),
rgba(179, 188, 245, 0.15)
),
linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1));
}
}

.focused {
@include state(focused);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
);

&:hover {
@include state(focused, hover);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
),
linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3));
}

&:active {
@include state(focused, active);
box-shadow: inset 0.2rem 0 0 color('indigo');
background-image: linear-gradient(
rgba(223, 227, 232, 0.3),
rgba(223, 227, 232, 0.3)
),
linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1));
}
}

Expand Down
Loading

0 comments on commit d3545fd

Please sign in to comment.