@innovaccer/design-system 2.31.1 → 2.32.1

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 (43) hide show
  1. package/CHANGELOG.md +95 -0
  2. package/css/dist/index.css +69 -64
  3. package/css/dist/index.css.map +1 -1
  4. package/css/src/components/actionCard.css +1 -1
  5. package/css/src/components/backdrop.css +3 -3
  6. package/css/src/components/chipInput.css +1 -1
  7. package/css/src/components/dropdown.css +5 -5
  8. package/css/src/components/fullscreenModal.css +2 -2
  9. package/css/src/components/grid.css +13 -11
  10. package/css/src/components/horizontalNav.css +1 -1
  11. package/css/src/components/input.css +2 -2
  12. package/css/src/components/listbox.css +3 -3
  13. package/css/src/components/menu.css +1 -1
  14. package/css/src/components/message.css +4 -4
  15. package/css/src/components/navigation.css +1 -1
  16. package/css/src/components/pills.css +2 -2
  17. package/css/src/components/popover.css +1 -1
  18. package/css/src/components/select.css +4 -0
  19. package/css/src/components/selectionCard.css +5 -5
  20. package/css/src/components/statusHints.css +1 -1
  21. package/css/src/components/switch.css +2 -2
  22. package/css/src/components/tabs.css +1 -1
  23. package/css/src/components/toast.css +7 -7
  24. package/css/src/components/verticalNav.css +2 -2
  25. package/css/src/core/typography.css +3 -3
  26. package/css/src/variables/index.css +22 -23
  27. package/dist/.lib/tsconfig.type.tsbuildinfo +29 -29
  28. package/dist/core/components/atoms/avatarSelection/avatarPopover/AvatarSelectionOption.d.ts +2 -0
  29. package/dist/core/components/atoms/checkbox/Checkbox.d.ts +1 -0
  30. package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +0 -1
  31. package/dist/core/components/molecules/tooltip/Tooltip.d.ts +1 -0
  32. package/dist/core/components/organisms/menu/MenuItem.d.ts +2 -0
  33. package/dist/core/components/organisms/select/SearchInput.d.ts +2 -2
  34. package/dist/core/components/organisms/select/Select.d.ts +2 -0
  35. package/dist/core/components/organisms/select/SelectContext.d.ts +1 -0
  36. package/dist/core/components/organisms/select/SelectEmptyTemplate.d.ts +2 -2
  37. package/dist/index.esm.js +122 -65
  38. package/dist/index.js +86 -44
  39. package/dist/index.js.map +1 -1
  40. package/dist/index.umd.js +1 -1
  41. package/dist/index.umd.js.br +0 -0
  42. package/dist/index.umd.js.gz +0 -0
  43. package/package.json +1 -1
package/css/src/components/actionCard.css CHANGED
@@ -35,6 +35,6 @@
35
35
  bottom: 0;
36
36
  left: 0;
37
37
  z-index: 2;
38
- opacity: 50%;
38
+ opacity: var(--opacity-10);
39
39
  background: var(--secondary-light);
40
40
  }
package/css/src/components/backdrop.css CHANGED
@@ -3,13 +3,13 @@
3
3
  opacity: 0;
4
4
  }
5
5
  to {
6
- opacity: 60;
6
+ opacity: var(--opacity-16);
7
7
  }
8
8
  }
9
9
 
10
10
  @keyframes backdrop-close {
11
11
  from {
12
- opacity: 60;
12
+ opacity: var(--opacity-16);
13
13
  }
14
14
  to {
15
15
  opacity: 0;
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .Backdrop {
20
- background-color: color-mod(var(--inverse) a(0.6));
20
+ background-color: color-mod(var(--inverse) a(var(--opacity-16)));
21
21
  height: 100vh;
22
22
  width: 100vw;
23
23
  position: fixed;
package/css/src/components/chipInput.css CHANGED
@@ -82,7 +82,7 @@
82
82
  height: var(--spacing-2);
83
83
  padding: var(--spacing-s);
84
84
  margin-left: var(--spacing);
85
- margin-top: 6px;
85
+ margin-top: var(--spacing-0-75);
86
86
  cursor: pointer;
87
87
  border-radius: 10px;
88
88
  }
package/css/src/components/dropdown.css CHANGED
@@ -32,7 +32,7 @@
32
32
  align-items: center;
33
33
  margin-left: var(--spacing-l);
34
34
  margin-top: var(--spacing-l);
35
- margin-bottom: 6px;
35
+ margin-bottom: var(--spacing-0-75);
36
36
  }
37
37
 
38
38
  .Dropdown-section--withClear {
@@ -63,8 +63,8 @@
63
63
 
64
64
  .Option,
65
65
  .Option-loading {
66
- padding-top: 6px;
67
- padding-bottom: 6px;
66
+ padding-top: var(--spacing-0-75);
67
+ padding-bottom: var(--spacing-0-75);
68
68
  padding-left: var(--spacing-l);
69
69
  padding-right: var(--spacing);
70
70
  }
@@ -80,8 +80,8 @@
80
80
  .OptionCheckbox {
81
81
  width: 100%;
82
82
  padding-left: var(--spacing-l);
83
- padding-top: 6px;
84
- padding-bottom: 6px;
83
+ padding-top: var(--spacing-0-75);
84
+ padding-bottom: var(--spacing-0-75);
85
85
  }
86
86
 
87
87
  .Option--active,
package/css/src/components/fullscreenModal.css CHANGED
@@ -4,14 +4,14 @@
4
4
  transform: translateY(20px);
5
5
  }
6
6
  to {
7
- opacity: 100;
7
+ opacity: 1;
8
8
  transform: translateY(0px);
9
9
  }
10
10
  }
11
11
 
12
12
  @keyframes fullscreenModal-close {
13
13
  from {
14
- opacity: 100;
14
+ opacity: 1;
15
15
  transform: translateY(0px);
16
16
  }
17
17
  to {
package/css/src/components/grid.css CHANGED
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .Grid--resource .Grid-row--body:focus {
31
- box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-16)));
31
+ box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
32
32
  outline: none;
33
33
  }
34
34
 
@@ -147,13 +147,13 @@
147
147
 
148
148
  .Grid-row--selected,
149
149
  .Grid-row--selected .Grid-cellGroup {
150
- background: color-mod(var(--primary-lightest) a(var(--opacity-48)));
150
+ background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
151
151
  transition: var(--duration--fast-02) var(--standard-productive-curve);
152
152
  }
153
153
 
154
154
  .Grid-row--selected:hover,
155
155
  .Grid-row--selected .Grid-cellGroup:hover {
156
- background: color-mod(var(--primary-lighter) a(var(--opacity-48))) !important;
156
+ background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
157
157
  }
158
158
 
159
159
  .Grid-row--selected:active,
@@ -164,7 +164,7 @@
164
164
  .Grid-row--selected:focus,
165
165
  .Grid-row--selected .Grid-cellGroup:focus {
166
166
  outline: none;
167
- box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-16)));
167
+ box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
168
168
  }
169
169
 
170
170
  .Grid-rowWrapper:last-child .Grid-row--body {
@@ -243,7 +243,7 @@
243
243
  } */
244
244
 
245
245
  .Grid-row--disabled {
246
- opacity: var(--opacity-40);
246
+ opacity: var(--opacity-10);
247
247
  pointer-events: none;
248
248
  }
249
249
 
@@ -332,12 +332,13 @@
332
332
 
333
333
  .Grid-cellGroup--pinned-left {
334
334
  left: 0;
335
- border-right: var(--border);
335
+ border-style: inset;
336
+ border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
336
337
  border-right-width: 4px;
337
338
  border-image: linear-gradient(
338
339
  to right,
339
- var(--secondary),
340
- var(--secondary) 25%,
340
+ var(--secondary-light),
341
+ var(--secondary-light) 25%,
341
342
  color-mod(var(--secondary) a(0.1)) 25%,
342
343
  color-mod(var(--secondary) a(0.1))
343
344
  )
@@ -346,12 +347,13 @@
346
347
 
347
348
  .Grid-cellGroup--pinned-right {
348
349
  right: 0;
349
- border-left: var(--border);
350
+ border-style: inset;
351
+ border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
350
352
  border-left-width: 4px;
351
353
  border-image: linear-gradient(
352
354
  to left,
353
- var(--secondary),
354
- var(--secondary) 25%,
355
+ var(--secondary-light),
356
+ var(--secondary-light) 25%,
355
357
  color-mod(var(--secondary) a(0.1)) 25%,
356
358
  color-mod(var(--secondary) a(0.1))
357
359
  )
package/css/src/components/horizontalNav.css CHANGED
@@ -81,5 +81,5 @@
81
81
  }
82
82
 
83
83
  .HorizontalNav-pills--disabled {
84
- opacity: 0.6;
84
+ opacity: var(--opacity-10);
85
85
  }
package/css/src/components/input.css CHANGED
@@ -26,8 +26,8 @@
26
26
 
27
27
  .Input--regular {
28
28
  height: var(--font-height-l);
29
- padding-top: 6px;
30
- padding-bottom: 6px;
29
+ padding-top: var(--spacing-0-75);
30
+ padding-bottom: var(--spacing-0-75);
31
31
  }
32
32
 
33
33
  .Input--large {
package/css/src/components/listbox.css CHANGED
@@ -59,11 +59,11 @@
59
59
  }
60
60
 
61
61
  .Listbox-item--selected {
62
- background: color-mod(var(--primary-lightest) a(var(--opacity-48)));
62
+ background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
63
63
  }
64
64
 
65
65
  .Listbox-item--selected:hover {
66
- background: color-mod(var(--primary-lighter) a(var(--opacity-48)));
66
+ background: color-mod(var(--primary-lighter) a(var(--opacity-12)));
67
67
  }
68
68
 
69
69
  .Listbox-item--selected:focus,
@@ -108,7 +108,7 @@
108
108
  /* Listbox type - disabled */
109
109
 
110
110
  .Listbox-item--disabled {
111
- opacity: var(--opacity-40);
111
+ opacity: var(--opacity-10);
112
112
  pointer-events: none;
113
113
  }
114
114
 
package/css/src/components/menu.css CHANGED
@@ -16,7 +16,7 @@
16
16
  .Menu-Group-Label {
17
17
  display: flex;
18
18
  align-items: center;
19
- padding-bottom: 6px;
19
+ padding-bottom: var(--spacing-0-75);
20
20
  padding-top: var(--spacing-l);
21
21
  padding-left: var(--spacing-2);
22
22
  padding-right: var(--spacing-l);
package/css/src/components/message.css CHANGED
@@ -11,22 +11,22 @@
11
11
 
12
12
  .Message--alert {
13
13
  border-color: var(--alert);
14
- background-color: color-mod(var(--alert-lightest) a(0.4));
14
+ background-color: color-mod(var(--alert-lightest) a(var(--opacity-10)));
15
15
  }
16
16
 
17
17
  .Message--success {
18
18
  border-color: var(--success);
19
- background-color: color-mod(var(--success-lightest) a(0.4));
19
+ background-color: color-mod(var(--success-lightest) a(var(--opacity-10)));
20
20
  }
21
21
 
22
22
  .Message--info {
23
23
  border-color: var(--primary);
24
- background-color: color-mod(var(--primary-lightest) a(0.4));
24
+ background-color: color-mod(var(--primary-lightest) a(var(--opacity-10)));
25
25
  }
26
26
 
27
27
  .Message--warning {
28
28
  border-color: var(--accent1);
29
- background-color: color-mod(var(--warning-lightest) a(0.4));
29
+ background-color: color-mod(var(--warning-lightest) a(var(--opacity-10)));
30
30
  }
31
31
 
32
32
  .Message-icon {
package/css/src/components/navigation.css CHANGED
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .Navigation-horizontalPills--disabled {
105
- opacity: 0.6;
105
+ opacity: var(--opacity-10);
106
106
  }
107
107
 
108
108
  .Navigation-footer {
package/css/src/components/pills.css CHANGED
@@ -8,8 +8,8 @@
8
8
  font-size: var(--font-size-s);
9
9
  line-height: var(--font-height-s);
10
10
  text-transform: uppercase;
11
- padding-right: 6px;
12
- padding-left: 6px;
11
+ padding-right: var(--spacing-0-75);
12
+ padding-left: var(--spacing-0-75);
13
13
  padding-top: var(--spacing-s);
14
14
  padding-bottom: var(--spacing-s);
15
15
  border-radius: 20px;
package/css/src/components/popover.css CHANGED
@@ -21,7 +21,7 @@
21
21
  opacity: 0;
22
22
  }
23
23
  80% {
24
- opacity: 0.2;
24
+ opacity: var(--opacity-6);
25
25
  }
26
26
  100% {
27
27
  opacity: 1;
package/css/src/components/select.css CHANGED
@@ -77,6 +77,10 @@
77
77
  white-space: nowrap;
78
78
  overflow: hidden;
79
79
  text-overflow: ellipsis;
80
+ max-width: 100%;
81
+ margin: 0;
82
+ font-size: var(--font-size);
83
+ line-height: var(--font-height);
80
84
  }
81
85
 
82
86
  .Select-trigger--regular {
package/css/src/components/selectionCard.css CHANGED
@@ -67,25 +67,25 @@
67
67
 
68
68
  .Selection-card:active .Selection-card-overlay {
69
69
  background-color: var(--primary);
70
- opacity: 10%;
70
+ opacity: var(--opacity-3);
71
71
  }
72
72
 
73
73
  .Selection-card--disabled .Selection-card-overlay {
74
74
  background-color: var(--secondary-lightest);
75
- opacity: 50%;
75
+ opacity: var(--opacity-10);
76
76
  }
77
77
 
78
78
  .Selection-card--selected .Selection-card-overlay {
79
79
  background-color: var(--primary);
80
- opacity: 4%;
80
+ opacity: var(--opacity-1);
81
81
  }
82
82
 
83
83
  .Selection-card--selected:active .Selection-card-overlay {
84
84
  background-color: var(--primary);
85
- opacity: 4%;
85
+ opacity: var(--opacity-1);
86
86
  }
87
87
 
88
88
  .Selection-card--selected-disabled .Selection-card-overlay {
89
89
  background-color: var(--primary-lightest);
90
- opacity: 50%;
90
+ opacity: var(--opacity-10);
91
91
  }
package/css/src/components/statusHints.css CHANGED
@@ -10,7 +10,7 @@
10
10
  height: var(--spacing);
11
11
  width: var(--spacing);
12
12
  margin-right: var(--spacing);
13
- margin-top: 6px;
13
+ margin-top: var(--spacing-0-75);
14
14
  }
15
15
 
16
16
  .StatusHint--alert {
package/css/src/components/switch.css CHANGED
@@ -38,7 +38,7 @@
38
38
  width: 100%;
39
39
  background-color: var(--secondary-light);
40
40
  transition: background 120ms ease;
41
- padding-right: 6px;
41
+ padding-right: var(--spacing-0-75);
42
42
  }
43
43
 
44
44
  .Switch-input:focus ~ .Switch-wrapper {
@@ -93,7 +93,7 @@
93
93
  .Switch-wrapper--checked {
94
94
  background-color: var(--primary);
95
95
  transition: background 120ms ease;
96
- padding-left: 6px;
96
+ padding-left: var(--spacing-0-75);
97
97
  padding-right: 2px !important;
98
98
  }
99
99
 
package/css/src/components/tabs.css CHANGED
@@ -120,7 +120,7 @@
120
120
  }
121
121
 
122
122
  .Tab-pills--disabled {
123
- opacity: 60%;
123
+ opacity: var(--opacity-10);
124
124
  cursor: not-allowed;
125
125
  }
126
126
 
package/css/src/components/toast.css CHANGED
@@ -71,7 +71,7 @@
71
71
  .Toast-close-icon--warning:focus,
72
72
  .Toast-close-icon--warning:focus-visible {
73
73
  outline: none;
74
- box-shadow: var(--shadow-spread) color-mod(var(--warning-dark) a(0.16));
74
+ box-shadow: var(--shadow-spread) color-mod(var(--warning-dark) a(var(--opacity-4)));
75
75
  }
76
76
 
77
77
  .Toast-close-icon--warning:hover,
@@ -82,7 +82,7 @@
82
82
  .Toast-close-icon--success:focus,
83
83
  .Toast-close-icon--success:focus-visible {
84
84
  outline: none;
85
- box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
85
+ box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(var(--opacity-4)));
86
86
  }
87
87
 
88
88
  .Toast-close-icon--success:hover,
@@ -93,7 +93,7 @@
93
93
  .Toast-close-icon--info:focus,
94
94
  .Toast-close-icon--info:focus-visible {
95
95
  outline: none;
96
- box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
96
+ box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(var(--opacity-4)));
97
97
  }
98
98
 
99
99
  .Toast-close-icon--info:hover,
@@ -104,7 +104,7 @@
104
104
  .Toast-close-icon--alert:focus,
105
105
  .Toast-close-icon--alert:focus-visible {
106
106
  outline: none;
107
- box-shadow: var(--shadow-spread) color-mod(var(--alert-dark) a(0.16));
107
+ box-shadow: var(--shadow-spread) color-mod(var(--alert-dark) a(var(--opacity-4)));
108
108
  }
109
109
 
110
110
  .Toast-close-icon--alert:hover,
@@ -160,7 +160,7 @@
160
160
  }
161
161
 
162
162
  .Toast-actionButton--default:focus {
163
- box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(0.16));
163
+ box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(var(--opacity-4)));
164
164
  }
165
165
 
166
166
  .Toast-actionButton--info {
@@ -173,7 +173,7 @@
173
173
  }
174
174
 
175
175
  .Toast-actionButton--info:focus {
176
- box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
176
+ box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(var(--opacity-4)));
177
177
  }
178
178
 
179
179
  .Toast-actionButton--success {
@@ -186,7 +186,7 @@
186
186
  }
187
187
 
188
188
  .Toast-actionButton--success:focus {
189
- box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
189
+ box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(var(--opacity-4)));
190
190
  }
191
191
 
192
192
  .Toast-actionButton--alert {
package/css/src/components/verticalNav.css CHANGED
@@ -11,7 +11,7 @@
11
11
  text-transform: uppercase;
12
12
  padding-left: var(--spacing-2);
13
13
  padding-top: var(--spacing-l);
14
- padding-bottom: 6px;
14
+ padding-bottom: var(--spacing-0-75);
15
15
  margin-top: var(--spacing);
16
16
  }
17
17
 
@@ -124,6 +124,6 @@
124
124
  }
125
125
 
126
126
  .MenuItem-count--disabled {
127
- opacity: 0.6;
127
+ opacity: var(--opacity-10);
128
128
  color: var(--text);
129
129
  }
package/css/src/core/typography.css CHANGED
@@ -144,12 +144,12 @@ body {
144
144
  }
145
145
 
146
146
  .Label-requiredIndicator {
147
- height: 6px;
148
- width: 6px;
147
+ height: var(--spacing-0-75);
148
+ width: var(--spacing-0-75);
149
149
  border-radius: 50%;
150
150
  background: var(--alert);
151
151
  margin-left: var(--spacing-m);
152
- margin-bottom: 6px;
152
+ margin-bottom: var(--spacing-0-75);
153
153
  display: inline-flex;
154
154
  }
155
155
 
package/css/src/variables/index.css CHANGED
@@ -71,16 +71,16 @@
71
71
  --inverse-lightest: var(--night-lightest);
72
72
 
73
73
  /* shadow */
74
- --primary-shadow: color-mod(var(--primary) a(0.16));
75
- --secondary-shadow: color-mod(var(--secondary) a(0.16));
76
- --success-shadow: color-mod(var(--success) a(0.16));
77
- --alert-shadow: color-mod(var(--alert) a(0.16));
78
- --warning-shadow: color-mod(var(--warning) a(0.16));
79
- --accent1-shadow: color-mod(var(--accent1) a(0.16));
80
- --accent2-shadow: color-mod(var(--accent2) a(0.16));
81
- --accent3-shadow: color-mod(var(--accent3) a(0.16));
82
- --accent4-shadow: color-mod(var(--accent4) a(0.16));
83
- --inverse-shadow: color-mod(var(--inverse) a(0.16));
74
+ --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
75
+ --secondary-shadow: color-mod(var(--secondary) a(var(--opacity-4)));
76
+ --success-shadow: color-mod(var(--success) a(var(--opacity-4)));
77
+ --alert-shadow: color-mod(var(--alert) a(var(--opacity-4)));
78
+ --warning-shadow: color-mod(var(--warning) a(var(--opacity-4)));
79
+ --accent1-shadow: color-mod(var(--accent1) a(var(--opacity-4)));
80
+ --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
81
+ --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
82
+ --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
83
+ --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
84
84
 
85
85
  /* Text colors */
86
86
  --text: var(--night);
@@ -95,6 +95,7 @@
95
95
  --spacing-xs: 1px;
96
96
  --spacing-s: 2px;
97
97
  --spacing-m: 4px;
98
+ --spacing-0-75: 6px;
98
99
  --spacing: 8px;
99
100
  --spacing-l: 12px;
100
101
  /* 8 * 2 */
@@ -205,17 +206,15 @@
205
206
  --duration--slow-01: 400ms;
206
207
  --duration--slow-02: 720ms;
207
208
 
208
- /**** Opacity ****/
209
- --opacity-0: 0;
210
- --opacity-4: 0.04;
211
- --opacity-8: 0.08;
212
- --opacity-12: 0.12;
213
- --opacity-16: 0.16;
214
- --opacity-24: 0.24;
215
- --opacity-32: 0.32;
216
- --opacity-40: 0.4;
217
- --opacity-48: 0.48;
218
- --opacity-64: 0.64;
219
- --opacity-80: 0.8;
220
- --opacity-100: 1;
209
+ /* Opacity */
210
+ --opacity-1: 0.04;
211
+ --opacity-2: 0.08;
212
+ --opacity-3: 0.12;
213
+ --opacity-4: 0.16;
214
+ --opacity-6: 0.24;
215
+ --opacity-8: 0.32;
216
+ --opacity-10: 0.4;
217
+ --opacity-12: 0.48;
218
+ --opacity-16: 0.64;
219
+ --opacity-20: 0.8;
221
220
  }