updated icons

positive-js · Nov 2, 2018 · c4536a0 · c4536a0
1 parent 9108620
commit c4536a0
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 30 deletions.
diff --git a/src/lib-dev/icon/template.html b/src/lib-dev/icon/template.html
@@ -1,4 +1,4 @@
-
+normal
 <table>
     <thead>
         <tr>
@@ -33,3 +33,79 @@
         <td><i mc-icon="mc-folder-opened_16" color="error"></i></td>
     </tr>
 </table>
+
+<br><br><br>
+
+disabled
+<table>
+    <thead>
+    <tr>
+        <td>default</td>
+        <td>primary</td>
+        <td>second</td>
+        <td>error</td>
+    </tr>
+    </thead>
+    <tr>
+        <td><i class="mc-disabled" mc-icon="mc-angle-L_16"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="primary"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="second"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-disabled" mc-icon="mc-calendar_16"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-calendar_16" color="primary"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-calendar_16" color="second"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-calendar_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-disabled" mc-icon="mc-clock_16"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-clock_16" color="primary"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-clock_16" color="second"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-clock_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-disabled" mc-icon="mc-folder-opened_16"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="primary"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="second"></i></td>
+        <td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="error"></i></td>
+    </tr>
+</table>
+
+<br><br><br>
+
+light
+<table>
+    <thead>
+    <tr>
+        <td>default</td>
+        <td>primary</td>
+        <td>second</td>
+        <td>error</td>
+    </tr>
+    </thead>
+    <tr>
+        <td><i class="mc-icon_light" mc-icon="mc-angle-L_16"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="primary"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="second"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-icon_light" mc-icon="mc-calendar_16"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="primary"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="second"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-icon_light" mc-icon="mc-clock_16"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-clock_16" color="primary"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-clock_16" color="second"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-clock_16" color="error"></i></td>
+    </tr>
+    <tr>
+        <td><i class="mc-icon_light" mc-icon="mc-folder-opened_16"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="primary"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="second"></i></td>
+        <td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="error"></i></td>
+    </tr>
+</table>
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -46,7 +46,7 @@
     color: map-get($foreground, text);
 
     .mc-icon {
-        color: mc-color($palette, 500);
+        color: map-get($foreground, text);
     }
 
     &:hover,

diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
@@ -176,29 +176,27 @@ $mc-light-theme-foreground: (
     secondary-text:    rgba(black, 0.54), //скорей всего это fg-less-contrast-text
 
     // ↓ новое
-    text:                   $dark-text-default,
-    less-contrast-text:     $dark-text-secondary,
-    disabled-text:          $dark-text-disabled,
+    text:               $dark-text-default,
+    less-contrast-text: $dark-text-secondary,
+    disabled-text:      $dark-text-disabled,
 
-    default-icon:        $dark-text-secondary,
-    less-contrast-icon:  $dark-icon-secondary,
+    default-icon:       rgba(transparent, 0.25),
 );
 
 $mc-dark-theme-foreground: (
-    base:              white,
-    disabled:          rgba(white, 0.3),
-    disabled-button:   rgba(white, 0.3),
-    hint-text:         rgba(white, 0.3),
-    icon:              white,
-    secondary-text:    rgba(white, 0.7),
+    base:               white,
+    disabled:           rgba(white, 0.3),
+    disabled-button:    rgba(white, 0.3),
+    hint-text:          rgba(white, 0.3),
+    icon:               white,
+    secondary-text:     rgba(white, 0.7),
 
     // ↓ новое
-    text:                   $light-text-default,
-    less-contrast-text:     $light-text-secondary,
-    disabled-text:          $light-text-disabled,
+    text:               $light-text-default,
+    less-contrast-text: $light-text-secondary,
+    disabled-text:      $light-text-disabled,
 
-    default-icon:        $light-text-secondary,
-    less-contrast-icon:  $light-icon-secondary,
+    default-icon:       rgba(white, 1),
 );
 
 $mc-light-theme-background: (
@@ -215,7 +213,7 @@ $mc-light-theme-background: (
 
     button-bg:            map-get($mc-grey, 60),
     button-border:        map-get($mc-grey, 200),
-    disabled-overlay:      rgba(white, 0.3),
+    disabled-overlay:     rgba(white, 0.3),
 
     hover:                rgba(black, 0.05),
 

diff --git a/src/lib/core/theming/prebuilt/dark-theme.scss b/src/lib/core/theming/prebuilt/dark-theme.scss
@@ -4,7 +4,7 @@
 // Define a theme.
 $primary: mc-palette($mc-blue, 300, 400, 500);
 $second: mc-palette($mc-grey, 600, 500, 400);
-$error: mc-palette($mc-red, 40, 400, 700);
+$error: mc-palette($mc-red, 40, 400, 600);
 
 $theme: mc-dark-theme($primary, $second, $error);
 

diff --git a/src/lib/core/theming/prebuilt/default-theme.scss b/src/lib/core/theming/prebuilt/default-theme.scss
@@ -4,7 +4,7 @@
 // Define a theme.
 $primary: mc-palette($mc-blue, 400, 500, 600);
 $second: mc-palette($mc-grey, 100, 300, 400);
-$error: mc-palette($mc-red, 40, 500, 700);
+$error: mc-palette($mc-red, 40, 500, 600);
 
 $theme: mc-light-theme($primary, $second);
 

diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss
@@ -5,32 +5,80 @@
 
 
 @mixin mc-icon-theme($theme) {
-    .mc-icon {
-        $primary: map-get($theme, primary);
-        $second: map-get($theme, second);
-        $error: map-get($theme, error);
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $error: map-get($theme, error);
 
-        $foreground: map-get($theme, foreground);
-        $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
         background: map-get($background, background);;
 
+    $primary-color: mc-color($primary, 400);
+    $second-color: mc-color($second);
+    $error-color: mc-color($error);
+
+    // Дефолтные серые иконки default-icon: лупа в поле, иконки дропдаунов v, все иконки вне полей.
+    .mc-icon:not(.mc-icon_light) {
         &.mc-primary {
-            color: mc-color($primary, 400);
+            color: mix(map-get($foreground, default-icon), $primary-color);
+
+            &[disabled],
+            &.mc-disabled {
+                color: $primary-color;
+            }
         }
 
         &.mc-second {
-            color: mc-color($second);
+            color: mix(map-get($foreground, default-icon), $second-color, 70%);
+
+            &[disabled],
+            &.mc-disabled {
+                color: mc-color($second);
+            }
         }
 
         &.mc-error {
-            color: mc-color($error);
+            color: mix(map-get($foreground, default-icon), $error-color);
+
+            &[disabled],
+            &.mc-disabled {
+                color: $error-color;
+            }
         }
 
         &:not(.mc-primary):not(.mc-second):not(.mc-error) {
             color: map-get($foreground, default-icon);
         }
     }
+
+    // Облегченные серые иконки less-contrast-icon нужны тогда, когда действие, которое они делают не дефолтное и
+    // не самое важное. Не используются вне инпутов или селектов.
+    .mc-icon.mc-icon_light {
+        &.mc-primary {
+            color: $primary-color;
+
+            &:hover {
+                color: mix(map-get($foreground, text), $primary-color);
+            }
+        }
+
+        &.mc-second {
+            color: $second-color;
+
+            &:hover {
+                color: mix(map-get($foreground, text), $second-color, 90%);
+            }
+        }
+
+        &.mc-error {
+            color: $error-color;
+
+            &:hover {
+                color: mix(map-get($foreground, text), $error-color);
+            }
+        }
+    }
 }
 
 @mixin mc-icon-typography($config) {