@messaia/cdk 18.2.3 → 19.0.0-rc02

package/lib/common/styles/core/_sidenav.scss

@@ -1,19 +1,21 @@
-@import '../variables';
+@use '../variables' as var;
 
 @mixin vd-sidenav-utilities() {
     mat-sidenav {
-        width: $navigation-drawer-width;
-        /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+        width: var.$navigation-drawer-width;
+
         .mat-list-item-content {
-            mat-icon {            
-                @include rtl(margin-left, 0px,$margin);
-                @include rtl(margin-right, $margin, 0px);
+            mat-icon {
                 color: #737373;
                 fill: #737373;
             }
         }
+
         [mat-list-item] {
-            &,&:active,&:focus {
+
+            &,
+            &:active,
+            &:focus {
                 outline: none;
             }
         }

package/lib/common/styles/core/_structure.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@use '../variables' as var;
 
 @mixin vd-structure-utilities() {
 
@@ -23,15 +23,6 @@
     padding: 10px;
   }
 
-  button.md-no-style {
-    font-weight: normal;
-    background-color: inherit;
-    @include rtl(text-align, left, right);
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
   select,
   button,
   textarea,
@@ -45,6 +36,7 @@
   html input[type="button"],
   button {
     cursor: pointer;
+    appearance: button;
     -webkit-appearance: button;
 
     &[disabled] {
@@ -59,6 +51,7 @@
 
   input {
     &[type="search"] {
+      appearance: textfield;
       -webkit-appearance: textfield;
       box-sizing: content-box;
       -webkit-box-sizing: content-box;
@@ -119,7 +112,7 @@
     margin: 8px;
   }
 
-  @media (min-width: $layout-breakpoint-sm) {
+  @media (min-width: var.$layout-breakpoint-sm) {
 
     .md-padding,
     .mat-padding {

package/lib/common/styles/font/_font.scss

@@ -1,4 +1,4 @@
-@import 'material-symbols';
+@use 'material-symbols';
 
 @mixin vd-material-icons() {
     .material-icons {
@@ -40,52 +40,44 @@
     }
 
     // Rules for sizing the icon.
-    .material-icons.md-18,
     .material-icons.mat-18 {
         font-size: 18px;
         height: 18px;
-        width: 18px
+        width: 18px;
     }
 
-    .material-icons.md-24,
     .material-icons.mat-24 {
         font-size: 24px;
         height: 24px;
-        width: 24px
+        width: 24px;
     }
 
-    .material-icons.md-36,
     .material-icons.mat-36 {
         font-size: 36px;
         height: 36px;
-        width: 36px
+        width: 36px;
     }
 
-    .material-icons.md-48,
     .material-icons.mat-48 {
         font-size: 48px;
         height: 48px;
-        width: 48px
+        width: 48px;
     }
 
     // Rules for using icons as black on a light background.
-    .material-icons.md-dark,
     .material-icons.mat-dark {
         color: rgba(0, 0, 0, 0.54);
     }
 
-    .material-icons.md-dark.md-inactive,
     .material-icons.mat-dark.mat-inactive {
         color: rgba(0, 0, 0, 0.26);
     }
 
     // Rules for using icons as white on a dark background.
-    .material-icons.md-light,
     .material-icons.mat-light {
         color: rgba(255, 255, 255, 1);
     }
 
-    .material-icons.md-light.md-inactive,
     .material-icons.mat-light.mat-inactive {
         color: rgba(255, 255, 255, 0.3);
     }

package/lib/common/styles/m2/_common-theme.scss

@@ -1,15 +1,15 @@
-// @use '~@angular/material' as mat;
-@import '../theme-functions';
+@use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin vd-common-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-    $primary-color: mat-color($primary);
-    $accent-color: mat-color($accent);
-    $warn-color: mat-color($warn);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, accent);
+    $warn: map.get($theme, warn);
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+    $primary-color: mat.m2-get-color-from-palette($primary);
+    $accent-color: mat.m2-get-color-from-palette($accent);
+    $warn-color: mat.m2-get-color-from-palette($warn);
     $is-dark: map.get($theme, is-dark);
 
     .mdc-list-item,

package/lib/common/styles/m2/platform.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+
+@use "../colors/colors" as colors;
+@use "../font/font" as font;
+@use "../core/core" as core;
+@use "../layout" as layout;
+@use "../utilities/utilities" as utilities;
+
+@include core.vd-core();
+@include font.vd-material-icons();
+@include layout.vd-layout();
+@include colors.vd-colors();
+@include utilities.vd-utilities();

package/lib/common/styles/m3/_common-theme.scss

@@ -1,26 +1,31 @@
-// @use '~@angular/material' as mat;
-@import '../theme-functions';
+@use '@angular/material' as mat;
+@use 'sass:map';
 
 @mixin vd-common-theme($theme) {
-    $warn: map-get($theme, warn);
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, secondary);
+    $warn: map.get($theme, error);
+    $neutral: map.get($theme, neutral);
+    $background: map.get($theme, background);
+    $primary-color: mat.get-theme-color($theme, primary);
+    $accent-color: mat.get-theme-color($theme, secondary);
+    $warn-color: mat.get-theme-color($theme, error);
     $is-dark: map.get($theme, is-dark);
 
     .mdc-list-item,
     .mat-list-item-content {
         mat-icon {
-            // color: mat.get-color-from-palette($foreground, icon);
+            // color: mat.get-theme-color($theme, neutral, icon);
 
             &[matListAvatar] {
-                // background-color: mat.m2-get-color-from-palette($background, hover);
+                // background-color: mat.get-theme-color($theme, neutral, hover);
             }
         }
     }
 
     .mat-list-text {
         p {
-            // color: mat.m2-get-color-from-palette($foreground, disabled);
+            // color: mat.get-theme-color($theme, neutral, disabled);
         }
     }
 
@@ -28,7 +33,7 @@
         opacity: if($is-dark, 0.8, 1);
 
         .mat-mdc-list-item-icon {
-            // color: mat.m2-get-color-from-palette($foreground, icon);
+            // color: mat.get-theme-color($theme, neutral, icon);
         }
 
         .mdc-list-item__content {
@@ -41,7 +46,19 @@
 
     .mat-autocomplete-panel {
         .mat-mdc-paginator {
-            // background-color: mat.m2-get-color-from-palette($background, app-bar);
+            // background-color: mat.get-theme-color($theme, background, app-bar);
         }
     }
+
+    .bgc-primary {
+        background-color: $primary-color;
+    }
+
+    .bgc-accent {
+        background-color: $accent-color;
+    }
+
+    .bgc-warn {
+        background-color: $warn-color;
+    }
 }

package/lib/common/styles/m3/platform.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+
+@use "../colors/colors" as colors;
+@use "../font/font" as font;
+@use "../core/core" as core;
+@use "../layout" as layout;
+@use "../utilities/utilities" as utilities;
+
+@include core.vd-core();
+@include font.vd-material-icons();
+@include layout.vd-layout();
+@include colors.vd-colors();
+@include utilities.vd-utilities();