armtek-uikit-react 1.0.168 → 1.0.170

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 (15) hide show
  1. package/assets/Button.scss +264 -270
  2. package/assets/DatePicker.scss +44 -0
  3. package/assets/TextField.scss +23 -1
  4. package/assets/global.scss +6 -0
  5. package/assets/styles.min.css +1 -1
  6. package/assets/styles.min.css.map +1 -1
  7. package/lib/hooks/useEnhancedEffect.js +1 -1
  8. package/lib/hooks/useEventCallback.js +1 -1
  9. package/package.json +1 -1
  10. package/ui/Adornment/index.js +1 -1
  11. package/ui/Form/DatePicker/DatePicker.js +1 -1
  12. package/ui/Form/Select/index.js +1 -1
  13. package/ui/Form/TextField/TextField.js +1 -1
  14. package/ui/Form/TextField/index.js +1 -1
  15. package/ui/List/ListItem.js +1 -1
package/assets/Button.scss CHANGED
@@ -284,279 +284,273 @@
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{
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);
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{
381
-
382
- color: var(--color-primary);
383
- border-color: var(--color-primary);
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: rgba(var(--color-blue-800-rgba), 0.2);
301
+ color: rgba(var(--color-white-rgba), 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: rgba(var(--color-secondary-rgba), 0.1);
312
+ color: rgba(var(--color-white-rgba), 0.2);
313
+ }
314
+ }
315
+ &.arm-button_neutral {
316
+ color: var(--color-neutral-contrast);
317
+ background: rgba(var(--color-gray-500-rgba), 0.3);
318
+ &:hover{
319
+ background: var(--color-neutral);
320
+ opacity: 1;
321
+ }
322
+ &:active{
323
+ background: rgba(var(--color-gray-500-rgba), 0.4);
324
+ }
325
+ &.arm-button_disabled,
326
+ &:disabled{
327
+ background: rgba(var(--color-white-rgba), 0.05);
328
+ color: rgba(var(--color-white-rgba), 0.2);
329
+ }
330
+ }
331
+ &.arm-button_black {
332
+ color: var(--color-neutral);
333
+ background: var(--color-neutral-contrast);
334
+ &:hover{
335
+ background: rgba(var(--color-neutral-contrast-rgb), 0.9);
336
+ }
337
+ &:active{
338
+ background: rgba(var(--color-neutral-contrast-rgb), 0.7);
339
+ }
340
+ &.arm-button_disabled,
341
+ &:disabled{
342
+ color: rgba(var(--color-neutral-contrast-rgb), 0.1);
343
+ background: rgba(var(--color-neutral-contrast-rgb), 0.05);
344
+ }
345
+ }
346
+ &.arm-button_green {
347
+ color: var(--color-success-contrast);
348
+ background: var(--color-green-800);
349
+ &:hover{
350
+ background: var(--color-success);
351
+ }
352
+ &:active{
353
+ background: var(--color-success-light);
354
+ }
355
+ &.arm-button_disabled,
356
+ &:disabled{
357
+ background: rgba(var(--color-green-800-rgba), 0.2);
358
+ color: rgba(var(--color-gray-900-rgb), 0.4);
359
+ }
360
+ }
361
+ &.arm-button_red {
362
+ color: var(--color-error-contrast);
363
+ background: var(--color-red-800);
364
+ &:hover{
365
+ background-color: var(--color-error);
366
+ }
367
+ &:active{
368
+ background: var(--color-error-light);
369
+ }
370
+ &.arm-button_disabled,
371
+ &:disabled{
372
+ background: rgba(var(--color-red-800-rgb), 0.15);
373
+ color: rgba(var(--color-white-rgba), 0.4);
374
+ }
375
+ }
376
+ }
377
+ .arm-button_outlined {
384
378
  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{
423
- color: var(--color-neutral-light);
379
+ &.arm-button_primary{
380
+
381
+ color: var(--color-blue-600);
382
+ border-color: var(--color-blue-600);
383
+ background: transparent;
384
+ &:hover{
385
+ background: rgba(var(--color-blue-800-rgba), 0.1);
386
+ }
387
+ &:active{
388
+ background: rgba(var(--color-blue-800-rgba), 0.2);
389
+ }
390
+ &.arm-button_disabled,
391
+ &:disabled{
392
+ color: rgba(var(--color-blue-800-rgba), 0.6);
393
+ border-color: rgba(var(--color-blue-800-rgba), 0.6);
394
+ }
395
+ }
396
+ &.arm-button_secondary {
397
+ border-color: var(--color-secondary);
398
+ color: var(--color-secondary);
399
+ &:hover{
400
+ background: rgba(var(--color-secondary-rgba), 0.1);
401
+ }
402
+ &:active{
403
+ background: rgba(var(--color-secondary-light-rgb), 0.2);
404
+ }
405
+ &.arm-button_disabled,
406
+ &:disabled{
407
+ color: rgba(var(--color-secondary-rgba), 0.4);
408
+ border-color: rgba(var(--color-secondary-rgba), 0.4);
409
+ }
410
+ }
411
+ &.arm-button_neutral {
424
412
  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);
413
+ color: var(--color-neutral-light);
414
+ background: transparent;
415
+ &:hover{
416
+ background: var(--color-neutral);
417
+ }
418
+ &:active{
419
+ background: rgba(var(--color-gray-500-rgba), 0.4);
420
+ }
421
+ &.arm-button_disabled,
422
+ &:disabled{
423
+ background: transparent;
424
+ border-color: rgba(var(--color-white-rgba), 0.1);
425
+ color: rgba(var(--color-white-rgba), 0.1);
426
+ }
427
+ }
428
+ &.arm-button_black {
429
+ border-color: var(--color-white);
430
+ color: var(--color-white);
431
+ &:hover{
432
+ background: rgba(var(--color-white-rgba), 0.1);
433
+ }
434
+ &:active{
435
+ background: rgba(var(--color-white-rgba), 0.25);
436
+ }
437
+ &.arm-button_disabled,
438
+ &:disabled{
439
+ color: rgba(var(--color-white-rgba), 0.1);
440
+ border-color: rgba(var(--color-white-rgba), 0.1);
441
+ }
442
+ }
443
+ &.arm-button_green {
444
+ border-color: var(--color-green-600);
445
+ color: var(--color-green-600);
446
+ &:hover{
447
+ background-color: rgba(var(--color-green-800-rgba), 0.1);
448
+ }
449
+ &:active{
450
+ background-color: rgba(var(--color-green-800-rgba), 0.2);
451
+ }
452
+ &.arm-button_disabled,
453
+ &:disabled{
454
+ color: rgba(var(--color-green-800-rgba), 0.2);
455
+ border-color: rgba(var(--color-green-800-rgba), 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: rgba(var(--color-error-rgba), 0.4);
470
+ border-color: rgba(var(--color-error-rgba), 0.4);
471
+ }
472
+ }
473
+ }
474
+ .arm-button_transparent {
479
475
  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{
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;
476
+ &.arm-button_primary{
477
+ color: var(--color-blue-600);
478
+ background: transparent;
479
+ &:hover{
480
+ background: rgba(var(--color-blue-800-rgba), 0.1);
481
+ }
482
+ &:active{
483
+ background: rgba(var(--color-blue-800-rgba), 0.2);
484
+ }
485
+ &.arm-button_disabled,
486
+ &:disabled{
487
+ color: rgba(var(--color-blue-800-rgba), 0.6);
488
+ }
489
+ }
490
+ &.arm-button_secondary {
491
+ color: var(--color-secondary);
492
+ &:hover{
493
+ background: rgba(var(--color-secondary-rgba), 0.1);
494
+ }
495
+ &:active{
496
+ background: rgba(var(--color-secondary-light-rgb), 0.2);
497
+ }
498
+ &.arm-button_disabled,
499
+ &:disabled{
500
+ color: rgba(var(--color-secondary-rgba), 0.4);
501
+ }
502
+ }
503
+ &.arm-button_neutral {
504
+ color: var(--color-neutral-light);
505
+ &:hover{
506
+ background: var(--color-neutral);
507
+ }
508
+ &:active{
509
+ background-color: rgba(var(--color-gray-500-rgba), 0.4);
510
+ }
511
+ &.arm-button_disabled,
512
+ &:disabled{
513
+ color: rgba(var(--color-white-rgba), 0.1);
514
+ }
515
+ }
516
+ &.arm-button_black {
517
+ color: var(--color-white);
518
+ &:hover{
519
+ background: rgba(var(--color-white-rgba), 0.1);
520
+ }
521
+ &:active{
522
+ background: rgba(var(--color-white-rgba), 0.2);
523
+ }
524
+ &.arm-button_disabled,
525
+ &:disabled{
526
+ color: rgba(var(--color-white-rgba), 0.1);
527
+ }
528
+ }
529
+ &.arm-button_green {
530
+ color: var(--color-green-600);
531
+ &:hover{
532
+ background-color: rgba(var(--color-green-800-rgba), 0.1);
533
+ }
534
+ &:active{
535
+ background-color: rgba(var(--color-green-800-rgba), 0.2);
536
+ }
537
+ &.arm-button_disabled,
538
+ &:disabled{
539
+ color: rgba(var(--color-green-800-rgba), 0.2);
540
+ }
541
+ }
542
+ &.arm-button_red {
543
+ color: var(--color-red-600);
544
+ &:hover{
545
+ background-color: rgba(var(--color-error-rgba), 0.1);
546
+ }
547
+ &:active{
548
+ background-color: rgba(var(--color-error-rgba), 0.2);
549
+ }
550
+ &.arm-button_disabled,
551
+ &:disabled{
552
+ color: rgba(var(--color-error-rgba), 0.4);
553
+ }
560
554
  }
561
555
  }
562
556
  }
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
  }
package/assets/global.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  border-radius: 0px;
14
14
  }
15
15
  :root{
16
+
16
17
  --font-family: 'Roboto';
17
18
  --size-elarge: 56px;
18
19
  --size-large: 42px;
@@ -24,6 +25,8 @@
24
25
  --font-weight-regular: 400;
25
26
  --font-weight-medium: 500;
26
27
  --font-weight-bold: 700;
28
+ --color-white: #ffffff;
29
+ --color-white-rgba: 255, 255, 255;
27
30
  --color-primary: #254FE9;
28
31
  --color-primary-rgba: 37, 79, 233;
29
32
  --color-primary-dark: #1D49D5;
@@ -45,6 +48,7 @@
45
48
  --color-neutral-dark: #40454A;
46
49
  --color-neutral-opacity: rgba(77, 83, 89, 0.08);
47
50
  --color-neutral-contrast: #ffffff;
51
+ --color-neutral-contrast-rgb: 255, 255, 255;
48
52
 
49
53
  --color-error: #FF3342;
50
54
  --color-error-rgba: 255, 51, 66;
@@ -112,6 +116,7 @@
112
116
  --color-gray-a200: #DFE2E6;
113
117
  --color-gray-a100: #212529;
114
118
  --color-gray-900: #212529;
119
+ --color-gray-900-rgb: 33, 37, 41;
115
120
  --color-gray-800: #40454A;
116
121
  --color-gray-700: #4D5359;
117
122
  --color-gray-600: #6C757D;
@@ -131,6 +136,7 @@
131
136
  --color-red-d1: #D62B39;
132
137
  --color-red-900: #F5313F;
133
138
  --color-red-800: #FA3D46;
139
+ --color-red-800-rgb: 250, 61, 70;
134
140
  --color-red-700: #FA4D56;
135
141
  --color-red-600: #FA696D;
136
142
  --color-red-500: #FA8286;