feat: token v2 demo tailwind

.storybook/tailwind.config.js

@@ -1,5 +1,8 @@
 const { light, dark } = require('@charcoal-ui/theme')
-const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+const {
+  createTailwindConfig,
+  createTailwindConfigTokenV2,
+} = require('@charcoal-ui/tailwind-config')
 
 /**
  * @type {import('tailwindcss/tailwind-config').TailwindConfig}
@@ -15,6 +18,7 @@ module.exports = {
         '[data-dark="true"]': dark,
       },
     }),
+    createTailwindConfigTokenV2(),
   ],
   corePlugins: {
     preflight: false,

packages/react/docs/TokenV2Styled.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// This does not work :(
+// import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
+import tokens from '../../theme/dist/tokens/camel/css-variables.json'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Styled() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <Container>
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <Tab
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </Tab>
+          ))}
+        </div>
+      </nav>
+      <H2>Works from users you follow</H2>
+      <UserCard
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <UserInfo>
+          <User aria-label="UserIcon">
+            <Icon name="24/FaceEdit" />
+          </User>
+          <UserName>UserName</UserName>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </UserInfo>
+        <ShowAll>Show all</ShowAll>
+        <ArtworkList key={selected}>
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <Artwork>
+                <ArtworkThumbnail src={a.thumbnail} alt={a.title} />
+                <ArtworkTitle>{a.title}</ArtworkTitle>
+                <ArtworkDescription>{a.description}</ArtworkDescription>
+              </Artwork>
+            </li>
+          ))}
+        </ArtworkList>
+      </UserCard>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: fit-content;
+`
+
+const H2 = styled.h2`
+  margin: 0;
+  color: ${tokens.color.text.secondary.default};
+  font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
+  line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
+`
+
+const Tab = styled.a`
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(${tokens.text.fontSize.body} * 1px);
+  line-height: calc(${tokens.text.lineHeight.body} * 1px);
+  padding: 13px calc(${tokens.space.layout[30]} * 1px);
+  border-top: 2px transparent;
+
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+
+  &[aria-selected='true'] {
+    color: ${tokens.color.text.default};
+    border-top: 2px solid ${tokens.color.border.selected};
+    &:hover {
+      color: ${tokens.color.text.hover};
+    }
+    &:active {
+      color: ${tokens.color.text.press};
+    }
+  }
+`
+
+const UserCard = styled.div`
+  display: grid;
+  grid-template-areas:
+    'UserInfo     .           ShowAll'
+    'ArtworkList  ArtworkList ArtworkList';
+`
+
+const UserInfo = styled.div`
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: left;
+  align-items: center;
+  gap: calc(${tokens.space.layout[20]} * 1px);
+`
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+
+const UserName = styled.span`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  font-weight: bold;
+`
+
+const ShowAll = styled.a`
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+  text-align: right;
+  align-content: center;
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+`
+
+const ArtworkList = styled.ul`
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(${tokens.space.layout[20]} * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+`
+
+const Artwork = styled.article`
+  display: grid;
+  gap: calc(${tokens.space.layout[10]} * 1px);
+`
+const ArtworkThumbnail = styled.img`
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(${tokens.radius.m} * 1px);
+`
+const ArtworkTitle = styled.h3`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  margin: 0;
+`
+const ArtworkDescription = styled.p`
+  margin: 0;
+  color: ${tokens.color.text.tertiary.default};
+  font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
+`

packages/react/docs/TokenV2Tailwind.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import React, { useState } from 'react'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Tailwind() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <section className="grid max-w-fit gap-[24px]">
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <a
+              className={`text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
+                category === selected
+                  ? 'border-border-selected text-text'
+                  : 'border-[transparent]'
+              }`}
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </a>
+          ))}
+        </div>
+      </nav>
+      <h2 className="text-text-secondary text-heading-xs m-0">
+        Works from users you follow
+      </h2>
+      <div
+        className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <div className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]">
+          <a
+            className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+            aria-label="UserIcon"
+          >
+            <Icon name="24/FaceEdit" />
+          </a>
+          <span className="text-text text-caption-m font-bold">UserName</span>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </div>
+        <a className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]">
+          Show all
+        </a>
+        <ul
+          key={selected}
+          className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
+        >
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <article className="grid gap-10">
+                <img
+                  className="rounded-m aspect-[3/2] w-[100%]"
+                  src={a.thumbnail}
+                  alt={a.title}
+                />
+                <h3 className="text-text text-caption-m m-0">{a.title}</h3>
+                <p className="text-text-tertiary text-caption-s m-0">
+                  {a.description}
+                </p>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}