primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-04 12:22:17 +03:00
Code Issues Projects Releases Wiki Activity

Temporarly disable color tables

Browse Source
This commit is contained in:
simurai 2020-09-19 19:56:51 +09:00
parent bc0daf9cd3
commit b860ea4e93
4 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/support/color-system.mdx
View File

@ -6,14 +6,17 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/color-s
bundle: support
---
```
import colors from 'primer-colors'
import {Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
import {Link as LinkIcon} from '@primer/octicons-react'
import {palettes, variables} from '../../src/color-variables'
import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
```
## Color palette
```
<Flex flexWrap="wrap" mr={-2}>
{palettes
.concat(
@ -38,9 +41,11 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
</Flex.Item>
))}
</Flex>
```
## Color variables
```
<Flex flexWrap="wrap" mr={[0, 0, -4]}>
{palettes.map(({name, title, value, values}) => (
<Flex id={name} flexDirection="column" width={[1, 1, 1 / 2]} pr={[0, 0, 4]} mb={4}>
@ -70,6 +75,7 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
</Flex>
))}
</Flex>
```
## Color utilities

2
docs/content/support/variables.mdx
View File

@ -5,7 +5,9 @@ status: Experimental
bundle: alerts
---
```
import {Variables, DeprecationIcon} from '../../src/variables'
```
<Variables>

4
docs/content/utilities/borders.mdx
View File

@ -7,8 +7,10 @@ source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
bundle: utilities
---
```
import {palettes, borders} from '../../src/color-variables'
import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
```
Utilities for borders, and border radius.
@ -223,6 +225,7 @@ You can adjust border widths on all sides or each side individually with respons
## Border color utilities
```
<PaletteTable
values={borders}
prefix="bg"
@ -233,3 +236,4 @@ You can adjust border widths on all sides or each side individually with respons
]}
style={{borderSpacing: '0 4px'}}
/>
```

6
docs/content/utilities/colors.mdx
View File

@ -5,6 +5,7 @@ status: Stable
status_issue: 'https://github.com/github/design-systems/issues/97'
---
```
import {Box, BorderBox} from '@primer/components'
import {palettes, allColors} from '../../src/color-variables'
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
@ -16,6 +17,7 @@ const textColumns = [
'variable',
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
]
```
Use color utilities to apply color to the background of elements, text, and borders.
@ -25,6 +27,7 @@ Background colors are most commonly used for filling large blocks of content or
### Background utilities
```
<PaletteTable>
{palettes.map(({name, title, value}) => (
<PaletteTableFragment name={name} type="bg" sparse key={name}>
@ -36,6 +39,7 @@ Background colors are most commonly used for filling large blocks of content or
</PaletteTableFragment>
))}
</PaletteTable>
```
## Text colors
@ -128,6 +132,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
### Text color utilities
```
<PaletteTable columns={textColumns}>
{palettes.map(({name, title, value}) => (
<PaletteTableFragment name={name} type="text" sparse prefix="color" columns={textColumns}>
@ -139,6 +144,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
</PaletteTableFragment>
))}
</PaletteTable>
```
## White background