@moises.ai/design-system 3.11.11 → 3.11.13

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 (22) hide show
  1. package/dist/colors/custom-styles.css +50 -100
  2. package/dist/index.js +3046 -3029
  3. package/package.json +1 -1
  4. package/src/colors/custom-styles.css +50 -100
  5. package/src/components/Button/Button.module.css +8 -8
  6. package/src/components/Callout/Callout.module.css +4 -4
  7. package/src/components/Checkbox/Checkbox.module.css +7 -7
  8. package/src/components/DataTable/dnd/DataTableRowSortable.jsx +1 -1
  9. package/src/components/HorizontalVolume/HorizontalVolume.module.css +1 -1
  10. package/src/components/IconButton/IconButton.jsx +30 -3
  11. package/src/components/IconButton/IconButton.module.css +208 -147
  12. package/src/components/IconButton/IconButton.stories.jsx +354 -397
  13. package/src/components/InputLevelMeter/InputLevelMeter.jsx +2 -1
  14. package/src/components/MultiSelect/MultiSelect.jsx +1 -1
  15. package/src/components/PanControl/PanControl.jsx +51 -75
  16. package/src/components/PanControl/PanControl.module.css +0 -31
  17. package/src/components/Rating/Rating.module.css +1 -1
  18. package/src/components/Select/Select.jsx +1 -1
  19. package/src/components/SetlistList/SetlistList.module.css +2 -2
  20. package/src/components/Shell/Shell.module.css +1 -1
  21. package/src/components/Slider/Slider.module.css +3 -3
  22. package/src/lib/menu/Menu.module.css +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moises.ai/design-system",
3
- "version": "3.11.11",
3
+ "version": "3.11.13",
4
4
  "description": "Design System package based on @radix-ui/themes with custom defaults",
5
5
  "private": false,
6
6
  "type": "module",
package/src/colors/custom-styles.css CHANGED
@@ -1,53 +1,30 @@
1
1
  :root {
2
2
  /* Aqua */
3
- --aqua-1: #f8fefe;
4
- --aqua-2: #f0fbfc;
5
- --aqua-3: #dbf8fb;
6
- --aqua-4: #c5f3f7;
7
- --aqua-5: #adf0f5;
8
- --aqua-6: #95edf3;
9
- --aqua-7: #009AA5;
10
- --aqua-8: #00BAC6;
11
- --aqua-9: #00DAE8;
12
- --aqua-10: #19E4F1;
13
- --aqua-11: #00a9b6;
14
- --aqua-12: #004348;
15
- --aqua-alpha-1: rgba(0, 219, 219, 0.03);
16
- --aqua-alpha-2: rgba(0, 187, 204, 0.06);
17
- --aqua-alpha-3: rgba(0, 206, 227, 0.14);
18
- --aqua-alpha-4: rgba(0, 212, 229, 0.26);
19
- --aqua-alpha-5: rgba(0, 209, 230, 0.39);
20
- --aqua-alpha-6: rgba(0, 210, 229, 0.52);
21
- --aqua-alpha-7: rgba(0, 215, 232, 0.67);
22
- --aqua-alpha-8: rgba(0, 218, 232, 0.9);
23
- --aqua-alpha-9: #00d0de;
24
- --aqua-alpha-10: #00c4d2;
25
- --aqua-alpha-11: rgba(5, 165, 177, 0.96);
26
- --aqua-alpha-12: #004348;
27
- --aqua-dark-1: #061415;
28
- --aqua-dark-2: #0c1c1d;
29
- --aqua-dark-3: #002e32;
30
- --aqua-dark-4: #003b42;
31
- --aqua-dark-5: #005a63;
32
- --aqua-dark-6: #007a84;
33
- --aqua-dark-7: #009aa5;
34
- --aqua-dark-8: #00bac6;
35
- --aqua-dark-9: #00dae8;
36
- --aqua-dark-10: #19e4f1;
37
- --aqua-dark-11: #75ebf5;
38
- --aqua-dark-12: #adf0f6;
39
- --aqua-dark-alpha-1: rgba(0, 171, 222, 0.02);
40
- --aqua-dark-alpha-2: rgba(0, 233, 253, 0.07);
41
- --aqua-dark-alpha-3: rgba(0, 223, 251, 0.16);
42
- --aqua-dark-alpha-4: rgba(0, 220, 253, 0.2);
43
- --aqua-dark-alpha-5: rgba(0, 227, 254, 0.33);
44
- --aqua-dark-alpha-6: rgba(0, 231, 255, 0.48);
45
- --aqua-dark-alpha-7: rgba(0, 234, 253, 0.62);
46
- --aqua-dark-alpha-8: rgba(0, 216, 230, 0.84);
47
- --aqua-dark-alpha-9: rgba(0, 238, 254, 0.91);
48
- --aqua-dark-alpha-10: rgba(49, 242, 255, 0.93);
49
- --aqua-dark-alpha-11: rgba(120, 247, 255, 0.95);
50
- --aqua-dark-alpha-12: rgba(178, 248, 254, 0.97);
3
+ --aqua-1: rgba(6, 20, 21, 1);
4
+ --aqua-2: rgba(12, 28, 29, 1);
5
+ --aqua-3: rgba(0, 46, 50, 1);
6
+ --aqua-4: rgba(0, 59, 66, 1);
7
+ --aqua-5: rgba(0, 90, 99, 1);
8
+ --aqua-6: rgba(0, 122, 132, 1);
9
+ --aqua-7: rgba(0, 154, 165, 1);
10
+ --aqua-8: rgba(0, 186, 198, 1);
11
+ --aqua-9: rgba(0, 218, 232, 1);
12
+ --aqua-10: rgba(25, 228, 241, 1);
13
+ --aqua-11: rgba(117, 235, 245, 1);
14
+ --aqua-12: rgba(173, 240, 246, 1);
15
+ --aqua-alpha-1: rgba(0, 171, 222, 0.02);
16
+ --aqua-alpha-2: rgba(0, 233, 253, 0.07);
17
+ --aqua-alpha-3: rgba(0, 223, 251, 0.16);
18
+ --aqua-alpha-4: rgba(0, 220, 253, 0.2);
19
+ --aqua-alpha-5: rgba(0, 227, 254, 0.33);
20
+ --aqua-alpha-6: rgba(0, 231, 255, 0.48);
21
+ --aqua-alpha-7: rgba(0, 234, 253, 0.62);
22
+ --aqua-alpha-8: rgba(0, 216, 230, 0.84);
23
+ --aqua-alpha-9: rgba(0, 238, 254, 0.91);
24
+ --aqua-alpha-10: rgba(49, 242, 255, 0.93);
25
+ --aqua-alpha-11: rgba(120, 247, 255, 0.95);
26
+ --aqua-alpha-12: rgba(178, 248, 254, 0.97);
27
+
51
28
 
52
29
  /* Mint */
53
30
 
@@ -177,7 +154,7 @@
177
154
 
178
155
  /* custom cyan color*/
179
156
 
180
- --cyan-track: var(--aqua-dark-9);
157
+ --cyan-track: var(--aqua-9);
181
158
 
182
159
  /* custom mint color*/
183
160
  --mint-1: var(--mint-1);
@@ -235,57 +212,30 @@
235
212
 
236
213
  /* Custom Aqua */
237
214
 
238
- --accent-1: var(--aqua-1);
239
- --accent-2: var(--aqua-2);
240
- --accent-3: var(--aqua-3);
241
- --accent-4: var(--aqua-4);
242
- --accent-5: var(--aqua-5);
243
- --accent-6: var(--aqua-6);
244
- --accent-7: var(--aqua-7);
245
- --accent-8: var(--aqua-8);
246
- --accent-9: var(--aqua-9);
247
- --accent-10: var(--aqua-10);
248
- --accent-11: var(--aqua-11);
249
- --accent-12: var(--aqua-12);
250
-
251
- --accent-a1: var(--aqua-alpha-1);
252
- --accent-a2: var(--aqua-alpha-2);
253
- --accent-a3: var(--aqua-alpha-3);
254
- --accent-a4: var(--aqua-alpha-4);
255
- --accent-a5: var(--aqua-alpha-5);
256
- --accent-a6: var(--aqua-alpha-6);
257
- --accent-a7: var(--aqua-alpha-7);
258
- --accent-a8: var(--aqua-alpha-8);
259
- --accent-a9: var(--aqua-alpha-9);
260
- --accent-a10: var(--aqua-alpha-10);
261
- --accent-a11: var(--aqua-alpha-11);
262
- --accent-a12: var(--aqua-alpha-12);
263
-
264
- --accent-d1: var(--aqua-dark-1);
265
- --accent-d2: var(--aqua-dark-2);
266
- --accent-d3: var(--aqua-dark-3);
267
- --accent-d4: var(--aqua-dark-4);
268
- --accent-d5: var(--aqua-dark-5);
269
- --accent-d6: var(--aqua-dark-6);
270
- --accent-d7: var(--aqua-dark-7);
271
- --accent-d8: var(--aqua-dark-8);
272
- --accent-d9: var(--aqua-dark-9);
273
- --accent-d10: var(--aqua-dark-10);
274
- --accent-d11: var(--aqua-dark-11);
275
- --accent-d12: var(--aqua-dark-12);
276
-
277
- --accent-d-a1: var(--aqua-dark-alpha-1);
278
- --accent-d-a2: var(--aqua-dark-alpha-2);
279
- --accent-d-a3: var(--aqua-dark-alpha-3);
280
- --accent-d-a4: var(--aqua-dark-alpha-4);
281
- --accent-d-a5: var(--aqua-dark-alpha-5);
282
- --accent-d-a6: var(--aqua-dark-alpha-6);
283
- --accent-d-a7: var(--aqua-dark-alpha-7);
284
- --accent-d-a8: var(--aqua-dark-alpha-8);
285
- --accent-d-a9: var(--aqua-dark-alpha-9);
286
- --accent-d-a10: var(--aqua-dark-alpha-10);
287
- --accent-d-a11: var(--aqua-dark-alpha-11);
288
- --accent-d-a12: var(--aqua-dark-alpha-12);
215
+ --cyan-1: var(--aqua-1);
216
+ --cyan-2: var(--aqua-2);
217
+ --cyan-3: var(--aqua-3);
218
+ --cyan-4: var(--aqua-4);
219
+ --cyan-5: var(--aqua-5);
220
+ --cyan-6: var(--aqua-6);
221
+ --cyan-7: var(--aqua-7);
222
+ --cyan-8: var(--aqua-8);
223
+ --cyan-9: var(--aqua-9);
224
+ --cyan-10: var(--aqua-10);
225
+ --cyan-11: var(--aqua-11);
226
+ --cyan-12: var(--aqua-12);
227
+ --cyan-a1: var(--aqua-alpha-1);
228
+ --cyan-a2: var(--aqua-alpha-2);
229
+ --cyan-a3: var(--aqua-alpha-3);
230
+ --cyan-a4: var(--aqua-alpha-4);
231
+ --cyan-a5: var(--aqua-alpha-5);
232
+ --cyan-a6: var(--aqua-alpha-6);
233
+ --cyan-a7: var(--aqua-alpha-7);
234
+ --cyan-a8: var(--aqua-alpha-8);
235
+ --cyan-a9: var(--aqua-alpha-9);
236
+ --cyan-a10: var(--aqua-alpha-10);
237
+ --cyan-a11: var(--aqua-alpha-11);
238
+ --cyan-a12: var(--aqua-alpha-12);
289
239
 
290
240
 
291
241
  }
package/src/components/Button/Button.module.css CHANGED
@@ -81,7 +81,7 @@
81
81
 
82
82
  .solid.cyan {
83
83
  background-color: var(--aqua-9);
84
- color: var(--accent-d1);
84
+ color: var(--aqua-1);
85
85
  }
86
86
 
87
87
  .solid.cyan:hover:not(.disabled):not(.loading) {
@@ -89,7 +89,7 @@
89
89
  }
90
90
 
91
91
  .solid.cyan.highContrast {
92
- background-color: var(--aqua-dark-12);
92
+ background-color: var(--aqua-12);
93
93
  color: var(--neutral-1);
94
94
  }
95
95
 
@@ -205,32 +205,32 @@
205
205
  }
206
206
 
207
207
  .ghost.cyan {
208
- color: var(--aqua-dark-alpha-11);
208
+ color: var(--aqua-alpha-11);
209
209
  }
210
210
 
211
211
  .ghost.cyan:hover:not(.disabled):not(.loading) {
212
- background-color: var(--aqua-dark-alpha-2) !important;
212
+ background-color: var(--aqua-alpha-2) !important;
213
213
  border-radius: max(var(--radius-2), var(--radius-full)) ;
214
214
  }
215
215
 
216
216
  .ghost.cyan:active:not(.disabled):not(.loading) {
217
- background-color: var(--aqua-dark-alpha-3) !important;
217
+ background-color: var(--aqua-alpha-3) !important;
218
218
  border-radius: max(var(--radius-2), var(--radius-full));
219
219
  opacity: 0.92;
220
220
  }
221
221
 
222
222
  .ghost.cyan.highContrast {
223
- color: var(--aqua-dark-12);
223
+ color: var(--aqua-12);
224
224
  }
225
225
 
226
226
  .ghost.cyan.highContrast:hover:not(.disabled):not(.loading) {
227
- background-color: var(--aqua-dark-alpha-2) !important;
227
+ background-color: var(--aqua-alpha-2) !important;
228
228
  border-radius: max(var(--radius-2), var(--radius-full));
229
229
  opacity: 0.88;
230
230
  }
231
231
 
232
232
  .ghost.cyan.highContrast:active:not(.disabled):not(.loading) {
233
- background-color: var(--aqua-dark-alpha-3) !important;
233
+ background-color: var(--aqua-alpha-3) !important;
234
234
  border-radius: max(var(--radius-2), var(--radius-full));
235
235
  opacity: 0.82;
236
236
  }
package/src/components/Callout/Callout.module.css CHANGED
@@ -3,13 +3,13 @@
3
3
  }
4
4
 
5
5
  .accent {
6
- background-color: var(--aqua-dark-alpha-3);
7
- color: var(--aqua-dark-alpha-11);
6
+ background-color: var(--aqua-alpha-3);
7
+ color: var(--aqua-alpha-11);
8
8
  }
9
9
 
10
10
  .accent-highContrast {
11
- background-color: var(--aqua-dark-alpha-3);
12
- color: var(--aqua-dark-alpha-12);
11
+ background-color: var(--aqua-alpha-3);
12
+ color: var(--aqua-alpha-12);
13
13
  }
14
14
 
15
15
  .neutral {
package/src/components/Checkbox/Checkbox.module.css CHANGED
@@ -106,7 +106,7 @@
106
106
  }
107
107
 
108
108
  .DividerHorizontalIcon {
109
- color: var(--aqua-dark-alpha-11);
109
+ color: var(--aqua-alpha-11);
110
110
  display: none;
111
111
  }
112
112
 
@@ -120,22 +120,22 @@
120
120
 
121
121
  .Checkbox[aria-checked="mixed"] {
122
122
  border-radius: 3px;
123
- border: 1px solid var(--aqua-dark-alpha-7);
124
- background: var(--aqua-dark-alpha-2);
123
+ border: 1px solid var(--aqua-alpha-7);
124
+ background: var(--aqua-alpha-2);
125
125
  }
126
126
 
127
127
  .Checkbox[aria-checked="mixed"]:hover {
128
128
  border-radius: 3px;
129
- border: 1px solid var(--aqua-dark-alpha-8);
129
+ border: 1px solid var(--aqua-alpha-8);
130
130
  opacity: 0.88;
131
- background: var(--aqua-dark-alpha-3);
131
+ background: var(--aqua-alpha-3);
132
132
  cursor: pointer;
133
133
  }
134
134
 
135
135
  .Checkbox[aria-checked="mixed"]:active {
136
136
  border-radius: 3px;
137
- border: 1px solid var(--aqua-dark-alpha-8);
137
+ border: 1px solid var(--aqua-alpha-8);
138
138
  opacity: 0.82;
139
- background: var(--aqua-dark-alpha-3);
139
+ background: var(--aqua-alpha-3);
140
140
  cursor: pointer;
141
141
  }
package/src/components/DataTable/dnd/DataTableRowSortable.jsx CHANGED
@@ -50,7 +50,7 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
50
50
  ...(transition ? { transition } : {}),
51
51
  }
52
52
  const rowStyle = isSelected
53
- ? { ...sortableStyle, '--row-bg': 'var(--aqua-dark-alpha-2)' }
53
+ ? { ...sortableStyle, '--row-bg': 'var(--aqua-alpha-2)' }
54
54
  : sortableStyle
55
55
 
56
56
  const handleRowClick = (e) => {
package/src/components/HorizontalVolume/HorizontalVolume.module.css CHANGED
@@ -48,7 +48,7 @@
48
48
  height: 100%;
49
49
  width: var(--radix-slider-range);
50
50
  border-radius: 9999px;
51
- background-color: var(--aqua-dark-alpha-8);
51
+ background-color: var(--aqua-alpha-8);
52
52
  &:hover {
53
53
  cursor: pointer;
54
54
  }
package/src/components/IconButton/IconButton.jsx CHANGED
@@ -2,37 +2,64 @@ import { IconButton as IconButtonRadix } from '@radix-ui/themes'
2
2
  import styles from './IconButton.module.css'
3
3
  import classNames from 'classnames'
4
4
 
5
+ const RADIX_COLOR = {
6
+ neutral: 'gray',
7
+ error: 'red',
8
+ accent: 'cyan',
9
+ }
10
+
11
+ function resolveIconButtonColor(color) {
12
+ switch (color) {
13
+ case 'gray':
14
+ case 'neutral':
15
+ return { canonical: 'neutral', radix: RADIX_COLOR.neutral }
16
+ case 'red':
17
+ case 'error':
18
+ return { canonical: 'error', radix: RADIX_COLOR.error }
19
+ case 'mint':
20
+ case 'accent':
21
+ case 'cyan':
22
+ return { canonical: 'accent', radix: RADIX_COLOR.accent }
23
+ default:
24
+ return { canonical: 'neutral', radix: RADIX_COLOR.neutral }
25
+ }
26
+ }
27
+
5
28
  export const IconButton = ({
6
29
  onClick,
7
30
  className,
8
31
  children,
9
32
  variant = 'ghost',
10
- color = 'gray',
33
+ color = 'neutral',
11
34
  disabled,
12
35
  size = '1',
13
36
  loading,
14
37
  highContrast = false,
38
+ toggleable,
15
39
  style,
16
40
  ...props
17
41
  }) => {
42
+ const { canonical, radix } = resolveIconButtonColor(color)
43
+
18
44
  return (
19
45
  <IconButtonRadix
20
46
  onClick={onClick}
21
47
  className={classNames(
22
48
  styles.iconButton,
23
49
  {
24
- [styles[color]]: true,
50
+ [styles[canonical]]: true,
25
51
  [styles[`size${size}`]]: true,
26
52
  [styles[variant]]: true,
27
53
  [styles.disabled]: disabled,
28
54
  [styles.loading]: loading,
29
55
  [styles.highContrast]: highContrast,
56
+ [styles.toggleable]: toggleable,
30
57
  },
31
58
  className,
32
59
  )}
33
60
  variant={variant}
34
61
  disabled={disabled}
35
- color={color}
62
+ color={radix || 'cyan'}
36
63
  size={size}
37
64
  loading={loading}
38
65
  highContrast={highContrast}