@groupeactual/design-tokens 1.7.10 → 2.0.0-beta.0
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/cjs/index.js +23 -1
- package/dist/es/index.d.ts +244 -63
- package/dist/es/index.js +23 -1
- package/dist/types/helpers/theme.helper.d.ts +5 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/interfaces/theme.interface.d.ts +242 -0
- package/dist/types/styled/Accordion.d.ts +4 -0
- package/dist/types/styled/Alert.d.ts +4 -0
- package/dist/types/styled/Autocomplete.d.ts +4 -0
- package/dist/types/styled/Breadcrumbs.d.ts +4 -0
- package/dist/types/styled/Button.d.ts +4 -0
- package/dist/types/styled/Checkbox.d.ts +4 -0
- package/dist/types/styled/Chip.d.ts +4 -0
- package/dist/types/styled/Divider.d.ts +4 -0
- package/dist/types/styled/FormHelperText.d.ts +4 -0
- package/dist/types/styled/FormLabel.d.ts +4 -0
- package/dist/types/styled/IconButton.d.ts +4 -0
- package/dist/types/styled/InputLabel.d.ts +4 -0
- package/dist/types/styled/MenuItem.d.ts +4 -0
- package/dist/types/styled/OutlinedInput.d.ts +4 -0
- package/dist/types/styled/PaginationItem.d.ts +4 -0
- package/dist/types/styled/Radio.d.ts +4 -0
- package/dist/types/styled/Select.d.ts +4 -0
- package/dist/types/styled/Switch.d.ts +4 -0
- package/dist/types/styled/Table.d.ts +4 -0
- package/dist/types/styled/TextField.d.ts +4 -0
- package/dist/types/styled/Typography.d.ts +4 -0
- package/dist/types/theme/theme.d.ts +4 -0
- package/package.json +22 -14
- package/src/helpers/theme.helper.ts +229 -0
- package/src/index.ts +2 -4
- package/src/interfaces/theme.interface.ts +270 -0
- package/src/styled/Accordion.ts +49 -0
- package/src/styled/Alert.ts +83 -0
- package/src/styled/Autocomplete.ts +24 -0
- package/src/styled/Breadcrumbs.ts +29 -0
- package/src/styled/Button.ts +109 -0
- package/src/styled/Checkbox.ts +81 -0
- package/src/styled/Chip.ts +201 -0
- package/src/styled/Divider.ts +24 -0
- package/src/styled/FormHelperText.ts +28 -0
- package/src/styled/FormLabel.ts +30 -0
- package/src/styled/IconButton.ts +161 -0
- package/src/styled/InputLabel.ts +30 -0
- package/src/styled/MenuItem.ts +73 -0
- package/src/styled/OutlinedInput.ts +89 -0
- package/src/styled/PaginationItem.ts +72 -0
- package/src/styled/Radio.ts +67 -0
- package/src/styled/Select.ts +38 -0
- package/src/styled/Switch.ts +62 -0
- package/src/styled/Table.ts +54 -0
- package/src/styled/TextField.ts +105 -0
- package/src/styled/Typography.ts +67 -0
- package/src/theme/theme.tsx +23 -0
- package/src/tokens/tokens.json +667 -6
- package/dist/types/src/css/accordionCss.d.ts +0 -3
- package/dist/types/src/css/bannerNotificationCss.d.ts +0 -3
- package/dist/types/src/css/breadcrumbsCss.d.ts +0 -3
- package/dist/types/src/css/buttonCss.d.ts +0 -3
- package/dist/types/src/css/chipCss.d.ts +0 -3
- package/dist/types/src/css/datatable/datatableCss.d.ts +0 -3
- package/dist/types/src/css/form/autoCompleteCss.d.ts +0 -3
- package/dist/types/src/css/form/checkboxCss.d.ts +0 -3
- package/dist/types/src/css/form/checkboxGroupCss.d.ts +0 -3
- package/dist/types/src/css/form/datePickerCss.d.ts +0 -3
- package/dist/types/src/css/form/radioCss.d.ts +0 -3
- package/dist/types/src/css/form/selectCss.d.ts +0 -3
- package/dist/types/src/css/form/snackbarCss.d.ts +0 -3
- package/dist/types/src/css/form/textFieldCss.d.ts +0 -3
- package/dist/types/src/css/iconButtonCss.d.ts +0 -3
- package/dist/types/src/css/index.d.ts +0 -20
- package/dist/types/src/css/linkCss.d.ts +0 -3
- package/dist/types/src/css/menuItemCss.d.ts +0 -3
- package/dist/types/src/css/paginationCss.d.ts +0 -3
- package/dist/types/src/css/switchCss.d.ts +0 -3
- package/dist/types/src/css/tooltipCss.d.ts +0 -2
- package/dist/types/src/helpers/theme.d.ts +0 -4
- package/dist/types/src/index.d.ts +0 -4
- package/dist/types/src/interfaces/theme.d.ts +0 -16
- package/dist/types/src/themes/tokens.d.ts +0 -167
- package/dist/types/src/useMaterialThemeTokens.d.ts +0 -6
- package/dist/types/src/useThemeTokens.d.ts +0 -6
- package/src/css/accordionCss.ts +0 -30
- package/src/css/bannerNotificationCss.ts +0 -52
- package/src/css/breadcrumbsCss.ts +0 -19
- package/src/css/buttonCss.ts +0 -80
- package/src/css/chipCss.ts +0 -142
- package/src/css/datatable/datatableCss.ts +0 -32
- package/src/css/form/autoCompleteCss.ts +0 -340
- package/src/css/form/checkboxCss.ts +0 -128
- package/src/css/form/checkboxGroupCss.ts +0 -42
- package/src/css/form/datePickerCss.ts +0 -117
- package/src/css/form/radioCss.ts +0 -102
- package/src/css/form/selectCss.ts +0 -233
- package/src/css/form/snackbarCss.ts +0 -42
- package/src/css/form/textFieldCss.ts +0 -188
- package/src/css/iconButtonCss.ts +0 -64
- package/src/css/index.ts +0 -20
- package/src/css/linkCss.ts +0 -15
- package/src/css/menuItemCss.ts +0 -31
- package/src/css/paginationCss.ts +0 -59
- package/src/css/switchCss.ts +0 -58
- package/src/css/tooltipCss.ts +0 -5
- package/src/helpers/theme.ts +0 -89
- package/src/interfaces/theme.ts +0 -34
- package/src/themes/tokens.ts +0 -169
- package/src/useMaterialThemeTokens.ts +0 -218
- package/src/useThemeTokens.ts +0 -30
package/dist/es/index.d.ts
CHANGED
|
@@ -1,68 +1,249 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
fontWeights: Record<string, string | number>;
|
|
4
|
-
lineHeights: Record<string, string | number>;
|
|
5
|
-
fontFamilies: string[];
|
|
6
|
-
letterSpacing: Record<string, string | number>;
|
|
7
|
-
paragraphSpacing: Record<string, string | number>;
|
|
8
|
-
textCase: Record<string, string | number>;
|
|
9
|
-
textDecoration: Record<string, string | number>;
|
|
10
|
-
colors: Record<string, string | Record<string, string>>;
|
|
11
|
-
spacing: Record<string, string | number>;
|
|
12
|
-
sizing: Record<string, string | number>;
|
|
13
|
-
}
|
|
14
|
-
type Types = 'FontSize' | 'FontWeights' | 'LineHeights' | 'Colors' | 'Spacing' | 'Sizing' | 'FontFamilies' | 'LetterSpacing' | 'ParagraphSpacing' | 'TextCase' | 'TextDecoration';
|
|
15
|
-
type Theme = 'Default' | 'Ep';
|
|
16
|
-
type MuiTokens = Record<string, any>;
|
|
1
|
+
import { PaletteMode, ThemeOptions } from '@mui/material';
|
|
2
|
+
import { ColorPartial } from '@mui/material/styles/createPalette';
|
|
17
3
|
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
type Theme = 'Interne' | 'Externe';
|
|
5
|
+
interface ThemeValue {
|
|
6
|
+
value: string;
|
|
7
|
+
type: string;
|
|
20
8
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
type DefaultColors = {
|
|
10
|
+
[key: string]: ThemeValue;
|
|
11
|
+
};
|
|
12
|
+
interface ThemeStructure {
|
|
13
|
+
'DFLib-Variables/Interne'?: TokenStructure;
|
|
14
|
+
'DFLib-Variables/Interne/defaultColors'?: CustomColors;
|
|
15
|
+
'DFLib-Variables/Externe'?: TokenStructure;
|
|
16
|
+
}
|
|
17
|
+
interface PaletteColors {
|
|
18
|
+
primary: ColorCategory;
|
|
19
|
+
secondary: ColorCategory;
|
|
20
|
+
error: ColorCategory;
|
|
21
|
+
warning: ColorCategory;
|
|
22
|
+
success: ColorCategory;
|
|
23
|
+
infos: ColorCategory;
|
|
24
|
+
text: TextColors;
|
|
25
|
+
background: Background;
|
|
26
|
+
border: Border;
|
|
27
|
+
action: {
|
|
28
|
+
hoverOpacity: ThemeValue;
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
interface TokenStructure {
|
|
32
|
+
palette?: PaletteColors;
|
|
33
|
+
Typography?: TypographyTokens;
|
|
34
|
+
spacing?: SpacingTokens;
|
|
35
|
+
radius?: RadiusTokens;
|
|
36
|
+
}
|
|
37
|
+
interface TextDefaultColors {
|
|
38
|
+
greyDark?: ThemeValue;
|
|
39
|
+
}
|
|
40
|
+
interface BackgroundDefaultColors {
|
|
41
|
+
white?: ThemeValue;
|
|
42
|
+
greyXLight?: ThemeValue;
|
|
43
|
+
greyXDarkBgModal?: ThemeValue;
|
|
44
|
+
blueHoverEquivalence?: ThemeValue;
|
|
45
|
+
blueHoverOpacity12?: ThemeValue;
|
|
46
|
+
}
|
|
47
|
+
interface BorderDefaultColors {
|
|
48
|
+
greyLightDefaultBorder?: ThemeValue;
|
|
49
|
+
}
|
|
50
|
+
interface NotificationDefaultColors {
|
|
51
|
+
blueInfo?: ThemeValue;
|
|
52
|
+
greenSuccess?: ThemeValue;
|
|
53
|
+
orangeWarning?: ThemeValue;
|
|
54
|
+
redError?: ThemeValue;
|
|
55
|
+
}
|
|
56
|
+
interface SecondaryDefaultColors {
|
|
57
|
+
blueDark?: ThemeValue;
|
|
58
|
+
blueMedium?: ThemeValue;
|
|
59
|
+
blueLight?: ThemeValue;
|
|
60
|
+
greenDark?: ThemeValue;
|
|
61
|
+
greenMedium?: ThemeValue;
|
|
62
|
+
green?: ThemeValue;
|
|
63
|
+
greenLight?: ThemeValue;
|
|
64
|
+
brown?: ThemeValue;
|
|
65
|
+
brownLight?: ThemeValue;
|
|
66
|
+
orangeLight?: ThemeValue;
|
|
67
|
+
yellow?: ThemeValue;
|
|
68
|
+
purpleDark?: ThemeValue;
|
|
69
|
+
purple?: ThemeValue;
|
|
70
|
+
pink?: ThemeValue;
|
|
71
|
+
pinkLight?: ThemeValue;
|
|
72
|
+
}
|
|
73
|
+
interface CustomColors {
|
|
74
|
+
redActual?: ThemeValue;
|
|
75
|
+
blueClickable?: ThemeValue;
|
|
76
|
+
blueHoverClickable?: ThemeValue;
|
|
77
|
+
blueHoverOpacity12?: ThemeValue;
|
|
78
|
+
greyMediumInactive?: ThemeValue;
|
|
79
|
+
greyXDark?: ThemeValue;
|
|
80
|
+
textColors: TextDefaultColors;
|
|
81
|
+
backgroundColors: BackgroundDefaultColors;
|
|
82
|
+
borderColors: BorderDefaultColors;
|
|
83
|
+
notificationColors: NotificationDefaultColors;
|
|
84
|
+
secondaryColors: SecondaryDefaultColors;
|
|
85
|
+
}
|
|
86
|
+
interface ColorCategory {
|
|
87
|
+
main?: ThemeValue;
|
|
88
|
+
mainChannel?: ThemeValue;
|
|
89
|
+
light?: ThemeValue;
|
|
90
|
+
'light 2'?: ThemeValue;
|
|
91
|
+
'light 3'?: ThemeValue;
|
|
92
|
+
lightChannel?: ThemeValue;
|
|
93
|
+
dark?: ThemeValue;
|
|
94
|
+
'dark 2'?: ThemeValue;
|
|
95
|
+
'dark 3'?: ThemeValue;
|
|
96
|
+
darkChannel?: ThemeValue;
|
|
97
|
+
'secondary contrast text'?: ThemeValue;
|
|
98
|
+
'primary contrast text'?: ThemeValue;
|
|
99
|
+
}
|
|
100
|
+
interface TextColors {
|
|
101
|
+
primary: ThemeValue;
|
|
102
|
+
secondary: ThemeValue;
|
|
103
|
+
disabled: ThemeValue;
|
|
104
|
+
dark: ThemeValue;
|
|
105
|
+
}
|
|
106
|
+
interface Background {
|
|
107
|
+
default: ThemeValue;
|
|
108
|
+
grey: ThemeValue;
|
|
109
|
+
}
|
|
110
|
+
interface Border {
|
|
111
|
+
default: ThemeValue;
|
|
112
|
+
grey: ThemeValue;
|
|
113
|
+
}
|
|
114
|
+
interface TypographyToken {
|
|
115
|
+
fontFamily: {
|
|
116
|
+
value: string;
|
|
117
|
+
type: string;
|
|
118
|
+
};
|
|
119
|
+
fontSize: {
|
|
120
|
+
value: string;
|
|
121
|
+
type: string;
|
|
122
|
+
};
|
|
123
|
+
LineHeight: {
|
|
124
|
+
value: string;
|
|
125
|
+
type: string;
|
|
126
|
+
};
|
|
127
|
+
fontWeight: {
|
|
128
|
+
value: string;
|
|
129
|
+
type: string;
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
interface TypographyTokens {
|
|
133
|
+
h1: TypographyToken;
|
|
134
|
+
h2: TypographyToken;
|
|
135
|
+
h3: TypographyToken;
|
|
136
|
+
h4: TypographyToken;
|
|
137
|
+
h5: TypographyToken;
|
|
138
|
+
h6: TypographyToken;
|
|
139
|
+
subtitle1: TypographyToken;
|
|
140
|
+
subtitle2: TypographyToken;
|
|
141
|
+
body1: TypographyToken;
|
|
142
|
+
body2: TypographyToken;
|
|
143
|
+
button: TypographyToken;
|
|
144
|
+
caption: TypographyToken;
|
|
145
|
+
}
|
|
146
|
+
interface SpacingTokens {
|
|
147
|
+
xxs: ThemeValue;
|
|
148
|
+
xs: ThemeValue;
|
|
149
|
+
sm: ThemeValue;
|
|
150
|
+
md: ThemeValue;
|
|
151
|
+
lg: ThemeValue;
|
|
152
|
+
xl: ThemeValue;
|
|
153
|
+
xxl: ThemeValue;
|
|
154
|
+
}
|
|
155
|
+
interface RadiusTokens {
|
|
156
|
+
small: ThemeValue;
|
|
157
|
+
medium: ThemeValue;
|
|
158
|
+
large: ThemeValue;
|
|
159
|
+
xLarge: ThemeValue;
|
|
160
|
+
}
|
|
161
|
+
type PaletteColorOptions = BasicPaletteColorOptions | ColorPartial;
|
|
162
|
+
interface BasicPaletteColorOptions {
|
|
163
|
+
light?: string;
|
|
164
|
+
lightChannel?: string;
|
|
165
|
+
light2?: string;
|
|
166
|
+
light3?: string;
|
|
167
|
+
main: string;
|
|
168
|
+
mainChannel?: string;
|
|
169
|
+
dark?: string;
|
|
170
|
+
darkChannel?: string;
|
|
171
|
+
dark2?: string;
|
|
172
|
+
dark3?: string;
|
|
173
|
+
contrastText?: string;
|
|
174
|
+
}
|
|
175
|
+
interface TextPaletteColorOptions {
|
|
176
|
+
secondary?: string;
|
|
177
|
+
primary?: string;
|
|
178
|
+
dark?: string;
|
|
179
|
+
disabled?: string;
|
|
180
|
+
}
|
|
181
|
+
interface BackgroundPaletteColorOptions {
|
|
182
|
+
default?: string;
|
|
183
|
+
paper?: string;
|
|
184
|
+
grey?: string;
|
|
185
|
+
}
|
|
186
|
+
interface BorderPaletteColorOptions {
|
|
187
|
+
default?: string;
|
|
188
|
+
grey?: string;
|
|
189
|
+
}
|
|
190
|
+
interface PaletteDefaultColors {
|
|
191
|
+
redActual?: string;
|
|
192
|
+
blueClickable?: string;
|
|
193
|
+
blueHoverClickable?: string;
|
|
194
|
+
greyMediumInactive?: string;
|
|
195
|
+
greyXDark?: string;
|
|
196
|
+
greyDark?: string;
|
|
197
|
+
white?: string;
|
|
198
|
+
greyXLight?: string;
|
|
199
|
+
greyXDarkBgModal?: string;
|
|
200
|
+
blueHoverEquivalence?: string;
|
|
201
|
+
blueHoverOpacity12?: string;
|
|
202
|
+
greyLightDefaultBorder?: string;
|
|
203
|
+
blueInfo?: string;
|
|
204
|
+
greenSuccess?: string;
|
|
205
|
+
orangeWarning?: string;
|
|
206
|
+
redError?: string;
|
|
207
|
+
blueDark?: string;
|
|
208
|
+
blueMedium?: string;
|
|
209
|
+
blueLight?: string;
|
|
210
|
+
greenDark?: string;
|
|
211
|
+
greenMedium?: string;
|
|
212
|
+
green?: string;
|
|
213
|
+
greenLight?: string;
|
|
214
|
+
brown?: string;
|
|
215
|
+
brownLight?: string;
|
|
216
|
+
orangeLight?: string;
|
|
217
|
+
yellow?: string;
|
|
218
|
+
purpleDark?: string;
|
|
219
|
+
purple?: string;
|
|
220
|
+
pink?: string;
|
|
221
|
+
pinkLight?: string;
|
|
222
|
+
}
|
|
223
|
+
interface PaletteDS extends PaletteDefaultColors {
|
|
224
|
+
primary?: BasicPaletteColorOptions;
|
|
225
|
+
secondary?: BasicPaletteColorOptions;
|
|
226
|
+
error?: BasicPaletteColorOptions;
|
|
227
|
+
warning?: BasicPaletteColorOptions;
|
|
228
|
+
success?: BasicPaletteColorOptions;
|
|
229
|
+
info?: BasicPaletteColorOptions;
|
|
230
|
+
text?: TextPaletteColorOptions;
|
|
231
|
+
border?: BorderPaletteColorOptions;
|
|
232
|
+
}
|
|
233
|
+
interface MuiTokens {
|
|
234
|
+
palette: any;
|
|
235
|
+
typography: any;
|
|
236
|
+
}
|
|
237
|
+
type SpacingArgument = number | string;
|
|
238
|
+
interface Spacing {
|
|
239
|
+
(): string;
|
|
240
|
+
(_value: SpacingArgument): string;
|
|
241
|
+
(_topBottom: SpacingArgument, _rightLeft: SpacingArgument): string;
|
|
242
|
+
(_top: SpacingArgument, _rightLeft: SpacingArgument, _bottom: SpacingArgument): string;
|
|
243
|
+
(_top: SpacingArgument, _right: SpacingArgument, _bottom: SpacingArgument, _left: SpacingArgument): string;
|
|
25
244
|
}
|
|
26
|
-
declare const useMaterialThemeTokens: (themeName: Theme) => useMaterialThemeTokensReturnType;
|
|
27
|
-
|
|
28
|
-
declare const AccordionCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
29
|
-
|
|
30
|
-
declare const ButtonCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
31
|
-
|
|
32
|
-
declare const TooltipCss: () => Record<string, unknown>;
|
|
33
|
-
|
|
34
|
-
declare const ChipCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
35
|
-
|
|
36
|
-
declare const PaginationCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
37
|
-
|
|
38
|
-
declare const bannerNotificationCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
39
|
-
|
|
40
|
-
declare const AutoCompleteCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
41
|
-
|
|
42
|
-
declare const CheckboxCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
43
|
-
|
|
44
|
-
declare const CheckboxGroupCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
45
|
-
|
|
46
|
-
declare const RadioCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
47
|
-
|
|
48
|
-
declare const SelectCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
49
|
-
|
|
50
|
-
declare const SnackbarCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
51
|
-
|
|
52
|
-
declare const TextFieldCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
53
|
-
|
|
54
|
-
declare const LinkCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
55
|
-
|
|
56
|
-
declare const BreadcrumbsCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
57
|
-
|
|
58
|
-
declare const SwitchCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
59
|
-
|
|
60
|
-
declare const DatePickerCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
61
|
-
|
|
62
|
-
declare const DatatableCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
63
|
-
|
|
64
|
-
declare const IconButtonCss: (muiTokens: MuiTokens) => Record<string, unknown>;
|
|
65
245
|
|
|
66
|
-
declare const
|
|
246
|
+
declare const theme: (themeName: Theme, mode?: PaletteMode) => ThemeOptions;
|
|
67
247
|
|
|
68
|
-
export {
|
|
248
|
+
export { theme };
|
|
249
|
+
export type { Background, BackgroundDefaultColors, BackgroundPaletteColorOptions, BasicPaletteColorOptions, Border, BorderDefaultColors, BorderPaletteColorOptions, ColorCategory, CustomColors, DefaultColors, MuiTokens, NotificationDefaultColors, PaletteColorOptions, PaletteColors, PaletteDS, PaletteDefaultColors, RadiusTokens, SecondaryDefaultColors, Spacing, SpacingArgument, SpacingTokens, TextColors, TextDefaultColors, TextPaletteColorOptions, Theme, ThemeStructure, ThemeValue, TokenStructure, TypographyToken, TypographyTokens };
|