@qld-gov-au/qgds-bootstrap5 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/assets/css/qld.bootstrap.css +1 -1
  2. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  3. package/dist/assets/js/qld.bootstrap.min.js +20 -14
  4. package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
  5. package/dist/components/bs5/header/header.hbs +18 -72
  6. package/dist/sample-data/header/header.data.json +33 -169
  7. package/dist/sample-data/tag/tag.data.json +19 -15
  8. package/package.json +18 -17
  9. package/src/components/bs5/breadcrumbs/breadcrumb.functions.js +56 -0
  10. package/src/components/bs5/breadcrumbs/breadcrumbs.scss +20 -0
  11. package/src/components/bs5/card/card.scss +13 -2
  12. package/src/components/bs5/correctincorrect/correctincorrect.scss +45 -51
  13. package/src/components/bs5/correctincorrect/correctincorrect.stories.js +29 -28
  14. package/src/components/bs5/header/_colours.scss +93 -122
  15. package/src/components/bs5/header/header.data.json +33 -169
  16. package/src/components/bs5/header/header.functions.js +141 -78
  17. package/src/components/bs5/header/header.hbs +18 -72
  18. package/src/components/bs5/header/header.scss +32 -9
  19. package/src/components/bs5/navbar/navbar.functions.js +26 -7
  20. package/src/components/bs5/spinner/spinner.scss +1 -3
  21. package/src/components/bs5/tag/tag.data.json +19 -15
  22. package/src/components/bs5/tag/tag.scss +129 -39
  23. package/src/components/bs5/tag/tag.stories.js +12 -12
  24. package/src/main.js +13 -15
  25. package/src/main.scss +1 -0
  26. package/src/scss/qld-variables.scss +6 -15
package/src/components/bs5/breadcrumbs/breadcrumbs.scss CHANGED
@@ -32,6 +32,12 @@ $breadcrumb-divider-dark-flipped: url("data:image/svg+xml,<svg xmlns='http://www
32
32
 
33
33
  .breadcrumb {
34
34
  font-size: 0.875rem;
35
+
36
+ &.expanded {
37
+ .breadcrumb-toggle {
38
+ display: none;
39
+ }
40
+ }
35
41
  }
36
42
 
37
43
  .breadcrumb-item {
@@ -54,6 +60,20 @@ $breadcrumb-divider-dark-flipped: url("data:image/svg+xml,<svg xmlns='http://www
54
60
  width: 1rem;
55
61
  }
56
62
  }
63
+
64
+ &.shortened {
65
+ height: 0;
66
+ overflow: hidden;
67
+ max-width: 0;
68
+ transition: max-width 0s;
69
+ padding: 0;
70
+ }
71
+
72
+ .breadcrumb-toggle {
73
+ border: 0;
74
+ padding: 0;
75
+ vertical-align: inherit;
76
+ }
57
77
  }
58
78
 
59
79
  @include media-breakpoint-up(md) {
package/src/components/bs5/card/card.scss CHANGED
@@ -226,11 +226,12 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
226
226
 
227
227
  a {
228
228
  color: var(--#{$prefix}card-link-color);
229
- text-decoration: none;
229
+ font-weight: 600;
230
+ text-underline-offset: 3px;
230
231
 
231
232
  &:hover, &:focus {
232
233
  text-decoration: underline;
233
- text-underline-offset: 3px;
234
+ text-decoration-thickness: 3px;
234
235
  }
235
236
  }
236
237
  }
@@ -429,6 +430,16 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
429
430
  }
430
431
  }
431
432
 
433
+ .card-feature {
434
+ .card-title {
435
+ a {
436
+ &:hover, &:focus {
437
+ text-decoration-thickness: 4px;
438
+ }
439
+ }
440
+ }
441
+ }
442
+
432
443
  @include media-breakpoint-up(md) {
433
444
  .card {
434
445
  &-feature {
package/src/components/bs5/correctincorrect/correctincorrect.scss CHANGED
@@ -68,55 +68,45 @@
68
68
 
69
69
  .qg-correct, .qg-incorrect {
70
70
  position: relative;
71
-
72
- margin: 0.4em 0;
73
- padding: 10px 10px 10px 45px !important;
74
- //border-style: solid;
75
- border-width: 1px;
76
- border-radius: 5px;
77
- border-left-width: 7px;
78
-
79
- vertical-align: top;
80
-
81
- > :first-child { // only one first child
82
- margin-top: -0.5em;
83
- margin-bottom: 1em;
84
- padding-top: 0.7em;
85
-
86
- &:before {
87
- position: absolute;
88
-
89
- width: 20px;
90
- height: 20px;
91
- text-align: center;
92
- }
93
- }
94
- > :not(first-child) {
95
- flex: none;
96
- }
97
- > * {
98
- overflow-wrap: break-word;
99
- word-wrap: break-word;
100
- }
101
-
102
- border-width: 1px;
103
- border-left-width: 7px;
104
-
71
+ margin: 0.4rem 0;
72
+ padding: 1rem 1rem 1rem 3rem !important;
73
+ border-radius: 4px;
105
74
  vertical-align: top;
75
+
76
+ > :only-child {
77
+ margin-bottom: 0;
78
+ }
106
79
 
107
- // table & {
80
+ > :first-child {
108
81
  &:before {
109
- position: absolute;
110
- top: 0.7em;
111
- left: 1em;
82
+ position: absolute;
83
+ width: 20px;
84
+ height: 20px;
85
+ text-align: center;
86
+ }
87
+ }
88
+
89
+ > :last-child {
90
+ margin-bottom: 0;
91
+ }
112
92
 
93
+ > :not(first-child) {
94
+ flex: none;
95
+ }
96
+
97
+ > * {
98
+ overflow-wrap: break-word;
99
+ word-wrap: break-word;
100
+ }
101
+
102
+ &:before {
103
+ position: absolute;
104
+ top: 1.2rem;
105
+ left: 1rem;
113
106
  width: 20px;
114
107
  height: 20px;
115
108
  text-align: center;
116
- }
117
- // }
118
-
119
-
109
+ }
120
110
 
121
111
  }
122
112
 
@@ -150,40 +140,44 @@
150
140
  }
151
141
 
152
142
  span.qg-correct, span.qg-incorrect {
153
- display: inline-block;
154
- max-width: 48%;
143
+ display: block;
155
144
  }
156
145
 
157
146
  .table > tbody > tr, table {
158
147
  td.qg-correct {
159
148
  @extend .qg-correct;
149
+ padding: 0.75rem 0.75rem 0.75rem 3rem !important;
150
+ &:before {
151
+ top: 0.9rem;
152
+ }
160
153
  }
161
154
  td.qg-incorrect {
162
155
  @extend .qg-incorrect;
163
- }
164
- td.qg-correct, td.qg-incorrect {
165
- border-left-width: 3px;
156
+ padding: 0.75rem 0.75rem 0.75rem 3rem !important;
157
+ &:before {
158
+ top: 0.9rem;
159
+ }
166
160
  }
167
161
  }
168
162
 
169
163
  .table.qg-correct-incorrect > tbody > tr, table.qg-correct-incorrect {
170
164
  td:nth-child(odd) {
171
165
  @extend .qg-correct;
172
- border-left-width: 3px;
166
+ //border-left-width: 3px;
173
167
  }
174
168
  td:nth-child(even) {
175
169
  @extend .qg-incorrect;
176
- border-left-width: 3px;
170
+ //border-left-width: 3px;
177
171
  }
178
172
  }
179
173
 
180
174
  .table.qg-incorrect-correct > tbody > tr, table.qg-incorrect-correct {
181
175
  td:nth-child(even) {
182
176
  @extend .qg-correct;
183
- border-left-width: 3px;
177
+ //border-left-width: 3px;
184
178
  }
185
179
  td:nth-child(odd) {
186
180
  @extend .qg-incorrect;
187
- border-left-width: 3px;
181
+ //border-left-width: 3px;
188
182
  }
189
183
  }
package/src/components/bs5/correctincorrect/correctincorrect.stories.js CHANGED
@@ -16,12 +16,13 @@ export default {
16
16
 
17
17
  export const ShortForm = {
18
18
  render: () => {
19
- return `<span class="qg-correct">
20
- Does not currently exist <a href='#'>www.qld.gov.au/CycloneXena</a>
21
- </span>
22
- <span class="qg-incorrect">
23
- <p>Is an already existing page <a href='#'>www.qld.gov.au/recreation</a></p>
24
- </span>`
19
+ return `
20
+ <span class="qg-correct">
21
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
22
+ </span>
23
+ <span class="qg-incorrect">
24
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
25
+ </span>`
25
26
  },
26
27
  }
27
28
 
@@ -29,14 +30,16 @@ export const LongForm = {
29
30
  render: () => {
30
31
  return `
31
32
  <div class="qg-correct">
32
- <p><a href='#'>www.qld.gov.au/e10ok</a> contains only letters and numbers</p>
33
- <p><a href='#'>www.qld.gov.au/CrossRiverRail</a> uses camel case to improve readability (Note: The actual link is not case sensitive and there may be instances where the URL is displayed in lowercase.)</p> <p><a href='#'>www.qld.gov.au/starting-a-cafe</a> is clear as the letter 'a' in the middle may be overlooked or confused as a single word</p>
33
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
34
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. </p>
35
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. </p>
36
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p>
34
37
  </div>
35
38
  <div class="qg-incorrect">
36
- <p><a href='#'>www.qld.gov.au/$200rebate</a> contains a dollar sign</p>
37
- <p><a href='#'>www.qld.gov.au/local parks</a> contains a space</p>
38
- <p><a href='#'>www.qld.gov.au/under_scores</a> contains an underscore</p>
39
- <p><a href='#'>www.qld.gov.au/water-ways-and-the-environment</a> excessively uses hyphens, which may make the URL less memorable</p>
39
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
40
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. </p>
41
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. </p>
42
+ <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p>
40
43
  </div>`
41
44
  },
42
45
  }
@@ -46,14 +49,13 @@ export const TableByColumnsForCorrectAndIncorrect = {
46
49
  args: {
47
50
  "customClass": "",
48
51
  "variantClass": "qg-correct-incorrect",
49
- "headers": ["Header", "Header"],
52
+ "headers": ["This", "Not this"],
50
53
  "rows": [
51
- { "cells": ["Cell", "Cell"] },
52
- { "cells": ["Cell", "Cell"] },
53
- { "cells": ["Cell", "Cell"] },
54
- { "cells": ["Cell", "Cell"] },
55
- { "cells": ["Cell", "Cell"] },
56
- { "cells": ["Cell", "Cell"] },
54
+ { "cells": ["Cell", "Sell"] },
55
+ { "cells": ["Lorem ipsum dolor", "Lorem ipsum jolor"] },
56
+ { "cells": ["Lorem ipsum dolor sit", "Lorem ipsum dolor cit"] },
57
+ { "cells": ["Lorem ipsum dolor sit amet", "Lorem ipsum dolor sit amat"] },
58
+ { "cells": ["Lorem ipsum dolor sit amet consectetur", "Lorem ipsum dolor sit amet nonsectetur"] },
57
59
  ],
58
60
  }
59
61
  ,
@@ -65,14 +67,13 @@ export const TableByColumnsForIncorrectAndCorrect = {
65
67
  args: {
66
68
  "customClass": "",
67
69
  "variantClass": "qg-incorrect-correct",
68
- "headers": ["Header", "Header"],
70
+ "headers": ["Not this", "This"],
69
71
  "rows": [
70
- { "cells": ["Cell", "Cell"] },
71
- { "cells": ["Cell", "Cell"] },
72
- { "cells": ["Cell", "Cell"] },
73
- { "cells": ["Cell", "Cell"] },
74
- { "cells": ["Cell", "Cell"] },
75
- { "cells": ["Cell", "Cell"] },
72
+ { "cells": ["Sell","Cell"] },
73
+ { "cells": ["Lorem ipsum jolor", "Lorem ipsum dolor"] },
74
+ { "cells": ["Lorem ipsum dolor cit", "Lorem ipsum dolor sit"] },
75
+ { "cells": ["Lorem ipsum dolor sit amat", "Lorem ipsum dolor sit amet"] },
76
+ { "cells": ["Lorem ipsum dolor sit amet nonsectetur", "Lorem ipsum dolor sit amet consectetur"] },
76
77
  ],
77
78
  }
78
79
  ,
@@ -103,10 +104,10 @@ export const TableByCell = {
103
104
  </tr>
104
105
  <tr class="">
105
106
  <td>Cell</td>
106
- <td class="qg-incorrect">Cell</td>
107
+ <td class="qg-correct">Cell</td>
107
108
  </tr>
108
109
  <tr class="">
109
- <td class="qg-correct">Cell</td>
110
+ <td class="qg-incorrect">Cell</td>
110
111
  <td>Cell</td>
111
112
  </tr>
112
113
  </tbody>
package/src/components/bs5/header/_colours.scss CHANGED
@@ -1,42 +1,7 @@
1
1
  .qld__header {
2
2
  // ------------------------------------------------------------------------------------------------------------------
3
- // 1. Palette colours
3
+ // 1. Common vars
4
4
  // ------------------------------------------------------------------------------------------------------------------
5
- // Default light palette
6
- --#{$prefix}header-color-crest-fill: #1D1D1D;
7
- --#{$prefix}header-color-light-siteTitle: #022A50;
8
- --#{$prefix}header-color-light-designAccent: #6BBE27;
9
- --#{$prefix}header-color-light-text: #414141;
10
- --#{$prefix}header-color-light-text__muted: #636363;
11
- --#{$prefix}header-color-light-link: #09549F;
12
- --#{$prefix}header-color-light-focus: #0085B3;
13
- --#{$prefix}header-color-light-border: #EBEBEB;
14
- --#{$prefix}header-color-light-background: #FFFFFF;
15
- --#{$prefix}header-color-light-background__shade: #F5F5F5;
16
- --#{$prefix}header-color-light-underline: #3F7AB4;
17
- --#{$prefix}header-color-light-hover-underline: #09549F;
18
- --#{$prefix}header-color-light-alt-button: #008733;
19
- --#{$prefix}header-color-light-alt-button__hover: #00702B;
20
- --#{$prefix}header-color-light-button__hover: #003E7D;
21
-
22
- // Dark palette
23
- --#{$prefix}header-color-dark-crest-fill: #FFFFFF;
24
- --#{$prefix}header-color-dark-siteTitle: #FFFFFF;
25
- --#{$prefix}header-color-dark-designAccent: #6BBE27;
26
- --#{$prefix}header-color-dark-heading: #FFFFFF;
27
- --#{$prefix}header-color-dark-text: #FFFFFF;
28
- --#{$prefix}header-color-dark-text__muted: #DEEBF9;
29
- --#{$prefix}header-color-dark-link: #FFFFFF;
30
- --#{$prefix}header-color-dark-focus: #01B0E5;
31
- --#{$prefix}header-color-dark-border: #1D9AC6;
32
- --#{$prefix}header-color-dark-background: #09549F;
33
- --#{$prefix}header-color-dark-background__shade: #04498F;
34
- --#{$prefix}header-color-dark-underline: #B5CCE2;
35
- --#{$prefix}header-color-dark-hover-underline: #FFFFFF;
36
- --#{$prefix}header-color-dark-alt-button: #EFD700;
37
- --#{$prefix}header-color-dark-alt-button__hover: #FFE817;
38
- --#{$prefix}header-color-dark-alt-background: #05325F;
39
- --#{$prefix}header-color-dark-alt-background__shade: #052C53;
40
5
 
41
6
  // Shared thickness, offset etc.
42
7
  --#{$prefix}header-underline__thickness-thin: 0.5px;
@@ -44,76 +9,76 @@
44
9
  --#{$prefix}header-underline__offset: 0.3em;
45
10
 
46
11
  // ------------------------------------------------------------------------------------------------------------------
47
- // 2. Second hand variables (each variant, default, light, dark, dark-alt)
12
+ // 2. Second hand variables (each variant, default, light, dark, dark-alt) using QGDS-Tokens (npm)
48
13
  // ------------------------------------------------------------------------------------------------------------------
49
- // Search
50
- --#{$prefix}header-site-search-bg: var(--#{$prefix}header-color-light-background__shade);
51
- --#{$prefix}header-site-search-btn-color: var(--#{$prefix}header-color-dark-text);
52
- --#{$prefix}header-site-search-btn-bg: var(--#{$prefix}header-color-light-link);
53
- --#{$prefix}header-site-search-border-color: var(--#{$prefix}header-color-light-button__hover);
54
- --#{$prefix}header-site-search-icon-color:var(--#{$prefix}header-color-light-text__muted);
55
- --#{$prefix}header-site-search-text-color:var(--#{$prefix}header-color-light-text);
56
-
57
- // Search dark
58
- --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}header-color-dark-background__shade);
59
- --#{$prefix}header-dark-site-search-btn-color: var(--#{$prefix}header-color-light-text);
60
- --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}header-color-light-designAccent);
61
- --#{$prefix}header-dark-site-search-border-color: var(--#{$prefix}header-color-dark-border);
62
- --#{$prefix}header-dark-site-search-icon-color:var(--#{$prefix}header-color-dark-text__muted);
63
- --#{$prefix}header-dark-site-search-text-color:var(--#{$prefix}header-color-dark-text);
14
+ // Search inputs
15
+ --#{$prefix}header-site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
16
+ --#{$prefix}header-site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
17
+ --#{$prefix}header-site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
18
+ --#{$prefix}header-site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
19
+ --#{$prefix}header-site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
20
+ --#{$prefix}header-site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
21
+
22
+ // Search input dark
23
+ --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
24
+ --#{$prefix}header-dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
25
+ --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
26
+ --#{$prefix}header-dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
27
+ --#{$prefix}header-dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
28
+ --#{$prefix}header-dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
64
29
 
65
30
  // Header
66
- --#{$prefix}header_color: var(--#{$prefix}header-color-light-text);
67
- --#{$prefix}header_bg: var(--#{$prefix}header-color-light-background);
31
+ --#{$prefix}header_color: var(--#{$prefix}color-default-color-light-text-default);
32
+ --#{$prefix}header_bg: var(--#{$prefix}color-default-color-light-background-default);
68
33
 
69
34
  // Skip links
70
- --#{$prefix}header_skip-link_color: var(--#{$prefix}header-color-dark-link);
71
- --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}header-color-dark-focus);
72
- --#{$prefix}header_skip-link_focus_text_color: var(--#{$prefix}header-color-dark-link);
73
- --#{$prefix}header_skip-link_focus_bg_color: var(--#{$prefix}header-color-dark-background__shade);
35
+ --#{$prefix}header_skip-link_color: var(--#{$prefix}color-default-color-dark-link-default);
36
+ --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}color-default-color-dark-focus-default);
37
+ --#{$prefix}header_skip-link_focus_text_color: var(--#{$prefix}color-default-color-dark-link-default);
38
+ --#{$prefix}header_skip-link_focus_bg_color: var(--#{$prefix}color-default-color-dark-background-default-shade);
74
39
 
75
40
  // Pre-header bar
76
- --#{$prefix}header__pre-header_text_color: var(--#{$prefix}header-color-dark-text);
77
- --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-background);
41
+ --#{$prefix}header__pre-header_text_color: var(--#{$prefix}color-default-color-dark-text-default);
42
+ --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}color-default-color-dark-background-default);
78
43
  --#{$prefix}header__pre-header_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
79
- --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}header-color-dark-text);
80
- --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}header-color-dark-hover-underline);
81
- --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}header-color-dark-underline);
44
+ --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}color-default-color-dark-text-default);
45
+ --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
46
+ --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}color-default-color-dark-underline-default);
82
47
  --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thin);
83
48
  --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(--#{$prefix}header-underline__offset);
84
- --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}header-color-dark-hover-underline);
49
+ --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
85
50
  --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thick);
86
- --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}header-color-dark-link);
51
+ --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}color-default-color-dark-link-default);
87
52
 
88
53
  // CTA Wrapper
89
- --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}header-color-dark-link);
90
- --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}header-color-dark-alt-button);
91
- --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}header-color-dark-alt-button__hover);
92
- --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}header-color-dark-background);
54
+ --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}color-default-color-dark-link-default);
55
+ --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}color-default-color-dark-action-secondary);
56
+ --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
57
+ --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}color-default-color-dark-background-default);
93
58
 
94
- --#{$prefix}header__CTA_text_color: var(--#{$prefix}header-color-dark-link);
95
- --#{$prefix}header__CTA_border_color: var(--#{$prefix}header-color-dark-border);
59
+ --#{$prefix}header__CTA_text_color: var(--#{$prefix}color-default-color-dark-link-default);
60
+ --#{$prefix}header__CTA_border_color: var(--#{$prefix}color-default-color-dark-border-default);
96
61
 
97
62
  // Toggle main navigation
98
- --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}header-color-dark-link);
99
- --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}header-color-dark-border);
100
- --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}header-color-dark-background__shade);
101
- --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}header-color-dark-alt-button__hover);
102
- --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}header-color-dark-focus);
103
- --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}header-color-dark-alt-button);
63
+ --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}color-default-color-dark-link-default);
64
+ --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}color-default-color-dark-border-default);
65
+ --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
66
+ --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
67
+ --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}color-default-color-dark-focus-default);
68
+ --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}color-default-color-dark-action-secondary);
104
69
 
105
70
  // COA and title
106
- --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}header-color-crest-fill);
107
- --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}header-color-light-designAccent);
108
- --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}header-color-light-siteTitle);
109
- --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}header-color-light-link);
110
- --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}header-color-light-link);
111
- --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}header-color-light-link);
71
+ --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}color-default-color-light-crest-fill);
72
+ --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
73
+ --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}color-default-color-light-site-title);
74
+ --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}color-default-color-light-link-default);
75
+ --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}color-default-color-light-link-default);
76
+ --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}color-default-color-light-link-default);
112
77
  --#{$prefix}header__brand__anchor__hover_brand-image__filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)), drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08));
113
78
 
114
79
  // Sitename heading
115
- --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}header-color-light-siteTitle);
116
- --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}header-color-light-text__muted);
80
+ --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}color-default-color-light-site-title);
81
+ --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}color-default-color-light-text-lighter);
117
82
 
118
83
  // Search
119
84
  --site-search-bg: var(--#{$prefix}header-site-search-bg);
@@ -122,13 +87,16 @@
122
87
  --site-search-border-color: var(--#{$prefix}header-site-search-border-color);
123
88
  --site-search-icon-color: var(--#{$prefix}header-site-search-icon-color);
124
89
  --site-search-input-color: var(--#{$prefix}header-site-search-text-color);
125
- --site-search-input-focus-color: var(--#{$prefix}header-color-light-focus);
90
+ --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
126
91
  --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
127
92
 
128
93
  // Suggestions colours
129
- --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}header-color-light-background);
130
- --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}header-color-light-background__shade);
131
- --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}header-color-light-designAccent);
94
+ --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
95
+ --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
96
+ --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
97
+ --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
98
+ --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
99
+ --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
132
100
 
133
101
  // ------------------------------------------------------------------------------------------------------------------
134
102
  // 3. Dark/dark-alt modes
@@ -136,49 +104,49 @@
136
104
  .dark &,
137
105
  .dark-alt & {
138
106
  // Root (dark/dark-alt)
139
- --#{$prefix}header_color: var(--#{$prefix}header-color-dark-text);
107
+ --#{$prefix}header_color: var(--#{$prefix}color-default-color-dark-text-default);
140
108
 
141
109
  // Pre-header bar (dark)
142
- --#{$prefix}header__pre-header_text_color: var(--#{$prefix}header-color-dark-text);
110
+ --#{$prefix}header__pre-header_text_color: var(--#{$prefix}color-default-color-dark-text-default);
143
111
  --#{$prefix}header__pre-header_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
144
- --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}header-color-dark-link);
112
+ --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}color-default-color-dark-link-default);
145
113
 
146
- --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}header-color-dark-text);
147
- --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}header-color-dark-hover-underline);
148
- --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}header-color-dark-underline);
114
+ --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}color-default-color-dark-text-default);
115
+ --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
116
+ --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}color-default-color-dark-underline-default);
149
117
  --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thin);
150
118
  --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(--#{$prefix}header-underline__offset);
151
- --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}header-color-dark-hover-underline);
119
+ --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
152
120
  --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thick);
153
121
 
154
122
  // Pre-header CTA elements (dark/dark-alt)
155
- --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}header-color-dark-link);
156
- --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}header-color-dark-alt-button);
157
- --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}header-color-dark-alt-button__hover);
123
+ --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}color-default-color-dark-link-default);
124
+ --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}color-default-color-dark-action-secondary);
125
+ --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
158
126
 
159
127
  //Skip links
160
- --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}header-color-dark-focus);
128
+ --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}color-default-color-dark-focus-default);
161
129
 
162
130
  // Toggle navigation (dark/dark-alt)
163
- --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}header-color-dark-link);
164
- --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}header-color-dark-border);
165
- --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}header-color-dark-background__shade);
166
- --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}header-color-dark-alt-button__hover);
167
- --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}header-color-dark-focus);
168
- --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}header-color-dark-alt-button);
131
+ --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}color-default-color-dark-link-default);
132
+ --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}color-default-color-dark-border-default);
133
+ --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
134
+ --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
135
+ --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}color-default-color-dark-focus-default);
136
+ --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}color-default-color-dark-action-secondary);
169
137
 
170
- --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}header-color-dark-link);
171
- --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}header-color-dark-link);
172
- --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}header-color-dark-link);
138
+ --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}color-default-color-dark-link-default);
139
+ --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}color-default-color-dark-link-default);
140
+ --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}color-default-color-dark-link-default);
173
141
  --#{$prefix}header__brand__anchor__hover_brand-image__filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)), drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08));
174
- --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}header-color-dark-designAccent);
175
- --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}header-color-dark-siteTitle);
142
+ --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
143
+ --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}color-default-color-dark-site-title);
176
144
 
177
- --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}header-color-dark-siteTitle);
178
- --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}header-color-dark-text__muted);
145
+ --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}color-default-color-dark-site-title);
146
+ --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}color-default-color-dark-text-lighter);
179
147
 
180
148
  // COA
181
- --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}header-color-dark-crest-fill);
149
+ --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}color-default-color-dark-crest-fill);
182
150
 
183
151
  // Search (dark/dark/alt)
184
152
  --site-search-bg: var(--#{$prefix}header-dark-site-search-bg);
@@ -190,19 +158,22 @@
190
158
  --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
191
159
 
192
160
  // Suggestions colours
193
- --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}header-color-dark-alt-background);
194
- --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}header-color-dark-background__shade);
195
- --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}header-color-dark-designAccent);
161
+ --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
162
+ --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
163
+ --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
164
+ --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
165
+ --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
166
+ --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
196
167
  }
197
168
 
198
169
  .dark-alt & {
199
- --#{$prefix}header_bg: var(--#{$prefix}header-color-dark-alt-background);
200
- --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-background);
170
+ --#{$prefix}header_bg: var(--#{$prefix}color-default-color-dark-background-alt);
171
+ --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}color-default-color-dark-background-default);
201
172
  }
202
173
 
203
174
  .dark & {
204
- --#{$prefix}header_bg: var(--#{$prefix}header-color-dark-background);
205
- --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-alt-background);
206
- --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}header-color-dark-alt-background);
175
+ --#{$prefix}header_bg: var(--#{$prefix}color-default-color-dark-background-default);
176
+ --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}color-default-color-dark-background-alt);
177
+ --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}color-default-color-dark-background-alt);
207
178
  }
208
179
  }