energy-foundations 2.4.0 → 2.5.0-beta.1

package/src/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/src/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);
   }

package/src/variables/_grid.scss

@@ -5,7 +5,7 @@ $grid-config: (
   desktop: (max-columns: 12, gap: 24px)
 ) !default;
 
-$grid-config-editorial: (
+$grid-config-b: (
   mobile-v2: (max-columns: 4, gap: 16px),
   tablet-v2: (max-columns: 8, gap: 24px),
   desktop-v2: (max-columns: 12, gap: 24px)

package/src/variables/_typography.scss

@@ -56,7 +56,7 @@ $rds-typography-body-01-bold: (
 );
 
 $rds-typography-body-01-underline: (
-  font: #{calc(16 / $f-base) + rem} / #{calc(21 / $f-base) + rem} $rds-typography-f-text,
+  font: #{calc(16 / $f-base) + rem} / #{calc(24 / $f-base) + rem} $rds-typography-f-text,
 );
 
 $rds-typography-body-02: (
@@ -124,7 +124,7 @@ $rds-typography-headline-00: (
     font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(56 / $f-base) + rem} / #{calc(68 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(64 / $f-base) + rem} / #{calc(80 / $f-base) + rem} $rds-typography-f-headline
@@ -139,7 +139,7 @@ $rds-typography-headline-01: (
     font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(48 / $f-base) + rem} / #{calc(60 / $f-base) + rem} $rds-typography-f-headline
@@ -155,7 +155,7 @@ $rds-typography-headline-02: (
     font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(36 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
@@ -170,7 +170,7 @@ $rds-typography-headline-03: (
     font: #{calc(22 / $f-base) + rem} / #{calc(30 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(24 / $f-base) + rem} / #{calc(32 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(22 / $f-base) + rem} / #{calc(30 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
@@ -265,9 +265,9 @@ $rds-types-all: (
   caption-tag: $rds-typography-caption-tag,
   body-01: $rds-typography-body-01,
   body-02: $rds-typography-body-02,
-  body-01-bold: $rds-typography-body-01-underline,
+  body-01-bold: $rds-typography-body-01-bold,
   body-01-underline: $rds-typography-body-01-underline,
-  body-02-bold: $rds-typography-body-02-underline,
+  body-02-bold: $rds-typography-body-02-bold,
   body-02-underline: $rds-typography-body-02-underline,
   button-01: $rds-typography-button-01,
   button-02: $rds-typography-button-02,

package/src/variables.css

@@ -28,7 +28,7 @@
   --rds-body-01: 1rem/1.5rem RepsolSoleTextRegular;
   --rds-body-02: 0.875rem/1.25rem RepsolSoleTextRegular;
   --rds-body-01-bold: 1rem/1.5rem RepsolSoleTextBold;
-  --rds-body-01-underline: 1rem/1.3125rem RepsolSoleTextRegular;
+  --rds-body-01-underline: 1rem/1.5rem RepsolSoleTextRegular;
   --rds-body-02-bold: 0.875rem/1.25rem RepsolSoleTextBold;
   --rds-body-02-underline: 0.875rem/1.25rem RepsolSoleTextRegular;
   --rds-button-01: 1rem/1.5rem RepsolSoleTextBold;
@@ -44,19 +44,19 @@
   --rds-title-01: 1.125rem/1.625rem RepsolSoleTextBold;
   --rds-title-02: 1rem/1.5rem RepsolSoleTextBold;
   --rds-headline-00-sd: 2.5rem/3rem RepsolSoleDisplayRegular;
-  --rds-headline-00-md: 3.5rem/4.25rem RepsolSoleDisplayRegular;
+  --rds-headline-00-md: 2.5rem/3rem RepsolSoleDisplayRegular;
   --rds-headline-00-ld: 4rem/5rem RepsolSoleDisplayRegular;
   --rds-headline-00-xd: 4.5rem/5.75rem RepsolSoleDisplayRegular;
   --rds-headline-01-sd: 2rem/2.5rem RepsolSoleDisplayRegular;
-  --rds-headline-01-md: 2.5rem/3rem RepsolSoleDisplayRegular;
+  --rds-headline-01-md: 2rem/2.5rem RepsolSoleDisplayRegular;
   --rds-headline-01-ld: 3rem/3.75rem RepsolSoleDisplayRegular;
   --rds-headline-01-xd: 3.5rem/4.25rem RepsolSoleDisplayRegular;
   --rds-headline-02-sd: 1.75rem/2.25rem RepsolSoleDisplayRegular;
-  --rds-headline-02-md: 2rem/2.5rem RepsolSoleDisplayRegular;
+  --rds-headline-02-md: 1.75rem/2.25rem RepsolSoleDisplayRegular;
   --rds-headline-02-ld: 2.25rem/3rem RepsolSoleDisplayRegular;
   --rds-headline-02-xd: 2.75rem/3.5rem RepsolSoleDisplayRegular;
   --rds-headline-03-sd: 1.375rem/1.875rem RepsolSoleDisplayRegular;
-  --rds-headline-03-md: 1.5rem/2rem RepsolSoleDisplayRegular;
+  --rds-headline-03-md: 1.375rem/1.875rem RepsolSoleDisplayRegular;
   --rds-headline-03-ld: 1.75rem/2.25rem RepsolSoleDisplayRegular;
   --rds-headline-03-xd: 2rem/2.5rem RepsolSoleDisplayRegular;
   --rds-headline-04-sd: 1.125rem/1.625rem RepsolSoleDisplayRegular;