feat(visual): palette - replace warn to error

positive-js · Oct 10, 2018 · 25abde6 · 25abde6
1 parent 5eea588
commit 25abde6
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 45 deletions.
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -76,10 +76,10 @@
     }
 }
 
-@mixin _mc-button-warn-color($secondPalette, $warnPalette) {
+@mixin _mc-button-error-color($secondPalette, $errorPalette) {
     $hover-darken: 5%;
 
-    color: mc-color($warnPalette, 500);
+    color: mc-color($errorPalette, 500);
 
     border-color: mc-color($secondPalette, 300);
     background-image: linear-gradient(to bottom, mc-color($secondPalette, 40, 1), mc-color($secondPalette, 100));
@@ -115,10 +115,10 @@
     }
 }
 
-@mixin _mc-button-theme-color($theme, $color: 'default') {
+@mixin _mc-button-theme-color($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
+    $error: map-get($theme, error);
 
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -131,13 +131,13 @@
         @include _mc-button-second-color($second);
     }
 
-    &.mc-warn {
-        @include _mc-button-warn-color($second, $warn);
+    &.mc-error {
+        @include _mc-button-error-color($second, $error);
     }
 
     &.mc-primary,
     &.mc-second,
-    &.mc-warn {
+    &.mc-error {
         &.cdk-focused {
             border-color: mc-color($primary, 500);
             box-shadow: 0 0 0 1px mc-color($primary, 500);

diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
@@ -7,8 +7,6 @@
     $background: map-get($theme, background);
 
     $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, error);
 
     .mc-option {
         color: mc-color($foreground, text);

diff --git a/src/lib/core/styles/_alerts.scss b/src/lib/core/styles/_alerts.scss
@@ -92,12 +92,12 @@
 }
 
 @mixin mc-alert-theme($theme) {
-    $primary:  map-get($theme, primary);
-    $error-palette:  map-get($theme, error);
-    $warning-palette: map-get($theme, warning);
-    $success-palette: map-get($theme, success);
-    $info-palette: map-get($theme, info);
-    $default-color-palette: map-get($theme, default);
+    $primary: map-get($theme, primary);
+    $error: map-get($theme, error);
+    $warning: map-get($theme, warning);
+    $success: map-get($theme, success);
+    $info: map-get($theme, info);
+    $default: map-get($theme, default);
 
     .mc-alert_close:focus {
         border-color: mc-color($primary, 500);
@@ -110,23 +110,23 @@
     }
 
     .mc-alert_error {
-        @include alert-base($error-palette);
+        @include alert-base($error);
     }
 
     .mc-alert_warning {
-        @include alert-base($warning-palette);
+        @include alert-base($warning);
     }
 
     .mc-alert_success {
-        @include alert-base($success-palette);
+        @include alert-base($success);
     }
 
     .mc-alert_info {
-        @include alert-base($info-palette);
+        @include alert-base($info);
     }
 
     .mc-alert_default {
-        @include alert-base($default-color-palette);
+        @include alert-base($default);
     }
 }
 

diff --git a/src/lib/core/styles/_badges.scss b/src/lib/core/styles/_badges.scss
@@ -16,7 +16,10 @@
 @mixin mc-badge-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
+    $error: map-get($theme, error);
+    $warning: map-get($theme, warning);
+    $success: map-get($theme, success);
+    $info: map-get($theme, info);
 
     .mc-badge {
         color: white;
@@ -29,21 +32,24 @@
             }
         }
 
-        &__info,
+        &__info {
+            background-color: mc-color($info, 500);
+        }
+
         &__primary {
             background-color: mc-color($primary, 500);
         }
 
-        &__error {
-            background-color: mc-color($mc-yellow, 500);
+        &__warning {
+            background-color: mc-color($warning, 500);
         }
 
-        &__warning {
-            background-color: mc-color($warn, 500);
+        &__error {
+            background-color: mc-color($error, 500);
         }
 
         &__success {
-            background-color: mc-color($mc-green, 500);
+            background-color: mc-color($success, 500);
         }
 
         &__transparent {

diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss
@@ -12,7 +12,7 @@
     .mc-icon {
         $primary: map-get($theme, primary);
         $second: map-get($theme, second);
-        $warn: map-get($theme, error);
+        $error: map-get($theme, error);
 
         &.mc-primary {
             @include _mc-icon-color($primary);
@@ -22,8 +22,8 @@
             @include _mc-icon-color($second);
         }
 
-        &.mc-warn {
-            @include _mc-icon-color($warn);
+        &.mc-error {
+            @include _mc-icon-color($error);
         }
     }
 }

diff --git a/src/lib/modal/_modal-theme.scss b/src/lib/modal/_modal-theme.scss
@@ -8,7 +8,6 @@
 
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
     $hover-darken: 5%;
 
     .mc-modal {

diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -4,10 +4,10 @@
 @mixin mc-progress-bar-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
+    $error: map-get($theme, error);
 
     .mc-progress-bar {
-        background-color: mc-color($mc-grey, 60);
+        background-color: mc-color($second, 60);
 
         &.mc-primary &__line {
             background-color: mc-color($primary, 500);
@@ -17,8 +17,8 @@
             background-color: mc-color($second, 500);
         }
 
-        &.mc-warn &__line {
-            background-color: mc-color($warn, 500);
+        &.mc-error &__line {
+            background-color: mc-color($error, 500);
         }
     }
 }
diff --git a/src/lib/progress-spinner/_progress-spinner-theme.scss b/src/lib/progress-spinner/_progress-spinner-theme.scss
@@ -1,10 +1,11 @@
 @import '../core/theming/theming';
 @import '../core/theming/palette';
 
+
 @mixin mc-progress-spinner-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
+    $error: map-get($theme, error);
 
     .mc-progress-spinner {
         &.mc-primary &__circle {
@@ -15,8 +16,8 @@
             stroke: mc-color($second, 500);
         }
 
-        &.mc-warn &__circle {
-            stroke: mc-color($warn, 500);
+        &.mc-error &__circle {
+            stroke: mc-color($error, 500);
         }
     }
 }
diff --git a/src/lib/progress-spinner/progress-spinner.md b/src/lib/progress-spinner/progress-spinner.md
@@ -32,8 +32,8 @@ Or for determinate progress
 ```
 
 #### `color`
-Enum ('primary', 'second', 'error')  
-Default: 'primary'  
+Enum ('primary', 'second', 'error')
+Default: 'primary'
 Set theming of element
 
 ```html
@@ -44,4 +44,4 @@ Set theming of element
 
 ### Theming
 The color of a `<mc-progress-spinner>` can be changed by using the `color` property. By default, it
-use the theme's `primary` color. This can be changed to `'second'` or `'warn'`.
+use the theme's `primary` color. This can be changed to `'second'` or `'error'`.
diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
@@ -13,7 +13,6 @@
 
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
     $foreground: map-get($theme, foreground);
 
     .mc-radio-input {

diff --git a/src/lib/tag/_tag-theme.scss b/src/lib/tag/_tag-theme.scss
@@ -44,7 +44,7 @@
 @mixin mc-tag-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
-    $warn: map-get($theme, error);
+    $error: map-get($theme, error);
 
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -62,8 +62,8 @@
             @include _mc-tag-color($second, $primary);
         }
 
-        &.mc-warn {
-            @include _mc-tag-color($warn, $warn);
+        &.mc-error {
+            @include _mc-tag-color($error, $error);
         }
     }
 }