Change internal structure of react-design-tokens

Author: okonet

packages/react-design-tokens/src/ColorSwatch.jsx

@@ -0,0 +1,33 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui"
+import React from "react"
+import { readableColor } from "polished"
+import { Swatch, SwatchToken, SwatchValue } from "."
+import { tokenPropType, valuePropType } from "./propTypes"
+
+export const ColorSwatch = ({ value, token }) => {
+  const color = readableColor(value, "black", "white")
+  return (
+    <Swatch token={token} value={value}>
+      <div
+        sx={{
+          p: 3,
+          pt: 6,
+          bg: value,
+          overflow: "hidden"
+        }}
+      >
+        <SwatchToken color={color}>{token}</SwatchToken>
+        <SwatchValue color={color}>{value}</SwatchValue>
+      </div>
+    </Swatch>
+  )
+}
+
+ColorSwatch.propTypes = {
+  ...tokenPropType,
+  ...valuePropType
+}
+
+/** @component */
+export default ColorSwatch

packages/react-design-tokens/src/components/ColorSwatch.md renamed to packages/react-design-tokens/src/ColorSwatch.md

@@ -1,7 +1,7 @@
 Renders a color swatch with a readable text.
 
 ```jsx harmony
-<ColorSwatch token={'accent'} value={'#C0100F'} />
+<ColorSwatch token={"accent"} value={"#C0100F"} />
 ```
 
 When clicked, the value of the token is copied to clipboard.

packages/react-design-tokens/src/Colors.jsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { Grid, ThemeProvider } from "theme-ui"
+import { omitBy, pickBy, isString } from "lodash"
+import { Swatches, ColorSwatch, PaletteSwatch } from "."
+
+export default function Colors({ theme }) {
+  const gap = 2
+  const colors = pickBy(theme.colors, isString)
+  const palettes = omitBy(theme.colors, isString)
+  return (
+    <ThemeProvider theme={theme}>
+      <Grid gap={gap}>
+        <Swatches theme={theme} items={palettes}>
+          {(token, value) => (
+            <Grid
+              gap={0}
+              key={token}
+              sx={{
+                gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+              }}
+            >
+              <PaletteSwatch token={token} value={value} />
+            </Grid>
+          )}
+        </Swatches>
+        <Grid
+          gap={gap}
+          sx={{
+            gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+          }}
+        >
+          <Swatches theme={theme} items={colors}>
+            {(token, value) => <ColorSwatch token={token} value={value} key={token} />}
+          </Swatches>
+        </Grid>
+      </Grid>
+    </ThemeProvider>
+  )
+}

packages/react-design-tokens/src/components/Colors.md renamed to packages/react-design-tokens/src/Colors.md

@@ -1,5 +1,4 @@
 ```jsx harmony
-import theme from '../theme'
-
+import theme from "./theme"
 ;<Colors theme={theme} />
 ```

packages/react-design-tokens/src/PaletteSwatch.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { Swatches, ColorSwatch } from "."
+import { tokenPropType, valuePropType } from "./propTypes"
+
+export const PaletteSwatch = ({ token, value }) => (
+  <Swatches items={value}>
+    {(key, value) => (
+      <ColorSwatch value={value} token={`${token}.${key}`} key={`${token}.${key}`} />
+    )}
+  </Swatches>
+)
+
+PaletteSwatch.propTypes = {
+  ...tokenPropType,
+  ...valuePropType
+}
+
+/** @component */
+export default PaletteSwatch

packages/react-design-tokens/src/PaletteSwatch.md

@@ -0,0 +1,25 @@
+Palette swatch renders all color tokens from a palette as defined in [System UI theme specification](https://system-ui.com/theme/)
+
+It supports arrays
+
+```jsx harmony
+const palette = [
+  "#FFCDD2",
+  "#EF9A9A",
+  "#E57373",
+  "#EF5350",
+  "#F44336",
+  "#E53935",
+  "#D32F2F",
+  "#C62828",
+  "#B71C1C"
+]
+;<PaletteSwatch token={"red"} value={palette} />
+```
+
+as well as object notation:
+
+```jsx harmony
+import theme from "./theme"
+;<PaletteSwatch token={"slate"} value={theme.colors.slate} />
+```

packages/react-design-tokens/src/Spacing.jsx

@@ -0,0 +1,23 @@
+/* @jsx jsx */
+import React from "react"
+import { Grid, jsx, ThemeProvider } from "theme-ui"
+import { SpacingSwatch, Swatch, Swatches, SwatchToken } from "."
+
+export default function Spacing({ theme }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Grid gap={4}>
+        <Swatches items={theme.space}>
+          {(token, value) => (
+            <Swatch token={token} value={value} key={token}>
+              <Grid gap={3} sx={{ alignItems: "center", gridTemplateColumns: "auto 1fr" }}>
+                <SwatchToken>{token}</SwatchToken>
+                <SpacingSwatch value={value} />
+              </Grid>
+            </Swatch>
+          )}
+        </Swatches>
+      </Grid>
+    </ThemeProvider>
+  )
+}

packages/react-design-tokens/src/components/Spacing.md renamed to packages/react-design-tokens/src/Spacing.md

@@ -1,7 +1,6 @@
 Spacing renders all `space` tokens from the theme in a convenient way.
 
 ```jsx harmony
-import theme from '../theme'
-
+import theme from "./theme"
 ;<Spacing theme={theme} />
 ```

packages/react-design-tokens/src/SpacingSwatch.jsx

@@ -0,0 +1,31 @@
+/* @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+import { SwatchValue } from "."
+import { valuePropType } from "./propTypes"
+
+const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
+  return (
+    <div
+      sx={{
+        py: 2,
+        color: "secondary",
+        bg: "muted",
+        width: value,
+        ...componentCSS
+      }}
+      {...rest}
+    >
+      <SwatchValue color="inherit" sx={{ mx: 2 }}>
+        {value}
+      </SwatchValue>
+    </div>
+  )
+}
+
+SpacingSwatch.propTypes = {
+  ...valuePropType
+}
+
+/** @component */
+export default SpacingSwatch

packages/react-design-tokens/src/components/SpacingSwatch.md renamed to packages/react-design-tokens/src/SpacingSwatch.md

@@ -1,17 +1,17 @@
 Spacing swatch renders a bar with a width of the provided `value` and its content as a text
 
 ```jsx harmony
-<SpacingSwatch value={'1rem'} />
+<SpacingSwatch value={"1rem"} />
 ```
 
 You can override default styles using `css` prop:
 
 ```jsx harmony
 <SpacingSwatch
-  value={'100px'}
+  value={"100px"}
   css={{
-    color: 'white',
-    background: 'cornflowerblue'
+    color: "white",
+    background: "cornflowerblue"
   }}
 />
 ```