fix(theming): make switch, checkbox, radio button default to primary …

…color for consistency
angular · Jan 12, 2015 · 8cbfead · 8cbfead
1 parent 7178b6d
commit 8cbfead
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 31 deletions.
diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss
@@ -1,7 +1,7 @@
 md-checkbox.md-THEME_NAME-theme {
 
   .md-ripple {
-    color: '{{accent-600}}';
+    color: '{{primary-600}}';
   }
   &.md-checked .md-ripple {
     color: '{{background-600}}';
@@ -11,17 +11,17 @@ md-checkbox.md-THEME_NAME-theme {
     border-color: '{{foreground-2}}';
   }
   &.md-checked .md-icon {
-    background-color: '{{accent-color-0.87}}';
+    background-color: '{{primary-color-0.87}}';
   }
 
   &.md-checked .md-icon:after {
     border-color: '{{background-200}}';
   }
 
   &:not([disabled]) {
-    &.md-primary {
+    &.md-accent {
       .md-ripple {
-        color: '{{primary-600}}';
+        color: '{{accent-600}}';
       }
       &.md-checked .md-ripple {
         color: '{{background-600}}';
@@ -31,7 +31,7 @@ md-checkbox.md-THEME_NAME-theme {
         border-color: '{{foreground-2}}';
       }
       &.md-checked .md-icon {
-        background-color: '{{primary-color-0.87}}';
+        background-color: '{{accent-color-0.87}}';
       }
 
       &.md-checked .md-icon:after {
@@ -43,9 +43,6 @@ md-checkbox.md-THEME_NAME-theme {
       .md-ripple {
         color: '{{warn-600}}';
       }
-      &.md-checked .md-ripple {
-        color: '{{background-600}}';
-      }
 
       .md-icon {
         border-color: '{{foreground-2}}';

diff --git a/src/components/checkbox/demoBasicUsage/index.html b/src/components/checkbox/demoBasicUsage/index.html
@@ -17,7 +17,7 @@
     Checkbox: Disabled, Checked
   </md-checkbox>
 
-  <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
-    Checkbox (md-primary): No Ink
+  <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-accent">
+    Checkbox (md-accent): No Ink
   </md-checkbox>
 </div>
diff --git a/src/components/radioButton/radio-button-theme.scss b/src/components/radioButton/radio-button-theme.scss
@@ -5,47 +5,47 @@ md-radio-button.md-THEME_NAME-theme {
   }
 
   .md-on {
-    background-color: '{{accent-color-0.87}}';
+    background-color: '{{primary-color-0.87}}';
   }
   &.md-checked .md-off {
-    border-color: '{{accent-color-0.87}}';
+    border-color: '{{primary-color-0.87}}';
   }
   &.md-checked .md-ink-ripple {
-    color: '{{accent-color-0.87}}';
+    color: '{{primary-color-0.87}}';
   }
   .md-container .md-ripple {
-    color: '{{accent-600}}';
+    color: '{{primary-600}}';
   }
 
   &:not([disabled]) {
 
-    &.md-warn {
+    &.md-accent {
       .md-on {
-        background-color: '{{warn-color-0.87}}';
+        background-color: '{{accent-color-0.87}}';
       }
       &.md-checked .md-off {
-        border-color: '{{warn-color-0.87}}';
+        border-color: '{{accent-color-0.87}}';
       }
       &.md-checked .md-ink-ripple {
-        color: '{{warn-color-0.87}}';
+        color: '{{accent-color-0.87}}';
       }
       .md-container .md-ripple {
-        color: '{{warn-600}}';
+        color: '{{accent-600}}';
       }
     }
 
-    &.md-primary {
+    &.md-warn {
       .md-on {
-        background-color: '{{primary-color-0.87}}';
+        background-color: '{{warn-color-0.87}}';
       }
       &.md-checked .md-off {
-        border-color: '{{primary-color-0.87}}';
+        border-color: '{{warn-color-0.87}}';
       }
       &.md-checked .md-ink-ripple {
-        color: '{{primary-color-0.87}}';
+        color: '{{warn-color-0.87}}';
       }
       .md-container .md-ripple {
-        color: '{{primary-600}}';
+        color: '{{warn-600}}';
       }
     }
 

diff --git a/src/components/switch/demoBasicUsage/index.html b/src/components/switch/demoBasicUsage/index.html
@@ -15,8 +15,8 @@
     Switch (Disabled, Active)
   </md-switch>
 
-  <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
-    Switch (md-primary): No Ink
+  <md-switch class="md-accent" md-no-ink aria-label="Switch No Ink">
+    Switch (md-accent): No Ink
   </md-switch>
 
 

diff --git a/src/components/switch/switch-theme.scss b/src/components/switch/switch-theme.scss
@@ -8,18 +8,18 @@ md-switch.md-THEME_NAME-theme {
 
   &.md-checked {
     .md-thumb {
-      background-color: '{{accent-color}}';
+      background-color: '{{primary-color}}';
     }
     .md-bar {
-      background-color: '{{accent-color-0.5}}';
+      background-color: '{{primary-color-0.5}}';
     }
 
-    &.md-primary {
+    &.md-accent {
       .md-thumb {
-        background-color: '{{primary-color}}';
+        background-color: '{{accent-color}}';
       }
       .md-bar {
-        background-color: '{{primary-color-0.5}}';
+        background-color: '{{accent-color-0.5}}';
       }
     }