1import clsx from '@proton/utils/clsx';
2
3import { getTitle } from '../../helpers/title';
4import mdx from './Colors.mdx';
5
6export default {
7    title: getTitle(__filename, false),
8    parameters: {
9        docs: {
10            page: mdx,
11        },
12    },
13};
14
15type ColorItemProps = {
16    className: string;
17};
18
19type ColorPaletteProps = {
20    children: React.ReactNode;
21};
22
23const ColorItem = ({ className }: ColorItemProps) => (
24    <div
25        className={clsx(
26            'w-custom text-sm flex items-center justify-center p-4 rounded shadow-norm border user-select',
27            className
28        )}
29        style={{ 'aspect-ratio': '1', '--w-custom': '8em' }}
30    >
31        .{className}
32    </div>
33);
34
35const TextItem = ({ className }: ColorItemProps) => (
36    <div
37        className={clsx(
38            'flex items-center justify-center p-4 rounded shadow-norm border user-select',
39            className,
40            className === 'color-invert' ? 'bg-primary' : ''
41        )}
42    >
43        .{className}
44    </div>
45);
46
47const ColorPalette = ({ children }: ColorPaletteProps) => (
48    <>
49        <strong className="block mb-2">on UI Standard</strong>
50        <div className={clsx('ui-standard border rounded-lg p-4 mb-8 flex flex-wrap gap-4')}>{children}</div>
51        <strong className="block mb-2">on UI prominent</strong>
52        <div className={clsx('ui-prominent border rounded-lg p-4 mb-8 flex flex-wrap gap-4')}>{children}</div>
53    </>
54);
55
56export const BackgroundColors = () => (
57    <>
58        <ColorPalette>
59            <ColorItem className="bg-norm" />
60            <ColorItem className="bg-weak" />
61            <ColorItem className="bg-strong" />
62            <ColorItem className="bg-primary" />
63            <ColorItem className="bg-danger" />
64            <ColorItem className="bg-warning" />
65            <ColorItem className="bg-success" />
66            <ColorItem className="bg-info" />
67        </ColorPalette>
68    </>
69);
70
71export const TextColors = () => (
72    <>
73        <ColorPalette>
74            <TextItem className="color-norm" />
75            <TextItem className="color-weak" />
76            <TextItem className="color-strong" />
77            <TextItem className="color-primary" />
78            <TextItem className="color-danger" />
79            <TextItem className="color-warning" />
80            <TextItem className="color-success" />
81            <TextItem className="color-info" />
82            <TextItem className="color-hint" />
83            <TextItem className="color-disabled" />
84            <TextItem className="color-invert" />
85        </ColorPalette>
86    </>
87);