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

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/.esbuild/helpers/scssOverrideTheme.js +40 -0
  2. package/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js +4 -0
  3. package/.storybook/dynamicThemeDecorator.js +155 -0
  4. package/.storybook/main.js +6 -0
  5. package/.storybook/preview.js +20 -1
  6. package/README.md +26 -18
  7. package/dist/README.md +26 -18
  8. package/dist/assets/components/bs5/head/head.hbs +1 -1
  9. package/dist/assets/css/qld.bootstrap.css +1 -1
  10. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  11. package/dist/assets/js/handlebars.init.min.js +1 -1
  12. package/dist/assets/node/handlebars.init.min.js +1 -1
  13. package/dist/components/bs5/head/head.hbs +1 -1
  14. package/dist/package.json +6 -2
  15. package/esbuild.js +34 -9
  16. package/package.json +6 -2
  17. package/src/components/bs5/card/card--icon-list-footer.stories.js +171 -0
  18. package/src/components/bs5/card/card.scss +15 -0
  19. package/src/components/bs5/header/header.scss +8 -0
  20. package/src/components/bs5/pageLayout/pageLayout.stories.js +2 -2
  21. package/src/components/bs5/searchInput/searchInput.test.js +21 -5
  22. package/src/css/main.masterbrand.scss +137 -0
  23. package/src/css/qld-tokens.scss +95 -0
  24. package/src/css/qld-variables.scss +10 -3
  25. package/src/css/readme.md +6 -1
  26. package/src/css/themes/masterbrand.scss +109 -0
package/src/css/qld-tokens.scss ADDED
@@ -0,0 +1,95 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Thu, 13 Jun 2024 02:52:12 GMT
4
+
5
+ $core-default-color-neutral-black: #131212 !default;
6
+ $core-default-color-neutral-darkest: #222020 !default;
7
+ $core-default-color-neutral-darker: #444444 !default;
8
+ $core-default-color-neutral-dark: #78797e !default;
9
+ $core-default-color-neutral-light: #e0e0e0 !default;
10
+ $core-default-color-neutral-lighter: #ebebeb !default;
11
+ $core-default-color-neutral-lightest: #f5f5f5 !default;
12
+ $core-default-color-neutral-white: #ffffff !default;
13
+ $core-default-color-status-caution-default: #ffcc2c !default;
14
+ $core-default-color-status-caution-darker: #B38800 !default;
15
+ $core-default-color-status-caution-lighter: #fff2c9 !default;
16
+ $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
+ $core-default-color-status-error-darker: #8a1220 !default;
23
+ $core-default-color-status-error-lighter: #fdf0f0 !default;
24
+ $core-default-color-status-error-lightest: #fff6f6 !default;
25
+ $core-default-color-status-success-default: #339d37 !default;
26
+ $core-default-color-status-success-darker: #0a690d !default;
27
+ $core-default-color-status-success-lighter: #f2faf4 !default;
28
+ $core-default-color-status-success-lightest: #f7fbf8 !default;
29
+ $core-default-color-status-underline-light: #ffffffb8 !default;
30
+ $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;
package/src/css/qld-variables.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:meta";
1
2
  @use "mixins" as m;
2
3
 
3
4
  // GLOBALLY SCOPED VARIABLES
@@ -6,8 +7,8 @@
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,
7
8
 
8
9
  //QGDS tokens - masterbrand
9
- @import "@qld-gov-au/qgds-tokens/dist/scss/_variables.scss";
10
- @import "@qld-gov-au/qgds-tokens/dist/scss/_map.scss";
10
+ @use "./qld-tokens.scss";
11
+ @import "./qld-tokens.scss";
11
12
 
12
13
  //QLD Names Colours
13
14
  $qld-dark-blue: $core-default-color-brand-primary-dark-blue;
@@ -33,16 +34,17 @@ $qld-light-border: $color-default-color-light-border-default;
33
34
  $qld-light-border-alt: $color-default-color-light-border-alt;
34
35
  $qld-dark-focus: $color-default-color-dark-focus-default;
35
36
  $qld-light-focus: $color-default-color-light-focus-default;
37
+
36
38
  ////
37
39
  $qld-link-underline: $color-default-color-light-underline-default;
38
40
  $qld-link-underline-hover: $color-default-color-light-underline-default-hover;
39
41
  $qld-link-underline-visited: $color-default-color-light-underline-visited;
40
42
  $qld-link-underline-visited-hover: $color-default-color-light-underline-visited-hover;
41
-
42
43
  $qld-link-underline-dark: $color-default-color-dark-underline-default;
43
44
  $qld-link-underline-hover-dark: $color-default-color-dark-underline-default-hover;
44
45
  $qld-link-underline-visited-dark: $color-default-color-dark-underline-visited;
45
46
  $qld-link-underline-visited-hover-dark: $color-default-color-dark-underline-visited-hover;
47
+
46
48
  ///
47
49
  $qld-link-visited: $color-default-color-light-underline-visited;
48
50
  $qld-link-visited-dark: $color-default-color-dark-underline-visited;
@@ -158,6 +160,7 @@ $color-default-color-dark-underline-default-hover: #ffffff;
158
160
  // These will NOT create utility classes, only CSS variables on :root
159
161
  // Available as var(--qld-[color-name])
160
162
 
163
+ // DO NOT override the variables inside the object
161
164
  $project-colors: (
162
165
  "brand-primary-dark": $qld-brand-primary-dark,
163
166
  "brand-primary": $qld-brand-primary,
@@ -304,6 +307,8 @@ $project-base-colors: (
304
307
  "dark-hover": $qld-dark-hover
305
308
  );
306
309
 
310
+ $qld-tokens: meta.module-variables("qld-tokens");
311
+
307
312
  // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
308
313
  :root {
309
314
  @include m.generate-color-vars($qld-tokens);
@@ -312,6 +317,7 @@ $project-base-colors: (
312
317
 
313
318
  $theme-colors: map-merge($theme-colors, $project-base-colors);
314
319
 
320
+ // DO NOT override the variables which is predefined in bootstrap;
315
321
  // Cusotm GRID breakpoints: https://getbootstrap.com/docs/5.2/layout/grid/#variables
316
322
  $grid-breakpoints: (
317
323
  xs: 0,
@@ -339,6 +345,7 @@ $qld-border-width-medium: 3px;
339
345
  $qld-border-width-thick: 4px;
340
346
  $qld-border-width-extra-thick: 8px;
341
347
 
348
+ // DO NOT override the variables which is predefined in bootstrap;
342
349
  // Extended spacers to procude 8px and 16px increments
343
350
  // use px-16, py-sm-16, ml-40, mr-40, etc
344
351
  $qld-custom-spacers: (
package/src/css/readme.md CHANGED
@@ -1,3 +1,8 @@
1
1
  This is the scss folder, that is converted to css for dist.
2
2
 
3
- To match pathing the folder is 'css' even though it should be 'scss'.
3
+ To match pathing the folder is 'css' even though it should be 'scss'.
4
+
5
+ `/themes/qld-variables-theme.scss` is the additional variables file with the overriding theme palette or css variables. This would impact the main.scss to be bundled as a separate css output
6
+
7
+ DO NOT override the variables inside the object;
8
+ DO NOT override the variables which is predefined in bootstrap;
package/src/css/themes/masterbrand.scss ADDED
@@ -0,0 +1,109 @@
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;