Skip to content

Commit d2c9f6e

Browse files
paulrobertlloydpaulrobertlloyd
committed
Use renamed SCSS colour variables
1 parent 61febb0 commit d2c9f6e

File tree

19 files changed

+109
-120
lines changed

19 files changed

+109
-120
lines changed

‎app/assets/stylesheets/components/_action-list.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
.app-action-list__item:not(:last-child) {
28-
border-right: 1px solid $nhsuk-border-color;
28+
border-right: 1px solid $nhsuk-border-colour;
2929
}
3030

3131
.app-action-list__item:last-child {

‎app/assets/stylesheets/components/_add-another.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ $_counter-size: 2rem;
1818

1919
&::before {
2020
align-items: center;
21-
background-color: $color_nhsuk-blue;
22-
color: $color_nhsuk-white;
21+
background-color: nhsuk-colour("blue");
22+
color: nhsuk-colour("white");
2323
content: counter(items);
2424
counter-increment: items;
2525
display: flex;

‎app/assets/stylesheets/components/_autocomplete.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
position: relative;
99

1010
.nhsuk-form-group--error & {
11-
border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color;
11+
border: $nhsuk-border-width-form-element-error solid $nhsuk-error-colour;
1212
}
1313
}
1414

1515
.app-autocomplete__input--focused {
1616
@include nhsuk-focused-input;
1717

1818
.nhsuk-form-group--error & {
19-
border-color: $nhsuk-focus-text-color;
19+
border-color: $nhsuk-focus-text-colour;
2020
}
2121
}
2222

@@ -26,7 +26,7 @@
2626
}
2727

2828
.app-autocomplete__hint {
29-
color: $nhsuk-secondary-text-color;
29+
color: $nhsuk-secondary-text-colour;
3030
position: absolute;
3131
}
3232

@@ -41,10 +41,10 @@
4141
}
4242

4343
.app-autocomplete__menu {
44-
background-color: $nhsuk-form-element-background-color;
45-
border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
44+
background-color: $nhsuk-input-background-colour;
45+
border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
4646
border-top: 0;
47-
color: $nhsuk-text-color;
47+
color: $nhsuk-text-colour;
4848
margin: 0;
4949
max-height: 342px;
5050
overflow-x: hidden;
@@ -75,7 +75,7 @@
7575
}
7676

7777
.app-autocomplete__option {
78-
border-bottom: solid $nhsuk-border-color;
78+
border-bottom: solid $nhsuk-border-colour;
7979
border-width: 1px 0;
8080
cursor: pointer;
8181
display: block;
@@ -86,13 +86,13 @@
8686
@include nhsuk-font(19);
8787

8888
.app-autocomplete__option-hint {
89-
color: $nhsuk-secondary-text-color;
89+
color: $nhsuk-secondary-text-colour;
9090
}
9191
}
9292

9393
.app-autocomplete__option--no-results {
94-
background-color: $nhsuk-form-element-background-color;
95-
color: $nhsuk-secondary-text-color;
94+
background-color: $nhsuk-input-background-colour;
95+
color: $nhsuk-secondary-text-colour;
9696
cursor: not-allowed;
9797
}
9898

@@ -109,18 +109,18 @@
109109
}
110110

111111
.app-autocomplete__option--odd {
112-
background-color: $color_nhsuk-grey-5;
112+
background-color: nhsuk-colour("grey-5");
113113
}
114114

115115
.app-autocomplete__option--focused,
116116
.app-autocomplete__option:hover {
117-
background-color: $nhsuk-link-color;
118-
border-color: $nhsuk-link-color;
119-
color: $color_nhsuk-white;
117+
background-color: $nhsuk-link-colour;
118+
border-color: $nhsuk-link-colour;
119+
color: nhsuk-colour("white");
120120
outline: none;
121121

122122
.app-autocomplete__option-hint {
123-
color: $color_nhsuk-grey-5;
123+
color: nhsuk-colour("grey-5");
124124
}
125125
}
126126

‎app/assets/stylesheets/components/_button.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@use "../vendor/nhsuk-frontend" as *;
33

44
$_button-shadow-size: $nhsuk-border-width-form-element * 2;
5-
$_secondary-warning-button-hover-color: color.change(
6-
$nhsuk-warning-button-color,
5+
$_secondary-warning-button-hover-colour: color.change(
6+
$nhsuk-warning-button-colour,
77
$alpha: 0.1
88
);
99

@@ -23,26 +23,26 @@ $_secondary-warning-button-hover-color: color.change(
2323
&:visited,
2424
&:active,
2525
&:hover {
26-
color: $nhsuk-warning-button-color;
26+
color: $nhsuk-warning-button-colour;
2727
}
2828

2929
&:hover,
3030
&:hover:visited {
31-
background-color: $_secondary-warning-button-hover-color;
32-
color: $nhsuk-warning-button-color;
31+
background-color: $_secondary-warning-button-hover-colour;
32+
color: $nhsuk-warning-button-colour;
3333
}
3434

3535
&:active {
36-
background-color: $_secondary-warning-button-hover-color;
37-
border-color: $nhsuk-warning-button-color;
36+
background-color: $_secondary-warning-button-hover-colour;
37+
border-color: $nhsuk-warning-button-colour;
3838
}
3939

4040
&:not(:focus):not(:active)::before {
41-
border-color: $nhsuk-warning-button-color;
41+
border-color: $nhsuk-warning-button-colour;
4242
}
4343

4444
&:not(:focus):not(:active)::after {
45-
box-shadow: 0 $_button-shadow-size 0 $nhsuk-warning-button-color;
45+
box-shadow: 0 $_button-shadow-size 0 $nhsuk-warning-button-colour;
4646
}
4747
}
4848

‎app/assets/stylesheets/components/_card.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,47 @@
44
.app-card {
55
&--aqua-green {
66
.nhsuk-card__heading--feature {
7-
background-color: $color_nhsuk-aqua-green;
7+
background-color: nhsuk-colour("aqua-green");
88
}
99
}
1010

1111
&--dark-orange {
1212
.nhsuk-card__heading--feature {
13-
background-color: app.$color_dark-orange;
13+
background-color: app.$dark-orange-colour;
1414
}
1515
}
1616

1717
&--green {
1818
.nhsuk-card__heading--feature {
19-
background-color: $color_nhsuk-green;
19+
background-color: nhsuk-colour("green");
2020
}
2121
}
2222

2323
&--grey {
2424
.nhsuk-card__heading--feature {
25-
background-color: $color_nhsuk-grey-1;
25+
background-color: nhsuk-colour("grey-1");
2626
}
2727
}
2828

2929
&--purple {
3030
.nhsuk-card__heading--feature {
31-
background-color: $color_nhsuk-purple;
31+
background-color: nhsuk-colour("purple");
3232
}
3333
}
3434

3535
&--red {
3636
.nhsuk-card__heading--feature {
37-
background-color: $color_nhsuk-red;
37+
background-color: nhsuk-colour("red");
3838
}
3939
}
4040

4141
&--reversed {
42-
background-color: $color_nhsuk-blue;
43-
border-color: nhsuk-shade($nhsuk-link-color, 25%);
44-
color: $color_nhsuk-white;
42+
background-color: nhsuk-colour("blue");
43+
border-color: nhsuk-shade(nhsuk-colour("blue"), 25%);
44+
color: nhsuk-colour("white");
4545

4646
&:active {
47-
border-color: nhsuk-shade($nhsuk-link-color, 50%);
47+
border-color: nhsuk-shade(nhsuk-colour("blue"), 50%);
4848
}
4949

5050
.nhsuk-card__link {
@@ -53,7 +53,7 @@
5353
}
5454

5555
&--offset {
56-
background-color: rgba($color_nhsuk-grey-5, 0.5);
56+
background-color: rgba(nhsuk-colour("grey-5"), 0.5);
5757
}
5858

5959
&--data {

‎app/assets/stylesheets/components/_count.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33

44
.app-count {
55
background-color: color.scale(
6-
color.scale($nhsuk-link-color, $lightness: -50%),
6+
color.scale($nhsuk-link-colour, $lightness: -50%),
77
$alpha: -60%
88
);
99
border-radius: nhsuk-spacing(3);
10-
color: $color_nhsuk-white;
10+
color: nhsuk-colour("white");
1111
display: inline-block;
1212
min-width: nhsuk-spacing(5);
1313
padding-left: nhsuk-spacing(2);
@@ -17,6 +17,6 @@
1717
@include nhsuk-font(16);
1818

1919
:focus & {
20-
background-color: color.scale($nhsuk-focus-text-color, $alpha: -40%);
20+
background-color: color.scale($nhsuk-focus-text-colour, $alpha: -40%);
2121
}
2222
}

‎app/assets/stylesheets/components/_dev-tools.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
@use "../vendor/nhsuk-frontend" as *;
22

33
.app-dev-tools {
4-
background-color: $color_nhsuk-pale-yellow;
4+
background-color: nhsuk-colour("pale-yellow");
55
background-image: linear-gradient(
66
-45deg,
7-
$color_nhsuk-warm-yellow 25%,
8-
$color_nhsuk-pale-yellow 25%,
9-
$color_nhsuk-pale-yellow 50%,
10-
$color_nhsuk-warm-yellow 50%,
11-
$color_nhsuk-warm-yellow 75%,
12-
$color_nhsuk-pale-yellow 75%,
13-
$color_nhsuk-pale-yellow 100%
7+
nhsuk-colour("warm-yellow") 25%,
8+
nhsuk-colour("pale-yellow") 25%,
9+
nhsuk-colour("pale-yellow") 50%,
10+
nhsuk-colour("warm-yellow") 50%,
11+
nhsuk-colour("warm-yellow") 75%,
12+
nhsuk-colour("pale-yellow") 75%,
13+
nhsuk-colour("pale-yellow") 100%
1414
);
1515
background-size: nhsuk-spacing(2) nhsuk-spacing(2);
1616
background-repeat: repeat-x;

‎app/assets/stylesheets/components/_filters.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33

44
.app-filters {
55
&.nhsuk-card {
6-
background-color: color.scale($color_nhsuk-grey-4, $alpha: -50%);
6+
background-color: color.scale(nhsuk-colour("grey-4"), $alpha: -50%);
77
}
88

99
.nhsuk-card__heading--feature {
10-
background-color: $color_nhsuk-grey-1;
10+
background-color: nhsuk-colour("grey-1");
1111
}
1212

1313
// Adjust design and spacing of details component
@@ -21,7 +21,7 @@
2121
}
2222

2323
&[open] {
24-
background-color: $color_nhsuk-grey-4;
24+
background-color: nhsuk-colour("grey-4");
2525
}
2626
}
2727

‎app/assets/stylesheets/components/_header.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use "sass:color";
21
@use "../vendor/nhsuk-frontend" as *;
32

43
.app-header__navigation-item--with-count {

‎app/assets/stylesheets/components/_highlight.scss‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,29 @@
1-
@use "sass:color";
21
@use "../vendor/nhsuk-frontend" as *;
32

43
.app-highlight {
5-
background-color: color.mix(
6-
$color_nhsuk-white,
7-
$color_nhsuk-warm-yellow,
8-
80%
9-
);
10-
border-bottom: 3px solid $color_nhsuk-warm-yellow;
4+
background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 80%);
5+
border-bottom: 3px solid nhsuk-colour("warm-yellow");
116

127
a & {
13-
color: $nhsuk-link-color;
8+
color: $nhsuk-link-colour;
149
}
1510

1611
a:visited & {
17-
color: $nhsuk-link-visited-color;
12+
color: $nhsuk-link-visited-colour;
1813
}
1914

2015
a:hover & {
21-
color: $nhsuk-link-hover-color;
16+
color: $nhsuk-link-hover-colour;
2217
}
2318

2419
a:active & {
25-
color: $nhsuk-link-active-color;
20+
color: $nhsuk-link-active-colour;
2621
}
2722

2823
a:focus & {
2924
background-color: transparent;
3025
border-color: transparent;
31-
color: $nhsuk-focus-text-color;
26+
color: $nhsuk-focus-text-colour;
3227
}
3328

3429
// Ensure highlight is announced by screen readers

0 commit comments

Comments
 (0)