@qld-gov-au/qgds-bootstrap5 2.0.1 → 2.0.2

package/src/css/qld-utilities.scss

@@ -1,20 +1,35 @@
-
-// QLD Customm Utilities, extends Bootstrap utilities
-
-// Responsive width classes (w-md-25, w-lg-50, etc.)
+// QLD Custom Utilities, extends Bootstrap utilities
 $utilities: map-merge(
   $utilities,
   (
+    // Responsive width classes (w-md-25, w-lg-50, etc.)
     "width": (
-      property: width,
-      class: w,
-      responsive: true,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%
+        property: width,
+        class: w,
+        responsive: true,
+        values: (
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+        ),
+      ),
+    // QLD Background theme utilities (bg-dark, bg-dark-alt, etc.)
+    "qld-background": (
+        property: background-color,
+        class: bg,
+        values: (
+          "default": var(--qld-default-background),
+          "default-shade": var(--qld-default-background-shade),
+          "light": var(--qld-light-background),
+          "light-shade": var(--qld-light-background-shade),
+          "light-alt": var(--qld-light-alt-background),
+          "light-alt-shade": var(--qld-light-alt-background-shade),
+          "dark": var(--qld-dark-background),
+          "dark-shade": var(--qld-dark-background-shade),
+          "dark-alt": var(--qld-dark-alt-background),
+          "dark-alt-shade": var(--qld-dark-alt-background-shade),
+        ),
       )
-    )
   )
-);
+);

package/src/css/qld-variables.scss

@@ -1,4 +1,4 @@
-@use "mixins" as *;
+@use "mixins" as m;
 
 // GLOBALLY SCOPED VARIABLES
 // These variables are available to the full project and all components. (This file is included at the top of main.css to ensure this)
@@ -222,7 +222,7 @@ $project-colors: (
   "default-border": $qld-light-border,
   "light-border": $color-default-color-light-border-light,
   "light-border-alt": $qld-light-border-alt,
-  
+
   //Links
   "light-link": $color-default-color-light-link-default,
   "dark-link": $color-default-color-dark-link-default,
@@ -306,8 +306,8 @@ $project-base-colors: (
 
 // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
 :root {
-  @include generate-color-vars($qld-tokens);
-  @include generate-color-vars($project-colors);
+  @include m.generate-color-vars($qld-tokens);
+  @include m.generate-color-vars($project-colors);
 }
 
 $theme-colors: map-merge($theme-colors, $project-base-colors);

package/src/css/variables/_index.scss

@@ -0,0 +1 @@
+@import "type";

package/src/css/variables/type.scss

@@ -0,0 +1,58 @@
+//Typography
+$font-family-sans-serif:
+  "Noto Sans",
+  system-ui,
+  -apple-system,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  "Noto Sans",
+  "Liberation Sans",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
+
+// Override Bootstrap font variables
+$font-weight-base: 400;
+$font-weight-bold: 600;
+$font-weight-bolder: 900;
+
+// Apply custom font weights to Bootstrap's utility classes
+$font-weights: (
+  normal: 400,
+  bold: 600,
+  bolder: 900,
+);
+
+$body-color: $qld-text-grey;
+$body-font-weight: 400;
+$font-size-base: 1rem;
+
+// https: //www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=58880-54175&t=35PGuqUnIyLmf28d-0
+// Headings font weight and line height
+$headings-font-weight: 600;
+$headings-line-height: 1.3;
+
+// Headings font sizes
+$h1-font-size: $font-size-base * 2.5;
+$h2-font-size: $font-size-base * 2;
+$h3-font-size: $font-size-base * 1.5;
+$h4-font-size: $font-size-base * 1.25;
+$h5-font-size: $font-size-base * 1;
+$h6-font-size: $font-size-base * 0.875;
+
+// < 991 Mobile Tablet font sizes and line heights
+$h1-font-size-mobile: $font-size-base * 2; // 32
+$h2-font-size-mobile: $font-size-base * 1.75; // 28
+$h1-line-height-mobile: 1.25; //40
+$h2-line-height-mobile: 1.285; //36
+
+$headings-color: $qld-text-headings;
+$qld-heading-color: $core-default-color-brand-primary-light-green;
+
+$link-color: $qld-brand-primary;
+$link-hover-color: $qld-brand-primary;
+$link-visited-color: $qld-link-visited;

package/src/components/bs5/icons/story-icon-sizing.html

@@ -1,131 +0,0 @@
-<h2>Icon sizes</h2>
-<article>
-<p>
-  We have 6 preset sizes for icons ranging from extra small (xs) to extra extra large (xxl) and a dedicated feature size for large or detailed icons. 
-  Feature icons use a background shade to help make it stand out from other elements on the page.
-</p>
-<p>
-  This size range allows for flexibility and adaptability in various design contexts while maintaining visual harmony and balance. These predefined sizes ensure that icons are proportionate and legible, enhancing their effectiveness and the overall aesthetic of the site.
-</p>
-</article>
-
-<h4>Example:</h4>
-<div class="row align-items-end text-start">
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xxl qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XXL:</strong> 64x64</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xl qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-lg qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-md qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-sm qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xs qld-icon-design" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
-  </div>
-</div>
-
-<div class="row align-items-end text-start">
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xxl qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XXL:</strong> 64x64</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xl qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-lg qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-md qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-sm qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
-  </div>
-  <div class="col d-flex flex-column flex-grow-0 align-items-start">
-    <span class="qld-icon qld-icon-xs qld-icon-alert-cancel" aria-hidden="true"></span>
-    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
-  </div>
-</div>
-
-<h4>Usage:</h4>
-<p>
-  Combine base class <code>qld-icon</code> with specific icon name and size class as listed here to set the icon size.
-</p>
-<table class="table table-responsive">
-  <thead class="table-light">
-    <tr>
-      <th scope="col">Class</th>
-      <th scope="col">REM size</th>
-      <th scope="col">Pixel size</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>.qld-icon-xs</code></td>
-      <td><pre>1rem</pre></td>
-      <td><pre>16x16</pre></td>
-    </tr>
-    <tr>
-      <td><code>.qld-icon-sm</code></td>
-      <td><pre>1.25rem</pre></td>
-      <td><pre>20x20</pre></td>
-    </tr>
-    <tr>
-      <td><code>.qld-icon-md</code></td>
-      <td><pre>1.5rem</pre></td>
-      <td><pre>24x24</pre></td>
-    </tr>
-    <tr>
-      <td><code>.qld-icon-lg</code></td>
-      <td><pre>2rem</pre></td>
-      <td><pre>32x32</pre></td>
-    </tr>
-    <tr>
-      <td><code>.qld-icon-xl</code></td>
-      <td><pre>2.5rem</pre></td>
-      <td><pre>40x40</pre></td>
-    </tr>
-    <tr>
-      <td><code>.qld-icon-xxl</code></td>
-      <td><pre>3rem</pre></td>
-      <td><pre>48x48</pre></td>
-    </tr>
-  </tbody>
-</table>
-
-<h5 class="mt-5">Example code:</h5>
-<pre>
-  <code class="language-html">
-    &lt;span class="qld-icon qld-icon-xxl qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-    &lt;span class="qld-icon qld-icon-xl qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-    &lt;span class="qld-icon qld-icon-lg qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-    &lt;span class="qld-icon qld-icon-md qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-    &lt;span class="qld-icon qld-icon-sm qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-    &lt;span class="qld-icon qld-icon-xs qld-icon-design" aria-hidden="true"&gt;&lt;/span&gt;
-  </code>
-</pre>
-
-
-
-
-
-
-
-

package/src/components/bs5/icons/story-icon-usage.html

@@ -1,89 +0,0 @@
-<h1>Iconography</h1>
-<p>The icons in QGDS can be used in multiple ways depending on your needs and environment. This guide covers the three primary methods as well as the sizing utilities:</p>
-<ul>
-  <li><strong>Inline SVG</strong></li>
-  <li><strong>CSS utility class</strong></li>
-  <li><strong>CSS variables</strong></li>
-</ul>
-
-<h2>1. Inline SVG (HTML Embed)</h2>
-<p>
-  This method allows for full control over the icon's appearance, eg: colour, size, stroke, etc. Recommended for developers and content editors embedding icons directly in HTML.<br>
-  Place the Symbol ID on to the <code>&lt;use&gt;</code> element within an <code>&lt;svg&gt;</code> tag.<br>
-  Example:
-</p>
-
-<svg class="qld-icon-lg" style="color: #dd0000" aria-label="Cancel alert" role="img">
-  <use href="./assets/img/icons-sprite.svg#qgds-icon-alert-cancel"></use>
-</svg>
-<svg class="qld-icon-lg" style="color: #ffa500" aria-label="Warning alert" role="img">
-  <use href="./assets/img/icons-sprite.svg#qgds-icon-alert-warning"></use>
-</svg>
-<svg class="qld-icon-lg" style="color:#00dd00" aria-label="Success alert" role="img">
-  <use href="./assets/img/icons-sprite.svg#qgds-icon-alert-success"></use>
-</svg>
-<pre>
-  <code class="language-html">
-    &lt;svg class="qld-icon-lg" aria-label="Cancel alert"&gt;
-      &lt;use href="./assets/img/icons-sprite.svg#qgds-icon-alert-cancel"&gt;&lt;/use&gt;
-    &lt;/svg&gt;
-  </code>
-</pre>
-
-<h4>Accessibility</h4>
-<ul>
-  <li>Always include <code>role="img"</code> and <code>aria-label</code> attributes to provide context for screen readers.</li>
-  <li>Use <code>aria-hidden="true"</code> when the icon is decorative</li>
-</ul>
-
-<h2>2. CSS Utility Class</h2>
-<p>
-  This method is suitable for developers who want to apply icons in their stylesheets.<br>
-  Use the <code>qld-icon</code> + <code>qld-icon-{icon-name}</code> utility class to render icons as CSS masked elements.<br>
-  Example:
-</p>
-
-<div>
-  <span class="qld-icon qld-icon-lg qld-icon-home" style="background-color: #00dd00;" aria-hidden="true"></span>
-  <span class="qld-icon qld-icon-lg qld-icon-search" style="background-color: #0000ff;" aria-hidden="true"></span>
-  <span class="qld-icon qld-icon-lg qld-icon-menu" style="background-color: #dd0000;" aria-hidden="true"></span>
-</div>
-<pre>
-  <code class="language-html">
-    &lt;span class="qld-icon qld-icon-lg qld-icon-alert-cancel" aria-hidden="true"&gt;&lt;/span&gt;
-  </code>
-</pre>
-<ul>
-  <li><code>qld-icon</code> is the base class for all icons</li>
-  <li><code>qld-icon-{icon-name}</code> is the specific icon class</li>
-  <li><code>qld-icon-{size}</code> is the size utility class (Optional, see below)</li>
-</ul>
-
-<h4>Accessibility</h4>
-<ul>
-  <li>This method is for decorative only. Use <code>aria-hidden="true"</code> to hide the icon from screen readers.</li>
-  <li>Ensure to use it alongside text or other elements that provide context for screen readers users.</li>
-</ul>
-
-<h2>3. CSS Variables</h2>
-<p>
-  This method allows developers to create custom styles with any CSS property that accepts a URL, such as <code>mask-image</code> and <code>background-image</code>.<br>
-  Example:
-</p>
-<pre>
-  <code class="language-css">
-    .mysite-icon-cancel-payment {
-      mask-image: var(--qgds-icon-alert-cancel);
-    }
-
-    .abc-icon-login {
-      background-image: var(--qgds-icon-identity);
-    }
-  </code>
-</pre>
-
-<h4>Accessibility</h4>
-<ul>
-  <li>This method is for decorative only. Use <code>aria-hidden="true"</code> to hide the icon from screen readers.</li>
-  <li>Ensure to use it alongside text or other elements that provide context for screen readers users.</li>
-</ul>