@groupeactual/design-tokens 1.5.2-beta.5 → 1.6.0-beta.3

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.
Files changed (74) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/css/accordionCss.d.ts +2 -1
  4. package/dist/cjs/types/css/bannerNotificationCss.d.ts +2 -1
  5. package/dist/cjs/types/css/breadcrumbsCss.d.ts +2 -1
  6. package/dist/cjs/types/css/buttonCss.d.ts +2 -1
  7. package/dist/cjs/types/css/chipCss.d.ts +2 -1
  8. package/dist/cjs/types/css/datatable/datatableCss.d.ts +2 -1
  9. package/dist/cjs/types/css/form/autoCompleteCss.d.ts +2 -1
  10. package/dist/cjs/types/css/form/checkboxCss.d.ts +2 -1
  11. package/dist/cjs/types/css/form/checkboxGroupCss.d.ts +2 -1
  12. package/dist/cjs/types/css/form/datePickerCss.d.ts +2 -1
  13. package/dist/cjs/types/css/form/radioCss.d.ts +2 -1
  14. package/dist/cjs/types/css/form/selectCss.d.ts +2 -1
  15. package/dist/cjs/types/css/form/snackbarCss.d.ts +2 -1
  16. package/dist/cjs/types/css/form/textFieldCss.d.ts +2 -1
  17. package/dist/cjs/types/css/iconButtonCss.d.ts +2 -1
  18. package/dist/cjs/types/css/linkCss.d.ts +2 -1
  19. package/dist/cjs/types/css/paginationCss.d.ts +2 -1
  20. package/dist/cjs/types/css/switchCss.d.ts +2 -1
  21. package/dist/cjs/types/css/tooltipCss.d.ts +1 -1
  22. package/dist/cjs/types/helpers/theme.d.ts +1 -1
  23. package/dist/cjs/types/interfaces/theme.d.ts +1 -0
  24. package/dist/cjs/types/useMaterialThemeTokens.d.ts +2 -2
  25. package/dist/es/index.d.ts +22 -21
  26. package/dist/es/index.mjs +1 -1
  27. package/dist/es/index.mjs.map +1 -1
  28. package/dist/es/types/css/accordionCss.d.ts +2 -1
  29. package/dist/es/types/css/bannerNotificationCss.d.ts +2 -1
  30. package/dist/es/types/css/breadcrumbsCss.d.ts +2 -1
  31. package/dist/es/types/css/buttonCss.d.ts +2 -1
  32. package/dist/es/types/css/chipCss.d.ts +2 -1
  33. package/dist/es/types/css/datatable/datatableCss.d.ts +2 -1
  34. package/dist/es/types/css/form/autoCompleteCss.d.ts +2 -1
  35. package/dist/es/types/css/form/checkboxCss.d.ts +2 -1
  36. package/dist/es/types/css/form/checkboxGroupCss.d.ts +2 -1
  37. package/dist/es/types/css/form/datePickerCss.d.ts +2 -1
  38. package/dist/es/types/css/form/radioCss.d.ts +2 -1
  39. package/dist/es/types/css/form/selectCss.d.ts +2 -1
  40. package/dist/es/types/css/form/snackbarCss.d.ts +2 -1
  41. package/dist/es/types/css/form/textFieldCss.d.ts +2 -1
  42. package/dist/es/types/css/iconButtonCss.d.ts +2 -1
  43. package/dist/es/types/css/linkCss.d.ts +2 -1
  44. package/dist/es/types/css/paginationCss.d.ts +2 -1
  45. package/dist/es/types/css/switchCss.d.ts +2 -1
  46. package/dist/es/types/css/tooltipCss.d.ts +1 -1
  47. package/dist/es/types/helpers/theme.d.ts +1 -1
  48. package/dist/es/types/interfaces/theme.d.ts +1 -0
  49. package/dist/es/types/useMaterialThemeTokens.d.ts +2 -2
  50. package/package.json +27 -28
  51. package/src/css/accordionCss.ts +8 -8
  52. package/src/css/bannerNotificationCss.ts +14 -12
  53. package/src/css/breadcrumbsCss.ts +7 -7
  54. package/src/css/buttonCss.ts +4 -4
  55. package/src/css/chipCss.ts +33 -33
  56. package/src/css/datatable/datatableCss.ts +10 -10
  57. package/src/css/form/autoCompleteCss.ts +70 -54
  58. package/src/css/form/checkboxCss.ts +23 -23
  59. package/src/css/form/checkboxGroupCss.ts +13 -13
  60. package/src/css/form/datePickerCss.ts +3 -4
  61. package/src/css/form/radioCss.ts +26 -26
  62. package/src/css/form/selectCss.ts +22 -22
  63. package/src/css/form/snackbarCss.ts +13 -13
  64. package/src/css/form/textFieldCss.ts +7 -7
  65. package/src/css/iconButtonCss.ts +22 -22
  66. package/src/css/linkCss.ts +6 -6
  67. package/src/css/paginationCss.ts +11 -11
  68. package/src/css/switchCss.ts +20 -19
  69. package/src/css/tooltipCss.ts +6 -9
  70. package/src/helpers/theme.ts +18 -16
  71. package/src/interfaces/theme.ts +3 -0
  72. package/src/themes/tokens.ts +3 -3
  73. package/src/useMaterialThemeTokens.ts +31 -31
  74. package/src/useThemeTokens.ts +2 -2
package/src/themes/tokens.ts CHANGED
@@ -8,7 +8,7 @@ export const DefaultWebShadowAllContent = {
8
8
  x: '0',
9
9
  y: '2',
10
10
  blur: '10',
11
- spread: '0'
11
+ spread: '0',
12
12
  };
13
13
  export const DefaultSpacingXxs = '4';
14
14
  export const DefaultSpacingXs = '8';
@@ -94,7 +94,7 @@ export const EpAppShadowAllContent = {
94
94
  x: '0',
95
95
  y: '4',
96
96
  blur: '15',
97
- spread: '0'
97
+ spread: '0',
98
98
  };
99
99
  export const EpAppShadowButtomMenu = {
100
100
  color: '#dedada66',
@@ -102,7 +102,7 @@ export const EpAppShadowButtomMenu = {
102
102
  x: '0',
103
103
  y: '-4',
104
104
  blur: '15',
105
- spread: '0'
105
+ spread: '0',
106
106
  };
107
107
  export const EpBorderRadius4 = '4';
108
108
  export const EpBorderRadius8 = '8';
package/src/useMaterialThemeTokens.ts CHANGED
@@ -1,21 +1,21 @@
1
1
  /* eslint-disable @typescript-eslint/restrict-plus-operands */
2
2
  import { useMemo } from 'react';
3
3
 
4
- import * as tokens from './themes/tokens';
5
- import { Theme } from './interfaces/theme';
6
4
  import { getFontFamilies, getMuiPalette } from './helpers/theme';
5
+ import { MuiTokens, Theme } from './interfaces/theme';
6
+ import * as tokens from './themes/tokens';
7
7
 
8
8
  interface useMaterialThemeTokensReturnType {
9
- muiTokens: Record<string, any>;
9
+ muiTokens: MuiTokens;
10
10
  }
11
11
 
12
12
  const useMaterialThemeTokens = (
13
- themeName: Theme
13
+ themeName: Theme,
14
14
  ): useMaterialThemeTokensReturnType => {
15
15
  const fontWeights = {
16
16
  RobotoBold: 700,
17
17
  RobotoMedium: 500,
18
- RobotoRegular: 400
18
+ RobotoRegular: 400,
19
19
  };
20
20
  const designTokens = tokens as Record<string, string | number | unknown>;
21
21
 
@@ -26,7 +26,7 @@ const useMaterialThemeTokens = (
26
26
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
27
27
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
28
28
  textCase: designTokens[`${themeName}TextCaseNone`],
29
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
29
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
30
30
  };
31
31
  const h2 = {
32
32
  fontWeight: fontWeights.RobotoMedium,
@@ -35,7 +35,7 @@ const useMaterialThemeTokens = (
35
35
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
36
36
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
37
37
  textCase: designTokens[`${themeName}TextCaseNone`],
38
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
38
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
39
39
  };
40
40
  const h3 = {
41
41
  fontWeight: fontWeights.RobotoRegular,
@@ -44,7 +44,7 @@ const useMaterialThemeTokens = (
44
44
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
45
45
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
46
46
  textCase: designTokens[`${themeName}TextCaseNone`],
47
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
47
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
48
48
  };
49
49
  const h4 = {
50
50
  fontWeight: fontWeights.RobotoMedium,
@@ -53,7 +53,7 @@ const useMaterialThemeTokens = (
53
53
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
54
54
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
55
55
  textCase: designTokens[`${themeName}TextCaseNone`],
56
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
56
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
57
57
  };
58
58
  const body1 = {
59
59
  fontWeight: fontWeights.RobotoRegular,
@@ -62,7 +62,7 @@ const useMaterialThemeTokens = (
62
62
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
63
63
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
64
64
  textCase: designTokens[`${themeName}TextCaseNone`],
65
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
65
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
66
66
  };
67
67
  const body2 = {
68
68
  fontWeight: fontWeights.RobotoRegular,
@@ -71,7 +71,7 @@ const useMaterialThemeTokens = (
71
71
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
72
72
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
73
73
  textCase: designTokens[`${themeName}TextCaseNone`],
74
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
74
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
75
75
  };
76
76
 
77
77
  const muiTokensObject = {
@@ -80,10 +80,10 @@ const useMaterialThemeTokens = (
80
80
  defaultProps: {
81
81
  variantMapping: {
82
82
  subtitle1: 'body1',
83
- subtitle2: 'body2'
84
- }
85
- }
86
- }
83
+ subtitle2: 'body2',
84
+ },
85
+ },
86
+ },
87
87
  },
88
88
  typography: {
89
89
  fontFamily: getFontFamilies(themeName).join(','),
@@ -94,7 +94,7 @@ const useMaterialThemeTokens = (
94
94
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
95
95
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
96
96
  textCase: designTokens[`${themeName}TextCaseNone`],
97
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
97
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
98
98
  },
99
99
  h1,
100
100
  header1: h1, // Do not used this, use h1 instead
@@ -113,7 +113,7 @@ const useMaterialThemeTokens = (
113
113
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
114
114
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
115
115
  textCase: designTokens[`${themeName}TextCaseNone`],
116
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
116
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
117
117
  },
118
118
  body1Bold: {
119
119
  fontWeight: fontWeights.RobotoBold,
@@ -122,7 +122,7 @@ const useMaterialThemeTokens = (
122
122
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
123
123
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
124
124
  textCase: designTokens[`${themeName}TextCaseNone`],
125
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
125
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
126
126
  },
127
127
  body2,
128
128
  body2Regular: body2,
@@ -133,7 +133,7 @@ const useMaterialThemeTokens = (
133
133
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
134
134
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
135
135
  textCase: designTokens[`${themeName}TextCaseNone`],
136
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
136
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
137
137
  },
138
138
  body2Bold: {
139
139
  fontWeight: fontWeights.RobotoBold,
@@ -142,7 +142,7 @@ const useMaterialThemeTokens = (
142
142
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
143
143
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing8`] + 'px',
144
144
  textCase: designTokens[`${themeName}TextCaseNone`],
145
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
145
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
146
146
  },
147
147
  caption: {
148
148
  fontWeight: fontWeights.RobotoRegular,
@@ -151,7 +151,7 @@ const useMaterialThemeTokens = (
151
151
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
152
152
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
153
153
  textCase: designTokens[`${themeName}TextCaseNone`],
154
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
154
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
155
155
  },
156
156
  buttonNotif: {
157
157
  fontWeight: fontWeights.RobotoBold,
@@ -160,7 +160,7 @@ const useMaterialThemeTokens = (
160
160
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
161
161
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
162
162
  textCase: designTokens[`${themeName}TextCaseNone`],
163
- textDecoration: designTokens[`${themeName}TextDecorationNone`]
163
+ textDecoration: designTokens[`${themeName}TextDecorationNone`],
164
164
  },
165
165
  link1: {
166
166
  fontWeight: fontWeights.RobotoBold,
@@ -169,7 +169,7 @@ const useMaterialThemeTokens = (
169
169
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
170
170
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
171
171
  textCase: designTokens[`${themeName}TextCaseNone`],
172
- textDecoration: designTokens[`${themeName}TextDecorationUnderline`]
172
+ textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
173
173
  },
174
174
  link2: {
175
175
  fontWeight: fontWeights.RobotoBold,
@@ -178,11 +178,11 @@ const useMaterialThemeTokens = (
178
178
  letterSpacing: designTokens[`${themeName}LetterSpacingNone`],
179
179
  paragraphSpacing: designTokens[`${themeName}ParagraphSpacing0`] + 'px',
180
180
  textCase: designTokens[`${themeName}TextCaseNone`],
181
- textDecoration: designTokens[`${themeName}TextDecorationUnderline`]
181
+ textDecoration: designTokens[`${themeName}TextDecorationUnderline`],
182
182
  },
183
183
  fontWeightRegular: fontWeights.RobotoRegular,
184
184
  fontWeightMedium: fontWeights.RobotoMedium,
185
- fontWeightBold: fontWeights.RobotoBold
185
+ fontWeightBold: fontWeights.RobotoBold,
186
186
  },
187
187
  breakpoints: {
188
188
  values: {
@@ -190,8 +190,8 @@ const useMaterialThemeTokens = (
190
190
  sm: 600,
191
191
  md: 900,
192
192
  lg: 1200,
193
- xl: 1536
194
- }
193
+ xl: 1536,
194
+ },
195
195
  },
196
196
  zIndex: {
197
197
  mobileStepper: 1000,
@@ -201,16 +201,16 @@ const useMaterialThemeTokens = (
201
201
  drawer: 1200,
202
202
  modal: 1300,
203
203
  snackbar: 1400,
204
- tooltip: 1500
204
+ tooltip: 1500,
205
205
  },
206
- palette: getMuiPalette(themeName)
206
+ palette: getMuiPalette(themeName),
207
207
  };
208
208
 
209
209
  const muiTokens = useMemo(
210
210
  () => ({
211
- ...muiTokensObject
211
+ ...muiTokensObject,
212
212
  }),
213
- [muiTokensObject]
213
+ [muiTokensObject],
214
214
  );
215
215
 
216
216
  return { muiTokens };
package/src/useThemeTokens.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useMemo } from 'react';
2
2
 
3
- import { DesignTokens, Theme } from './interfaces/theme';
4
3
  import { getFontFamilies, getTokensByType } from './helpers/theme';
4
+ import { DesignTokens, Theme } from './interfaces/theme';
5
5
 
6
6
  interface useThemeTokensReturnType {
7
7
  tokens: DesignTokens;
@@ -20,7 +20,7 @@ const useThemeTokens = (themeName: Theme): useThemeTokensReturnType => {
20
20
  textDecoration: getTokensByType(themeName, 'TextDecoration'),
21
21
  colors: getTokensByType(themeName, 'Colors'),
22
22
  spacing: getTokensByType(themeName, 'Spacing'),
23
- sizing: getTokensByType(themeName, 'Sizing')
23
+ sizing: getTokensByType(themeName, 'Sizing'),
24
24
  };
25
25
  }, [themeName]);
26
26