@wlcm/angular 19.2.6 → 22.0.1

package/styles/components/datepicker/date-range-picker/_date-range-picker-panel.scss

@@ -1,12 +1,9 @@
-@use 'sass:map';
 @use '../../../core//utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-date-range-picker-panel {
-    background: #ffffff;
-    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16);
+    background: var(--mat-sys-surface);
+    box-shadow: 0 4px 32px 0 color-mix(in srgb, var(--mat-sys-shadow) 16%, transparent);
     border-radius: 12px;
     padding: 16px;
   }

package/styles/components/forms/_autocomplete.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use '../../core/utils';
 @use 'partials/dropdown-panel';
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-autocomplete {
     width: 100%;
     display: block;

package/styles/components/forms/_checkbox-group.scss

@@ -1,9 +1,6 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-checkbox-group {
     display: grid;
     grid-auto-flow: row;

package/styles/components/forms/_checkbox.scss

@@ -1,9 +1,6 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-checkbox {
     mat-checkbox {
       .mdc-checkbox {
@@ -16,7 +13,7 @@
       }
 
       .mdc-checkbox__background {
-        $border-color: map-get($theme, field-outline-color);
+        $border-color: var(--mat-sys-outline-variant);
         --mdc-checkbox-unselected-focus-icon-color: #{$border-color};
         width: 16px;
         height: 16px;
@@ -25,6 +22,7 @@
         left: 0;
         border: 1px solid $border-color;
         border-radius: 4px;
+        background-color: var(--mat-sys-surface-container-lowest);
 
         .mdc-checkbox__checkmark {
           transition: 0s;
@@ -33,7 +31,7 @@
 
       .mdc-checkbox__checkmark-path {
         stroke-width: 3px;
-        stroke: map-get($theme, primary-color);
+        stroke: var(--mat-sys-primary);
         d: path('M 5 11.7 L 11 16.6 L 19 7');
       }
 
@@ -56,7 +54,7 @@
       // States
       &:hover {
         .mdc-checkbox__background {
-          $border-hover-color: map-get($theme, text-black-color);
+          $border-hover-color: var(--mat-sys-on-surface);
           --mdc-checkbox-unselected-focus-icon-color: #{$border-hover-color};
           border-color: $border-hover-color;
         }
@@ -64,8 +62,8 @@
 
       &.mat-mdc-checkbox-checked {
         .mdc-checkbox__background {
-          border-color: map-get($theme, primary-color) !important;
-          background-color: #ffffff !important;
+          border-color: var(--mat-sys-primary) !important;
+          background-color: var(--mat-sys-on-primary) !important;
         }
       }
     }

package/styles/components/forms/_error.scss

@@ -1,23 +1,12 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $color-config: utils.get-color-config($theme_config);
-  $primary: map-get($color-config, primary);
-  $accent: map-get($color-config, accent);
-  $warn: map-get($color-config, warn);
-
-  $typography-config: utils.get-typography-config($theme_config);
-  $bold-font-family: utils.get-bold-typography($typography-config);
-  $medium-font-family: utils.get-medium-typography($typography-config);
-  $regular-font-family: utils.get-regular-typography($typography-config);
-
   .wlcm-error {
     display: block;
-    color: $warn;
+    color: var(--mat-sys-error);
     font-size: 13px;
     letter-spacing: 0.35px;
-    font-family: $regular-font-family;
+    @include utils.font(regular);
     line-height: 20px;
   }
 }

package/styles/components/forms/_form-field.scss

@@ -1,15 +1,12 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-form-field {
     display: block;
 
     &.wlcm-field-focused {
       .wlcm-field-container {
-        border-color: map-get($theme, focus-field-outline-color);
+        border-color: var(--mat-sys-primary);
       }
     }
 
@@ -24,7 +21,7 @@
         .wlcm-field-touched.wlcm-field-invalid
       ) {
       .wlcm-field-container:hover {
-        border-color: map-get($theme, hover-field-outline-color);
+        border-color: var(--wlcm-hover-field-outline-color);
       }
     }
   }
@@ -32,7 +29,7 @@
   .wlcm-field-touched {
     &.wlcm-field-invalid {
       .wlcm-field-container {
-        border-color: map-get($theme, warn-color);
+        border-color: var(--mat-sys-error);
       }
 
       .wlcm-field-error-container {
@@ -59,10 +56,11 @@
     display: flex;
     align-items: center;
     padding: 6px 8px;
-    border: 1px solid map-get($theme, field-outline-color);
+    border: 1px solid var(--mat-sys-outline-variant);
     box-sizing: border-box;
     border-radius: 4px;
     position: relative;
+    background-color: var(--mat-sys-surface-container-lowest);
   }
 
   .wlcm-field-error-container {
@@ -81,11 +79,12 @@
     width: 100%;
     font-size: 14px;
     letter-spacing: 0.41px;
-    font-family: map-get($theme, regular-font-family);
-    color: map-get($theme, field-text-color);
+    @include utils.font(regular);
+    color: var(--mat-sys-on-surface);
+    background-color: transparent;
 
     &:disabled {
-      background-color: inherit;
+      background-color: transparent;
     }
   }
 }

package/styles/components/forms/_label.scss

@@ -1,21 +1,12 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $color-config: utils.get-color-config($theme_config);
-  $primary: map-get($color-config, primary);
-  $accent: map-get($color-config, accent);
-  $warn: map-get($color-config, warn);
-
-  $typography-config: utils.get-typography-config($theme_config);
-  $bold-font-family: utils.get-bold-typography($typography-config);
-  $medium-font-family: utils.get-medium-typography($typography-config);
-  $regular-font-family: utils.get-regular-typography($typography-config);
+  $warn: var(--mat-sys-error);
 
   .wlcm-label {
     display: flex;
     align-items: center;
-    font-family: $medium-font-family;
+    @include utils.font(medium);
     letter-spacing: 0.41px;
     line-height: 20px;
     margin-bottom: 5px;

package/styles/components/forms/_radio.scss

@@ -1,9 +1,6 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   // TODO replace with `wlcm-radio-group`
   .wlcm-form-field {
     .mat-mdc-radio-group {
@@ -14,10 +11,9 @@
       label {
         cursor: pointer;
         font-size: 14px;
-        font-family: map-get($theme, regular-font-family);
-        color: map-get($theme, text-black-color);
+        @include utils.font(regular);
+        color: var(--mat-sys-on-surface);
         -webkit-font-smoothing: initial;
-        font-weight: normal;
       }
 
       .mat-mdc-radio-touch-target {
@@ -37,6 +33,8 @@
         &__background {
           width: 16px;
           height: 16px;
+          background-color: var(--mat-sys-surface-container-lowest);
+          border-radius: 50%;
 
           &::before {
             display: none;
@@ -44,21 +42,24 @@
         }
 
         &__inner-circle {
-          top: -2px;
-          left: -2px;
+          top: 0;
+          left: 0;
         }
 
         &__outer-circle {
-          $border-color: map-get($theme, field-outline-color);
+          $border-color: var(--mat-sys-outline-variant);
+          --mat-radio-unselected-icon-color: #{$border-color};
           --mdc-radio-unselected-icon-color: #{$border-color};
-          border: 1px solid $border-color;
+          border-width: 1px;
+          border-color: $border-color;
         }
       }
 
       // States
       .mdc-form-field:hover {
         .mdc-radio__outer-circle {
-          $border-hover-color: map-get($theme, text-black-color);
+          $border-hover-color: var(--mat-sys-on-surface);
+          --mat-radio-unselected-icon-color: #{$border-hover-color};
           --mdc-radio-unselected-icon-color: #{$border-hover-color};
           border: 1px solid $border-hover-color;
         }
@@ -70,7 +71,7 @@
         }
 
         .mdc-radio__inner-circle {
-          transform: scale(0.4) !important;
+          transform: scale(0.5) !important;
         }
       }
     }

package/styles/components/forms/_select.scss

@@ -1,10 +1,7 @@
-@use 'sass:map';
 @use '../../core/utils';
 @use 'partials/dropdown-panel';
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-form-field.wlcm-field-disabled {
     .wlcm-select {
       pointer-events: none;
@@ -33,7 +30,7 @@
           font-size: 14px;
           -webkit-font-smoothing: initial;
           letter-spacing: 0.41px;
-          color: map-get($theme, placeholder-color);
+          color: var(--mat-sys-on-surface-variant);
         }
       }
     }
@@ -49,17 +46,17 @@
     .mat-pseudo-checkbox {
       width: 16px;
       height: 16px;
-      border: 1px solid map-get($theme, field-outline-color);
+      border: 1px solid var(--mat-sys-outline-variant);
       border-radius: 4px;
 
       &.mat-pseudo-checkbox-checked {
-        border-color: map-get($theme, primary-color);
-        background-color: white;
+        border-color: var(--mat-sys-primary);
+        background-color: var(--mat-sys-on-primary);
 
         &::after {
           width: 5px;
           height: 3px;
-          border-color: map-get($theme, primary-color);
+          border-color: var(--mat-sys-primary);
           top: -1.5px;
         }
       }

package/styles/components/forms/partials/_dropdown-panel.scss

@@ -1,17 +1,15 @@
-@use 'sass:map';
 @use '../../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   // Panel (cdk-overlay-pane)
-  border: 1px solid map-get($theme, focus-field-outline-color);
+  border: 1px solid var(--mat-sys-primary);
   border-radius: 4px;
   box-shadow: none;
   overflow: hidden;
 
   .mdc-menu-surface {
     padding: 0;
+    background: var(--mat-sys-surface-container-lowest);
   }
 
   // Option
@@ -25,7 +23,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-family: map-get($theme, regular-font-family);
+      @include utils.font(regular);
       -webkit-font-smoothing: initial;
       font-size: 14px;
       letter-spacing: 0.41px;
@@ -34,7 +32,7 @@
 
     // States
     &.mdc-list-item--selected {
-      background-color: map-get($theme, selected-option-color) !important;
+      background-color: var(--mat-sys-primary-container);
     }
   }
 }

package/styles/components/loader/_loader.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-loader {
     width: 100%;
     display: block;
@@ -23,13 +18,14 @@
   }
 
   .wlcm-default-loader {
-    width: 28px;
-    height: 28px;
+    // Size is driven by the loader's `diameter` input via --wlcm-loader-size (default 28px).
+    width: var(--wlcm-loader-size, 28px);
+    height: var(--wlcm-loader-size, 28px);
     display: block;
     position: relative;
 
     .spinner {
-      font-size: 28px;
+      font-size: var(--wlcm-loader-size, 28px);
       position: relative;
       display: inline-block;
       width: 1em;
@@ -157,7 +153,7 @@
 
     @keyframes spinner-fade {
       0% {
-        background-color: map-get($theme, primary-color);
+        background-color: currentColor;
       }
 
       100% {

package/styles/components/phone-input/_country-code-select.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-country-code-select {
     cursor: pointer;
 

package/styles/components/phone-input/_phone-input-container.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-phone-input-container {
     width: 100%;
     height: 18px;
@@ -15,6 +10,6 @@
     width: 1.5px;
     height: 100%;
     margin: 0 12px;
-    background: map-get($theme, field-outline-color);
+    background: var(--mat-sys-outline-variant);
   }
 }

package/styles/components/search-field/index.scss

@@ -1,6 +1,2 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
 }

package/styles/components/stepper/_step-header.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @keyframes pass-indicator-animation {
@@ -24,16 +23,14 @@
 }
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-step-header {
     &.wlcm-step-header-passed {
       .wlcm-step-header-complete-indicator {
-        border-color: map-get($theme, primary-color);
+        border-color: var(--mat-sys-primary);
       }
 
       .wlcm-step-header-label {
-        color: map-get($theme, primary-color);
+        color: var(--mat-sys-primary);
       }
     }
 
@@ -44,7 +41,7 @@
           display: block;
           position: absolute;
           border-radius: 50%;
-          background: map-get($theme, primary-color);
+          background: var(--mat-sys-primary);
           animation: complete-indicator-animation 250ms
             cubic-bezier(0.4, 0, 0.6, 1) forwards;
         }
@@ -60,7 +57,7 @@
           height: 2px;
           display: block;
           position: absolute;
-          background: map-get($theme, primary-color);
+          background: var(--mat-sys-primary);
           animation: pass-indicator-animation 250ms cubic-bezier(0.4, 0, 0.6, 1)
             forwards;
         }
@@ -88,8 +85,8 @@
 
   .wlcm-step-header-label {
     display: inline-block;
-    font-family: map-get($theme, bold-font-family);
-    color: map-get($theme, field-outline-color);
+    @include utils.font(bold);
+    color: var(--mat-sys-outline-variant);
     margin-bottom: 5px;
     line-height: 20px;
     font-size: 14px;
@@ -106,7 +103,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    border: 2px solid map-get($theme, field-outline-color);
+    border: 2px solid var(--mat-sys-outline-variant);
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -117,7 +114,7 @@
   .wlcm-step-header-pass-indicator {
     flex: 1;
     height: 2px;
-    background: map-get($theme, field-outline-color);
+    background: var(--mat-sys-outline-variant);
     position: relative;
   }
 }

package/styles/components/stepper/_step.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-step {
     width: 100%;
     display: none;

package/styles/components/stepper/_stepper-header.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-stepper-header {
     display: grid;
     grid-auto-columns: 1fr;

package/styles/components/stepper/_stepper.scss

@@ -1,6 +1,2 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
 }

package/styles/components/table/_table-head-data.scss

@@ -1,19 +1,16 @@
-@use 'sass:map';
 @use '../../core/utils' as utils;
 
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-table-head-data,
   .wlcm-table-head-actions {
     min-width: min-content;
     display: table-cell;
     vertical-align: inherit;
     unicode-bidi: isolate;
-    background: #eceff1;
+    background: var(--mat-sys-surface-container);
     white-space: nowrap;
-    font-family: map-get($theme, regular-font-family);
-    color: map-get($theme, placeholder-color);
+    @include utils.font(regular);
+    color: var(--mat-sys-on-surface-variant);
     font-size: 14px;
     height: 32px;
 
@@ -29,15 +26,15 @@
   }
 
   .wlcm-table-head-data {
-    padding: 0px 16px;
+    padding: 0 16px;
   }
 
   .wlcm-table-head-actions {
     width: 16px;
-    padding: 0px 8px;
+    padding: 0 8px;
 
     & + .wlcm-table-head-data {
-      padding-left: 0px;
+      padding-left: 0;
     }
   }
 }

package/styles/components/table/_table-head.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-table-head {
     display: table-header-group;
     vertical-align: middle;

package/styles/components/table/_table-row-data.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-table-row-data,
   .wlcm-table-row-actions {
     display: table-cell;
@@ -12,7 +7,7 @@
     vertical-align: inherit;
     unicode-bidi: isolate;
     box-sizing: border-box;
-    background: #ffffff;
+    background: var(--mat-sys-surface);
     font-size: 16px;
 
     &:first-child {
@@ -41,7 +36,7 @@
 
   .wlcm-table-row-selected {
     .wlcm-table-row-data {
-      color: map-get($theme, primary-color);
+      color: var(--mat-sys-primary);
     }
   }
 }

package/styles/components/table/_table-row.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-table-row {
     display: table-row;
     vertical-align: inherit;

package/styles/components/table/_table.scss

@@ -1,9 +1,4 @@
-@use 'sass:map';
-@use '../../core/utils' as utils;
-
 @mixin theme($theme-config) {
-  $theme: utils.using-theme($theme_config);
-
   .wlcm-table {
     width: 100%;
     display: table;

package/styles/core/_all-theme.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use 'utils' as utils;
+@use 'tokens' as tokens;
 @use '../components/common/index' as common;
 @use '../components/forms/index' as forms;
 @use '../components/button/index' as button;
@@ -11,7 +10,13 @@
 @use '../components/loader/index' as loader;
 @use '../components/table/index' as table;
 
-@mixin all-component-themes($theme-config) {
+@mixin theme($theme-config) {
+  // Emit the `--wlcm-*` token contract; `emit-tokens` owns its own selectors
+  // (`:root` for light, plus `prefers-color-scheme` / `[data-theme]` blocks for
+  // dark) so component styles below can consume the `--wlcm-*` / `--mat-sys-*`
+  // `var()` references directly under either scheme.
+  @include tokens.emit-tokens($theme-config);
+
   @include common.theme($theme-config);
   @include forms.theme($theme-config);
   @include button.theme($theme-config);