60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import TabSection from 'containers/TabSection/index';
|
||
|
|
import './index.scss';
|
||
|
|
|
||
|
|
const COLORS = [
|
||
|
|
['gray-base', 'gray-darker', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'],
|
||
|
|
[
|
||
|
|
'brand-primary-darker',
|
||
|
|
'brand-primary-dark',
|
||
|
|
'brand-primary',
|
||
|
|
'brand-primary-light',
|
||
|
|
'brand-primary-lighter'
|
||
|
|
],
|
||
|
|
['brand-info-darker', 'brand-info-dark', 'brand-info', 'brand-info-light', 'brand-info-lighter'],
|
||
|
|
[
|
||
|
|
'brand-success-darker',
|
||
|
|
'brand-success-dark',
|
||
|
|
'brand-success',
|
||
|
|
'brand-success-light',
|
||
|
|
'brand-success-lighter'
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'brand-warning-darker',
|
||
|
|
'brand-warning-dark',
|
||
|
|
'brand-warning',
|
||
|
|
'brand-warning-light',
|
||
|
|
'brand-warning-lighter'
|
||
|
|
],
|
||
|
|
[
|
||
|
|
'brand-danger-darker',
|
||
|
|
'brand-danger-dark',
|
||
|
|
'brand-danger',
|
||
|
|
'brand-danger-light',
|
||
|
|
'brand-danger-lighter'
|
||
|
|
],
|
||
|
|
['text-color', 'text-inverted-color', 'link-color', 'link-hover-color'],
|
||
|
|
['control-bg', 'control-color', 'control-border']
|
||
|
|
];
|
||
|
|
|
||
|
|
const Palette: React.SFC = () => (
|
||
|
|
<TabSection>
|
||
|
|
<section className="Tab-content">
|
||
|
|
<div className="Tab-content-pane Palette">
|
||
|
|
{COLORS.map(colors => (
|
||
|
|
<div className="Palette-group" key={colors[0]}>
|
||
|
|
{colors.map(c => (
|
||
|
|
<div className="Palette-group-color" key={c}>
|
||
|
|
<div className={`Palette-group-color-blob color--${c}`} />
|
||
|
|
<div className="Palette-group-color-name">{c}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</TabSection>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default Palette;
|