feat: add button examples with twin.macro

chanzuckerberg · Dec 10, 2020 · 22a6cbb · 22a6cbb
1 parent 87052a7
commit 22a6cbb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/components/src/playground/button.tsx b/packages/components/src/playground/button.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { css } from "@linaria/core";
 import { styled } from "@linaria/react";
+import tw from "twin.macro";
 
 // Temporary props for button to test out css options for variants
 type ButtonProps = React.DetailedHTMLProps<
@@ -13,15 +14,14 @@ type ButtonProps = React.DetailedHTMLProps<
 function Button(props: ButtonProps): JSX.Element {
   const { variant = "primary", ...rest } = props;
   const primary = css`
-    --color-background: blue;
+    ${tw`bg-blue-300 hover:bg-blue-400`}
   `;
   const secondary = css`
-    --color-background: gray;
+    ${tw`bg-gray-600 hover:bg-blue-800`}
   `;
 
   const ButtonComponent = styled.button`
-    color: white;
-    background-color: var(--color-background);
+    ${tw`font-bold py-2 px-4 rounded text-white`}
   `;
 
   return (

diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
@@ -0,0 +1,11 @@
+const tokens = require("@chanzuckerberg/czedi-kit-tokens/json/variables-nested.json");
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: tokens.eds.color,
+    },
+  },
+  variants: {},
+  plugins: [],
+};