Skip to content

Commit 22b0a5d

Browse files
NicolaSaundersNicolaSaunders
authored
Feature/#399 status styles (#122)
* Remove unused background colors Sass partial * Adjust default tag styles, introduce utility colour style options * Remove error-colour class not following utility class name-spacing * Ensure colour utility styles take precedence * Rebuild CSS
1 parent 968af0e commit 22b0a5d

File tree

5 files changed

+169
-23
lines changed

5 files changed

+169
-23
lines changed

‎assets-src/styles/sass/30-base/_bg-color.scss‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎assets-src/styles/sass/50-core-components/_tag-list.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
.tag {
1414
@include txt-eris;
1515
background-color: rgba(#cecdcd, 0.5);
16+
background-clip: padding-box;
17+
border: solid 2px rgba(#cecdcd, 0.5);
1618
border-radius: rem(4);
1719
display: inline-block;
1820
padding: rem(2.5) rem(5) rem(2.5) rem(5);

‎assets-src/styles/sass/90-utilities/_colors.scss‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,99 @@
11
/*------------------------------------*\
22
#Color utilities
3+
4+
Double specificity in classname avoids use of !important
35
\*------------------------------------*/
46

5-
.error-color.error-color {
6-
color : $error-color;
7+
/**
8+
Utilities for "solid" background/border color with WCAG conforming content color
9+
*/
10+
.u-bg-active.u-bg-active {
11+
12+
background-color: $coral;
13+
border-color: $coral;
14+
color: $off-black;
15+
16+
}
17+
18+
.u-bg-category.u-bg-category {
19+
20+
background-color: $purple;
21+
border-color: $purple;
22+
color: $white;
23+
24+
}
25+
26+
.u-bg-error.u-bg-error {
27+
28+
background-color: $error-color;
729
border-color: $error-color;
30+
color: $white;
31+
832
}
33+
34+
.u-bg-info.u-bg-info {
35+
36+
background-color: $info-color;
37+
border-color: $info-color;
38+
color: $white;
39+
40+
}
41+
42+
.u-bg-success.u-bg-success {
43+
44+
background-color: $success-color;
45+
border-color: $success-color;
46+
color: $white;
47+
48+
}
49+
50+
.u-bg-warning.u-bg-warning {
51+
background-color: $warning-color;
52+
border-color: $warning-color;
53+
color: $off-black;
54+
}
55+
56+
57+
58+
/**
59+
Utilities for border/content color with white background color
60+
*/
61+
.u-color-draft.u-color-draft {
62+
63+
background-color: $white;
64+
border-color: $off-black;
65+
color: $off-black;
66+
67+
}
68+
69+
.u-color-error.u-color-error {
70+
71+
background-color: $white;
72+
border-color: $error-color;
73+
color: $error-color;
74+
75+
}
76+
77+
.u-color-info.u-color-info {
78+
79+
background-color: $white;
80+
border-color: $info-color;
81+
color: $info-color;
82+
83+
}
84+
85+
.u-color-success.u-color-success {
86+
87+
background-color: $white;
88+
border-color: $success-color;
89+
color: $success-color;
90+
91+
}
92+
93+
.u-color-warning.u-color-warning {
94+
95+
background-color: $white;
96+
border-color: $warning-color;
97+
color: $off-black;
98+
99+
}

‎public/dist/assets/styles/core.css‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3443,6 +3443,8 @@ main,
34433443
font-size: 0.875rem;
34443444
line-height: 1.4285714286;
34453445
background-color: rgba(206, 205, 205, 0.5);
3446+
background-clip: padding-box;
3447+
border: solid 2px rgba(206, 205, 205, 0.5);
34463448
border-radius: 0.25rem;
34473449
display: inline-block;
34483450
padding: 0.15625rem 0.3125rem 0.15625rem 0.3125rem;
@@ -5132,8 +5134,77 @@ To horizontally center a block-level item
51325134

51335135
/*------------------------------------*\
51345136
#Color utilities
5137+
5138+
Double specificity in classname avoids use of !important
51355139
\*------------------------------------*/
5136-
.error-color.error-color {
5137-
color: #a82615;
5140+
/**
5141+
Utilities for "solid" background/border color with WCAG conforming content color
5142+
*/
5143+
.u-bg-active.u-bg-active {
5144+
background-color: #fc7750;
5145+
border-color: #fc7750;
5146+
color: #111;
5147+
}
5148+
5149+
.u-bg-category.u-bg-category {
5150+
background-color: #920ba6;
5151+
border-color: #920ba6;
5152+
color: #fff;
5153+
}
5154+
5155+
.u-bg-error.u-bg-error {
5156+
background-color: #a82615;
5157+
border-color: #a82615;
5158+
color: #fff;
5159+
}
5160+
5161+
.u-bg-info.u-bg-info {
5162+
background-color: #005a9c;
5163+
border-color: #005a9c;
5164+
color: #fff;
5165+
}
5166+
5167+
.u-bg-success.u-bg-success {
5168+
background-color: #046704;
5169+
border-color: #046704;
5170+
color: #fff;
5171+
}
5172+
5173+
.u-bg-warning.u-bg-warning {
5174+
background-color: #c28605;
5175+
border-color: #c28605;
5176+
color: #111;
5177+
}
5178+
5179+
/**
5180+
Utilities for border/content color with white background color
5181+
*/
5182+
.u-color-draft.u-color-draft {
5183+
background-color: #fff;
5184+
border-color: #111;
5185+
color: #111;
5186+
}
5187+
5188+
.u-color-error.u-color-error {
5189+
background-color: #fff;
51385190
border-color: #a82615;
5191+
color: #a82615;
5192+
}
5193+
5194+
.u-color-info.u-color-info {
5195+
background-color: #fff;
5196+
border-color: #005a9c;
5197+
color: #005a9c;
5198+
}
5199+
5200+
.u-color-success.u-color-success {
5201+
background-color: #fff;
5202+
border-color: #046704;
5203+
color: #046704;
5204+
}
5205+
5206+
.u-color-warning.u-color-warning {
5207+
background-color: #fff;
5208+
border-color: #c28605;
5209+
color: #111;
51395210
}

‎public/dist/assets/styles/core.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)