norma-library 0.6.65 → 0.6.66

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 (165) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/components/Card.js +3 -3
  9. package/dist/esm/components/Card.js.map +1 -1
  10. package/docs/index.md +118 -118
  11. package/package.json +136 -136
  12. package/src/components/Accordion.tsx +39 -39
  13. package/src/components/Avatar.tsx +17 -17
  14. package/src/components/Badge.tsx +14 -14
  15. package/src/components/Box/index.tsx +12 -12
  16. package/src/components/Box/interfaces.ts +3 -3
  17. package/src/components/Box/styles.tsx +22 -22
  18. package/src/components/Breadcrumb/index.tsx +27 -27
  19. package/src/components/Breadcrumb/interface.ts +8 -8
  20. package/src/components/Breadcrumb/styles.tsx +32 -32
  21. package/src/components/Button.tsx +26 -26
  22. package/src/components/Card.tsx +38 -38
  23. package/src/components/ChatMessage.tsx +87 -87
  24. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  25. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  26. package/src/components/CheckBox.tsx +21 -21
  27. package/src/components/DateInput/index.tsx +34 -34
  28. package/src/components/DateInput/interface.ts +13 -13
  29. package/src/components/DateInput/styles.tsx +27 -27
  30. package/src/components/DatePicker.tsx +67 -67
  31. package/src/components/DropDown.tsx +24 -24
  32. package/src/components/IconButton.tsx +37 -37
  33. package/src/components/Icons.tsx +82 -82
  34. package/src/components/Modal.tsx +103 -103
  35. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  36. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  37. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  38. package/src/components/MultiSelectInput/index.tsx +60 -60
  39. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  40. package/src/components/MultiSelectInput/styles.tsx +43 -43
  41. package/src/components/Paper.tsx +12 -12
  42. package/src/components/ProgressBar.tsx +71 -71
  43. package/src/components/RadioGroup.tsx +43 -43
  44. package/src/components/RangerSlider.tsx +65 -65
  45. package/src/components/Select.tsx +74 -74
  46. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  47. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  48. package/src/components/SelectInput/index.tsx +45 -45
  49. package/src/components/SelectInput/interfaces.ts +15 -15
  50. package/src/components/SelectInput/styles.tsx +31 -31
  51. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  52. package/src/components/StatusModal/StatusModal.tsx +58 -58
  53. package/src/components/Svgs.tsx +506 -506
  54. package/src/components/Table/components/header/index.tsx +86 -86
  55. package/src/components/Table/components/header/styles.tsx +59 -59
  56. package/src/components/Table/components/index.tsx +8 -8
  57. package/src/components/Table/components/pagination/index.tsx +39 -39
  58. package/src/components/Table/components/pagination/styles.tsx +28 -28
  59. package/src/components/Table/components/tbody/index.tsx +30 -30
  60. package/src/components/Table/components/tbody/styles.tsx +4 -4
  61. package/src/components/Table/index.tsx +317 -317
  62. package/src/components/Table/interface.ts +23 -23
  63. package/src/components/Table/styles.tsx +117 -117
  64. package/src/components/Tabs.tsx +105 -105
  65. package/src/components/Tag.tsx +33 -33
  66. package/src/components/TextField.tsx +19 -19
  67. package/src/components/TextInput/index.tsx +37 -37
  68. package/src/components/TextInput/interface.ts +9 -9
  69. package/src/components/TextInput/styles.tsx +23 -23
  70. package/src/components/TimeLine.tsx +89 -89
  71. package/src/components/TimePicker.tsx +78 -78
  72. package/src/components/Typography/Text/index.tsx +20 -20
  73. package/src/components/Typography/Text/interfaces.ts +5 -5
  74. package/src/components/Typography/Text/styles.tsx +40 -40
  75. package/src/components/Typography/Title/index.tsx +22 -22
  76. package/src/components/Typography/Title/interfaces.ts +6 -6
  77. package/src/components/Typography/Title/styles.tsx +40 -40
  78. package/src/components/Typography/index.tsx +6 -6
  79. package/src/components/UncontrolledTable/components/header/index.tsx +72 -72
  80. package/src/components/UncontrolledTable/components/header/styles.tsx +66 -66
  81. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  82. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  83. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  84. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  85. package/src/components/UncontrolledTable/components/tbody/styles.tsx +32 -32
  86. package/src/components/UncontrolledTable/index.tsx +223 -223
  87. package/src/components/UncontrolledTable/interface.ts +46 -46
  88. package/src/components/UncontrolledTable/styles.tsx +123 -123
  89. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +58 -58
  90. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +71 -71
  91. package/src/components/UncontrolledTabs/UncontrolledTabsInfo.style.ts +8 -8
  92. package/src/components/index.ts +24 -24
  93. package/src/helpers/alignments.ts +14 -14
  94. package/src/helpers/borders.ts +18 -18
  95. package/src/helpers/colors.ts +264 -264
  96. package/src/helpers/index.ts +5 -5
  97. package/src/helpers/radios.ts +24 -24
  98. package/src/helpers/sizes.ts +72 -72
  99. package/src/hooks/useClickOutside.tsx +18 -18
  100. package/src/index.ts +70 -70
  101. package/src/interfaces/Accordion.ts +12 -12
  102. package/src/interfaces/Avatar.tsx +15 -15
  103. package/src/interfaces/Badge.ts +19 -19
  104. package/src/interfaces/Button.ts +19 -19
  105. package/src/interfaces/Card.ts +11 -11
  106. package/src/interfaces/ChatMessage.ts +12 -12
  107. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  108. package/src/interfaces/CheckBox.ts +27 -27
  109. package/src/interfaces/DatePicker.ts +13 -13
  110. package/src/interfaces/DropDown.ts +14 -14
  111. package/src/interfaces/IconButton.ts +22 -22
  112. package/src/interfaces/Icons.ts +17 -17
  113. package/src/interfaces/Modal.ts +18 -18
  114. package/src/interfaces/Paper.ts +12 -12
  115. package/src/interfaces/ProgressBar.ts +29 -29
  116. package/src/interfaces/RadioGroup.ts +23 -23
  117. package/src/interfaces/RangerSlider.ts +21 -21
  118. package/src/interfaces/Select.ts +17 -17
  119. package/src/interfaces/Tabs.ts +19 -19
  120. package/src/interfaces/Tag.ts +17 -17
  121. package/src/interfaces/TextField.ts +44 -44
  122. package/src/interfaces/TimeLine.ts +11 -11
  123. package/src/interfaces/TimePicker.ts +13 -13
  124. package/src/interfaces/index.ts +23 -23
  125. package/src/providers/NormaProvider.tsx +13 -13
  126. package/src/sample-data-2.json +178 -178
  127. package/src/sample-data.json +177 -177
  128. package/src/stories/Accordion.stories.tsx +65 -65
  129. package/src/stories/Avatar.stories.tsx +123 -123
  130. package/src/stories/Badge.stories.tsx +39 -39
  131. package/src/stories/Box.stories.tsx +35 -35
  132. package/src/stories/Breadcrumb.stories.tsx +44 -44
  133. package/src/stories/Button.stories.tsx +93 -93
  134. package/src/stories/Card.stories.tsx +39 -39
  135. package/src/stories/ChatMessage.stories.tsx +84 -84
  136. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  137. package/src/stories/CheckBox.stories.tsx +88 -88
  138. package/src/stories/DateInput.stories.tsx +51 -51
  139. package/src/stories/DatePicker.stories.tsx +50 -50
  140. package/src/stories/DropDown.stories.tsx +57 -57
  141. package/src/stories/IconButton.stories.tsx +78 -78
  142. package/src/stories/Modal.stories.tsx +246 -246
  143. package/src/stories/ModalStatus.stories.tsx +46 -46
  144. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  145. package/src/stories/Paper.stories.tsx +53 -53
  146. package/src/stories/ProgressBar.stories.tsx +116 -116
  147. package/src/stories/RadioGroup.stories.tsx +87 -87
  148. package/src/stories/RangerSlider.stories.tsx +149 -149
  149. package/src/stories/Select.stories.tsx +100 -100
  150. package/src/stories/SelectInput.stories.tsx +78 -78
  151. package/src/stories/Table.stories.tsx +372 -372
  152. package/src/stories/Tabs.stories.tsx +61 -61
  153. package/src/stories/Tag.stories.tsx +56 -56
  154. package/src/stories/Text.stories.tsx +37 -37
  155. package/src/stories/TextField.stories.tsx +310 -310
  156. package/src/stories/TextInput.stories.tsx +52 -52
  157. package/src/stories/TimeLine.stories.tsx +35 -35
  158. package/src/stories/TimePicker.stories.tsx +87 -87
  159. package/src/stories/Title.stories.tsx +43 -43
  160. package/src/stories/UncontrolledTable.stories.tsx +315 -315
  161. package/src/stories/UncontrolledTabs.stories.tsx +74 -74
  162. package/src/styles/globals.scss +17 -17
  163. package/src/types/index.ts +207 -207
  164. package/src/utils/styledBreakpoints.ts +25 -25
  165. package/vite.config.ts +15 -15
@@ -1,264 +1,264 @@
1
- import { createTheme, PaletteOptions } from '@mui/material/styles';
2
-
3
- export const getPalette = () => {
4
- return {
5
- primary: '#fc7f29',
6
- primaryLight: '#FFDB9F',
7
- primaryMedium: '#FFA84C',
8
- primaryDark: '#B74608',
9
- inherit: '#666666',
10
- secondary: '#43bbf2',
11
- error: '#d63643',
12
- warning: '#ffc300',
13
- info: '#71d5f7',
14
- success: '#6bc235',
15
- white: '#ffffff',
16
- black: '#000000',
17
- helper: '#5a2a79',
18
- secondaryLight: '#D9FCFE',
19
- secondaryMedium: '#71D5F7',
20
- secondaryDark: '#154F8C',
21
- inheritLight: '#A3A3A3',
22
- inheritMedium: '#666666',
23
- inheritDark: '#292929',
24
- whiteLight: '#F5F5F5',
25
- whiteMedium: '#E0E0E0',
26
- whiteDark: '#CCCCCC',
27
- successLight: '#D9F8B0',
28
- successMedium: '#B9EC85',
29
- successDark: '#247010',
30
- errorLight: '#FABEAF',
31
- errorMedium: '#F29085',
32
- errorDark: '#F29085',
33
- warningLight: '#FFF7CC',
34
- warningMedium: '#FFE266',
35
- warningDark: '#936600',
36
- helperLight: '#F3D7F8',
37
- helperMedium: '#BF82D6',
38
- helperDark: '#250D46',
39
- };
40
- };
41
-
42
- export const palette = getPalette();
43
-
44
- export const textColors = {
45
- inherit: palette.inherit,
46
- primary: palette.primary,
47
- secondary: palette.secondary,
48
- error: palette.error,
49
- warning: palette.warning,
50
- info: palette.info,
51
- success: palette.success,
52
- white: palette.white,
53
- black: palette.black,
54
- helper: palette.helper,
55
- primaryLight: palette.primaryLight,
56
- primaryMedium: palette.primaryMedium,
57
- primaryDark: palette.primaryDark,
58
- secondaryLight: palette.secondaryLight,
59
- secondaryMedium: palette.secondaryMedium,
60
- secondaryDark: palette.secondaryDark,
61
- inheritLight: palette.inheritLight,
62
- inheritMedium: palette.inheritMedium,
63
- inheritDark: palette.inheritDark,
64
- whiteLight: palette.whiteLight,
65
- whiteMedium: palette.whiteMedium,
66
- whiteDark: palette.whiteDark,
67
- successLight: palette.successLight,
68
- successMedium: palette.successMedium,
69
- successDark: palette.successDark,
70
- errorLight: palette.errorLight,
71
- errorMedium: palette.errorMedium,
72
- errorDark: palette.errorDark,
73
- warningLight: palette.warningLight,
74
- warningMedium: palette.warningMedium,
75
- warningDark: palette.warningDark,
76
- helperLight: palette.helperLight,
77
- helperMedium: palette.helperMedium,
78
- helperDark: palette.helperDark,
79
- };
80
-
81
- export const backgroundColors = {
82
- inherit: palette.inherit,
83
- primary: palette.primary,
84
- secondary: palette.secondary,
85
- error: palette.error,
86
- warning: palette.warning,
87
- info: palette.info,
88
- success: palette.success,
89
- white: palette.white,
90
- black: palette.black,
91
- primaryLight: palette.primaryLight,
92
- primaryMedium: palette.primaryMedium,
93
- primaryDark: palette.primaryDark,
94
- secondaryLight: palette.secondaryLight,
95
- secondaryMedium: palette.secondaryMedium,
96
- secondaryDark: palette.secondaryDark,
97
- inheritLight: palette.inheritLight,
98
- inheritMedium: palette.inheritMedium,
99
- inheritDark: palette.inheritDark,
100
- whiteLight: palette.whiteLight,
101
- whiteMedium: palette.whiteMedium,
102
- whiteDark: palette.whiteDark,
103
- successLight: palette.successLight,
104
- successMedium: palette.successMedium,
105
- successDark: palette.successDark,
106
- errorLight: palette.errorLight,
107
- errorMedium: palette.errorMedium,
108
- errorDark: palette.errorDark,
109
- warningLight: palette.warningLight,
110
- warningMedium: palette.warningMedium,
111
- warningDark: palette.warningDark,
112
- helperLight: palette.helperLight,
113
- helperMedium: palette.helperMedium,
114
- helperDark: palette.helperDark,
115
- };
116
-
117
- export const olosPalette = {
118
- primary: {
119
- main: palette.primary,
120
- },
121
- secondary: {
122
- main: palette.secondary,
123
- },
124
- error: {
125
- main: palette.error,
126
- },
127
- warning: {
128
- main: palette.warning,
129
- },
130
- info: {
131
- main: palette.info,
132
- },
133
- success: {
134
- main: palette.success,
135
- },
136
- };
137
-
138
- export const newOlosPalette: PaletteOptions = {
139
- primary: {
140
- main: palette.primary,
141
- light: palette.primaryLight,
142
- dark: palette.primaryDark,
143
- contrastText: palette.white,
144
- '500': palette.primaryMedium,
145
- },
146
- secondary: {
147
- main: palette.secondary,
148
- light: palette.secondaryLight,
149
- dark: palette.secondaryDark,
150
- contrastText: palette.white,
151
- '500': palette.secondaryMedium,
152
- },
153
- error: {
154
- main: palette.error,
155
- light: palette.errorLight,
156
- dark: palette.errorDark,
157
- contrastText: palette.white,
158
- '500': palette.errorMedium,
159
- },
160
- warning: {
161
- main: palette.warning,
162
- light: palette.warningLight,
163
- dark: palette.warningDark,
164
- contrastText: palette.white,
165
- '500': palette.warningMedium,
166
- },
167
- info: {
168
- main: palette.inherit,
169
- light: palette.inheritLight,
170
- dark: palette.inheritDark,
171
- contrastText: palette.white,
172
- '500': palette.inheritMedium,
173
- },
174
- success: {
175
- main: palette.success,
176
- light: palette.successLight,
177
- dark: palette.successDark,
178
- contrastText: palette.white,
179
- '500': palette.successMedium,
180
- },
181
- text: {
182
- primary: palette.black,
183
- secondary: palette.primary,
184
- disabled: palette.inherit,
185
- }
186
- };
187
-
188
- export const lightTheme = createTheme({
189
- palette: {
190
- mode: 'light',
191
- ...olosPalette,
192
- },
193
- });
194
-
195
- export const newLightTheme = createTheme({
196
- palette: {
197
- mode: 'light',
198
- ...newOlosPalette,
199
- },
200
- });
201
-
202
- export const darkTheme = createTheme({
203
- palette: {
204
- mode: 'dark',
205
- ...olosPalette,
206
- background: {
207
- default: palette.inheritLight,
208
- paper: palette.inheritDark,
209
- },
210
- },
211
- });
212
-
213
- export const themes = {
214
- light: lightTheme,
215
- dark: darkTheme,
216
- newLight: newLightTheme,
217
- };
218
-
219
- type PaletteKey = keyof typeof getPalette;
220
-
221
- const getColor = (key: PaletteKey) => {
222
- const palette = getPalette();
223
- if (palette.hasOwnProperty(key)) {
224
- return palette[key];
225
- } else {
226
- return '#CCC';
227
- }
228
- };
229
-
230
- const extractRGB = (rgbString: string) => {
231
- if (typeof rgbString === 'string') {
232
- const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
233
-
234
- if (match) {
235
- const r = match[1];
236
- const g = match[2];
237
- const b = match[3];
238
- return `${r},${g},${b}`;
239
- }
240
- }
241
- return null;
242
- };
243
-
244
- const lightenRGB = (rgbString: string, amount = 20) => {
245
- console.log('RGB ==> ', rgbString);
246
- if (typeof rgbString === 'string') {
247
- const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
248
-
249
- if (match) {
250
- const r = parseInt(match[1]);
251
- const g = parseInt(match[2]);
252
- const b = parseInt(match[3]);
253
-
254
- const newR = Math.min(255, r + amount);
255
- const newG = Math.min(255, g + amount);
256
- const newB = Math.min(255, b + amount);
257
-
258
- return `rgb(${newR},${newG},${newB})`;
259
- }
260
- }
261
- return null;
262
- };
263
-
264
- export { getColor, extractRGB, lightenRGB };
1
+ import { createTheme, PaletteOptions } from '@mui/material/styles';
2
+
3
+ export const getPalette = () => {
4
+ return {
5
+ primary: '#fc7f29',
6
+ primaryLight: '#FFDB9F',
7
+ primaryMedium: '#FFA84C',
8
+ primaryDark: '#B74608',
9
+ inherit: '#666666',
10
+ secondary: '#43bbf2',
11
+ error: '#d63643',
12
+ warning: '#ffc300',
13
+ info: '#71d5f7',
14
+ success: '#6bc235',
15
+ white: '#ffffff',
16
+ black: '#000000',
17
+ helper: '#5a2a79',
18
+ secondaryLight: '#D9FCFE',
19
+ secondaryMedium: '#71D5F7',
20
+ secondaryDark: '#154F8C',
21
+ inheritLight: '#A3A3A3',
22
+ inheritMedium: '#666666',
23
+ inheritDark: '#292929',
24
+ whiteLight: '#F5F5F5',
25
+ whiteMedium: '#E0E0E0',
26
+ whiteDark: '#CCCCCC',
27
+ successLight: '#D9F8B0',
28
+ successMedium: '#B9EC85',
29
+ successDark: '#247010',
30
+ errorLight: '#FABEAF',
31
+ errorMedium: '#F29085',
32
+ errorDark: '#F29085',
33
+ warningLight: '#FFF7CC',
34
+ warningMedium: '#FFE266',
35
+ warningDark: '#936600',
36
+ helperLight: '#F3D7F8',
37
+ helperMedium: '#BF82D6',
38
+ helperDark: '#250D46',
39
+ };
40
+ };
41
+
42
+ export const palette = getPalette();
43
+
44
+ export const textColors = {
45
+ inherit: palette.inherit,
46
+ primary: palette.primary,
47
+ secondary: palette.secondary,
48
+ error: palette.error,
49
+ warning: palette.warning,
50
+ info: palette.info,
51
+ success: palette.success,
52
+ white: palette.white,
53
+ black: palette.black,
54
+ helper: palette.helper,
55
+ primaryLight: palette.primaryLight,
56
+ primaryMedium: palette.primaryMedium,
57
+ primaryDark: palette.primaryDark,
58
+ secondaryLight: palette.secondaryLight,
59
+ secondaryMedium: palette.secondaryMedium,
60
+ secondaryDark: palette.secondaryDark,
61
+ inheritLight: palette.inheritLight,
62
+ inheritMedium: palette.inheritMedium,
63
+ inheritDark: palette.inheritDark,
64
+ whiteLight: palette.whiteLight,
65
+ whiteMedium: palette.whiteMedium,
66
+ whiteDark: palette.whiteDark,
67
+ successLight: palette.successLight,
68
+ successMedium: palette.successMedium,
69
+ successDark: palette.successDark,
70
+ errorLight: palette.errorLight,
71
+ errorMedium: palette.errorMedium,
72
+ errorDark: palette.errorDark,
73
+ warningLight: palette.warningLight,
74
+ warningMedium: palette.warningMedium,
75
+ warningDark: palette.warningDark,
76
+ helperLight: palette.helperLight,
77
+ helperMedium: palette.helperMedium,
78
+ helperDark: palette.helperDark,
79
+ };
80
+
81
+ export const backgroundColors = {
82
+ inherit: palette.inherit,
83
+ primary: palette.primary,
84
+ secondary: palette.secondary,
85
+ error: palette.error,
86
+ warning: palette.warning,
87
+ info: palette.info,
88
+ success: palette.success,
89
+ white: palette.white,
90
+ black: palette.black,
91
+ primaryLight: palette.primaryLight,
92
+ primaryMedium: palette.primaryMedium,
93
+ primaryDark: palette.primaryDark,
94
+ secondaryLight: palette.secondaryLight,
95
+ secondaryMedium: palette.secondaryMedium,
96
+ secondaryDark: palette.secondaryDark,
97
+ inheritLight: palette.inheritLight,
98
+ inheritMedium: palette.inheritMedium,
99
+ inheritDark: palette.inheritDark,
100
+ whiteLight: palette.whiteLight,
101
+ whiteMedium: palette.whiteMedium,
102
+ whiteDark: palette.whiteDark,
103
+ successLight: palette.successLight,
104
+ successMedium: palette.successMedium,
105
+ successDark: palette.successDark,
106
+ errorLight: palette.errorLight,
107
+ errorMedium: palette.errorMedium,
108
+ errorDark: palette.errorDark,
109
+ warningLight: palette.warningLight,
110
+ warningMedium: palette.warningMedium,
111
+ warningDark: palette.warningDark,
112
+ helperLight: palette.helperLight,
113
+ helperMedium: palette.helperMedium,
114
+ helperDark: palette.helperDark,
115
+ };
116
+
117
+ export const olosPalette = {
118
+ primary: {
119
+ main: palette.primary,
120
+ },
121
+ secondary: {
122
+ main: palette.secondary,
123
+ },
124
+ error: {
125
+ main: palette.error,
126
+ },
127
+ warning: {
128
+ main: palette.warning,
129
+ },
130
+ info: {
131
+ main: palette.info,
132
+ },
133
+ success: {
134
+ main: palette.success,
135
+ },
136
+ };
137
+
138
+ export const newOlosPalette: PaletteOptions = {
139
+ primary: {
140
+ main: palette.primary,
141
+ light: palette.primaryLight,
142
+ dark: palette.primaryDark,
143
+ contrastText: palette.white,
144
+ '500': palette.primaryMedium,
145
+ },
146
+ secondary: {
147
+ main: palette.secondary,
148
+ light: palette.secondaryLight,
149
+ dark: palette.secondaryDark,
150
+ contrastText: palette.white,
151
+ '500': palette.secondaryMedium,
152
+ },
153
+ error: {
154
+ main: palette.error,
155
+ light: palette.errorLight,
156
+ dark: palette.errorDark,
157
+ contrastText: palette.white,
158
+ '500': palette.errorMedium,
159
+ },
160
+ warning: {
161
+ main: palette.warning,
162
+ light: palette.warningLight,
163
+ dark: palette.warningDark,
164
+ contrastText: palette.white,
165
+ '500': palette.warningMedium,
166
+ },
167
+ info: {
168
+ main: palette.inherit,
169
+ light: palette.inheritLight,
170
+ dark: palette.inheritDark,
171
+ contrastText: palette.white,
172
+ '500': palette.inheritMedium,
173
+ },
174
+ success: {
175
+ main: palette.success,
176
+ light: palette.successLight,
177
+ dark: palette.successDark,
178
+ contrastText: palette.white,
179
+ '500': palette.successMedium,
180
+ },
181
+ text: {
182
+ primary: palette.black,
183
+ secondary: palette.primary,
184
+ disabled: palette.inherit,
185
+ }
186
+ };
187
+
188
+ export const lightTheme = createTheme({
189
+ palette: {
190
+ mode: 'light',
191
+ ...olosPalette,
192
+ },
193
+ });
194
+
195
+ export const newLightTheme = createTheme({
196
+ palette: {
197
+ mode: 'light',
198
+ ...newOlosPalette,
199
+ },
200
+ });
201
+
202
+ export const darkTheme = createTheme({
203
+ palette: {
204
+ mode: 'dark',
205
+ ...olosPalette,
206
+ background: {
207
+ default: palette.inheritLight,
208
+ paper: palette.inheritDark,
209
+ },
210
+ },
211
+ });
212
+
213
+ export const themes = {
214
+ light: lightTheme,
215
+ dark: darkTheme,
216
+ newLight: newLightTheme,
217
+ };
218
+
219
+ type PaletteKey = keyof typeof getPalette;
220
+
221
+ const getColor = (key: PaletteKey) => {
222
+ const palette = getPalette();
223
+ if (palette.hasOwnProperty(key)) {
224
+ return palette[key];
225
+ } else {
226
+ return '#CCC';
227
+ }
228
+ };
229
+
230
+ const extractRGB = (rgbString: string) => {
231
+ if (typeof rgbString === 'string') {
232
+ const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
233
+
234
+ if (match) {
235
+ const r = match[1];
236
+ const g = match[2];
237
+ const b = match[3];
238
+ return `${r},${g},${b}`;
239
+ }
240
+ }
241
+ return null;
242
+ };
243
+
244
+ const lightenRGB = (rgbString: string, amount = 20) => {
245
+ console.log('RGB ==> ', rgbString);
246
+ if (typeof rgbString === 'string') {
247
+ const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
248
+
249
+ if (match) {
250
+ const r = parseInt(match[1]);
251
+ const g = parseInt(match[2]);
252
+ const b = parseInt(match[3]);
253
+
254
+ const newR = Math.min(255, r + amount);
255
+ const newG = Math.min(255, g + amount);
256
+ const newB = Math.min(255, b + amount);
257
+
258
+ return `rgb(${newR},${newG},${newB})`;
259
+ }
260
+ }
261
+ return null;
262
+ };
263
+
264
+ export { getColor, extractRGB, lightenRGB };
@@ -1,5 +1,5 @@
1
- export * from './borders';
2
- export * from './colors';
3
- export * from './sizes';
4
- export * from './radios';
5
- export * from './alignments';
1
+ export * from './borders';
2
+ export * from './colors';
3
+ export * from './sizes';
4
+ export * from './radios';
5
+ export * from './alignments';
@@ -1,24 +1,24 @@
1
- function getRadioSize(radio: string) {
2
- switch (radio) {
3
- case 'none':
4
- return 'rounded-none';
5
- case 'xs':
6
- return 'rounded-xs';
7
- case 'sm':
8
- return 'rounded-sm';
9
- case 'md':
10
- return 'rounded-md';
11
- case 'lg':
12
- return 'rounded-lg';
13
- case 'xl':
14
- return 'rounded-xl';
15
- case 'xll':
16
- return 'rounded-2xl';
17
- case 'full':
18
- return 'rounded-full';
19
- default:
20
- return 'rounded-none';
21
- }
22
- }
23
-
24
- export { getRadioSize };
1
+ function getRadioSize(radio: string) {
2
+ switch (radio) {
3
+ case 'none':
4
+ return 'rounded-none';
5
+ case 'xs':
6
+ return 'rounded-xs';
7
+ case 'sm':
8
+ return 'rounded-sm';
9
+ case 'md':
10
+ return 'rounded-md';
11
+ case 'lg':
12
+ return 'rounded-lg';
13
+ case 'xl':
14
+ return 'rounded-xl';
15
+ case 'xll':
16
+ return 'rounded-2xl';
17
+ case 'full':
18
+ return 'rounded-full';
19
+ default:
20
+ return 'rounded-none';
21
+ }
22
+ }
23
+
24
+ export { getRadioSize };