diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000000..234b7f7167
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,37 @@
+{
+ "env": {
+ "es6": true,
+ "browser": true,
+ "jest": true,
+ "cypress/globals": true
+ },
+ "extends": ["airbnb", "prettier"],
+ "parser": "babel-eslint",
+ "parserOptions": {
+ "ecmaVersion": 7,
+ "sourceType": "module",
+ "ecmaFeatures": {
+ "jsx": true,
+ "experimentalObjectRestSpread": true
+ }
+ },
+ "plugins": ["cypress"],
+ "rules": {
+ "camelcase": "off",
+ "class-methods-use-this": "off",
+ "consistent-return": "off",
+ "import/no-extraneous-dependencies": "off",
+ "import/no-unresolved": "off",
+ "import/prefer-default-export": "off",
+ "jsx-a11y/href-no-hash": "off",
+ "jsx-a11y/label-has-for": "off",
+ "new-cap": "off",
+ "no-plusplus": "off",
+ "no-underscore-dangle": "off",
+ "prefer-destructuring": "off",
+ "react/destructuring-assignment": "off",
+ "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
+ "react/jsx-one-expression-per-line": "off",
+ "react/prefer-stateless-function": "off"
+ }
+}
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000000..8785c009a5
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,11 @@
+### 🛠 Purpose
+
+---
+
+### ✏️ Notes to Reviewer
+
+---
+
+### 🖥 Screenshots
+
+---
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..a34bcdc99b
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v10.0.0
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..5a78a74564
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+#Git
+.git
+.github
+
+#Node modules
+node_modules
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..51ed063591
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+useTabs: false
+tabWidth: 2
+printWidth: 120
+trailingComma: es5
+semi: true
diff --git a/.storybook/assets/css/storybook.scss b/.storybook/assets/css/storybook.scss
index a2ab3a8186..e8b93656d3 100644
--- a/.storybook/assets/css/storybook.scss
+++ b/.storybook/assets/css/storybook.scss
@@ -1,5 +1,5 @@
@import "~tokens/tokens.scss";
.story-body {
- padding: $space*2;
+ padding: $space * 2;
}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index d40849b9d8..2720de01c4 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -7,19 +7,19 @@ module.exports = {
{
test: /\.js$/,
loaders: ["babel-loader?cacheDirectory"],
- exclude: /node_modules/
+ exclude: /node_modules/,
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
- include: path.resolve(__dirname, "../")
- }
- ]
+ include: path.resolve(__dirname, "../"),
+ },
+ ],
},
resolve: {
alias: {
tokens: path.resolve("./packages/Tokens/"),
- storybook: path.resolve("./.storybook/")
- }
- }
+ storybook: path.resolve("./.storybook/"),
+ },
+ },
};
diff --git a/.yarnrc b/.yarnrc
new file mode 100644
index 0000000000..3261664924
--- /dev/null
+++ b/.yarnrc
@@ -0,0 +1,2 @@
+--install.audit true
+--add.audit true
diff --git a/README.md b/README.md
index dd7bbeaf30..d7fe35d465 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,17 @@ $ yarn storybook
## run test
To be implemented [#19](https://github.com/acl-services/paprika/issues/19)
+
+## minimum requirements
+
+### yarn version
+
+yarn v1.12.3 (which contains yarn audit command) or update via:
+
+```sh
+$ brew install yarn
+```
+
+### node version
+
+v10.0.0 which is required by `eslint`
diff --git a/package.json b/package.json
index 3beeba0798..34f2f41828 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,15 @@
"storybook": "start-storybook -p 9009 -c .storybook",
"storybook:build": "build-storybook -c .storybook -o storybook-dist",
"test": "yarn test:a11y",
- "test:a11y": "NODE_PATH=. jest --config .jest-a11y.config.json"
+ "test:a11y": "NODE_PATH=. jest --config .jest-a11y.config.json",
+ "lint": "eslint packages",
+ "lint:fix": "yarn lint --fix",
+ "prettier:format": "yarn prettier -- --write",
+ "prettier": "prettier \"**/*.+(js|json|yml|css|scss|md|mdx)\"",
+ "prepush": "yarn lint && yarn test && yarn test:a11y && yarn prettier -- --list-different"
+ },
+ "engines": {
+ "yarn": ">=1.12.3"
},
"private": true,
"workspaces": [
@@ -33,19 +41,22 @@
"babel-plugin-transform-runtime": "^6.23.0",
"css-loader": "^1.0.0",
"cypress": "^3.1.0",
+ "eslint": "^5.3.0",
"eslint-config-airbnb": "^17.1.0",
- "eslint-config-prettier": "^3.0.1",
+ "eslint-config-prettier": "^4.0.0",
+ "eslint-plugin-cypress": "^2.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
- "eslint": "^5.3.0",
- "jest-cli": "^20.0.4",
+ "husky": "^1.3.1",
"jest": "^20.0.4",
+ "jest-cli": "^20.0.4",
"lerna": "^3.0.5",
"pa11y": "^5.0.4",
+ "prettier": "^1.16.3",
+ "react": "16.3.2",
"react-axe": "^3.0.1",
"react-dom": "16.3.3",
- "react": "16.3.2",
"sass-loader": "^4.0.2",
"sinon": "^6.1.4",
"style-loader": "^0.21.0",
diff --git a/packages/Popover/Popover.js b/packages/Popover/Popover.js
index 85f9f358e7..5bb1daa0dc 100644
--- a/packages/Popover/Popover.js
+++ b/packages/Popover/Popover.js
@@ -4,10 +4,7 @@ import { func, node, bool, string, number, oneOf, oneOfType } from "prop-types";
import throttle from "lodash.throttle";
import tokens from "@paprika/tokens";
import isInsideBoundaries from "./helpers/isInsideBoundaries";
-import {
- getContentCoordinates,
- getTipCoordinates
-} from "./helpers/getPosition";
+import { getContentCoordinates, getTipCoordinates } from "./helpers/getPosition";
import { isActiveElementPopover } from "./helpers/isActiveElementPopover";
import Content from "./components/Content/Content";
@@ -66,7 +63,7 @@ const propTypes = {
getPositioningElement: func,
/** Function that provides the scrolling DOM element that contains the popover. */
- getScrollContainer: func
+ getScrollContainer: func,
};
const defaultProps = {
@@ -79,7 +76,7 @@ const defaultProps = {
onClose: null,
offset: parseInt(tokens.spaceLg, 10),
getPositioningElement: null,
- getScrollContainer: null
+ getScrollContainer: null,
};
export default class Popover extends Component {
@@ -99,13 +96,13 @@ export default class Popover extends Component {
isOpen: this.props.defaultIsOpen || false,
tip: {
x: 0,
- y: 0
+ y: 0,
},
content: {
x: 0,
- y: 0
+ y: 0,
},
- width: "auto"
+ width: "auto",
};
// NOTE: should we created a link explaining more deeply this kind of errors?
@@ -119,29 +116,16 @@ export default class Popover extends Component {
}
if (props.isOpen !== null && props.onClose === null) {
- console.error(
- "This Popover is controlled by its isOpen prop but no onClose prop was provided."
- );
+ console.error("This Popover is controlled by its isOpen prop but no onClose prop was provided.");
}
}
getContextValues = memoizeOne(
- (
- content,
- maxWidth,
- width,
- isDark,
- isEager,
- isOpen,
- portalElement,
- refContent,
- refTip,
- tip
- ) => ({
+ (content, maxWidth, width, isDark, isEager, isOpen, portalElement, refContent, refTip, tip) => ({
content: {
...content,
maxWidth, // maybe we should code a minimum maxWidth?
- width
+ width,
},
isDark,
isEager,
@@ -154,7 +138,7 @@ export default class Popover extends Component {
portalElement,
refContent,
refTip,
- tip
+ tip,
})
);
@@ -173,8 +157,7 @@ export default class Popover extends Component {
this.addListeners();
}
- if (this.isOpen() && prevProps !== this.props)
- this.setVisibilityAndPosition();
+ if (this.isOpen() && prevProps !== this.props) this.setVisibilityAndPosition();
}
componentWillUnmount() {
@@ -203,19 +186,6 @@ export default class Popover extends Component {
return contentWidth;
}
- updateVisibilityAndPositionState(isOpening = false) {
- const { content, tip } = this.getCoordinates();
-
- const newState = {
- content,
- tip
- };
-
- if (isOpening) newState.isOpen = true;
-
- this.setState(newState);
- }
-
setVisibilityAndPosition(isOpening = false) {
// dynamically setting a fixed width before positioning avoids issues at the
// right edge of the screen
@@ -232,10 +202,6 @@ export default class Popover extends Component {
this.updateVisibilityAndPositionState(isOpening);
}
- isOpen() {
- return this.props.isOpen !== null ? this.props.isOpen : this.state.isOpen;
- }
-
getCoordinates = () => {
const { align, getScrollContainer } = this.props;
@@ -247,12 +213,9 @@ export default class Popover extends Component {
const contentCoords = getContentCoordinates({
rect: this.$content.getBoundingClientRect(),
targetRect,
- scrollRect:
- getScrollContainer !== null
- ? getScrollContainer().getBoundingClientRect()
- : null,
+ scrollRect: getScrollContainer !== null ? getScrollContainer().getBoundingClientRect() : null,
align,
- offset: this.props.offset
+ offset: this.props.offset,
});
let tipCoords = { x: null, y: null, rotate: null };
@@ -263,13 +226,13 @@ export default class Popover extends Component {
targetRect,
contentRect: this.$content.getBoundingClientRect(),
contentCoords,
- align
+ align,
});
}
return {
tip: tipCoords,
- content: contentCoords
+ content: contentCoords,
};
};
@@ -278,14 +241,12 @@ export default class Popover extends Component {
handleReposition = throttle(() => {
if (this.isOpen()) {
const scrollContainer =
- this.props.getScrollContainer === null
- ? document.documentElement
- : this.props.getScrollContainer();
+ this.props.getScrollContainer === null ? document.documentElement : this.props.getScrollContainer();
if (
!isInsideBoundaries({
$container: scrollContainer,
$element: this.$popover.current,
- align: this.props.align
+ align: this.props.align,
})
) {
this.close();
@@ -334,6 +295,14 @@ export default class Popover extends Component {
else this.open();
};
+ refTip = ref => {
+ this.$tip = ref;
+ };
+
+ refContent = ref => {
+ this.$content = ref;
+ };
+
open() {
this.$trigger = document.activeElement;
@@ -356,13 +325,22 @@ export default class Popover extends Component {
}
}
- refTip = ref => {
- this.$tip = ref;
- };
+ isOpen() {
+ return this.props.isOpen !== null ? this.props.isOpen : this.state.isOpen;
+ }
- refContent = ref => {
- this.$content = ref;
- };
+ updateVisibilityAndPositionState(isOpening = false) {
+ const { content, tip } = this.getCoordinates();
+
+ const newState = {
+ content,
+ tip,
+ };
+
+ if (isOpening) newState.isOpen = true;
+
+ this.setState(newState);
+ }
addListeners() {
if (this.$content) {
@@ -371,16 +349,10 @@ export default class Popover extends Component {
document.addEventListener("scroll", this.handleReposition, false);
if (this.props.getScrollContainer !== null) {
- this.props
- .getScrollContainer()
- .addEventListener("scroll", this.handleReposition, false);
+ this.props.getScrollContainer().addEventListener("scroll", this.handleReposition, false);
}
- this.$content.addEventListener(
- "transitionend",
- this.handleTransitionEnd,
- false
- );
+ this.$content.addEventListener("transitionend", this.handleTransitionEnd, false);
this.hasListeners = true;
}
@@ -393,17 +365,12 @@ export default class Popover extends Component {
if (this.props.getScrollContainer === null) {
document.removeEventListener("scroll", this.handleReposition);
} else {
- this.props
- .getScrollContainer()
- .removeEventListener("scroll", this.handleReposition);
+ this.props.getScrollContainer().removeEventListener("scroll", this.handleReposition);
}
document.removeEventListener("keyup", this.handleKeyUp);
- this.$content.removeEventListener(
- "transitionend",
- this.handleTransitionEnd
- );
+ this.$content.removeEventListener("transitionend", this.handleTransitionEnd);
this.hasListeners = false;
}
}
@@ -424,9 +391,7 @@ export default class Popover extends Component {
return (
-
- {this.props.children}
-
+ {this.props.children}
);
}
diff --git a/packages/Popover/components/Content/Content.js b/packages/Popover/components/Content/Content.js
index 34e23fd419..f1ba39e747 100644
--- a/packages/Popover/components/Content/Content.js
+++ b/packages/Popover/components/Content/Content.js
@@ -62,6 +62,12 @@ export default class Content extends Component {
const handler = this.handleMouseEvent(isEager, onDelayedClose, onDelayedOpen);
+ /* eslint-disable jsx-a11y/mouse-events-have-key-events */
+ /*
+ NOTE: we are missing onFocus, which affect the use of the keyboard
+ accessibility, I'm adding a issue https://github.com/acl-services/paprika/issues/33
+ so we can address this later.
+ */
return ReactDOM.createPortal(
) : (
-
+
{this.props.children}
);
diff --git a/packages/Popover/stories/Popover.cypress.stories.js b/packages/Popover/stories/Popover.cypress.stories.js
index c0f8fea561..932a85d54a 100644
--- a/packages/Popover/stories/Popover.cypress.stories.js
+++ b/packages/Popover/stories/Popover.cypress.stories.js
@@ -1,13 +1,13 @@
import React from "react";
import { storiesOf } from "@storybook/react";
-import Popover from "../Popover";
import windowHandles, { Input } from "@paprika/testingHelpers/windowHandles/";
+import Popover from "../Popover";
storiesOf("Popover/Automation Tests/Cypress", module)
.addDecorator(
windowHandles({
align: new Input(),
- isEager: new Input()
+ isEager: new Input(),
})
)
.add("Basic Popover Test", () => (
diff --git a/packages/Popover/stories/Popover.stories.js b/packages/Popover/stories/Popover.stories.js
index 1e7a33f92a..c586414d48 100644
--- a/packages/Popover/stories/Popover.stories.js
+++ b/packages/Popover/stories/Popover.stories.js
@@ -1,6 +1,5 @@
import React from "react";
import { storiesOf } from "@storybook/react";
-import { withKnobs } from "@storybook/addon-knobs";
import Basic from "./examples/Basic";
import Controlled from "./examples/Controlled";
@@ -16,7 +15,4 @@ storiesOf("Popover", module)
.add("With Positioning Element", () => )
.add("With Scroll Container", () => );
-storiesOf("Popover/Dev", module).add(
- "Has container with a CSS transform",
- () =>
-);
+storiesOf("Popover/Dev", module).add("Has container with a CSS transform", () => );
diff --git a/packages/Popover/stories/examples/ScrollContainer.js b/packages/Popover/stories/examples/ScrollContainer.js
index 49ebeffd9e..5f252d759c 100644
--- a/packages/Popover/stories/examples/ScrollContainer.js
+++ b/packages/Popover/stories/examples/ScrollContainer.js
@@ -1,5 +1,5 @@
import React, { Component } from "react";
-import { select, text, number } from "@storybook/addon-knobs";
+import { select, text, number, func } from "@storybook/addon-knobs";
import styled from "styled-components";
import { CenteredStory } from "../Popover.stories.styles";
import Popover from "../../Popover";
@@ -53,6 +53,10 @@ const PopoverBox = ({ getScrollContainer }) => (
);
+PopoverBox.propTypes = {
+ getScrollContainer: func.isRequired,
+};
+
export default class PopoverStory extends Component {
render() {
return (
diff --git a/packages/Popover/stories/examples/WithTriggers.js b/packages/Popover/stories/examples/WithTriggers.js
index 90824bdcf9..869b4cdb6f 100644
--- a/packages/Popover/stories/examples/WithTriggers.js
+++ b/packages/Popover/stories/examples/WithTriggers.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React, { Component } from "react";
import styled from "styled-components";
import { CenteredStory } from "../Popover.stories.styles";
@@ -43,7 +44,9 @@ export default class PopoverStory extends Component {
{handler => (
- ℹ️
+
+ ℹ️
+
)}
@@ -58,7 +61,7 @@ export default class PopoverStory extends Component {
Node – <a> link
- More info
+ More info
@@ -73,7 +76,11 @@ export default class PopoverStory extends Component {
- 💡 info
+
+
+ 💡 info
+
+
diff --git a/packages/Popover/tests/helpers/selectors.js b/packages/Popover/tests/helpers/selectors.js
index ea68cf0907..b63b3bea43 100644
--- a/packages/Popover/tests/helpers/selectors.js
+++ b/packages/Popover/tests/helpers/selectors.js
@@ -1,6 +1,6 @@
const selectors = {
popover: "[data-qa-anchor='popover-content']",
popoverTrigger: "[data-qa-anchor='popover-trigger']",
-}
+};
export default selectors;
diff --git a/packages/Stylers/helpers.js b/packages/Stylers/helpers.js
index 84caa85fc4..cc71aab13d 100644
--- a/packages/Stylers/helpers.js
+++ b/packages/Stylers/helpers.js
@@ -6,15 +6,20 @@ import tokens from "@paprika/tokens";
const fontScaleRatio = 1.125; // 8:9 - Major second
+// prettier-ignore
export const fontSize = (scale = 0) => `
- font-size: ${Math.round(Number.parseInt(tokens.fontSize.default, 10) * Math.pow(fontScaleRatio, scale))}px;
+ font-size: ${Math.round(
+ Number.parseInt(tokens.fontSize.default, 10) * (fontScaleRatio ** scale)
+ )}px;
`;
const leadingBase = 1.4;
const leadingScaleRatio = 1.125;
+// prettier-ignore
export const lineHeight = (scale = 0) => `
- line-height: ${Math.round(leadingBase * Math.pow(leadingScaleRatio, scale) * 10) / 10};
+ line-height: ${Math.round(leadingBase * (leadingScaleRatio ** scale) * 10) /
+ 10};
`;
//
diff --git a/packages/Stylers/includes.js b/packages/Stylers/includes.js
index 767eb58af6..1bb51aabe9 100644
--- a/packages/Stylers/includes.js
+++ b/packages/Stylers/includes.js
@@ -48,6 +48,10 @@ export const visuallyHidden = `
// Forms
+export const disabledPlaceholder = `
+color: ${tokens.color.blackLighten60};
+`;
+
export const placeholder = `
color: ${tokens.placeholder.color};
font-style: ${tokens.placeholder.fontStyle};
@@ -59,10 +63,6 @@ export const placeholder = `
`;
-export const disabledPlaceholder = `
- color: ${tokens.color.blackLighten60};
-`;
-
export const placeholders = `
.is-readonly &, &.is-readonly, &[readonly] {
color: ${tokens.color.black};
diff --git a/packages/Stylers/stories/stylers.stories.js b/packages/Stylers/stories/stylers.stories.js
index 5839d9e7e7..5dec833d83 100644
--- a/packages/Stylers/stories/stylers.stories.js
+++ b/packages/Stylers/stories/stylers.stories.js
@@ -46,7 +46,11 @@ storiesOf("Stylers", module).add("Include Examples", () => (
stylers.visuallyHidden
- 👻
+
+
+ 👻
+
+
stylers.placeholders
diff --git a/packages/TestingHelpers/windowHandles/index.js b/packages/TestingHelpers/windowHandles/index.js
index dad9262442..92750fc67c 100644
--- a/packages/TestingHelpers/windowHandles/index.js
+++ b/packages/TestingHelpers/windowHandles/index.js
@@ -7,12 +7,18 @@ class WindowHandles extends Component {
super(props);
this.element = props.story();
this.childProps = {
- ref: ref => (this.ref = ref),
- key: true
+ ref: ref => {
+ this.ref = ref;
+ },
+ key: true,
};
this.initialize();
}
+ isPropUndefinedOrDefault = key =>
+ !this.element.props[key] ||
+ (this.element.type.defaultProps && this.element.props[key] === this.element.type.defaultProps[key]);
+
initialize() {
this.windowProps = {
update: () => this.forceUpdate(),
@@ -20,12 +26,12 @@ class WindowHandles extends Component {
this.childProps.key = !this.childProps.key;
this.initialize();
this.forceUpdate();
- }
+ },
};
if (Object.prototype.hasOwnProperty.call(window, "Cypress")) {
window.Cypress.cy.windowHandles = {
- [this.element.type.name]: this.windowProps
+ [this.element.type.name]: this.windowProps,
};
} else {
window[this.element.type.name] = this.windowProps;
@@ -37,11 +43,6 @@ class WindowHandles extends Component {
}
}
- isPropUndefinedOrDefault = key =>
- !this.element.props[key] ||
- (this.element.type.defaultProps &&
- this.element.props[key] === this.element.type.defaultProps[key]);
-
render() {
return ;
}
@@ -49,7 +50,8 @@ class WindowHandles extends Component {
WindowHandles.propTypes = {
story: func.isRequired,
- config: object.isRequired
+ // eslint-disable-next-line
+ config: object.isRequired,
};
export class Input {
@@ -60,8 +62,7 @@ export class Input {
apply(wrapper, key) {
// eslint-disable-next-line
wrapper.childProps[key] =
- wrapper.isPropUndefinedOrDefault(key) &&
- typeof this.initialValue !== "undefined" // eslint-disable-line
+ wrapper.isPropUndefinedOrDefault(key) && typeof this.initialValue !== "undefined" // eslint-disable-line
? this.initialValue
: wrapper.element.props[key];
Object.defineProperty(wrapper.windowProps, key, {
@@ -69,7 +70,7 @@ export class Input {
set: value => {
wrapper.childProps[key] = value; // eslint-disable-line
wrapper.windowProps.update();
- }
+ },
});
}
}
@@ -93,6 +94,4 @@ export class Callback {
}
}
-export default config => story => (
-
-);
+export default config => story => ;
diff --git a/packages/Tokens/script.js b/packages/Tokens/script.js
index afdb928888..146503b54a 100644
--- a/packages/Tokens/script.js
+++ b/packages/Tokens/script.js
@@ -31,7 +31,7 @@ class DesignTokenBuilder {
}
writeToFile(filePath, string) {
- fs.writeFile(filePath, string, (err) => {
+ fs.writeFile(filePath, string, err => {
if (err) {
console.log(`Error saving [${filePath}]: ${err}`);
}
@@ -100,7 +100,7 @@ class DesignTokenBuilder {
let markdownString = "";
markdownString += "---\n";
markdownString += "isVisible: true\n";
- markdownString += "name: \"Tokens\"\n";
+ markdownString += 'name: "Tokens"\n';
markdownString += "---\n";
markdownString += "| Name | Value | Example\n";
markdownString += "|:--|:--|:--|\n";
@@ -124,6 +124,7 @@ class DesignTokenBuilder {
if (!this.yamlVariables[match]) {
this.outputError(`The variable [${match}] was referenced in the YAML file before it was defined`);
}
+ /* eslint-disable-next-line */
str = str.replace(re, this.yamlVariables[match]);
});
}
@@ -170,6 +171,7 @@ class DesignTokenBuilder {
// Make it camel case, remove hyphens, remove leading `$`
// E.g. convert `$black-lighten-10` to `blackLighten10`
cleanUpKey(str) {
+ /* eslint-disable-next-line */
str = str.replace(/-([a-z0-9])/gi, (s, group1) => group1.toUpperCase());
return str.charAt(0) === "$" ? str.substr(1) : str;
diff --git a/packages/Tokens/tokens.js b/packages/Tokens/tokens.js
index 22660050e8..5171af377e 100644
--- a/packages/Tokens/tokens.js
+++ b/packages/Tokens/tokens.js
@@ -1,141 +1,143 @@
const tokens = {
- "color": {
- "black": "#3f3d3c",
- "blackLighten10": "#575757",
- "blackLighten20": "#717171",
- "blackLighten30": "#8a8a8a",
- "blackLighten40": "#a4a4a4",
- "blackLighten50": "#bdbdbd",
- "blackLighten60": "#d7d7d7",
- "blackLighten70": "#f0f0f0",
- "blackLighten80": "#f7f7f7",
- "blackLighten90": "#fcfcfc",
- "blue": "#2666ab",
- "blueDarken10": "#0c437e",
- "blueLighten10": "#5987b8",
- "blueLighten20": "#85b3e5",
- "blueLighten30": "#94c6fd",
- "blueLighten40": "#cce1f5",
- "blueLighten50": "#e6f0fa",
- "creme": "#e6e3df",
- "cremeDarken30": "#989694",
- "cremeDarken20": "#b1b0ae",
- "cremeDarken10": "#cdcac5",
- "cremeLighten5": "#f1f0ed",
- "cremeLighten10": "#fcfcfc",
- "green": "#42996d",
- "greenDarken10": "#337554",
- "greenDarken20": "#23523a",
- "greenLighten10": "#5db187",
- "greenLighten20": "#80c1a0",
- "greenLighten30": "#a2d2ba",
- "greenLighten40": "#c4e3d3",
- "greenLighten50": "#e7f3ed",
- "offWhite": "#f0f0f0",
- "orange": "#de4d33",
- "orangeDarken10": "#bf371f",
- "orangeDarken20": "#932b18",
- "orangeDarken30": "#671e11",
- "orangeLighten10": "#e07764",
- "orangeLighten20": "#e99c8e",
- "orangeLighten30": "#f1c1b9",
- "orangeLighten40": "#fae7e3",
- "purple": "#53529f",
- "purpleDarken10": "#41417d",
- "purpleDarken20": "#302f5c",
- "purpleLighten10": "#7575af",
- "purpleLighten20": "#9695c2",
- "purpleLighten30": "#b6b5d5",
- "purpleLighten40": "#d6d6e7",
- "purpleLighten50": "#f6f6fa",
- "purpleLighten60": "#f6f6fa",
- "white": "#ffffff",
- "yellow": "#eaba51",
- "yellowDarken10": "#e5a823",
- "yellowDarken20": "#be8a17",
- "yellowDarken30": "#916911",
- "yellowDarken40": "#63480c",
- "yellowLighten10": "#eccb82",
- "yellowLighten20": "#f3ddae",
- "yellowLighten30": "#f9f0db",
- "chartColor01": "#cd3c44",
- "chartColor02": "#cb8133",
- "chartColor03": "#eaba51",
- "chartColor04": "#79a551",
- "chartColor05": "#299a7a",
- "chartColor06": "#8c6d68",
- "chartColor07": "#ec848f",
- "chartColor08": "#b9668f",
- "chartColor09": "#53529f",
- "chartColor10": "#2b82bf",
- "chartColor11": "#7ec0cc",
- "chartColor12": "#d1cbc2"
+ color: {
+ black: "#3f3d3c",
+ blackLighten10: "#575757",
+ blackLighten20: "#717171",
+ blackLighten30: "#8a8a8a",
+ blackLighten40: "#a4a4a4",
+ blackLighten50: "#bdbdbd",
+ blackLighten60: "#d7d7d7",
+ blackLighten70: "#f0f0f0",
+ blackLighten80: "#f7f7f7",
+ blackLighten90: "#fcfcfc",
+ blue: "#2666ab",
+ blueDarken10: "#0c437e",
+ blueLighten10: "#5987b8",
+ blueLighten20: "#85b3e5",
+ blueLighten30: "#94c6fd",
+ blueLighten40: "#cce1f5",
+ blueLighten50: "#e6f0fa",
+ creme: "#e6e3df",
+ cremeDarken30: "#989694",
+ cremeDarken20: "#b1b0ae",
+ cremeDarken10: "#cdcac5",
+ cremeLighten5: "#f1f0ed",
+ cremeLighten10: "#fcfcfc",
+ green: "#42996d",
+ greenDarken10: "#337554",
+ greenDarken20: "#23523a",
+ greenLighten10: "#5db187",
+ greenLighten20: "#80c1a0",
+ greenLighten30: "#a2d2ba",
+ greenLighten40: "#c4e3d3",
+ greenLighten50: "#e7f3ed",
+ offWhite: "#f0f0f0",
+ orange: "#de4d33",
+ orangeDarken10: "#bf371f",
+ orangeDarken20: "#932b18",
+ orangeDarken30: "#671e11",
+ orangeLighten10: "#e07764",
+ orangeLighten20: "#e99c8e",
+ orangeLighten30: "#f1c1b9",
+ orangeLighten40: "#fae7e3",
+ purple: "#53529f",
+ purpleDarken10: "#41417d",
+ purpleDarken20: "#302f5c",
+ purpleLighten10: "#7575af",
+ purpleLighten20: "#9695c2",
+ purpleLighten30: "#b6b5d5",
+ purpleLighten40: "#d6d6e7",
+ purpleLighten50: "#f6f6fa",
+ purpleLighten60: "#f6f6fa",
+ white: "#ffffff",
+ yellow: "#eaba51",
+ yellowDarken10: "#e5a823",
+ yellowDarken20: "#be8a17",
+ yellowDarken30: "#916911",
+ yellowDarken40: "#63480c",
+ yellowLighten10: "#eccb82",
+ yellowLighten20: "#f3ddae",
+ yellowLighten30: "#f9f0db",
+ chartColor01: "#cd3c44",
+ chartColor02: "#cb8133",
+ chartColor03: "#eaba51",
+ chartColor04: "#79a551",
+ chartColor05: "#299a7a",
+ chartColor06: "#8c6d68",
+ chartColor07: "#ec848f",
+ chartColor08: "#b9668f",
+ chartColor09: "#53529f",
+ chartColor10: "#2b82bf",
+ chartColor11: "#7ec0cc",
+ chartColor12: "#d1cbc2",
},
- "placeholder": {
- "color": "#8a8a8a",
- "fontStyle": "italic"
+ placeholder: {
+ color: "#8a8a8a",
+ fontStyle: "italic",
},
- "highlight": {
- "active": {
- "noBorder": {
- "boxShadow": "0 0 0 2px rgba(0,124,247,0.3)",
- "borderColor": "#2666ab"
+ highlight: {
+ active: {
+ noBorder: {
+ boxShadow: "0 0 0 2px rgba(0,124,247,0.3)",
+ borderColor: "#2666ab",
},
- "withBorder": {
- "boxShadow": "0 0 0 1px #2666ab,0 0 0 3px rgba(0,124,247,0.3)"
- }
- }
+ withBorder: {
+ boxShadow: "0 0 0 1px #2666ab,0 0 0 3px rgba(0,124,247,0.3)",
+ },
+ },
},
- "textColor": {
- "default": "#3f3d3c",
- "subtle": "#717171",
- "link": "#2666ab",
- "linkHover": "#2666ab",
- "icon": "#717171"
+ textColor: {
+ default: "#3f3d3c",
+ subtle: "#717171",
+ link: "#2666ab",
+ linkHover: "#2666ab",
+ icon: "#717171",
},
- "fontFamily": {
- "default": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif !default",
- "jp": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Hiragino Kaku Gothic Pro\", \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", \"MS PGothic\"",
- "kr": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Malgun Gothic\"",
- "zh": "\"Helvetica Neue\", Helvetica, Arial, sans-serif, 黑體-繁, \"Heiti TC\", 儷黑Pro, \"LiHei Pro\", PMingLiu, 宋体, SimSun"
+ fontFamily: {
+ default: '"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default',
+ jp:
+ '"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic"',
+ kr: '"Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic"',
+ zh:
+ '"Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu, 宋体, SimSun',
},
- "table": {
- "header": {
- "backgroundColor": "#edebe8"
+ table: {
+ header: {
+ backgroundColor: "#edebe8",
},
- "row": {
- "backgroundColor": "white"
+ row: {
+ backgroundColor: "white",
+ },
+ rowEven: {
+ backgroundColor: "#f5f5f5",
},
- "rowEven": {
- "backgroundColor": "#f5f5f5"
- }
},
- "modal": {
- "backdrop": {
- "backgroundColor": "rgba(63,61,60,0.5)"
- }
+ modal: {
+ backdrop: {
+ backgroundColor: "rgba(63,61,60,0.5)",
+ },
},
- "border": {
- "radius": "3px",
- "color": "#d7d7d7",
- "hoverColor": "#a4a4a4",
- "colorTransition": "border-color 0.2s"
+ border: {
+ radius: "3px",
+ color: "#d7d7d7",
+ hoverColor: "#a4a4a4",
+ colorTransition: "border-color 0.2s",
},
- "button": {
- "borderRadius": "4px"
+ button: {
+ borderRadius: "4px",
},
- "card": {
- "borderRadius": "6px"
+ card: {
+ borderRadius: "6px",
},
- "backgroundColor": {
- "level0": "#f7f7f7"
+ backgroundColor: {
+ level0: "#f7f7f7",
},
- "fontSize": {
- "default": "16px"
+ fontSize: {
+ default: "16px",
},
- "space": "8px",
- "spaceSm": "4px",
- "spaceLg": "12px",
- "shadow": "rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px"
+ space: "8px",
+ spaceSm: "4px",
+ spaceLg: "12px",
+ shadow: "rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px",
};
-export default tokens;
\ No newline at end of file
+export default tokens;
diff --git a/packages/Tokens/tokens.json b/packages/Tokens/tokens.json
index 9065973919..ffb92ad0ae 100644
--- a/packages/Tokens/tokens.json
+++ b/packages/Tokens/tokens.json
@@ -137,4 +137,4 @@
"spaceSm": "4px",
"spaceLg": "12px",
"shadow": "rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px"
-}
\ No newline at end of file
+}
diff --git a/packages/Tokens/tokens.md b/packages/Tokens/tokens.md
index 37dadee99b..5ea2769c46 100644
--- a/packages/Tokens/tokens.md
+++ b/packages/Tokens/tokens.md
@@ -2,107 +2,108 @@
isVisible: true
name: "Tokens"
---
-| Name | Value | Example
-|:--|:--|:--|
-| $color--black | #3f3d3c |
|
-| $color--black-lighten-10 | #575757 | |
-| $color--black-lighten-20 | #717171 | |
-| $color--black-lighten-30 | #8a8a8a | |
-| $color--black-lighten-40 | #a4a4a4 | |
-| $color--black-lighten-50 | #bdbdbd | |
-| $color--black-lighten-60 | #d7d7d7 | |
-| $color--black-lighten-70 | #f0f0f0 | |
-| $color--black-lighten-80 | #f7f7f7 | |
-| $color--black-lighten-90 | #fcfcfc | |
-| $color--blue | #2666ab | |
-| $color--blue-darken-10 | #0c437e | |
-| $color--blue-lighten-10 | #5987b8 | |
-| $color--blue-lighten-20 | #85b3e5 | |
-| $color--blue-lighten-30 | #94c6fd | |
-| $color--blue-lighten-40 | #cce1f5 | |
-| $color--blue-lighten-50 | #e6f0fa | |
-| $color--creme | #e6e3df | |
-| $color--creme-darken-30 | #989694 | |
-| $color--creme-darken-20 | #b1b0ae | |
-| $color--creme-darken-10 | #cdcac5 | |
-| $color--creme-lighten-5 | #f1f0ed | |
-| $color--creme-lighten-10 | #fcfcfc | |
-| $color--green | #42996d | |
-| $color--green-darken-10 | #337554 | |
-| $color--green-darken-20 | #23523a | |
-| $color--green-lighten-10 | #5db187 | |
-| $color--green-lighten-20 | #80c1a0 | |
-| $color--green-lighten-30 | #a2d2ba | |
-| $color--green-lighten-40 | #c4e3d3 | |
-| $color--green-lighten-50 | #e7f3ed | |
-| $color--off-white | #f0f0f0 | |
-| $color--orange | #de4d33 | |
-| $color--orange-darken-10 | #bf371f | |
-| $color--orange-darken-20 | #932b18 | |
-| $color--orange-darken-30 | #671e11 | |
-| $color--orange-lighten-10 | #e07764 | |
-| $color--orange-lighten-20 | #e99c8e | |
-| $color--orange-lighten-30 | #f1c1b9 | |
-| $color--orange-lighten-40 | #fae7e3 | |
-| $color--purple | #53529f | |
-| $color--purple-darken-10 | #41417d | |
-| $color--purple-darken-20 | #302f5c | |
-| $color--purple-lighten-10 | #7575af | |
-| $color--purple-lighten-20 | #9695c2 | |
-| $color--purple-lighten-30 | #b6b5d5 | |
-| $color--purple-lighten-40 | #d6d6e7 | |
-| $color--purple-lighten-50 | #f6f6fa | |
-| $color--purple-lighten-60 | #f6f6fa | |
-| $color--white | #ffffff | |
-| $color--yellow | #eaba51 | |
-| $color--yellow-darken-10 | #e5a823 | |
-| $color--yellow-darken-20 | #be8a17 | |
-| $color--yellow-darken-30 | #916911 | |
-| $color--yellow-darken-40 | #63480c | |
-| $color--yellow-lighten-10 | #eccb82 | |
-| $color--yellow-lighten-20 | #f3ddae | |
-| $color--yellow-lighten-30 | #f9f0db | |
-| $color--chart-color-01 | #cd3c44 | |
-| $color--chart-color-02 | #cb8133 | |
-| $color--chart-color-03 | #eaba51 | |
-| $color--chart-color-04 | #79a551 | |
-| $color--chart-color-05 | #299a7a | |
-| $color--chart-color-06 | #8c6d68 | |
-| $color--chart-color-07 | #ec848f | |
-| $color--chart-color-08 | #b9668f | |
-| $color--chart-color-09 | #53529f | |
-| $color--chart-color-10 | #2b82bf | |
-| $color--chart-color-11 | #7ec0cc | |
-| $color--chart-color-12 | #d1cbc2 | |
-| $placeholder--color | #8a8a8a | |
-| $placeholder--font-style | italic | |
-| $highlight--active--no-border--box-shadow | 0 0 0 2px rgba(0,124,247,0.3) | |
-| $highlight--active--no-border--border-color | #2666ab | |
-| $highlight--active--with-border--box-shadow | 0 0 0 1px #2666ab,0 0 0 3px rgba(0,124,247,0.3) | |
-| $text-color--default | #3f3d3c | |
-| $text-color--subtle | #717171 | |
-| $text-color--link | #2666ab | |
-| $text-color--link-hover | #2666ab | |
-| $text-color--icon | #717171 | |
-| $font-family--default | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default | |
-| $font-family--jp | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic" | |
-| $font-family--kr | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic" | |
-| $font-family--zh | "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu, 宋体, SimSun | |
-| $table--header--background-color | #edebe8 | |
-| $table--row--background-color | white | |
-| $table--row-even--background-color | #f5f5f5 | |
-| $modal--backdrop--background-color | rgba(63,61,60,0.5) | |
-| $border--radius | 3px | |
-| $border--color | #d7d7d7 | |
-| $border--hover-color | #a4a4a4 | |
-| $border--color-transition | border-color 0.2s | |
-| $button--border-radius | 4px | |
-| $card--border-radius | 6px | |
-| $background-color--level0 | #f7f7f7 | |
-| $font-size--default | 16px | |
-| $space | 8px | |
-| $space-sm | 4px | |
-| $space-lg | 12px | |
-| $shadow | rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px | |
-_Page auto-generated by paprika_
\ No newline at end of file
+| Name | Value | Example |
+| :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- |
+| \$color--black | #3f3d3c | |
+| \$color--black-lighten-10 | #575757 | |
+| \$color--black-lighten-20 | #717171 | |
+| \$color--black-lighten-30 | #8a8a8a | |
+| \$color--black-lighten-40 | #a4a4a4 | |
+| \$color--black-lighten-50 | #bdbdbd | |
+| \$color--black-lighten-60 | #d7d7d7 | |
+| \$color--black-lighten-70 | #f0f0f0 | |
+| \$color--black-lighten-80 | #f7f7f7 | |
+| \$color--black-lighten-90 | #fcfcfc | |
+| \$color--blue | #2666ab | |
+| \$color--blue-darken-10 | #0c437e | |
+| \$color--blue-lighten-10 | #5987b8 | |
+| \$color--blue-lighten-20 | #85b3e5 | |
+| \$color--blue-lighten-30 | #94c6fd | |
+| \$color--blue-lighten-40 | #cce1f5 | |
+| \$color--blue-lighten-50 | #e6f0fa | |
+| \$color--creme | #e6e3df | |
+| \$color--creme-darken-30 | #989694 | |
+| \$color--creme-darken-20 | #b1b0ae | |
+| \$color--creme-darken-10 | #cdcac5 | |
+| \$color--creme-lighten-5 | #f1f0ed | |
+| \$color--creme-lighten-10 | #fcfcfc | |
+| \$color--green | #42996d | |
+| \$color--green-darken-10 | #337554 | |
+| \$color--green-darken-20 | #23523a | |
+| \$color--green-lighten-10 | #5db187 | |
+| \$color--green-lighten-20 | #80c1a0 | |
+| \$color--green-lighten-30 | #a2d2ba | |
+| \$color--green-lighten-40 | #c4e3d3 | |
+| \$color--green-lighten-50 | #e7f3ed | |
+| \$color--off-white | #f0f0f0 | |
+| \$color--orange | #de4d33 | |
+| \$color--orange-darken-10 | #bf371f | |
+| \$color--orange-darken-20 | #932b18 | |
+| \$color--orange-darken-30 | #671e11 | |
+| \$color--orange-lighten-10 | #e07764 | |
+| \$color--orange-lighten-20 | #e99c8e | |
+| \$color--orange-lighten-30 | #f1c1b9 | |
+| \$color--orange-lighten-40 | #fae7e3 | |
+| \$color--purple | #53529f | |
+| \$color--purple-darken-10 | #41417d | |
+| \$color--purple-darken-20 | #302f5c | |
+| \$color--purple-lighten-10 | #7575af | |
+| \$color--purple-lighten-20 | #9695c2 | |
+| \$color--purple-lighten-30 | #b6b5d5 | |
+| \$color--purple-lighten-40 | #d6d6e7 | |
+| \$color--purple-lighten-50 | #f6f6fa | |
+| \$color--purple-lighten-60 | #f6f6fa | |
+| \$color--white | #ffffff | |
+| \$color--yellow | #eaba51 | |
+| \$color--yellow-darken-10 | #e5a823 | |
+| \$color--yellow-darken-20 | #be8a17 | |
+| \$color--yellow-darken-30 | #916911 | |
+| \$color--yellow-darken-40 | #63480c | |
+| \$color--yellow-lighten-10 | #eccb82 | |
+| \$color--yellow-lighten-20 | #f3ddae | |
+| \$color--yellow-lighten-30 | #f9f0db | |
+| \$color--chart-color-01 | #cd3c44 | |
+| \$color--chart-color-02 | #cb8133 | |
+| \$color--chart-color-03 | #eaba51 | |
+| \$color--chart-color-04 | #79a551 | |
+| \$color--chart-color-05 | #299a7a | |
+| \$color--chart-color-06 | #8c6d68 | |
+| \$color--chart-color-07 | #ec848f | |
+| \$color--chart-color-08 | #b9668f | |
+| \$color--chart-color-09 | #53529f | |
+| \$color--chart-color-10 | #2b82bf | |
+| \$color--chart-color-11 | #7ec0cc | |
+| \$color--chart-color-12 | #d1cbc2 | |
+| \$placeholder--color | #8a8a8a | |
+| \$placeholder--font-style | italic | |
+| \$highlight--active--no-border--box-shadow | 0 0 0 2px rgba(0,124,247,0.3) | |
+| \$highlight--active--no-border--border-color | #2666ab | |
+| \$highlight--active--with-border--box-shadow | 0 0 0 1px #2666ab,0 0 0 3px rgba(0,124,247,0.3) | |
+| \$text-color--default | #3f3d3c | |
+| \$text-color--subtle | #717171 | |
+| \$text-color--link | #2666ab | |
+| \$text-color--link-hover | #2666ab | |
+| \$text-color--icon | #717171 | |
+| \$font-family--default | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default | |
+| \$font-family--jp | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic" | |
+| \$font-family--kr | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic" | |
+| \$font-family--zh | "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑 Pro, "LiHei Pro", PMingLiu, 宋体, SimSun | |
+| \$table--header--background-color | #edebe8 | |
+| \$table--row--background-color | white | |
+| \$table--row-even--background-color | #f5f5f5 | |
+| \$modal--backdrop--background-color | rgba(63,61,60,0.5) | |
+| \$border--radius | 3px | |
+| \$border--color | #d7d7d7 | |
+| \$border--hover-color | #a4a4a4 | |
+| \$border--color-transition | border-color 0.2s | |
+| \$button--border-radius | 4px | |
+| \$card--border-radius | 6px | |
+| \$background-color--level0 | #f7f7f7 | |
+| \$font-size--default | 16px | |
+| \$space | 8px | |
+| \$space-sm | 4px | |
+| \$space-lg | 12px | |
+| \$shadow | rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px | |
+
+_Page auto-generated by paprika_
diff --git a/packages/Tokens/tokens.scss b/packages/Tokens/tokens.scss
index 1f89f23503..5c1630dd11 100644
--- a/packages/Tokens/tokens.scss
+++ b/packages/Tokens/tokens.scss
@@ -1,4 +1,3 @@
-
//color
$color--black: #3f3d3c;
$color--black-lighten-10: #575757;
@@ -71,26 +70,20 @@ $color--chart-color-10: #2b82bf;
$color--chart-color-11: #7ec0cc;
$color--chart-color-12: #d1cbc2;
-
//placeholder
$placeholder--color: #8a8a8a;
$placeholder--font-style: italic;
-
//highlight
//active
//no-border
-$highlight--active--no-border--box-shadow: 0 0 0 2px rgba(0,124,247,0.3);
+$highlight--active--no-border--box-shadow: 0 0 0 2px rgba(0, 124, 247, 0.3);
$highlight--active--no-border--border-color: #2666ab;
-
//with-border
-$highlight--active--with-border--box-shadow: 0 0 0 1px #2666ab,0 0 0 3px rgba(0,124,247,0.3);
-
-
-
+$highlight--active--with-border--box-shadow: 0 0 0 1px #2666ab, 0 0 0 3px rgba(0, 124, 247, 0.3);
//text-color
$text-color--default: #3f3d3c;
@@ -99,35 +92,29 @@ $text-color--link: #2666ab;
$text-color--link-hover: #2666ab;
$text-color--icon: #717171;
-
//font-family
$font-family--default: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$font-family--jp: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic";
+$font-family--jp: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro",
+ "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic";
$font-family--kr: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic";
-$font-family--zh: "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu, 宋体, SimSun;
-
+$font-family--zh: "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu,
+ 宋体, SimSun;
//table
//header
$table--header--background-color: #edebe8;
-
//row
$table--row--background-color: white;
-
//row-even
$table--row-even--background-color: #f5f5f5;
-
-
//modal
//backdrop
-$modal--backdrop--background-color: rgba(63,61,60,0.5);
-
-
+$modal--backdrop--background-color: rgba(63, 61, 60, 0.5);
//border
$border--radius: 3px;
@@ -135,23 +122,19 @@ $border--color: #d7d7d7;
$border--hover-color: #a4a4a4;
$border--color-transition: border-color 0.2s;
-
//button
$button--border-radius: 4px;
-
//card
$card--border-radius: 6px;
-
//background-color
$background-color--level0: #f7f7f7;
-
//font-size
$font-size--default: 16px;
$space: 8px;
$space-sm: 4px;
$space-lg: 12px;
-$shadow: rgba(0,0,0,0.07) 0px 1px 5px,rgba(0,0,0,0.1) 0px 7px 17px;
+$shadow: rgba(0, 0, 0, 0.07) 0px 1px 5px, rgba(0, 0, 0, 0.1) 0px 7px 17px;
diff --git a/yarn.lock b/yarn.lock
index ee2c4bc6f4..6bca1f7588 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2859,6 +2859,11 @@ ci-info@^1.0.0, ci-info@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+ci-info@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+ integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -3256,7 +3261,7 @@ cosmiconfig@^4.0.0:
parse-json "^4.0.0"
require-from-string "^2.0.1"
-cosmiconfig@^5.0.2, cosmiconfig@^5.0.5:
+cosmiconfig@^5.0.2, cosmiconfig@^5.0.5, cosmiconfig@^5.0.7:
version "5.0.7"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04"
dependencies:
@@ -4075,9 +4080,10 @@ eslint-config-airbnb@^17.1.0:
object.assign "^4.1.0"
object.entries "^1.0.4"
-eslint-config-prettier@^3.0.1:
- version "3.4.0"
- resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-3.4.0.tgz#97dd5bf33d4d85862fdadf2ea89b4d6cebf3ba4f"
+eslint-config-prettier@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-4.0.0.tgz#16cedeea0a56e74de60dcbbe3be0ab2c645405b9"
+ integrity sha512-kWuiJxzV5NwOwZcpyozTzDT5KJhBw292bbYro9Is7BWnbNMg15Gmpluc1CTetiCatF8DRkNvgPAOaSyg+bYr3g==
dependencies:
get-stdin "^6.0.0"
@@ -4095,6 +4101,13 @@ eslint-module-utils@^2.2.0:
debug "^2.6.8"
pkg-dir "^1.0.0"
+eslint-plugin-cypress@^2.2.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.2.0.tgz#31f23bec82eb4078711b374af66af3daa9fdbd2e"
+ integrity sha512-Xk1DMXPfnSChpNhQPw8E9lfRUse9nSyPccxMbKlOuwCmTm2fhyNQWfulDr9DDgUL1Xetdub5lnYQkKniHjNbYw==
+ dependencies:
+ globals "^11.0.1"
+
eslint-plugin-import@^2.14.0:
version "2.14.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.14.0.tgz#6b17626d2e3e6ad52cfce8807a845d15e22111a8"
@@ -5021,7 +5034,7 @@ global@^4.3.2:
min-document "^2.19.0"
process "~0.5.1"
-globals@^11.1.0, globals@^11.7.0:
+globals@^11.0.1, globals@^11.1.0, globals@^11.7.0:
version "11.10.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
@@ -5318,6 +5331,22 @@ humanize-ms@^1.2.1:
dependencies:
ms "^2.0.0"
+husky@^1.3.1:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/husky/-/husky-1.3.1.tgz#26823e399300388ca2afff11cfa8a86b0033fae0"
+ integrity sha512-86U6sVVVf4b5NYSZ0yvv88dRgBSSXXmHaiq5pP4KDj5JVzdwKgBjEtUPOm8hcoytezFwbU+7gotXNhpHdystlg==
+ dependencies:
+ cosmiconfig "^5.0.7"
+ execa "^1.0.0"
+ find-up "^3.0.0"
+ get-stdin "^6.0.0"
+ is-ci "^2.0.0"
+ pkg-dir "^3.0.0"
+ please-upgrade-node "^3.1.1"
+ read-pkg "^4.0.1"
+ run-node "^1.0.0"
+ slash "^2.0.0"
+
hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
@@ -5594,6 +5623,13 @@ is-ci@^1.0.10:
dependencies:
ci-info "^1.5.0"
+is-ci@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+ integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+ dependencies:
+ ci-info "^2.0.0"
+
is-data-descriptor@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -7955,6 +7991,20 @@ pkg-dir@^2.0.0:
dependencies:
find-up "^2.1.0"
+pkg-dir@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+ integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+ dependencies:
+ find-up "^3.0.0"
+
+please-upgrade-node@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz#ed320051dfcc5024fae696712c8288993595e8ac"
+ integrity sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==
+ dependencies:
+ semver-compare "^1.0.0"
+
pluralize@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -8242,6 +8292,11 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+prettier@^1.16.3:
+ version "1.16.3"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
+ integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
+
pretty-error@^2.0.2:
version "2.1.1"
resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -8771,6 +8826,15 @@ read-pkg@^3.0.0:
normalize-package-data "^2.3.2"
path-type "^3.0.0"
+read-pkg@^4.0.1:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+ integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
+ dependencies:
+ normalize-package-data "^2.3.2"
+ parse-json "^4.0.0"
+ pify "^3.0.0"
+
read@1, read@~1.0.1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
@@ -9137,6 +9201,11 @@ run-async@^2.2.0:
dependencies:
is-promise "^2.1.0"
+run-node@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
+ integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
+
run-queue@^1.0.0, run-queue@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -9243,6 +9312,11 @@ scss-tokenizer@^0.2.3:
js-base64 "^2.1.8"
source-map "^0.4.2"
+semver-compare@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+ integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
@@ -9392,6 +9466,11 @@ slash@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+slash@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+ integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
slice-ansi@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"