@softheon/armature 15.14.2 → 15.16.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 (10) hide show
  1. package/README.md +1 -1
  2. package/assets/styles/sof-styles.scss +109 -276
  3. package/esm2020/lib/base-components/sof-modal/sof-modal.component.mjs +3 -3
  4. package/esm2020/lib/header/components/header/header.component.mjs +3 -3
  5. package/esm2020/lib/theming/services/theme.service.mjs +3 -1
  6. package/fesm2015/softheon-armature.mjs +6 -4
  7. package/fesm2015/softheon-armature.mjs.map +1 -1
  8. package/fesm2020/softheon-armature.mjs +6 -4
  9. package/fesm2020/softheon-armature.mjs.map +1 -1
  10. package/package.json +1 -1
package/assets/styles/sof-styles.scss CHANGED
@@ -6,26 +6,14 @@
6
6
 
7
7
  // Theme pallets
8
8
  @include mat.core();
9
- $main-theme: mat.define-light-theme(
10
- (
11
- color: (
12
- primary: mat.define-palette($arm-primary),
13
- accent: mat.define-palette($arm-accent)
14
- ),
15
- typography: mat.define-typography-config(),
16
- density: 0
17
- )
18
- );
19
- $main-theme-dark: mat.define-dark-theme(
20
- (
21
- color: (
22
- primary: mat.define-palette($arm-primary),
23
- accent: mat.define-palette($arm-accent)
24
- ),
25
- typography: mat.define-typography-config(),
26
- density: 0
27
- )
28
- );
9
+ $main-theme: mat.define-light-theme((color: (primary: mat.define-palette($arm-primary),
10
+ accent: mat.define-palette($arm-accent)),
11
+ typography: mat.define-typography-config(),
12
+ density: 0));
13
+ $main-theme-dark: mat.define-dark-theme((color: (primary: mat.define-palette($arm-primary),
14
+ accent: mat.define-palette($arm-accent)),
15
+ typography: mat.define-typography-config(),
16
+ density: 0));
29
17
 
30
18
  body {
31
19
  letter-spacing: 0px;
@@ -202,7 +190,7 @@ mat-form-field {
202
190
  }
203
191
 
204
192
  .color-error {
205
- color: mat.get-color-from-palette($arm-error, 500);
193
+ color: mat.get-color-from-palette($arm-error, 900);
206
194
  }
207
195
 
208
196
  .color-neutral {
@@ -372,9 +360,12 @@ mat-form-field {
372
360
  min-height: 152px;
373
361
  }
374
362
 
363
+ // button colors 'accent', 'info', 'success', 'warning', 'neutral' removed from documentation, not to be used 12/1/23 per design ...
364
+ // button's icon color is inherited from the button's color
375
365
  button.mat-mdc-button {
376
366
  --mat-mdc-button-persistent-ripple-color: none !important;
377
-
367
+ --mdc-text-button-label-text-color: none !important;
368
+
378
369
  &.sof-button {
379
370
  padding: 0px 24px !important;
380
371
  height: 48px !important;
@@ -387,6 +378,7 @@ button.mat-mdc-button {
387
378
  letter-spacing: 0.05em !important;
388
379
  text-transform: uppercase !important;
389
380
 
381
+
390
382
  &.fixed-width {
391
383
  width: 200px !important; // Use this is to match specific sizing
392
384
  }
@@ -397,7 +389,7 @@ button.mat-mdc-button {
397
389
 
398
390
  &:enabled {
399
391
  &.mat-primary {
400
- color: mat.get-color-from-palette($arm-primary, 500) !important;
392
+ color: mat.get-color-from-palette($arm-primary, 500);
401
393
 
402
394
  &:hover {
403
395
  background-color: mat.get-color-from-palette($arm-primary, 50);
@@ -410,7 +402,7 @@ button.mat-mdc-button {
410
402
  }
411
403
 
412
404
  &.mat-accent {
413
- color: mat.get-color-from-palette($arm-accent, 500) !important;
405
+ color: mat.get-color-from-palette($arm-accent, 500);
414
406
 
415
407
  &:hover {
416
408
  background-color: mat.get-color-from-palette($arm-accent, 50);
@@ -423,7 +415,7 @@ button.mat-mdc-button {
423
415
  }
424
416
 
425
417
  &.mat-warn {
426
- color: mat.get-color-from-palette($arm-warn, 500) !important;
418
+ color: mat.get-color-from-palette($arm-warn, 500);
427
419
 
428
420
  &:hover {
429
421
  background-color: mat.get-color-from-palette($arm-warn, 50);
@@ -436,7 +428,7 @@ button.mat-mdc-button {
436
428
  }
437
429
 
438
430
  &.mat-success {
439
- color: mat.get-color-from-palette($arm-success, 500) !important;
431
+ color: mat.get-color-from-palette($arm-success, 500);
440
432
 
441
433
  &:hover {
442
434
  background-color: mat.get-color-from-palette($arm-success, 50);
@@ -449,7 +441,7 @@ button.mat-mdc-button {
449
441
  }
450
442
 
451
443
  &.mat-error {
452
- color: mat.get-color-from-palette($arm-error, 500) !important;
444
+ color: mat.get-color-from-palette($arm-error, 900);
453
445
 
454
446
  &:hover {
455
447
  background-color: mat.get-color-from-palette($arm-error, 50);
@@ -462,7 +454,7 @@ button.mat-mdc-button {
462
454
  }
463
455
 
464
456
  &.mat-info {
465
- color: mat.get-color-from-palette($arm-info, 500) !important;
457
+ color: mat.get-color-from-palette($arm-info, 500);
466
458
 
467
459
  &:hover {
468
460
  background-color: mat.get-color-from-palette($arm-info, 50);
@@ -475,7 +467,7 @@ button.mat-mdc-button {
475
467
  }
476
468
 
477
469
  &.mat-neutral {
478
- color: #000000de !important;
470
+ color: mat.get-color-from-palette($arm-neutral, 500);
479
471
 
480
472
  &:hover {
481
473
  background-color: mat.get-color-from-palette($arm-neutral, 50);
@@ -524,7 +516,7 @@ button.mat-mdc-button {
524
516
 
525
517
  &:enabled {
526
518
  &.mat-primary {
527
- color: mat.get-color-from-palette($arm-primary, 500) !important;
519
+ color: mat.get-color-from-palette($arm-primary, 500);
528
520
 
529
521
  &:hover {
530
522
  background-color: mat.get-color-from-palette($arm-primary, 50);
@@ -537,7 +529,7 @@ button.mat-mdc-button {
537
529
  }
538
530
 
539
531
  &.mat-accent {
540
- color: mat.get-color-from-palette($arm-accent, 500) !important;
532
+ color: mat.get-color-from-palette($arm-accent, 500);
541
533
 
542
534
  &:hover {
543
535
  background-color: mat.get-color-from-palette($arm-accent, 50);
@@ -550,7 +542,7 @@ button.mat-mdc-button {
550
542
  }
551
543
 
552
544
  &.mat-warn {
553
- color: mat.get-color-from-palette($arm-warn, 500) !important;
545
+ color: mat.get-color-from-palette($arm-warn, 500);
554
546
 
555
547
  &:hover {
556
548
  background-color: mat.get-color-from-palette($arm-warn, 50);
@@ -563,7 +555,7 @@ button.mat-mdc-button {
563
555
  }
564
556
 
565
557
  &.mat-success {
566
- color: mat.get-color-from-palette($arm-success, 500) !important;
558
+ color: mat.get-color-from-palette($arm-success, 500);
567
559
 
568
560
  &:hover {
569
561
  background-color: mat.get-color-from-palette($arm-success, 50);
@@ -576,7 +568,7 @@ button.mat-mdc-button {
576
568
  }
577
569
 
578
570
  &.mat-error {
579
- color: mat.get-color-from-palette($arm-error, 500) !important;
571
+ color: mat.get-color-from-palette($arm-error, 900);
580
572
 
581
573
  &:hover {
582
574
  background-color: mat.get-color-from-palette($arm-error, 50);
@@ -589,7 +581,7 @@ button.mat-mdc-button {
589
581
  }
590
582
 
591
583
  &.mat-info {
592
- color: mat.get-color-from-palette($arm-info, 500) !important;
584
+ color: mat.get-color-from-palette($arm-info, 500);
593
585
 
594
586
  &:hover {
595
587
  background-color: mat.get-color-from-palette($arm-info, 50);
@@ -602,7 +594,7 @@ button.mat-mdc-button {
602
594
  }
603
595
 
604
596
  &.mat-neutral {
605
- color: #000000de !important;
597
+ color: mat.get-color-from-palette($arm-neutral, 500);
606
598
 
607
599
  &:hover {
608
600
  background-color: mat.get-color-from-palette($arm-neutral, 50);
@@ -645,6 +637,7 @@ button.mat-mdc-button {
645
637
 
646
638
  button.mat-mdc-unelevated-button {
647
639
  --mat-mdc-button-persistent-ripple-color: none !important;
640
+ --mdc-filled-button-label-text-color: none !important;
648
641
 
649
642
  &.sof-flat-button {
650
643
  padding: 0px 24px !important;
@@ -667,13 +660,14 @@ button.mat-mdc-unelevated-button {
667
660
  }
668
661
 
669
662
  &:enabled {
670
- color: #ffffff !important;
671
663
 
672
664
  &.mat-primary {
673
665
  background: mat.get-color-from-palette($arm-primary, 500);
666
+ color: map-get($arm-primary, contrast, 500);
674
667
 
675
668
  &:hover {
676
669
  background-color: mat.get-color-from-palette($arm-primary, 700);
670
+ color: map-get($arm-primary, contrast, 700);
677
671
  }
678
672
 
679
673
  &:focus {
@@ -684,9 +678,11 @@ button.mat-mdc-unelevated-button {
684
678
 
685
679
  &.mat-accent {
686
680
  background: mat.get-color-from-palette($arm-accent, 500);
681
+ color: map-get($arm-accent, contrast, 500);
687
682
 
688
683
  &:hover {
689
684
  background-color: mat.get-color-from-palette($arm-accent, 700);
685
+ color: map-get($arm-accent, contrast, 700);
690
686
  }
691
687
 
692
688
  &:focus {
@@ -697,9 +693,11 @@ button.mat-mdc-unelevated-button {
697
693
 
698
694
  &.mat-warn {
699
695
  background: mat.get-color-from-palette($arm-warn, 500);
696
+ color: map-get($arm-warn, contrast, 500);
700
697
 
701
698
  &:hover {
702
699
  background-color: mat.get-color-from-palette($arm-warn, 700);
700
+ color: map-get($arm-warn, contrast, 700);
703
701
  }
704
702
 
705
703
  &:focus {
@@ -710,9 +708,11 @@ button.mat-mdc-unelevated-button {
710
708
 
711
709
  &.mat-success {
712
710
  background: mat.get-color-from-palette($arm-success, 500);
711
+ color: map-get($arm-success, contrast, 500);
713
712
 
714
713
  &:hover {
715
714
  background-color: mat.get-color-from-palette($arm-success, 700);
715
+ color: map-get($arm-success, contrast, 700);
716
716
  }
717
717
 
718
718
  &:focus {
@@ -722,10 +722,12 @@ button.mat-mdc-unelevated-button {
722
722
  }
723
723
 
724
724
  &.mat-error {
725
- background: mat.get-color-from-palette($arm-error, 500);
725
+ background: mat.get-color-from-palette($arm-error, 900);
726
+ color: map-get($arm-error, contrast, 900);
726
727
 
727
728
  &:hover {
728
729
  background-color: mat.get-color-from-palette($arm-error, 700);
730
+ color: map-get($arm-error, contrast, 700);
729
731
  }
730
732
 
731
733
  &:focus {
@@ -736,9 +738,11 @@ button.mat-mdc-unelevated-button {
736
738
 
737
739
  &.mat-info {
738
740
  background: mat.get-color-from-palette($arm-info, 500);
741
+ color: map-get($arm-info, contrast, 500);
739
742
 
740
743
  &:hover {
741
744
  background-color: mat.get-color-from-palette($arm-info, 700);
745
+ color: map-get($arm-info, contrast, 700);
742
746
  }
743
747
 
744
748
  &:focus {
@@ -749,9 +753,11 @@ button.mat-mdc-unelevated-button {
749
753
 
750
754
  &.mat-neutral {
751
755
  background: #000000de;
756
+ color: #ffffff;
752
757
 
753
758
  &:hover {
754
759
  background-color: mat.get-color-from-palette($arm-neutral, 700);
760
+ color: map-get($arm-neutral, contrast, 700);
755
761
  }
756
762
 
757
763
  &:focus {
@@ -759,10 +765,6 @@ button.mat-mdc-unelevated-button {
759
765
  outline-offset: 2px !important;
760
766
  }
761
767
  }
762
-
763
- i {
764
- color: #ffffff !important;
765
- }
766
768
  }
767
769
 
768
770
  &:disabled {
@@ -801,13 +803,14 @@ button.mat-mdc-unelevated-button {
801
803
  padding: 0px !important;
802
804
 
803
805
  &:enabled {
804
- color: #ffffff !important;
805
806
 
806
807
  &.mat-primary {
807
808
  background: mat.get-color-from-palette($arm-primary, 500);
809
+ color: map-get($arm-primary, contrast, 500);
808
810
 
809
811
  &:hover {
810
812
  background-color: mat.get-color-from-palette($arm-primary, 700);
813
+ color: map-get($arm-primary, contrast, 700);
811
814
  }
812
815
 
813
816
  &:focus {
@@ -818,9 +821,11 @@ button.mat-mdc-unelevated-button {
818
821
 
819
822
  &.mat-accent {
820
823
  background: mat.get-color-from-palette($arm-accent, 500);
824
+ color: map-get($arm-accent, contrast, 500);
821
825
 
822
826
  &:hover {
823
827
  background-color: mat.get-color-from-palette($arm-accent, 700);
828
+ color: map-get($arm-accent, contrast, 700);
824
829
  }
825
830
 
826
831
  &:focus {
@@ -831,9 +836,11 @@ button.mat-mdc-unelevated-button {
831
836
 
832
837
  &.mat-warn {
833
838
  background: mat.get-color-from-palette($arm-warn, 500);
839
+ color: map-get($arm-warn, contrast, 500);
834
840
 
835
841
  &:hover {
836
842
  background-color: mat.get-color-from-palette($arm-warn, 700);
843
+ color: map-get($arm-warn, contrast, 700);
837
844
  }
838
845
 
839
846
  &:focus {
@@ -844,9 +851,11 @@ button.mat-mdc-unelevated-button {
844
851
 
845
852
  &.mat-success {
846
853
  background: mat.get-color-from-palette($arm-success, 500);
854
+ color: map-get($arm-success, contrast, 500);
847
855
 
848
856
  &:hover {
849
857
  background-color: mat.get-color-from-palette($arm-success, 700);
858
+ color: map-get($arm-success, contrast, 700);
850
859
  }
851
860
 
852
861
  &:focus {
@@ -856,10 +865,12 @@ button.mat-mdc-unelevated-button {
856
865
  }
857
866
 
858
867
  &.mat-error {
859
- background: mat.get-color-from-palette($arm-error, 500);
868
+ background: mat.get-color-from-palette($arm-error, 900);
869
+ color: map-get($arm-error, contrast, 900);
860
870
 
861
871
  &:hover {
862
872
  background-color: mat.get-color-from-palette($arm-error, 700);
873
+ color: map-get($arm-error, contrast, 700);
863
874
  }
864
875
 
865
876
  &:focus {
@@ -870,9 +881,11 @@ button.mat-mdc-unelevated-button {
870
881
 
871
882
  &.mat-info {
872
883
  background: mat.get-color-from-palette($arm-info, 500);
884
+ color: map-get($arm-info, contrast, 500);
873
885
 
874
886
  &:hover {
875
887
  background-color: mat.get-color-from-palette($arm-info, 700);
888
+ color: map-get($arm-info, contrast, 700);
876
889
  }
877
890
 
878
891
  &:focus {
@@ -883,9 +896,11 @@ button.mat-mdc-unelevated-button {
883
896
 
884
897
  &.mat-neutral {
885
898
  background: #000000de;
899
+ color: #ffffff;
886
900
 
887
901
  &:hover {
888
902
  background-color: mat.get-color-from-palette($arm-neutral, 700);
903
+ color: map-get($arm-neutral, contrast, 700);
889
904
  }
890
905
 
891
906
  &:focus {
@@ -893,10 +908,6 @@ button.mat-mdc-unelevated-button {
893
908
  outline-offset: 2px !important;
894
909
  }
895
910
  }
896
-
897
- i {
898
- color: #ffffff !important;
899
- }
900
911
  }
901
912
 
902
913
  &:disabled {
@@ -930,7 +941,9 @@ button.mat-mdc-unelevated-button {
930
941
 
931
942
  button.mat-mdc-outlined-button {
932
943
  --mat-mdc-button-persistent-ripple-color: none !important;
933
-
944
+ --mdc-outlined-button-label-text-color: none !important;
945
+
946
+ // not to be used 12/1/23 per design ...
934
947
  &.sof-stroked-button {
935
948
  padding: 0px 24px !important;
936
949
  height: 48px !important;
@@ -957,21 +970,11 @@ button.mat-mdc-outlined-button {
957
970
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
958
971
  color: mat.get-color-from-palette($arm-primary, 500) !important;
959
972
 
960
- i {
961
- color: mat.get-color-from-palette($arm-primary, 500) !important;
962
- }
963
-
964
973
  &:hover {
965
974
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
966
- color: white !important;
967
-
968
- i {
969
- color: white !important;
970
- }
971
975
  }
972
976
 
973
977
  &:focus {
974
- background-color: mat.get-color-from-palette($arm-primary, 50) !important;
975
978
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
976
979
  outline-offset: 2px !important;
977
980
  }
@@ -981,21 +984,11 @@ button.mat-mdc-outlined-button {
981
984
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
982
985
  color: mat.get-color-from-palette($arm-accent, 500) !important;
983
986
 
984
- i {
985
- color: mat.get-color-from-palette($arm-accent, 500) !important;
986
- }
987
-
988
987
  &:hover {
989
988
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
990
- color: white !important;
991
-
992
- i {
993
- color: white !important;
994
- }
995
989
  }
996
990
 
997
991
  &:focus {
998
- background-color: mat.get-color-from-palette($arm-accent, 50) !important;
999
992
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1000
993
  outline-offset: 2px !important;
1001
994
  }
@@ -1005,21 +998,11 @@ button.mat-mdc-outlined-button {
1005
998
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1006
999
  color: mat.get-color-from-palette($arm-warn, 500) !important;
1007
1000
 
1008
- i {
1009
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1010
- }
1011
-
1012
1001
  &:hover {
1013
1002
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1014
- color: white !important;
1015
-
1016
- i {
1017
- color: white !important;
1018
- }
1019
1003
  }
1020
1004
 
1021
1005
  &:focus {
1022
- background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1023
1006
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1024
1007
  outline-offset: 2px !important;
1025
1008
  }
@@ -1029,21 +1012,11 @@ button.mat-mdc-outlined-button {
1029
1012
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1030
1013
  color: mat.get-color-from-palette($arm-success, 500) !important;
1031
1014
 
1032
- i {
1033
- color: mat.get-color-from-palette($arm-success, 500) !important;
1034
- }
1035
-
1036
1015
  &:hover {
1037
1016
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1038
- color: white !important;
1039
-
1040
- i {
1041
- color: white !important;
1042
- }
1043
1017
  }
1044
1018
 
1045
1019
  &:focus {
1046
- background-color: mat.get-color-from-palette($arm-success, 50) !important;
1047
1020
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1048
1021
  outline-offset: 2px !important;
1049
1022
  }
@@ -1053,21 +1026,11 @@ button.mat-mdc-outlined-button {
1053
1026
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1054
1027
  color: mat.get-color-from-palette($arm-info, 500) !important;
1055
1028
 
1056
- i {
1057
- color: mat.get-color-from-palette($arm-info, 500) !important;
1058
- }
1059
-
1060
1029
  &:hover {
1061
1030
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1062
- color: white !important;
1063
-
1064
- i {
1065
- color: white !important;
1066
- }
1067
1031
  }
1068
1032
 
1069
1033
  &:focus {
1070
- background-color: mat.get-color-from-palette($arm-info, 50) !important;
1071
1034
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1072
1035
  outline-offset: 2px !important;
1073
1036
  }
@@ -1075,23 +1038,13 @@ button.mat-mdc-outlined-button {
1075
1038
 
1076
1039
  &.mat-error {
1077
1040
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1078
- color: mat.get-color-from-palette($arm-error, 500) !important;
1079
-
1080
- i {
1081
- color: mat.get-color-from-palette($arm-error, 500) !important;
1082
- }
1041
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1083
1042
 
1084
1043
  &:hover {
1085
1044
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1086
- color: white !important;
1087
-
1088
- i {
1089
- color: white !important;
1090
- }
1091
1045
  }
1092
1046
 
1093
1047
  &:focus {
1094
- background-color: mat.get-color-from-palette($arm-error, 50) !important;
1095
1048
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1096
1049
  outline-offset: 2px !important;
1097
1050
  }
@@ -1099,18 +1052,13 @@ button.mat-mdc-outlined-button {
1099
1052
 
1100
1053
  &.mat-neutral {
1101
1054
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1102
- color: #000000de !important;
1103
-
1104
- i {
1105
- color: #000000de !important;
1106
- }
1055
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1107
1056
 
1108
1057
  &:hover {
1109
1058
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1110
1059
  }
1111
1060
 
1112
1061
  &:focus {
1113
- background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1114
1062
  outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
1115
1063
  outline-offset: 2px !important;
1116
1064
  }
@@ -1127,7 +1075,7 @@ button.mat-mdc-outlined-button {
1127
1075
  &.sof-stroked-button-outline {
1128
1076
  padding: 0px 24px !important;
1129
1077
  height: 48px !important;
1130
- background: #ffffff !important;
1078
+ background-color: #ffffff !important;
1131
1079
  border-radius: 6px !important;
1132
1080
  font-family: Poppins !important;
1133
1081
  font-style: normal !important;
@@ -1150,12 +1098,8 @@ button.mat-mdc-outlined-button {
1150
1098
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1151
1099
  color: mat.get-color-from-palette($arm-primary, 500) !important;
1152
1100
 
1153
- i {
1154
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1155
- }
1156
-
1157
1101
  &:hover {
1158
- background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1102
+ background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1159
1103
  }
1160
1104
 
1161
1105
  &:focus {
@@ -1168,12 +1112,8 @@ button.mat-mdc-outlined-button {
1168
1112
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1169
1113
  color: mat.get-color-from-palette($arm-accent, 500) !important;
1170
1114
 
1171
- i {
1172
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1173
- }
1174
-
1175
1115
  &:hover {
1176
- background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1116
+ background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1177
1117
  }
1178
1118
 
1179
1119
  &:focus {
@@ -1186,12 +1126,8 @@ button.mat-mdc-outlined-button {
1186
1126
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1187
1127
  color: mat.get-color-from-palette($arm-warn, 500) !important;
1188
1128
 
1189
- i {
1190
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1191
- }
1192
-
1193
1129
  &:hover {
1194
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1130
+ background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1195
1131
  }
1196
1132
 
1197
1133
  &:focus {
@@ -1202,11 +1138,7 @@ button.mat-mdc-outlined-button {
1202
1138
 
1203
1139
  &.mat-success {
1204
1140
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1205
- color: mat.get-color-from-palette($arm-success, 500) !important;
1206
-
1207
- i {
1208
- color: mat.get-color-from-palette($arm-success, 500) !important;
1209
- }
1141
+ color: mat.get-color-from-palette($arm-success, 50) !important;
1210
1142
 
1211
1143
  &:hover {
1212
1144
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
@@ -1219,15 +1151,11 @@ button.mat-mdc-outlined-button {
1219
1151
  }
1220
1152
 
1221
1153
  &.mat-error {
1222
- border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
1223
- color: mat.get-color-from-palette($arm-error, 500) !important;
1224
-
1225
- i {
1226
- color: mat.get-color-from-palette($arm-error, 500) !important;
1227
- }
1154
+ border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1155
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1228
1156
 
1229
1157
  &:hover {
1230
- background-color: mat.get-color-from-palette($arm-error, 100) !important;
1158
+ background-color: mat.get-color-from-palette($arm-error, 50) !important;
1231
1159
  }
1232
1160
 
1233
1161
  &:focus {
@@ -1240,12 +1168,8 @@ button.mat-mdc-outlined-button {
1240
1168
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1241
1169
  color: mat.get-color-from-palette($arm-info, 500) !important;
1242
1170
 
1243
- i {
1244
- color: mat.get-color-from-palette($arm-info, 500) !important;
1245
- }
1246
-
1247
1171
  &:hover {
1248
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1172
+ background-color: mat.get-color-from-palette($arm-info, 50) !important;
1249
1173
  }
1250
1174
 
1251
1175
  &:focus {
@@ -1256,14 +1180,10 @@ button.mat-mdc-outlined-button {
1256
1180
 
1257
1181
  &.mat-neutral {
1258
1182
  border: 2px solid #000000de !important;
1259
- color: #000000de !important;
1260
-
1261
- i {
1262
- color: #000000de !important;
1263
- }
1183
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1264
1184
 
1265
1185
  &:hover {
1266
- background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1186
+ background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1267
1187
  }
1268
1188
 
1269
1189
  &:focus {
@@ -1308,6 +1228,7 @@ button.mat-mdc-outlined-button {
1308
1228
  }
1309
1229
  }
1310
1230
 
1231
+ // not to be used 12/1/23 per design ...
1311
1232
  &.sof-stroked-icon-button {
1312
1233
  border: none !important;
1313
1234
  border-radius: 6px !important;
@@ -1318,17 +1239,8 @@ button.mat-mdc-outlined-button {
1318
1239
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1319
1240
  color: mat.get-color-from-palette($arm-primary, 500) !important;
1320
1241
 
1321
- i {
1322
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1323
- }
1324
-
1325
1242
  &:hover {
1326
1243
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1327
- color: white !important;
1328
-
1329
- i {
1330
- color: white !important;
1331
- }
1332
1244
  }
1333
1245
 
1334
1246
  &:focus {
@@ -1341,17 +1253,8 @@ button.mat-mdc-outlined-button {
1341
1253
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1342
1254
  color: mat.get-color-from-palette($arm-accent, 500) !important;
1343
1255
 
1344
- i {
1345
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1346
- }
1347
-
1348
1256
  &:hover {
1349
1257
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1350
- color: white !important;
1351
-
1352
- i {
1353
- color: white !important;
1354
- }
1355
1258
  }
1356
1259
 
1357
1260
  &:focus {
@@ -1364,17 +1267,8 @@ button.mat-mdc-outlined-button {
1364
1267
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1365
1268
  color: mat.get-color-from-palette($arm-warn, 500) !important;
1366
1269
 
1367
- i {
1368
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1369
- }
1370
-
1371
1270
  &:hover {
1372
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1373
- color: white !important;
1374
-
1375
- i {
1376
- color: white !important;
1377
- }
1271
+ background-color: mat.get-color-from-palette($arm-warn, 100) !important
1378
1272
  }
1379
1273
 
1380
1274
  &:focus {
@@ -1387,17 +1281,8 @@ button.mat-mdc-outlined-button {
1387
1281
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1388
1282
  color: mat.get-color-from-palette($arm-success, 500) !important;
1389
1283
 
1390
- i {
1391
- color: mat.get-color-from-palette($arm-success, 500) !important;
1392
- }
1393
-
1394
1284
  &:hover {
1395
1285
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1396
- color: white !important;
1397
-
1398
- i {
1399
- color: white !important;
1400
- }
1401
1286
  }
1402
1287
 
1403
1288
  &:focus {
@@ -1410,17 +1295,8 @@ button.mat-mdc-outlined-button {
1410
1295
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1411
1296
  color: mat.get-color-from-palette($arm-info, 500) !important;
1412
1297
 
1413
- i {
1414
- color: mat.get-color-from-palette($arm-info, 500) !important;
1415
- }
1416
-
1417
1298
  &:hover {
1418
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1419
- color: white !important;
1420
-
1421
- i {
1422
- color: white !important;
1423
- }
1299
+ background-color: mat.get-color-from-palette($arm-info, 100) !important
1424
1300
  }
1425
1301
 
1426
1302
  &:focus {
@@ -1431,19 +1307,10 @@ button.mat-mdc-outlined-button {
1431
1307
 
1432
1308
  &.mat-error {
1433
1309
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1434
- color: mat.get-color-from-palette($arm-error, 500) !important;
1435
-
1436
- i {
1437
- color: mat.get-color-from-palette($arm-error, 500) !important;
1438
- }
1310
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1439
1311
 
1440
1312
  &:hover {
1441
1313
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1442
- color: white !important;
1443
-
1444
- i {
1445
- color: white !important;
1446
- }
1447
1314
  }
1448
1315
 
1449
1316
  &:focus {
@@ -1454,11 +1321,7 @@ button.mat-mdc-outlined-button {
1454
1321
 
1455
1322
  &.mat-neutral {
1456
1323
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1457
- color: #000000de !important;
1458
-
1459
- i {
1460
- color: #000000de !important;
1461
- }
1324
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1462
1325
 
1463
1326
  &:hover {
1464
1327
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
@@ -1479,7 +1342,7 @@ button.mat-mdc-outlined-button {
1479
1342
  }
1480
1343
 
1481
1344
  &.sof-stroked-icon-button-outline {
1482
- background: #ffffff !important;
1345
+ background-color: #ffffff !important;
1483
1346
  border-radius: 6px !important;
1484
1347
  padding: 0px !important;
1485
1348
 
@@ -1488,12 +1351,8 @@ button.mat-mdc-outlined-button {
1488
1351
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1489
1352
  color: mat.get-color-from-palette($arm-primary, 500) !important;
1490
1353
 
1491
- i {
1492
- color: mat.get-color-from-palette($arm-primary, 500) !important;
1493
- }
1494
-
1495
1354
  &:hover {
1496
- background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1355
+ background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1497
1356
  }
1498
1357
 
1499
1358
  &:focus {
@@ -1506,12 +1365,8 @@ button.mat-mdc-outlined-button {
1506
1365
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1507
1366
  color: mat.get-color-from-palette($arm-accent, 500) !important;
1508
1367
 
1509
- i {
1510
- color: mat.get-color-from-palette($arm-accent, 500) !important;
1511
- }
1512
-
1513
1368
  &:hover {
1514
- background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1369
+ background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1515
1370
  }
1516
1371
 
1517
1372
  &:focus {
@@ -1524,12 +1379,8 @@ button.mat-mdc-outlined-button {
1524
1379
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1525
1380
  color: mat.get-color-from-palette($arm-warn, 500) !important;
1526
1381
 
1527
- i {
1528
- color: mat.get-color-from-palette($arm-warn, 500) !important;
1529
- }
1530
-
1531
1382
  &:hover {
1532
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1383
+ background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1533
1384
  }
1534
1385
 
1535
1386
  &:focus {
@@ -1542,12 +1393,8 @@ button.mat-mdc-outlined-button {
1542
1393
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1543
1394
  color: mat.get-color-from-palette($arm-success, 500) !important;
1544
1395
 
1545
- i {
1546
- color: mat.get-color-from-palette($arm-success, 500) !important;
1547
- }
1548
-
1549
1396
  &:hover {
1550
- background-color: mat.get-color-from-palette($arm-success, 100) !important;
1397
+ background-color: mat.get-color-from-palette($arm-success, 50) !important;
1551
1398
  }
1552
1399
 
1553
1400
  &:focus {
@@ -1557,15 +1404,11 @@ button.mat-mdc-outlined-button {
1557
1404
  }
1558
1405
 
1559
1406
  &.mat-error {
1560
- border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
1561
- color: mat.get-color-from-palette($arm-error, 500) !important;
1562
-
1563
- i {
1564
- color: mat.get-color-from-palette($arm-error, 500) !important;
1565
- }
1407
+ border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1408
+ color: mat.get-color-from-palette($arm-error, 900);
1566
1409
 
1567
1410
  &:hover {
1568
- background-color: mat.get-color-from-palette($arm-error, 100) !important;
1411
+ background-color: mat.get-color-from-palette($arm-error, 50) !important;
1569
1412
  }
1570
1413
 
1571
1414
  &:focus {
@@ -1578,12 +1421,8 @@ button.mat-mdc-outlined-button {
1578
1421
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1579
1422
  color: mat.get-color-from-palette($arm-info, 500) !important;
1580
1423
 
1581
- i {
1582
- color: mat.get-color-from-palette($arm-info, 500) !important;
1583
- }
1584
-
1585
1424
  &:hover {
1586
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1425
+ background-color: mat.get-color-from-palette($arm-info, 50) !important;
1587
1426
  }
1588
1427
 
1589
1428
  &:focus {
@@ -1594,14 +1433,10 @@ button.mat-mdc-outlined-button {
1594
1433
 
1595
1434
  &.mat-neutral {
1596
1435
  border: 2px solid #000000de !important;
1597
- color: #000000de !important;
1598
-
1599
- i {
1600
- color: #000000de !important;
1601
- }
1436
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1602
1437
 
1603
1438
  &:hover {
1604
- background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1439
+ background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1605
1440
  }
1606
1441
 
1607
1442
  &:focus {
@@ -1724,7 +1559,7 @@ mat-card {
1724
1559
  font-family: "Poppins" !important;
1725
1560
 
1726
1561
  &.mat-form-field-invalid {
1727
- .mat-mdc-form-field-flex > div.mdc-notched-outline > * {
1562
+ .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
1728
1563
  border-color: mat.get-color-from-palette($arm-error, 900) !important;
1729
1564
  }
1730
1565
 
@@ -1750,7 +1585,7 @@ mat-card {
1750
1585
  background-color: #f7f7f7 !important;
1751
1586
  }
1752
1587
 
1753
- .mat-mdc-form-field-flex > div.mdc-notched-outline {
1588
+ .mat-mdc-form-field-flex>div.mdc-notched-outline {
1754
1589
  color: mat.get-color-from-palette($arm-primary, 500) !important;
1755
1590
  }
1756
1591
 
@@ -1838,6 +1673,7 @@ mat-optgroup mat-option {
1838
1673
  // MatRadio Overrides [START]
1839
1674
  // Color Styles [START]
1840
1675
  mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1676
+
1841
1677
  &.mat-primary,
1842
1678
  &[color="primary"] {
1843
1679
  --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
@@ -1927,7 +1763,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1927
1763
  }
1928
1764
 
1929
1765
  .mat-radio-ripple,
1930
- .mdc-radio:hover .mdc-radio__native-control:not([disabled]) ~ .mdc-radio-ripple {
1766
+ .mdc-radio:hover .mdc-radio__native-control:not([disabled])~.mdc-radio-ripple {
1931
1767
  width: 40px;
1932
1768
  height: 40px;
1933
1769
  transform: translate(1px, 1px) !important;
@@ -1945,6 +1781,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
1945
1781
  // MatSlider Overrides [START]
1946
1782
 
1947
1783
  ::ng-deep mat-slider.sof-slider {
1784
+
1948
1785
  // Color Styles [START]
1949
1786
  &.mat-primary {
1950
1787
  --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
@@ -2058,12 +1895,11 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2058
1895
  --mdc-checkbox-selected-checkmark-color: #fff;
2059
1896
  }
2060
1897
 
2061
- .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
1898
+ .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
2062
1899
  --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.38);
2063
1900
  }
2064
1901
 
2065
- .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate="true"])
2066
- ~ .mdc-checkbox__background {
1902
+ .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate="true"])~.mdc-checkbox__background {
2067
1903
  background-color: #f7f7f7 !important;
2068
1904
  border: 2px solid rgba(0, 0, 0, 0.38);
2069
1905
  }
@@ -2079,7 +1915,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2079
1915
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
2080
1916
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
2081
1917
 
2082
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1918
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2083
1919
  background: mat.get-color-from-palette($arm-warn, 500);
2084
1920
  }
2085
1921
  }
@@ -2090,7 +1926,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2090
1926
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
2091
1927
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
2092
1928
 
2093
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1929
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2094
1930
  background: mat.get-color-from-palette($arm-success, 500);
2095
1931
  }
2096
1932
  }
@@ -2101,7 +1937,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2101
1937
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
2102
1938
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
2103
1939
 
2104
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1940
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2105
1941
  background: mat.get-color-from-palette($arm-info, 500);
2106
1942
  }
2107
1943
  }
@@ -2112,7 +1948,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2112
1948
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
2113
1949
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
2114
1950
 
2115
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1951
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2116
1952
  background: mat.get-color-from-palette($arm-error, 500);
2117
1953
  }
2118
1954
  }
@@ -2123,7 +1959,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2123
1959
  --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
2124
1960
  --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
2125
1961
 
2126
- .mdc-checkbox--selected ~ .mdc-checkbox__ripple {
1962
+ .mdc-checkbox--selected~.mdc-checkbox__ripple {
2127
1963
  background: mat.get-color-from-palette($arm-neutral, 500);
2128
1964
  }
2129
1965
  }
@@ -2149,7 +1985,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2149
1985
 
2150
1986
  .mdc-checkbox__ripple,
2151
1987
  .mat-mdc-checkbox-ripple,
2152
- .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
1988
+ .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple {
2153
1989
  width: 40px;
2154
1990
  height: 40px;
2155
1991
  transform: translate(1px, 1px) !important;
@@ -2747,7 +2583,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
2747
2583
  width: 100%;
2748
2584
 
2749
2585
  .mat-mdc-form-field-infix,
2750
- .mat-mdc-form-field-infix > input {
2586
+ .mat-mdc-form-field-infix>input {
2751
2587
  width: 100% !important;
2752
2588
  }
2753
2589
  }
@@ -3002,8 +2838,7 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3002
2838
 
3003
2839
  /** Calendar Settings */
3004
2840
  ::ng-deep {
3005
- .mat-calendar-body-disabled
3006
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2841
+ .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3007
2842
  color: rgba(0, 0, 0, 0.38) !important;
3008
2843
  }
3009
2844
 
@@ -3016,14 +2851,12 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3016
2851
  letter-spacing: 0px !important;
3017
2852
  }
3018
2853
 
3019
- .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
3020
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2854
+ .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3021
2855
  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
3022
2856
  color: white;
3023
2857
  }
3024
2858
 
3025
- body .cdk-program-focused .mat-calendar-body-active
3026
- > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
2859
+ body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
3027
2860
  color: white;
3028
2861
  }
3029
2862
 
@@ -3065,4 +2898,4 @@ mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
3065
2898
  width: -webkit-fill-available;
3066
2899
  right: 20px;
3067
2900
  }
3068
- }
2901
+ }