Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit a75ce5e

Browse files
layershifterlayershifter
committed
feat(Theming): add color palette
1 parent 0d969eb commit a75ce5e

28 files changed

+781
-17
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1717

1818
## [Unreleased]
1919

20+
### Documentation
21+
- Add the concept of the color palette @layershifter ([#451](https://github.com/stardust-ui/react/pull/451))
22+
2023
### Fixes
2124
- Add `react-dom` as available import in the editor @mnajdova ([#553](https://github.com/stardust-ui/react/pull/553))
2225
- Fix incorrect and missing filled or outline versions of Teams SVG icons @codepretty ([#552](https://github.com/stardust-ui/react/pull/552))
@@ -26,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
2629

2730
### Features
2831
- Add `render` callback as an option for shorthand value @kuzhelov ([#519](https://github.com/stardust-ui/react/pull/519))
32+
- Add `color` prop to `Divider` component @layershifter ([#451](https://github.com/stardust-ui/react/pull/451))
2933

3034
<!--------------------------------[ v0.13.1 ]------------------------------- -->
3135
## [v0.13.1](https://github.com/stardust-ui/react/tree/v0.13.1) (2018-12-03)

‎docs/src/components/ColorBox.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { ComponentSlotStylesInput, createComponent, Icon, ICSSInJSStyle } from '@stardust-ui/react'
2+
import * as Color from 'color'
3+
import * as _ from 'lodash'
4+
import * as React from 'react'
5+
6+
import CopyToClipboard from './CopyToClipboard'
7+
8+
type ColorBoxProps = {
9+
children?: React.ReactNode
10+
name?: string
11+
rounded?: boolean
12+
size?: 'small' | 'normal' | 'big'
13+
value: string
14+
}
15+
16+
type ColorBoxVariables = {
17+
colorBlack: string
18+
colorWhite: string
19+
fontSize: {
20+
big: string
21+
normal: string
22+
small: string
23+
}
24+
padding: {
25+
big: string
26+
normal: string
27+
small: string
28+
}
29+
}
30+
31+
export const colorBoxVariables = (siteVariables): ColorBoxVariables => ({
32+
colorBlack: siteVariables.colors.black,
33+
colorWhite: siteVariables.colors.white,
34+
fontSize: {
35+
big: '1.25em',
36+
small: '.85em',
37+
normal: '1.25em',
38+
},
39+
padding: {
40+
big: '4rem .75rem .75rem .75rem',
41+
small: '.75rem',
42+
normal: '2.5rem .75rem .75rem .75rem',
43+
},
44+
})
45+
46+
export const colorBoxStyles: ComponentSlotStylesInput<ColorBoxProps, ColorBoxVariables> = {
47+
root: ({ props: p, variables: v }): ICSSInJSStyle => ({
48+
backgroundColor: p.value,
49+
border: '1px solid transparent',
50+
borderRadius: p.rounded && '.25rem',
51+
color: Color(p.value).isDark() ? v.colorWhite : v.colorBlack,
52+
display: 'grid',
53+
gridTemplateColumns: 'repeat(2, 1fr)',
54+
fontSize: v.padding[p.size],
55+
padding: v.padding[p.size],
56+
}),
57+
name: {
58+
fontWeight: 'bold',
59+
},
60+
value: {
61+
fontFamily: 'Monospace',
62+
textAlign: 'right',
63+
userSelect: 'all',
64+
65+
'> span': {
66+
cursor: 'pointer',
67+
},
68+
},
69+
}
70+
71+
const ColorBox = createComponent<ColorBoxProps>({
72+
displayName: 'ColorBox',
73+
render: ({ children, name, value, stardust: { classes } }) => (
74+
<div className={classes.root}>
75+
<div className={classes.name}>{children || _.startCase(name)}</div>
76+
77+
<CopyToClipboard
78+
render={(active, onClick) => (
79+
<div className={classes.value}>
80+
<span onClick={onClick}>
81+
<Icon name={active ? 'checkmark' : 'copy outline'} size="small" />
82+
{value}
83+
</span>
84+
</div>
85+
)}
86+
value={value}
87+
/>
88+
</div>
89+
),
90+
})
91+
92+
ColorBox.defaultProps = {
93+
size: 'normal',
94+
}
95+
96+
export default ColorBox

‎docs/src/components/ColorVariants.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as _ from 'lodash'
2+
import * as React from 'react'
3+
import { createComponent, ComponentSlotStylesInput } from '@stardust-ui/react'
4+
5+
import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
6+
import ColorBox from './ColorBox'
7+
8+
type ColorVariantsProps = {
9+
name: string
10+
}
11+
12+
export const colorVariantsStyles: ComponentSlotStylesInput<ColorVariantsProps> = {
13+
root: {
14+
border: '1px solid transparent',
15+
borderRadius: '.25rem',
16+
overflow: 'hidden',
17+
},
18+
}
19+
20+
const ColorVariants = createComponent<ColorVariantsProps>({
21+
displayName: 'ColorVariants',
22+
render: ({ name, stardust: { classes } }) => (
23+
<ProviderConsumer
24+
render={({ siteVariables: { colors } }) => (
25+
<div className={classes.root}>
26+
<ColorBox name={name} size="big" value={colors[name][500]} />
27+
28+
{_.map(colors[name], (value, variable) => (
29+
<ColorBox key={variable} name={variable} size="small" value={value} />
30+
))}
31+
</div>
32+
)}
33+
/>
34+
),
35+
})
36+
37+
export default ColorVariants

‎docs/src/components/CopyToClipboard.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react'
2+
import * as copyToClipboard from 'copy-to-clipboard'
3+
4+
export type CopyToClipboardProps = {
5+
render: (active, onClick) => React.ReactNode
6+
timeout?: number
7+
value: string
8+
}
9+
10+
type CopyToClipboardState = {
11+
active: boolean
12+
}
13+
14+
class CopyToClipboard extends React.Component<CopyToClipboardProps, CopyToClipboardState> {
15+
state = {
16+
active: false,
17+
}
18+
19+
private timeoutId
20+
21+
static defaultProps = {
22+
timeout: 3000,
23+
}
24+
25+
componentWillUnmount() {
26+
clearTimeout(this.timeoutId)
27+
}
28+
29+
handleClick = () => {
30+
const { timeout, value } = this.props
31+
32+
clearTimeout(this.timeoutId)
33+
34+
this.setState({ active: true })
35+
this.timeoutId = setTimeout(() => {
36+
this.setState({ active: false })
37+
}, timeout)
38+
39+
copyToClipboard(value)
40+
}
41+
42+
render() {
43+
const { render } = this.props
44+
const { active } = this.state
45+
46+
return render(active, this.handleClick)
47+
}
48+
}
49+
50+
export default CopyToClipboard

‎docs/src/components/Sidebar/Sidebar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,9 @@ class Sidebar extends React.Component<any, any> {
225225
<Menu.Item as={NavLink} exact to="/" activeClassName="active">
226226
Introduction
227227
</Menu.Item>
228+
<Menu.Item as={NavLink} exact to="/color-palette" activeClassName="active">
229+
Color Palette
230+
</Menu.Item>
228231
<Menu.Item as={NavLink} exact to="/shorthand-props" activeClassName="active">
229232
Shorthand Props
230233
</Menu.Item>

‎docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import _ from 'lodash'
2+
import React from 'react'
3+
import { Divider, ProviderConsumer } from '@stardust-ui/react'
4+
5+
const DividerExampleColor = () => (
6+
<ProviderConsumer
7+
render={({ siteVariables: { emphasisColors, naturalColors } }) =>
8+
_.map({ ...emphasisColors, ...naturalColors }, (variants, name) => (
9+
<Divider key={name} color={name} content={_.startCase(name)} />
10+
))
11+
}
12+
/>
13+
)
14+
15+
export default DividerExampleColor

‎docs/src/examples/components/Divider/Variations/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
44

55
const Variations = () => (
66
<ExampleSection title="Variations">
7+
<ComponentExample
8+
title="Color"
9+
description="A divider can have different colors."
10+
examplePath="components/Divider/Variations/DividerExampleColor"
11+
/>
712
<ComponentExample
813
title="Size"
914
description="A divider can have different sizes."

‎docs/src/routes.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import DocsLayout from './components/DocsLayout'
66
import DocsRoot from './components/DocsRoot'
77

88
import Accessibility from './views/Accessibility'
9+
import ColorPalette from './views/ColorPalette'
910
import ShorthandProps from './views/ShorthandProps'
1011
import Introduction from './views/Introduction'
1112
import PageNotFound from './views/PageNotFound'
@@ -74,6 +75,7 @@ const Router = () => (
7475
path="/integrate-custom-components"
7576
component={IntegrateCustomComponents}
7677
/>
78+
<DocsLayout exact path="/color-palette" component={ColorPalette} />
7779
<DocsLayout exact path="/*" component={PageNotFound} />
7880
</Switch>
7981
</Switch>

‎docs/src/views/ColorPalette.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { Provider, ProviderConsumer } from '@stardust-ui/react'
2+
import * as faker from 'faker'
3+
import * as _ from 'lodash'
4+
import * as React from 'react'
5+
import { Grid, Header } from 'semantic-ui-react'
6+
7+
import ColorBox, { colorBoxStyles, colorBoxVariables } from 'docs/src/components/ColorBox'
8+
import ColorVariants, { colorVariantsStyles } from 'docs/src/components/ColorVariants'
9+
import DocPage from 'docs/src/components/DocPage/DocPage'
10+
11+
const ColorPalette = () => (
12+
<Provider
13+
theme={{
14+
componentStyles: {
15+
ColorBox: colorBoxStyles,
16+
ColorVariants: colorVariantsStyles,
17+
},
18+
componentVariables: {
19+
ColorBox: colorBoxVariables,
20+
},
21+
}}
22+
>
23+
<ProviderConsumer
24+
render={({ siteVariables: { colors, contextualColors, emphasisColors, naturalColors } }) => (
25+
<DocPage title="Color Palette">
26+
<Header as="h2">Introduction</Header>
27+
<p>
28+
The color palette for a theme has many requirements and constraints. There is a need to
29+
be intentional and functional with color use. We analyzed existing frameworks and picked
30+
the best ideas from them.
31+
</p>
32+
<p>
33+
Each theme should match our color palette types fully. This will allow you to use our
34+
theming features completely and keep your palette structured.
35+
</p>
36+
37+
<Header as="h2">Primitive colors</Header>
38+
<p>
39+
This part of the palette includes only <i>black</i> and <i>white</i> colors, we decided
40+
to separate by semantical ideas. There is nothing blacker than black and nothing whiter
41+
than white.
42+
</p>
43+
44+
<Grid columns={2}>
45+
{_.map(['black', 'white'], color => (
46+
<Grid.Column key={color}>
47+
<ColorBox name={color} rounded size="big" value={colors[color]} />
48+
</Grid.Column>
49+
))}
50+
</Grid>
51+
52+
<Header as="h2">Natural colors</Header>
53+
<p>
54+
This part of palette includes nine colors (note, this number might be different for
55+
non-default theme) that are the most frequently used among popular frameworks. Each
56+
color includes ten gradients, this allows us to satisfy most common needs. This decision
57+
is experienced from Material UI and allows to define more variants than semantical
58+
naming (lightest, lighter, etc.).
59+
</p>
60+
61+
<Grid columns={2}>
62+
{_.map(naturalColors, (variants, color) => (
63+
<Grid.Column key={color}>
64+
<ColorBox name={color} rounded value={colors[color][500]} />
65+
</Grid.Column>
66+
))}
67+
</Grid>
68+
69+
<Header as="h2">Emphasis colors</Header>
70+
<p>This part of the palette includes primary and secondary colors.</p>
71+
72+
<Grid columns={2}>
73+
{_.map(emphasisColors, (variants, color) => (
74+
<Grid.Column key={color}>
75+
<ColorBox name={color} rounded size="big" value={colors[color][500]} />
76+
</Grid.Column>
77+
))}
78+
</Grid>
79+
80+
<Header as="h2">Contextual colors</Header>
81+
<p>
82+
Contextual colors can be used to provide "meaning through colors", however they can be
83+
just aliases for natural colors.
84+
</p>
85+
86+
<Grid columns={2}>
87+
{_.map(contextualColors, (variants, color) => (
88+
<Grid.Column key={color}>
89+
<ColorBox name={color} rounded size="big" value={colors[color][500]} />
90+
</Grid.Column>
91+
))}
92+
</Grid>
93+
94+
<Header as="h2">Text colors</Header>
95+
<p>
96+
Text variants are also provided as a separate color because in the most cases it's not
97+
correct to use grey color for text.
98+
</p>
99+
100+
{_.map(colors.text, (color, variant) => (
101+
<ColorBox key={color} size="small" value={color}>
102+
{`${variant} | ${faker.lorem.sentence(4)}`}
103+
</ColorBox>
104+
))}
105+
106+
<Header as="h2">Color variables</Header>
107+
<Grid columns={2}>
108+
{_.map(
109+
{ ...emphasisColors, ...contextualColors, ...naturalColors },
110+
(variants, color) => (
111+
<Grid.Column key={color}>
112+
<ColorVariants name={color} />
113+
</Grid.Column>
114+
),
115+
)}
116+
</Grid>
117+
</DocPage>
118+
)}
119+
/>
120+
</Provider>
121+
)
122+
123+
export default ColorPalette

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"homepage": "https://github.com/stardust-ui/react#readme",
6060
"dependencies": {
6161
"classnames": "^2.2.5",
62+
"color": "^3.1.0",
6263
"fela": "^6.1.7",
6364
"fela-plugin-fallback-value": "^5.0.17",
6465
"fela-plugin-placeholder-prefixer": "^5.0.18",
@@ -74,6 +75,7 @@
7475
"devDependencies": {
7576
"@babel/standalone": "^7.1.0",
7677
"@types/classnames": "^2.2.4",
78+
"@types/color": "^3.0.0",
7779
"@types/enzyme": "^3.1.14",
7880
"@types/faker": "^4.1.3",
7981
"@types/gulp-load-plugins": "^0.0.31",

0 commit comments

Comments
 (0)