@mailstep/design-system 0.6.23 → 0.6.25
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.
- package/package.json +1 -1
- package/ui/Elements/Button/styles.js +1 -1
- package/ui/Elements/Tag/palletes.js +1 -0
- package/ui/index.es.js +9 -54
- package/ui/index.umd.js +6 -55
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
package/ui/index.es.js
CHANGED
|
@@ -8402,9 +8402,6 @@ const yU = ae.span`
|
|
|
8402
8402
|
&[data-appearance='primary'] {
|
|
8403
8403
|
background-color: red1;
|
|
8404
8404
|
color: white;
|
|
8405
|
-
& svg {
|
|
8406
|
-
stroke: white;
|
|
8407
|
-
}
|
|
8408
8405
|
|
|
8409
8406
|
:not(:disabled) {
|
|
8410
8407
|
@media (hover: hover) {
|
|
@@ -8418,9 +8415,6 @@ const yU = ae.span`
|
|
|
8418
8415
|
&[data-appearance='secondary'] {
|
|
8419
8416
|
background-color: neutral20;
|
|
8420
8417
|
color: typoPrimary;
|
|
8421
|
-
& svg {
|
|
8422
|
-
stroke: typoPrimary;
|
|
8423
|
-
}
|
|
8424
8418
|
|
|
8425
8419
|
@media (hover: hover) {
|
|
8426
8420
|
:hover {
|
|
@@ -8432,9 +8426,6 @@ const yU = ae.span`
|
|
|
8432
8426
|
&[data-appearance='tertiary'] {
|
|
8433
8427
|
background-color: red20;
|
|
8434
8428
|
color: red1;
|
|
8435
|
-
& svg {
|
|
8436
|
-
stroke: red1;
|
|
8437
|
-
}
|
|
8438
8429
|
|
|
8439
8430
|
@media (hover: hover) {
|
|
8440
8431
|
:hover {
|
|
@@ -8447,9 +8438,6 @@ const yU = ae.span`
|
|
|
8447
8438
|
&[data-variant='success'] {
|
|
8448
8439
|
background-color: successColor;
|
|
8449
8440
|
color: white;
|
|
8450
|
-
& svg {
|
|
8451
|
-
stroke: white;
|
|
8452
|
-
}
|
|
8453
8441
|
|
|
8454
8442
|
@media (hover: hover) {
|
|
8455
8443
|
:hover {
|
|
@@ -8463,9 +8451,6 @@ const yU = ae.span`
|
|
|
8463
8451
|
&[data-appearance='primary'] {
|
|
8464
8452
|
color: typoPrimary;
|
|
8465
8453
|
border-color: typoPrimary;
|
|
8466
|
-
& svg {
|
|
8467
|
-
stroke: typoPrimary;
|
|
8468
|
-
}
|
|
8469
8454
|
|
|
8470
8455
|
@media (hover: hover) {
|
|
8471
8456
|
:hover {
|
|
@@ -8476,9 +8461,6 @@ const yU = ae.span`
|
|
|
8476
8461
|
&[data-appearance='secondary'] {
|
|
8477
8462
|
color: red1;
|
|
8478
8463
|
border-color: red1;
|
|
8479
|
-
& svg {
|
|
8480
|
-
stroke: red1;
|
|
8481
|
-
}
|
|
8482
8464
|
|
|
8483
8465
|
@media (hover: hover) {
|
|
8484
8466
|
:hover {
|
|
@@ -8491,9 +8473,6 @@ const yU = ae.span`
|
|
|
8491
8473
|
background-color: white;
|
|
8492
8474
|
&[data-appearance='primary'] {
|
|
8493
8475
|
color: typoPrimary;
|
|
8494
|
-
& svg {
|
|
8495
|
-
stroke: typoPrimary;
|
|
8496
|
-
}
|
|
8497
8476
|
|
|
8498
8477
|
@media (hover: hover) {
|
|
8499
8478
|
:hover {
|
|
@@ -8503,9 +8482,6 @@ const yU = ae.span`
|
|
|
8503
8482
|
}
|
|
8504
8483
|
&[data-appearance='secondary'] {
|
|
8505
8484
|
color: red1;
|
|
8506
|
-
& svg {
|
|
8507
|
-
stroke: red1;
|
|
8508
|
-
}
|
|
8509
8485
|
|
|
8510
8486
|
@media (hover: hover) {
|
|
8511
8487
|
:hover {
|
|
@@ -8520,31 +8496,19 @@ const yU = ae.span`
|
|
|
8520
8496
|
height: 20px;
|
|
8521
8497
|
&[data-appearance='primary'] {
|
|
8522
8498
|
color: typoPrimary;
|
|
8523
|
-
& svg {
|
|
8524
|
-
stroke: typoPrimary;
|
|
8525
|
-
}
|
|
8526
8499
|
|
|
8527
8500
|
@media (hover: hover) {
|
|
8528
8501
|
:hover {
|
|
8529
8502
|
color: neutral500;
|
|
8530
|
-
& svg {
|
|
8531
|
-
stroke: neutral500;
|
|
8532
|
-
}
|
|
8533
8503
|
}
|
|
8534
8504
|
}
|
|
8535
8505
|
}
|
|
8536
8506
|
&[data-appearance='secondary'] {
|
|
8537
8507
|
color: red1;
|
|
8538
|
-
& svg {
|
|
8539
|
-
stroke: red1;
|
|
8540
|
-
}
|
|
8541
8508
|
|
|
8542
8509
|
@media (hover: hover) {
|
|
8543
8510
|
:hover {
|
|
8544
8511
|
color: red70;
|
|
8545
|
-
& svg {
|
|
8546
|
-
stroke: red70;
|
|
8547
|
-
}
|
|
8548
8512
|
}
|
|
8549
8513
|
}
|
|
8550
8514
|
}
|
|
@@ -8558,9 +8522,7 @@ const yU = ae.span`
|
|
|
8558
8522
|
&[data-appearance='primary'] {
|
|
8559
8523
|
background-color: red1;
|
|
8560
8524
|
color: white;
|
|
8561
|
-
|
|
8562
|
-
stroke: white;
|
|
8563
|
-
}
|
|
8525
|
+
|
|
8564
8526
|
@media (hover: hover) {
|
|
8565
8527
|
:hover {
|
|
8566
8528
|
background-color: red70;
|
|
@@ -8571,9 +8533,7 @@ const yU = ae.span`
|
|
|
8571
8533
|
&[data-appearance='secondary'] {
|
|
8572
8534
|
background-color: neutral20;
|
|
8573
8535
|
color: typoPrimary;
|
|
8574
|
-
|
|
8575
|
-
stroke: typoPrimary;
|
|
8576
|
-
}
|
|
8536
|
+
|
|
8577
8537
|
@media (hover: hover) {
|
|
8578
8538
|
:hover {
|
|
8579
8539
|
background-color: lightGray7;
|
|
@@ -8584,9 +8544,7 @@ const yU = ae.span`
|
|
|
8584
8544
|
&[data-appearance='tertiary'] {
|
|
8585
8545
|
background-color: red20;
|
|
8586
8546
|
color: red1;
|
|
8587
|
-
|
|
8588
|
-
stroke: red1;
|
|
8589
|
-
}
|
|
8547
|
+
|
|
8590
8548
|
@media (hover: hover) {
|
|
8591
8549
|
:hover {
|
|
8592
8550
|
background-color: red30;
|
|
@@ -8597,15 +8555,10 @@ const yU = ae.span`
|
|
|
8597
8555
|
&[data-appearance='ghost'] {
|
|
8598
8556
|
background-color: transparent;
|
|
8599
8557
|
color: typoPrimary;
|
|
8600
|
-
|
|
8601
|
-
stroke: typoPrimary;
|
|
8602
|
-
}
|
|
8558
|
+
|
|
8603
8559
|
@media (hover: hover) {
|
|
8604
8560
|
:hover {
|
|
8605
8561
|
color: neutral500;
|
|
8606
|
-
& svg {
|
|
8607
|
-
stroke: neutral500;
|
|
8608
|
-
}
|
|
8609
8562
|
}
|
|
8610
8563
|
}
|
|
8611
8564
|
}
|
|
@@ -8618,9 +8571,7 @@ const yU = ae.span`
|
|
|
8618
8571
|
background-color: red1;
|
|
8619
8572
|
color: white;
|
|
8620
8573
|
border-radius: 50%;
|
|
8621
|
-
|
|
8622
|
-
stroke: white;
|
|
8623
|
-
}
|
|
8574
|
+
|
|
8624
8575
|
@media (hover: hover) {
|
|
8625
8576
|
:hover {
|
|
8626
8577
|
background-color: red70;
|
|
@@ -15183,6 +15134,10 @@ const Ase = ae.img`
|
|
|
15183
15134
|
tealTeal: {
|
|
15184
15135
|
color: "teal20",
|
|
15185
15136
|
textColor: "teal90"
|
|
15137
|
+
},
|
|
15138
|
+
orangeOrange: {
|
|
15139
|
+
color: "orange20",
|
|
15140
|
+
textColor: "orange80"
|
|
15186
15141
|
}
|
|
15187
15142
|
}, kse = ae.div`
|
|
15188
15143
|
position: absolute;
|
package/ui/index.umd.js
CHANGED
|
@@ -1009,9 +1009,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1009
1009
|
&[data-appearance='primary'] {
|
|
1010
1010
|
background-color: red1;
|
|
1011
1011
|
color: white;
|
|
1012
|
-
& svg {
|
|
1013
|
-
stroke: white;
|
|
1014
|
-
}
|
|
1015
1012
|
|
|
1016
1013
|
:not(:disabled) {
|
|
1017
1014
|
@media (hover: hover) {
|
|
@@ -1025,9 +1022,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1025
1022
|
&[data-appearance='secondary'] {
|
|
1026
1023
|
background-color: neutral20;
|
|
1027
1024
|
color: typoPrimary;
|
|
1028
|
-
& svg {
|
|
1029
|
-
stroke: typoPrimary;
|
|
1030
|
-
}
|
|
1031
1025
|
|
|
1032
1026
|
@media (hover: hover) {
|
|
1033
1027
|
:hover {
|
|
@@ -1039,9 +1033,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1039
1033
|
&[data-appearance='tertiary'] {
|
|
1040
1034
|
background-color: red20;
|
|
1041
1035
|
color: red1;
|
|
1042
|
-
& svg {
|
|
1043
|
-
stroke: red1;
|
|
1044
|
-
}
|
|
1045
1036
|
|
|
1046
1037
|
@media (hover: hover) {
|
|
1047
1038
|
:hover {
|
|
@@ -1054,9 +1045,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1054
1045
|
&[data-variant='success'] {
|
|
1055
1046
|
background-color: successColor;
|
|
1056
1047
|
color: white;
|
|
1057
|
-
& svg {
|
|
1058
|
-
stroke: white;
|
|
1059
|
-
}
|
|
1060
1048
|
|
|
1061
1049
|
@media (hover: hover) {
|
|
1062
1050
|
:hover {
|
|
@@ -1070,9 +1058,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1070
1058
|
&[data-appearance='primary'] {
|
|
1071
1059
|
color: typoPrimary;
|
|
1072
1060
|
border-color: typoPrimary;
|
|
1073
|
-
& svg {
|
|
1074
|
-
stroke: typoPrimary;
|
|
1075
|
-
}
|
|
1076
1061
|
|
|
1077
1062
|
@media (hover: hover) {
|
|
1078
1063
|
:hover {
|
|
@@ -1083,9 +1068,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1083
1068
|
&[data-appearance='secondary'] {
|
|
1084
1069
|
color: red1;
|
|
1085
1070
|
border-color: red1;
|
|
1086
|
-
& svg {
|
|
1087
|
-
stroke: red1;
|
|
1088
|
-
}
|
|
1089
1071
|
|
|
1090
1072
|
@media (hover: hover) {
|
|
1091
1073
|
:hover {
|
|
@@ -1098,9 +1080,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1098
1080
|
background-color: white;
|
|
1099
1081
|
&[data-appearance='primary'] {
|
|
1100
1082
|
color: typoPrimary;
|
|
1101
|
-
& svg {
|
|
1102
|
-
stroke: typoPrimary;
|
|
1103
|
-
}
|
|
1104
1083
|
|
|
1105
1084
|
@media (hover: hover) {
|
|
1106
1085
|
:hover {
|
|
@@ -1110,9 +1089,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1110
1089
|
}
|
|
1111
1090
|
&[data-appearance='secondary'] {
|
|
1112
1091
|
color: red1;
|
|
1113
|
-
& svg {
|
|
1114
|
-
stroke: red1;
|
|
1115
|
-
}
|
|
1116
1092
|
|
|
1117
1093
|
@media (hover: hover) {
|
|
1118
1094
|
:hover {
|
|
@@ -1127,31 +1103,19 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1127
1103
|
height: 20px;
|
|
1128
1104
|
&[data-appearance='primary'] {
|
|
1129
1105
|
color: typoPrimary;
|
|
1130
|
-
& svg {
|
|
1131
|
-
stroke: typoPrimary;
|
|
1132
|
-
}
|
|
1133
1106
|
|
|
1134
1107
|
@media (hover: hover) {
|
|
1135
1108
|
:hover {
|
|
1136
1109
|
color: neutral500;
|
|
1137
|
-
& svg {
|
|
1138
|
-
stroke: neutral500;
|
|
1139
|
-
}
|
|
1140
1110
|
}
|
|
1141
1111
|
}
|
|
1142
1112
|
}
|
|
1143
1113
|
&[data-appearance='secondary'] {
|
|
1144
1114
|
color: red1;
|
|
1145
|
-
& svg {
|
|
1146
|
-
stroke: red1;
|
|
1147
|
-
}
|
|
1148
1115
|
|
|
1149
1116
|
@media (hover: hover) {
|
|
1150
1117
|
:hover {
|
|
1151
1118
|
color: red70;
|
|
1152
|
-
& svg {
|
|
1153
|
-
stroke: red70;
|
|
1154
|
-
}
|
|
1155
1119
|
}
|
|
1156
1120
|
}
|
|
1157
1121
|
}
|
|
@@ -1165,9 +1129,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1165
1129
|
&[data-appearance='primary'] {
|
|
1166
1130
|
background-color: red1;
|
|
1167
1131
|
color: white;
|
|
1168
|
-
|
|
1169
|
-
stroke: white;
|
|
1170
|
-
}
|
|
1132
|
+
|
|
1171
1133
|
@media (hover: hover) {
|
|
1172
1134
|
:hover {
|
|
1173
1135
|
background-color: red70;
|
|
@@ -1178,9 +1140,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1178
1140
|
&[data-appearance='secondary'] {
|
|
1179
1141
|
background-color: neutral20;
|
|
1180
1142
|
color: typoPrimary;
|
|
1181
|
-
|
|
1182
|
-
stroke: typoPrimary;
|
|
1183
|
-
}
|
|
1143
|
+
|
|
1184
1144
|
@media (hover: hover) {
|
|
1185
1145
|
:hover {
|
|
1186
1146
|
background-color: lightGray7;
|
|
@@ -1191,9 +1151,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1191
1151
|
&[data-appearance='tertiary'] {
|
|
1192
1152
|
background-color: red20;
|
|
1193
1153
|
color: red1;
|
|
1194
|
-
|
|
1195
|
-
stroke: red1;
|
|
1196
|
-
}
|
|
1154
|
+
|
|
1197
1155
|
@media (hover: hover) {
|
|
1198
1156
|
:hover {
|
|
1199
1157
|
background-color: red30;
|
|
@@ -1204,15 +1162,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1204
1162
|
&[data-appearance='ghost'] {
|
|
1205
1163
|
background-color: transparent;
|
|
1206
1164
|
color: typoPrimary;
|
|
1207
|
-
|
|
1208
|
-
stroke: typoPrimary;
|
|
1209
|
-
}
|
|
1165
|
+
|
|
1210
1166
|
@media (hover: hover) {
|
|
1211
1167
|
:hover {
|
|
1212
1168
|
color: neutral500;
|
|
1213
|
-
& svg {
|
|
1214
|
-
stroke: neutral500;
|
|
1215
|
-
}
|
|
1216
1169
|
}
|
|
1217
1170
|
}
|
|
1218
1171
|
}
|
|
@@ -1225,9 +1178,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1225
1178
|
background-color: red1;
|
|
1226
1179
|
color: white;
|
|
1227
1180
|
border-radius: 50%;
|
|
1228
|
-
|
|
1229
|
-
stroke: white;
|
|
1230
|
-
}
|
|
1181
|
+
|
|
1231
1182
|
@media (hover: hover) {
|
|
1232
1183
|
:hover {
|
|
1233
1184
|
background-color: red70;
|
|
@@ -1486,7 +1437,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1486
1437
|
}
|
|
1487
1438
|
}
|
|
1488
1439
|
}
|
|
1489
|
-
`,lle={greenWhite:{color:"green60",textColor:"white"},blueBlue:{color:"blue20",textColor:"blue80"},magentaWhite:{color:"magenta60",textColor:"white"},magentaMagenta:{color:"magenta20",textColor:"magenta80"},tealTeal:{color:"teal20",textColor:"teal90"}},ule=ae.div`
|
|
1440
|
+
`,lle={greenWhite:{color:"green60",textColor:"white"},blueBlue:{color:"blue20",textColor:"blue80"},magentaWhite:{color:"magenta60",textColor:"white"},magentaMagenta:{color:"magenta20",textColor:"magenta80"},tealTeal:{color:"teal20",textColor:"teal90"},orangeOrange:{color:"orange20",textColor:"orange80"}},ule=ae.div`
|
|
1490
1441
|
position: absolute;
|
|
1491
1442
|
bottom: 2px;
|
|
1492
1443
|
left: 2px;
|