@pzh-ui/css 0.0.100 → 0.0.106

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 (7) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/config/{custom.js → custom.ts} +1 -2
  3. package/config/index.ts +25 -0
  4. package/package.json +23 -26
  5. package/src/tailwind.css +603 -3286
  6. package/src/tailwind.src.css +373 -235
  7. package/config/index.js +0 -216
package/src/tailwind.src.css CHANGED
@@ -1,35 +1,174 @@
1
- @import "tailwindcss/base";
2
- @import "tailwindcss/components";
3
- @import "tailwindcss/utilities";
1
+ @import 'tailwindcss';
2
+ @plugin "@tailwindcss/typography";
3
+
4
+ @theme {
5
+ /* Screens */
6
+ --screen-sm: 640px;
7
+ --screen-md: 768px;
8
+ --screen-lg: 1024px;
9
+ --screen-xl: 1280px;
10
+ --screen-2xl: 1440px;
11
+
12
+ /* Font sizes */
13
+ --text-s: 1rem;
14
+ --text-s--line-height: 1.5rem;
15
+
16
+ --text-m: 1.25rem;
17
+ --text-m--line-height: 1.875rem;
18
+
19
+ --text-l: 1.5rem;
20
+ --text-l--line-height: 1.875rem;
21
+
22
+ --text-heading-xs: 1.125rem;
23
+ --text-heading-xs--line-height: 125%;
24
+
25
+ --text-heading-s: 1.25rem;
26
+ --text-heading-s--line-height: 125%;
27
+
28
+ --text-heading-m: 1.5rem;
29
+ --text-heading-m--line-height: 125%;
30
+
31
+ --text-heading-l: 2rem;
32
+ --text-heading-l--line-height: 125%;
33
+
34
+ --text-heading-xl: 2.5rem;
35
+ --text-heading-xl--line-height: 125%;
36
+
37
+ --text-heading-xxl: 3rem;
38
+ --text-heading-xxl--line-height: 125%;
39
+
40
+ --text-heading-xxxl: 4rem;
41
+ --text-heading-xxxl--line-height: 110%;
42
+
43
+ /* Custom Colors */
44
+ --color-*: initial;
45
+
46
+ --color-pzh-white: #fff;
47
+ --color-pzh-black: #000000;
48
+
49
+ --color-pzh-form: #f4f4f7;
50
+
51
+ --color-pzh-red-10: #ffedf0;
52
+ --color-pzh-red-100: #eb7085;
53
+ --color-pzh-red-500: #d11f3d;
54
+ --color-pzh-red-900: #97162c;
55
+
56
+ --color-pzh-yellow-10: #fff9e3;
57
+ --color-pzh-yellow-100: #f1db7e;
58
+ --color-pzh-yellow-500: #efcc36;
59
+ --color-pzh-yellow-900: #c6a410;
60
+
61
+ --color-pzh-blue-10: #f2f7fc;
62
+ --color-pzh-blue-100: #7badde;
63
+ --color-pzh-blue-500: #281f6b;
64
+ --color-pzh-blue-900: #16113b;
65
+
66
+ --color-pzh-pink-100: #d76aac;
67
+ --color-pzh-pink-500: #aa0067;
68
+ --color-pzh-pink-900: #750047;
69
+
70
+ --color-pzh-orange-100: #fba66a;
71
+ --color-pzh-orange-500: #ff6b02;
72
+ --color-pzh-orange-900: #b24a00;
73
+
74
+ --color-pzh-apple-green-100: #add57d;
75
+ --color-pzh-apple-green-500: #76bc21;
76
+ --color-pzh-apple-green-900: #629623;
77
+
78
+ --color-pzh-purple-100: #9b99cc;
79
+ --color-pzh-purple-500: #503d90;
80
+ --color-pzh-purple-900: #32265a;
81
+
82
+ --color-pzh-warm-gray-100: #beb1a7;
83
+ --color-pzh-warm-gray-500: #847062;
84
+ --color-pzh-warm-gray-900: #584b41;
85
+
86
+ --color-pzh-green-10: #edfaf0;
87
+ --color-pzh-green-100: #61b375;
88
+ --color-pzh-green-500: #00804d;
89
+ --color-pzh-green-900: #004d2e;
90
+
91
+ --color-pzh-gray-100: #f8f8f8;
92
+ --color-pzh-gray-200: #e6e6e6;
93
+ --color-pzh-gray-300: #d5d5d5;
94
+ --color-pzh-gray-400: #bfbfbf;
95
+ --color-pzh-gray-500: #838383;
96
+ --color-pzh-gray-600: #5c5c5c;
97
+ --color-pzh-gray-700: #464646;
98
+ --color-pzh-gray-800: #222222;
99
+
100
+ --color-pzh-positive: #00804d;
101
+ --color-pzh-neutral: #7badde;
102
+ --color-pzh-negative: #d11f3d;
103
+ --color-pzh-visited-link: #5f29a2;
104
+ --color-pzh-backdrop: rgba(92, 92, 92, 0.5);
105
+ --color-pzh-focus: #2360c5;
106
+
107
+ --color-pzh-badge-green: #50a658;
108
+ --color-pzh-badge-red: #cb3b36;
109
+ --color-pzh-badge-orange: #f9b53c;
110
+
111
+ --color-pzh-ui-white: #ffffff;
112
+ --color-pzh-ui-light-blue: #e5eff8;
113
+
114
+ /* Shadows */
115
+ --shadow-card: 0px 18px 60px rgba(0, 0, 0, 0.07),
116
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
117
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
118
+
119
+ /* Animations */
120
+ --animate-accordion-down: accordion-down 0.2s ease-out;
121
+ --animate-accordion-up: accordion-up 0.2s ease-out;
122
+
123
+ @keyframes accordion-down {
124
+ 0% {
125
+ height: 0;
126
+ }
127
+ 100% {
128
+ height: var(--radix-accordion-content-height);
129
+ }
130
+ }
131
+
132
+ @keyframes accordion-up {
133
+ 0% {
134
+ height: var(--radix-accordion-content-height);
135
+ }
136
+ 100% {
137
+ height: 0;
138
+ }
139
+ }
140
+ }
4
141
 
5
142
  @font-face {
6
- font-family: "Karbon Regular";
7
- src: url("./../fonts/Karbon-Regular.woff2") format("woff2");
8
- font-weight: normal;
9
- font-display: swap;
143
+ font-family: 'Karbon Regular';
144
+ src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
145
+ font-weight: normal;
146
+ font-display: swap;
147
+ ascent-override: 90%;
10
148
  }
11
149
 
12
150
  @font-face {
13
- font-family: "Karbon Medium";
14
- src: url("./../fonts/Karbon-Medium.woff2") format("woff2");
15
- font-weight: bold;
16
- font-display: swap;
151
+ font-family: 'Karbon Medium';
152
+ src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
153
+ font-weight: bold;
154
+ font-display: swap;
155
+ ascent-override: 90%;
17
156
  }
18
157
 
19
158
  html {
20
- height: 100%;
21
- overflow: auto;
159
+ height: 100%;
160
+ overflow: auto;
22
161
  }
23
162
 
24
163
  body {
25
- margin: 0;
26
- padding: 0;
27
- font-size: 20px;
28
- line-height: 1.5em;
29
- font-family: "Karbon Regular", sans-serif;
30
- font-weight: 400;
31
- -webkit-font-smoothing: antialiased;
32
- -moz-osx-font-smoothing: grayscale;
164
+ margin: 0;
165
+ padding: 0;
166
+ font-size: 20px;
167
+ line-height: 1.5em;
168
+ font-family: 'Karbon Regular', sans-serif;
169
+ font-weight: 400;
170
+ -webkit-font-smoothing: antialiased;
171
+ -moz-osx-font-smoothing: grayscale;
33
172
  }
34
173
 
35
174
  h1,
@@ -41,268 +180,267 @@ h6,
41
180
  .font-bold,
42
181
  strong,
43
182
  b {
44
- font-family: "Karbon Medium", sans-serif;
183
+ font-family: 'Karbon Medium', sans-serif;
45
184
  }
46
185
 
47
186
  ul li ul li {
48
- list-style-type: circle;
187
+ list-style-type: circle;
49
188
  }
50
189
 
51
190
  ul li ul li ul li {
52
- list-style-type: square;
191
+ list-style-type: square;
53
192
  }
54
193
 
55
194
  ol li ol li {
56
- list-style-type: lower-alpha;
195
+ list-style-type: lower-alpha;
57
196
  }
58
197
 
59
198
  ol li ol li ol li {
60
- list-style-type: lower-roman;
199
+ list-style-type: lower-roman;
61
200
  }
62
201
 
63
202
  .font-normal {
64
- font-family: "Karbon Regular", sans-serif;
203
+ font-family: 'Karbon Regular', sans-serif;
65
204
  }
66
205
 
67
206
  .bold {
68
- font-weight: 700;
207
+ font-weight: 700;
69
208
  }
70
209
 
71
210
  @layer utilities {
72
- .pzh-transition-colors {
73
- @apply transition-colors duration-200 ease-in;
74
- }
211
+ .pzh-transition-colors {
212
+ @apply transition-colors duration-200 ease-in;
213
+ }
75
214
  }
76
215
 
77
216
  @layer components {
78
- /*
79
- * Form elements
80
- */
81
-
82
- .pzh-button {
83
- @apply focus:ring-pzh-focus disabled:bg-pzh-gray-200 disabled:text-pzh-blue-dark disabled:text-opacity-35 inline-flex items-center rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring disabled:cursor-not-allowed;
84
- }
85
-
86
- .pzh-form-input {
87
- @apply placeholder-pzh-gray-600 text-pzh-blue-dark border-pzh-gray-600 hover:border-pzh-blue focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border pb-[6px] pt-[10px] leading-[30px] focus:outline-none focus:outline-none focus:ring focus:ring-2;
88
- }
89
-
90
- .pzh-form-error,
91
- .pzh-form-checkbox.pzh-form-error + span:before,
92
- .pzh-form-radio:checked.pzh-form-error + span:before,
93
- .pzh-form-radio:not(:checked).pzh-form-error + span:before {
94
- @apply border-pzh-red;
95
- }
96
-
97
- .pzh-form-radio:checked + span:before,
98
- .pzh-form-radio:not(:checked) + span:before {
99
- @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded-full border;
100
- content: "";
101
- }
102
- .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
103
- .pzh-form-checkbox:not(:checked):not(:disabled):hover + span:before {
104
- @apply border-pzh-green-500 bg-pzh-green-10;
105
- }
106
- .pzh-form-radio:checked + span:after,
107
- .pzh-form-radio:not(:checked) + span:after {
108
- @apply bg-pzh-white absolute left-1.5 top-2.5 h-2 w-2 rounded-full transition duration-200;
109
- content: "";
110
- }
111
- .pzh-form-radio:checked + span:before {
112
- @apply bg-pzh-green-500 border-pzh-green-500;
113
- }
114
- .pzh-form-radio:not(:checked) + span:after,
115
- .pzh-form-checkbox:not(:checked) + span:after {
116
- opacity: 0;
117
- transform: scale(0);
118
- }
119
- .pzh-form-radio:checked + span:after,
120
- .pzh-form-checkbox:checked + span:after {
121
- opacity: 1;
122
- transform: scale(1);
123
- }
124
- .pzh-form-radio:not(:checked):disabled + span:before,
125
- .pzh-form-checkbox:disabled + span:before {
126
- @apply border-pzh-gray-500 bg-pzh-gray-200;
127
- }
128
-
129
- .pzh-form-checkbox + span:before {
130
- @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded border transition duration-200;
131
- content: "";
132
- }
133
-
134
- .pzh-form-checkbox:checked:not(:disabled) + span:before {
135
- @apply bg-pzh-green-500 border-pzh-green-500;
136
- }
137
-
138
- .pzh-form-checkbox:checked + span:after,
139
- .pzh-form-checkbox:not(:checked) + span:after {
140
- @apply absolute left-1 top-0.5 h-3 w-3 text-white transition duration-200;
141
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
142
- }
143
-
144
- .pzh-form-checkbox:checked:disabled + span:after {
145
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
146
- }
147
-
148
- .pzh-form-radio:focus + span:before,
149
- .pzh-form-checkbox:focus + span:before {
150
- @apply ring-pzh-focus border-pzh-focus outline-none ring ring-2;
151
- }
152
-
153
- .form-field-label {
154
- @apply text-s mb-2 block uppercase tracking-wide text-gray-700;
155
- }
156
-
157
- .form-field-description {
158
- @apply text-s mb-2 text-gray-700;
159
- }
160
-
161
- /*
162
- * React Datepicker
163
- */
164
-
165
- .pzh-datepicker .react-datepicker {
166
- font-family: "Karbon Regular", sans-serif;
217
+ /* Form elements*/
218
+
219
+ .pzh-button {
220
+ @apply focus:ring-pzh-focus disabled:bg-pzh-gray-200 disabled:text-pzh-blue-900/35 inline-flex items-center rounded leading-none ring-offset-2 transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:cursor-not-allowed;
221
+ }
222
+
223
+ .pzh-form-input {
224
+ @apply placeholder-pzh-gray-600 text-pzh-blue-900 border-pzh-gray-600 hover:border-pzh-blue-500 focus:ring-pzh-focus focus:border-pzh-focus disabled:bg-pzh-gray-200 text-m block w-full appearance-none rounded border px-4 py-2 leading-[30px] focus:outline-none focus:ring-2;
225
+ }
226
+
227
+ .pzh-form-error,
228
+ .pzh-form-checkbox.pzh-form-error + span:before,
229
+ .pzh-form-radio:checked.pzh-form-error + span:before,
230
+ .pzh-form-radio:not(:checked).pzh-form-error + span:before {
231
+ @apply border-pzh-red-500;
232
+ }
233
+
234
+ .pzh-form-radio:checked + span:before,
235
+ .pzh-form-radio:not(:checked) + span:before {
236
+ @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded-full border;
237
+ content: '';
238
+ }
239
+ .pzh-form-radio:not(:checked):not(:disabled):hover + span:before,
240
+ .pzh-form-checkbox:not(:checked):not(:disabled):hover + span:before {
241
+ @apply border-pzh-green-500 bg-pzh-green-10;
242
+ }
243
+ .pzh-form-radio:checked + span:after,
244
+ .pzh-form-radio:not(:checked) + span:after {
245
+ @apply bg-pzh-white absolute left-1.5 top-2.5 h-2 w-2 rounded-full transition duration-200;
246
+ content: '';
247
+ }
248
+ .pzh-form-radio:checked + span:before {
249
+ @apply bg-pzh-green-500 border-pzh-green-500;
250
+ }
251
+ .pzh-form-radio:not(:checked) + span:after,
252
+ .pzh-form-checkbox:not(:checked) + span:after {
253
+ opacity: 0;
254
+ transform: scale(0);
255
+ }
256
+ .pzh-form-radio:checked + span:after,
257
+ .pzh-form-checkbox:checked + span:after {
258
+ opacity: 1;
259
+ transform: scale(1);
260
+ }
261
+ .pzh-form-radio:not(:checked):disabled + span:before,
262
+ .pzh-form-checkbox:disabled + span:before {
263
+ @apply border-pzh-gray-500 bg-pzh-gray-200;
264
+ }
265
+
266
+ .pzh-form-checkbox + span:before {
267
+ @apply border-pzh-gray-600 absolute left-0 top-1 h-5 w-5 rounded border transition duration-200;
268
+ content: '';
269
+ }
270
+
271
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
272
+ @apply bg-pzh-green-500 border-pzh-green-500;
273
+ }
274
+
275
+ .pzh-form-checkbox:checked + span:after,
276
+ .pzh-form-checkbox:not(:checked) + span:after {
277
+ @apply text-pzh-white absolute left-1 h-3 w-3 transition duration-200;
278
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
279
+ }
280
+
281
+ .pzh-form-checkbox:checked:disabled + span:after {
282
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
283
+ }
284
+
285
+ .pzh-form-radio:focus + span:before,
286
+ .pzh-form-checkbox:focus + span:before {
287
+ @apply ring-pzh-focus border-pzh-focus outline-none ring-2;
288
+ }
289
+
290
+ .form-field-label {
291
+ @apply text-s text-pzh-gray-700 mb-2 block uppercase tracking-wide;
292
+ }
293
+
294
+ .form-field-description {
295
+ @apply text-s text-pzh-gray-700 mb-2;
296
+ }
297
+
298
+ .pzh-select-input input {
299
+ box-shadow: none !important;
300
+ }
301
+
302
+ .pzh-modal {
303
+ &[data-entering] {
304
+ animation: fade 150ms;
305
+ }
306
+
307
+ &[data-exiting] {
308
+ animation: fade 150ms reverse ease-in;
309
+ }
310
+ }
311
+
312
+ @keyframes fade {
313
+ from {
314
+ opacity: 0;
315
+ }
316
+
317
+ to {
318
+ opacity: 1;
319
+ }
320
+ }
321
+ }
322
+
323
+ @utility prose {
324
+ p.is-editor-empty:first-child::before {
325
+ @apply text-pzh-blue-900/55;
326
+ content: attr(data-placeholder);
327
+ float: left;
328
+ pointer-events: none;
329
+ height: 0;
330
+ }
331
+
332
+ li {
333
+ p,
334
+ & > ol,
335
+ & > ul {
336
+ margin: 0;
337
+ }
338
+ }
339
+
340
+ table {
341
+ @apply text-m border-pzh-gray-600 border;
342
+
343
+ p {
344
+ margin: 0;
345
+ }
346
+
347
+ td,
348
+ th {
349
+ @apply border-pzh-gray-600 border p-2;
350
+ }
351
+
352
+ tr {
353
+ @apply border-pzh-gray-600 border-b;
354
+
355
+ th {
356
+ @apply bg-pzh-gray-100 font-bold;
357
+ }
358
+ }
359
+ }
360
+ }
361
+
362
+ /* React Datepicker */
363
+ .pzh-datepicker .react-datepicker {
364
+ font-family: 'Karbon Regular', sans-serif;
167
365
  font-weight: 400;
168
366
  font-size: 0.8rem;
169
367
  box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
170
- 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
171
- 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
172
- @apply text-pzh-blue-dark border-none;
173
- }
368
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
369
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
370
+ @apply text-pzh-blue-900 border-none;
371
+ }
174
372
 
175
- .pzh-datepicker .react-datepicker__triangle {
373
+ .pzh-datepicker .react-datepicker__triangle {
176
374
  display: none;
177
- }
375
+ }
178
376
 
179
- .pzh-datepicker .react-datepicker__header {
180
- @apply border-none bg-white;
181
- }
377
+ .pzh-datepicker .react-datepicker__header {
378
+ @apply bg-pzh-white border-none;
379
+ }
182
380
 
183
- .pzh-datepicker .react-datepicker__month {
381
+ .pzh-datepicker .react-datepicker__month {
184
382
  @apply mx-0.5 mt-0;
185
- }
383
+ }
186
384
 
187
- .pzh-datepicker .react-datepicker__day-names {
188
- @apply bg-pzh-blue-dark bg-opacity-10;
189
- }
385
+ .pzh-datepicker .react-datepicker__day-names {
386
+ @apply bg-pzh-blue-900/10;
387
+ }
190
388
 
191
- .pzh-datepicker .react-datepicker__day-name {
192
- @apply bold my-0 leading-[26px];
193
- }
389
+ .pzh-datepicker .react-datepicker__day-name {
390
+ @apply my-0 font-bold leading-[26px];
391
+ }
194
392
 
195
- .pzh-datepicker .react-datepicker__current-month {
393
+ .pzh-datepicker .react-datepicker__current-month {
196
394
  @apply mb-2;
197
- }
395
+ }
198
396
 
199
- .pzh-datepicker
397
+ .pzh-datepicker
200
398
  .react-datepicker__day--outside-month:not(
201
- .react-datepicker__day--selected
399
+ .react-datepicker__day--selected
202
400
  ) {
203
- @apply text-pzh-blue-dark text-opacity-35;
204
- }
401
+ @apply text-pzh-blue-900/35;
402
+ }
205
403
 
206
- .pzh-datepicker .react-datepicker__day-name,
207
- .pzh-datepicker .react-datepicker__day,
208
- .pzh-datepicker .react-datepicker__time-name {
404
+ .pzh-datepicker .react-datepicker__day-name,
405
+ .pzh-datepicker .react-datepicker__day,
406
+ .pzh-datepicker .react-datepicker__time-name {
209
407
  @apply mx-2 my-1 h-[26px] w-[26px] leading-7;
210
- }
408
+ }
211
409
 
212
- .pzh-datepicker .react-datepicker__day {
410
+ .pzh-datepicker .react-datepicker__day {
213
411
  @apply rounded-full hover:rounded-full;
214
- }
412
+ }
215
413
 
216
- .pzh-datepicker
414
+ .pzh-datepicker
217
415
  .react-datepicker__day--today:not(.react-datepicker__day--selected),
218
- .pzh-datepicker
416
+ .pzh-datepicker
219
417
  .react-datepicker__day--today:hover:not(.react-datepicker__day--selected),
220
- .pzh-datepicker .react-datepicker__day--keyboard-selected {
221
- @apply bg-pzh-blue-dark text-pzh-blue-dark bg-opacity-10;
222
- }
223
-
224
- .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
225
- @apply bg-pzh-blue-dark bg-opacity-10;
226
- }
227
-
228
- .pzh-datepicker .react-datepicker__day--selected,
229
- .pzh-datepicker .react-datepicker__day--selected:hover {
230
- @apply bg-pzh-green font-bold;
231
- }
232
-
233
- .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
234
- .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
235
- .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
236
- .pzh-datepicker .react-datepicker__navigation-icon::before {
237
- @apply h-[7px] w-[7px] border border-0 border-r-[1px] border-t-[1px] border-black;
238
- }
239
-
240
- .pzh-datepicker .react-datepicker__navigation-icon {
241
- @apply leading-[14px];
242
- }
418
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
419
+ @apply bg-pzh-blue-900/10 text-pzh-blue-900;
420
+ }
243
421
 
244
- .pzh-datepicker .react-datepicker__current-month,
245
- .pzh-datepicker .react-datepicker__day-name,
246
- .pzh-datepicker .react-datepicker__day--today {
247
- @apply font-bold;
248
- }
249
-
250
- .pzh-select-input input {
251
- box-shadow: none !important;
252
- }
253
-
254
- .ProseMirror p.is-editor-empty:first-child::before {
255
- @apply text-pzh-blue-dark/55;
256
- content: attr(data-placeholder);
257
- float: left;
258
- pointer-events: none;
259
- height: 0;
260
- }
261
-
262
- .pzh-modal {
263
- &[data-entering] {
264
- animation: fade 150ms;
265
- }
422
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
423
+ @apply bg-pzh-blue-900/10;
424
+ }
266
425
 
267
- &[data-exiting] {
268
- animation: fade 150ms reverse ease-in;
269
- }
270
- }
426
+ .pzh-datepicker .react-datepicker__day--selected,
427
+ .pzh-datepicker .react-datepicker__day--selected:hover {
428
+ @apply bg-pzh-green-500 font-bold;
429
+ }
271
430
 
272
- @keyframes fade {
273
- from {
274
- opacity: 0;
275
- }
431
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
432
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
433
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
434
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
435
+ @apply border-pzh-black h-[7px] w-[7px] border-0 border-r-[1px] border-t-[1px];
436
+ }
276
437
 
277
- to {
278
- opacity: 1;
279
- }
280
- }
281
-
282
- .prose table {
283
- @apply !text-m;
284
- }
285
-
286
- .prose table,
287
- .prose table td,
288
- .prose table th {
289
- @apply border border-pzh-gray-600;
290
- }
291
-
292
- .prose table tr th {
293
- @apply bg-pzh-gray-100 font-bold;
294
- }
295
-
296
- .prose table tr {
297
- @apply border-b border-pzh-gray-600;
298
- }
299
-
300
- .prose table td,
301
- .prose table th {
302
- @apply !p-2;
303
- }
304
-
305
- .prose table p {
306
- @apply !my-0;
307
- }
438
+ .pzh-datepicker .react-datepicker__navigation-icon {
439
+ @apply leading-[14px];
440
+ }
441
+
442
+ .pzh-datepicker .react-datepicker__current-month,
443
+ .pzh-datepicker .react-datepicker__day-name,
444
+ .pzh-datepicker .react-datepicker__day--today {
445
+ @apply font-bold;
308
446
  }