@progressiveui/styles 10.30.0 → 11.0.0

package/index.scss

@@ -1,7 +1,5 @@
 @forward "scss/config";
-// @forward "scss/colors" hide $white;
 @forward "scss/font-face";
-//TODO: Check @forward 'scss/grid';
 @forward "scss/motion";
 @forward "scss/type";
 @forward "scss/themes";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressiveui/styles",
   "description": "Styles for the WFP Design System",
-  "version": "10.30.0",
+  "version": "11.0.0",
   "license": "Apache-2.0",
   "author": "Robert Gühne <wfp.org>",
   "homepage": "https://www.wfp.org",
@@ -38,5 +38,5 @@
     "@carbon/test-utils": "^10.3.0",
     "css": "^3.0.0"
   },
-  "gitHead": "a5bec728bba7e239d3d00104c0e24d1b13dd554b"
+  "gitHead": "d5135d857e06dd46b8cfad1d77b35a61aed8ce50"
 }

package/scss/_breakpoint.scss

@@ -1,2 +1,191 @@
-@forward "@carbon/grid/scss/modules/breakpoint" show breakpoint,
-  breakpoint-between, breakpoint-down, breakpoint-up;
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@carbon/layout/scss/modules/convert';
+@use './utilities/config-breakpoints' as *;
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+
+/// Get the value of the previous breakpoint, or null for the first breakpoint
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+
+/// Check to see if the given breakpoint name
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @return {Bool}
+/// @access public
+/// @group @carbon/layout
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+
+/// Returns the largest breakpoint name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return -key-by-index($breakpoints, $total-breakpoints);
+}
+
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
+/// @param {String} $name - The name of the breakpoint
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+
+/// Generate a media query from the width of the given breakpoint to infinity
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the maximum width of the given styles
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the range between the lower and upper breakpoints
+/// @param {String | Number} $lower
+/// @param {String | Number} $upper
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+
+/// Generate media query for the largest breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+
+/// Generate a media query for a given breakpoint
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}

package/scss/_carbonMotion.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+
+/// Common component easings
+/// @type Map
+/// @access public
+/// @group @carbon/motion
+$easings: (
+  standard: (
+    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
+  ),
+  entrance: (
+    productive: cubic-bezier(0, 0, 0.38, 0.9),
+    expressive: cubic-bezier(0, 0, 0.3, 1),
+  ),
+  exit: (
+    productive: cubic-bezier(0.2, 0, 1, 0.9),
+    expressive: cubic-bezier(0.4, 0.14, 1, 1),
+  ),
+);
+
+/// Get the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - Can be `standard`, `entrance`, or `exit`
+/// @param {String} $mode [productive] - Can be `productive` or `expressive`
+/// @param {Map} $easings [$carbon--easings] - Easings map
+/// @access public
+/// @group @carbon/motion
+/// @return {Function} CSS `cubic-bezier()` function
+@function motion($name, $mode: productive, $easings: $easings) {
+  @if map.has-key($easings, $name) {
+    $easing: map.get($easings, $name);
+    @if map.has-key($easing, $mode) {
+      @return map.get($easing, $mode);
+    } @else {
+      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
+    }
+  } @else {
+    @error 'Unable to find an easing named #{$name} in our supported easings.';
+  }
+}
+
+/// Set the transition-timing-function for a given easing and motion mode
+/// @param {String} $name - The name of the easing curve to apply
+/// @param {String} $mode - The mode for the easing curve to use
+/// @access public
+/// @group @carbon/motion
+@mixin motion($name, $mode) {
+  transition-timing-function: motion($name, $mode);
+}
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-fast-01: 70ms;
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-fast-02: 110ms;
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-moderate-01: 150ms;
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-moderate-02: 240ms;
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-slow-01: 400ms;
+
+/// @access public
+/// @type Duration
+/// @group @carbon/motion
+$duration-slow-02: 700ms;

package/scss/_motion.scss

@@ -1,12 +1,5 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@forward '@carbon/motion';
-@use '@carbon/motion';
+@forward "./carbonMotion";
+@use "./carbonMotion" as motion;
 
 /// Used primarily for removing elements from the screen
 /// @type Function

package/scss/_type.scss

@@ -1,28 +1,27 @@
 @use "@progressiveui/themes-core/dist/scss/tokensMapDeep" as *;
 @use "@progressiveui/themes-core/dist/scss/tokens" as tokens;
 @use "./breakpoint" as *;
+@use "sass:map";
 
 @mixin reset() {
 }
 
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
 
 $code-font-family: var(--code-font-family);
-//$font-family-primary: var(--font-family-primary);
 
 @mixin font-family($family) {
-  @if $family == "code" {
-    /* font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-      'Courier New', monospace;*/
-    font-family: tokens.$font-family-monospace;
-  } @else {
-    font-family: tokens.$font-family-primary;
-    //font-family: 'Open Sans', Arial, sans-serif;
+  & {
+    @if $family == "code" {
+      font-family: tokens.$font-family-monospace;
+    } @else {
+      font-family: tokens.$font-family-primary;
+    }
   }
 }
 
@@ -31,26 +30,26 @@ $code-font-family: var(--code-font-family);
 
   //@warn 'This is  a step of the WFP Type Scale!', $maped;
   @if map-deep-get($tokens, "typography", $style) {
-    $typographyMap: map-get($tokens, "typography", $style);
-    font-size: map-get($typographyMap, "fontSize");
-    font-weight: map-get($typographyMap, "fontWeight");
-    letter-spacing: map-get($typographyMap, "letterSpacing");
-    text-transform: map-get($typographyMap, "textTransform");
+    $typographyMap: map.get($tokens, "typography", $style);
+    font-size: map.get($typographyMap, "fontSize");
+    font-weight: map.get($typographyMap, "fontWeight");
+    letter-spacing: map.get($typographyMap, "letterSpacing");
+    text-transform: map.get($typographyMap, "textTransform");
 
     @if map-deep-get($tokens, "typography", $style, "md") {
       @include breakpoint-up("md") {
-        $typographyMapMd: map-get($tokens, "typography", $style, "md");
-        font-weight: map-get($typographyMapMd, "fontWeight");
-        letter-spacing: map-get($typographyMapMd, "letterSpacing");
-        text-transform: map-get($typographyMapMd, "textTransform");
+        $typographyMapMd: map.get($tokens, "typography", $style, "md");
+        font-weight: map.get($typographyMapMd, "fontWeight");
+        letter-spacing: map.get($typographyMapMd, "letterSpacing");
+        text-transform: map.get($typographyMapMd, "textTransform");
       }
     }
   }
   /*@if map-has-key($typographyMap, 'body-short-02',$style) {
       @warn 'This is  a step of the WFP Type Scale!';
-      $elements: map-get($tokens, $style);
-      font-family: map-get($elements, 'fontFamily');
-      font-size: map-get($elements, 'fontSize');
+      $elements: map.get($tokens, $style);
+      font-family: map.get($elements, 'fontFamily');
+      font-size: map.get($elements, 'fontSize');
     } @else {
       //@warn 'This is  a step of the WFP Type Scale!';
       //@warn 'This is not a step of the WFP Type Scale!' + $style;
@@ -77,8 +76,8 @@ $typescale-map: (
 );
 
 @mixin typescale($size) {
-  @if map-has-key($typescale-map, $size) {
-    font-size: map-get($typescale-map, $size);
+  @if map.has-key($typescale-map, $size) {
+    font-size: map.get($typescale-map, $size);
   } @else {
     @warn 'This is not a step of the WFP Type Scale!';
   }

package/scss/components/_index.scss

@@ -1,4 +1,4 @@
-@use "accordion";
+/* @use "accordion";
 @use "anchor-navigation";
 @use "auth-layout";
 @use "avatar";
@@ -64,6 +64,7 @@
 @use "tooltip";
 @use "toggle";
 @use "number-input";
+
 @use "radio-button";
 @use "main-navigation";
 @use "wrapper";
@@ -75,6 +76,7 @@
 @use "info-bar";
 @use "item";
 @use "unit";
+
 @use "user";
 @use "value";
 @use "col";

package/scss/components/accordion/_accordion.scss

@@ -57,8 +57,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .szh-accordion {
     @include reset;
     @include font-family("sans");
-    width: 100%;
-    border-bottom: 1px solid $border-strong;
+  
+    & {
+      width: 100%;
+      border-bottom: 1px solid $border-strong;
+    }
     &__item {
       border-top: 1px solid $border-strong;
 
@@ -100,10 +103,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion {
-    @include component-reset.reset;
-
     width: 100%;
     list-style: none;
+    @include component-reset.reset;
   }
 
   .#{$prefix}--accordion__item {

package/scss/components/banner-navigation/_banner-navigation.scss

@@ -10,9 +10,12 @@
 
 @mixin banner-navigation {
   .#{$prefix}--banner-navigation {
-    background: $action-solid-fill-primary-default; //TODO use a new background token for interactive-02
+ 
     @include reset;
-    display: flex;
+    & {
+      display: flex;
+      background: $action-solid-fill-primary-default; 
+    }
     // @include font-smoothing; //added to reset mixin
     @include breakpoint-down("md") {
       display: none;
@@ -36,11 +39,10 @@
   }
 
   .#{$prefix}--banner-navigation__item {
+    padding: 0 $spacing-03;
+    font-size: 0.85rem;
     @include type-style("label");
     @include font-family("sans");
-    padding: 0 $spacing-03;
-
-    font-size: 0.85rem; //TODO: use token
     @include breakpoint("xlg") {
       padding: 0 $spacing-04;
     }

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -10,14 +10,14 @@
 
 @mixin breadcrumb {
   .#{$prefix}--breadcrumb {
-    @include type-style("label-02");
-    @include font-family("sans");
     display: none;
-
     @include breakpoint("sm") {
       display: flex;
       flex-wrap: wrap;
     }
+    @include type-style("label-02");
+    @include font-family("sans");
+  
   }
 
   .#{$prefix}--breadcrumb-home {

package/scss/components/button/_button.scss

@@ -10,6 +10,8 @@
 @use "../../utilities/skeleton" as *;
 @use "../../utilities/rtl" as *;
 @use "../../utilities/visually-hidden" as *;
+
+@use 'sass:color';
 //@use 'tokens' as *;
 
 @mixin button {
@@ -402,8 +404,8 @@
 
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
-    @include skeleton;
     width: calcRem(150px);
+    @include skeleton;
   }
 
   // Legacy button state styling
@@ -426,10 +428,10 @@
 
   .#{$prefix}--btn--navigation {
     @include button-theme(
-      saturate(#34a2d9, 10%),
+      color.scale(#34a2d9, $lightness: 10%),
       transparent,
       $text-inverse-default,
-      saturate(lighten(#34a2d9, 5), 10%),
+      color.scale(#34a2d9, $lightness: 10%),
       $icon-on-color
     );
   }

package/scss/components/button/_mixins.scss

@@ -11,6 +11,7 @@
 @mixin button-base {
   @include reset;
   @include font-family("sans");
+  & {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -28,6 +29,7 @@
   transition-timing-function: ease-in;
   white-space: nowrap;
   line-height: 16px;
+  }
 
   &:disabled {
     cursor: not-allowed;

package/scss/components/card/_card.scss

@@ -121,10 +121,10 @@
 
   .#{$prefix}--photo-cardnew--overlay {
     height: calcRem(300px);
+    box-shadow: none;
     @include breakpoint("lg") {
       height: calcRem(500px);
     }
-    box-shadow: none;
     .#{$prefix}--photo-cardnew__info {
       padding: $spacing-06;
     }

package/scss/components/checkbox/_checkbox.scss

@@ -34,16 +34,15 @@
   }
 
   .#{$prefix}--checkbox-label {
-    @include reset;
-    @include font-family("sans");
-    // @include font-smoothing;
-    @include type-style("label-02");
     display: flex;
     align-items: center;
     cursor: pointer;
     position: relative;
     padding-left: $spacing-06 + 0.1;
     min-height: calcRem(18px);
+    @include reset;
+    @include font-family("sans");
+    @include type-style("label-02");
   }
 
   .#{$prefix}--checkbox-label::before {

package/scss/components/content-switcher/_content-switcher.scss

@@ -20,9 +20,9 @@ $content-switcher-option-border: 2px solid $focus !default;
 
 @mixin content-switcher {
   .#{$prefix}--content-switcher {
-    @include font-family("sans");
     display: flex;
     height: $input-height;
+    @include font-family("sans");
   }
 
   .#{$prefix}--content-switcher--sm {
@@ -37,15 +37,17 @@ $content-switcher-option-border: 2px solid $focus !default;
     @include reset;
     @include type-style("body-short");
     @include font-family("sans");
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-    padding: 0 $spacing-07;
-    margin: 0;
-    font-weight: 600;
-    text-decoration: none;
-    border: 2px solid $action-default-fill-primary-default;
-    color: $action-default-fill-primary-default;
+    & {
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      padding: 0 $spacing-07;
+      margin: 0;
+      font-weight: 600;
+      text-decoration: none;
+      border: 2px solid $action-default-fill-primary-default;
+      color: $action-default-fill-primary-default;
+    }
 
     &:focus {
       outline: 1px solid transparent;
@@ -60,13 +62,6 @@ $content-switcher-option-border: 2px solid $focus !default;
     &:hover {
       cursor: pointer;
     }
-
-    &:hover,
-    &:active {
-      //background-color: $hover-primary;
-      //border-color: $hover-primary;
-      //color: var(--inverse-01);
-    }
   }
 
   .#{$prefix}--content-switcher__icon {

package/scss/components/credits/_credits.scss

@@ -13,9 +13,10 @@
 @mixin credits {
   .#{$prefix}--credits {
     @include reset;
-    position: relative;
-    > img {
-      width: 100%;
+    & { position: relative;
+      > img {
+        width: 100%;
+      }
     }
   }
 

package/scss/components/date-picker/_date-picker.scss

@@ -10,6 +10,7 @@
 @use "../../utilities/high-contrast-mode" as *;
 @use "../../utilities/placeholder-colors" as *;
 @use "../../utilities/skeleton" as *;
+@use 'sass:color';
 
 /// Date picker styles
 /// @access public
@@ -182,7 +183,7 @@ $input-height: 40px !default;
   }
   .SingleDatePicker_closeButton:focus,
   .SingleDatePicker_closeButton:hover {
-    color: darken(#cacccd, 10%);
+    color: color.scale(#cacccd, $lightness: -10%);
     text-decoration: none;
   }
   .SingleDatePicker_closeButton_svg {
@@ -372,7 +373,8 @@ $input-height: 40px !default;
   }
   .CalendarDay__selected_span {
     background: #80bede;
-    border: 1px double darken(#80bede, 5);
+    border: 1px double color.scale(#cacccd, $lightness: -5%);
+    
     color: $text-inverse-default;
   }
   .CalendarDay__selected_span:active,
@@ -881,7 +883,7 @@ $input-height: 40px !default;
   }
   .DateRangePicker_closeButton:focus,
   .DateRangePicker_closeButton:hover {
-    color: darken(#cacccd, 10%);
+    color: color.scale(#cacccd, $lightness: -10%);
     text-decoration: none;
   }
   .DateRangePicker_closeButton_svg {