@progressiveui/styles 10.30.0 → 11.0.0

package/scss/components/search/_search.scss

@@ -34,32 +34,30 @@ $input-border: 1px solid $field-border-color;
 
   .#{$prefix}--search-input {
     @include reset;
-    @include type.type-style("body-short-02");
     @include focus-outline("reset");
+    @include type.type-style("body-short-02");
 
-    width: 100%;
-    order: 1;
-    padding: 0 $spacing-08;
 
-    //@include font-family('sans');
-    //@include type-style('body-short-02');
-    //height: $input-height;
-    appearance: none;
-    display: block;
-    width: 100%;
-    padding: 0 $spacing-06 0 $spacing-03;
-    border: $input-border;
-    order: 2;
-    border-radius: 0;
-    cursor: pointer;
-
-    appearance: none;
-    background-color: $fill-field;
-    color: $text-body-default;
-    text-overflow: ellipsis;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    & {
+      width: 100%;
+      order: 1;
+      padding: 0 $spacing-08;
+      appearance: none;
+      display: block;
+      width: 100%;
+      padding: 0 $spacing-06 0 $spacing-03;
+      border: $input-border;
+      order: 2;
+      border-radius: 0;
+      cursor: pointer;
+
+      appearance: none;
+      background-color: $fill-field;
+      color: $text-body-default;
+      text-overflow: ellipsis;
+      transition: background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
-
+    }
     &:focus {
       @include focus-outline("outline");
     }
@@ -149,11 +147,11 @@ $input-border: 1px solid $field-border-color;
   .#{$prefix}--search-close {
     @include button-reset.reset(false);
     @include focus-outline("reset");
-
-    position: absolute;
-    top: 0;
-    right: 0;
-
+    & {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
     &::before {
       position: absolute;
       top: calcRem(1px);
@@ -309,9 +307,8 @@ $input-border: 1px solid $field-border-color;
   .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
-    @include skeleton;
-
     width: 100%;
+    @include skeleton;
 
     &::placeholder {
       color: transparent;

package/scss/components/secondary-navigation/_secondary-navigation.scss

@@ -24,28 +24,25 @@
   }
 
   .#{$prefix}--secondary-navigation__title {
-    @include type-style('productive-heading-04');
-    @include font-family('sans');
     font-weight: 400;
     padding-top: $spacing-05;
     padding-bottom: $spacing-05;
+    @include type-style('productive-heading-04');
+    @include font-family('sans');
   }
 
-  .#{$prefix}--secondary-navigation__wrapper {
+  /* TODO: .#{$prefix}--secondary-navigation__wrapper {
     display: flex;
-
     @include breakpoint-down('sm') {
       flex-direction: column-reverse;
     }
-
     @include breakpoint('sm') {
       justify-content: space-between;
     }
-  }
+  } */
 
   .#{$prefix}--secondary-navigation__list {
     padding-top: $spacing-03;
-
     @include breakpoint('sm') {
       padding: $spacing-06 0 0 0;
     }
@@ -53,7 +50,6 @@
 
   .#{$prefix}--secondary-navigation__additional {
     padding-top: $spacing-05;
-
     @include breakpoint('sm') {
       padding: $spacing-06 0 0 0;
     }

package/scss/components/select/_select.scss

@@ -30,7 +30,7 @@ $input-border: 1px solid var(--neutral-100__color);
   }
 
   .#{$prefix}--select-input {
-    @include input-base;
+
     height: $input-height;
     appearance: none;
     display: block;
@@ -46,6 +46,8 @@ $input-border: 1px solid var(--neutral-100__color);
     //font-size: $typography-body-copy-16px-regular-font-size;
 
     // Hide default select arrow in IE10+
+
+    @include input-base;
     &::-ms-expand {
       display: none;
     }
@@ -213,9 +215,9 @@ $input-border: 1px solid var(--neutral-100__color);
 
   //Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
-    @include skeleton;
     width: 100%;
     height: 2.5rem;
+    @include skeleton;
   }
 
   .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {

package/scss/components/sidebar/_sidebar.scss

@@ -42,6 +42,9 @@
 
   .#{$prefix}--sidebar-item-content {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     @media print {
       display: none;
     }
@@ -51,14 +54,11 @@
       max-width: 30rem;
       border-right: 1px solid $border-strong;
     }
+ 
     @include breakpoint("lg") {
       //min-width: auto;
       max-width: 30rem;
     }
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
     @include breakpoint-down("lg") {
       top: 0;
       overflow: auto;

package/scss/components/skeleton-text/_skeleton-text.scss

@@ -9,11 +9,10 @@
 @mixin skeleton-text {
   //skeleton text
   .#{$prefix}--skeleton__text {
-    @include skeleton;
-
     width: 100%;
     height: 1rem;
     margin-bottom: $spacing-03;
+    @include skeleton;
   }
 
   .#{$prefix}--skeleton__heading {

package/scss/components/step-navigation/_step-navigation.scss

@@ -13,12 +13,13 @@
   .#{$prefix}--step-navigation {
     @include type-style("caption-02");
     @include font-family("sans");
-    color: $text-body-default;
-    font-weight: 600;
-    height: auto;
-    width: 100%;
-    position: relative;
-
+    & {
+      color: $text-body-default;
+      font-weight: 600;
+      height: auto;
+      width: 100%;
+      position: relative;
+    }
     @include breakpoint("md") {
       background: none;
       min-height: calcRem(49px);
@@ -117,15 +118,15 @@
 
   .#{$prefix}--step-navigation.#{$prefix}--skeleton
     .#{$prefix}--step-navigation__nav-link {
-    @include skeleton;
     width: calcRem(75px);
     height: calcRem(12px);
+    @include skeleton;
   }
 
   .#{$prefix}--step-navigation.#{$prefix}--skeleton
     .#{$prefix}--step-navigation-trigger {
-    @include skeleton;
     width: calcRem(100px);
+    @include skeleton;
   }
 
   .#{$prefix}--step-navigation.#{$prefix}--skeleton

package/scss/components/story/_story.scss

@@ -10,6 +10,7 @@
 @use "../../utilities/high-contrast-mode" as *;
 @use "../../utilities/skeleton" as *;
 @use "../link";
+@use "sass:map";
 
 /// Story styles
 /// @access public
@@ -306,10 +307,10 @@
   }
 
   .#{$prefix}--text__story-title {
-    @include type-style("story-title");
     margin-bottom: $spacing-07;
     margin-left: -0.058em;
     font-weight: 500;
+    @include type-style("story-title");
   }
 
   .#{$prefix}--helper {
@@ -338,14 +339,13 @@
   }
 
   .#{$prefix}--story__code {
-    @include type-style("code-02");
-    @include font-family("code");
     padding: 0.1rem 0.4em;
     margin: 0;
     font-size: 95%;
     border-radius: 0.2em;
     background: $code-background;
-    //background: rgba(#111f30, 0.08);
+    @include type-style("code-02");
+    @include font-family("code");
   }
 
   .#{$prefix}--story__pre {
@@ -357,8 +357,6 @@
     border-radius: 6px;
     .#{$prefix}--story__code,
     code {
-      @include type-style("code-02");
-      @include font-family("code");
       display: inline;
       max-width: auto;
       padding: 0;
@@ -369,6 +367,8 @@
       background-color: transparent;
       border: 0;
       font-size: 100%;
+      @include type-style("code-02");
+      @include font-family("code");
     }
   }
 
@@ -509,11 +509,11 @@
   @each $size, $glyph in $spacing-map {
     .#{$prefix}--story__spacing-top-#{$size},
     .#{$prefix}--text__spacing-top-#{$size} {
-      margin-top: map-get($spacing-map, $size) !important;
+      margin-top: map.get($spacing-map, $size) !important;
     }
     .#{$prefix}--story__spacing-bottom-#{$size},
     .#{$prefix}--text__spacing-bottom-#{$size} {
-      margin-bottom: map-get($spacing-map, $size) !important;
+      margin-bottom: map.get($spacing-map, $size) !important;
     }
   }
 }

package/scss/components/tabs/_tabs.scss

@@ -22,13 +22,15 @@
   .#{$prefix}--tabs {
     @include type-style("body-short");
     @include font-family("sans");
-    color: $text-body-default;
-    font-weight: 600;
-    height: auto;
-    width: 100%;
-    position: relative;
-    overflow: auto;
-    max-width: 100%;
+    & {
+      color: $text-body-default;
+      font-weight: 600;
+      height: auto;
+      width: 100%;
+      position: relative;
+      overflow: auto;
+      max-width: 100%;
+    }
   }
 
   .#{$prefix}--tabs__nav__bar {
@@ -165,14 +167,14 @@
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
-    @include skeleton;
     width: calcRem(75px);
     height: calcRem(12px);
+    @include skeleton;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
-    @include skeleton;
     width: calcRem(100px);
+    @include skeleton;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger svg {

package/scss/components/tag/_tag.scss

@@ -22,16 +22,15 @@
 /// @group tag
 @mixin tag {
   .#{$prefix}--tag {
-    @include font-family("sans");
-    @include typescale("zeta");
-    display: inline-flex;
-    align-items: center;
-    padding: 0 $spacing-03;
-    height: 1.5rem;
-    margin: $spacing-01;
-    border-radius: calcRem(15px);
-    white-space: nowrap;
-
+    & {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 $spacing-03;
+      height: 1.5rem;
+      margin: $spacing-01;
+      border-radius: calcRem(15px);
+      white-space: nowrap;
+    }
     &:not(:first-child) {
       margin-left: 0;
     }
@@ -41,6 +40,8 @@
         text-decoration: underline;
       }
     }
+   //TODO: @include font-family("sans");
+   // @include typescale("zeta");
   }
 
   .#{$prefix}--tag--info {
@@ -71,23 +72,6 @@
   .#{$prefix}--tag--wrap {
     white-space: normal;
   }
-
-  // .#{$prefix}--tag--information {
-  //   @include tag-theme(var(--support-light-04), $support-04);
-  // }
-
-  // Skeleton state
-  // .#{$prefix}--tag.#{$prefix}--skeleton {
-  //   @include tag-theme($color__gray-1, $color__navy-gray-4);
-  //   width: calcRem(60px);
-
-  //   &:after {
-  //     @include skeleton;
-  //     content: '';
-  //     height: calcRem(6px);
-  //     width: 100%;
-  //   }
-  // }
 }
 
 @mixin tag--x {

package/scss/components/text-area/_text-area.scss

@@ -1,10 +1,3 @@
-//
-// 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.
-//
-
 @use "../form";
 @use "../../config" as *;
 @use "../../motion" as *;
@@ -44,7 +37,8 @@ $input-height: 40px !default;
     border-radius: $input-border-radius;
     order: 2;
     resize: vertical;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     & ~ .#{$prefix}--label {
@@ -90,8 +84,8 @@ $input-height: 40px !default;
 
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
-    @include skeleton;
     height: calcRem(100px);
+    @include skeleton;
 
     &::-webkit-input-placeholder {
       color: transparent;
@@ -100,8 +94,8 @@ $input-height: 40px !default;
 
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
-    @include skeleton;
     height: calcRem(100px);
+    @include skeleton;
 
     &::-webkit-input-placeholder {
       color: transparent;
@@ -110,9 +104,8 @@ $input-height: 40px !default;
 
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
-    @include skeleton;
     height: calcRem(100px);
-
+    @include skeleton;
     &::-webkit-input-placeholder {
       color: transparent;
     }

package/scss/components/toggle/_toggle.scss

@@ -8,7 +8,7 @@
 @use "../../utilities/high-contrast-mode" as *;
 @use "../../utilities/visually-hidden" as *;
 @use "../../utilities/focus-outline" as *;
-@import "../form";
+@use "../form" as *;
 
 /// Toggle styles
 /// @access public
@@ -19,14 +19,13 @@
   }
 
   .#{$prefix}--toggle__label {
-    @include font-family("sans");
     position: relative;
     display: flex;
     align-items: center;
     user-select: none;
     transition: $transition--base $standard-easing;
     cursor: pointer;
-    //margin: $spacing-05 0;
+    @include font-family("sans");
   }
 
   .#{$prefix}--toggle__appearance {

package/scss/components/tooltip/_tooltip.scss

@@ -1,9 +1,3 @@
-//
-// 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.
-//
 
 @use "../../theme" as *;
 @use "../../type" as *;
@@ -13,9 +7,9 @@
 @use "../../utilities/layer" as *;
 @use "./vars";
 @use "./mixins";
-@import "./animations/fade.scss";
-@import "./themes/light.scss";
-@import "./themes/light-border.scss";
+@use  "./animations/fade.scss" as *;
+@use  "./themes/light.scss" as *;
+@use "./themes/light-border.scss" as *;
 
 // TODO: deprecate legacy tooltip mixins
 // Tooltip Icon
@@ -38,17 +32,15 @@
     &--trigger {
       cursor: pointer;
     }
-    /*opacity: 0;
-  display: none;*/
-    //transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-    //transition-property: transform;
-    cursor: pointer;
-    max-width: 300px;
-    border-radius: 7px;
-    line-height: 1.5rem;
-    @include layer("pop-out");
-    z-index: 1000;
-    @include type-style("body-short-02");
+    & {
+      cursor: pointer;
+      max-width: 300px;
+      border-radius: 7px;
+      line-height: 1.5rem;
+      // z-index: 1000;
+    }
+    //TODO: @include layer("pop-out");
+    //@include type-style("body-short-02");
     &[data-popper-placement*="bottom"] {
       .#{$prefix}--tooltip__arrow {
         top: 0;

package/scss/components/tooltip/animations/fade.scss

@@ -1,5 +1,5 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
+@use '../_mixins.scss' as *;
+@use '../_vars.scss' as *;
 
 .#{$namespace-prefix}-tooltip {
   &[data-animation='fade'] {

package/scss/components/tooltip/themes/light-border.scss

@@ -1,5 +1,5 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
+@use '../_mixins.scss' as *;
+@use '../_vars.scss' as *;
 
 $color: var(--ui-01);
 $transparent-light: rgba(0, 8, 16, 0.08);

package/scss/components/tooltip/themes/light.scss

@@ -1,5 +1,5 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
+@use '../_mixins.scss' as *;
+@use '../_vars.scss' as *;
 
 $color: var(--ui-01);
 

package/scss/utilities/_button-reset.scss

@@ -12,7 +12,7 @@
 /// @example @include button-reset($width: false);
 /// @group utilities
 @mixin reset($width: true) {
-  @include component-reset.reset;
+
 
   display: inline-block;
   padding: 0;
@@ -21,6 +21,7 @@
   background: none;
   cursor: pointer;
 
+
   @if ($width == true) {
     width: 100%;
   }
@@ -28,4 +29,5 @@
   &::-moz-focus-inner {
     border: 0;
   }
+  @include component-reset.reset;
 }

package/scss/utilities/_component-reset.scss

@@ -1,10 +1,3 @@
-//
-// 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.
-//
-
 /// Resets default browser styling
 /// @access public
 /// @group utilities

package/scss/utilities/_config-breakpoints.scss

@@ -0,0 +1,84 @@
+@use "sass:map";
+@use "./convert";
+
+/// Namespace prefix
+/// @type String
+/// @access public
+/// @group @carbon/grid
+$prefix: "cds" !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.to-rem(32px) !default;
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter-condensed: convert.to-rem(1px) !default;
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.to-rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.to-rem(16px),
+    width: convert.to-rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.to-rem(24px),
+    width: convert.to-rem(1584px),
+  ),
+) !default;
+
+@if $flex-grid-columns == 12 {
+  $grid-breakpoints: map.merge(
+    $grid-breakpoints,
+    (
+      lg: map.merge(
+          map.get($grid-breakpoints, lg),
+          (
+            columns: 12,
+          )
+        ),
+      xlg: map.merge(
+          map.get($grid-breakpoints, xlg),
+          (
+            columns: 12,
+          )
+        ),
+      max: map.merge(
+          map.get($grid-breakpoints, max),
+          (
+            columns: 12,
+          )
+        ),
+    )
+  );
+}