Add color section to styleguide

packages/venia-styleguide/src/components/Palette/Hue.css

@@ -0,0 +1,8 @@
+.root {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, 12rem);
+    justify-content: center;
+    max-width: 52.5rem;
+    min-width: 12rem;
+}

packages/venia-styleguide/src/components/Palette/Hue.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Tone from './Tone';
+import classes from './Hue.css';
+
+const Hue = props => {
+    const { hue, tones } = props;
+
+    const toneElements = Array.from(tones, ([tone, value]) => (
+        <Tone key={tone} hue={hue} tone={tone} value={value} />
+    ));
+
+    return <div className={classes.root}>{toneElements}</div>;
+};
+
+export default Hue;

packages/venia-styleguide/src/components/Palette/Palette.css

@@ -0,0 +1,9 @@
+.root {
+    background-color: rgb(var(--venia-global-color-gray-100));
+    border-radius: 4px;
+    display: grid;
+    gap: 4.5rem;
+    justify-content: center;
+    margin-bottom: 5rem;
+    padding: 3rem 1.5rem;
+}

packages/venia-styleguide/src/components/Palette/Palette.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Hue from './Hue';
+import classes from './Palette.css';
+
+const Palette = props => {
+    const { colors } = props;
+    const { hues } = colors;
+
+    const hueElements = Array.from(hues, ([hue, tones]) => (
+        <Hue key={hue} hue={hue} tones={tones} />
+    ));
+
+    return <figure className={classes.root}>{hueElements}</figure>;
+};
+
+export default Palette;

packages/venia-styleguide/src/components/Palette/Tone.css

@@ -0,0 +1,31 @@
+.root {
+    composes: detail from '../../styles/typography.css';
+    align-content: start;
+    background-color: rgb(var(--tone));
+    border: 1px solid rgb(var(--venia-global-color-gray-300));
+    border-radius: 4px;
+    display: grid;
+    font-weight: var(--venia-global-text-fontWeight-bold);
+    height: 6.75rem;
+    padding: 1rem;
+    text-transform: uppercase;
+    width: 12rem;
+}
+
+.root--balance-light {
+    composes: root;
+}
+
+.root--balance-dark {
+    composes: root;
+    color: white;
+}
+
+.label {
+    font-size: var(--venia-typography-detail-S-fontSize);
+    letter-spacing: 0.5px;
+}
+
+.value {
+    font-size: var(--venia-typography-detail-L-fontSize);
+}

packages/venia-styleguide/src/components/Palette/Tone.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+
+import { getHex, getLightness } from '../../util/contrastUtils';
+import finalizeClasses from '../../util/finalizeClasses';
+import classes from './Tone.css';
+
+const WHITE = getLightness([255, 255, 255]);
+
+const Tone = props => {
+    const { hue, tone, value } = props;
+    const style = { '--tone': value };
+
+    // determine whether a value is light or dark
+    const channels = useMemo(() => value.split(' '), [value]);
+    const lightness = getLightness(channels);
+    const ratio = WHITE / (lightness + 0.05);
+    const balance = ratio < 3 ? 'light' : 'dark';
+
+    const finalClasses = finalizeClasses(classes, { balance });
+    const hex = channels.map(channel => getHex(channel)).join('');
+
+    return (
+        <div className={finalClasses.get('root')} style={style}>
+            <span className={classes.label}>{`${hue} ${tone}`}</span>
+            <span className={classes.value}>{`#${hex}`}</span>
+        </div>
+    );
+};
+
+export default Tone;

packages/venia-styleguide/src/components/Palette/index.js

@@ -0,0 +1 @@
+export { default } from './Palette';

packages/venia-styleguide/src/components/ThematicBreak/ThematicBreak.css

@@ -1,5 +1,5 @@
 .root {
     border: none;
-    height: 1rem;
+    height: 2rem;
     margin: 1rem;
 }

packages/venia-styleguide/src/pages/color/Color.md

@@ -0,0 +1,33 @@
+import Article from "../../components/Article"
+import Section from "../../components/Section"
+import TableOfContents from "../../components/TableOfContents"
+
+import BrandColors from "./sections/BrandColors"
+import Grays from "./sections/Grays"
+import SemanticColors from "./sections/SemanticColors"
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
+quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget,
+laoreet vel tortor. Pellentesque commodo tellus nibh, vitae
+varius lectus pharetra in. Aliquam quis nisi ligula. Proin sit
+amet mauris ac lacus efficitur varius eget in urna. Ut sagittis
+feugiat ex et dictum. Nam ut tempor urna, at dapibus erat.
+Aenean ac dui a tellus venenatis accumsan.
+
+***
+
+<Section title="Table of contents">
+    <TableOfContents />
+</Section>
+<Section title="Grays">
+    <Grays />
+</Section>
+<Section title="Brand colors">
+    <BrandColors />
+</Section>
+<Section title="Semantic colors">
+    <SemanticColors />
+</Section>
+
+export const title = "Color"
+export default Article

packages/venia-styleguide/src/pages/color/index.js

@@ -1,5 +1 @@
-import React from 'react';
-
-const Page = () => <span>Color</span>;
-
-export default Page;
+export { default } from './Color';

packages/venia-styleguide/src/pages/color/sections/BrandColors/data.yml

@@ -0,0 +1,13 @@
+---
+
+hues: !!pairs
+- teal: !!pairs
+  - 400: "22 155 162"
+  - 500: "13 143 150"
+  - 600: "6 131 137"
+  - 700: "0 115 120"
+- sea: !!pairs
+  - 400: 224 246 242
+  - 500: 215 244 239
+  - 600: 206 243 236
+  - 700: 197 242 234

packages/venia-styleguide/src/pages/color/sections/BrandColors/index.md

@@ -0,0 +1,10 @@
+import Columns from "../../../../components/Columns"
+import Palette from "../../../../components/Palette"
+
+import colors from "./data.yml"
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor. Pellentesque commodo tellus nibh, vitae varius lectus pharetra in.
+
+***
+
+<Palette colors={colors} />

packages/venia-styleguide/src/pages/color/sections/Grays/Methodology.md

@@ -0,0 +1,3 @@
+#### Generating the grays
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor. Pellentesque commodo tellus nibh, vitae varius lectus pharetra in.

packages/venia-styleguide/src/pages/color/sections/Grays/Usage.md

@@ -0,0 +1,3 @@
+#### Using the gray system
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor. Pellentesque commodo tellus nibh, vitae varius lectus pharetra in.

packages/venia-styleguide/src/pages/color/sections/Grays/data.yml

@@ -0,0 +1,15 @@
+---
+
+hues: !!pairs
+- gray: !!pairs
+  - 50: "255 255 255"
+  - 75: "250 250 250"
+  - 100: "245 245 245"
+  - 200: "235 235 235"
+  - 300: "224 224 224"
+  - 400: "204 204 204"
+  - 500: "163 163 163"
+  - 600: "122 122 122"
+  - 700: "82 82 82"
+  - 800: "61 61 61"
+  - 900: "31 31 31"

packages/venia-styleguide/src/pages/color/sections/Grays/index.md

@@ -0,0 +1,18 @@
+import Columns from "../../../../components/Columns"
+import Palette from "../../../../components/Palette"
+
+import Methodology from "./Methodology"
+import Usage from "./Usage"
+import colors from "./data.yml"
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor. Pellentesque commodo tellus nibh, vitae varius lectus pharetra in.
+
+***
+
+<Palette colors={colors} />
+<Columns>
+  <Usage />
+</Columns>
+<Columns>
+  <Methodology />
+</Columns>

packages/venia-styleguide/src/pages/color/sections/SemanticColors/data.yml

@@ -0,0 +1,8 @@
+---
+
+hues: !!pairs
+- red: !!pairs
+  - 400: "197 27 72"
+  - 500: "188 16 62"
+  - 600: "176 7 52"
+  - 700: "163 0 44"

packages/venia-styleguide/src/pages/color/sections/SemanticColors/index.md

@@ -0,0 +1,10 @@
+import Columns from "../../../../components/Columns"
+import Palette from "../../../../components/Palette"
+
+import colors from "./data.yml"
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor. Pellentesque commodo tellus nibh, vitae varius lectus pharetra in.
+
+***
+
+<Palette colors={colors} />

packages/venia-styleguide/src/pages/typography/Typography.md

@@ -1,5 +1,4 @@
 import Article from "../../components/Article"
-import Paragraph from "../../components/Paragraph"
 import Section from "../../components/Section"
 import TableOfContents from "../../components/TableOfContents"
 

packages/venia-styleguide/src/styles/reset.css

@@ -5,15 +5,15 @@
 }
 
 :global a {
-    color: rgb(var(--venia-brand-color-1-400));
+    color: rgb(var(--venia-brand-color-1-700));
     cursor: pointer;
     outline: none;
     text-decoration: none;
 }
 
 :global body {
-    background-color: white;
-    color: rgb(75 75 75);
+    background-color: rgb(var(--venia-global-color-gray-50));
+    color: rgb(var(--venia-global-color-gray-900));
     font-family: var(--venia-global-text-fontFamily-sansSerif);
     line-height: var(--venia-global-text-lineHeight-100);
     -moz-osx-font-smoothing: grayscale;

packages/venia-styleguide/src/styles/tokens.css

@@ -1,7 +1,30 @@
 /* global tokens */
 :global :root {
     /* color */
-    --venia-global-color-teal-400: 0 115 120;
+    --venia-global-color-gray-50: 255 255 255; /*   ffffff  100%   1.09 */
+    --venia-global-color-gray-75: 250 250 250; /*   fafafa   98%   1.04 */
+    --venia-global-color-gray-100: 245 245 245; /*  f5f5f5   96%   1.00 */
+    --venia-global-color-gray-200: 235 235 235; /*  ebebeb   92%   1.09 */
+    --venia-global-color-gray-300: 224 224 224; /*  e0e0e0   88%   1.21 */
+    --venia-global-color-gray-400: 204 204 204; /*  cccccc   80%   1.47 */
+    --venia-global-color-gray-500: 163 163 163; /*  a3a3a3   64%   2.31 */
+    --venia-global-color-gray-600: 122 122 122; /*  7a7a7a   48%   3.93 */
+    --venia-global-color-gray-700: 82 82 82; /*     525252   32%   7.16 */
+    --venia-global-color-gray-800: 61 61 61; /*     3d3d3d   24%   9.96 */
+    --venia-global-color-gray-900: 31 31 31; /*     1f1f1f   12%  15.11 */
+    --venia-global-color-red-400: 197 27 72; /*     c51b48   44%   5.55 */
+    --venia-global-color-red-500: 188 16 62; /*     bc103e   40%   6.13 */
+    --venia-global-color-red-600: 176 7 52; /*      b00734   36%   6.87 */
+    --venia-global-color-red-700: 163 0 44; /*      a3002c   32%   7.75 */
+    --venia-global-color-sea-400: 224 246 242; /*   e0f6f2   92%   1.07 */
+    --venia-global-color-sea-500: 215 244 239; /*   d7f4ef   90%   1.11 */
+    --venia-global-color-sea-600: 206 243 236; /*   cef3ec   88%   1.13 */
+    --venia-global-color-sea-700: 197 242 234; /*   c5f2ea   86%   1.16 */
+    --venia-global-color-teal-400: 22 155 162; /*   169ba2   36%   3.22 */
+    --venia-global-color-teal-500: 13 143 150; /*   0d8f96   32%   3.73 */
+    --venia-global-color-teal-600: 6 131 137; /*    068389   28%   4.35 */
+    --venia-global-color-teal-700: 0 115 120; /*    007378   24%   5.40 */
+
     /* font family */
     --venia-global-text-fontFamily-sansSerif: 'Muli', sans-serif;
     /* font size */
@@ -35,6 +58,7 @@
 :global :root {
     /* colors */
     --venia-brand-color-1-400: var(--venia-global-color-teal-400);
+    --venia-brand-color-1-700: var(--venia-global-color-teal-700);
     /* typography */
     /* heading */
     --venia-typography-heading-XL-fontSize: var(

packages/venia-styleguide/src/util/contrastUtils.js

@@ -0,0 +1,22 @@
+/*
+ * Based on the WebAIM contrast checker authored by Jared Smith.
+ *
+ * https://gist.github.com/btopro/0967c237f6795d9498340fb8b6f25b60
+ * http://webaim.org/resources/contrastchecker/
+ */
+
+export const getHex = channel => parseInt(channel).toString(16);
+
+export const getSRGB = channel => {
+    const factor = channel / 255;
+
+    return factor <= 0.03928
+        ? factor / 12.92
+        : Math.pow((factor + 0.055) / 1.055, 2.4);
+};
+
+export const getLightness = channels => {
+    const [r, g, b] = channels.map(getSRGB);
+
+    return r * 0.2126 + g * 0.7152 + b * 0.0722;
+};