Skip to content

[Draft] QGDS-328 improve color variables global scope #927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
stvp-qld wants to merge 20 commits into
base: develop
Choose a base branch
from
+253 −325
Draft

[Draft] QGDS-328 improve color variables global scope #927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ec03d57
Fix (navbar): Replace sapphire-blue reference; formatting
stvp-qld Nov 14, 2025
bad0604
Fix (accordion, tabs): Remove legacy colour variables; align vars to …
stvp-qld Nov 14, 2025
667d4cf
Chore: Remove redundant color vars (greens) and names colors;
stvp-qld Nov 17, 2025
bf2d6dc
Chore: Remove redundant color variables (yellow and maroon)
stvp-qld Nov 17, 2025
6bde3ef
Chore: Remove redundant color variables (red, blue, green named border)
stvp-qld Nov 17, 2025
4155060
Chore: Remove redundant color variables (named colors; light-blues)
stvp-qld Nov 17, 2025
2ce794c
Chore: Remove redundant color variables (soft-grey); cleanup sidenav …
stvp-qld Nov 17, 2025
16c294a
Chore: Remove redundant color variables (extra-light-grey); cleanup t…
stvp-qld Nov 17, 2025
97e2dd5
Chore: Accordion, switch light-background-alt to light-alt-background
stvp-qld Nov 17, 2025
f3a601a
Chore: Re-assign background and background-shades to token vars;
stvp-qld Nov 17, 2025
46d0b2e
Chore: Remove redundant color vars (dark-blue, alt-button)
stvp-qld Nov 17, 2025
3620023
Merge branch 'develop' into QGDS-328-improve-color-variables-global-s…
stvp-qld Nov 19, 2025
47d8390
Chore: Replace colors vars (light-grey) with neutral-lighter
stvp-qld Nov 19, 2025
1a51d00
Chore: Remove redundant color var (light-grey-alt)
stvp-qld Nov 19, 2025
8f1f5af
Chore: Remove redundant color var (alt-grey)
stvp-qld Nov 19, 2025
7773ff5
Chore: Include neutrals in InpageAlert color map
stvp-qld Nov 19, 2025
40abeb9
Chore (refs): Replace colour vars; remove greys and redundant underlines
stvp-qld Nov 24, 2025
e430303
Chore (refs): Replace BS var dark-text with project var dark-text-text
stvp-qld Nov 24, 2025
6e7d252
Chore (refs): Remove text-darkest and dark-action-text; apply dark-li…
stvp-qld Nov 24, 2025
fd01741
Chore (refs): Tidy and remove commented lines on qld-variables
stvp-qld Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/components/bs5/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
--#{$prefix}accordion-btn-padding-x: 1rem;
--#{$prefix}accordion-btn-padding-y: 1rem;
--#{$prefix}accordion-btn-color: var(--#{$prefix}link-color);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg(
$accordion-button-active-icon
Expand All @@ -56,9 +56,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
}

.alt & {
--#{$prefix}accordion-bg: var(--#{$prefix}light-grey-alt);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}grey);
--#{$prefix}accordion-border-color: var(--#{$prefix}soft-grey);
--#{$prefix}accordion-bg: var(--#{$prefix}light-alt-background);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}light-alt-background-shade);
--#{$prefix}accordion-border-color: var(--#{$prefix}light-border-alt);
}

// Shared 'Dark' theme variables
Expand All @@ -68,22 +68,22 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
--#{$prefix}accordion-btn-active-icon: #{escape-svg(
$accordion-button-active-icon-dark
)};
--#{$prefix}accordion-color: var(--#{$prefix}white);
--#{$prefix}accordion-btn-color: var(--#{$prefix}white);
--#{$prefix}accordion-active-color: var(--#{$prefix}white);
--#{$prefix}accordion-color: var(--#{$prefix}neutral-white);
--#{$prefix}accordion-btn-color: var(--#{$prefix}neutral-white);
--#{$prefix}accordion-active-color: var(--#{$prefix}neutral-white);
--#{$prefix}focus: var(--#{$prefix}dark-focus);
}

// Theme specific variables
.dark & {
--#{$prefix}accordion-bg: var(--#{$prefix}brand-primary);
--#{$prefix}accordion-bg: var(--#{$prefix}dark-background);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-background-shade);
--#{$prefix}accordion-border-color: var(--#{$prefix}dark-border);
}

.dark-alt & {
--#{$prefix}accordion-bg: var(--#{$prefix}dark-blue);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-blue-shade);
--#{$prefix}accordion-bg: var(--#{$prefix}dark-alt-background);
--#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-alt-background-shade);
--#{$prefix}accordion-border-color: var(--#{$prefix}dark-alt-border);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/bs5/banner/banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
&.dark,
&.dark-alt {
// Dark and Dark Alt share the same text color
--#{$prefix}banner-title-color: var(--#{$prefix}dark-text);
--#{$prefix}banner-abstract-color: var(--#{$prefix}dark-text);
--#{$prefix}banner-title-color: var(--#{$prefix}dark-text-text);
--#{$prefix}banner-abstract-color: var(--#{$prefix}dark-text-text);

.breadcrumb {
// Variables scoped in the .breadcrumbs.scss component
Expand Down
23 changes: 9 additions & 14 deletions src/components/bs5/blockquote/blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
//PREP REUSABLE VARIABLES, SCOPED TO .blockquote
.blockquote {
// Colours
--#{$prefix}quote-border-color: var(
--#{$prefix}color-default-color-light-accent-design-accent
);
--#{$prefix}quote-text-color: var(
--#{$prefix}color-default-color-light-text-heading
);
--#{$prefix}quote-ref-text-color: var(
--#{$prefix}color-default-color-light-text-default
);
--#{$prefix}quote-border-color: var(--#{$prefix}light-accent);
--#{$prefix}quote-text-color: var(--#{$prefix}light-text-heading);
--#{$prefix}quote-ref-text-color: var(--#{$prefix}light-text-text);

//Measurements
--#{$prefix}quote-spacing: 1rem;
--#{$prefix}quote-border-width: 0.25rem;
Expand All @@ -24,21 +19,21 @@
}

.alt & {
--#{$prefix}blockquote-bg: var(--#{$prefix}light-grey-alt);
--#{$prefix}blockquote-bg: var(--#{$prefix}light-alt-background);
}

.dark & {
--#{$prefix}blockquote-bg: var(--#{$prefix}brand-primary);
--#{$prefix}blockquote-bg: var(--#{$prefix}dark-background);
}

.dark-alt & {
--#{$prefix}blockquote-bg: var(--#{$prefix}dark-blue);
--#{$prefix}blockquote-bg: var(--#{$prefix}dark-alt-background);
}

.dark &,
.dark-alt & {
--#{$prefix}quote-text-color: var(--#{$prefix}white);
--#{$prefix}quote-ref-text-color: var(--#{$prefix}white);
--#{$prefix}quote-text-color: var(--#{$prefix}neutral-white);
--#{$prefix}quote-ref-text-color: var(--#{$prefix}neutral-white);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/bs5/breadcrumbs/breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ $expander-icon-color: $qld-light-link;
padding: 0.75rem 1rem;
display: block;
width: 100%;
color: $qld-text-grey;
color: var(--#{$prefix}light-text-text);
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Hides any content that overflows the element's box */
text-overflow: ellipsis;
Expand All @@ -84,7 +84,7 @@ $expander-icon-color: $qld-light-link;
text-decoration-thickness: var(
--#{$prefix}link-underline-thickness-hover
);
background-color: $core-default-color-neutral-lighter;
background-color: var(--#{$prefix}neutral-lighter);
}

--qld-focus-color: var(--qld-light-focus);
Expand Down
22 changes: 11 additions & 11 deletions src/components/bs5/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
&-primary {
--#{$prefix}btn-bg: var(--#{$prefix}light-action-primary);
--#{$prefix}btn-hover-bg: var(--#{$prefix}light-action-primary-hover);
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}neutral-light);
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
--#{$prefix}btn-disabled-opacity: 1;
--#{$prefix}btn-disabled-border-color: transparent;
Expand All @@ -46,13 +46,13 @@
--#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
--#{$prefix}btn-hover-bg: transparent;
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-active-border-color: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-active-shadow: none;
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
--#{$prefix}btn-disabled-opacity: 1;
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}neutral-light);
--#{$prefix}gradient: none;
--#{$prefix}btn-focus-border-color: var(
--#{$prefix}light-action-secondary-hover
Expand All @@ -64,7 +64,7 @@
--#{$prefix}btn-color: #{$primary};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-color: #{$primary};
--#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-hover-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
--#{$prefix}btn-active-bg: transparent;
Expand All @@ -83,14 +83,14 @@
&-primary {
--#{$prefix}btn-bg: var(--#{$prefix}dark-action-secondary);
--#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
--#{$prefix}btn-color: var(--#{$prefix}text-darkest);
--#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
--#{$prefix}btn-color: var(--#{$prefix}dark-link-on-action);
--#{$prefix}btn-hover-color: var(--#{$prefix}dark-link-on-action);
--#{$prefix}btn-hover-bg: var(--#{$prefix}dark-action-primary-hover);
--#{$prefix}btn-hover-border-color: var(
--#{$prefix}dark-action-primary-hover
);
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
--#{$prefix}btn-disabled-border-color: transparent;
Expand All @@ -110,8 +110,8 @@
);
--#{$prefix}btn-hover-bg: transparent;
--#{$prefix}btn-hover-color: var(--#{$prefix}white);
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-active-border-color: var(--#{$prefix}neutral-lightest);
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
Expand Down
89 changes: 45 additions & 44 deletions src/components/bs5/callout/callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,69 @@

// Default
.callout {
--#{$prefix}callout-padding: 1.5rem 1rem 1.5rem 1.5rem;
--#{$prefix}callout-bg-color: var(--#{$prefix}extra-light-grey);
--#{$prefix}callout-border-color: var(--#{$prefix}brand-secondary);
--#{$prefix}callout-border-width: 0.25rem;
--#{$prefix}callout-title-color: var(--#{$prefix}headings-color);
--#{$prefix}callout-text-color: var(--#{$prefix}body-color);
--#{$prefix}callout-spacer: 1rem;
--#{$prefix}callout-padding: 1.5rem 1rem 1.5rem 1.5rem;
--#{$prefix}callout-bg-color: var(--#{$prefix}neutral-lightest);
--#{$prefix}callout-border-color: var(--#{$prefix}light-accent);
--#{$prefix}callout-border-width: 0.25rem;
--#{$prefix}callout-title-color: var(--#{$prefix}headings-color);
--#{$prefix}callout-text-color: var(--#{$prefix}body-color);
--#{$prefix}callout-spacer: 1rem;

.light & {
--#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);
}
.light & {
--#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);
}

.alt & {
--#{$prefix}callout-bg-color: var(--#{$prefix}grey);
}
.alt & {
--#{$prefix}callout-bg-color: var(--#{$prefix}light-alt-background-shade);
}

.dark &,
.dark-alt & {
--#{$prefix}callout-title-color: var(--#{$prefix}white);
--#{$prefix}callout-text-color: var(--#{$prefix}white);
}
.dark &,
.dark-alt & {
--#{$prefix}callout-title-color: var(--#{$prefix}neutral-white);
--#{$prefix}callout-text-color: var(--#{$prefix}neutral-white);
}

.dark & {
--#{$prefix}callout-bg-color: var(--#{$prefix}dark-background-shade);
}
.dark & {
--#{$prefix}callout-bg-color: var(--#{$prefix}dark-background-shade);
}

.dark-alt & {
--#{$prefix}callout-bg-color: var(--#{$prefix}dark-blue-shade);
}
.dark-alt & {
--#{$prefix}callout-bg-color: var(--#{$prefix}dark-alt-background-shade);
}
}

//Dark theme
//https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode

@include color-mode(dark) {

}

//Define component styles
.callout {
background-color: var(--#{$prefix}callout-bg-color);
border-left: solid var(--#{$prefix}callout-border-width)
var(--#{$prefix}callout-border-color);
padding: var(--#{$prefix}callout-padding);

background-color: var(--#{$prefix}callout-bg-color);
border-left: solid var(--#{$prefix}callout-border-width) var(--#{$prefix}callout-border-color);
padding: var(--#{$prefix}callout-padding);
&-title {
color: var(--#{$prefix}callout-title-color);
margin-bottom: 0;
}

&-title {
color: var(--#{$prefix}callout-title-color);
margin-bottom: 0;
}

&-text {
color: var(--#{$prefix}callout-text-color);
&-text {
color: var(--#{$prefix}callout-text-color);

p, ul, ol {
&:last-child {
margin-bottom: 0;
}
}
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
}

&-title + &-text {
// Add space above text only if there is a title
margin-top: var(--#{$prefix}callout-spacer);
}
&-title + &-text {
// Add space above text only if there is a title
margin-top: var(--#{$prefix}callout-spacer);
}
}
22 changes: 12 additions & 10 deletions src/components/bs5/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

.card {
--#{$prefix}card-bg: var(--#{$prefix}default-background);
--#{$prefix}card-color: var(--#{$prefix}text-grey);
--#{$prefix}card-color: var(--#{$prefix}light-text-text);
--#{$prefix}card-title-color: var(--#{$prefix}light-text-heading);
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-spacer-y: #{$card-spacer-y};
Expand Down Expand Up @@ -54,9 +54,9 @@
--#{$prefix}video-nav-bg-hover: var(--#{$prefix}light-action-primary-hover);
--#{$prefix}video-nav-bg-hover-rgb: 0, 62, 150;
--#{$prefix}video-nav-bg-opacity: 0.9;
--#{$prefix}video-nav-color: var(--#{$prefix}dark-text);
--#{$prefix}video-nav-color: var(--#{$prefix}dark-text-text);
--#{$prefix}video-clock-icon-size: 1.25rem;
--#{$prefix}video-play-icon-color: var(--#{$prefix}dark-text);
--#{$prefix}video-play-icon-color: var(--#{$prefix}dark-text-text);
}
.icon-top {
--#{$prefix}card-icon-height: 8rem;
Expand Down Expand Up @@ -126,14 +126,14 @@
}
&-dark,
&-dark-alt {
--#{$prefix}card-color: var(--#{$prefix}dark-text);
--#{$prefix}card-title-color: var(--#{$prefix}dark-text);
--#{$prefix}card-link-color: var(--#{$prefix}dark-text);
--#{$prefix}card-date-color: var(--#{$prefix}dark-text);
--#{$prefix}card-color: var(--#{$prefix}dark-text-text);
--#{$prefix}card-title-color: var(--#{$prefix}dark-text-text);
--#{$prefix}card-link-color: var(--#{$prefix}dark-text-text);
--#{$prefix}card-date-color: var(--#{$prefix}dark-text-text);
--#{$prefix}card-arrow-color: var(--#{$prefix}dark-action-secondary);
--#{$prefix}card-border-color: var(--#{$prefix}dark-border);
--#{$prefix}link-hover-colour: var(--#{$prefix}dark-action-primary-hover);
--#{$prefix}link-hover-text-colour: var(--#{$prefix}text-darkest);
--#{$prefix}link-hover-text-colour: var(--#{$prefix}dark-link-on-action);
&:hover {
--#{$prefix}card-arrow-color: var(
--#{$prefix}dark-action-secondary-hover
Expand All @@ -149,8 +149,8 @@
--#{$prefix}dark-action-primary-hover
);
--#{$prefix}video-nav-bg-hover-rgb: 166, 247, 255;
--#{$prefix}video-nav-color: var(--#{$prefix}dark-action-text);
--#{$prefix}video-play-icon-color: var(--#{$prefix}text-darkest);
--#{$prefix}video-nav-color: var(--#{$prefix}dark-link-on-action);
--#{$prefix}video-play-icon-color: var(--#{$prefix}dark-link-on-action);
}
}
&-dark {
Expand Down Expand Up @@ -413,6 +413,8 @@
var(--#{$prefix}card-spacer-x);
width: 100%;
flex: 0 1 auto;

//Pseudo used for footer border
&:before {
content: "";
display: block;
Expand Down
2 changes: 1 addition & 1 deletion src/components/bs5/directionLinks/directionLinks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ a[aria-disabled="true"] {
.dark,
.dark-alt {
.qld-dir-link {
--link-colour: var(--#{$prefix}dark-text);
--link-colour: var(--#{$prefix}dark-text-text);
--icon-colour: var(--#{$prefix}dark-action-secondary);
--icon-colour-hover: var(--#{$prefix}dark-action-secondary-hover);
}
Expand Down
Loading
Loading