feat(components/pages): tokenize page, page header, link lists

apps/e2e/pages-storybook-e2e/src/e2e/blocks-tile-dashboard-page.component.cy.ts

@@ -24,5 +24,5 @@ describe(`pages-storybook-blocks-tile-dashboard`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook-e2e/src/e2e/page-layout-blocks.component.cy.ts

@@ -51,5 +51,5 @@ describe(`pages-storybook`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook-e2e/src/e2e/page-layout-fit.component.cy.ts

@@ -23,5 +23,5 @@ describe(`pages-storybook`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook-e2e/src/e2e/page-layout-list.component.cy.ts

@@ -23,5 +23,5 @@ describe(`pages-storybook`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook-e2e/src/e2e/page-layout-tabs.component.cy.ts

@@ -23,5 +23,5 @@ describe(`pages-storybook`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook-e2e/src/e2e/tabs-tile-dashboard-page.component.cy.ts

@@ -24,5 +24,5 @@ describe(`pages-storybook-tabs-tile-dashboard`, () => {
         });
       });
     });
-  });
+  }, true);
 });

apps/e2e/pages-storybook/project.json

@@ -18,7 +18,8 @@
         "styles": [
           "apps/e2e/pages-storybook/src/styles.scss",
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ],
         "scripts": []
       },
@@ -88,7 +89,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
@@ -108,7 +110,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {

libs/components/pages/src/lib/modules/link-list/link-list-item.component.scss

@@ -0,0 +1,11 @@
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-link-item-space-below: var(--sky-margin-stacked-sm);
+}
+
+:host {
+  display: block;
+  margin: 0 0
+    var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0;
+}

libs/components/pages/src/lib/modules/link-list/link-list-item.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * A wrapper for each link in a link list.
@@ -7,14 +8,10 @@ import { Component } from '@angular/core';
   standalone: true,
   selector: 'sky-link-list-item',
   template: `<ng-content />`,
-  styles: `
-    :host {
-      display: block;
-      margin: 0 0 var(--sky-margin-stacked-sm) 0;
-    }
-  `,
+  styleUrl: './link-list-item.component.scss',
   host: {
     '[attr.role]': '"listitem"',
   },
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyLinkListItemComponent {}

libs/components/pages/src/lib/modules/link-list/link-list.component.scss

@@ -1,12 +1,24 @@
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-link-list') {
+  --sky-override-link-list-space-below: var(--sky-margin-stacked-xl);
+}
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-link-list-heading-space: var(--sky-margin-stacked-sm);
+}
+
 ul.sky-link-list {
   list-style: none;
-  margin: 0 0 var(--sky-margin-stacked-xl) 0;
+  margin: 0 0
+    var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;
   padding-left: 0;
 }
 
 h2,
 li {
-  margin: 0 0 var(--sky-margin-stacked-sm) 0;
+  margin: 0 0
+    var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0;
 }
 
 ul.sky-link-list > li:has(> a[hidden]) {

libs/components/pages/src/lib/modules/link-list/link-list.component.ts

@@ -2,6 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { Component, computed, contentChildren, input } from '@angular/core';
 import { SkyWaitModule } from '@skyux/indicators';
 import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 import { SkyPageLink } from '../action-hub/types/page-link';
 import { SkyPageLinksInput } from '../action-hub/types/page-links-input';
@@ -23,6 +24,7 @@ import { SkyLinkListItemComponent } from './link-list-item.component';
     SkyHrefModule,
     SkyWaitModule,
   ],
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyLinkListComponent {
   /**

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)
+      );
     }
   }
 }

libs/components/pages/src/lib/modules/page-header/page-header-alerts.component.scss

@@ -1,13 +1,22 @@
+@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;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(
+    --sky-override-page-header-alert-space-between,
+    var(--sky-space-stacked-l)
+  );
 
   &:not(:empty) {
-    margin-bottom: var(--sky-margin-stacked-lg);
-
-    ::ng-deep {
-      sky-alert + sky-alert {
-        margin-top: var(--sky-margin-stacked-lg);
-      }
-    }
+    margin-bottom: var(
+      --sky-override-page-header-alert-space-below,
+      var(--sky-space-stacked-l)
+    );
   }
 }

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 {}

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)
+    );
   }
 }

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() {

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)
+    );
   }
 }

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 {}

libs/components/pages/src/lib/modules/page-header/page-header.component.scss

@@ -1,5 +1,12 @@
-@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-page-header') {
+  --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};
+}
 
 :host {
   flex-grow: var(--sky-layout-host-header-flex-grow, 0);
@@ -28,12 +35,26 @@
   }
 
   &-parent-link {
-    color: $sky-text-color-action-primary;
+    color: var(
+      --sky-override-page-header-parent-color,
+      var(--sky-color-text-action)
+    );
   }
 
   &-chevron {
-    font-size: 16px;
-    margin: 0 $sky-space-md;
+    color: var(
+      --sky-override-page-header-chevron-color,
+      var(--sky-color-icon-default)
+    );
+    font-size: var(
+      --sky-override-page-header-chevron-size,
+      var(--sky-size-icon-s)
+    );
+    margin: 0
+      var(
+        --sky-override-page-header-hub-spoke-spacing,
+        var(--sky-space-gap-icon-m)
+      );
   }
 
   &-chevron,
@@ -48,19 +69,3 @@
     }
   }
 }
-
-@include mixins.sky-theme-modern() {
-  .sky-page-header {
-    &-parent-link {
-      color: $sky-theme-modern-text-color-action-primary;
-    }
-  }
-}
-
-@include mixins.sky-theme-modern-dark() {
-  .sky-page-header {
-    &-parent-link {
-      color: $sky-theme-modern-mode-dark-text-color-action-primary;
-    }
-  }
-}