Migrate to latest Sass modules

thibaudcolas · thibaudcolas · commit 38ab01c7c0fb · 2025-07-02T05:59:10.000+01:00
diff --git a/demo/core/templates/patterns/components/InfoBox/InfoBox.scss b/demo/core/templates/patterns/components/InfoBox/InfoBox.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 $spacing--mobile: 20px;
 $spacing--desktop: 40px;
 
diff --git a/demo/core/templates/patterns/components/LoadingIndicator/LoadingIndicator.scss b/demo/core/templates/patterns/components/LoadingIndicator/LoadingIndicator.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 @keyframes spinner-animation {
   0% {
     opacity: 1;
diff --git a/demo/core/templates/patterns/components/accordion/accordion.scss b/demo/core/templates/patterns/components/accordion/accordion.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 // Note that these styles are also used by the streamfield faq block
 .accordion {
   $root: &;
diff --git a/demo/core/templates/patterns/components/banner/split_banner.scss b/demo/core/templates/patterns/components/banner/split_banner.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .split-banner {
   $root: &;
   background-color: $color--light-blue;
diff --git a/demo/core/templates/patterns/components/button/button.scss b/demo/core/templates/patterns/components/button/button.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .button {
   background-color: transparent;
   background-image: none;
@@ -11,7 +13,9 @@
   text-align: center;
   border: 1px solid transparent;
   font-weight: 600;
-  transition: background-color $transition, color $transition;
+  transition:
+    background-color $transition,
+    color $transition;
 
   &--small {
     font-size: 0.75rem;
diff --git a/demo/core/templates/patterns/components/cta/call_to_action.scss b/demo/core/templates/patterns/components/cta/call_to_action.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .call-to-action {
   $root: &;
   @include pattern-bg($percentage: 32%, $size: auto, $direction: 320deg);
diff --git a/demo/core/templates/patterns/components/cta/cta_section.scss b/demo/core/templates/patterns/components/cta/cta_section.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .cta-section {
   $root: &;
   @include pattern-bg($percentage: 35%, $size: auto, $direction: to top);
diff --git a/demo/core/templates/patterns/components/customers/customer-detail.scss b/demo/core/templates/patterns/components/customers/customer-detail.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .user-detail {
   background-color: $color--white;
   padding: 45px 20px;
diff --git a/demo/core/templates/patterns/components/customers/customers-header.scss b/demo/core/templates/patterns/components/customers/customers-header.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .customers-header {
   position: relative;
   background-color: $color--pale-blue;
@@ -33,16 +35,14 @@
     }
 
     input[type='search'] {
-      @include placeholder-text() {
-        color: $color--dark-grey;
-        opacity: 1;
-      }
       border-radius: 3px;
       border: 1px solid $color--mid-blue;
       padding: 7px 35px 7px 15px;
       color: $color--dark-grey;
       width: 100%;
-      transition: border-color $transition, background-color $transition;
+      transition:
+        border-color $transition,
+        background-color $transition;
 
       @include media-query(tablet-portrait) {
         min-width: 300px;
diff --git a/demo/core/templates/patterns/components/customers/customers-table.scss b/demo/core/templates/patterns/components/customers/customers-table.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 $cl-table-pad: 35px;
 $cl-cell-margin: 20px;
 
@@ -77,7 +79,9 @@ $cl-cell-margin: 20px;
           vertical-align: -1px;
           opacity: 0;
           transform: translateX(-1px);
-          transition: opacity 150ms, transform $transition;
+          transition:
+            opacity 150ms,
+            transform $transition;
         }
 
         &:hover {
diff --git a/demo/core/templates/patterns/components/icon/icon.scss b/demo/core/templates/patterns/components/icon/icon.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .icon {
   width: 20px;
   height: 20px;
diff --git a/demo/core/templates/patterns/components/pagination/next_stage_link.scss b/demo/core/templates/patterns/components/pagination/next_stage_link.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .stage-link {
   &__inner {
     display: grid;
diff --git a/demo/core/templates/patterns/components/streamfield/casestudy_teaser_block.scss b/demo/core/templates/patterns/components/streamfield/casestudy_teaser_block.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .teaser-card {
   $root: &;
 
@@ -29,7 +31,9 @@
     @include box-border-backdrop();
     width: 100%;
     height: auto;
-    transition: box-shadow $transition, transform $transition;
+    transition:
+      box-shadow $transition,
+      transform $transition;
   }
 
   &__title {
diff --git a/demo/core/templates/patterns/components/streamfield/quote_block.scss b/demo/core/templates/patterns/components/streamfield/quote_block.scss
@@ -1,3 +1,5 @@
+@use '../../../../../static_src/sass/abstracts/tools' as *;
+
 .quote-block {
   $dash-base: 25px;
   color: $color--pink;
@@ -25,7 +27,9 @@
 
   &__quote {
     color: $color--off-black;
-    font: 600 1.602rem/2rem proxima-nova, sans-serif;
+    font:
+      600 1.602rem/2rem proxima-nova,
+      sans-serif;
 
     &::after {
       content: '\201D';
@@ -34,7 +38,14 @@
   &__attribution {
     color: $color--blue;
     letter-spacing: 0;
-    font: 300 1.266rem/1.75rem system-ui, -apple-system, Segoe UI, Roboto,
-      Ubuntu, Cantarell, Noto Sans, sans-serif;
+    font:
+      300 1.266rem/1.75rem system-ui,
+      -apple-system,
+      Segoe UI,
+      Roboto,
+      Ubuntu,
+      Cantarell,
+      Noto Sans,
+      sans-serif;
   }
 }
diff --git a/demo/static_src/main.scss b/demo/static_src/main.scss
@@ -1,32 +1,27 @@
 // Vendor
-@import './sass/vendor/normalize';
-
-// Abstracts
-@import './sass/abstracts/variables';
-@import './sass/abstracts/functions';
-@import './sass/abstracts/mixins';
+@use 'sass/vendor/normalize';
 
 // Base
-@import './sass/base/base';
-@import './sass/base/typography';
-@import './sass/base/wrapper';
-@import './sass/base/section';
+@use 'sass/base/base';
+@use 'sass/base/typography';
+@use 'sass/base/wrapper';
+@use 'sass/base/section';
 
 // Components
-@import '../core/templates/patterns/components/icon/icon';
-@import '../core/templates/patterns/components/button/button';
-@import '../core/templates/patterns/components/accordion/accordion';
-@import '../core/templates/patterns/components/banner/split_banner';
-@import '../core/templates/patterns/components/cta/call_to_action';
-@import '../core/templates/patterns/components/cta/cta_section';
-@import '../core/templates/patterns/components/customers/customer-detail';
-@import '../core/templates/patterns/components/customers/customers-header';
-@import '../core/templates/patterns/components/customers/customers-table';
-@import '../core/templates/patterns/components/InfoBox/InfoBox';
-@import '../core/templates/patterns/components/LoadingIndicator/LoadingIndicator';
-@import '../core/templates/patterns/components/pagination/next_stage_link';
-@import '../core/templates/patterns/components/streamfield/casestudy_teaser_block';
-@import '../core/templates/patterns/components/streamfield/quote_block';
+@use '../core/templates/patterns/components/icon/icon';
+@use '../core/templates/patterns/components/button/button';
+@use '../core/templates/patterns/components/accordion/accordion';
+@use '../core/templates/patterns/components/banner/split_banner';
+@use '../core/templates/patterns/components/cta/call_to_action';
+@use '../core/templates/patterns/components/cta/cta_section';
+@use '../core/templates/patterns/components/customers/customer-detail';
+@use '../core/templates/patterns/components/customers/customers-header';
+@use '../core/templates/patterns/components/customers/customers-table';
+@use '../core/templates/patterns/components/InfoBox/InfoBox';
+@use '../core/templates/patterns/components/LoadingIndicator/LoadingIndicator';
+@use '../core/templates/patterns/components/pagination/next_stage_link';
+@use '../core/templates/patterns/components/streamfield/casestudy_teaser_block';
+@use '../core/templates/patterns/components/streamfield/quote_block';
 
 // Utilities
-@import './sass/utilities/utilities';
+@use 'sass/utilities/utilities';
diff --git a/demo/static_src/sass/abstracts/_functions.scss b/demo/static_src/sass/abstracts/_functions.scss
diff --git a/demo/static_src/sass/abstracts/_mixins.scss b/demo/static_src/sass/abstracts/_mixins.scss
@@ -1,3 +1,18 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'variables' as *;
+
+// Strip the unit from the given value and return the value
+@function strip-unit($value) {
+  @return math.div($value, $value * 0 + 1);
+}
+
+// Return an em unit based on the pixel value and context
+@function rem($px, $context: $base-font-size) {
+  @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
+}
+
 /* ------------------------------------ *\
     $MIXINS
 \* ------------------------------------ */
@@ -8,8 +23,8 @@
 @mixin media-query($queries...) {
   @each $query in $queries {
     @each $breakpoint in $breakpoints {
-      $name: nth($breakpoint, 1);
-      $declaration: nth($breakpoint, 2);
+      $name: list.nth($breakpoint, 1);
+      $declaration: list.nth($breakpoint, 2);
 
       @if $query == $name and $declaration {
         @media only screen and #{$declaration} {
@@ -20,19 +35,6 @@
   }
 }
 
-/* ============================================
-  Placeholder text
-*/
-@mixin placeholder-text() {
-  &.placeholder {
-    @content;
-  }
-
-  &::placeholder {
-    @content;
-  }
-}
-
 /* ============================================
   Hide text
 */
@@ -53,11 +55,11 @@
 
   @each $value in $values {
     @if $value == 0 or $value == auto or $value == inherit {
-      $px: append($px, $value);
-      $rem: append($rem, $value);
+      $px: list.append($px, $value);
+      $rem: list.append($rem, $value);
     } @else {
-      $px: append($px, $value);
-      $rem: append($rem, rem(strip-unit($value)));
+      $px: list.append($px, $value);
+      $rem: list.append($rem, rem(strip-unit($value)));
     }
   }
   #{$property}: $px;
@@ -68,7 +70,7 @@
     Font sizes
 */
 @mixin font-size($keyword) {
-  $size: map-get($font-sizes, $keyword);
+  $size: map.get($font-sizes, $keyword);
 
   @if $size == null {
     @warn 'Font size ‘#{$keyword}’ does not exist';
diff --git a/demo/static_src/sass/abstracts/_tools.scss b/demo/static_src/sass/abstracts/_tools.scss
@@ -0,0 +1,2 @@
+@forward 'mixins';
+@forward 'variables';
diff --git a/demo/static_src/sass/abstracts/_variables.scss b/demo/static_src/sass/abstracts/_variables.scss
@@ -21,8 +21,9 @@ $color--border: $color--light-grey;
 
 // --------------------------------- Fonts --------------------------------------
 
-$font--primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-  Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$font--primary:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 $font--secondary: $font--primary;
 
diff --git a/demo/static_src/sass/base/_base.scss b/demo/static_src/sass/base/_base.scss
@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use '../abstracts/tools' as *;
+
 /* ------------------------------------ *\
 	$BASE DEFAULTS
 \* ------------------------------------ */
@@ -62,7 +65,7 @@ a {
   transition: color $transition;
 
   &:hover {
-    color: darken($color--blue, 20%);
+    color: color.adjust($color--blue, $lightness: -20%);
     cursor: pointer;
   }
 }
diff --git a/demo/static_src/sass/base/_section.scss b/demo/static_src/sass/base/_section.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/tools' as *;
+
 .section {
   &--main {
     max-width: $wrapper--small;
diff --git a/demo/static_src/sass/base/_typography.scss b/demo/static_src/sass/base/_typography.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/tools' as *;
+
 /* ============================================
     Base font
 */
@@ -12,7 +14,7 @@ html {
 /* ============================================
     Families – one mixin per typeface
     :: For each font mixin defined here, make sure each property is negated (set
-    :: to its default value, usually `inherit`) in all other font mixins.
+    :: to its default value, usually `inherit`) in all other font 
 */
 @mixin heading-text() {
   font-family: $font--primary;
diff --git a/demo/static_src/sass/base/_wrapper.scss b/demo/static_src/sass/base/_wrapper.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/tools' as *;
+
 .wrapper {
   &--small {
     max-width: $wrapper--small;
diff --git a/demo/static_src/sass/utilities/_utilities.scss b/demo/static_src/sass/utilities/_utilities.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/tools' as *;
+
 .u-visually-hidden {
   @include hidden();
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`$spacing--mobile: 20px;`
`2`	`4`	`$spacing--desktop: 40px;`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`@keyframes spinner-animation {`
`2`	`4`	`0% {`
`3`	`5`	`opacity: 1;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`// Note that these styles are also used by the streamfield faq block`
`2`	`4`	`.accordion {`
`3`	`5`	`$root: &;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`.split-banner {`
`2`	`4`	`$root: &;`
`3`	`5`	`background-color: $color--light-blue;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`.call-to-action {`
`2`	`4`	`$root: &;`
`3`	`5`	`@include pattern-bg($percentage: 32%, $size: auto, $direction: 320deg);`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`.cta-section {`
`2`	`4`	`$root: &;`
`3`	`5`	`@include pattern-bg($percentage: 35%, $size: auto, $direction: to top);`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../../static_src/sass/abstracts/tools' as *;`
	`2`	`+`
`1`	`3`	`.user-detail {`
`2`	`4`	`background-color: $color--white;`
`3`	`5`	`padding: 45px 20px;`