chore: Toolbar visual design fit & finish updates (#2707)

Author: jkuelz

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -2759,7 +2759,7 @@ Object {
   "color-border-item-focused": "#0972d3",
   "color-border-item-placeholder": "#0972d3",
   "color-border-item-selected": "#0972d3",
-  "color-border-layout": "#b6bec9",
+  "color-border-layout": "#9ba7b6",
   "color-border-notification-stack-bar": "#232f3e",
   "color-border-panel-header": "#b6bec9",
   "color-border-popover": "#9ba7b6",
@@ -3408,7 +3408,7 @@ Object {
   "color-border-item-focused": "#0972d3",
   "color-border-item-placeholder": "#0972d3",
   "color-border-item-selected": "#0972d3",
-  "color-border-layout": "#b6bec9",
+  "color-border-layout": "#9ba7b6",
   "color-border-notification-stack-bar": "#232f3e",
   "color-border-panel-header": "#b6bec9",
   "color-border-popover": "#9ba7b6",

src/app-layout/visual-refresh-toolbar/skeleton/styles.scss

@@ -132,7 +132,7 @@
 
 .toolbar-container {
   grid-area: toolbar;
-  block-size: 48px;
+  block-size: 42px;
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
 }
 

src/app-layout/visual-refresh-toolbar/toolbar/styles.scss

@@ -30,7 +30,7 @@
   }
 
   > .toolbar-container {
-    block-size: 48px;
+    block-size: 100%;
     align-items: center;
     display: grid;
     column-gap: awsui.$space-static-xs;
@@ -86,7 +86,7 @@
 }
 
 .group-divider {
-  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   block-size: 60%;
 }
 

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

@@ -26,8 +26,8 @@
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
-  block-size: 34px;
-  inline-size: 34px;
+  block-size: 30px;
+  inline-size: 30px;
   display: flex;
   align-items: center;
   justify-content: center;

style-dictionary/visual-refresh/colors.ts

@@ -135,7 +135,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderDropdownItemFocused: { light: '{colorGrey600}', dark: '{colorGrey300}' },
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
   colorBorderItemSelected: { light: '{colorBlue600}', dark: '{colorBlue500}' },
-  colorBorderLayout: '{colorBorderDividerDefault}',
+  colorBorderLayout: { light: '{colorGrey400}', dark: '{colorGrey600}' },
   colorBorderNotificationStackBar: '{colorGrey700}',
   colorBorderPanelHeader: '{colorBorderDividerDefault}',
   colorBorderPopover: { light: '{colorGrey400}', dark: '{colorGrey550}' },