feat: changed $QLD-border to --QLD-border

qld-gov-au · Jan 15, 2025 · e64e5a4 · e64e5a4
1 parent ae8bf09
commit e64e5a4
Show file tree

Hide file tree

Showing 26 changed files with 342 additions and 352 deletions.
diff --git a/src/components/_global/css/body/component.scss b/src/components/_global/css/body/component.scss
@@ -728,7 +728,7 @@ form {
 
     font-family: $QLD-font-monospace;
     display: inline-block;
-    border-radius: $QLD-border-radius-xs;
+    border-radius: var(--QLD-border-radius-xs);
     background-color: var(--QLD-color-light__background--shade);
     color: var(--QLD-color-light__text);
     @include QLD-space(line-height, 1.25unit);
@@ -810,7 +810,7 @@ form {
 
   .qld__block-quote {
     padding-left: 1.375rem;
-    border-left: $QLD-border-width-thick solid var(--QLD-color-light__design-accent);
+    border-left: var(--QLD-border-width-thick) solid var(--QLD-color-light__design-accent);
     margin: 0;
   }
 

diff --git a/src/components/_global/css/btn/component.scss b/src/components/_global/css/btn/component.scss
@@ -22,8 +22,8 @@
     color: var(--QLD-color-light__link--on-action);
     text-decoration: none;
 
-    border-radius: $QLD-border-radius-xs;
-    border: $QLD-border-width-medium solid var(--QLD-color-light__action--primary);
+    border-radius: var(--QLD-border-radius-xs);
+    border: var(--QLD-border-width-medium) solid var(--QLD-color-light__action--primary);
     text-align: center;
     @include QLD-space(min-width, 8.75unit);
 
@@ -513,7 +513,7 @@
     position: relative;
     min-width: 0;
     @include QLD-space(padding, 0.875unit 0.875unit 0.875unit 0.875unit);
-    border-width: $QLD-border-width-default;
+    border-width: var(--QLD-border-width-default);
 
     @include QLD-media(lg) {
       @include QLD-space(padding, 0.75unit 1.5unit);

diff --git a/src/components/_global/css/forms/control_inputs/component.scss b/src/components/_global/css/forms/control_inputs/component.scss
@@ -28,7 +28,7 @@ input[type="checkbox"],
       background-repeat: no-repeat;
       z-index: 9;
       @include QLD-space(left, 0unit);
-      border: $QLD-border-width-default solid transparent;
+      border: var(--QLD-border-width-default) solid transparent;
       top: 0;
 
       .qld__control-input--small & {
@@ -195,7 +195,7 @@ input[type="radio"],
       background-repeat: no-repeat;
       z-index: 100;
       @include QLD-space(left, 0unit);
-      border: $QLD-border-width-default solid transparent;
+      border: var(--QLD-border-width-default) solid transparent;
       border-radius: 50%;
       top: 0;
 

diff --git a/src/components/_global/css/forms/select/component.scss b/src/components/_global/css/forms/select/component.scss
@@ -8,8 +8,8 @@
 select {
   color: var(--QLD-color-light__text--lighter);
   @include QLD-space(padding, 0.75unit 2unit 0.75unit 1unit);
-  border: $QLD-border-width-default solid var(--QLD-color-light__border--alt);
-  border-radius: $QLD-border-radius-xs;
+  border: var(--QLD-border-width-default) solid var(--QLD-color-light__border--alt);
+  border-radius: var(--QLD-border-radius-xs);
   background-image: QLD-svguri(
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z"/></svg>'
   );
@@ -277,8 +277,8 @@ select {
 
     &:focus {
       background-color: var(--QLD-color-light__background);
-      border-radius: $QLD-border-radius-xs;
-      border: $QLD-border-width-default solid var(--QLD-color-light__border);
+      border-radius: var(--QLD-border-radius-xs);
+      border: var(--QLD-border-width-default) solid var(--QLD-color-light__border);
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       @include QLD-space(padding, 0.75unit 1unit 0.75unit 1unit);

diff --git a/src/components/_global/css/forms/text/component.scss b/src/components/_global/css/forms/text/component.scss
@@ -9,8 +9,8 @@ input[type="date"],
 textarea {
   color: var(--QLD-color-light__text);
   @include QLD-space(padding, 0.75unit 1unit);
-  border-radius: $QLD-border-radius-xs;
-  border: $QLD-border-width-default solid var(--QLD-color-light__border--alt);
+  border-radius: var(--QLD-border-radius-xs);
+  border: var(--QLD-border-width-default) solid var(--QLD-color-light__border--alt);
   background-color: var(--QLD-color-light__background);
   box-sizing: border-box;
   appearance: none;
@@ -96,8 +96,8 @@ textarea {
 
   &:focus {
     background-color: var(--QLD-color-light__background);
-    border-radius: $QLD-border-radius-xs;
-    border: $QLD-border-width-default solid var(--QLD-color-light__border);
+    border-radius: var(--QLD-border-radius-xs);
+    border: var(--QLD-border-width-default) solid var(--QLD-color-light__border);
     &::placeholder {
       color: var(--QLD-color-light__text--lighter);
     }
@@ -245,7 +245,7 @@ textarea {
 
     &:focus {
       background-color: var(--QLD-color-light__background);
-      border: $QLD-border-width-default solid var(--QLD-color-light__border);
+      border: var(--QLD-border-width-default) solid var(--QLD-color-light__border);
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       @include QLD-space(padding, 0.75unit 1unit 0.75unit 1unit);
@@ -434,7 +434,7 @@ select,
 // 	@include QLD-space( height, 3unit );
 //
 
-// 	border-radius: $QLD-border-radius-xs;
+// 	border-radius: var(--QLD-border-radius-xs;
 // 	border: 2px solid #818181;//temp fix to meet accessibility
 //
 

diff --git a/src/components/_global/css/link_columns/component.scss b/src/components/_global/css/link_columns/component.scss
@@ -30,7 +30,7 @@
 
   > li {
     @include QLD-space(padding, 1unit 0.25unit 1unit 0.25unit);
-    box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-neutral--lighter);
+    box-shadow: 0 var(--QLD-border-width-thin) 0 var(--QLD-color-neutral--lighter);
     display: flex;
     justify-content: space-between;
     position: relative;
@@ -92,7 +92,7 @@
       }
 
       justify-content: flex-end;
-      box-shadow: inset 0 0 - $QLD-border-width-thin 0 transparent;
+      box-shadow: inset 0 0 - var(--QLD-border-width-thin) 0 transparent;
       flex: 0 0 100% !important;
 
       &::after {
@@ -131,10 +131,10 @@
 
   .qld__body--light & {
     > li {
-      box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-light__border);
+      box-shadow: 0 var(--QLD-border-width-thin) 0 var(--QLD-color-light__border);
 
       &.qld__link-columns__all-link {
-        box-shadow: 0 $QLD-border-width-thin 0 transparent;
+        box-shadow: 0 var(--QLD-border-width-thin) 0 transparent;
 
         &::after {
           display: none;
@@ -145,10 +145,10 @@
 
   .qld__body--alt & {
     > li {
-      box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-light__border--alt);
+      box-shadow: 0 var(--QLD-border-width-thin) 0 var(--QLD-color-light__border--alt);
 
       &.qld__link-columns__all-link {
-        box-shadow: 0 $QLD-border-width-thin 0 transparent;
+        box-shadow: 0 var(--QLD-border-width-thin) 0 transparent;
 
         &::after {
           display: none;
@@ -160,7 +160,7 @@
   .qld__body--dark &,
   .qld__main-nav--dark & {
     > li {
-      box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-dark__border);
+      box-shadow: 0 var(--QLD-border-width-thin) 0 var(--QLD-color-dark__border);
       a {
         @include QLD-underline("dark", "noUnderline");
       }
@@ -180,7 +180,7 @@
       }
 
       &.qld__link-columns__all-link {
-        box-shadow: 0 $QLD-border-width-thin 0 transparent;
+        box-shadow: 0 var(--QLD-border-width-thin) 0 transparent;
 
         &::after {
           display: none;
@@ -192,7 +192,7 @@
   .qld__body--dark-alt &,
   .qld__main-nav--dark-alt & {
     > li {
-      box-shadow: 0 $QLD-border-width-thin 0 var(--QLD-color-dark__border--alt);
+      box-shadow: 0 var(--QLD-border-width-thin) 0 var(--QLD-color-dark__border--alt);
 
       a {
         @include QLD-underline("dark", "noUnderline");
@@ -214,7 +214,7 @@
       }
 
       &.qld__link-columns__all-link {
-        box-shadow: 0 $QLD-border-width-thin 0 transparent;
+        box-shadow: 0 var(--QLD-border-width-thin) 0 transparent;
 
         &::after {
           display: none;

diff --git a/src/components/_global/css/modal/component.scss b/src/components/_global/css/modal/component.scss
@@ -33,8 +33,8 @@
     transform: translate(-50%, -50%);
     background-color: var(--QLD-color-light__background);
     padding: 1.5rem;
-    border: $QLD-border-width-thin solid var(--QLD-color-light__border);
-    border-radius: $QLD-border-radius-sm;
+    border: var(--QLD-border-width-thin) solid var(--QLD-color-light__border);
+    border-radius: var(--QLD-border-radius-sm);
     @include QLD-box-shadow(4);
     z-index: 101;
 

diff --git a/src/components/_global/css/tags/component.scss b/src/components/_global/css/tags/component.scss
@@ -21,7 +21,7 @@
   @include QLD-space(line-height, 1.5unit);
   color: var(--QLD-color-light__text--lighter);
   border: 1px solid var(--QLD-color-light__border);
-  border-radius: $QLD-border-radius-md;
+  border-radius: var(--QLD-border-radius-md);
   @include QLD-space(margin, 0);
   @include QLD-focus();
   // white-space: nowrap;
@@ -73,7 +73,7 @@
 
     @include QLD-space(font-size, 1unit);
     @include QLD-space(padding, 0.5unit 1unit);
-    border-radius: $QLD-border-radius-lg;
+    border-radius: var(--QLD-border-radius-lg);
   }
 }
 
@@ -221,7 +221,7 @@ a.qld__tag,
 
   @include QLD-space(font-size, 1unit);
   @include QLD-space(padding, 0.5unit 1unit);
-  border-radius: $QLD-border-radius-lg;
+  border-radius: var(--QLD-border-radius-lg);
   text-decoration: none;
   @include QLD-underline("light", "noUnderline", "default");
 

diff --git a/src/components/accordion/css/component.scss b/src/components/accordion/css/component.scss
@@ -3,7 +3,7 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__accordion {
-  border: $QLD-border-width-thin solid var(--QLD-color-light__border);
+  border: var(--QLD-border-width-thin) solid var(--QLD-color-light__border);
   display: block;
   padding: 0;
 
@@ -99,7 +99,7 @@
       }
     }
     & &-wrapper {
-      border-top: $QLD-border-width-thin solid var(--QLD-color-light__border);
+      border-top: var(--QLD-border-width-thin) solid var(--QLD-color-light__border);
       color: var(--QLD-color-light__text);
       background-color: var(--QLD-color-light__background);
       @include QLD-space(padding, 1unit);

diff --git a/src/components/callout/css/component.scss b/src/components/callout/css/component.scss
@@ -6,7 +6,7 @@
   @include QLD-space(padding, 1.5unit 1unit 1.5unit 1.5unit);
   background-color: var(--QLD-color-light__background--shade);
   color: var(--QLD-color-light__text);
-  border-left: $QLD-border-width-thick solid var(--QLD-color-light__design-accent);
+  border-left: var(--QLD-border-width-thick) solid var(--QLD-color-light__design-accent);
   word-wrap: break-word;
   @include QLD-space(max-width, $QLD-font-maxwidth);