@dereekb/dbx-web 13.4.2 → 13.5.0

package/lib/interaction/upload/_upload.scss

@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../style/theming';
 
 // Sections
@@ -26,7 +23,7 @@
   }
 
   .dbx-file-upload-area-square {
-    border-radius: 12px;
+    border-radius: var(--dbx-file-upload-square-container-shape, var(--mat-sys-corner-medium));
   }
 
   .dbx-file-upload-area-with-hint .dbx-file-upload-area-content {
@@ -41,31 +38,9 @@
     text-align: center;
     user-select: none;
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-
-  $primary: map.get($color-config, 'primary');
-  $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.5
-  );
-
-  $cdk-highlight-background-color: color.adjust(
-    $color: $cdk-text-color,
-    $alpha: -0.7
-  );
-
-  $primary-color: theming.m2-get-color-from-palette($primary, 500);
 
   .dbx-file-upload-area-content {
-    border-color: $cdk-border-color;
+    border-color: color-mix(in srgb, var(--mat-sys-on-surface) 50%, transparent);
   }
 
   .dbx-file-upload-area-drag-over .dbx-file-upload-area-content {
@@ -73,28 +48,12 @@
 
     @keyframes dbx-file-upload-area-fade {
       to {
-        border-color: $primary-color;
-        background-color: $cdk-highlight-background-color;
+        border-color: var(--dbx-primary-color);
+        background-color: color-mix(in srgb, var(--mat-sys-on-surface) 30%, transparent);
       }
     }
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-upload') {
-    $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/layout/_layout.scss

@@ -31,20 +31,6 @@
 }
 
 @mixin all-layout-typography($theme-config) {
-  @include avatar.typography($theme-config);
-  @include bar.typography($theme-config);
-  @include block.typography($theme-config);
-  @include card.typography($theme-config);
-  @include column.typography($theme-config);
-  @include content.typography($theme-config);
-  @include flag.typography($theme-config);
-  @include flex.typography($theme-config);
-  @include item.typography($theme-config);
-  @include list.typography($theme-config);
-  @include section.typography($theme-config);
-  @include step.typography($theme-config);
-  @include style.typography($theme-config);
-  @include text.typography($theme-config);
 }
 
 @mixin all-layout-theme($theme-config) {

package/lib/layout/avatar/_avatar.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../style/theming';
 
 // MARK: Variables
@@ -69,38 +67,13 @@ $icon-to-avatar-size-ratio: 0.65;
   }
 
   .dbx-avatar-view-square {
-    border-radius: 12px;
+    border-radius: var(--dbx-avatar-square-container-shape, var(--mat-sys-corner-medium));
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-  $primary: map.get($color-config, 'primary');
-  $accent: map.get($color-config, 'accent');
-
-  $background-color: theming.m2-get-color-from-palette($background, 'hover');
 
   .dbx-avatar-view {
-    background-color: $background-color;
+    background-color: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-avatar') {
-    $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/layout/bar/_bar.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../style/theming';
 
 // MARK: Variables
@@ -20,6 +18,16 @@ $bar-fixed-height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: var(--mat-sys-body-small-size);
+  }
+
+  .dbx-bar {
+    color: var(--mat-sys-on-surface);
+  }
+
+  .dbx-bar-background {
+    background: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
   }
 
   .dbx-bar-fixed-height {
@@ -36,46 +44,5 @@ $bar-fixed-height: 40px;
   }
 }
 
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-  $primary: map.get($color-config, 'primary');
-  $accent: map.get($color-config, 'accent');
-
-  $dbx-bar-bg-color: theming.m2-get-color-from-palette($background, 'app-bar');
-  $dbx-bar-color: theming.m2-get-color-from-palette($background, 'contrast');
-
-  .dbx-pagebar .mat-toolbar {
-    // todo?
-  }
-
-  .dbx-bar,
-  .dbx-bar-background {
-    background: $dbx-bar-bg-color;
-    color: $dbx-bar-color;
-  }
-}
-
-@mixin typography($theme-config-or-typography-config) {
-  $typography-config: theming.m2-get-typography-config($theme-config-or-typography-config);
-
-  .dbx-bar {
-    font-size: theming.m2-font-size($typography-config, 'caption');
-  }
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-bar') {
-    $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/layout/block/_block.scss

@@ -20,24 +20,5 @@ $two-block-top-height-var: --dbx-two-block-top-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-layout-block') {
-    $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/layout/card/_card.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-layout-card') {
-    $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/layout/column/_column.scss

@@ -118,7 +118,7 @@ $two-columns-right-padding-size: 6px;
   }
 }
 
-@mixin color($theme-config) {
+@mixin responsive($theme-config) {
   .dbx-two-column {
     @include theming.if-small-screen($theme-config) {
       .left-column {
@@ -142,21 +142,6 @@ $two-columns-right-padding-size: 6px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-column') {
-    $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);
 }

package/lib/layout/content/_content.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../style/theming';
 
 $content-max-width: theming.$content-max-width;
@@ -19,12 +17,12 @@ $pit-padding: theming.$padding-4;
 $content-container-padding: theming.$padding-4;
 $content-container-padding-small-screen: theming.$padding-2;
 
-$content-end-margin: theming.$padding-4;
-
 $scroll-content-bottom-padding: 42px;
 
 $dbx-content-pit-floating-button-margin: 8px;
 
+$dbx-border-opacity-default: 20%;
+
 @mixin core() {
   .dbx-content-border {
     padding: $content-border-inner-padding;
@@ -77,10 +75,6 @@ $dbx-content-pit-floating-button-margin: 8px;
     top: 0;
   }
 
-  .dbx-content-end {
-    margin-bottom: $content-end-margin;
-  }
-
   .dbx-app-page {
     @include theming.app-height();
     overflow: hidden;
@@ -180,44 +174,17 @@ $dbx-content-pit-floating-button-margin: 8px;
   .dbx-scroll-content {
     padding-bottom: $scroll-content-bottom-padding;
   }
-}
-
-@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');
-  $content-color: theming.m2-get-color-from-palette($foreground, 'text');
-  $content-background: theming.m2-get-color-from-palette($background, 'background');
-  $content-border-background: theming.m2-get-color-from-palette($background, 'hover');
-
-  $primary-color: theming.m2-get-color-from-palette($primary, 500);
-  $accent-color: theming.m2-get-color-from-palette($accent, 500);
-  $warn-color: theming.m2-get-color-from-palette($warn, 500);
 
   .dbx-content-pit {
-    background: $content-border-background;
+    background: var(--mat-sys-surface-container);
   }
 
   .dbx-content-border {
-    // border-radius: 6px;
-    border: 3px dashed $content-border-background;
-
-    &.dbx-content-border-primary {
-      border-color: $primary-color;
-    }
-
-    &.dbx-content-border-warn {
-      border-color: $warn-color;
-    }
-
-    &.dbx-content-border-accent {
-      border-color: $accent-color;
-    }
+    border: 3px dashed color-mix(in srgb, var(--dbx-border-color, var(--mat-sys-outline-variant)) var(--dbx-border-opacity, $dbx-border-opacity-default), transparent);
   }
+}
 
+@mixin responsive($theme-config) {
   .dbx-content-container {
     @include theming.if-small-screen($theme-config) {
       // reduce all paddings down.
@@ -235,21 +202,6 @@ $dbx-content-pit-floating-button-margin: 8px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-content') {
-    $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);
 }

package/lib/layout/flag/_flag.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-layout-flag') {
-    $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/layout/flex/_flex.scss

@@ -58,24 +58,5 @@ $dbx-flex-group-columns-count: 6;
   }
 }
 
-@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-layout-flex') {
-    $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/layout/item/_item.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-layout-item') {
-    $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/layout/list/_list.scss

@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../style/theming';
 
 // MARK: Variables
@@ -167,14 +164,10 @@ $list-item-padded-min-height: 42px;
   .dbx-list-content .dbx-list-view .mat-mdc-list-base .mat-mdc-list-item .mat-divider {
     position: unset; // do not touch the divider in dbx-list
   }
-}
 
-@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');
+  .dbx-list-accordion-view {
+    --mat-expansion-container-shape: 0px;
+  }
 
   .dbx-list-view-group-header {
     color: var(--mdc-list-list-item-label-text-color);
@@ -191,21 +184,5 @@ $list-item-padded-min-height: 42px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-list') {
-    $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/layout/section/_section.scss

@@ -13,6 +13,11 @@ $header-left-reserved-space-small-screen: 120px;
 
 // MARK: Mixin
 @mixin core() {
+  // MARK: Section
+  .dbx-section {
+    border-radius: var(--dbx-section-container-shape, var(--mat-sys-corner-medium));
+  }
+
   // MARK: Header
   .dbx-section-header {
     box-sizing: border-box;
@@ -209,7 +214,7 @@ $header-left-reserved-space-small-screen: 120px;
   }
 }
 
-@mixin color($theme-config) {
+@mixin responsive($theme-config) {
   // MARK: Page
   .dbx-section-page {
     > .dbx-section-header > .dbx-section-header-content {
@@ -228,21 +233,6 @@ $header-left-reserved-space-small-screen: 120px;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-section') {
-    $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);
 }

package/lib/layout/step/_step.scss

@@ -6,26 +6,7 @@
 @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-layout-step') {
-    $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/layout/style/_style.scss

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../style/theming';
 
 // Sections
@@ -150,21 +148,6 @@
   --mat-list-list-item-leading-icon-color: #{theming.$dbx-color-var};
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-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);
-    }
-  }
+  @include color($theme-config);
 }