@qhealth-design-system/core 1.18.4 → 1.19.0

package/.storybook/globals.js

@@ -18,11 +18,11 @@ export const viewports = {
 };
 
 export const themes = {
-    white: "qld__body qld__grid",
-    light: "qld__body qld__body--light qld__light",
-    "light alt": "qld__body qld__body--alt qld__light-alt",
-    dark: "qld__body qld__body--dark qld__dark",
-    "dark alt": "qld__body qld__body--dark-alt qld__dark-alt",
+    white: "js qld__body qld__grid",
+    light: "js qld__body qld__body--light qld__light",
+    "light alt": "js qld__body qld__body--alt qld__light-alt",
+    dark: "js qld__body qld__body--dark qld__dark",
+    "dark alt": "js qld__body qld__body--dark-alt qld__dark-alt",
 };
 
 export const themeColours = {
@@ -37,54 +37,52 @@ export const figmaLinks = {
     masterDoc: {
         file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23529-440999&t=y8LMLpCtTxOgtHpT-0",
     },
-    ctaLink: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=cifVNWBzJL4yUQOx-0",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395565&t=cifVNWBzJL4yUQOx-0",
-        ds: "https://www.designsystem.qld.gov.au/components/call-to-action-cta",
-    },
-    inPageAlert: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98125&p=f&t=y8LMLpCtTxOgtHpT-0",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395551&t=h9SPYdoJV6KCygCT-0",
-        ds: "https://www.designsystem.qld.gov.au/components/alerts-in-page",
-    },
-    tags: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97596&p=f&t=y8LMLpCtTxOgtHpT-0",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395550&t=y8LMLpCtTxOgtHpT-0",
-        ds: "https://www.designsystem.qld.gov.au/components/tags",
+    backToTop: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321317&p=f&t=A5RGn3vQ6cEyXHw7-0",
+        ds: "https://www.designsystem.qld.gov.au/components/back-to-top",
     },
-    selectBox: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321345&p=f&t=Zn3A2cka0rRnj1UP-0",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395571&t=nEqRcloGJuj1X51X-0",
-        ds: "https://www.designsystem.qld.gov.au/components/input-fields-select-box",
+    checkboxes: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321348&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components/checkboxes",
     },
-    videoPlayer: {
-        design: "https://www.figma.com/design/twruQlAG4NzIQl1hgjK8HS/QH-QGDS-185--Video-Component-Update?node-id=2074-8711&p=f&t=7NFZrbjBSzKMVAcZ-0",
-        file: "https://www.figma.com/design/twruQlAG4NzIQl1hgjK8HS/QH-QGDS-185--Video-Component-Update?node-id=2074-8711&p=f&t=7NFZrbjBSzKMVAcZ-0",
-        ds: "https://www.designsystem.qld.gov.au/components",
+    ctaLink: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components/call-to-action-cta",
     },
     directionLinks: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395560",
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f&t=WmKMIp3MbkVrYkUf-0",
         ds: "https://www.designsystem.qld.gov.au/components/direction-links",
     },
+    inPageAlert: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98125&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components/alerts-in-page",
+    },
     linkColumns: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395563",
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=WmKMIp3MbkVrYkUf-0",
         ds: "https://www.designsystem.qld.gov.au/components/link-columns-link-list",
     },
-    checkboxes: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321348&p=f",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395569",
-        ds: "https://www.designsystem.qld.gov.au/components/checkboxes",
+    pagination: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321779&p=f&t=wdrRF6qJa1fuzxWP-0",
+        ds: "https://www.designsystem.qld.gov.au/components/pagination",
+    },
+    promoPanel: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=ub7vIB4rUQNZ6zzo-0",
+        ds: "https://www.designsystem.qld.gov.au/components/promotional-panel",
     },
     radioButtons: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321347&p=f",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395570",
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321347&p=f&t=kHfUZsyKYuDkprji-0",
         ds: "https://www.designsystem.qld.gov.au/components/radio-buttons",
     },
-    backToTop: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395564&t=0jAqcs3ccQUE8FHh-0",
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395564&t=SuTGfoccLj3mysvx-0",
-        ds: "https://www.designsystem.qld.gov.au/components/back-to-top",
+    selectBox: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321345&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components/input-fields-select-box",
+    },
+    tags: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97596&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components/tags",
+    },
+    videoPlayer: {
+        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=13297-214065&p=f&t=WmKMIp3MbkVrYkUf-0",
+        ds: "https://www.designsystem.qld.gov.au/components",
     },
 };

package/.storybook/main.js

@@ -1,9 +1,10 @@
-/** @type { import('@storybook/html-webpack5').StorybookConfig } */
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+
 const config = {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-webpack5-compiler-swc", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-a11y", "@storybook/addon-viewport", "@storybook/addon-themes", "@storybook/addon-designs"],
+    addons: ["@storybook/addon-a11y", "@storybook/addon-themes", "@storybook/addon-designs", "@storybook/addon-docs"],
     framework: {
-        name: "@storybook/html-webpack5",
+        name: "@storybook/html-vite",
         options: {},
     },
     staticDirs: ["../dist/mysource_files/img", "./core-assets", "./assets"],

package/.storybook/preview.js

@@ -1,9 +1,8 @@
-import "./core-assets/handlebar-helpers.js";
-import "./core-assets/main.js";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import "./assets/index.js"; // Storybook assets import
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 import { viewports, themes, themeColours } from "./globals.js";
 
-/** @type { import('@storybook/html').Preview } */
+/** @type { import('@storybook/html-vite').Preview } */
 const preview = {
     parameters: {
         controls: {
@@ -23,7 +22,7 @@ const preview = {
             },
         },
         viewport: {
-            viewports: {
+            options: {
                 ...viewports,
                 ...INITIAL_VIEWPORTS,
             },
@@ -34,29 +33,28 @@ const preview = {
             },
         },
         backgrounds: {
-            default: "White",
-            values: [
-                {
+            options: {
+                white: {
                     name: "White",
                     value: themeColours["white"],
                 },
-                {
+                light: {
                     name: "Light",
                     value: themeColours["light"],
                 },
-                {
+                light_alternate: {
                     name: "Light Alternate",
                     value: themeColours["light alt"],
                 },
-                {
+                dark: {
                     name: "Dark",
                     value: themeColours["dark"],
                 },
-                {
+                dark_alternate: {
                     name: "Dark Alternate",
                     value: themeColours["dark alt"],
                 },
-            ],
+            },
         },
     },
     args: {

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.19.0 - 2026-01-15
+
 ## 1.18.4 - 2025-11-24
 
 ## 1.18.3 - 2025-11-20

package/README.md

@@ -558,4 +558,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE. 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.18.4",
+    "version": "1.19.0",
     "description": "",
     "licence": "MIT",
     "main": "index.js",
@@ -26,24 +26,18 @@
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.22.5",
         "@babel/preset-react": "^7.22.5",
-        "@storybook/addon-a11y": "^8.6.12",
-        "@storybook/addon-designs": "^8.2.1",
-        "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-interactions": "^8.6.12",
-        "@storybook/addon-themes": "^8.6.12",
-        "@storybook/addon-viewport": "^8.6.12",
-        "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-        "@storybook/blocks": "^8.6.12",
-        "@storybook/html": "^8.6.12",
-        "@storybook/html-webpack5": "^8.6.12",
-        "@storybook/test": "^8.6.12",
+        "@storybook/addon-a11y": "^10.1.10",
+        "@storybook/addon-designs": "^11.1.0",
+        "@storybook/addon-docs": "^10.1.10",
+        "@storybook/addon-themes": "^10.1.10",
+        "@storybook/html-vite": "^10.1.10",
         "autoprefixer": "^10.4.14",
-        "chromatic": "^11.28.2",
+        "chromatic": "^13.3.4",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.31.0",
         "css-loader": "^5.2.6",
         "eslint": "^8.43.0",
-        "eslint-plugin-storybook": "^0.12.0",
+        "eslint-plugin-storybook": "^10.1.10",
         "eslint-webpack-plugin": "^4.0.1",
         "glob": "^7.2.0",
         "handlebars": "^4.7.8",
@@ -56,7 +50,7 @@
         "postcss-loader": "^7.3.3",
         "sass": "^1.63.6",
         "sass-loader": "^13.3.2",
-        "storybook": "^8.6.12",
+        "storybook": "^10.1.10",
         "string-replace-loader": "^3.1.0",
         "style-loader": "^3.3.3",
         "stylelint": "^15.9.0",
@@ -65,6 +59,7 @@
         "stylelint-webpack-plugin": "^4.1.1",
         "terser-webpack-plugin": "^5.3.9",
         "url-loader": "^4.1.1",
+        "vite": "^7.2.6",
         "webpack": "^5.88.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"

package/src/component-loader.js

@@ -0,0 +1,23 @@
+// Standard components
+import initHeader from "./components/header/js/global.js";
+import initInPageNavigation from "./components/in_page_navigation/js/global.js";
+import initInternalNavigation from "./components/internal_navigation/js/global.js";
+import initLeftHandNav from "./components/left_hand_navigation/js/global.js";
+import initPromoPanel from "./components/promo_panel/js/global.js";
+import initVideoPlayer from "./components/video_player/js/global.js";
+
+// Global components
+import initSelectBoxes from "./components/_global/js/select_boxes/global.js";
+
+// Adding ES module initialisation for components
+export default function initComponents() {
+    document.addEventListener("DOMContentLoaded", () => {
+        initHeader(document);
+        initInPageNavigation(document);
+        initInternalNavigation(document);
+        initLeftHandNav(document);
+        initPromoPanel(document);
+        initSelectBoxes(document);
+        initVideoPlayer(document);
+    });
+}

package/src/components/_global/css/body/component.scss

@@ -582,7 +582,7 @@ form {
 
         > dt {
             @include QLD-space(margin-top, 1.5unit);
-            font-weight: bold;
+            font-weight: $QLD-font-weight-semibold;
 
             &:first-of-type {
                 margin-top: 0;
@@ -769,7 +769,7 @@ form {
     .qld__block-quote {
         @include QLD-fontgrid(md, small);
         color: var(--QLD-color-light__heading);
-        font-weight: 600;
+        font-weight: $QLD-font-weight-semibold;
 
         .qld__quote-source {
             @include QLD-fontgrid(xs, small);
@@ -798,7 +798,7 @@ form {
 
     .qld__caption {
         @include QLD-fontgrid(xs);
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
         color: var(--QLD-color-light__text--lighter);
     }
     *:not([type="hidden"]) {

package/src/components/_global/css/btn/component.scss

@@ -72,7 +72,7 @@
             color: var(--QLD-color-light__text--lighter);
             box-shadow: none;
             border-color: transparent;
-            font-weight: 400;
+            font-weight: $QLD-font-weight-regular;
             text-decoration: none;
 
             .qld__icon {

package/src/components/_global/css/cta_links/component.scss

@@ -5,7 +5,7 @@
 .qld__cta-link,
 a.qld__cta-link {
     @include QLD-fontgrid(md);
-    font-weight: bold;
+    font-weight: $QLD-font-weight-semibold;
     color: var(--QLD-color-light__link);
     z-index: 1;
 
@@ -44,7 +44,7 @@ a.qld__cta-link {
 
         &:disabled,
         &[disabled] {
-            font-weight: bold;
+            font-weight: $QLD-font-weight-semibold;
             &::after {
                 @include QLD-space(margin, 0 0.5unit 0 0.5unit);
             }

package/src/components/_global/css/example/component.scss

@@ -4,51 +4,43 @@
 
 .qld__body {
     .qld__example {
-        @include QLD-space(margin-top, 2unit);    
-        
+        @include QLD-space(margin-top, 2unit);
+
         @include QLD-media(lg) {
             @include QLD-space(margin-top, 0.1875unit);
         }
-        
+
         &__title {
             background-color: var(--QLD-color-light__background--shade);
             display: inline-block;
-            @include QLD-space(
-                border,
-                solid var(--QLD-color-light__border) 0.0625unit
-            );
+            @include QLD-space(border, solid var(--QLD-color-light__border) 0.0625unit);
             @include QLD-space(padding, 0.375unit 0.5unit);
-            font-weight: normal;
+            font-weight: $QLD-font-weight-regular;
         }
-        
+
         &__iframe,
         &__inline {
             display: block;
             width: 100%;
-            @include QLD-space(
-                border,
-                solid 0.0625unit var(--QLD-color-light__border--alt)
-            );
+            @include QLD-space(border, solid 0.0625unit var(--QLD-color-light__border--alt));
         }
-        
+
         &__inline {
             @include QLD-space(padding, 1unit);
 
-            .qld__body{
+            .qld__body {
                 margin-left: 0 !important;
                 margin-right: 0 !important;
             }
         }
-        
+
         &__html {
             @include QLD-space(padding, 1unit 0);
         }
     }
-   
+
     * + .qld__example {
         @include QLD-space(margin-top, 2unit);
         @include QLD-space(margin-bottom, 2unit);
-
     }
 }
-

package/src/components/_global/css/forms/control_inputs/component.scss

@@ -14,7 +14,7 @@ input[type="checkbox"],
         vertical-align: bottom;
         @include QLD-space(line-height, 2unit);
         @include QLD-space(padding-left, 2.5unit);
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
 
         &:before {
             @include QLD-space(width, 2unit);
@@ -176,7 +176,7 @@ input[type="radio"],
     @extend .sr-only;
 
     + label {
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
         cursor: pointer;
         position: relative;
         @include QLD-space(line-height, 2unit);

package/src/components/_global/css/forms/general/component.scss

@@ -17,7 +17,7 @@
 legend.sq-form-section-title {
     @include QLD-space(padding-top, 2unit);
     @include QLD-fontgrid(lg, heading);
-    font-weight: bold;
+    font-weight: $QLD-font-weight-semibold;
     color: var(--QLD-color-light__heading);
 
     + * {
@@ -34,7 +34,7 @@ legend,
 legend.sq-form-question-title {
     margin-bottom: 0;
     padding: 0;
-    font-weight: 600;
+    font-weight: $QLD-font-weight-semibold;
 }
 
 //Label
@@ -42,7 +42,7 @@ legend.sq-form-question-title {
 label {
     color: var(--QLD-color-light__text);
     display: block;
-    font-weight: 600;
+    font-weight: $QLD-font-weight-semibold;
     line-height: 1.5rem;
 
     @include QLD-media(lg) {
@@ -70,7 +70,7 @@ label {
         font-size: 0.875rem;
         display: inline-block;
         margin-left: 0.25rem;
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
     }
 
     & + .qld__select,
@@ -283,7 +283,7 @@ span.qld__input--success {
 p.qld__input--error,
 span.qld__input--error p.sq-form-error {
     font-family: $QLD-font;
-    font-weight: bold;
+    font-weight: $QLD-font-weight-semibold;
     @include QLD-fontgrid(sm, default);
     color: $QLD-color-status__error;
     display: block;

package/src/components/_global/css/headings/component.scss

@@ -34,9 +34,9 @@
     .qld__display-lg,
     .qld__display-md,
     .qld__display-sm,
-    .qld__display-xs{
+    .qld__display-xs {
         font-family: $QLD-font;
-        font-weight: 600;
+        font-weight: $QLD-font-weight-semibold;
         margin: 0;
         color: var(--QLD-color-light__heading);
     }
@@ -63,8 +63,8 @@
         .qld__display-lg,
         .qld__display-md,
         .qld__display-sm,
-        .qld__display-xs{
-           color: var(--QLD-color-dark__heading);
+        .qld__display-xs {
+            color: var(--QLD-color-dark__heading);
         }
     }
 
@@ -75,7 +75,7 @@
     * Also ref. https://github.com/govau/design-system-components/issues/282
     */
 
-    h1{
+    h1 {
         @include QLD-fontgrid(xl, heading);
 
         @include QLD-media(lg) {
@@ -83,8 +83,8 @@
         }
     }
 
-    h2{
-        @include QLD-space(font-size, 1.75unit); 
+    h2 {
+        @include QLD-space(font-size, 1.75unit);
         @include QLD-space(line-height, 2.25unit);
 
         @include QLD-media(lg) {
@@ -92,85 +92,84 @@
         }
     }
 
-    h3{
+    h3 {
         @include QLD-fontgrid(lg, heading);
     }
 
-    h4{
+    h4 {
         @include QLD-fontgrid(md, heading);
     }
 
-    h5{
+    h5 {
         @include QLD-fontgrid(sm, heading);
     }
 
-    h6{
+    h6 {
         @include QLD-fontgrid(xs, heading);
     }
 
-    .qld__display-xxxl{
+    .qld__display-xxxl {
         font-size: $QLD-font-size-mobile-xxxl;
-    
+
         @include QLD-media(lg) {
             font-size: $QLD-font-size-desktop-xxxl;
         }
     }
-    
-    .qld__display-xxl{
+
+    .qld__display-xxl {
         font-size: $QLD-font-size-mobile-xxl;
-    
+
         @include QLD-media(lg) {
             font-size: $QLD-font-size-desktop-xxl;
         }
     }
-    
-    .qld__display-xl{
+
+    .qld__display-xl {
         font-size: $QLD-font-size-mobile-xl;
-    
+
         @include QLD-media(lg) {
             font-size: $QLD-font-size-desktop-xl;
         }
     }
-    
-    .qld__display-lg{
+
+    .qld__display-lg {
         font-size: $QLD-font-size-mobile-lg;
-    
+
         @include QLD-media(lg) {
             font-size: $QLD-font-size-desktop-lg;
         }
     }
-    
-    .qld__display-md{
+
+    .qld__display-md {
         font-size: $QLD-font-size-mobile-md;
-    
+
         @include QLD-media(lg) {
-            font-size: $QLD-font-size-desktop-md; 
+            font-size: $QLD-font-size-desktop-md;
         }
     }
-    
-    .qld__display-sm{
+
+    .qld__display-sm {
         font-size: $QLD-font-size-mobile-sm;
-    
+
         @include QLD-media(lg) {
             font-size: $QLD-font-size-desktop-sm;
         }
     }
-    
-    .qld__display-xs{
-       font-size: $QLD-font-size-mobile-xs;
-    
-       @include QLD-media(lg) {
-        font-size: $QLD-font-size-desktop-xs;
+
+    .qld__display-xs {
+        font-size: $QLD-font-size-mobile-xs;
+
+        @include QLD-media(lg) {
+            font-size: $QLD-font-size-desktop-xs;
         }
-    
     }
 
     /**
     * Default margin-top
     */
 
-    *:not([type="hidden"]){
-        + .qld__display-xxxl{
+    *:not([type="hidden"]) {
+        + .qld__display-xxxl {
             @include QLD-space(margin-top, 2.5unit);
 
             @include QLD-media(lg) {
@@ -187,7 +186,7 @@
         }
 
         + h1,
-        + .qld__display-xl{
+        + .qld__display-xl {
             @include QLD-space(margin-top, 2unit);
 
             @include QLD-media(lg) {
@@ -196,7 +195,7 @@
         }
 
         + .qld__display-lg,
-        + h2{
+        + h2 {
             @include QLD-space(margin-top, 2unit);
 
             @include QLD-media(lg) {
@@ -205,7 +204,7 @@
         }
 
         + .qld__display-md,
-        + h3{
+        + h3 {
             @include QLD-space(margin-top, 2unit);
 
             @include QLD-media(lg) {
@@ -214,7 +213,7 @@
         }
 
         + .qld__display-sm,
-        + h4{
+        + h4 {
             @include QLD-space(margin-top, 1.25unit);
 
             @include QLD-media(lg) {
@@ -224,7 +223,7 @@
 
         + .qld__display-xs,
         + h5,
-        + h6{
+        + h6 {
             @include QLD-space(margin-top, 1.25unit);
 
             @include QLD-media(lg) {
@@ -233,4 +232,3 @@
         }
     }
 }
-