@skyux/theme 12.0.0-alpha.12 → 12.0.0-alpha.14

package/css/themes/modern/styles.css

@@ -621,7 +621,7 @@
   overflow: hidden;
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn {
   --sky-override-borderless-icon-size: 26px;
   --sky-override-button-icon-borderless-padding: 1px;
   --sky-override-button-icon-padding: 9px 15px;
@@ -635,40 +635,40 @@
   --sky-override-button-link-inline-font-size: var(--sky-font-size-body-m);
   --sky-override-button-link-inline-vertical-align: top;
   --sky-override-button-padding: 9px 21px;
-  --sky-override-button-primary-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-primary-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-primary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-icon-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-icon-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-secondary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-danger-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-danger-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-danger-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-tertiary-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-tertiary-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus,);
-  --sky-override-button-link-inline-disabled-box-shadow: 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-link-inline-disabled-box-shadow:
+    0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-borderless-inline-disabled-box-shadow: 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-borderless-inline-disabled-box-shadow:
+    0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus);
 }
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
   --sky-override-button-line-height: calc(20 / 14);
 }
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-borderless-inline {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-base) .sky-btn.sky-btn-borderless-inline {
   --sky-override-button-line-height: normal;
   --sky-override-button-opacity-disabled: 0.65;
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn-tab {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn-tab {
   --sky-override-tab-selected-background-color: var(--modern-color-transparent);
   --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
   --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
@@ -1290,11 +1290,11 @@
   box-shadow: var(--sky-elevation-overlay-400);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) select {
+.sky-theme-modern:not(.sky-theme-brand-base) select {
   --sky-override-select-icon-size: var(--modern-size-15) var(--modern-size-30);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-error-label {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-error-label {
   --sky-override-error-label-margin-top: var(--modern-size-5);
 }
 
@@ -1318,7 +1318,7 @@
   background-size: var(--sky-override-select-icon-size, var(--sky-size-icon-s) var(--sky-size-icon-xl));
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
+.sky-theme-modern:not(.sky-theme-brand-base) {
   --sky-override-icon-color-group: var(--sky-color-icon-action);
   --sky-override-icon-switch-border-width-disabled: 0;
   --sky-override-icon-switch-font-size: 18px;
@@ -1511,7 +1511,7 @@
   border-radius: var(--sky-border-radius-s);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
+.sky-theme-modern:not(.sky-theme-brand-base) {
   --sky-override-a-border-radius: 0;
   --sky-override-a-color-hover-active: var(
     --sky-text-color-action-primary-hover
@@ -1520,7 +1520,7 @@
   --sky-override-p-line-height: var(--sky-font-line_height-body-m);
 }
 
-html:has(.sky-theme-brand-blackbaud) {
+html:has(.sky-theme-brand-base) {
   font-size: initial;
   line-height: 1.4285714286;
 }
@@ -1597,24 +1597,24 @@ html:has(.sky-theme-brand-blackbaud) {
   border-radius: var(--sky-border-radius-s);
 }
 
-.sky-theme-modern.sky-theme-brand-blackbaud h1,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-1 {
+.sky-theme-modern.sky-theme-brand-base h1,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-1 {
   line-height: var(--sky-font-line_height-heading-1);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h2,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-2 {
+.sky-theme-modern.sky-theme-brand-base h2,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-2 {
   line-height: var(--sky-font-line_height-heading-2);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h3,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-3 {
+.sky-theme-modern.sky-theme-brand-base h3,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-3 {
   line-height: var(--sky-font-line_height-heading-3);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h4,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-4 {
+.sky-theme-modern.sky-theme-brand-base h4,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-4 {
   line-height: var(--sky-font-line_height-heading-4);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h5,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-5 {
+.sky-theme-modern.sky-theme-brand-base h5,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-5 {
   line-height: var(--sky-font-line_height-heading-5);
 }
 
@@ -1703,32 +1703,32 @@ html:has(.sky-theme-brand-blackbaud) {
   font-weight: var(--sky-font-weight-display-4);
 }
 
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-default {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-default {
   line-height: var(--sky-font-line_height-body-m);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-sm {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-sm {
   line-height: var(--sky-font-line_height-body-s);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-lg {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-lg {
   line-height: var(--sky-font-line_height-body-l);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-data-label {
+.sky-theme-modern.sky-theme-brand-base .sky-font-data-label {
   line-height: var(--sky-font-line_height-data_label);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-field-label {
+.sky-theme-modern.sky-theme-brand-base .sky-font-field-label {
   line-height: var(--sky-font-line_height-data_label);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-1 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-1 {
   line-height: var(--sky-font-line_height-display-1);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-2 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-2 {
   line-height: var(--sky-font-line_height-display-2);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-3,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-headline {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-3,
+.sky-theme-modern.sky-theme-brand-base .sky-headline {
   line-height: var(--sky-font-line_height-display-3);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-4 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-4 {
   line-height: var(--sky-font-line_height-display-4);
 }
 

package/fesm2022/skyux-theme.mjs

@@ -28,6 +28,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 }]
         }] });
 
+/**
+ * Defines properties of a SKY UX theme mode.
+ */
+class SkyThemeMode {
+    /**
+     * The preset themes available in SKY UX.
+     */
+    static { this.presets = {
+        light: new SkyThemeMode('light', 'sky-theme-mode-light'),
+        dark: new SkyThemeMode('dark', 'sky-theme-mode-dark'),
+    }; }
+    /**
+     * Creates a new theme mode.
+     * @param name The name of the theme mode.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme mode.
+     */
+    constructor(name, hostClass) {
+        this.name = name;
+        this.hostClass = hostClass;
+    }
+}
+
+/**
+ * Defines properties of SKY UX theme spacing.
+ */
+class SkyThemeSpacing {
+    /**
+     * The preset spacing available in SKY UX.
+     */
+    static { this.presets = {
+        standard: new SkyThemeSpacing('standard', 'sky-theme-spacing-standard'),
+        compact: new SkyThemeSpacing('compact', 'sky-theme-spacing-compact'),
+    }; }
+    /**
+     * Creates a new theme spacing.
+     * @param name The name of the theme spacing.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme spacing.
+     */
+    constructor(name, hostClass) {
+        this.name = name;
+        this.hostClass = hostClass;
+    }
+}
+
 /**
  * Provides methods for updating and handling changes to the current theme.
  */
@@ -76,6 +122,7 @@ class SkyThemeService {
         this.#applyThemeClass(previous, settings, 'theme');
         this.#applyThemeClass(previous, settings, 'mode', 'supportedModes');
         this.#applyThemeClass(previous, settings, 'spacing', 'supportedSpacing');
+        this.#applyThemeClass(previous, settings, 'brand');
         this.#settings.next({
             currentSettings: settings,
             previousSettings: previous,
@@ -84,18 +131,28 @@ class SkyThemeService {
     }
     #applyThemeClass(previous, current, prop, supportedProp) {
         const currentSetting = current[prop];
-        const previousClass = previous?.[prop].hostClass;
-        const currentClass = currentSetting.hostClass;
-        const classChanged = !previous || previousClass !== currentClass;
-        if (classChanged) {
-            if (previousClass) {
-                this.#removeHostClass(previousClass);
+        const previousClass = previous?.[prop]?.hostClass;
+        const currentClass = currentSetting?.hostClass;
+        if (!previousClass || previousClass !== currentClass) {
+            this.#updateHostClass(prop, previousClass, currentClass, currentSetting, current, supportedProp);
+        }
+    }
+    #updateHostClass(prop, previousClass, currentClass, currentSetting, current, supportedProp) {
+        if (previousClass) {
+            this.#removeHostClass(previousClass);
+        }
+        if (prop === 'brand') {
+            if (currentClass && !previousClass) {
+                this.#addHostClass('sky-theme-brand-base');
             }
-            if (!supportedProp ||
-                current.theme[supportedProp].indexOf(currentSetting) >= 0) {
-                this.#addHostClass(currentClass);
+            else if (!currentClass && previousClass) {
+                this.#removeHostClass('sky-theme-brand-base');
             }
         }
+        if (currentClass &&
+            this.#isSupportedProperty(currentSetting, current, supportedProp)) {
+            this.#addHostClass(currentClass);
+        }
     }
     #addHostClass(className) {
         this.#renderer.addClass(this.#hostEl, className);
@@ -103,6 +160,12 @@ class SkyThemeService {
     #removeHostClass(className) {
         this.#renderer.removeClass(this.#hostEl, className);
     }
+    #isSupportedProperty(currentSetting, current, supportedProp) {
+        return (!supportedProp ||
+            ((currentSetting instanceof SkyThemeMode ||
+                currentSetting instanceof SkyThemeSpacing) &&
+                current.theme[supportedProp].includes(currentSetting)));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyThemeService }); }
 }
@@ -347,52 +410,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }] } });
 
-/**
- * Defines properties of a SKY UX theme mode.
- */
-class SkyThemeMode {
-    /**
-     * The preset themes available in SKY UX.
-     */
-    static { this.presets = {
-        light: new SkyThemeMode('light', 'sky-theme-mode-light'),
-        dark: new SkyThemeMode('dark', 'sky-theme-mode-dark'),
-    }; }
-    /**
-     * Creates a new theme mode.
-     * @param name The name of the theme mode.
-     * @param hostClass The class on the host element which child components should reference when
-     * adjusting for a specified theme mode.
-     */
-    constructor(name, hostClass) {
-        this.name = name;
-        this.hostClass = hostClass;
-    }
-}
-
-/**
- * Defines properties of SKY UX theme spacing.
- */
-class SkyThemeSpacing {
-    /**
-     * The preset spacing available in SKY UX.
-     */
-    static { this.presets = {
-        standard: new SkyThemeSpacing('standard', 'sky-theme-spacing-standard'),
-        compact: new SkyThemeSpacing('compact', 'sky-theme-spacing-compact'),
-    }; }
-    /**
-     * Creates a new theme spacing.
-     * @param name The name of the theme spacing.
-     * @param hostClass The class on the host element which child components should reference when
-     * adjusting for a specified theme spacing.
-     */
-    constructor(name, hostClass) {
-        this.name = name;
-        this.hostClass = hostClass;
-    }
-}
-
 /**
  * Defines properties of a SKY UX theme.
  */
@@ -429,10 +446,11 @@ class SkyThemeSettings {
      * @param theme The theme configuration.
      * @param mode The theme mode.
      */
-    constructor(theme, mode, spacing = SkyThemeSpacing.presets.standard) {
+    constructor(theme, mode, spacing = SkyThemeSpacing.presets.standard, brand) {
         this.theme = theme;
         this.mode = mode;
         this.spacing = spacing;
+        this.brand = brand;
     }
 }
 
@@ -499,6 +517,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ * Defines properties of SKY UX theme branding.
+ */
+class SkyThemeBrand {
+    get hostClass() {
+        return this.#hostClass || `sky-theme-brand-${this.name}`;
+    }
+    set hostClass(value) {
+        this.#hostClass = value;
+    }
+    #hostClass;
+    /**
+     * Creates a new theme brand.
+     * @param name The name of the theme brand.
+     * @param hostClass The class on the host element which child components should reference when
+     * adjusting for a specified theme brand. This defaults to `sky-theme-brand-<name>
+     */
+    constructor(name, version, hostClass) {
+        this.name = name;
+        this.version = version;
+        this.hostClass = hostClass;
+        if (!/\d+\.\d+\.\d+(?:-(?:alpha|beta|rc)\.\d)*$/.test(version)) {
+            throw new Error(`Invalid version format "${version}" for theme brand "${name}".`);
+        }
+    }
+}
+
 class SkyThemeComponentClassDirective {
     #changeDetector;
     #themeService;
@@ -571,6 +617,10 @@ class SkyAppViewportService {
         };
         this.#document.addEventListener('scroll', onScroll);
         inject(DestroyRef).onDestroy(() => {
+            /* istanbul ignore next */
+            if (this.#updateRequest !== undefined) {
+                cancelAnimationFrame(this.#updateRequest);
+            }
             this.#intersectionObserver.disconnect();
             this.#document.removeEventListener('scroll', onScroll);
         });
@@ -611,7 +661,7 @@ class SkyAppViewportService {
                 top: 0,
             };
             for (const args of this.#reserveItems.values()) {
-                args.active = this.#isElementVisible(args);
+                args.active = this.#isElementVisible(args, reservedSpaces);
                 if (args.active) {
                     reservedSpaces[args.position] += args.size;
                 }
@@ -629,7 +679,8 @@ class SkyAppViewportService {
             this.#intersectionObserver.observe(item.reserveForElement);
         }
     }
-    #isElementVisible(args) {
+    #isElementVisible(args, reservedSpaces = this
+        .#reservedSpaces) {
         if (!args.reserveForElement) {
             return true;
         }
@@ -652,10 +703,9 @@ class SkyAppViewportService {
             if (args.reserveForElement.contains(this.#document.elementFromPoint(midpoint.x, midpoint.y))) {
                 return true;
             }
-            // Check if the item's midpoint is visible if its space were not reserved.
-            const threshold = args.active
-                ? this.#reservedSpaces[args.position] - args.size
-                : this.#reservedSpaces[args.position];
+            // Check if the item's midpoint is visible based on current reserved spaces.
+            // Assumes reserved spaces are intended to be additive and not overlapping.
+            const threshold = reservedSpaces[args.position];
             switch (args.position) {
                 case 'top':
                     return midpoint.y >= threshold;
@@ -697,5 +747,5 @@ function provideInitialTheme(name = 'default', options) {
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAppStyleLoader, SkyAppViewportService, SkyTheme, SkyThemeComponentClassDirective, SkyThemeIconManifestService, SkyThemeMode, SkyThemeModule, SkyThemeService, SkyThemeSettings, SkyThemeSpacing, provideInitialTheme, SkyThemeDirective as λ1, SkyThemeClassDirective as λ2, SkyThemeIfDirective as λ3 };
+export { SkyAppStyleLoader, SkyAppViewportService, SkyTheme, SkyThemeBrand, SkyThemeComponentClassDirective, SkyThemeIconManifestService, SkyThemeMode, SkyThemeModule, SkyThemeService, SkyThemeSettings, SkyThemeSpacing, provideInitialTheme, SkyThemeDirective as λ1, SkyThemeClassDirective as λ2, SkyThemeIfDirective as λ3 };
 //# sourceMappingURL=skyux-theme.mjs.map