@skyux/theme 13.0.0-alpha.7 → 13.0.0-alpha.9

package/css/themes/modern/styles.css

@@ -152,7 +152,7 @@
   --bb-font-weight-light: 300;
   --bb-font-weight-regular: 400;
   --bb-font-weight-semibold: 600;
-  --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.0/assets/images/bb-logo.png");
+  --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.3/assets/images/bb-logo.png");
   --bb-letter_spacing-normal: normal;
   --bb-letter_spacing-wider: 0.16px;
   --bb-line_height-300: calc(18/13);
@@ -242,7 +242,7 @@
   --sky-color-background-action-input-active: var(--bb-color-transparent);
   --sky-color-background-action-input-base: var(--bb-color-blue-900);
   --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
-  --sky-color-background-action-input-focus: var(--bb-color-transparent);
+  --sky-color-background-action-input-focus: var(--bb-color-blue-900);
   --sky-color-background-action-input-hover: var(--bb-color-transparent);
   --sky-color-background-action-primary-active: var(--bb-color-sky-500);
   --sky-color-background-action-primary-base: var(--bb-color-sky-600);
@@ -284,7 +284,7 @@
   --sky-color-background-row-active: var(--bb-color-transparent);
   --sky-color-background-row-base: var(--bb-color-gray-1000);
   --sky-color-background-row-disabled: var(--bb-color-gray-700);
-  --sky-color-background-row-focus: var(--bb-color-transparent);
+  --sky-color-background-row-focus: var(--bb-color-gray-1000);
   --sky-color-background-row-hover: var(--bb-color-transparent);
   --sky-color-background-scrim: var(--bb-color-scrim);
   --sky-color-background-selected-danger: var(--bb-color-red-900);
@@ -416,7 +416,7 @@
   --sky-color-background-action-input-active: var(--bb-color-blue-100);
   --sky-color-background-action-input-base: var(--bb-color-white);
   --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
-  --sky-color-background-action-input-focus: var(--bb-color-transparent);
+  --sky-color-background-action-input-focus: var(--bb-color-white);
   --sky-color-background-action-input-hover: var(--bb-color-blue-50);
   --sky-color-background-action-primary-active: var(--bb-color-blue-800);
   --sky-color-background-action-primary-base: var(--bb-color-blue-600);
@@ -458,7 +458,7 @@
   --sky-color-background-row-active: var(--bb-color-blue-100);
   --sky-color-background-row-base: var(--bb-color-white);
   --sky-color-background-row-disabled: var(--bb-color-gray-50);
-  --sky-color-background-row-focus: var(--bb-color-transparent);
+  --sky-color-background-row-focus: var(--bb-color-white);
   --sky-color-background-row-hover: var(--bb-color-blue-50);
   --sky-color-background-scrim: var(--bb-color-scrim);
   --sky-color-background-selected-danger: var(--bb-color-red-300);
@@ -1016,13 +1016,17 @@
   --sky-comp-tab-vertical-group-button-space-inset-right: var(--bb-size-fluid-50);
   --sky-comp-tab-vertical-group-button-space-inset-top: var(--bb-size-fluid-50);
   --sky-comp-tab-vertical-group-space-inset-bottom: var(--bb-size-fluid-75);
-  --sky-comp-tab-vertical-group-space-inset-left: var(--bb-size-0);
+  --sky-comp-tab-vertical-group-space-inset-left: var(--bb-size-fluid-50);
   --sky-comp-tab-vertical-group-space-inset-right: var(--bb-size-0);
   --sky-comp-tab-vertical-group-space-inset-top: var(--bb-size-fluid-75);
   --sky-comp-tab-vertical-space-inset-bottom: var(--bb-size-fluid-50);
   --sky-comp-tab-vertical-space-inset-left: var(--bb-size-fluid-75);
   --sky-comp-tab-vertical-space-inset-right: var(--bb-size-fluid-75);
   --sky-comp-tab-vertical-space-inset-top: var(--bb-size-fluid-50);
+  --sky-comp-tab-vertical-subgroup-space-inset-bottom: var(--bb-size-fluid-50);
+  --sky-comp-tab-vertical-subgroup-space-inset-left: var(--bb-size-fluid-150);
+  --sky-comp-tab-vertical-subgroup-space-inset-right: var(--bb-size-0);
+  --sky-comp-tab-vertical-subgroup-space-inset-top: var(--bb-size-0);
   --sky-comp-tabset-button-space-inset-bottom: var(--bb-size-fluid-25);
   --sky-comp-tabset-button-space-inset-left: var(--bb-size-fluid-25);
   --sky-comp-tabset-button-space-inset-right: var(--bb-size-fluid-25);
@@ -1431,7 +1435,7 @@
   --bb-font-weight-light: 300;
   --bb-font-weight-regular: 400;
   --bb-font-weight-semibold: 600;
-  --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.0/assets/images/bb-logo.png");
+  --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0-alpha.3/assets/images/bb-logo.png");
   --bb-letter_spacing-normal: normal;
   --bb-letter_spacing-wider: 0.16px;
   --bb-line_height-300: calc(18/13);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/theme",
-  "version": "13.0.0-alpha.7",
+  "version": "13.0.0-alpha.9",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -20,7 +20,7 @@
     "@angular/core": "^20.0.5"
   },
   "dependencies": {
-    "@blackbaud/skyux-design-tokens": "3.0.0-alpha.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';

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';