Styleguide Third Phase

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
 

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);
+}
+```
+

ashes/package.json

@@ -105,15 +105,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",
     "prettier": "^1.4.4",
     "prop-types": "^15.5.8",
     "query-string": "^4.3.4",
@@ -143,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",

ashes/postcss.config.js

@@ -31,9 +31,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: {
@@ -51,4 +51,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;

ashes/src/components/activity-notifications/block.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   height: 100%;

ashes/src/components/activity-notifications/indicator.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   width: 85px;
@@ -34,10 +34,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;

ashes/src/components/activity-notifications/indicator.jsx

@@ -5,9 +5,7 @@ import _ from 'lodash';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { autobind } from 'core-decorators';
-
-// components
-import { Button } from 'components/core/button';
+import Icon from 'components/core/icon';
 
 // styles
 import s from './indicator.css';
@@ -61,9 +59,13 @@ export default class NotificationIndicator extends Component {
 
     return (
       <div className={s.block}>
-        <Button icon="bell" className={classes} onClick={this.toggleNotifications} fullWidth>
+        <div
+          className={classes}
+          onClick={this.toggleNotifications}
+        >
+          <Icon name="bell" />
           {this.indicator}
-        </Button>
+        </div>
       </div>
     );
   }

ashes/src/components/activity-notifications/item.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   padding: 10px;

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';

ashes/src/components/activity-notifications/item.md

@@ -1,4 +1,4 @@
-#### Basic usage
+##### Basic usage
 
 ```javascript
 <NotificationItem displayed count={2} />

ashes/src/components/activity-notifications/panel.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .markAll {
   width: 310px;

ashes/src/components/activity-notifications/panel.md

@@ -1,5 +1,3 @@
 ```
-<div className="demo">
-  <NotificationPanel displayed />
-</div>
+<NotificationPanel displayed />
 ```

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';
 

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 = {

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';
 

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 = {

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);

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';

ashes/src/components/analytics/question-box.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .question-box-container-active {
   width: 225px;

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;

ashes/src/components/analytics/segment-control.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .segment-control-container-active {
   width: 66px;

ashes/src/components/analytics/static-column-selector.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .column-selector {
   position: relative;

ashes/src/components/analytics/trend-button.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .trend-button-container-gain {
   display: inline-block;

ashes/src/components/auth/css/auth.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .title {
   font-size: 20px;

ashes/src/components/auth/css/wrap-to-lines.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .block {
   display: flex;

ashes/src/components/bulk-actions/modal/modal.css

@@ -1,4 +1,4 @@
-@import 'colors.css';
+@import 'variables.css';
 
 .cancelReason {
   margin: 30px 0 0;

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

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 = {