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

package/src/components/bs5/tabs/tabs.scss

@@ -1,27 +1,27 @@
 .qld-tabs {
-  --accent-colour: var(--qld-brand-secondary);
+  --accent-colour: var(--#{$prefix}brand-secondary);
   --border-radius: #{$border-radius};
   --section-content-padding: 4rem;
   // tabs colours
-  --default-bg-colour: var(--qld-default-background);
-  --light-bg-colour: var(--qld-light-background);
-  --alt-bg-colour: var(--qld-light-alt-background);
-  --dark-bg-colour: var(--qld-dark-background);
-  --dark-alt-bg-colour: var(--qld-dark-alt-background);
-  --light-border-colour: var(--qld-soft-grey);
-  --light-colour: var(--qld-light-text-heading);
-  --dark-border-colour: var(--qld-dark-alt-border);
-  --dark-colour: var(--qld-dark-text);
+  --default-bg-colour: var(--#{$prefix}default-background);
+  --light-bg-colour: var(--#{$prefix}light-background);
+  --alt-bg-colour: var(--#{$prefix}light-alt-background);
+  --dark-bg-colour: var(--#{$prefix}dark-background);
+  --dark-alt-bg-colour: var(--#{$prefix}dark-alt-background);
+  --light-border-colour: var(--#{$prefix}soft-grey);
+  --light-colour: var(--#{$prefix}light-text-heading);
+  --dark-border-colour: var(--#{$prefix}dark-alt-border);
+  --dark-colour: var(--#{$prefix}dark-text);
   --icon-dropshadow:
     0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
-  --focus-default-colour: var(--qld-light-focus);
+  --focus-default-colour: var(--#{$prefix}light-focus);
   --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill=''><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   // bootstrap variables
   --#{$prefix}nav-tabs-border-radius: var(--border-radius);
-  --#{$prefix}nav-tabs-link-hover-border-color: var(--qld-tab-background-hover);
-  --#{$prefix}nav-tabs-link-active-color: var(--qld-tab-hover-text-color);
-  --#{$prefix}nav-tabs-link-active-bg: var(--qld-tab-background);
-  --#{$prefix}nav-tabs-link-active-border-color: var(--qld-border-color);
+  --#{$prefix}nav-tabs-link-hover-border-color: var(--#{$prefix}tab-background-hover);
+  --#{$prefix}nav-tabs-link-active-color: var(--#{$prefix}tab-hover-text-color);
+  --#{$prefix}nav-tabs-link-active-bg: var(--#{$prefix}tab-background);
+  --#{$prefix}nav-tabs-link-active-border-color: var(--#{$prefix}border-color);
   // animation
   --fade-time: 0.15s;
 
@@ -30,60 +30,62 @@
   .default &,
   .default,
   &.default {
-    --qld-tab-background: var(--qld-default-background-shade);
+    --qld-tab-background: var(--#{$prefix}default-background-shade);
   }
   .alt &,
   .alt,
   &.alt {
-    --qld-body-bg: var(--qld-light-alt-background);
-    --qld-border-color: var(--qld-soft-grey);
-    --qld-tab-background: var(--qld-light-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}light-alt-background);
+    --qld-border-color: var(--#{$prefix}soft-grey);
+    --qld-tab-background: var(--#{$prefix}light-alt-background-shade);
   }
   .light &,
   .light,
   &.light {
     --qld-body-bg: #eff4f9;
     --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
-    --qld-tab-background: var(--qld-light-background-shade);
-    --qld-tab-background-hover: var(--qld-button-dark-blue);
+    --qld-tab-background: var(--#{$prefix}light-background-shade);
+    --qld-tab-background-hover: var(--#{$prefix}button-dark-blue);
   }
   .dark &,
   .dark,
   &.dark {
-    --qld-border-color: var(--qld-dark-border);
-    --qld-tab-background: var(--qld-dark-hover);
+    --qld-border-color: var(--#{$prefix}dark-border);
+    --qld-tab-background: var(--#{$prefix}dark-hover);
   }
   .dark-alt &,
   .dark-alt,
   &.dark-alt {
-    --qld-body-bg: var(--qld-dark-alt-background);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-background: var(--qld-dark-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}dark-alt-background);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-background: var(--#{$prefix}dark-alt-background-shade);
   }
   &.default,
   &.light,
   &.alt {
     --qld-tab-hover-text-color: #{$color-default-color-light-link-on-action};
-    --qld-tab-icon-color: var(--qld-light-action-secondary);
-    --qld-tab-background-hover: var(--qld-light-action-primary-hover);
+    --qld-tab-icon-color: var(--#{$prefix}light-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}light-action-primary-hover);
     --qld-border-color: var(--light-border-colour);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
-    --qld-tab-focus-colour: var(--qld-light-focus);
-    --qld-tab-active-focus-colour: var(--qld-light-focus);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-secondary);
+    --qld-tab-focus-colour: var(--#{$prefix}light-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}light-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}nav-link-color);
   }
   &.dark,
   &.dark-alt {
-    --qld-tab-background-hover: var(--qld-dark-action-primary-hover);
-    --qld-tab-hover-text-color: var(--qld-text-darkest);
-    --qld-tab-icon-color: var(--qld-dark-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}dark-action-primary-hover);
+    --qld-tab-hover-text-color: var(--#{$prefix}text-darkest);
+    --qld-tab-icon-color: var(--#{$prefix}dark-action-secondary);
     --qld-tab-disabled-colour: #{$qld-hint-text-color-muted};
-    --qld-tab-text-colour-heading: var(--qld-dark-text);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-text);
-    --qld-tab-focus-colour: var(--qld-dark-focus);
-    --qld-tab-active-focus-colour: var(--qld-dark-focus);
+    --qld-tab-text-colour-heading: var(--#{$prefix}dark-text);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-text);
+    --qld-tab-focus-colour: var(--#{$prefix}dark-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}dark-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}dark-text);
   }
   &.container-tabs {
     --scroll-distance: 0;
@@ -417,7 +419,7 @@
           display: flex;
           gap: 0.5rem;
           white-space: nowrap;
-          color: var(--qld-nav-link-color);
+          color: var(--nav-link-color);
           align-items: anchor-center;
           i {
             font-size: 1.125rem;
@@ -544,6 +546,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--default-bg-colour);
       }
@@ -559,6 +562,7 @@
       --qld-scroll-bg-color: var(--light-bg-colour);
       --qld-scroll-area-bg-color: var(--light-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--light-bg-colour);
       }
@@ -574,6 +578,7 @@
       --qld-scroll-bg-color: var(--alt-bg-colour);
       --qld-scroll-area-bg-color: var(--alt-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--alt-bg-colour);
       }
@@ -587,6 +592,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--dark-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       .tabs-area {
         background-color: var(--dark-bg-colour);
       }
@@ -599,6 +605,7 @@
       --qld-tab-text-colour-heading: var(--qld-dark-text);
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       color: var(--qld-body-color);
       background-color: var(--qld-dark-alt-background);
       .tabs-area {

package/src/css/mixins/focusable.scss

@@ -2,8 +2,12 @@
 /// Default focus styles for use in buttons etc. Resets :focus and uses :focus-visible instead which only appears on keyboard interaction.
 /// @param {Boolean} $offsetOutline [true] - Offset the focus ring by 2px.
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
-/// @param {String} $prefix ["qld-"] The css var prefix. This is declared in main.scss but required here as a module because reimporting will emit the entire main css file.
-@mixin focusable($offsetOutline: true, $isFocusWithin: false) {
+/// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+@mixin focusable(
+  $offsetOutline: true,
+  $isFocusWithin: false,
+  $customSelector: null
+) {
   // outline styles without the pseudo state to allow for transition animations.
 
   $outline-width: 3px;
@@ -18,7 +22,11 @@
   outline: $outline-width solid transparent;
   outline-offset: $initial-offset;
 
-  $selector: if($isFocusWithin, ":focus-within", ":focus");
+  $selector: if(
+    $customSelector,
+    $customSelector,
+    if($isFocusWithin, ":focus-within", ":focus")
+  );
 
   &#{$selector} {
     outline: {

package/src/css/mixins/make-icon.scss

@@ -13,6 +13,7 @@ $prefix: "qld-" !default;
 /// @param {String | null} $pseudo [null] - Whether the mixin applies styles as a pseudo-element. Valid string values are "before" | "after"
 /// @param {false} $is-inline - Applies extra styles to assist with vertical alignent when used inline with text.
 /// @param {Boolean} $include-base [true] - Apply all base styles. Set to false when reusing this mixin to create modifier classes where base styles are already applied (For instance qld-icon-{name})
+/// @content
 @mixin make-icon(
   $name: null,
   $size: "sm",
@@ -43,7 +44,9 @@ $prefix: "qld-" !default;
     &::#{$pseudo} {
       content: "";
       // recursively call this mixin with $pseudo set to null
-      @include make-icon($name, $size, null, $is-inline, $include-base);
+      @include make-icon($name, $size, null, $is-inline, $include-base) {
+        @content;
+      }
     }
   } @else {
     @if $include-base {
@@ -83,5 +86,8 @@ $prefix: "qld-" !default;
         -webkit-mask-image: var(--qgds-icon-#{$name});
       }
     }
+
+    // allow arbitrary content
+    @content;
   }
 }

package/src/components/bs5/searchInput/_colours.scss

@@ -1,63 +0,0 @@
-.qld-search-input {
-    // ------------------------------------------------------------------------------------------------------------------
-    //  1. Common vars
-    // ------------------------------------------------------------------------------------------------------------------
-    //  Search inputs
-    --#{$prefix}site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
-    --#{$prefix}site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
-    --#{$prefix}site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}site-search_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
-
-    // Search input dark
-    --#{$prefix}dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
-    --#{$prefix}dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
-    
-    // Dropdown
-    --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-
-    // Search bootstrap variables
-    --site-search-bg: var(--#{$prefix}site-search-bg);
-    --site-search-btn-color: var(--#{$prefix}site-search-btn-color);
-    --site-search-btn-bg: var(--#{$prefix}site-search-btn-bg);
-    --site-search-border-color: var(--#{$prefix}site-search-border-color);
-    --site-search-icon-color: var(--#{$prefix}site-search-icon-color);
-    --site-search-input-color: var(--#{$prefix}site-search-text-color);
-    --site-search-text-color: var(--#{$prefix}site-search-text-color);
-    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-
-    
-    // ------------------------------------------------------------------------------------------------------------------
-    //  2. Colour modes
-    // ------------------------------------------------------------------------------------------------------------------
-    .dark &,
-    .dark-alt & {
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}dark-site-search-text-color);
-
-        // Suggestions colours
-        --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
-        --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
-        --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-        --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-    }
-}