Skip to content

Commit

Permalink
refactor background and text utility docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@shawnbot
shawnbot committed May 30, 2019
1 parent d2acd27 commit 548c127
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 92 deletions.
183 changes: 113 additions & 70 deletions docs/color-system.js
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
import chroma from 'chroma-js'
import colors from 'primer-colors'
import titleCase from 'title-case'
import {BorderBox, Box, Flex, Heading, Text} from '@primer/components'
import styled from 'styled-components'
import {Box, Flex, Heading, Text} from '@primer/components'
import {colors, variables, getBackgroundPalette} from './color-variables'

const {black, white} = colors

export const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red']

export function ColorPalette(props) {
return (
<Flex mb={6} className="markdown-no-margin" {...props}>
{gradientHues.map(hue => {
const color = colors[hue][5]
return (
<Box bg={color} p={3} width={200} mr={2} mb={2} key={hue}>
<Text fontWeight="bold" color={overlayColor(color)}>
{titleCase(hue)}
</Text>
</Box>
)
})}
<BorderBox bg="white" p={3} width={200} mb={2} borderRadius={0}>
<Text fontWeight="bold" color="black">
White
</Text>
</BorderBox>
</Flex>
)
}
export {gradientPalettes} from './color-variables'

export function ColorVariables(props) {
return (
<>
<Flex flexWrap="wrap" className="gutter" {...props}>
{gradientHues.map(hue => (
<ColorVariable id={hue} hue={hue} key={hue} />
))}
</Flex>
<Flex flexWrap="wrap" {...props}>
<FadeVariables id="black" hue="black" bg="black" color="white">
<BorderBox border={0} borderRadius={0} borderTop={1} borderColor="gray.5" mt={1}>
<Text as="div" fontSize={2} pt={3} mb={0}>
Black fades apply alpha transparency to the <Var>$black</Var> variable. The black color value has a slight
blue hue to match our grays.
</Text>
</BorderBox>
</FadeVariables>
<FadeVariables id="white" hue="white" over={black}>
<BorderBox border={0} borderRadius={0} borderTop={1} mt={1}>
<Text as="div" fontSize={2} pt={3} mb={0}>
White fades apply alpha transparency to the <Var>$white</Var> variable, below these are shown overlaid on
a dark gray background.
</Text>
</BorderBox>
</FadeVariables>
</Flex>
</>
)
}
const {black, white} = colors
export {black, white}

export function ColorVariable({hue, ...rest}) {
const values = colors[hue]
return (
<Flex.Item as={Box} minWidth={240} pr={4} mb={6} className="col-12 col-md-6 markdown-no-margin" {...rest}>
{/* <Heading as="div">{titleCase(hue)}</Heading> */}
<Box bg={colors[hue][5]} my={2} p={3} color="white">
<Heading as="div" pb={3} fontSize={56} fontWeight="light">
{titleCase(hue)}
</Heading>
<Flex justifyContent="space-between">
<Flex.Item as={Var}>${hue}-500</Flex.Item>
<Flex.Item as={Var} fontWeight="bold">
${hue}-500
</Flex.Item>
<Text justifySelf="end" fontFamily="mono">
{values[5]}
</Text>
</Flex>
</Box>
{values.map((value, index) => (
<Swatch name={hue} index={index} value={value} key={value} />
<Swatch name={hue} index={index} key={value} />
))}
</Flex.Item>
)
Expand All @@ -96,7 +47,7 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
.alpha(alpha / 100)
.css()
return {
name: `${hue}-fade-${alpha}`,
variable: `${hue}-fade-${alpha}`,
textColor: fadeTextColor(value, over),
value
}
Expand All @@ -110,7 +61,7 @@ export function FadeVariables({hue, color, bg, over, children, ...rest}) {
{titleCase(hue)}
</Heading>
<Flex justifyContent="space-between">
<Flex.Item flex="1 1 auto" as={Var}>
<Flex.Item flex="1 1 auto" as={Var} fontWeight="bold">
${hue}
</Flex.Item>
<Text fontFamily="mono">
Expand All @@ -137,13 +88,25 @@ FadeVariables.propTypes = {
over: PropTypes.string
}

function Swatch(props) {
const {name, index, value, textColor = overlayColor(value), ...rest} = props
export function Swatch(props) {
const {
name,
index,
value = colors[name][index],
textColor = overlayColor(value),
variable = `${name}-${index}00`,
children,
...rest
} = props

return (
<Flex bg={value} color={textColor} {...rest}>
<Box as={Var} pr={4}>
${name}-{index}00
</Box>
{children}
{variable ? (
<Box as={Var} pr={4}>
${variable}
</Box>
) : null}
<Box as={Text} fontFamily="mono">
{value}
</Box>
Expand All @@ -152,28 +115,108 @@ function Swatch(props) {
}

Swatch.defaultProps = {
as: Text,
flexWrap: 'wrap',
fontSize: 1,
justifyContent: 'space-between',
p: 3
}

Swatch.propTypes = {
name: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
textColor: PropTypes.string,
value: PropTypes.string.isRequired
}

function Var(props) {
// FIXME: fontStyle should be a prop, right?
return <Text as="var" fontWeight="bold" fontFamily="mono" style={{fontStyle: 'normal'}} {...props} />
export function BackgroundHueSwatches({hue, ...rest}) {
const namedUtilities = Object.keys(variables).filter(name => name.startsWith(`bg-${hue}`))

const namedUtilitiesByValue = {}
for (const name of namedUtilities) {
const value = variables[name]
namedUtilitiesByValue[value] = name
}

const {values} = getBackgroundPalette(hue)
const rows = values.map(({value, ...rest}) => ({
value,
named: namedUtilitiesByValue[value],
...rest
}))

return (
<ColorTable {...rest}>
<thead>
<tr>
<ColorCell as="th">Default class</ColorCell>
<th>Indexed?</th>
<th>Variable</th>
<th>CSS value</th>
</tr>
</thead>
<tbody>
{rows.map(({value, named, slug, variable}) => {
const overlay = overlayColor(value)
return (
<ColorRow key={slug}>
<ColorCell bg={named ? value : null} color={overlay}>
{named ? `.${named}` : null}
</ColorCell>
<ColorCell bg={value} color={overlay}>
.bg-{slug}
</ColorCell>
<ColorCell bg={value} color={overlay}>
<Var>${variable}</Var>
</ColorCell>
<ColorCell bg={value} color={overlay}>
<Text fontFamily="mono">{value}</Text>
</ColorCell>
</ColorRow>
)
})}
</tbody>
</ColorTable>
)
}

export function Var(props) {
return <Text as="var" fontFamily="mono" fontStyle="normal" {...props} />
}

export function overlayColor(bg) {
return chroma(bg).luminance() > 0.5 ? black : white
}

const ColorTable = styled.table`
display: table !important;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0 4px;
tr,
td,
th {
border: 0 !important;
}
td,
th {
text-align: left;
width: 25%;
}
tr {
background-color: transparent !important;
}
`

const ColorRow = styled(Box).attrs({as: 'tr'})`
border-bottom: 1px solid ${colors.gray[2]} !important;
`

const ColorCell = styled(Box).attrs({as: 'td'})``

function fadeTextColor(fg, bg = white) {
const rgb = compositeRGB(fg, bg)
return overlayColor(rgb)
Expand Down
38 changes: 16 additions & 22 deletions pages/css/utilities/colors.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ status: Stable
status_issue: 'https://github.com/github/design-systems/issues/97'
---

import colors from 'primer-colors'
import Octicon, {Alert} from '@githubprimer/octicons-react'
import {Box, Flex, Text} from '@primer/components'
import {overlayColor} from '../../../docs/color-system'
const gradientColorKeys = Object.entries(colors).filter(([name, value]) => Array.isArray(value)).map(([name]) => name)
const Swatch = props => <Box mt={2} height={60} {...props} />
import {colors, variables} from '../../../docs/color-variables'
import {Swatch, BackgroundHueSwatches, overlayColor, gradientPalettes} from '../../../docs/color-system'
const gradientColorKeys = gradientPalettes.map(palette => palette.name)
const Chip = props => <Box mt={2} height={60} {...props} />
const QuotedWords = ({words, ...rest}) => <Text {...rest}>"{words.slice(0, -1).join('", "')}", or "{words[words.length - 1]}"</Text>

Use color utilities to apply color to the background of elements, text, and borders.
Expand Down Expand Up @@ -101,24 +102,17 @@ You can set the color inheritance on an element by using the `text-inherit` clas
There are additional utility classes to set the `color` CSS property (text color, and fill for octicons) to any individual color in our [palette](/css/support/color-system). The class names follow the pattern: `color-{name}-{index}` where `{name}` is one of <QuotedWords words={gradientColorKeys} />; and `{index}` is a number between 0 and 9.

<details>
<summary class="h4">See the full list of foreground utilities</summary>
<div class="d-flex flex-wrap mr-md-n3">
{gradientColorKeys.map(name => (
<div className="my-3 col-12 col-md-6 pr-md-3">
{
colors[name].map((value, index) => ({
selector: `.color-${name}-${index}`,
variable: `$${name}-${index}00`,
value
}))
.map(({selector, variable, value}) => (
<Flex flexJustify="space-between" bg={overlayColor(value)} color={value} mb={1} p={3}>
<span className="text-mono flex-auto mr-3">{selector}</span>
<span className="text-mono flex-auto mr-3">{variable}</span>
<span className="text-mono">{value}</span>
</Flex>
))
}
<summary className="h4">See the full list of foreground utilities</summary>
<div className="d-flex flex-wrap mr-md-n3">
{gradientPalettes.map(palette => (
<div className="my-3 col-12 col-md-6 pr-md-3" key={palette.name}>
{palette.values.map(({value, variable, slug}) => (
<Flex flexJustify="space-between" bg={overlayColor(value)} color={value} mb={1} p={3} key={slug}>
<span className="text-mono flex-auto mr-3">.{slug}</span>
<span className="text-mono flex-auto mr-3">{variable}</span>
<span className="text-mono">{value}</span>
</Flex>
))}
</div>
))}
</div>
Expand Down

0 comments on commit 548c127

Please sign in to comment.