@cloudscape-design/components-themeable 3.0.653 → 3.0.655

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "0968bb6fcef93e54e3b891fa984fa5c13ab68216"
+  "commit": "fea11051dc7ba0573039a7aa83a0f313dba47083"
 }

package/lib/internal/scss/app-layout/skeleton/styles.scss

@@ -8,50 +8,78 @@
 @use '../constants' as constants;
 
 .root {
+  @include styles.styles-reset;
+  color: awsui.$color-text-body-default;
+  background-color: awsui.$color-background-layout-main;
+
   #{custom-props.$maxContentWidth}: 100%;
   display: grid;
+
+  // mobile grid
   grid-template-areas:
-    'navigation topBar       topBar        topBar    tools'
-    'navigation .         notifications    .         tools'
-    'navigation .             main         .         tools';
+    'topBar    topBar     topBar'
+    '.      notifications .'
+    '.          main      .';
   grid-template-columns:
-    min-content
-    minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
-    minmax(var(#{custom-props.$minContentWidth}), var(#{custom-props.$maxContentWidth}))
-    minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
-    min-content;
-  grid-template-rows: min-content min-content 1fr min-content;
+    awsui.$space-layout-content-horizontal
+    1fr
+    awsui.$space-layout-content-horizontal;
+  grid-template-rows: min-content min-content 1fr;
 
-  &.has-adaptive-widths-default {
-    @each $breakpoint, $width in constants.$adaptive-content-widths {
-      @include styles.media-breakpoint-up($breakpoint) {
-        #{custom-props.$maxContentWidth}: $width;
+  // desktop grid
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    grid-template-areas:
+      'navigation topBar       topBar        topBar    tools'
+      'navigation .         notifications    .         tools'
+      'navigation .             main         .         tools';
+    grid-template-columns:
+      min-content
+      minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
+      minmax(0, var(#{custom-props.$maxContentWidth}))
+      minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
+      min-content;
+    grid-template-rows: min-content min-content 1fr min-content;
+
+    &.has-adaptive-widths-default {
+      @each $breakpoint, $width in constants.$adaptive-content-widths {
+        @include styles.media-breakpoint-up($breakpoint) {
+          #{custom-props.$maxContentWidth}: $width;
+        }
       }
     }
-  }
 
-  &.has-adaptive-widths-dashboard {
-    @each $breakpoint, $width in constants.$dashboard-content-widths {
-      @include styles.media-breakpoint-up($breakpoint) {
-        #{custom-props.$maxContentWidth}: $width;
+    &.has-adaptive-widths-dashboard {
+      @each $breakpoint, $width in constants.$dashboard-content-widths {
+        @include styles.media-breakpoint-up($breakpoint) {
+          #{custom-props.$maxContentWidth}: $width;
+        }
       }
     }
   }
 }
 
-.main-landmark {
-  // does not participate in the layout, rendered for accessibility grouping
-  display: contents;
+.navigation,
+.tools {
+  grid-row: 1 / -1;
+  grid-column: 1/ -1;
+  background: awsui.$color-background-container-content;
+  z-index: 1;
 }
 
 .navigation {
-  grid-area: navigation;
-  border-inline-end: 1px solid awsui.$color-border-divider-panel-side;
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    grid-area: navigation;
+    inline-size: var(#{custom-props.$navigationWidth});
+    border-inline-end: 1px solid awsui.$color-border-divider-panel-side;
+  }
 }
 
 .tools {
-  grid-area: tools;
-  border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
+  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+    grid-area: tools;
+    inline-size: var(#{custom-props.$toolsWidth});
+    border-inline-start: 1px solid awsui.$color-border-divider-panel-side;
+  }
 }
 
 .top-bar {
@@ -67,12 +95,20 @@
   }
 }
 
+.main-landmark {
+  // does not participate in the layout, rendered for accessibility grouping
+  display: contents;
+}
+
 .main {
   grid-area: main;
   margin-block-start: awsui.$space-scaled-s;
   margin-block-end: awsui.$space-layout-content-bottom;
   &-disable-paddings {
-    grid-column: 2 / span 3;
+    grid-column: 1 / -1;
+    @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
+      grid-column: 2 / span 3;
+    }
     margin-block: 0;
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/layout.scss

@@ -42,6 +42,8 @@ explicitly set in script.
   #{custom-props.$notificationsHeight}: 0px;
   #{custom-props.$offsetTop}: var(#{custom-props.$headerHeight});
   #{custom-props.$overlapHeight}: #{awsui.$space-dark-header-overlap-distance};
+  #{custom-props.$togglesLeftWidth}: 0px;
+  #{custom-props.$togglesRightWidth}: 0px;
   background-color: awsui.$color-background-layout-main;
   color: awsui.$color-text-body-default;
   display: grid;
@@ -193,13 +195,8 @@ explicitly set in script.
     #{custom-props.$mainGap}: #{awsui.$space-xs};
   }
 
-  // Set the Main gap when it follows the Breadcrumbs without an overlap
-  &.has-breadcrumbs:not(.has-header).is-overlap-disabled {
-    #{custom-props.$mainGap}: #{awsui.$space-scaled-m};
-  }
-
-  // Set the Main gap when it follows the Breadcrumbs with an overlap
-  &.has-breadcrumbs:not(.has-header):not(.is-overlap-disabled) {
+  // Set the Main gap when it follows the Breadcrumbs
+  &.has-breadcrumbs:not(.has-header) {
     #{custom-props.$mainGap}: #{awsui.$space-scaled-xxs};
   }
 
@@ -209,10 +206,12 @@ explicitly set in script.
   }
 
   // Set the Main gap when it is the first page content
-  &.content-first-child-main:not(.is-overlap-disabled),
-  &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
+  &.content-first-child-main:not(.disable-content-paddings) {
     #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
   }
+  &.content-first-child-main.disable-content-paddings {
+    #{custom-props.$mainGap}: 0px;
+  }
 
   /*
   Override the desktop gap values set above for the Notifications, Header, and Main
@@ -232,14 +231,21 @@ explicitly set in script.
     }
 
     &.content-first-child-notifications:not(.has-breadcrumbs):not(.has-header),
-    &.content-first-child-main:not(.is-overlap-disabled) {
+    &.content-first-child-main:not(.disable-content-paddings) {
       #{custom-props.$mainGap}: #{awsui.$space-scaled-s};
     }
 
-    &.content-first-child-main.is-overlap-disabled:not(.disable-content-paddings) {
-      #{custom-props.$mainGap}: #{awsui.$space-scaled-m};
+    &.content-first-child-main.disable-content-paddings {
+      #{custom-props.$mainGap}: 0px;
     }
   }
+
+  &.has-left-toggles-gutter {
+    #{custom-props.$togglesLeftWidth}: calc(#{awsui.$space-layout-toggle-padding} + 36px);
+  }
+  &.has-right-toggles-gutter {
+    #{custom-props.$togglesRightWidth}: calc(#{awsui.$space-layout-toggle-padding} + 36px);
+  }
 }
 
 /*

package/lib/internal/scss/cards/styles.scss

@@ -106,9 +106,7 @@
   margin-block-start: awsui.$space-grid-gutter;
   &.refresh {
     &.header-variant-full-page {
-      &.remove-high-contrast-header {
-        margin-block-start: awsui.$space-scaled-s;
-      }
+      margin-block-start: awsui.$space-scaled-s;
     }
   }
 }

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

@@ -226,25 +226,9 @@
       // This polygon only shows the part of the shadow that is lower than the element itself.
       clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
     }
-
-    &:not(.remove-high-contrast-header) {
-      &::before {
-        content: '';
-        border-block-end: none;
-      }
-    }
   }
 }
 
-/*
-The dynamic height dark header needs a background that will cover
-the default white background of the container component.
-*/
-.dark-header {
-  background-color: awsui.$color-background-layout-main;
-  color: awsui.$color-text-body-default;
-}
-
 .content {
   flex: 1;
   &-fit-height {

package/lib/internal/scss/content-layout/styles.scss

@@ -6,60 +6,97 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
-/*
-Pass through the header and child content if not rendering in 
-visual refresh mode. The padding is still added to the header 
-in this scenario because otherwise the header and child 
-nodes will directly touch with no gap between them.
-*/
-.layout:not(.is-visual-refresh) {
-  display: contents;
-
-  > .background {
-    display: none;
-  }
-
-  > .header {
-    padding-block-end: awsui.$space-content-header-padding-bottom;
-  }
-}
-
-.layout.is-visual-refresh {
+.layout {
+  #{custom-props.$contentLayoutDefaultHorizontalPadding}: awsui.$space-layout-content-horizontal;
+  #{custom-props.$contentLayoutMaxContentWidth}: 0px;
+  #{custom-props.$contentLayoutMainGap}: 0px;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto awsui.$space-dark-header-overlap-distance 1fr;
+  grid-template-columns: 0 0 1fr minmax(0, var(#{custom-props.$contentLayoutMaxContentWidth})) 1fr 0 0;
+  grid-template-rows: var(#{custom-props.$contentLayoutMainGap}) min-content min-content auto awsui.$space-dark-header-overlap-distance 1fr;
   min-block-size: 100%;
 
+  @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+    #{custom-props.$contentLayoutDefaultHorizontalPadding}: awsui.$space-l;
+  }
+
   > .background {
-    background-color: awsui.$color-background-layout-main;
-    grid-column: 1;
-    grid-row: 1 / 3;
+    grid-column: 1 / 8;
+    grid-row: 1 / 6;
     color: awsui.$color-text-body-default;
 
     &.is-overlap-disabled {
-      grid-row: 1 / 2;
+      grid-row: 1 / 5;
     }
+
+    > .header-background {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+
+  > .notifications {
+    grid-column: 4;
+    grid-row: 2;
+    padding-block-end: awsui.$space-xs;
+  }
+  > .breadcrumbs {
+    grid-column: 4;
+    grid-row: 3;
+    padding-block-end: awsui.$space-xs;
+  }
+
+  &.default-padding {
+    #{custom-props.$contentLayoutMainGap}: awsui.$space-scaled-m;
+    grid-template-columns:
+      var(#{custom-props.$togglesLeftWidth}, 0) var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) 1fr minmax(
+        0,
+        var(#{custom-props.$contentLayoutMaxContentWidth})
+      )
+      1fr var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) var(#{custom-props.$togglesRightWidth}, 0);
   }
 
-  > .header {
-    grid-column: 1;
-    grid-row: 1;
+  > .header-wrapper {
+    grid-column: 4;
+    grid-row: 4;
     padding-block-end: awsui.$space-content-header-padding-bottom;
+
+    &.with-divider {
+      border-block-end: 1px solid awsui.$color-border-divider-default;
+    }
   }
 
   > .content {
-    grid-column: 1;
-    grid-row: 2 / 4;
+    grid-column: 4;
+    grid-row: 5 / 8;
   }
 
   &:not(.has-header) {
-    grid-template-rows: auto calc(awsui.$space-dark-header-overlap-distance + awsui.$space-xs + awsui.$space-scaled-xxs) 1fr;
-    > .content {
-      padding-block-start: calc(awsui.$space-xs + awsui.$space-scaled-xxs);
-    }
+    grid-template-rows:
+      var(#{custom-props.$contentLayoutMainGap}) min-content min-content 0 calc(
+        awsui.$space-dark-header-overlap-distance
+      )
+      1fr;
   }
 
   &.is-overlap-disabled {
-    grid-template-rows: auto 0 1fr;
+    grid-template-rows: var(#{custom-props.$contentLayoutMainGap}) min-content min-content auto 0 1fr;
+  }
+}
+
+.layout.is-visual-refresh {
+  > .background {
+    &.has-default-background {
+      background-color: awsui.$color-background-layout-main;
+    }
+  }
+}
+
+.layout:not(.is-visual-refresh) {
+  &.has-notifications {
+    #{custom-props.$contentLayoutMainGap}: 0px;
+  }
+
+  > .notifications {
+    grid-column: 1 / 8;
   }
 }

package/lib/internal/scss/content-layout/test-classes/styles.scss

@@ -0,0 +1,17 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header {
+  /* used in test-utils */
+}
+.secondary-header {
+  /* used in test-utils */
+}
+.notifications {
+  /* used in test-utils */
+}
+.breadcrumbs {
+  /* used in test-utils */
+}

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

@@ -1,53 +1,58 @@
 
-    $maxContentWidth: --awsui-max-content-width-epuq3n;
-$minContentWidth: --awsui-min-content-width-epuq3n;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-epuq3n;
-$contentGapLeft: --awsui-content-gap-left-epuq3n;
-$contentGapRight: --awsui-content-gap-right-epuq3n;
-$contentHeight: --awsui-content-height-epuq3n;
-$defaultMaxContentWidth: --awsui-default-max-content-width-epuq3n;
-$defaultMinContentWidth: --awsui-default-min-content-width-epuq3n;
-$drawerSize: --awsui-drawer-size-epuq3n;
-$footerHeight: --awsui-footer-height-epuq3n;
-$headerGap: --awsui-header-gap-epuq3n;
-$headerHeight: --awsui-header-height-epuq3n;
-$layoutWidth: --awsui-layout-width-epuq3n;
-$mainGap: --awsui-main-gap-epuq3n;
-$mainOffsetLeft: --awsui-main-offset-left-epuq3n;
-$mainTemplateRows: --awsui-main-template-rows-epuq3n;
-$mobileBarHeight: --awsui-mobile-bar-height-epuq3n;
-$notificationsGap: --awsui-notifications-gap-epuq3n;
-$notificationsHeight: --awsui-notifications-height-epuq3n;
-$offsetTop: --awsui-offset-top-epuq3n;
-$overlapHeight: --awsui-overlap-height-epuq3n;
-$navigationWidth: --awsui-navigation-width-epuq3n;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-epuq3n;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-epuq3n;
-$splitPanelHeight: --awsui-split-panel-height-epuq3n;
-$splitPanelMinWidth: --awsui-split-panel-min-width-epuq3n;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-epuq3n;
-$toolsMaxWidth: --awsui-tools-max-width-epuq3n;
-$toolsWidth: --awsui-tools-width-epuq3n;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-epuq3n;
-$contentScrollMargin: --awsui-content-scroll-margin-epuq3n;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-epuq3n;
-$flashbarStackIndex: --awsui-flashbar-stack-index-epuq3n;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-epuq3n;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-epuq3n;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-epuq3n;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-epuq3n;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-epuq3n;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-epuq3n;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-epuq3n;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-epuq3n;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-epuq3n;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-epuq3n;
-$sliderLabelCount: --awsui-slider-label-count-epuq3n;
-$sliderTickCount: --awsui-slider-tick-count-epuq3n;
-$sliderReferenceColumn: --awsui-slider-reference-column-epuq3n;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-epuq3n;
-$sliderMaxStart: --awsui-slider-max-start-epuq3n;
-$sliderMinEnd: --awsui-slider-min-end-epuq3n;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-epuq3n;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-epuq3n;
+    $maxContentWidth: --awsui-max-content-width-7t5ed6;
+$minContentWidth: --awsui-min-content-width-7t5ed6;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-7t5ed6;
+$contentGapLeft: --awsui-content-gap-left-7t5ed6;
+$contentGapRight: --awsui-content-gap-right-7t5ed6;
+$contentHeight: --awsui-content-height-7t5ed6;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-7t5ed6;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-7t5ed6;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-7t5ed6;
+$defaultMaxContentWidth: --awsui-default-max-content-width-7t5ed6;
+$defaultMinContentWidth: --awsui-default-min-content-width-7t5ed6;
+$drawerSize: --awsui-drawer-size-7t5ed6;
+$footerHeight: --awsui-footer-height-7t5ed6;
+$headerGap: --awsui-header-gap-7t5ed6;
+$headerHeight: --awsui-header-height-7t5ed6;
+$layoutWidth: --awsui-layout-width-7t5ed6;
+$mainGap: --awsui-main-gap-7t5ed6;
+$mainOffsetLeft: --awsui-main-offset-left-7t5ed6;
+$mainTemplateRows: --awsui-main-template-rows-7t5ed6;
+$mobileBarHeight: --awsui-mobile-bar-height-7t5ed6;
+$notificationsGap: --awsui-notifications-gap-7t5ed6;
+$notificationsHeight: --awsui-notifications-height-7t5ed6;
+$offsetTop: --awsui-offset-top-7t5ed6;
+$overlapHeight: --awsui-overlap-height-7t5ed6;
+$navigationWidth: --awsui-navigation-width-7t5ed6;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-7t5ed6;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-7t5ed6;
+$splitPanelHeight: --awsui-split-panel-height-7t5ed6;
+$splitPanelMinWidth: --awsui-split-panel-min-width-7t5ed6;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-7t5ed6;
+$toolsMaxWidth: --awsui-tools-max-width-7t5ed6;
+$toolsWidth: --awsui-tools-width-7t5ed6;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-7t5ed6;
+$contentScrollMargin: --awsui-content-scroll-margin-7t5ed6;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-7t5ed6;
+$flashbarStackIndex: --awsui-flashbar-stack-index-7t5ed6;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-7t5ed6;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-7t5ed6;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-7t5ed6;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-7t5ed6;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-7t5ed6;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-7t5ed6;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-7t5ed6;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-7t5ed6;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-7t5ed6;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-7t5ed6;
+$sliderLabelCount: --awsui-slider-label-count-7t5ed6;
+$sliderTickCount: --awsui-slider-tick-count-7t5ed6;
+$sliderReferenceColumn: --awsui-slider-reference-column-7t5ed6;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-7t5ed6;
+$sliderMaxStart: --awsui-slider-max-start-7t5ed6;
+$sliderMinEnd: --awsui-slider-min-end-7t5ed6;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-7t5ed6;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-7t5ed6;
+$togglesLeftWidth: --awsui-toggles-left-width-7t5ed6;
+$togglesRightWidth: --awsui-toggles-right-width-7t5ed6;
     

package/lib/internal/scss/split-panel/styles.scss

@@ -9,26 +9,14 @@
 @use '../app-layout/constants' as constants;
 
 @import './motion';
-@import './icons/icons-styles';
 
 $slider-width: 16px;
 
 // Values taken from app layout
 $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{awsui.$space-layout-toggle-padding});
 
-.root {
-  @include styles.styles-reset;
-}
-
-.preferences-button {
-  /* used in test-utils */
-}
-
-.close-button {
-  /* used in test-utils */
-}
-
 .drawer {
+  @include styles.styles-reset;
   flex-shrink: 0;
   position: relative;
   @include styles.text-wrapping;
@@ -154,10 +142,6 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   z-index: 1;
 }
 
-.open-button {
-  /* used in test-utils */
-}
-
 .open-button-side {
   flex: 0 0 auto;
   align-self: flex-start;

package/lib/internal/scss/split-panel/test-classes/styles.scss

@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root,
+.header-text,
+.open-button,
+.close-button,
+.preferences-button,
+.slider,
+.open-position-bottom,
+.open-position-side {
+  /* used in test-utils */
+}

package/lib/internal/scss/table/styles.scss

@@ -147,15 +147,6 @@ filter search icon.
   }
 }
 
-/*
-The dynamic height dark header needs a background that will cover
-the default white background of the container component.
-*/
-.dark-header {
-  background-color: awsui.$color-background-layout-main;
-  color: awsui.$color-text-body-default;
-}
-
 .header-secondary {
   overflow: auto;
   -ms-overflow-style: none; /* Internet Explorer 10+ */

package/lib/internal/scss/wizard/styles.scss

@@ -24,9 +24,6 @@
     grid-template-columns: minmax(0, 1fr) 0;
     row-gap: awsui.$space-scaled-l;
   }
-  &:not(.remove-high-contrast-header) {
-    row-gap: awsui.$space-scaled-xl;
-  }
 }
 
 .wizard:not(.refresh) {
@@ -48,14 +45,6 @@
     padding-inline: 0;
     inline-size: 260px;
     box-sizing: border-box;
-    &:not(.remove-high-contrast-header) {
-      @include styles.container-style;
-      padding-block-start: awsui.$space-scaled-m;
-      padding-block-end: awsui.$space-scaled-l;
-      padding-inline-start: awsui.$space-m;
-      padding-inline-end: awsui.$space-l;
-      inline-size: 280px;
-    }
 
     > li {
       display: grid;
@@ -253,13 +242,6 @@
     padding-block-end: awsui.$space-scaled-s;
   }
 
-  &:not(.remove-high-contrast-header) {
-    > .form-header > .form-header-content {
-      padding-block-start: calc(awsui.$space-l + awsui.$space-scaled-xxs);
-      padding-block-end: awsui.$space-scaled-m;
-    }
-  }
-
   > .form-component {
     grid-column: 2;
     grid-row: 2;