page header tokens

blackbaud · Jan 15, 2025 · 1781298 · 1781298
1 parent 37e2173
commit 1781298
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 16 deletions.
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-actions.component.scss b/libs/components/pages/src/lib/modules/page-header/page-header-actions.component.scss
@@ -1,11 +1,32 @@
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('sky-page-header-actions') {
+  --sky-override-page-header-actions-button-space-bottom: var(
+    --sky-margin-stacked-sm
+  );
+  --sky-override-page-header-actions-button-space-right: var(
+    --sky-margin-inline-sm
+  );
+  --sky-override-page-header-actions-space-bottom: calc(
+    var(--sky-margin-stacked-sm) * -1
+  );
+  --sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl);
+}
+
 sky-page-header-actions {
   display: block;
 
   &:not(:empty) {
-    margin-top: var(--sky-margin-stacked-xl);
+    margin-top: var(
+      --sky-override-page-header-actions-space-top,
+      var(--sky-space-stacked-xl)
+    );
     // Negate the bottom margin of the last row of buttons so it doesn't create extra
     // vertical space between the actions and the page content.
-    margin-bottom: calc(var(--sky-margin-stacked-sm) * -1);
+    margin-bottom: var(
+      --sky-override-page-header-actions-space-bottom,
+      calc(var(--sky-space-stacked-s) * -1)
+    );
   }
 
   > sky-dropdown {
@@ -16,13 +37,19 @@ sky-page-header-actions {
   // inside the dropdown.
   > :is(.sky-btn, sky-dropdown) {
     // Vertical space between rows of buttons that have wrapped.
-    margin-bottom: var(--sky-margin-stacked-sm);
+    margin-bottom: var(
+      --sky-override-page-header-actions-button-space-bottom,
+      var(--sky-space-stacked-s)
+    );
 
     &:not(:last-child) {
       // Horizontal space between buttons on the same row. Use margin-right so that
       // extra horizontal space is not added to the first button that wraps to the
       // next line.
-      margin-right: var(--sky-margin-inline-sm);
+      margin-right: var(
+        --sky-override-page-header-actions-button-space-right,
+        var(--sky-space-gap-action_group-m)
+      );
     }
   }
 }
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-alerts.component.scss b/libs/components/pages/src/lib/modules/page-header/page-header-alerts.component.scss
@@ -1,12 +1,25 @@
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);
+  --sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg);
+}
+
 :host {
   display: block;
 
   &:not(:empty) {
-    margin-bottom: var(--sky-margin-stacked-lg);
+    margin-bottom: var(
+      --sky-override-page-header-alert-space-below,
+      var(--sky-space-stacked-l)
+    );
 
     ::ng-deep {
       sky-alert + sky-alert {
-        margin-top: var(--sky-margin-stacked-lg);
+        margin-top: var(
+          --sky-override-page-header-alert-space-between,
+          var(--sky-space-stacked-l)
+        );
       }
     }
   }

diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-alerts.component.ts b/libs/components/pages/src/lib/modules/page-header/page-header-alerts.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Displays alerts within the page header and applies spacing between alerts. Appears above the page title.
@@ -8,5 +9,6 @@ import { Component } from '@angular/core';
   templateUrl: './page-header-alerts.component.html',
   styleUrls: ['./page-header-alerts.component.scss'],
   standalone: false,
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyPageHeaderAlertsComponent {}
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-avatar.component.scss b/libs/components/pages/src/lib/modules/page-header/page-header-avatar.component.scss
@@ -1,16 +1,32 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-page-header-avatar-space-above: 5px;
+  --sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);
+  --sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm);
+}
 
 :host {
   display: block;
 
   &:not(:empty) {
-    padding-top: 5px;
-    margin-right: var(--sky-margin-inline-sm);
+    padding-top: var(
+      --sky-override-page-header-avatar-space-above,
+      var(--sky-space-stacked-xs)
+    );
+    margin-right: var(
+      --sky-override-page-header-avatar-space-right-xs,
+      var(--sky-space-inline-s)
+    );
   }
 }
 
 @include mixins.sky-host-responsive-container-sm-min() {
   &:not(:empty) {
-    margin-right: var(--sky-margin-inline-lg);
+    margin-right: var(
+      --sky-override-page-header-avatar-space-right-sm,
+      var(--sky-space-inline-l)
+    );
   }
 }
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-avatar.component.ts b/libs/components/pages/src/lib/modules/page-header/page-header-avatar.component.ts
@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { SkyDefaultInputProvider, SkyMediaQueryService } from '@skyux/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Displays an avatar within the page header to the left of the page title.
@@ -13,6 +14,7 @@ import { SkyDefaultInputProvider, SkyMediaQueryService } from '@skyux/core';
   styleUrls: ['./page-header-avatar.component.scss'],
   providers: [SkyDefaultInputProvider],
   standalone: false,
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyPageHeaderAvatarComponent {
   constructor() {

diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-details.component.scss b/libs/components/pages/src/lib/modules/page-header/page-header-details.component.scss
@@ -1,7 +1,16 @@
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm);
+}
+
 :host {
   display: block;
 
   &:not(:empty) {
-    margin-top: var(--sky-margin-stacked-sm);
+    margin-top: var(
+      --sky-override-page-header-details-space-above,
+      var(--sky-space-stacked-s)
+    );
   }
 }
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header-details.component.ts b/libs/components/pages/src/lib/modules/page-header/page-header-details.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Displays additional information in the page header, like record details.
@@ -9,5 +10,6 @@ import { Component } from '@angular/core';
   templateUrl: './page-header-details.component.html',
   styleUrls: ['./page-header-details.component.scss'],
   standalone: false,
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyPageHeaderDetailsComponent {}
diff --git a/libs/components/pages/src/lib/modules/page-header/page-header.component.scss b/libs/components/pages/src/lib/modules/page-header/page-header.component.scss
@@ -2,9 +2,9 @@
 @use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
 
 @include compatMixins.sky-default-overrides('.sky-page-header') {
-  --sky-override-page-header-hub-spoke-spacing: #{$sky-space-md};
-  --sky-override-page-header-chevron-size: 16px;
   --sky-override-page-header-chevron-color: var(--sky-text-color-default);
+  --sky-override-page-header-chevron-size: 16px;
+  --sky-override-page-header-hub-spoke-spacing: #{$sky-space-md};
   --sky-override-page-header-parent-color: #{$sky-text-color-action-primary};
 }
 

diff --git a/libs/components/theme/src/lib/styles/_layout-host.scss b/libs/components/theme/src/lib/styles/_layout-host.scss
@@ -35,6 +35,8 @@
       --sky-margin-stacked-xl
     )
     var(--sky-margin-inline-sm);
+  --sky-override-page-header-avatar-size-space: var(--sky-margin-inline-xl);
+  --sky-override-page-header-link-rows-space: var(--sky-margin-stacked-xl);
   --sky-override-page-header-spacing-xs: 20px 10px;
 }
 
@@ -202,15 +204,37 @@
           'header-avatar header-content links'
           'content       content        links';
         grid-template-rows:
-          minmax(var(--sky-margin-stacked-xl), min-content)
-          minmax(var(--sky-margin-stacked-xl), min-content)
-          minmax(var(--sky-margin-stacked-xl), min-content)
+          minmax(
+            var(
+              --sky-override-page-header-link-rows-space,
+              var(--sky-space-stacked-xl)
+            ),
+            min-content
+          )
+          minmax(
+            var(
+              --sky-override-page-header-link-rows-space,
+              var(--sky-space-stacked-xl)
+            ),
+            min-content
+          )
+          minmax(
+            var(
+              --sky-override-page-header-link-rows-space,
+              var(--sky-space-stacked-xl)
+            ),
+            min-content
+          )
           auto;
         grid-template-columns: 0 75% 25%;
 
         &:has(sky-page-header-avatar:not(:empty)) {
           --sky-layout-host-header-avatar-size: calc(
-            120px + var(--sky-margin-inline-xl)
+            120px +
+              var(
+                --sky-override-page-header-avatar-size-space,
+                var(--sky-space-inline-xl)
+              )
           );
           grid-template-columns:
             var(--sky-layout-host-header-avatar-size)