@dereekb/dbx-web 13.4.2 → 13.5.1

package/lib/layout/text/_text.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../style/theming';
 
 // MARK: Variables
@@ -159,7 +157,7 @@ $dbx-detail-block-big-header-icon-size: 18px;
     transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-flex;
     padding: 7px 12px;
-    border-radius: 16px;
+    border-radius: var(--dbx-chip-container-shape, var(--mat-sys-corner-large));
     align-items: center;
     cursor: default;
     min-height: 32px;
@@ -204,25 +202,6 @@ $dbx-detail-block-big-header-icon-size: 18px;
     pointer-events: none; // disable the chip click and selection events.
     user-select: none;
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $accent: map.get($color-config, 'accent');
-  $warn: map.get($color-config, 'warn');
-  $background: map.get($color-config, 'background');
-  $foreground: map.get($color-config, 'foreground');
-
-  $text-color: theming.m2-get-color-from-palette($foreground, 'text');
-  $border-color: theming.m2-get-color-from-palette($background, 'background');
-  $outlined-text-color: transparentize($border-color, 0.6);
-
-  $is-dark: map.get($theme-config, is-dark);
-
-  @if $is-dark == true {
-    $text-color: darken($text-color, 35);
-    $outlined-text-color: $border-color;
-  }
 
   .dbx-hint,
   .dbx-clear-hint {
@@ -245,12 +224,12 @@ $dbx-detail-block-big-header-icon-size: 18px;
   }
 
   .dbx-outlined-text {
-    color: $text-color;
+    color: var(--mat-sys-on-surface-variant);
     text-shadow:
-      -1px -1px 0 $outlined-text-color,
-      1px -1px 0 $outlined-text-color,
-      -1px 1px 0 $outlined-text-color,
-      1px 1px 0 $outlined-text-color;
+      -1px -1px 0 color-mix(in srgb, var(--mat-sys-surface) 40%, transparent),
+      1px -1px 0 color-mix(in srgb, var(--mat-sys-surface) 40%, transparent),
+      -1px 1px 0 color-mix(in srgb, var(--mat-sys-surface) 40%, transparent),
+      1px 1px 0 color-mix(in srgb, var(--mat-sys-surface) 40%, transparent);
   }
 
   .dbx-nowrap {
@@ -266,21 +245,17 @@ $dbx-detail-block-big-header-icon-size: 18px;
   }
 
   .dbx-number-with-limit-rounded {
-    border-radius: 12px;
+    border-radius: var(--dbx-number-with-limit-container-shape, var(--mat-sys-corner-medium));
   }
 
   .dbx-click-to-copy-text-highlighted {
     text-decoration: underline;
   }
-}
-
-@mixin typography($theme-config-or-typography-config) {
-  $typography-config: theming.m2-get-typography-config($theme-config-or-typography-config);
 
   .dbx-label,
   .dbx-sublabel,
   .dbx-chip-sublabel {
-    font-size: theming.m2-font-size($typography-config, 'caption');
+    font-size: var(--mat-sys-body-small-size);
   }
 
   .dbx-click-to-copy-text-icon.mat-icon {
@@ -292,17 +267,4 @@ $dbx-detail-block-big-header-icon-size: 18px;
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-text') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($theme-config);
-    }
-  }
 }

package/lib/loading/_loading.scss

@@ -27,24 +27,5 @@ $linear-line-height: 4px;
   }
 }
 
-@mixin color($theme-config) {
-}
-
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-loading') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($theme-config);
-    }
-  }
 }

package/lib/router/_router.scss

@@ -11,10 +11,6 @@
 }
 
 @mixin all-router-typography($theme-config) {
-  @include anchor.typography($theme-config);
-  @include anchorlist.typography($theme-config);
-  @include navbar.typography($theme-config);
-  @include sidenav.typography($theme-config);
 }
 
 @mixin all-router-theme($theme-config) {

package/lib/router/layout/anchor/_anchor.scss

@@ -39,24 +39,5 @@
   }
 }
 
-@mixin color($theme-config) {
-}
-
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($theme-config);
-    }
-  }
 }

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

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../../style/theming';
 
 // MARK: Variables
@@ -53,19 +51,9 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
       }
     }
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $foreground: map.get($color-config, 'foreground');
-  $primary: map.get($color-config, 'primary');
-
-  $background: map.get($color-config, 'background');
-  $background-hover-color: theming.m2-get-color-from-palette($background, 'hover');
-  $background-disabled-color: theming.m2-get-color-from-palette($background, 'contrast');
 
   .dbx-anchor-list.mat-mdc-nav-list {
-    --mat-divider-color: #{color.scale($color: $background-hover-color, $alpha: 15%)};
+    --mat-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 15%, transparent);
 
     // MARK: Muting
     // items that are not active are muted
@@ -92,7 +80,7 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
     .dbx-anchor-selected {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color.scale($color: $background-hover-color, $alpha: 10%);
+        background: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
       }
     }
 
@@ -100,32 +88,16 @@ $default-mdc-list-list-item-leading-icon-size: 24px;
     .dbx-anchor-active-eq {
       .mat-mdc-list-item {
         opacity: #{$anchor-list-item-active-opacity};
-        background: color.scale($color: $background-hover-color, $alpha: 25%);
+        background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
       }
     }
 
     // MARK: Anchor Tree
     .dbx-anchor-list-child .mat-mdc-list-item {
-      background: color.scale($background-hover-color, $alpha: 10%);
+      background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
     }
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchorlist') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($theme-config);
-    }
-  }
 }

package/lib/router/layout/navbar/_navbar.scss

@@ -8,23 +8,5 @@
 @mixin core() {
 }
 
-@mixin color($theme-config) {
-}
-
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-navbar') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color != null {
-      @include color($theme-config);
-    }
-    @if $typography != null {
-      @include typography($theme-config);
-    }
-  }
 }

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

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../../style/theming';
 @use '../anchorlist/anchorlist';
 
@@ -118,142 +116,64 @@ $active-background-transparent-color: 0.93;
       overflow: auto;
     }
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $primary: map.get($color-config, 'primary');
-  $accent: map.get($color-config, 'accent');
-
-  $background: map.get($color-config, 'background');
-  $text-color: theming.m2-get-color-from-palette($primary, '800-contrast');
-  $text-faded-color: transparentize(
-    $color: $text-color,
-    $amount: $faded-text-transparent-color
-  );
-  $sidenav-background-color: theming.m2-get-color-from-palette($primary, 800);
-  $inactive-text-color: theming.m2-get-color-from-palette($primary, '800-contrast');
-  $active-icon-color: theming.m2-get-color-from-palette($accent, 400);
 
   .dbx-sidenav {
-    mat-sidenav {
-      .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};
-        --mdc-list-list-item-leading-icon-color: #{$text-color};
+    mat-sidenav.mat-drawer {
+      // darken the sidenav background slightly for better contrast with active items
+      --dbx-sidenav-background: color-mix(in srgb, var(--dbx-bg-color-current) 75%, var(--mat-sys-shadow));
+      background: var(--dbx-sidenav-background);
 
-        --mdc-list-list-item-disabled-label-text-color: #{$text-color};
-        --mdc-list-list-item-disabled-leading-icon-color: #{$text-color};
-        --mdc-list-list-item-disabled-trailing-icon-color: #{$text-color};
+      .dbx-anchor-list.mat-mdc-nav-list {
+        --dbx-sidenav-active-accent: color-mix(in srgb, var(--dbx-accent-color) 65%, var(--mat-sys-surface));
 
-        --mdc-list-list-item-hover-state-layer-color: #{$text-color};
-        --mdc-list-list-item-focus-state-layer-color: #{$text-color};
+        --mdc-list-list-item-label-text-color: var(--mat-sys-on-primary-container);
+        --mdc-list-list-item-supporting-text-color: var(--mat-sys-on-primary-container);
+        --mdc-list-list-item-leading-icon-color: var(--mat-sys-on-primary-container);
 
-        --mdc-list-list-item-hover-label-text-color: #{$text-faded-color};
-        --mdc-list-list-item-hover-supporting-text-color: #{$text-faded-color};
-        --mdc-list-list-item-hover-leading-icon-color: #{$text-faded-color};
+        --mdc-list-list-item-disabled-label-text-color: var(--mat-sys-on-primary-container);
+        --mdc-list-list-item-disabled-leading-icon-color: var(--mat-sys-on-primary-container);
+        --mdc-list-list-item-disabled-trailing-icon-color: var(--mat-sys-on-primary-container);
 
-        /*
-        // TODO: add stylings if they're used in the nav list.
+        --mdc-list-list-item-hover-state-layer-color: var(--mat-sys-on-primary-container);
+        --mdc-list-list-item-focus-state-layer-color: var(--mat-sys-on-primary-container);
 
-        --mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.38);
-        --mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.38);
-        --mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.38);
-        --mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
-        --mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.38);
-        --mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.38);
-        --mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
-        */
+        --mdc-list-list-item-hover-label-text-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
+        --mdc-list-list-item-hover-supporting-text-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
+        --mdc-list-list-item-hover-leading-icon-color: color-mix(in srgb, var(--mat-sys-on-primary-container) 80%, transparent);
 
         .dbx-anchor-active {
           .mat-mdc-list-item {
             .mat-mdc-list-item-icon {
-              color: $active-icon-color;
+              color: var(--dbx-sidenav-active-accent);
             }
           }
         }
 
         .dbx-anchor-list-root .dbx-anchor-active .mat-mdc-list-item {
           // root list items glow when active
-          background: transparentize($color: $active-icon-color, $amount: $active-background-transparent-color);
+          background: color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent);
         }
 
         // directly active links have a side-
         .dbx-anchor-active-eq,
         .dbx-anchor-list-child .dbx-anchor-active {
           .mat-mdc-list-item {
-            border-left: var(--dbx-sidenav-active-child-item-border-left-width, #{$default-active-border-left-width}) solid $active-icon-color;
+            border-left: var(--dbx-sidenav-active-child-item-border-left-width, #{$default-active-border-left-width}) solid var(--dbx-sidenav-active-accent);
 
             .mat-mdc-list-item-icon {
-              --mdc-list-list-item-leading-icon-color: #{$active-icon-color};
+              --mdc-list-list-item-leading-icon-color: var(--dbx-sidenav-active-accent);
             }
           }
         }
 
         .dbx-anchor-list-child .dbx-anchor-active .mat-mdc-list-item,
         .dbx-anchor-list-child .dbx-anchor-active-eq .mat-mdc-list-item {
-          background: transparentize($color: $active-icon-color, $amount: $active-background-transparent-color);
+          background: color-mix(in srgb, var(--dbx-sidenav-active-accent) 12%, transparent);
         }
       }
     }
   }
-
-  /*
-    .active {
-      &.mat-mdc-list-item {
-        background-color: rgba(0, 0, 0, 0.1);
-      }
-
-      mat-icon {
-        color: $sidenav-active-color;
-      }
-    }
-
-    $app-side-nav-bar-padding: 14px;
-
-    .app-side-nav-bar-title {
-      // text-align: center;
-      padding: $app-side-nav-bar-padding;
-
-      .app-side-nav-bar-title-header {
-        display: flex;
-
-        >img {
-          width: 32px;
-          height: 32px;
-          padding-left: 2px;
-          padding-right: 16px;
-        }
-
-        span {
-          @include mat-typography-level-to-styles($color-config, title);
-          font-weight: 300;
-        }
-      }
-
-    }
-
-    .app-side-nav-bar-title-content {
-      padding-top: $app-side-nav-bar-padding;
-    }
-    */
-}
-
-@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-sidenav') {
-    $color: theming.m2-get-color-config($theme-config);
-    $density: theming.m2-get-density-config($theme-config);
-    $typography: theming.m2-get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($theme-config);
-    }
-  }
 }

package/lib/style/_all-typography.scss

@@ -1,6 +1,5 @@
 @use './theming';
 @use '../action/action';
-@use '../button/button';
 @use '../error/error';
 @use '../interaction/interaction';
 @use '../layout/layout';
@@ -10,19 +9,4 @@
 
 // Includes all of the typographic styles.
 @mixin all-component-typographies($theme-config-or-typography-config: null) {
-  $typography-config: if(theming.private-is-theme-object($theme-config-or-typography-config), theming.m2-get-typography-config($theme-config-or-typography-config), $theme-config-or-typography-config);
-
-  // If no actual color configuration has been specified, create a default one.
-  @if not $typography-config {
-    $typography-config: typography.define-typography-config();
-  }
-
-  @include button.typography($typography-config);
-  @include error.typography($typography-config);
-  @include action.all-action-typography($typography-config);
-  @include interaction.all-interaction-typography($typography-config);
-  @include layout.all-layout-typography($typography-config);
-  @include loading.typography($typography-config);
-  @include router.all-router-typography($typography-config);
-  @include extension.all-extension-typography($typography-config);
 }

package/lib/style/_m2-visual-compat.scss

@@ -0,0 +1,120 @@
+/// Applies M3 "small" (8px) corner rounding to components that default to
+/// larger radii in M3 (buttons default to "full"/pill, dialogs to 28px, etc).
+/// This gives a modern but restrained look.
+@mixin dbx-components-shapes() {
+  // Buttons: M3 default is "full" (pill). Small = 8px.
+  --mat-button-filled-container-shape: 8px;
+  --mat-button-outlined-container-shape: 8px;
+  --mat-button-text-container-shape: 8px;
+  --mat-button-protected-container-shape: 8px;
+  --mat-button-tonal-container-shape: 8px;
+
+  // FAB: M3 default is "large" (16px). Small = 8px.
+  --mat-fab-container-shape: 8px;
+  --mat-fab-small-container-shape: 8px;
+
+  // Dialog: M3 default is "extra-large" (28px). Small = 8px.
+  --mat-dialog-container-shape: 8px;
+
+  // Card: M3 default is "medium" (12px). Small = 8px.
+  --mat-card-elevated-container-shape: 8px;
+  --mat-card-filled-container-shape: 8px;
+  --mat-card-outlined-container-shape: 8px;
+
+  // Sidenav: M3 default is "large" (16px). No rounding for dbx-components.
+  --mat-sidenav-container-shape: 0;
+
+  // Chip: Small = 8px.
+  --mat-chip-container-shape-radius: 8px;
+
+  // Form fields: Small = 8px.
+  --mat-form-field-filled-container-shape: 8px;
+  --mat-form-field-outlined-container-shape: 8px;
+
+  // Snackbar: Small = 8px.
+  --mat-snack-bar-container-shape: 8px;
+
+  // Menu / Select / Autocomplete: Small = 8px.
+  --mat-menu-container-shape: 8px;
+  --mat-autocomplete-container-shape: 8px;
+
+  // Expansion panel
+  --mat-expansion-container-shape: 8px;
+
+  // Datepicker
+  --mat-datepicker-calendar-container-shape: 8px;
+
+  // Bottom sheet
+  --mat-bottom-sheet-container-shape: 8px;
+
+  // Tooltip
+  --mat-tooltip-container-shape: 8px;
+
+  // List: active indicator defaults to "full" (pill). Small = 8px.
+  --mat-list-active-indicator-shape: 2px;
+}
+
+/// Opt-in mixin that restores M2-era visual defaults (shapes, border radii)
+/// when using M3 theming. Include inside your theme root selector.
+///
+/// Usage:
+/// ```scss
+/// @mixin my-theme($root-selector) {
+///   @include dbx.theme($root-selector, $theme);
+///   #{$root-selector} {
+///     @include dbx.m2-visual-compat();
+///   }
+/// }
+/// ```
+@mixin m2-visual-compat() {
+  // Buttons: M2 ~4px vs M3 "full" (pill)
+  --mat-button-filled-container-shape: 4px;
+  --mat-button-outlined-container-shape: 4px;
+  --mat-button-text-container-shape: 4px;
+  --mat-button-protected-container-shape: 4px;
+  --mat-button-tonal-container-shape: 4px;
+
+  // FAB: M2 ~4px vs M3 fully rounded
+  --mat-fab-container-shape: 4px;
+  --mat-fab-small-container-shape: 4px;
+
+  // Dialog: M2 ~4px vs M3 ~28px
+  --mat-dialog-container-shape: 4px;
+
+  // Card: M2 ~4px vs M3 ~12px
+  --mat-card-elevated-container-shape: 4px;
+  --mat-card-filled-container-shape: 4px;
+  --mat-card-outlined-container-shape: 4px;
+
+  // Sidenav: M2 had no rounding vs M3 "large" (16px)
+  --mat-sidenav-container-shape: 0;
+
+  // Chip: M2 ~16px (pill) vs M3 ~8px
+  --mat-chip-container-shape-radius: 16px;
+
+  // Form fields: M2 ~4px vs M3 varies
+  --mat-form-field-filled-container-shape: 4px;
+  --mat-form-field-outlined-container-shape: 4px;
+
+  // Snackbar: M2 ~4px
+  --mat-snack-bar-container-shape: 4px;
+
+  // Menu / Autocomplete
+  --mat-menu-container-shape: 4px;
+  --mat-autocomplete-container-shape: 4px;
+
+  // Expansion panel
+  --mat-expansion-container-shape: 4px;
+
+  // Datepicker
+  --mat-datepicker-calendar-container-shape: 4px;
+
+  // Bottom sheet
+  --mat-bottom-sheet-container-shape: 4px;
+
+  // Tooltip
+  --mat-tooltip-container-shape: 4px;
+
+  // List: active indicator defaults to "full" (pill). M2 had no rounding.
+  --mat-list-active-indicator-shape: 0;
+}