feat: allow breakpoints to be overriden by products (#3599)

* feat: allow breakpoints to be overriden by products This makes overriding the breakpoint settings possible in products that use the design system. `@use` requires you to explicitly override variables when you import a module, rather than respecting what the global state of the `@use`d file is. This changes ensures that the global values of the breakpoints are respected at all layers of the ITCSS triangle, allowing products to override the breakpoint variables as they wish. * docs: changelog
citizensadvice · Feb 4, 2025 · 7c44c32 · 7c44c32
1 parent 303eb3e
commit 7c44c32
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+**Fix**
+- Make breakpoints configurable by products
+
+
 ## v6.4.0
 
 ### 22 January 2025

diff --git a/scss/2-tools/_breakpoints.scss b/scss/2-tools/_breakpoints.scss
@@ -1,12 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
-@use '../1-settings/breakpoints' as breakpoint-settings;
+@import '../1-settings/breakpoints';
 
 // Name of the next breakpoint (null for the last one)
 @function cads-breakpoint-next(
   $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints,
-  $breakpoint-names: map.keys(breakpoint-settings.$cads-breakpoints)
+  $breakpoints: $cads-breakpoints,
+  $breakpoint-names: map.keys($cads-breakpoints)
 ) {
   $n: list.index($breakpoint-names, $name);
 
@@ -18,31 +18,22 @@
 }
 
 // Minimum breakpoint width (null for the first one)
-@function cads-breakpoint-min(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@function cads-breakpoint-min($name, $breakpoints: $cads-breakpoints) {
   $min: map.get($breakpoints, $name);
 
   @return if($min != 0, $min, null);
 }
 
 // Maximum breakpoint width (null for the last one)
-@function cads-breakpoint-max(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@function cads-breakpoint-max($name, $breakpoints: $cads-breakpoints) {
   $next: cads-breakpoint-next($name, $breakpoints);
 
   @return if($next, cads-breakpoint-min($next, $breakpoints) - 0.02px, null);
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin cads-media-breakpoint-up(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@mixin cads-media-breakpoint-up($name, $breakpoints: $cads-breakpoints) {
   $min: cads-breakpoint-min($name, $breakpoints);
 
   @if $min {
@@ -56,10 +47,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin cads-media-breakpoint-down(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@mixin cads-media-breakpoint-down($name, $breakpoints: $cads-breakpoints) {
   $max: cads-breakpoint-max($name, $breakpoints);
 
   @if $max {
@@ -76,7 +64,7 @@
 @mixin cads-media-breakpoint-between(
   $lower,
   $upper,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
+  $breakpoints: $cads-breakpoints
 ) {
   $min: cads-breakpoint-min($lower, $breakpoints);
   $max: cads-breakpoint-max($upper, $breakpoints);
@@ -99,10 +87,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply ONLY to the given breakpoint.
-@mixin cads-media-breakpoint-only(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@mixin cads-media-breakpoint-only($name, $breakpoints: $cads-breakpoints) {
   $min: cads-breakpoint-min($name, $breakpoints);
   $max: cads-breakpoint-max($name, $breakpoints);
 
@@ -122,9 +107,6 @@
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
-@function cads-breakpoint-infix(
-  $name,
-  $breakpoints: breakpoint-settings.$cads-breakpoints
-) {
+@function cads-breakpoint-infix($name, $breakpoints: $cads-breakpoints) {
   @return if(cads-breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
 }
diff --git a/scss/2-tools/_typography.scss b/scss/2-tools/_typography.scss
@@ -1,10 +1,10 @@
-@use '../2-tools/breakpoints' as breakpoints;
+@import '../2-tools/breakpoints';
 
 @mixin cads-typographic-scale-text() {
   font-size: 1.125rem;
   line-height: 1.75rem;
 
-  @include breakpoints.cads-media-breakpoint-down(sm) {
+  @include cads-media-breakpoint-down(sm) {
     font-size: 1rem;
     line-height: 1.625rem;
   }
@@ -14,7 +14,7 @@
   font-size: 1rem;
   line-height: 1.625rem;
 
-  @include breakpoints.cads-media-breakpoint-down(sm) {
+  @include cads-media-breakpoint-down(sm) {
     font-size: 0.875rem;
     line-height: 1.5rem;
   }

diff --git a/scss/7-utilities/_visibility.scss b/scss/7-utilities/_visibility.scss
@@ -1,6 +1,6 @@
-@use '../1-settings/breakpoints' as breakpoint-settings;
-@use '../2-tools/breakpoints' as breakpoint-tools;
 @use '../2-tools/visibility' as visibility-tools;
+@import '../1-settings/breakpoints';
+@import '../2-tools/breakpoints';
 
 // @define hide
 .cads-hide {
@@ -41,7 +41,7 @@
 .cads-show-md-up {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(md) {
+  @include cads-media-breakpoint-up(md) {
     display: inherit !important;
   }
 }
@@ -50,7 +50,7 @@
 .cads-show-md-down {
   display: inherit !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(md) {
+  @include cads-media-breakpoint-up(md) {
     display: none !important;
   }
 }
@@ -59,14 +59,14 @@
 .cads-show-md-only {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-only(md) {
+  @include cads-media-breakpoint-only(md) {
     display: inherit !important;
   }
 }
 
 // @define hide-md-up
 .cads-hide-md-up {
-  @include breakpoint-tools.cads-media-breakpoint-up(md) {
+  @include cads-media-breakpoint-up(md) {
     display: none !important;
   }
 }
@@ -75,14 +75,14 @@
 .cads-hide-md-down {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(md) {
+  @include cads-media-breakpoint-up(md) {
     display: inherit !important;
   }
 }
 
 // @define hide-md-only
 .cads-hide-md-only {
-  @include breakpoint-tools.cads-media-breakpoint-only(md) {
+  @include cads-media-breakpoint-only(md) {
     display: none !important;
   }
 }
@@ -91,7 +91,7 @@
 .cads-show-lg-up {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(lg) {
+  @include cads-media-breakpoint-up(lg) {
     display: inherit !important;
   }
 }
@@ -100,7 +100,7 @@
 .cads-show-lg-down {
   display: inherit !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(lg) {
+  @include cads-media-breakpoint-up(lg) {
     display: none !important;
   }
 }
@@ -109,14 +109,14 @@
 .cads-show-lg-only {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-only(lg) {
+  @include cads-media-breakpoint-only(lg) {
     display: inherit !important;
   }
 }
 
 // @define hide-lg-up
 .cads-hide-lg-up {
-  @include breakpoint-tools.cads-media-breakpoint-up(lg) {
+  @include cads-media-breakpoint-up(lg) {
     display: none !important;
   }
 }
@@ -125,14 +125,14 @@
 .cads-hide-lg-down {
   display: none !important;
 
-  @include breakpoint-tools.cads-media-breakpoint-up(lg) {
+  @include cads-media-breakpoint-up(lg) {
     display: inherit !important;
   }
 }
 
 // @define hide-lg-only
 .cads-hide-lg-only {
-  @include breakpoint-tools.cads-media-breakpoint-only(lg) {
+  @include cads-media-breakpoint-only(lg) {
     display: none !important;
   }
 }