docs[DST-49]: Theme token page (#3251)

* save for now. * comment * space * save * save * save getting this done Co-authored-by: Osama Abdul Latif <[email protected]> Co-authored-by: Sebastian Sebald <[email protected]> * save * improve * radius * Headlines * save fontsize * save * save typo tokens * link * alignment * more spaces * breakpoints * fix * fixes * some fixes * add order * save * save * add message in tokens page * make it uppercase * remove log * update titles for tabs in token page * add pixel values --------- Co-authored-by: Osama Abdul Latif <[email protected]> Co-authored-by: Sebastian Sebald <[email protected]>
marigold-ui · Aug 7, 2023 · 5d72cb0 · 5d72cb0 · vercel · Aug 7, 2023
1 parent 5ac85ca
commit 5d72cb0
Show file tree

Hide file tree

Showing 11 changed files with 735 additions and 7 deletions.
diff --git a/docs/content/introduction/design-tokens.mdx b/docs/content/introduction/design-tokens.mdx
@@ -0,0 +1,82 @@
+---
+title: Design Tokens
+caption: Here are all design tokens for each theme listet.
+order: 3
+---
+
+Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.
+
+<Message messageTitle="Changing Theme" variant="info">
+  Since we have two themes, the values displayed show the available tokens in
+  the currently selected theme.
+</Message>
+
+## Colors
+
+A carefully curated set of primary, secondary, and accent colors ensures our product maintains a consistent and recognizable palette.
+
+Our colors are sorted according to their use case. For example, `bg` colors
+are only for background used, `text` for text colors, `border` only for
+borders and so on.
+
+<ColorTokenTable />
+
+## Typography
+
+With a defined font family and various font sizes and weights, our typography maintains readability and hierarchy. The consistent use of typography contributes to a polished and cohesive user experience. The `Value` corresponds to the class name from [Tailwind CSS](https://tailwindcss.com/docs/font-size).
+
+We have tokens for:
+
+<Tabs>
+  <Tabs.Item key="fontSize" title="Font size">
+    <FontSizes />
+  </Tabs.Item>
+  <Tabs.Item key="fontWeight" title="Font weight">
+    <FontWeights />
+  </Tabs.Item>
+  <Tabs.Item key="fontStyle" title="Font style">
+    <FontStyle />
+  </Tabs.Item>
+  <Tabs.Item key="textAlign" title="Text align">
+    <TextAlign />
+  </Tabs.Item>
+</Tabs>
+
+### Headlines
+
+The `<Headline>` component supports by default certain styles. They are listed as Tailwind class names.
+
+<Headlines />
+
+## Spacing
+
+Consistent spacing ensures harmonious layouts and enhances visual flow. The defined spacing scale helps create balanced and accessible interfaces across different screen sizes. It's used for `gap`, `padding`, `width` and `margin`.
+
+<Spacing />
+
+Besides this there are percentage values available for `width` property, which is found in form components. You can use them similar to the tokens above. Here is a list of the values: [Tailwind percentage tokens](https://tailwindcss.com/docs/width#percentage-widths)
+
+## Radius
+
+Standardized border radius contribute to a clean and modern design. These properties are applied to components, ensuring a cohesive appearance throughout our product.
+
+<BorderRadius />
+
+## Alignment
+
+Consistent alignment ensures that elements are arranged in a purposeful manner, enhancing clarity and user comprehension.
+
+<Tabs>
+  <Tabs.Item key="alignX" title="Horizontal">
+    <AlignmentsX />
+  </Tabs.Item>
+  <Tabs.Item key="alignY" title="Vertical">
+    <AlignmentsY />
+  </Tabs.Item>
+</Tabs>
+
+## Breakpoints
+
+By defining breakpoints for different screen sizes, we achieve responsive design that adapts seamlessly to various devices and orientations.
+
+<Breakpoints />
diff --git a/docs/theme/components/Table.styles.ts b/docs/theme/components/Table.styles.ts
@@ -2,7 +2,19 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Table: ThemeComponent<'Table'> = {
   table: cva('table w-full text-sm'),
-  cell: cva(' mt-4 hyphens-auto px-4 py-2 text-sm'),
+  cell: cva(' mt-4 hyphens-auto px-4 py-2 text-sm', {
+    variants: {
+      variant: {
+        colorTable: 'p-4 align-middle',
+      },
+    },
+  }),
   header: cva('border-b px-4 py-2 text-start'),
-  row: cva('hover:bg-bg-hover/50 border-b'),
+  row: cva('border-b', {
+    variants: {
+      variant: {
+        hover: 'hover:bg-neutral-100/50 ',
+      },
+    },
+  }),
 };
diff --git a/docs/ui/AppearanceTable.tsx b/docs/ui/AppearanceTable.tsx
@@ -53,7 +53,7 @@ export const AppearanceTable = ({ component }: AppearanceTableProps) => {
         </Inline>
       ) : (
         <div className="overflow-auto">
-          <Table aria-labelledby="appearance table" variant="propsTable">
+          <Table aria-labelledby="appearance table" variant="hover">
             <Table.Header>
               <Table.Column key={'property'}>Property</Table.Column>
               <Table.Column key={'type'}>Type</Table.Column>

diff --git a/docs/ui/ColorTokens.tsx b/docs/ui/ColorTokens.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { Card, Headline, Table, createVar } from '@/ui';
+import { useThemeSwitch } from './ThemeSwitch';
+import type { ReactNode } from 'react';
+
+interface NestedStringObject {
+  [key: string]: NestedStringObject | string;
+}
+
+export const iterateTokens = (colors: NestedStringObject, prefix = '') => {
+  let list: [token: string, color: string][] = [];
+
+  for (const key in colors) {
+    let value = colors[key];
+    if (typeof value === 'object') {
+      list.push(...iterateTokens(value, `${prefix}${key}-`));
+    } else {
+      list.push([`${prefix}${key}`, value]);
+    }
+  }
+  return list;
+};
+
+interface ColorTokenTableProps {
+  sections: { [group: string]: [token: string, color: string][] };
+}
+export const ColorTokenTable = ({ sections = {} }: ColorTokenTableProps) => {
+  const { current, themes } = useThemeSwitch();
+
+  if (!current) {
+    return null;
+  }
+
+  const tokens = iterateTokens(themes[current].colors || {});
+
+  tokens.forEach(([token, color]) => {
+    const section = token.substring(0, token.indexOf('-')) || token;
+    // When the section is not yet created
+    if (!sections[section]) {
+      sections[section] = [];
+    }
+    sections[section].push([token, color]);
+  });
+
+  return (
+    <>
+      {Object.entries(sections).map(([group, tokenValues]) => (
+        <div key={group}>
+          <Headline level="3">
+            {group.charAt(0).toUpperCase() + group.slice(1)}
+          </Headline>
+          <Card>
+            <div className="overflow-auto">
+              <Table aria-labelledby="tokens table" variant="colorTable">
+                <Table.Header>
+                  <Table.Column key={'name'}>Name</Table.Column>
+                  <Table.Column key={'value'}>Value</Table.Column>
+                  <Table.Column key={'example'}>Example</Table.Column>
+                </Table.Header>
+                <Table.Body>
+                  {tokenValues.map(([token, color]) => (
+                    <Table.Row key={token}>
+                      <Table.Cell>
+                        <code className="before:content-none after:content-none">
+                          {token.replace('-DEFAULT', '')}
+                        </code>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <code className="before:content-none after:content-none">
+                          {color}
+                        </code>
+                      </Table.Cell>
+                      <Table.Cell>
+                        <ColorCanvas color={color} />
+                      </Table.Cell>
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+            </div>
+          </Card>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export interface ColorCanvasProps {
+  children?: ReactNode;
+  color: string;
+}
+
+export const ColorCanvas = ({ children, color }: ColorCanvasProps) => (
+  <div
+    className=" w-20 rounded-sm bg-[var(--bg)] p-4"
+    style={createVar({ bg: color })}
+  >
+    {children}
+  </div>
+);
diff --git a/docs/ui/PropsTable.tsx b/docs/ui/PropsTable.tsx
@@ -16,7 +16,7 @@ export const PropsTable = ({ props }: PropsTableProps) => {
         </Inline>
       ) : (
         <div className="overflow-auto">
-          <Table aria-label="Table with component props" variant="propsTable">
+          <Table aria-label="Table with component props" variant="hover">
             <Table.Header>
               <Table.Column key="property">Property</Table.Column>
               <Table.Column key="type">Type</Table.Column>

diff --git a/docs/ui/Token.tsx b/docs/ui/Token.tsx
@@ -0,0 +1,171 @@
+import { Card, Inline, Stack, Table, alignment, cn, paddingSpace } from '@/ui';
+import { useThemeSwitch } from './ThemeSwitch';
+
+export const AlignmentsX = () => {
+  return (
+    <Card>
+      <Stack space={3}>
+        {Object.entries(alignment.horizontal.alignmentX).map(([key]) => (
+          <div className="h-full bg-[hsl(29,_37%,_95%)] p-2" key={key}>
+            <Stack
+              alignX={key as keyof typeof alignment.horizontal.alignmentX}
+              space={2}
+            >
+              <code className="before:content-none after:content-none">
+                {key}
+              </code>
+              <div className=" h-14 w-14 rounded bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+            </Stack>
+          </div>
+        ))}
+      </Stack>
+    </Card>
+  );
+};
+
+export const AlignmentsY = () => {
+  return (
+    <Card>
+      <Stack space={3}>
+        {Object.entries(alignment.vertical.alignmentY).map(([key]) => (
+          <div className="h-44 bg-[hsl(29,_37%,_95%)] p-2" key={key}>
+            <Stack
+              stretch
+              alignY={key as keyof typeof alignment.vertical.alignmentY}
+              space={2}
+            >
+              <code className="before:content-none after:content-none">
+                {key}
+              </code>
+              <div className=" h-14 w-14 rounded bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+            </Stack>
+          </div>
+        ))}
+      </Stack>
+    </Card>
+  );
+};
+
+export const BorderRadius = () => (
+  <Card>
+    <Inline space={8}>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-sm 2px
+        </code>
+        <div className="h-14 w-full rounded-sm bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded 4px
+        </code>
+        <div className="h-14 w-full rounded bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-md 6px
+        </code>
+        <div className="h-14 w-full rounded-md bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-lg 8px
+        </code>
+        <div className="h-14 w-full rounded-lg bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-xl 12px
+        </code>
+        <div className="h-14 w-full rounded-xl bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-2xl 16px
+        </code>
+        <div className="h-14 w-full rounded-2xl bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+      <Stack alignX="center" space={2}>
+        <code className="before:content-none after:content-none">
+          rounded-full 9999px
+        </code>
+        <div className="h-14 w-full rounded-full bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] px-3 py-2 shadow"></div>
+      </Stack>
+    </Inline>
+  </Card>
+);
+
+export const Breakpoints = () => {
+  const { current, themes } = useThemeSwitch();
+
+  if (!current) {
+    return null;
+  }
+
+  const breaks = themes[current].screens || {};
+
+  return (
+    <Card>
+      <div className="overflow-auto">
+        <Table aria-label="breakpoints">
+          <Table.Header>
+            <Table.Column key={'name'}>Name</Table.Column>
+            <Table.Column key={'value'}>Breaks at</Table.Column>
+          </Table.Header>
+          <Table.Body>
+            {Object.entries(breaks).map(([key, value]) => (
+              <Table.Row key={key}>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    {key}
+                  </code>
+                </Table.Cell>
+                <Table.Cell>{value}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    </Card>
+  );
+};
+
+export const Spacing = () => {
+  const spaces = paddingSpace;
+
+  return (
+    <Card>
+      <div className="overflow-auto">
+        <Table aria-label="spaces" variant="noHover">
+          <Table.Header>
+            <Table.Column key={'name'}>Name</Table.Column>
+            <Table.Column key={'value'}>Value</Table.Column>
+            <Table.Column key={'example'}>Example</Table.Column>
+          </Table.Header>
+          <Table.Body>
+            {Object.entries(spaces).map(([key]) => (
+              <Table.Row key={key}>
+                <Table.Cell>
+                  <code className="before:content-none after:content-none">
+                    {key}
+                  </code>
+                </Table.Cell>
+                <Table.Cell>{Number(key) * 4}px</Table.Cell>
+                <Table.Cell>
+                  <div
+                    className={cn(
+                      `pl-${key}`,
+                      ' bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] '
+                    )}
+                  >
+                    <div className="h-3 bg-white"></div>
+                  </div>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    </Card>
+  );
+};