@qhealth-design-system/core 1.6.0 → 1.7.1

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.7.1 - 2024-06-20
+
+## 1.7.0 - 2024-06-19
+
 ## 1.6.0 - 2024-06-07
 
 ## 1.5.0 - 2024-05-07

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "",
   "licence": "MIT",
   "main": "index.js",

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

@@ -38,7 +38,7 @@ main,
 #content,
 form {
      .qld__body {
-        @include QLD-container-padding($QLD-container-padding-mobile);
+        @include QLD-container-padding($QLD-padding__section--mobile);
 
         + .pb-0 {
             @include QLD-space(padding-bottom, 0); 
@@ -61,9 +61,9 @@ form {
             }
 
             &.qld__body--light, &.qld__body--alt, &.qld__body--dark, &.qld__body--dark-alt {
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-container-padding-desktop);
+                    @include QLD-container-padding($QLD-padding__section--desktop);
                 }
             }
         }
@@ -80,9 +80,9 @@ form {
             + data + .qld__body,
             + h1.sr-only + .qld__body,
             + h1.sr-only + data + .qld__body {
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-container-padding-desktop);
+                    @include QLD-container-padding($QLD-padding__section--desktop);
                 }
             }
         }
@@ -99,9 +99,9 @@ form {
             + data + .qld__body,
             + h1.sr-only + .qld__body,
             + h1.sr-only + data + .qld__body {
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-container-padding-desktop);
+                    @include QLD-container-padding($QLD-padding__section--desktop);
                 }
             }
         }
@@ -118,9 +118,9 @@ form {
             + data + .qld__body,
             + h1.sr-only + .qld__body,
             + h1.sr-only + data + .qld__body {
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-container-padding-desktop);
+                    @include QLD-container-padding($QLD-padding__section--desktop);
                 }
             }
         }
@@ -137,14 +137,14 @@ form {
             + data + .qld__body,
             + h1.sr-only + .qld__body,
             + h1.sr-only + data + .qld__body {
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-container-padding-desktop);
+                    @include QLD-container-padding($QLD-padding__section--desktop);
                 }
             }
         }
         @include QLD-media(lg) {
-            @include QLD-container-padding($QLD-container-padding-desktop);
+            @include QLD-container-padding($QLD-padding__section--desktop);
         }
                 
         
@@ -154,8 +154,8 @@ form {
         
         //Align the body when within a two col layout/ content page
         #content[class^="col-"] > .qld__body {
-            @include QLD-container-margin($QLD-grid-gutter-sm, neg, horizontal );
-            @include QLD-container-padding($QLD-container-padding-mobile);
+            @include QLD-container-margin($QLD-grid__gutter--media-sm, neg, horizontal );
+            @include QLD-container-padding($QLD-padding__section--mobile);
 
             &.qld__tab-section {
                 @include QLD-media(lg) {
@@ -164,8 +164,8 @@ form {
             }
 
             @include QLD-media(md) {
-                @include QLD-container-margin($QLD-grid-gutter-md, neg, horizontal );
-                @include QLD-container-padding($QLD-grid-gutter-sm, horizontal );
+                @include QLD-container-margin($QLD-grid__gutter--media-md, neg, horizontal );
+                @include QLD-container-padding($QLD-grid__gutter--media-sm, horizontal );
                 
             }
 
@@ -175,7 +175,7 @@ form {
                 @include QLD-space(padding-left, 0unit);
                 @include QLD-space(padding-right, 0unit);
                 // @include QLD-container-margin($QLD-grid-gutter-xs, neg, horizontal );
-                @include QLD-container-padding($QLD-container-padding-mobile);
+                @include QLD-container-padding($QLD-padding__section--mobile);
             }
 
             &:first-of-type{
@@ -192,11 +192,11 @@ form {
                 &.qld__body--dark,
                 &.qld__body--dark-alt{
                     @include QLD-space(padding-top, 2.5unit);
-                    // @include QLD-container-padding($QLD-container-padding-mobile, !important);
+                    // @include QLD-container-padding($QLD-padding__section--mobile, !important);
 
                     @include QLD-media(lg) {
                         @include QLD-space(padding-top, 4unit);
-                        // @include QLD-container-padding($QLD-container-padding-desktop, !important);
+                        // @include QLD-container-padding($QLD-padding__section--desktop, !important);
                     }
                 }
             }
@@ -209,19 +209,19 @@ form {
                 &.qld__body--alt,
                 &.qld__body--dark,
                 &.qld__body--dark-alt{
-                    @include QLD-container-padding($QLD-container-padding-mobile, !important);
+                    @include QLD-container-padding($QLD-padding__section--mobile, !important);
 
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop !important);
+                        @include QLD-container-padding($QLD-padding__section--desktop !important);
                     }
                 }
                 
             }
 
             .container-fluid {
-                @include QLD-container-padding($QLD-grid-inner-container-mobile, horizontal );
+                @include QLD-container-padding($QLD-grid__inner-padding--media-xs, horizontal );
                 @include QLD-media(lg) {
-                    @include QLD-container-padding($QLD-grid-inner-container-desktop, horizontal );
+                    @include QLD-container-padding($QLD-grid__inner-padding--media-lg, horizontal );
                 }
             }
 
@@ -233,9 +233,9 @@ form {
                 }
                 
                 &.qld__body--light, &.qld__body--alt, &.qld__body--dark, &.qld__body--dark-alt{
-                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-container-padding($QLD-padding__section--mobile);
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop);
+                        @include QLD-container-padding($QLD-padding__section--desktop);
                     }
                 }
             }
@@ -248,9 +248,9 @@ form {
                 }
                 + .qld__body,
                 + data + .qld__body{
-                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-container-padding($QLD-padding__section--mobile);
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop);
+                        @include QLD-container-padding($QLD-padding__section--desktop);
                     }
                 }
             }
@@ -263,9 +263,9 @@ form {
                 }
                 + .qld__body,
                 + data + .qld__body{
-                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-container-padding($QLD-padding__section--mobile);
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop);
+                        @include QLD-container-padding($QLD-padding__section--desktop);
                     }
                 }
             }
@@ -278,9 +278,9 @@ form {
                 }
                 + .qld__body,
                 + data + .qld__body{
-                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-container-padding($QLD-padding__section--mobile);
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop);
+                        @include QLD-container-padding($QLD-padding__section--desktop);
                     }
                 }
             }
@@ -293,9 +293,9 @@ form {
                 }
                 + .qld__body,
                 + data + .qld__body{
-                    @include QLD-container-padding($QLD-container-padding-mobile);
+                    @include QLD-container-padding($QLD-padding__section--mobile);
                     @include QLD-media(lg) {
-                        @include QLD-container-padding($QLD-container-padding-desktop);
+                        @include QLD-container-padding($QLD-padding__section--desktop);
                     }
                 }
             }
@@ -338,9 +338,11 @@ form {
         @include QLD-space(max-width, $QLD-font-maxwidth);
         @include QLD-focus();
     }
-    ol:not(*),
-    ul:not(*){
-        @include QLD-space(max-width, $QLD-font-maxwidth);
+    ol:not([class]),
+    ul:not([class]),
+    .qld__margin-t-li--sm,
+    .qld__margin-t-li--lg {
+        @include QLD-space(max-width, 75ch);
     }
 
     p {
@@ -360,7 +362,7 @@ form {
         }
     }
 
-    p + p {
+    p + p, ul + p, p + ul {
         @include QLD-space(margin-top, 1unit);
     }
 
@@ -405,7 +407,11 @@ form {
 
     ul:not([class]),
     ol:not([class]),
+    ol.qld__aligned-list, 
+    ul.qld__aligned-list,
     dl:not([class]),
+    .qld__margin-t-li--sm,
+    .qld__margin-t-li--lg,
     pre {
         margin: 0; //reset defaults
     }
@@ -421,21 +427,30 @@ form {
     }
 
     * + ol:not([class]),
-    * + ul:not([class]) {
+    * + ul:not([class]),
+    * + ol.qld__aligned-list, 
+    * + ul.qld__aligned-list {
         @include QLD-space(margin-top, 1.5unit);
     }
 
     p + ol:not([class]),
-    p + ul:not([class]) {
+    p + ul:not([class]),
+    p + ol.qld__aligned-list, 
+    p + ul.qld__aligned-list {
         @include QLD-space(margin-top, 1unit);
     }
 
-    ul:not([class]) {
+    ul:not([class]),
+    ul.qld__aligned-list,
+    .qld__margin-t-li--sm,
+    .qld__margin-t-li--lg {
         @include QLD-space(padding-inline-start, 2unit);
         > li {
             @include QLD-space(margin-top, 0.5unit);
             
-            > ul:not([class]) {
+            > ul:not([class]),
+            .qld__margin-t-li--sm,
+            .qld__margin-t-li--lg {
                 list-style-type: none;
                 @include QLD-space(padding-inline-start, 1unit);
                 > li {
@@ -443,7 +458,9 @@ form {
                     @include QLD-space(margin-top, 0.5unit);
                     position: relative;
 
-                    > ul:not([class]) {
+                    > ul:not([class]),
+                    .qld__margin-t-li--sm,
+                    .qld__margin-t-li--lg {
                         @include QLD-space(padding-inline-start, 1unit);
                         > li {
                             @include QLD-space(margin-top, 0.5unit);
@@ -472,7 +489,8 @@ form {
         }
     }
 
-    ol:not([class]) {
+    ol:not([class]),
+    ol.qld__aligned-list {
         @include QLD-space(padding-inline-start, 2unit);
         > li {
             @include QLD-space(margin-top, 0.5unit);
@@ -501,18 +519,71 @@ form {
     }
     
     ol:not([class]),
-    ul:not([class]) {
+    ul:not([class]),
+    ol.qld__aligned-list, 
+    ul.qld__aligned-list,
+    .qld__margin-t-li--sm,
+    .qld__margin-t-li--lg {
         li {
             @include QLD-space(line-height, 1.75unit);
         }
     }
-    
+
+    ol.qld__aligned-list, 
+    ul.qld__aligned-list {
+        @include QLD-space(padding-left, 1.5unit); 
+    }
+
+    ol.qld__numbered-list {
+        counter-reset: li;
+        list-style-type: none;
+        padding-left: 0px;
+        padding-inline-start: 0;
+        * + & {
+            @include QLD-space(margin-top, 1.5unit);
+        }
+
+        li + li {
+            @include QLD-space(margin-top, 0.75unit);
+        }
+
+        li {
+            position: relative;
+            @include QLD-space(padding-left, 2.5unit);
+            @include QLD-space(max-width, 75ch);
+            font-size: 1.094rem;
+            line-height: 1.75rem;
+            letter-spacing: 0.02rem;
+            padding-top: 0.4rem;
+        }
+
+        li:before {
+            display: inline-flex;
+            justify-content: center;
+            content: counter(li);
+            counter-increment: li;
+            @include QLD-space(height, 1.75unit);
+            @include QLD-space(width, 1.75unit);
+            border: 1px solid $QLD-color-neutral--lighter;
+            border-radius: 50%;
+            background-color: $QLD-color-neutral--lightest;
+            color: var(--QLD-color-light__heading);
+            align-items: center;
+            position: absolute;
+            left: 0;
+            font-size: 1em;
+            font-variant-numeric: proportional-nums;
+        }
+    }
+
+
     dl:not([class]) {
         > dd {
             @include QLD-space(margin-top, 0.5unit);
             @include QLD-space(padding-left, 0.5unit);
             margin-left: 0;
             border-left: solid 1px;
+            max-width: $QLD-font-maxwidth;
         }
         
         > dt {
@@ -758,6 +829,14 @@ form {
         samp {
             background-color: var(--QLD-color-light__background--shade);
         }
+
+        ol.qld__numbered-list {
+            li:before {
+                border: 1px solid var(--QLD-color-light__border);
+                background-color: var(--QLD-color-light__background--shade);
+                color: var(--QLD-color-light__heading);
+            }
+        }
     }
 
     &.qld__body--alt {
@@ -772,6 +851,14 @@ form {
         samp {
             background-color: var(--QLD-color-light__background--alt-shade);
         }
+
+        ol.qld__numbered-list {
+            li:before {
+                border: 1px solid var(--QLD-color-light__border--alt);
+                background-color: var(--QLD-color-light__background--alt-shade);
+                color: var(--QLD-color-light__heading);
+            }
+        }
     }
     
     &.qld__body--dark,
@@ -830,13 +917,19 @@ form {
         blockquote,
         .qld__block-quote {
             color: var(--QLD-color-dark__heading);
-            border-left: $QLD-border-width-thick solid var(--QLD-color-dark__design-accent);
-
             .qld__quote-source {
                 color: var(--QLD-color-dark__text--lighter);
             }
             
         }
+
+        ol.qld__numbered-list {
+            li:before {
+                border: 1px solid var(--QLD-color-dark__border);
+                background-color: var(--QLD-color-dark__background--shade);
+                color: var(--QLD-color-dark__heading);
+            }
+        }
     }
     
     &.qld__body--dark-alt,
@@ -894,12 +987,18 @@ form {
         blockquote,
         .qld__block-quote {
             color: var(--QLD-color-dark__heading);
-            border-left: $QLD-border-width-thick solid var(--QLD-color-dark__design-accent);
-
             .qld__quote-source {
                 color: var(--QLD-color-dark__text--lighter);
             }
         }
+
+        ol.qld__numbered-list {
+            li:before {
+                border: 1px solid var(--QLD-color-dark__border--alt);
+                background-color: var(--QLD-color-dark__background--alt-shade);
+                color: var(--QLD-color-dark__heading);
+            }
+        }
     }
 
     &.qld__body--half-width {