@materializecss/materialize 2.0.4 → 2.1.1

package/sass/components/_chips.scss

@@ -3,7 +3,8 @@
   --font-size-icon: 18px;
   --padding: 8px;
 
-  background-color: $chip-bg-color;
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
 
   display: inline-flex;
   white-space: nowrap;
@@ -17,7 +18,6 @@
   
   font-size: var(--font-size);
   font-weight: 500;  
-  color: $chip-font-color;
   
   border-radius: 8px;
 
@@ -27,8 +27,8 @@
 
   &:focus {
     outline: none;
-    background-color: $chip-selected-color;
-    color: $chip-selected-font-color;
+    background-color: var(--md-sys-color-primary);
+    color:  var(--md-sys-color-on-primary);
   }
 }
 
@@ -75,9 +75,9 @@
   flex-wrap: wrap;
 
   border: none;
-  border-bottom: 1px solid $chip-border-color;
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
   box-shadow: none;
-  margin: $input-margin;
+  margin: 0 0 8px 0;
 
   padding: 4px;
   // min-height: 45px;
@@ -86,8 +86,8 @@
   transition: all .3s;
 
   &.focus {
-    border-bottom: 1px solid $chip-selected-color;
-    box-shadow: 0 1px 0 0 $chip-selected-color;
+    border-bottom: 1px solid var(--md-sys-color-primary);
+    box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
   }
 
   &:hover {
@@ -97,12 +97,11 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: $input-color;
+    color: var(--md-sys-color-on-background);
     display: inline-block;
-    font-size: $input-font-size;
+    font-size: 16px;
 
     // height: 32px;
-    // height: $input-height;
     // line-height: 32px;
     height: 32px;
 

package/sass/components/_collapsible.scss

@@ -2,9 +2,9 @@
   padding-left: 0;
   list-style-type: none;
 
-  border-top: 1px solid $collapsible-border-color;
-  border-right: 1px solid $collapsible-border-color;
-  border-left: 1px solid $collapsible-border-color;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
   margin: $element-top-margin 0 $element-bottom-margin 0;
   @extend .z-depth-1;
 }
@@ -19,8 +19,7 @@
   -webkit-tap-highlight-color: transparent;
   line-height: 1.5;
   padding: 1rem;
-  border-bottom: 1px solid $collapsible-border-color;
-  background-color: $collapsible-bg-color;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
   i {
     width: 2rem;
@@ -43,16 +42,15 @@
 
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: $surface-focus-color-opaque;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 .collapsible-body {
   max-height: 0;
-  border-bottom: 1px solid $collapsible-border-color;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
   box-sizing: border-box;
   padding: 0 2rem;
   overflow: hidden;
-  background-color: $collapsible-bg-color;
 }
 
 // Popout Collapsible

package/sass/components/_collection.scss

@@ -3,17 +3,17 @@
   padding-left: 0;
   list-style-type: none;
   margin: $element-top-margin 0 $element-bottom-margin 0;
-  border: 1px solid $collection-border-color;
-  border-radius: $collection-border-radius;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
   overflow: hidden;
   position: relative;
 
   .collection-item {
-    background-color: $collection-bg-color;
-    line-height: $collection-line-height;
+    background-color: transparent;
+    line-height: 1.5rem;
     padding: 10px 20px;
     margin: 0;
-    border-bottom: 1px solid $collection-border-color;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
     // Avatar Collection
     &.avatar {
@@ -36,8 +36,8 @@
       i.circle {
         font-size: 18px;
         line-height: 42px;
-        color: $collection-avatar-circle-icon-color;
-        background-color: $collection-avatar-circle-bg-color;
+        color: #fff;
+        background-color: var(--md-sys-color-shadow-light);
         text-align: center;
       }
 
@@ -64,11 +64,11 @@
     }
 
     &.active {
-      background-color: $collection-active-bg-color;
-      color: $collection-active-color;
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
 
       .secondary-content {
-        color: $font-on-primary-color-main;
+        color:  var(--md-sys-color-on-primary);
       }
     }
   }
@@ -76,19 +76,19 @@
   a.collection-item {
     display: block;
     transition: .25s;
-    color: $collection-link-color;
+    color: var(--md-sys-color-primary);
 
     &:not(.active) {
       &:hover {
-        background-color: $collection-hover-bg-color;
+        background-color: rgba(0, 0, 0, 0.04);
       }
     }
   }
 
   &.with-header {
     .collection-header {
-      background-color: $collection-bg-color;
-      border-bottom: 1px solid $collection-border-color;
+      background-color: transparent;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
       padding: 10px 20px;
     }
 
@@ -106,7 +106,7 @@
 // Made less specific to allow easier overriding
 .secondary-content {
   float: right;
-  color: $primary-color;
+  color: var(--md-sys-color-primary);
 }
 
 .collapsible .collection {

package/sass/components/_datepicker.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   padding: 0;
-  background-color: $surface-color;
+  background-color: var(--md-sys-color-surface);
 }
 
 .datepicker-controls {
@@ -54,7 +54,7 @@
 
   .month-prev > svg,
   .month-next > svg {
-    fill: $button-flat-color;
+    fill: var(--md-sys-color-on-surface-variant);
   }
 }
 
@@ -69,8 +69,8 @@
 /* Date Display */
 .datepicker-date-display {
   flex: 1 auto;
-  background-color: $primary-color;
-  color: $font-on-primary-color-main;
+  background-color: var(--md-sys-color-primary);
+  color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
   font-weight: 500;
 
@@ -78,7 +78,7 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color: $datepicker-year;
+    color:  var(--md-sys-color-on-primary);
   }
 
   .date-text {
@@ -115,24 +115,24 @@
 
   abbr {
     text-decoration: none;
-    color: $datepicker-calendar-header-color;
+    color: var(--md-sys-color-on-surface-variant);
   }
 
   td {
-    color: $datepicker-day-font-color;
+    color: var(--md-sys-color-on-background);
 
     &.is-today {
-      color: $primary-color;
+      color: var(--md-sys-color-primary);
     }
 
     &.is-selected {
-      background-color: $primary-color;
-      color: $font-on-primary-color-main;
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
     }
 
     &.is-outside-current-month,
     &.is-disabled {
-      color: $datepicker-day-font-color-disabled;
+      color: var(--md-sys-color-on-surface);
       pointer-events: none;
     }
 
@@ -153,11 +153,11 @@
   color: inherit;
 
   &:hover {
-    background-color: $datepicker-day-hover;
+    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
   }
 
   &:focus {
-    background-color: $datepicker-day-focus;
+    background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
   }
 }
 
@@ -175,12 +175,12 @@
 .datepicker-clear,
 .datepicker-today,
 .datepicker-done {
-  color: $primary-color;
+  color: var(--md-sys-color-primary);
   padding: 0 1rem;
 }
 
 .datepicker-clear {
-  color: $error-color;
+  color: var(--md-sys-color-error);
 }
 
 

package/sass/components/_dropdown.scss

@@ -1,13 +1,14 @@
+[popover] {
+  outline: none;
+  padding: 0;
+  border: none;
+}
+
 .dropdown-content {
   padding-left: 0;
   list-style-type: none;
-
-  &:focus {
-    outline: 0;
-  }
-
   @extend .z-depth-1;
-  background-color: $dropdown-bg-color;
+  background-color: var(--md-sys-color-surface);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -18,36 +19,25 @@
   top: 0;
   z-index: 9999; // TODO: Check if this doesn't break other things
   transform-origin: 0 0;
-
-
+  user-select: none;
+  
   li {
-    &:hover, &.active {
-      background-color: $dropdown-hover-bg-color;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
     &.divider {
       min-height: 0;
       height: 1px;
     }
-
     & > a, & > span {
       font-size: 16px;
-      color: $dropdown-color;
+      color: var(--md-sys-color-primary);
       display: block;
       line-height: 22px;
       padding: (($dropdown-item-height - 22) * 0.5) 16px;
     }
-
     & > span > label {
       top: 1px;
       left: 0;
       height: 18px;
     }
-
     // Icon alignment override
     & > a > i {
       height: inherit;
@@ -56,21 +46,22 @@
       margin: 0 24px 0 0;
       width: 24px;
     }
-
-
     clear: both;
-    color: $text-color;
+    color: var(--md-sys-color-on-background);
     cursor: pointer;
     min-height: $dropdown-item-height;
     line-height: 1.5rem;
     width: 100%;
     text-align: left;
   }
+  li:not(.disabled):hover, li.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
+  }
 }
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: $dropdown-focus-bg-color;
+    background-color: rgba(0, 0, 0, 0.12);
   }
 }