energy-foundations 2.4.0 → 2.5.0-beta.1

package/dist/mixins/_layout.scss

@@ -1,31 +1,194 @@
+@use 'sass:list';
 @use 'sass:map';
+@use 'sass:selector';
+@use 'sass:string';
+@use '../variables/grid' as *;
 @use '../variables/layout' as *;
+@use 'breakpoint-fixed' as *;
 
-// Responsive media queries
+$_layout-b-keys: (
+  mobile: mobile-v2,
+  tablet: tablet-v2,
+  desktop: desktop-v2,
+  desktop-large: desktop-large-v2,
+  ultrawide: ultrawide-v2
+);
+
+$_layout-conditions: (
+  a: ":not([data-rds-layout='b'])",
+  b: "[data-rds-layout='b']"
+);
+
+// Layout resolved by an enclosing breakpoint; nested calls reuse it instead of adding a second body context.
+$_active-layout: null;
+
+// Responsive media queries that follow the layout declared on body[data-rds-layout].
+// Semantic keys use Layout A by default and their *-v2 values with body[data-rds-layout='b'].
+// Explicit *-v2 and custom keys are fixed media queries.
 // use:
 //  .element {
-//    @include breakpoint(mobile|tablet|desktop|desktop-large|ultrawide){
+//    @include breakpoint(mobile|tablet|desktop|desktop-large|ultrawide) {
+//      ...
+//    }
+//  }
+// or at the root:
+//  @include breakpoint(tablet) {
+//    .element {
 //      ...
 //    }
-//   }
+//  }
 @mixin breakpoint($breakpoint) {
-  $value: map.get($breakpoints, $breakpoint);
+  @if map.has-key($_layout-b-keys, $breakpoint) {
+    $layout-b-key: map.get($_layout-b-keys, $breakpoint);
+
+    @if not map.get($breakpoints, $breakpoint) or not map.get($breakpoints, $layout-b-key) {
+      @error 'Missing layout A/B values for breakpoint: #{$breakpoint}.';
+    }
 
-  // If the key exists in the map
-  @if $value {
-    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
-      @media (max-width: $value) {
+    @if $_active-layout == a {
+      @include fixed-breakpoint($breakpoint) {
         @content;
       }
-    } @else {
-      @media (min-width: $value) {
+    } @else if $_active-layout == b {
+      @include fixed-breakpoint($layout-b-key) {
         @content;
       }
+    } @else {
+      @include _layout-context(a) {
+        @include fixed-breakpoint($breakpoint) {
+          @content;
+        }
+      }
+
+      @include _layout-context(b) {
+        @include fixed-breakpoint($layout-b-key) {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @include fixed-breakpoint($breakpoint) {
+      @content;
+    }
+  }
+}
+
+@mixin _layout-context($layout) {
+  $previous-layout: $_active-layout;
+  $condition: map.get($_layout-conditions, $layout);
+
+  @if $previous-layout == $layout {
+    // Already resolved by an enclosing breakpoint: do not add a second body condition.
+    @content;
+  } @else if $previous-layout {
+    // Nested inside the other layout: these rules can never match.
+  } @else if & {
+    $_active-layout: $layout !global;
+
+    @at-root #{_contextualize(&, $condition)} {
+      @content;
+    }
+  } @else {
+    $_active-layout: $layout !global;
+
+    // At the root the context prefixes the selectors written inside the content.
+    :where(body#{$condition}) {
+      @content;
     }
   }
 
-  // If the key doesn't exist in the map
-  @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map.";
+  $_active-layout: $previous-layout !global;
+}
+
+// Page container that follows the layout declared on body[data-rds-layout].
+// Layout A: 16/24/32px gutters and 1600px max width. Layout B: up to 72px gutters and 1584px max width.
+// use:
+//  .portal-main {
+//    @include layout-max;
+//  }
+@mixin layout-max {
+  @if not & {
+    @error 'layout-max must be included inside a selector, e.g. `.portal-main { @include layout-max; }`.';
+  }
+
+  padding: 0 $g-padding-mobile;
+
+  @include breakpoint(tablet) {
+    padding: 0 $g-padding-tablet;
   }
+
+  @include breakpoint(desktop) {
+    padding: 0 $g-padding-desktop;
+  }
+
+  @include _layout-context(a) {
+    @include fixed-breakpoint(ultrawide) {
+      margin: 0 auto;
+      max-width: 1600px;
+      padding: 0 $g-padding-ultrawide;
+    }
+  }
+
+  @include _layout-context(b) {
+    @include fixed-breakpoint(desktop-large-v2) {
+      padding: 0 72px;
+    }
+
+    @include fixed-breakpoint(ultrawide-v2) {
+      margin: 0 auto;
+      max-width: 1584px;
+      padding: 0 72px;
+    }
+  }
+}
+
+// The condition is checked on the selected element itself, so other conditions such as `.dark` or `[dir='rtl']`
+// keep working when they live on body or html. It is inserted at the start of the last compound (after a type
+// selector), so `&--modifier`, `&__element` and pseudo-elements can still be appended by the content.
+@function _contextualize($selector, $condition) {
+  $result: ();
+
+  @each $complex in selector.parse($selector) {
+    $subject: list.nth($complex, -1);
+    $check: ':where(body#{$condition}, body#{$condition} *)';
+
+    @if _starts-with-type($subject, 'html') or _starts-with-type($subject, ':root') {
+      // html and :root are never inside body: they check their child body, which requires :has().
+      $check: ':where(:has(> body#{$condition}))';
+    }
+
+    $result: list.append($result, list.set-nth($complex, -1, _insert-after-type($subject, $check)), $separator: comma);
+  }
+
+  @return $result;
+}
+
+// A type or universal selector must stay first in a compound selector.
+@function _insert-after-type($compound, $check) {
+  $compound: '#{$compound}';
+  $position: 1;
+
+  @if not string.index('.#[:', string.slice($compound, 1, 1)) {
+    @while $position <= string.length($compound) and not string.index('.#[:', string.slice($compound, $position, $position)) {
+      $position: $position + 1;
+    }
+  }
+
+  @return string.unquote(string.insert($compound, $check, $position));
+}
+
+@function _starts-with-type($compound, $type) {
+  $compound: string.to-lower-case('#{$compound}');
+
+  @if string.index($compound, $type) != 1 {
+    @return false;
+  }
+
+  @if string.length($compound) == string.length($type) {
+    @return true;
+  }
+
+  $next: string.slice($compound, string.length($type) + 1, string.length($type) + 1);
+
+  @return not string.index('abcdefghijklmnopqrstuvwxyz0123456789-_', $next);
 }

package/dist/mixins/_typography.scss

@@ -3,7 +3,7 @@
 
 @use '../variables/typography' as *;
 @use '../mixins/utils' as *;
-@use '../mixins/layout' as *;
+@use '../mixins/breakpoint-fixed' as *;
 
 @mixin numeric-typography($name) {
   @if string.index($name, 'numbers') {
@@ -34,7 +34,7 @@
   }
 }
 
-// Include font styles. Three versions: ld, sd or fluid
+// Include font styles. Mobile, Desktop or responsive.
 // use:
 //  .element {
 //    @include rds-font-style(rds-typography-headline-1);
@@ -70,22 +70,37 @@
 
 @mixin rds-font-style($name) {
   @if map.has-key($rds-types-fluid, $name) {
-  
     @include rds-font-style-sd($name);
 
-
-    @include breakpoint(tablet) {
+    @include fixed-breakpoint(tablet) {
       @include rds-font-style-md($name);
     }
 
-    @include breakpoint(desktop) {
+    @include fixed-breakpoint(desktop) {
       @include rds-font-style-ld($name);
     }
 
-    @include breakpoint(ultrawide) {
+    @include fixed-breakpoint(ultrawide) {
       @include rds-font-style-xd($name);
     }
-    
+
+    :where(body[data-rds-layout='b']) & {
+      @include fixed-breakpoint(tablet) {
+        @include rds-font-style-sd($name);
+      }
+
+      @include fixed-breakpoint(tablet-v2) {
+        @include rds-font-style-md($name);
+      }
+
+      @include fixed-breakpoint(desktop-v2) {
+        @include rds-font-style-ld($name);
+      }
+
+      @include fixed-breakpoint(ultrawide-v2) {
+        @include rds-font-style-xd($name);
+      }
+    }
   } @else {
     @include rds-font-style-sd($name);
   }