revert: "chore: Refine VR dark mode styles and replace shadows with s…

…trokes (#1814)
cloudscape-design · Dec 15, 2023 · 2473805 · 2473805
1 parent 543da84
commit 2473805
Show file tree

Hide file tree

Showing 28 changed files with 314 additions and 555 deletions.
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -95,7 +95,7 @@ const setupTest = (
 for (const visualRefresh of ['true', 'false']) {
   describe(`visualRefresh=${visualRefresh}`, () => {
     // there is an extra border inside drawer box in visual refresh
-    const vrBorderOffset = visualRefresh === 'true' ? 1 : 0;
+    const vrBorderOffset = visualRefresh === 'true' ? 2 : 0;
 
     test(
       'slider is accessible by keyboard in side position',
@@ -131,7 +131,7 @@ for (const visualRefresh of ['true', 'false']) {
         // there are different layouts between these two designs
         await expect(page.getActiveDrawerWidth()).resolves.toEqual(290 + vrBorderOffset);
         await page.dragResizerTo({ x: 0, y: 0 });
-        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 447 : 520);
+        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 448 : 520);
       })
     );
 

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
@@ -55,7 +55,7 @@
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-dropdown-item-focused;
+        border-color: awsui.$color-border-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
@@ -45,7 +45,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-dropdown-item-focused;
+        border-color: awsui.$color-border-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

diff --git a/src/cards/index.tsx b/src/cards/index.tsx
@@ -230,7 +230,6 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
-  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -269,7 +268,7 @@ const CardsList = <T,>({
           role={listItemRole}
         >
           <div
-            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
+            className={styles['card-inner']}
             onClick={
               canClickEntireCard
                 ? event => {

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
@@ -17,6 +17,7 @@
 
 .header {
   &-variant-full-page.header-refresh {
+    @include container.borders-and-shadows;
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
@@ -77,9 +78,9 @@
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
     padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
+    @include styles.container-shadow;
     width: 100%;
     min-width: 0;
-    @include styles.container-style;
   }
   &-header {
     @include styles.font-heading-m;
@@ -96,12 +97,9 @@
   &-selected {
     > .card-inner {
       background-color: awsui.$color-background-item-selected;
-      &:not(.refresh)::before {
+      &::before {
         border: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
-      &.refresh::before {
-        outline: awsui.$border-item-width solid awsui.$color-border-item-selected;
-      }
     }
   }
 }

diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
@@ -37,7 +37,7 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   &:not(.placeholder).sorting {
     @include animated;
   }

diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
 
 .visible-content,
 .visible-content-toggle,

diff --git a/src/container/internal.tsx b/src/container/internal.tsx
@@ -131,8 +131,7 @@ export default function InternalContainer({
         styles[`variant-${variant}`],
         fitHeight && styles['fit-height'],
         hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),
-        shouldHaveStickyStyles && [styles['sticky-enabled']],
-        isRefresh && styles.refresh
+        shouldHaveStickyStyles && [styles['sticky-enabled']]
       )}
       ref={mergedRef}
     >
@@ -152,7 +151,7 @@ export default function InternalContainer({
         {header && (
           <StickyHeaderContext.Provider value={{ isStuck }}>
             <div
-              className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {
+              className={clsx(styles.header, styles[`header-variant-${variant}`], {
                 [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                 [styles['header-sticky-enabled']]: isSticky,
                 [styles['header-dynamic-height']]: hasDynamicHeight,

diff --git a/src/container/shared.scss b/src/container/shared.scss
@@ -15,6 +15,10 @@ $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
+@mixin borders-and-shadows {
+  @include styles.container-shadow;
+}
+
 @mixin divider {
   border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -24,10 +24,11 @@
   &.variant {
     &-default,
     &-stacked {
-      background-color: awsui.$color-background-container-content;
       // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include styles.container-style;
+      @include shared.borders-and-shadows;
+      background-color: awsui.$color-background-container-content;
     }
+
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
@@ -43,9 +44,13 @@
       border-top-right-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked:not(.refresh)::before {
+    &-stacked + &-stacked::before {
       @include shared.divider;
     }
+    // Reset container shadow to prevent unwanted overflow
+    &-stacked + &-stacked::after {
+      box-shadow: awsui.$shadow-container-stacked;
+    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
@@ -171,11 +176,11 @@
   }
 
   &-variant-cards {
-    // Border and shadows are applied with ::before and ::after elements (respectively)
-    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }
+    @include shared.borders-and-shadows;
+
     &.header-stuck::after,
     &.header-stuck::before {
       border: 0;

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -128,6 +128,7 @@
 .title {
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
+
   &-variant-h1 {
     font-size: awsui.$font-size-heading-xl;
     padding-top: awsui.$space-scaled-2x-xxs;

diff --git a/src/internal/components/abstract-switch/styles.scss b/src/internal/components/abstract-switch/styles.scss
@@ -13,10 +13,6 @@
   display: block;
 }
 
-.label {
-  color: awsui.$color-text-form-default;
-}
-
 .outline {
   display: none;
   &.show-outline {

diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
@@ -53,7 +53,7 @@
   }
 
   &.highlighted {
-    z-index: 3;
+    z-index: 2;
     background-color: awsui.$color-background-dropdown-item-hover;
     border-color: awsui.$color-border-dropdown-item-hover;
     &.disabled {
@@ -64,18 +64,12 @@
   }
 
   &.selected {
-    z-index: 2;
     background-color: awsui.$color-background-dropdown-item-selected;
-    border-color: awsui.$color-border-dropdown-item-selected;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
-    &.highlighted {
-      border-color: awsui.$color-border-dropdown-item-hover;
-      z-index: 3;
-    }
   }
 
   &.selected + &.selected {
@@ -84,7 +78,7 @@
   }
 
   &.highlighted.is-keyboard {
-    border-color: awsui.$color-border-dropdown-item-focused;
+    border-color: awsui.$color-border-item-focused;
     box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
   }
 

diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
@@ -130,7 +130,7 @@
   }
 }
 
-@mixin container-style {
+@mixin container-shadow {
   border-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
@@ -145,13 +145,15 @@
 
   &::after {
     @include utils.base-pseudo-element;
-    border-radius: awsui.$border-radius-container;
-  }
-  &:not(.refresh)::after {
     box-shadow: awsui.$shadow-container;
+    border-radius: awsui.$border-radius-container;
+    mix-blend-mode: multiply;
   }
-  &.refresh::after {
-    outline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
+  // HACK: because of the issues with IE's box shadow rendering we draw
+  // a border and don't mind the pixel fitting
+  @media screen and (-ms-high-contrast: active) {
+    border: constants.$control-border-width solid awsui.$color-border-container-top;
   }
 }
 

diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
@@ -30,7 +30,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
   padding: $cell-vertical-padding $cell-horizontal-padding $cell-vertical-padding-w-border;
   border-top: awsui.$border-divider-list-width solid transparent;
   word-wrap: break-word;
-  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
+  border-bottom: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   font-weight: inherit;
   &:not(.body-cell-wrap) {
     white-space: nowrap;

diff --git a/src/table/resizer/styles.scss b/src/table/resizer/styles.scss
@@ -27,7 +27,7 @@ th:not(:last-child) > .divider {
   min-height: awsui.$line-height-heading-xs;
   max-height: calc(100% - #{$gap});
   margin: auto;
-  border-left: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
+  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-interactive-default;
   box-sizing: border-box;
 
   &-disabled {

diff --git a/src/wizard/styles.scss b/src/wizard/styles.scss
@@ -38,7 +38,7 @@
   > ul {
     background: awsui.$color-background-container-content;
     position: relative;
-    @include styles.container-style;
+    @include styles.container-shadow;
     margin: 0;
     padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
     width: 280px;

diff --git a/src/wizard/wizard-navigation.tsx b/src/wizard/wizard-navigation.tsx
@@ -53,7 +53,7 @@ export default function Navigation({
       className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}
       aria-label={i18nStrings.navigationAriaLabel}
     >
-      <ul className={clsx(isVisualRefresh && styles.refresh)}>
+      <ul>
         {steps.map((step, index: number) =>
           isVisualRefresh ? (
             <NavigationStepVisualRefresh

diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
@@ -56,15 +56,13 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderContainerTop: { light: '{colorGrey200}', dark: '{colorGrey700}' },
   colorBorderControlDefault: { light: '{colorGrey550}' },
   colorBorderDividerActive: '{colorGrey550}',
-  colorBorderDividerDefault: { light: '{colorGrey200}', dark: '{colorGrey650}' },
+  colorBorderDividerDefault: { dark: '{colorGrey650}' },
   colorBorderDividerInteractiveDefault: '{colorGrey550}',
   colorBorderDividerPanelBottom: '{colorShadowSide}',
   colorBorderDividerPanelSide: 'transparent',
-  colorBorderDividerSecondary: { light: '{colorGrey200}', dark: '{colorGrey650}' },
   colorBorderDropdownContainer: 'transparent',
   colorBorderDropdownItemHover: { dark: '{colorGrey500}' },
   colorBorderDropdownItemDimmedHover: `{colorBorderDropdownItemHover}`,
-  colorBorderDropdownItemSelected: '{colorBorderDropdownItemDefault}',
   colorBorderDropdownItemTop: '{colorBorderDropdownItemDefault}',
   colorBorderInputDefault: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorBorderItemFocused: { light: '{colorBlue600}' },
@@ -75,7 +73,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderSegmentDefault: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorBorderSegmentDisabled: '{colorBorderButtonNormalDisabled}',
   colorBorderSegmentHover: { light: '{colorGrey900}', dark: '{colorWhite}' },
-  colorBorderDropdownItemFocused: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorBorderStatusError: { dark: '{colorRed600}' },
   colorBorderStatusSuccess: { dark: '{colorGreen600}' },
   colorBorderTabsDivider: { light: '{colorGrey400}', dark: '{colorGrey650}' },
@@ -88,8 +85,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorStrokeCodeEditorResizeHandler: '{colorGrey550}',
   colorStrokeCodeEditorGutterActiveLineDefault: { dark: '{colorGrey650}' },
   colorTextAccent: { light: '{colorBlue600}', dark: '{colorBlue400}' },
-  colorTextBodyDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
-  colorTextBodySecondary: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorTextBreadcrumbCurrent: { dark: '{colorGrey300}' },
   colorTextBreadcrumbIcon: { light: '{colorGrey550}' },
   colorTextButtonInlineIconDefault: '{colorTextInteractiveDefault}',
@@ -109,11 +104,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextExpandableSectionDefault: '{colorTextInteractiveDefault}',
   colorTextExpandableSectionHover: '{colorTextInteractiveHover}',
   colorTextExpandableSectionNavigationIconDefault: '{colorTextIconCaret}',
-  colorTextHeadingDefault: { light: '{colorGrey900}', dark: '{colorGrey200}' },
-  colorTextHeadingSecondary: { light: '{colorGrey600}', dark: '{colorGrey300}' },
-  colorTextHomeHeaderDefault: { light: '{colorWhite}', dark: '{colorGrey200}' },
-  colorTextHomeHeaderSecondary: '{colorGrey300}',
-  colorTextFormDefault: { light: '{colorGrey900}', dark: '{colorGrey300}' },
+  colorTextHeadingSecondary: { dark: '{colorGrey300}' },
+  colorTextHomeHeaderDefault: { dark: '{colorGrey200}' },
   colorTextInputDisabled: { light: '{colorGrey500}' },
   colorTextInputPlaceholder: { light: '{colorGrey550}', dark: '{colorGrey500}' },
   colorTextInputPlaceholderDisabled: '{colorTextInputPlaceholder}',
@@ -140,7 +132,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorDropzoneBackgroundHover: { light: '{colorBlue300}', dark: '{colorBlue600}' },
   colorDropzoneTextActive: { light: '{colorGrey600}', dark: '{colorGrey900}' },
   colorDropzoneTextHover: { light: '{colorBlue900}', dark: '{colorWhite}' },
-  colorBackgroundDropdownItemHover: { light: '{colorGrey150}', dark: '{colorGrey650}' },
 };
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = merge(

diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
@@ -24,7 +24,6 @@ export type ColorPaletteTokenName =
   | 'colorGrey150'
   | 'colorGrey200'
   | 'colorGrey300'
-  | 'colorGrey350'
   | 'colorGrey400'
   | 'colorGrey450'
   | 'colorGrey500'
@@ -34,7 +33,6 @@ export type ColorPaletteTokenName =
   | 'colorGrey700'
   | 'colorGrey750'
   | 'colorGrey800'
-  | 'colorGrey850'
   | 'colorGrey900'
   | 'colorGrey950'
   | 'colorOrange100'
@@ -305,7 +303,6 @@ export type ColorsTokenName =
   | 'colorBorderControlDisabled'
   | 'colorBorderDividerActive'
   | 'colorBorderDividerDefault'
-  | 'colorBorderDividerSecondary'
   | 'colorBorderDividerPanelBottom'
   | 'colorBorderDividerPanelSide'
   | 'colorBorderDropdownContainer'
@@ -319,7 +316,6 @@ export type ColorsTokenName =
   | 'colorBorderInputDefault'
   | 'colorBorderInputDisabled'
   | 'colorBorderItemFocused'
-  | 'colorBorderDropdownItemFocused'
   | 'colorBorderItemPlaceholder'
   | 'colorBorderItemSelected'
   | 'colorBorderLayout'