@dereekb/dbx-web 13.4.2 → 13.5.0

package/lib/action/_action.scss

@@ -5,7 +5,6 @@
 }
 
 @mixin all-action-typography($theme-config) {
-  @include snackbar.typography($theme-config);
 }
 
 @mixin all-action-theme($theme-config) {

package/lib/action/snackbar/_snackbar.scss

@@ -10,24 +10,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-action-snackbar') {
-    $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/button/_button.scss

@@ -202,9 +202,7 @@ $big-button-height: 46px; // 33% bigger
       }
     }
   }
-}
 
-@mixin color($theme-config) {
   .dbx-icon-button > .mat-mdc-button {
     background: inherit;
 
@@ -234,21 +232,5 @@ $big-button-height: 46px; // 33% bigger
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-button') {
-    $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/button/progress/bar.button.component.scss

@@ -1,5 +1,9 @@
+$bar-button-progress-bar-height-default: 5px;
+
 :host {
   > button.dbx-progress-bar-button.mdc-button.mat-mdc-button {
+    overflow: hidden; // clip progress bar to rounded corners
+
     &.working {
       cursor: not-allowed;
     }
@@ -16,6 +20,8 @@
         position: absolute;
         top: 0;
         left: 0;
+        --mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
+        --mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
       }
 
       mat-icon {

package/lib/error/_error.scss

@@ -38,9 +38,7 @@ $error-message-button-margin: 12px;
       align-items: center;
     }
   }
-}
 
-@mixin color($theme-config) {
   .mat-mdc-snack-bar-container.dbx-error-snackbar {
     --mdc-snackbar-container-color: var(--dbx-warn-color);
     --mdc-snackbar-supporting-text-color: var(--dbx-warn-color-contrast);
@@ -51,21 +49,5 @@ $error-message-button-margin: 12px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-error') {
-    $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/extension/_extension.scss

@@ -36,37 +36,6 @@
 }
 
 @mixin all-extension-typography($theme-config-or-typography-config) {
-  $calendar-enabled: 1;
-  $table-enabled: 1;
-  $zip-enabled: 1;
-  $help-enabled: 1;
-
-  @if ($theme-config-or-typography-config != null) {
-    @if (theming.private-is-theme-object($theme-config-or-typography-config)) {
-      $theme-config: $theme-config-or-typography-config;
-
-      $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
-      $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
-      $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
-      $help-enabled: config.get-dbx-extension-help-enabled($theme-config);
-    }
-
-    @if ($calendar-enabled == 1) {
-      @include calendar.typography($theme-config-or-typography-config);
-    }
-
-    @if ($table-enabled == 1) {
-      @include table.typography($theme-config-or-typography-config);
-    }
-
-    @if ($zip-enabled == 1) {
-      @include zip.typography($theme-config-or-typography-config);
-    }
-
-    @if ($help-enabled == 1) {
-      @include help.typography($theme-config-or-typography-config);
-    }
-  }
 }
 
 @mixin all-extension-theme($theme-config) {

package/lib/extension/calendar/_calendar.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../style/theming';
 @use './style/angular-calendar' as calendar;
 
@@ -146,81 +145,33 @@ $calendar-content-border-consideration: 2px;
     .cal-day-number {
       user-select: none; // Do not allow selecting/highlighting text accidentally
     }
-  }
-}
 
-@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');
-  $warn: map.get($color-config, 'warn');
-  $background: map.get($color-config, 'background');
-  $foreground: map.get($color-config, 'foreground');
-
-  $background-color: theming.m2-get-color-from-palette($background, 'background');
-  $hover-color: theming.m2-get-color-from-palette($background, 'hover');
-  $focused-color: theming.m2-get-color-from-palette($background, 'focused-button');
-  $border-color: theming.m2-get-color-from-palette($foreground, 'divider');
-  $text-color: theming.m2-get-color-from-palette($foreground, 'text');
-
-  $event-icon-color: theming.m2-get-color-from-palette($primary, 600);
-  $event-bg-color: theming.m2-get-color-from-palette($primary, 800);
-  $event-text-color: theming.m2-get-color-from-palette($primary, '800-contrast');
-  $highlight-color: theming.m2-get-color-from-palette($accent, 300);
-  $weekend-color: $text-color; // theming.m2-get-color-from-palette($accent, 500);
-  $badge-color: theming.m2-get-color-from-palette($accent, 500);
-  $current-time-marker-color: theming.m2-get-color-from-palette($accent, 400);
-
-  $active-color: rgba($highlight-color, 0.3);
-  $selected-color: theming.m2-get-color-from-palette($primary, '500-contrast');
-  $selected-background-color: transparentize(theming.m2-get-color-from-palette($primary, 500), 0.4);
-
-  $disabled-color: theming.m2-get-color-from-palette($warn, 500);
-  $disabled-background-color: theming.m2-get-color-from-palette($background, 'background');
-
-  $not-applicable-color: transparentize($text-color, 0.7);
-  $not-applicable-background-color: $background-color;
-
-  #{calendar.$cal-event-icon-color-var}: $event-icon-color; // text/border color
-  #{calendar.$cal-event-color-primary-var}: $event-text-color; // text/border color
-  #{calendar.$cal-event-color-secondary-var}: $event-bg-color; // event background color
-  #{calendar.$cal-border-color-var}: $border-color;
-  #{calendar.$cal-bg-primary-var}: $background-color;
-  #{calendar.$cal-bg-secondary-var}: $hover-color;
-  #{calendar.$cal-bg-hover-var}: $hover-color;
-  #{calendar.$cal-bg-active-var}: $active-color;
-  #{calendar.$cal-bg-selected-var}: $selected-background-color;
-  #{calendar.$cal-bg-disabled-var}: $disabled-background-color;
-  #{calendar.$cal-bg-not-applicable-var}: $not-applicable-background-color;
-  #{calendar.$cal-bg-highlight-var}: rgba($highlight-color, 0.3);
-  #{calendar.$cal-today-bg-var}: $hover-color;
-  #{calendar.$cal-weekend-color-var}: $weekend-color;
-  #{calendar.$cal-badge-color-var}: $badge-color;
-  #{calendar.$cal-selected-var}: $selected-color;
-  #{calendar.$cal-disabled-var}: $disabled-color;
-  #{calendar.$cal-not-applicable-var}: $not-applicable-color;
-  #{calendar.$cal-current-time-marker-color-var}: $current-time-marker-color;
-  #{calendar.$cal-white-var}: #fff;
-  #{calendar.$cal-gray-var}: #555;
-  #{calendar.$cal-black-var}: #000;
-  #{calendar.$cal-gradient-var}: inset 0 0 10px 0 rgba($background-color, 0.2);
-}
-
-@mixin typography($theme-config-or-typography-config) {
+    // Calendar color tokens (theme-aware via --mat-sys-* / --dbx-* CSS variables)
+    #{calendar.$cal-event-icon-color-var}: var(--dbx-primary-color);
+    #{calendar.$cal-event-color-primary-var}: var(--mat-sys-on-primary-container);
+    #{calendar.$cal-event-color-secondary-var}: var(--mat-sys-primary-container);
+    #{calendar.$cal-border-color-var}: var(--mat-sys-outline);
+    #{calendar.$cal-bg-primary-var}: var(--mat-sys-background);
+    #{calendar.$cal-bg-secondary-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
+    #{calendar.$cal-bg-hover-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
+    #{calendar.$cal-bg-active-var}: color-mix(in srgb, var(--dbx-accent-color) 30%, transparent);
+    #{calendar.$cal-bg-selected-var}: color-mix(in srgb, var(--dbx-primary-color) 60%, transparent);
+    #{calendar.$cal-bg-disabled-var}: var(--mat-sys-surface);
+    #{calendar.$cal-bg-not-applicable-var}: var(--mat-sys-surface);
+    #{calendar.$cal-bg-highlight-var}: color-mix(in srgb, var(--dbx-accent-color) 30%, transparent);
+    #{calendar.$cal-today-bg-var}: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
+    #{calendar.$cal-weekend-color-var}: var(--mat-sys-on-surface);
+    #{calendar.$cal-badge-color-var}: var(--dbx-accent-color);
+    #{calendar.$cal-selected-var}: var(--mat-sys-on-primary);
+    #{calendar.$cal-disabled-var}: var(--dbx-warn-color);
+    #{calendar.$cal-not-applicable-var}: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent);
+    #{calendar.$cal-current-time-marker-color-var}: var(--dbx-accent-color);
+    #{calendar.$cal-white-var}: var(--mat-sys-surface);
+    #{calendar.$cal-gray-var}: var(--mat-sys-on-surface-variant);
+    #{calendar.$cal-black-var}: var(--mat-sys-on-surface);
+    #{calendar.$cal-gradient-var}: inset 0 0 10px 0 color-mix(in srgb, var(--mat-sys-surface) 20%, transparent);
+  }
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-calendar') {
-    $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/extension/calendar/style/month/calendar-month-view.scss

@@ -78,7 +78,7 @@
       text-align: center;
       white-space: nowrap;
       vertical-align: middle;
-      border-radius: 10px;
+      border-radius: var(--dbx-calendar-day-badge-container-shape, var(--mat-sys-corner-small));
     }
 
     .cal-day-number {

package/lib/extension/help/_help.scss

@@ -3,25 +3,5 @@
 @mixin core() {
 }
 
-@mixin color($theme-config) {
-}
-
-@mixin typography($theme-config-or-typography-config) {
-  // Add typography styles if needed
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-help') {
-    $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/extension/table/_table.scss

@@ -51,24 +51,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-table') {
-    $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/extension/zip/_zip.scss

@@ -2,34 +2,19 @@
 @use '../../style/theming';
 
 // MARK: Variables
-$dbx-zip-blob-preview-toolbar-height: 36px;
+$dbx-zip-blob-preview-toolbar-height: 42px;
 $dbx-zip-blob-preview-path-height: 28px;
 
 // MARK: Mixin
 @mixin core() {
+  .dbx-zip-blob-preview-toolbar {
+    overflow-y: hidden;
+  }
+
   .dbx-zip-blob-preview-content {
     height: calc(100% - #{$dbx-zip-blob-preview-toolbar-height} - #{$dbx-zip-blob-preview-path-height});
   }
 }
 
-@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-zip') {
-    $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/interaction/_interaction.scss

@@ -19,14 +19,6 @@
 }
 
 @mixin all-interaction-typography($theme-config) {
-  @include dialog.typography($theme-config);
-  @include filter.typography($theme-config);
-  @include iframe.typography($theme-config);
-  @include popover.typography($theme-config);
-  @include popup.typography($theme-config);
-  @include prompt.typography($theme-config);
-  @include style.typography($theme-config);
-  @include upload.typography($theme-config);
 }
 
 @mixin all-interaction-theme($theme-config) {

package/lib/interaction/dialog/_dialog.scss

@@ -12,6 +12,10 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
 
 // MARK: Mixin
 @mixin core() {
+  .mat-mdc-dialog-surface {
+    color: var(--mat-sys-on-surface);
+  }
+
   .dbx-dialog-content {
     display: block;
     padding: $mat-dialog-container-padding;
@@ -93,24 +97,5 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
   }
 }
 
-@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-interaction-dialog') {
-    $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/interaction/filter/_filter.scss

@@ -6,24 +6,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-interaction-filter') {
-    $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/interaction/iframe/_iframe.scss

@@ -23,24 +23,5 @@ $dbx-iframe-height-var: --dbx-iframe-height;
   }
 }
 
-@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-interaction-iframe') {
-    $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/interaction/popover/_popover.scss

@@ -7,6 +7,11 @@ $dbx-popover-header-height: 48px;
 
 // MARK: Mixin
 @mixin core() {
+  .dbx-popover-container {
+    background: var(--mat-sys-surface);
+    border-radius: var(--mat-sys-corner-medium, 12px);
+  }
+
   .dbx-popover-content,
   .dbx-popover-component {
     height: 100%;
@@ -74,7 +79,7 @@ $dbx-popover-header-height: 48px;
   }
 }
 
-@mixin color($theme-config) {
+@mixin responsive($theme-config) {
   .dbx-popover-header {
     .dbx-popover-header-content {
       @include theming.if-small-screen($theme-config) {
@@ -84,23 +89,8 @@ $dbx-popover-header-height: 48px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-popover') {
-    $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);
-    }
-  }
+  @include responsive($theme-config);
 }
 
 @mixin fillPopoverContentHeight($hasControls: 0, $hasHeader: 0) {

package/lib/interaction/popup/_popup.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../style/theming';
 
 // MARK: Variables
@@ -46,38 +44,16 @@ $dbx-popup-border-radius: 4px;
       min-height: 28px;
     }
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-  $controls-bg-color: theming.m2-get-color-from-palette($background);
-  $controls-text-color: theming.m2-get-color-from-palette($background, 'contrast');
 
   .dbx-popup-controls {
-    color: $controls-text-color;
-    background: $controls-bg-color;
+    color: var(--mat-sys-on-surface);
+    background: var(--mat-sys-surface);
   }
-}
 
-@mixin typography($theme-config-or-typography-config) {
   .dbx-popup-controls-header {
     @include theming.limit-text();
   }
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-popup') {
-    $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/interaction/prompt/_prompt.scss

@@ -23,24 +23,5 @@ $dbx-popup-controls-height: 33px;
   }
 }
 
-@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-interaction-prompt') {
-    $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/interaction/style/_style.scss

@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../style/theming';
 
 // Sections
@@ -8,42 +5,14 @@
   .cdk-overlay-pane .mat-menu-panel {
     max-width: 90vw;
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-  $foreground: map.get($color-config, 'foreground');
-  $cdk-background-color: theming.m2-get-color-from-palette($background, 'background');
-  $cdk-text-color: theming.m2-get-color-from-palette($foreground, 'text');
-  $cdk-border-color: color.adjust(
-    $color: $cdk-text-color,
-    $alpha: -0.9
-  );
 
-  .ng-overlay-container {
-    color: $cdk-text-color;
-    background: $cdk-background-color;
+  .cdk-overlay-pane.ng-overlay-container {
+    color: var(--mat-sys-on-surface);
+    background-color: var(--mat-sys-surface);
     @include theming.elevation(8);
-    border: 1px solid $cdk-border-color;
+    border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent);
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-style') {
-    $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);
-    }
-  }
 }