npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1290 → 3.0.1292 - Mend

@cloudscape-design/components-themeable 3.0.1290 → 3.0.1292

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 (336) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "3025360f0009b0196548b97a4199186c29ee82f6"
+  "commit": "d28fe3470b089a530b39d983fffc7521cb5c0952"
 }

package/lib/internal/scss/button-dropdown/category-elements/styles.scss CHANGED Viewed

@@ -15,7 +15,7 @@
   border-inline: awsui.$border-divider-list-width solid transparent;
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
   border-inline-width: 0;
-  font-weight: bold;
+  font-weight: styles.$font-weight-bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -33,7 +33,7 @@
   &.no-content-styling {
     padding-block: calc((#{awsui.$border-item-width} - #{awsui.$border-divider-list-width}));
     padding-inline: awsui.$border-item-width;
-    font-weight: normal;
+    font-weight: styles.$font-weight-normal;
     color: inherit;
   }

package/lib/internal/scss/code-editor/styles.scss CHANGED Viewed

@@ -98,7 +98,7 @@
   background: none;
   border-block: none;
   border-inline: none;
-  font-weight: bold;
+  font-weight: styles.$font-weight-bold;
   outline: none;
   cursor: pointer;
   z-index: 1;
@@ -149,7 +149,7 @@
   }
   &--disabled {
-    font-weight: normal;
+    font-weight: styles.$font-weight-normal;
     color: awsui.$color-text-code-editor-status-bar-disabled;
     cursor: default;

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

@@ -6,6 +6,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../app-layout/constants.scss' as constants;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @mixin desktop-only {
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -13,11 +14,19 @@
   }
 }
+.root {
+  display: contents;
+}
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
   background-color: awsui.$color-background-drawer;
+  &.has-close-action {
+    position: relative;
+  }
   &.position-absolute,
   &.position-sticky,
   &.position-fixed {
@@ -35,6 +44,14 @@
       flex: 1;
     }
   }
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight($gutter: -2px);
+  }
 }
 .header {
@@ -43,10 +60,16 @@
   justify-content: space-between;
   color: awsui.$color-text-heading-default;
   padding-block: awsui.$space-panel-header-vertical;
-  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+  // the space on the right is reserved for absolute-positioned close action
+  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} + #{awsui.$space-scaled-xxl});
+  &.hide-close-action {
+    padding-inline: awsui.$space-panel-side-left awsui.$space-panel-side-right;
+  }
   @include desktop-only {
     &.with-additional-action {
       /*
@@ -85,6 +108,12 @@
   z-index: 1;
 }
+.close-action {
+  position: absolute;
+  inset-block-start: awsui.$space-panel-header-vertical;
+  inset-inline-end: awsui.$space-scaled-l;
+}
 .content-with-paddings:not(:empty) {
   padding-block-start: awsui.$space-panel-content-top;
   padding-inline-start: awsui.$space-panel-side-left;
@@ -110,3 +139,24 @@
 .test-utils-drawer-content {
   /* used in test-utils */
 }
+.hidden {
+  display: none;
+}
+.focus-trap {
+  display: contents;
+}
+.backdrop {
+  inset: 0;
+  background-color: awsui.$color-background-drawer-backdrop;
+  &.backdrop-fixed {
+    position: fixed;
+  }
+  &.backdrop-absolute {
+    position: absolute;
+  }
+}

package/lib/internal/scss/drawer/test-classes/styles.scss ADDED Viewed

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.backdrop,
+.close-action,
+.root {
+  /* used in test-utils */
+}

package/lib/internal/scss/internal/components/cartesian-chart/styles.scss CHANGED Viewed

@@ -3,6 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
+@use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 .axis,
@@ -16,7 +17,7 @@
 }
 .axis-label {
-  font-weight: bold;
+  font-weight: styles.$font-weight-bold;
   fill: awsui.$color-text-body-default;
 }

package/lib/internal/scss/internal/components/option/styles.scss CHANGED Viewed

@@ -22,7 +22,7 @@
     cursor: inherit;
   }
   &.parent {
-    font-weight: bold;
+    font-weight: styles.$font-weight-bold;
     &:not(.disabled):not(.highlighted) {
       color: awsui.$color-text-dropdown-group-label;
     }
@@ -102,7 +102,7 @@
 .filtering-match-highlight {
   background-color: awsui.$color-background-dropdown-item-filter-match;
   color: awsui.$color-text-dropdown-item-filter-match;
-  font-weight: bold;
+  font-weight: styles.$font-weight-bold;
 }
 .disabled {

package/lib/internal/scss/internal/components/selectable-item/styles.scss CHANGED Viewed

@@ -7,8 +7,8 @@
 @use '../../styles/tokens' as awsui;
 // Box-shadow spread values for simulating borders without layout shifts
-$border-offset: awsui.$border-item-width;
-$border-offset-double: calc(2 * #{awsui.$border-item-width});
+$border-offset: awsui.$border-width-item-selected;
+$border-offset-double: calc(2 * #{$border-offset});
 // Divider widths (and negative) for reuse
 $divider-w: awsui.$border-divider-list-width;
@@ -189,14 +189,14 @@ $neg-divider-w: calc(-1 * #{$divider-w});
       > .selectable-item-content {
         padding-block: awsui.$space-xs;
         padding-inline: awsui.$space-xs;
-        font-weight: bold;
+        font-weight: styles.$font-weight-bold;
       }
     }
     &.interactiveGroups {
       > .selectable-item-content {
         padding-block: styles.$group-option-padding-vertical;
         padding-inline: styles.$control-padding-horizontal;
-        font-weight: bold;
+        font-weight: styles.$font-weight-bold;
       }
       &.highlighted > .selectable-item-content {
         color: awsui.$color-text-dropdown-item-highlighted;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "3025360f";
+    $awsui-commit-hash: "d28fe347";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

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

@@ -15,8 +15,8 @@ $font-family-monospace: awsui.$font-family-monospace;
 // Font weights
 $font-weight-heavy: awsui.$font-weight-heavy;
-$font-weight-bold: 700;
-$font-weight-normal: 400;
-$font-weight-lighter: 300;
+$font-weight-bold: awsui.$font-weight-bold;
+$font-weight-normal: awsui.$font-weight-normal;
+$font-weight-lighter: awsui.$font-weight-lighter;
 $letter-spacing-bold-link: 0.005em;

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

@@ -46,7 +46,19 @@ $link-font-sizes: (
   ),
 );
+// $link-variants.recovery is needed for the undo button in Tag Editor,
+// which is underlined only in Classic
 $link-variants: (
+  'recovery': (
+    'text-color-default': awsui.$color-text-link-default,
+    'text-color-hover': awsui.$color-text-link-hover,
+    'text-color-active': awsui.$color-text-link-hover,
+    'font-weight': awsui.$font-link-button-weight,
+    'decoration-line': underline,
+    'decoration-color': awsui.$color-text-link-button-underline,
+    'decoration-color-hover': awsui.$color-text-link-button-underline-hover,
+    'letter-spacing': awsui.$font-link-button-letter-spacing,
+  ),
   'secondary': (
     'text-color-default': awsui.$color-text-link-secondary-default,
     'text-color-hover': awsui.$color-text-link-secondary-hover,
@@ -96,30 +108,19 @@ $link-variants: (
     'decoration-color-hover': transparent,
     'letter-spacing': styles.$letter-spacing-bold-link,
   ),
-  // Need separate variant used for backwards compatible styles in classic
-  // (vr - button style, classic - underlined link style),
-  'recovery': (
-      'text-color-default': awsui.$color-text-link-default,
-      'text-color-hover': awsui.$color-text-link-hover,
-      'text-color-active': awsui.$color-text-link-hover,
-      'font-weight': awsui.$font-link-button-weight,
-      'decoration-line': underline,
-      'decoration-color': awsui.$color-text-link-button-underline,
-      'decoration-color-hover': awsui.$color-text-link-button-underline-hover,
-      'letter-spacing': awsui.$font-link-button-letter-spacing,
-    ),
 );
+// $link-styles.button corresponds to a button link
+// (link without an href to be styled like a button)
 $link-styles: (
-  // A link without an href to be styled like a button
   'button': (
-      'text-color-default': awsui.$color-text-link-button-normal-default,
-      'text-color-hover': awsui.$color-text-link-button-normal-hover,
-      'text-color-active': awsui.$color-text-link-button-normal-active,
-      'font-weight': styles.$font-weight-bold,
-      'decoration-line': none,
-      'decoration-color': transparent,
-      'decoration-color-hover': transparent,
-      'letter-spacing': awsui.$font-button-letter-spacing,
-    )
+    'text-color-default': awsui.$color-text-link-button-normal-default,
+    'text-color-hover': awsui.$color-text-link-button-normal-hover,
+    'text-color-active': awsui.$color-text-link-button-normal-active,
+    'font-weight': styles.$font-weight-bold,
+    'decoration-line': none,
+    'decoration-color': transparent,
+    'decoration-color-hover': transparent,
+    'letter-spacing': awsui.$font-button-letter-spacing,
+  ),
 );

package/lib/internal/scss/property-filter/styles.scss CHANGED Viewed

@@ -40,7 +40,7 @@ $operator-field-width: 120px;
 }
 .token-operator {
-  font-weight: bold;
+  font-weight: styles.$font-weight-bold;
 }
 .property-editor {
@@ -48,7 +48,7 @@ $operator-field-width: 120px;
   &-header {
     @include styles.default-text-style;
-    font-weight: bold;
+    font-weight: styles.$font-weight-bold;
     padding-block-start: awsui.$space-s;
     padding-block-end: awsui.$space-xxs;
@@ -60,7 +60,7 @@ $operator-field-width: 120px;
     gap: awsui.$space-xs;
     @include styles.default-text-style;
-    font-weight: bold;
+    font-weight: styles.$font-weight-bold;
     color: awsui.$color-text-dropdown-group-label;
     padding-block: styles.$group-option-padding-with-border-placeholder-vertical;

package/lib/internal/scss/text-content/styles.scss CHANGED Viewed

@@ -16,7 +16,7 @@
   h5,
   p {
     font-family: inherit;
-    font-weight: normal;
+    font-weight: styles.$font-weight-normal;
     text-decoration: none;
     margin-block: 0;
     margin-inline: 0;

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

@@ -285,7 +285,7 @@
   &-expandable-menu {
     &-trigger {
       color: awsui.$color-text-dropdown-group-label;
-      font-weight: bold;
+      font-weight: styles.$font-weight-bold;
       &:hover {
         color: awsui.$color-text-accent;

package/lib/internal/template/action-card/styles.css.js CHANGED Viewed

@@ -1,22 +1,22 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_16248_q1yer_161",
-  "icon": "awsui_icon_16248_q1yer_193",
-  "header-inner": "awsui_header-inner_16248_q1yer_209",
-  "disabled": "awsui_disabled_16248_q1yer_218",
-  "header": "awsui_header_16248_q1yer_209",
-  "body": "awsui_body_16248_q1yer_221",
-  "header-row": "awsui_header-row_16248_q1yer_225",
-  "description": "awsui_description_16248_q1yer_238",
-  "has-header": "awsui_has-header_16248_q1yer_244",
-  "header-button": "awsui_header-button_16248_q1yer_258",
-  "overlay-button": "awsui_overlay-button_16248_q1yer_259",
-  "variant-embedded": "awsui_variant-embedded_16248_q1yer_278",
-  "variant-default": "awsui_variant-default_16248_q1yer_290",
-  "inner-card": "awsui_inner-card_16248_q1yer_391",
-  "no-padding": "awsui_no-padding_16248_q1yer_398",
-  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_q1yer_409",
-  "icon-align-end": "awsui_icon-align-end_16248_q1yer_543"
+  "root": "awsui_root_16248_1ce33_161",
+  "icon": "awsui_icon_16248_1ce33_193",
+  "header-inner": "awsui_header-inner_16248_1ce33_209",
+  "disabled": "awsui_disabled_16248_1ce33_218",
+  "header": "awsui_header_16248_1ce33_209",
+  "body": "awsui_body_16248_1ce33_221",
+  "header-row": "awsui_header-row_16248_1ce33_225",
+  "description": "awsui_description_16248_1ce33_238",
+  "has-header": "awsui_has-header_16248_1ce33_244",
+  "header-button": "awsui_header-button_16248_1ce33_258",
+  "overlay-button": "awsui_overlay-button_16248_1ce33_259",
+  "variant-embedded": "awsui_variant-embedded_16248_1ce33_278",
+  "variant-default": "awsui_variant-default_16248_1ce33_290",
+  "inner-card": "awsui_inner-card_16248_1ce33_391",
+  "no-padding": "awsui_no-padding_16248_1ce33_398",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1ce33_409",
+  "icon-align-end": "awsui_icon-align-end_16248_1ce33_543"
 };