Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
feat(site): Add design system docs
- Loading branch information
Showing
12 changed files
with
272 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]) | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/// <reference types="react" /> | ||
export declare function ColorsDemo(): JSX.Element; | ||
//# sourceMappingURL=ColorsDemo.d.ts.map |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/// <reference types="react" /> | ||
export declare function TokensDemo(): JSX.Element; | ||
//# sourceMappingURL=TokensDemo.d.ts.map |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a96de96
There was a problem hiding this comment.
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