@skyux/theme 13.0.0-alpha.0 → 13.0.0-alpha.10

package/index.d.ts

@@ -21,9 +21,64 @@ declare class SkyThemeIconManifestService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SkyThemeIconManifestService>;
 }
 
+/**
+ * @internal
+ * Defines properties for a mask icon.
+ */
+interface SkyThemeBrandMaskIcon {
+    /**
+     * The URL of the mask icon.
+     */
+    url: string;
+    /**
+     * The color of the mask icon.
+     */
+    color: string;
+}
+/**
+ * @internal
+ * Defines properties of SKY UX theme branding.
+ */
+declare class SkyThemeBrand {
+    #private;
+    readonly name: string;
+    readonly version: string;
+    readonly styleUrl?: string | undefined;
+    readonly sriHash?: string | undefined;
+    readonly title?: string | undefined;
+    readonly faviconUrl?: string | undefined;
+    readonly maskIcon?: SkyThemeBrandMaskIcon | undefined;
+    get hostClass(): string;
+    private set hostClass(value);
+    /**
+     * Creates a new theme brand.
+     * @param name The name of the theme brand.
+     * @param version The version 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>`
+     * @param styleUrl The URL of the stylesheet to load for this brand
+     * @param sriHash The subresource integrity hash for the stylesheet
+     * @param title The title to display for this brand
+     * @param faviconUrl The URL of the favicon to use for this brand
+     * @param maskIcon The mask icon configuration for this brand
+     */
+    constructor(name: string, version: string, hostClass?: string, styleUrl?: string | undefined, sriHash?: string | undefined, title?: string | undefined, faviconUrl?: string | undefined, maskIcon?: SkyThemeBrandMaskIcon | undefined);
+    /**
+     * @internal
+     * Serializes the theme brand to a JSON-compatible object.
+     */
+    serialize(): SkyThemeBrandData;
+    /**
+     * @internal
+     * Deserializes a JSON object to a SkyThemeBrand instance.
+     */
+    static deserialize(data: SkyThemeBrandData): SkyThemeBrand;
+}
+
 /**
  * Type definitions for theme serialization and deserialization.
  */
+
 /**
  * Serialized representation of a SkyThemeMode.
  */
@@ -47,6 +102,11 @@ interface SkyThemeBrandData {
     name: string;
     version: string;
     hostClass?: string;
+    styleUrl?: string;
+    sriHash?: string;
+    title?: string;
+    faviconUrl?: string;
+    maskIcon?: SkyThemeBrandMaskIcon;
 }
 /**
  * Serialized representation of a SkyTheme.
@@ -161,35 +221,6 @@ declare class SkyTheme {
     static deserialize(data: SkyThemeData): SkyTheme;
 }
 
-/**
- * @internal
- * Defines properties of SKY UX theme branding.
- */
-declare class SkyThemeBrand {
-    #private;
-    readonly name: string;
-    readonly version: string;
-    get hostClass(): string;
-    private set hostClass(value);
-    /**
-     * 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: string, version: string, hostClass?: string);
-    /**
-     * @internal
-     * Serializes the theme brand to a JSON-compatible object.
-     */
-    serialize(): SkyThemeBrandData;
-    /**
-     * @internal
-     * Deserializes a JSON object to a SkyThemeBrand instance.
-     */
-    static deserialize(data: SkyThemeBrandData): SkyThemeBrand;
-}
-
 /**
  * Specifies the theme and mode to be applied to a host element.
  */
@@ -245,8 +276,10 @@ declare class SkyThemeService {
      * @param hostEl The host element under which themed components are rendered.
      * @param renderer A Renderer2 instance for updating the host element with theme changes.
      * @param theme The initial theme.
+     * @param registeredBrands An initial set of brands to register. Additional brands can
+     * be registered later via the registerBrand() method.
      */
-    init(hostEl: any, renderer: Renderer2, theme: SkyThemeSettings): void;
+    init(hostEl: any, renderer: Renderer2, theme: SkyThemeSettings, registeredBrands?: SkyThemeBrand[]): void;
     /**
      * Destroys the current theme service. This should only be called from a host component that
      * provides its own theme to child components.
@@ -264,9 +297,9 @@ declare class SkyThemeService {
     setThemeSpacing(spacing: SkyThemeSpacing): void;
     /**
      * Updates the current theme brand.
-     * @param brand The new theme brand to apply.
+     * @param brand The new theme brand to apply, or undefined to clear the current brand.
      */
-    setThemeBrand(brand: SkyThemeBrand): void;
+    setThemeBrand(brand: SkyThemeBrand | undefined): void;
     /**
      * Updates the current theme settings.
      * @param settings The new theme settings to apply.
@@ -277,6 +310,8 @@ declare class SkyThemeService {
      * @param theme The new theme to apply.
      */
     setTheme(theme: SkyTheme): void;
+    registerBrand(brand: SkyThemeBrand): void;
+    unregisterBrand(name: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SkyThemeService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/theme",
-  "version": "13.0.0-alpha.0",
+  "version": "13.0.0-alpha.10",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -20,8 +20,8 @@
     "@angular/core": "^20.0.5"
   },
   "dependencies": {
-    "@blackbaud/skyux-design-tokens": "0.0.69",
-    "@skyux/icons": "8.2.0",
+    "@blackbaud/skyux-design-tokens": "3.0.0-alpha.3",
+    "@skyux/icons": "9.0.0",
     "fontfaceobserver": "2.3.0",
     "tslib": "^2.8.1"
   },
@@ -48,12 +48,24 @@
     "./css/themes/modern/styles.css": {
       "default": "./css/themes/modern/styles.css"
     },
+    "./scss/component-theme": {
+      "default": "./scss/component-theme.scss"
+    },
+    "./scss/component-theme.scss": {
+      "default": "./scss/component-theme.scss"
+    },
     "./scss/mixins": {
       "default": "./scss/mixins.scss"
     },
     "./scss/mixins.scss": {
       "default": "./scss/mixins.scss"
     },
+    "./scss/responsive": {
+      "default": "./scss/responsive.scss"
+    },
+    "./scss/responsive.scss": {
+      "default": "./scss/responsive.scss"
+    },
     "./scss/variables": {
       "default": "./scss/variables.scss"
     },

package/scss/_compat/_mixins.scss

@@ -1,3 +1,5 @@
+// @internal
+
 @use '../variables' as vars;
 @use 'variables' as compatVars;
 @use 'sass:color';
@@ -54,10 +56,11 @@
 }
 
 @mixin sky-danger {
-  content: '\f071';
-  font-family: FontAwesome;
+  content: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTEiIGQ9Ik0xNC4wNDM3IDMuMTgxODJDMTQuOTEzMiAxLjYwNjA2IDE3LjA4NjggMS42MDYwNiAxNy45NTYzIDMuMTgxODJMMjkuNjk0IDI0LjQ1NDVDMzAuNTYzNSAyNi4wMzAzIDI5LjQ3NjYgMjggMjcuNzM3NyAyOEg0LjI2MjI5QzIuNTIzMzcgMjggMS40MzY1NSAyNi4wMzAzIDIuMzA2MDEgMjQuNDU0NUwxNC4wNDM3IDMuMTgxODJaIiBmaWxsPSIjRUY0MDQ0Ii8+CjxwYXRoIGNsYXNzPSJza3ktaS1wYXRoLTIiIGQ9Ik0xNC42MTA0IDEwLjM4MzRIMTcuNDgxNkwxNy4xNjg3IDE4Ljc5NDVIMTQuOTIzM0wxNC42MTA0IDEwLjM4MzRaTTE1Ljk5MDggMjMuNjE2NkMxNS41NzM2IDIzLjYxNjYgMTUuMjE3OCAyMy40NjkzIDE0LjkyMzMgMjMuMTc0OEMxNC42NDExIDIyLjg4MDQgMTQuNSAyMi41MjQ1IDE0LjUgMjIuMTA3NEMxNC41IDIxLjY5MDIgMTQuNjQxMSAyMS4zMzQ0IDE0LjkyMzMgMjEuMDM5OUMxNS4yMTc4IDIwLjc0NTQgMTUuNTczNiAyMC41OTgyIDE1Ljk5MDggMjAuNTk4MkMxNi40MDggMjAuNTk4MiAxNi43NjM4IDIwLjc0NTQgMTcuMDU4MyAyMS4wMzk5QzE3LjM1MjggMjEuMzM0NCAxNy41IDIxLjY5MDIgMTcuNSAyMi4xMDc0QzE3LjUgMjIuNTI0NSAxNy4zNTI4IDIyLjg4MDQgMTcuMDU4MyAyMy4xNzQ4QzE2Ljc3NjEgMjMuNDY5MyAxNi40MjAyIDIzLjYxNjYgMTUuOTkwOCAyMy42MTY2WiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K');
+  display: inline-block;
+  width: var(--sky-size-icon-s, 16px);
+  vertical-align: middle;
   margin-right: 5px;
-  color: var(--sky-highlight-color-danger);
 }
 
 @mixin sky-dropdown-item-btn {

package/scss/_compat/_variables.scss

@@ -1,3 +1,5 @@
+// @internal
+
 @use 'sass:math' as math;
 @use '../variables' as vars;
 

package/scss/component-theme.scss

@@ -0,0 +1,112 @@
+// @internal
+
+@use 'responsive' as res;
+
+@mixin sky-component($theme, $selector, $encapsulate: true, $breakpoint: '') {
+  @if $breakpoint == '' {
+    @include sky-component-theme($theme, $selector, $encapsulate) {
+      @content;
+    }
+  } @else if $breakpoint == 'xs' {
+    @include res.sky-host-responsive-container-xs-min($encapsulate) {
+      @include sky-component-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'sm' {
+    @include res.sky-host-responsive-container-sm-min($encapsulate) {
+      @include sky-component-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'md' {
+    @include res.sky-host-responsive-container-md-min($encapsulate) {
+      @include sky-component-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'lg' {
+    @include res.sky-host-responsive-container-lg-min($encapsulate) {
+      @include sky-component-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin sky-component-theme($theme, $selector, $encapsulate: true) {
+  @if $theme == 'modern' {
+    @if $encapsulate {
+      :host-context(.sky-theme-modern) #{$selector} {
+        @content;
+      }
+    } @else {
+      .sky-theme-modern #{$selector} {
+        @content;
+      }
+    }
+  } @else {
+    #{$selector}:not(.sky-theme-modern *) {
+      @content;
+    }
+  }
+}
+
+@mixin sky-component-host(
+  $theme,
+  $selector: ':host',
+  $encapsulate: true,
+  $breakpoint: ''
+) {
+  @if $breakpoint == '' {
+    @include sky-component-host-theme($theme, $selector, $encapsulate) {
+      @content;
+    }
+  } @else if $breakpoint == 'xs' {
+    @include res.sky-host-responsive-container-xs-min($encapsulate) {
+      @include sky-component-host-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'sm' {
+    @include res.sky-host-responsive-container-sm-min($encapsulate) {
+      @include sky-component-host-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'md' {
+    @include res.sky-host-responsive-container-md-min($encapsulate) {
+      @include sky-component-host-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  } @else if $breakpoint == 'lg' {
+    @include res.sky-host-responsive-container-lg-min($encapsulate) {
+      @include sky-component-host-theme($theme, $selector, $encapsulate) {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin sky-component-host-theme(
+  $theme,
+  $selector: ':host',
+  $encapsulate: true
+) {
+  @if $theme == 'default' {
+    #{$selector}.sky-cmp-theme-default {
+      @content;
+    }
+  } @else {
+    @if $encapsulate {
+      :host-context(.sky-theme-modern) #{$selector}.sky-cmp-theme-modern {
+        @content;
+      }
+    } @else {
+      .sky-theme-modern #{$selector}.sky-cmp-theme-modern {
+        @content;
+      }
+    }
+  }
+}

package/scss/mixins.scss

@@ -1,214 +1,11 @@
-// This file is included as-is with the @skyux/theme NPM package to be used by our consumers.
+// @internal
 
 @forward '@blackbaud/skyux-design-tokens/scss/mixins';
+@forward 'component-theme';
+@forward 'responsive';
 
 @use 'variables' as vars;
 
-@mixin sky-host-responsive-container-xs-min($encapsulate: true) {
-  @if $encapsulate {
-    :host {
-      @content;
-    }
-
-    :host-context(.sky-responsive-container-xs),
-    :host-context(.sky-responsive-container-sm),
-    :host-context(.sky-responsive-container-md),
-    :host-context(.sky-responsive-container-lg) {
-      @content;
-    }
-  } @else {
-    @content;
-
-    .sky-responsive-container-xs,
-    .sky-responsive-container-sm,
-    .sky-responsive-container-md,
-    .sky-responsive-container-lg {
-      @content;
-    }
-  }
-}
-
-@mixin sky-host-responsive-container-sm-min($encapsulate: true) {
-  @if $encapsulate {
-    @media (min-width: vars.$sky-screen-sm-min) {
-      :host {
-        @content;
-      }
-    }
-
-    :host-context(.sky-responsive-container-sm),
-    :host-context(.sky-responsive-container-md),
-    :host-context(.sky-responsive-container-lg) {
-      @content;
-    }
-  } @else {
-    @media (min-width: vars.$sky-screen-sm-min) {
-      @content;
-    }
-
-    .sky-responsive-container-sm,
-    .sky-responsive-container-md,
-    .sky-responsive-container-lg {
-      @content;
-    }
-  }
-}
-
-@mixin sky-host-responsive-container-md-min($encapsulate: true) {
-  @if $encapsulate {
-    @media (min-width: vars.$sky-screen-md-min) {
-      :host {
-        @content;
-      }
-    }
-
-    :host-context(.sky-responsive-container-md),
-    :host-context(.sky-responsive-container-lg) {
-      @content;
-    }
-  } @else {
-    @media (min-width: vars.$sky-screen-md-min) {
-      @content;
-    }
-
-    .sky-responsive-container-md,
-    .sky-responsive-container-lg {
-      @content;
-    }
-  }
-}
-
-@mixin sky-host-responsive-container-lg-min($encapsulate: true) {
-  @if $encapsulate {
-    @media (min-width: vars.$sky-screen-lg-min) {
-      :host {
-        @content;
-      }
-    }
-
-    :host-context(.sky-responsive-container-lg) {
-      @content;
-    }
-  } @else {
-    @media (min-width: vars.$sky-screen-lg-min) {
-      @content;
-    }
-
-    .sky-responsive-container-lg {
-      @content;
-    }
-  }
-}
-
-@mixin sky-component($theme, $selector, $encapsulate: true, $breakpoint: '') {
-  @if $breakpoint == '' {
-    @include sky-component-theme($theme, $selector, $encapsulate) {
-      @content;
-    }
-  } @else if $breakpoint == 'xs' {
-    @include sky-host-responsive-container-xs-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'sm' {
-    @include sky-host-responsive-container-sm-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'md' {
-    @include sky-host-responsive-container-md-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'lg' {
-    @include sky-host-responsive-container-lg-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin sky-component-theme($theme, $selector, $encapsulate: true) {
-  @if $theme == 'modern' {
-    @if $encapsulate {
-      :host-context(.sky-theme-modern) #{$selector} {
-        @content;
-      }
-    } @else {
-      .sky-theme-modern #{$selector} {
-        @content;
-      }
-    }
-  } @else {
-    #{$selector}:not(.sky-theme-modern *) {
-      @content;
-    }
-  }
-}
-
-@mixin sky-component-host(
-  $theme,
-  $selector: ':host',
-  $encapsulate: true,
-  $breakpoint: ''
-) {
-  @if $breakpoint == '' {
-    @include sky-component-host-theme($theme, $selector, $encapsulate) {
-      @content;
-    }
-  } @else if $breakpoint == 'xs' {
-    @include sky-host-responsive-container-xs-min($encapsulate) {
-      @include sky-component-host-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'sm' {
-    @include sky-host-responsive-container-sm-min($encapsulate) {
-      @include sky-component-host-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'md' {
-    @include sky-host-responsive-container-md-min($encapsulate) {
-      @include sky-component-host-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  } @else if $breakpoint == 'lg' {
-    @include sky-host-responsive-container-lg-min($encapsulate) {
-      @include sky-component-host-theme($theme, $selector, $encapsulate) {
-        @content;
-      }
-    }
-  }
-}
-
-@mixin sky-component-host-theme(
-  $theme,
-  $selector: ':host',
-  $encapsulate: true
-) {
-  @if $theme == 'default' {
-    #{$selector}.sky-cmp-theme-default {
-      @content;
-    }
-  } @else {
-    @if $encapsulate {
-      :host-context(.sky-theme-modern) #{$selector}.sky-cmp-theme-modern {
-        @content;
-      }
-    } @else {
-      .sky-theme-modern #{$selector}.sky-cmp-theme-modern {
-        @content;
-      }
-    }
-  }
-}
-
 @mixin sky-theme-modern {
   :host-context(.sky-theme-modern) {
     @content;

package/scss/responsive.scss

@@ -0,0 +1,97 @@
+@use 'variables' as vars;
+
+@mixin sky-host-responsive-container-xs-min($encapsulate: true) {
+  @if $encapsulate {
+    :host {
+      @content;
+    }
+
+    :host-context(.sky-responsive-container-xs),
+    :host-context(.sky-responsive-container-sm),
+    :host-context(.sky-responsive-container-md),
+    :host-context(.sky-responsive-container-lg) {
+      @content;
+    }
+  } @else {
+    @content;
+
+    .sky-responsive-container-xs,
+    .sky-responsive-container-sm,
+    .sky-responsive-container-md,
+    .sky-responsive-container-lg {
+      @content;
+    }
+  }
+}
+
+@mixin sky-host-responsive-container-sm-min($encapsulate: true) {
+  @if $encapsulate {
+    @media (min-width: vars.$sky-screen-sm-min) {
+      :host {
+        @content;
+      }
+    }
+
+    :host-context(.sky-responsive-container-sm),
+    :host-context(.sky-responsive-container-md),
+    :host-context(.sky-responsive-container-lg) {
+      @content;
+    }
+  } @else {
+    @media (min-width: vars.$sky-screen-sm-min) {
+      @content;
+    }
+
+    .sky-responsive-container-sm,
+    .sky-responsive-container-md,
+    .sky-responsive-container-lg {
+      @content;
+    }
+  }
+}
+
+@mixin sky-host-responsive-container-md-min($encapsulate: true) {
+  @if $encapsulate {
+    @media (min-width: vars.$sky-screen-md-min) {
+      :host {
+        @content;
+      }
+    }
+
+    :host-context(.sky-responsive-container-md),
+    :host-context(.sky-responsive-container-lg) {
+      @content;
+    }
+  } @else {
+    @media (min-width: vars.$sky-screen-md-min) {
+      @content;
+    }
+
+    .sky-responsive-container-md,
+    .sky-responsive-container-lg {
+      @content;
+    }
+  }
+}
+
+@mixin sky-host-responsive-container-lg-min($encapsulate: true) {
+  @if $encapsulate {
+    @media (min-width: vars.$sky-screen-lg-min) {
+      :host {
+        @content;
+      }
+    }
+
+    :host-context(.sky-responsive-container-lg) {
+      @content;
+    }
+  } @else {
+    @media (min-width: vars.$sky-screen-lg-min) {
+      @content;
+    }
+
+    .sky-responsive-container-lg {
+      @content;
+    }
+  }
+}

package/scss/themes/modern/_compat/_mixins.scss

@@ -1,3 +1,5 @@
+// @internal
+
 @use '../../../_compat/mixins' as compatMixins;
 @use '../../../_compat/variables' as compatVars;
 @use '../../../mixins' as mixins;

package/scss/themes/modern/_compat/_variables.scss

@@ -1,2 +1,4 @@
+// @internal
+
 $sky-theme-modern-tab-btn-padding-top-bottom: 10px !default;
 $sky-theme-modern-tab-btn-padding-left-right: 15px !default;

package/scss/variables.scss

@@ -1,3 +1,4 @@
-// This file is included as-is with the @skyux/theme NPM package to be used by our consumers.
+// @internal
+
 @forward '@blackbaud/skyux-design-tokens/scss/variables';
 @forward '@blackbaud/skyux-design-tokens/scss/themes/modern/variables';