@progressiveui/styles 10.30.0 → 11.0.0

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

@@ -12,23 +12,20 @@
 @use "../../utilities/input-base" as *;
 
 @use "./react-datepicker/datepicker.scss" as *;
+@use "sass:color";
 
 /// Date picker styles
 /// @access public
 /// @group date-picker
 
-$datepicker__background-color: $background !default;
+$datepicker__background-color: #000000; //TODO:$background !default;
 $datepicker__border-color: #aeaeae !default;
 $datepicker__highlighted-color: #3dcc4a !default;
 $datepicker__muted-color: $text-body-secondary !default;
 $datepicker__selected-color: #216ba5 !default;
 $datepicker__text-color: $text-body-default !default;
 $datepicker__header-color: $text-body-default !default;
-$datepicker__navigation-disabled-color: lighten(
-  $datepicker__muted-color,
-  10%
-) !default;
-
+$datepicker__navigation-disabled-color: #000000; //TODO: color.scale($datepicker__muted-color, $lightness: 10%) !default;
 $datepicker__border-radius: 0rem !default;
 $datepicker__day-margin: 0.166rem !default;
 $datepicker__font-size: 0.8rem !default;
@@ -52,10 +49,9 @@ $datepicker__triangle-size: 8px !default;
   .#{$prefix}--date-picker__input {
     position: relative;
     input {
-      @include input-base;
       min-width: 10em !important;
       max-width: 10em !important;
-      //padding-left: 2.5em;
+      @include input-base;
     }
   }
   .#{$prefix}--date-picker__icon {
@@ -82,10 +78,9 @@ $datepicker__triangle-size: 8px !default;
   .#{$prefix}--date-ranger-picker__input {
     position: relative;
     input {
-      @include input-base;
       min-width: 10em !important;
       max-width: 10em !important;
-      //padding-left: 2.5em;
+      @include input-base;
     }
   }
   .#{$prefix}--date-ranger-picker__icon {

package/scss/components/date-picker-new/react-datepicker/datepicker.scss

@@ -2,8 +2,8 @@
 @use "../../../motion" as *;
 @use "../../../theme" as *;
 
-@import "variables.scss";
-@import "mixins.scss";
+@use "variables.scss" as *;
+@use "mixins.scss" as *;
 
 .react-datepicker-wrapper {
   display: inline-block;

package/scss/components/date-picker-new/react-datepicker/mixins.scss

@@ -1,6 +1,7 @@
 @use "../../../config" as *;
 @use "../../../motion" as *;
 @use "../../../theme" as *;
+@use "./variables" as *;
 
 %navigation-chevron {
   border-color: $action-default-fill-primary-default;

package/scss/components/file-uploader/_file-uploader.scss

@@ -53,8 +53,8 @@
   // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
   // TODO: deprecate this block
   .#{$prefix}--file-btn {
-    display: inline-flex;
     padding-right: calcRem(64px);
+    display: inline-flex;
     margin: 0;
   }
 
@@ -173,12 +173,11 @@
 
   // TODO: deprecate this block
   .#{$prefix}--file__selected-file--invalid__wrapper {
-    @include focus-outline("invalid");
-
     max-width: calcRem(320px);
     margin-bottom: $spacing-05;
     background-color: $fill-field;
     outline-width: 1px;
+    @include focus-outline("invalid");
   }
 
   .#{$prefix}--file__selected-file--invalid {

package/scss/components/footer/_footer.scss

@@ -28,10 +28,12 @@
   .#{$prefix}--footer {
     @include reset;
     @include font-family("sans");
-    color: $neutral-neutral100-white;
-    background-color: $brand-dark-blue-dark-blue20;
-    z-index: z("footer");
-    padding: calcRem(20px) 0;
+    & {
+      color: $neutral-neutral100-white;
+      background-color: $brand-dark-blue-dark-blue20;
+      z-index: z("footer");
+      padding: calcRem(20px) 0;
+    }
     @media print {
       display: none;
     }
@@ -184,11 +186,10 @@
 
     .#{$prefix}--footer__info {
       order: 1;
+      line-height: 1.5;
       @include breakpoint("md") {
         width: 40%;
       }
-      // @include line-height('body');
-      line-height: 1.5;
     }
 
     .#{$prefix}--footer__cta {

package/scss/components/form/_form.scss

@@ -18,23 +18,25 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--form-item {
-    @include font-family("sans");
     display: flex;
     flex-direction: column;
     flex: 1;
     align-items: flex-start;
+    @include font-family("sans");
   }
 
   .#{$prefix}--label {
     @include reset;
     @include font-family("sans");
     @include type-style("body-short");
-    color: $text-body-default;
-    font-weight: $input-label-weight;
-    font-weight: 600 !important;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: $spacing-03;
+    & {
+      color: $text-body-default;
+      font-weight: $input-label-weight;
+      font-weight: 600 !important;
+      display: inline-block;
+      vertical-align: baseline;
+      margin-bottom: $spacing-03;
+    }
   }
 
   .#{$prefix}--label + .#{$prefix}--form__helper-text {
@@ -68,9 +70,9 @@ $input-label-weight: 400 !default;
 
   // Skeleton State
   .#{$prefix}--label.#{$prefix}--skeleton {
-    @include skeleton;
     width: calcRem(75px);
     height: calcRem(14px);
+    @include skeleton;
   }
 
   input[data-invalid],
@@ -101,15 +103,17 @@ $input-label-weight: 400 !default;
   .#{$prefix}--form-requirement {
     @include reset;
     @include type-style("caption");
-    margin: $spacing-01 0 0;
-    font-weight: 600;
-    font-size: 0.8em;
-    max-height: 0;
-    line-height: 1.5;
-    display: none;
-    order: 3;
-    color: $support-error-main;
-    // TODO: check if there is a better auto sizing for icons
+    & {
+     margin: $spacing-01 0 0;
+      font-weight: 600;
+      font-size: 0.8em;
+      max-height: 0;
+      line-height: 1.5;
+      display: none;
+      order: 3;
+      color: $support-error-main;
+      // TODO: check if there is a better auto sizing for icons
+    }
     > svg {
       width: auto;
       height: 1em;

package/scss/components/hero/_hero.scss

@@ -26,14 +26,8 @@
     width: 100%;
     text-decoration: none;
     height: calcRem(200px);
-    @include breakpoint("lg") {
-      height: calcRem(260px);
-    }
+
     transition: all 0.1s;
-    @include layer(pop-out);
-    &.#{$prefix}--photo-card--link:hover {
-      @include layer(pop-out--hover);
-    }
     color: $text-body-default;
     background-size: cover;
     background-position: 50% 50%;
@@ -41,6 +35,14 @@
     .#{$prefix}--photo-card__info__title {
       margin-top: 0;
     }
+    &.#{$prefix}--photo-card--link:hover {
+      @include layer(pop-out--hover);
+    }
+    @include breakpoint("lg") {
+      height: calcRem(260px);
+    }
+    @include layer(pop-out);
+  
   }
 
   .#{$prefix}--photo-card__background {
@@ -151,9 +153,6 @@
 
   .#{$prefix}--photo-card--hero {
     height: calcRem(300px);
-    @include breakpoint("lg") {
-      height: calcRem(500px);
-    }
     box-shadow: none;
     &.#{$prefix}--photo-card--link:hover {
       box-shadow: none;
@@ -167,6 +166,9 @@
         height: calcRem(500px);
       }
     }
+    @include breakpoint("lg") {
+      height: calcRem(500px);
+    }
   }
 
   .#{$prefix}--photo-card--emergencies,
@@ -285,14 +287,14 @@
     }
     .#{$prefix}--photo-card__info {
       width: 70%;
-      @include breakpoint("md") {
-        width: 50%;
-      }
       left: inherit;
       bottom: 0;
       top: 0;
       right: 0;
       @include text-gradient();
+      @include breakpoint("md") {
+        width: 50%;
+      }
     }
     .#{$prefix}--photo-card__info__title {
       color: $action-default-fill-primary-default;

package/scss/components/link/_link.scss

@@ -20,11 +20,12 @@
   .#{$prefix}--link {
     //@include reset;
     @include font-family("sans");
-    //@include font-smoothing;
-    cursor: pointer;
-    color: $action-default-link-default;
-    text-decoration: none;
-    transition: $transition--base;
+    & {
+      cursor: pointer;
+      color: $action-default-link-default;
+      text-decoration: none;
+      transition: $transition--base;
+    }
 
     &:hover,
     &.#{$prefix}--link--hover {
@@ -70,14 +71,13 @@
   }
 
   .#{$prefix}--link--solid {
-    //@include reset;
     @include font-family("sans");
-    //@include font-smoothing;
-    cursor: pointer;
-    color: $action-solid-link-default;
-    text-decoration: none;
-    transition: $transition--base;
-
+    & {
+      cursor: pointer;
+      color: $action-solid-link-default;
+      text-decoration: none;
+      transition: $transition--base;
+    }
     &:hover,
     &.#{$prefix}--link--solid--hover {
       text-decoration: underline;

package/scss/components/loading/_keyframes.scss

@@ -1,11 +1,4 @@
-//
-// Copyright IBM Corp. 2016, 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.
-//
-
-@import './vars';
+@use './vars' as *;
 
 @keyframes rotate {
   0% {

package/scss/components/main-navigation/_main-navigation.scss

@@ -12,7 +12,7 @@
 @use "../../utilities/high-contrast-mode" as *;
 @use "../../utilities/z-index" as *;
 
-@import "../form";
+@use "../form" as *;
 
 /// @type Number
 /// @access public
@@ -65,12 +65,12 @@ $main-navigation-menu-width: calcRem(300px);
       user-select: none;
       display: flex;
       align-items: center;
+      white-space: nowrap;
       @include breakpoint-down("md") {
         width: 100%;
         justify-content: space-between;
       }
       // justify-content: center; // TODO: Check if needed
-      white-space: nowrap;
 
       > a {
         color: $action-default-link-default; // TODO change to $link_on_color token
@@ -159,13 +159,11 @@ $main-navigation-menu-width: calcRem(300px);
       align-self: flex-start;
       margin-right: 0.5em;
       width: 3.1rem;
+      z-index: 100000;
+      padding: 0.3em 0em;
       @include breakpoint-up("md") {
         width: 4.7rem;
       }
-      //position: absolute;
-      //top: 0;
-      z-index: 100000;
-      padding: 0.3em 0em;
     }
 
     svg {
@@ -232,6 +230,7 @@ $main-navigation-menu-width: calcRem(300px);
   }
 
   .#{$prefix}--main-navigation__item {
+    font-weight: 600;
     @include breakpoint-down("md") {
       width: 100%;
     }
@@ -240,7 +239,6 @@ $main-navigation-menu-width: calcRem(300px);
     }
     @include type-style("body-short-02");
     @include font-family("sans");
-    font-weight: 600;
 
     &:last-child {
       padding-right: 0;
@@ -285,9 +283,9 @@ $main-navigation-menu-width: calcRem(300px);
       z-index: z("modal");
       color: $text-body-default; // TODO: Replace
       background: $background-main;
-      box-shadow: rgba(desaturate(#0b77c2, 50%), 0.15) 0 3px 12px,
-        //TODO - convert raw color hex into color token in figma
-        rgba(desaturate(#0b77c2, 40%), 0.15) 0 32px 78px;
+      /* box-shadow: rgba(desaturate(#0b77c2, 50%), 0.15) 0 3px 12px,
+        TODO - convert raw color hex into color token in figma
+        rgba(desaturate(#0b77c2, 40%), 0.15) 0 32px 78px; */
       .#{$prefix}--theme-dark & {
         box-shadow: var(--modal-background-01) 0 3px 12px,
           //TODO - create token for this color

package/scss/components/notification/_notification.scss

@@ -26,16 +26,16 @@
     vertical-align: initial;
     border: 0;
     display: flex;
-    @include breakpoint-down(md) {
-      width: 100%;
-    }
+
     max-width: 28rem;
     height: auto;
     margin: 0.5rem 1rem 0.5rem 0;
     padding: 0 0 0 0.875rem;
     color: var(--cds-inverse-01, var(--ui-01));
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-
+    @include breakpoint-down(md) {
+      width: 100%;
+    }
     .#{$prefix}--toast-notification:first-child {
       margin-top: 1rem;
     }
@@ -423,6 +423,7 @@
 
   .#{$prefix}--block-notification.#{$prefix}--inline-notification {
     max-width: inherit;
+    width: 100%;
 
     .#{$prefix}--inline-notification__details {
       display: grid;
@@ -445,7 +446,7 @@
     @include breakpoint(md) {
       max-width: inherit;
     }
-    width: 100%;
+   
     .#{$prefix}--inline-notification__text-wrapper {
       flex-direction: column;
       grid-area: name;

package/scss/components/number-input/_number-input.scss

@@ -27,15 +27,17 @@ $input-border: 1px solid $field-border;
   }
 
   .#{$prefix}--number input[type="number"] {
+    @include input-base;
     @include type-style("body-short");
     @include font-family("sans");
-    @include input-base;
-    box-sizing: border-box;
-    display: inline-flex;
-    width: 100%;
-    min-width: 9.375rem;
-    padding-right: $spacing-05;
-    padding-left: $spacing-05;
+    & {
+        box-sizing: border-box;
+        display: inline-flex;
+        width: 100%;
+        min-width: 9.375rem;
+        padding-right: $spacing-05;
+        padding-left: $spacing-05;
+    }
     & ~ .#{$prefix}--label {
       order: 1;
     }
@@ -91,27 +93,25 @@ $input-border: 1px solid $field-border;
 
   .#{$prefix}--number__control-btn {
     @include button-reset.reset;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    min-width: $input-height;
-    max-width: $input-height;
-    // height: $input-height;
-    //  margin-left: -2px;
-    font-weight: 600;
-    font-size: 1.5rem;
-    // border: 1px solid $input-border-color;
-    opacity: 0;
-    transition: all 0.1s;
-    border-left: 1px solid $field-border-color;
-    color: $action-default-fill-primary-default;
-    //position: absolute;
-    order: 3;
-    position: absolute;
-    top: 1px;
-    bottom: 1px;
-    right: 1px;
+    & {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      min-width: $input-height;
+      max-width: $input-height;
+      font-weight: 600;
+      font-size: 1.5rem;
+      opacity: 0;
+      transition: all 0.1s;
+      border-left: 1px solid $field-border-color;
+      color: $action-default-fill-primary-default;
+      order: 3;
+      position: absolute;
+      top: 1px;
+      bottom: 1px;
+      right: 1px;
+    }
 
     @include rtl {
       left: 0;
@@ -126,8 +126,8 @@ $input-border: 1px solid $field-border;
 
     &:focus {
       border-left-color: transparent !important;
-      @include focus-outline;
       z-index: 100;
+      @include focus-outline;
     }
 
     &:hover {
@@ -184,10 +184,9 @@ $input-border: 1px solid $field-border;
 
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
-    @include skeleton;
     width: 100%;
     height: 2.5rem;
-
+    @include skeleton;
     input[type="number"] {
       display: none;
     }

package/scss/components/pagination/_pagination.scss

@@ -30,13 +30,15 @@
   .#{$prefix}--pagination {
     @include component-reset.reset;
     @include font-family("sans");
-    width: 100%;
-    background-color: $background-main;
-    padding: $spacing-03 $spacing-05;
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--ui-03);
-    height: calcRem(46px);
+    & {
+      width: 100%;
+      background-color: $background-main;
+      padding: $spacing-03 $spacing-05;
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--ui-03);
+      height: calcRem(46px);
+    }
 
     .#{$prefix}--form-item {
       flex: auto;
@@ -80,10 +82,11 @@
 
   .#{$prefix}--pagination__button {
     @include component-reset.reset;
-    border: none;
-    background: none;
-    cursor: pointer;
-
+    & {
+      border: none;
+      background: none;
+      cursor: pointer;
+    }
     &:hover {
       .#{$prefix}--pagination__button-icon {
         fill: $action-default-fill-primary-default;

package/scss/components/radio-button/_radio-button.scss

@@ -71,22 +71,24 @@ $radio-border-width: 2px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style("body-short");
-    @include type.font-family("sans");
     display: flex;
     align-items: center;
     cursor: pointer;
+    @include type.type-style("body-short");
+    @include type.font-family("sans");
   }
 
   .#{$prefix}--radio-button__appearance {
     @include reset;
-    background-color: $background-main;
-    border-radius: 50%;
-    border: $radio-border-width solid $field-background-disabled;
-    flex-shrink: 0;
-    height: calcRem(18px);
-    width: calcRem(18px);
-    margin-right: $spacing-03;
+    & {
+      background-color: $background-main;
+      border-radius: 50%;
+      border: $radio-border-width solid $field-background-disabled;
+      flex-shrink: 0;
+      height: calcRem(18px);
+      width: calcRem(18px);
+      margin-right: $spacing-03;
+    }
     @include rtl {
       margin-left: $spacing-03;
       margin-right: 0;
@@ -125,9 +127,9 @@ $radio-border-width: 2px !default;
 
   // Skeleton State
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
-    @include skeleton;
     width: calcRem(100px);
     height: calcRem(18px);
+    @include skeleton;
   }
 
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton

package/scss/components/read-more/_read-more.scss

@@ -12,10 +12,11 @@
 @mixin read-more {
   .#{$prefix}--read-more {
     @include component-reset.reset;
-    max-height: 400px;
-    overflow: hidden;
-    transition: all 0.3s;
-
+    & {
+      max-height: 400px;
+      overflow: hidden;
+      transition: all 0.3s;
+    }
     &[aria-disabled="true"] {
       opacity: 0.5;
       pointer-events: none;