copy(props.token)}
11 | css={{
12 | cursor: "pointer"
13 | }}
14 | {...props}
15 | />
16 | );
17 | }
18 |
19 | Swatch.propTypes = {
20 | ...tokenPropType,
21 | ...valuePropType
22 | };
23 |
24 | export default Swatch;
25 |
--------------------------------------------------------------------------------
/src/components/PaletteSwatch.md:
--------------------------------------------------------------------------------
1 | Palette swatch renders all color tokens from a palette as defined in [System UI theme specification](https://system-ui.com/theme/)
2 |
3 | It supports arrays
4 |
5 | ```jsx harmony
6 | const palette = [
7 | "#FFCDD2",
8 | "#EF9A9A",
9 | "#E57373",
10 | "#EF5350",
11 | "#F44336",
12 | "#E53935",
13 | "#D32F2F",
14 | "#C62828",
15 | "#B71C1C"
16 | ];
17 |
;
18 | ```
19 |
20 | as well as object notation:
21 |
22 | ```jsx harmony
23 | import theme from "../theme";
24 |
25 |
;
26 | ```
27 |
--------------------------------------------------------------------------------
/src/components/PaletteSwatch.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { Swatches, ColorSwatch } from "../index";
4 | import { tokenPropType, valuePropType } from "../propTypes";
5 |
6 | export const PaletteSwatch = ({ token, value }) => (
7 |
8 | {(key, value) => (
9 |
14 | )}
15 |
16 | );
17 |
18 | PaletteSwatch.propTypes = {
19 | ...tokenPropType,
20 | ...valuePropType
21 | };
22 |
23 | /** @component */
24 | export default PaletteSwatch;
25 |
--------------------------------------------------------------------------------
/src/examples/Text.js:
--------------------------------------------------------------------------------
1 | import styled from "@emotion/styled";
2 | import { css } from "@styled-system/css";
3 | import { typography, variant, compose } from "styled-system";
4 |
5 | export const textStyles = {
6 | body: {
7 | fontFamily: "body",
8 | fontSize: "md",
9 | fontWeight: "normal",
10 | color: "text"
11 | },
12 | heading: {
13 | fontFamily: "heading",
14 | fontSize: "xl",
15 | fontWeight: "bold",
16 | color: "secondary"
17 | }
18 | };
19 |
20 | const Text = styled.p(
21 | css({
22 | m: 0,
23 | lineHeight: 1.5
24 | }),
25 | compose(
26 | variant({
27 | prop: "textStyle",
28 | variants: textStyles
29 | }),
30 | typography
31 | )
32 | );
33 |
34 | export default Text;
35 |
--------------------------------------------------------------------------------
/src/components/SpacingSwatch.jsx:
--------------------------------------------------------------------------------
1 | /* @jsx jsx */
2 | import React from "react";
3 | import { jsx } from "theme-ui";
4 | import { SwatchValue } from "../";
5 | import { valuePropType } from "../propTypes";
6 |
7 | const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
8 | return (
9 |
19 |
20 | {value}
21 |
22 |
23 | );
24 | };
25 |
26 | SpacingSwatch.propTypes = {
27 | ...valuePropType
28 | };
29 |
30 | /** @component */
31 | export default SpacingSwatch;
32 |
--------------------------------------------------------------------------------
/src/components/TextStyleSwatch.jsx:
--------------------------------------------------------------------------------
1 | /* @jsx jsx */
2 | import { jsx } from "theme-ui";
3 | import React from "react";
4 | import { valuePropType } from "../propTypes";
5 |
6 | /**
7 | * A swatch to render a `textStyle` variant. Provide the sample text as `children`.
8 | * @param value
9 | * @param componentCSS
10 | * @param rest
11 | * @return React.Element
12 | * @constructor
13 | */
14 | const TextStyleSwatch = ({ value, css: componentCSS, ...rest }) => (
15 |
24 | );
25 |
26 | TextStyleSwatch.propTypes = {
27 | ...valuePropType
28 | };
29 |
30 | /** @component */
31 | export default TextStyleSwatch;
32 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Swatches } from "./components/Swatches";
2 | export { default as Swatch } from "./components/Swatch";
3 | export { default as SwatchToken } from "./components/SwatchToken";
4 | export { default as SwatchValue } from "./components/SwatchValue";
5 | export { default as ColorSwatch } from "./components/ColorSwatch";
6 | export { default as TextStyleSwatch } from "./components/TextStyleSwatch";
7 | export { default as PaletteSwatch } from "./components/PaletteSwatch";
8 | export { default as SpacingSwatch } from "./components/SpacingSwatch";
9 | export { default as Colors } from "./components/Colors";
10 | export { default as Typography } from "./components/Typography";
11 | export { default as Spacing } from "./components/Spacing";
12 |
--------------------------------------------------------------------------------
/src/examples/Readme.md:
--------------------------------------------------------------------------------
1 | ### [Component-driven Design Systems Workshop](https://github.com/component-driven/component-driven-development) Design System
2 |
3 | ```jsx harmony
4 | import { Grid } from "theme-ui";
5 | import theme from "./cdds";
6 | import { Colors, Spacing, Typography } from "../";
7 |
8 |
9 |
10 |
11 |
12 | ;
13 | ```
14 |
15 | ### GitHub Primer Design System
16 |
17 | ```jsx harmony
18 | import { Grid } from "theme-ui";
19 | import theme from "./primer";
20 | import { Colors, Spacing, Typography } from "../";
21 |
22 |
23 |
24 |
25 |
26 | ;
27 | ```
28 |
--------------------------------------------------------------------------------
/src/components/Spacing.jsx:
--------------------------------------------------------------------------------
1 | /* @jsx jsx */
2 | import React from "react";
3 | import { Grid, jsx, ThemeProvider } from "theme-ui";
4 | import { SpacingSwatch, Swatch, Swatches, SwatchToken } from "../index";
5 |
6 | export default function Spacing({ theme }) {
7 | return (
8 |
9 |
10 |
11 | {(token, value) => (
12 |
13 |
17 | {token}
18 |
19 |
20 |
21 | )}
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/ColorSwatch.jsx:
--------------------------------------------------------------------------------
1 | /* @jsx jsx */
2 | import { jsx } from "theme-ui";
3 | import React from "react";
4 | import { readableColor } from "polished";
5 | import { Swatch, SwatchToken, SwatchValue } from "../";
6 | import { tokenPropType, valuePropType } from "../propTypes";
7 |
8 | export const ColorSwatch = ({ value, token }) => {
9 | const color = readableColor(value, "black", "white");
10 | return (
11 |
12 |
20 | {token}
21 | {value}
22 |
23 |
24 | );
25 | };
26 |
27 | ColorSwatch.propTypes = {
28 | ...tokenPropType,
29 | ...valuePropType
30 | };
31 |
32 | /** @component */
33 | export default ColorSwatch;
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 component-driven
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/Colors.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Grid, ThemeProvider } from "theme-ui";
3 | import { omitBy, pickBy, isString } from "lodash";
4 | import { Swatches, ColorSwatch, PaletteSwatch } from "../index";
5 |
6 | export default function Colors({ theme }) {
7 | const gap = 2;
8 | const colors = pickBy(theme.colors, isString);
9 | const palettes = omitBy(theme.colors, isString);
10 | return (
11 |
12 |
13 |
14 | {(token, value) => (
15 |
22 |
23 |
24 | )}
25 |
26 |
32 |
33 | {(token, value) => (
34 |
35 | )}
36 |
37 |
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/Typography.jsx:
--------------------------------------------------------------------------------
1 | /* @jsx jsx */
2 | import { Grid, jsx, ThemeProvider } from "theme-ui";
3 | import React from "react";
4 | import { Swatch, Swatches, SwatchToken, TextStyleSwatch } from "../";
5 |
6 | /**
7 | * Typography component showcases all available text styles defined in `theme.textStyles`
8 | * object of [styled-system theme](https://styled-system.com/table#variants).
9 | * @param theme
10 | * @return React.Element
11 | * @constructor
12 | */
13 | export default function Typography({ theme }) {
14 | return (
15 |
16 |
17 |
18 | {(token, value) => (
19 |
20 |
21 |
27 | {token}
28 |
29 |
30 | The quick brown fox jumps over the lazy dog
31 |
32 |
33 |
34 | )}
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 | Changelog.md
63 |
64 | # styleguide
65 |
66 | docs/
67 |
68 | # Dist
69 |
70 | dist/
71 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import { modularScale } from "polished";
2 |
3 | const scale = value => modularScale(value, "1rem", "goldenSection");
4 |
5 | const palette = {
6 | slate: {
7 | darker: "#11161A",
8 | dark: "#1F2932",
9 | base: "#2E3D49",
10 | light: "#6D7780",
11 | lighter: "#B4B9BD",
12 | lightest: "#F7F7F8"
13 | }
14 | };
15 | export default {
16 | fontSizes: {
17 | xl: scale(3),
18 | lg: scale(1),
19 | md: scale(0),
20 | sm: scale(-0.5),
21 | xs: scale(-0.75)
22 | },
23 | fonts: {
24 | body: "system-ui, sans-serif",
25 | heading: '"Avenir Next", sans-serif',
26 | monospace: "Menlo, monospace"
27 | },
28 | textStyles: {
29 | body: {
30 | fontFamily: "body",
31 | fontSize: "md",
32 | color: "text"
33 | },
34 | heading: {
35 | fontSize: "xl",
36 | fontFamily: "heading",
37 | color: "secondary"
38 | }
39 | },
40 | space: [
41 | 0,
42 | "0.125rem", // 2px
43 | "0.25rem", // 4px
44 | "0.5rem", // 8px
45 | "1rem", // 16px
46 | "2rem", // 32px
47 | "4rem", // 64px
48 | "8rem", // 128px
49 | "16rem" // 256px
50 | ],
51 | colors: {
52 | ...palette,
53 | text: palette.slate.base,
54 | background: palette.slate.lightest,
55 | primary: "#E53935",
56 | secondary: palette.slate.light,
57 | muted: palette.slate.lighter
58 | }
59 | };
60 |
--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const pkg = require("./package.json");
4 |
5 | module.exports = {
6 | title: pkg.name,
7 | serverPort: 6061,
8 | styleguideDir: path.join(__dirname, "docs"),
9 | getComponentPathLine(componentPath) {
10 | const name = path.basename(componentPath, ".jsx");
11 | return `import { ${name} } from '${pkg.name}';`;
12 | },
13 | skipComponentsWithoutExample: true,
14 | styleguideComponents: {
15 | Wrapper: path.join(__dirname, "styleguide", "Provider.jsx")
16 | },
17 | sections: [
18 | {
19 | name: "Introduction",
20 | content: path.join(__dirname, "Readme.md")
21 | },
22 | {
23 | name: "Components",
24 | components: "src/components/*.jsx"
25 | },
26 | {
27 | name: "Examples",
28 | content: path.join(__dirname, "src/examples/Readme.md")
29 | }
30 | ],
31 | ribbon: {
32 | url: "https://github.com/component-driven/react-design-tokens"
33 | },
34 | updateExample(props, exampleFilePath) {
35 | // props.settings are passed by any fenced code block, in this case
36 | const { settings, lang } = props;
37 | // "../mySourceCode.js"
38 | if (typeof settings.file === "string") {
39 | // "absolute path to mySourceCode.js"
40 | const filepath = path.resolve(exampleFilePath, settings.file);
41 | // displays the block as static code
42 | settings.static = true;
43 | // no longer needed
44 | delete settings.file;
45 | return {
46 | content: fs.readFileSync(filepath, "utf8"),
47 | settings,
48 | lang
49 | };
50 | }
51 | return props;
52 | }
53 | };
54 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@component-driven/react-design-tokens",
3 | "version": "0.0.0-development",
4 | "description": "React components to document design tokens in a styleguide",
5 | "main": "dist/index.js",
6 | "files": [
7 | "dist"
8 | ],
9 | "scripts": {
10 | "start": "npm run styleguide",
11 | "test": "echo \"No test specified\" && exit 0",
12 | "styleguide": "styleguidist server",
13 | "styleguide:build": "styleguidist build",
14 | "build": "babel --delete-dir-on-start --ignore '**/*.spec.js' --env-name cjs -d dist/ src/",
15 | "prepublishOnly": "npm run build"
16 | },
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/component-driven/react-design-tokens.git"
20 | },
21 | "publishConfig": {
22 | "access": "public"
23 | },
24 | "keywords": [],
25 | "author": "Andrey Okonetchnikov
",
26 | "license": "MIT",
27 | "bugs": {
28 | "url": "https://github.com/component-driven/react-design-tokens/issues"
29 | },
30 | "homepage": "https://github.com/component-driven/react-design-tokens#readme",
31 | "peerDependencies": {
32 | "react": "^16.8.0",
33 | "react-dom": "^16.8.0"
34 | },
35 | "dependencies": {
36 | "clipboard-copy": "^3.0.0",
37 | "lodash": "^4.17.11",
38 | "polished": "^3.4.0",
39 | "prop-types": "^15.7.2",
40 | "react": "^16.8.6",
41 | "react-dom": "^16.8.6",
42 | "theme-ui": "^0.3.1"
43 | },
44 | "devDependencies": {
45 | "@babel/cli": "^7.4.4",
46 | "@babel/core": "^7.4.5",
47 | "@babel/preset-env": "^7.4.5",
48 | "@babel/preset-react": "^7.0.0",
49 | "@babel/preset-typescript": "^7.3.3",
50 | "@emotion/babel-preset-css-prop": "^10.0.9",
51 | "@emotion/styled": "^10.0.11",
52 | "babel-loader": "^8.0.6",
53 | "husky": "^2.4.0",
54 | "lint-staged": "^8.2.0",
55 | "prettier": "^1.18.0",
56 | "primer-colors": "^1.0.1",
57 | "primer-spacing": "^1.0.2",
58 | "primer-typography": "^1.0.1",
59 | "react-styleguidist": "^9.1.4",
60 | "webpack": "^4.33.0"
61 | },
62 | "husky": {
63 | "hooks": {
64 | "pre-commit": "lint-staged"
65 | }
66 | },
67 | "lint-staged": {
68 | "*.{js,jsx,ts,tsx,md}": [
69 | "prettier --write",
70 | "git add"
71 | ]
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/examples/cdds.js:
--------------------------------------------------------------------------------
1 | import { modularScale } from "polished";
2 |
3 | const scale = value => modularScale(value, "1rem", "goldenSection");
4 |
5 | const fontSizes = {
6 | xl: scale(3),
7 | lg: scale(1),
8 | md: scale(0),
9 | sm: scale(-0.5),
10 | xs: scale(-0.75)
11 | };
12 |
13 | const palette = {
14 | grey: [
15 | "rgb(255, 255, 255)",
16 | "rgb(250, 250, 250)",
17 | "rgb(246, 246, 246)",
18 | "rgb(225, 225, 225)",
19 | "rgb(187, 187, 187)",
20 | "rgb(126, 126, 126)",
21 | "rgb(51, 51, 51)"
22 | ],
23 | purple: [
24 | "rgb(255, 230, 242)",
25 | "rgb(251, 209, 234)",
26 | "rgb(248, 188, 229)",
27 | "rgb(231, 143, 222)",
28 | "rgb(189, 96, 200)",
29 | "rgb(120, 51, 150)",
30 | "rgb(52, 18, 90)"
31 | ]
32 | };
33 |
34 | let invertedPalette = {};
35 |
36 | Object.keys(palette).forEach(key => {
37 | invertedPalette[key] = [...palette[key]].reverse();
38 | });
39 |
40 | function getColors(palette) {
41 | return {
42 | ...palette,
43 | bg: palette.grey[0],
44 | base: palette.grey[6],
45 | primary: palette.purple[5],
46 | secondary: palette.grey[5],
47 | muted: palette.grey[2],
48 | hover: palette.purple[2],
49 | focus: palette.purple[1],
50 | error: "#d0453e",
51 | rating: "#f8c124"
52 | };
53 | }
54 |
55 | const theme = {
56 | fonts: {
57 | body: "Helvetica Neue, Helvetica, Arial, sans-serif",
58 | heading: "Helvetica Neue, Helvetica, Arial, sans-serif",
59 | monospace: "Menlo, monospace"
60 | },
61 | fontSizes: {
62 | base: fontSizes.md,
63 | ...fontSizes
64 | },
65 | fontWeights: {
66 | normal: 400,
67 | bold: 700
68 | },
69 | headingFontWeights: {
70 | xl: 400,
71 | l: 400,
72 | m: 700
73 | },
74 | lineHeights: {
75 | base: 1.5,
76 | heading: 1.1
77 | },
78 | palette,
79 | colors: getColors(palette),
80 | borders: {
81 | none: "none",
82 | thin: "1px solid"
83 | },
84 | radii: {
85 | base: "0.15em"
86 | },
87 | space: [
88 | 0,
89 | "0.125rem", // 2px
90 | "0.25rem", // 4px
91 | "0.5rem", // 8px
92 | "1rem", // 16px
93 | "2rem", // 32px
94 | "4rem", // 64px
95 | "8rem", // 128px
96 | "16rem" // 256px
97 | ],
98 | textStyles: {
99 | base: {},
100 | secondary: {
101 | color: palette.grey[5]
102 | },
103 | tertiary: {
104 | color: palette.grey[5],
105 | fontSize: fontSizes.s
106 | },
107 | error: {
108 | color: getColors(palette).error
109 | }
110 | }
111 | };
112 |
113 | export default theme;
114 |
115 | export const inverted = {
116 | ...theme,
117 | colors: {
118 | ...getColors(invertedPalette),
119 | primary: invertedPalette.grey[4],
120 | hover: invertedPalette.grey[6],
121 | focus: invertedPalette.grey[1]
122 | }
123 | };
124 |
--------------------------------------------------------------------------------