@materializecss/materialize 2.0.4 → 2.1.1

package/sass/components/forms/_select.scss

@@ -1,26 +1,18 @@
-/* Select Field
-   ========================================================================== */
-
 select.browser-default {
   opacity: 1;
-  color: $select-input-color;
+  color: var(--md-sys-color-on-background);
 }
 
 select {
   opacity: 0;
-  background-color: $select-background;
+  background-color: var(--md-sys-color-surface);
   width: 100%;
-  padding: $select-padding;
-  border: $select-border;
-  border-radius: $select-radius;
-  height: $input-height;
+  padding: 5px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  height: 3rem;
 }
 
-// .select-label {
-//   position: absolute;
-// }
-
-
 .select-wrapper {
   /*
   &.valid .helper-text[data-success],
@@ -57,31 +49,29 @@ select {
   }
   */
 
-
-
   position: relative;
 
   /*
   input.select-dropdown {    
     &:focus {
-      border-bottom: 1px solid $input-focus-color;
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
     position: relative;
     cursor: pointer;
     background-color: transparent;
     border: none;
-    border-bottom: $input-border;
+    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
     outline: none;
-    height: $input-height;
-    line-height: $input-height;
+    height: 3rem;
+    line-height: 3rem;
     width: 100%;
-    font-size: $input-font-size;
-    margin: $input-margin;
+    font-size: 16px;
+    margin: 0 0 8px 0;
     padding: 0;
     display: block;
     user-select:none;
     z-index: 1;
-    color: $select-input-color;
+    color: var(--md-sys-color-on-background);
   }
   */
 
@@ -92,17 +82,9 @@ select {
     bottom: 0;
     margin: auto 0;
     z-index: 0;
-    fill: $select-input-color;
+    fill: var(--md-sys-color-on-background);
   }
 
-  /*
-  & + label {
-    position: absolute;
-    top: -26px;
-    font-size: $label-font-size;
-  }
-  */
-
   // Hide select with overflow hidden instead of using display none
   // (this prevents form validation errors with hidden form elements)
   .hide-select {
@@ -115,54 +97,55 @@ select {
   }
 }
 
-// Disabled styles
 select:disabled {
-  color: $input-disabled-color;
+  color: var(--md-sys-color-on-surface);
 }
 
 .select-wrapper.disabled {
   + label {
-    color: $input-disabled-color;
+    color: var(--md-sys-color-on-surface);
   }
   .caret {
-    fill: $input-disabled-color;
+    fill: var(--md-sys-color-on-surface);
   }
 }
 
 .select-wrapper input.select-dropdown:disabled {
-  color: $input-disabled-color;
+  color: var(--md-sys-color-on-surface);
   cursor: default;
   user-select: none;
 }
 
 .select-wrapper i {
-  color: $select-disabled-color;
+  color: var(--md-sys-color-on-surface);
 }
 
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: $select-disabled-color;
-  background-color: transparent;
+  color: var(--md-sys-color-on-surface);
+  //background-color: transparent;
 }
 
+/*
 body.keyboard-focused {
   .select-dropdown.dropdown-content li:focus {
-    background-color: $select-option-focus;
+    //background-color: $select-option-focus;
   }
 }
 
 .select-dropdown.dropdown-content {
   li {
     &:hover:not(.disabled) {
-      background-color: $select-option-hover;
+      //background-color: $select-option-hover;
     }
 
     &.selected:not(.disabled) {
-      background-color: $select-option-selected;
+      //background-color: $select-option-selected;
     }
   }
 }
+*/
 
 /*
 // Prefix Icons
@@ -193,17 +176,20 @@ body.keyboard-focused {
 
 // Optgroup styles
 .select-dropdown li.optgroup {
-  border-top: 1px solid $dropdown-hover-bg-color;
-
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
   &.selected > span {
-    color: $font-color-main;
+    color: var(--md-sys-color-on-background);
   }
-
   & > span {
-    color: $font-color-medium;
+    color: var(--md-sys-color-on-surface-variant);
   }
-
   & ~ li.optgroup-option {
     padding-left: 1rem;
   }
 }
+
+/*
+.select-dropdown .selected {
+  color: red;
+}
+*/

package/sass/components/forms/_switches.scss

@@ -1,6 +1,3 @@
-/* Switch
-   ========================================================================== */
-
 .switch {
   --track-height: 32px;
   --track-width: 52px;
@@ -30,8 +27,8 @@
   // CHECKED
   // Track
   &:checked + .lever{
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
+    background-color: var(--md-sys-color-primary);
+    border-color:  var(--md-sys-color-primary);
   }
   // Dot
   &:checked + .lever {
@@ -57,10 +54,10 @@
   border-width: 2px;
   border-color: var(--md-sys-color-outline);
 
-  //background-color: $switch-track-unchecked-bg;
-  @extend .surface-variant;
+  //@extend .surface-variant;
+  background-color: var(--md-sys-color-surface-variant);
 
-  border-radius: $switch-radius;
+  border-radius: 15px;
   margin-right: 10px;
   transition: background 0.3s ease;
   vertical-align: middle;
@@ -99,22 +96,22 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
 }
 
 input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
-  background-color: $switch-reaction-checked-hover-color;
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 
 // Switch active style
 input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
 input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: $switch-reaction-checked-focus-color;
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
-  background-color: $switch-reaction-unchecked-hover-color;
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:active:before,
 input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: $switch-reaction-unchecked-focus-color;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 // Disabled Styles

package/sass/components/theme.module.scss

@@ -0,0 +1,140 @@
+/* System Defaults */
+:root, :host {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root, :host {
+    color-scheme: dark;
+    --md-sys-color-primary: var(--md-sys-color-primary-dark);
+    --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+    --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+    --md-sys-color-error: var(--md-sys-color-error-dark);
+    --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+    --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+    --md-sys-color-outline: var(--md-sys-color-outline-dark);
+    --md-sys-color-background: var(--md-sys-color-background-dark);
+    --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+    --md-sys-color-surface: var(--md-sys-color-surface-dark);
+    --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+    --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+    --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+  }
+}
+
+/* ===================================================================== Themes */
+
+:root[theme='light'] {
+  color-scheme: light;
+  --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+  --md-sys-color-error: var(--md-sys-color-error-light);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+  --md-sys-color-outline: var(--md-sys-color-outline-light);
+  --md-sys-color-background: var(--md-sys-color-background-light);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+  --md-sys-color-surface: var(--md-sys-color-surface-light);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}
+ 
+:root[theme='dark'] {
+  color-scheme: dark;
+  --md-sys-color-primary: var(--md-sys-color-primary-dark);
+  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+  --md-sys-color-error: var(--md-sys-color-error-dark);
+  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+  --md-sys-color-outline: var(--md-sys-color-outline-dark);
+  --md-sys-color-background: var(--md-sys-color-background-dark);
+  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+  --md-sys-color-surface: var(--md-sys-color-surface-dark);
+  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+}

package/sass/materialize.scss

@@ -1,18 +1,20 @@
 @charset "UTF-8";
+
 @import "components/tokens.module";
+@import "components/theme.module";
+//@import "components/_theme_variables";
 @import "components/colors.module";
 @import "components/typography.module";
-@import "components/theme.light.module";
-@import "components/theme.dark.module";
-@import "components/_theme_variables";
 
 // Color
 @import "components/color-variables";
 @import "components/color-classes";
 // Variables;
 @import "components/variables";
+
 // Reset
 @import "components/normalize";
+
 // components
 @import "components/global";
 @import "components/collection";
@@ -28,6 +30,7 @@
 @import "components/tooltip";
 @import "components/buttons";
 @import "components/dropdown";
+
 @import "components/modal";
 @import "components/collapsible";
 @import "components/chips";