Merge remote-tracking branch 'origin/11.x.x' into action-hub-harness

* origin/11.x.x:
  feat(components/layout): tokenize toolbar component (#2980)

apps/e2e/layout-storybook-e2e/src/e2e/toolbar.component.cy.ts

@@ -21,5 +21,5 @@ describe('layout-storybook', () => {
         );
       });
     });
-  });
+  }, true);
 });

apps/playground/src/app/components/layout/toolbar/toolbar.component.html

@@ -29,7 +29,15 @@
         Disabled (default)
       </button>
     </sky-toolbar-item>
+    <sky-toolbar-item>
+      <sky-search [debounceTime]="250" />
+    </sky-toolbar-item>
     <sky-toolbar-view-actions>
+      <sky-radio-group class="sky-switch-icon-group" [(ngModel)]="activeViewId">
+        <sky-radio icon="table" label="Table" value="table" />
+        <sky-radio icon="list" label="List" value="list" />
+        <sky-radio icon="map-marker" label="Map" value="map" />
+      </sky-radio-group>
       <button
         class="sky-btn sky-btn-default sky-btn-icon"
         title="Sort descending"

apps/playground/src/app/components/layout/toolbar/toolbar.component.ts

@@ -4,4 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html',
 })
-export class ToolbarComponent {}
+export class ToolbarComponent {
+  public activeViewId = 'table';
+}

apps/playground/src/app/components/layout/toolbar/toolbar.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { SkyViewkeeperModule } from '@skyux/core';
+import { SkyRadioModule } from '@skyux/forms';
 import { SkyIconModule } from '@skyux/icon';
 import { SkyToolbarModule } from '@skyux/layout';
+import { SkySearchModule } from '@skyux/lookup';
 
 import { ToolbarRoutingModule } from './toolbar-routing.module';
 import { ToolbarComponent } from './toolbar.component';
@@ -11,8 +14,11 @@ import { ToolbarComponent } from './toolbar.component';
   imports: [
     ToolbarRoutingModule,
     SkyIconModule,
+    SkyRadioModule,
+    SkySearchModule,
     SkyToolbarModule,
     SkyViewkeeperModule,
+    FormsModule,
   ],
 })
 export class ToolbarModule {

libs/components/layout/src/lib/modules/toolbar/toolbar-item.component.scss

@@ -1,27 +1,46 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-toolbar-item') {
+  --sky-override-toolbar-item-spacing-bottom: #{$sky-padding-half};
+  --sky-override-toolbar-item-spacing-right: #{$sky-margin-half};
+}
+
+@include compatMixins.sky-modern-overrides('.sky-toolbar-item') {
+  --sky-override-toolbar-item-text-color: var(--sky-color-text-default);
+}
 
 .sky-toolbar-item {
-  margin-right: $sky-margin-half;
-  margin-bottom: $sky-padding-half;
+  margin-right: var(
+    --sky-override-toolbar-item-spacing-right,
+    var(--sky-space-gap-action_group-m)
+  );
+  margin-bottom: var(--sky-override-toolbar-item-spacing-bottom);
 }
 
 @include mixins.sky-theme-modern {
-  .sky-toolbar-item {
-    margin-bottom: 0;
-    margin-right: $sky-theme-modern-margin-inline-sm;
+  ::ng-deep .sky-btn {
+    padding-left: var(--sky-space-inset-balanced-s);
+    padding-right: var(--sky-space-inset-balanced-s);
 
-    ::ng-deep .sky-btn {
-      padding-left: $sky-theme-modern-space-sm;
-      padding-right: $sky-theme-modern-space-sm;
+    &.sky-btn-default:not(:disabled):not(.sky-search-btn) {
+      background-color: var(--sky-color-background-action-tertiary-base);
+      border: none;
+      color: var(
+        --sky-override-toolbar-item-text-color,
+        var(--sky-color-text-action)
+      );
 
-      &.sky-btn-default:not(:disabled) {
-        background-color: transparent;
-        border: none;
+      &:not(:hover):not(:active):not(:focus) {
+        box-shadow: inset 0 0 0 var(--sky-border-width-action-base) transparent;
+      }
 
-        &:not(:hover):not(:active):not(:focus) {
-          box-shadow: inset 0 0 0 1px transparent;
-        }
+      sky-icon {
+        color: var(
+          --sky-override-toolbar-item-text-color,
+          var(--sky-color-icon-action)
+        );
       }
     }
   }

libs/components/layout/src/lib/modules/toolbar/toolbar-section.component.scss

@@ -1,11 +1,21 @@
-@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 @use 'scss/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-toolbar-container') {
+  --sky-override-toolbar-container-padding: #{$sky-padding-half $sky-padding 0};
+}
 
 .sky-toolbar-section {
   display: flex;
   flex-wrap: nowrap;
-  padding: $sky-padding-half $sky-padding 0;
+  padding: var(
+    --sky-override-toolbar-container-padding,
+    var(--sky-space-inset-vertical-top-s)
+      var(--sky-space-inset-vertical-right-s)
+      var(--sky-space-inset-vertical-bottom-s)
+      var(--sky-space-inset-vertical-left-s)
+  );
   min-height: $sky-toolbar-min-height;
   align-items: center;
   position: relative;
@@ -17,9 +27,3 @@
   flex-wrap: wrap;
   align-items: center;
 }
-
-@include mixins.sky-theme-modern {
-  .sky-toolbar-section {
-    padding: $sky-theme-modern-space-sm 0;
-  }
-}

libs/components/layout/src/lib/modules/toolbar/toolbar-view-actions.component.scss

@@ -1,6 +1,12 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 @use 'scss/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-toolbar-view-actions') {
+  --sky-override-toolbar-view-action-bottom-margin: #{$sky-margin-half};
+  --sky-override-toolbar-view-action-right-margin: #{$sky-margin-half};
+}
 
 :host {
   margin-left: auto;
@@ -9,30 +15,25 @@
 .sky-toolbar-view-actions {
   display: flex;
   align-items: center;
-  margin-bottom: $sky-margin-half;
+  margin-bottom: var(--sky-override-toolbar-view-action-bottom-margin, 0);
 
   ::ng-deep > :not(:last-child) {
-    margin-right: $sky-margin-half;
+    margin-right: var(
+      --sky-override-toolbar-view-action-right-margin,
+      var(--sky-space-gap-action_group-m)
+    );
   }
 }
 
 @include mixins.sky-theme-modern {
-  .sky-toolbar-view-actions {
-    margin-bottom: 0;
-
-    ::ng-deep > :not(:last-child) {
-      margin-right: $sky-theme-modern-margin-inline-sm;
-    }
-
-    ::ng-deep .sky-btn {
-      background-color: transparent;
-      border: none;
-      padding-left: $sky-theme-modern-space-sm;
-      padding-right: $sky-theme-modern-space-sm;
+  ::ng-deep .sky-btn {
+    background-color: var(--sky-color-background-action-tertiary-base);
+    border: none;
+    padding-left: var(--sky-space-inset-balanced-s);
+    padding-right: var(--sky-space-inset-balanced-s);
 
-      &:not(:hover):not(:active):not(:focus) {
-        box-shadow: inset 0 0 0 1px transparent;
-      }
+    &:not(:hover):not(:active):not(:focus) {
+      box-shadow: inset 0 0 0 var(--sky-border-width-action-base) transparent;
     }
   }
 }

libs/components/layout/src/lib/modules/toolbar/toolbar.component.scss

@@ -1,6 +1,13 @@
-@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 @use 'scss/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-toolbar-container') {
+  --sky-override-toolbar-background-color: #{$sky-toolbar-background-color};
+  --sky-override-toolbar-border-top-bottom: #{1px solid
+    $sky-border-color-neutral-medium};
+  --sky-override-toolbar-container-padding: #{$sky-padding-half $sky-padding 0};
+}
 
 sky-toolbar + :host {
   .sky-toolbar-container {
@@ -10,20 +17,39 @@ sky-toolbar + :host {
 
 .sky-toolbar-container {
   min-height: $sky-toolbar-min-height;
-  background-color: $sky-toolbar-background-color;
-  padding: $sky-padding-half $sky-padding 0;
-  @include mixins.sky-border(dark, top, bottom);
+  background-color: var(--sky-override-toolbar-background-color);
+  padding: var(
+    --sky-override-toolbar-container-padding,
+    var(--sky-space-inset-vertical-top-s)
+      var(--sky-space-inset-vertical-right-s)
+      var(--sky-space-inset-vertical-bottom-s)
+      var(--sky-space-inset-vertical-left-s)
+  );
+  border-top: var(--sky-override-toolbar-border-top-bottom, none);
+  border-bottom: var(--sky-override-toolbar-border-top-bottom, none);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   position: relative;
+
   ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section {
-    @include mixins.sky-border(dark, top);
+    border-top: var(
+      --sky-override-toolbar-border-top-bottom,
+      var(--sky-border-width-divider) var(--sky-border-style-divider)
+        var(--sky-color-border-divider)
+    );
   }
 
   &:not(.sky-toolbar-sectioned) {
     flex-wrap: nowrap;
   }
+
+  &.sky-viewkeeper-fixed {
+    background-color: var(
+      --sky-override-toolbar-background-color,
+      var(--sky-color-background-page)
+    );
+  }
 }
 
 .sky-toolbar-sectioned {
@@ -37,47 +63,11 @@ sky-toolbar + :host {
   align-items: center;
 }
 
-// NOTE: These are not using the mixin because we need to look for both of these outside of the
-// component context and placing it in the mixin causes issues with doing this as the mixin uses
-// a `host-context` call already.
-/* clean-css ignore:start */
-:host-context(.sky-theme-modern .sky-viewkeeper-fixed) {
-  .sky-toolbar-container {
-    background-color: $sky-theme-modern-background-color-page-default;
-  }
-}
-
-:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) {
-  .sky-toolbar-container {
-    background-color: $sky-theme-modern-mode-dark-background-color-page-default;
-  }
-}
-/* clean-css ignore:end */
-
-@include mixins.sky-theme-modern {
-  .sky-toolbar-container {
-    background-color: transparent;
-    border: none;
-    padding: $sky-theme-modern-space-sm 0;
-
-    &.sky-viewkeeper-fixed {
-      background-color: $sky-theme-modern-background-color-page-default;
-    }
-
-    ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section {
-      border-top: 1px solid $sky-theme-modern-border-color-neutral-medium;
-    }
-  }
-
-  .sky-toolbar-sectioned {
-    padding: 0;
-  }
-}
-
-@include mixins.sky-theme-modern-dark {
+:host-context(.sky-viewkeeper-fixed) {
   .sky-toolbar-container {
-    &.sky-viewkeeper-fixed {
-      background-color: $sky-theme-modern-mode-dark-background-color-page-default;
-    }
+    background-color: var(
+      --sky-override-toolbar-background-color,
+      var(--sky-color-background-page)
+    );
   }
 }

libs/components/lookup/src/lib/modules/search/search.component.scss

@@ -30,6 +30,8 @@
   --sky-override-search-button-height-width: 40px;
   --sky-override-search-mobile-button-horizontal-padding: 15px;
   --sky-override-search-mobile-button-vertical-padding: 9px;
+  --sky-override-search-toolbar-icon-color: var(--sky-color-icon-default);
+  --sky-override-search-toolbar-item-text-color: var(--sky-color-text-default);
 }
 
 sky-search {
@@ -303,4 +305,30 @@ sky-search {
       }
     }
   }
+
+  .sky-toolbar-item
+    sky-search
+    .sky-search-container
+    .sky-search-input-container
+    sky-input-box {
+    --sky-background-color-input-box-group: transparent;
+    --sky-background-color-input-box-group-focused: transparent;
+
+    .sky-input-group-icon .sky-icon {
+      color: var(
+        --sky-override-search-toolbar-icon-color,
+        var(--sky-color-icon-action)
+      );
+    }
+
+    .sky-input-box-group
+      .sky-form-group
+      .sky-input-box-form-group-inner
+      input::placeholder {
+      color: var(
+        --sky-override-search-toolbar-item-text-color,
+        var(--sky-color-text-action)
+      );
+    }
+  }
 }