-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
ColorPlayground.stories.jsx
88 lines (81 loc) · 2.4 KB
/
ColorPlayground.stories.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React from 'react'
import clsx from 'clsx'
import ColorBlock from '../helpers/ColorBlock'
import DarkColorblind from '@primer/primitives/dist/json/colors/dark_colorblind.json'
import DarkTritanopia from '@primer/primitives/dist/json/colors/dark_tritanopia.json'
import DarkDimmed from '@primer/primitives/dist/json/colors/dark_dimmed.json'
import DarkHighContrast from '@primer/primitives/dist/json/colors/dark_high_contrast.json'
import Dark from '@primer/primitives/dist/json/colors/dark.json'
import Light from '@primer/primitives/dist/json/colors/light.json'
import LightColorblind from '@primer/primitives/dist/json/colors/light_colorblind.json'
import LightTritanopia from '@primer/primitives/dist/json/colors/light_tritanopia.json'
/*
* Welcome to the Primer CSS Playground!
* Use the code snippets from [prototyping guide](./Prototyping.stories.mdx) for setting up controls and conditional logic
* Uncomment any code that you need, and feel free to delete whatever gets in your way
* argTypes are optional for prototyping
*/
export default {
title: 'Prototypes/Color',
// layout: 'padded', // add padding around frame
layout: 'fullwidth',
excludeStories: ['ColorPlaygroundTemplate'],
// optional argTypes
argTypes: {
backgroundColor: {
name: 'color',
control: 'color',
description: 'use with an inline style tag to access a colorpicker control'
}
}
}
const ColorPlaygroundTemplate = ({backgroundColor}) => {
return (
<div className="colorBlockWrap">
<ColorBlock backgroundColor={backgroundColor} showValueLabel />
<ColorBlock backgroundColor="var(--color-fg-default)" />
</div>
)
}
export const Color = ColorPlaygroundTemplate.bind({})
Color.args = {
backgroundColor: '#000000'
}
Color.parameters = {
colorPalettes: {
palettes: [
{
name: 'dark_colorblind',
palette: DarkColorblind
},
{
name: 'dark_tritanopia',
palette: DarkTritanopia
},
{
name: 'dark_dimmed',
palette: DarkDimmed
},
{
name: 'dark_high_contrast',
palette: DarkHighContrast
},
{
name: 'dark',
palette: Dark
},
{
name: 'light',
palette: Light
},
{
name: 'light_colorblind',
palette: LightColorblind
},
{
name: 'light_tritanopia',
palette: LightTritanopia
}
]
}
}