From 8e2985a0c44d4614b806737be3b5bbeece2db306 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 19:46:33 +0300
Subject: [PATCH 01/51] refactor: move `datetime.jsx` to `/utils`

---
 .../components/activity-notifications/item.jsx   |  2 +-
 .../activity-trail/activities/base/activity.jsx  |  2 +-
 ashes/src/components/gift-cards/gift-card.jsx    |  2 +-
 ashes/src/components/orders/order.jsx            |  2 +-
 .../components/orders/shipments/shipment-row.jsx |  2 +-
 .../components/orders/shipments/transaction.jsx  |  2 +-
 ashes/src/components/payment-row/payment-row.jsx |  2 +-
 ashes/src/components/rmas/helpers.jsx            |  2 +-
 ashes/src/components/table/cell.jsx              |  2 +-
 .../{common => utils/datetime}/datetime.css      |  0
 .../{common => utils/datetime}/datetime.jsx      | 16 ++++------------
 ashes/src/components/utils/datetime/index.jsx    |  1 +
 12 files changed, 14 insertions(+), 21 deletions(-)
 rename ashes/src/components/{common => utils/datetime}/datetime.css (100%)
 rename ashes/src/components/{common => utils/datetime}/datetime.jsx (77%)
 create mode 100644 ashes/src/components/utils/datetime/index.jsx

diff --git a/ashes/src/components/activity-notifications/item.jsx b/ashes/src/components/activity-notifications/item.jsx
index 9763ed063d..e6e552fa66 100644
--- a/ashes/src/components/activity-notifications/item.jsx
+++ b/ashes/src/components/activity-notifications/item.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 // components
-import { DateTime } from '../common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import AuthorTitle from '../activity-trail/activities/base/author-title';
 import AuthorIcon from '../activity-trail/activities/base/author-icon';
 import { representatives } from '../activity-trail/activities/index';
diff --git a/ashes/src/components/activity-trail/activities/base/activity.jsx b/ashes/src/components/activity-trail/activities/base/activity.jsx
index d46224ee1e..4f6d68dff7 100644
--- a/ashes/src/components/activity-trail/activities/base/activity.jsx
+++ b/ashes/src/components/activity-trail/activities/base/activity.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 // components
 import { Button } from 'components/core/button';
-import { Time } from '../../../common/datetime';
+import { Time } from 'components/utils/datetime';
 import AuthorTitle from './author-title';
 import AuthorIcon from './author-icon';
 
diff --git a/ashes/src/components/gift-cards/gift-card.jsx b/ashes/src/components/gift-cards/gift-card.jsx
index d58da3dec5..dcbafcdac5 100644
--- a/ashes/src/components/gift-cards/gift-card.jsx
+++ b/ashes/src/components/gift-cards/gift-card.jsx
@@ -10,7 +10,7 @@ import { ReasonType } from '../../lib/reason-utils';
 import { IndexLink, Link } from 'components/link';
 import { Errors } from 'components/utils/errors';
 import GiftCardCode from './gift-card-code';
-import { DateTime } from '../common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import Currency from '../common/currency';
 import Spinner from 'components/core/spinner';
 import { PageTitle } from '../section-title';
diff --git a/ashes/src/components/orders/order.jsx b/ashes/src/components/orders/order.jsx
index 337442d77c..9f687a4732 100644
--- a/ashes/src/components/orders/order.jsx
+++ b/ashes/src/components/orders/order.jsx
@@ -10,7 +10,7 @@ import { allowedStateTransitions } from '../../paragons/order';
 // components
 import { Dropdown } from '../dropdown';
 import RemorseTimer from './remorseTimer';
-import { DateTime } from '../common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import { PanelList, PanelListItem } from '../panel/panel-list';
 import { PageTitle } from '../section-title';
 import SubNav from './sub-nav';
diff --git a/ashes/src/components/orders/shipments/shipment-row.jsx b/ashes/src/components/orders/shipments/shipment-row.jsx
index 289fd6cc57..331f3ae85f 100644
--- a/ashes/src/components/orders/shipments/shipment-row.jsx
+++ b/ashes/src/components/orders/shipments/shipment-row.jsx
@@ -7,7 +7,7 @@ import { autobind } from 'core-decorators';
 // components
 import TableRow from 'components/table/row';
 import TableCell from 'components/table/cell';
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import AddressDetails from 'components/addresses/address-details';
 import ShippedItem from './shipped-item';
 import Transaction from './transaction';
diff --git a/ashes/src/components/orders/shipments/transaction.jsx b/ashes/src/components/orders/shipments/transaction.jsx
index d388d43a5b..800f8ad613 100644
--- a/ashes/src/components/orders/shipments/transaction.jsx
+++ b/ashes/src/components/orders/shipments/transaction.jsx
@@ -9,7 +9,7 @@ import styles from './transaction.css';
 // components
 import Currency from 'components/common/currency';
 import PaymentMethod from 'components/payment/payment-method';
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 
 //types
 type Props = {
diff --git a/ashes/src/components/payment-row/payment-row.jsx b/ashes/src/components/payment-row/payment-row.jsx
index 12827d50b1..daf0c3ca1d 100644
--- a/ashes/src/components/payment-row/payment-row.jsx
+++ b/ashes/src/components/payment-row/payment-row.jsx
@@ -14,7 +14,7 @@ import StoreCreditDetails from './store-credit';
 import PaymentMethodDetails from 'components/payment/payment-method';
 import TableCell from 'components/table/cell';
 import TableRow from 'components/table/row';
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import { EditButton, DeleteButton } from 'components/core/button';
 import Icon from 'components/core/icon';
 
diff --git a/ashes/src/components/rmas/helpers.jsx b/ashes/src/components/rmas/helpers.jsx
index 5c70403831..f618df674f 100644
--- a/ashes/src/components/rmas/helpers.jsx
+++ b/ashes/src/components/rmas/helpers.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'components/link';
 import TableRow from '../table/row';
 import TableCell from '../table/cell';
-import { DateTime } from '../common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import Currency from '../common/currency';
 import PaymentMethod from '../../components/payment/payment-method';
 
diff --git a/ashes/src/components/table/cell.jsx b/ashes/src/components/table/cell.jsx
index f358e861a6..9be4204294 100644
--- a/ashes/src/components/table/cell.jsx
+++ b/ashes/src/components/table/cell.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 // components
 import { Link } from 'components/link';
 import columnPropType from './column-prop-type';
-import { Moment, Date, DateTime, Time } from '../common/datetime';
+import { Moment, Date, DateTime, Time } from 'components/utils/datetime';
 import Currency from '../common/currency';
 import State from '../common/state';
 import Change from 'components/utils/change';
diff --git a/ashes/src/components/common/datetime.css b/ashes/src/components/utils/datetime/datetime.css
similarity index 100%
rename from ashes/src/components/common/datetime.css
rename to ashes/src/components/utils/datetime/datetime.css
diff --git a/ashes/src/components/common/datetime.jsx b/ashes/src/components/utils/datetime/datetime.jsx
similarity index 77%
rename from ashes/src/components/common/datetime.jsx
rename to ashes/src/components/utils/datetime/datetime.jsx
index d30105985e..b5b9f5aac3 100644
--- a/ashes/src/components/common/datetime.jsx
+++ b/ashes/src/components/utils/datetime/datetime.jsx
@@ -4,7 +4,7 @@ import moment from 'moment';
 
 import styles from './datetime.css';
 
-const Moment = ({utc, value, format, emptyValue}) => {
+export const Moment = ({utc, value, format, emptyValue}) => {
   if (!value) {
     return <span styleName="time">{emptyValue}</span>;
   }
@@ -32,7 +32,7 @@ Moment.defaultProps = {
 };
 
 
-const DateTime = props => <Moment {...props} format={'L LT'} />;
+export const DateTime = props => <Moment {...props} format={'L LT'} />;
 
 DateTime.propTypes = {
   utc: PropTypes.bool,
@@ -44,7 +44,7 @@ DateTime.defaultProps = {
 };
 
 
-const Date = props => <Moment {...props} format={'L'} />;
+export const Date = props => <Moment {...props} format={'L'} />;
 
 Date.propTypes = {
   utc: PropTypes.bool,
@@ -56,7 +56,7 @@ Date.defaultProps = {
 };
 
 
-const Time = props => <Moment {...props} format={'LT'} />;
+export const Time = props => <Moment {...props} format={'LT'} />;
 
 Time.propTypes = {
   utc: PropTypes.bool,
@@ -66,11 +66,3 @@ Time.propTypes = {
 Time.defaultProps = {
   utc: true,
 };
-
-
-export {
-  Moment,
-  DateTime,
-  Date,
-  Time,
-};
diff --git a/ashes/src/components/utils/datetime/index.jsx b/ashes/src/components/utils/datetime/index.jsx
new file mode 100644
index 0000000000..bb1c9cca2a
--- /dev/null
+++ b/ashes/src/components/utils/datetime/index.jsx
@@ -0,0 +1 @@
+export * from './datetime';

From 6ad2ee88987a37425734ba560ed336394306bc15 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 21:06:53 +0300
Subject: [PATCH 02/51] refactor: replace propTypes with Flow

---
 .../components/utils/datetime/datetime.jsx    | 89 +++++++++----------
 1 file changed, 42 insertions(+), 47 deletions(-)

diff --git a/ashes/src/components/utils/datetime/datetime.jsx b/ashes/src/components/utils/datetime/datetime.jsx
index b5b9f5aac3..e50691ce92 100644
--- a/ashes/src/components/utils/datetime/datetime.jsx
+++ b/ashes/src/components/utils/datetime/datetime.jsx
@@ -1,30 +1,56 @@
+/* @flow */
+
+// libs
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
+import classnames from 'classnames';
+
+// styles
+import s from './datetime.css';
+
+type Props = {
+  /** time string */
+  value?: string,
+  /** set UTC  */
+  utc?: boolean,
+  /** set time format */
+  format?: string,
+  /** set empty value text */
+  emptyValue?: string,
+  /** additional className */
+  className?: string
+}
+
+/**
+ * `DateTime`, `Date`, and `Time` - are simple components
+ * build on the top of `Moment`
+ * and serve to show time data
+ *
+ * @function Moment
+ */
+export const Moment = ({
+  utc,
+  value,
+  format,
+  emptyValue,
+  className,
+  ...rest
+}: Props) => {
+  const cls = classnames(s.time, className);
 
-import styles from './datetime.css';
-
-export const Moment = ({utc, value, format, emptyValue}) => {
   if (!value) {
-    return <span styleName="time">{emptyValue}</span>;
+    return <span className={cls}>{emptyValue}</span>;
   }
 
   const timeValue = utc ? moment.utc(value) : moment(value);
 
   return (
-    <time styleName="time" dateTime={timeValue.local().format()}>
+    <time className={cls} dateTime={timeValue.local().format()} {...rest}>
       {timeValue.local().format(format)}
     </time>
   );
 };
 
-Moment.propTypes = {
-  utc: PropTypes.bool,
-  value: PropTypes.string,
-  format: PropTypes.string,
-  emptyValue: PropTypes.string,
-};
-
 Moment.defaultProps = {
   format: 'L LTS',
   utc: true,
@@ -32,37 +58,6 @@ Moment.defaultProps = {
 };
 
 
-export const DateTime = props => <Moment {...props} format={'L LT'} />;
-
-DateTime.propTypes = {
-  utc: PropTypes.bool,
-  value: PropTypes.string
-};
-
-DateTime.defaultProps = {
-  utc: true,
-};
-
-
-export const Date = props => <Moment {...props} format={'L'} />;
-
-Date.propTypes = {
-  utc: PropTypes.bool,
-  value: PropTypes.string
-};
-
-Date.defaultProps = {
-  utc: true,
-};
-
-
-export const Time = props => <Moment {...props} format={'LT'} />;
-
-Time.propTypes = {
-  utc: PropTypes.bool,
-  value: PropTypes.string
-};
-
-Time.defaultProps = {
-  utc: true,
-};
+export const DateTime = (props: Props) => <Moment {...props} format={'L LT'} />;
+export const Date = (props: Props) => <Moment {...props} format={'L'} />;
+export const Time = (props: Props) => <Moment {...props} format={'LT'} />;

From ed66de5b60c8bad1dd904a2ef7924f82ca22fdf5 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Fri, 16 Jun 2017 11:30:46 -0700
Subject: [PATCH 03/51] open

---
 ashes/Makefile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ashes/Makefile b/ashes/Makefile
index d4a34ced49..aa2f619495 100644
--- a/ashes/Makefile
+++ b/ashes/Makefile
@@ -1,6 +1,7 @@
 include ../makelib
 header = $(call baseheader, $(1), ashes)
 
+
 export PATH := $(CURDIR)/node_modules/.bin:$(PATH)
 SHELL := env PATH=$(PATH) /bin/sh
 

From 6f9114f18cc591fcab474b4a57c6d57fa2b14bd8 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Fri, 9 Jun 2017 16:52:05 -0700
Subject: [PATCH 04/51] Add fonts and rework bell button

---
 .../components/activity-notifications/indicator.css    |  4 ++++
 .../components/activity-notifications/indicator.jsx    | 10 +++-------
 ashes/src/components/core/button/button.css            | 10 ++++------
 ashes/src/css/colors.css                               |  7 ++++++-
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/ashes/src/components/activity-notifications/indicator.css b/ashes/src/components/activity-notifications/indicator.css
index 2fcab2f603..d671482a96 100644
--- a/ashes/src/components/activity-notifications/indicator.css
+++ b/ashes/src/components/activity-notifications/indicator.css
@@ -35,10 +35,14 @@
 
 
 .toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   color: var(--color-additional-text);
   background-color: transparent;
   height: 100%;
+  cursor: pointer;
 
   & i {
     vertical-align: sub;
diff --git a/ashes/src/components/activity-notifications/indicator.jsx b/ashes/src/components/activity-notifications/indicator.jsx
index 8ad8ecaeec..1e7ec74568 100644
--- a/ashes/src/components/activity-notifications/indicator.jsx
+++ b/ashes/src/components/activity-notifications/indicator.jsx
@@ -6,9 +6,6 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { autobind } from 'core-decorators';
 
-// components
-import { Button } from 'components/core/button';
-
 // styles
 import s from './indicator.css';
 
@@ -62,14 +59,13 @@ export default class NotificationIndicator extends Component {
 
     return (
       <div className={s.block}>
-        <Button
-          icon="bell"
+        <div
           className={classes}
           onClick={this.toggleNotifications}
-          fullWidth
         >
+          <i className="icon icon-bell" />
           {this.indicator}
-        </Button>
+        </div>
       </div>
     );
   }
diff --git a/ashes/src/components/core/button/button.css b/ashes/src/components/core/button/button.css
index 1f794c354b..53b80cfa2c 100644
--- a/ashes/src/components/core/button/button.css
+++ b/ashes/src/components/core/button/button.css
@@ -8,12 +8,10 @@
   display: inline-flex; /* not just `flex` because of legacy */
   align-items: center;
   justify-content: center;
-  padding: 11px 20px;
+  padding: 10px 20px;
   color: var(--color-text);
   background: var(--bg-grey-buttons);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 18px;
+  font: var(--font-labels);
   border: none;
   vertical-align: top;
   user-select: none;
@@ -37,7 +35,7 @@
 
   &.onlyIcon {
     width: 40px;
-    padding: 11px 0;
+    padding: 10px 0;
   }
 
   &.fullWidth {
@@ -46,7 +44,7 @@
   }
 
   &.small {
-    padding: 4px 5px;
+    padding: 3px 5px;
   }
 
   &.small.onlyIcon {
diff --git a/ashes/src/css/colors.css b/ashes/src/css/colors.css
index 4468b5c331..6e3f118721 100644
--- a/ashes/src/css/colors.css
+++ b/ashes/src/css/colors.css
@@ -33,7 +33,12 @@
   --bg-message-error: #ffb1b1;
   /* all other background colors are damned! */
 
-
+  /* allowed fonts */
+  --font-page-title: 300 30px/41px 'Open Sans';
+  --font-section-title: 600 16px/22px 'Open Sans';
+  --font-labels: 600 14px/20px 'Open Sans';
+  --font-nav: 400 14px/20px 'Open Sans';
+  --font-body: 400 13px/18px 'Open Sans';
 
 
 

From 0dce966c70b6a667104e204c57a65c3b489a6a70 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Fri, 9 Jun 2017 17:50:10 -0700
Subject: [PATCH 05/51] Handle core fonts

---
 ashes/src/components/core/alert/alert.css     |  3 +-
 ashes/src/components/core/button/button.css   |  3 +-
 .../src/components/core/checkbox/checkbox.css | 30 +++++--------------
 ashes/src/components/core/modal/modal.css     |  9 ++----
 .../src/components/core/page-nav/page-nav.css |  7 ++---
 .../core/radio-button/radio-button.css        | 20 +++++++------
 .../core/radio-button/radio-button.jsx        |  2 +-
 .../core/rounded-pill/rounded-pill.css        | 15 +++++-----
 .../core/swatch-input/swatch-input.css        | 10 +++----
 .../components/core/text-input/text-input.css |  2 +-
 10 files changed, 38 insertions(+), 63 deletions(-)

diff --git a/ashes/src/components/core/alert/alert.css b/ashes/src/components/core/alert/alert.css
index 7edeed49a9..6e3041477a 100644
--- a/ashes/src/components/core/alert/alert.css
+++ b/ashes/src/components/core/alert/alert.css
@@ -12,8 +12,7 @@
 .message {
   display: flex;
   align-items: center;
-  font-size: 13px;
-  line-height: 18px;
+  font: var(--font-body);
 
   & > i {
     display: inline-flex; /* fixes extra pixel in height */
diff --git a/ashes/src/components/core/button/button.css b/ashes/src/components/core/button/button.css
index 53b80cfa2c..39829f33c5 100644
--- a/ashes/src/components/core/button/button.css
+++ b/ashes/src/components/core/button/button.css
@@ -52,7 +52,7 @@
   }
 }
 
-.icon {
+.icon:not(.only) {
   font-size: 10px;
   transition: all .2s;
 }
@@ -62,7 +62,6 @@
 }
 
 .only {
-  font-size: 14px;
   margin: 0 auto;
 }
 
diff --git a/ashes/src/components/core/checkbox/checkbox.css b/ashes/src/components/core/checkbox/checkbox.css
index 618f08e5ee..2fd5426cb2 100644
--- a/ashes/src/components/core/checkbox/checkbox.css
+++ b/ashes/src/components/core/checkbox/checkbox.css
@@ -3,15 +3,10 @@
 .checkbox {
   display: inline-flex;
   align-items: center;
+  font: var(--font-nav);
 
   & input {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    margin: 0;
-    padding: 0;
-    font-size: 1rem;
-    opacity: 0;
+    display: none;
   }
 
   & .label {
@@ -21,7 +16,6 @@
     justify-content: flex-start;
     width: 100%;
     height: 100%;
-    font-size: 13px;
     color: var(--color-text);
   }
 
@@ -46,8 +40,6 @@
     left: 2px;
     width: 20px;
     height: 20px;
-    font-size: 12px;
-    font-weight: 500;
     line-height: 20px;
     text-align: center;
     font-family: "fontello";
@@ -151,7 +143,6 @@
     width: 36px;
     height: 36px;
     font-size: 24px;
-    font-weight: 400;
     line-height: 36px;
     color: var(--color-light-text);
     transform: scale(1) translateY(-50%);
@@ -160,10 +151,6 @@
   & input:checked + .label::after {
     background: var(--bg-nav-main);
   }
-
-  & .label {
-    line-height: 40px;
-  }
 }
 
 .slideCheckbox {
@@ -184,9 +171,9 @@
     padding: 0 10px;
     text-align: right;
     color: var(--color-light-text);
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 34px;
+    /*font-size: 16px;
+    line-height: 34px;*/
+    font: var(--font-section-title);
     user-select: none;
     cursor: pointer;
   }
@@ -203,13 +190,10 @@
     border: none;
     border-radius: 17px;
     transition: all .4s ease;
-    padding: 0 10px;
+    padding: 6px 10px 0;
     text-indent: -42px;
     text-align: left;
     color: var(--color-light-text);
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 34px;
   }
 
   & .label::after {
@@ -217,13 +201,13 @@
     position: absolute;
     left: 5px;
     top: 5px;
+    padding-top: 1px;
     width: 24px;
     height: 24px;
     background: var(--bg-white);
     border-radius: 17px;
     transition: all .4s ease;
     text-indent: 42px;
-    line-height: 24px;
   }
 
   & input {
diff --git a/ashes/src/components/core/modal/modal.css b/ashes/src/components/core/modal/modal.css
index e2f81087a4..bb7bc0abd3 100644
--- a/ashes/src/components/core/modal/modal.css
+++ b/ashes/src/components/core/modal/modal.css
@@ -12,9 +12,7 @@
   background-color: var(--bg-grey-headers);
   border-bottom: 1px solid var(--color-border);
   padding: 18px 20px 17px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
+  font: var(--font-section-title);
 }
 
 .title {
@@ -32,10 +30,7 @@
 .body {
   width: 100%;
   padding: 20px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left
+  font: var(--font-nav);
 }
 
 .footer {
diff --git a/ashes/src/components/core/page-nav/page-nav.css b/ashes/src/components/core/page-nav/page-nav.css
index d76b064b57..6ac134d1a5 100644
--- a/ashes/src/components/core/page-nav/page-nav.css
+++ b/ashes/src/components/core/page-nav/page-nav.css
@@ -10,7 +10,7 @@
 }
 
 .item {
-  font-size: 14px;
+  font: var(--font-nav);
   color: var(--color-text);
   display: inline-block;
   vertical-align: top;
@@ -94,7 +94,7 @@
   display: block;
   width: 100%;
   margin: 0;
-  font-weight: 600;
+  font: var(--font-labels);
   transition: all .2s;
 }
 
@@ -104,8 +104,7 @@
 
 .dropdown .item a {
   display: block;
-  padding: 11px 20px;
-  line-height: 18px;
+  padding: 10px 20px;
 }
 
 .dropdown .item a:hover {
diff --git a/ashes/src/components/core/radio-button/radio-button.css b/ashes/src/components/core/radio-button/radio-button.css
index a2090cc887..924cfde336 100644
--- a/ashes/src/components/core/radio-button/radio-button.css
+++ b/ashes/src/components/core/radio-button/radio-button.css
@@ -29,12 +29,15 @@
   }
 }
 
+.input {
+  display: none;
+}
+
 .label {
   position: relative;
-  display: inline-block;
-  margin-left: -24px;
-  line-height: 24px;
-  font-size: 13px;
+  display: flex;
+  align-items: center;
+  font: var(--font-nav);
   color: var(--color-text);
 
   &:before {
@@ -42,11 +45,10 @@
     display: inline-block;
     height: 24px;
     width: 24px;
-    margin: 0.25em 0.5em 0.25em 0.25em;
+    margin: 4px 8px 4px 4px;
     border: 2px solid var(--color-border);
-    border-radius: 13px;
+    border-radius: 50%;
     background: var(--bg-grey-headers);
-    vertical-align: middle;
     transition: all .2s;
   }
 
@@ -57,10 +59,10 @@
     position: absolute;
     height: 16px;
     width: 16px;
-    margin: 0.25em;
+    margin: 4px;
     top: 4px;
     left: 4px;
-    border-radius: 9px;
+    border-radius: 50%;
     background: var(--bg-nav-main);
     z-index: 1;
     opacity: 0;
diff --git a/ashes/src/components/core/radio-button/radio-button.jsx b/ashes/src/components/core/radio-button/radio-button.jsx
index 0c27d2ddfd..3e5e116e1d 100644
--- a/ashes/src/components/core/radio-button/radio-button.jsx
+++ b/ashes/src/components/core/radio-button/radio-button.jsx
@@ -32,7 +32,7 @@ const RadioButton = (props: Props) => {
 
   return (
     <div className={classNames(s.radio, className)}>
-      <input type="radio" id={id} {...rest} />
+      <input type="radio" id={id} className={s.input} {...rest} />
       <label htmlFor={id} className={s.label}>{label}</label>
     </div>
   );
diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.css b/ashes/src/components/core/rounded-pill/rounded-pill.css
index 46bb2c43e2..b4ad6e6797 100644
--- a/ashes/src/components/core/rounded-pill/rounded-pill.css
+++ b/ashes/src/components/core/rounded-pill/rounded-pill.css
@@ -6,8 +6,7 @@
   align-items: stretch;
   vertical-align: top;
   min-height: 32px;
-  font-size: 12px;
-  line-height: 16px;
+  font: var(--font-body);
   color: var(--color-light-text);
   background-color: var(--bg-nav-main);
   border-radius: 16px;
@@ -37,21 +36,21 @@
 }
 
 .label {
-  padding: 8px 15px;
+  padding: 7px 14px;
   border-radius: 17px;
   transition: background .2s;
 
   .closable & {
     border-radius: 17px 0 0 17px;
   }
+
+  .main.closable & {
+    padding-right: 8px;
+    padding-left: 10px;
+  }
 }
 
 .main.clickable:not(.loading) .label:hover {
   background-color: var(--bg-nav-active);
   cursor: pointer;
 }
-
-.main.closable .label {
-  padding-right: 8px;
-  padding-left: 10px;
-}
diff --git a/ashes/src/components/core/swatch-input/swatch-input.css b/ashes/src/components/core/swatch-input/swatch-input.css
index 970f860636..1eaddf4d3b 100644
--- a/ashes/src/components/core/swatch-input/swatch-input.css
+++ b/ashes/src/components/core/swatch-input/swatch-input.css
@@ -2,27 +2,25 @@
 
 .swatchInput {
   display: flex;
+  align-items: stretch;
+  font: var(--font-nav);
 
   &:before {
     content: "#";
     position: absolute;
-    padding: 0 10px;
-    line-height: 40px;
-    font-size: 20px;
+    padding: 10px 10px;
     color: var(--color-additional-text);
   }
 
   & .input {
     width: 130px;
-    height: 40px;
-    padding-left: 30px;
+    padding-left: 26px;
     text-transform: uppercase;
   }
 }
 
 .swatch {
   width: 40px;
-  height: 40px;
   border: 1px solid var(--color-border);
   border-left: none;
 }
diff --git a/ashes/src/components/core/text-input/text-input.css b/ashes/src/components/core/text-input/text-input.css
index 099a8d8b52..9e701cd968 100644
--- a/ashes/src/components/core/text-input/text-input.css
+++ b/ashes/src/components/core/text-input/text-input.css
@@ -5,7 +5,7 @@
   border: 1px solid var(--color-border);
   transition: all .2s;
   outline: none;
-  font-size: 13px;
+  font: var(--font-nav);
 
   &[disabled] {
     background-color: var(--bg-grey-headers);

From 059b651274fc227a10d46925085148dc6e7df907 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Wed, 14 Jun 2017 12:36:45 -0700
Subject: [PATCH 06/51] rename colors.css to variables.css

---
 ashes/src/components/activity-notifications/block.css           | 2 +-
 ashes/src/components/activity-notifications/indicator.css       | 2 +-
 ashes/src/components/activity-notifications/item.css            | 2 +-
 ashes/src/components/activity-notifications/panel.css           | 2 +-
 ashes/src/components/analytics/question-box.css                 | 2 +-
 ashes/src/components/analytics/segment-control-list.css         | 2 +-
 ashes/src/components/analytics/segment-control.css              | 2 +-
 ashes/src/components/analytics/static-column-selector.css       | 2 +-
 ashes/src/components/analytics/trend-button.css                 | 2 +-
 ashes/src/components/auth/css/auth.css                          | 2 +-
 ashes/src/components/auth/css/wrap-to-lines.css                 | 2 +-
 ashes/src/components/bulk-actions/modal/modal.css               | 2 +-
 ashes/src/components/core/alert/alert.css                       | 2 +-
 ashes/src/components/core/button-with-menu/button-with-menu.css | 2 +-
 ashes/src/components/core/button/button.css                     | 2 +-
 ashes/src/components/core/checkbox/checkbox.css                 | 2 +-
 ashes/src/components/core/countdown/countdown.css               | 2 +-
 ashes/src/components/core/counter/counter.css                   | 2 +-
 ashes/src/components/core/modal-container/modal-container.css   | 2 +-
 ashes/src/components/core/modal/modal.css                       | 2 +-
 ashes/src/components/core/page-nav/page-nav.css                 | 2 +-
 ashes/src/components/core/radio-button/radio-button.css         | 2 +-
 ashes/src/components/core/rounded-pill/rounded-pill.css         | 2 +-
 ashes/src/components/core/spinner/spinner.css                   | 2 +-
 ashes/src/components/core/swatch-input/swatch-input.css         | 2 +-
 ashes/src/components/core/text-input/text-input.css             | 2 +-
 ashes/src/components/coupons-panel/coupons-panel.css            | 2 +-
 ashes/src/components/coupons/form.css                           | 2 +-
 ashes/src/components/coupons/form/styles.css                    | 2 +-
 ashes/src/components/customers-groups/group-template/styles.css | 2 +-
 ashes/src/components/customers-groups/select-groups.css         | 2 +-
 ashes/src/components/customers-groups/stats/stats.css           | 2 +-
 ashes/src/components/customers/groups/groups.css                | 2 +-
 ashes/src/components/customers/title-block.css                  | 2 +-
 ashes/src/components/discounts-panel/discounts-panel.css        | 2 +-
 ashes/src/components/docs/colors/bg-colors.css                  | 2 +-
 ashes/src/components/docs/colors/text-colors.css                | 2 +-
 ashes/src/components/docs/icons/icons.css                       | 2 +-
 ashes/src/components/docs/logos/logos.css                       | 2 +-
 ashes/src/components/docs/svg-icons/svg-icons.css               | 2 +-
 ashes/src/components/dropdown/dropdown-item.css                 | 2 +-
 ashes/src/components/dropdown/dropdown-search.css               | 2 +-
 ashes/src/components/dropdown/dropdown.css                      | 2 +-
 ashes/src/components/errors/error.css                           | 2 +-
 ashes/src/components/forms/css/password-input.css               | 2 +-
 ashes/src/components/header/breadcrumb.css                      | 2 +-
 ashes/src/components/header/header.css                          | 2 +-
 ashes/src/components/header/usermenu.css                        | 2 +-
 ashes/src/components/image-card/image-card.css                  | 2 +-
 ashes/src/components/images/accordion/accordion.css             | 2 +-
 ashes/src/components/images/album-wrapper/album-wrapper.css     | 2 +-
 ashes/src/components/images/images.css                          | 2 +-
 ashes/src/components/inventory/item-details.css                 | 2 +-
 ashes/src/components/link/link.css                              | 2 +-
 ashes/src/components/live-search/live-search.css                | 2 +-
 ashes/src/components/live-search/menu/menu.css                  | 2 +-
 ashes/src/components/merchant-applications/list.css             | 2 +-
 ashes/src/components/object-page/object-details.css             | 2 +-
 ashes/src/components/orders/shipments/shipment-row.css          | 2 +-
 ashes/src/components/overlay/overlay.css                        | 2 +-
 ashes/src/components/panel-header/panel-header.css              | 2 +-
 ashes/src/components/panel/panel-list.css                       | 2 +-
 ashes/src/components/participants/participants.css              | 2 +-
 ashes/src/components/payment-row/payment-row.css                | 2 +-
 ashes/src/components/payment/payment-method.css                 | 2 +-
 ashes/src/components/payments-panel/payments.css                | 2 +-
 ashes/src/components/products-add/products-add.css              | 2 +-
 ashes/src/components/products/category-item.css                 | 2 +-
 ashes/src/components/products/form.css                          | 2 +-
 ashes/src/components/products/product-amazon.css                | 2 +-
 ashes/src/components/products/skus/editable-sku-row.css         | 2 +-
 ashes/src/components/promotions/attrs-edit.css                  | 2 +-
 ashes/src/components/promotions/coupon-new.css                  | 2 +-
 ashes/src/components/promotions/discounts/discounts.css         | 2 +-
 ashes/src/components/promotions/widgets/select-product.css      | 2 +-
 ashes/src/components/selectable-list/selectable-list.css        | 2 +-
 ashes/src/components/sidebar/entries/entries.css                | 2 +-
 ashes/src/components/site/auth-pages.css                        | 2 +-
 ashes/src/components/site/site.css                              | 2 +-
 ashes/src/components/sortable/sortable-tiles.css                | 2 +-
 ashes/src/components/table/column-selector.css                  | 2 +-
 ashes/src/components/tabs/tabs.css                              | 2 +-
 ashes/src/components/tags/tags.css                              | 2 +-
 ashes/src/components/taxonomies/taxonomy-dropdown.css           | 2 +-
 .../components/taxonomies/taxons-dropdown/taxons-dropdown.css   | 2 +-
 ashes/src/components/taxonomies/taxons/taxon-list-widget.css    | 2 +-
 ashes/src/components/taxonomies/widget/taxonomy-widget.css      | 2 +-
 ashes/src/components/tree-node/tree-node.css                    | 2 +-
 ashes/src/components/typeahead/typeahead.css                    | 2 +-
 ashes/src/components/upload/upload.css                          | 2 +-
 ashes/src/components/utils/change/change.css                    | 2 +-
 ashes/src/css/base.css                                          | 2 +-
 ashes/src/css/normalize.css                                     | 2 +-
 ashes/src/css/{colors.css => variables.css}                     | 0
 ashes/src/less/_variables.less                                  | 2 +-
 95 files changed, 94 insertions(+), 94 deletions(-)
 rename ashes/src/css/{colors.css => variables.css} (100%)

diff --git a/ashes/src/components/activity-notifications/block.css b/ashes/src/components/activity-notifications/block.css
index 0ee33b2a1b..63fae29bf0 100644
--- a/ashes/src/components/activity-notifications/block.css
+++ b/ashes/src/components/activity-notifications/block.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   height: 100%;
diff --git a/ashes/src/components/activity-notifications/indicator.css b/ashes/src/components/activity-notifications/indicator.css
index d671482a96..feb07c356f 100644
--- a/ashes/src/components/activity-notifications/indicator.css
+++ b/ashes/src/components/activity-notifications/indicator.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   width: 85px;
diff --git a/ashes/src/components/activity-notifications/item.css b/ashes/src/components/activity-notifications/item.css
index a3b81a6e1e..9ac6902511 100644
--- a/ashes/src/components/activity-notifications/item.css
+++ b/ashes/src/components/activity-notifications/item.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   padding: 10px;
diff --git a/ashes/src/components/activity-notifications/panel.css b/ashes/src/components/activity-notifications/panel.css
index 937b718e59..2f21a3429b 100644
--- a/ashes/src/components/activity-notifications/panel.css
+++ b/ashes/src/components/activity-notifications/panel.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .markAll {
   width: 310px;
diff --git a/ashes/src/components/analytics/question-box.css b/ashes/src/components/analytics/question-box.css
index 9d6882cbac..2bb0e6a00f 100644
--- a/ashes/src/components/analytics/question-box.css
+++ b/ashes/src/components/analytics/question-box.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .question-box-container-active {
   width: 225px;
diff --git a/ashes/src/components/analytics/segment-control-list.css b/ashes/src/components/analytics/segment-control-list.css
index 532efb869f..a0a645a6fb 100644
--- a/ashes/src/components/analytics/segment-control-list.css
+++ b/ashes/src/components/analytics/segment-control-list.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .segment-control-list-legend {
   margin-top: 51px;
diff --git a/ashes/src/components/analytics/segment-control.css b/ashes/src/components/analytics/segment-control.css
index 4f3b0f12cc..ef59fe472a 100644
--- a/ashes/src/components/analytics/segment-control.css
+++ b/ashes/src/components/analytics/segment-control.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .segment-control-container-active {
   width: 66px;
diff --git a/ashes/src/components/analytics/static-column-selector.css b/ashes/src/components/analytics/static-column-selector.css
index 05c49ae9c0..3f6e9e993e 100644
--- a/ashes/src/components/analytics/static-column-selector.css
+++ b/ashes/src/components/analytics/static-column-selector.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .column-selector {
   position: relative;
diff --git a/ashes/src/components/analytics/trend-button.css b/ashes/src/components/analytics/trend-button.css
index 63e0c47d75..2ecbeec5b6 100644
--- a/ashes/src/components/analytics/trend-button.css
+++ b/ashes/src/components/analytics/trend-button.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .trend-button-container-gain {
   display: inline-block;
diff --git a/ashes/src/components/auth/css/auth.css b/ashes/src/components/auth/css/auth.css
index 6220d41c24..e6ce78cc39 100644
--- a/ashes/src/components/auth/css/auth.css
+++ b/ashes/src/components/auth/css/auth.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .title {
   font-size: 20px;
diff --git a/ashes/src/components/auth/css/wrap-to-lines.css b/ashes/src/components/auth/css/wrap-to-lines.css
index 3c3f7d9468..b378c9ed3b 100644
--- a/ashes/src/components/auth/css/wrap-to-lines.css
+++ b/ashes/src/components/auth/css/wrap-to-lines.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/bulk-actions/modal/modal.css b/ashes/src/components/bulk-actions/modal/modal.css
index 3be4e54279..494b9b9847 100644
--- a/ashes/src/components/bulk-actions/modal/modal.css
+++ b/ashes/src/components/bulk-actions/modal/modal.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .cancelReason {
   margin: 30px 0 0 0;
diff --git a/ashes/src/components/core/alert/alert.css b/ashes/src/components/core/alert/alert.css
index 6e3041477a..612d9161ff 100644
--- a/ashes/src/components/core/alert/alert.css
+++ b/ashes/src/components/core/alert/alert.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .alert {
   position: relative;
diff --git a/ashes/src/components/core/button-with-menu/button-with-menu.css b/ashes/src/components/core/button-with-menu/button-with-menu.css
index 6f06ebf984..db41455b95 100644
--- a/ashes/src/components/core/button-with-menu/button-with-menu.css
+++ b/ashes/src/components/core/button-with-menu/button-with-menu.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .button {
   display: inline-block;
diff --git a/ashes/src/components/core/button/button.css b/ashes/src/components/core/button/button.css
index 39829f33c5..6dd9cb48f1 100644
--- a/ashes/src/components/core/button/button.css
+++ b/ashes/src/components/core/button/button.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 /*
  * General Button Styles
diff --git a/ashes/src/components/core/checkbox/checkbox.css b/ashes/src/components/core/checkbox/checkbox.css
index 2fd5426cb2..5931e94f4f 100644
--- a/ashes/src/components/core/checkbox/checkbox.css
+++ b/ashes/src/components/core/checkbox/checkbox.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .checkbox {
   display: inline-flex;
diff --git a/ashes/src/components/core/countdown/countdown.css b/ashes/src/components/core/countdown/countdown.css
index 7f2c7c5bcb..a8896b805d 100644
--- a/ashes/src/components/core/countdown/countdown.css
+++ b/ashes/src/components/core/countdown/countdown.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .countdown {
   display: inline-block;
diff --git a/ashes/src/components/core/counter/counter.css b/ashes/src/components/core/counter/counter.css
index 25eccdb48e..6c7f08637a 100644
--- a/ashes/src/components/core/counter/counter.css
+++ b/ashes/src/components/core/counter/counter.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .counter {
   display: inline-flex;
diff --git a/ashes/src/components/core/modal-container/modal-container.css b/ashes/src/components/core/modal-container/modal-container.css
index 5159a4c281..aa87c9a27b 100644
--- a/ashes/src/components/core/modal-container/modal-container.css
+++ b/ashes/src/components/core/modal-container/modal-container.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .container {
   position: fixed;
diff --git a/ashes/src/components/core/modal/modal.css b/ashes/src/components/core/modal/modal.css
index bb7bc0abd3..d01764188a 100644
--- a/ashes/src/components/core/modal/modal.css
+++ b/ashes/src/components/core/modal/modal.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .modal {
   min-width: 640px;
diff --git a/ashes/src/components/core/page-nav/page-nav.css b/ashes/src/components/core/page-nav/page-nav.css
index 6ac134d1a5..1c4255ee9c 100644
--- a/ashes/src/components/core/page-nav/page-nav.css
+++ b/ashes/src/components/core/page-nav/page-nav.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   position: relative;
diff --git a/ashes/src/components/core/radio-button/radio-button.css b/ashes/src/components/core/radio-button/radio-button.css
index 924cfde336..beff926d0e 100644
--- a/ashes/src/components/core/radio-button/radio-button.css
+++ b/ashes/src/components/core/radio-button/radio-button.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .radio {
   input[type=radio]:not(old) {
diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.css b/ashes/src/components/core/rounded-pill/rounded-pill.css
index b4ad6e6797..d3df4c69b4 100644
--- a/ashes/src/components/core/rounded-pill/rounded-pill.css
+++ b/ashes/src/components/core/rounded-pill/rounded-pill.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .main {
   display: inline-flex;
diff --git a/ashes/src/components/core/spinner/spinner.css b/ashes/src/components/core/spinner/spinner.css
index 32f15105fb..a8e2d7b64a 100644
--- a/ashes/src/components/core/spinner/spinner.css
+++ b/ashes/src/components/core/spinner/spinner.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .root {
   position: relative;
diff --git a/ashes/src/components/core/swatch-input/swatch-input.css b/ashes/src/components/core/swatch-input/swatch-input.css
index 1eaddf4d3b..39849ceec0 100644
--- a/ashes/src/components/core/swatch-input/swatch-input.css
+++ b/ashes/src/components/core/swatch-input/swatch-input.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .swatchInput {
   display: flex;
diff --git a/ashes/src/components/core/text-input/text-input.css b/ashes/src/components/core/text-input/text-input.css
index 9e701cd968..dacfc0b861 100644
--- a/ashes/src/components/core/text-input/text-input.css
+++ b/ashes/src/components/core/text-input/text-input.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .input {
   padding: 10px;
diff --git a/ashes/src/components/coupons-panel/coupons-panel.css b/ashes/src/components/coupons-panel/coupons-panel.css
index 4106bc1f43..d70afdb724 100644
--- a/ashes/src/components/coupons-panel/coupons-panel.css
+++ b/ashes/src/components/coupons-panel/coupons-panel.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .coupons-panel {
   & td {
diff --git a/ashes/src/components/coupons/form.css b/ashes/src/components/coupons/form.css
index 6a6d5e7a8e..15c75e226b 100644
--- a/ashes/src/components/coupons/form.css
+++ b/ashes/src/components/coupons/form.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .field-label {
   font-weight: 600;
diff --git a/ashes/src/components/coupons/form/styles.css b/ashes/src/components/coupons/form/styles.css
index 6165747c3c..c92bc28110 100644
--- a/ashes/src/components/coupons/form/styles.css
+++ b/ashes/src/components/coupons/form/styles.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .form-subset {
   margin-left: 35px;
diff --git a/ashes/src/components/customers-groups/group-template/styles.css b/ashes/src/components/customers-groups/group-template/styles.css
index 45a9fc343a..b05bd203a1 100644
--- a/ashes/src/components/customers-groups/group-template/styles.css
+++ b/ashes/src/components/customers-groups/group-template/styles.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .template {
   height: 300px;
diff --git a/ashes/src/components/customers-groups/select-groups.css b/ashes/src/components/customers-groups/select-groups.css
index 42e0c4ec10..a5f7335ba8 100644
--- a/ashes/src/components/customers-groups/select-groups.css
+++ b/ashes/src/components/customers-groups/select-groups.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .groups-table {
   margin-top: 20px;
diff --git a/ashes/src/components/customers-groups/stats/stats.css b/ashes/src/components/customers-groups/stats/stats.css
index 63de945ec9..6572dbb778 100644
--- a/ashes/src/components/customers-groups/stats/stats.css
+++ b/ashes/src/components/customers-groups/stats/stats.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .stats {
   margin-bottom: 40px;
diff --git a/ashes/src/components/customers/groups/groups.css b/ashes/src/components/customers/groups/groups.css
index 907648c0be..1532c90e40 100644
--- a/ashes/src/components/customers/groups/groups.css
+++ b/ashes/src/components/customers/groups/groups.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .empty {
   font-size: 16px;
diff --git a/ashes/src/components/customers/title-block.css b/ashes/src/components/customers/title-block.css
index c0b26bfbd8..848a34671c 100644
--- a/ashes/src/components/customers/title-block.css
+++ b/ashes/src/components/customers/title-block.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 :root {
   --header-height: 60px;
diff --git a/ashes/src/components/discounts-panel/discounts-panel.css b/ashes/src/components/discounts-panel/discounts-panel.css
index 403354b853..7f2bbb4e69 100644
--- a/ashes/src/components/discounts-panel/discounts-panel.css
+++ b/ashes/src/components/discounts-panel/discounts-panel.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .empty-message {
   padding: 20px;
diff --git a/ashes/src/components/docs/colors/bg-colors.css b/ashes/src/components/docs/colors/bg-colors.css
index 15fb0e9d5e..84067e9295 100644
--- a/ashes/src/components/docs/colors/bg-colors.css
+++ b/ashes/src/components/docs/colors/bg-colors.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/docs/colors/text-colors.css b/ashes/src/components/docs/colors/text-colors.css
index fdbf16b0d7..f00feea936 100644
--- a/ashes/src/components/docs/colors/text-colors.css
+++ b/ashes/src/components/docs/colors/text-colors.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/docs/icons/icons.css b/ashes/src/components/docs/icons/icons.css
index daa847bf3c..6c564d49ec 100644
--- a/ashes/src/components/docs/icons/icons.css
+++ b/ashes/src/components/docs/icons/icons.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .container {
   display: flex;
diff --git a/ashes/src/components/docs/logos/logos.css b/ashes/src/components/docs/logos/logos.css
index 08cce5779e..08ed830f1c 100644
--- a/ashes/src/components/docs/logos/logos.css
+++ b/ashes/src/components/docs/logos/logos.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .container {
   display: flex;
diff --git a/ashes/src/components/docs/svg-icons/svg-icons.css b/ashes/src/components/docs/svg-icons/svg-icons.css
index 5b45f8d22c..e4ef1576dc 100644
--- a/ashes/src/components/docs/svg-icons/svg-icons.css
+++ b/ashes/src/components/docs/svg-icons/svg-icons.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .container {
   display: flex;
diff --git a/ashes/src/components/dropdown/dropdown-item.css b/ashes/src/components/dropdown/dropdown-item.css
index 38ee94ee08..2955b40a31 100644
--- a/ashes/src/components/dropdown/dropdown-item.css
+++ b/ashes/src/components/dropdown/dropdown-item.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .item {
   padding: 0 20px;
diff --git a/ashes/src/components/dropdown/dropdown-search.css b/ashes/src/components/dropdown/dropdown-search.css
index 7e2e861587..bc8fc58d01 100644
--- a/ashes/src/components/dropdown/dropdown-search.css
+++ b/ashes/src/components/dropdown/dropdown-search.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .searchbar-wrapper {
   width: 100%;
diff --git a/ashes/src/components/dropdown/dropdown.css b/ashes/src/components/dropdown/dropdown.css
index a7d49579c8..673c3c4df9 100644
--- a/ashes/src/components/dropdown/dropdown.css
+++ b/ashes/src/components/dropdown/dropdown.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .needle {
   color: var(--color-link);
diff --git a/ashes/src/components/errors/error.css b/ashes/src/components/errors/error.css
index 3662bbf112..f31aad3592 100644
--- a/ashes/src/components/errors/error.css
+++ b/ashes/src/components/errors/error.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .error {
   margin: 50px auto;
diff --git a/ashes/src/components/forms/css/password-input.css b/ashes/src/components/forms/css/password-input.css
index c672e10bce..1ea226e764 100644
--- a/ashes/src/components/forms/css/password-input.css
+++ b/ashes/src/components/forms/css/password-input.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .password-input {
   position: relative;
diff --git a/ashes/src/components/header/breadcrumb.css b/ashes/src/components/header/breadcrumb.css
index 1033d9c4f6..f4647653f2 100644
--- a/ashes/src/components/header/breadcrumb.css
+++ b/ashes/src/components/header/breadcrumb.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/header/header.css b/ashes/src/components/header/header.css
index 0c8dd822d7..9f15b13bdc 100644
--- a/ashes/src/components/header/header.css
+++ b/ashes/src/components/header/header.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .header,
 .sub-nav,
diff --git a/ashes/src/components/header/usermenu.css b/ashes/src/components/header/usermenu.css
index 70a280080b..0f1576c3fa 100644
--- a/ashes/src/components/header/usermenu.css
+++ b/ashes/src/components/header/usermenu.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .usermenu {
   position: absolute;
diff --git a/ashes/src/components/image-card/image-card.css b/ashes/src/components/image-card/image-card.css
index 7a640986f0..d71e6310a6 100644
--- a/ashes/src/components/image-card/image-card.css
+++ b/ashes/src/components/image-card/image-card.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .card {
   position: relative;
diff --git a/ashes/src/components/images/accordion/accordion.css b/ashes/src/components/images/accordion/accordion.css
index 63363a6b2a..3c741212fe 100644
--- a/ashes/src/components/images/accordion/accordion.css
+++ b/ashes/src/components/images/accordion/accordion.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .accordion {
   margin-bottom: 40px;
diff --git a/ashes/src/components/images/album-wrapper/album-wrapper.css b/ashes/src/components/images/album-wrapper/album-wrapper.css
index 0a46af7002..c9cd65aa14 100644
--- a/ashes/src/components/images/album-wrapper/album-wrapper.css
+++ b/ashes/src/components/images/album-wrapper/album-wrapper.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .accordion {
   margin-bottom: 40px;
diff --git a/ashes/src/components/images/images.css b/ashes/src/components/images/images.css
index e0c27d8a91..ee6ef8de76 100644
--- a/ashes/src/components/images/images.css
+++ b/ashes/src/components/images/images.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .header {
   display: flex;
diff --git a/ashes/src/components/inventory/item-details.css b/ashes/src/components/inventory/item-details.css
index d96a8eeb44..e57cbfc99d 100644
--- a/ashes/src/components/inventory/item-details.css
+++ b/ashes/src/components/inventory/item-details.css
@@ -1,4 +1,4 @@
-@import "colors.css";
+@import "variables.css";
 
 .onHand {
   & > span {
diff --git a/ashes/src/components/link/link.css b/ashes/src/components/link/link.css
index 7c385634c1..3e3ec8a6d4 100644
--- a/ashes/src/components/link/link.css
+++ b/ashes/src/components/link/link.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .link {
   color: var(--color-link);
diff --git a/ashes/src/components/live-search/live-search.css b/ashes/src/components/live-search/live-search.css
index f948ebabdf..51b2f64a71 100644
--- a/ashes/src/components/live-search/live-search.css
+++ b/ashes/src/components/live-search/live-search.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .table {
   position: relative;
diff --git a/ashes/src/components/live-search/menu/menu.css b/ashes/src/components/live-search/menu/menu.css
index 305990d26c..2ae193f7dc 100644
--- a/ashes/src/components/live-search/menu/menu.css
+++ b/ashes/src/components/live-search/menu/menu.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   background-color: white;
diff --git a/ashes/src/components/merchant-applications/list.css b/ashes/src/components/merchant-applications/list.css
index dd099d8e59..9d5815aff7 100644
--- a/ashes/src/components/merchant-applications/list.css
+++ b/ashes/src/components/merchant-applications/list.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .body {
   padding: 0 1.85%;
diff --git a/ashes/src/components/object-page/object-details.css b/ashes/src/components/object-page/object-details.css
index 4c9189b4a8..90f16f8d26 100644
--- a/ashes/src/components/object-page/object-details.css
+++ b/ashes/src/components/object-page/object-details.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .object-details {
   display: flex;
diff --git a/ashes/src/components/orders/shipments/shipment-row.css b/ashes/src/components/orders/shipments/shipment-row.css
index a359f166e9..2d7e26f068 100644
--- a/ashes/src/components/orders/shipments/shipment-row.css
+++ b/ashes/src/components/orders/shipments/shipment-row.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .row-toggle {
   margin-right: 10px;
diff --git a/ashes/src/components/overlay/overlay.css b/ashes/src/components/overlay/overlay.css
index 832336d5cf..ea345c6f6b 100644
--- a/ashes/src/components/overlay/overlay.css
+++ b/ashes/src/components/overlay/overlay.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .overlay {
   display: none;
diff --git a/ashes/src/components/panel-header/panel-header.css b/ashes/src/components/panel-header/panel-header.css
index 8bb17932e4..b4ce736a8c 100644
--- a/ashes/src/components/panel-header/panel-header.css
+++ b/ashes/src/components/panel-header/panel-header.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .header {
   align-items: center;
diff --git a/ashes/src/components/panel/panel-list.css b/ashes/src/components/panel/panel-list.css
index 136bc58d95..08cc9bfa40 100644
--- a/ashes/src/components/panel/panel-list.css
+++ b/ashes/src/components/panel/panel-list.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/participants/participants.css b/ashes/src/components/participants/participants.css
index 40e68085cd..a185459c66 100644
--- a/ashes/src/components/participants/participants.css
+++ b/ashes/src/components/participants/participants.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .title-row {
   display: flex;
diff --git a/ashes/src/components/payment-row/payment-row.css b/ashes/src/components/payment-row/payment-row.css
index 0ad1b454d0..c3095b25d2 100644
--- a/ashes/src/components/payment-row/payment-row.css
+++ b/ashes/src/components/payment-row/payment-row.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .row-toggle {
   display: inline-block;
diff --git a/ashes/src/components/payment/payment-method.css b/ashes/src/components/payment/payment-method.css
index 2bd33d1da4..ee5ec7816e 100644
--- a/ashes/src/components/payment/payment-method.css
+++ b/ashes/src/components/payment/payment-method.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .payment-method {
   display: inline-block;
diff --git a/ashes/src/components/payments-panel/payments.css b/ashes/src/components/payments-panel/payments.css
index 65add2157c..64b5ce7bbe 100644
--- a/ashes/src/components/payments-panel/payments.css
+++ b/ashes/src/components/payments-panel/payments.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .row-toggle {
   vertical-align: top;
diff --git a/ashes/src/components/products-add/products-add.css b/ashes/src/components/products-add/products-add.css
index d549b04d35..3bfbd981bf 100644
--- a/ashes/src/components/products-add/products-add.css
+++ b/ashes/src/components/products-add/products-add.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .productSearch {
   & .search {
diff --git a/ashes/src/components/products/category-item.css b/ashes/src/components/products/category-item.css
index 06f62e0324..62b815a959 100644
--- a/ashes/src/components/products/category-item.css
+++ b/ashes/src/components/products/category-item.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .item {
   padding: 6px 10px;
diff --git a/ashes/src/components/products/form.css b/ashes/src/components/products/form.css
index 20d16b21b1..8d65c47220 100644
--- a/ashes/src/components/products/form.css
+++ b/ashes/src/components/products/form.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .slug-field-container {
   position: relative;
diff --git a/ashes/src/components/products/product-amazon.css b/ashes/src/components/products/product-amazon.css
index e50d3954b0..c67096d5db 100644
--- a/ashes/src/components/products/product-amazon.css
+++ b/ashes/src/components/products/product-amazon.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .root {
   padding: 0 30px;
diff --git a/ashes/src/components/products/skus/editable-sku-row.css b/ashes/src/components/products/skus/editable-sku-row.css
index 6304170a25..bda1cda681 100644
--- a/ashes/src/components/products/skus/editable-sku-row.css
+++ b/ashes/src/components/products/skus/editable-sku-row.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .sku-cell {
   position: relative;
diff --git a/ashes/src/components/promotions/attrs-edit.css b/ashes/src/components/promotions/attrs-edit.css
index abec78088a..585813f6a9 100644
--- a/ashes/src/components/promotions/attrs-edit.css
+++ b/ashes/src/components/promotions/attrs-edit.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .type-chooser {
   max-width: 40%;
diff --git a/ashes/src/components/promotions/coupon-new.css b/ashes/src/components/promotions/coupon-new.css
index 0fccc43bd5..51089cfaa4 100644
--- a/ashes/src/components/promotions/coupon-new.css
+++ b/ashes/src/components/promotions/coupon-new.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .modal {
   width: 800px;
diff --git a/ashes/src/components/promotions/discounts/discounts.css b/ashes/src/components/promotions/discounts/discounts.css
index 69c72ab6ed..8f2792fe5d 100644
--- a/ashes/src/components/promotions/discounts/discounts.css
+++ b/ashes/src/components/promotions/discounts/discounts.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .discount_qualifier :global .autowidth_dd{
   width: auto;
diff --git a/ashes/src/components/promotions/widgets/select-product.css b/ashes/src/components/promotions/widgets/select-product.css
index 121cd738eb..ce75aace33 100644
--- a/ashes/src/components/promotions/widgets/select-product.css
+++ b/ashes/src/components/promotions/widgets/select-product.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .product-description {
   color: var(--color-additional-text);
diff --git a/ashes/src/components/selectable-list/selectable-list.css b/ashes/src/components/selectable-list/selectable-list.css
index 2ecfa7d6ce..25d57bf4e9 100644
--- a/ashes/src/components/selectable-list/selectable-list.css
+++ b/ashes/src/components/selectable-list/selectable-list.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .selectable-list {
   background-color: var(--bg-white);
diff --git a/ashes/src/components/sidebar/entries/entries.css b/ashes/src/components/sidebar/entries/entries.css
index 47eb3b827a..7076922db8 100644
--- a/ashes/src/components/sidebar/entries/entries.css
+++ b/ashes/src/components/sidebar/entries/entries.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .fc-entries-wrapper {
   margin-bottom: 25px;
diff --git a/ashes/src/components/site/auth-pages.css b/ashes/src/components/site/auth-pages.css
index 257ea2a447..c972c6e8b8 100644
--- a/ashes/src/components/site/auth-pages.css
+++ b/ashes/src/components/site/auth-pages.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .body {
   color: var(--color-additional-text);
diff --git a/ashes/src/components/site/site.css b/ashes/src/components/site/site.css
index 34ff02bbaa..e73b6fca95 100644
--- a/ashes/src/components/site/site.css
+++ b/ashes/src/components/site/site.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;
diff --git a/ashes/src/components/sortable/sortable-tiles.css b/ashes/src/components/sortable/sortable-tiles.css
index 57949c045e..11f681424d 100644
--- a/ashes/src/components/sortable/sortable-tiles.css
+++ b/ashes/src/components/sortable/sortable-tiles.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .title {
   margin-top: 1.25em;
diff --git a/ashes/src/components/table/column-selector.css b/ashes/src/components/table/column-selector.css
index 1692361db6..dce026d6b7 100644
--- a/ashes/src/components/table/column-selector.css
+++ b/ashes/src/components/table/column-selector.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .column-selector {
   position: relative;
diff --git a/ashes/src/components/tabs/tabs.css b/ashes/src/components/tabs/tabs.css
index ad473ef077..d3a7cf8bff 100644
--- a/ashes/src/components/tabs/tabs.css
+++ b/ashes/src/components/tabs/tabs.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .loading {
   &::before {
diff --git a/ashes/src/components/tags/tags.css b/ashes/src/components/tags/tags.css
index dfdeb9fa9f..320a9d68b9 100644
--- a/ashes/src/components/tags/tags.css
+++ b/ashes/src/components/tags/tags.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .main {
   margin-bottom: 20px;
diff --git a/ashes/src/components/taxonomies/taxonomy-dropdown.css b/ashes/src/components/taxonomies/taxonomy-dropdown.css
index 91e43d98c1..bc63ea2473 100644
--- a/ashes/src/components/taxonomies/taxonomy-dropdown.css
+++ b/ashes/src/components/taxonomies/taxonomy-dropdown.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .dropdown {
   max-width: none;
diff --git a/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css b/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css
index c42739f6d7..e234e8778c 100644
--- a/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css
+++ b/ashes/src/components/taxonomies/taxons-dropdown/taxons-dropdown.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .dropdown {
   max-width: none;
diff --git a/ashes/src/components/taxonomies/taxons/taxon-list-widget.css b/ashes/src/components/taxonomies/taxons/taxon-list-widget.css
index 8ccd52c9ed..eb910e59b7 100644
--- a/ashes/src/components/taxonomies/taxons/taxon-list-widget.css
+++ b/ashes/src/components/taxonomies/taxons/taxon-list-widget.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .root {
   background-color: var(--bg-white);
diff --git a/ashes/src/components/taxonomies/widget/taxonomy-widget.css b/ashes/src/components/taxonomies/widget/taxonomy-widget.css
index 886ee14d25..4f773e3180 100644
--- a/ashes/src/components/taxonomies/widget/taxonomy-widget.css
+++ b/ashes/src/components/taxonomies/widget/taxonomy-widget.css
@@ -1,5 +1,5 @@
 @import 'common.css';
-@import 'colors.css';
+@import 'variables.css';
 
 .spinner {
   margin: 10px auto;
diff --git a/ashes/src/components/tree-node/tree-node.css b/ashes/src/components/tree-node/tree-node.css
index aa0212855e..6c54d483ac 100644
--- a/ashes/src/components/tree-node/tree-node.css
+++ b/ashes/src/components/tree-node/tree-node.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .node {
   position: relative;
diff --git a/ashes/src/components/typeahead/typeahead.css b/ashes/src/components/typeahead/typeahead.css
index 9d9d862588..bb4a60e0e1 100644
--- a/ashes/src/components/typeahead/typeahead.css
+++ b/ashes/src/components/typeahead/typeahead.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   position: relative;
diff --git a/ashes/src/components/upload/upload.css b/ashes/src/components/upload/upload.css
index 4bcc4c4824..fcd738cd78 100644
--- a/ashes/src/components/upload/upload.css
+++ b/ashes/src/components/upload/upload.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .upload {
   transition: border-color .3s;
diff --git a/ashes/src/components/utils/change/change.css b/ashes/src/components/utils/change/change.css
index 333db85f97..fa0c769f7d 100644
--- a/ashes/src/components/utils/change/change.css
+++ b/ashes/src/components/utils/change/change.css
@@ -1,4 +1,4 @@
-@import "colors.css";
+@import "variables.css";
 
 .change {
 
diff --git a/ashes/src/css/base.css b/ashes/src/css/base.css
index cc56e68c69..ed40f348eb 100644
--- a/ashes/src/css/base.css
+++ b/ashes/src/css/base.css
@@ -2,7 +2,7 @@
 @import 'fontello.css';
 @import 'transitions.css';
 @import 'normalize.css';
-@import 'colors.css';
+@import 'variables.css';
 
 * {
   outline: 0;
diff --git a/ashes/src/css/normalize.css b/ashes/src/css/normalize.css
index e53ac2242a..f135fd9216 100644
--- a/ashes/src/css/normalize.css
+++ b/ashes/src/css/normalize.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
diff --git a/ashes/src/css/colors.css b/ashes/src/css/variables.css
similarity index 100%
rename from ashes/src/css/colors.css
rename to ashes/src/css/variables.css
diff --git a/ashes/src/less/_variables.less b/ashes/src/less/_variables.less
index 290ab1323b..59b93be146 100644
--- a/ashes/src/less/_variables.less
+++ b/ashes/src/less/_variables.less
@@ -1,4 +1,4 @@
-// Copy set of 'colors.css'
+// Copy set of 'variables.css'
 
 @color-text: #363636;
 @color-additional-text: rgba(54, 54, 54, 0.5);

From 53c4e6e519085ee7b6e13db22ca6ef9d55c5dae6 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Wed, 14 Jun 2017 14:36:50 -0700
Subject: [PATCH 07/51] Add docs

---
 ashes/src/components/docs/fonts/fonts.css | 34 +++++++++++++++++++++++
 ashes/src/components/docs/fonts/fonts.jsx | 31 +++++++++++++++++++++
 ashes/src/components/docs/fonts/fonts.md  |  5 ++++
 ashes/styleguide/config.styleguide.js     |  1 +
 4 files changed, 71 insertions(+)
 create mode 100644 ashes/src/components/docs/fonts/fonts.css
 create mode 100644 ashes/src/components/docs/fonts/fonts.jsx
 create mode 100644 ashes/src/components/docs/fonts/fonts.md

diff --git a/ashes/src/components/docs/fonts/fonts.css b/ashes/src/components/docs/fonts/fonts.css
new file mode 100644
index 0000000000..7af6e6f8c5
--- /dev/null
+++ b/ashes/src/components/docs/fonts/fonts.css
@@ -0,0 +1,34 @@
+@import 'variables.css';
+
+.block {
+  display: flex;
+  flex-direction: column;
+
+  & > div {
+    margin: 10px 0;
+  }
+}
+
+.title {
+  font: var(--font-page-title);
+
+  & span {
+    color: var(--color-subtitle-text);
+  }
+}
+
+.section {
+  font: var(--font-section-title);
+}
+
+.buttons {
+  font: var(--font-labels);
+}
+
+.nav {
+  font: var(--font-nav);
+}
+
+.body {
+  font: var(--font-body);
+}
diff --git a/ashes/src/components/docs/fonts/fonts.jsx b/ashes/src/components/docs/fonts/fonts.jsx
new file mode 100644
index 0000000000..d79466ddc5
--- /dev/null
+++ b/ashes/src/components/docs/fonts/fonts.jsx
@@ -0,0 +1,31 @@
+// @flow
+
+import React from 'react';
+
+import s from './fonts.css';
+
+export const Fonts = () => {
+  return (
+    <div className={s.block}>
+      <div className={s.title}>
+        Page Title and <span>Subtitle</span>: 300 30px/41px.
+      </div>
+
+      <div className={s.section}>
+        SectionTitle → 600 16px/22px.
+      </div>
+
+      <div className={s.buttons}>
+        Buttons & Field Labels → 600 14px/20px.
+      </div>
+
+      <div className={s.nav}>
+        Tab Nav → 400 14px/20px.
+      </div>
+
+      <div className={s.body}>
+        Body → 400 13px/18px.
+      </div>
+    </div>
+  );
+};
diff --git a/ashes/src/components/docs/fonts/fonts.md b/ashes/src/components/docs/fonts/fonts.md
new file mode 100644
index 0000000000..6c1d8e4693
--- /dev/null
+++ b/ashes/src/components/docs/fonts/fonts.md
@@ -0,0 +1,5 @@
+```
+<div className="demo">
+  <Fonts.Fonts />
+</div>
+```
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 6639e0f8a4..b80d7da524 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -29,6 +29,7 @@ module.exports = {
             components: () => ([
               path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
               path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
+              path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
             ]),
           }]
         },

From 714cd8c5bec0a945bdf8e316b8ef86ef525d1365 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Wed, 14 Jun 2017 18:36:21 -0700
Subject: [PATCH 08/51] replace postcss-assets with postcss-url

---
 ashes/package.json                    |   3 +-
 ashes/postcss.config.js               |  15 ++-
 ashes/src/css/common.css              |   2 +-
 ashes/styleguide/config.styleguide.js |   4 +-
 ashes/styleguide/styleguide.css       |  64 +++++++++++++
 ashes/styleguide/styleguide.less      |  32 ++-----
 ashes/yarn.lock                       | 132 +++++++++++---------------
 7 files changed, 143 insertions(+), 109 deletions(-)
 create mode 100644 ashes/styleguide/styleguide.css

diff --git a/ashes/package.json b/ashes/package.json
index 49c03ae2de..a47273d04d 100644
--- a/ashes/package.json
+++ b/ashes/package.json
@@ -136,15 +136,16 @@
     "node-notifier": "^4.2.3",
     "nodemon": "^1.11.0",
     "optimize-css-assets-webpack-plugin": "^1.3.1",
-    "postcss-assets": "^4.1.0",
     "postcss-css-variables": "^0.7.0",
     "postcss-cssnext": "^2.10.0",
+    "postcss-debug": "^0.4.2",
     "postcss-import": "^9.1.0",
     "postcss-loader": "^1.3.3",
     "postcss-mixins": "^5.4.1",
     "postcss-modules-local-by-default": "^1.0.1",
     "postcss-modules-scope": "^1.0.0",
     "postcss-nested": "^1.0.1",
+    "postcss-url": "^7.0.0",
     "query-string": "^4.3.4",
     "react-shallow-testutils": "^2.0.0",
     "react-styleguidist": "^5.3.2",
diff --git a/ashes/postcss.config.js b/ashes/postcss.config.js
index 427271c12f..7b14e98b7c 100644
--- a/ashes/postcss.config.js
+++ b/ashes/postcss.config.js
@@ -30,10 +30,9 @@ const plugins = [
   require('postcss-import')({
     path: ['src/css', 'node_modules'],
   }),
-  require('postcss-assets')({
-    loadPaths: ['src/images/']
-  }),
-
+  require('postcss-url')({ url: 'inline', maxSize: 4 }),
+  // @todo remove second `postcss-url` after https://github.com/postcss/postcss-url/issues/104
+  require('postcss-url')({ url: 'rebase', to: './src' }),
   require('postcss-cssnext')({
     features: {
       // Instead of it we are using `postcss-css-variables` below
@@ -50,4 +49,10 @@ const plugins = [
   }),
 ];
 
-exports.plugins = plugins;
+// uncomment and then
+// ./node_modules/.bin/postcss-debug -c ./postcss.config.js ./styleguide/styleguide.css
+// module.exports = function(postcss) {
+//   return postcss(plugins);
+// };
+
+module.exports.plugins = plugins;
diff --git a/ashes/src/css/common.css b/ashes/src/css/common.css
index 55938b219f..41fca6a65b 100644
--- a/ashes/src/css/common.css
+++ b/ashes/src/css/common.css
@@ -2,7 +2,7 @@
 
 :root {
   --loading-caramel: {
-    background-image: inline(caramel.png);
+    background-image: url('../images/caramel.png');
     animation: caramel .5s linear infinite;
   };
 }
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index b80d7da524..b221b36f14 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -2,7 +2,7 @@ const path = require('path');
 const { camelCase, upperFirst } = require('lodash');
 
 module.exports = {
-  title: `Version: <span class="hash">${process.env.GIT_COMMIT}</span>`,
+  title: `${process.env.GIT_COMMIT}`,
   template: path.join(__dirname, 'template.html'),
   showCode: false,
   ignore: [path.join(__dirname, '../src/components/core/**/*.spec.jsx')],
@@ -146,8 +146,8 @@ module.exports = {
     },
   ],
   require: [
-    path.join(__dirname, '../src/css/base.css'),
     path.join(__dirname, '../src/images/favicons/favicon.ico'),
     path.join(__dirname, 'styleguide.less'),
+    path.join(__dirname, 'styleguide.css'),
   ]
 };
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
new file mode 100644
index 0000000000..e9abaa63fe
--- /dev/null
+++ b/ashes/styleguide/styleguide.css
@@ -0,0 +1,64 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic);
+@import 'fontello.css';
+@import 'variables.css';
+
+:global {
+  #app {
+    font: var(--font-body);
+    /*background: url('caramel.png');*/
+
+    .version {
+      font-size: 12px;
+      color: var(--color-subtitle-text) !important;
+      text-align: center;
+      margin-top: -10px;
+    }
+
+    .sidebar-0-4 {
+      width: 260px;
+      border-color: var(--color-border);
+
+      .root-0-65 {
+        .search-0-66 {
+          padding: 0 16px 8px;
+        }
+
+        *,
+        input::placeholder {
+          font-size: 10px;
+          line-height: 20px;
+        }
+
+        input {
+          padding: 2px 8px;
+        }
+
+        [class^=link-] {
+          color: #666;
+        }
+
+        [class*=heading-],
+        [class*=para-] {
+          font-weight: 600;
+        }
+
+        & > div > div > ul > li > a {
+          color: #aaa !important;
+        }
+      }
+
+      ul[class^=list-] {
+        padding-left: 16px;
+
+        ul[class^=list-] {
+          padding-left: 12px;
+        }
+      }
+    }
+
+    a:active {
+      color: red !important;
+    }
+  }
+};
+
diff --git a/ashes/styleguide/styleguide.less b/ashes/styleguide/styleguide.less
index 3633f2e86f..9ba0195c43 100644
--- a/ashes/styleguide/styleguide.less
+++ b/ashes/styleguide/styleguide.less
@@ -1,7 +1,11 @@
-@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,700);
-@import '../src/less/base.less';
-
 #app {
+  * {
+    font-family: 'Open Sans' !important;
+  }
+
+  & > div > main {
+    background: #f7f7f7;
+  }
 
   .demo > * {
     margin-left: 10px;
@@ -12,12 +16,6 @@
     margin-bottom: 10px;
   }
 
-  .version {
-    font-size: 12px;
-    color: #777;
-    text-align: center;
-  }
-
   .hash {
     font-weight: bold;
   }
@@ -26,9 +24,7 @@
     border: none;
   }
 
-  .sidebar-0-4 {
-    width: 260px;
-  }
+
 
   .hasSidebar-0-2 {
     padding-left: 260px;
@@ -36,9 +32,6 @@
 
   [class^=item-] {
     margin: 0;
-    font-family: Raleway, Helvetica, sans-serif;
-    font-size: 12px;
-    line-height: 18px;
   }
 
   .link-0-54, .link-0-54:link, .link-0-54:visited {
@@ -52,20 +45,11 @@
     }
   }
 
-  [class*=heading-],
-  [class*=para-] {
-    font-family: Raleway, Helvetica, sans-serif;
-  }
-
   .CodeMirror .CodeMirror-lines pre.CodeMirror-line {
     font-size: 12px;
     line-height: 16px;
   }
 
-  ul[class^=list-] {
-    padding-left: 12px;
-  }
-
   .root-0-80 > ul.list-0-83 {
     padding-left: 16px;
   }
diff --git a/ashes/yarn.lock b/ashes/yarn.lock
index c369411a04..244c9d79dc 100644
--- a/ashes/yarn.lock
+++ b/ashes/yarn.lock
@@ -296,22 +296,6 @@ assertion-error@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c"
 
-assets@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/assets/-/assets-2.1.0.tgz#bfae98717974d66636eed26b18eb7120608816f5"
-  dependencies:
-    async "^1.5.0"
-    bluebird "^3.0.6"
-    calipers "^2.0.0"
-    calipers-gif "^2.0.0"
-    calipers-jpeg "^2.0.0"
-    calipers-png "^2.0.0"
-    calipers-svg "^2.0.0"
-    calipers-webp "^2.0.0"
-    glob "^6.0.4"
-    lodash "^3.10.1"
-    mime "^1.3.4"
-
 ast-types@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.0.tgz#c8721c8747ae4d5b29b929e99c5317b4e8745623"
@@ -328,7 +312,7 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@1.x, async@^1.4.0, async@^1.5.0, async@^1.5.2:
+async@1.x, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -1223,7 +1207,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@3.x.x, bluebird@^3.0.6, bluebird@^3.4.7:
+bluebird@^3.4.7:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
@@ -1373,42 +1357,6 @@ bytes@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
 
-calipers-gif@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers-gif/-/calipers-gif-2.0.0.tgz#b5eefec3064a77c6dcdbd5bdc51735a01bafdc37"
-  dependencies:
-    bluebird "3.x.x"
-
-calipers-jpeg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers-jpeg/-/calipers-jpeg-2.0.0.tgz#06d56a53f62717dd809cb956cf64423ce693465b"
-  dependencies:
-    bluebird "3.x.x"
-
-calipers-png@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers-png/-/calipers-png-2.0.0.tgz#1d0d20e5c1ae5f79b74d5286a2e97f59bb70b658"
-  dependencies:
-    bluebird "3.x.x"
-
-calipers-svg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers-svg/-/calipers-svg-2.0.0.tgz#666254d5f1ea66d2052ed82d6d79b8bf10acbb71"
-  dependencies:
-    bluebird "3.x.x"
-
-calipers-webp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers-webp/-/calipers-webp-2.0.0.tgz#e126ece2f84cd71779612bfa2b2653cd95cea77a"
-  dependencies:
-    bluebird "3.x.x"
-
-calipers@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/calipers/-/calipers-2.0.0.tgz#bdf221c6a62f603b8ddd9340cacd9c79c1a03fce"
-  dependencies:
-    bluebird "3.x.x"
-
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -2179,6 +2127,10 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+cuint@latest:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+
 currency-symbol-map@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-2.2.0.tgz#2b3c1872ff1ac2ce595d8273e58e1fff0272aea2"
@@ -3509,7 +3461,7 @@ glob@3.2.11:
     inherits "2"
     minimatch "0.3"
 
-glob@5.x, glob@^5.0.15:
+glob@5.x:
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
   dependencies:
@@ -3528,7 +3480,7 @@ glob@^4.3.1:
     minimatch "^2.0.1"
     once "^1.3.0"
 
-glob@^6.0.1, glob@^6.0.4:
+glob@^6.0.1:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
   dependencies:
@@ -3941,6 +3893,10 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.0.x"
 
+html-tags@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-1.1.1.tgz#869f43859f12d9bdc3892419e494a628aa1b204e"
+
 html-webpack-plugin@^2.28.0:
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.28.0.tgz#2e7863b57e5fd48fe263303e2ffc934c3064d009"
@@ -5303,7 +5259,7 @@ lodash@4.17.2:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^3.0.1, lodash@^3.10.1:
+lodash@^3.0.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
@@ -5497,6 +5453,18 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7, micromatch@^2.3.8:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+midas@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/midas/-/midas-1.2.2.tgz#2e863e52023f619435f5395dac362beb16beece3"
+  dependencies:
+    html-tags "^1.1.1"
+    minimist "^1.2.0"
+    postcss "^5.0.4"
+    postcss-selector-parser "^2.0.0"
+    postcss-value-parser "^3.3.0"
+    read-file-stdin "^0.2.0"
+    write-file-stdout "0.0.2"
+
 miller-rabin@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d"
@@ -5937,7 +5905,7 @@ open@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
 
-opener@^1.4.3:
+opener@^1.4.1, opener@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
 
@@ -6246,14 +6214,6 @@ postcss-apply@^0.3.0:
     balanced-match "^0.4.1"
     postcss "^5.0.21"
 
-postcss-assets@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-assets/-/postcss-assets-4.1.0.tgz#341f30d6ac0fbb314d82a28cc1ea753a986ffed7"
-  dependencies:
-    assets "^2.0.0"
-    postcss "^5.0.12"
-    postcss-functions "^2.1.0"
-
 postcss-attribute-case-insensitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-1.0.1.tgz#ceb73777e106167eb233f1938c9bd9f2e697308d"
@@ -6428,6 +6388,15 @@ postcss-custom-selectors@^3.0.0:
     postcss "^5.0.0"
     postcss-selector-matches "^2.0.0"
 
+postcss-debug@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/postcss-debug/-/postcss-debug-0.4.2.tgz#8b161ba2f7f2c55f3549e4b2fa0e95197baa2e3d"
+  dependencies:
+    midas "^1.2.1"
+    opener "^1.4.1"
+    postcss "^5.0.19"
+    yargs "^4.7.1"
+
 postcss-discard-comments@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
@@ -6480,15 +6449,6 @@ postcss-font-variant@^2.0.0:
   dependencies:
     postcss "^5.0.4"
 
-postcss-functions@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-2.1.1.tgz#f9b64d3b5690f6795fe42a180496805375b7a840"
-  dependencies:
-    glob "^5.0.15"
-    object-assign "^4.0.1"
-    postcss "^5.0.10"
-    postcss-value-parser "^3.1.3"
-
 postcss-image-set-polyfill@^0.3.3:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/postcss-image-set-polyfill/-/postcss-image-set-polyfill-0.3.5.tgz#0f193413700cf1f82bd39066ef016d65a4a18181"
@@ -6796,7 +6756,17 @@ postcss-unique-selectors@^2.0.2:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.1.3, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-url@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-7.0.0.tgz#11c6a1103e527ae914c3bab48415273d027d9508"
+  dependencies:
+    mime "^1.2.11"
+    minimatch "^3.0.0"
+    mkdirp "^0.5.0"
+    postcss "^6.0.1"
+    xxhashjs "^0.2.1"
+
+postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
@@ -9199,6 +9169,10 @@ write-file-atomic@^1.1.2:
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
+write-file-stdout@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
+
 write@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
@@ -9242,6 +9216,12 @@ xtend@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
 
+xxhashjs@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.1.tgz#9bbe9be896142976dfa34c061b2d068c43d30de0"
+  dependencies:
+    cuint latest
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"

From ba0042528623705d8a6d4a81a4dc3bc589974a46 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Thu, 15 Jun 2017 10:51:06 -0700
Subject: [PATCH 09/51] Remove less from styleguide

---
 ashes/styleguide/config.styleguide.js |  1 -
 ashes/styleguide/styleguide.css       | 84 ++++++++++++++++++++++++++
 ashes/styleguide/styleguide.less      | 85 ---------------------------
 3 files changed, 84 insertions(+), 86 deletions(-)
 delete mode 100644 ashes/styleguide/styleguide.less

diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index b221b36f14..2cbab2c357 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -147,7 +147,6 @@ module.exports = {
   ],
   require: [
     path.join(__dirname, '../src/images/favicons/favicon.ico'),
-    path.join(__dirname, 'styleguide.less'),
     path.join(__dirname, 'styleguide.css'),
   ]
 };
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index e9abaa63fe..105b206391 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -59,6 +59,90 @@
     a:active {
       color: red !important;
     }
+
+    * {
+      font-family: 'Open Sans' !important;
+    }
+
+    & > div > main {
+      background: #f7f7f7;
+    }
+
+    .demo > * {
+      margin-left: 10px;
+      margin-bottom: 10px;
+    }
+
+    .demo-blocked > * {
+      margin-bottom: 10px;
+    }
+
+    .hash {
+      font-weight: bold;
+    }
+
+    .logo-0-5 {
+      border: none;
+    }
+
+
+
+    .hasSidebar-0-2 {
+      padding-left: 260px;
+    }
+
+    [class^=item-] {
+      margin: 0;
+    }
+
+    .link-0-54, .link-0-54:link, .link-0-54:visited {
+      display: block;
+      padding: 6px 14px;
+      color: #000;
+      transition: color .2s;
+
+      &:hover {
+        color: #dc8027;
+      }
+    }
+
+    .CodeMirror .CodeMirror-lines pre.CodeMirror-line {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    .root-0-80 > ul.list-0-83 {
+      padding-left: 16px;
+    }
+
+    a.link-0-54.heading-0-87 {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    [class*=cellDesc-] [class*=para-] {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    }
+
+    [class*=preview-] {
+      padding: 30px 16px 16px;
+    }
+
+    @media (max-width: 600px) {
+      .sidebar-0-4 {
+        width: 100%;
+      }
+
+      .hasSidebar-0-2 {
+        padding-left: 0;
+      }
+
+      [class*=isChild-] {
+        display: block;
+      }
+    }
+
   }
 };
 
diff --git a/ashes/styleguide/styleguide.less b/ashes/styleguide/styleguide.less
deleted file mode 100644
index 9ba0195c43..0000000000
--- a/ashes/styleguide/styleguide.less
+++ /dev/null
@@ -1,85 +0,0 @@
-#app {
-  * {
-    font-family: 'Open Sans' !important;
-  }
-
-  & > div > main {
-    background: #f7f7f7;
-  }
-
-  .demo > * {
-    margin-left: 10px;
-    margin-bottom: 10px;
-  }
-
-  .demo-blocked > * {
-    margin-bottom: 10px;
-  }
-
-  .hash {
-    font-weight: bold;
-  }
-
-  .logo-0-5 {
-    border: none;
-  }
-
-
-
-  .hasSidebar-0-2 {
-    padding-left: 260px;
-  }
-
-  [class^=item-] {
-    margin: 0;
-  }
-
-  .link-0-54, .link-0-54:link, .link-0-54:visited {
-    display: block;
-    padding: 6px 14px;
-    color: #000;
-    transition: color .2s;
-
-    &:hover {
-      color: #dc8027;
-    }
-  }
-
-  .CodeMirror .CodeMirror-lines pre.CodeMirror-line {
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  .root-0-80 > ul.list-0-83 {
-    padding-left: 16px;
-  }
-
-  a.link-0-54.heading-0-87 {
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  [class*=cellDesc-] [class*=para-] {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  }
-
-  [class*=preview-] {
-    padding: 30px 16px 16px;
-  }
-
-  @media (max-width: 600px) {
-    .sidebar-0-4 {
-      width: 100%;
-    }
-
-    .hasSidebar-0-2 {
-      padding-left: 0;
-    }
-
-    [class*=isChild-] {
-      display: block;
-    }
-  }
-
-}

From 3af14de5d25166291807deec0e36e6031ca32de9 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Thu, 15 Jun 2017 17:27:59 -0700
Subject: [PATCH 10/51] cr fix

---
 ashes/src/components/activity-notifications/indicator.jsx | 3 ++-
 ashes/src/components/core/button/button.css               | 4 ----
 ashes/src/components/core/icon/icon.jsx                   | 7 +++----
 ashes/styleguide/styleguide.css                           | 7 +------
 4 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/ashes/src/components/activity-notifications/indicator.jsx b/ashes/src/components/activity-notifications/indicator.jsx
index 1e7ec74568..2fabe05606 100644
--- a/ashes/src/components/activity-notifications/indicator.jsx
+++ b/ashes/src/components/activity-notifications/indicator.jsx
@@ -5,6 +5,7 @@ import _ from 'lodash';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { autobind } from 'core-decorators';
+import Icon from 'components/core/icon';
 
 // styles
 import s from './indicator.css';
@@ -63,7 +64,7 @@ export default class NotificationIndicator extends Component {
           className={classes}
           onClick={this.toggleNotifications}
         >
-          <i className="icon icon-bell" />
+          <Icon name="bell" />
           {this.indicator}
         </div>
       </div>
diff --git a/ashes/src/components/core/button/button.css b/ashes/src/components/core/button/button.css
index 6dd9cb48f1..5e6fd6eb79 100644
--- a/ashes/src/components/core/button/button.css
+++ b/ashes/src/components/core/button/button.css
@@ -57,10 +57,6 @@
   transition: all .2s;
 }
 
-.button:not(.onlyIcon) i[class*="icon-"] {
-  margin-bottom: -1px;
-}
-
 .only {
   margin: 0 auto;
 }
diff --git a/ashes/src/components/core/icon/icon.jsx b/ashes/src/components/core/icon/icon.jsx
index a4af426de2..7c300e374e 100644
--- a/ashes/src/components/core/icon/icon.jsx
+++ b/ashes/src/components/core/icon/icon.jsx
@@ -7,7 +7,7 @@ type Props = {
   name: string,
   /** additional className */
   className?: string
-}
+};
 
 /**
  * Icon is a simple component for representing icons.
@@ -18,9 +18,8 @@ type Props = {
 const Icon = (props: Props) => {
   const { name, className, ...rest } = props;
   const iconCls = classNames(className, `icon-${name}`);
-  return(
-    <i className={iconCls} {...rest} />
-  );
+
+  return <i className={iconCls} {...rest} />;
 };
 
 export default Icon;
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 105b206391..369c2505de 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -1,6 +1,5 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic);
-@import 'fontello.css';
-@import 'variables.css';
+@import 'base.css';
 
 :global {
   #app {
@@ -60,10 +59,6 @@
       color: red !important;
     }
 
-    * {
-      font-family: 'Open Sans' !important;
-    }
-
     & > div > main {
       background: #f7f7f7;
     }

From fa1831d7516f9bfa4cb59712412b804b257b9260 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 21:54:48 +0300
Subject: [PATCH 11/51] feat: add `datetime.jsx` to Styleguide

---
 .../components/utils/datetime/datetime.jsx    |  2 +-
 .../src/components/utils/datetime/datetime.md | 52 +++++++++++++++++++
 ashes/styleguide/config.styleguide.js         |  1 +
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 ashes/src/components/utils/datetime/datetime.md

diff --git a/ashes/src/components/utils/datetime/datetime.jsx b/ashes/src/components/utils/datetime/datetime.jsx
index e50691ce92..a9d21f0aaa 100644
--- a/ashes/src/components/utils/datetime/datetime.jsx
+++ b/ashes/src/components/utils/datetime/datetime.jsx
@@ -23,7 +23,7 @@ type Props = {
 
 /**
  * `DateTime`, `Date`, and `Time` - are simple components
- * build on the top of `Moment`
+ * build on the top of generic `Moment`
  * and serve to show time data
  *
  * @function Moment
diff --git a/ashes/src/components/utils/datetime/datetime.md b/ashes/src/components/utils/datetime/datetime.md
new file mode 100644
index 0000000000..c28840a397
--- /dev/null
+++ b/ashes/src/components/utils/datetime/datetime.md
@@ -0,0 +1,52 @@
+#### Basic usage
+
+```javascript
+<DateTime value={1497636772107} />
+```
+
+### States
+
+```javascript
+import { Moment } from 'components/utils/datetime'
+```
+
+```
+<div className="demo" >
+  <Moment.Moment value={1497636772107} /><br />
+  <Moment.Moment value={1497636772107} format="L LT" /><br />
+  <Moment.Moment value={1497636772107} format="L" /><br />
+  <Moment.Moment value={1497636772107} format="l" /><br />
+  <Moment.Moment value={1497636772107} format="LT" /><br />
+  <Moment.Moment format="LT" />
+</div>
+```
+
+```javascript
+import { DateTime } from 'components/utils/datetime'
+```
+
+```
+<div className="demo" >
+  <Moment.DateTime value={1497636772107} />
+</div>
+```
+
+```javascript
+import { Date } from 'components/utils/datetime'
+```
+
+```
+<div className="demo" >
+  <Moment.Date value={1497636772107} />
+</div>
+```
+
+```javascript
+import { Time } from 'components/utils/datetime'
+```
+
+```
+<div className="demo" >
+  <Moment.Time value={1497636772107} />
+</div>
+```
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 6639e0f8a4..f2183673d5 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -137,6 +137,7 @@ module.exports = {
               name: 'Other',
               components: () => ([
                 path.resolve(__dirname, '../src/components/utils/change/change.jsx'),
+                path.resolve(__dirname, '../src/components/utils/datetime/datetime.jsx'),
               ]),
             },
           ]

From 7ba48b577de860b2c1d8f49defc897ac8f0d3d53 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Sat, 17 Jun 2017 01:58:34 +0300
Subject: [PATCH 12/51] fix variables.css usage

---
 ashes/docs/colors-and-typos.md                     | 2 +-
 ashes/src/components/dropdown/generic-dropdown.css | 2 +-
 ashes/webpack/dev.js                               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ashes/docs/colors-and-typos.md b/ashes/docs/colors-and-typos.md
index 725d983d75..72079a4081 100644
--- a/ashes/docs/colors-and-typos.md
+++ b/ashes/docs/colors-and-typos.md
@@ -3,7 +3,7 @@ We are using limited set of text colors, background colors and fonts. There are
 To use variables, just import them to your css file:
 
 ```css
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   color: #123456; /* prohibited! */
diff --git a/ashes/src/components/dropdown/generic-dropdown.css b/ashes/src/components/dropdown/generic-dropdown.css
index 974b0c00f0..6a71821140 100644
--- a/ashes/src/components/dropdown/generic-dropdown.css
+++ b/ashes/src/components/dropdown/generic-dropdown.css
@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .controls {
   &:hover {
diff --git a/ashes/webpack/dev.js b/ashes/webpack/dev.js
index 0fdd70b32e..5539647fba 100644
--- a/ashes/webpack/dev.js
+++ b/ashes/webpack/dev.js
@@ -16,7 +16,7 @@ module.exports = {
       },
       {
         test: /\.less$/,
-        use: [ 'style-loader', 'css-loader', 'less-loader' ]
+        use: [ 'style-loader', 'css-loader?{sourceMap:true}', 'less-loader' ]
       },
     ]
   },

From f6ec175f177da1cff3a9cd6c6a012b354aeca12d Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Thu, 15 Jun 2017 16:58:21 +0300
Subject: [PATCH 13/51] refactor: move Currency component to `/utils`

---
 .../activity-trail/activities/gift-cards/index.jsx          | 2 +-
 .../activities/order-payment-methods/index.jsx              | 2 +-
 .../activity-trail/activities/store-credits/index.jsx       | 2 +-
 ashes/src/components/analytics/analytics.jsx                | 2 +-
 ashes/src/components/carts/line-item.jsx                    | 2 +-
 ashes/src/components/carts/sku-result.jsx                   | 2 +-
 ashes/src/components/common/totals.jsx                      | 2 +-
 .../components/customers-groups/editor/labels/currency.jsx  | 2 +-
 ashes/src/components/customers-groups/stats/stats.jsx       | 2 +-
 .../components/customers/store-credits/new-store-credit.jsx | 2 +-
 ashes/src/components/customers/store-credits/summary.jsx    | 2 +-
 ashes/src/components/customers/title-block.jsx              | 6 ++----
 ashes/src/components/gift-cards/gift-card.jsx               | 2 +-
 .../src/components/inventory/inventory-warehouse-drawer.jsx | 2 +-
 ashes/src/components/orders/shipments/shipped-item.jsx      | 2 +-
 ashes/src/components/orders/shipments/transaction.jsx       | 2 +-
 ashes/src/components/orders/shipments/unshipped-items.jsx   | 2 +-
 ashes/src/components/payment-row/debit-credit-info.jsx      | 2 +-
 ashes/src/components/payment-row/debit-credit.jsx           | 2 +-
 ashes/src/components/payment-row/payment-row.jsx            | 2 +-
 ashes/src/components/rmas/helpers.jsx                       | 2 +-
 ashes/src/components/shipping/shipping-method-row.jsx       | 2 +-
 ashes/src/components/table/cell.jsx                         | 2 +-
 .../src/components/{common => utils/currency}/currency.jsx  | 2 +-
 ashes/src/components/utils/currency/index.js                | 1 +
 25 files changed, 26 insertions(+), 27 deletions(-)
 rename ashes/src/components/{common => utils/currency}/currency.jsx (93%)
 create mode 100644 ashes/src/components/utils/currency/index.js

diff --git a/ashes/src/components/activity-trail/activities/gift-cards/index.jsx b/ashes/src/components/activity-trail/activities/gift-cards/index.jsx
index 8d213b35be..32949b452d 100644
--- a/ashes/src/components/activity-trail/activities/gift-cards/index.jsx
+++ b/ashes/src/components/activity-trail/activities/gift-cards/index.jsx
@@ -7,7 +7,7 @@ import { joinEntities } from '../base/utils';
 // components
 import GiftCardLink from '../base/gift-card-link';
 import CordTarget from '../base/cord-target';
-import Currency from '../../../common/currency';
+import Currency from 'components/utils/currency';
 import Title from '../base/title';
 
 const authorizedAndCapturedDesc = {
diff --git a/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx b/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx
index 245ca7d5b5..85099b8a73 100644
--- a/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx
+++ b/ashes/src/components/activity-trail/activities/order-payment-methods/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import types from '../base/types';
 
 import CordTarget from '../base/cord-target';
-import Currency from '../../../common/currency';
+import Currency from 'components/utils/currency';
 import GiftCardLink from '../base/gift-card-link';
 import Title from '../base/title';
 
diff --git a/ashes/src/components/activity-trail/activities/store-credits/index.jsx b/ashes/src/components/activity-trail/activities/store-credits/index.jsx
index 3c3da52fe2..520a16e54c 100644
--- a/ashes/src/components/activity-trail/activities/store-credits/index.jsx
+++ b/ashes/src/components/activity-trail/activities/store-credits/index.jsx
@@ -6,7 +6,7 @@ import types from '../base/types';
 // components
 import GiftCardLink from '../base/gift-card-link';
 import CordTarget from '../base/cord-target';
-import Currency from '../../../common/currency';
+import Currency from 'components/utils/currency';
 import Title from '../base/title';
 
 const representatives = {
diff --git a/ashes/src/components/analytics/analytics.jsx b/ashes/src/components/analytics/analytics.jsx
index 53281b1577..b3a21c6b1e 100644
--- a/ashes/src/components/analytics/analytics.jsx
+++ b/ashes/src/components/analytics/analytics.jsx
@@ -12,7 +12,7 @@ import Spinner from 'components/core/spinner';
 import { ApiErrors } from 'components/utils/errors';
 import QuestionBoxList from './question-box-list';
 import type { Props as QuestionBoxType } from './question-box';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import TrendButton, { TrendType } from './trend-button';
 import StaticColumnSelector from './static-column-selector';
 import { Dropdown } from '../dropdown';
diff --git a/ashes/src/components/carts/line-item.jsx b/ashes/src/components/carts/line-item.jsx
index bc05002f71..3f1d1bd8d4 100644
--- a/ashes/src/components/carts/line-item.jsx
+++ b/ashes/src/components/carts/line-item.jsx
@@ -12,7 +12,7 @@ import { Link } from 'components/link';
 import ConfirmationModal from 'components/core/confirmation-modal';
 import Counter from 'components/core/counter';
 import { DeleteButton } from 'components/core/button';
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import ProductImage from 'components/imgix/product-image';
 
 // actions
diff --git a/ashes/src/components/carts/sku-result.jsx b/ashes/src/components/carts/sku-result.jsx
index 524c814f37..9129677ed2 100644
--- a/ashes/src/components/carts/sku-result.jsx
+++ b/ashes/src/components/carts/sku-result.jsx
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import ProductImage from 'components/imgix/product-image';
 
 type Props = {
diff --git a/ashes/src/components/common/totals.jsx b/ashes/src/components/common/totals.jsx
index d4ec08d636..0bf11471ee 100644
--- a/ashes/src/components/common/totals.jsx
+++ b/ashes/src/components/common/totals.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import ContentBox from '../content-box/content-box';
-import Currency from './currency';
+import Currency from 'components/utils/currency';
 
 const TotalsFooter = props => {
   const { entityType } = props.entity;
diff --git a/ashes/src/components/customers-groups/editor/labels/currency.jsx b/ashes/src/components/customers-groups/editor/labels/currency.jsx
index b6aedbdeec..8f5e873c04 100644
--- a/ashes/src/components/customers-groups/editor/labels/currency.jsx
+++ b/ashes/src/components/customers-groups/editor/labels/currency.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { prefix } from 'lib/text-utils';
 
 //components
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import propTypes from '../widgets/propTypes';
 
 type LabelProps = {
diff --git a/ashes/src/components/customers-groups/stats/stats.jsx b/ashes/src/components/customers-groups/stats/stats.jsx
index a6caf952aa..1ea46fbae9 100644
--- a/ashes/src/components/customers-groups/stats/stats.jsx
+++ b/ashes/src/components/customers-groups/stats/stats.jsx
@@ -7,7 +7,7 @@ import React, { Component, Element } from 'react';
 
 // components
 import { PanelList, PanelListItem } from 'components/panel/panel-list';
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import RadioButton from 'components/core/radio-button';
 
 // styles
diff --git a/ashes/src/components/customers/store-credits/new-store-credit.jsx b/ashes/src/components/customers/store-credits/new-store-credit.jsx
index b7312e6fea..8131fd6953 100644
--- a/ashes/src/components/customers/store-credits/new-store-credit.jsx
+++ b/ashes/src/components/customers/store-credits/new-store-credit.jsx
@@ -16,7 +16,7 @@ import { PageTitle } from '../../section-title';
 import FormField from '../../forms/formfield';
 import Form from '../../forms/form';
 import Dropdown from '../../dropdown/dropdown';
-import Currency from '../../common/currency';
+import Currency from 'components/utils/currency';
 import SaveCancel from 'components/core/save-cancel';
 import TextInput from 'components/core/text-input';
 import Icon from 'components/core/icon';
diff --git a/ashes/src/components/customers/store-credits/summary.jsx b/ashes/src/components/customers/store-credits/summary.jsx
index 237a2d7af7..e5f062d90c 100644
--- a/ashes/src/components/customers/store-credits/summary.jsx
+++ b/ashes/src/components/customers/store-credits/summary.jsx
@@ -10,7 +10,7 @@ import { Link, IndexLink } from 'components/link';
 import { SectionTitle } from '../../section-title';
 import TabListView from '../../tabs/tabs';
 import TabView from '../../tabs/tab';
-import Currency from '../../common/currency';
+import Currency from 'components/utils/currency';
 import { PanelList, PanelListItem } from '../../panel/panel-list';
 
 type Props = {
diff --git a/ashes/src/components/customers/title-block.jsx b/ashes/src/components/customers/title-block.jsx
index 84c9a3e3d1..78c3537a60 100644
--- a/ashes/src/components/customers/title-block.jsx
+++ b/ashes/src/components/customers/title-block.jsx
@@ -5,14 +5,12 @@ import PropTypes from 'prop-types';
 
 // components
 import Icon from 'components/core/icon';
+import { DateTime } from 'components/common/datetime';
+import Currency from 'components/utils/currency';
 
 //styles
 import styles from './title-block.css';
 
-//components
-import Currency from '../common/currency';
-import { DateTime } from 'components/common/datetime';
-
 export default class Customer extends React.Component {
 
   static propTypes = {
diff --git a/ashes/src/components/gift-cards/gift-card.jsx b/ashes/src/components/gift-cards/gift-card.jsx
index d58da3dec5..7ad103ba80 100644
--- a/ashes/src/components/gift-cards/gift-card.jsx
+++ b/ashes/src/components/gift-cards/gift-card.jsx
@@ -11,7 +11,7 @@ import { IndexLink, Link } from 'components/link';
 import { Errors } from 'components/utils/errors';
 import GiftCardCode from './gift-card-code';
 import { DateTime } from '../common/datetime';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import Spinner from 'components/core/spinner';
 import { PageTitle } from '../section-title';
 import Panel from '../panel/panel';
diff --git a/ashes/src/components/inventory/inventory-warehouse-drawer.jsx b/ashes/src/components/inventory/inventory-warehouse-drawer.jsx
index 6ca0d6186f..13e983e194 100644
--- a/ashes/src/components/inventory/inventory-warehouse-drawer.jsx
+++ b/ashes/src/components/inventory/inventory-warehouse-drawer.jsx
@@ -9,7 +9,7 @@ import Table from '../table/table';
 import Drawer from '../table/drawer';
 import TableRow from '../table/row';
 import Counter from 'components/core/counter';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 
 import * as WarehousesActions from 'modules/inventory/warehouses';
 
diff --git a/ashes/src/components/orders/shipments/shipped-item.jsx b/ashes/src/components/orders/shipments/shipped-item.jsx
index 7c4e901d9a..373460c39e 100644
--- a/ashes/src/components/orders/shipments/shipped-item.jsx
+++ b/ashes/src/components/orders/shipments/shipped-item.jsx
@@ -7,7 +7,7 @@ import React, { Element } from 'react';
 import styles from './shipped-item.css';
 
 // components
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import ProductImage from 'components/imgix/product-image';
 
 //types
diff --git a/ashes/src/components/orders/shipments/transaction.jsx b/ashes/src/components/orders/shipments/transaction.jsx
index d388d43a5b..35fdd48a4a 100644
--- a/ashes/src/components/orders/shipments/transaction.jsx
+++ b/ashes/src/components/orders/shipments/transaction.jsx
@@ -7,7 +7,7 @@ import React, { Element } from 'react';
 import styles from './transaction.css';
 
 // components
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import PaymentMethod from 'components/payment/payment-method';
 import { DateTime } from 'components/common/datetime';
 
diff --git a/ashes/src/components/orders/shipments/unshipped-items.jsx b/ashes/src/components/orders/shipments/unshipped-items.jsx
index 42e16eb8f2..b582001388 100644
--- a/ashes/src/components/orders/shipments/unshipped-items.jsx
+++ b/ashes/src/components/orders/shipments/unshipped-items.jsx
@@ -13,7 +13,7 @@ import ContentBox from 'components/content-box/content-box';
 import TableView from 'components/table/tableview';
 import TableRow from 'components/table/row';
 import TableCell from 'components/table/cell';
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import ProductImage from 'components/imgix/product-image';
 
 // styles
diff --git a/ashes/src/components/payment-row/debit-credit-info.jsx b/ashes/src/components/payment-row/debit-credit-info.jsx
index e3ccb63b8f..1fb1ff0523 100644
--- a/ashes/src/components/payment-row/debit-credit-info.jsx
+++ b/ashes/src/components/payment-row/debit-credit-info.jsx
@@ -1,6 +1,6 @@
 /* @flow */
 import React from 'react';
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 
 type Props = {
   amount: number;
diff --git a/ashes/src/components/payment-row/debit-credit.jsx b/ashes/src/components/payment-row/debit-credit.jsx
index 851e939129..9f6a0bee36 100644
--- a/ashes/src/components/payment-row/debit-credit.jsx
+++ b/ashes/src/components/payment-row/debit-credit.jsx
@@ -2,7 +2,7 @@
 import React, { Component, Element } from 'react';
 import { autobind } from 'core-decorators';
 
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import CurrencyInput from 'components/forms/currency-input';
 import { Form, FormField } from 'components/forms';
 import SaveCancel from 'components/core/save-cancel';
diff --git a/ashes/src/components/payment-row/payment-row.jsx b/ashes/src/components/payment-row/payment-row.jsx
index 12827d50b1..6e2586a140 100644
--- a/ashes/src/components/payment-row/payment-row.jsx
+++ b/ashes/src/components/payment-row/payment-row.jsx
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 
 // components
 import CreditCardDetails from './credit-card';
-import Currency from 'components/common/currency';
+import Currency from 'components/utils/currency';
 import GiftCardDetails from './gift-card';
 import StoreCreditDetails from './store-credit';
 import PaymentMethodDetails from 'components/payment/payment-method';
diff --git a/ashes/src/components/rmas/helpers.jsx b/ashes/src/components/rmas/helpers.jsx
index 5c70403831..c38fdb42e7 100644
--- a/ashes/src/components/rmas/helpers.jsx
+++ b/ashes/src/components/rmas/helpers.jsx
@@ -5,7 +5,7 @@ import { Link } from 'components/link';
 import TableRow from '../table/row';
 import TableCell from '../table/cell';
 import { DateTime } from '../common/datetime';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import PaymentMethod from '../../components/payment/payment-method';
 
 const CustomerInfo = props => {
diff --git a/ashes/src/components/shipping/shipping-method-row.jsx b/ashes/src/components/shipping/shipping-method-row.jsx
index 187e20232a..d2e2941b21 100644
--- a/ashes/src/components/shipping/shipping-method-row.jsx
+++ b/ashes/src/components/shipping/shipping-method-row.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 // components
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import { EditButton } from 'components/core/button';
 import CurrencyInput from '../forms/currency-input';
 import RadioButton from 'components/core/radio-button';
diff --git a/ashes/src/components/table/cell.jsx b/ashes/src/components/table/cell.jsx
index f358e861a6..af2be731cc 100644
--- a/ashes/src/components/table/cell.jsx
+++ b/ashes/src/components/table/cell.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'components/link';
 import columnPropType from './column-prop-type';
 import { Moment, Date, DateTime, Time } from '../common/datetime';
-import Currency from '../common/currency';
+import Currency from 'components/utils/currency';
 import State from '../common/state';
 import Change from 'components/utils/change';
 import ProductImage from 'components/imgix/product-image';
diff --git a/ashes/src/components/common/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
similarity index 93%
rename from ashes/src/components/common/currency.jsx
rename to ashes/src/components/utils/currency/currency.jsx
index a8c2238e6c..a14dd98a48 100644
--- a/ashes/src/components/common/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import formatCurrency from '../../lib/format-currency';
+import formatCurrency from '../../../lib/format-currency';
 
 const Currency = (props) => {
   const {isTransaction, id, ...rest} = props;
diff --git a/ashes/src/components/utils/currency/index.js b/ashes/src/components/utils/currency/index.js
new file mode 100644
index 0000000000..db6389a25b
--- /dev/null
+++ b/ashes/src/components/utils/currency/index.js
@@ -0,0 +1 @@
+export default from './currency';

From a46d37b0eb6b5827b374b2c551dca49462cbf934 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Thu, 15 Jun 2017 17:21:12 +0300
Subject: [PATCH 14/51] fix: change missed path's

---
 ashes/src/components/customers-groups/editor/inputs/index.jsx  | 2 +-
 ashes/src/components/customers-groups/editor/labels/index.jsx  | 2 +-
 ashes/src/components/customers-groups/editor/widgets/index.jsx | 2 +-
 ashes/src/components/promotions/discounts/index.jsx            | 2 +-
 ashes/src/components/promotions/widgets/index.js               | 2 +-
 ashes/test/acceptance/currency/currency.jsx                    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ashes/src/components/customers-groups/editor/inputs/index.jsx b/ashes/src/components/customers-groups/editor/inputs/index.jsx
index 7145b1fead..c45c2b3441 100644
--- a/ashes/src/components/customers-groups/editor/inputs/index.jsx
+++ b/ashes/src/components/customers-groups/editor/inputs/index.jsx
@@ -1,4 +1,4 @@
-import currency from './currency';
+import currency from 'components/utils/currency';
 import date from './date';
 import dropdown from './dropdown';
 import lookup from './lookup';
diff --git a/ashes/src/components/customers-groups/editor/labels/index.jsx b/ashes/src/components/customers-groups/editor/labels/index.jsx
index 7145b1fead..c45c2b3441 100644
--- a/ashes/src/components/customers-groups/editor/labels/index.jsx
+++ b/ashes/src/components/customers-groups/editor/labels/index.jsx
@@ -1,4 +1,4 @@
-import currency from './currency';
+import currency from 'components/utils/currency';
 import date from './date';
 import dropdown from './dropdown';
 import lookup from './lookup';
diff --git a/ashes/src/components/customers-groups/editor/widgets/index.jsx b/ashes/src/components/customers-groups/editor/widgets/index.jsx
index 7145b1fead..c45c2b3441 100644
--- a/ashes/src/components/customers-groups/editor/widgets/index.jsx
+++ b/ashes/src/components/customers-groups/editor/widgets/index.jsx
@@ -1,4 +1,4 @@
-import currency from './currency';
+import currency from 'components/utils/currency';
 import date from './date';
 import dropdown from './dropdown';
 import lookup from './lookup';
diff --git a/ashes/src/components/promotions/discounts/index.jsx b/ashes/src/components/promotions/discounts/index.jsx
index 03478e0522..720d1e3d1f 100644
--- a/ashes/src/components/promotions/discounts/index.jsx
+++ b/ashes/src/components/promotions/discounts/index.jsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { autobind } from 'core-decorators';
 import { Dropdown } from '../../dropdown';
 
-import Currency from './currency';
+import Currency from 'components/utils/currency';
 import Counter from './counter';
 import styles from './discounts.css';
 import { Checkbox } from 'components/core/checkbox';
diff --git a/ashes/src/components/promotions/widgets/index.js b/ashes/src/components/promotions/widgets/index.js
index 1e3c8aac3e..99e7fdc710 100644
--- a/ashes/src/components/promotions/widgets/index.js
+++ b/ashes/src/components/promotions/widgets/index.js
@@ -2,5 +2,5 @@
 export selectProducts from './select-products';
 export selectProduct from './select-product';
 export percent from './percent';
-export currency from './currency';
+export currency from 'components/utils/currency';
 export counter from './counter';
diff --git a/ashes/test/acceptance/currency/currency.jsx b/ashes/test/acceptance/currency/currency.jsx
index 7cd5d8fae3..1a2db312d7 100644
--- a/ashes/test/acceptance/currency/currency.jsx
+++ b/ashes/test/acceptance/currency/currency.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 describe('Currency', function() {
-  const Currency = requireComponent('common/currency.jsx');
+  const Currency = requireComponent('utils/currency/currency.jsx');
 
   it('should render not empty tag by default', function() {
     expect(Currency({}), 'to equal', <span className="fc-currency">0.00</span>);

From bcd40d409043eb69a4a45b02c095e3ad8c8876df Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Thu, 15 Jun 2017 20:28:01 +0300
Subject: [PATCH 15/51] refactor: add flow & replace less with css-modules

---
 .../components/utils/currency/currency.css    | 25 +++++++++
 .../components/utils/currency/currency.jsx    | 51 +++++++++++++------
 ashes/src/less/modules/_currency.less         | 25 ---------
 3 files changed, 61 insertions(+), 40 deletions(-)
 create mode 100644 ashes/src/components/utils/currency/currency.css
 delete mode 100644 ashes/src/less/modules/_currency.less

diff --git a/ashes/src/components/utils/currency/currency.css b/ashes/src/components/utils/currency/currency.css
new file mode 100644
index 0000000000..04e06d1cf2
--- /dev/null
+++ b/ashes/src/components/utils/currency/currency.css
@@ -0,0 +1,25 @@
+@import "colors.css";
+
+.currency {
+  display: inline-block;
+
+  &.transaction {
+    color: var(--color-link);
+
+    &.negative {
+      content: "+";
+      color: var(--color-error-text);
+
+      &:before {
+        content: "-";
+        color: var(--color-error-text);
+      }
+    }
+
+    &:before {
+      content: "+";
+      color: var(--color-link);
+      padding-right: 0.35em;
+    }
+  }
+}
diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
index a14dd98a48..15b80ff567 100644
--- a/ashes/src/components/utils/currency/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -1,30 +1,51 @@
+/* @flow */
+
+// libs
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+
+// components
 import formatCurrency from '../../../lib/format-currency';
 
-const Currency = (props) => {
-  const {isTransaction, id, ...rest} = props;
-  const className = classNames('fc-currency', {
-    '_transaction': isTransaction,
-    '_negative': parseInt(props.value, 10) < 0
+// styles
+import s from './currency.css';
+
+type Props = {
+  /** passing value */
+  value: number | string,
+  /** fraction base */
+  fractionBase: number,
+  /** currency name */
+  currency: string,
+  /** set true if value is big number */
+  bigNumber: boolean,
+  /** transaction mode renders colored positive/negative values */
+  isTransaction?: boolean,
+  /** additional className */
+  className?: string
+}
+
+/**
+ * Currency component serves to format passed value
+ * and render it with currency symbol
+ *
+ * @function Change
+ */
+
+const Currency = (props: Props) => {
+  const {isTransaction, id, className, ...rest} = props;
+  const currencyCls = classNames(s.currency, {
+    [s.transaction]: isTransaction,
+    [s.negative]: parseInt(props.value, 10) < 0
   });
 
   return (
-    <span id={id} className={ classNames(className, props.className) }>
+    <span id={id} className={classNames(currencyCls, className)}>
       {formatCurrency(props.value, {...rest})}
     </span>
   );
 };
 
-Currency.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  fractionBase: PropTypes.number,
-  currency: PropTypes.string,
-  bigNumber: PropTypes.bool,
-  isTransaction: PropTypes.bool,
-};
-
 Currency.defaultProps = {
   fractionBase: 2,
   currency: 'USD',
diff --git a/ashes/src/less/modules/_currency.less b/ashes/src/less/modules/_currency.less
deleted file mode 100644
index 668ed57741..0000000000
--- a/ashes/src/less/modules/_currency.less
+++ /dev/null
@@ -1,25 +0,0 @@
-
-.fc-currency {
-  display: inline-block;
-  &._transaction {
-    color: @color-link;
-
-    &._negative {
-      color: @color-error-text;
-
-      &::first-letter {
-        padding-right: 0.35em;
-      }
-
-      &:before {
-        display: none;
-      }
-    }
-
-    &:before {
-      content: "+";
-      color: @color-link;
-      padding-right: 0.35em;
-    }
-  }
-}

From d355e76215c31abe3973fc12fc2bee339e8fd728 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Thu, 15 Jun 2017 20:28:27 +0300
Subject: [PATCH 16/51] refactor: remove _currency.less

---
 ashes/src/less/base.less                    |  1 -
 ashes/test/acceptance/currency/currency.jsx | 16 ++++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/ashes/src/less/base.less b/ashes/src/less/base.less
index ff2e4d9f4f..2dc8654c5a 100644
--- a/ashes/src/less/base.less
+++ b/ashes/src/less/base.less
@@ -12,7 +12,6 @@
 
 /* Modules */
 @import 'modules/_buttons.less';
-@import 'modules/_currency.less';
 @import 'modules/_dropdown.less';
 @import 'modules/_content-box.less';
 @import 'modules/_editable-content-box.less';
diff --git a/ashes/test/acceptance/currency/currency.jsx b/ashes/test/acceptance/currency/currency.jsx
index 1a2db312d7..1d8d176d45 100644
--- a/ashes/test/acceptance/currency/currency.jsx
+++ b/ashes/test/acceptance/currency/currency.jsx
@@ -4,14 +4,14 @@ describe('Currency', function() {
   const Currency = requireComponent('utils/currency/currency.jsx');
 
   it('should render not empty tag by default', function() {
-    expect(Currency({}), 'to equal', <span className="fc-currency">0.00</span>);
+    expect(Currency({}), 'to equal', <span className="currency">0.00</span>);
   });
 
   it('should render empty tag with incorrect value', function() {
     expect(
       Currency({value: 'abc'}),
       'to equal',
-      <span className="fc-currency" />
+      <span className="currency" />
     );
   });
 
@@ -19,7 +19,7 @@ describe('Currency', function() {
     expect(
       Currency({value: 123, currency: 'USD'}),
       'to equal',
-      <span className="fc-currency">$1.23</span>
+      <span className="currency">$1.23</span>
     );
   });
 
@@ -27,7 +27,7 @@ describe('Currency', function() {
     expect(
       Currency({value: -123, currency: 'USD'}),
       'to equal',
-      <span className="fc-currency _negative">-$1.23</span>
+      <span className="currency negative">-$1.23</span>
     );
   });
 
@@ -35,7 +35,7 @@ describe('Currency', function() {
     expect(
       Currency({value: 1234567890, currency: 'USD'}),
       'to equal',
-      <span className="fc-currency">$12,345,678.90</span>
+      <span className="currency">$12,345,678.90</span>
     );
   });
 
@@ -43,7 +43,7 @@ describe('Currency', function() {
     expect(
       Currency({value: 123, fractionBase: 0, currency: 'USD'}),
       'to equal',
-      <span className="fc-currency">$123.00</span>
+      <span className="currency">$123.00</span>
     );
   });
 
@@ -51,7 +51,7 @@ describe('Currency', function() {
     expect(
       Currency({value: 123, currency: 'EUR'}),
       'to equal',
-      <span className="fc-currency">€1.23</span>
+      <span className="currency">€1.23</span>
     );
   });
 
@@ -59,7 +59,7 @@ describe('Currency', function() {
     expect(
       Currency({value: '15151542519515184515', currency: 'USD', bigNumber: true}),
       'to equal',
-      <span className="fc-currency">$151,515,425,195,151,845.15</span>
+      <span className="currency">$151,515,425,195,151,845.15</span>
     );
   });
 });

From b64d29ccda44af18457b4e0971d0f4c1f87f16a4 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Thu, 15 Jun 2017 20:30:44 +0300
Subject: [PATCH 17/51] fix: flow

---
 ashes/src/components/utils/currency/currency.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
index 15b80ff567..1cf248edb4 100644
--- a/ashes/src/components/utils/currency/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -11,6 +11,8 @@ import formatCurrency from '../../../lib/format-currency';
 import s from './currency.css';
 
 type Props = {
+  /** element's id */
+  id: number,
   /** passing value */
   value: number | string,
   /** fraction base */

From 6e5faaa8f1ab99abae1c7726f3103231b94729e1 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 01:26:23 +0300
Subject: [PATCH 18/51] refactor: use `Change` component for transaction mode.

---
 ashes/src/components/utils/change/change.css  |  2 +-
 ashes/src/components/utils/change/change.jsx  | 10 +++++----
 .../components/utils/currency/currency.css    | 21 -------------------
 .../components/utils/currency/currency.jsx    | 17 +++++++++------
 4 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/ashes/src/components/utils/change/change.css b/ashes/src/components/utils/change/change.css
index fa0c769f7d..c3bc4f07ad 100644
--- a/ashes/src/components/utils/change/change.css
+++ b/ashes/src/components/utils/change/change.css
@@ -9,7 +9,7 @@
   }
 
   &.positive {
-    color: var(--color-action-text);
+    color: var(--color-link);
 
     &:before {
       content: "+";
diff --git a/ashes/src/components/utils/change/change.jsx b/ashes/src/components/utils/change/change.jsx
index cffab8ad59..58e7c4a1b5 100644
--- a/ashes/src/components/utils/change/change.jsx
+++ b/ashes/src/components/utils/change/change.jsx
@@ -1,6 +1,7 @@
 /* @flow */
 
 // libs
+import { identity } from 'lodash';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -9,7 +10,9 @@ import s from './change.css';
 
 type Props = {
   /** value of change */
-  value: number
+  value: number,
+  /** value formatting function */
+  format?: ( value: number ) => string
 }
 
 /**
@@ -17,15 +20,14 @@ type Props = {
  *
  * @function Change
  */
-const Change = (props: Props) => {
-  const { value } = props;
+const Change = ({value, format = identity}: Props) => {
 
   const cls = classNames(s.change, {
     [s.positive]: value > 0,
     [s.negative]: value < 0
   });
 
-  return <span className={cls}>{Math.abs(value)}</span>;
+  return <span className={cls}>{format(Math.abs(value))}</span>;
 };
 
 export default Change;
diff --git a/ashes/src/components/utils/currency/currency.css b/ashes/src/components/utils/currency/currency.css
index 04e06d1cf2..e03dcc9b50 100644
--- a/ashes/src/components/utils/currency/currency.css
+++ b/ashes/src/components/utils/currency/currency.css
@@ -1,25 +1,4 @@
-@import "colors.css";
 
 .currency {
   display: inline-block;
-
-  &.transaction {
-    color: var(--color-link);
-
-    &.negative {
-      content: "+";
-      color: var(--color-error-text);
-
-      &:before {
-        content: "-";
-        color: var(--color-error-text);
-      }
-    }
-
-    &:before {
-      content: "+";
-      color: var(--color-link);
-      padding-right: 0.35em;
-    }
-  }
 }
diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
index 1cf248edb4..5baddd3a26 100644
--- a/ashes/src/components/utils/currency/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -1,11 +1,13 @@
 /* @flow */
 
 // libs
+import { curryRight } from 'lodash';
 import React from 'react';
 import classNames from 'classnames';
 
 // components
 import formatCurrency from '../../../lib/format-currency';
+import Change from 'components/utils/change';
 
 // styles
 import s from './currency.css';
@@ -36,14 +38,17 @@ type Props = {
 
 const Currency = (props: Props) => {
   const {isTransaction, id, className, ...rest} = props;
-  const currencyCls = classNames(s.currency, {
-    [s.transaction]: isTransaction,
-    [s.negative]: parseInt(props.value, 10) < 0
-  });
+  let value;
+
+  if (isTransaction) {
+    value = <Change value={props.value} format={curryRight(formatCurrency)(rest)} />;
+  } else {
+    value = formatCurrency(props.value, rest);
+  }
 
   return (
-    <span id={id} className={classNames(currencyCls, className)}>
-      {formatCurrency(props.value, {...rest})}
+    <span id={id} className={classNames(s.currency, className)}>
+      {value}
     </span>
   );
 };

From 8849ce1dd059fabb291b4eaa8226214e874f4f8d Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 13:22:36 +0300
Subject: [PATCH 19/51] chore: change prop description

---
 ashes/src/components/utils/currency/currency.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
index 5baddd3a26..7df026f7d8 100644
--- a/ashes/src/components/utils/currency/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -19,7 +19,7 @@ type Props = {
   value: number | string,
   /** fraction base */
   fractionBase: number,
-  /** currency name */
+  /** currency abbreviation (e.g. 'EUR') */
   currency: string,
   /** set true if value is big number */
   bigNumber: boolean,

From 40386c29f1bc44d7821001b3432cbb02e90b6e4c Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 13:22:51 +0300
Subject: [PATCH 20/51] feat: add currency to styleguide

---
 .../src/components/utils/currency/currency.md | 65 +++++++++++++++++++
 ashes/styleguide/config.styleguide.js         |  1 +
 2 files changed, 66 insertions(+)
 create mode 100644 ashes/src/components/utils/currency/currency.md

diff --git a/ashes/src/components/utils/currency/currency.md b/ashes/src/components/utils/currency/currency.md
new file mode 100644
index 0000000000..5a2aeaa700
--- /dev/null
+++ b/ashes/src/components/utils/currency/currency.md
@@ -0,0 +1,65 @@
+#### Basic usage
+
+```javascript
+import Currency from 'components/utils/currency';
+
+<Currency value={200} isTransaction />
+```
+
+### States
+```
+<div className="demo" >
+  <Currency value={100}  />
+  <Currency value={200} isTransaction />
+  <Currency value={-200} isTransaction />
+  <Currency value={0} isTransaction />
+</div>
+
+```
+
+### Example
+```
+class CurrencyExample extends React.Component {
+  constructor() {
+    this.state = {
+      value: 0,
+      isTransaction: false
+    };
+  }
+
+  checkboxChange() {
+    this.setState({ isTransaction: !this.state.isTransaction });
+  }
+
+  inputChange(value) {
+    this.setState({ value });
+  }
+
+  render() {
+    return (
+      <div className="demo">
+        <div>
+          <Checkbox.Checkbox
+            id='isTransaction'
+            label='isTransaction'
+            onChange={this.checkboxChange.bind(this)} />
+        </div>
+        <div>
+          <TextInput
+            value={this.state.value}
+            onChange={this.inputChange.bind(this)}
+            placeholder="Enter value" />
+        </div>
+        <div>
+          Result:
+          <Currency
+            value={this.state.value}
+            isTransaction={this.state.isTransaction} />
+        </div>
+      </div>
+    );
+  }
+}
+
+<CurrencyExample />
+```
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 2cbab2c357..2fdad97c16 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -138,6 +138,7 @@ module.exports = {
               name: 'Other',
               components: () => ([
                 path.resolve(__dirname, '../src/components/utils/change/change.jsx'),
+                path.resolve(__dirname, '../src/components/utils/currency/currency.jsx'),
               ]),
             },
           ]

From acf85f8981ff396393e158699651fe41082cc134 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 16 Jun 2017 16:18:18 +0300
Subject: [PATCH 21/51] feat: add mocha-tests

& remove old tests
---
 .../utils/currency/currency.spec.jsx          | 106 ++++++++++++++++++
 ashes/test/acceptance/currency/currency.jsx   |  65 -----------
 2 files changed, 106 insertions(+), 65 deletions(-)
 create mode 100644 ashes/src/components/utils/currency/currency.spec.jsx
 delete mode 100644 ashes/test/acceptance/currency/currency.jsx

diff --git a/ashes/src/components/utils/currency/currency.spec.jsx b/ashes/src/components/utils/currency/currency.spec.jsx
new file mode 100644
index 0000000000..31f0130300
--- /dev/null
+++ b/ashes/src/components/utils/currency/currency.spec.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Currency from './currency';
+
+describe('Currency', function () {
+
+  it('should render non-empty tag by default', function () {
+
+    const currency = mount(
+      <Currency />
+    );
+
+    expect(currency.text()).to.equal('$0.00');
+  });
+
+  it('should render empty tag with incorrect value', function () {
+
+    const currency = mount(
+      <Currency value={'abc'} />
+    );
+
+    expect(currency.text()).to.equal('');
+  });
+
+  it('should render correct value', function () {
+
+    const currency = mount(
+      <Currency value={'abc'} />
+    );
+
+    expect(currency.text()).to.equal('');
+  });
+
+  it('should render correct currency', function () {
+
+    const currency = mount(
+      <Currency value={'123'} />
+    );
+
+    expect(currency.text()).to.equal('$1.23');
+  });
+
+  it('should render correct negative value', function () {
+
+    const currency = mount(
+      <Currency value={'-123'} />
+    );
+
+    expect(currency.text()).to.equal('-$1.23');
+  });
+
+  it('should render value with delimiter', function () {
+
+    const currency = mount(
+      <Currency value={'1234567890'} />
+    );
+
+    expect(currency.text()).to.equal('$12,345,678.90');
+  });
+
+  it('should support another fractionBase', function () {
+
+    const currency = mount(
+      <Currency value={'123'} fractionBase={0} />
+    );
+
+    expect(currency.text()).to.equal('$123.00');
+  });
+
+  it('should support another currency', function () {
+
+    const currency = mount(
+      <Currency value={'123'} currency="EUR" />
+    );
+
+    expect(currency.text()).to.equal('€1.23');
+  });
+
+  it('should support big integers', function () {
+
+    const currency = mount(
+      <Currency value={'15151542519515184515'} bigNumber />
+    );
+
+    expect(currency.text()).to.equal('$151,515,425,195,151,845.15');
+  });
+
+  it('should render positive style in Transaction mode', function () {
+
+    const currency = mount(
+      <Currency value={'100'} isTransaction />
+    );
+
+    expect(currency.find('Change').hasClass('positive')).to.be.true;
+  });
+
+  it('should render negative style in Transaction mode', function () {
+
+    const currency = mount(
+      <Currency value={'-100'} isTransaction />
+    );
+
+    expect(currency.find('Change').hasClass('negative')).to.be.true;
+  });
+});
diff --git a/ashes/test/acceptance/currency/currency.jsx b/ashes/test/acceptance/currency/currency.jsx
deleted file mode 100644
index 1d8d176d45..0000000000
--- a/ashes/test/acceptance/currency/currency.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-
-describe('Currency', function() {
-  const Currency = requireComponent('utils/currency/currency.jsx');
-
-  it('should render not empty tag by default', function() {
-    expect(Currency({}), 'to equal', <span className="currency">0.00</span>);
-  });
-
-  it('should render empty tag with incorrect value', function() {
-    expect(
-      Currency({value: 'abc'}),
-      'to equal',
-      <span className="currency" />
-    );
-  });
-
-  it('should render correct value', function() {
-    expect(
-      Currency({value: 123, currency: 'USD'}),
-      'to equal',
-      <span className="currency">$1.23</span>
-    );
-  });
-
-  it('should render correct negative value', function() {
-    expect(
-      Currency({value: -123, currency: 'USD'}),
-      'to equal',
-      <span className="currency negative">-$1.23</span>
-    );
-  });
-
-  it('should render value with delimiter', function() {
-    expect(
-      Currency({value: 1234567890, currency: 'USD'}),
-      'to equal',
-      <span className="currency">$12,345,678.90</span>
-    );
-  });
-
-  it('should support another fractionBase', function() {
-    expect(
-      Currency({value: 123, fractionBase: 0, currency: 'USD'}),
-      'to equal',
-      <span className="currency">$123.00</span>
-    );
-  });
-
-  it('should support another currency', function() {
-    expect(
-      Currency({value: 123, currency: 'EUR'}),
-      'to equal',
-      <span className="currency">€1.23</span>
-    );
-  });
-
-  it('should support big integers', function() {
-    expect(
-      Currency({value: '15151542519515184515', currency: 'USD', bigNumber: true}),
-      'to equal',
-      <span className="currency">$151,515,425,195,151,845.15</span>
-    );
-  });
-});

From ff77401ad7d595255a37410e594f8d6220ba1ba6 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Sat, 17 Jun 2017 02:45:41 +0300
Subject: [PATCH 22/51] formatting and import fixes

---
 ashes/src/components/utils/change/change.jsx     |  4 ++--
 ashes/src/components/utils/currency/currency.jsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ashes/src/components/utils/change/change.jsx b/ashes/src/components/utils/change/change.jsx
index 58e7c4a1b5..8ba8211c6f 100644
--- a/ashes/src/components/utils/change/change.jsx
+++ b/ashes/src/components/utils/change/change.jsx
@@ -12,7 +12,7 @@ type Props = {
   /** value of change */
   value: number,
   /** value formatting function */
-  format?: ( value: number ) => string
+  format?: (value: number) => string
 }
 
 /**
@@ -20,7 +20,7 @@ type Props = {
  *
  * @function Change
  */
-const Change = ({value, format = identity}: Props) => {
+const Change = ({ value, format = identity }: Props) => {
 
   const cls = classNames(s.change, {
     [s.positive]: value > 0,
diff --git a/ashes/src/components/utils/currency/currency.jsx b/ashes/src/components/utils/currency/currency.jsx
index 7df026f7d8..94df9b5d10 100644
--- a/ashes/src/components/utils/currency/currency.jsx
+++ b/ashes/src/components/utils/currency/currency.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 // components
-import formatCurrency from '../../../lib/format-currency';
+import formatCurrency from 'lib/format-currency';
 import Change from 'components/utils/change';
 
 // styles
@@ -18,11 +18,11 @@ type Props = {
   /** passing value */
   value: number | string,
   /** fraction base */
-  fractionBase: number,
+  fractionBase?: number,
   /** currency abbreviation (e.g. 'EUR') */
-  currency: string,
+  currency?: string,
   /** set true if value is big number */
-  bigNumber: boolean,
+  bigNumber?: boolean,
   /** transaction mode renders colored positive/negative values */
   isTransaction?: boolean,
   /** additional className */
@@ -37,7 +37,7 @@ type Props = {
  */
 
 const Currency = (props: Props) => {
-  const {isTransaction, id, className, ...rest} = props;
+  const { isTransaction, id, className, ...rest } = props;
   let value;
 
   if (isTransaction) {

From 26673da855d32e190e41b11a6c5a0bb2887f1118 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Mon, 19 Jun 2017 11:39:33 +0300
Subject: [PATCH 23/51] chore: remove duplicated test

minor correction to test description
---
 ashes/src/components/utils/currency/currency.spec.jsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/ashes/src/components/utils/currency/currency.spec.jsx b/ashes/src/components/utils/currency/currency.spec.jsx
index 31f0130300..a3eae83e52 100644
--- a/ashes/src/components/utils/currency/currency.spec.jsx
+++ b/ashes/src/components/utils/currency/currency.spec.jsx
@@ -14,16 +14,7 @@ describe('Currency', function () {
     expect(currency.text()).to.equal('$0.00');
   });
 
-  it('should render empty tag with incorrect value', function () {
-
-    const currency = mount(
-      <Currency value={'abc'} />
-    );
-
-    expect(currency.text()).to.equal('');
-  });
-
-  it('should render correct value', function () {
+  it('should render empty string when get incorrect value', function () {
 
     const currency = mount(
       <Currency value={'abc'} />

From 04acd1131f26ee3b43bcc72e2300080a40b6ff5c Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Mon, 19 Jun 2017 13:59:21 +0300
Subject: [PATCH 24/51] feat: add mocha-test for `datetime`

---
 .../utils/datetime/datetime.spec.jsx          | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 ashes/src/components/utils/datetime/datetime.spec.jsx

diff --git a/ashes/src/components/utils/datetime/datetime.spec.jsx b/ashes/src/components/utils/datetime/datetime.spec.jsx
new file mode 100644
index 0000000000..54269a46b9
--- /dev/null
+++ b/ashes/src/components/utils/datetime/datetime.spec.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import * as DateTime from './datetime';
+
+describe('DateTime', function () {
+
+  it('should render emptyValue, when no value prop defined', function () {
+
+    const datetime = mount(
+      <DateTime.Moment />
+    );
+
+    expect(datetime.hasClass('time')).to.be.true;
+    expect(datetime.text()).to.equal('not set');
+  });
+
+  it('should render date/time in (L LTS) format by default', function () {
+
+    const datetime = mount(
+      <DateTime.Moment value={'2017-05-19T13:51:50.417Z'} />
+    );
+
+    expect(datetime.find('time').hasClass('time')).to.be.true;
+    expect(datetime.text()).to.equal('05/19/2017 4:51:50 PM');
+  });
+
+  it('should render date/time with defined format', function () {
+
+    const datetime = mount(
+      <DateTime.Moment value={'2017-05-19T13:51:50.417Z'} format="L LT" />
+    );
+
+    expect(datetime.text()).to.equal('05/19/2017 4:51 PM');
+  });
+
+  it('should render passed className inside Moment', function () {
+
+    const datetime = mount(
+      <DateTime.Moment className="new-className" />
+    );
+
+    expect(datetime.hasClass('new-className')).to.be.true;
+  });
+
+  it('should render date/time in (L LT) format', function () {
+
+    const datetime = mount(
+      <DateTime.DateTime value={'2017-05-19T13:51:50.417Z'} />
+    );
+
+    expect(datetime.text()).to.equal('05/19/2017 4:51 PM');
+  });
+
+  it('should render date in (L) format', function () {
+
+    const datetime = mount(
+      <DateTime.Date value={'2017-05-19T13:51:50.417Z'} />
+    );
+
+    expect(datetime.text()).to.equal('05/19/2017');
+  });
+
+  it('should render date/time in (LT) format', function () {
+
+    const datetime = mount(
+      <DateTime.Time value={'2017-05-19T13:51:50.417Z'} />
+    );
+
+    expect(datetime.text()).to.equal('4:51 PM');
+  });
+
+});

From 2dfb08404013fc0471ca28fdd049c9d1004d2ddf Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Mon, 19 Jun 2017 14:17:08 +0300
Subject: [PATCH 25/51] fix: paths after merge feature branch

---
 ashes/src/components/customers-groups/group-details.jsx | 2 +-
 ashes/src/components/customers/title-block.jsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ashes/src/components/customers-groups/group-details.jsx b/ashes/src/components/customers-groups/group-details.jsx
index 687f21a09d..c5cc33c3da 100644
--- a/ashes/src/components/customers-groups/group-details.jsx
+++ b/ashes/src/components/customers-groups/group-details.jsx
@@ -38,7 +38,7 @@ import Criterion from './editor/criterion-view';
 import CustomerGroupStats from './stats';
 import SearchCustomersModal from './customers/search-modal';
 import Icon from 'components/core/icon';
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 
 type State = {
   criteriaOpen: boolean,
diff --git a/ashes/src/components/customers/title-block.jsx b/ashes/src/components/customers/title-block.jsx
index 78c3537a60..92d88aa262 100644
--- a/ashes/src/components/customers/title-block.jsx
+++ b/ashes/src/components/customers/title-block.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 // components
 import Icon from 'components/core/icon';
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import Currency from 'components/utils/currency';
 
 //styles

From 7e105ba51e3c033f6855d7777011d08b96fe1c58 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Mon, 19 Jun 2017 16:35:24 +0300
Subject: [PATCH 26/51] fix: input/expected time format

---
 .../utils/datetime/datetime.spec.jsx          | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/ashes/src/components/utils/datetime/datetime.spec.jsx b/ashes/src/components/utils/datetime/datetime.spec.jsx
index 54269a46b9..af1b70e61f 100644
--- a/ashes/src/components/utils/datetime/datetime.spec.jsx
+++ b/ashes/src/components/utils/datetime/datetime.spec.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import moment from 'moment';
 
 import * as DateTime from './datetime';
 
@@ -16,22 +17,24 @@ describe('DateTime', function () {
   });
 
   it('should render date/time in (L LTS) format by default', function () {
-
+    const date = '2017-12-29T15:10:30';
+    const expectedResult = moment.utc(date).local().format('L LTS');
     const datetime = mount(
-      <DateTime.Moment value={'2017-05-19T13:51:50.417Z'} />
+      <DateTime.Moment value={date} />
     );
 
     expect(datetime.find('time').hasClass('time')).to.be.true;
-    expect(datetime.text()).to.equal('05/19/2017 4:51:50 PM');
+    expect(datetime.text()).to.equal(expectedResult);
   });
 
   it('should render date/time with defined format', function () {
-
+    const date = '2017-12-29T15:10:30';
+    const expectedResult = moment.utc(date).local().format('L LT');
     const datetime = mount(
-      <DateTime.Moment value={'2017-05-19T13:51:50.417Z'} format="L LT" />
+      <DateTime.Moment value={date} format="L LT" />
     );
 
-    expect(datetime.text()).to.equal('05/19/2017 4:51 PM');
+    expect(datetime.text()).to.equal(expectedResult);
   });
 
   it('should render passed className inside Moment', function () {
@@ -44,30 +47,33 @@ describe('DateTime', function () {
   });
 
   it('should render date/time in (L LT) format', function () {
-
+    const date = '2017-12-29T15:10:30';
+    const expectedResult = moment.utc(date).local().format('L LT');
     const datetime = mount(
-      <DateTime.DateTime value={'2017-05-19T13:51:50.417Z'} />
+      <DateTime.DateTime value={date} />
     );
 
-    expect(datetime.text()).to.equal('05/19/2017 4:51 PM');
+    expect(datetime.text()).to.equal(expectedResult);
   });
 
   it('should render date in (L) format', function () {
-
+    const date = '2017-12-29T15:10:30';
+    const expectedResult = moment.utc(date).local().format('L');
     const datetime = mount(
-      <DateTime.Date value={'2017-05-19T13:51:50.417Z'} />
+      <DateTime.Date value={date} />
     );
 
-    expect(datetime.text()).to.equal('05/19/2017');
+    expect(datetime.text()).to.equal(expectedResult);
   });
 
   it('should render date/time in (LT) format', function () {
-
+    const date = '2017-12-29T15:10:30';
+    const expectedResult = moment.utc(date).local().format('LT');
     const datetime = mount(
-      <DateTime.Time value={'2017-05-19T13:51:50.417Z'} />
+      <DateTime.Time value={date} />
     );
 
-    expect(datetime.text()).to.equal('4:51 PM');
+    expect(datetime.text()).to.equal(expectedResult);
   });
 
 });

From 9e2b89591a4a2fe768cab10fd0257d32d4d89722 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Mon, 19 Jun 2017 12:45:45 -0700
Subject: [PATCH 27/51] merge fix

---
 ashes/src/components/core/checkbox/checkbox.css         | 2 --
 ashes/src/components/core/swatch-input/swatch-input.css | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/ashes/src/components/core/checkbox/checkbox.css b/ashes/src/components/core/checkbox/checkbox.css
index 6b49f95d17..93fd5e9c0b 100644
--- a/ashes/src/components/core/checkbox/checkbox.css
+++ b/ashes/src/components/core/checkbox/checkbox.css
@@ -171,8 +171,6 @@
     padding: 0 10px;
     text-align: right;
     color: var(--color-light-text);
-    /*font-size: 16px;
-    line-height: 34px;*/
     font: var(--font-section-title);
     user-select: none;
     cursor: pointer;
diff --git a/ashes/src/components/core/swatch-input/swatch-input.css b/ashes/src/components/core/swatch-input/swatch-input.css
index 53fdccc93a..0412361324 100644
--- a/ashes/src/components/core/swatch-input/swatch-input.css
+++ b/ashes/src/components/core/swatch-input/swatch-input.css
@@ -8,7 +8,7 @@
   &::before {
     content: "#";
     position: absolute;
-    padding: 10px 10px;
+    padding: 10px;
     color: var(--color-additional-text);
   }
 

From 4b9d93562f94d9dbbfd0c14bf4bf3b27d181cd30 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 23 Jun 2017 14:43:47 +0300
Subject: [PATCH 28/51] fix: remove weird aftermerge double lines

---
 ashes/src/components/core/icon/icon.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/ashes/src/components/core/icon/icon.jsx b/ashes/src/components/core/icon/icon.jsx
index 7d27838a32..1fece8f70f 100644
--- a/ashes/src/components/core/icon/icon.jsx
+++ b/ashes/src/components/core/icon/icon.jsx
@@ -6,11 +6,7 @@ type Props = {
   /** icon type */
   name: string,
   /** additional className */
-<<<<<<< HEAD
-  className?: string
-=======
   className?: string,
->>>>>>> origin/master
 };
 
 /**

From 2a09d49587d7eb8d4a7d8f67dfd081cd50a16806 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 23 Jun 2017 18:41:45 +0300
Subject: [PATCH 29/51] refactor: make Moment not exportable

remove unused css
---
 ashes/src/components/table/cell.jsx           |  2 -
 .../components/utils/datetime/datetime.css    |  4 --
 .../components/utils/datetime/datetime.jsx    | 41 +++++++++----------
 .../src/components/utils/datetime/datetime.md | 23 ++---------
 4 files changed, 23 insertions(+), 47 deletions(-)
 delete mode 100644 ashes/src/components/utils/datetime/datetime.css

diff --git a/ashes/src/components/table/cell.jsx b/ashes/src/components/table/cell.jsx
index f54705c997..c0e05a0438 100644
--- a/ashes/src/components/table/cell.jsx
+++ b/ashes/src/components/table/cell.jsx
@@ -31,8 +31,6 @@ function getCell(column, children, row) {
       return <Currency value={children} currency={getCurrency(column, row)} />;
     case 'transaction':
       return <Currency value={children} currency={getCurrency(column, row)} isTransaction={true} />;
-    case 'moment':
-      return <Moment value={children} />;
     case 'date':
       return <Date value={children} />;
     case 'datetime':
diff --git a/ashes/src/components/utils/datetime/datetime.css b/ashes/src/components/utils/datetime/datetime.css
deleted file mode 100644
index 5eae0e082a..0000000000
--- a/ashes/src/components/utils/datetime/datetime.css
+++ /dev/null
@@ -1,4 +0,0 @@
-
-.time {
-
-}
diff --git a/ashes/src/components/utils/datetime/datetime.jsx b/ashes/src/components/utils/datetime/datetime.jsx
index a9d21f0aaa..d3a945f928 100644
--- a/ashes/src/components/utils/datetime/datetime.jsx
+++ b/ashes/src/components/utils/datetime/datetime.jsx
@@ -3,49 +3,51 @@
 // libs
 import React from 'react';
 import moment from 'moment';
-import classnames from 'classnames';
 
-// styles
-import s from './datetime.css';
-
-type Props = {
+type DateTimeProps = {
   /** time string */
-  value?: string,
-  /** set UTC  */
+  value: string,
+  /** set UTC time*/
   utc?: boolean,
-  /** set time format */
-  format?: string,
   /** set empty value text */
   emptyValue?: string,
-  /** additional className */
+  /** className */
   className?: string
 }
 
+type MomentProps = DateTimeProps & {
+  /** set time format */
+  format: string,
+};
+
 /**
  * `DateTime`, `Date`, and `Time` - are simple components
  * build on the top of generic `Moment`
- * and serve to show time data
+ * and serve to show date/time data
  *
- * @function Moment
+ * @function DateTime
  */
-export const Moment = ({
+export const DateTime = (props: DateTimeProps) => <Moment {...props} format={'L LT'} />;
+export const Date = (props: DateTimeProps) => <Moment {...props} format={'L'} />;
+export const Time = (props: DateTimeProps) => <Moment {...props} format={'LT'} />;
+
+const Moment = ({
   utc,
   value,
   format,
   emptyValue,
   className,
   ...rest
-}: Props) => {
-  const cls = classnames(s.time, className);
+}: MomentProps) => {
 
   if (!value) {
-    return <span className={cls}>{emptyValue}</span>;
+    return <span className={className}>{emptyValue}</span>;
   }
 
   const timeValue = utc ? moment.utc(value) : moment(value);
 
   return (
-    <time className={cls} dateTime={timeValue.local().format()} {...rest}>
+    <time className={className} dateTime={timeValue.local().format()} {...rest}>
       {timeValue.local().format(format)}
     </time>
   );
@@ -56,8 +58,3 @@ Moment.defaultProps = {
   utc: true,
   emptyValue: 'not set',
 };
-
-
-export const DateTime = (props: Props) => <Moment {...props} format={'L LT'} />;
-export const Date = (props: Props) => <Moment {...props} format={'L'} />;
-export const Time = (props: Props) => <Moment {...props} format={'LT'} />;
diff --git a/ashes/src/components/utils/datetime/datetime.md b/ashes/src/components/utils/datetime/datetime.md
index c28840a397..6e9149dfa7 100644
--- a/ashes/src/components/utils/datetime/datetime.md
+++ b/ashes/src/components/utils/datetime/datetime.md
@@ -1,33 +1,18 @@
 #### Basic usage
 
 ```javascript
-<DateTime value={1497636772107} />
+<DateTime value={'2017-12-29T15:10:30'} />
 ```
 
 ### States
 
-```javascript
-import { Moment } from 'components/utils/datetime'
-```
-
-```
-<div className="demo" >
-  <Moment.Moment value={1497636772107} /><br />
-  <Moment.Moment value={1497636772107} format="L LT" /><br />
-  <Moment.Moment value={1497636772107} format="L" /><br />
-  <Moment.Moment value={1497636772107} format="l" /><br />
-  <Moment.Moment value={1497636772107} format="LT" /><br />
-  <Moment.Moment format="LT" />
-</div>
-```
-
 ```javascript
 import { DateTime } from 'components/utils/datetime'
 ```
 
 ```
 <div className="demo" >
-  <Moment.DateTime value={1497636772107} />
+  <DateTime.DateTime value={'2017-12-29T15:10:30'} />
 </div>
 ```
 
@@ -37,7 +22,7 @@ import { Date } from 'components/utils/datetime'
 
 ```
 <div className="demo" >
-  <Moment.Date value={1497636772107} />
+  <DateTime.Date value={'2017-12-29T15:10:30'} />
 </div>
 ```
 
@@ -47,6 +32,6 @@ import { Time } from 'components/utils/datetime'
 
 ```
 <div className="demo" >
-  <Moment.Time value={1497636772107} />
+  <DateTime.Time value={'2017-12-29T15:10:30'} />
 </div>
 ```

From 45aa970b7e0eb130b8870e9105966a9d3721f271 Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 23 Jun 2017 18:45:27 +0300
Subject: [PATCH 30/51] fix: expected result

add describe for DateTime, Date, Time
---
 .../utils/datetime/datetime.spec.jsx          | 140 +++++++++++-------
 1 file changed, 85 insertions(+), 55 deletions(-)

diff --git a/ashes/src/components/utils/datetime/datetime.spec.jsx b/ashes/src/components/utils/datetime/datetime.spec.jsx
index af1b70e61f..7b9d55c5d1 100644
--- a/ashes/src/components/utils/datetime/datetime.spec.jsx
+++ b/ashes/src/components/utils/datetime/datetime.spec.jsx
@@ -1,79 +1,109 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import moment from 'moment';
+import  { DateTime, Date, Time } from './datetime';
 
-import * as DateTime from './datetime';
+describe('DateTime', () => {
 
-describe('DateTime', function () {
+  describe('#DateTime', () => {
+    it('should render date/time in (L LT) format', () => {
+      const datetime = mount(
+        <DateTime value={'2017-12-29T15:10:30'} utc={false} />
+      );
 
-  it('should render emptyValue, when no value prop defined', function () {
+      expect(datetime.text()).to.equal('12/29/2017 3:10 PM');
+    });
 
-    const datetime = mount(
-      <DateTime.Moment />
-    );
+    it('should render default emptyValue when value is not defined', () => {
+      const datetime = mount(
+        <DateTime />
+      );
 
-    expect(datetime.hasClass('time')).to.be.true;
-    expect(datetime.text()).to.equal('not set');
-  });
+      expect(datetime.text()).to.equal('not set');
+    });
 
-  it('should render date/time in (L LTS) format by default', function () {
-    const date = '2017-12-29T15:10:30';
-    const expectedResult = moment.utc(date).local().format('L LTS');
-    const datetime = mount(
-      <DateTime.Moment value={date} />
-    );
+    it('should render custom emptyValue ', () => {
+      const datetime = mount(
+        <DateTime emptyValue="date is not set" />
+      );
 
-    expect(datetime.find('time').hasClass('time')).to.be.true;
-    expect(datetime.text()).to.equal(expectedResult);
-  });
+      expect(datetime.text()).to.equal('date is not set');
+    });
 
-  it('should render date/time with defined format', function () {
-    const date = '2017-12-29T15:10:30';
-    const expectedResult = moment.utc(date).local().format('L LT');
-    const datetime = mount(
-      <DateTime.Moment value={date} format="L LT" />
-    );
+    it('should render passed className', () => {
+      const datetime = mount(
+        <DateTime className="test" />
+      );
+
+      expect(datetime.hasClass('test')).to.be.true;
+    });
 
-    expect(datetime.text()).to.equal(expectedResult);
   });
 
-  it('should render passed className inside Moment', function () {
+  describe('#Date', () => {
+    it('should render date/time in (L) format', () => {
+      const datetime = mount(
+        <Date value={'2017-12-29T15:10:30'} utc={false} />
+      );
 
-    const datetime = mount(
-      <DateTime.Moment className="new-className" />
-    );
+      expect(datetime.text()).to.equal('12/29/2017');
+    });
 
-    expect(datetime.hasClass('new-className')).to.be.true;
-  });
+    it('should render default emptyValue when value is not defined', () => {
+      const datetime = mount(
+        <Date />
+      );
 
-  it('should render date/time in (L LT) format', function () {
-    const date = '2017-12-29T15:10:30';
-    const expectedResult = moment.utc(date).local().format('L LT');
-    const datetime = mount(
-      <DateTime.DateTime value={date} />
-    );
+      expect(datetime.text()).to.equal('not set');
+    });
 
-    expect(datetime.text()).to.equal(expectedResult);
-  });
+    it('should render custom emptyValue ', () => {
+      const datetime = mount(
+        <Date emptyValue="date is not set" />
+      );
+
+      expect(datetime.text()).to.equal('date is not set');
+    });
 
-  it('should render date in (L) format', function () {
-    const date = '2017-12-29T15:10:30';
-    const expectedResult = moment.utc(date).local().format('L');
-    const datetime = mount(
-      <DateTime.Date value={date} />
-    );
+    it('should render passed className', () => {
+      const datetime = mount(
+        <Date className="test" />
+      );
 
-    expect(datetime.text()).to.equal(expectedResult);
+      expect(datetime.hasClass('test')).to.be.true;
+    });
   });
 
-  it('should render date/time in (LT) format', function () {
-    const date = '2017-12-29T15:10:30';
-    const expectedResult = moment.utc(date).local().format('LT');
-    const datetime = mount(
-      <DateTime.Time value={date} />
-    );
+  describe('#Date', () => {
+    it('should render date/time in (LT) format', () => {
+      const datetime = mount(
+        <Time value={'2017-12-29T15:10:30'} utc={false} />
+      );
 
-    expect(datetime.text()).to.equal(expectedResult);
-  });
+      expect(datetime.text()).to.equal('3:10 PM');
+    });
 
+    it('should render default emptyValue when value is not defined', () => {
+      const datetime = mount(
+        <Time />
+      );
+
+      expect(datetime.text()).to.equal('not set');
+    });
+
+    it('should render custom emptyValue ', () => {
+      const datetime = mount(
+        <Time emptyValue="time is not set" />
+      );
+
+      expect(datetime.text()).to.equal('time is not set');
+    });
+
+    it('should render passed className', () => {
+      const datetime = mount(
+        <Time className="test" />
+      );
+
+      expect(datetime.hasClass('test')).to.be.true;
+    });
+  });
 });

From f0a477828dccb065d15fa2d006e0aa551644211a Mon Sep 17 00:00:00 2001
From: Bad_Company <ihor.peredystyi@gmail.com>
Date: Fri, 23 Jun 2017 18:56:12 +0300
Subject: [PATCH 31/51] fix: lint

---
 ashes/src/components/table/cell.jsx                   | 2 +-
 ashes/src/components/utils/datetime/datetime.spec.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ashes/src/components/table/cell.jsx b/ashes/src/components/table/cell.jsx
index c0e05a0438..674e1ed9cc 100644
--- a/ashes/src/components/table/cell.jsx
+++ b/ashes/src/components/table/cell.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 // components
 import { Link } from 'components/link';
 import columnPropType from './column-prop-type';
-import { Moment, Date, DateTime, Time } from 'components/utils/datetime';
+import { Date, DateTime, Time } from 'components/utils/datetime';
 import Currency from 'components/utils/currency';
 import State from '../common/state';
 import Change from 'components/utils/change';
diff --git a/ashes/src/components/utils/datetime/datetime.spec.jsx b/ashes/src/components/utils/datetime/datetime.spec.jsx
index 7b9d55c5d1..054097afdb 100644
--- a/ashes/src/components/utils/datetime/datetime.spec.jsx
+++ b/ashes/src/components/utils/datetime/datetime.spec.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import  { DateTime, Date, Time } from './datetime';
+import { DateTime, Date, Time } from './datetime';
 
 describe('DateTime', () => {
 

From 51950ccd79ce57e459b04485d929b5bd63c0f12b Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Wed, 28 Jun 2017 10:45:57 +0300
Subject: [PATCH 32/51] fix datetime path

---
 ashes/src/components/images/edit-image.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ashes/src/components/images/edit-image.jsx b/ashes/src/components/images/edit-image.jsx
index 7c59daa91d..36024d79b8 100644
--- a/ashes/src/components/images/edit-image.jsx
+++ b/ashes/src/components/images/edit-image.jsx
@@ -6,7 +6,7 @@ import { autobind } from 'core-decorators';
 import React, { Component } from 'react';
 
 // components
-import { DateTime } from 'components/common/datetime';
+import { DateTime } from 'components/utils/datetime';
 import Modal from 'components/core/modal';
 import { FormField } from '../forms';
 import SaveCancel from 'components/core/save-cancel';

From 7b1dc0c3badb6419fa468b876f255ed516c55ad4 Mon Sep 17 00:00:00 2001
From: Diokuz <diokuz@gmail.com>
Date: Thu, 29 Jun 2017 14:36:19 +0300
Subject: [PATCH 33/51] Fix prop mutation

---
 ashes/src/components/addresses/address-form/address-form.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ashes/src/components/addresses/address-form/address-form.jsx b/ashes/src/components/addresses/address-form/address-form.jsx
index 32a5db301a..129a911d74 100644
--- a/ashes/src/components/addresses/address-form/address-form.jsx
+++ b/ashes/src/components/addresses/address-form/address-form.jsx
@@ -212,7 +212,7 @@ export default class AddressForm extends React.Component {
 
         return res;
       },
-      this.props.address
+      { ...this.props.address }
     );
 
     submitAction(formData);

From 9f0c67828ef51cce85edf873ac5ae84390fccbdc Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 20 Jun 2017 14:22:47 +0300
Subject: [PATCH 34/51] styleguidist styles update

---
 ashes/styleguide/rsg-components/TabButton.jsx |  58 ++++++++
 ashes/styleguide/styleguide.css               | 130 +++++++++++++++---
 ashes/styleguide/webpack.styleguide.js        |   1 +
 3 files changed, 173 insertions(+), 16 deletions(-)
 create mode 100644 ashes/styleguide/rsg-components/TabButton.jsx

diff --git a/ashes/styleguide/rsg-components/TabButton.jsx b/ashes/styleguide/rsg-components/TabButton.jsx
new file mode 100644
index 0000000000..cf2cdac06b
--- /dev/null
+++ b/ashes/styleguide/rsg-components/TabButton.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+import cx from 'classnames';
+
+export const styles = ({ space, color, fontFamily, fontSize }) => ({
+  button: {
+    padding: [[space[1], 0]],
+    fontFamily: fontFamily.base,
+    fontSize: fontSize.base,
+    color: color.light,
+    background: 'transparent',
+    textTransform: 'uppercase',
+    transition: 'color 750ms ease-out',
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover, &:focus': {
+      isolate: false,
+      outline: 0,
+      color: color.linkHover,
+      transition: 'color 150ms ease-in',
+    },
+    '&:focus:not($isActive)': {
+      isolate: false,
+      outline: [[1, 'dotted', color.linkHover]],
+    },
+    '& + &': {
+      isolate: false,
+      marginLeft: space[1],
+    },
+  },
+  isActive: {
+    borderBottom: [[2, color.linkHover, 'solid']],
+  },
+});
+
+export function TabButtonRenderer({ classes, name, className, onClick, active, children }) {
+  const classNames = cx(classes.button, className, {
+    [classes.isActive]: active,
+  });
+
+  return (
+    <button type="button" name={name} className={classNames} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+TabButtonRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  name: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  active: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Styled(styles)(TabButtonRenderer);
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 369c2505de..93c8c4425e 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -1,10 +1,16 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic);
+@import url(https://fonts.googleapis.com/css?family=Inconsolata:300,400,700);
 @import 'base.css';
+@import 'variables.css';
 
 :global {
   #app {
+    background: #f7f7f7;
     font: var(--font-body);
-    /*background: url('caramel.png');*/
+
+    [class*=root-] {
+      background: #f7f7f7;
+    }
 
     .version {
       font-size: 12px;
@@ -32,9 +38,9 @@
           padding: 2px 8px;
         }
 
-        [class^=link-] {
-          color: #666;
-        }
+      [ class ^= link- ] {
+        color: #666;
+      }
 
         [class*=heading-],
         [class*=para-] {
@@ -59,10 +65,6 @@
       color: red !important;
     }
 
-    & > div > main {
-      background: #f7f7f7;
-    }
-
     .demo > * {
       margin-left: 10px;
       margin-bottom: 10px;
@@ -80,13 +82,11 @@
       border: none;
     }
 
-
-
     .hasSidebar-0-2 {
       padding-left: 260px;
     }
 
-    [class^=item-] {
+    [class*=item-] {
       margin: 0;
     }
 
@@ -115,13 +115,109 @@
       font-weight: 600;
     }
 
-    [class*=cellDesc-] [class*=para-] {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    [class*=table-] [class*=cell-] {
+      padding-bottom: 0;
+      vertical-align: middle;
+
+      [class*=para-] {
+        font-size: 13px;
+      }
+    }
+
+    [class*=tabButtons-] [class*=button-] {
+      position: relative;
+      font-size: 16px;
+      color: #363636;
+      text-transform: initial;
+      outline: none;
+      transition: all .2s;
+
+      &::before {
+        font-family: 'fontello';
+        content: '\e805';
+        position: absolute;
+        top: 12px;
+        left: -18px;
+        font-size: 10px;
+        transition: transform .2s ease-out;
+      }
+
+      &:hover {
+        color: var(--color-additional-text);
+      }
+
+      &[class*=isActive-] {
+        border: none;
+
+        &::before {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+
+    [class*=para-] {
+      font-size: 14px;
+    }
+
+    h3[class*=para-],
+    h4[class*=para-] {
+      font-size: 16px;
+    }
+
+    [class*=pre-] {
+      padding: 10px 16px;
+      background-color: var(--bg-white);
+      border: solid 1px var(--color-border);
+      border-radius: 4px;
+      font-size: 12px;
+
+      & * {
+        color: var(--color-additional-text);
+      }
     }
 
     [class*=preview-] {
-      padding: 30px 16px 16px;
+      padding: 16px;
+      background-color: var(--bg-white);
+      border: solid 1px var(--color-border);
+      border-bottom: none;
+      border-radius: 4px 4px 0 0;
+    }
+
+    [class*=controls-] {
+      padding: 9px 8px 8px 16px;
+      background-color: var(--bg-white);
+      border: solid 1px var(--color-border);
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+
+      button {
+        padding: 4px 9px;
+        border-radius: 2px;
+        border: solid 1px var(--bg-green-buttons);
+        font-size: 12px;
+        color: var(--bg-green-buttons);
+        text-transform: none;
+        outline: none;
+        transition: all .2s;
+
+        &:hover {
+          background: var(--bg-green-buttons);
+          color: var(--bg-white);
+        }
+      }
+    }
+
+    .ReactCodeMirror {
+      background: #fafafa;
+      border: solid 1px var(--color-border);
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      font-size: 12px;
+
+      & * {
+        color: var(--color-additional-text);
+      }
     }
 
     @media (max-width: 600px) {
@@ -139,5 +235,7 @@
     }
 
   }
-};
+}
+
+;
 
diff --git a/ashes/styleguide/webpack.styleguide.js b/ashes/styleguide/webpack.styleguide.js
index 2de0e0aba9..b0724b5cc1 100644
--- a/ashes/styleguide/webpack.styleguide.js
+++ b/ashes/styleguide/webpack.styleguide.js
@@ -27,6 +27,7 @@ module.exports = {
   resolve: {
     alias: {
       'rsg-components/Logo': path.join(__dirname, 'rsg-components/Logo'),
+      'rsg-components/TabButton': path.join(__dirname, 'rsg-components/TabButton'),
     },
   },
 

From 1bbe7f26a3bb2bc02bb6320da74807705efd2607 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 20 Jun 2017 14:46:21 +0300
Subject: [PATCH 35/51] update examples styles

---
 .../core/button-with-menu/button-with-menu.md |  18 +--
 ashes/src/components/core/button/button.md    | 108 +++++++++++-------
 .../components/core/countdown/countdown.md    |  52 +++++----
 ashes/src/components/core/icon/icon.md        |  10 +-
 .../core/rounded-pill/rounded-pill.md         |  18 +--
 .../components/core/text-mask/text-mask.md    |  26 +++--
 .../src/components/utils/currency/currency.md |  10 +-
 ashes/styleguide/styleguide.css               |  35 +++++-
 8 files changed, 174 insertions(+), 103 deletions(-)

diff --git a/ashes/src/components/core/button-with-menu/button-with-menu.md b/ashes/src/components/core/button-with-menu/button-with-menu.md
index a4296d5aa4..2d7093d271 100644
--- a/ashes/src/components/core/button-with-menu/button-with-menu.md
+++ b/ashes/src/components/core/button-with-menu/button-with-menu.md
@@ -26,12 +26,16 @@ import { ButtonWithMenu } from 'components/core/button-with-menu';
 const items=[['id1', 'Save and Exit'], ['id2', 'Save and Duplicate']];
 
 <div className="demo">
-  <ButtonWithMenu title="Save" items={items} />
-  <ButtonWithMenu title="Save" items={items} buttonDisabled />
-  <ButtonWithMenu title="Save" items={items} menuDisabled />
-  <ButtonWithMenu title="Save" items={items} isLoading /><br />
-  <ButtonWithMenu icon="edit" items={items} />
-  <ButtonWithMenu title="Edit" items={items} icon="edit" />
-  <ButtonWithMenu title="Edit" items={items} icon="edit" />
+  <div className="demo-inline">
+    <ButtonWithMenu title="Save" items={items} />
+    <ButtonWithMenu title="Save" items={items} buttonDisabled />
+    <ButtonWithMenu title="Save" items={items} menuDisabled />
+    <ButtonWithMenu title="Save" items={items} isLoading /><br />
+  </div>
+
+  <div className="demo-inline">
+    <ButtonWithMenu title="Edit" items={items} icon="edit" />
+    <ButtonWithMenu icon="edit" items={items} />
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/core/button/button.md b/ashes/src/components/core/button/button.md
index 350abb654c..034a16f66b 100644
--- a/ashes/src/components/core/button/button.md
+++ b/ashes/src/components/core/button/button.md
@@ -26,16 +26,20 @@ import { Button } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.Button>Ready</Button.Button>
-  <Button.Button isLoading>Loading...</Button.Button>
-  <Button.Button disabled>Disabled</Button.Button>
+  <div className="demo-inline">
+    <Button.Button>Ready</Button.Button>
+    <Button.Button isLoading>Loading...</Button.Button>
+    <Button.Button disabled>Disabled</Button.Button>
+  </div>
   <Button.Button fullWidth>Stretched button, and next must be too ↓</Button.Button>
   <Button.Button icon="add" fullWidth />
-  <Button.Button icon="add">Add</Button.Button>
-  <Button.Button icon="add" />
-  <Button.Button small>Small</Button.Button>
-  <Button.Button icon="add" small>Add</Button.Button>
-  <Button.Button icon="add" small />
+  <div className="demo-inline">
+    <Button.Button icon="add">Add</Button.Button>
+    <Button.Button icon="add" />
+    <Button.Button small>Small</Button.Button>
+    <Button.Button icon="add" small>Add</Button.Button>
+    <Button.Button icon="add" small />
+  </div>
   <Button.Button>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</Button.Button>
 </div>
 ```
@@ -48,9 +52,11 @@ import { PrimaryButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.PrimaryButton>Push Me</Button.PrimaryButton>
-  <Button.PrimaryButton isLoading>Loading...</Button.PrimaryButton>
-  <Button.PrimaryButton disabled>Disabled</Button.PrimaryButton>
+  <div className="demo-inline">
+    <Button.PrimaryButton>Push Me</Button.PrimaryButton>
+    <Button.PrimaryButton isLoading>Loading...</Button.PrimaryButton>
+    <Button.PrimaryButton disabled>Disabled</Button.PrimaryButton>
+  </div>
   <Button.PrimaryButton fullWidth icon="google">Push Me</Button.PrimaryButton>
 </div>
 ```
@@ -63,10 +69,12 @@ import { LeftButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.LeftButton>Left</Button.LeftButton>
-  <Button.LeftButton isLoading>Left</Button.LeftButton>
-  <Button.LeftButton disabled>Left</Button.LeftButton>
-  <Button.LeftButton />
+  <div className="demo-inline">
+    <Button.LeftButton>Left</Button.LeftButton>
+    <Button.LeftButton isLoading>Left</Button.LeftButton>
+    <Button.LeftButton disabled>Left</Button.LeftButton>
+    <Button.LeftButton />
+  </div>
 </div>
 ```
 
@@ -78,10 +86,12 @@ import { RightButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.RightButton>Right</Button.RightButton>
-  <Button.RightButton isLoading>Right</Button.RightButton>
-  <Button.RightButton disabled>Right</Button.RightButton>
-  <Button.RightButton />
+  <div className="demo-inline">
+    <Button.RightButton>Right</Button.RightButton>
+    <Button.RightButton isLoading>Right</Button.RightButton>
+    <Button.RightButton disabled>Right</Button.RightButton>
+    <Button.RightButton />
+  </div>
 </div>
 ```
 
@@ -93,10 +103,12 @@ import { DecrementButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.DecrementButton>Less</Button.DecrementButton>
-  <Button.DecrementButton isLoading>Less</Button.DecrementButton>
-  <Button.DecrementButton disabled>Less</Button.DecrementButton>
-  <Button.DecrementButton />
+  <div className="demo-inline">
+    <Button.DecrementButton>Less</Button.DecrementButton>
+    <Button.DecrementButton isLoading>Less</Button.DecrementButton>
+    <Button.DecrementButton disabled>Less</Button.DecrementButton>
+    <Button.DecrementButton />
+  </div>
 </div>
 ```
 
@@ -108,10 +120,12 @@ import { IncrementButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.IncrementButton>More</Button.IncrementButton>
-  <Button.IncrementButton isLoading>More</Button.IncrementButton>
-  <Button.IncrementButton disabled>More</Button.IncrementButton>
-  <Button.IncrementButton />
+  <div className="demo-inline">
+    <Button.IncrementButton>More</Button.IncrementButton>
+    <Button.IncrementButton isLoading>More</Button.IncrementButton>
+    <Button.IncrementButton disabled>More</Button.IncrementButton>
+    <Button.IncrementButton />
+  </div>
 </div>
 ```
 
@@ -123,10 +137,12 @@ import { AddButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.AddButton>Add</Button.AddButton>
-  <Button.AddButton isLoading>Add</Button.AddButton>
-  <Button.AddButton disabled>Add</Button.AddButton>
-  <Button.AddButton />
+  <div className="demo-inline">
+    <Button.AddButton>Add</Button.AddButton>
+    <Button.AddButton isLoading>Add</Button.AddButton>
+    <Button.AddButton disabled>Add</Button.AddButton>
+    <Button.AddButton />
+  </div>
 </div>
 ```
 
@@ -138,10 +154,12 @@ import { EditButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.EditButton>Edit</Button.EditButton>
-  <Button.EditButton isLoading>Edit</Button.EditButton>
-  <Button.EditButton disabled>Edit</Button.EditButton>
-  <Button.EditButton />
+  <div className="demo-inline">
+    <Button.EditButton>Edit</Button.EditButton>
+    <Button.EditButton isLoading>Edit</Button.EditButton>
+    <Button.EditButton disabled>Edit</Button.EditButton>
+    <Button.EditButton />
+  </div>
 </div>
 ```
 
@@ -153,10 +171,12 @@ import { DeleteButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.DeleteButton>Delete</Button.DeleteButton>
-  <Button.DeleteButton isLoading>Delete</Button.DeleteButton>
-  <Button.DeleteButton disabled>Delete</Button.DeleteButton>
-  <Button.DeleteButton />
+  <div className="demo-inline">
+    <Button.DeleteButton>Delete</Button.DeleteButton>
+    <Button.DeleteButton isLoading>Delete</Button.DeleteButton>
+    <Button.DeleteButton disabled>Delete</Button.DeleteButton>
+    <Button.DeleteButton />
+  </div>
 </div>
 ```
 
@@ -168,9 +188,11 @@ import { SocialButton } from 'components/core/button'
 
 ```
 <div className="demo">
-  <Button.SocialButton type="google">Social</Button.SocialButton>
-  <Button.SocialButton type="google" isLoading>Social</Button.SocialButton>
-  <Button.SocialButton type="google" disabled>Social</Button.SocialButton>
-  <Button.SocialButton type="google" />
+  <div className="demo-inline">
+    <Button.SocialButton type="google">Social</Button.SocialButton>
+    <Button.SocialButton type="google" isLoading>Social</Button.SocialButton>
+    <Button.SocialButton type="google" disabled>Social</Button.SocialButton>
+    <Button.SocialButton type="google" />
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/core/countdown/countdown.md b/ashes/src/components/core/countdown/countdown.md
index 9d45b51be1..d90d39512e 100644
--- a/ashes/src/components/core/countdown/countdown.md
+++ b/ashes/src/components/core/countdown/countdown.md
@@ -14,30 +14,32 @@ import Countdown from 'components/core/countdown';
 const moment = require('moment');
 
 <div className="demo">
-  <Countdown
-    endDate={moment().add(5, 'm').utc().format()}
-  />
-
-  <Countdown
-    endDate={moment().add(5, 'm').utc().format()}
-    endingThreshold={moment.duration(10, 'm')}
-  />
-
-  <Countdown
-    endDate={moment().add(5, 'm').utc().format()}
-    endingThreshold={moment.duration(1, 'm')}
-    frozen
-  />
-
-  <Countdown
-    endDate={moment().add(5, 'm').utc().format()}
-    format="HH-mm-ss-SSS"
-  />
-
-  <Countdown
-    endDate={moment().add(5, 'm').utc().format()}
-    format="HH-mm-ss-SSS"
-    tickInterval={1}
-  />
+  <div className="demo-inline">
+    <Countdown
+      endDate={moment().add(5, 'm').utc().format()}
+    />
+
+    <Countdown
+      endDate={moment().add(5, 'm').utc().format()}
+      endingThreshold={moment.duration(10, 'm')}
+    />
+
+    <Countdown
+      endDate={moment().add(5, 'm').utc().format()}
+      endingThreshold={moment.duration(1, 'm')}
+      frozen
+    />
+
+    <Countdown
+      endDate={moment().add(5, 'm').utc().format()}
+      format="HH-mm-ss-SSS"
+    />
+
+    <Countdown
+      endDate={moment().add(5, 'm').utc().format()}
+      format="HH-mm-ss-SSS"
+      tickInterval={1}
+    />
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/core/icon/icon.md b/ashes/src/components/core/icon/icon.md
index 9474ce8e9e..7a791eee33 100644
--- a/ashes/src/components/core/icon/icon.md
+++ b/ashes/src/components/core/icon/icon.md
@@ -10,9 +10,11 @@ import Icon from 'components/core/icon';
 
 ```
 <div className="demo">
-  <Icon name="add" />
-  <Icon name="chevron-right" />
-  <Icon name="bell" />
-  <Icon name="trash" />
+  <div className="demo-inline">
+    <Icon name="add" />
+    <Icon name="chevron-right" />
+    <Icon name="bell" />
+    <Icon name="trash" />
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.md b/ashes/src/components/core/rounded-pill/rounded-pill.md
index 4a40d59c4c..eabc287873 100644
--- a/ashes/src/components/core/rounded-pill/rounded-pill.md
+++ b/ashes/src/components/core/rounded-pill/rounded-pill.md
@@ -15,13 +15,15 @@
 
 ```
 <div className="demo">
-  <RoundedPill.RoundedPill text="Ready" />
-  <RoundedPill.RoundedPill text="Loading" inProgress onClose={() => {}} value={1} />
-  <RoundedPill.RoundedPill text="Clickable" onClick={() => alert('clicked')} />
-  <RoundedPill.RoundedPill text="" onClose={() => {}} value={1} />
-  <RoundedPill.RoundedPill text="Clickable X" onClick={() => alert('clicked')} onClose={() => {}} value={1} />
-  <RoundedPill.RoundedPill onClose={() => {}} value={1}>
-    <Icon name="filter" /> filter
-  </RoundedPill.RoundedPill>
+  <div className="demo-inline">
+    <RoundedPill.RoundedPill text="Ready" />
+    <RoundedPill.RoundedPill text="Loading" inProgress onClose={() => {}} value={1} />
+    <RoundedPill.RoundedPill text="Clickable" onClick={() => alert('clicked')} />
+    <RoundedPill.RoundedPill text="" onClose={() => {}} value={1} />
+    <RoundedPill.RoundedPill text="Clickable X" onClick={() => alert('clicked')} onClose={() => {}} value={1} />
+    <RoundedPill.RoundedPill onClose={() => {}} value={1}>
+      <Icon name="filter" /> filter
+    </RoundedPill.RoundedPill>
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/core/text-mask/text-mask.md b/ashes/src/components/core/text-mask/text-mask.md
index 58f1705e68..a303b9b0d7 100644
--- a/ashes/src/components/core/text-mask/text-mask.md
+++ b/ashes/src/components/core/text-mask/text-mask.md
@@ -15,14 +15,22 @@ const phoneArrMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-',
 const strMask = '(999) 999 99 99';
 
 <div className="demo">
-  <TextMask.TextMask mask={false} />
-  <TextMask.TextMask mask={false} value="1234567890" />
-  <TextMask.TextMask mask={phoneArrMask} />
-  <TextMask.TextMask mask={phoneArrMask} value="123456789" />
-  <TextMask.TextMask mask={phoneArrMask} showMask />
-  <TextMask.TextMask mask="(999) 999 99 99" />
-  <TextMask.TextMask mask="aaa-aa" value="abcef" />
-  <TextMask.TextMask mask="http//www.www.www" value="http://www.fox.com" />
-  <TextMask.TextMask mask="9999 9999 9999 9999" />
+  <div className="demo-inline">
+    <TextMask.TextMask mask={false} />
+    <TextMask.TextMask mask={false} value="1234567890" />
+    <TextMask.TextMask mask={phoneArrMask} />
+    <TextMask.TextMask mask={phoneArrMask} value="123456789" />
+  </div>
+
+  <div className="demo-inline">
+    <TextMask.TextMask mask={phoneArrMask} showMask />
+    <TextMask.TextMask mask="(999) 999 99 99" />
+    <TextMask.TextMask mask="aaa-aa" value="abcef" />
+    <TextMask.TextMask mask="http//www.www.www" value="http://www.fox.com" />
+  </div>
+
+  <div className="demo-inline">
+    <TextMask.TextMask mask="9999 9999 9999 9999" />
+  </div>
 </div>
 ```
diff --git a/ashes/src/components/utils/currency/currency.md b/ashes/src/components/utils/currency/currency.md
index 5a2aeaa700..42139f703a 100644
--- a/ashes/src/components/utils/currency/currency.md
+++ b/ashes/src/components/utils/currency/currency.md
@@ -9,10 +9,12 @@ import Currency from 'components/utils/currency';
 ### States
 ```
 <div className="demo" >
-  <Currency value={100}  />
-  <Currency value={200} isTransaction />
-  <Currency value={-200} isTransaction />
-  <Currency value={0} isTransaction />
+  <div className="demo-inline">
+    <Currency value={100}  />
+    <Currency value={200} isTransaction />
+    <Currency value={-200} isTransaction />
+    <Currency value={0} isTransaction />
+  </div>
 </div>
 
 ```
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 93c8c4425e..23f79db70a 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -10,6 +10,10 @@
 
     [class*=root-] {
       background: #f7f7f7;
+
+      & > [class*=toolbar-] {
+        display: none;
+      }
     }
 
     .version {
@@ -66,10 +70,17 @@
     }
 
     .demo > * {
-      margin-left: 10px;
       margin-bottom: 10px;
     }
 
+    .demo-inline > * {
+      margin-left: 10px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     .demo-blocked > * {
       margin-bottom: 10px;
     }
@@ -157,6 +168,15 @@
 
     [class*=para-] {
       font-size: 14px;
+
+      a {
+        color: var(--color-link);
+        transition: all .2s;
+
+        &:hover {
+          opacity: .7;
+        }
+      }
     }
 
     h3[class*=para-],
@@ -172,7 +192,7 @@
       font-size: 12px;
 
       & * {
-        color: var(--color-additional-text);
+        color: #666;
       }
     }
 
@@ -206,6 +226,15 @@
           color: var(--bg-white);
         }
       }
+
+      a {
+        color: var(--bg-green-buttons);
+        transition: all .2s;
+
+        &:hover {
+          opacity: .7;
+        }
+      }
     }
 
     .ReactCodeMirror {
@@ -216,7 +245,7 @@
       font-size: 12px;
 
       & * {
-        color: var(--color-additional-text);
+        color: #666;
       }
     }
 

From 4f0df20c62717be02cb7dcdeb1ec7695842f3f46 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 20 Jun 2017 15:55:03 +0300
Subject: [PATCH 36/51] components styles fixes

---
 .../activity-notifications/panel.md           |  4 +-
 ashes/src/components/core/alert/alert.md      |  2 +-
 ashes/src/components/core/counter/counter.md  |  2 +-
 ashes/src/components/utils/change/change.md   |  8 +-
 .../src/components/utils/currency/currency.md | 12 +--
 .../src/components/utils/errors/api-errors.md |  2 +-
 ashes/src/components/utils/errors/errors.md   |  2 +-
 ashes/styleguide/config.styleguide.js         |  1 +
 .../styleguide/rsg-components/Playground.jsx  | 94 +++++++++++++++++++
 .../rsg-components/PlaygroundRenderer.jsx     | 52 ++++++++++
 ashes/styleguide/rsg-components/TabButton.jsx |  9 +-
 ashes/styleguide/styleguide.css               | 16 ++--
 ashes/styleguide/webpack.styleguide.js        |  2 +
 13 files changed, 180 insertions(+), 26 deletions(-)
 create mode 100644 ashes/styleguide/rsg-components/Playground.jsx
 create mode 100644 ashes/styleguide/rsg-components/PlaygroundRenderer.jsx

diff --git a/ashes/src/components/activity-notifications/panel.md b/ashes/src/components/activity-notifications/panel.md
index 5e2976eab3..e086d0d8de 100644
--- a/ashes/src/components/activity-notifications/panel.md
+++ b/ashes/src/components/activity-notifications/panel.md
@@ -1,5 +1,3 @@
 ```
-<div className="demo">
-  <NotificationPanel displayed />
-</div>
+<NotificationPanel displayed />
 ```
diff --git a/ashes/src/components/core/alert/alert.md b/ashes/src/components/core/alert/alert.md
index 179863c9cc..9e0b62d2f5 100644
--- a/ashes/src/components/core/alert/alert.md
+++ b/ashes/src/components/core/alert/alert.md
@@ -29,7 +29,7 @@ class Alerts extends React.Component {
 
   render() {
     return (
-      <div className="demo-blocked">
+      <div className="demo">
         <Alert type={Alert.SUCCESS}>
           Fetched successfully
         </Alert>
diff --git a/ashes/src/components/core/counter/counter.md b/ashes/src/components/core/counter/counter.md
index e82e0a21e0..3df32d827f 100644
--- a/ashes/src/components/core/counter/counter.md
+++ b/ashes/src/components/core/counter/counter.md
@@ -27,7 +27,7 @@ class CounterExample extends React.Component {
 
   render() {
     return  (
-    <div className="demo-blocked">
+    <div className="demo">
       <Counter
         value={this.state.value1}
         onChange={v => this.handleChange('value1', v)}
diff --git a/ashes/src/components/utils/change/change.md b/ashes/src/components/utils/change/change.md
index 28b721ed95..6d2dc9462b 100644
--- a/ashes/src/components/utils/change/change.md
+++ b/ashes/src/components/utils/change/change.md
@@ -8,9 +8,9 @@ import Change from 'components/utils/change';
 
 ### States
 ```
-<div className="demo" >
-  <Change value={2} /><br />
-  <Change value={-2} /><br />
-  <Change value={0} /><br />
+<div className="demo-inline" >
+  <Change value={2} />
+  <Change value={-2} />
+  <Change value={0} />
 </div>
 ```
diff --git a/ashes/src/components/utils/currency/currency.md b/ashes/src/components/utils/currency/currency.md
index 42139f703a..08c633d8ea 100644
--- a/ashes/src/components/utils/currency/currency.md
+++ b/ashes/src/components/utils/currency/currency.md
@@ -8,13 +8,11 @@ import Currency from 'components/utils/currency';
 
 ### States
 ```
-<div className="demo" >
-  <div className="demo-inline">
-    <Currency value={100}  />
-    <Currency value={200} isTransaction />
-    <Currency value={-200} isTransaction />
-    <Currency value={0} isTransaction />
-  </div>
+<div className="demo-inline">
+  <Currency value={100}  />
+  <Currency value={200} isTransaction />
+  <Currency value={-200} isTransaction />
+  <Currency value={0} isTransaction />
 </div>
 
 ```
diff --git a/ashes/src/components/utils/errors/api-errors.md b/ashes/src/components/utils/errors/api-errors.md
index e5604d94b8..8c16587932 100644
--- a/ashes/src/components/utils/errors/api-errors.md
+++ b/ashes/src/components/utils/errors/api-errors.md
@@ -41,7 +41,7 @@ class ApiErrorsExample extends React.Component {
 
   render() {
     return (
-      <div className="demo-blocked">
+      <div className="demo">
         <ApiErrors
           response={errorResponse}
           sanitizeError={error => error + '!'}
diff --git a/ashes/src/components/utils/errors/errors.md b/ashes/src/components/utils/errors/errors.md
index 3108a0a036..6c2d8bdbeb 100644
--- a/ashes/src/components/utils/errors/errors.md
+++ b/ashes/src/components/utils/errors/errors.md
@@ -28,7 +28,7 @@ class ErrorsExample extends React.Component {
 
   render() {
     return (
-      <div className="demo-blocked">
+      <div className="demo">
         <Errors
           errors={['Bad gateway', 'Good gateway', 'not found', 'not found']}
           sanitizeError={error => error + '!'}
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 6a8eb45bfc..c72c001e11 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -5,6 +5,7 @@ module.exports = {
   title: `${process.env.GIT_COMMIT}`,
   template: path.join(__dirname, 'template.html'),
   showCode: false,
+  showUsage: true,
   ignore: [path.join(__dirname, '../src/components/core/**/*.spec.jsx')],
   webpackConfig: require('./webpack.styleguide.js'),
   styleguideDir: path.resolve('build/admin/styleguide'),
diff --git a/ashes/styleguide/rsg-components/Playground.jsx b/ashes/styleguide/rsg-components/Playground.jsx
new file mode 100644
index 0000000000..f0b7bee54b
--- /dev/null
+++ b/ashes/styleguide/rsg-components/Playground.jsx
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash/debounce';
+import Preview from 'react-styleguidist/lib/rsg-components/Preview';
+import Slot from 'react-styleguidist/lib/rsg-components/Slot';
+import PlaygroundRenderer from './PlaygroundRenderer';
+import { EXAMPLE_TAB_CODE_EDITOR } from 'react-styleguidist/lib/rsg-components/slots';
+
+export default class Playground extends Component {
+  static propTypes = {
+    code: PropTypes.string.isRequired,
+    evalInContext: PropTypes.func.isRequired,
+    index: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  };
+  static contextTypes = {
+    config: PropTypes.object.isRequired,
+    isolatedExample: PropTypes.bool,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    const { code } = props;
+    const { previewDelay, showCode } = context.config;
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleTabChange = this.handleTabChange.bind(this);
+    this.handleChange = debounce(this.handleChange, previewDelay);
+
+    this.state = {
+      code,
+      activeTab: showCode ? EXAMPLE_TAB_CODE_EDITOR : undefined,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { code } = nextProps;
+    this.setState({
+      code,
+    });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.code !== this.state.code || nextState.activeTab !== this.state.activeTab;
+  }
+
+  componentWillUnmount() {
+    // Clear pending changes
+    this.handleChange.cancel();
+  }
+
+  handleChange(code) {
+    this.setState({
+      code,
+    });
+  }
+
+  handleTabChange(name) {
+    this.setState(state => ({
+      activeTab: state.activeTab !== name ? name : undefined,
+    }));
+  }
+
+  render() {
+    const { code, activeTab } = this.state;
+    const { evalInContext, index, name } = this.props;
+    const { isolatedExample } = this.context;
+    return (
+      <PlaygroundRenderer
+        name={name}
+        codeActive={activeTab === EXAMPLE_TAB_CODE_EDITOR}
+        preview={<Preview code={code} evalInContext={evalInContext} />}
+        tabButtons={
+          <Slot
+            name="exampleTabButtons"
+            active={activeTab}
+            props={{ onClick: this.handleTabChange }}
+          />
+        }
+        tabBody={
+          <Slot
+            name="exampleTabs"
+            active={activeTab}
+            onlyActive
+            props={{ code, onChange: this.handleChange }}
+          />
+        }
+        toolbar={
+          <Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} />
+        }
+      />
+    );
+  }
+}
diff --git a/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx b/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx
new file mode 100644
index 0000000000..42a2f5cd02
--- /dev/null
+++ b/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+
+const styles = ({ space, color, borderRadius }) => ({
+  root: {
+    marginBottom: space[4],
+  },
+  preview: {
+    padding: space[2],
+    border: [[1, color.border, 'solid']],
+    borderRadius,
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  toolbar: {
+    marginLeft: 'auto',
+  },
+  codeActive: {
+    borderBottom: 'none',
+  },
+});
+
+export function PlaygroundRenderer({ classes, name, preview, codeActive, tabButtons, tabBody, toolbar }) {
+  console.log(cx(classes.root, { [classes.codeActive]: codeActive }));
+
+  return (
+    <div className={cx(classes.root, { [classes.codeActive]: codeActive })}>
+      <div className={classes.preview} data-preview={name}>{preview}</div>
+      <div className={classes.controls}>
+        <div className={classes.tabs}>{tabButtons}</div>
+        <div className={classes.toolbar}>{toolbar}</div>
+      </div>
+      <div className={classes.tab}>{tabBody}</div>
+    </div>
+  );
+}
+
+PlaygroundRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  preview: PropTypes.node.isRequired,
+  codeActive: PropTypes.bool.isRequired,
+  tabButtons: PropTypes.node.isRequired,
+  tabBody: PropTypes.node.isRequired,
+  toolbar: PropTypes.node.isRequired,
+};
+
+export default Styled(styles)(PlaygroundRenderer);
diff --git a/ashes/styleguide/rsg-components/TabButton.jsx b/ashes/styleguide/rsg-components/TabButton.jsx
index cf2cdac06b..1a7452854a 100644
--- a/ashes/styleguide/rsg-components/TabButton.jsx
+++ b/ashes/styleguide/rsg-components/TabButton.jsx
@@ -39,9 +39,16 @@ export function TabButtonRenderer({ classes, name, className, onClick, active, c
     [classes.isActive]: active,
   });
 
+  let label = children;
+
+  if (children === 'Code') {
+    // super dirty hack, as component that provides children here can't be customized with webpack aliases
+    label = active ? 'Hide code' : 'Show code';
+  }
+
   return (
     <button type="button" name={name} className={classNames} onClick={onClick}>
-      {children}
+      {label}
     </button>
   );
 }
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 23f79db70a..4e5cca62eb 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -27,8 +27,8 @@
       width: 260px;
       border-color: var(--color-border);
 
-      .root-0-65 {
-        .search-0-66 {
+      [class*=root-] {
+        [class*=search-] {
           padding: 0 16px 8px;
         }
 
@@ -81,10 +81,6 @@
       }
     }
 
-    .demo-blocked > * {
-      margin-bottom: 10px;
-    }
-
     .hash {
       font-weight: bold;
     }
@@ -132,6 +128,7 @@
 
       [class*=para-] {
         font-size: 13px;
+        margin-bottom: 0;
       }
     }
 
@@ -221,7 +218,8 @@
         outline: none;
         transition: all .2s;
 
-        &:hover {
+        &:hover,
+        &[class*=isActive-] {
           background: var(--bg-green-buttons);
           color: var(--bg-white);
         }
@@ -237,6 +235,10 @@
       }
     }
 
+    [class*=codeActive-] [class*=controls-] {
+      border-radius: 0;
+    }
+
     .ReactCodeMirror {
       background: #fafafa;
       border: solid 1px var(--color-border);
diff --git a/ashes/styleguide/webpack.styleguide.js b/ashes/styleguide/webpack.styleguide.js
index b0724b5cc1..ed8160fa56 100644
--- a/ashes/styleguide/webpack.styleguide.js
+++ b/ashes/styleguide/webpack.styleguide.js
@@ -28,6 +28,8 @@ module.exports = {
     alias: {
       'rsg-components/Logo': path.join(__dirname, 'rsg-components/Logo'),
       'rsg-components/TabButton': path.join(__dirname, 'rsg-components/TabButton'),
+      'rsg-components/Playground': path.join(__dirname, 'rsg-components/Playground'),
+      'rsg-components/PlaygroundRenderer': path.join(__dirname, 'rsg-components/PlaygroundRenderer'),
     },
   },
 

From 8cc530dacc7d6df94ea02b794fe03566c6b503b0 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 20 Jun 2017 15:57:20 +0300
Subject: [PATCH 37/51] get rid of dev docs in styleguide

---
 ashes/styleguide/config.styleguide.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index c72c001e11..05fda83973 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -45,22 +45,6 @@ module.exports = {
             path.resolve(__dirname, '../src/components/docs/logos/logos.jsx'),
           ],
         },
-        {
-          name: 'Components',
-          content: '../docs/components.md',
-        },
-        {
-          name: 'Styles',
-          content: '../docs/styles.md',
-        },
-        {
-          name: 'Flow',
-          content: '../docs/flow.md',
-        },
-        {
-          name: 'Tests',
-          content: '../docs/tests.md',
-        },
       ],
     },
     {

From 6f2addc8630c57a0fd5ed83a01e464fc0bf488d3 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 20 Jun 2017 21:04:50 +0300
Subject: [PATCH 38/51] cleanup fonts/colors examples

---
 ashes/src/components/docs/colors/bg-colors.md   | 4 +---
 ashes/src/components/docs/colors/text-colors.md | 4 +---
 ashes/src/components/docs/fonts/fonts.md        | 4 +---
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/ashes/src/components/docs/colors/bg-colors.md b/ashes/src/components/docs/colors/bg-colors.md
index 4aa6f9f6f9..3bcbfccaab 100644
--- a/ashes/src/components/docs/colors/bg-colors.md
+++ b/ashes/src/components/docs/colors/bg-colors.md
@@ -1,5 +1,3 @@
 ```
-<div className="demo">
-  <BgColors.BgColors />
-</div>
+<BgColors.BgColors />
 ```
diff --git a/ashes/src/components/docs/colors/text-colors.md b/ashes/src/components/docs/colors/text-colors.md
index c83110e472..602c21776c 100644
--- a/ashes/src/components/docs/colors/text-colors.md
+++ b/ashes/src/components/docs/colors/text-colors.md
@@ -1,5 +1,3 @@
 ```
-<div className="demo">
-  <TextColors.TextColors />
-</div>
+<TextColors.TextColors />
 ```
diff --git a/ashes/src/components/docs/fonts/fonts.md b/ashes/src/components/docs/fonts/fonts.md
index 6c1d8e4693..b75f210f05 100644
--- a/ashes/src/components/docs/fonts/fonts.md
+++ b/ashes/src/components/docs/fonts/fonts.md
@@ -1,5 +1,3 @@
 ```
-<div className="demo">
-  <Fonts.Fonts />
-</div>
+<Fonts.Fonts />
 ```

From f63c39acd54b9cc7e6f6e8543be5dd01075c506c Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Tue, 6 Jun 2017 13:20:04 +0300
Subject: [PATCH 39/51] experiments

---
 .../rsg-components/ComponentsList.jsx         | 78 +++++++++++++++++++
 .../rsg-components/SectionsRenderer.jsx       | 24 ++++++
 .../rsg-components/TableOfContents.jsx        | 51 ++++++++++++
 ashes/styleguide/webpack.styleguide.js        |  1 +
 4 files changed, 154 insertions(+)
 create mode 100644 ashes/styleguide/rsg-components/ComponentsList.jsx
 create mode 100644 ashes/styleguide/rsg-components/SectionsRenderer.jsx
 create mode 100644 ashes/styleguide/rsg-components/TableOfContents.jsx

diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
new file mode 100644
index 0000000000..3063ac9644
--- /dev/null
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Link from 'rsg-components/Link';
+import Styled from 'rsg-components/Styled';
+
+const styles = ({ font, small }) => ({
+  list: {
+    margin: 0,
+    paddingLeft: 15,
+  },
+  item: {
+    display: 'block',
+    margin: [[7, 0, 7, 0]],
+    fontFamily: font,
+    fontSize: 15,
+    listStyle: 'none',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  isChild: {
+    [small]: {
+      display: 'inline-block',
+      margin: [[0, 7, 0, 0]],
+    },
+  },
+  heading: {
+    marginTop: 7,
+    fontFamily: font,
+    fontWeight: 'bold',
+  },
+});
+
+export class ComponentsListRenderer extends React.Component {
+  state = {
+    expanded: {},
+  };
+
+  expand(slug) {
+    return (e) => {
+      e.preventDefault();
+
+      const newExpanded = {
+        ...this.state.expanded,
+        [slug]: !this.state.expanded[slug],
+      };
+
+      this.setState({ expanded: newExpanded });
+    };
+  }
+
+  render() {
+    let { classes, items } = this.props;
+    items = items.filter(item => item.name);
+
+    if (!items.length) {
+      return null;
+    }
+
+    return (
+      <ul className={classes.list}>
+        {items.map(({ heading, name, slug, content }) => (
+          <li className={cx(classes.item, (!content || !content.props.items.length) && classes.isChild)} key={name}>
+            <Link className={cx(heading && classes.heading)} href={`/#${slug}`} onClick={!!content && this.expand(slug)}>{name}</Link>
+            {this.state.expanded[slug] && content}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+ComponentsListRenderer.propTypes = {
+  items: PropTypes.array.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default Styled(styles)(ComponentsListRenderer);
diff --git a/ashes/styleguide/rsg-components/SectionsRenderer.jsx b/ashes/styleguide/rsg-components/SectionsRenderer.jsx
new file mode 100644
index 0000000000..a4cf45eced
--- /dev/null
+++ b/ashes/styleguide/rsg-components/SectionsRenderer.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+
+const styles = () => ({
+  // Just default jss-isolate rules
+  root: {},
+});
+
+export function SectionsRenderer({ classes, children }) {
+  return (
+    <section className={classes.root}>
+      Section:
+      {children}
+    </section>
+  );
+}
+
+SectionsRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node,
+};
+
+export default Styled(styles)(SectionsRenderer);
diff --git a/ashes/styleguide/rsg-components/TableOfContents.jsx b/ashes/styleguide/rsg-components/TableOfContents.jsx
new file mode 100644
index 0000000000..e3c9c90041
--- /dev/null
+++ b/ashes/styleguide/rsg-components/TableOfContents.jsx
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { filterSectionsByName } from 'react-styleguidist/lib/utils/utils';
+import ComponentsList from 'react-styleguidist/lib/rsg-components/ComponentsList';
+import TableOfContentsRenderer from 'react-styleguidist/lib/rsg-components/TableOfContents/TableOfContentsRenderer';
+
+export default class TableOfContents extends Component {
+  static propTypes = {
+    sections: PropTypes.array.isRequired,
+  };
+  state = {
+    searchTerm: '',
+  };
+
+  renderLevel(sections) {
+    const items = sections.map(section => {
+      const children = [...section.sections || [], ...section.components || []];
+      return Object.assign({}, section, {
+        heading: !!section.name && children.length > 0,
+        content: children.length > 0 && this.renderLevel(children),
+      });
+    });
+    return (
+      <ComponentsList items={items} />
+    );
+  }
+
+  renderSections() {
+    const { searchTerm } = this.state;
+    const { sections } = this.props;
+
+    // If there is only one section, we treat it as a root section
+    // In this case the name of the section won't be rendered and it won't get left padding
+    const firstLevel = sections.length === 1 ? sections[0].components : sections;
+    const filtered = filterSectionsByName(firstLevel, searchTerm);
+
+    return this.renderLevel(filtered);
+  }
+
+  render() {
+    const { searchTerm } = this.state;
+    return (
+      <TableOfContentsRenderer
+        searchTerm={searchTerm}
+        onSearchTermChange={searchTerm => this.setState({ searchTerm })}
+      >
+        {this.renderSections()}
+      </TableOfContentsRenderer>
+    );
+  }
+}
diff --git a/ashes/styleguide/webpack.styleguide.js b/ashes/styleguide/webpack.styleguide.js
index ed8160fa56..1b84f7a1ba 100644
--- a/ashes/styleguide/webpack.styleguide.js
+++ b/ashes/styleguide/webpack.styleguide.js
@@ -27,6 +27,7 @@ module.exports = {
   resolve: {
     alias: {
       'rsg-components/Logo': path.join(__dirname, 'rsg-components/Logo'),
+      'rsg-components/ComponentsList': path.join(__dirname, 'rsg-components/ComponentsList'),
       'rsg-components/TabButton': path.join(__dirname, 'rsg-components/TabButton'),
       'rsg-components/Playground': path.join(__dirname, 'rsg-components/Playground'),
       'rsg-components/PlaygroundRenderer': path.join(__dirname, 'rsg-components/PlaygroundRenderer'),

From 6f1336ed05b860f006104e9cad3ba897fb3eca36 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 22 Jun 2017 01:29:30 +0300
Subject: [PATCH 40/51] cleanup sidebar

---
 ashes/docs/colors-and-typos.md                |   4 +-
 .../src/components/core/checkbox/checkbox.md  |   6 +-
 .../core/radio-button/radio-button.md         |   1 -
 .../src/components/docs/colors/bg-colors.jsx  |   2 +-
 .../components/docs/colors/text-colors.jsx    |   2 +-
 ashes/styleguide/config.styleguide.js         | 169 ++++++++----------
 .../rsg-components/ComponentsList.jsx         |  26 ++-
 .../styleguide/rsg-components/Playground.jsx  |  25 +--
 .../rsg-components/PlaygroundRenderer.jsx     |   4 +-
 .../rsg-components/SectionsRenderer.jsx       |  24 ---
 ashes/styleguide/rsg-components/TabButton.jsx |   2 +-
 .../rsg-components/TableOfContents.jsx        |  15 +-
 ashes/styleguide/styleguide.css               |  61 +++++--
 13 files changed, 161 insertions(+), 180 deletions(-)
 delete mode 100644 ashes/styleguide/rsg-components/SectionsRenderer.jsx

diff --git a/ashes/docs/colors-and-typos.md b/ashes/docs/colors-and-typos.md
index 72079a4081..aff5bdf1cb 100644
--- a/ashes/docs/colors-and-typos.md
+++ b/ashes/docs/colors-and-typos.md
@@ -1,4 +1,6 @@
-We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts), but it is hightly recommended to use only existing variables for `color`, `background-color` and `font` css properties. If mockups didnt match them, discuss that with designer.
+We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts),
+but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties.
+If mockups didn't match them, discuss that with designer.
 
 To use variables, just import them to your css file:
 
diff --git a/ashes/src/components/core/checkbox/checkbox.md b/ashes/src/components/core/checkbox/checkbox.md
index 910abc9724..33b11ccc49 100644
--- a/ashes/src/components/core/checkbox/checkbox.md
+++ b/ashes/src/components/core/checkbox/checkbox.md
@@ -21,7 +21,7 @@ import { Checkbox } from 'components/core/checkbox'
   <Checkbox.Checkbox id="checked" label="checked" defaultChecked /><br />
   <Checkbox.Checkbox id="not-checked" label="not checked" /><br />
   <Checkbox.Checkbox id="disabled" label="disabled" disabled /><br />
-  
+
   <h6>Checkbox in table cell</h6>
   <table style={{ width: '60px' }}>
     <tr>
@@ -71,7 +71,7 @@ import { SliderCheckbox } from 'components/core/checkbox'
 
 ```
 <div className='demo'>
-  <Checkbox.SliderCheckbox id="sc-checked" checked/><br />
-  <Checkbox.SliderCheckbox id="sc-not-checked"/><br />
+  <Checkbox.SliderCheckbox id="sc-checked" defaultChecked />
+  <Checkbox.SliderCheckbox id="sc-not-checked" />
 </div>
 ```
diff --git a/ashes/src/components/core/radio-button/radio-button.md b/ashes/src/components/core/radio-button/radio-button.md
index b149a55df6..6d575a5518 100644
--- a/ashes/src/components/core/radio-button/radio-button.md
+++ b/ashes/src/components/core/radio-button/radio-button.md
@@ -19,6 +19,5 @@ import RadioButton from 'components/core/radio-button';
   <RadioButton label="disabled" id="disabled" disabled />
   <RadioButton label="clickable #1" name="value" id="id1" />
   <RadioButton label="clickable #2" name="value" id="id2" />
-  <RadioButton label="checked" id="id2" checked />
 </div>
 ```
diff --git a/ashes/src/components/docs/colors/bg-colors.jsx b/ashes/src/components/docs/colors/bg-colors.jsx
index 3441c7d852..80c19aae5b 100644
--- a/ashes/src/components/docs/colors/bg-colors.jsx
+++ b/ashes/src/components/docs/colors/bg-colors.jsx
@@ -27,7 +27,7 @@ const BgColor = props => {
 export const BgColors = () => {
   return (
     <div className={s.block}>
-      {colors.map(cl => <BgColor {...cl} />)}
+      {colors.map(cl => <BgColor {...cl} key={cl.value} />)}
     </div>
   );
 };
diff --git a/ashes/src/components/docs/colors/text-colors.jsx b/ashes/src/components/docs/colors/text-colors.jsx
index 82ca0390a4..f33a8a622f 100644
--- a/ashes/src/components/docs/colors/text-colors.jsx
+++ b/ashes/src/components/docs/colors/text-colors.jsx
@@ -27,7 +27,7 @@ const TextColor = props => {
 export const TextColors = () => {
   return (
     <div className={s.block}>
-      {colors.map(cl => <TextColor {...cl} />)}
+      {colors.map(cl => <TextColor {...cl} key={cl.value} />)}
     </div>
   );
 };
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 05fda83973..36e4f9540e 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -20,119 +20,100 @@ module.exports = {
   },
   sections: [
     {
-      name: 'Documentation',
+      name: 'Colors and Typo',
+      content: '../docs/colors-and-typos.md',
+      components: () => [
+        path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
+        path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
+        path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
+      ],
+    },
+    {
+      name: 'Iconography',
+      components: () => [
+        path.resolve(__dirname, '../src/components/docs/icons/icons.jsx'),
+        path.resolve(__dirname, '../src/components/docs/svg-icons/svg-icons.jsx'),
+        path.resolve(__dirname, '../src/components/docs/logos/logos.jsx'),
+      ],
+    },
+    {
+      name: 'Core Components',
       sections: [
         {
-          name: 'Colors and Typo',
-          sections: [
-            {
-              content: '../docs/colors-and-typos.md',
-            },
-            {
-              components: () => [
-                path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
-                path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
-                path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
-              ],
-            },
+          name: 'Alerts',
+          components: () => [path.resolve(__dirname, '../src/components/core/alert/alert.jsx')],
+        },
+        {
+          name: 'Buttons',
+          components: () => [
+            path.resolve(__dirname, '../src/components/core/button/button.jsx'),
+            path.resolve(__dirname, '../src/components/core/button-with-menu/button-with-menu.jsx'),
+            path.resolve(__dirname, '../src/components/core/save-cancel/save-cancel.jsx'),
           ],
         },
         {
-          name: 'Iconography',
+          name: 'Navigation',
+          components: () => [path.resolve(__dirname, '../src/components/core/page-nav/page-nav.jsx')],
+        },
+        {
+          name: 'Forms',
           components: () => [
-            path.resolve(__dirname, '../src/components/docs/icons/icons.jsx'),
-            path.resolve(__dirname, '../src/components/docs/svg-icons/svg-icons.jsx'),
-            path.resolve(__dirname, '../src/components/docs/logos/logos.jsx'),
+            path.resolve(__dirname, '../src/components/core/text-mask/text-mask.jsx'),
+            path.resolve(__dirname, '../src/components/core/swatch-input/swatch-input.jsx'),
+            path.resolve(__dirname, '../src/components/core/radio-button/radio-button.jsx'),
+            path.resolve(__dirname, '../src/components/core/checkbox/checkbox.jsx'),
+            path.resolve(__dirname, '../src/components/core/counter/counter.jsx'),
+            path.resolve(__dirname, '../src/components/core/text-input/text-input.jsx'),
+          ],
+        },
+        {
+          name: 'Modal',
+          components: () => [
+            path.resolve(__dirname, '../src/components/core/modal-container/modal-container.jsx'),
+            path.resolve(__dirname, '../src/components/core/modal/modal.jsx'),
+            path.resolve(__dirname, '../src/components/core/confirmation-modal/confirmation-modal.jsx'),
+          ],
+        },
+        {
+          name: 'Other',
+          components: () => [
+            path.resolve(__dirname, '../src/components/core/rounded-pill/rounded-pill.jsx'),
+            path.resolve(__dirname, '../src/components/core/spinner/spinner.jsx'),
+            path.resolve(__dirname, '../src/components/core/countdown/countdown.jsx'),
+            path.resolve(__dirname, '../src/components/core/svg-icon/svg-icon.jsx'),
+            path.resolve(__dirname, '../src/components/core/icon/icon.jsx'),
           ],
         },
       ],
     },
     {
-      name: 'Components',
+      name: 'Utils Components',
       sections: [
         {
-          name: 'Core',
-          sections: [
-            {
-              name: 'Alerts',
-              components: () => [path.resolve(__dirname, '../src/components/core/alert/alert.jsx')],
-            },
-            {
-              name: 'Buttons',
-              components: () => [
-                path.resolve(__dirname, '../src/components/core/button/button.jsx'),
-                path.resolve(__dirname, '../src/components/core/button-with-menu/button-with-menu.jsx'),
-                path.resolve(__dirname, '../src/components/core/save-cancel/save-cancel.jsx'),
-              ],
-            },
-            {
-              name: 'Navigation',
-              components: () => [path.resolve(__dirname, '../src/components/core/page-nav/page-nav.jsx')],
-            },
-            {
-              name: 'Forms',
-              components: () => [
-                path.resolve(__dirname, '../src/components/core/text-mask/text-mask.jsx'),
-                path.resolve(__dirname, '../src/components/core/swatch-input/swatch-input.jsx'),
-                path.resolve(__dirname, '../src/components/core/radio-button/radio-button.jsx'),
-                path.resolve(__dirname, '../src/components/core/checkbox/checkbox.jsx'),
-                path.resolve(__dirname, '../src/components/core/counter/counter.jsx'),
-                path.resolve(__dirname, '../src/components/core/text-input/text-input.jsx'),
-              ],
-            },
-            {
-              name: 'Modal',
-              components: () => [
-                path.resolve(__dirname, '../src/components/core/modal-container/modal-container.jsx'),
-                path.resolve(__dirname, '../src/components/core/modal/modal.jsx'),
-                path.resolve(__dirname, '../src/components/core/confirmation-modal/confirmation-modal.jsx'),
-              ],
-            },
-            {
-              name: 'Other',
-              components: () => [
-                path.resolve(__dirname, '../src/components/core/rounded-pill/rounded-pill.jsx'),
-                path.resolve(__dirname, '../src/components/core/spinner/spinner.jsx'),
-                path.resolve(__dirname, '../src/components/core/countdown/countdown.jsx'),
-                path.resolve(__dirname, '../src/components/core/svg-icon/svg-icon.jsx'),
-                path.resolve(__dirname, '../src/components/core/icon/icon.jsx'),
-              ],
-            },
+          name: 'Errors',
+          components: () => [
+            path.resolve(__dirname, '../src/components/utils/errors/errors.jsx'),
+            path.resolve(__dirname, '../src/components/utils/errors/api-errors.jsx'),
+          ],
+        },
+        {
+          name: 'Activity Notifications',
+          components: () => [
+            path.resolve(__dirname, '../src/components/activity-notifications/item.jsx'),
+            path.resolve(__dirname, '../src/components/activity-notifications/panel.jsx'),
+            path.resolve(__dirname, '../src/components/activity-notifications/indicator.jsx'),
           ],
         },
         {
-          name: 'Utils',
-          sections: [
-            {
-              name: 'Errors',
-              components: () => [
-                path.resolve(__dirname, '../src/components/utils/errors/errors.jsx'),
-                path.resolve(__dirname, '../src/components/utils/errors/api-errors.jsx'),
-              ],
-            },
-            {
-              name: 'Activity Notifications',
-              components: () => [
-                path.resolve(__dirname, '../src/components/activity-notifications/item.jsx'),
-                path.resolve(__dirname, '../src/components/activity-notifications/panel.jsx'),
-                path.resolve(__dirname, '../src/components/activity-notifications/indicator.jsx'),
-              ],
-            },
-            {
-              name: 'Other',
-              components: () => ([
-                path.resolve(__dirname, '../src/components/utils/change/change.jsx'),
-                path.resolve(__dirname, '../src/components/utils/currency/currency.jsx'),
-                path.resolve(__dirname, '../src/components/utils/datetime/datetime.jsx'),
-              ]),
-            },
+          name: 'Other',
+          components: () => [
+            path.resolve(__dirname, '../src/components/utils/change/change.jsx'),
+            path.resolve(__dirname, '../src/components/utils/currency/currency.jsx'),
+            path.resolve(__dirname, '../src/components/utils/datetime/datetime.jsx'),
           ],
         },
       ],
     },
   ],
-  require: [
-    path.join(__dirname, '../src/images/favicons/favicon.ico'),
-    path.join(__dirname, 'styleguide.css'),
-  ]
+  require: [path.join(__dirname, '../src/images/favicons/favicon.ico'), path.join(__dirname, 'styleguide.css')],
 };
diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 3063ac9644..93c255848b 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -24,6 +24,9 @@ const styles = ({ font, small }) => ({
       margin: [[0, 7, 0, 0]],
     },
   },
+  isActive: {
+    color: '#f00',
+  },
   heading: {
     marginTop: 7,
     fontFamily: font,
@@ -37,8 +40,10 @@ export class ComponentsListRenderer extends React.Component {
   };
 
   expand(slug) {
-    return (e) => {
-      e.preventDefault();
+    return e => {
+      if (this.state.expanded[slug]) {
+        e.preventDefault();
+      }
 
       const newExpanded = {
         ...this.state.expanded,
@@ -57,14 +62,25 @@ export class ComponentsListRenderer extends React.Component {
       return null;
     }
 
+    console.log(items);
+
+    const activeItem = window.location.hash.substr(2);
+    console.log(activeItem);
+
     return (
       <ul className={classes.list}>
-        {items.map(({ heading, name, slug, content }) => (
+        {items.map(({ heading, name, slug, content }) =>
           <li className={cx(classes.item, (!content || !content.props.items.length) && classes.isChild)} key={name}>
-            <Link className={cx(heading && classes.heading)} href={`/#${slug}`} onClick={!!content && this.expand(slug)}>{name}</Link>
+            <Link
+              className={cx(heading && classes.heading, activeItem === slug && classes.isActive)}
+              href={`/#${slug}`}
+              onClick={!!content && this.expand(slug)}
+            >
+              {name}
+            </Link>
             {this.state.expanded[slug] && content}
           </li>
-        ))}
+        )}
       </ul>
     );
   }
diff --git a/ashes/styleguide/rsg-components/Playground.jsx b/ashes/styleguide/rsg-components/Playground.jsx
index f0b7bee54b..614b0a2eb6 100644
--- a/ashes/styleguide/rsg-components/Playground.jsx
+++ b/ashes/styleguide/rsg-components/Playground.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import Preview from 'react-styleguidist/lib/rsg-components/Preview';
-import Slot from 'react-styleguidist/lib/rsg-components/Slot';
+import Preview from 'rsg-components/Preview';
+import Slot from 'rsg-components/Slot';
 import PlaygroundRenderer from './PlaygroundRenderer';
-import { EXAMPLE_TAB_CODE_EDITOR } from 'react-styleguidist/lib/rsg-components/slots';
+import { EXAMPLE_TAB_CODE_EDITOR } from 'rsg-components/slots';
 
 export default class Playground extends Component {
   static propTypes = {
@@ -70,24 +70,11 @@ export default class Playground extends Component {
         name={name}
         codeActive={activeTab === EXAMPLE_TAB_CODE_EDITOR}
         preview={<Preview code={code} evalInContext={evalInContext} />}
-        tabButtons={
-          <Slot
-            name="exampleTabButtons"
-            active={activeTab}
-            props={{ onClick: this.handleTabChange }}
-          />
-        }
+        tabButtons={<Slot name="exampleTabButtons" active={activeTab} props={{ onClick: this.handleTabChange }} />}
         tabBody={
-          <Slot
-            name="exampleTabs"
-            active={activeTab}
-            onlyActive
-            props={{ code, onChange: this.handleChange }}
-          />
-        }
-        toolbar={
-          <Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} />
+          <Slot name="exampleTabs" active={activeTab} onlyActive props={{ code, onChange: this.handleChange }} />
         }
+        toolbar={<Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} />}
       />
     );
   }
diff --git a/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx b/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx
index 42a2f5cd02..6f34abf790 100644
--- a/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx
+++ b/ashes/styleguide/rsg-components/PlaygroundRenderer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+import Styled from 'rsg-components/Styled';
 
 const styles = ({ space, color, borderRadius }) => ({
   root: {
@@ -25,8 +25,6 @@ const styles = ({ space, color, borderRadius }) => ({
 });
 
 export function PlaygroundRenderer({ classes, name, preview, codeActive, tabButtons, tabBody, toolbar }) {
-  console.log(cx(classes.root, { [classes.codeActive]: codeActive }));
-
   return (
     <div className={cx(classes.root, { [classes.codeActive]: codeActive })}>
       <div className={classes.preview} data-preview={name}>{preview}</div>
diff --git a/ashes/styleguide/rsg-components/SectionsRenderer.jsx b/ashes/styleguide/rsg-components/SectionsRenderer.jsx
deleted file mode 100644
index a4cf45eced..0000000000
--- a/ashes/styleguide/rsg-components/SectionsRenderer.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Styled from 'react-styleguidist/lib/rsg-components/Styled';
-
-const styles = () => ({
-  // Just default jss-isolate rules
-  root: {},
-});
-
-export function SectionsRenderer({ classes, children }) {
-  return (
-    <section className={classes.root}>
-      Section:
-      {children}
-    </section>
-  );
-}
-
-SectionsRenderer.propTypes = {
-  classes: PropTypes.object.isRequired,
-  children: PropTypes.node,
-};
-
-export default Styled(styles)(SectionsRenderer);
diff --git a/ashes/styleguide/rsg-components/TabButton.jsx b/ashes/styleguide/rsg-components/TabButton.jsx
index 1a7452854a..a7af16f7f2 100644
--- a/ashes/styleguide/rsg-components/TabButton.jsx
+++ b/ashes/styleguide/rsg-components/TabButton.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+import Styled from 'rsg-components/Styled';
 import cx from 'classnames';
 
 export const styles = ({ space, color, fontFamily, fontSize }) => ({
diff --git a/ashes/styleguide/rsg-components/TableOfContents.jsx b/ashes/styleguide/rsg-components/TableOfContents.jsx
index e3c9c90041..8ed1d2b6b6 100644
--- a/ashes/styleguide/rsg-components/TableOfContents.jsx
+++ b/ashes/styleguide/rsg-components/TableOfContents.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { filterSectionsByName } from 'react-styleguidist/lib/utils/utils';
-import ComponentsList from 'react-styleguidist/lib/rsg-components/ComponentsList';
-import TableOfContentsRenderer from 'react-styleguidist/lib/rsg-components/TableOfContents/TableOfContentsRenderer';
+import ComponentsList from 'rsg-components/ComponentsList';
+import TableOfContentsRenderer from 'rsg-components/TableOfContents/TableOfContentsRenderer';
 
 export default class TableOfContents extends Component {
   static propTypes = {
@@ -14,15 +14,13 @@ export default class TableOfContents extends Component {
 
   renderLevel(sections) {
     const items = sections.map(section => {
-      const children = [...section.sections || [], ...section.components || []];
+      const children = [...(section.sections || []), ...(section.components || [])];
       return Object.assign({}, section, {
         heading: !!section.name && children.length > 0,
         content: children.length > 0 && this.renderLevel(children),
       });
     });
-    return (
-      <ComponentsList items={items} />
-    );
+    return <ComponentsList items={items} />;
   }
 
   renderSections() {
@@ -40,10 +38,7 @@ export default class TableOfContents extends Component {
   render() {
     const { searchTerm } = this.state;
     return (
-      <TableOfContentsRenderer
-        searchTerm={searchTerm}
-        onSearchTermChange={searchTerm => this.setState({ searchTerm })}
-      >
+      <TableOfContentsRenderer searchTerm={searchTerm} onSearchTermChange={searchTerm => this.setState({ searchTerm })}>
         {this.renderSections()}
       </TableOfContentsRenderer>
     );
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 4e5cca62eb..53375d2f60 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -1,10 +1,22 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic);
-@import url(https://fonts.googleapis.com/css?family=Inconsolata:300,400,700);
+@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,700);
 @import 'base.css';
 @import 'variables.css';
 
 :global {
   #app {
+    [class*=para-], [class*=a-], [class*=button-] {
+      font-family: 'Open Sans', sans-serif;
+    }
+
+    h1 [class*=heading-], h2 [class*=heading-], h3 [class*=heading-], [class*=h3] {
+      font-family: Raleway, sans-serif;
+    }
+
+    h1 [class*=heading-], h2 [class*=heading-], [class*=h1-], [class*=h2-] {
+      font-weight: 300;
+    }
+
     background: #f7f7f7;
     font: var(--font-body);
 
@@ -32,8 +44,7 @@
           padding: 0 16px 8px;
         }
 
-        *,
-        input::placeholder {
+        *, input::placeholder {
           font-size: 10px;
           line-height: 20px;
         }
@@ -42,12 +53,7 @@
           padding: 2px 8px;
         }
 
-      [ class ^= link- ] {
-        color: #666;
-      }
-
-        [class*=heading-],
-        [class*=para-] {
+        [class*=heading-], [class*=para-], [class*=a-], [class*=button-] {
           font-weight: 600;
         }
 
@@ -63,6 +69,33 @@
           padding-left: 12px;
         }
       }
+
+      li[class*=item-] {
+        overflow: visible;
+      }
+
+      [class^=link-] {
+        position: relative;
+        display: inline-block;
+        color: #666;
+        transition: all .2s;
+        z-index: 1;
+
+        &[class*=isActive-] {
+          color: #fff;
+        }
+
+        &[class*=isActive-]::before {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-radius: 100px;
+          background-color: #49cab9;
+          color: #fff;
+          z-index: -1;
+        }
+      }
     }
 
     a:active {
@@ -176,8 +209,7 @@
       }
     }
 
-    h3[class*=para-],
-    h4[class*=para-] {
+    h3[class*=para-], h4[class*=para-] {
       font-size: 16px;
     }
 
@@ -218,8 +250,7 @@
         outline: none;
         transition: all .2s;
 
-        &:hover,
-        &[class*=isActive-] {
+        &:hover, &[class*=isActive-] {
           background: var(--bg-green-buttons);
           color: var(--bg-white);
         }
@@ -264,9 +295,5 @@
         display: block;
       }
     }
-
   }
 }
-
-;
-

From 732bbd927bd2d60053d026af774b4bdb2683b67c Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 22 Jun 2017 16:38:11 +0300
Subject: [PATCH 41/51] update sidebar styles

---
 .../rsg-components/ComponentsList.jsx         | 51 +++++++++++------
 ashes/styleguide/styleguide.css               | 55 +++++++++++++++----
 2 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 93c255848b..49853c8270 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -25,7 +25,10 @@ const styles = ({ font, small }) => ({
     },
   },
   isActive: {
-    color: '#f00',
+    opacity: 1,
+  },
+  activeParent: {
+    opacity: 1,
   },
   heading: {
     marginTop: 7,
@@ -39,6 +42,14 @@ export class ComponentsListRenderer extends React.Component {
     expanded: {},
   };
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll.bind(this));
+  }
+
+  handleScroll(e) {
+    console.log(e);
+  }
+
   expand(slug) {
     return e => {
       if (this.state.expanded[slug]) {
@@ -62,25 +73,33 @@ export class ComponentsListRenderer extends React.Component {
       return null;
     }
 
-    console.log(items);
-
     const activeItem = window.location.hash.substr(2);
-    console.log(activeItem);
 
     return (
       <ul className={classes.list}>
-        {items.map(({ heading, name, slug, content }) =>
-          <li className={cx(classes.item, (!content || !content.props.items.length) && classes.isChild)} key={name}>
-            <Link
-              className={cx(heading && classes.heading, activeItem === slug && classes.isActive)}
-              href={`/#${slug}`}
-              onClick={!!content && this.expand(slug)}
-            >
-              {name}
-            </Link>
-            {this.state.expanded[slug] && content}
-          </li>
-        )}
+        {items.map(({ heading, name, slug, content }) => {
+          const isChild = !content || !content.props.items.length;
+          const activeParent = !isChild && content.props.items.some(({ slug }) => slug === activeItem);
+
+          const cls = cx(classes.item, {
+            [classes.isChild]: isChild,
+            [classes.isActive]: isChild && activeItem === slug,
+            [classes.activeParent]: activeParent,
+          });
+
+          return (
+            <li className={cls} key={name}>
+              <Link
+                className={cx({ [classes.heading]: !!heading })}
+                href={`#${slug}`}
+                onClick={!!content && this.expand(slug)}
+              >
+                {name}
+              </Link>
+              {this.state.expanded[slug] && content}
+            </li>
+          );
+        })}
       </ul>
     );
   }
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 53375d2f60..a67d15550d 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -1,5 +1,5 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic);
-@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
+@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
 @import 'base.css';
 @import 'variables.css';
 
@@ -44,6 +44,10 @@
           padding: 0 16px 8px;
         }
 
+        & > [class^=list-] > [class*=item-] > [class^=link-] {
+          color: #aaa;
+        }
+
         *, input::placeholder {
           font-size: 10px;
           line-height: 20px;
@@ -71,37 +75,64 @@
       }
 
       li[class*=item-] {
+        position: relative;
         overflow: visible;
+
+        &[class*=activeParent-]::before {
+          content: '';
+          background: #eee;
+          position: absolute;
+          left: -100%;
+          right: 0;
+          top: 0;
+          bottom: 0;
+        }
+
+        &[class*=isActive-] {
+          [class^=link-] {
+            color: #fff;
+
+            &::before {
+              opacity: 1;
+            }
+          }
+        }
+
+        &[class*=isChild-] {
+          &:last-child {
+            padding-bottom: 5px;
+          }
+
+          [class^=link-] {
+            font-weight: 400;
+          }
+        }
       }
 
       [class^=link-] {
         position: relative;
         display: inline-block;
         color: #666;
+        font-weight: 600;
         transition: all .2s;
         z-index: 1;
 
-        &[class*=isActive-] {
-          color: #fff;
-        }
-
-        &[class*=isActive-]::before {
+        &::before {
           content: '';
           position: absolute;
-          width: 100%;
+          width: calc(100% + 20px);
           height: 100%;
+          margin-left: -10px;
           border-radius: 100px;
           background-color: #49cab9;
           color: #fff;
+          opacity: 0;
           z-index: -1;
+          transition: all .2s;
         }
       }
     }
 
-    a:active {
-      color: red !important;
-    }
-
     .demo > * {
       margin-bottom: 10px;
     }

From 1ca7ef61d9ef8a00948e17304dd7b66d56981677 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Fri, 23 Jun 2017 01:37:25 +0300
Subject: [PATCH 42/51] expand/collapse sidebar

---
 ashes/styleguide/config.styleguide.js         |  33 +++--
 .../rsg-components/ComponentsList.jsx         | 138 ++++++++++++++----
 ashes/styleguide/styleguide.css               |  26 +++-
 3 files changed, 153 insertions(+), 44 deletions(-)

diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 36e4f9540e..1f2f366012 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -20,20 +20,25 @@ module.exports = {
   },
   sections: [
     {
-      name: 'Colors and Typo',
-      content: '../docs/colors-and-typos.md',
-      components: () => [
-        path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
-        path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
-        path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
-      ],
-    },
-    {
-      name: 'Iconography',
-      components: () => [
-        path.resolve(__dirname, '../src/components/docs/icons/icons.jsx'),
-        path.resolve(__dirname, '../src/components/docs/svg-icons/svg-icons.jsx'),
-        path.resolve(__dirname, '../src/components/docs/logos/logos.jsx'),
+      name: 'Documentation',
+      sections: [
+        {
+          name: 'Colors and Typo',
+          content: '../docs/colors-and-typos.md',
+          components: () => [
+            path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
+            path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
+            path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
+          ],
+        },
+        {
+          name: 'Iconography',
+          components: () => [
+            path.resolve(__dirname, '../src/components/docs/icons/icons.jsx'),
+            path.resolve(__dirname, '../src/components/docs/svg-icons/svg-icons.jsx'),
+            path.resolve(__dirname, '../src/components/docs/logos/logos.jsx'),
+          ],
+        },
       ],
     },
     {
diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 49853c8270..613ac03014 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { identity, values } from 'lodash';
+import { assoc } from 'sprout-data';
 import cx from 'classnames';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
@@ -37,31 +39,115 @@ const styles = ({ font, small }) => ({
   },
 });
 
+function isLeaf(item) {
+  return !item.content || !item.content.props.items.length;
+}
+
+function isElementWithSlugInViewport(slug) {
+  const el = document.getElementById(slug);
+  if (!el) {
+    console.warn(`element "${slug}" not found`);
+
+    return false;
+  }
+  const elementTop = el.offsetTop;
+  const elementBottom = elementTop + el.offsetHeight;
+  const pageTop = window.scrollY;
+
+  return elementTop + 50 <= pageTop + 200 && elementBottom >= pageTop;
+}
+
+function updateHash(hash) {
+  if (history.pushState) {
+    history.pushState(null, null, `#/${hash}`);
+  } else {
+    location.hash = `#/${hash}`;
+  }
+}
+
 export class ComponentsListRenderer extends React.Component {
   state = {
-    expanded: {},
+    expandedItems: {},
+    collapsibleItems: {},
+    hasCollapsibleItems: false,
   };
 
+  componentWillMount() {
+    const collapsibleItems = this.props.items.reduce(
+      (res, item) => ({
+        ...res,
+        [item.slug]: isLeaf(item) ? false : item.content.props.items.some(isLeaf),
+      }),
+      {}
+    );
+
+    const hasCollapsibleItems = values(collapsibleItems).some(identity);
+
+    this.setState({ collapsibleItems, hasCollapsibleItems });
+  }
+
   componentDidMount() {
-    window.addEventListener('scroll', this.handleScroll.bind(this));
+    if (this.state.hasCollapsibleItems) {
+      window.addEventListener('scroll', this.handleScroll.bind(this));
+    }
+  }
+
+  get activeItem() {
+    return window.location.hash.substr(2);
   }
 
-  handleScroll(e) {
-    console.log(e);
+  getExpandedState(slug, expand = true) {
+    const newState = {
+      ...this.state.expandedItems,
+      [slug]: expand,
+    };
+
+    return newState;
+  }
+
+  handleScroll() {
+    if (!this.state.hasCollapsibleItems) {
+      return;
+    }
+
+    this.props.items.forEach(parent => {
+      if (isLeaf(parent)) {
+        return;
+      }
+
+      const elementInViewport = parent.content.props.items.find(item => {
+        if (!isLeaf(item)) {
+          return;
+        }
+
+        return isElementWithSlugInViewport(item.slug);
+      });
+
+      if (elementInViewport) {
+        if (this.activeItem !== elementInViewport.slug) {
+          updateHash(elementInViewport.slug);
+
+          this.setState({
+            expandedItems: this.getExpandedState(parent.slug, true),
+          });
+        }
+      } else {
+        this.setState({
+          expandedItems: this.getExpandedState(parent.slug, false),
+        });
+      }
+    });
   }
 
   expand(slug) {
     return e => {
-      if (this.state.expanded[slug]) {
+      const itemExpanded = this.state.expandedItems[slug];
+
+      if (this.state.collapsibleItems[slug]) {
         e.preventDefault();
       }
 
-      const newExpanded = {
-        ...this.state.expanded,
-        [slug]: !this.state.expanded[slug],
-      };
-
-      this.setState({ expanded: newExpanded });
+      this.setState({ expandedItems: this.getExpandedState(slug, !itemExpanded) });
     };
   }
 
@@ -73,30 +159,30 @@ export class ComponentsListRenderer extends React.Component {
       return null;
     }
 
-    const activeItem = window.location.hash.substr(2);
-
     return (
       <ul className={classes.list}>
-        {items.map(({ heading, name, slug, content }) => {
-          const isChild = !content || !content.props.items.length;
-          const activeParent = !isChild && content.props.items.some(({ slug }) => slug === activeItem);
+        {items.map(item => {
+          const { heading, name, slug, content } = item;
+          const isLeafElement = isLeaf(item);
+          const activeParent = !isLeafElement && content.props.items.some(({ slug }) => slug === this.activeItem);
 
           const cls = cx(classes.item, {
-            [classes.isChild]: isChild,
-            [classes.isActive]: isChild && activeItem === slug,
+            [classes.isChild]: isLeafElement,
+            [classes.isActive]: isLeafElement && this.activeItem === slug,
             [classes.activeParent]: activeParent,
           });
 
+          const renderContent = !this.state.collapsibleItems[slug] || this.state.expandedItems[slug] || activeParent;
+
+          const TitleElement = isLeafElement || this.state.collapsibleItems[slug] ? Link : 'span';
+          const clickHandler = isLeafElement || this.state.collapsibleItems[slug] ? this.expand(slug) : void 0;
+
           return (
-            <li className={cls} key={name}>
-              <Link
-                className={cx({ [classes.heading]: !!heading })}
-                href={`#${slug}`}
-                onClick={!!content && this.expand(slug)}
-              >
+            <li className={cls} key={slug}>
+              <TitleElement className={cx({ [classes.heading]: !!heading })} href={`#${slug}`} onClick={clickHandler}>
                 {name}
-              </Link>
-              {this.state.expanded[slug] && content}
+              </TitleElement>
+              {renderContent && !!content && React.cloneElement(content)}
             </li>
           );
         })}
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index a67d15550d..d6039c761e 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -9,6 +9,24 @@
       font-family: 'Open Sans', sans-serif;
     }
 
+    h1.root-0-10 {
+      border-bottom: 1px solid #d8d8d8;
+
+      a[class*=isPrimary-] {
+        display: inline-block;
+        padding: 10px 0;
+        font-size: 12px;
+        font-weight: 600;
+        color: #aaa;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+
     h1 [class*=heading-], h2 [class*=heading-], h3 [class*=heading-], [class*=h3] {
       font-family: Raleway, sans-serif;
     }
@@ -44,7 +62,7 @@
           padding: 0 16px 8px;
         }
 
-        & > [class^=list-] > [class*=item-] > [class^=link-] {
+        & > [class^=list-] > [class*=item-] > [class*=heading-] {
           color: #aaa;
         }
 
@@ -89,7 +107,7 @@
         }
 
         &[class*=isActive-] {
-          [class^=link-] {
+          [ class ^= link- ] {
             color: #fff;
 
             &::before {
@@ -103,13 +121,13 @@
             padding-bottom: 5px;
           }
 
-          [class^=link-] {
+          [ class ^= link- ] {
             font-weight: 400;
           }
         }
       }
 
-      [class^=link-] {
+      [ class ^= link- ] {
         position: relative;
         display: inline-block;
         color: #666;

From a32cdece89b0603d774806a595c12762a634a4fc Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Fri, 23 Jun 2017 02:42:32 +0300
Subject: [PATCH 43/51] sidebar animation

---
 .../rsg-components/ComponentsList.jsx         | 50 ++++++++++++++++++-
 ashes/styleguide/styleguide.css               | 24 +++++----
 2 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 613ac03014..2d6d8db38e 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -65,6 +65,53 @@ function updateHash(hash) {
   }
 }
 
+class ListItem extends React.Component {
+  _content;
+  mounted: bool;
+
+  componentDidMount() {
+    this.mounted = true;
+
+    this.recalculateHeight();
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  componentDidUpdate() {
+    this.recalculateHeight();
+  }
+
+  recalculateHeight() {
+    if (!this.props.collapsible) {
+      this._content.style.opacity = 1;
+      this._content.style.overflow = 'visible';
+
+      return;
+    }
+
+    let maxHeight = 0;
+    let opacity = 0;
+
+    if (this.props.open) {
+      maxHeight = this._content.scrollHeight;
+      opacity = 1;
+    }
+
+    this._content.style.maxHeight = `${maxHeight}px`;
+    this._content.style.opacity = opacity;
+  }
+
+  render() {
+    return (
+      <div ref={c => (this._content = c)} style={{ transition: 'all .4s', opacity: 0, overflow: 'hidden', }}>
+        {React.cloneElement(this.props.content)}
+      </div>
+    );
+  }
+}
+
 export class ComponentsListRenderer extends React.Component {
   state = {
     expandedItems: {},
@@ -182,7 +229,8 @@ export class ComponentsListRenderer extends React.Component {
               <TitleElement className={cx({ [classes.heading]: !!heading })} href={`#${slug}`} onClick={clickHandler}>
                 {name}
               </TitleElement>
-              {renderContent && !!content && React.cloneElement(content)}
+              {!!content &&
+              <ListItem open={renderContent} content={content} collapsible={this.state.collapsibleItems[slug]} />}
             </li>
           );
         })}
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index d6039c761e..4d05a64709 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -85,29 +85,32 @@
       }
 
       ul[class^=list-] {
-        padding-left: 16px;
-
-        ul[class^=list-] {
-          padding-left: 12px;
-        }
+        padding-left: 0;
       }
 
       li[class*=item-] {
         position: relative;
         overflow: visible;
+        padding-left: 16px;
 
-        &[class*=activeParent-]::before {
+        &::before {
           content: '';
-          background: #eee;
           position: absolute;
           left: -100%;
           right: 0;
           top: 0;
           bottom: 0;
+          background: #eee;
+          opacity: 0;
+          transition: all .5s;
+        }
+
+        &[class*=activeParent-]:before {
+          opacity: 1;
         }
 
         &[class*=isActive-] {
-          [ class ^= link- ] {
+          [class*=link-] {
             color: #fff;
 
             &::before {
@@ -121,18 +124,17 @@
             padding-bottom: 5px;
           }
 
-          [ class ^= link- ] {
+          [class*=link-] {
             font-weight: 400;
           }
         }
       }
 
-      [ class ^= link- ] {
+      [class*=link-] {
         position: relative;
         display: inline-block;
         color: #666;
         font-weight: 600;
-        transition: all .2s;
         z-index: 1;
 
         &::before {

From a65446d3825c0fe63459c9eef8a59e31b115d61f Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Fri, 23 Jun 2017 02:56:22 +0300
Subject: [PATCH 44/51] fix heading styles

---
 ashes/styleguide/rsg-components/ComponentsList.jsx | 5 +----
 ashes/styleguide/styleguide.css                    | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 2d6d8db38e..027b3602f8 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { identity, values } from 'lodash';
-import { assoc } from 'sprout-data';
 import cx from 'classnames';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
@@ -144,12 +143,10 @@ export class ComponentsListRenderer extends React.Component {
   }
 
   getExpandedState(slug, expand = true) {
-    const newState = {
+    return {
       ...this.state.expandedItems,
       [slug]: expand,
     };
-
-    return newState;
   }
 
   handleScroll() {
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 4d05a64709..7e857fc4f1 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -9,7 +9,7 @@
       font-family: 'Open Sans', sans-serif;
     }
 
-    h1.root-0-10 {
+    main > section > section > h1 {
       border-bottom: 1px solid #d8d8d8;
 
       a[class*=isPrimary-] {

From 83467f5b810680c172ccc449023cc72f3c6a1804 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Fri, 23 Jun 2017 13:23:03 +0300
Subject: [PATCH 45/51] fix example code style

---
 ashes/styleguide/styleguide.css | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 7e857fc4f1..1f6a384375 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -270,10 +270,6 @@
       border: solid 1px var(--color-border);
       border-radius: 4px;
       font-size: 12px;
-
-      & * {
-        color: #666;
-      }
     }
 
     [class*=preview-] {
@@ -328,8 +324,8 @@
       border-radius: 0 0 4px 4px;
       font-size: 12px;
 
-      & * {
-        color: #666;
+      .CodeMirror {
+        border-radius: 0 0 4px 4px;
       }
     }
 

From 23ad334d52ec87abd8c6a2796ab95976b9954040 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Fri, 23 Jun 2017 18:19:07 +0300
Subject: [PATCH 46/51] move scroll/expand logic to TableOfContents

---
 .../rsg-components/ComponentsList.jsx         | 175 +++---------------
 .../rsg-components/ComponentsListItem.jsx     |  57 ++++++
 .../rsg-components/TableOfContents.jsx        | 136 +++++++++++++-
 ashes/styleguide/webpack.styleguide.js        |   1 +
 ashes/yarn.lock                               |   4 +
 5 files changed, 212 insertions(+), 161 deletions(-)
 create mode 100644 ashes/styleguide/rsg-components/ComponentsListItem.jsx

diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 027b3602f8..118e146ab2 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { identity, values } from 'lodash';
+import { trim } from 'lodash';
 import cx from 'classnames';
+import { autobind } from 'core-decorators';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
+import ListItem from './ComponentsListItem';
+
+require('smoothscroll-polyfill').polyfill();
 
 const styles = ({ font, small }) => ({
   list: {
@@ -38,10 +42,6 @@ const styles = ({ font, small }) => ({
   },
 });
 
-function isLeaf(item) {
-  return !item.content || !item.content.props.items.length;
-}
-
 function isElementWithSlugInViewport(slug) {
   const el = document.getElementById(slug);
   if (!el) {
@@ -56,143 +56,13 @@ function isElementWithSlugInViewport(slug) {
   return elementTop + 50 <= pageTop + 200 && elementBottom >= pageTop;
 }
 
-function updateHash(hash) {
-  if (history.pushState) {
-    history.pushState(null, null, `#/${hash}`);
-  } else {
-    location.hash = `#/${hash}`;
-  }
-}
-
-class ListItem extends React.Component {
-  _content;
-  mounted: bool;
-
-  componentDidMount() {
-    this.mounted = true;
-
-    this.recalculateHeight();
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  componentDidUpdate() {
-    this.recalculateHeight();
-  }
-
-  recalculateHeight() {
-    if (!this.props.collapsible) {
-      this._content.style.opacity = 1;
-      this._content.style.overflow = 'visible';
-
-      return;
-    }
-
-    let maxHeight = 0;
-    let opacity = 0;
-
-    if (this.props.open) {
-      maxHeight = this._content.scrollHeight;
-      opacity = 1;
-    }
-
-    this._content.style.maxHeight = `${maxHeight}px`;
-    this._content.style.opacity = opacity;
-  }
-
-  render() {
-    return (
-      <div ref={c => (this._content = c)} style={{ transition: 'all .4s', opacity: 0, overflow: 'hidden', }}>
-        {React.cloneElement(this.props.content)}
-      </div>
-    );
-  }
-}
-
 export class ComponentsListRenderer extends React.Component {
-  state = {
-    expandedItems: {},
-    collapsibleItems: {},
-    hasCollapsibleItems: false,
-  };
-
-  componentWillMount() {
-    const collapsibleItems = this.props.items.reduce(
-      (res, item) => ({
-        ...res,
-        [item.slug]: isLeaf(item) ? false : item.content.props.items.some(isLeaf),
-      }),
-      {}
-    );
-
-    const hasCollapsibleItems = values(collapsibleItems).some(identity);
-
-    this.setState({ collapsibleItems, hasCollapsibleItems });
+  static defaultProps = {
+    expanded: false,
   }
 
-  componentDidMount() {
-    if (this.state.hasCollapsibleItems) {
-      window.addEventListener('scroll', this.handleScroll.bind(this));
-    }
-  }
-
-  get activeItem() {
-    return window.location.hash.substr(2);
-  }
-
-  getExpandedState(slug, expand = true) {
-    return {
-      ...this.state.expandedItems,
-      [slug]: expand,
-    };
-  }
-
-  handleScroll() {
-    if (!this.state.hasCollapsibleItems) {
-      return;
-    }
-
-    this.props.items.forEach(parent => {
-      if (isLeaf(parent)) {
-        return;
-      }
-
-      const elementInViewport = parent.content.props.items.find(item => {
-        if (!isLeaf(item)) {
-          return;
-        }
-
-        return isElementWithSlugInViewport(item.slug);
-      });
-
-      if (elementInViewport) {
-        if (this.activeItem !== elementInViewport.slug) {
-          updateHash(elementInViewport.slug);
-
-          this.setState({
-            expandedItems: this.getExpandedState(parent.slug, true),
-          });
-        }
-      } else {
-        this.setState({
-          expandedItems: this.getExpandedState(parent.slug, false),
-        });
-      }
-    });
-  }
-
-  expand(slug) {
-    return e => {
-      const itemExpanded = this.state.expandedItems[slug];
-
-      if (this.state.collapsibleItems[slug]) {
-        e.preventDefault();
-      }
-
-      this.setState({ expandedItems: this.getExpandedState(slug, !itemExpanded) });
-    };
+  isActiveSlug(slug) {
+    return slug === window.location.hash.substr(2);
   }
 
   render() {
@@ -206,28 +76,27 @@ export class ComponentsListRenderer extends React.Component {
     return (
       <ul className={classes.list}>
         {items.map(item => {
-          const { heading, name, slug, content } = item;
-          const isLeafElement = isLeaf(item);
-          const activeParent = !isLeafElement && content.props.items.some(({ slug }) => slug === this.activeItem);
+          const { heading, name, slug, content, collapsible, expanded, isLeaf } = item;
+          const activeParent = !isLeaf && content.props.items.some(({ slug }) => this.isActiveSlug(slug));
 
           const cls = cx(classes.item, {
-            [classes.isChild]: isLeafElement,
-            [classes.isActive]: isLeafElement && this.activeItem === slug,
+            [classes.isChild]: isLeaf,
+            [classes.isActive]: isLeaf && this.isActiveSlug(slug),
             [classes.activeParent]: activeParent,
           });
 
-          const renderContent = !this.state.collapsibleItems[slug] || this.state.expandedItems[slug] || activeParent;
-
-          const TitleElement = isLeafElement || this.state.collapsibleItems[slug] ? Link : 'span';
-          const clickHandler = isLeafElement || this.state.collapsibleItems[slug] ? this.expand(slug) : void 0;
+          const TitleElement = isLeaf || collapsible ? Link : 'span';
 
           return (
             <li className={cls} key={slug}>
-              <TitleElement className={cx({ [classes.heading]: !!heading })} href={`#${slug}`} onClick={clickHandler}>
+              <TitleElement
+                className={cx({ [classes.heading]: !!heading })}
+                href={`#${slug}`}
+                onClick={e => this.props.onItemClick(slug, e)}
+              >
                 {name}
               </TitleElement>
-              {!!content &&
-              <ListItem open={renderContent} content={content} collapsible={this.state.collapsibleItems[slug]} />}
+              {!!content && <ListItem open={expanded || activeParent} content={content} collapsible={collapsible} />}
             </li>
           );
         })}
@@ -238,6 +107,10 @@ export class ComponentsListRenderer extends React.Component {
 
 ComponentsListRenderer.propTypes = {
   items: PropTypes.array.isRequired,
+  level: PropTypes.number.isRequired,
+  isLeaves: PropTypes.bool.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  onItemClick: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
 };
 
diff --git a/ashes/styleguide/rsg-components/ComponentsListItem.jsx b/ashes/styleguide/rsg-components/ComponentsListItem.jsx
new file mode 100644
index 0000000000..6041143b14
--- /dev/null
+++ b/ashes/styleguide/rsg-components/ComponentsListItem.jsx
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class ComponentsListItem extends Component {
+  _content;
+  mounted: bool;
+
+  componentDidMount() {
+    this.mounted = true;
+
+    this.recalculateHeight();
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  componentDidUpdate() {
+    this.recalculateHeight();
+  }
+
+  recalculateHeight() {
+    if (!this.props.collapsible) {
+      this._content.style.opacity = 1;
+      this._content.style.overflow = 'visible';
+
+      return;
+    }
+
+    let maxHeight = 0;
+    let opacity = 0;
+
+    if (this.props.open) {
+      maxHeight = this._content.scrollHeight;
+      opacity = 1;
+    }
+
+    this._content.style.maxHeight = `${maxHeight}px`;
+    this._content.style.opacity = opacity;
+  }
+
+  render() {
+    return (
+      <div ref={c => (this._content = c)} style={{ transition: 'all .4s', opacity: 0, overflow: 'hidden', }}>
+        {React.cloneElement(this.props.content)}
+      </div>
+    );
+  }
+}
+
+ComponentsListItem.propTypes = {
+  collapsible: PropTypes.bool.isRequired,
+  open: PropTypes.bool.isRequired,
+  content: PropTypes.node.isRequired,
+};
+
+export default ComponentsListItem;
diff --git a/ashes/styleguide/rsg-components/TableOfContents.jsx b/ashes/styleguide/rsg-components/TableOfContents.jsx
index 8ed1d2b6b6..7a293e6f20 100644
--- a/ashes/styleguide/rsg-components/TableOfContents.jsx
+++ b/ashes/styleguide/rsg-components/TableOfContents.jsx
@@ -1,38 +1,154 @@
+import { pick } from 'lodash';
+import { autobind } from 'core-decorators';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { filterSectionsByName } from 'react-styleguidist/lib/utils/utils';
 import ComponentsList from 'rsg-components/ComponentsList';
-import TableOfContentsRenderer from 'rsg-components/TableOfContents/TableOfContentsRenderer';
+import TableOfContentsRenderer from 'react-styleguidist/lib/rsg-components/TableOfContents/TableOfContentsRenderer';
+
+function isElementWithSlugInViewport(slug) {
+  const el = document.getElementById(slug);
+  if (!el) {
+    console.warn(`element "${slug}" not found`);
+
+    return false;
+  }
+  const elementTop = el.offsetTop;
+  const elementBottom = elementTop + el.offsetHeight;
+  const pageTop = window.scrollY;
+
+  return elementTop + 50 <= pageTop + 200 && elementBottom >= pageTop;
+}
+
+function updateHash(hash) {
+  if (history.pushState) {
+    history.pushState(null, null, `#/${hash}`);
+  } else {
+    location.hash = `#/${hash}`;
+  }
+}
 
 export default class TableOfContents extends Component {
   static propTypes = {
     sections: PropTypes.array.isRequired,
   };
+
   state = {
+    sections: [],
     searchTerm: '',
+    components: [],
+    expandedItems: {},
   };
 
-  renderLevel(sections) {
-    const items = sections.map(section => {
+  componentWillMount() {
+    const buildItems = level => (res, section) => {
       const children = [...(section.sections || []), ...(section.components || [])];
-      return Object.assign({}, section, {
+
+      const item = {
+        ...pick(section, ['sections', 'components', 'name', 'slug']),
         heading: !!section.name && children.length > 0,
-        content: children.length > 0 && this.renderLevel(children),
+        items: children.length > 0 && children.reduce(buildItems(level + 1), []),
+        isLeaf: !children.length,
+        collapsible: level > 0 && children.length > 0,
+        level,
+      };
+
+      return [...res, item];
+    };
+
+    const sections = this.props.sections.reduce(buildItems(0), []);
+
+    console.log(sections);
+
+    this.setState({ sections });
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  getExpandedState(slug, expand = true) {
+    return {
+      ...this.state.expandedItems,
+      [slug]: expand,
+    };
+  }
+
+  @autobind
+  handleScroll() {
+    const _reduce = parent => (res, item) => {
+      if (res) return res;
+
+      if (item.isLeaf) {
+        if (isElementWithSlugInViewport(item.slug)) {
+          return { parent, element: item };
+        } else {
+          return null;
+        }
+      } else {
+        return item.items.reduce(_reduce(item), res);
+      }
+    };
+
+    const res = this.state.sections.reduce(_reduce(null), null);
+
+    if (!res) {
+      return;
+    }
+
+    if (this.activeItem !== res.element.slug) {
+      updateHash(res.element.slug);
+
+      this.setState({
+        expandedItems: this.getExpandedState(parent.slug, true),
+      });
+    } else {
+      this.setState({
+        expandedItems: this.getExpandedState(parent.slug, false),
       });
+    }
+  }
+
+  @autobind
+  handleClick(slug, e) {
+    e.preventDefault();
+
+    document.querySelector(e.target.hash).scrollIntoView({
+      behavior: 'smooth',
     });
-    return <ComponentsList items={items} />;
+
+    const itemExpanded = this.state.expandedItems[slug];
+
+    this.setState({ expandedItems: this.getExpandedState(slug, !itemExpanded) });
+  }
+
+  get activeItem() {
+    return window.location.hash.substr(2);
+  }
+
+  renderLevel(sections, level = 0) {
+    const items = sections.map(section => {
+      return {
+        ...pick(section, ['heading', 'isLeaf', 'name', 'slug', 'collapsible']),
+        content: section.items.length > 0 && this.renderLevel(section.items, level + 1),
+        expanded: this.state.expandedItems[section.slug],
+      };
+    });
+
+    const hasLeaves = items.some(({ content }) => !content);
+
+    return <ComponentsList items={items} level={level} isLeaves={hasLeaves} onItemClick={this.handleClick} />;
   }
 
   renderSections() {
     const { searchTerm } = this.state;
-    const { sections } = this.props;
+    const { sections } = this.state;
 
     // If there is only one section, we treat it as a root section
     // In this case the name of the section won't be rendered and it won't get left padding
-    const firstLevel = sections.length === 1 ? sections[0].components : sections;
-    const filtered = filterSectionsByName(firstLevel, searchTerm);
+    const filtered = filterSectionsByName(sections, searchTerm);
 
-    return this.renderLevel(filtered);
+    return this.renderLevel(filtered, 0);
   }
 
   render() {
diff --git a/ashes/styleguide/webpack.styleguide.js b/ashes/styleguide/webpack.styleguide.js
index 1b84f7a1ba..303f99e1bd 100644
--- a/ashes/styleguide/webpack.styleguide.js
+++ b/ashes/styleguide/webpack.styleguide.js
@@ -29,6 +29,7 @@ module.exports = {
       'rsg-components/Logo': path.join(__dirname, 'rsg-components/Logo'),
       'rsg-components/ComponentsList': path.join(__dirname, 'rsg-components/ComponentsList'),
       'rsg-components/TabButton': path.join(__dirname, 'rsg-components/TabButton'),
+      'rsg-components/TableOfContents': path.join(__dirname, 'rsg-components/TableOfContents'),
       'rsg-components/Playground': path.join(__dirname, 'rsg-components/Playground'),
       'rsg-components/PlaygroundRenderer': path.join(__dirname, 'rsg-components/PlaygroundRenderer'),
     },
diff --git a/ashes/yarn.lock b/ashes/yarn.lock
index a8fde4a75a..f124c45d17 100644
--- a/ashes/yarn.lock
+++ b/ashes/yarn.lock
@@ -7712,6 +7712,10 @@ slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
 
+smoothscroll-polyfill@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.5.tgz#466e6039b51cb525d70e1a5077ef81e064678eae"
+
 sntp@1.x.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"

From dc79d213f5e950aced0243705aff60be524e976a Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Mon, 26 Jun 2017 13:24:39 +0300
Subject: [PATCH 47/51] cleanup

---
 ashes/styleguide/config.styleguide.js         |  1 +
 .../rsg-components/ComponentsList.jsx         | 20 +------------------
 .../rsg-components/TableOfContents.jsx        | 20 +++++++++++++++----
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 1f2f366012..27496dd911 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -9,6 +9,7 @@ module.exports = {
   ignore: [path.join(__dirname, '../src/components/core/**/*.spec.jsx')],
   webpackConfig: require('./webpack.styleguide.js'),
   styleguideDir: path.resolve('build/admin/styleguide'),
+  highlightTheme: 'railscasts',
   getComponentPathLine: componentPath => {
     const dirname = path.dirname(componentPath, '.jsx');
     const name = dirname.split('/').slice(-1)[0];
diff --git a/ashes/styleguide/rsg-components/ComponentsList.jsx b/ashes/styleguide/rsg-components/ComponentsList.jsx
index 118e146ab2..9920797cdc 100644
--- a/ashes/styleguide/rsg-components/ComponentsList.jsx
+++ b/ashes/styleguide/rsg-components/ComponentsList.jsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { trim } from 'lodash';
 import cx from 'classnames';
-import { autobind } from 'core-decorators';
 import Link from 'rsg-components/Link';
 import Styled from 'rsg-components/Styled';
 import ListItem from './ComponentsListItem';
 
-require('smoothscroll-polyfill').polyfill();
-
 const styles = ({ font, small }) => ({
   list: {
     margin: 0,
@@ -42,24 +38,10 @@ const styles = ({ font, small }) => ({
   },
 });
 
-function isElementWithSlugInViewport(slug) {
-  const el = document.getElementById(slug);
-  if (!el) {
-    console.warn(`element "${slug}" not found`);
-
-    return false;
-  }
-  const elementTop = el.offsetTop;
-  const elementBottom = elementTop + el.offsetHeight;
-  const pageTop = window.scrollY;
-
-  return elementTop + 50 <= pageTop + 200 && elementBottom >= pageTop;
-}
-
 export class ComponentsListRenderer extends React.Component {
   static defaultProps = {
     expanded: false,
-  }
+  };
 
   isActiveSlug(slug) {
     return slug === window.location.hash.substr(2);
diff --git a/ashes/styleguide/rsg-components/TableOfContents.jsx b/ashes/styleguide/rsg-components/TableOfContents.jsx
index 7a293e6f20..89685497c6 100644
--- a/ashes/styleguide/rsg-components/TableOfContents.jsx
+++ b/ashes/styleguide/rsg-components/TableOfContents.jsx
@@ -1,11 +1,14 @@
 import { pick } from 'lodash';
-import { autobind } from 'core-decorators';
+import { assoc } from 'sprout-data';
+import { autobind, debounce } from 'core-decorators';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { filterSectionsByName } from 'react-styleguidist/lib/utils/utils';
 import ComponentsList from 'rsg-components/ComponentsList';
 import TableOfContentsRenderer from 'react-styleguidist/lib/rsg-components/TableOfContents/TableOfContentsRenderer';
 
+require('smoothscroll-polyfill').polyfill();
+
 function isElementWithSlugInViewport(slug) {
   const el = document.getElementById(slug);
   if (!el) {
@@ -58,8 +61,6 @@ export default class TableOfContents extends Component {
 
     const sections = this.props.sections.reduce(buildItems(0), []);
 
-    console.log(sections);
-
     this.setState({ sections });
   }
 
@@ -69,7 +70,7 @@ export default class TableOfContents extends Component {
 
   getExpandedState(slug, expand = true) {
     return {
-      ...this.state.expandedItems,
+      ...Object.keys(this.state.expandedItems).reduce((res, item) => assoc(res, item, false), {}),
       [slug]: expand,
     };
   }
@@ -109,10 +110,21 @@ export default class TableOfContents extends Component {
     }
   }
 
+  @autobind
+  @debounce(150)
+  handleSmoothScroll() {
+    window.addEventListener('scroll', this.handleScroll);
+    // trigger scroll function manually to get active element
+    this.handleScroll();
+  }
+
   @autobind
   handleClick(slug, e) {
     e.preventDefault();
 
+    window.removeEventListener('scroll', this.handleScroll);
+    window.addEventListener('scroll', this.handleSmoothScroll);
+
     document.querySelector(e.target.hash).scrollIntoView({
       behavior: 'smooth',
     });

From 8790564999efd6a71e6e916f3d2deceb2bac594c Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 29 Jun 2017 04:27:22 +0300
Subject: [PATCH 48/51] update sg design

---
 .../components/activity-notifications/item.md |  2 +-
 ashes/src/components/core/alert/alert.md      |  2 +-
 .../core/button-with-menu/button-with-menu.md |  2 +-
 ashes/src/components/core/button/button.md    |  2 +-
 .../src/components/core/checkbox/checkbox.md  |  2 +-
 .../confirmation-modal/confirmation-modal.md  |  2 +-
 .../components/core/countdown/countdown.md    |  2 +-
 ashes/src/components/core/counter/counter.md  |  2 +-
 ashes/src/components/core/icon/icon.md        |  2 +-
 .../core/modal-container/modal-container.md   |  2 +-
 ashes/src/components/core/modal/modal.md      |  2 +-
 .../src/components/core/page-nav/page-nav.md  |  2 +-
 .../core/radio-button/radio-button.md         |  2 +-
 .../core/rounded-pill/rounded-pill.md         |  2 +-
 .../core/save-cancel/save-cancel.md           |  2 +-
 ashes/src/components/core/spinner/spinner.md  |  2 +-
 .../src/components/core/svg-icon/svg-icon.md  |  2 +-
 .../core/swatch-input/swatch-input.md         |  2 +-
 .../components/core/text-input/text-input.md  |  2 +-
 .../components/core/text-mask/text-mask.md    |  2 +-
 .../src/components/docs/colors/bg-colors.jsx  | 33 ----------
 ashes/src/components/docs/colors/bg-colors.md |  3 -
 ashes/src/components/docs/colors/colors.jsx   | 60 +++++++++++++++++++
 ashes/src/components/docs/colors/colors.md    | 38 ++++++++++++
 .../components/docs/colors/text-colors.jsx    | 33 ----------
 .../src/components/docs/colors/text-colors.md |  3 -
 ashes/src/components/utils/change/change.md   |  2 +-
 .../src/components/utils/currency/currency.md |  2 +-
 .../src/components/utils/errors/api-errors.md |  2 +-
 ashes/src/components/utils/errors/errors.md   |  2 +-
 ashes/styleguide/config.styleguide.js         |  8 +--
 ashes/styleguide/styleguide.css               | 48 ++++++++++++---
 32 files changed, 164 insertions(+), 110 deletions(-)
 delete mode 100644 ashes/src/components/docs/colors/bg-colors.jsx
 delete mode 100644 ashes/src/components/docs/colors/bg-colors.md
 create mode 100644 ashes/src/components/docs/colors/colors.jsx
 create mode 100644 ashes/src/components/docs/colors/colors.md
 delete mode 100644 ashes/src/components/docs/colors/text-colors.jsx
 delete mode 100644 ashes/src/components/docs/colors/text-colors.md

diff --git a/ashes/src/components/activity-notifications/item.md b/ashes/src/components/activity-notifications/item.md
index 601edad03b..58a675cc47 100644
--- a/ashes/src/components/activity-notifications/item.md
+++ b/ashes/src/components/activity-notifications/item.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <NotificationItem displayed count={2} />
diff --git a/ashes/src/components/core/alert/alert.md b/ashes/src/components/core/alert/alert.md
index 9e0b62d2f5..c00887ab5e 100644
--- a/ashes/src/components/core/alert/alert.md
+++ b/ashes/src/components/core/alert/alert.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Alert from 'components/core/alert';
diff --git a/ashes/src/components/core/button-with-menu/button-with-menu.md b/ashes/src/components/core/button-with-menu/button-with-menu.md
index 2d7093d271..0f5dca1605 100644
--- a/ashes/src/components/core/button-with-menu/button-with-menu.md
+++ b/ashes/src/components/core/button-with-menu/button-with-menu.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import { ButtonWithMenu } from 'components/core/button-with-menu';
diff --git a/ashes/src/components/core/button/button.md b/ashes/src/components/core/button/button.md
index 034a16f66b..0300deda2d 100644
--- a/ashes/src/components/core/button/button.md
+++ b/ashes/src/components/core/button/button.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <Button
diff --git a/ashes/src/components/core/checkbox/checkbox.md b/ashes/src/components/core/checkbox/checkbox.md
index 33b11ccc49..e9ef1078f8 100644
--- a/ashes/src/components/core/checkbox/checkbox.md
+++ b/ashes/src/components/core/checkbox/checkbox.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <Checkbox
diff --git a/ashes/src/components/core/confirmation-modal/confirmation-modal.md b/ashes/src/components/core/confirmation-modal/confirmation-modal.md
index 92a04c079e..91311189c4 100644
--- a/ashes/src/components/core/confirmation-modal/confirmation-modal.md
+++ b/ashes/src/components/core/confirmation-modal/confirmation-modal.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import ConfirmationModal from 'components/core/confirmation-modal';
diff --git a/ashes/src/components/core/countdown/countdown.md b/ashes/src/components/core/countdown/countdown.md
index d90d39512e..28e853f0b1 100644
--- a/ashes/src/components/core/countdown/countdown.md
+++ b/ashes/src/components/core/countdown/countdown.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Countdown from 'components/core/countdown';
diff --git a/ashes/src/components/core/counter/counter.md b/ashes/src/components/core/counter/counter.md
index 3df32d827f..26d0291533 100644
--- a/ashes/src/components/core/counter/counter.md
+++ b/ashes/src/components/core/counter/counter.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Counter from 'components/core/counter';
diff --git a/ashes/src/components/core/icon/icon.md b/ashes/src/components/core/icon/icon.md
index 7a791eee33..6ae28e641f 100644
--- a/ashes/src/components/core/icon/icon.md
+++ b/ashes/src/components/core/icon/icon.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Icon from 'components/core/icon';
diff --git a/ashes/src/components/core/modal-container/modal-container.md b/ashes/src/components/core/modal-container/modal-container.md
index cec7fe2f2f..9257d010dd 100644
--- a/ashes/src/components/core/modal-container/modal-container.md
+++ b/ashes/src/components/core/modal-container/modal-container.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import ModalContainer from 'components/core/modal-container';
diff --git a/ashes/src/components/core/modal/modal.md b/ashes/src/components/core/modal/modal.md
index 65033fdde6..a4b90b89ef 100644
--- a/ashes/src/components/core/modal/modal.md
+++ b/ashes/src/components/core/modal/modal.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Modal from 'components/core/modal';
diff --git a/ashes/src/components/core/page-nav/page-nav.md b/ashes/src/components/core/page-nav/page-nav.md
index 7a9d9d1b47..539a8055c9 100644
--- a/ashes/src/components/core/page-nav/page-nav.md
+++ b/ashes/src/components/core/page-nav/page-nav.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <PageNav>
diff --git a/ashes/src/components/core/radio-button/radio-button.md b/ashes/src/components/core/radio-button/radio-button.md
index 6d575a5518..e2a558f274 100644
--- a/ashes/src/components/core/radio-button/radio-button.md
+++ b/ashes/src/components/core/radio-button/radio-button.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import RadioButton from 'components/core/radio-button';
diff --git a/ashes/src/components/core/rounded-pill/rounded-pill.md b/ashes/src/components/core/rounded-pill/rounded-pill.md
index eabc287873..95e9629c27 100644
--- a/ashes/src/components/core/rounded-pill/rounded-pill.md
+++ b/ashes/src/components/core/rounded-pill/rounded-pill.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <RoundedPill
diff --git a/ashes/src/components/core/save-cancel/save-cancel.md b/ashes/src/components/core/save-cancel/save-cancel.md
index 41dbde9487..a8fd2a2dad 100644
--- a/ashes/src/components/core/save-cancel/save-cancel.md
+++ b/ashes/src/components/core/save-cancel/save-cancel.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <SaveCancel
diff --git a/ashes/src/components/core/spinner/spinner.md b/ashes/src/components/core/spinner/spinner.md
index 7a2a37aeec..3ab1b8f196 100644
--- a/ashes/src/components/core/spinner/spinner.md
+++ b/ashes/src/components/core/spinner/spinner.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <Spinner />
diff --git a/ashes/src/components/core/svg-icon/svg-icon.md b/ashes/src/components/core/svg-icon/svg-icon.md
index 619f832ebe..3e2820aa4c 100644
--- a/ashes/src/components/core/svg-icon/svg-icon.md
+++ b/ashes/src/components/core/svg-icon/svg-icon.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import SvgIcon from 'components/core/svg-icon';
diff --git a/ashes/src/components/core/swatch-input/swatch-input.md b/ashes/src/components/core/swatch-input/swatch-input.md
index a30add2899..9bdb01e684 100644
--- a/ashes/src/components/core/swatch-input/swatch-input.md
+++ b/ashes/src/components/core/swatch-input/swatch-input.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <SwatchInput onChange={handleChange} value="ff0000" />
diff --git a/ashes/src/components/core/text-input/text-input.md b/ashes/src/components/core/text-input/text-input.md
index 12ea2ce625..ac6931792b 100644
--- a/ashes/src/components/core/text-input/text-input.md
+++ b/ashes/src/components/core/text-input/text-input.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import { TextInput } from 'components/core/text-input'
diff --git a/ashes/src/components/core/text-mask/text-mask.md b/ashes/src/components/core/text-mask/text-mask.md
index a303b9b0d7..518af8b6aa 100644
--- a/ashes/src/components/core/text-mask/text-mask.md
+++ b/ashes/src/components/core/text-mask/text-mask.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <TextMask mask={[/\d/]} />
diff --git a/ashes/src/components/docs/colors/bg-colors.jsx b/ashes/src/components/docs/colors/bg-colors.jsx
deleted file mode 100644
index 80c19aae5b..0000000000
--- a/ashes/src/components/docs/colors/bg-colors.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// @flow
-
-import classNames from 'classnames';
-import React from 'react';
-
-import s from './bg-colors.css';
-
-const colors = [];
-
-let i = 1;
-while (s[`color-${i}`]) {
-  colors.push({
-    value: i++,
-  });
-}
-
-const BgColor = props => {
-  return (
-    <div className={classNames(s.color, s[`color-${props.value}`])}>
-      <div className={s.sample} />
-      <div className={s.value} />
-      <div className={s.desc} />
-    </div>
-  );
-};
-
-export const BgColors = () => {
-  return (
-    <div className={s.block}>
-      {colors.map(cl => <BgColor {...cl} key={cl.value} />)}
-    </div>
-  );
-};
diff --git a/ashes/src/components/docs/colors/bg-colors.md b/ashes/src/components/docs/colors/bg-colors.md
deleted file mode 100644
index 3bcbfccaab..0000000000
--- a/ashes/src/components/docs/colors/bg-colors.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```
-<BgColors.BgColors />
-```
diff --git a/ashes/src/components/docs/colors/colors.jsx b/ashes/src/components/docs/colors/colors.jsx
new file mode 100644
index 0000000000..2646e16d4c
--- /dev/null
+++ b/ashes/src/components/docs/colors/colors.jsx
@@ -0,0 +1,60 @@
+// @flow
+
+import classNames from 'classnames';
+import React from 'react';
+
+import stc from './text-colors.css';
+import sbc from './bg-colors.css';
+
+const colorsText = [];
+const colorsBack = [];
+
+let i = 1;
+while (stc[`color-${i}`]) {
+  colorsText.push({
+    value: i++,
+  });
+}
+
+i = 1;
+while (sbc[`color-${i}`]) {
+  colorsBack.push({
+    value: i++,
+  });
+}
+
+const TextColor = props => {
+  return (
+    <div className={classNames(stc.color, stc[`color-${props.value}`])}>
+      <div className={stc.sample}>Aa</div>
+      <div className={stc.value} />
+      <div className={stc.desc} />
+    </div>
+  );
+};
+
+export const Colors = () => {
+  return (
+    <div className={stc.block}>
+      {colorsText.map(cl => <TextColor {...cl} key={cl.value} />)}
+    </div>
+  );
+};
+
+const BgColor = props => {
+  return (
+    <div className={classNames(sbc.color, sbc[`color-${props.value}`])}>
+      <div className={sbc.sample} />
+      <div className={sbc.value} />
+      <div className={sbc.desc} />
+    </div>
+  );
+};
+
+export const Backgrounds = () => {
+  return (
+    <div className={sbc.block}>
+      {colorsBack.map(cl => <BgColor {...cl} key={cl.value} />)}
+    </div>
+  );
+};
diff --git a/ashes/src/components/docs/colors/colors.md b/ashes/src/components/docs/colors/colors.md
new file mode 100644
index 0000000000..a347ab6536
--- /dev/null
+++ b/ashes/src/components/docs/colors/colors.md
@@ -0,0 +1,38 @@
+We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts),
+but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties.
+If mockups didn't match them, discuss that with designer.
+
+To use variables, just import them to your css file:
+
+```css
+@import 'variables.css';
+
+.block {
+  color: #123456; /* prohibited! */
+
+  color: var(--color-text); /* allowed */
+  background-color: var(--bg-grey);
+}
+
+.label {
+  color: var(--color-additional-text);
+  background: var(--bg-white);
+  border: 1px solid var(--color-border);
+}
+
+.clickableText {
+  color: var(--color-action-text);
+}
+```
+
+### Text colors
+
+```
+<Colors.Colors />
+```
+
+### Backgrounds/borders
+
+```
+<Colors.Backgrounds />
+```
diff --git a/ashes/src/components/docs/colors/text-colors.jsx b/ashes/src/components/docs/colors/text-colors.jsx
deleted file mode 100644
index f33a8a622f..0000000000
--- a/ashes/src/components/docs/colors/text-colors.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// @flow
-
-import classNames from 'classnames';
-import React from 'react';
-
-import s from './text-colors.css';
-
-const colors = [];
-
-let i = 1;
-while (s[`color-${i}`]) {
-  colors.push({
-    value: i++,
-  });
-}
-
-const TextColor = props => {
-  return (
-    <div className={classNames(s.color, s[`color-${props.value}`])}>
-      <div className={s.sample}>Aa</div>
-      <div className={s.value} />
-      <div className={s.desc} />
-    </div>
-  );
-};
-
-export const TextColors = () => {
-  return (
-    <div className={s.block}>
-      {colors.map(cl => <TextColor {...cl} key={cl.value} />)}
-    </div>
-  );
-};
diff --git a/ashes/src/components/docs/colors/text-colors.md b/ashes/src/components/docs/colors/text-colors.md
deleted file mode 100644
index 602c21776c..0000000000
--- a/ashes/src/components/docs/colors/text-colors.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```
-<TextColors.TextColors />
-```
diff --git a/ashes/src/components/utils/change/change.md b/ashes/src/components/utils/change/change.md
index 6d2dc9462b..74bf71ccfc 100644
--- a/ashes/src/components/utils/change/change.md
+++ b/ashes/src/components/utils/change/change.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Change from 'components/utils/change';
diff --git a/ashes/src/components/utils/currency/currency.md b/ashes/src/components/utils/currency/currency.md
index 08c633d8ea..56a49ddc84 100644
--- a/ashes/src/components/utils/currency/currency.md
+++ b/ashes/src/components/utils/currency/currency.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Currency from 'components/utils/currency';
diff --git a/ashes/src/components/utils/errors/api-errors.md b/ashes/src/components/utils/errors/api-errors.md
index 8c16587932..4c0abbedca 100644
--- a/ashes/src/components/utils/errors/api-errors.md
+++ b/ashes/src/components/utils/errors/api-errors.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import { ApiErrors } from 'components/utils/errors';
diff --git a/ashes/src/components/utils/errors/errors.md b/ashes/src/components/utils/errors/errors.md
index 6c2d8bdbeb..fe6f5bd869 100644
--- a/ashes/src/components/utils/errors/errors.md
+++ b/ashes/src/components/utils/errors/errors.md
@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 import Errors from 'components/utils/errors';
diff --git a/ashes/styleguide/config.styleguide.js b/ashes/styleguide/config.styleguide.js
index 27496dd911..a8a79a91e0 100644
--- a/ashes/styleguide/config.styleguide.js
+++ b/ashes/styleguide/config.styleguide.js
@@ -9,7 +9,7 @@ module.exports = {
   ignore: [path.join(__dirname, '../src/components/core/**/*.spec.jsx')],
   webpackConfig: require('./webpack.styleguide.js'),
   styleguideDir: path.resolve('build/admin/styleguide'),
-  highlightTheme: 'railscasts',
+  highlightTheme: 'neo',
   getComponentPathLine: componentPath => {
     const dirname = path.dirname(componentPath, '.jsx');
     const name = dirname.split('/').slice(-1)[0];
@@ -24,11 +24,9 @@ module.exports = {
       name: 'Documentation',
       sections: [
         {
-          name: 'Colors and Typo',
-          content: '../docs/colors-and-typos.md',
+          name: 'Colors and Typography',
           components: () => [
-            path.resolve(__dirname, '../src/components/docs/colors/text-colors.jsx'),
-            path.resolve(__dirname, '../src/components/docs/colors/bg-colors.jsx'),
+            path.resolve(__dirname, '../src/components/docs/colors/colors.jsx'),
             path.resolve(__dirname, '../src/components/docs/fonts/fonts.jsx'),
           ],
         },
diff --git a/ashes/styleguide/styleguide.css b/ashes/styleguide/styleguide.css
index 1f6a384375..c3379284dc 100644
--- a/ashes/styleguide/styleguide.css
+++ b/ashes/styleguide/styleguide.css
@@ -67,7 +67,7 @@
         }
 
         *, input::placeholder {
-          font-size: 10px;
+          font-size: 12px;
           line-height: 20px;
         }
 
@@ -192,9 +192,14 @@
       }
     }
 
+    .CodeMirror {
+      background: #fafafa;
+    }
+
     .CodeMirror .CodeMirror-lines pre.CodeMirror-line {
       font-size: 12px;
       line-height: 16px;
+      animation: fadeIn .7s;
     }
 
     .root-0-80 > ul.list-0-83 {
@@ -206,6 +211,10 @@
       font-weight: 600;
     }
 
+    [class*=table-] {
+      animation: fadeIn .7s;
+    }
+
     [class*=table-] [class*=cell-] {
       padding-bottom: 0;
       vertical-align: middle;
@@ -218,19 +227,23 @@
 
     [class*=tabButtons-] [class*=button-] {
       position: relative;
-      font-size: 16px;
-      color: #363636;
-      text-transform: initial;
       outline: none;
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 2.4px;
+      text-align: left;
+      color: #888888;
+      text-transform: uppercase;
+
       transition: all .2s;
 
-      &::before {
+      &::after {
         font-family: 'fontello';
         content: '\e805';
         position: absolute;
         top: 12px;
-        left: -18px;
-        font-size: 10px;
+        right: -12px;
+        font-size: 6px;
         transition: transform .2s ease-out;
       }
 
@@ -241,7 +254,7 @@
       &[class*=isActive-] {
         border: none;
 
-        &::before {
+        &::after {
           transform: rotateX(180deg);
         }
       }
@@ -261,7 +274,15 @@
     }
 
     h3[class*=para-], h4[class*=para-] {
-      font-size: 16px;
+      font-size: 20px;
+    }
+
+    h5[class*=para-] {
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 2.4px;
+      color: #888888;
+      text-transform: uppercase;
     }
 
     [class*=pre-] {
@@ -344,3 +365,12 @@
     }
   }
 }
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

From 695535478409158ce9932b641dff6c7389f7ea82 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 6 Jul 2017 16:56:23 +0300
Subject: [PATCH 49/51] add smoothscroll-polyfill

---
 ashes/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ashes/package.json b/ashes/package.json
index ef41234dd8..410550451e 100644
--- a/ashes/package.json
+++ b/ashes/package.json
@@ -144,6 +144,7 @@
     "run-sequence": "^1.2.2",
     "simulant": "^0.2.2",
     "sinon": "^1.16.1",
+    "smoothscroll-polyfill": "^0.3.5",
     "sprout-data": "^0.2.3",
     "strip-ansi": "^3.0.0",
     "style-loader": "^0.16.1",

From 140f3908febb2fce5dcacd7f2d5ca2b4a583a4b8 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 6 Jul 2017 18:02:25 +0300
Subject: [PATCH 50/51] update docs

---
 ashes/docs/colors-and-typos.md | 26 --------------------------
 ashes/docs/styles.md           | 30 ++++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 26 deletions(-)
 delete mode 100644 ashes/docs/colors-and-typos.md

diff --git a/ashes/docs/colors-and-typos.md b/ashes/docs/colors-and-typos.md
deleted file mode 100644
index aff5bdf1cb..0000000000
--- a/ashes/docs/colors-and-typos.md
+++ /dev/null
@@ -1,26 +0,0 @@
-We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts),
-but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties.
-If mockups didn't match them, discuss that with designer.
-
-To use variables, just import them to your css file:
-
-```css
-@import 'variables.css';
-
-.block {
-  color: #123456; /* prohibited! */
-
-  color: var(--color-text); /* allowed */
-  background-color: var(--bg-grey);
-}
-
-.label {
-  color: var(--color-additional-text);
-  background: var(--bg-white);
-  border: 1px solid var(--color-border);
-}
-
-.clickableText {
-  color: var(--color-action-text);
-}
-```
diff --git a/ashes/docs/styles.md b/ashes/docs/styles.md
index 2736afc217..e94ff980e5 100644
--- a/ashes/docs/styles.md
+++ b/ashes/docs/styles.md
@@ -152,3 +152,33 @@ If you need to use global classnames in selectors, which should not be transform
 ```
 
 Please, try to avoid `:global()` usage.
+
+### Colors
+
+We are using limited set of text colors, background colors and fonts. There are very few exceptions (socials, charts),
+but it is highly recommended to use only existing variables for `color`, `background-color` and `font` css properties.
+If mockups didn't match them, discuss that with designer.
+
+To use variables, just import them to your css file:
+
+```css
+@import 'variables.css';
+
+.block {
+  color: #123456; /* prohibited! */
+
+  color: var(--color-text); /* allowed */
+  background-color: var(--bg-grey);
+}
+
+.label {
+  color: var(--color-additional-text);
+  background: var(--bg-white);
+  border: 1px solid var(--color-border);
+}
+
+.clickableText {
+  color: var(--color-action-text);
+}
+```
+

From 142b1fd87166ce855ffec5e181735f14c6d92e55 Mon Sep 17 00:00:00 2001
From: "tony.pizzicato" <tony.grebnev@gmail.com>
Date: Thu, 6 Jul 2017 18:08:50 +0300
Subject: [PATCH 51/51] fix actions dd

---
 ashes/src/components/dropdown/generic-dropdown.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ashes/src/components/dropdown/generic-dropdown.css b/ashes/src/components/dropdown/generic-dropdown.css
index a7c6dfa6ad..e60691b985 100644
--- a/ashes/src/components/dropdown/generic-dropdown.css
+++ b/ashes/src/components/dropdown/generic-dropdown.css
@@ -22,8 +22,6 @@
 
   /* padding: 0 10px !important; */
 
-  padding-top: 11px !important;
-
   &:active {
     box-shadow: none !important;
   }