-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
467ffc4
commit c084cb1
Showing
14 changed files
with
2,754 additions
and
360 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
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,160 @@ | ||
| import { | ||
| Box, | ||
| Button, | ||
| Code, | ||
| Flex, | ||
| Heading, | ||
| Text, | ||
| TextField, | ||
| Theme, | ||
| } from "@radix-ui/themes"; | ||
|
|
||
| import { MagnifyingGlassIcon } from "@radix-ui/react-icons"; | ||
| import { themePropDefs } from "@radix-ui/themes/dist/esm/props"; | ||
|
|
||
| const capitalize = (s) => s[0].toUpperCase() + s.slice(1); | ||
|
|
||
| const ColorBlock = ({ | ||
| color, | ||
| level, | ||
| width = "calc(100% / 12)", | ||
| borderRadius = "none", | ||
| }) => { | ||
| const backgroundColor = `var(--${color}-${level})`; | ||
| return ( | ||
| <Box | ||
| style={{ | ||
| backgroundColor, | ||
| height: "2.618rem", | ||
| width, | ||
| borderRadius, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const LabelFromPropValue = ({ value }) => { | ||
| return ( | ||
| <Flex gap="2" style={{ width: "25%" }} align="baseline" flexShrink="0"> | ||
| <Text size="4" weight="medium"> | ||
| {capitalize(value)} | ||
| </Text> | ||
| <Code size="3">{value}</Code> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| const ColorBlockLabeled = ({ color }) => { | ||
| return ( | ||
| <Flex direction="column" gap="2"> | ||
| <ColorBlock | ||
| key={color + 10} | ||
| color={color} | ||
| level={10} | ||
| width="60px" | ||
| borderRadius="var(--radius-3)" | ||
| /> | ||
| <Text size="1" weight="medium"> | ||
| {capitalize(color)} | ||
| </Text> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| const ColorScale = ({ color }) => { | ||
| // return scale of 1-12 | ||
| const scale = Array.from({ length: 12 }, (_, i) => i + 1); | ||
|
|
||
| return ( | ||
| <Flex justify="between" align="center"> | ||
| <LabelFromPropValue value={color} /> | ||
| <Flex | ||
| flexGrow="1" | ||
| style={{ | ||
| borderRadius: "var(--radius-3)", | ||
| overflow: "hidden", | ||
| }} | ||
| > | ||
| {scale.map((level) => ( | ||
| <ColorBlock key={color + level} color={color} level={level} /> | ||
| ))} | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| const Colors = ({ colors }) => { | ||
| return ( | ||
| <Box my="5"> | ||
| <Flex gap="3" direction="column"> | ||
| {colors | ||
| .filter((color) => color !== "auto") | ||
| .map((color) => ( | ||
| <ColorScale key={color} color={color} /> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const ColorsLabeled = ({ colors }) => { | ||
| return ( | ||
| <Box my="5"> | ||
| <Flex gap="3" wrap="wrap"> | ||
| {colors | ||
| .filter((color) => color !== "auto") | ||
| .map((color) => ( | ||
| <ColorBlockLabeled key={color} color={color} /> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const Radius = () => { | ||
| return ( | ||
| <Box my="5"> | ||
| <Flex gap="5" direction="column"> | ||
| {themePropDefs.radius.values.map((radius) => ( | ||
| <Flex justify="between" align="center"> | ||
| <LabelFromPropValue value={radius} /> | ||
| <Box flexGrow="1"> | ||
| <TextField.Root size="3" radius={radius} variant="surface"> | ||
| <TextField.Slot side="left" pl="3"> | ||
| <MagnifyingGlassIcon height="20" width="20" /> | ||
| </TextField.Slot> | ||
| <TextField.Slot side="right" pr="1" gap="0"> | ||
| <Button size="2">Search</Button> | ||
| </TextField.Slot> | ||
| </TextField.Root> | ||
| </Box> | ||
| </Flex> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const Scaling = () => { | ||
| const text = | ||
| "Born in 1793 near Killinick, Ireland, Francis Danby initially gained recognition for his romantic landscapes and atmospheric scenes that captivated the Victorian public. After moving to Bristol, England, he became a key figure in the Bristol School of artists, where he further developed his unique style of using dramatic contrasts and rich, moody colors to evoke powerful emotions. His work, often imbued with themes of the sublime and picturesque, made significant contributions to the British Romantic movement in art."; | ||
| return ( | ||
| <Box my="5"> | ||
| <Flex gap="5" direction="column"> | ||
| {themePropDefs.scaling.values.map((value) => ( | ||
| <Flex justify="between" align="start"> | ||
| <LabelFromPropValue value={value} /> | ||
| <Box flexGrow="0" flexShrink="1"> | ||
| <Theme scaling={value}> | ||
| <Heading mb="2">Francis Danby</Heading> | ||
| <Text>{text}</Text> | ||
| </Theme> | ||
| </Box> | ||
| </Flex> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export { Colors, ColorsLabeled, Radius, Scaling }; |
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
Oops, something went wrong.