Add themes with rgba colors

src/components/mdAvatar/mdAvatar.theme

@@ -3,30 +3,30 @@
   &.md-avatar {
     &.md-primary {
       &.md-avatar-icon {
-        background-color: PRIMARY-COLOR;
+        background-color: #{'PRIMARY-COLOR'};
 
         .md-icon {
-          color: PRIMARY-CONTRAST;
+          color: #{'PRIMARY-CONTRAST'};
         }
       }
     }
 
     &.md-accent {
       &.md-avatar-icon {
-        background-color: ACCENT-COLOR;
+        background-color: #{'ACCENT-COLOR'};
 
         .md-icon {
-          color: ACCENT-CONTRAST;
+          color: #{'ACCENT-CONTRAST'};
         }
       }
     }
 
     &.md-warn {
       &.md-avatar-icon {
-        background-color: WARN-COLOR;
+        background-color: #{'WARN-COLOR'};
 
         .md-icon {
-          color: WARN-CONTRAST;
+          color: #{'WARN-CONTRAST'};
         }
       }
     }

src/components/mdBottomBar/mdBottomBar.theme

@@ -3,22 +3,22 @@
   &.md-bottom-bar {
     &:not(.md-shift) {
       .md-active {
-        color: PRIMARY-COLOR;
+        color: #{'PRIMARY-COLOR'};
       }
     }
 
     &.md-shift {
-      background-color: PRIMARY-COLOR;
-      color: PRIMARY-CONTRAST;
+      background-color: #{'PRIMARY-COLOR'};
+      color: #{'PRIMARY-CONTRAST'};
 
       &.md-accent {
-        background-color: ACCENT-COLOR;
-        color: ACCENT-CONTRAST;
+        background-color: #{'ACCENT-COLOR'};
+        color: #{'ACCENT-CONTRAST'};
       }
 
       &.md-warn {
-        background-color: WARN-COLOR;
-        color: WARN-CONTRAST;
+        background-color: #{'WARN-COLOR'};
+        color: #{'WARN-CONTRAST'};
       }
     }
   }

src/components/mdButton/mdButton.theme

@@ -3,93 +3,113 @@
   &.md-button:not([disabled]) {
     &.md-raised {
       &:not(.md-icon-button) {
-        color: BACKGROUND-COLOR-900;
-        background-color: BACKGROUND-COLOR-50;
+        color: #{'BACKGROUND-COLOR-900'};
+        background-color: #{'BACKGROUND-COLOR-50'};
 
         &:hover {
-          background-color: BACKGROUND-COLOR-200;
+          background-color: #{'BACKGROUND-COLOR-200'};
         }
       }
 
       &.md-icon-button:not(.md-raised) {
-        color: BACKGROUND-COLOR;
+        color: #{'BACKGROUND-COLOR'};
       }
     }
 
     &.md-fab {
-      color: ACCENT-CONTRAST;
-      background-color: ACCENT-COLOR;
+      color: #{'ACCENT-CONTRAST'};
+      background-color: #{'ACCENT-COLOR'};
 
       &:hover {
-        background-color: ACCENT-COLOR-A700;
+        background-color: #{'ACCENT-COLOR-A700'};
       }
 
       &.md-fab-clean {
-        color: BACKGROUND-COLOR-900;
-        background-color: BACKGROUND-COLOR-50;
+        color: #{'BACKGROUND-COLOR-900'};
+        background-color: #{'BACKGROUND-COLOR-50'};
 
         &:hover {
-          background-color: BACKGROUND-COLOR-200;
+          background-color: #{'BACKGROUND-COLOR-200'};
         }
       }
     }
 
     &.md-primary {
       &:not(.md-icon-button) {
-        color: PRIMARY-COLOR;
+        color: #{'PRIMARY-COLOR'};
       }
 
       &.md-raised,
       &.md-fab {
-        background-color: PRIMARY-COLOR;
-        color: PRIMARY-CONTRAST;
+        background-color: #{'PRIMARY-COLOR'};
+        color: #{'PRIMARY-CONTRAST'};
 
         &:hover {
-          background-color: PRIMARY-COLOR-600;
+          background-color: #{'PRIMARY-COLOR-600'};
         }
       }
 
       &.md-icon-button:not(.md-raised) {
-        color: PRIMARY-COLOR;
+        color: #{'PRIMARY-COLOR'};
       }
     }
 
     &.md-accent {
       &:not(.md-icon-button) {
-        color: ACCENT-COLOR;
+        color: #{'ACCENT-COLOR'};
       }
 
       &.md-raised {
-        background-color: ACCENT-COLOR;
-        color: ACCENT-CONTRAST;
+        background-color: #{'ACCENT-COLOR'};
+        color: #{'ACCENT-CONTRAST'};
 
         &:hover {
-          background-color: ACCENT-COLOR-A700;
+          background-color: #{'ACCENT-COLOR-A700'};
         }
       }
 
       &.md-icon-button:not(.md-raised) {
-        color: ACCENT-COLOR;
+        color: #{'ACCENT-COLOR'};
       }
     }
 
     &.md-warn {
       &:not(.md-icon-button) {
-        color: WARN-COLOR;
+        color: #{'WARN-COLOR'};
       }
 
       &.md-raised,
       &.md-fab {
-        background-color: WARN-COLOR;
-        color: WARN-CONTRAST;
+        background-color: #{'WARN-COLOR'};
+        color: #{'WARN-CONTRAST'};
 
         &:hover {
-          background-color: WARN-COLOR-600;
+          background-color: #{'WARN-COLOR-600'};
         }
       }
 
       &.md-icon-button:not(.md-raised) {
-        color: WARN-COLOR;
+        color: #{'WARN-COLOR'};
+      }
+    }
+
+    &.md-hue-1 {
+      &:not(.md-icon-button) {
+        color: #{'HUE-1-COLOR'};
+      }
+
+      &.md-raised,
+      &.md-fab {
+        background-color: #{'HUE-1-COLOR'};
+        color: #{'HUE-1-CONTRAST'};
+
+        &:hover {
+          background-color: #{'HUE-1-COLOR-600'};
+        }
+      }
+
+      &.md-icon-button:not(.md-raised) {
+        color: #{'HUE-1-COLOR'};
       }
     }
   }

src/components/mdButtonToggle/mdButtonToggle.theme

@@ -13,54 +13,54 @@
     }
 
     .md-toggle {
-      color: BACKGROUND-CONTRAST-600;
-      background-color: BACKGROUND-COLOR-500;
+      color: #{'BACKGROUND-CONTRAST-600'};
+      background-color: #{'BACKGROUND-COLOR-500'};
 
       &:hover {
-        background-color: BACKGROUND-COLOR-600;
+        background-color: #{'BACKGROUND-COLOR-600'};
       }
 
       + .md-toggle:after {
-        background-color: BACKGROUND-COLOR-600;
+        background-color: #{'BACKGROUND-COLOR-600'};
       }
     }
 
     &.md-primary .md-toggle {
-      color: PRIMARY-CONTRAST;
-      background-color: PRIMARY-COLOR;
+      color: #{'PRIMARY-CONTRAST'};
+      background-color: #{'PRIMARY-COLOR'};
 
       &:hover {
-        background-color: PRIMARY-COLOR-600;
+        background-color: #{'PRIMARY-COLOR-600'};
       }
 
       + .md-toggle:after {
-        background-color: PRIMARY-COLOR-700;
+        background-color: #{'PRIMARY-COLOR-700'};
       }
     }
 
     &.md-accent .md-toggle {
-      color: ACCENT-CONTRAST;
-      background-color: ACCENT-COLOR;
+      color: #{'ACCENT-CONTRAST'};
+      background-color: #{'ACCENT-COLOR'};
 
       &:hover {
-        background-color: ACCENT-COLOR-600;
+        background-color: #{'ACCENT-COLOR-600'};
       }
 
       + .md-toggle:after {
-        background-color: ACCENT-COLOR-700;
+        background-color: #{'ACCENT-COLOR-700'};
       }
     }
 
     &.md-warn .md-toggle {
-      color: WARN-CONTRAST;
-      background-color: WARN-COLOR;
+      color: #{'WARN-CONTRAST'};
+      background-color: #{'WARN-COLOR'};
 
       &:hover {
-        background-color: WARN-COLOR-600;
+        background-color: #{'WARN-COLOR-600'};
       }
 
       + .md-toggle:after {
-        background-color: WARN-COLOR-700;
+        background-color: #{'WARN-COLOR-700'};
       }
     }
   }

src/components/mdCheckbox/mdCheckbox.theme

@@ -3,12 +3,12 @@
   &.md-checkbox {
     &.md-checked {
       .md-checkbox-container {
-        background-color: ACCENT-COLOR;
-        border-color: ACCENT-COLOR;
+        background-color: #{'ACCENT-COLOR'};
+        border-color: #{'ACCENT-COLOR'};
       }
 
       .md-ink-ripple {
-        color: ACCENT-COLOR;
+        color: #{'ACCENT-COLOR'};
       }
 
       .md-ripple {

src/components/mdIcon/mdIcon.theme

@@ -2,15 +2,15 @@
   .md-icon,
   &.md-icon {
     &.md-primary {
-      color: PRIMARY-COLOR;
+      color: #{'PRIMARY-COLOR'};
     }
 
     &.md-accent {
-      color: ACCENT-COLOR;
+      color: #{'ACCENT-COLOR'};
     }
 
     &.md-warn {
-      color: WARN-COLOR;
+      color: #{'WARN-COLOR'};
     }
   }
 }

src/components/mdInputContainer/mdInputContainer.theme

@@ -10,30 +10,30 @@
 
       &.md-input-required {
         label:after {
-          color: WARN-COLOR;
+          color: #{'WARN-COLOR'};
         }
       }
 
       &:after {
         height: 2px;
-        background-color: PRIMARY-COLOR;
+        background-color: #{'PRIMARY-COLOR'};
       }
 
       input,
       textarea {
-        color: PRIMARY-COLOR;
-        text-shadow: 0 0 0 BACKGROUND-CONTRAST;
+        color: #{'PRIMARY-COLOR'};
+        text-shadow: 0 0 0 #{'BACKGROUND-CONTRAST'};
         -webkit-text-fill-color: transparent;
       }
 
       label {
-        color: PRIMARY-COLOR;
+        color: #{'PRIMARY-COLOR'};
       }
     }
 
     &.md-input-invalid {
       &:after {
-        background-color: WARN-COLOR;
+        background-color: #{'WARN-COLOR'};
       }
 
       label,
@@ -41,7 +41,7 @@
       .md-count,
       input,
       textarea {
-        color: WARN-COLOR;
+        color: #{'WARN-COLOR'};
       }
     }
   }

src/components/mdList/mdList.theme

@@ -1,8 +1,8 @@
 .THEME_NAME {
   .md-list,
   &.md-list {
-    background-color: BACKGROUND-COLOR-A100;
-    color: BACKGROUND-CONTRAST;
+    background-color: #{'BACKGROUND-COLOR-A100'};
+    color: #{'BACKGROUND-CONTRAST'};
 
     &.md-transparent {
       background-color: transparent;
@@ -12,30 +12,30 @@
     .md-list-item {
       &.md-primary {
         .md-list-item-container {
-          color: PRIMARY-COLOR;
+          color: #{'PRIMARY-COLOR'};
 
           > .md-icon {
-            color: PRIMARY-COLOR;
+            color: #{'PRIMARY-COLOR'};
           }
         }
       }
 
       &.md-accent {
         .md-list-item-container {
-          color: ACCENT-COLOR;
+          color: #{'ACCENT-COLOR'};
 
           > .md-icon {
-            color: ACCENT-COLOR;
+            color: #{'ACCENT-COLOR'};
           }
         }
       }
 
       &.md-warn {
         .md-list-item-container {
-          color: WARN-COLOR;
+          color: #{'WARN-COLOR'};
 
           > .md-icon {
-            color: WARN-COLOR;
+            color: #{'WARN-COLOR'};
           }
         }
       }

src/components/mdRadio/mdRadio.theme

@@ -2,16 +2,16 @@
   .md-radio,
   &.md-radio {
     .md-radio-container:after {
-      background-color: ACCENT-COLOR;
+      background-color: #{'ACCENT-COLOR'};
     }
 
     &.md-checked {
       .md-radio-container {
-        border-color: ACCENT-COLOR;
+        border-color: #{'ACCENT-COLOR'};
       }
 
       .md-ink-ripple {
-        color: ACCENT-COLOR;
+        color: #{'ACCENT-COLOR'};
       }
 
       .md-ripple {

src/components/mdSidenav/mdSidenav.theme

@@ -2,8 +2,8 @@
   .md-sidenav,
   &.md-sidenav {
     .md-sidenav-content {
-      background-color: BACKGROUND-COLOR-A100;
-      color: BACKGROUND-CONTRAST;
+      background-color: #{'BACKGROUND-COLOR-A100'};
+      color: #{'BACKGROUND-CONTRAST'};
     }
   }
 }

src/components/mdSubheader/mdSubheader.theme

@@ -3,15 +3,15 @@
   &.md-subheader {
 
     &.md-primary {
-      color: PRIMARY-COLOR;
+      color: #{'PRIMARY-COLOR'};
     }
 
     &.md-accent {
-      color: ACCENT-COLOR;
+      color: #{'ACCENT-COLOR'};
     }
 
     &.md-warn {
-      color: WARN-COLOR;
+      color: #{'WARN-COLOR'};
     }
   }
 }

src/components/mdSwitch/mdSwitch.theme

@@ -2,13 +2,16 @@
   .md-switch,
   &.md-switch {
     &.md-checked {
-      .md-switch-container,
+      .md-switch-container {
+        background-color: #{'ACCENT-COLOR-500-0.5'};
+      }
+
       .md-switch-thumb {
-        background-color: ACCENT-COLOR;
+        background-color: #{'ACCENT-COLOR'};
       }
 
       .md-ink-ripple {
-        color: ACCENT-COLOR;
+        color: #{'ACCENT-COLOR'};
       }
 
       .md-ripple {

src/components/mdTheme/index.js

@@ -1,7 +1,7 @@
 import palette from './palette';
+import rgba from './rgba';
 
-let registedThemes = [];
-const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn'];
+const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3'];
 const DEFAULT_THEME_COLORS = {
   primary: 'indigo',
   accent: 'pink',
@@ -26,9 +26,11 @@ const createNewStyleElement = (style, name) => {
   }
 };
 
+let registedThemes = [];
+
 const parseStyle = (style, theme) => {
   VALID_THEME_TYPE.forEach((type) => {
-    style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d\\.?\\d*)?', 'g'), (match, paletteType, colorType, hue) => {
+    style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d*)-?(\\d*\\.?\\d+)?', 'g'), (match, paletteType, colorType, hue, opacity) => {
       let color;
       let colorVariant = hue || 500;
 
@@ -54,6 +56,10 @@ const parseStyle = (style, theme) => {
           }
         }
 
+        if (opacity) {
+          return rgba(color[colorVariant], opacity);
+        }
+
         return color[colorVariant];
       }
 

src/components/mdTheme/rgba.js

@@ -0,0 +1,36 @@
+export default function(hex, opacity) {
+  let r = '';
+  let g = '';
+  let b = '';
+  let match = hex.toString().match(/^#?(([0-9a-zA-Z]{3}){1,3})$/);
+
+  if (!match) {
+    throw new Error('Invalid color' + hex);
+  }
+
+  hex = match[1];
+
+  if (hex.length === 6) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  } else if (hex.length === 3) {
+    let rSubstring = hex.substring(0, 1);
+    let gSubstring = hex.substring(1, 2);
+    let bSubstring = hex.substring(2, 3);
+
+    r = parseInt(rSubstring + rSubstring, 16);
+    g = parseInt(gSubstring + gSubstring, 16);
+    b = parseInt(bSubstring + bSubstring, 16);
+  }
+
+  if (opacity) {
+    if (opacity > 1) {
+      opacity = opacity / 100;
+    }
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+  return `rgb(${r}, ${g}, ${b})`;
+}

src/components/mdToolbar/mdToolbar.theme

@@ -1,22 +1,22 @@
 .THEME_NAME {
   .md-toolbar,
   &.md-toolbar {
-    background-color: PRIMARY-COLOR;
-    color: PRIMARY-CONTRAST;
+    background-color: #{'PRIMARY-COLOR'};
+    color: #{'PRIMARY-CONTRAST'};
 
     &.md-accent {
-      background-color: ACCENT-COLOR;
-      color: ACCENT-CONTRAST;
+      background-color: #{'ACCENT-COLOR'};
+      color: #{'ACCENT-CONTRAST'};
     }
 
     &.md-warn {
-      background-color: WARN-COLOR;
-      color: WARN-CONTRAST;
+      background-color: #{'WARN-COLOR'};
+      color: #{'WARN-CONTRAST'};
     }
 
     &.md-transparent {
       background-color: transparent;
-      color: BACKGROUND-CONTRAST;
+      color: #{'BACKGROUND-CONTRAST'};
     }
   }
 }

src/core/stylesheets/core.theme

@@ -1,9 +1,9 @@
 body.THEME_NAME {
   color: rgba(0, 0, 0, .87);
-  background-color: BACKGROUND-COLOR-A100;
+  background-color: #{'BACKGROUND-COLOR-A100'};
 
   :not(input):not(textarea)::selection {
-    background: ACCENT-COLOR;
-    color: ACCENT-CONTRAST !important;
+    background: #{'ACCENT-COLOR'};
+    color: #{'ACCENT-CONTRAST'} !important;
   }
 }