primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-01 02:32:25 +03:00
Code Issues Projects Releases Wiki Activity

fix color system <var> styles

Browse Source
This commit is contained in:
Shawn Allen 2019-01-17 16:04:14 -08:00
parent d51305cd85
commit 8ca4c0e7e6
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/color-system.js
View File

@ -140,15 +140,13 @@ FadeVariables.propTypes = {
function Swatch(props) { function Swatch(props) {
const {name, value, textColor = overlayColor(value), ...rest} = props const {name, value, textColor = overlayColor(value), ...rest} = props
return ( return (
<Box bg={value} {...rest}> <Box bg={value} color={textColor} {...rest}>
<Text as={Flex} fontSize={1} justifyContent="space-between"> <Text as={Flex} fontSize={1} justifyContent="space-between">
<Box p={3}> <Box p={3}>
<Var color={textColor}>${name}</Var> <Var>${name}</Var>
</Box> </Box>
<Box p={3}> <Box p={3}>
<Text color={textColor} fontFamily="mono"> <Text fontFamily="mono">{value}</Text>
{value}
</Text>
</Box> </Box>
</Text> </Text>
</Box> </Box>
@ -163,7 +161,7 @@ Swatch.propTypes = {
function Var(props) { function Var(props) {
// FIXME: fontStyle should be a prop, right? // FIXME: fontStyle should be a prop, right?
return <Text as="var" fontWeight="bold" fontFamily="mono" css={{fontStyle: 'normal'}} {...props} /> return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
} }
function overlayColor(bg) { function overlayColor(bg) {