material 0.9.27 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.27",
+  "version": "1.0.0",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/skin/material/_variables.scss

@@ -0,0 +1,30 @@
+// Material Design color variables with defaults
+// These can be overridden by consumers using @use "variables" with (...)
+
+// Background colors
+$background-color: #ffffff !default;
+$background-color-dark: #202124 !default;
+
+// Surface colors
+$surface-color: #ffffff !default;
+$surface-color-dark: #333333 !default;
+
+// Default colors
+$default-color: rgba(0, 0, 0, 1) !default;
+$default-color-dark: rgba(255, 255, 255, 1) !default;
+$default-color-text: rgba(0, 0, 0, 0.87) !default;
+$default-color-text-dark: rgba(255, 255, 255, 0.87) !default;
+$default-color-button: rgba(0, 0, 0, 0.47) !default;
+$default-color-icon: rgba(0, 0, 0, 0.67) !default;
+
+// Primary colors
+$primary-color: #6200ee !default;
+$primary-color-dark: #bb86fc !default;
+$primary-color-text: rgba(255, 255, 255, 0.87) !default;
+$primary-color-text-dark: rgba(255, 255, 255, 0.87) !default;
+
+// Secondary colors
+$secondary-color: #03dac6 !default;
+$secondary-color-dark: #03dac6 !default;
+$secondary-color-text: rgba(0, 0, 0, 0.87) !default;
+$secondary-color-text-dark: rgba(0, 0, 0, 0.87) !default;

package/src/skin/material/button/action.scss

@@ -1,8 +1,10 @@
+@use "../variables" as *;
+@use "sass:color";
 
 // type action
 .button.type-action {
   min-width: 36px;
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
   box-shadow: none;
   border-radius: 50%;
   padding: 6px;
@@ -13,11 +15,11 @@
     margin-left: 0;
     svg {
       fill: $default-color-text;
-
-// styles
     }
   }
 }
+
+// styles
 .button.type-action {
   &.style-dense,
   &.style-compact {
@@ -32,28 +34,18 @@
         width: 20px;
         height: 20px;
         viewbox: 0 0 20 20;
-
-
-// states
       }
     }
   }
 }
-.button.type-action {
-  &:hover {
-    //background-color: #E0E0E0;
-  }
-
-  &:focus {
-    //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
-  }
 
+// states
+.button.type-action {
   .material-ripple {
-    //background-color: rgba(255, 255, 255, 1)
-
-// color
   }
 }
+
+// color
 .button.type-action {
   &.primary-color {
     background-color: $primary-color;
@@ -64,7 +56,7 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: 10%);
       color: $primary-color-text;
     }
   }
@@ -77,18 +69,15 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
       color: $secondary-color-text;
-
-
-// theme
     }
   }
 }
+
+// theme
 .dark-mode .button.type-action,
 .button.type-action.dark-mode {
-
-  //background-color: rgba(255, 255, 255, 0.95)
   color: $primary-color-text-dark;
 
   &.primary-color {

package/src/skin/material/button/button.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .button {
   display: flex;
   -webkit-font-smoothing: antialiased;
@@ -64,20 +66,19 @@
     }
     .button-label {
       order: 1;
-
-// states
     }
   }
 }
+
+// states
 .button {
   &.is-disabled {
     pointer-events: none;
-    opacity: .3;
+    opacity: 0.3;
   }
 
   &:focus {
-    //transition-delay: .2s
-    transition-duration: .3s;
+    transition-duration: 0.3s;
     background-color: rgba($default-color-text, 0.05);
     &:hover {
       background-color: rgba($default-color-text, 0.05);
@@ -85,24 +86,21 @@
   }
 
   &:active {
-    transition-duration: .2s;
-    &:focus {
-      //transition-delay: .2s
-    }
+    transition-duration: 0.2s;
   }
 
   &:hover {
-    transition-duration: .2s;
+    transition-duration: 0.2s;
     background-color: rgba($default-color-text, 0.03);
   }
 
   &:disabled {
     pointer-events: none;
-    opacity: .3;
-
-// styles
+    opacity: 0.3;
   }
 }
+
+// styles
 .button {
   &.style-compact {
     > .button-label {
@@ -117,22 +115,22 @@
       font-size: 0.8125rem;
       padding-top: 2px;
       padding-bottom: 2px;
-
-// color
     }
   }
 }
+
+// color
 .button {
   &.primary-color {
     color: $primary-color;
     &:focus {
-      background-color: rgba($primary-color, .1);
+      background-color: rgba($primary-color, 0.1);
       &:hover {
-        background-color: rgba($primary-color, .1);
+        background-color: rgba($primary-color, 0.1);
       }
     }
     &:hover {
-      background-color: rgba($primary-color, .05);
+      background-color: rgba($primary-color, 0.05);
     }
 
     .button-icon {
@@ -142,7 +140,7 @@
     }
 
     .material-ripple {
-      background-color: rgba($primary-color, .1);
+      background-color: rgba($primary-color, 0.1);
     }
   }
 
@@ -154,21 +152,21 @@
       }
     }
     .material-ripple {
-      background-color: rgba($secondary-color, .1);
+      background-color: rgba($secondary-color, 0.1);
     }
     &:focus {
-      background-color: rgba($secondary-color, .10);
+      background-color: rgba($secondary-color, 0.1);
       &:hover {
-        background-color: rgba($secondary-color, .10);
+        background-color: rgba($secondary-color, 0.1);
       }
     }
     &:hover {
-      background-color: rgba($secondary-color, .05);
-
-// theme
+      background-color: rgba($secondary-color, 0.05);
     }
   }
 }
+
+// theme
 .dark-mode .button,
 .button.dark-mode {
   color: $default-color-text-dark;
@@ -178,21 +176,14 @@
     }
   }
   .material-ripple {
-    background-color: rgba($default-color-text-dark, .1);
-  }
-  &:focus {
-    //background-color: rgba($default-color-text-dark, .1)
-    &:hover {
-      //background-color: rgba($default-color-text-dark, .1)
-    }
+    background-color: rgba($default-color-text-dark, 0.1);
   }
   &:hover {
-    background-color: rgba($default-color-text-dark, .05);
+    background-color: rgba($default-color-text-dark, 0.05);
+  }
 
   // primary color
-  }
   &.primary-color {
-    //background-color: $primary-color;
     color: $primary-color-dark;
     .button-icon {
       svg {
@@ -200,20 +191,20 @@
       }
     }
     .material-ripple {
-      background-color: rgba($primary-color-dark, .3);
+      background-color: rgba($primary-color-dark, 0.3);
     }
     &:focus {
-      background-color: rgba($primary-color-dark, .2);
+      background-color: rgba($primary-color-dark, 0.2);
       &:hover {
-        background-color: rgba($primary-color-dark, .2);
+        background-color: rgba($primary-color-dark, 0.2);
       }
     }
     &:hover {
-      background-color: rgba($primary-color-dark, .1);
-
-  // secondary color
+      background-color: rgba($primary-color-dark, 0.1);
     }
   }
+
+  // secondary color
   &.secondary-color {
     color: $secondary-color-dark;
     .button-icon {
@@ -222,18 +213,18 @@
       }
     }
     .material-ripple {
-      background-color: rgba($secondary-color-dark, .3);
+      background-color: rgba($secondary-color-dark, 0.3);
     }
 
     &:focus {
-      background-color: rgba($secondary-color-dark, .2);
+      background-color: rgba($secondary-color-dark, 0.2);
       &:hover {
-        background-color: rgba($secondary-color-dark, .2);
+        background-color: rgba($secondary-color-dark, 0.2);
       }
     }
 
     &:hover {
-      background-color: rgba($secondary-color-dark, .1);
+      background-color: rgba($secondary-color-dark, 0.1);
     }
   }
 }

package/src/skin/material/button/floating.scss

@@ -1,12 +1,17 @@
+@use "../variables" as *;
+@use "sass:color";
 
 // type floating
 .button.type-floating {
   min-width: 56px;
   min-height: 56px;
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
   border-radius: 28px;
   padding: 6px;
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   .button-label {
     display: none;
   }
@@ -20,12 +25,12 @@
     }
   }
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(0, 0, 0, 1);
-
-// states
   }
 }
+
+// states
 .button.type-floating {
   background-color: rgba(0, 0, 0, 0.05);
   &:focus {
@@ -38,11 +43,14 @@
     background-color: rgba(0, 0, 0, 0.1);
   }
   &:active {
-    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+      0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+      0px 5px 22px 4px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-floating {
   &.primary-color {
     background-color: $primary-color;
@@ -53,18 +61,18 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
 
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
 
@@ -77,26 +85,26 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
-// theme
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }
+
+// theme
 .dark-mode .button.type-floating,
 .button.type-floating.dark-mode {
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(255, 255, 255, 1);
   }
   background-color: rgba(255, 255, 255, 0.1);
@@ -108,7 +116,6 @@
   }
   &:hover {
     background-color: rgba(255, 255, 255, 0.15);
-  //background-color: rgba(255, 255, 255, 0.95)
   }
   color: $primary-color-text-dark;
   .button-icon {
@@ -125,13 +132,13 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
 
@@ -144,13 +151,13 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }

package/src/skin/material/button/raised.scss

@@ -1,16 +1,21 @@
+@use "../variables" as *;
+@use "sass:color";
 
 // type raised
 .button.type-raised {
   min-width: 36px;
-  transition: box-shadow .2s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.2s;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(0, 0, 0, 1);
-
-// states
   }
 }
+
+// states
 .button.type-raised {
   background-color: rgba(0, 0, 0, 0.05);
   &:focus {
@@ -23,11 +28,14 @@
     background-color: rgba(0, 0, 0, 0.1);
   }
   &:active {
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 4px 4px -3px rgba(0, 0, 0, 0.2),
+      0px 6px 8px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-raised {
   &.primary-color {
     background-color: $primary-color;
@@ -38,18 +46,18 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
 
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
 
@@ -62,26 +70,26 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
-// theme
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }
+
+// theme
 .dark-mode .button.type-raised,
 .button.type-raised.dark-mode {
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(255, 255, 255, 1);
   }
   background-color: rgba(255, 255, 255, 0.1);
@@ -93,7 +101,6 @@
   }
   &:hover {
     background-color: rgba(255, 255, 255, 0.15);
-  //background-color: rgba(255, 255, 255, 0.95)
   }
   color: $primary-color-text-dark;
   .button-icon {
@@ -110,13 +117,13 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
 
@@ -129,13 +136,13 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }

package/src/skin/material/button/stroked.scss

@@ -1,31 +1,36 @@
+@use "../variables" as *;
+@use "sass:color";
 
 // type stroked
 .button.type-stroked {
   min-width: 36px;
-  transition: box-shadow .2s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.2s;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   .material-ripple {
-    background-color: rgba(255, 255, 255, .3);
-
-// states
+    background-color: rgba(255, 255, 255, 0.3);
   }
 }
+
+// states
 .button.type-stroked {
-  &:hover {
-    //background-color: #E0E0E0;
-  }
   &:focus {
-    background-color: darken(rgba(255, 255, 255, 0.95), 5%);
+    background-color: color.adjust(rgba(255, 255, 255, 0.95), $lightness: -5%);
     &:active {
       background-color: transparent;
     }
   }
   &:active {
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 4px 4px -3px rgba(0, 0, 0, 0.2),
+      0px 6px 8px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-stroked {
   &.primary-color {
     background-color: $primary-color;
@@ -36,7 +41,7 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: 10%);
       color: $primary-color-text;
       &:active {
         background-color: $primary-color;
@@ -54,20 +59,18 @@
     }
 
     &:focus {
-      background-color: lighten($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
       color: $secondary-color-text;
       &:active {
         background-color: $secondary-color;
-
-// theme
       }
     }
   }
 }
+
+// theme
 .dark-mode .button.type-stroked,
 .button.type-stroked.dark-mode {
-
-  //background-color: rgba(255, 255, 255, 0.95)
   color: $primary-color-text-dark;
   .button-icon {
     svg {

package/src/skin/material/component/component.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .material-component {
   background-color: $background-color;
 }