@beydesign/storybook 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +9 -0
- package/dist/index.js +9 -0
- package/dist/stories/Avatar.d.ts +4 -0
- package/dist/stories/Avatar.js +79 -0
- package/dist/stories/Avatar.stories.d.ts +8 -0
- package/dist/stories/Avatar.stories.js +76 -0
- package/dist/stories/Badge.stories.d.ts +11 -0
- package/dist/stories/Badge.stories.js +98 -0
- package/dist/stories/Bagde.d.ts +3 -0
- package/dist/stories/Bagde.js +113 -0
- package/dist/stories/Button.js +30 -13
- package/dist/stories/Checkbox.d.ts +3 -0
- package/dist/stories/Checkbox.js +66 -0
- package/dist/stories/Checkbox.stories.d.ts +13 -0
- package/dist/stories/Checkbox.stories.js +121 -0
- package/dist/stories/Colors.d.ts +1 -4
- package/dist/stories/Colors.js +251 -6
- package/dist/stories/Colors.stories.js +2 -1
- package/dist/stories/Typography.d.ts +4 -0
- package/dist/stories/Typography.js +36 -0
- package/dist/stories/Typography.stories.d.ts +25 -0
- package/dist/stories/Typography.stories.js +189 -0
- package/dist/stories/types/avatar.d.ts +44 -0
- package/dist/stories/types/avatar.js +28 -0
- package/dist/stories/types/badge.d.ts +47 -0
- package/dist/stories/types/badge.js +25 -0
- package/dist/stories/types/button.d.ts +2 -2
- package/dist/stories/types/checkbox.d.ts +26 -0
- package/dist/stories/types/checkbox.js +5 -0
- package/dist/stories/types/typography.d.ts +43 -0
- package/dist/stories/types/typography.js +27 -0
- package/package.json +2 -2
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { Checkbox } from './Checkbox';
|
|
2
|
+
import { CheckboxType } from './types/checkbox';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'Design System/Components/Checkbox',
|
|
5
|
+
component: Checkbox,
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: 'centered',
|
|
8
|
+
design: {
|
|
9
|
+
type: 'figspec',
|
|
10
|
+
url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4646-6014&t=WuGtJ4j0CjG68xIe-1',
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
label: {
|
|
16
|
+
control: 'text',
|
|
17
|
+
description: 'Checkbox label',
|
|
18
|
+
table: {
|
|
19
|
+
type: { summary: 'string' },
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
type: {
|
|
23
|
+
control: 'select',
|
|
24
|
+
description: 'Checkbox type variant',
|
|
25
|
+
options: Object.values(CheckboxType),
|
|
26
|
+
table: {
|
|
27
|
+
type: { summary: 'string' },
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
checked: {
|
|
31
|
+
control: 'boolean',
|
|
32
|
+
description: 'Checkbox checked state',
|
|
33
|
+
table: {
|
|
34
|
+
type: { summary: 'boolean' },
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
disabled: {
|
|
38
|
+
control: 'boolean',
|
|
39
|
+
description: 'Checkbox disabled state',
|
|
40
|
+
table: {
|
|
41
|
+
type: { summary: 'boolean' },
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
required: {
|
|
45
|
+
control: 'boolean',
|
|
46
|
+
description: 'Checkbox required state',
|
|
47
|
+
table: {
|
|
48
|
+
type: { summary: 'boolean' },
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
export default meta;
|
|
54
|
+
export const Default = {
|
|
55
|
+
args: {
|
|
56
|
+
label: 'Select Me',
|
|
57
|
+
type: CheckboxType.Checkbox,
|
|
58
|
+
required: true,
|
|
59
|
+
checked: false,
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
export const Checked = {
|
|
63
|
+
args: {
|
|
64
|
+
label: 'Select Me',
|
|
65
|
+
type: CheckboxType.Checkbox,
|
|
66
|
+
required: true,
|
|
67
|
+
checked: true,
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
export const DisabledUnchecked = {
|
|
71
|
+
args: {
|
|
72
|
+
label: 'Select Me',
|
|
73
|
+
type: CheckboxType.Checkbox,
|
|
74
|
+
required: true,
|
|
75
|
+
checked: false,
|
|
76
|
+
disabled: true,
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
export const DisabledChecked = {
|
|
80
|
+
args: {
|
|
81
|
+
label: 'Select Me',
|
|
82
|
+
type: CheckboxType.Checkbox,
|
|
83
|
+
required: true,
|
|
84
|
+
checked: true,
|
|
85
|
+
disabled: true,
|
|
86
|
+
},
|
|
87
|
+
};
|
|
88
|
+
export const Radio = {
|
|
89
|
+
args: {
|
|
90
|
+
label: 'Radio',
|
|
91
|
+
type: CheckboxType.Radio,
|
|
92
|
+
required: true,
|
|
93
|
+
checked: false,
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
export const RadioChecked = {
|
|
97
|
+
args: {
|
|
98
|
+
label: 'Radio',
|
|
99
|
+
type: CheckboxType.Radio,
|
|
100
|
+
required: true,
|
|
101
|
+
checked: true,
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
export const RadioDisabledUnchecked = {
|
|
105
|
+
args: {
|
|
106
|
+
label: 'Radio',
|
|
107
|
+
type: CheckboxType.Radio,
|
|
108
|
+
required: true,
|
|
109
|
+
checked: false,
|
|
110
|
+
disabled: true,
|
|
111
|
+
},
|
|
112
|
+
};
|
|
113
|
+
export const RadioDisabledChecked = {
|
|
114
|
+
args: {
|
|
115
|
+
label: 'Radio',
|
|
116
|
+
type: CheckboxType.Radio,
|
|
117
|
+
required: true,
|
|
118
|
+
checked: true,
|
|
119
|
+
disabled: true,
|
|
120
|
+
},
|
|
121
|
+
};
|
package/dist/stories/Colors.d.ts
CHANGED
package/dist/stories/Colors.js
CHANGED
|
@@ -1,9 +1,254 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import styles from './Colors.module.css';
|
|
4
|
+
import { Typography } from './Typography';
|
|
5
|
+
import { TypographySize, TypographyWeight } from './types/typography';
|
|
6
|
+
const ColorSwatch = ({ name, value }) => {
|
|
7
|
+
const [copied, setCopied] = useState(false);
|
|
8
|
+
const isGradient = value.includes('linear-gradient');
|
|
9
|
+
// Get the actual color value from CSS variable
|
|
10
|
+
const getComputedValue = () => {
|
|
11
|
+
const style = getComputedStyle(document.documentElement);
|
|
12
|
+
const varName = value.match(/var\((.*?)\)/)?.[1] || '';
|
|
13
|
+
return style.getPropertyValue(varName).trim();
|
|
14
|
+
};
|
|
15
|
+
const displayValue = isGradient
|
|
16
|
+
? value.replace(/var\((.*?)\)/g, (_, p1) => {
|
|
17
|
+
const style = getComputedStyle(document.documentElement);
|
|
18
|
+
return style.getPropertyValue(p1);
|
|
19
|
+
})
|
|
20
|
+
: getComputedValue();
|
|
21
|
+
const handleCopy = () => {
|
|
22
|
+
navigator.clipboard.writeText(displayValue);
|
|
23
|
+
setCopied(true);
|
|
24
|
+
setTimeout(() => setCopied(false), 1500);
|
|
25
|
+
};
|
|
26
|
+
return (_jsxs("div", { className: styles.swatch, onClick: handleCopy, children: [_jsx("div", { className: styles.color, style: {
|
|
27
|
+
background: isGradient ? displayValue : value,
|
|
28
|
+
backgroundSize: 'cover',
|
|
29
|
+
} }), _jsxs("div", { className: styles.details, children: [_jsx("div", { className: styles.name, children: _jsx(Typography, { text: name.replace(/^--primitives-desktop-(?:primary|secondary)-/, ''), size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }) }), _jsx("div", { className: styles.value, children: _jsx(Typography, { text: displayValue, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }), _jsx("div", { className: `${styles.copyIndicator} ${copied ? styles.visible : ''}`, children: "Copied!" })] })] }));
|
|
30
|
+
};
|
|
31
|
+
const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { text: title, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
|
|
2
32
|
export const Colors = () => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
33
|
+
// Group colors by their categories
|
|
34
|
+
const primitives = {
|
|
35
|
+
'Brand Violet': {
|
|
36
|
+
'--primitives-desktop-primary-brand-violet-25': 'var(--primitives-desktop-primary-brand-violet-25)',
|
|
37
|
+
'--primitives-desktop-primary-brand-violet-50': 'var(--primitives-desktop-primary-brand-violet-50)',
|
|
38
|
+
'--primitives-desktop-primary-brand-violet-100': 'var(--primitives-desktop-primary-brand-violet-100)',
|
|
39
|
+
'--primitives-desktop-primary-brand-violet-200': 'var(--primitives-desktop-primary-brand-violet-200)',
|
|
40
|
+
'--primitives-desktop-primary-brand-violet-300': 'var(--primitives-desktop-primary-brand-violet-300)',
|
|
41
|
+
'--primitives-desktop-primary-brand-violet-400': 'var(--primitives-desktop-primary-brand-violet-400)',
|
|
42
|
+
'--primitives-desktop-primary-brand-violet-500': 'var(--primitives-desktop-primary-brand-violet-500)',
|
|
43
|
+
'--primitives-desktop-primary-brand-violet-600': 'var(--primitives-desktop-primary-brand-violet-600)',
|
|
44
|
+
'--primitives-desktop-primary-brand-violet-700': 'var(--primitives-desktop-primary-brand-violet-700)',
|
|
45
|
+
'--primitives-desktop-primary-brand-violet-800': 'var(--primitives-desktop-primary-brand-violet-800)',
|
|
46
|
+
'--primitives-desktop-primary-brand-violet-900': 'var(--primitives-desktop-primary-brand-violet-900)',
|
|
47
|
+
'--primitives-desktop-primary-brand-violet-950': 'var(--primitives-desktop-primary-brand-violet-950)',
|
|
48
|
+
},
|
|
49
|
+
Grays: {
|
|
50
|
+
'--primitives-desktop-primary-gray-25': 'var(--primitives-desktop-primary-gray-25)',
|
|
51
|
+
'--primitives-desktop-primary-gray-50': 'var(--primitives-desktop-primary-gray-50)',
|
|
52
|
+
'--primitives-desktop-primary-gray-100': 'var(--primitives-desktop-primary-gray-100)',
|
|
53
|
+
'--primitives-desktop-primary-gray-200': 'var(--primitives-desktop-primary-gray-200)',
|
|
54
|
+
'--primitives-desktop-primary-gray-300': 'var(--primitives-desktop-primary-gray-300)',
|
|
55
|
+
'--primitives-desktop-primary-gray-400': 'var(--primitives-desktop-primary-gray-400)',
|
|
56
|
+
'--primitives-desktop-primary-gray-500': 'var(--primitives-desktop-primary-gray-500)',
|
|
57
|
+
'--primitives-desktop-primary-gray-600': 'var(--primitives-desktop-primary-gray-600)',
|
|
58
|
+
'--primitives-desktop-primary-gray-700': 'var(--primitives-desktop-primary-gray-700)',
|
|
59
|
+
'--primitives-desktop-primary-gray-800': 'var(--primitives-desktop-primary-gray-800)',
|
|
60
|
+
'--primitives-desktop-primary-gray-900': 'var(--primitives-desktop-primary-gray-900)',
|
|
61
|
+
'--primitives-desktop-primary-gray-950': 'var(--primitives-desktop-primary-gray-950)',
|
|
62
|
+
},
|
|
63
|
+
Red: {
|
|
64
|
+
'--primitives-desktop-primary-red-25': 'var(--primitives-desktop-primary-red-25)',
|
|
65
|
+
'--primitives-desktop-primary-red-50': 'var(--primitives-desktop-primary-red-50)',
|
|
66
|
+
'--primitives-desktop-primary-red-100': 'var(--primitives-desktop-primary-red-100)',
|
|
67
|
+
'--primitives-desktop-primary-red-200': 'var(--primitives-desktop-primary-red-200)',
|
|
68
|
+
'--primitives-desktop-primary-red-300': 'var(--primitives-desktop-primary-red-300)',
|
|
69
|
+
'--primitives-desktop-primary-red-400': 'var(--primitives-desktop-primary-red-400)',
|
|
70
|
+
'--primitives-desktop-primary-red-500': 'var(--primitives-desktop-primary-red-500)',
|
|
71
|
+
'--primitives-desktop-primary-red-600': 'var(--primitives-desktop-primary-red-600)',
|
|
72
|
+
'--primitives-desktop-primary-red-700': 'var(--primitives-desktop-primary-red-700)',
|
|
73
|
+
'--primitives-desktop-primary-red-800': 'var(--primitives-desktop-primary-red-800)',
|
|
74
|
+
'--primitives-desktop-primary-red-900': 'var(--primitives-desktop-primary-red-900)',
|
|
75
|
+
'--primitives-desktop-primary-red-950': 'var(--primitives-desktop-primary-red-950)',
|
|
76
|
+
},
|
|
77
|
+
Success: {
|
|
78
|
+
'--primitives-desktop-primary-success-25': 'var(--primitives-desktop-primary-success-25)',
|
|
79
|
+
'--primitives-desktop-primary-success-50': 'var(--primitives-desktop-primary-success-50)',
|
|
80
|
+
'--primitives-desktop-primary-success-100': 'var(--primitives-desktop-primary-success-100)',
|
|
81
|
+
'--primitives-desktop-primary-success-200': 'var(--primitives-desktop-primary-success-200)',
|
|
82
|
+
'--primitives-desktop-primary-success-300': 'var(--primitives-desktop-primary-success-300)',
|
|
83
|
+
'--primitives-desktop-primary-success-400': 'var(--primitives-desktop-primary-success-400)',
|
|
84
|
+
'--primitives-desktop-primary-success-500': 'var(--primitives-desktop-primary-success-500)',
|
|
85
|
+
'--primitives-desktop-primary-success-600': 'var(--primitives-desktop-primary-success-600)',
|
|
86
|
+
'--primitives-desktop-primary-success-700': 'var(--primitives-desktop-primary-success-700)',
|
|
87
|
+
'--primitives-desktop-primary-success-800': 'var(--primitives-desktop-primary-success-800)',
|
|
88
|
+
'--primitives-desktop-primary-success-900': 'var(--primitives-desktop-primary-success-900)',
|
|
89
|
+
'--primitives-desktop-primary-success-950': 'var(--primitives-desktop-primary-success-950)',
|
|
90
|
+
},
|
|
91
|
+
'Brand Lemon': {
|
|
92
|
+
'--primitives-desktop-primary-brand-lemon-25': 'var(--primitives-desktop-primary-brand-lemon-25)',
|
|
93
|
+
'--primitives-desktop-primary-brand-lemon-50': 'var(--primitives-desktop-primary-brand-lemon-50)',
|
|
94
|
+
'--primitives-desktop-primary-brand-lemon-100': 'var(--primitives-desktop-primary-brand-lemon-100)',
|
|
95
|
+
'--primitives-desktop-primary-brand-lemon-200': 'var(--primitives-desktop-primary-brand-lemon-200)',
|
|
96
|
+
'--primitives-desktop-primary-brand-lemon-300': 'var(--primitives-desktop-primary-brand-lemon-300)',
|
|
97
|
+
'--primitives-desktop-primary-brand-lemon-400': 'var(--primitives-desktop-primary-brand-lemon-400)',
|
|
98
|
+
'--primitives-desktop-primary-brand-lemon-500': 'var(--primitives-desktop-primary-brand-lemon-500)',
|
|
99
|
+
'--primitives-desktop-primary-brand-lemon-600': 'var(--primitives-desktop-primary-brand-lemon-600)',
|
|
100
|
+
'--primitives-desktop-primary-brand-lemon-700': 'var(--primitives-desktop-primary-brand-lemon-700)',
|
|
101
|
+
'--primitives-desktop-primary-brand-lemon-800': 'var(--primitives-desktop-primary-brand-lemon-800)',
|
|
102
|
+
'--primitives-desktop-primary-brand-lemon-900': 'var(--primitives-desktop-primary-brand-lemon-900)',
|
|
103
|
+
'--primitives-desktop-primary-brand-lemon-950': 'var(--primitives-desktop-primary-brand-lemon-950)',
|
|
104
|
+
},
|
|
105
|
+
Yellow: {
|
|
106
|
+
'--primitives-desktop-primary-yellow-25': 'var(--primitives-desktop-primary-yellow-25)',
|
|
107
|
+
'--primitives-desktop-primary-yellow-50': 'var(--primitives-desktop-primary-yellow-50)',
|
|
108
|
+
'--primitives-desktop-primary-yellow-100': 'var(--primitives-desktop-primary-yellow-100)',
|
|
109
|
+
'--primitives-desktop-primary-yellow-200': 'var(--primitives-desktop-primary-yellow-200)',
|
|
110
|
+
'--primitives-desktop-primary-yellow-300': 'var(--primitives-desktop-primary-yellow-300)',
|
|
111
|
+
'--primitives-desktop-primary-yellow-400': 'var(--primitives-desktop-primary-yellow-400)',
|
|
112
|
+
'--primitives-desktop-primary-yellow-500': 'var(--primitives-desktop-primary-yellow-500)',
|
|
113
|
+
'--primitives-desktop-primary-yellow-600': 'var(--primitives-desktop-primary-yellow-600)',
|
|
114
|
+
'--primitives-desktop-primary-yellow-700': 'var(--primitives-desktop-primary-yellow-700)',
|
|
115
|
+
'--primitives-desktop-primary-yellow-800': 'var(--primitives-desktop-primary-yellow-800)',
|
|
116
|
+
'--primitives-desktop-primary-yellow-900': 'var(--primitives-desktop-primary-yellow-900)',
|
|
117
|
+
'--primitives-desktop-primary-yellow-950': 'var(--primitives-desktop-primary-yellow-950)',
|
|
118
|
+
},
|
|
119
|
+
Blue: {
|
|
120
|
+
'--primitives-desktop-secondary-blue-25': 'var(--primitives-desktop-secondary-blue-25)',
|
|
121
|
+
'--primitives-desktop-secondary-blue-50': 'var(--primitives-desktop-secondary-blue-50)',
|
|
122
|
+
'--primitives-desktop-secondary-blue-100': 'var(--primitives-desktop-secondary-blue-100)',
|
|
123
|
+
'--primitives-desktop-secondary-blue-200': 'var(--primitives-desktop-secondary-blue-200)',
|
|
124
|
+
'--primitives-desktop-secondary-blue-300': 'var(--primitives-desktop-secondary-blue-300)',
|
|
125
|
+
'--primitives-desktop-secondary-blue-400': 'var(--primitives-desktop-secondary-blue-400)',
|
|
126
|
+
'--primitives-desktop-secondary-blue-500': 'var(--primitives-desktop-secondary-blue-500)',
|
|
127
|
+
'--primitives-desktop-secondary-blue-600': 'var(--primitives-desktop-secondary-blue-600)',
|
|
128
|
+
'--primitives-desktop-secondary-blue-700': 'var(--primitives-desktop-secondary-blue-700)',
|
|
129
|
+
'--primitives-desktop-secondary-blue-800': 'var(--primitives-desktop-secondary-blue-800)',
|
|
130
|
+
'--primitives-desktop-secondary-blue-900': 'var(--primitives-desktop-secondary-blue-900)',
|
|
131
|
+
'--primitives-desktop-secondary-blue-950': 'var(--primitives-desktop-secondary-blue-950)',
|
|
132
|
+
},
|
|
133
|
+
Cyan: {
|
|
134
|
+
'--primitives-desktop-secondary-cyan-25': 'var(--primitives-desktop-secondary-cyan-25)',
|
|
135
|
+
'--primitives-desktop-secondary-cyan-50': 'var(--primitives-desktop-secondary-cyan-50)',
|
|
136
|
+
'--primitives-desktop-secondary-cyan-100': 'var(--primitives-desktop-secondary-cyan-100)',
|
|
137
|
+
'--primitives-desktop-secondary-cyan-200': 'var(--primitives-desktop-secondary-cyan-200)',
|
|
138
|
+
'--primitives-desktop-secondary-cyan-300': 'var(--primitives-desktop-secondary-cyan-300)',
|
|
139
|
+
'--primitives-desktop-secondary-cyan-400': 'var(--primitives-desktop-secondary-cyan-400)',
|
|
140
|
+
'--primitives-desktop-secondary-cyan-500': 'var(--primitives-desktop-secondary-cyan-500)',
|
|
141
|
+
'--primitives-desktop-secondary-cyan-600': 'var(--primitives-desktop-secondary-cyan-600)',
|
|
142
|
+
'--primitives-desktop-secondary-cyan-700': 'var(--primitives-desktop-secondary-cyan-700)',
|
|
143
|
+
'--primitives-desktop-secondary-cyan-800': 'var(--primitives-desktop-secondary-cyan-800)',
|
|
144
|
+
'--primitives-desktop-secondary-cyan-900': 'var(--primitives-desktop-secondary-cyan-900)',
|
|
145
|
+
'--primitives-desktop-secondary-cyan-950': 'var(--primitives-desktop-secondary-cyan-950)',
|
|
146
|
+
},
|
|
147
|
+
Pink: {
|
|
148
|
+
'--primitives-desktop-secondary-pink-25': 'var(--primitives-desktop-secondary-pink-25)',
|
|
149
|
+
'--primitives-desktop-secondary-pink-50': 'var(--primitives-desktop-secondary-pink-50)',
|
|
150
|
+
'--primitives-desktop-secondary-pink-100': 'var(--primitives-desktop-secondary-pink-100)',
|
|
151
|
+
'--primitives-desktop-secondary-pink-200': 'var(--primitives-desktop-secondary-pink-200)',
|
|
152
|
+
'--primitives-desktop-secondary-pink-300': 'var(--primitives-desktop-secondary-pink-300)',
|
|
153
|
+
'--primitives-desktop-secondary-pink-400': 'var(--primitives-desktop-secondary-pink-400)',
|
|
154
|
+
'--primitives-desktop-secondary-pink-500': 'var(--primitives-desktop-secondary-pink-500)',
|
|
155
|
+
'--primitives-desktop-secondary-pink-600': 'var(--primitives-desktop-secondary-pink-600)',
|
|
156
|
+
'--primitives-desktop-secondary-pink-700': 'var(--primitives-desktop-secondary-pink-700)',
|
|
157
|
+
'--primitives-desktop-secondary-pink-800': 'var(--primitives-desktop-secondary-pink-800)',
|
|
158
|
+
'--primitives-desktop-secondary-pink-900': 'var(--primitives-desktop-secondary-pink-900)',
|
|
159
|
+
'--primitives-desktop-secondary-pink-950': 'var(--primitives-desktop-secondary-pink-950)',
|
|
160
|
+
},
|
|
161
|
+
'White & Transparent': {
|
|
162
|
+
'--primitives-desktop-primary-white-0': 'var(--primitives-desktop-primary-white-0)',
|
|
163
|
+
'--primitives-desktop-primary-white-20': 'var(--primitives-desktop-primary-white-20)',
|
|
164
|
+
'--primitives-desktop-primary-white-40': 'var(--primitives-desktop-primary-white-40)',
|
|
165
|
+
'--primitives-desktop-primary-white-100': 'var(--primitives-desktop-primary-white-100)',
|
|
166
|
+
'--primitives-desktop-primary-transparent-violet-50': 'var(--primitives-desktop-primary-transparent-violet-50)',
|
|
167
|
+
'--primitives-desktop-primary-transparent-gray-40': 'var(--primitives-desktop-primary-transparent-gray-40)',
|
|
168
|
+
'--primitives-desktop-primary-transparent-black-60': 'var(--primitives-desktop-primary-transparent-black-60)',
|
|
169
|
+
},
|
|
170
|
+
};
|
|
171
|
+
const semanticColors = {
|
|
172
|
+
Background: {
|
|
173
|
+
'--colors-light-background-bg-brand': 'var(--colors-light-background-bg-brand)',
|
|
174
|
+
'--colors-light-background-bg-brand-hover': 'var(--colors-light-background-bg-brand-hover)',
|
|
175
|
+
'--colors-light-background-bg-brand-lemon': 'var(--colors-light-background-bg-brand-lemon)',
|
|
176
|
+
'--colors-light-background-bg-brand-lemon-hover': 'var(--colors-light-background-bg-brand-lemon-hover)',
|
|
177
|
+
'--colors-light-background-bg-error': 'var(--colors-light-background-bg-error)',
|
|
178
|
+
'--colors-light-background-bg-error-solid': 'var(--colors-light-background-bg-error-solid)',
|
|
179
|
+
'--colors-light-background-bg-error-subtle': 'var(--colors-light-background-bg-error-subtle)',
|
|
180
|
+
'--colors-light-background-bg-success': 'var(--colors-light-background-bg-success)',
|
|
181
|
+
'--colors-light-background-bg-white': 'var(--colors-light-background-bg-white)',
|
|
182
|
+
'--colors-light-background-bg-page': 'var(--colors-light-background-bg-page)',
|
|
183
|
+
'--colors-light-background-bg-page-contrast': 'var(--colors-light-background-bg-page-contrast)',
|
|
184
|
+
'--colors-light-background-bg-element': 'var(--colors-light-background-bg-element)',
|
|
185
|
+
'--colors-light-background-bg-component': 'var(--colors-light-background-bg-component)',
|
|
186
|
+
'--colors-light-background-bg-component-hover': 'var(--colors-light-background-bg-component-hover)',
|
|
187
|
+
'--colors-light-background-bg-component-disabled': 'var(--colors-light-background-bg-component-disabled)',
|
|
188
|
+
'--colors-light-background-bg-component-dark': 'var(--colors-light-background-bg-component-dark)',
|
|
189
|
+
'--colors-light-background-bg-card-highlight': 'var(--colors-light-background-bg-card-highlight)',
|
|
190
|
+
'--colors-light-background-bg-card-highlight-hover': 'var(--colors-light-background-bg-card-highlight-hover)',
|
|
191
|
+
'--colors-light-background-bg-component-contrast-subtle': 'var(--colors-light-background-bg-component-contrast-subtle)',
|
|
192
|
+
'--colors-light-background-bg-component-contrast-subtle-hover': 'var(--colors-light-background-bg-component-contrast-subtle-hover)',
|
|
193
|
+
'--colors-light-background-bg-overlay-1': 'var(--colors-light-background-bg-overlay-1)',
|
|
194
|
+
'--colors-light-background-bg-badge-accent1': 'var(--colors-light-background-bg-badge-accent1)',
|
|
195
|
+
'--colors-light-background-bg-badge-accent2': 'var(--colors-light-background-bg-badge-accent2)',
|
|
196
|
+
'--colors-light-background-bg-badge-accent3': 'var(--colors-light-background-bg-badge-accent3)',
|
|
197
|
+
'--colors-light-background-bg-badge-accent4': 'var(--colors-light-background-bg-badge-accent4)',
|
|
198
|
+
'--colors-light-background-bg-badge-accent5': 'var(--colors-light-background-bg-badge-accent5)',
|
|
199
|
+
'--colors-light-background-bg-button-disabled': 'var(--colors-light-background-bg-button-disabled)',
|
|
200
|
+
'--colors-light-background-bg-overlay-2': 'var(--colors-light-background-bg-overlay-2)',
|
|
201
|
+
},
|
|
202
|
+
Border: {
|
|
203
|
+
'--colors-light-border-border-brand': 'var(--colors-light-border-border-brand)',
|
|
204
|
+
'--colors-light-border-border-brand-hover': 'var(--colors-light-border-border-brand-hover)',
|
|
205
|
+
'--colors-light-border-border-divider': 'var(--colors-light-border-border-divider)',
|
|
206
|
+
'--colors-light-border-border-component': 'var(--colors-light-border-border-component)',
|
|
207
|
+
'--colors-light-border-border-component-active': 'var(--colors-light-border-border-component-active)',
|
|
208
|
+
'--colors-light-border-border-subtle': 'var(--colors-light-border-border-subtle)',
|
|
209
|
+
'--colors-light-border-border-error': 'var(--colors-light-border-border-error)',
|
|
210
|
+
'--colors-light-border-border-white': 'var(--colors-light-border-border-white)',
|
|
211
|
+
},
|
|
212
|
+
Text: {
|
|
213
|
+
'--colors-light-text-text-title': 'var(--colors-light-text-text-title)',
|
|
214
|
+
'--colors-light-text-text-label': 'var(--colors-light-text-text-label)',
|
|
215
|
+
'--colors-light-text-text-paragraph': 'var(--colors-light-text-text-paragraph)',
|
|
216
|
+
'--colors-light-text-text-accent': 'var(--colors-light-text-text-accent)',
|
|
217
|
+
'--colors-light-text-text-clicable': 'var(--colors-light-text-text-clicable)',
|
|
218
|
+
'--colors-light-text-text-clicable-hover': 'var(--colors-light-text-text-clicable-hover)',
|
|
219
|
+
'--colors-light-text-text-subtle': 'var(--colors-light-text-text-subtle)',
|
|
220
|
+
'--colors-light-text-text-white': 'var(--colors-light-text-text-white)',
|
|
221
|
+
'--colors-light-text-text-inactive': 'var(--colors-light-text-text-inactive)',
|
|
222
|
+
'--colors-light-text-text-disabled-white': 'var(--colors-light-text-text-disabled-white)',
|
|
223
|
+
'--colors-light-text-text-placeholder': 'var(--colors-light-text-text-placeholder)',
|
|
224
|
+
'--colors-light-text-text-error': 'var(--colors-light-text-text-error)',
|
|
225
|
+
'--colors-light-text-text-success': 'var(--colors-light-text-text-success)',
|
|
226
|
+
'--colors-light-text-text-warning': 'var(--colors-light-text-text-warning)',
|
|
227
|
+
'--colors-light-text-text-disabled': 'var(--colors-light-text-text-disabled)',
|
|
228
|
+
},
|
|
229
|
+
Foreground: {
|
|
230
|
+
'--colors-light-foreground-fg-white': 'var(--colors-light-foreground-fg-white)',
|
|
231
|
+
'--colors-light-foreground-fg-disabled': 'var(--colors-light-foreground-fg-disabled)',
|
|
232
|
+
'--colors-light-foreground-fg-primary': 'var(--colors-light-foreground-fg-primary)',
|
|
233
|
+
'--colors-light-foreground-fg-secondary': 'var(--colors-light-foreground-fg-secondary)',
|
|
234
|
+
'--colors-light-foreground-fg-secondary-hover': 'var(--colors-light-foreground-fg-secondary-hover)',
|
|
235
|
+
'--colors-light-foreground-fg-tertiary': 'var(--colors-light-foreground-fg-tertiary)',
|
|
236
|
+
'--colors-light-foreground-fg-tertiary-hover': 'var(--colors-light-foreground-fg-tertiary-hover)',
|
|
237
|
+
'--colors-light-foreground-fg-quaternary': 'var(--colors-light-foreground-fg-quaternary)',
|
|
238
|
+
'--colors-light-foreground-fg-quaternary-hover-brand': 'var(--colors-light-foreground-fg-quaternary-hover-brand)',
|
|
239
|
+
'--colors-light-foreground-fg-quaternary-hover': 'var(--colors-light-foreground-fg-quaternary-hover)',
|
|
240
|
+
'--colors-light-foreground-fg-error': 'var(--colors-light-foreground-fg-error)',
|
|
241
|
+
'--colors-light-foreground-fg-success': 'var(--colors-light-foreground-fg-success)',
|
|
242
|
+
'--colors-light-foreground-fg-warning': 'var(--colors-light-foreground-fg-warning)',
|
|
243
|
+
'--colors-light-foreground-fg-brand-primary': 'var(--colors-light-foreground-fg-brand-primary)',
|
|
244
|
+
},
|
|
245
|
+
};
|
|
246
|
+
const gradients = {
|
|
247
|
+
'Global Gradients': {
|
|
248
|
+
'--global-logo-gradient': 'var(--global-logo-gradient)',
|
|
249
|
+
'--global-login-gradient': 'var(--global-login-gradient)',
|
|
250
|
+
'--global-bp-gradient': 'var(--global-bp-gradient)',
|
|
251
|
+
},
|
|
252
|
+
};
|
|
253
|
+
return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { text: "Color System", size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)" }), _jsxs("section", { children: [_jsx(Typography, { text: "Gradients", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { text: "Primitive Colors", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { text: "Semantic Colors", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
|
|
9
254
|
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { TypographySize, TypographyWeight, } from './types/typography';
|
|
3
|
+
export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, }) => {
|
|
4
|
+
const getTypographySizeToken = () => {
|
|
5
|
+
let sizeLc = size?.toLowerCase() || '';
|
|
6
|
+
if (sizeLc.includes('heading')) {
|
|
7
|
+
sizeLc = sizeLc.replace('heading', 'heading-');
|
|
8
|
+
}
|
|
9
|
+
else if (sizeLc.includes('text')) {
|
|
10
|
+
sizeLc = sizeLc.replace('text', 'text-');
|
|
11
|
+
}
|
|
12
|
+
sizeLc = sizeLc.replace(/(\d)(\D)/g, '$1-$2');
|
|
13
|
+
return sizeLc;
|
|
14
|
+
};
|
|
15
|
+
const getTypographyWeightToken = () => {
|
|
16
|
+
let weightLc = weight?.toLowerCase() || '';
|
|
17
|
+
if (weightLc.includes('semibold')) {
|
|
18
|
+
weightLc = weightLc.replace('semibold', 'semi-bold');
|
|
19
|
+
}
|
|
20
|
+
return weightLc;
|
|
21
|
+
};
|
|
22
|
+
const sizeToken = getTypographySizeToken();
|
|
23
|
+
const weightToken = getTypographyWeightToken();
|
|
24
|
+
const fontSize = `var(--global-${sizeToken}-${weightToken}-font-size)`;
|
|
25
|
+
const fontWeight = `var(--global-${sizeToken}-${weightToken}-font-weight)`;
|
|
26
|
+
const fontFamily = `var(--global-${sizeToken}-${weightToken}-font-family)`;
|
|
27
|
+
return (_jsx("span", { style: {
|
|
28
|
+
fontSize: fontSize,
|
|
29
|
+
fontWeight: fontWeight,
|
|
30
|
+
fontFamily: fontFamily + ', sans-serif',
|
|
31
|
+
color: color || 'var(--global-text-text-title)',
|
|
32
|
+
}, children: text }));
|
|
33
|
+
};
|
|
34
|
+
export const Components = () => {
|
|
35
|
+
return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Typography" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsxs("div", { children: [_jsx("h2", { children: "Size: Xl (HeadingXL)" }), _jsx(Typography, { text: "HeadingXL", size: TypographySize.HeadingXL, weight: TypographyWeight.Bold })] }) })] }));
|
|
36
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Typography } from './Typography';
|
|
3
|
+
declare const meta: Meta<typeof Typography>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Typography>;
|
|
6
|
+
export declare const HeadingXLBold: Story;
|
|
7
|
+
export declare const HeadingXLSemiBold: Story;
|
|
8
|
+
export declare const HeadingXLMedium: Story;
|
|
9
|
+
export declare const HeadingXLRegular: Story;
|
|
10
|
+
export declare const HeadingLBold: Story;
|
|
11
|
+
export declare const HeadingLSemiBold: Story;
|
|
12
|
+
export declare const HeadingLMedium: Story;
|
|
13
|
+
export declare const HeadingLRegular: Story;
|
|
14
|
+
export declare const HeadingMBold: Story;
|
|
15
|
+
export declare const Heading2XSRegular: Story;
|
|
16
|
+
export declare const TextLBold: Story;
|
|
17
|
+
export declare const TextLSemiBold: Story;
|
|
18
|
+
export declare const TextLMedium: Story;
|
|
19
|
+
export declare const TextLRegular: Story;
|
|
20
|
+
export declare const TextMBold: Story;
|
|
21
|
+
export declare const TextMSemiBold: Story;
|
|
22
|
+
export declare const TextMMedium: Story;
|
|
23
|
+
export declare const TextMRegular: Story;
|
|
24
|
+
export declare const TextSBold: Story;
|
|
25
|
+
export declare const TextSSemiBold: Story;
|