@skyux/theme 10.32.0 → 11.0.0-alpha.0

package/lib/theming/theme-component-class.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SkyThemeComponentClassDirective {
+    #private;
+    theme: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyThemeComponentClassDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SkyThemeComponentClassDirective, "[skyThemeClass]", never, {}, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/theme",
-  "version": "10.32.0",
+  "version": "11.0.0-alpha.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -78,14 +78,14 @@
     }
   },
   "peerDependencies": {
-    "@angular/common": "^17.3.4",
-    "@angular/core": "^17.3.4"
+    "@angular/common": "^18.0.5",
+    "@angular/core": "^18.0.5"
   },
   "dependencies": {
     "@blackbaud/skyux-design-tokens": "0.0.28",
     "@skyux/icons": "7.3.0",
     "fontfaceobserver": "2.3.0",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.3"
   },
   "module": "fesm2022/skyux-theme.mjs",
   "typings": "index.d.ts",

package/scss/mixins.scss

@@ -100,6 +100,114 @@
   }
 }
 
+@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 == 'default' {
+    #{$selector}:not(.sky-theme-modern *) {
+      @content;
+    }
+  } @else {
+    @if $encapsulate {
+      :host-context(.sky-theme-modern) #{$selector} {
+        @content;
+      }
+    } @else {
+      .sky-theme-modern #{$selector} {
+        @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;