Switch variables and mixins to global scope

wagtail · Nov 22, 2024 · 106daac · 106daac
1 parent bbced3c
commit 106daac
Show file tree

Hide file tree

Showing 76 changed files with 722 additions and 722 deletions.
diff --git a/wagtailio/static/sass/abstracts/_mixins.scss b/wagtailio/static/sass/abstracts/_mixins.scss
@@ -1,12 +1,12 @@
-@use "variables";
+@use "variables" as *;
 
 @use 'sass:list';
 @use 'sass:map';
 
 // Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
-        @each $breakpoint in variables.$breakpoints {
+        @each $breakpoint in $breakpoints {
             $name: list.nth($breakpoint, 1);
             $declaration: list.nth($breakpoint, 2);
 
@@ -107,7 +107,7 @@
 // z-index
 // Map z-index keys
 @function z-index($key) {
-    @return map.get(variables.$z-index, $key);
+    @return map.get($z-index, $key);
 }
 
 @mixin z-index($key) {
@@ -126,7 +126,7 @@
     }
 
     b {
-        font-weight: variables.$weight--bold;
+        font-weight: $weight--bold;
     }
 
     ul,
@@ -157,4 +157,4 @@
     > :last-child {
         margin-bottom: 0;
     }
-}
+}
diff --git a/wagtailio/static/sass/base/_base.scss b/wagtailio/static/sass/base/_base.scss
@@ -1,4 +1,4 @@
-@use "../abstracts/variables";
+@use "../abstracts/variables" as *;
 
 // Box Sizing
 *,
@@ -9,7 +9,7 @@
 
 // Prevent text size change on orientation change.
 html {
-    font-family: variables.$font--primary;
+    font-family: $font--primary;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

diff --git a/wagtailio/static/sass/base/_container.scss b/wagtailio/static/sass/base/_container.scss
@@ -1,19 +1,19 @@
-@use "../abstracts/mixins";
-@use "../abstracts/variables";
+@use "../abstracts/mixins" as *;
+@use "../abstracts/variables" as *;
 
 .container {
-  max-width: variables.$site-width;
+  max-width: $site-width;
   margin: 0 auto;
-  padding-left: variables.$gutter-sm;
-  padding-right: variables.$gutter-sm;
+  padding-left: $gutter-sm;
+  padding-right: $gutter-sm;
 
-  @include mixins.media-query(medium) {
-    padding-left: variables.$gutter;
-    padding-right: variables.$gutter;
+  @include media-query(medium) {
+    padding-left: $gutter;
+    padding-right: $gutter;
   }
 
-  @include mixins.media-query(large) {
-    padding-left: variables.$gutter-lg;
-    padding-right: variables.$gutter-lg;
+  @include media-query(large) {
+    padding-left: $gutter-lg;
+    padding-right: $gutter-lg;
   }
 }
diff --git a/wagtailio/static/sass/base/_print.scss b/wagtailio/static/sass/base/_print.scss
@@ -1,13 +1,13 @@
-@use "../abstracts/variables";
+@use "../abstracts/variables" as *;
 
 // Print styles
 // stylelint-disable declaration-no-important
 
 @media print {
     * {
         background: transparent !important;
-        color: variables.$color--black !important;
-        border-color: variables.$color--black !important;
+        color: $color--black !important;
+        border-color: $color--black !important;
         box-shadow: none !important;
         text-shadow: none !important;
     }

diff --git a/wagtailio/static/sass/base/_typography.scss b/wagtailio/static/sass/base/_typography.scss
@@ -1,11 +1,11 @@
-@use "../abstracts/mixins";
-@use "../abstracts/variables";
+@use "../abstracts/mixins" as *;
+@use "../abstracts/variables" as *;
 
 html {
     font-size: 1rem;
     line-height: 1.5;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.25rem;
         line-height: 1.6;
     }
@@ -18,7 +18,7 @@ h4,
 h5,
 h6 {
     margin: 0 0 15px;
-    font-weight: variables.$weight--bold;
+    font-weight: $weight--bold;
 }
 
 p {
@@ -40,7 +40,7 @@ h1,
     line-height: 3.375rem;
     letter-spacing: -0.01em;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 3.8rem;
         line-height: 4.8rem;
     }
@@ -51,7 +51,7 @@ h2,
     font-size: 1.7rem;
     line-height: 2.125rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.7rem;
         line-height: 2.3rem;
     }
@@ -62,7 +62,7 @@ h3,
     font-size: 1.375rem;
     line-height: 2.0625rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.5rem;
         line-height: 1.2;
     }
@@ -73,7 +73,7 @@ h4,
     font-size: 1.37rem;
     line-height: 2.063rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.1rem;
         line-height: 1.65rem;
     }
@@ -82,9 +82,9 @@ h4,
 .intro-small {
     font-size: 1.25rem;
     line-height: 1.9375rem;
-    font-weight: variables.$weight--regular;
+    font-weight: $weight--regular;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.25rem;
         line-height: 1.85rem;
     }
@@ -93,9 +93,9 @@ h4,
 .teaser-heading {
     font-size: 1.875rem;
     line-height: 2.125rem;
-    font-weight: variables.$weight--bold;
+    font-weight: $weight--bold;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.5rem;
         line-height: 1.95rem;
     }
@@ -105,7 +105,7 @@ h4,
     font-size: 1rem;
     line-height: 1.5rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1rem;
         line-height: 1.4rem;
     }
@@ -114,10 +114,10 @@ h4,
 .intro-big {
     font-size: 1.5625rem;
     line-height: 2.3125rem;
-    font-weight: variables.$weight--regular;
+    font-weight: $weight--regular;
     margin: 0 0 20px;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 1.7rem;
         line-height: 2.3rem;
     }
@@ -127,21 +127,21 @@ h4,
     font-size: 0.875rem;
     line-height: 1.3125rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 0.7rem;
         line-height: 1.05rem;
     }
 
     &--bold {
-        font-weight: variables.$weight--bold;
+        font-weight: $weight--bold;
     }
 }
 
 .article-heading {
     font-size: 2.25rem;
     line-height: 2.9rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 3.25rem;
         line-height: 3.9rem;
     }
@@ -151,7 +151,7 @@ h4,
     font-size: 1rem;
     line-height: 1.5rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 0.8rem;
         line-height: 1.2rem;
     }
@@ -161,7 +161,7 @@ h4,
     font-size: 0.75rem;
     line-height: 1.125rem;
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         font-size: 0.6rem;
         line-height: 0.9rem;
     }

diff --git a/wagtailio/static/sass/components/_author.scss b/wagtailio/static/sass/components/_author.scss
@@ -1,4 +1,4 @@
-@use "../abstracts/variables";
+@use "../abstracts/variables" as *;
 
 .author {
     $root: &;
@@ -19,19 +19,19 @@
     }
 
     &__name {
-        font-weight: variables.$weight--bold;
+        font-weight: $weight--bold;
         font-size: 16px;
         margin-bottom: 0;
         line-height: 1;
 
         a {
             text-decoration: none;
-            color: variables.$color--off-black;
+            color: $color--off-black;
         }
 
         .blog-post__content & {
             font-size: 14px;
-            font-weight: variables.$weight--regular;
+            font-weight: $weight--regular;
         }
     }
 

diff --git a/wagtailio/static/sass/components/_backer.scss b/wagtailio/static/sass/components/_backer.scss
@@ -1,8 +1,8 @@
-@use "../abstracts/variables";
+@use "../abstracts/variables" as *;
 
 .backer {
     &__link {
-        color: variables.$color--teal;
+        color: $color--teal;
         transition: color 0.3s;
 
         &:hover {

diff --git a/wagtailio/static/sass/components/_backers.scss b/wagtailio/static/sass/components/_backers.scss
@@ -1,15 +1,15 @@
-@use "../abstracts/mixins";
-@use "../abstracts/variables";
+@use "../abstracts/mixins" as *;
+@use "../abstracts/variables" as *;
 
 .backers {
-    @include mixins.sf-spacing(2);
+    @include sf-spacing(2);
     grid-column: 2 / span 2;
 
-    @include mixins.media-query(medium) {
+    @include media-query(medium) {
         grid-column: 2 / span 3;
     }
 
-    @include mixins.media-query(large) {
+    @include media-query(large) {
         grid-column: 3 / span 3;
     }
 
@@ -21,7 +21,7 @@
         &--bronze {
             padding-bottom: 20px;
             margin-bottom: 20px;
-            border-bottom: 2px solid variables.$color--light-grey;
+            border-bottom: 2px solid $color--light-grey;
         }
     }
 
@@ -30,7 +30,7 @@
         grid-template-columns: 1fr;
         gap: 15px;
 
-        @include mixins.media-query(medium) {
+        @include media-query(medium) {
             grid-template-columns: 1fr 1fr 1fr;
         }
     }