Skip to content

Commit 5eaf9de

Browse files
author
James Mejia
authored
Merge pull request #4079 from uswds/dw-color-icons
Add better support for custom icon colors
2 parents dfa95f2 + 41d00d3 commit 5eaf9de

File tree

12 files changed

+107
-89
lines changed

12 files changed

+107
-89
lines changed

‎src/img/usa-icons-bg/check_circle--white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/img/usa-icons-bg/error--white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/img/usa-icons-bg/info--white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/img/usa-icons-bg/warning--white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/stylesheets/components/_alerts.scss‎

Lines changed: 64 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,38 @@
1+
$alert-slim-icon-size: units(3);
2+
$alert-icon-optical-factor: units($theme-alert-icon-size) / 6;
3+
$alert-icon-optical-padding: units($theme-alert-padding-x) -
4+
$alert-icon-optical-factor;
5+
6+
@mixin add-alert-icon($name, $color, $bgcolor) {
7+
$this-icon-object: map-merge(
8+
$icon-object,
9+
(
10+
"name": $name,
11+
"color": $color,
12+
"height": $theme-alert-icon-size,
13+
)
14+
);
15+
&:before {
16+
@include add-color-icon($this-icon-object, $bgcolor);
17+
// Position centered in the alert
18+
bottom: 0;
19+
content: "";
20+
display: block;
21+
// padding - optical spacing value
22+
left: $alert-icon-optical-padding;
23+
position: absolute;
24+
height: auto;
25+
top: 0;
26+
}
27+
&.usa-alert--slim:before {
28+
background-size: $alert-slim-icon-size;
29+
width: $alert-slim-icon-size;
30+
@supports (mask: url("")) {
31+
mask-size: $alert-slim-icon-size;
32+
}
33+
}
34+
}
35+
136
// Alert variables ---------- //
237

338
$alert-icons: (
@@ -8,36 +43,32 @@ $alert-icons: (
843
emergency: "error",
944
);
1045

11-
$alert-padding-left: units($theme-alert-padding-x) +
12-
units($theme-alert-bar-width);
46+
$icon-object: (
47+
"name": "ICON_NAME",
48+
"svg-height": 40,
49+
"svg-width": 40,
50+
"height": $theme-icon-image-size,
51+
"color": "ink",
52+
);
53+
54+
$alert-padding-left: units($theme-alert-bar-width);
1355

1456
.usa-alert {
1557
@include typeset($theme-alert-font-family);
1658
@include border-box-sizing;
17-
background-color: color("base-lightest");
18-
background-position: $alert-padding-left units($theme-alert-padding-x - 1);
19-
background-repeat: no-repeat;
20-
background-size: units($theme-alert-icon-size);
21-
padding-bottom: units(2);
22-
padding-left: $alert-padding-left;
23-
padding-right: units($theme-alert-padding-x);
24-
padding-top: units($theme-alert-padding-x);
59+
@include set-text-and-bg(
60+
"base-lightest",
61+
$theme-alert-text-color,
62+
$theme-alert-text-reverse-color
63+
);
64+
@include u-padding-y($theme-alert-padding-y);
2565
position: relative;
2666

2767
* + & {
2868
margin-top: units(2);
2969
}
3070

31-
// TODO: why is this not simply a border?
32-
&::before {
33-
background-color: color("base-light");
34-
content: "";
35-
height: 100%;
36-
left: 0;
37-
position: absolute;
38-
top: 0;
39-
width: units($theme-alert-bar-width);
40-
}
71+
border-left: units($theme-alert-bar-width) solid color("base-light");
4172

4273
> .usa-list,
4374
.usa-alert__body > .usa-list {
@@ -49,14 +80,14 @@ $alert-padding-left: units($theme-alert-padding-x) +
4980
}
5081
}
5182

52-
.usa-alert__icon {
53-
display: table-cell;
54-
padding-right: units($theme-alert-bar-width);
83+
@each $name, $icon in $alert-icons {
84+
.usa-alert--#{$name} {
85+
@include alert-status-styles($name, $icon);
86+
}
5587
}
5688

5789
.usa-alert__body {
58-
display: table-cell;
59-
vertical-align: top;
90+
@include u-padding-x($theme-alert-padding-x);
6091
}
6192

6293
.usa-alert__heading {
@@ -74,35 +105,24 @@ $alert-padding-left: units($theme-alert-padding-x) +
74105
}
75106

76107
.usa-alert__text:only-child {
77-
margin-bottom: units($theme-alert-bar-width);
78-
padding-top: units(0.5);
79-
}
80-
81-
@each $name, $icon in $alert-icons {
82-
.usa-alert--#{$name} {
83-
@include alert-status-styles($name, $icon);
84-
}
108+
@include u-padding-y(0);
85109
}
86110

87111
.usa-alert--slim {
88112
@include alert-slim-styles;
89113
}
90114

91-
.usa-alert--no-heading {
92-
background-position: $alert-padding-left
93-
calc(#{units($theme-alert-padding-x)} - #{units(0.5)});
94-
}
95-
96115
.usa-alert--validation {
97-
background-size: units(3);
98-
background-position: $alert-padding-left
99-
calc(#{units($theme-alert-padding-x)} - #{units(2px)});
100-
101-
.usa-alert__body {
102-
padding-left: units(5);
116+
&:before {
117+
background-position: 0 units(1);
118+
mask-position: 0 units(1);
103119
}
104120

105121
.usa-checklist {
106122
margin-top: units(2);
107123
}
108124
}
125+
126+
.usa-alert--emergency {
127+
border-left: none;
128+
}

‎src/stylesheets/components/_banner.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ $banner-icon-colors: get-link-tokens-from-bg(
88
$banner-icon-color: nth($banner-icon-colors, 1);
99
$banner-icon-hover: nth($banner-icon-colors, 2);
1010
$banner-icon-chevron: (
11-
"name": "chevron",
12-
"svg-height": 39,
13-
"svg-width": 64,
14-
"height": 0.8ex,
11+
"name": "expand_more",
12+
"svg-height": 40,
13+
"svg-width": 40,
14+
"height": 2,
1515
"color": $banner-icon-color,
1616
"color-variant": "white",
1717
"color-hover": $banner-icon-hover,
1818
);
1919
$banner-icon-chevron-up: map-merge(
2020
$banner-icon-chevron,
2121
(
22-
"rotate": 180deg,
22+
"name": "expand_less",
2323
)
2424
);
2525
$banner-icon-close: (
26-
"name": "usa-icons/close",
26+
"name": "close",
2727
"svg-height": 40,
2828
"svg-width": 40,
2929
"height": 3,
@@ -137,7 +137,7 @@ $banner-icon-close: (
137137
@include place-icon(
138138
$banner-icon-chevron,
139139
"after",
140-
2px,
140+
0,
141141
middle,
142142
$theme-banner-background-color
143143
);
@@ -224,7 +224,7 @@ $banner-icon-close: (
224224
@include place-icon(
225225
$banner-icon-chevron,
226226
"after",
227-
2px,
227+
0,
228228
middle,
229229
$theme-banner-background-color
230230
);
@@ -279,7 +279,7 @@ $banner-icon-close: (
279279
@include place-icon(
280280
$banner-icon-chevron-up,
281281
"after",
282-
2px,
282+
0,
283283
middle,
284284
$theme-banner-background-color
285285
);

‎src/stylesheets/components/_breadcrumb.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ $breadcrumb-icon-display-height: 2ex;
1313
$breadcrumb-icon-spacing: 0px;
1414

1515
$icon-breadcrumb-separator: (
16-
"name": "usa-icons/navigate_next",
16+
"name": "navigate_next",
1717
"svg-height": 40,
1818
"svg-width": 40,
1919
"height": $breadcrumb-icon-display-height,
2020
"color": $theme-breadcrumb-separator-color,
2121
);
2222

2323
$icon-breadcrumb-back: (
24-
"name": "usa-icons/arrow_back",
24+
"name": "arrow_back",
2525
"svg-height": 40,
2626
"svg-width": 40,
2727
"height": $breadcrumb-icon-display-height,

‎src/stylesheets/core/mixins/_alert-slim-styles.scss‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
@mixin alert-slim-styles {
2-
background-position: $alert-padding-left units(1.5);
3-
background-size: units(3);
4-
padding-bottom: units($theme-alert-bar-width);
5-
padding-top: units($theme-alert-bar-width);
6-
2+
@include u-padding-y(1);
73
.usa-alert__body {
8-
padding-left: units(4);
9-
}
10-
11-
.usa-alert__text:only-child {
12-
margin-bottom: units(0.5);
13-
padding-top: units(0.5);
4+
padding-left: calc(
5+
#{$alert-slim-icon-size} + (2 * #{$alert-icon-optical-padding})
6+
);
147
}
158
}

‎src/stylesheets/core/mixins/_alert-status-styles.scss‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,19 @@
22
$bgcolor: if($name != "emergency", "#{$name}-lighter", $name);
33
$banner-text-color-token: get-color-token-from-bg(
44
$bgcolor,
5-
$context: "Alert text"
5+
$theme-alert-text-reverse-color,
6+
$theme-alert-text-color,
7+
$context: "Alert (#{$name})"
68
);
7-
$icon-path: if(
8-
$banner-text-color-token == "ink",
9-
"usa-icons/#{$icon}",
10-
"alerts/#{$icon}-white"
11-
);
12-
@include add-background-svg($icon-path);
9+
10+
@include add-alert-icon($icon, $banner-text-color-token, $bgcolor);
1311
background-color: color($bgcolor);
12+
border-left-color: color($name);
1413
color: color($banner-text-color-token);
1514

16-
&::before {
17-
background-color: color($name);
18-
}
19-
2015
.usa-alert__body {
21-
padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
16+
padding-left: units($theme-alert-icon-size) +
17+
(2 * $alert-icon-optical-padding);
2218
}
2319

2420
.usa-link {
@@ -31,10 +27,12 @@
3127
}
3228

3329
&.usa-alert--no-icon {
34-
background-image: none;
30+
&:before {
31+
display: none;
32+
}
3533

3634
.usa-alert__body {
37-
padding-left: 0;
35+
padding-left: units($theme-alert-padding-x);
3836
}
3937
}
4038
}

‎src/stylesheets/core/mixins/_icon.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -116,15 +116,16 @@
116116
map-get($icon-object, "path"),
117117
$theme-image-path
118118
);
119-
$ie11-variant: get-color-token-from-bg($contrast-bg, $color-variant, "black");
120-
$filename-ie11-variant: if($ie11-variant == "black", null, $ie11-variant);
121-
$filename: if(
122-
$filename-ie11-variant,
123-
"#{$filename-base}-#{$filename-ie11-variant}.svg",
124-
"#{$filename-base}.svg"
119+
$ie11-variant: get-color-token-from-bg($contrast-bg, "white", "black");
120+
$filename-ie11: if(
121+
$ie11-variant == "white",
122+
"usa-icons-bg/#{$filename-base}--white.svg",
123+
"usa-icons/#{$filename-base}.svg"
125124
);
126125

127-
$image-props: url("#{$path}/#{$filename}") no-repeat center / #{$width} #{$height};
126+
$mask-props: url("#{$path}/usa-icons/#{$filename-base}.svg") no-repeat center /
127+
#{$width} #{$height};
128+
$image-props: url("#{$path}/#{$filename-ie11}") no-repeat center / #{$width} #{$height};
128129

129130
// Default background shorthand for browsers that don't support mask or supports.
130131
background: $image-props;
@@ -135,11 +136,11 @@
135136
transform: rotate($rotate);
136137
}
137138

138-
// Mask supportered styles
139+
// Mask supported styles
139140
@supports (mask: url("")) {
140141
background: none;
141142
background-color: color($color);
142-
mask: $image-props;
143+
mask: $mask-props;
143144
@if $color-hover {
144145
&:hover {
145146
background-color: color($color-hover);

0 commit comments

Comments
 (0)