npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.154 → 3.0.156 - Mend

@cloudscape-design/components-themeable 3.0.154 → 3.0.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "e6db3a8d118279dc22e999697d6e455f5d6d9fbe"
+  "commit": "015b28e11a7bb424412e61305a0bb4b9b0a151da"
 }

package/lib/internal/scss/box/text.scss CHANGED Viewed

@@ -39,7 +39,7 @@
       @include base-styles.code-extra-defaults;
     }
     &.key-label-variant {
-      font-weight: awsui.$font-display-label-weight;
+      @include styles.font-label;
       color: awsui.$color-text-label;
       margin-bottom: awsui.$space-scaled-xxxs;
     }
@@ -48,6 +48,15 @@
       font-weight: awsui.$font-box-value-large-weight;
       color: inherit;
     }
+    &.h1-variant.font-weight-default,
+    &.h2-variant.font-weight-default,
+    &.h3-variant.font-weight-default,
+    &.h4-variant.font-weight-default,
+    &.h5-variant.font-weight-default,
+    &.value-large-variant.font-weight-default,
+    &.font-weight-heavy {
+      @include styles.font-smoothing;
+    }
   }
 }

package/lib/internal/scss/button/styles.scss CHANGED Viewed

@@ -76,11 +76,11 @@
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
+  @include styles.font-button;
+  letter-spacing: awsui.$font-button-letter-spacing;
   border-radius: awsui.$border-radius-button;
   border: styles.$control-border-width solid;
   padding: styles.$control-padding-vertical awsui.$space-l;
-  font-weight: awsui.$font-button-weight;
-  letter-spacing: awsui.$font-button-letter-spacing;
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;

package/lib/internal/scss/container/styles.scss CHANGED Viewed

@@ -9,10 +9,15 @@
 .root {
   @include styles.styles-reset;
-  display: flex;
-  flex-flow: column nowrap;
   word-wrap: break-word;
+  &-fit-height {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+  }
   &.variant {
     &-default,
     &-stacked {
@@ -35,7 +40,6 @@
 }
 .header {
-  flex: 0 0 auto;
   background-color: awsui.$color-background-container-header;
   border-top-left-radius: awsui.$border-radius-container;
   border-top-right-radius: awsui.$border-radius-container;
@@ -126,8 +130,10 @@ the default white background of the container component.
 }
 .content {
-  flex: 1 0 auto;
+  .root-fit-height > & {
+    flex: 1;
+    overflow: auto;
+  }
   &.with-paddings {
     padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
@@ -138,8 +144,6 @@ the default white background of the container component.
 }
 .footer {
-  flex: 0 0 auto;
   &.with-paddings {
     padding: shared.$footer-padding;
   }

package/lib/internal/scss/expandable-section/styles.scss CHANGED Viewed

@@ -63,6 +63,7 @@
   &-footer {
     color: awsui.$color-text-expandable-section-default;
     font-weight: awsui.$font-heading-s-weight;
+    @include styles.font-smoothing;
     font-size: awsui.$font-expandable-heading-size;
     letter-spacing: awsui.$font-heading-s-letter-spacing;

package/lib/internal/scss/header/styles.scss CHANGED Viewed

@@ -106,18 +106,21 @@
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
+  &-variant-h1 {
+    font-size: awsui.$font-heading-xl-size;
+  }
   &-variant-h2,
   &-variant-h3 {
     padding: awsui.$space-scaled-xxs 0;
   }
   &-variant-h2 {
-    @include styles.font-heading-l;
+    font-size: awsui.$font-heading-l-size;
     &-refresh {
       padding-top: awsui.$space-scaled-2x-xxs;
     }
   }
   &-variant-h3 {
-    @include styles.font-heading-m;
+    font-size: awsui.$font-heading-m-size;
   }
 }
@@ -161,20 +164,27 @@
   @include styles.info-link-spacing();
   &-variant-h1 {
-    @include styles.font-heading-xl;
+    @include styles.font(heading-xl);
   }
   &-variant-h2 {
-    font-weight: awsui.$font-heading-l-weight;
-    line-height: awsui.$font-heading-l-line-height;
+    @include styles.font(heading-l);
   }
   &-variant-h3 {
-    font-weight: awsui.$font-heading-m-weight;
-    line-height: awsui.$font-heading-m-line-height;
+    @include styles.font(heading-m);
   }
 }
 .heading-text {
   /* used in test-utils */
+  &-variant-h1 {
+    @include styles.font-heading-xl;
+  }
+  &-variant-h2 {
+    @include styles.font-heading-l;
+  }
+  &-variant-h3 {
+    @include styles.font-heading-m;
+  }
 }
 .counter {

package/lib/internal/scss/internal/components/menu-dropdown/styles.scss CHANGED Viewed

@@ -10,6 +10,7 @@
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
+  @include styles.font-button;
   display: flex;
   flex-wrap: nowrap;
@@ -24,7 +25,6 @@
   border: transparent;
   background: transparent;
-  font-weight: awsui.$font-button-weight;
   color: awsui.$color-text-interactive-default;
   &:hover {

package/lib/internal/scss/internal/styles/links.scss CHANGED Viewed

@@ -59,5 +59,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 // Need style as a mixin for tag editor only, because it needs special keyup/keydown behavior and thus cannot use the Link component
 @mixin link-recovery {
+  @include typography.font-smoothing;
   @include link-style(map.get(constants.$link-variants, 'recovery'));
 }

package/lib/internal/scss/internal/styles/typography/mixins.scss CHANGED Viewed

@@ -6,6 +6,12 @@
 @use '../tokens' as awsui;
 @use './constants' as constants;
+// To reduce bluriness of heavy font weight on MacOS
+@mixin font-smoothing {
+  -webkit-font-smoothing: awsui.$font-smoothing-webkit;
+  -moz-osx-font-smoothing: awsui.$font-smoothing-moz-osx;
+}
 @mixin default-text-style {
   @include font-body-m;
   color: awsui.$color-text-body-default;
@@ -29,6 +35,7 @@
   line-height: awsui.$font-heading-xs-line-height;
   @if $weight {
     font-weight: awsui.$font-heading-xs-weight;
+    @include font-smoothing;
   }
 }
@@ -38,6 +45,7 @@
   letter-spacing: awsui.$font-heading-s-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-s-weight;
+    @include font-smoothing;
   }
 }
@@ -47,6 +55,7 @@
   letter-spacing: awsui.$font-heading-m-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-m-weight;
+    @include font-smoothing;
   }
 }
@@ -56,6 +65,7 @@
   letter-spacing: awsui.$font-heading-l-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-l-weight;
+    @include font-smoothing;
   }
 }
@@ -65,6 +75,7 @@
   letter-spacing: awsui.$font-heading-xl-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-xl-weight;
+    @include font-smoothing;
   }
 }
@@ -80,6 +91,11 @@
   letter-spacing: inherit;
 }
+@mixin font-button {
+  font-weight: awsui.$font-button-weight;
+  @include font-smoothing;
+}
 @mixin font-label {
   @include font-body-m();
   font-weight: awsui.$font-display-label-weight;
@@ -89,6 +105,7 @@
   font-size: awsui.$font-panel-header-size;
   line-height: awsui.$font-panel-header-line-height;
   font-weight: awsui.$font-heading-l-weight;
+  @include font-smoothing;
 }
 @mixin font-code-inline {

package/lib/internal/scss/link/styles.scss CHANGED Viewed

@@ -29,11 +29,15 @@ $font-sizes: (
   @each $variant in map.keys(constants.$link-variants) {
     &.variant-#{$variant} {
+      @if $variant == 'info' {
+        @include styles.font-smoothing;
+      }
       @include styles.link-style(map.get(constants.$link-variants, $variant));
     }
   }
   &.button {
+    @include styles.font-smoothing;
     @include styles.link-style(map.get(constants.$link-styles, 'button'));
   }

package/lib/internal/scss/pagination/styles.scss CHANGED Viewed

@@ -64,6 +64,7 @@
   }
   &.button-current {
     font-weight: awsui.$font-wayfinding-link-active-weight;
+    @include styles.font-smoothing;
     color: awsui.$color-text-interactive-active;
     &.button-disabled {
       color: awsui.$color-text-pagination-page-number-active-disabled;

package/lib/internal/scss/pie-chart/styles.scss CHANGED Viewed

@@ -131,7 +131,7 @@
 /* stylelint-disable-next-line selector-max-type */
 .label-text > text {
-  font-weight: awsui.$font-display-label-weight;
+  @include styles.font-label;
   fill: awsui.$color-text-heading-default;
   dominant-baseline: middle;
 }

package/lib/internal/scss/progress-bar/styles.scss CHANGED Viewed

@@ -40,7 +40,7 @@
     font-weight: styles.$font-weight-bold;
   }
   &-key-value {
-    font-weight: awsui.$font-display-label-weight;
+    @include styles.font-label;
     color: awsui.$color-text-label;
     margin-bottom: awsui.$space-scaled-xxxs;
   }

package/lib/internal/scss/segmented-control/segment.scss CHANGED Viewed

@@ -36,11 +36,11 @@ $selected-color: awsui.$color-text-segment-active;
 .segment {
   @include styles.font-body-m;
   @include styles.text-flex-wrapping;
+  @include styles.font-button;
+  letter-spacing: 0.25px;
   border: styles.$control-border-width solid $default-border-color;
   padding: styles.$control-padding-vertical awsui.$space-l;
   border-right-width: 0;
-  font-weight: awsui.$font-button-weight;
-  letter-spacing: 0.25px;
   background: $default-background;
   color: $default-color;
   overflow: visible;

package/lib/internal/scss/side-navigation/styles.scss CHANGED Viewed

@@ -99,6 +99,7 @@
 .link-active {
   font-weight: awsui.$font-wayfinding-link-active-weight;
+  @include styles.font-smoothing;
   color: awsui.$color-text-accent;
 }

package/lib/internal/scss/table/header-cell/styles.scss CHANGED Viewed

@@ -15,6 +15,7 @@
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-heading-s-weight;
+  @include styles.font-smoothing;
   padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
   &-sticky {
     border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;

package/lib/internal/scss/tabs/tab-header-bar.scss CHANGED Viewed

@@ -100,6 +100,7 @@ $label-horizontal-spacing: awsui.$space-l;
   font-size: awsui.$font-tabs-size;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
+  @include styles.font-smoothing;
   color: awsui.$color-text-interactive-default;
   &:hover {

package/lib/internal/scss/top-navigation/styles.scss CHANGED Viewed

@@ -313,7 +313,7 @@
   }
   &-utility {
-    font-weight: awsui.$font-button-weight;
+    @include styles.font-button;
     border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }