@dereekb/dbx-web 13.11.5 → 13.11.6

package/lib/button/_button.scss

@@ -9,16 +9,30 @@ $big-button-height: 46px; // 33% bigger
 
 // MARK: Mixin
 @mixin core() {
-  // increases the height of the mat-mdc-button
+  // increases the height of the mat-mdc-button via Material's container-height tokens
   /// @dbx-utility button-big
-  /// @intent enlarge the inner `mat-mdc-button` height to 46px (33% taller than default)
+  /// @intent enlarge the inner `mat-mdc-button` height to 46px (33% taller than default) by setting Material's `--mat-button-*-container-height` tokens
   /// @role layout
   /// @see-also button-wide
   .dbx-button-big,
   .dbx-button-large {
-    .mdc-button.mat-mdc-button {
-      height: $big-button-height;
-    }
+    --mat-button-text-container-height: #{$big-button-height};
+    --mat-button-filled-container-height: #{$big-button-height};
+    --mat-button-protected-container-height: #{$big-button-height};
+    --mat-button-outlined-container-height: #{$big-button-height};
+    --mat-button-tonal-container-height: #{$big-button-height};
+  }
+
+  /// @dbx-utility button-form-field-height
+  /// @intent match the inner `mat-mdc-button` height to `--mat-form-field-container-height` so a button aligns vertically with an adjacent form field
+  /// @role layout
+  /// @see-also button-big
+  .dbx-button-form-field-height {
+    --mat-button-text-container-height: var(--mat-form-field-container-height);
+    --mat-button-filled-container-height: var(--mat-form-field-container-height);
+    --mat-button-protected-container-height: var(--mat-form-field-container-height);
+    --mat-button-outlined-container-height: var(--mat-form-field-container-height);
+    --mat-button-tonal-container-height: var(--mat-form-field-container-height);
   }
 
   // Neutral hover/pressed/focus state layer instead of the primary-colored default.

package/lib/button/progress/spinner.button.component.scss

@@ -1,9 +1,26 @@
 :host {
   button {
-    min-height: 36px;
+    // default to text-button container-height; per-variant overrides below read the matching mat token
+    min-height: var(--mat-button-text-container-height);
     height: unset; // allow height to expand
     outline: none;
 
+    &.mat-mdc-unelevated-button {
+      min-height: var(--mat-button-filled-container-height);
+    }
+
+    &.mat-mdc-raised-button {
+      min-height: var(--mat-button-protected-container-height);
+    }
+
+    &.mat-mdc-outlined-button {
+      min-height: var(--mat-button-outlined-container-height);
+    }
+
+    &.mat-mdc-tonal-button {
+      min-height: var(--mat-button-tonal-container-height);
+    }
+
     &.working {
       cursor: not-allowed;
     }

package/lib/layout/style/_style.scss

@@ -168,6 +168,26 @@
   .dbx-color-tonal {
     color: var(#{theming.$dbx-bg-color-var});
   }
+
+  /// @dbx-utility color-bg
+  /// @intent generic themed-background class — pair with `[dbxColor]="config"` to drive `--dbx-bg-color-current` / `--dbx-color-current` from arbitrary CSS color values
+  /// @role color
+  .dbx-color-bg {
+    @include dbx-color-bg-body();
+  }
+
+  /// @dbx-utility color-text
+  /// @intent generic themed-text class — pair with `[dbxTextColor]="config"` to drive `--dbx-color-current` from an arbitrary CSS color value
+  /// @role color
+  .dbx-color-text {
+    color: #{theming.$dbx-color};
+  }
+}
+
+@mixin dbx-color-bg-body($default-bg-tone: 100%) {
+  #{theming.$dbx-bg-tone-var}: $default-bg-tone;
+  background: color-mix(in srgb, #{theming.$dbx-bg-color} var(#{theming.$dbx-bg-tone-var}), transparent);
+  color: #{theming.$dbx-color};
 }
 
 @mixin define-dbx-color-class($name, $color, $contrast, $swap-bg: false) {
@@ -182,9 +202,7 @@
   .dbx-#{$name}-bg {
     #{theming.$dbx-color-var}: #{$bg-text};
     #{theming.$dbx-bg-color-var}: #{$bg-color};
-    #{theming.$dbx-bg-tone-var}: 100%;
-    background: color-mix(in srgb, #{theming.$dbx-bg-color} var(#{theming.$dbx-bg-tone-var}), transparent);
-    color: #{theming.$dbx-color};
+    @include dbx-color-bg-body();
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.11.5",
+  "version": "13.11.6",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.11.5",
-    "@dereekb/date": "13.11.5",
-    "@dereekb/dbx-core": "13.11.5",
-    "@dereekb/rxjs": "13.11.5",
-    "@dereekb/util": "13.11.5",
-    "@dereekb/vitest": "13.11.5",
+    "@dereekb/browser": "13.11.6",
+    "@dereekb/date": "13.11.6",
+    "@dereekb/dbx-core": "13.11.6",
+    "@dereekb/rxjs": "13.11.6",
+    "@dereekb/util": "13.11.6",
+    "@dereekb/vitest": "13.11.6",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",

package/types/dereekb-dbx-web-mapbox.d.ts

@@ -14,7 +14,7 @@ import { DbxInjectionComponentConfig, DbxInjectionComponentConfigWithoutInjector
 import * as _dereekb_rxjs from '@dereekb/rxjs';
 import { ObservableOrValue, ObservableOrValueGetter } from '@dereekb/rxjs';
 import * as _dereekb_dbx_web_mapbox from '@dereekb/dbx-web/mapbox';
-import { DbxThemeColor, ResizedEvent } from '@dereekb/dbx-web';
+import { DbxColorInput, ResizedEvent } from '@dereekb/dbx-web';
 import { MatDrawerContainer } from '@angular/material/sidenav';
 import { MatMenuTrigger } from '@angular/material/menu';
 
@@ -559,7 +559,7 @@ declare class DbxMapboxLayoutComponent implements OnInit {
      * Forces the drawer to assume the drawer has content if true, or assume it has no content if false.
      */
     readonly forceHasDrawerContent: i0.InputSignal<Maybe<boolean>>;
-    readonly drawerButtonColor: i0.InputSignalWithTransform<DbxThemeColor, Maybe<DbxThemeColor>>;
+    readonly drawerButtonColor: i0.InputSignalWithTransform<DbxColorInput, Maybe<DbxColorInput>>;
     readonly openDrawer: i0.InputSignal<Maybe<boolean>>;
     readonly isDrawerOpenSignal: i0.WritableSignal<Maybe<boolean>>;
     protected readonly _openDrawerEffect: i0.EffectRef;