@indico-data/design-system 2.55.2 → 2.56.0

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 (14) hide show
  1. package/lib/index.css +179 -78
  2. package/lib/index.esm.css +179 -78
  3. package/lib/index.esm.js +1 -1
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +1 -1
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/floatUI/FloatUI.stories.tsx +7 -4
  9. package/src/components/forms/date/datePicker/DatePicker.tsx +2 -2
  10. package/src/components/menu/Menu.stories.tsx +14 -1
  11. package/src/components/menu/styles/Menu.scss +11 -0
  12. package/src/styles/variables/themes/dark.scss +19 -0
  13. package/src/styles/variables/themes/light.scss +178 -88
  14. package/plugin-build-tool.json +0 -4
package/lib/index.css CHANGED
@@ -32,84 +32,159 @@
32
32
  }
33
33
 
34
34
  :root [data-theme=light] {
35
- --pf-primary-color: #6833d0;
36
- --pf-primary-color-100: #f0ebfa;
37
- --pf-primary-color-200: #d5c6f2;
38
- --pf-primary-color-300: #baa1e9;
39
- --pf-primary-color-400: #8c64db;
40
- --pf-primary-color-500: #6833d0;
41
- --pf-primary-color-600: #5e2ebb;
42
- --pf-primary-color-700: #5329a6;
43
- --pf-primary-color-800: #492492;
44
- --pf-primary-color-900: #3e1f7d;
45
- --pf-primary-color-1000: #271153;
46
- --pf-secondary-color: #0070f5;
47
- --pf-secondary-color-100: #dceafd;
48
- --pf-secondary-color-200: #b3d4fc;
49
- --pf-secondary-color-300: #7ab5fa;
50
- --pf-secondary-color-400: #4797f5;
51
- --pf-secondary-color-500: #0070f5;
52
- --pf-secondary-color-600: #0067e1;
53
- --pf-secondary-color-700: #005ac4;
54
- --pf-secondary-color-800: #004eac;
55
- --pf-secondary-color-900: #004393;
56
- --pf-gray-color: #444444;
57
- --pf-gray-color-100: #eeeeee;
58
- --pf-gray-color-200: #d0d0d0;
59
- --pf-gray-color-300: #a9a9a9;
60
- --pf-gray-color-400: #737373;
61
- --pf-gray-color-500: #444444;
62
- --pf-gray-color-600: #373737;
63
- --pf-gray-color-700: #2c2c2c;
64
- --pf-gray-color-800: #1f1f1f;
65
- --pf-gray-color-900: #141414;
66
- --pf-steel-color: #7c8594;
67
- --pf-steel-color-100: #f4f6f8;
68
- --pf-steel-color-200: #d9dee5;
69
- --pf-steel-color-300: #bcc3cd;
70
- --pf-steel-color-400: #a0a9b5;
71
- --pf-steel-color-500: #7c8594;
72
- --pf-steel-color-600: #5f697a;
73
- --pf-steel-color-700: #454e5e;
74
- --pf-steel-color-800: #2d3444;
75
- --pf-steel-color-900: #1b202c;
76
- --pf-green-color: #008a00;
77
- --pf-green-color-100: #d6ecd6;
78
- --pf-green-color-200: #99d099;
79
- --pf-green-color-300: #66b966;
80
- --pf-green-color-400: #33a133;
81
- --pf-green-color-500: #008a00;
82
- --pf-green-color-600: #007c00;
83
- --pf-green-color-700: #006e00;
84
- --pf-green-color-800: #006100;
85
- --pf-green-color-900: #005300;
86
- --pf-orange-color: #ffa424;
87
- --pf-orange-color-100: #ffdfb2;
88
- --pf-orange-color-200: #ffd292;
89
- --pf-orange-color-300: #ffc471;
90
- --pf-orange-color-400: #ffb650;
91
- --pf-orange-color-500: #ffa424;
92
- --pf-orange-color-600: #f29c22;
93
- --pf-orange-color-700: #e69420;
94
- --pf-orange-color-800: #cc831d;
95
- --pf-orange-color-900: #b37319;
96
- --pf-red-color: #e72326;
97
- --pf-red-color-100: #ffd6d6;
98
- --pf-red-color-200: #f49ea0;
99
- --pf-red-color-300: #ef696b;
100
- --pf-red-color-400: #eb4649;
101
- --pf-red-color-500: #e72326;
102
- --pf-red-color-600: #d52023;
103
- --pf-red-color-700: #c21d20;
104
- --pf-red-color-800: #b01b1d;
105
- --pf-red-color-900: #9d181a;
106
- --pf-error-color: var(--pf-red-color-600);
107
- --pf-success-color: var(--pf-green-color-600);
108
- --pf-warning-color: var(--pf-orange-color-600);
109
- --pf-neutral-color: var(--pf-gray-color);
110
- --pf-info-color: var(--pf-secondary-color-600);
111
- --pf-link-color: var(--pf-secondary-color);
112
- --pf-link-hover-color: var(--pf-secondary-color-400);
35
+ --pf-primary-color: #b4cadf;
36
+ --pf-primary-color-50: #5b8ab7;
37
+ --pf-primary-color-100: #6d96c3;
38
+ --pf-primary-color-200: #7b9fc5;
39
+ --pf-primary-color-300: #90adc8;
40
+ --pf-primary-color-400: #a3bdd4;
41
+ --pf-primary-color-500: #b4cadf;
42
+ --pf-primary-color-600: #c4d8eb;
43
+ --pf-primary-color-700: #d2e1f0;
44
+ --pf-primary-color-800: #dfeaf3;
45
+ --pf-primary-color-900: #eef4fa;
46
+ --pf-primary-color-950: #f6f9fc;
47
+ --pf-secondary-color: #3892f3;
48
+ --pf-secondary-color-50: #002b66;
49
+ --pf-secondary-color-100: #003b8c;
50
+ --pf-secondary-color-200: #004cb0;
51
+ --pf-secondary-color-300: #0060d6;
52
+ --pf-secondary-color-400: #0070f5;
53
+ --pf-secondary-color-500: #3892f3;
54
+ --pf-secondary-color-550: #66adff;
55
+ --pf-secondary-color-600: #91c5ff;
56
+ --pf-secondary-color-700: #b8dbff;
57
+ --pf-secondary-color-800: #d4eaff;
58
+ --pf-secondary-color-900: #e0f2ff;
59
+ --pf-secondary-color-950: #eaf4ff;
60
+ --pf-tertiary-color: #8394a9;
61
+ --pf-tertiary-color-50: #142838;
62
+ --pf-tertiary-color-100: #203148;
63
+ --pf-tertiary-color-200: #2e4563;
64
+ --pf-tertiary-color-300: #3e587a;
65
+ --pf-tertiary-color-400: #55677f;
66
+ --pf-tertiary-color-450: #6d8097;
67
+ --pf-tertiary-color-500: #8394a9;
68
+ --pf-tertiary-color-600: #93a3bb;
69
+ --pf-tertiary-color-700: #a5b4c6;
70
+ --pf-tertiary-color-800: #b2bfd0;
71
+ --pf-tertiary-color-900: #c4ccd7;
72
+ --pf-tertiary-color-950: #d6dde5;
73
+ --pf-gray-color: #525252;
74
+ --pf-gray-color-50: #0a0a0a;
75
+ --pf-gray-color-100: #171717;
76
+ --pf-gray-color-200: #262626;
77
+ --pf-gray-color-300: #404040;
78
+ --pf-gray-color-400: #525252;
79
+ --pf-gray-color-450: #737373;
80
+ --pf-gray-color-500: #737373;
81
+ --pf-gray-color-600: #989898;
82
+ --pf-gray-color-700: #bdbdbd;
83
+ --pf-gray-color-800: #dcdcdc;
84
+ --pf-gray-color-900: #efefef;
85
+ --pf-gray-color-950: #f6f6f6;
86
+ --pf-red-color: #f4a5ae;
87
+ --pf-red-color-50: #5b0d16;
88
+ --pf-red-color-100: #761821;
89
+ --pf-red-color-200: #8f252f;
90
+ --pf-red-color-300: #ad303d;
91
+ --pf-red-color-350: #b8424c;
92
+ --pf-red-color-400: #c84a57;
93
+ --pf-red-color-450: #dc5a66;
94
+ --pf-red-color-500: #f4a5ae;
95
+ --pf-red-color-600: #ebb6b8;
96
+ --pf-red-color-700: #f9d5dc;
97
+ --pf-red-color-800: #f4d7d8;
98
+ --pf-red-color-850: #fae9e9;
99
+ --pf-red-color-900: #fcebeb;
100
+ --pf-red-color-950: #fcf5f4;
101
+ --pf-orange-color: #ff873f;
102
+ --pf-orange-color-50: #721e01;
103
+ --pf-orange-color-100: #992702;
104
+ --pf-orange-color-200: #b33403;
105
+ --pf-orange-color-300: #d94b04;
106
+ --pf-orange-color-400: #f25c05;
107
+ --pf-orange-color-500: #ff873f;
108
+ --pf-orange-color-600: #ffa26d;
109
+ --pf-orange-color-700: #ffc9aa;
110
+ --pf-orange-color-800: #ffe3d1;
111
+ --pf-orange-color-900: #fff3ec;
112
+ --pf-orange-color-950: #fffaf7;
113
+ --pf-yellow-color: #ffa400;
114
+ --pf-yellow-color-50: #312602;
115
+ --pf-yellow-color-100: #664200;
116
+ --pf-yellow-color-200: #895c00;
117
+ --pf-yellow-color-300: #b37300;
118
+ --pf-yellow-color-400: #e08e00;
119
+ --pf-yellow-color-500: #ffa400;
120
+ --pf-yellow-color-600: #ffb621;
121
+ --pf-yellow-color-700: #ffc344;
122
+ --pf-yellow-color-800: #ffd369;
123
+ --pf-yellow-color-900: #ffeaa1;
124
+ --pf-yellow-color-950: #fff4d0;
125
+ --pf-green-color: #39c29d;
126
+ --pf-green-color-50: #003325;
127
+ --pf-green-color-100: #075f48;
128
+ --pf-green-color-200: #0a906c;
129
+ --pf-green-color-300: #03aaaa;
130
+ --pf-green-color-400: #26b890;
131
+ --pf-green-color-500: #39c29d;
132
+ --pf-green-color-600: #52ccae;
133
+ --pf-green-color-700: #6cd6ba;
134
+ --pf-green-color-800: #83e2c7;
135
+ --pf-green-color-900: #c1f1e2;
136
+ --pf-green-color-950: #83e2c7;
137
+ --pf-purple-color: #9776d3;
138
+ --pf-purple-color-50: #291a40;
139
+ --pf-purple-color-100: #55377b;
140
+ --pf-purple-color-200: #664196;
141
+ --pf-purple-color-300: #7a4eb3;
142
+ --pf-purple-color-400: #8b60c7;
143
+ --pf-purple-color-500: #9776d3;
144
+ --pf-purple-color-600: #b6a3e2;
145
+ --pf-purple-color-700: #cfc4ee;
146
+ --pf-purple-color-800: #e4dff5;
147
+ --pf-purple-color-900: #f1edfa;
148
+ --pf-purple-color-950: #f7f6fc;
149
+ --pf-white-color: #ffffff;
150
+ --pf-white-color-1: rgba(255, 255, 255, 0.01);
151
+ --pf-white-color-3: rgba(255, 255, 255, 0.03);
152
+ --pf-white-color-5: rgba(255, 255, 255, 0.05);
153
+ --pf-white-color-10: rgba(255, 255, 255, 0.1);
154
+ --pf-white-color-15: rgba(255, 255, 255, 0.15);
155
+ --pf-white-color-20: rgba(255, 255, 255, 0.2);
156
+ --pf-white-color-30: rgba(255, 255, 255, 0.3);
157
+ --pf-white-color-40: rgba(255, 255, 255, 0.4);
158
+ --pf-white-color-50: rgba(255, 255, 255, 0.5);
159
+ --pf-white-color-60: rgba(255, 255, 255, 0.6);
160
+ --pf-white-color-70: rgba(255, 255, 255, 0.7);
161
+ --pf-white-color-80: rgba(255, 255, 255, 0.8);
162
+ --pf-white-color-90: rgba(255, 255, 255, 0.9);
163
+ --pf-white-color-100: rgba(255, 255, 255, 1);
164
+ --pf-black-color: #000000;
165
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
166
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
167
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
168
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
169
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
170
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
171
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
172
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
173
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
174
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
175
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
176
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
177
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
178
+ --pf-black-color-100: rgba(0, 0, 0, 1);
179
+ --pf-error-color: var(--pf-red-color);
180
+ --pf-success-color: var(--pf-green-color);
181
+ --pf-warning-color: var(--pf-yellow-color-300);
182
+ --pf-neutral-color: var(--pf-gray-color-100);
183
+ --pf-info-color: var(--pf-secondary-color-200);
184
+ --pf-brand-color: var(--pf-secondary-color-550);
185
+ --pf-pending-color: var(--pf-red-color-900);
186
+ --pf-link-color: var(--pf-gray-color-300);
187
+ --pf-link-hover-color: var(--pf-gray-color-100);
113
188
  }
114
189
 
115
190
  :root [data-theme=dark],
@@ -164,6 +239,7 @@
164
239
  --pf-gray-color-700: #262626;
165
240
  --pf-gray-color-800: #171717;
166
241
  --pf-gray-color-900: #0a0a0a;
242
+ --pf-gray-color-950: #000000;
167
243
  --pf-red-color: #ce6068;
168
244
  --pf-red-color-50: #fcf5f4;
169
245
  --pf-red-color-100: #fae9e9;
@@ -171,6 +247,7 @@
171
247
  --pf-red-color-300: #ebb6b8;
172
248
  --pf-red-color-350: #f39bb9;
173
249
  --pf-red-color-400: #ef76a0;
250
+ --pf-red-color-450: #df8d91;
174
251
  --pf-red-color-500: #ce6068;
175
252
  --pf-red-color-600: #b94553;
176
253
  --pf-red-color-700: #9b3544;
@@ -241,6 +318,21 @@
241
318
  --pf-white-color-80: rgba(255, 255, 255, 0.8);
242
319
  --pf-white-color-90: rgba(255, 255, 255, 0.9);
243
320
  --pf-white-color-100: rgba(255, 255, 255, 1);
321
+ --pf-black-color: #000000;
322
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
323
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
324
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
325
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
326
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
327
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
328
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
329
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
330
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
331
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
332
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
333
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
334
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
335
+ --pf-black-color-100: rgba(0, 0, 0, 1);
244
336
  --pf-error-color: var(--pf-red-color);
245
337
  --pf-success-color: var(--pf-green-color);
246
338
  --pf-warning-color: var(--pf-yellow-color-300);
@@ -1743,8 +1835,17 @@ form {
1743
1835
  width: 100%;
1744
1836
  text-align: left;
1745
1837
  border: none;
1838
+ border-radius: 0;
1746
1839
  box-shadow: none;
1747
1840
  }
1841
+ .menu .menu-item:first-child {
1842
+ border-top-left-radius: var(--pf-menu-rounded);
1843
+ border-top-right-radius: var(--pf-menu-rounded);
1844
+ }
1845
+ .menu .menu-item:last-child {
1846
+ border-bottom-left-radius: var(--pf-menu-rounded);
1847
+ border-bottom-right-radius: var(--pf-menu-rounded);
1848
+ }
1748
1849
  .menu .menu-item:hover {
1749
1850
  background: var(--pf-menu-item-hover-color);
1750
1851
  }
package/lib/index.esm.css CHANGED
@@ -32,84 +32,159 @@
32
32
  }
33
33
 
34
34
  :root [data-theme=light] {
35
- --pf-primary-color: #6833d0;
36
- --pf-primary-color-100: #f0ebfa;
37
- --pf-primary-color-200: #d5c6f2;
38
- --pf-primary-color-300: #baa1e9;
39
- --pf-primary-color-400: #8c64db;
40
- --pf-primary-color-500: #6833d0;
41
- --pf-primary-color-600: #5e2ebb;
42
- --pf-primary-color-700: #5329a6;
43
- --pf-primary-color-800: #492492;
44
- --pf-primary-color-900: #3e1f7d;
45
- --pf-primary-color-1000: #271153;
46
- --pf-secondary-color: #0070f5;
47
- --pf-secondary-color-100: #dceafd;
48
- --pf-secondary-color-200: #b3d4fc;
49
- --pf-secondary-color-300: #7ab5fa;
50
- --pf-secondary-color-400: #4797f5;
51
- --pf-secondary-color-500: #0070f5;
52
- --pf-secondary-color-600: #0067e1;
53
- --pf-secondary-color-700: #005ac4;
54
- --pf-secondary-color-800: #004eac;
55
- --pf-secondary-color-900: #004393;
56
- --pf-gray-color: #444444;
57
- --pf-gray-color-100: #eeeeee;
58
- --pf-gray-color-200: #d0d0d0;
59
- --pf-gray-color-300: #a9a9a9;
60
- --pf-gray-color-400: #737373;
61
- --pf-gray-color-500: #444444;
62
- --pf-gray-color-600: #373737;
63
- --pf-gray-color-700: #2c2c2c;
64
- --pf-gray-color-800: #1f1f1f;
65
- --pf-gray-color-900: #141414;
66
- --pf-steel-color: #7c8594;
67
- --pf-steel-color-100: #f4f6f8;
68
- --pf-steel-color-200: #d9dee5;
69
- --pf-steel-color-300: #bcc3cd;
70
- --pf-steel-color-400: #a0a9b5;
71
- --pf-steel-color-500: #7c8594;
72
- --pf-steel-color-600: #5f697a;
73
- --pf-steel-color-700: #454e5e;
74
- --pf-steel-color-800: #2d3444;
75
- --pf-steel-color-900: #1b202c;
76
- --pf-green-color: #008a00;
77
- --pf-green-color-100: #d6ecd6;
78
- --pf-green-color-200: #99d099;
79
- --pf-green-color-300: #66b966;
80
- --pf-green-color-400: #33a133;
81
- --pf-green-color-500: #008a00;
82
- --pf-green-color-600: #007c00;
83
- --pf-green-color-700: #006e00;
84
- --pf-green-color-800: #006100;
85
- --pf-green-color-900: #005300;
86
- --pf-orange-color: #ffa424;
87
- --pf-orange-color-100: #ffdfb2;
88
- --pf-orange-color-200: #ffd292;
89
- --pf-orange-color-300: #ffc471;
90
- --pf-orange-color-400: #ffb650;
91
- --pf-orange-color-500: #ffa424;
92
- --pf-orange-color-600: #f29c22;
93
- --pf-orange-color-700: #e69420;
94
- --pf-orange-color-800: #cc831d;
95
- --pf-orange-color-900: #b37319;
96
- --pf-red-color: #e72326;
97
- --pf-red-color-100: #ffd6d6;
98
- --pf-red-color-200: #f49ea0;
99
- --pf-red-color-300: #ef696b;
100
- --pf-red-color-400: #eb4649;
101
- --pf-red-color-500: #e72326;
102
- --pf-red-color-600: #d52023;
103
- --pf-red-color-700: #c21d20;
104
- --pf-red-color-800: #b01b1d;
105
- --pf-red-color-900: #9d181a;
106
- --pf-error-color: var(--pf-red-color-600);
107
- --pf-success-color: var(--pf-green-color-600);
108
- --pf-warning-color: var(--pf-orange-color-600);
109
- --pf-neutral-color: var(--pf-gray-color);
110
- --pf-info-color: var(--pf-secondary-color-600);
111
- --pf-link-color: var(--pf-secondary-color);
112
- --pf-link-hover-color: var(--pf-secondary-color-400);
35
+ --pf-primary-color: #b4cadf;
36
+ --pf-primary-color-50: #5b8ab7;
37
+ --pf-primary-color-100: #6d96c3;
38
+ --pf-primary-color-200: #7b9fc5;
39
+ --pf-primary-color-300: #90adc8;
40
+ --pf-primary-color-400: #a3bdd4;
41
+ --pf-primary-color-500: #b4cadf;
42
+ --pf-primary-color-600: #c4d8eb;
43
+ --pf-primary-color-700: #d2e1f0;
44
+ --pf-primary-color-800: #dfeaf3;
45
+ --pf-primary-color-900: #eef4fa;
46
+ --pf-primary-color-950: #f6f9fc;
47
+ --pf-secondary-color: #3892f3;
48
+ --pf-secondary-color-50: #002b66;
49
+ --pf-secondary-color-100: #003b8c;
50
+ --pf-secondary-color-200: #004cb0;
51
+ --pf-secondary-color-300: #0060d6;
52
+ --pf-secondary-color-400: #0070f5;
53
+ --pf-secondary-color-500: #3892f3;
54
+ --pf-secondary-color-550: #66adff;
55
+ --pf-secondary-color-600: #91c5ff;
56
+ --pf-secondary-color-700: #b8dbff;
57
+ --pf-secondary-color-800: #d4eaff;
58
+ --pf-secondary-color-900: #e0f2ff;
59
+ --pf-secondary-color-950: #eaf4ff;
60
+ --pf-tertiary-color: #8394a9;
61
+ --pf-tertiary-color-50: #142838;
62
+ --pf-tertiary-color-100: #203148;
63
+ --pf-tertiary-color-200: #2e4563;
64
+ --pf-tertiary-color-300: #3e587a;
65
+ --pf-tertiary-color-400: #55677f;
66
+ --pf-tertiary-color-450: #6d8097;
67
+ --pf-tertiary-color-500: #8394a9;
68
+ --pf-tertiary-color-600: #93a3bb;
69
+ --pf-tertiary-color-700: #a5b4c6;
70
+ --pf-tertiary-color-800: #b2bfd0;
71
+ --pf-tertiary-color-900: #c4ccd7;
72
+ --pf-tertiary-color-950: #d6dde5;
73
+ --pf-gray-color: #525252;
74
+ --pf-gray-color-50: #0a0a0a;
75
+ --pf-gray-color-100: #171717;
76
+ --pf-gray-color-200: #262626;
77
+ --pf-gray-color-300: #404040;
78
+ --pf-gray-color-400: #525252;
79
+ --pf-gray-color-450: #737373;
80
+ --pf-gray-color-500: #737373;
81
+ --pf-gray-color-600: #989898;
82
+ --pf-gray-color-700: #bdbdbd;
83
+ --pf-gray-color-800: #dcdcdc;
84
+ --pf-gray-color-900: #efefef;
85
+ --pf-gray-color-950: #f6f6f6;
86
+ --pf-red-color: #f4a5ae;
87
+ --pf-red-color-50: #5b0d16;
88
+ --pf-red-color-100: #761821;
89
+ --pf-red-color-200: #8f252f;
90
+ --pf-red-color-300: #ad303d;
91
+ --pf-red-color-350: #b8424c;
92
+ --pf-red-color-400: #c84a57;
93
+ --pf-red-color-450: #dc5a66;
94
+ --pf-red-color-500: #f4a5ae;
95
+ --pf-red-color-600: #ebb6b8;
96
+ --pf-red-color-700: #f9d5dc;
97
+ --pf-red-color-800: #f4d7d8;
98
+ --pf-red-color-850: #fae9e9;
99
+ --pf-red-color-900: #fcebeb;
100
+ --pf-red-color-950: #fcf5f4;
101
+ --pf-orange-color: #ff873f;
102
+ --pf-orange-color-50: #721e01;
103
+ --pf-orange-color-100: #992702;
104
+ --pf-orange-color-200: #b33403;
105
+ --pf-orange-color-300: #d94b04;
106
+ --pf-orange-color-400: #f25c05;
107
+ --pf-orange-color-500: #ff873f;
108
+ --pf-orange-color-600: #ffa26d;
109
+ --pf-orange-color-700: #ffc9aa;
110
+ --pf-orange-color-800: #ffe3d1;
111
+ --pf-orange-color-900: #fff3ec;
112
+ --pf-orange-color-950: #fffaf7;
113
+ --pf-yellow-color: #ffa400;
114
+ --pf-yellow-color-50: #312602;
115
+ --pf-yellow-color-100: #664200;
116
+ --pf-yellow-color-200: #895c00;
117
+ --pf-yellow-color-300: #b37300;
118
+ --pf-yellow-color-400: #e08e00;
119
+ --pf-yellow-color-500: #ffa400;
120
+ --pf-yellow-color-600: #ffb621;
121
+ --pf-yellow-color-700: #ffc344;
122
+ --pf-yellow-color-800: #ffd369;
123
+ --pf-yellow-color-900: #ffeaa1;
124
+ --pf-yellow-color-950: #fff4d0;
125
+ --pf-green-color: #39c29d;
126
+ --pf-green-color-50: #003325;
127
+ --pf-green-color-100: #075f48;
128
+ --pf-green-color-200: #0a906c;
129
+ --pf-green-color-300: #03aaaa;
130
+ --pf-green-color-400: #26b890;
131
+ --pf-green-color-500: #39c29d;
132
+ --pf-green-color-600: #52ccae;
133
+ --pf-green-color-700: #6cd6ba;
134
+ --pf-green-color-800: #83e2c7;
135
+ --pf-green-color-900: #c1f1e2;
136
+ --pf-green-color-950: #83e2c7;
137
+ --pf-purple-color: #9776d3;
138
+ --pf-purple-color-50: #291a40;
139
+ --pf-purple-color-100: #55377b;
140
+ --pf-purple-color-200: #664196;
141
+ --pf-purple-color-300: #7a4eb3;
142
+ --pf-purple-color-400: #8b60c7;
143
+ --pf-purple-color-500: #9776d3;
144
+ --pf-purple-color-600: #b6a3e2;
145
+ --pf-purple-color-700: #cfc4ee;
146
+ --pf-purple-color-800: #e4dff5;
147
+ --pf-purple-color-900: #f1edfa;
148
+ --pf-purple-color-950: #f7f6fc;
149
+ --pf-white-color: #ffffff;
150
+ --pf-white-color-1: rgba(255, 255, 255, 0.01);
151
+ --pf-white-color-3: rgba(255, 255, 255, 0.03);
152
+ --pf-white-color-5: rgba(255, 255, 255, 0.05);
153
+ --pf-white-color-10: rgba(255, 255, 255, 0.1);
154
+ --pf-white-color-15: rgba(255, 255, 255, 0.15);
155
+ --pf-white-color-20: rgba(255, 255, 255, 0.2);
156
+ --pf-white-color-30: rgba(255, 255, 255, 0.3);
157
+ --pf-white-color-40: rgba(255, 255, 255, 0.4);
158
+ --pf-white-color-50: rgba(255, 255, 255, 0.5);
159
+ --pf-white-color-60: rgba(255, 255, 255, 0.6);
160
+ --pf-white-color-70: rgba(255, 255, 255, 0.7);
161
+ --pf-white-color-80: rgba(255, 255, 255, 0.8);
162
+ --pf-white-color-90: rgba(255, 255, 255, 0.9);
163
+ --pf-white-color-100: rgba(255, 255, 255, 1);
164
+ --pf-black-color: #000000;
165
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
166
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
167
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
168
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
169
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
170
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
171
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
172
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
173
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
174
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
175
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
176
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
177
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
178
+ --pf-black-color-100: rgba(0, 0, 0, 1);
179
+ --pf-error-color: var(--pf-red-color);
180
+ --pf-success-color: var(--pf-green-color);
181
+ --pf-warning-color: var(--pf-yellow-color-300);
182
+ --pf-neutral-color: var(--pf-gray-color-100);
183
+ --pf-info-color: var(--pf-secondary-color-200);
184
+ --pf-brand-color: var(--pf-secondary-color-550);
185
+ --pf-pending-color: var(--pf-red-color-900);
186
+ --pf-link-color: var(--pf-gray-color-300);
187
+ --pf-link-hover-color: var(--pf-gray-color-100);
113
188
  }
114
189
 
115
190
  :root [data-theme=dark],
@@ -164,6 +239,7 @@
164
239
  --pf-gray-color-700: #262626;
165
240
  --pf-gray-color-800: #171717;
166
241
  --pf-gray-color-900: #0a0a0a;
242
+ --pf-gray-color-950: #000000;
167
243
  --pf-red-color: #ce6068;
168
244
  --pf-red-color-50: #fcf5f4;
169
245
  --pf-red-color-100: #fae9e9;
@@ -171,6 +247,7 @@
171
247
  --pf-red-color-300: #ebb6b8;
172
248
  --pf-red-color-350: #f39bb9;
173
249
  --pf-red-color-400: #ef76a0;
250
+ --pf-red-color-450: #df8d91;
174
251
  --pf-red-color-500: #ce6068;
175
252
  --pf-red-color-600: #b94553;
176
253
  --pf-red-color-700: #9b3544;
@@ -241,6 +318,21 @@
241
318
  --pf-white-color-80: rgba(255, 255, 255, 0.8);
242
319
  --pf-white-color-90: rgba(255, 255, 255, 0.9);
243
320
  --pf-white-color-100: rgba(255, 255, 255, 1);
321
+ --pf-black-color: #000000;
322
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
323
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
324
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
325
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
326
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
327
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
328
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
329
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
330
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
331
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
332
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
333
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
334
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
335
+ --pf-black-color-100: rgba(0, 0, 0, 1);
244
336
  --pf-error-color: var(--pf-red-color);
245
337
  --pf-success-color: var(--pf-green-color);
246
338
  --pf-warning-color: var(--pf-yellow-color-300);
@@ -1743,8 +1835,17 @@ form {
1743
1835
  width: 100%;
1744
1836
  text-align: left;
1745
1837
  border: none;
1838
+ border-radius: 0;
1746
1839
  box-shadow: none;
1747
1840
  }
1841
+ .menu .menu-item:first-child {
1842
+ border-top-left-radius: var(--pf-menu-rounded);
1843
+ border-top-right-radius: var(--pf-menu-rounded);
1844
+ }
1845
+ .menu .menu-item:last-child {
1846
+ border-bottom-left-radius: var(--pf-menu-rounded);
1847
+ border-bottom-right-radius: var(--pf-menu-rounded);
1848
+ }
1748
1849
  .menu .menu-item:hover {
1749
1850
  background: var(--pf-menu-item-hover-color);
1750
1851
  }
package/lib/index.esm.js CHANGED
@@ -11941,7 +11941,7 @@ const DatePicker = (props) => {
11941
11941
  onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
11942
11942
  };
11943
11943
  const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
11944
- return (jsxs(Fragment, { children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
11944
+ return (jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
11945
11945
  };
11946
11946
 
11947
11947
  function getNodeName$1(node) {