Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(site): Add design system docs
  • Loading branch information
natew committed Nov 7, 2022
1 parent e854a2a commit a96de96
Show file tree
Hide file tree
Showing 12 changed files with 272 additions and 4 deletions.
2 changes: 2 additions & 0 deletions apps/site/components/demos.tsx
Expand Up @@ -33,3 +33,5 @@ export { UpdateThemeDemo } from '@tamagui/demos'
export { FeatherIconsDemo } from '@tamagui/demos'
export { LucideIconsDemo } from '@tamagui/demos'
export { ScrollViewDemo } from '@tamagui/demos'
export { ColorsDemo } from '@tamagui/demos'
export { TokensDemo } from '@tamagui/demos'
16 changes: 16 additions & 0 deletions apps/site/data/docs/intro/colors.mdx
@@ -0,0 +1,16 @@
---
title: Colors
description: The Tamagui theme-base colors.
---

<Notice>
This is the Tamagui documentation sites [own color
palette](https://github.com/tamagui/tamagui/blob/dde673579c9f60a1ead4dabd2f756e202bac5b43/packages/theme-base/src/tokens.tsx#L91).
You can customize your own using
[@tamagui/create-themes](https://github.com/tamagui/tamagui/blob/dde673579c9f60a1ead4dabd2f756e202bac5b43/packages/theme-base/src/themes.tsx#L5).
See
[@tamagui/colors](https://github.com/tamagui/tamagui/blob/dde673579c9f60a1ead4dabd2f756e202bac5b43/packages/colors/src/index.ts#L1)
for Radix colors, or BYO color palette.
</Notice>

<ColorsDemo />
12 changes: 12 additions & 0 deletions apps/site/data/docs/intro/tokens.mdx
@@ -0,0 +1,12 @@
---
title: Tokens
description: The Tamagui theme-base colors.
---

<Notice>
This is the [tamagui.dev
tokens](https://github.com/tamagui/tamagui/blob/dde673579c9f60a1ead4dabd2f756e202bac5b43/packages/theme-base/src/tokens.tsx#L166)
found in `@tamagui/theme-base`.
</Notice>

<TokensDemo />
4 changes: 0 additions & 4 deletions apps/site/data/draft/tamagui-one.mdx
Expand Up @@ -436,10 +436,6 @@ We've updated Tamagui's base React version to be 18, and landed a large amount o

---

### react-native-svg-lite

---

### `@tamagui/next-theme`

---
Expand Down
13 changes: 13 additions & 0 deletions apps/site/lib/docsRoutes.ts
Expand Up @@ -42,6 +42,19 @@ export const docsRoutes = [
],
},

{
type: 'hr',
title: 'Theme',
},

{
pages: [
{ title: 'Colors', route: '/docs/intro/colors' },
{ title: 'Tokens', route: '/docs/intro/tokens' },
// { title: 'Themes', route: '/docs/intro/themes' },
],
},

{
type: 'hr',
title: 'Tamagui',
Expand Down
5 changes: 5 additions & 0 deletions next.md
@@ -1,5 +1,10 @@
- rc.0

- site
- resize responsive jank
- lighthouse fix
- getTokens(): TokensParsed
- pass Size down context (see Group) but really this is just Themes but for individual props (css variable direct support <Theme set={{ size: '$4' }}> ?)
- When you focus an input in a dialog on mobile or a propover etc. then it disappears
- site design system docs (for use in cli later)
- blog post / home: lighthouse score diff between compiler on / off
Expand Down
117 changes: 117 additions & 0 deletions packages/demos/src/ColorsDemo.tsx
@@ -0,0 +1,117 @@
import { Variable } from '@tamagui/core'
import {
H2,
Paragraph,
Separator,
Square,
XStack,
YStack,
getTokens,
getVariableValue,
} from 'tamagui'

const colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']

export function ColorsDemo() {
const colors = getTokens().color
const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]

return (
<YStack mt="$4" space="$8">
<ColorsRow title="Light" colors={colorsLight} />
<Separator />
<ColorsRow title="Dark" colors={colorsDark} />
</YStack>
)
}

function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
return (
<YStack space $sm={{ space: '$2' }}>
<H2 size="$2">{title}</H2>

<XStack space als="center">
<YStack space $sm={{ space: '$2' }} als="center">
{colors.map((group, index) => {
return (
<XStack space="$2" key={index}>
{group.map((color) => {
return (
<Square
key={`${color.key}${index}`}
br="$2"
size="$4"
h="$4"
bc={getVariableValue(color)}
$sm={{
size: '$2',
}}
$xs={{
size: '$1',
}}
/>
)
})}
</XStack>
)
})}

<XStack space="$2" als="center">
{new Array(13)
.fill(0)
.slice(1)
.map((_, index) => {
return (
<Paragraph
col="$color10"
fow="300"
w="$4"
$sm={{
w: '$2',
}}
$xs={{
w: '$1',
}}
key={index}
>
{index}
</Paragraph>
)
})}
</XStack>
</YStack>

<YStack space="$2">
{colorGroups.map((name) => (
<Paragraph
theme={name as any}
col="$color10"
h="$3"
rotate="-10deg"
$sm={{
h: '$2',
}}
$xs={{
h: '$1',
}}
key={name}
>
{name}
</Paragraph>
))}
</YStack>
</XStack>
</YStack>
)
}

function getColors(colors: Record<string, Variable>, dark = false) {
return colorGroups.map((group) => {
return Object.keys(colors)
.filter(
(color) =>
color.startsWith(group) && (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))
)
.map((key) => colors[key])
})
}
97 changes: 97 additions & 0 deletions packages/demos/src/TokensDemo.tsx
@@ -0,0 +1,97 @@
import { Tokens, getConfig } from '@tamagui/core'
import { useState } from 'react'
import { Button, H2, H3, H4, ScrollView, Separator, Square, XGroup, XStack, YStack } from 'tamagui'

type Section = 'spaceNegative' | keyof Tokens

const sections: { name: string; key: Section }[] = [
{
name: `Size`,
key: `size`,
},
{
name: `Space`,
key: 'space',
},
{
name: `Space (-)`,
key: `spaceNegative`,
},
{
name: `Radius`,
key: `radius`,
},
]

export function TokensDemo() {
const [section, setSection] = useState<Section>('size')

return (
<YStack space>
<XGroup ai="center" als="center">
{sections.map(({ name, key }) => {
return (
<Button
key={key}
size="$3"
theme={section === key ? 'active' : null}
ff="$silkscreen"
onPress={() => setSection(key)}
>
{name}
</Button>
)
})}
</XGroup>

{(section === 'size' ||
section === 'spaceNegative' ||
section === 'space' ||
section === 'radius') && <SizeSection section={section} />}
</YStack>
)
}

function SizeSection({ section }: { section: Section }) {
const allTokens = getConfig().tokens
const tokens = allTokens[section.startsWith('space') ? 'space' : section]
const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))
const spaceTokens = st.filter((t) => parseFloat(t) >= 0 && t !== '-0')
const spaceTokensNegative = st
.filter((t) => parseFloat(t) < 0 || t === '-0')
.sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))

return (
<YStack f={1} space>
<H2>Sizes</H2>
<YStack w="100%" space="$2" separator={<Separator />}>
{(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map((token) => {
return (
<XStack w="100%" ai="center" key={token}>
<YStack w="25%">
<H3 size="$6">${token}</H3>
</YStack>
<YStack w="20%">
<H4 size="$5">{tokens[token]?.val}px</H4>
</YStack>
<Square
size={tokens[token]?.val}
bc="$color3"
{...(section === 'spaceNegative' && {
bc: '$red3',
size: -tokens[
spaceTokensNegative.find((t) => parseFloat(t) === -parseFloat(token)) ?? token
]?.val,
})}
{...(section === 'radius' && {
size: allTokens.size[token]?.val,
br: tokens[token]?.val,
})}
/>
</XStack>
)
})}
</YStack>
</YStack>
)
}
2 changes: 2 additions & 0 deletions packages/demos/src/index.tsx
Expand Up @@ -32,4 +32,6 @@ export { SwitchDemo } from './SwitchDemo'
export { TextDemo } from './TextDemo'
export { ThemeInverseDemo } from './ThemeInverseDemo'
export { TooltipDemo } from './TooltipDemo'
export { ColorsDemo } from './ColorsDemo'
export { TokensDemo } from './TokensDemo'
export * from './useOnIntersecting'
3 changes: 3 additions & 0 deletions packages/demos/types/ColorsDemo.d.ts
@@ -0,0 +1,3 @@
/// <reference types="react" />
export declare function ColorsDemo(): JSX.Element;
//# sourceMappingURL=ColorsDemo.d.ts.map
3 changes: 3 additions & 0 deletions packages/demos/types/TokensDemo.d.ts
@@ -0,0 +1,3 @@
/// <reference types="react" />
export declare function TokensDemo(): JSX.Element;
//# sourceMappingURL=TokensDemo.d.ts.map
2 changes: 2 additions & 0 deletions packages/demos/types/index.d.ts
Expand Up @@ -32,5 +32,7 @@ export { SwitchDemo } from './SwitchDemo';
export { TextDemo } from './TextDemo';
export { ThemeInverseDemo } from './ThemeInverseDemo';
export { TooltipDemo } from './TooltipDemo';
export { ColorsDemo } from './ColorsDemo';
export { TokensDemo } from './TokensDemo';
export * from './useOnIntersecting';
//# sourceMappingURL=index.d.ts.map

1 comment on commit a96de96

@vercel
Copy link

@vercel vercel bot commented on a96de96 Nov 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

site – ./

site-git-master-tamagui.vercel.app
site-tamagui.vercel.app
site-beta-beige.vercel.app

Please sign in to comment.