@softheon/armature 15.15.0 → 15.16.1

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/assets/styles/sof-styles.scss +57 -73
  2. package/esm2020/lib/base-components/sof-modal/sof-modal.component.mjs +3 -3
  3. package/esm2020/lib/base-components/sof-progress-bar/sof-progress-bar.component.mjs +6 -3
  4. package/esm2020/lib/header/components/header/header.component.mjs +3 -3
  5. package/fesm2015/softheon-armature.mjs +10 -7
  6. package/fesm2015/softheon-armature.mjs.map +1 -1
  7. package/fesm2020/softheon-armature.mjs +10 -7
  8. package/fesm2020/softheon-armature.mjs.map +1 -1
  9. package/lib/base-components/sof-progress-bar/sof-progress-bar.component.d.ts +9 -1
  10. package/package.json +1 -1
package/assets/styles/sof-styles.scss CHANGED
@@ -389,10 +389,10 @@ button.mat-mdc-button {
389
389
 
390
390
  &:enabled {
391
391
  &.mat-primary {
392
+ color: mat.get-color-from-palette($arm-primary, 500);
392
393
 
393
394
  &:hover {
394
395
  background-color: mat.get-color-from-palette($arm-primary, 50);
395
- color: map-get($arm-primary, contrast, 50);
396
396
  }
397
397
 
398
398
  &:focus {
@@ -402,10 +402,10 @@ button.mat-mdc-button {
402
402
  }
403
403
 
404
404
  &.mat-accent {
405
+ color: mat.get-color-from-palette($arm-accent, 500);
405
406
 
406
407
  &:hover {
407
408
  background-color: mat.get-color-from-palette($arm-accent, 50);
408
- color: map-get($arm-accent, contrast, 50);
409
409
  }
410
410
 
411
411
  &:focus {
@@ -415,10 +415,10 @@ button.mat-mdc-button {
415
415
  }
416
416
 
417
417
  &.mat-warn {
418
+ color: mat.get-color-from-palette($arm-warn, 500);
418
419
 
419
420
  &:hover {
420
421
  background-color: mat.get-color-from-palette($arm-warn, 50);
421
- color: map-get($arm-warn, contrast, 50);
422
422
  }
423
423
 
424
424
  &:focus {
@@ -428,10 +428,10 @@ button.mat-mdc-button {
428
428
  }
429
429
 
430
430
  &.mat-success {
431
+ color: mat.get-color-from-palette($arm-success, 500);
431
432
 
432
433
  &:hover {
433
434
  background-color: mat.get-color-from-palette($arm-success, 50);
434
- color: map-get($arm-success, contrast, 50);
435
435
  }
436
436
 
437
437
  &:focus {
@@ -441,10 +441,10 @@ button.mat-mdc-button {
441
441
  }
442
442
 
443
443
  &.mat-error {
444
+ color: mat.get-color-from-palette($arm-error, 900);
444
445
 
445
446
  &:hover {
446
447
  background-color: mat.get-color-from-palette($arm-error, 50);
447
- color: map-get($arm-error, contrast, 50);
448
448
  }
449
449
 
450
450
  &:focus {
@@ -454,10 +454,10 @@ button.mat-mdc-button {
454
454
  }
455
455
 
456
456
  &.mat-info {
457
+ color: mat.get-color-from-palette($arm-info, 500);
457
458
 
458
459
  &:hover {
459
460
  background-color: mat.get-color-from-palette($arm-info, 50);
460
- color: map-get($arm-info, contrast, 50);
461
461
  }
462
462
 
463
463
  &:focus {
@@ -467,10 +467,10 @@ button.mat-mdc-button {
467
467
  }
468
468
 
469
469
  &.mat-neutral {
470
+ color: mat.get-color-from-palette($arm-neutral, 500);
470
471
 
471
472
  &:hover {
472
473
  background-color: mat.get-color-from-palette($arm-neutral, 50);
473
- color: map-get($arm-neutral, contrast, 50);
474
474
  }
475
475
 
476
476
  &:focus {
@@ -516,10 +516,10 @@ button.mat-mdc-button {
516
516
 
517
517
  &:enabled {
518
518
  &.mat-primary {
519
+ color: mat.get-color-from-palette($arm-primary, 500);
519
520
 
520
521
  &:hover {
521
522
  background-color: mat.get-color-from-palette($arm-primary, 50);
522
- color: map-get($arm-primary, contrast, 50);
523
523
  }
524
524
 
525
525
  &:focus {
@@ -529,10 +529,10 @@ button.mat-mdc-button {
529
529
  }
530
530
 
531
531
  &.mat-accent {
532
+ color: mat.get-color-from-palette($arm-accent, 500);
532
533
 
533
534
  &:hover {
534
535
  background-color: mat.get-color-from-palette($arm-accent, 50);
535
- color: map-get($arm-accent, contrast, 50);
536
536
  }
537
537
 
538
538
  &:focus {
@@ -542,10 +542,10 @@ button.mat-mdc-button {
542
542
  }
543
543
 
544
544
  &.mat-warn {
545
+ color: mat.get-color-from-palette($arm-warn, 500);
545
546
 
546
547
  &:hover {
547
548
  background-color: mat.get-color-from-palette($arm-warn, 50);
548
- color: map-get($arm-warn, contrast, 50);
549
549
  }
550
550
 
551
551
  &:focus {
@@ -555,10 +555,10 @@ button.mat-mdc-button {
555
555
  }
556
556
 
557
557
  &.mat-success {
558
+ color: mat.get-color-from-palette($arm-success, 500);
558
559
 
559
560
  &:hover {
560
561
  background-color: mat.get-color-from-palette($arm-success, 50);
561
- color: map-get($arm-success, contrast, 50);
562
562
  }
563
563
 
564
564
  &:focus {
@@ -568,10 +568,10 @@ button.mat-mdc-button {
568
568
  }
569
569
 
570
570
  &.mat-error {
571
+ color: mat.get-color-from-palette($arm-error, 900);
571
572
 
572
573
  &:hover {
573
574
  background-color: mat.get-color-from-palette($arm-error, 50);
574
- color: map-get($arm-error, contrast, 50);
575
575
  }
576
576
 
577
577
  &:focus {
@@ -581,10 +581,10 @@ button.mat-mdc-button {
581
581
  }
582
582
 
583
583
  &.mat-info {
584
+ color: mat.get-color-from-palette($arm-info, 500);
584
585
 
585
586
  &:hover {
586
587
  background-color: mat.get-color-from-palette($arm-info, 50);
587
- color: map-get($arm-info, contrast, 50);
588
588
  }
589
589
 
590
590
  &:focus {
@@ -594,10 +594,10 @@ button.mat-mdc-button {
594
594
  }
595
595
 
596
596
  &.mat-neutral {
597
+ color: mat.get-color-from-palette($arm-neutral, 500);
597
598
 
598
599
  &:hover {
599
600
  background-color: mat.get-color-from-palette($arm-neutral, 50);
600
- color: map-get($arm-neutral, contrast, 50);
601
601
  }
602
602
 
603
603
  &:focus {
@@ -968,11 +968,10 @@ button.mat-mdc-outlined-button {
968
968
  &:enabled {
969
969
  &.mat-primary {
970
970
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
971
- color: map-get($arm-primary, contrast, 50) !important;
971
+ color: mat.get-color-from-palette($arm-primary, 500) !important;
972
972
 
973
973
  &:hover {
974
974
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
975
- color: map-get($arm-primary, contrast, 100) !important;
976
975
  }
977
976
 
978
977
  &:focus {
@@ -983,11 +982,10 @@ button.mat-mdc-outlined-button {
983
982
 
984
983
  &.mat-accent {
985
984
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
986
- color: map-get($arm-accent, contrast, 50) !important;
985
+ color: mat.get-color-from-palette($arm-accent, 500) !important;
987
986
 
988
987
  &:hover {
989
988
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
990
- color: map-get($arm-accent, contrast, 100) !important;
991
989
  }
992
990
 
993
991
  &:focus {
@@ -998,11 +996,10 @@ button.mat-mdc-outlined-button {
998
996
 
999
997
  &.mat-warn {
1000
998
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1001
- color: map-get($arm-warn, contrast, 50) !important;
999
+ color: mat.get-color-from-palette($arm-warn, 500) !important;
1002
1000
 
1003
1001
  &:hover {
1004
1002
  background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1005
- color: map-get($arm-warn, contrast, 100) !important;
1006
1003
  }
1007
1004
 
1008
1005
  &:focus {
@@ -1013,11 +1010,10 @@ button.mat-mdc-outlined-button {
1013
1010
 
1014
1011
  &.mat-success {
1015
1012
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1016
- color: map-get($arm-success, contrast, 50) !important;
1013
+ color: mat.get-color-from-palette($arm-success, 500) !important;
1017
1014
 
1018
1015
  &:hover {
1019
1016
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1020
- color: map-get($arm-success, contrast, 100) !important;
1021
1017
  }
1022
1018
 
1023
1019
  &:focus {
@@ -1028,11 +1024,10 @@ button.mat-mdc-outlined-button {
1028
1024
 
1029
1025
  &.mat-info {
1030
1026
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1031
- color: map-get($arm-info, contrast, 50) !important;
1027
+ color: mat.get-color-from-palette($arm-info, 500) !important;
1032
1028
 
1033
1029
  &:hover {
1034
1030
  background-color: mat.get-color-from-palette($arm-info, 100) !important;
1035
- color: map-get($arm-info, contrast, 100) !important;
1036
1031
  }
1037
1032
 
1038
1033
  &:focus {
@@ -1043,11 +1038,10 @@ button.mat-mdc-outlined-button {
1043
1038
 
1044
1039
  &.mat-error {
1045
1040
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1046
- color: map-get($arm-error, contrast, 50) !important;
1041
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1047
1042
 
1048
1043
  &:hover {
1049
1044
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1050
- color: map-get($arm-error, contrast, 100) !important;
1051
1045
  }
1052
1046
 
1053
1047
  &:focus {
@@ -1058,11 +1052,10 @@ button.mat-mdc-outlined-button {
1058
1052
 
1059
1053
  &.mat-neutral {
1060
1054
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1061
- color: map-get($arm-neutral, contrast, 50) !important;
1055
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1062
1056
 
1063
1057
  &:hover {
1064
1058
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1065
- color: map-get($arm-neutral, contrast, 100) !important;
1066
1059
  }
1067
1060
 
1068
1061
  &:focus {
@@ -1083,7 +1076,6 @@ button.mat-mdc-outlined-button {
1083
1076
  padding: 0px 24px !important;
1084
1077
  height: 48px !important;
1085
1078
  background-color: #ffffff !important;
1086
- color: #000000de !important;
1087
1079
  border-radius: 6px !important;
1088
1080
  font-family: Poppins !important;
1089
1081
  font-style: normal !important;
@@ -1104,10 +1096,10 @@ button.mat-mdc-outlined-button {
1104
1096
  &:enabled {
1105
1097
  &.mat-primary {
1106
1098
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1099
+ color: mat.get-color-from-palette($arm-primary, 500) !important;
1107
1100
 
1108
1101
  &:hover {
1109
- background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1110
- color: map-get($arm-primary, contrast, 100) !important;
1102
+ background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1111
1103
  }
1112
1104
 
1113
1105
  &:focus {
@@ -1118,10 +1110,10 @@ button.mat-mdc-outlined-button {
1118
1110
 
1119
1111
  &.mat-accent {
1120
1112
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1113
+ color: mat.get-color-from-palette($arm-accent, 500) !important;
1121
1114
 
1122
1115
  &:hover {
1123
- background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1124
- color: map-get($arm-accent, contrast, 100) !important;
1116
+ background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1125
1117
  }
1126
1118
 
1127
1119
  &:focus {
@@ -1132,10 +1124,10 @@ button.mat-mdc-outlined-button {
1132
1124
 
1133
1125
  &.mat-warn {
1134
1126
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1127
+ color: mat.get-color-from-palette($arm-warn, 500) !important;
1135
1128
 
1136
1129
  &:hover {
1137
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1138
- color: map-get($arm-warn, contrast, 100) !important;
1130
+ background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1139
1131
  }
1140
1132
 
1141
1133
  &:focus {
@@ -1146,10 +1138,10 @@ button.mat-mdc-outlined-button {
1146
1138
 
1147
1139
  &.mat-success {
1148
1140
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1141
+ color: mat.get-color-from-palette($arm-success, 50) !important;
1149
1142
 
1150
1143
  &:hover {
1151
1144
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1152
- color: map-get($arm-success, contrast, 100) !important;
1153
1145
  }
1154
1146
 
1155
1147
  &:focus {
@@ -1160,10 +1152,10 @@ button.mat-mdc-outlined-button {
1160
1152
 
1161
1153
  &.mat-error {
1162
1154
  border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1155
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1163
1156
 
1164
1157
  &:hover {
1165
- background-color: mat.get-color-from-palette($arm-error, 100) !important;
1166
- color: map-get($arm-error, contrast, 100);
1158
+ background-color: mat.get-color-from-palette($arm-error, 50) !important;
1167
1159
  }
1168
1160
 
1169
1161
  &:focus {
@@ -1174,10 +1166,10 @@ button.mat-mdc-outlined-button {
1174
1166
 
1175
1167
  &.mat-info {
1176
1168
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1169
+ color: mat.get-color-from-palette($arm-info, 500) !important;
1177
1170
 
1178
1171
  &:hover {
1179
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1180
- color: map-get($arm-info, contrast, 100) !important;
1172
+ background-color: mat.get-color-from-palette($arm-info, 50) !important;
1181
1173
  }
1182
1174
 
1183
1175
  &:focus {
@@ -1188,10 +1180,10 @@ button.mat-mdc-outlined-button {
1188
1180
 
1189
1181
  &.mat-neutral {
1190
1182
  border: 2px solid #000000de !important;
1183
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1191
1184
 
1192
1185
  &:hover {
1193
- background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1194
- color: map-get($arm-neutral, contrast, 100) !important;
1186
+ background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1195
1187
  }
1196
1188
 
1197
1189
  &:focus {
@@ -1245,11 +1237,10 @@ button.mat-mdc-outlined-button {
1245
1237
  &:enabled {
1246
1238
  &.mat-primary {
1247
1239
  background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1248
- color: map-get($arm-primary, contrast, 50) !important;
1240
+ color: mat.get-color-from-palette($arm-primary, 500) !important;
1249
1241
 
1250
1242
  &:hover {
1251
1243
  background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1252
- color: map-get($arm-primary, contrast, 100) !important;
1253
1244
  }
1254
1245
 
1255
1246
  &:focus {
@@ -1260,11 +1251,10 @@ button.mat-mdc-outlined-button {
1260
1251
 
1261
1252
  &.mat-accent {
1262
1253
  background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1263
- color: map-get($arm-accent, contrast, 50) !important;
1254
+ color: mat.get-color-from-palette($arm-accent, 500) !important;
1264
1255
 
1265
1256
  &:hover {
1266
1257
  background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1267
- color: map-get($arm-accent, contrast, 100) !important;
1268
1258
  }
1269
1259
 
1270
1260
  &:focus {
@@ -1275,11 +1265,10 @@ button.mat-mdc-outlined-button {
1275
1265
 
1276
1266
  &.mat-warn {
1277
1267
  background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1278
- color: map-get($arm-warn, contrast, 50) !important;
1268
+ color: mat.get-color-from-palette($arm-warn, 500) !important;
1279
1269
 
1280
1270
  &:hover {
1281
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1282
- color: map-get($arm-warn, contrast, 100) !important;
1271
+ background-color: mat.get-color-from-palette($arm-warn, 100) !important
1283
1272
  }
1284
1273
 
1285
1274
  &:focus {
@@ -1290,11 +1279,10 @@ button.mat-mdc-outlined-button {
1290
1279
 
1291
1280
  &.mat-success {
1292
1281
  background-color: mat.get-color-from-palette($arm-success, 50) !important;
1293
- color: map-get($arm-success, contrast, 50) !important;
1282
+ color: mat.get-color-from-palette($arm-success, 500) !important;
1294
1283
 
1295
1284
  &:hover {
1296
1285
  background-color: mat.get-color-from-palette($arm-success, 100) !important;
1297
- color: map-get($arm-success, contrast, 100) !important;
1298
1286
  }
1299
1287
 
1300
1288
  &:focus {
@@ -1305,11 +1293,10 @@ button.mat-mdc-outlined-button {
1305
1293
 
1306
1294
  &.mat-info {
1307
1295
  background-color: mat.get-color-from-palette($arm-info, 50) !important;
1308
- color: map-get($arm-info, contrast, 50) !important;
1296
+ color: mat.get-color-from-palette($arm-info, 500) !important;
1309
1297
 
1310
1298
  &:hover {
1311
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1312
- color: map-get($arm-info, contrast, 100) !important;
1299
+ background-color: mat.get-color-from-palette($arm-info, 100) !important
1313
1300
  }
1314
1301
 
1315
1302
  &:focus {
@@ -1320,11 +1307,10 @@ button.mat-mdc-outlined-button {
1320
1307
 
1321
1308
  &.mat-error {
1322
1309
  background-color: mat.get-color-from-palette($arm-error, 50) !important;
1323
- color: map-get($arm-error, contrast, 50) !important;
1310
+ color: mat.get-color-from-palette($arm-error, 900) !important;
1324
1311
 
1325
1312
  &:hover {
1326
1313
  background-color: mat.get-color-from-palette($arm-error, 100) !important;
1327
- color: map-get($arm-error, contrast, 100) !important;
1328
1314
  }
1329
1315
 
1330
1316
  &:focus {
@@ -1335,11 +1321,10 @@ button.mat-mdc-outlined-button {
1335
1321
 
1336
1322
  &.mat-neutral {
1337
1323
  background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1338
- color: map-get($arm-neutral, contrast, 50) !important;
1324
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1339
1325
 
1340
1326
  &:hover {
1341
1327
  background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1342
- color: map-get($arm-neutral, contrast, 100) !important;
1343
1328
  }
1344
1329
 
1345
1330
  &:focus {
@@ -1358,17 +1343,16 @@ button.mat-mdc-outlined-button {
1358
1343
 
1359
1344
  &.sof-stroked-icon-button-outline {
1360
1345
  background-color: #ffffff !important;
1361
- color: #000000de !important;
1362
1346
  border-radius: 6px !important;
1363
1347
  padding: 0px !important;
1364
1348
 
1365
1349
  &:enabled {
1366
1350
  &.mat-primary {
1367
1351
  border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
1352
+ color: mat.get-color-from-palette($arm-primary, 500) !important;
1368
1353
 
1369
1354
  &:hover {
1370
- background-color: mat.get-color-from-palette($arm-primary, 100) !important;
1371
- color: map-get($arm-primary, contrast, 100) !important;
1355
+ background-color: mat.get-color-from-palette($arm-primary, 50) !important;
1372
1356
  }
1373
1357
 
1374
1358
  &:focus {
@@ -1379,10 +1363,10 @@ button.mat-mdc-outlined-button {
1379
1363
 
1380
1364
  &.mat-accent {
1381
1365
  border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
1366
+ color: mat.get-color-from-palette($arm-accent, 500) !important;
1382
1367
 
1383
1368
  &:hover {
1384
- background-color: mat.get-color-from-palette($arm-accent, 100) !important;
1385
- color: map-get($arm-accent, contrast, 100) !important;
1369
+ background-color: mat.get-color-from-palette($arm-accent, 50) !important;
1386
1370
  }
1387
1371
 
1388
1372
  &:focus {
@@ -1393,10 +1377,10 @@ button.mat-mdc-outlined-button {
1393
1377
 
1394
1378
  &.mat-warn {
1395
1379
  border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
1380
+ color: mat.get-color-from-palette($arm-warn, 500) !important;
1396
1381
 
1397
1382
  &:hover {
1398
- background-color: mat.get-color-from-palette($arm-warn, 100) !important;
1399
- color: map-get($arm-warn, contrast, 100) !important;
1383
+ background-color: mat.get-color-from-palette($arm-warn, 50) !important;
1400
1384
  }
1401
1385
 
1402
1386
  &:focus {
@@ -1407,10 +1391,10 @@ button.mat-mdc-outlined-button {
1407
1391
 
1408
1392
  &.mat-success {
1409
1393
  border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
1394
+ color: mat.get-color-from-palette($arm-success, 500) !important;
1410
1395
 
1411
1396
  &:hover {
1412
- background-color: mat.get-color-from-palette($arm-success, 100) !important;
1413
- color: map-get($arm-success, contrast, 100) !important;
1397
+ background-color: mat.get-color-from-palette($arm-success, 50) !important;
1414
1398
  }
1415
1399
 
1416
1400
  &:focus {
@@ -1421,10 +1405,10 @@ button.mat-mdc-outlined-button {
1421
1405
 
1422
1406
  &.mat-error {
1423
1407
  border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
1408
+ color: mat.get-color-from-palette($arm-error, 900);
1424
1409
 
1425
1410
  &:hover {
1426
- background-color: mat.get-color-from-palette($arm-error, 100) !important;
1427
- color: map-get($arm-error, contrast, 100);
1411
+ background-color: mat.get-color-from-palette($arm-error, 50) !important;
1428
1412
  }
1429
1413
 
1430
1414
  &:focus {
@@ -1435,10 +1419,10 @@ button.mat-mdc-outlined-button {
1435
1419
 
1436
1420
  &.mat-info {
1437
1421
  border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
1422
+ color: mat.get-color-from-palette($arm-info, 500) !important;
1438
1423
 
1439
1424
  &:hover {
1440
- background-color: mat.get-color-from-palette($arm-info, 100) !important;
1441
- color: map-get($arm-info, contrast, 100) !important;
1425
+ background-color: mat.get-color-from-palette($arm-info, 50) !important;
1442
1426
  }
1443
1427
 
1444
1428
  &:focus {
@@ -1449,10 +1433,10 @@ button.mat-mdc-outlined-button {
1449
1433
 
1450
1434
  &.mat-neutral {
1451
1435
  border: 2px solid #000000de !important;
1436
+ color: mat.get-color-from-palette($arm-neutral, 500) !important;
1452
1437
 
1453
1438
  &:hover {
1454
- background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
1455
- color: map-get($arm-neutral, contrast, 100) !important;
1439
+ background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
1456
1440
  }
1457
1441
 
1458
1442
  &:focus {