Fix snapshot tests.

cloudscape-design · Feb 21, 2025 · 6b0d3d5 · 6b0d3d5
1 parent afb2143
commit 6b0d3d5
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 24 deletions.
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -71,6 +71,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -384,6 +388,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -730,6 +736,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-control-checked": "#00a1c9",
   "color-background-control-default": "#1a2029",
   "color-background-control-disabled": "#414750",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#2a2e33",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#2a2e33",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#12293b",
@@ -1043,6 +1053,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-counter": "#95a5a6",
   "color-text-disabled": "#687078",
   "color-text-disabled-inline-edit": "#95a5a6",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#687078",
   "color-text-dropdown-footer": "#95a5a6",
   "color-text-dropdown-group-label": "#95a5a6",
   "color-text-dropdown-item-default": "#d5dbdb",
@@ -1389,6 +1401,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -1702,6 +1718,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -2048,6 +2066,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -2361,6 +2383,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -2707,6 +2731,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-control-checked": "#006ce0",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#dedee3",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#ebebf0",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3020,6 +3048,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-counter": "#656871",
   "color-text-disabled": "#b4b4bb",
   "color-text-disabled-inline-edit": "#424650",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#b4b4bb",
   "color-text-dropdown-footer": "#656871",
   "color-text-dropdown-group-label": "#424650",
   "color-text-dropdown-item-default": "#0f141a",
@@ -3366,6 +3396,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#006ce0",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#dedee3",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#ebebf0",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3679,6 +3713,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#656871",
   "color-text-disabled": "#b4b4bb",
   "color-text-disabled-inline-edit": "#424650",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#b4b4bb",
   "color-text-dropdown-footer": "#656871",
   "color-text-dropdown-group-label": "#424650",
   "color-text-dropdown-item-default": "#0f141a",
@@ -4025,6 +4061,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#42b4ff",
   "color-background-control-default": "#0f141a",
   "color-background-control-disabled": "#333843",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#232b37",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#1b232d",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#333843",
@@ -4338,6 +4378,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#a4a4ad",
   "color-text-disabled": "#656871",
   "color-text-disabled-inline-edit": "#b4b4bb",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#656871",
   "color-text-dropdown-footer": "#a4a4ad",
   "color-text-dropdown-group-label": "#c6c6cd",
   "color-text-dropdown-item-default": "#dedee3",
@@ -4684,6 +4726,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#42b4ff",
   "color-background-control-default": "#161d26",
   "color-background-control-disabled": "#333843",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#232b37",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#1b232d",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#333843",
@@ -4997,6 +5043,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#a4a4ad",
   "color-text-disabled": "#656871",
   "color-text-disabled-inline-edit": "#b4b4bb",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#656871",
   "color-text-dropdown-footer": "#a4a4ad",
   "color-text-dropdown-group-label": "#c6c6cd",
   "color-text-dropdown-item-default": "#dedee3",

diff --git a/src/internal/components/drag-handle-wrapper/motion.scss b/src/internal/components/drag-handle-wrapper/motion.scss
@@ -25,15 +25,15 @@
   &.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-up awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-up awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-up-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-up-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
 }
@@ -42,15 +42,15 @@
   &.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-down awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-down awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-down-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-down-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
 }
@@ -59,29 +59,29 @@
   &.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-left awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-left awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-rtl.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-right awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-right awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-left-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-left-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-rtl.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-right-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-right-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
 }
@@ -90,29 +90,29 @@
   &.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-right awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-right awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-rtl.drag-button-motion-entering {
     @include styles.with-motion {
       animation:
-        slide-left awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-in awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-left awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-in awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-right-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-right-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
   &.drag-button-rtl.drag-button-motion-exiting {
     @include styles.with-motion {
       animation:
-        slide-left-exit awsui.$motion-duration-fast awsui.$motion-easing-expressive,
-        awsui-motion-fade-out-0 awsui.$motion-duration-fast awsui.$motion-easing-expressive;
+        slide-left-exit awsui.$motion-duration-expressive awsui.$motion-easing-expressive,
+        awsui-motion-fade-out-0 awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
     }
   }
 }