@qld-gov-au/qgds-bootstrap5 2.0.5 → 2.0.6

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 (30) hide show
  1. package/.storybook/dynamicThemeDecorator.js +28 -24
  2. package/.storybook/main.js +4 -2
  3. package/.storybook/preview.js +1 -1
  4. package/dist/assets/components/bs5/head/head.hbs +1 -1
  5. package/dist/assets/css/qld.bootstrap.css +1 -1
  6. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  7. package/dist/assets/css/qld.bootstrap.legacy.css +2 -0
  8. package/dist/assets/css/qld.bootstrap.legacy.css.map +7 -0
  9. package/dist/assets/js/handlebars.init.min.js +1 -1
  10. package/dist/assets/node/handlebars.init.min.js +1 -1
  11. package/dist/components/bs5/head/head.hbs +1 -1
  12. package/dist/package.json +1 -1
  13. package/esbuild.js +6 -1
  14. package/package.json +1 -1
  15. package/src/components/bs5/accordion/accordion.scss +3 -3
  16. package/src/components/bs5/button/button.scss +25 -45
  17. package/src/components/bs5/callout/callout.stories.js +15 -21
  18. package/src/components/bs5/card/card.scss +5 -5
  19. package/src/components/bs5/footer/footer.scss +3 -7
  20. package/src/components/bs5/pagination/pagination.scss +290 -274
  21. package/src/components/bs5/pagination/pagination.stories.js +18 -33
  22. package/src/components/bs5/textbox/textInput.scss +55 -39
  23. package/src/components/bs5/video/video.scss +41 -27
  24. package/src/css/main.legacy.scss +19 -0
  25. package/src/css/main.scss +17 -0
  26. package/src/css/qld-tokens-legacy.scss +94 -0
  27. package/src/css/qld-tokens.scss +92 -77
  28. package/src/css/qld-variables.scss +37 -30
  29. package/src/css/main.masterbrand.scss +0 -137
  30. package/src/css/themes/masterbrand.scss +0 -109
package/src/css/qld-tokens.scss CHANGED
@@ -1,95 +1,110 @@
1
+ /* Master brand SASS variables that have changed to align with Brand Book release 2025 */
1
2
 
2
- // Do not edit directly
3
- // Generated on Thu, 13 Jun 2024 02:52:12 GMT
3
+ /* Dark palettes */
4
+ $color-default-color-dark-accent-design-accent: #84d3ff !default;
5
+ $color-default-color-dark-action-primary-hover: #a6f7ff !default;
6
+ $color-default-color-dark-action-primary: #84d3ff !default;
7
+ $color-default-color-dark-action-secondary-hover: #a6f7ff !default;
8
+ $color-default-color-dark-action-secondary: #84d3ff !default;
9
+ $color-default-color-dark-background-alt-shade: #000764 !default;
10
+ $color-default-color-dark-background-alt: #001d74 !default;
11
+ $color-default-color-dark-background-default-shade: #003e96 !default;
12
+ $color-default-color-dark-background-default: #005eb8 !default;
13
+ $color-default-color-dark-border-alt: #63b1ff !default;
14
+ $color-default-color-dark-border-default: #418fed !default;
15
+ $color-default-color-dark-crest-fill: #ffffff !default;
16
+ $color-default-color-dark-focus-default: #c6ffff !default;
17
+ $color-default-color-dark-link-default: #ffffff !default;
18
+ $color-default-color-dark-link-on-action: #001c37 !default;
19
+ $color-default-color-dark-link-visited: #e1bbee !default;
20
+ $color-default-color-dark-site-title: #ffffff !default;
21
+ $color-default-color-dark-text-default: #ffffff !default;
22
+ $color-default-color-dark-text-heading: #ffffff !default;
23
+ $color-default-color-dark-text-lighter: #deebf9 !default;
24
+ $color-default-color-dark-underline-default-hover: #ffffff !default;
25
+ $color-default-color-dark-underline-default: #b5cce2 !default;
26
+ $color-default-color-dark-underline-visited-hover: #e1bbee !default;
27
+ $color-default-color-dark-underline-visited: #e1c2ff !default;
28
+
29
+ /* Light palettes */
30
+ $color-default-color-light-accent-design-accent: #84d3ff !default;
31
+ $color-default-color-light-action-primary-hover: #003e96 !default;
32
+ $color-default-color-light-action-primary: #005eb8 !default;
33
+ $color-default-color-light-action-secondary-hover: #004ea7 !default;
34
+ $color-default-color-light-action-secondary: #307edb !default;
35
+ $color-default-color-light-background-alt-shade: #d6dce0 !default;
36
+ $color-default-color-light-background-alt: #e3e7ea !default;
37
+ $color-default-color-light-background-default-shade: #f5f5f5 !default;
38
+ $color-default-color-light-background-default: #ffffff !default;
39
+ $color-default-color-light-background-light-shade: #ceedff !default;
40
+ $color-default-color-light-background-light: #e6f6ff !default;
41
+ $color-default-color-light-border-alt: #848484 !default;
42
+ $color-default-color-light-border-default: #ebebeb !default;
43
+ $color-default-color-light-border-light: #bedfff !default;
44
+ $color-default-color-light-crest-fill: #005eb8 !default;
45
+ $color-default-color-light-focus-default: #002e85 !default;
46
+ $color-default-color-light-link-default: #005eb8 !default;
47
+ $color-default-color-light-link-on-action: #ffffff !default;
48
+ $color-default-color-light-link-visited: #551a8b !default;
49
+ $color-default-color-light-site-title: #005eb8 !default;
50
+ $color-default-color-light-text-default: #353535 !default;
51
+ $color-default-color-light-text-heading: #000053 !default;
52
+ $color-default-color-light-text-lighter: #636363 !default;
53
+ $color-default-color-light-underline-default-hover: #005eb8 !default;
54
+ $color-default-color-light-underline-default: #3f7ab4 !default;
55
+ $color-default-color-light-underline-visited-hover: #551a8b !default;
56
+ $color-default-color-light-underline-visited: #8b63b0 !default;
4
57
 
58
+ /* V1 brand colors */
59
+ $core-default-color-brand-other-gov-maroon: #771e32 !default;
60
+ $core-default-color-brand-other-modern-maroon: #a70240 !default;
61
+ $core-default-color-brand-primary-dark-blue: #05325f !default;
62
+ $core-default-color-brand-primary-light-blue: #0085b3 !default;
63
+ $core-default-color-brand-primary-light-green: #6bbe27 !default;
64
+ $core-default-color-brand-primary-sapphire-blue: #09549f !default;
65
+ $core-default-color-brand-secondary-darkgreen: #008635 !default;
66
+ $core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
67
+
68
+ /* Code colors */
69
+ $core-default-color-code-green: #6bbe27 !default;
70
+ $core-default-color-code-light-blue: #a7e5ff !default;
71
+ $core-default-color-code-muted: #c0d7ec !default;
72
+ $core-default-color-code-violet: #c88df7 !default;
73
+
74
+ /* Neutral colors */
5
75
  $core-default-color-neutral-black: #131212 !default;
6
- $core-default-color-neutral-darkest: #222020 !default;
7
- $core-default-color-neutral-darker: #444444 !default;
8
76
  $core-default-color-neutral-dark: #78797e !default;
77
+ $core-default-color-neutral-darker: #444444 !default;
78
+ $core-default-color-neutral-darkest: #222020 !default;
9
79
  $core-default-color-neutral-light: #e0e0e0 !default;
10
80
  $core-default-color-neutral-lighter: #ebebeb !default;
11
81
  $core-default-color-neutral-lightest: #f5f5f5 !default;
12
82
  $core-default-color-neutral-white: #ffffff !default;
83
+
84
+ /* Status colors */
85
+ $core-default-color-status-caution-darker: #b38800 !default;
13
86
  $core-default-color-status-caution-default: #ffcc2c !default;
14
- $core-default-color-status-caution-darker: #B38800 !default;
15
87
  $core-default-color-status-caution-lighter: #fff2c9 !default;
16
88
  $core-default-color-status-caution-lightest: #fffaea !default;
17
- $core-default-color-status-info-default: #0085b3 !default;
18
- $core-default-color-status-info-darker: #006a8f !default;
19
- $core-default-color-status-info-lighter: #e5eef5 !default;
20
- $core-default-color-status-info-lightest: #eff4f9 !default;
21
- $core-default-color-status-error-default: #e22339 !default;
22
89
  $core-default-color-status-error-darker: #8a1220 !default;
90
+ $core-default-color-status-error-default: #e22339 !default;
23
91
  $core-default-color-status-error-lighter: #fdf0f0 !default;
24
92
  $core-default-color-status-error-lightest: #fff6f6 !default;
25
- $core-default-color-status-success-default: #339d37 !default;
93
+ $core-default-color-status-info-darker: #006a8f !default;
94
+ $core-default-color-status-info-default: #0085b3 !default;
95
+ $core-default-color-status-info-lighter: #e5eef5 !default;
96
+ $core-default-color-status-info-lightest: #eff4f9 !default;
26
97
  $core-default-color-status-success-darker: #0a690d !default;
98
+ $core-default-color-status-success-default: #339d37 !default;
27
99
  $core-default-color-status-success-lighter: #f2faf4 !default;
28
100
  $core-default-color-status-success-lightest: #f7fbf8 !default;
29
- $core-default-color-status-underline-light: #ffffffb8 !default;
30
101
  $core-default-color-status-underline-dark: #03213fb8 !default;
31
- $core-default-color-brand-primary-dark-blue: #05325f !default;
32
- $core-default-color-brand-primary-sapphire-blue: #09549f !default;
33
- $core-default-color-brand-primary-light-blue: #0085b3 !default;
34
- $core-default-color-brand-primary-light-green: #6bbe27 !default;
35
- $core-default-color-brand-secondary-darkgreen: #008635 !default;
36
- $core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
37
- $core-default-color-brand-other-modern-maroon: #a70240 !default;
38
- $core-default-color-brand-other-gov-maroon: #771e32 !default;
39
- $core-default-color-code-green: #6bbe27 !default;
40
- $core-default-color-code-light-blue: #a7e5ff !default;
41
- $core-default-color-code-violet: #c88df7 !default;
42
- $core-default-color-code-muted: #c0d7ec !default;
43
- $core-default-color-contained-layout-background: #09549F !default;
44
- $core-default-color-contained-layout-background-dark: #09549F !default;
45
- $color-default-color-light-background-default: #ffffff !default;
46
- $color-default-color-light-background-default-shade: #f5f5f5 !default;
47
- $color-default-color-light-background-light: #eff4f9 !default;
48
- $color-default-color-light-background-light-shade: #e5eef5 !default;
49
- $color-default-color-light-background-alt: #e8e8e8 !default;
50
- $color-default-color-light-background-alt-shade: #e0e0e0 !default;
51
- $color-default-color-light-border-default: #ebebeb !default;
52
- $color-default-color-light-border-light: #ccddee !default;
53
- $color-default-color-light-border-alt: #7a7a7a !default;
54
- $color-default-color-light-action-primary: #09549f !default;
55
- $color-default-color-light-action-primary-hover: #003e7d !default;
56
- $color-default-color-light-action-secondary: #008635 !default;
57
- $color-default-color-light-action-secondary-hover: #005b23 !default;
58
- $color-default-color-light-link-on-action: #ffffff !default;
59
- $color-default-color-light-link-default: #09549f !default;
60
- $color-default-color-light-link-visited: #551a8b !default;
61
- $color-default-color-light-accent-design-accent: #6BBE27 !default;
62
- $color-default-color-light-focus-default: #0085B3 !default;
63
- $color-default-color-light-underline-default: #3f7ab4 !default;
64
- $color-default-color-light-underline-default-hover: #09549F !default;
65
- $color-default-color-light-underline-visited: #8b63b0 !default;
66
- $color-default-color-light-underline-visited-hover: #551a8b !default;
67
- $color-default-color-light-text-default: #414141 !default;
68
- $color-default-color-light-text-lighter: #636363 !default;
69
- $color-default-color-light-text-heading: #04284c !default;
70
- $color-default-color-light-site-title: #022a50 !default;
71
- $color-default-color-light-crest-fill: #1D1D1D !default;
72
- $color-default-color-dark-background-default: #09549F !default;
73
- $color-default-color-dark-background-default-shade: #04498f !default;
74
- $color-default-color-dark-background-alt: #05325F !default;
75
- $color-default-color-dark-background-alt-shade: #052c53 !default;
76
- $color-default-color-dark-border-default: #1d9ac6 !default;
77
- $color-default-color-dark-border-alt: #09acfe !default;
78
- $color-default-color-dark-action-primary: #78ba00 !default;
79
- $color-default-color-dark-action-primary-hover: #add33f !default;
80
- $color-default-color-dark-action-secondary: #FFE500 !default;
81
- $color-default-color-dark-action-secondary-hover: #ffef60 !default;
82
- $color-default-color-dark-link-default: #ffffff !default;
83
- $color-default-color-dark-link-visited: #e1bbee !default;
84
- $color-default-color-dark-link-on-action: #121940 !default;
85
- $color-default-color-dark-accent-design-accent: #6BBE27 !default;
86
- $color-default-color-dark-focus-default: #01b0e5 !default;
87
- $color-default-color-dark-underline-default: #b5cce2 !default;
88
- $color-default-color-dark-underline-default-hover: #ffffff !default;
89
- $color-default-color-dark-underline-visited: #e1c2ff !default;
90
- $color-default-color-dark-underline-visited-hover: #EE11BB !default;
91
- $color-default-color-dark-text-default: #ffffff !default;
92
- $color-default-color-dark-text-lighter: #deebf9 !default;
93
- $color-default-color-dark-text-heading: #ffffff !default;
94
- $color-default-color-dark-site-title: #ffffff !default;
95
- $color-default-color-dark-crest-fill: #ffffff !default;
102
+ $core-default-color-status-underline-light: #ffffffb8 !default;
103
+
104
+ /* Other for review */
105
+ $core-default-color-contained-layout-background-dark: #09549f !default;
106
+ $core-default-color-contained-layout-background: #09549f !default;
107
+ $core-default-color-contained-layout-background-dark: #005eb8 !default;
108
+ $core-default-color-contained-layout-background: #005eb8 !default;
109
+ $core-default-color-status-underline-dark: #03213f !default;
110
+ $core-default-color-status-underline-light: #ffffff !default;
package/src/css/qld-variables.scss CHANGED
@@ -1,14 +1,7 @@
1
1
  @use "sass:meta";
2
2
  @use "mixins" as m;
3
3
 
4
- // GLOBALLY SCOPED VARIABLES
5
- // These variables are available to the full project and all components. (This file is included at the top of main.css to ensure this)
6
-
7
- // These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css,
8
-
9
- //QGDS tokens - masterbrand
10
- @use "./qld-tokens.scss";
11
- @import "./qld-tokens.scss";
4
+ // GLOBALLY SCOPED VARIABLES defined via qld-tokens.scss sass map, imported at top of main.scss
12
5
 
13
6
  //QLD Names Colours
14
7
  $qld-dark-blue: $core-default-color-brand-primary-dark-blue;
@@ -58,12 +51,20 @@ $qld-light-yellow: $core-default-color-status-caution-lightest;
58
51
  $qld-button-dark-blue: $color-default-color-light-action-primary-hover;
59
52
 
60
53
  //QGOV Brand Mapping - QLD.GOV.AU
61
- $qld-brand-primary-dark: $qld-dark-blue;
62
- $qld-brand-primary: $qld-sapphire-blue;
63
- $qld-brand-primary-light: $qld-light-blue;
64
- $qld-brand-secondary-dark: $qld-dark-green;
65
- $qld-brand-secondary: $qld-light-green;
66
- $qld-brand-accent: $qld-golden-yellow;
54
+ // $qld-brand-primary-dark: $qld-dark-blue;
55
+ // $qld-brand-primary: $qld-sapphire-blue;
56
+ // $qld-brand-primary-light: $qld-light-blue;
57
+ // $qld-brand-secondary-dark: $qld-dark-green;
58
+ // $qld-brand-secondary: $qld-light-green;
59
+ // $qld-brand-accent: $qld-golden-yellow;
60
+
61
+ // Remapped legacy brand color values to align with correct UI Kit variables
62
+ $qld-brand-primary: $color-default-color-light-action-primary;
63
+ $qld-brand-primary-light: $color-default-color-light-action-primary;
64
+ $qld-brand-primary-dark: $color-default-color-dark-action-primary;
65
+ $qld-brand-secondary: $color-default-color-light-action-secondary;
66
+ $qld-brand-secondary-dark: $color-default-color-dark-action-secondary;
67
+ $qld-brand-accent: $color-default-color-light-accent-design-accent;
67
68
 
68
69
  // Resolves @qgds-tokens V1 gap between (_variables.scss and _map.scss).
69
70
  // Nuetrals were dropped from _variables.scss, but retained in _map.scss.
@@ -81,8 +82,12 @@ $qld-system-darkest: $core-default-color-neutral-darkest;
81
82
  $qld-dark-grey: $core-default-color-neutral-darker;
82
83
  $qld-medium-grey: $core-default-color-neutral-dark;
83
84
  $qld-alt-grey: $core-default-color-neutral-light;
85
+
86
+ //Links
84
87
  $qld-light-link: $color-default-color-light-link-default;
85
88
  $qld-dark-link: $color-default-color-dark-link-default;
89
+ $qld-light-link-on-action: $color-default-color-light-link-on-action;
90
+ $qld-dark-link-on-action: $color-default-color-dark-link-on-action;
86
91
 
87
92
  //Should be core color rather than second hand reference (no match)
88
93
  $qld-soft-grey: $color-default-color-light-border-alt; //todo, replace soft-greys across the system with the below color
@@ -91,7 +96,7 @@ $qld-dark-grey-muted: $color-default-color-light-text-lighter;
91
96
  $qld-text-grey: $color-default-color-light-text-default;
92
97
  $qld-hint-text-color: $color-default-color-light-text-lighter;
93
98
  $qld-hint-text-color-muted: $color-default-color-dark-text-lighter;
94
- $qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
99
+
95
100
  $qld-text-headings: $color-default-color-light-text-heading;
96
101
  $qld-grey: $core-default-color-neutral-light;
97
102
  $qld-light-grey: $core-default-color-neutral-lighter;
@@ -122,19 +127,19 @@ $qld-color-light-background--shade: $color-default-color-light-background-light-
122
127
  $qld-color-light-alt-background: $color-default-color-light-background-alt;
123
128
  $qld-color-light-alt-background--shade: $color-default-color-light-background-alt-shade;
124
129
 
125
- $qld-color-dark-background: $core-default-color-brand-primary-sapphire-blue;
130
+ $qld-color-dark-background: $color-default-color-dark-background-default;
126
131
  $qld-color-dark-background--shade: $color-default-color-dark-background-default-shade;
127
- $qld-color-dark-alt-background: $core-default-color-brand-primary-dark-blue;
132
+ $qld-color-dark-alt-background: $color-default-color-dark-background-alt;
128
133
  $qld-color-dark-alt-background--shade: $color-default-color-dark-background-alt-shade;
129
134
 
130
- $qld-light-action-primary: $qld-sapphire-blue;
135
+ $qld-light-action-primary: $color-default-color-light-action-primary;
131
136
  $qld-light-action-primary-hover: $color-default-color-light-action-primary-hover;
132
137
  $qld-light-action-secondary: $color-default-color-light-action-secondary;
133
138
  $qld-light-action-secondary-hover: $color-default-color-light-action-secondary-hover;
134
139
 
135
140
  $qld-dark-action-primary: $color-default-color-dark-action-primary;
136
141
  $qld-dark-action-primary-hover: $color-default-color-dark-action-primary-hover;
137
- $qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
142
+ $qld-dark-action-secondary: $color-default-color-dark-action-secondary;
138
143
  $qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
139
144
  $qld-dark-action-text: $color-default-color-dark-link-on-action;
140
145
 
@@ -229,6 +234,8 @@ $project-colors: (
229
234
  //Links
230
235
  "light-link": $color-default-color-light-link-default,
231
236
  "dark-link": $color-default-color-dark-link-default,
237
+ "light-link-on-action": $color-default-color-light-link-on-action,
238
+ "dark-link-on-action": $color-default-color-dark-link-on-action,
232
239
 
233
240
  "link-visited": $qld-link-visited,
234
241
  "link-visited-dark": $qld-link-visited-dark,
@@ -280,11 +287,19 @@ $project-colors: (
280
287
  $color-default-color-dark-underline-default-hover,
281
288
  );
282
289
 
290
+ // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
291
+ :root {
292
+ @include m.generate-color-vars($qld-tokens);
293
+ @include m.generate-color-vars($project-colors);
294
+ }
295
+
296
+ // These variables replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css`
297
+
283
298
  $project-base-colors: (
284
299
  //Legacy color based variables - to review
285
- "primary": $qld-sapphire-blue,
286
- "primary-dark": $qld-brand-primary-dark,
287
- "secondary": $qld-dark-green,
300
+ "primary": $color-default-color-light-action-primary,
301
+ "primary-dark": $color-default-color-dark-action-primary,
302
+ "secondary": $color-default-color-light-action-secondary,
288
303
  "success": $qld-notify-success,
289
304
  "info": $qld-notify-information,
290
305
  "warning": $qld-notify-alert,
@@ -307,14 +322,6 @@ $project-base-colors: (
307
322
  "dark-hover": $qld-dark-hover
308
323
  );
309
324
 
310
- $qld-tokens: meta.module-variables("qld-tokens");
311
-
312
- // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
313
- :root {
314
- @include m.generate-color-vars($qld-tokens);
315
- @include m.generate-color-vars($project-colors);
316
- }
317
-
318
325
  $theme-colors: map-merge($theme-colors, $project-base-colors);
319
326
 
320
327
  // DO NOT override the variables which is predefined in bootstrap;
package/src/css/main.masterbrand.scss DELETED
@@ -1,137 +0,0 @@
1
- @import './themes/masterbrand.scss';// Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
2
-
3
- // External fonts
4
- @import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap");
5
- $font-family-sans-serif:
6
- "Noto Sans",
7
- system-ui,
8
- -apple-system,
9
- "Segoe UI",
10
- Roboto,
11
- "Helvetica Neue",
12
- "Noto Sans",
13
- "Liberation Sans",
14
- Arial,
15
- sans-serif,
16
- "Apple Color Emoji",
17
- "Segoe UI Emoji",
18
- "Segoe UI Symbol",
19
- "Noto Color Emoji" !default;
20
- $font-family-sitename: "Fira Sans";
21
-
22
- //Prefix to namespace design-system classes
23
- $prefix: "qld-";
24
- $enable-cssgrid: true;
25
- $color-mode-type: data;
26
- $enable-dark-mode: true;
27
-
28
- // 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
29
- @import "../../node_modules/bootstrap/scss/functions";
30
- @import "../../node_modules/bootstrap/scss/variables";
31
- @import "../../node_modules/bootstrap/scss/variables-dark";
32
-
33
- // 2. QLD Design System variables (Bootstrap overrides)
34
- @import "./qld-variables";
35
- @import "variables";
36
-
37
- // 3. Include remainder of bootstrap
38
- // 3.1 Required
39
- @import "../../node_modules/bootstrap/scss/maps";
40
- @import "../../node_modules/bootstrap/scss/mixins";
41
- @import "../../node_modules/bootstrap/scss/utilities";
42
-
43
- // 3.2 QLD Design System utilities (is dependent on maps, mixins and utilities being available)
44
- @import "./qld-utilities";
45
-
46
- // 3.2 Recommended, Resets and shared
47
- @import "../../node_modules/bootstrap/scss/root";
48
- @import "../../node_modules/bootstrap/scss/reboot";
49
- @import "../../node_modules/bootstrap/scss/type";
50
- @import "../../node_modules/bootstrap/scss/containers";
51
- @import "../../node_modules/bootstrap/scss/grid";
52
- @import "../../node_modules/bootstrap/scss/helpers";
53
-
54
- // 3.3 Optional components
55
- @import "../../node_modules/bootstrap/scss/accordion";
56
- @import "../../node_modules/bootstrap/scss/alert";
57
- @import "../../node_modules/bootstrap/scss/badge";
58
- @import "../../node_modules/bootstrap/scss/buttons";
59
- @import "../../node_modules/bootstrap/scss/button-group";
60
- @import "../../node_modules/bootstrap/scss/breadcrumb";
61
- @import "../../node_modules/bootstrap/scss/card";
62
- @import "../../node_modules/bootstrap/scss/carousel";
63
- @import "../../node_modules/bootstrap/scss/close";
64
- @import "../../node_modules/bootstrap/scss/dropdown";
65
- @import "../../node_modules/bootstrap/scss/forms";
66
- @import "../../node_modules/bootstrap/scss/list-group";
67
- @import "../../node_modules/bootstrap/scss/images";
68
- @import "../../node_modules/bootstrap/scss/modal";
69
- @import "../../node_modules/bootstrap/scss/progress";
70
- @import "../../node_modules/bootstrap/scss/transitions";
71
- @import "../../node_modules/bootstrap/scss/nav";
72
- @import "../../node_modules/bootstrap/scss/navbar";
73
- @import "../../node_modules/bootstrap/scss/offcanvas";
74
- @import "../../node_modules/bootstrap/scss/pagination";
75
- @import "../../node_modules/bootstrap/scss/placeholders";
76
- @import "../../node_modules/bootstrap/scss/popover";
77
- @import "../../node_modules/bootstrap/scss/spinners";
78
- @import "../../node_modules/bootstrap/scss/tables";
79
- @import "../../node_modules/bootstrap/scss/toasts";
80
- @import "../../node_modules/bootstrap/scss/tooltip";
81
-
82
- // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
83
- @import "../../node_modules/bootstrap/scss/utilities/api";
84
-
85
- // Themes
86
- @import "qld-theme";
87
-
88
- //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
89
- @import "./qld-type";
90
-
91
- // Common Layout Blocks
92
- @import "../components/common/layout/content";
93
- @import "../components/common/layout/container";
94
-
95
- // 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency.
96
- @import "../components/bs5/accordion/accordion";
97
- @import "../components/bs5/banner/banner";
98
- @import "../components/bs5/blockquote/blockquote";
99
- @import "../components/bs5/breadcrumbs/breadcrumbs";
100
- @import "../components/bs5/button/button";
101
- @import "../components/bs5/callout/callout";
102
- @import "../components/bs5/card/card";
103
- @import "../components/bs5/callToAction/callToAction";
104
- @import "../components/bs5/correctincorrect/correctincorrect";
105
- @import "../components/bs5/dateinput/dateinput";
106
- @import "../components/bs5/directionLinks/directionLinks";
107
- @import "../components/bs5/formcheck/formcheck";
108
- @import "../components/bs5/footer/footer";
109
- @import "../components/bs5/globalAlert/globalAlert";
110
- @import "../components/bs5/link/link";
111
- @import "../components/bs5/header/header";
112
- @import "../components/bs5/icons/icons";
113
- @import "../components/bs5/inpageAlert/inpageAlert";
114
- @import "../components/bs5/image/image";
115
- @import "../components/bs5/inpagenav/inpagenav";
116
- @import "../components/bs5/linkColumns/linkColumns";
117
- @import "../components/bs5/modal/modal";
118
- @import "../components/bs5/navbar/navbar";
119
- @import "../components/bs5/pagination/pagination";
120
- @import "../components/bs5/promotionalPanel/promotionalPanel";
121
- @import "../components/bs5/quickexit/quickexit";
122
- @import "../components/bs5/sidenav/sidenav";
123
- @import "../components/bs5/searchInput/searchInput";
124
- @import "../components/bs5/skiplinks/skipLinks";
125
- @import "../components/bs5/spinner/spinner";
126
- @import "../components/bs5/table/table";
127
- @import "../components/bs5/tabs/tabs";
128
- @import "../components/bs5/tag/tag";
129
- @import "../components/bs5/textbox/textInput";
130
- @import "../components/bs5/typography/typography";
131
- @import "../components/bs5/video/video";
132
-
133
- // Custom utility classes
134
- @import "utilities";
135
-
136
- // Print
137
- @import "qld-print";
package/src/css/themes/masterbrand.scss DELETED
@@ -1,109 +0,0 @@
1
- // Variables Override File - Emerald Theme
2
- // This file creates a custom emerald/green theme variant with different values from qld-tokens.scss
3
-
4
- // Core neutral colors - warmer tones
5
- $core-default-color-neutral-black: #0D1B0D;
6
- $core-default-color-neutral-darkest: #1A2E1A;
7
- $core-default-color-neutral-darker: #2D4A2D;
8
- $core-default-color-neutral-dark: #4A6B4A;
9
- $core-default-color-neutral-light: #C5E5C5;
10
- $core-default-color-neutral-lighter: #E0F2E0;
11
- $core-default-color-neutral-lightest: #F0F9F0;
12
- $core-default-color-neutral-white: #FFFFFF;
13
-
14
- // Status colors - emerald themed
15
- $core-default-color-status-caution-default: #F5A623;
16
- $core-default-color-status-caution-darker: #D4820A;
17
- $core-default-color-status-caution-lighter: #FFF8E1;
18
- $core-default-color-status-caution-lightest: #FFFCF5;
19
- $core-default-color-status-info-default: #17A2B8;
20
- $core-default-color-status-info-darker: #138496;
21
- $core-default-color-status-info-lighter: #D1ECF1;
22
- $core-default-color-status-info-lightest: #E8F6F8;
23
- $core-default-color-status-error-default: #DC3545;
24
- $core-default-color-status-error-darker: #C82333;
25
- $core-default-color-status-error-lighter: #F8D7DA;
26
- $core-default-color-status-error-lightest: #FCE8EA;
27
- $core-default-color-status-success-default: #28A745;
28
- $core-default-color-status-success-darker: #155724;
29
- $core-default-color-status-success-lighter: #D4EDDA;
30
- $core-default-color-status-success-lightest: #E8F5E8;
31
-
32
- // Underline colors
33
- $core-default-color-status-underline-light: #FFFFFF99;
34
- $core-default-color-status-underline-dark: #1B4D3E99;
35
-
36
- // Brand colors - emerald palette
37
- $core-default-color-brand-primary-dark-blue: #0D4E41;
38
- $core-default-color-brand-primary-sapphire-blue: #16A085;
39
- $core-default-color-brand-primary-light-blue: #48C9B0;
40
- $core-default-color-brand-primary-light-green: #58D68D;
41
- $core-default-color-brand-secondary-darkgreen: #239B56;
42
- $core-default-color-brand-secondary-golden-yellow: #F7DC6F;
43
- $core-default-color-brand-other-modern-maroon: #7D3C98;
44
- $core-default-color-brand-other-gov-maroon: #6C3483;
45
-
46
- // Code colors - emerald theme
47
- $core-default-color-code-green: #58D68D;
48
- $core-default-color-code-light-blue: #85E3FF;
49
- $core-default-color-code-violet: #BB8FCE;
50
- $core-default-color-code-muted: #A9DFBF;
51
-
52
- // Layout backgrounds
53
- $core-default-color-contained-layout-background: #16A085;
54
- $core-default-color-contained-layout-background-dark: #0D4E41;
55
-
56
- // Light theme colors - emerald variations
57
- $color-default-color-light-background-default: #FFFFFF;
58
- $color-default-color-light-background-default-shade: #F0F9F0;
59
- $color-default-color-light-background-light: #E8F6F3;
60
- $color-default-color-light-background-light-shade: #D5F2E8;
61
- $color-default-color-light-background-alt: #D5F2E8;
62
- $color-default-color-light-background-alt-shade: #C5E5C5;
63
- $color-default-color-light-border-default: #A9DFBF;
64
- $color-default-color-light-border-light: #85C1A6;
65
- $color-default-color-light-border-alt: #5D6D5D;
66
- $color-default-color-light-action-primary: #16A085;
67
- $color-default-color-light-action-primary-hover: #0D4E41;
68
- $color-default-color-light-action-secondary: #239B56;
69
- $color-default-color-light-action-secondary-hover: #1B7943;
70
- $color-default-color-light-link-on-action: #FFFFFF;
71
- $color-default-color-light-link-default: #16A085;
72
- $color-default-color-light-link-visited: #7D3C98;
73
- $color-default-color-light-accent-design-accent: #58D68D;
74
- $color-default-color-light-focus-default: #48C9B0;
75
- $color-default-color-light-underline-default: #229954;
76
- $color-default-color-light-underline-default-hover: #16A085;
77
- $color-default-color-light-underline-visited: #BB8FCE;
78
- $color-default-color-light-underline-visited-hover: #7D3C98;
79
- $color-default-color-light-text-default: #2E4E3E;
80
- $color-default-color-light-text-lighter: #566B56;
81
- $color-default-color-light-text-heading: #0D4E41;
82
- $color-default-color-light-site-title: #0A3D33;
83
- $color-default-color-light-crest-fill: #1B4D3E;
84
-
85
- // Dark theme colors - emerald variations
86
- $color-default-color-dark-background-default: #16A085;
87
- $color-default-color-dark-background-default-shade: #138D75;
88
- $color-default-color-dark-background-alt: #0D4E41;
89
- $color-default-color-dark-background-alt-shade: #0A3D33;
90
- $color-default-color-dark-border-default: #7DCEA0;
91
- $color-default-color-dark-border-alt: #58D68D;
92
- $color-default-color-dark-action-primary: #58D68D;
93
- $color-default-color-dark-action-primary-hover: #85E3FF;
94
- $color-default-color-dark-action-secondary: #F7DC6F;
95
- $color-default-color-dark-action-secondary-hover: #F4F6E7;
96
- $color-default-color-dark-link-default: #FFFFFF;
97
- $color-default-color-dark-link-visited: #D2B4DE;
98
- $color-default-color-dark-link-on-action: #0D4E41;
99
- $color-default-color-dark-accent-design-accent: #58D68D;
100
- $color-default-color-dark-focus-default: #7DCEA0;
101
- $color-default-color-dark-underline-default: #A9DFBF;
102
- $color-default-color-dark-underline-default-hover: #FFFFFF;
103
- $color-default-color-dark-underline-visited: #D2B4DE;
104
- $color-default-color-dark-underline-visited-hover: #BB8FCE;
105
- $color-default-color-dark-text-default: #FFFFFF;
106
- $color-default-color-dark-text-lighter: #E8F6F3;
107
- $color-default-color-dark-text-heading: #FFFFFF;
108
- $color-default-color-dark-site-title: #FFFFFF;
109
- $color-default-color-dark-crest-fill: #FFFFFF;