feat: sync with Eva 1.1 (#1995)

akveo · Oct 4, 2019 · 67d5689 · 67d5689
1 parent c42c880
commit 67d5689
Show file tree

Hide file tree

Showing 14 changed files with 565 additions and 203 deletions.
diff --git a/docs/articles/design-system/theme.md b/docs/articles/design-system/theme.md
@@ -53,7 +53,7 @@ Each theme is divided into the following semantic groups:
 
 ## Colors
 
-All available color within the theme. 5 semantic colors (`primary`, `success`, `info`, `warning`, `danger`) and `basic` color (backgrounds and texts).
+All available color within the theme. 5 semantic colors (`primary`, `success`, `info`, `warning`, `danger`), 6 transparency levels for every default semantic color (8%, 16%, 24%, 32%, 40%, 48%) and `basic` color (backgrounds and texts).
 Each color has a pallet of 9 shades, except for `basic`, which has 11 shades. These colors mostly used by `status` variants of the components.
 
 Primary color shades:
@@ -67,6 +67,13 @@ color-primary-600: #284de0,
 color-primary-700: #2541cc,
 color-primary-800: #192f9e,
 color-primary-900: #14236e,
+
+color-primary-transparent-100: rgba(51, 102, 255, 0.08),
+color-primary-transparent-200: rgba(51, 102, 255, 0.16),
+color-primary-transparent-300: rgba(51, 102, 255, 0.24),
+color-primary-transparent-400: rgba(51, 102, 255, 0.32),
+color-primary-transparent-500: rgba(51, 102, 255, 0.40),
+color-primary-transparent-600: rgba(51, 102, 255, 0.48),
 ```
 
 You can also tune colors used for element states:

diff --git a/e2e/layout-theme.e2e-spec.ts b/e2e/layout-theme.e2e-spec.ts
@@ -57,7 +57,7 @@ describe('nb-layout theme', () => {
       expect(value).toEqual(themeDefault);
     });
     cardHeader.getCssValue('color').then(value => {
-      expect(value).toEqual('rgba(26, 33, 56, 1)');
+      expect(value).toEqual('rgba(25, 32, 56, 1)');
     });
     cardHeader.getCssValue('text-decoration').then(value => {
       expect(value).toMatch('none');

diff --git a/src/framework/theme/components/button/_button-filled.scss b/src/framework/theme/components/button/_button-filled.scss
@@ -23,6 +23,7 @@
         color: nb-theme(button-filled-#{$status}-text-color);
 
         &:focus {
+          background-color: nb-theme(button-filled-#{$status}-focus-background-color);
           border-color: nb-theme(button-filled-#{$status}-focus-border-color);
         }
 

diff --git a/src/framework/theme/components/button/_button-ghost.scss b/src/framework/theme/components/button/_button-ghost.scss
@@ -23,18 +23,26 @@
         color: nb-theme(button-ghost-#{$status}-text-color);
 
         &:focus {
+          background-color: nb-theme(button-ghost-#{$status}-focus-background-color);
+          border-color: nb-theme(button-ghost-#{$status}-focus-border-color);
           color: nb-theme(button-ghost-#{$status}-focus-text-color);
         }
 
         &:hover {
-          color: nb-theme(button-ghost-#{$status}-hover-color);
+          background-color: nb-theme(button-ghost-#{$status}-hover-background-color);
+          border-color: nb-theme(button-ghost-#{$status}-hover-border-color);
+          color: nb-theme(button-ghost-#{$status}-hover-text-color);
         }
 
         &:active {
+          background-color: nb-theme(button-ghost-#{$status}-active-background-color);
+          border-color: nb-theme(button-ghost-#{$status}-active-border-color);
           color: nb-theme(button-ghost-#{$status}-active-text-color);
         }
 
         &[disabled] {
+          background-color: nb-theme(button-ghost-#{$status}-disabled-background-color);
+          border-color: nb-theme(button-ghost-#{$status}-disabled-border-color);
           color: nb-theme(button-ghost-#{$status}-disabled-text-color);
         }
       }

diff --git a/src/framework/theme/components/button/_button-outline.scss b/src/framework/theme/components/button/_button-outline.scss
@@ -23,21 +23,25 @@
         color: nb-theme(button-outline-#{$status}-text-color);
 
         &:focus {
+          background-color: nb-theme(button-outline-#{$status}-focus-background-color);
           border-color: nb-theme(button-outline-#{$status}-focus-border-color);
           color: nb-theme(button-outline-#{$status}-focus-text-color);
         }
 
         &:hover {
+          background-color: nb-theme(button-outline-#{$status}-hover-background-color);
           border-color: nb-theme(button-outline-#{$status}-hover-border-color);
           color: nb-theme(button-outline-#{$status}-hover-text-color);
         }
 
         &:active {
+          background-color: nb-theme(button-outline-#{$status}-active-background-color);
           border-color: nb-theme(button-outline-#{$status}-active-border-color);
           color: nb-theme(button-outline-#{$status}-active-text-color);
         }
 
         &[disabled] {
+          background-color: nb-theme(button-outline-#{$status}-disabled-background-color);
           border-color: nb-theme(button-outline-#{$status}-disabled-border-color);
           color: nb-theme(button-outline-#{$status}-disabled-text-color);
         }

diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -35,18 +35,37 @@
       }
     }
 
-    .native-input:focus + .custom-checkbox {
-      border-color: nb-theme(checkbox-primary-focus-border-color);
+    .native-input:enabled:focus + .custom-checkbox {
+      background-color: nb-theme(checkbox-focus-background-color);
+      border-color: nb-theme(checkbox-focus-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-primary-focus-checked-background-color);
+        border-color: nb-theme(checkbox-primary-focus-checked-border-color);
+      }
     }
 
     .custom-checkbox:hover {
-      background-color: nb-theme(checkbox-primary-hover-background-color);
-      border-color: nb-theme(checkbox-primary-hover-border-color);
+      background-color: nb-theme(checkbox-hover-background-color);
+      border-color: nb-theme(checkbox-hover-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-primary-hover-checked-background-color);
+        border-color: nb-theme(checkbox-primary-hover-checked-border-color);
+      }
     }
 
-    .native-input:active + .custom-checkbox {
-      background-color: nb-theme(checkbox-primary-active-background-color);
-      border-color: nb-theme(checkbox-primary-active-border-color);
+    .native-input:enabled:active + .custom-checkbox {
+      background-color: nb-theme(checkbox-active-background-color);
+      border-color: nb-theme(checkbox-active-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-primary-active-checked-background-color);
+        border-color: nb-theme(checkbox-primary-active-checked-border-color);
+      }
     }
 
     .native-input:focus + .custom-checkbox {
@@ -65,6 +84,10 @@
       & ~ .text {
         color: nb-theme(checkbox-disabled-text-color);
       }
+      &:indeterminate + .custom-checkbox,
+      &:checked + .custom-checkbox {
+        background-color: nb-theme(checkbox-disabled-checked-background-color);
+      }
     }
 
     nb-icon {
@@ -114,18 +137,37 @@
       }
     }
 
-    .native-input:focus + .custom-checkbox {
+    .native-input:enabled:focus + .custom-checkbox {
+      background-color: nb-theme(checkbox-#{$status}-focus-background-color);
       border-color: nb-theme(checkbox-#{$status}-focus-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-#{$status}-focus-checked-background-color);
+        border-color: nb-theme(checkbox-#{$status}-focus-checked-border-color);
+      }
     }
 
     .custom-checkbox:hover {
       background-color: nb-theme(checkbox-#{$status}-hover-background-color);
       border-color: nb-theme(checkbox-#{$status}-hover-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-#{$status}-hover-checked-background-color);
+        border-color: nb-theme(checkbox-#{$status}-hover-checked-border-color);
+      }
     }
 
-    .native-input:active + .custom-checkbox {
+    .native-input:enabled:active + .custom-checkbox {
       background-color: nb-theme(checkbox-#{$status}-active-background-color);
       border-color: nb-theme(checkbox-#{$status}-active-border-color);
+
+      &.indeterminate,
+      &.checked {
+        background-color: nb-theme(checkbox-#{$status}-active-checked-background-color);
+        border-color: nb-theme(checkbox-#{$status}-active-checked-border-color);
+      }
     }
 
     .native-input:disabled {
@@ -140,6 +182,10 @@
       & ~ .text {
         color: nb-theme(checkbox-disabled-text-color);
       }
+      &:indeterminate + .custom-checkbox,
+      &:checked + .custom-checkbox {
+        background-color: nb-theme(checkbox-disabled-checked-background-color);
+      }
     }
   }
 }
diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss
@@ -20,8 +20,10 @@
     }
 
     .native-input:enabled:checked + .outer-circle {
+      background-color: nb-theme(radio-primary-checked-background-color);
       border-color: nb-theme(radio-primary-border-color);
     }
+
     .native-input:enabled:checked ~ .inner-circle {
       background-color: nb-theme(radio-primary-inner-circle-color);;
     }
@@ -30,15 +32,22 @@
       border-color: nb-theme(radio-primary-focus-border-color);
       box-shadow: 0 0 0 nb-theme(radio-outline-width) nb-theme(radio-outline-color);
     }
+
     .native-input:enabled:checked:focus ~ .inner-circle {
       background-color: nb-theme(radio-primary-focus-inner-circle-color);
     }
 
-    label:hover .native-input:enabled + .outer-circle {
-      border-color: nb-theme(radio-primary-hover-border-color);
-    }
-    label:hover .native-input:checked:enabled ~ .inner-circle {
-      background-color: nb-theme(radio-primary-hover-inner-circle-color);
+    label:hover .native-input:enabled {
+      & + .outer-circle {
+        background-color: nb-theme(radio-primary-hover-background-color);
+        border-color: nb-theme(radio-primary-hover-border-color);
+      }
+      &:checked + .outer-circle {
+        background-color: nb-theme(radio-primary-hover-checked-background-color);
+      }
+      &:checked ~ .inner-circle {
+        background-color: nb-theme(radio-primary-hover-inner-circle-color);
+      }
     }
 
     label .native-input:enabled:active + .outer-circle {
@@ -48,21 +57,35 @@
       background-color: nb-theme(radio-primary-active-inner-circle-color);
     }
 
-    .native-input:disabled + .outer-circle {
-      background-color: nb-theme(radio-disabled-background-color);
-      border-color: nb-theme(radio-disabled-border-color);
-    }
-    .native-input:disabled:checked ~ .inner-circle {
-      background-color: nb-theme(radio-disabled-inner-circle-color);
-    }
-    .native-input:disabled ~ .text {
-      color: nb-theme(radio-disabled-text-color);
+    .native-input:disabled {
+      & + .outer-circle {
+        background-color: nb-theme(radio-disabled-background-color);
+        border-color: nb-theme(radio-disabled-border-color);
+      }
+      & ~ .text {
+        color: nb-theme(radio-disabled-text-color);
+      }
+
+      &:checked {
+        & + .outer-circle {
+          background-color: nb-theme(radio-disabled-checked-background-color);
+        }
+        ~ .inner-circle {
+          background-color: nb-theme(radio-disabled-checked-inner-circle-color);
+        }
+      }
     }
 
     @each $status in nb-get-statuses() {
       &.status-#{$status} .native-input:enabled + .outer-circle {
+        background-color: nb-theme(radio-#{$status}-background-color);
         border-color: nb-theme(radio-#{$status}-border-color);
       }
+
+      &.status-#{$status} .native-input:enabled:checked + .outer-circle {
+        background-color: nb-theme(radio-#{$status}-checked-background-color);
+      }
+
       &.status-#{$status} .native-input:enabled:checked ~ .inner-circle {
         background-color: nb-theme(radio-#{$status}-inner-circle-color);;
       }