@paygreen/pgui 3.0.0-beta → 3.0.1-beta

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 (31) hide show
  1. package/README.md +3 -0
  2. package/dist/components/actions-button/actions-button.d.ts +2 -1
  3. package/dist/components/data-list/datalist.d.ts +1 -2
  4. package/dist/components/data-table/data-table.d.ts +2 -2
  5. package/dist/components/index.d.ts +4 -0
  6. package/dist/components/input-mask/input-mask.d.ts +2 -1
  7. package/dist/components/input-password/input-password.d.ts +34 -0
  8. package/dist/components/input-search/input-search.d.ts +14 -0
  9. package/dist/components/loader/loader.d.ts +6 -4
  10. package/dist/components/logos/logoPaygreenByLemonway.d.ts +1 -2
  11. package/dist/components/modal/modal.d.ts +49 -12
  12. package/dist/components/pagination/pagination.d.ts +7 -2
  13. package/dist/components/select/select.d.ts +11 -6
  14. package/dist/components/sidebar/sidebar.d.ts +17 -3
  15. package/dist/components/tooltip/tooltip.d.ts +11 -0
  16. package/dist/components/ui/toaster.d.ts +2 -0
  17. package/dist/index.d.ts +1 -1
  18. package/dist/index.js +10 -10
  19. package/dist/index.mjs +2828 -2159
  20. package/dist/pgui.css +1 -1
  21. package/dist/theme/index.d.ts +2 -1
  22. package/dist/theme/recipes/card-recipe.d.ts +3 -6
  23. package/dist/theme/recipes/index.d.ts +3 -6
  24. package/dist/theme/semanticTokens/colors.d.ts +374 -21
  25. package/dist/theme/semanticTokens/index.d.ts +374 -21
  26. package/dist/theme/tokens/colors.d.ts +291 -9
  27. package/dist/theme/tokens/index.d.ts +290 -13
  28. package/package.json +2 -4
  29. package/src/components/date-picker/date-picker.css +42 -45
  30. package/src/components/select/select.css +30 -8
  31. package/dist/theme/tokens/gradients.d.ts +0 -6
package/src/components/date-picker/date-picker.css CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  /* Days */
37
37
  .chakra-datepicker .react-datepicker__day {
38
- color: var(--chakra-colors-gray-700);
38
+ color: var(--chakra-colors-lm_gray-30);
39
39
  border-radius: var(--chakra-radii-md);
40
40
  margin: 0.1rem;
41
41
  width: 1.75rem;
@@ -44,19 +44,19 @@
44
44
 
45
45
  /* Days hover */
46
46
  .chakra-datepicker .react-datepicker__day:hover {
47
- background-color: var(--chakra-colors-gray-100);
47
+ background-color: var(--chakra-colors-lm_gray-80);
48
48
  }
49
49
 
50
50
  /* Days keyboard selected */
51
51
  .chakra-datepicker .react-datepicker__day--keyboard-selected {
52
- background-color: var(--chakra-colors-brand-200) !important;
52
+ background-color: var(--chakra-colors-lm_cello-50) !important;
53
53
  color: var(--chakra-colors-white) !important;
54
54
  }
55
55
 
56
56
  /* Days selected */
57
57
  .chakra-datepicker .react-datepicker__day--selected,
58
58
  .chakra-datepicker .react-datepicker__day--in-range {
59
- background-color: var(--chakra-colors-brand-500) !important;
59
+ background-color: var(--chakra-colors-lm_cello-40) !important;
60
60
  color: var(--chakra-colors-white) !important;
61
61
  }
62
62
 
@@ -89,24 +89,24 @@
89
89
 
90
90
  /* Time list item */
91
91
  .chakra-datepicker .react-datepicker__time-list-item {
92
- color: var(--chakra-colors-gray-700);
92
+ color: var(--chakra-colors-lm_gray-700);
93
93
  padding: 0.25rem;
94
94
  }
95
95
 
96
96
  /* Time list item hover */
97
97
  .chakra-datepicker .react-datepicker__time-list-item:hover {
98
- background-color: var(--chakra-colors-gray-100);
98
+ background-color: var(--chakra-colors-lm_gray-100);
99
99
  }
100
100
 
101
101
  /* Time list item selected */
102
102
  .chakra-datepicker .react-datepicker__time-list-item--selected {
103
- background-color: var(--chakra-colors-brand-500) !important;
103
+ background-color: var(--chakra-colors-lm_cello-40) !important;
104
104
  color: var(--chakra-colors-white) !important;
105
105
  }
106
106
 
107
107
  /* Day name */
108
108
  .chakra-datepicker .react-datepicker__day-name {
109
- color: var(--chakra-colors-gray-600);
109
+ color: var(--chakra-colors-lm_gray-600);
110
110
  }
111
111
 
112
112
  /* Current month */
@@ -131,76 +131,73 @@
131
131
 
132
132
  /* Dark mode styles */
133
133
  /* Base */
134
- .chakra-datepicker[data-theme='dark'] .react-datepicker {
135
- background-color: var(--chakra-colors-gray-800);
136
- border-color: var(--chakra-colors-gray-700);
134
+ .chakra-datepicker[data-theme="dark"] .react-datepicker {
135
+ background-color: var(--chakra-colors-lm_gray-20);
136
+ border-color: var(--chakra-colors-lm_gray-30);
137
137
  }
138
138
 
139
- .chakra-datepicker[data-theme='dark'] .react-datepicker__header {
140
- background-color: var(--chakra-colors-gray-700);
141
- border-color: var(--chakra-colors-gray-600);
139
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__header {
140
+ background-color: var(--chakra-colors-lm_gray-30);
141
+ border-color: var(--chakra-colors-lm_gray-35);
142
142
  }
143
143
 
144
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day {
145
- color: var(--chakra-colors-gray-300);
144
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day {
145
+ color: var(--chakra-colors-lm_gray-60);
146
146
  }
147
147
 
148
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day:hover {
149
- background-color: var(--chakra-colors-gray-600);
148
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day:hover {
149
+ background-color: var(--chakra-colors-lm_gray-35);
150
150
  }
151
151
 
152
- .chakra-datepicker[data-theme='dark']
153
- .react-datepicker__day--in-selecting-range {
154
- background-color: var(--chakra-colors-brand-700);
152
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day--in-selecting-range {
153
+ background-color: var(--chakra-colors-lm_cello-20);
155
154
  }
156
155
 
157
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-container {
158
- border-color: var(--chakra-colors-gray-600);
156
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-container {
157
+ border-color: var(--chakra-colors-lm_gray-600);
159
158
  }
160
159
 
161
- .chakra-datepicker[data-theme='dark'] .react-datepicker-time__header {
162
- color: var(--chakra-colors-gray-100);
160
+ .chakra-datepicker[data-theme="dark"] .react-datepicker-time__header {
161
+ color: var(--chakra-colors-lm_gray-100);
163
162
  }
164
163
 
165
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list {
166
- background-color: var(--chakra-colors-gray-800);
164
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list {
165
+ background-color: var(--chakra-colors-lm_gray-800);
167
166
  }
168
167
 
169
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list-item {
170
- color: var(--chakra-colors-gray-300);
168
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item {
169
+ color: var(--chakra-colors-lm_gray-300);
171
170
  }
172
171
 
173
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-list-item:hover {
174
- background-color: var(--chakra-colors-gray-600);
172
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item:hover {
173
+ background-color: var(--chakra-colors-lm_gray-600);
175
174
  }
176
175
 
177
- .chakra-datepicker[data-theme='dark']
178
- .react-datepicker__time-list-item--selected {
179
- background-color: var(--chakra-colors-brand-500) !important;
176
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-list-item--selected {
177
+ background-color: var(--chakra-colors-lm_cello-40) !important;
180
178
  color: var(--chakra-colors-white) !important;
181
179
  }
182
180
 
183
- .chakra-datepicker[data-theme='dark'] .react-datepicker__time-box {
181
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__time-box {
184
182
  background-color: var(--chakra-colors-gray-800);
185
183
  }
186
184
 
187
- .chakra-datepicker[data-theme='dark'] .react-datepicker__day-name {
188
- color: var(--chakra-colors-gray-400);
185
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__day-name {
186
+ color: var(--chakra-colors-lm_gray-50);
189
187
  }
190
188
 
191
- .chakra-datepicker[data-theme='dark'] .react-datepicker__current-month {
192
- color: var(--chakra-colors-gray-200);
189
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__current-month {
190
+ color: var(--chakra-colors-lm_gray-75);
193
191
  }
194
192
 
195
- .chakra-datepicker[data-theme='dark']
196
- .react-datepicker__navigation-icon::before {
197
- border-color: var(--chakra-colors-gray-200);
193
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__navigation-icon::before {
194
+ border-color: var(--chakra-colors-lm_gray-75);
198
195
  }
199
196
 
200
197
  /* Month and year select */
201
- .chakra-datepicker[data-theme='dark'] .react-datepicker__month-select,
202
- .chakra-datepicker[data-theme='dark'] .react-datepicker__year-select {
203
- background-color: var(--chakra-colors-gray-700);
198
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__month-select,
199
+ .chakra-datepicker[data-theme="dark"] .react-datepicker__year-select {
200
+ background-color: var(--chakra-colors-lm_gray-700);
204
201
  color: var(--chakra-colors-white);
205
202
  border: 1px solid var(--chakra-colors-border-emphasized);
206
203
  }
package/src/components/select/select.css CHANGED
@@ -2,6 +2,20 @@
2
2
  font-size: var(--chakra-font-sizes-sm);
3
3
  min-width: 200px;
4
4
  display: inline-block;
5
+ width: 100%;
6
+ }
7
+
8
+ .select-custom-container--error .select-custom__control {
9
+ border-color: var(--chakra-colors-border-error) !important;
10
+ }
11
+
12
+ .select-custom-container--error .select-custom__control--is-focused {
13
+ border-color: var(--chakra-colors-border-error) !important;
14
+ box-shadow: 0 0 0 1px var(--chakra-colors-border-error) !important;
15
+ }
16
+
17
+ .select-custom-container--error .select-custom__control:hover {
18
+ border-color: var(--chakra-colors-border-error) !important;
5
19
  }
6
20
 
7
21
  .select-custom__single-value {
@@ -14,17 +28,23 @@
14
28
 
15
29
  .select-custom__control,
16
30
  .select-custom__control--is-focused {
17
- min-height: 33px !important;
18
- background-color: var(--chakra-colors-bg) !important;
31
+ height: var(--chakra-sizes-10) !important;
32
+ background-color: transparent !important;
19
33
  }
20
34
 
21
35
  .select-custom__control--is-focused {
22
36
  box-shadow: none !important;
37
+ outline-offset: 0 !important;
38
+ outline-width: var(--focus-ring-width, 1px) !important;
39
+ outline-color: var(--chakra-colors-color-palette-focus-ring) !important;
40
+ outline-style: var(--focus-ring-style, solid) !important;
41
+ border-color: var(--chakra-colors-color-palette-focus-ring) !important;
23
42
  }
24
43
 
25
44
  .select-custom__menu {
45
+ z-index: 1000 !important;
26
46
  border: 1px solid var(--chakra-colors-border) !important;
27
- background-color: transparent !important;
47
+ background-color: var(--chakra-colors-bg-panel) !important;
28
48
  box-shadow: none !important;
29
49
  border-radius: var(--chakra-radii-md) !important;
30
50
  }
@@ -35,24 +55,26 @@
35
55
  }
36
56
 
37
57
  .select-custom__multi-value {
38
- background-color: var(--chakra-colors-bg-emphasized) !important;
58
+ background-color: var(--chakra-colors-bg-panel) !important;
59
+ border: 1px solid var(--chakra-colors-border) !important;
60
+ border-radius: var(--chakra-radii-sm) !important;
39
61
  }
40
62
  .select-custom__multi-value__label {
41
63
  color: var(--chakra-colors-fg) !important;
42
64
  }
43
65
  .select-custom__option {
44
- background-color: var(--chakra-colors-bg-panel) !important;
66
+ background-color: var(--chakra-colors-bg) !important;
45
67
  font-size: var(--chakra-font-sizes-sm) !important;
46
68
  padding: 5px 10px !important;
47
69
  }
48
70
 
49
71
  .select-custom__option:hover {
50
- background-color: var(--chakra-colors-bg-emphasized) !important;
72
+ background-color: var(--chakra-colors-bg-muted) !important;
51
73
  }
52
74
 
53
75
  .select-custom__option--is-selected {
54
76
  color: var(--chakra-colors-fg) !important;
55
- background-color: var(--chakra-colors-bg-emphasized) !important;
77
+ background-color: var(--chakra-colors-bg-muted) !important;
56
78
  }
57
79
 
58
80
  .select-custom__multi-value__label {
@@ -65,7 +87,7 @@
65
87
 
66
88
  .select-custom__multi-value__remove:hover {
67
89
  cursor: pointer !important;
68
- background-color: var(--chakra-colors-red-emphasized) !important;
90
+ background-color: var(--chakra-colors-danger-muted) !important;
69
91
  }
70
92
 
71
93
  .select-custom__indicator svg {
package/dist/theme/tokens/gradients.d.ts DELETED
@@ -1,6 +0,0 @@
1
- declare const gradients: {
2
- primary: {
3
- value: string;
4
- };
5
- };
6
- export default gradients;