1import type { FunctionComponent, ReactNode } from 'react';
2
3import { ColorItem, ColorPalette } from '@storybook/addon-docs';
4
5import { getTitle } from '../../helpers/title';
6import mdx from './Colors.mdx';
7
8export default {
9    title: getTitle(__filename, false),
10    parameters: {
11        docs: {
12            page: mdx,
13        },
14    },
15};
16
17const UghColorPalette = ColorPalette as FunctionComponent<{ children: ReactNode }>;
18
19const BaseColors = () => (
20    <>
21        <UghColorPalette>
22            <ColorItem
23                title="Primary"
24                subtitle="Protons primary color"
25                colors={['var(--primary)', 'var(--primary-contrast)']}
26            />
27            <ColorItem
28                title="Background"
29                subtitle="Theme background colors"
30                colors={[
31                    'var(--background-norm)',
32                    'var(--background-weak)',
33                    'var(--background-strong)',
34                    'var(--background-invert)',
35                ]}
36            />
37            <ColorItem
38                title="Text"
39                subtitle="Theme text colors"
40                colors={[
41                    'var(--text-norm)',
42                    'var(--text-weak)',
43                    'var(--text-hint)',
44                    'var(--text-disabled)',
45                    'var(--text-invert)',
46                ]}
47            />
48            <ColorItem
49                title="Border"
50                subtitle="Theme border colors"
51                colors={['var(--border-norm)', 'var(--border-weak)']}
52            />
53            <hr />
54            <ColorItem
55                title="Signal Danger"
56                subtitle=""
57                colors={[
58                    'var(--signal-danger-minor-2)',
59                    'var(--signal-danger-minor-1)',
60                    'var(--signal-danger)',
61                    'var(--signal-danger-major-1)',
62                    'var(--signal-danger-major-2)',
63                    'var(--signal-danger-major-3)',
64                    'var(--signal-danger-contrast)',
65                ]}
66            />
67            <ColorItem
68                title="Signal Warning"
69                subtitle=""
70                colors={[
71                    'var(--signal-warning-minor-2)',
72                    'var(--signal-warning-minor-1)',
73                    'var(--signal-warning)',
74                    'var(--signal-warning-major-1)',
75                    'var(--signal-warning-major-2)',
76                    'var(--signal-warning-major-3)',
77                    'var(--signal-warning-contrast)',
78                ]}
79            />
80            <ColorItem
81                title="Signal Success"
82                subtitle=""
83                colors={[
84                    'var(--signal-success-minor-2)',
85                    'var(--signal-success-minor-1)',
86                    'var(--signal-success)',
87                    'var(--signal-success-major-1)',
88                    'var(--signal-success-major-2)',
89                    'var(--signal-success-major-3)',
90                    'var(--signal-success-contrast)',
91                ]}
92            />
93            <ColorItem
94                title="Signal Info"
95                subtitle=""
96                colors={[
97                    'var(--signal-info-minor-2)',
98                    'var(--signal-info-minor-1)',
99                    'var(--signal-info)',
100                    'var(--signal-info-major-1)',
101                    'var(--signal-info-major-2)',
102                    'var(--signal-info-major-3)',
103                    'var(--signal-info-contrast)',
104                ]}
105            />
106            <hr />
107            <ColorItem
108                title="Interaction Default"
109                subtitle=""
110                colors={[
111                    'var(--interaction-default)',
112                    'var(--interaction-default-hover)',
113                    'var(--interaction-default-active)',
114                ]}
115            />
116            <ColorItem
117                title="Interaction Norm"
118                subtitle=""
119                colors={[
120                    'var(--interaction-norm-minor-2)',
121                    'var(--interaction-norm-minor-1)',
122                    'var(--interaction-norm)',
123                    'var(--interaction-norm-major-1)',
124                    'var(--interaction-norm-major-2)',
125                    'var(--interaction-norm-major-3)',
126                    'var(--interaction-norm-contrast)',
127                ]}
128            />
129            <ColorItem
130                title="Interaction Weak"
131                subtitle=""
132                colors={[
133                    'var(--interaction-weak-minor-2)',
134                    'var(--interaction-weak-minor-1)',
135                    'var(--interaction-weak)',
136                    'var(--interaction-weak-major-1)',
137                    'var(--interaction-weak-major-2)',
138                    'var(--interaction-weak-major-3)',
139                    'var(--interaction-weak-contrast)',
140                ]}
141            />
142        </UghColorPalette>
143    </>
144);
145
146export const BaseStandard = () => (
147    <>
148        <div className="ui-standard border rounded p-4">
149            <BaseColors />
150        </div>
151    </>
152);
153
154export const BaseProminent = () => (
155    <>
156        <div className="ui-prominent rounded p-4">
157            <BaseColors />
158        </div>
159    </>
160);