armtek-uikit-react 1.0.167 → 1.0.169

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 (19) hide show
  1. package/assets/Button.scss +268 -267
  2. package/assets/DatePicker.scss +44 -0
  3. package/assets/TextField.scss +23 -1
  4. package/assets/styles.min.css +1 -1
  5. package/assets/styles.min.css.map +1 -1
  6. package/lib/hooks/useEnhancedEffect.js +1 -1
  7. package/lib/hooks/useEventCallback.js +1 -1
  8. package/package.json +1 -1
  9. package/types/theme.d.ts +3 -0
  10. package/ui/Adornment/index.js +1 -1
  11. package/ui/Form/DateField/DateField.d.ts +2 -1
  12. package/ui/Form/DateField/DateField.js +0 -34
  13. package/ui/Form/DatePicker/DatePicker.js +1 -1
  14. package/ui/Form/Select/index.js +1 -1
  15. package/ui/Form/TextField/TextField.js +1 -1
  16. package/ui/Form/TextField/index.js +1 -1
  17. package/ui/Form/TimeField/TimeField.d.ts +2 -2
  18. package/ui/List/ListItem.js +1 -1
  19. package/versions.1stories.js +23 -0
package/assets/Button.scss CHANGED
@@ -284,279 +284,280 @@
284
284
  }
285
285
  }
286
286
 
287
-
288
- .arm-button_theme_dark.arm-button_contained {
289
- &.arm-button_primary{
290
- color: var(--color-primary-contrast);
291
- background: var(--color-blue-800);
292
- &:hover{
293
- background: var(--color-primary);
294
- }
295
- &:active{
296
- background: var(--color-primary-light);
297
- }
298
- &.arm-button_disabled,
299
- &:disabled{
300
- background: var(--color-primary-light);
301
- opacity: 0.2;
302
- }
303
- }
304
- &.arm-button_secondary {
305
- color: var(--color-secondary-contrast);
306
- &:active{
307
- background: var(--color-secondary-light);
308
- }
309
- &.arm-button_disabled,
310
- &:disabled{
311
- background: var(--color-secondary-light);
312
- opacity: 0.1;
313
- }
314
- }
315
- &.arm-button_neutral {
316
- color: var(--color-neutral-contrast);
317
- background: var(--color-gray-500);
318
- opacity: 0.3;
319
- &:hover{
320
- background: var(--color-neutral);
321
- opacity: 1;
322
- }
323
- &:active{
287
+ .arm-theme-dark {
288
+ .arm-button_contained {
289
+ &.arm-button_primary{
290
+ color: var(--color-primary-contrast);
291
+ background: var(--color-blue-800);
292
+ &:hover{
293
+ background: var(--color-primary);
294
+ }
295
+ &:active{
296
+ background: var(--color-primary-light);
297
+ }
298
+ &.arm-button_disabled,
299
+ &:disabled{
300
+ background: var(--color-primary-light);
301
+ opacity: 0.2;
302
+ }
303
+ }
304
+ &.arm-button_secondary {
305
+ color: var(--color-secondary-contrast);
306
+ &:active{
307
+ background: var(--color-secondary-light);
308
+ }
309
+ &.arm-button_disabled,
310
+ &:disabled{
311
+ background: var(--color-secondary-light);
312
+ opacity: 0.1;
313
+ }
314
+ }
315
+ &.arm-button_neutral {
316
+ color: var(--color-neutral-contrast);
324
317
  background: var(--color-gray-500);
325
- opacity: 0.4;
326
- }
327
- &.arm-button_disabled,
328
- &:disabled{
318
+ opacity: 0.3;
319
+ &:hover{
320
+ background: var(--color-neutral);
321
+ opacity: 1;
322
+ }
323
+ &:active{
324
+ background: var(--color-gray-500);
325
+ opacity: 0.4;
326
+ }
327
+ &.arm-button_disabled,
328
+ &:disabled{
329
+ background: #fff;
330
+ opacity: 0.5;
331
+ }
332
+ }
333
+ &.arm-button_black {
334
+ color: var(--color-neutral);
329
335
  background: #fff;
330
- opacity: 0.5;
331
- }
332
- }
333
- &.arm-button_black {
334
- color: var(--color-neutral);
335
- background: #fff;
336
- &:hover{
337
- opacity: 0.9;
338
- }
339
- &:active{
340
- opacity: 0.7;
341
- }
342
- &.arm-button_disabled,
343
- &:disabled{
344
- opacity: 0.5;
345
- }
346
- }
347
- &.arm-button_green {
348
- color: var(--color-success-contrast);
349
- background: var(--color-green-800);
350
- &:hover{
351
- background: var(--color-success);
352
- }
353
- &:active{
354
- background: var(--color-success-light);
355
- }
356
- &.arm-button_disabled,
357
- &:disabled{
358
- background: var(--color-success-light);
359
- opacity: 0.2;
360
- }
361
- }
362
- &.arm-button_red {
363
- color: var(--color-error-contrast);
364
- background: var(--color-red-800);
365
- &:hover{
366
- background-color: rgba(var(--color-error-rgba), 0.1);
367
- }
368
- &:active{
369
- background: rgba(var(--color-error-rgba), 0.2);
370
- }
371
- &.arm-button_disabled,
372
- &:disabled{
373
- background: var(--color-error-light);
374
- opacity: 0.15;
375
- }
376
- }
377
- }
378
- .arm-button_theme_dark.arm-button_outlined {
379
- background: transparent;
380
- &.arm-button_primary{
336
+ &:hover{
337
+ opacity: 0.9;
338
+ }
339
+ &:active{
340
+ opacity: 0.7;
341
+ }
342
+ &.arm-button_disabled,
343
+ &:disabled{
344
+ opacity: 0.5;
345
+ }
346
+ }
347
+ &.arm-button_green {
348
+ color: var(--color-success-contrast);
349
+ background: var(--color-green-800);
350
+ &:hover{
351
+ background: var(--color-success);
352
+ }
353
+ &:active{
354
+ background: var(--color-success-light);
355
+ }
356
+ &.arm-button_disabled,
357
+ &:disabled{
358
+ background: var(--color-success-light);
359
+ opacity: 0.2;
360
+ }
361
+ }
362
+ &.arm-button_red {
363
+ color: var(--color-error-contrast);
364
+ background: var(--color-red-800);
365
+ &:hover{
366
+ background-color: rgba(var(--color-error-rgba), 0.1);
367
+ }
368
+ &:active{
369
+ background: rgba(var(--color-error-rgba), 0.2);
370
+ }
371
+ &.arm-button_disabled,
372
+ &:disabled{
373
+ background: var(--color-error-light);
374
+ opacity: 0.15;
375
+ }
376
+ }
377
+ }
378
+ .arm-button_outlined {
379
+ background: transparent;
380
+ &.arm-button_primary{
381
381
 
382
- color: var(--color-primary);
383
- border-color: var(--color-primary);
382
+ color: var(--color-blue-600);
383
+ border-color: var(--color-blue-600);
384
+ background: transparent;
385
+ &:hover{
386
+ background: rgba(var(--color-blue-800-rgba), 0.1);
387
+ }
388
+ &:active{
389
+ background: rgba(var(--color-blue-800-rgba), 0.2);
390
+ }
391
+ &.arm-button_disabled,
392
+ &:disabled{
393
+ color: rgba(var(--color-blue-800-rgba), 0.6);
394
+ border-color: rgba(var(--color-blue-800-rgba), 0.6);
395
+ }
396
+ }
397
+ &.arm-button_secondary {
398
+ border-color: var(--color-secondary);
399
+ color: var(--color-secondary);
400
+ &:hover{
401
+ background: rgba(var(--color-secondary-rgba), 0.1);
402
+ }
403
+ &:active{
404
+ background: var(--color-orange-100);
405
+ }
406
+ &.arm-button_disabled,
407
+ &:disabled{
408
+ color: var(--color-primary-light);
409
+ border-color: var(--color-primary-light);
410
+ }
411
+ }
412
+ &.arm-button_neutral {
413
+ border-color: var(--color-gray-900);
414
+ color: var(--color-gray-900);
415
+ &:hover{
416
+ background: rgba(var(--color-neutral-rgba), 0.1);
417
+ }
418
+ &:active{
419
+ background: var(--color-gray-300);
420
+ }
421
+ &.arm-button_disabled,
422
+ &:disabled{
423
+ color: var(--color-neutral-light);
424
+ border-color: var(--color-neutral-light);
425
+ }
426
+ }
427
+ &.arm-button_black {
428
+ border-color: #fff;
429
+ color: #fff;
430
+ &:hover{
431
+ background: rgba(255, 255, 255, 0.1);
432
+ }
433
+ &:active{
434
+ background: rgba(255, 255, 255, 0.25);
435
+ }
436
+ &.arm-button_disabled,
437
+ &:disabled{
438
+ color: rgba(255, 255, 255, 0.1);
439
+ border-color: rgba(255, 255, 255, 0.1);
440
+ }
441
+ }
442
+ &.arm-button_green {
443
+ border-color: var(--color-green-600);
444
+ color: var(--color-green-600);
445
+ &:hover{
446
+ background-color: rgba(var(--color-green-800-rgba), 0.1);
447
+ }
448
+ &:active{
449
+ background-color: rgba(var(--color-green-800-rgba), 0.2);
450
+ }
451
+ &.arm-button_disabled,
452
+ &:disabled{
453
+ color: var(--color-green-800);
454
+ border-color: var(--color-green-800);
455
+ opacity: 0.2;
456
+ }
457
+ }
458
+ &.arm-button_red {
459
+ border-color: var(--color-red-600);
460
+ color: var(--color-red-600);
461
+ &:hover{
462
+ background-color: rgba(var(--color-error-rgba), 0.1);
463
+ }
464
+ &:active{
465
+ background: rgba(var(--color-error-rgba), 0.2);
466
+ }
467
+ &.arm-button_disabled,
468
+ &:disabled{
469
+ color: var(--color-error);
470
+ border-color: var(--color-error);
471
+ opacity: 0.4;
472
+ }
473
+ }
474
+ }
475
+ .arm-button_transparent {
384
476
  background: transparent;
385
- &:hover{
386
- background: rgba(var(--color-primary-rgba), 0.1);
387
- }
388
- &:active{
389
- background: var(--color-blue-a100);
390
- }
391
- &.arm-button_disabled,
392
- &:disabled{
393
- color: var(--color-primary-light);
394
- border-color: var(--color-primary-light);
395
- }
396
- }
397
- &.arm-button_secondary {
398
- border-color: var(--color-secondary);
399
- color: var(--color-secondary);
400
- &:hover{
401
- background: rgba(var(--color-secondary-rgba), 0.1);
402
- }
403
- &:active{
404
- background: var(--color-orange-100);
405
- }
406
- &.arm-button_disabled,
407
- &:disabled{
408
- color: var(--color-primary-light);
409
- border-color: var(--color-primary-light);
410
- }
411
- }
412
- &.arm-button_neutral {
413
- border-color: var(--color-gray-900);
414
- color: var(--color-gray-900);
415
- &:hover{
416
- background: rgba(var(--color-neutral-rgba), 0.1);
417
- }
418
- &:active{
419
- background: var(--color-gray-300);
420
- }
421
- &.arm-button_disabled,
422
- &:disabled{
477
+ &.arm-button_primary{
478
+ color: var(--color-primary);
479
+ background: transparent;
480
+ &:hover{
481
+ background: rgba(var(--color-primary-rgba), 0.1);
482
+ }
483
+ &:active{
484
+ background: var(--color-blue-a100);
485
+ }
486
+ &.arm-button_disabled,
487
+ &:disabled{
488
+ color: var(--color-primary-light);
489
+ background: none;
490
+ }
491
+ }
492
+ &.arm-button_secondary {
493
+ color: var(--color-secondary);
494
+ &:hover{
495
+ background: rgba(var(--color-secondary-rgba), 0.1);
496
+ }
497
+ &:active{
498
+ background: var(--color-orange-100);
499
+ }
500
+ &.arm-button_disabled,
501
+ &:disabled{
502
+ color: var(--color-primary-light);
503
+ background: none;
504
+ }
505
+ }
506
+ &.arm-button_neutral {
423
507
  color: var(--color-neutral-light);
424
- border-color: var(--color-neutral-light);
425
- }
426
- }
427
- &.arm-button_black {
428
- border-color: #fff;
429
- color: #fff;
430
- &:hover{
431
- background: rgba(255, 255, 255, 0.1);
432
- }
433
- &:active{
434
- background: rgba(255, 255, 255, 0.25);
435
- }
436
- &.arm-button_disabled,
437
- &:disabled{
438
- color: rgba(255, 255, 255, 0.1);
439
- border-color: rgba(255, 255, 255, 0.1);
440
- }
441
- }
442
- &.arm-button_green {
443
- border-color: var(--color-green-600);
444
- color: var(--color-green-600);
445
- &:hover{
446
- background-color: rgba(var(--color-green-800-rgba), 0.1);
447
- }
448
- &:active{
449
- background-color: rgba(var(--color-green-800-rgba), 0.2);
450
- }
451
- &.arm-button_disabled,
452
- &:disabled{
453
- color: var(--color-green-800);
454
- border-color: var(--color-green-800);
455
- opacity: 0.2;
456
- }
457
- }
458
- &.arm-button_red {
459
- border-color: var(--color-red-600);
460
- color: var(--color-red-600);
461
- &:hover{
462
- background-color: rgba(var(--color-error-rgba), 0.1);
463
- }
464
- &:active{
465
- background: rgba(var(--color-error-rgba), 0.2);
466
- }
467
- &.arm-button_disabled,
468
- &:disabled{
469
- color: var(--color-error);
470
- border-color: var(--color-error);
471
- opacity: 0.4;
472
- }
473
- }
474
- }
475
- .arm-button_theme_dark.arm-button_transparent {
476
- background: transparent;
477
- &.arm-button_primary{
478
- color: var(--color-primary);
479
- background: transparent;
480
- &:hover{
481
- background: rgba(var(--color-primary-rgba), 0.1);
482
- }
483
- &:active{
484
- background: var(--color-blue-a100);
485
- }
486
- &.arm-button_disabled,
487
- &:disabled{
488
- color: var(--color-primary-light);
489
- background: none;
490
- }
491
- }
492
- &.arm-button_secondary {
493
- color: var(--color-secondary);
494
- &:hover{
495
- background: rgba(var(--color-secondary-rgba), 0.1);
496
- }
497
- &:active{
498
- background: var(--color-orange-100);
499
- }
500
- &.arm-button_disabled,
501
- &:disabled{
502
- color: var(--color-primary-light);
503
- background: none;
504
- }
505
- }
506
- &.arm-button_neutral {
507
- color: var(--color-neutral-light);
508
- &:hover{
509
- background: var(--color-neutral);
510
- }
511
- &:active{
512
- background-color: rgba(var(--color-gray-500-rgba), 0.4);
513
- }
514
- &.arm-button_disabled,
515
- &:disabled{
516
- color: #ffffff;
517
- opacity: 0.1;
518
- }
519
- }
520
- &.arm-button_black {
521
- color: #fff;
522
- &:hover{
523
- background: rgba(255, 255, 255, 0.1);
524
- }
525
- &:active{
526
- background: rgba(255, 255, 255, 0.2);
527
- }
528
- &.arm-button_disabled,
529
- &:disabled{
508
+ &:hover{
509
+ background: var(--color-neutral);
510
+ }
511
+ &:active{
512
+ background-color: rgba(var(--color-gray-500-rgba), 0.4);
513
+ }
514
+ &.arm-button_disabled,
515
+ &:disabled{
516
+ color: #ffffff;
517
+ opacity: 0.1;
518
+ }
519
+ }
520
+ &.arm-button_black {
530
521
  color: #fff;
531
- opacity: 0.1;
532
- }
533
- }
534
- &.arm-button_green {
535
- color: var(--color-green-600);
536
- &:hover{
537
- background-color: rgba(var(--color-green-800-rgba), 0.1);
538
- }
539
- &:active{
540
- background-color: rgba(var(--color-green-800-rgba), 0.2);
541
- }
542
- &.arm-button_disabled,
543
- &:disabled{
544
- color: var(--color-green-800);
545
- opacity: 0.2;
546
- }
547
- }
548
- &.arm-button_red {
549
- color: var(--color-red-600);
550
- &:hover{
551
- background-color: rgba(var(--color-error-rgba), 0.1);
552
- }
553
- &:active{
554
- background-color: rgba(var(--color-error-rgba), 0.2);
555
- }
556
- &.arm-button_disabled,
557
- &:disabled{
558
- color: var(--color-error);
559
- opacity: 0.4;
522
+ &:hover{
523
+ background: rgba(255, 255, 255, 0.1);
524
+ }
525
+ &:active{
526
+ background: rgba(255, 255, 255, 0.2);
527
+ }
528
+ &.arm-button_disabled,
529
+ &:disabled{
530
+ color: #fff;
531
+ opacity: 0.1;
532
+ }
533
+ }
534
+ &.arm-button_green {
535
+ color: var(--color-green-600);
536
+ &:hover{
537
+ background-color: rgba(var(--color-green-800-rgba), 0.1);
538
+ }
539
+ &:active{
540
+ background-color: rgba(var(--color-green-800-rgba), 0.2);
541
+ }
542
+ &.arm-button_disabled,
543
+ &:disabled{
544
+ color: var(--color-green-800);
545
+ opacity: 0.2;
546
+ }
547
+ }
548
+ &.arm-button_red {
549
+ color: var(--color-red-600);
550
+ &:hover{
551
+ background-color: rgba(var(--color-error-rgba), 0.1);
552
+ }
553
+ &:active{
554
+ background-color: rgba(var(--color-error-rgba), 0.2);
555
+ }
556
+ &.arm-button_disabled,
557
+ &:disabled{
558
+ color: var(--color-error);
559
+ opacity: 0.4;
560
+ }
560
561
  }
561
562
  }
562
563
  }
package/assets/DatePicker.scss CHANGED
@@ -5,3 +5,47 @@
5
5
  border:none;
6
6
  }
7
7
  }
8
+
9
+ .arm-theme-dark{
10
+ & .react-datepicker{
11
+ background-color: var(--color-gray-700);
12
+ }
13
+ & .react-datepicker__current-month,
14
+ & .react-datepicker-time__header,
15
+ & .react-datepicker-year-header,
16
+ & .react-datepicker__day-name,
17
+ & .react-datepicker__day,
18
+ & .react-datepicker__time-name{
19
+ color: var(--color-gray-200);
20
+ }
21
+ & .react-datepicker__year-read-view--down-arrow,
22
+ & .react-datepicker__month-read-view--down-arrow,
23
+ & .react-datepicker__month-year-read-view--down-arrow,
24
+ & .react-datepicker__navigation-icon::before{
25
+ border-color: var(--color-gray-500)
26
+ }
27
+ & .react-datepicker__day-name{
28
+ color:var(--color-gray-500)
29
+ }
30
+
31
+ .react-datepicker__day:hover,
32
+ .react-datepicker__month-text:hover,
33
+ .react-datepicker__quarter-text:hover,
34
+ .react-datepicker__year-text:hover{
35
+ background-color: var(--color-gray-800);
36
+ }
37
+ & .react-datepicker__day--keyboard-selected,
38
+ & .react-datepicker__month-text--keyboard-selected,
39
+ & .react-datepicker__quarter-text--keyboard-selected,
40
+ & .react-datepicker__year-text--keyboard-selected{
41
+ background-color: var(--color-primary) !important;
42
+ color: #fff;
43
+ }
44
+ .react-datepicker__day--disabled,
45
+ .react-datepicker__month-text--disabled,
46
+ .react-datepicker__quarter-text--disabled,
47
+ .react-datepicker__year-text--disabled{
48
+ background-color: transparent;
49
+ color: var(--color-gray-600)
50
+ }
51
+ }
package/assets/TextField.scss CHANGED
@@ -136,7 +136,7 @@
136
136
  }
137
137
 
138
138
  .arm-textfield__label_error{
139
- color: $color-error-dark;
139
+ color: $color-error-dark !important;
140
140
  }
141
141
  .arm-textfield__adornment{
142
142
  z-index: 5;
@@ -161,4 +161,26 @@
161
161
  & .arm-textfield__icon{
162
162
  color: $color-gray-400;
163
163
  }
164
+ }
165
+
166
+ .arm-theme-dark {
167
+ & .arm-textfield_root{
168
+ background-color: var(--color-gray-700);
169
+ border-color: var(--color-gray-600);
170
+ &:hover{
171
+ border-color: var(--color-gray-700);
172
+ }
173
+ &.arm-textfield_root_focused{
174
+ border-color: var(--color-gray-200);
175
+ }
176
+ &.arm-textfield_root_disabled{
177
+ border-color: transparent;
178
+ }
179
+ }
180
+ & .arm-textfield__input{
181
+ color: var(--color-gray-200)
182
+ }
183
+ & .arm-textfield__label{
184
+ color: var(--color-gray-500)
185
+ }
164
186
  }