feat(accordion): Eva styles (#1362)

BREAKING CHANGE: NbAccordionComponent static properties were unused and removed. STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,STATUS_DANGER. Following theme properties were renamed: accordion-header-font-family -> accordion-header-text-font-family accordion-header-font-size -> accordion-header-text-font-size accordion-header-font-weight -> accordion-header-text-font-weight accordion-header-fg-heading -> accordion-header-text-color accordion-header-disabled-fg -> accordion-header-disabled-text-color accordion-header-border-type -> accordion-header-border-style accordion-item-bg -> accordion-item-background-color accordion-item-font-size -> accordion-item-text-font-size accordion-item-font-weight -> accordion-item-text-font-weight accordion-item-font-family -> accordion-item-text-font-family accordion-item-fg-text -> accordion-item-text-color accordion-item-shadow -> accordion-shadow 'accordion-separator' removed.
akveo · May 27, 2019 · 98a159c · 98a159c
1 parent 06fccf7
commit 98a159c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 58 deletions.
diff --git a/src/framework/theme/components/accordion/_accordion.component.theme.scss b/src/framework/theme/components/accordion/_accordion.component.theme.scss
@@ -5,15 +5,15 @@
  */
 
 @mixin nb-accordion-item-header() {
-  padding: nb-theme(accordion-padding);
   border-bottom-width: nb-theme(accordion-header-border-width);
-  border-bottom-style: nb-theme(accordion-header-border-type);
+  border-bottom-style: nb-theme(accordion-header-border-style);
   border-bottom-color: nb-theme(accordion-header-border-color);
-  color: nb-theme(accordion-header-fg-heading);
-
-  font-family: nb-theme(accordion-header-font-family);
-  font-size: nb-theme(accordion-header-font-size);
-  font-weight: nb-theme(accordion-header-font-weight);
+  color: nb-theme(accordion-header-text-color);
+  font-family: nb-theme(accordion-header-text-font-family);
+  font-size: nb-theme(accordion-header-text-font-size);
+  font-weight: nb-theme(accordion-header-text-font-weight);
+  line-height: nb-theme(accordion-header-text-line-height);
+  padding: nb-theme(accordion-padding);
 
   @include nb-headings();
 }
@@ -22,7 +22,7 @@
 
   nb-accordion {
     display: block;
-    box-shadow: nb-theme(accordion-item-shadow);
+    box-shadow: nb-theme(accordion-shadow);
     border-radius: nb-theme(accordion-border-radius);
 
     nb-accordion-item-header {
@@ -37,13 +37,15 @@
     }
 
     nb-accordion-item {
-      font-family: nb-theme(accordion-item-font-family);
-      font-weight: nb-theme(accordion-item-font-weight);
-      background: nb-theme(accordion-item-bg);
-      color: nb-theme(accordion-item-fg-text);
+      background-color: nb-theme(accordion-item-background-color);
+      color: nb-theme(accordion-item-text-color);
+      font-family: nb-theme(accordion-item-text-font-family);
+      font-size: nb-theme(accordion-item-text-font-size);
+      font-weight: nb-theme(accordion-item-text-font-weight);
+      line-height: nb-theme(accordion-item-text-line-height);
 
       &.disabled nb-accordion-item-header {
-        color: nb-theme(accordion-header-disabled-fg);
+        color: nb-theme(accordion-header-disabled-text-color);
         cursor: default;
       }
 
@@ -61,16 +63,16 @@
       }
     }
     nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header {
-      border-top-width: nb-theme(accordion-header-border-width);
-      border-top-style: nb-theme(accordion-header-border-type);
       border-top-color: nb-theme(accordion-header-border-color);
+      border-top-style: nb-theme(accordion-header-border-style);
+      border-top-width: nb-theme(accordion-header-border-width);
     }
 
     nb-accordion-item-body .item-body {
       flex: 1;
       -ms-flex: 1 1 auto;
       overflow: auto;
-      padding: nb-theme(card-padding);
+      padding: nb-theme(accordion-padding);
       position: relative;
     }
   }

diff --git a/src/framework/theme/components/accordion/accordion.component.ts b/src/framework/theme/components/accordion/accordion.component.ts
@@ -30,38 +30,40 @@ import { convertToBoolProperty } from '../helpers';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbAccordionModule,
  *   ],
  * })
  * export class PageModule { }
  * ```
  * ### Usage
  *
- * With `multi` mode acordion can have multiple items expanded:
- * @stacked-example(Showcase, accordion/accordion-multi.component)
+ * With `multi` mode accordion can have multiple items expanded:
+ * @stacked-example(Multiple expanded items, accordion/accordion-multi.component)
  *
- * `NbAccordionItemComponent` has several method, for example it is possible to trigger item click/toggle:
- * @stacked-example(Showcase, accordion/accordion-toggle.component)
+ * `NbAccordionItemComponent` has several methods, for example it is possible to trigger item click/toggle:
+ * @stacked-example(Expand API, accordion/accordion-toggle.component)
  *
  * @styles
  *
+ * accordion-border-radius:
  * accordion-padding:
- * accordion-separator:
- * accordion-header-font-family:
- * accordion-header-font-size:
- * accordion-header-font-weight:
- * accordion-header-fg-heading:
- * accordion-header-disabled-fg:
- * accordion-header-border-width:
- * accordion-header-border-type:
+ * accordion-shadow:
+ * accordion-header-text-color:
+ * accordion-header-text-font-family:
+ * accordion-header-text-font-size:
+ * accordion-header-text-font-weight:
+ * accordion-header-text-line-height:
+ * accordion-header-disabled-text-color:
  * accordion-header-border-color:
- * accordion-item-bg:
- * accordion-item-font-size:
- * accordion-item-font-weight:
- * accordion-item-font-family:
- * accordion-item-fg-text:
- * accordion-item-shadow:
+ * accordion-header-border-style:
+ * accordion-header-border-width:
+ * accordion-item-background-color:
+ * accordion-item-text-color:
+ * accordion-item-text-font-family:
+ * accordion-item-text-font-size:
+ * accordion-item-text-font-weight:
+ * accordion-item-text-line-height:
  */
 @Component({
   selector: 'nb-accordion',
@@ -72,14 +74,6 @@ import { convertToBoolProperty } from '../helpers';
 })
 export class NbAccordionComponent {
 
-  static readonly STATUS_ACTIVE = 'active';
-  static readonly STATUS_DISABLED = 'disabled';
-  static readonly STATUS_PRIMARY = 'primary';
-  static readonly STATUS_INFO = 'info';
-  static readonly STATUS_SUCCESS = 'success';
-  static readonly STATUS_WARNING = 'warning';
-  static readonly STATUS_DANGER = 'danger';
-
   openCloseItems = new Subject<boolean>();
 
   /**

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -1227,23 +1227,24 @@ $theme: (
   stepper-completed-icon-weight: font-weight-ultra-bold,
   stepper-step-padding: padding,
 
+  accordion-border-radius: 0.75rem,
   accordion-padding: padding,
-  accordion-separator: separator,
-  accordion-header-font-family: font-secondary,
-  accordion-header-font-size: font-size-lg,
-  accordion-header-font-weight: font-weight-normal,
-  accordion-header-fg-heading: color-fg-heading,
-  accordion-header-disabled-fg: color-fg,
+  accordion-shadow: none,
+  accordion-header-text-color: text-dark-color,
+  accordion-header-text-font-family: text-subtitle-font-family,
+  accordion-header-text-font-size: text-subtitle-font-size,
+  accordion-header-text-font-weight: text-subtitle-font-weight,
+  accordion-header-text-line-height: text-subtitle-line-height,
+  accordion-header-disabled-text-color: text-disabled-color,
+  accordion-header-border-color: divider-color,
+  accordion-header-border-style: solid,
   accordion-header-border-width: 1px,
-  accordion-header-border-type: solid,
-  accordion-header-border-color: accordion-separator,
-  accordion-border-radius: radius,
-  accordion-item-bg: color-bg,
-  accordion-item-font-size: font-size,
-  accordion-item-font-weight: font-weight-normal,
-  accordion-item-font-family: font-main,
-  accordion-item-fg-text: color-fg-text,
-  accordion-item-shadow: shadow,
+  accordion-item-background-color: color-white,
+  accordion-item-text-color: text-dark-color,
+  accordion-item-text-font-family: text-paragraph-font-weight,
+  accordion-item-text-font-size: text-paragraph-font-family,
+  accordion-item-text-font-weight: text-paragraph-font-size,
+  accordion-item-text-line-height: text-paragraph-line-height,
 
   list-item-border-color: divider-color,
   list-item-padding: 1rem,