@dereekb/dbx-web 12.6.21 → 13.0.0

package/lib/button/_button.scss

@@ -85,6 +85,123 @@ $big-button-height: 46px; // 33% bigger
       margin-bottom: 6px !important;
     }
   }
+
+  // dbx-color interactions
+  $color-value: theming.$dbx-bg-color;
+  $contrast-value: theming.$dbx-color;
+  $disabled-color-value: theming.$dbx-disabled-color;
+  $disabled-contrast-value: theming.$dbx-disabled-color-contrast;
+
+  .mdc-button.dbx-base-button.dbx-color {
+    .mat-mdc-progress-bar {
+      --mat-progress-bar-active-indicator-color: #{$color-value};
+    }
+
+    // default button
+    &.dbx-default {
+      color: var(--mat-button-text-label-text-color, var(--mat-sys-primary));
+
+      &.mat-mdc-button-disabled {
+        color: var(--mat-button-text-disabled-label-text-color, var(--mat-sys-on-surface));
+      }
+    }
+
+    // default button
+    &:not(.dbx-default) {
+      background: none;
+      --mat-button-text-label-text-color: #{$color-value};
+      --mat-button-text-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+      --mat-button-text-state-layer-color: #{$color-value};
+      --mat-progress-spinner-active-indicator-color: #{$color-value};
+    }
+
+    // raised buttons
+    &.mat-mdc-raised-button.dbx-default {
+      color: var(--mat-button-protected-label-text-color, var(--mat-sys-primary));
+    }
+
+    &.mat-mdc-raised-button:not(.dbx-default) {
+      background: var(--mat-button-protected-container-color);
+
+      --mat-button-protected-container-color: #{$color-value};
+      --mat-button-protected-label-text-color: #{$contrast-value};
+      --mat-button-protected-state-layer-color: #{$contrast-value};
+      --mat-button-protected-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
+
+      &.mat-mdc-button-disabled {
+        background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+      }
+    }
+
+    // stroked/outlined buttons
+    &.mat-mdc-outlined-button.dbx-default {
+      color: var(--mat-button-outlined-label-text-color, var(--mat-sys-primary));
+    }
+
+    &.mat-mdc-outlined-button:not(.dbx-default) {
+      --mat-button-outlined-container-color: #{$contrast-value};
+      --mat-button-outlined-label-text-color: #{$color-value};
+      --mat-button-outlined-state-layer-color: #{$color-value};
+      --mat-button-outlined-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+
+      --mat-progress-spinner-active-indicator-color: #{$color-value};
+    }
+
+    // flat buttons
+    &.mat-mdc-unelevated-button.dbx-default {
+      color: var(--mat-button-filled-label-text-color, var(--mat-sys-primary));
+    }
+
+    &.mat-mdc-unelevated-button:not(.dbx-default) {
+      background: var(--mat-button-filled-container-color);
+
+      --mat-button-filled-container-color: #{$color-value};
+      --mat-button-filled-label-text-color: #{$contrast-value};
+      --mat-button-filled-state-layer-color: #{$contrast-value};
+      --mat-button-filled-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
+
+      &.mat-mdc-button-disabled {
+        background-color: var(--mat-button-protected-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent));
+      }
+    }
+
+    // icon buttons
+    &.mat-mdc-icon-button.dbx-default {
+      color: var(--mat-icon-button-icon-color, var(--mat-sys-primary));
+    }
+
+    &.mat-mdc-icon-button:not(.dbx-default) {
+      background: none;
+
+      --mat-icon-button-icon-color: #{$color-value};
+      --mat-icon-button-ripple-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+      --mat-icon-button-state-layer-color: #{$color-value};
+    }
+
+    // tonal buttons
+    &.mat-mdc-tonal-button.dbx-default {
+      color: var(--mat-button-tonal-label-text-color, var(--mat-sys-primary));
+      background: rgb(from var(--mat-button-tonal-label-text-color) r g b / calc(alpha * 0.06));
+    }
+
+    &.mat-mdc-tonal-button:not(.dbx-default) {
+      background: rgb(from #{$color-value} r g b / calc(alpha * 0.12));
+
+      --mat-button-tonal-container-color: color-mix(in srgb, #{$color-value} 12%, transparent);
+      --mat-button-tonal-label-text-color: #{$contrast-value};
+      --mat-button-tonal-ripple-color: color-mix(in srgb, #{$contrast-value} 12%, transparent);
+      --mat-button-tonal-state-layer-color: #{$contrast-value};
+    }
+
+    &.dbx-default.mat-mdc-button-disabled {
+      &.mat-mdc-raised-button,
+      &.mat-mdc-unelevated-button,
+      &.mat-mdc-outlined-button,
+      &.mat-mdc-tonal-button {
+        color: var(--mat-button-text-disabled-label-text-color, var(--mat-sys-on-surface));
+      }
+    }
+  }
 }
 
 @mixin color($theme-config) {
@@ -115,27 +232,6 @@ $big-button-height: 46px; // 33% bigger
       background: #{theming.$dbx-disabled-color-contrast};
     }
   }
-
-  // dbx-theme colors
-  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-main {
-    .dbx-base-button.mat-mdc-unelevated-button.mat-#{$color} {
-      --mdc-filled-button-container-color: #{map.get($colorConfig, 'color')};
-      --mdc-filled-button-label-text-color: #{map.get($colorConfig, 'contrast')};
-    }
-
-    .dbx-base-button.mat-mdc-outlined-button.mat-#{$color} {
-      --mdc-outlined-button-label-text-color: #{map.get($colorConfig, 'color')};
-    }
-
-    .dbx-base-button.mat-mdc-raised-button.mat-#{$color} {
-      --mdc-protected-button-container-color: #{map.get($colorConfig, 'color')};
-      --mdc-protected-button-label-text-color: #{map.get($colorConfig, 'contrast')};
-    }
-
-    .dbx-base-button.mat-mdc-button.mat-#{$color} {
-      --mdc-text-button-label-text-color: #{map.get($colorConfig, 'color')};
-    }
-  }
 }
 
 @mixin typography($theme-config-or-typography-config) {

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

@@ -18,26 +18,26 @@
     &.mat-mdc-button.mat-mdc-icon-button {
       // icon button fixes
       min-width: unset;
-      --mdc-icon-button-icon-size: unset;
+      --mat-icon-button-icon-size: unset;
       --mat-text-button-with-icon-horizontal-padding: 0px;
-      --mdc-icon-button-state-layer-size: 36px;
+      --mat-icon-button-state-layer-size: 36px;
       border-radius: 50%; // sometimes the css order seems to be different, causing the button to lose its radius
 
       .mat-mdc-progress-spinner {
         // fix spinner size. Without this set the spinner will be off-center
         // Angular Material pulls from this value for setting the spinner size when used in a button
-        --mdc-icon-button-icon-size: 36px;
+        --mat-icon-button-icon-size: 36px;
       }
     }
 
     // fab icon
     &.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab {
       height: 48px;
-      --mdc-icon-button-state-layer-size: 48px;
+      --mat-icon-button-state-layer-size: 48px;
 
       // fix fab icon size
       .mat-mdc-progress-spinner {
-        --mdc-icon-button-icon-size: 48px;
+        --mat-icon-button-icon-size: 48px;
       }
     }
 
@@ -77,8 +77,8 @@
       height: 1.125rem;
       width: 1.125rem;
 
-      margin-right: var(--mat-protected-button-icon-spacing, 8px);
-      // margin-left: var(--mat-protected-button-icon-offset, -4px);
+      margin-right: var(--mat-button-protected-icon-spacing, 8px);
+      // margin-left: var(--mat-button-protected-icon-offset, -4px);
 
       &.is-mat-icon {
         position: relative;

package/lib/layout/style/_style.scss

@@ -105,100 +105,49 @@
   }
 }
 
-@mixin color($theme-config) {
-  .dbx-primary {
-    color: theming.$dbx-primary-color;
-    --mdc-text-button-label-text-color: theming.$dbx-primary-color;
-  }
-
-  .dbx-primary-bg {
-    background: theming.$dbx-primary-color;
-    color: theming.$dbx-primary-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-primary-color-contrast;
-  }
-
-  .dbx-accent {
-    color: theming.$dbx-accent-color;
-    --mdc-text-button-label-text-color: theming.$dbx-accent-color;
-  }
-
-  .dbx-accent-bg {
-    background: theming.$dbx-accent-color;
-    color: theming.$dbx-accent-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-primary-color-contrast;
-  }
-
-  .dbx-warn {
-    color: theming.$dbx-warn-color;
-    --mdc-text-button-label-text-color: theming.$dbx-warn-color;
+@mixin define-dbx-color-class($name, $color, $contrast, $swap-bg: false) {
+  .dbx-#{$name} {
+    #{theming.$dbx-color-var}: #{$color};
+    color: #{theming.$dbx-color};
   }
 
-  .dbx-warn-bg {
-    background: theming.$dbx-warn-color;
-    color: theming.$dbx-warn-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-warn-color-contrast;
-  }
-
-  .dbx-notice {
-    color: theming.$dbx-notice-color;
-    --mdc-text-button-label-text-color: theming.$dbx-notice-color;
-  }
+  $bg-color: if($swap-bg, $contrast, $color);
+  $bg-text: if($swap-bg, $color, $contrast);
 
-  .dbx-notice-bg {
-    background: theming.$dbx-notice-color;
-    color: theming.$dbx-notice-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-notice-color-contrast;
+  .dbx-#{$name}-bg {
+    #{theming.$dbx-color-var}: #{$bg-text};
+    #{theming.$dbx-bg-color-var}: #{$bg-color};
+    background: #{theming.$dbx-bg-color};
+    color: #{theming.$dbx-color};
   }
 
-  .dbx-success {
-    color: theming.$dbx-success-color;
-    --mdc-text-button-label-text-color: theming.$dbx-success-color;
-  }
-
-  .dbx-success-bg {
-    background: theming.$dbx-success-color;
-    color: theming.$dbx-success-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-success-color-contrast;
-  }
-
-  .dbx-ok {
-    color: theming.$dbx-ok-color;
-    --mdc-text-button-label-text-color: theming.$dbx-ok-color;
-  }
-
-  .dbx-ok-bg {
-    background: theming.$dbx-ok-color;
-    color: theming.$dbx-ok-color-contrast;
-    --mdc-text-button-label-text-color: theming.$dbx-ok-color-contrast;
-  }
-
-  .dbx-grey {
-    color: theming.$dbx-grey-color;
-    --mdc-text-button-label-text-color: theming.$dbx-grey-color;
+  // add the css for the default background color
+  @if ($name == 'default') {
+    #{theming.$dbx-color-var}: #{$bg-text};
+    #{theming.$dbx-bg-color-var}: #{$bg-color};
+    background: #{theming.$dbx-bg-color};
+    // color: #{theming.$dbx-color};
   }
+}
 
-  .dbx-grey-bg {
-    background: theming.$dbx-grey-color-contrast; // intentionally use the contrast for the bg
-    color: theming.$dbx-grey-color;
-    --mdc-text-button-label-text-color: theming.$dbx-grey-color;
+@mixin color($theme-config) {
+  @each $color, $colorConfig in theming.$dbx-theme-colors-main {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
   }
 
-  .dbx-disabled {
-    color: theming.$dbx-disabled-color;
-    --mdc-text-button-label-text-color: theming.$dbx-disabled-color;
+  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-main {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
   }
 
-  .dbx-disabled-bg {
-    background: theming.$dbx-disabled-color-contrast; // intentionally use the contrast for the bg
-    color: theming.$dbx-disabled-color;
-    --mdc-text-button-label-text-color: theming.$dbx-disabled-color;
+  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-secondary {
+    @include define-dbx-color-class($color, map.get($colorConfig, 'color'), map.get($colorConfig, 'contrast'));
   }
 
-  .dbx-bg {
-    background: theming.$dbx-bg-color-contrast;
-    color: theming.$dbx-bg-color;
-    --mdc-text-button-label-text-color: theming.$dbx-bg-color;
-  }
+  // material color overrides
+  // --mdc-text-button-label-text-color: #{theming.$dbx-color-var};
+  --mat-button-text-label-text-color: #{theming.$dbx-color-var};
+  --mat-list-list-item-label-text-color: #{theming.$dbx-color-var};
+  --mat-list-list-item-leading-icon-color: #{theming.$dbx-color-var};
 }
 
 @mixin typography($theme-config-or-typography-config) {

package/lib/loading/_loading.scss

@@ -14,18 +14,20 @@ $linear-line-height: 4px;
   .dbx-loading-progress-hint {
     padding-top: 4px;
   }
-}
 
-@mixin color($theme-config) {
-  @each $color, $colorConfig in theming.$dbx-theme-extra-colors-main-and-secondary {
-    .mat-mdc-progress-spinner.mat-#{$color} {
-      --mdc-circular-progress-active-indicator-color: #{map.get($colorConfig, 'color')};
-    }
+  $color-value: theming.$dbx-bg-color;
 
-    .mat-mdc-progress-bar.mat-#{$color} {
-      --mdc-linear-progress-active-indicator-color: #{map.get($colorConfig, 'color')};
-    }
+  .loading-progress-view {
+    background: none !important; // no background color
+    --mat-progress-spinner-active-indicator-color: #{$color-value};
   }
+
+  .loading-progress-view.dbx-color > .mat-mdc-progress-bar {
+    --mat-progress-bar-active-indicator-color: #{$color-value};
+  }
+}
+
+@mixin color($theme-config) {
 }
 
 @mixin typography($theme-config-or-typography-config) {

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -35,6 +35,11 @@ $default-anchor-list-item-child-list-item-text-size: 14px;
     }
 
     .mat-mdc-list-item {
+      // inherit color from dbx-color-var
+      --mat-list-list-item-hover-leading-icon-color: #{theming.$dbx-color-var};
+      --mat-list-list-item-hover-trailing-icon-color: #{theming.$dbx-color-var};
+      --mat-list-list-item-hover-label-text-color: #{theming.$dbx-color-var};
+
       .mat-icon.mat-mdc-list-item-icon.mdc-list-item__start {
         // fix the icon alignment for items that are larger than the expected size
         align-self: center;

package/lib/router/layout/sidenav/_sidenav.scss

@@ -137,9 +137,6 @@ $active-background-transparent-color: 0.93;
 
   .dbx-sidenav {
     mat-sidenav {
-      color: $text-color;
-      background-color: $sidenav-background-color;
-
       .dbx-anchor-list.mat-mdc-nav-list {
         --mdc-list-list-item-label-text-color: #{$text-color};
         --mdc-list-list-item-supporting-text-color: #{$text-color};

package/lib/style/_root-variables.scss

@@ -143,7 +143,7 @@
     #{theming.$dbx-disabled-color-var}: $disabled-color;
     #{theming.$dbx-disabled-color-contrast-var}: $disabled-color-contrast;
 
-    #{theming.$dbx-bg-color-var}: $background-color;
-    #{theming.$dbx-bg-color-contrast-var}: $background-color-contrast;
+    #{theming.$dbx-default-color-var}: $background-color;
+    #{theming.$dbx-default-color-contrast-var}: $background-color-contrast;
   }
 }

package/lib/style/_theming.scss

@@ -1,7 +1,11 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'node_modules/@angular/material/core/theming/theming';
+
 // m2- was added as a prefix to Material2 themes
 @forward '@angular/material' show m2-define-light-theme, m2-define-dark-theme, m2-define-palette, m2-get-contrast-color-from-palette, m2-get-color-from-palette, m2-get-color-config, m2-get-typography-config, m2-get-density-config, elevation;
 
-@forward 'node_modules/@angular/material/core/theming/theming' show private-is-theme-object, private-check-duplicate-theme-styles, $theme-ignore-duplication-warnings;
+@forward 'node_modules/@angular/material/core/theming/theming' show private-is-theme-object;
 
 // prefix with m2- to mirror @angular/material/core/m2 exporting
 @forward 'node_modules/@angular/material/core/m2/typography-utils' as m2-*;
@@ -9,3 +13,194 @@
 @forward './config';
 @forward './variables';
 @forward './mixin';
+
+// NOTE: This was removed in Angular Material 21. We moved it here for continued usage.
+// Removed here:
+// https://github.com/angular/components/commit/ca83d31065c8b7cef0f8f0b69321d59839f4ad74
+
+// These variable are not intended to be overridden externally. They use `!default` to
+// avoid being reset every time this file is imported.
+$_emitted-color: () !default;
+$_emitted-typography: () !default;
+$_emitted-density: () !default;
+$_emitted-base: () !default;
+
+//
+// Private APIs
+//
+
+$private-internal-name: _mat-theming-internals-do-not-access;
+
+// Checks if configurations that have been declared in the given theme have been generated
+// before. If so, warnings will be reported. This should notify developers in case duplicate
+// styles are accidentally generated due to wrong usage of the all-theme mixins.
+//
+// Additionally, this mixin controls the default value for the density configuration. By
+// default, density styles are generated at scale zero. If the same density styles would be
+// generated a second time though, the default value will change to avoid duplicate styles.
+//
+// The mixin keeps track of all configurations in a list that is scoped to the specified
+// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
+// (e.g. `all-component-themes` and `all-legacy-component-themes`) without causing any
+// style duplication.
+@mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) {
+  // TODO(mmalerba): use get-theme-version for this check when its moved out of experimental.
+  @if map.get($theme-or-color-config, $private-internal-name, theme-version) == 1 {
+    @include _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
+      // Optionally, consumers of this mixin can wrap contents inside so that nested
+      // duplicate style checks do not report another warning. e.g. if developers include
+      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
+      // should report a warning. Not all individual components should report a warning too.
+      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
+      $theme-ignore-duplication-warnings: true !global;
+      @content;
+      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+    }
+  } @else {
+    @include _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
+      // Optionally, consumers of this mixin can wrap contents inside so that nested
+      // duplicate style checks do not report another warning. e.g. if developers include
+      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
+      // should report a warning. Not all individual components should report a warning too.
+      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
+      $theme-ignore-duplication-warnings: true !global;
+      @content;
+      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
+    }
+  }
+}
+
+// Checks for duplicate styles in a `theme-version: 1` style theme.
+@mixin _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
+  $color-settings: _strip-empty-settings(
+    (
+      theme-type: map.get($theme-or-color-config, $private-internal-name, theme-type),
+      color-tokens: map.get($theme-or-color-config, $private-internal-name, color-tokens)
+    )
+  );
+  $typography-settings: _strip-empty-settings(
+    (
+      typography-tokens: map.get($theme-or-color-config, $private-internal-name, typography-tokens)
+    )
+  );
+  $density-settings: _strip-empty-settings(
+    (
+      density-scale: map.get($theme-or-color-config, $private-internal-name, density-scale),
+      density-tokens: map.get($theme-or-color-config, $private-internal-name, density-tokens)
+    )
+  );
+  $base-settings: _strip-empty-settings(
+    (
+      base-tokens: map.get($theme-or-color-config, $private-internal-name, base-tokens)
+    )
+  );
+  $previous-color-settings: map.get($_emitted-color, $id) or ();
+  $previous-typography-settings: map.get($_emitted-typography, $id) or ();
+  $previous-density-settings: map.get($_emitted-density, $id) or ();
+  $previous-base-settings: map.get($_emitted-base, $id) or ();
+
+  // Check if the color configuration has been generated before.
+  @if $color-settings != null {
+    @if list.index($previous-color-settings, $color-settings) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-color-settings: list.append($previous-color-settings, $color-settings);
+  }
+
+  // Check if the typography configuration has been generated before.
+  @if $typography-settings != null {
+    @if list.index($previous-typography-settings, $typography-settings) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-typography-settings: list.append($previous-typography-settings, $typography-settings);
+  }
+
+  // Check if the density configuration has been generated before.
+  @if $density-settings != null {
+    @if list.index($previous-density-settings, $density-settings) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-density-settings: list.append($previous-density-settings, $density-settings);
+  }
+
+  // Check if the base configuration has been generated before.
+  @if $base-settings != null {
+    @if list.index($previous-base-settings, $base-settings) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same base theme styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-base-settings: list.append($previous-base-settings, $base-settings);
+  }
+
+  $_emitted-color: map.set($_emitted-color, $id, $previous-color-settings) !global;
+  $_emitted-density: map.set($_emitted-density, $id, $previous-density-settings) !global;
+  $_emitted-typography: map.set($_emitted-typography, $id, $previous-typography-settings) !global;
+  $_emitted-base: map.set($_emitted-base, $id, $previous-base-settings) !global;
+
+  @content;
+}
+
+// Checks for duplicate styles in a `theme-version: 0` style theme.
+@mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $color-config: map.get($theme, $private-internal-name, m2-config, color) or theming.private-get-color-config($theme);
+  $density-config: map.get($theme, $private-internal-name, m2-config, density) or theming.private-get-density-config($theme);
+  $typography-config: map.get($theme, $private-internal-name, m2-config, typography) or theming.private-get-typography-config($theme);
+  // Lists of previous `color`, `density` and `typography` configurations.
+  $previous-color: map.get($_emitted-color, $id) or ();
+  $previous-typography: map.get($_emitted-typography, $id) or ();
+  $previous-density: map.get($_emitted-density, $id) or ();
+  // Whether duplicate legacy density styles would be generated.
+  $duplicate-legacy-density: false;
+
+  // Check if the color configuration has been generated before.
+  @if $color-config != null {
+    @if list.index($previous-color, $color-config) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-color: list.append($previous-color, $color-config);
+  }
+
+  // Check if the typography configuration has been generated before.
+  @if $typography-config != null {
+    @if list.index($previous-typography, $typography-config) != null and not $theme-ignore-duplication-warnings {
+      @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
+    }
+    $previous-typography: list.append($previous-typography, $typography-config);
+  }
+
+  // Check if the density configuration has been generated before.
+  @if $density-config != null {
+    @if list.index($previous-density, $density-config) != null {
+      // Only report a warning if density styles would be duplicated for non-legacy theme
+      // definitions. For legacy themes, we have compatibility logic that avoids duplication
+      // of default density styles. We don't want to report a warning in those cases.
+      @if private-is-legacy-constructed-theme($theme) {
+        $duplicate-legacy-density: true;
+      } @else if not $theme-ignore-duplication-warnings {
+        @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
+      }
+    }
+    $previous-density: list.append($previous-density, $density-config);
+  }
+
+  $_emitted-color: map.merge(
+    $_emitted-color,
+    (
+      $id: $previous-color
+    )
+  ) !global;
+  $_emitted-density: map.merge(
+    $_emitted-density,
+    (
+      $id: $previous-density
+    )
+  ) !global;
+  $_emitted-typography: map.merge(
+    $_emitted-typography,
+    (
+      $id: $previous-typography
+    )
+  ) !global;
+
+  @content;
+}

package/lib/style/_variables.scss

@@ -21,6 +21,9 @@ $padding-5-var: --dbx-padding-5;
 
 $two-column-left-width-var: --dbx-two-column-left-width;
 
+$dbx-color-var: --dbx-color-current;
+$dbx-bg-color-var: --dbx-bg-color-current;
+
 $dbx-primary-color-var: --dbx-primary-color;
 $dbx-accent-color-var: --dbx-accent-color;
 $dbx-warn-color-var: --dbx-warn-color;
@@ -29,7 +32,7 @@ $dbx-success-color-var: --dbx-success-color;
 $dbx-ok-color-var: --dbx-ok-color;
 $dbx-grey-color-var: --dbx-grey-color;
 $dbx-disabled-color-var: --dbx-disabled-color;
-$dbx-bg-color-var: --dbx-bg-color;
+$dbx-default-color-var: --dbx-default-color;
 
 $dbx-primary-color-contrast-var: --dbx-primary-color-contrast;
 $dbx-accent-color-contrast-var: --dbx-accent-color-contrast;
@@ -39,7 +42,7 @@ $dbx-success-color-contrast-var: --dbx-success-color-contrast;
 $dbx-ok-color-contrast-var: --dbx-ok-color-contrast;
 $dbx-grey-color-contrast-var: --dbx-grey-color-contrast;
 $dbx-disabled-color-contrast-var: --dbx-disabled-color-contrast;
-$dbx-bg-color-contrast-var: --dbx-bg-color-contrast;
+$dbx-default-color-contrast-var: --dbx-default-color-contrast;
 
 $dbx-app-height-additional-offset-var: --dbx-app-height-additional-offset;
 $dbx-app-height-base-var: --dbx-app-height-base;
@@ -108,6 +111,9 @@ $padding-map: (
 
 $two-column-left-width: var($two-column-left-width-var);
 
+$dbx-color: var($dbx-color-var);
+$dbx-bg-color: var($dbx-bg-color-var);
+
 $dbx-primary-color: var($dbx-primary-color-var);
 $dbx-accent-color: var($dbx-accent-color-var);
 $dbx-warn-color: var($dbx-warn-color-var);
@@ -116,7 +122,7 @@ $dbx-success-color: var($dbx-success-color-var);
 $dbx-ok-color: var($dbx-ok-color-var);
 $dbx-grey-color: var($dbx-grey-color-var);
 $dbx-disabled-color: var($dbx-disabled-color-var);
-$dbx-bg-color: var($dbx-bg-color-var);
+$dbx-default-color: var($dbx-default-color-var);
 
 $dbx-primary-color-contrast: var($dbx-primary-color-contrast-var);
 $dbx-accent-color-contrast: var($dbx-accent-color-contrast-var);
@@ -126,7 +132,7 @@ $dbx-success-color-contrast: var($dbx-success-color-contrast-var);
 $dbx-ok-color-contrast: var($dbx-ok-color-contrast-var);
 $dbx-grey-color-contrast: var($dbx-grey-color-contrast-var);
 $dbx-disabled-color-contrast: var($dbx-disabled-color-contrast-var);
-$dbx-bg-color-contrast: var($dbx-bg-color-contrast-var);
+$dbx-default-color-contrast: var($dbx-default-color-contrast-var);
 
 $dbx-content-pit-rounded-border-radius-var: --dbx-content-pit-rounded-border-radius;
 $dbx-content-pit-rounded-border-radius: var($dbx-content-pit-rounded-border-radius-var);
@@ -179,9 +185,9 @@ $dbx-theme-extra-colors-secondary: (
     'color': $dbx-disabled-color-contrast,
     'contrast': $dbx-disabled-color
   ),
-  'bg': (
-    'color': $dbx-bg-color-contrast,
-    'contrast': $dbx-bg-color
+  'default': (
+    'color': $dbx-default-color-contrast,
+    'contrast': $dbx-default-color
   )
 );