@dereekb/dbx-form 13.4.2 → 13.5.0

package/lib/extension/_extension.scss

@@ -15,19 +15,6 @@
 }
 
 @mixin all-extension-typography($theme-config-or-typography-config) {
-  $calendar-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);
-    }
-
-    @if ($calendar-enabled == 1) {
-      @include calendar.typography($theme-config-or-typography-config);
-    }
-  }
 }
 
 @mixin all-extension-theme($theme-config) {

package/lib/extension/calendar/_calendar.scss

@@ -143,24 +143,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-form-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/form/_form.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-form-form') {
-    $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/formly/_formly.scss

@@ -12,24 +12,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-form-formly') {
-    $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/formly/field/_field.scss

@@ -15,12 +15,6 @@
 }
 
 @mixin all-field-typography($theme-config) {
-  @include checklist.typography($theme-config);
-  @include component.typography($theme-config);
-  @include selection.all-selection-typography($theme-config);
-  @include texteditor.typography($theme-config);
-  @include value.all-value-typography($theme-config);
-  @include wrapper.typography($theme-config);
 }
 
 @mixin all-field-theme($theme-config) {

package/lib/formly/field/checklist/_checklist.scss

@@ -36,38 +36,14 @@ $dbx-checklist-item-spacing: 8px;
       border-left: 1px solid black;
     }
   }
-}
-
-@mixin color($theme-config) {
-}
 
-@mixin typography($theme-config-or-typography-config) {
   .dbx-default-checklist-item-field {
     .item-label {
       font-size: 1.35em;
       line-height: 1.35em;
     }
-
-    .item-sublabel {
-    }
-
-    .item-description {
-    }
   }
 }
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-checklist') {
-    $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/formly/field/component/_component.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-form-field-component') {
-    $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/formly/field/selection/_selection.scss

@@ -11,10 +11,6 @@
 }
 
 @mixin all-selection-typography($theme-config) {
-  @include list.typography($theme-config);
-  @include pickable.typography($theme-config);
-  @include searchable.typography($theme-config);
-  @include sourceselect.typography($theme-config);
 }
 
 @mixin all-selection-theme($theme-config) {

package/lib/formly/field/selection/list/_list.scss

@@ -11,24 +11,5 @@ $dbx-list-item-field-content-max-height: 300px;
   }
 }
 
-@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-form-field-selection-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/formly/field/selection/pickable/_pickable.scss

@@ -14,24 +14,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-form-field-selection-pickable') {
-    $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/formly/field/selection/searchable/_searchable.scss

@@ -43,24 +43,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-form-field-selection-searchable') {
-    $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/formly/field/selection/sourceselect/_sourceselect.scss

@@ -22,24 +22,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-form-field-source-select') {
-    $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/formly/field/texteditor/_texteditor.scss

@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../../style/theming';
 
 // MARK: Variables
@@ -19,42 +16,31 @@
     max-height: 400px;
     overflow: auto;
   }
-}
-
-@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');
-  $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');
 
   .dbx-texteditor-field {
     .NgxEditor {
       background: transparent;
-      color: $text-color;
-      border-color: $border-color;
+      color: var(--mat-sys-on-surface);
+      border-color: var(--mat-sys-outline);
     }
 
     .NgxEditor__MenuBar {
-      background: $background-color;
-      color: $text-color;
+      background: var(--mat-sys-background);
+      color: var(--mat-sys-on-surface);
       @include theming.elevation(2);
 
       svg {
-        fill: $text-color;
+        fill: var(--mat-sys-on-surface);
       }
     }
 
     .NgxEditor__MenuItem:hover,
     .NgxEditor__Dropdown:hover {
-      background-color: $hover-color;
+      background-color: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
     }
 
     .NgxEditor__MenuItem.NgxEditor__MenuItem--Active {
-      background-color: $focused-color;
+      background-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
     }
 
     .NgxEditor__Popup,
@@ -62,31 +48,15 @@
     .NgxEditor__Dropdown.NgxEditor__Dropdown--Open,
     .NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu,
     .NgxEditor__Popup--FormGroup input {
-      background: $background-color;
-      color: $text-color;
+      background: var(--mat-sys-background);
+      color: var(--mat-sys-on-surface);
     }
 
     .NgxEditor__Dropdown.NgxEditor__Dropdown--Selected .NgxEditor__Dropdown--Text {
-      color: $text-color;
+      color: var(--mat-sys-on-surface);
     }
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-texteditor') {
-    $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/formly/field/value/_value.scss

@@ -15,12 +15,6 @@
 }
 
 @mixin all-value-typography($theme-config) {
-  @include array.typography($theme-config);
-  @include boolean.typography($theme-config);
-  @include date.typography($theme-config);
-  @include number.typography($theme-config);
-  @include phone.typography($theme-config);
-  @include text.typography($theme-config);
 }
 
 @mixin all-value-theme($theme-config) {

package/lib/formly/field/value/array/_array.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use 'sass:color';
 @use '../../../../style/theming';
 
 // MARK: Variables
@@ -30,7 +28,7 @@
 
       padding: 0;
       margin-bottom: 4px;
-      border-radius: 4px;
+      border-radius: var(--dbx-form-repeat-array-field-container-shape, var(--mat-sys-corner-medium));
 
       .dbx-form-repeat-array-field-content {
         display: block;
@@ -42,21 +40,10 @@
       margin-top: 6px;
     }
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-
-  $form-repeat-array-field-bg: theming.m2-get-color-from-palette($background, 'card');
 
   .dbx-form-repeat-array-field {
-    background: $form-repeat-array-field-bg;
-    border: 4px solid $form-repeat-array-field-bg;
-  }
-
-  .dbx-form-repeat-array-bar {
-    background: none;
+    background: var(--mat-sys-surface);
+    border: 4px solid var(--mat-sys-surface);
   }
 
   .dbx-form-repeat-array-drag-button.mdc-button > .mat-icon {
@@ -64,21 +51,5 @@
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-array') {
-    $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/formly/field/value/boolean/_boolean.scss

@@ -48,24 +48,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-form-field-value-boolean') {
-    $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/formly/field/value/date/_date.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../../../style/theming';
 
 // MARK: Variables
@@ -115,35 +114,13 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
   .dbx-form-fixed-date-range-field-wrapper .mat-mdc-form-field-appearance-outline > .mat-mdc-form-field-wrapper > .mat-mdc-form-field-flex > .mat-mdc-form-field-infix {
     padding: 0;
   }
-}
-
-@mixin color($theme-config) {
-  $color-config: theming.m2-get-color-config($theme-config);
-  $background: map.get($color-config, 'background');
-  $background-color: theming.m2-get-color-from-palette($background, 'hover');
 
   // affect both the direct button or a child button
   .mat-datepicker-button-highlight .mat-icon-button,
   .mat-datepicker-button-highlight.mat-icon-button {
-    background-color: rgba($background-color, 0.08);
+    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-form-field-value-date') {
-    $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/formly/field/value/number/_number.scss

@@ -13,23 +13,5 @@ $dbx-formly-number-slider-field-thumb-label-margin-fix-size: 22px;
   }
 }
 
-@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-form-field-value-number') {
-    $color: theming.m2-get-color-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/formly/field/value/phone/_phone.scss

@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:color';
 @use '../../../../style/theming';
 
 // MARK: Variables
@@ -22,47 +19,19 @@
     padding: 2px 6px 0 110px;
   }
 
-  .dbx-form-phone-field-extension-input {
-    border: 0;
-  }
-}
-
-@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');
-  $text-color: theming.m2-get-color-from-palette($foreground, 'text');
-  $border-color: theming.m2-get-color-from-palette($foreground, 'divider');
-
   .dbx-form-phone-field {
-    .country-selector.mat-mdc-button,
-    .country-list-button.mat-menu-item {
-      color: $text-color;
+    .country-selector,
+    .country-list-button {
+      color: var(--mat-sys-on-surface);
     }
   }
 
   .dbx-form-phone-field-extension-input {
     border: 0;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid var(--mat-sys-outline);
     background: none;
   }
 }
 
-@mixin typography($theme-config-or-typography-config) {
-}
-
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-phone') {
-    $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/formly/field/value/text/_text.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-form-field-value-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/formly/field/wrapper/_wrapper.scss

@@ -27,24 +27,5 @@ $form-flex-section-group-item-padding: $form-flex-section-group-padding * 2;
   }
 }
 
-@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-form-field-wrapper') {
-    $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/formly/form/_form.scss

@@ -68,24 +68,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-form-formly-form') {
-    $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);
-    }
-  }
 }