/
ColorsDemo.tsx
117 lines (109 loc) · 2.91 KB
/
ColorsDemo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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])
})
}