@digigov/theme-grnet 2.0.0-6452adf3 → 2.0.0-aefd0709

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/dist/index.css CHANGED
@@ -717,33 +717,11 @@
717
717
  }
718
718
  }
719
719
  .ds-btn-secondary {
720
- --btn-secondary-background-color: var(--color-base-300);
721
- --btn-secondary-color: var(--color-base-content);
722
- --btn-secondary-background-color-hover: var(--color-base-400);
723
- --btn-secondary-color-hover: var(--color-base-content);
724
- --btn-secondary-background-color-active: var(--color-base-500);
725
720
  --btn-secondary-box-shadow: 0;
726
721
  }
727
- @media print {
728
- .ds-btn-secondary {
729
- --btn-secondary-background-color: var(--color-white);
730
- --btn-secondary-color: var(--color-base-content)
731
- }
732
- }
733
722
  .ds-btn-warning {
734
- --btn-warning-background-color: var(--color-error);
735
- --btn-warning-color: var(--color-white);
736
- --btn-warning-background-color-hover: var(--color-error-hover);
737
- --btn-warning-color-hover: var(--color-white);
738
- --btn-warning-background-color-active: var(--color-error-hover);
739
723
  --btn-warning-box-shadow: 0;
740
724
  }
741
- @media print {
742
- .ds-btn-warning {
743
- --btn-warning-background-color: var(--color-white);
744
- --btn-warning-color: var(--color-base-content)
745
- }
746
- }
747
725
  .ds-card__text {
748
726
  --card__text-font-size: var(--text-base);
749
727
  --card__text-line-height: var(--line-h-base);
@@ -755,13 +733,11 @@
755
733
  }
756
734
  }
757
735
  .ds-card {
758
- --card-border-radius: var(--border-radius-lg);
759
736
  --card-background-color: var(--color-base-200);
760
737
  --card-padding-x: 1rem;
761
738
  --card-padding-y: 1.5rem;
762
739
  }
763
740
  .ds-footer {
764
- --footer-border: solid var(--color-tertiary);
765
741
  --footer-border-width: 0;
766
742
  --footer-background-color: var(--color-base-900);
767
743
  --footer-color: var(--color-base-200);
@@ -791,690 +767,12 @@
791
767
  --tabs__panel-border-radius: 0 var(--border-radius-md) var(--border-radius-lg);
792
768
  }
793
769
  :root {
794
- --text-sm-default: 0.875rem;
795
- --text-base-default: 1rem;
796
- --text-lg-default: 1.1875rem;
797
- --text-xl-default: 1.25rem;
798
- --text-2xl-default: 1.5rem;
799
- --text-3xl-default: 1.875rem;
800
- --text-4xl-default: 2.25rem;
801
- --text-5xl-default: 3rem;
802
-
803
- --text-sm-large: 1rem;
804
- --text-base-large: 1.25rem;
805
- --text-lg-large: 1.4rem;
806
- --text-xl-large: 1.6rem;
807
- --text-2xl-large: 1.875rem;
808
- --text-3xl-large: 2.25rem;
809
- --text-4xl-large: 2.5rem;
810
- --text-5xl-large: 3rem;
811
-
812
- --text-sm: var(--text-sm-default);
813
- --text-base: var(--text-base-default);
814
- --text-lg: var(--text-lg-default);
815
- --text-xl: var(--text-xl-default);
816
- --text-2xl: var(--text-2xl-default);
817
- --text-3xl: var(--text-3xl-default);
818
- --text-4xl: var(--text-4xl-default);
819
- --text-5xl: var(--text-5xl-default);
820
-
821
- --line-h-sm-default: 1.375;
822
- --line-h-base-default: 1.375;
823
- --line-h-lg-default: 1.375;
824
- --line-h-xl-default: 1.25;
825
- --line-h-2xl-default: 1.25;
826
- --line-h-3xl-default: 1.25;
827
- --line-h-4xl-default: 1.25;
828
- --line-h-5xl-default: 1.25;
829
-
830
- --line-h-sm-large: 2;
831
- --line-h-base-large: 2;
832
- --line-h-lg-large: 2;
833
- --line-h-xl-large: 1.75;
834
- --line-h-2xl-large: 1.75;
835
- --line-h-3xl-large: 1.5;
836
- --line-h-4xl-large: 1.5;
837
- --line-h-5xl-large: 1.25;
838
-
839
- --line-h-sm: var(--line-h-sm-default);
840
- --line-h-base: var(--line-h-base-default);
841
- --line-h-lg: var(--line-h-lg-default);
842
- --line-h-xl: var(--line-h-xl-default);
843
- --line-h-2xl: var(--line-h-2xl-default);
844
- --line-h-3xl: var(--line-h-3xl-default);
845
- --line-h-4xl: var(--line-h-4xl-default);
846
- --line-h-5xl: var(--line-h-5xl-default);
847
-
848
- --letter-spacing-normal-default: normal;
849
- --letter-spacing-wide-default: 0.025rem;
850
- --letter-spacing-wider-default: 0.05rem;
851
- --letter-spacing-widest-default: 0.075rem;
852
-
853
- --letter-spacing-normal-extra: 0.05rem;
854
- --letter-spacing-wide-extra: 0.075rem;
855
- --letter-spacing-wider-extra: 0.01rem;
856
- --letter-spacing-widest-extra: 0.125rem;
857
-
858
- --letter-spacing-normal: var(--letter-spacing-normal-default);
859
- --letter-spacing-wide: var(--letter-spacing-wide-default);
860
- --letter-spacing-wider: var(--letter-spacing-wider-default);
861
- --letter-spacing-widest: var(--letter-spacing-widest-default);
862
-
863
770
  --border-radius-md: 4px;
864
771
  --border-radius-lg: 8px;
865
772
 
866
- /* TODO: This was not originally defined */
867
773
  --color-footer-link: var(--color-link);
868
774
  --color-footer-link-hover: var(--color-link-hover);
869
775
 
870
776
  --color-header-text: var(--black);
871
777
  --color-header-text-hover: var(--black);
872
778
  }
873
-
874
- .ds-accordion__section-heading {
875
- --accordion__section-heading-font-size: var(--text-lg);
876
- }
877
-
878
- @media (min-width: 768px) {
879
-
880
- .ds-accordion__section-heading {
881
- --accordion__section-heading-font-size: var(--text-xl)
882
- }
883
- }
884
-
885
- .ds-accordion__section-summary {
886
- --accordion__section-summary-background: var(--color-base-200);
887
- --accordion__section-summary-background-hover: var(--color-base-300);
888
- }
889
-
890
- .ds-breadcrumbs__list-item {
891
- --breadcrumbs__list-item-font-size: var(--text-sm);
892
- }
893
-
894
- @media (min-width: 768px) {
895
-
896
- .ds-breadcrumbs__list-item {
897
- --breadcrumbs__list-item-font-size: var(--text-base)
898
- }
899
- }
900
-
901
- .ds-back-to-top-link {
902
- --back-to-top-link-color: var(--color-link);
903
- --back-to-top-link-color-active: var(--color-link-active);
904
- --back-to-top-link-color-hover: var(--color-link-hover);
905
- --back-to-top-link-padding: 0px;
906
- --back-to-top-link-font-size: var(--text-base);
907
- --back-to-top-link-line-height: var(--line-h-base);
908
- --back-to-top-link-letter-spacing: var(--letter-spacing-normal);
909
- }
910
-
911
- @media (min-width: 768px) {
912
-
913
- .ds-back-to-top-link {
914
- --back-to-top-link-font-size: var(--text-lg);
915
- --back-to-top-link-line-height: var(--line-h-lg)
916
- }
917
- }
918
-
919
- .ds-btn {
920
- --btn-border-radius: 4px;
921
- --btn-padding: 0.5rem 1.25rem;
922
- --btn-letter-spacing: var(--letter-spacing-wide);
923
- --btn-font-size: var(--text-base);
924
- }
925
-
926
- @media (min-width: 768px) {
927
-
928
- .ds-btn {
929
- --btn-font-size: var(--text-lg)
930
- }
931
- }
932
-
933
- @media print {
934
-
935
- .ds-btn {
936
- --btn-padding: 0.5rem 1rem
937
- }
938
- }
939
-
940
- .ds-btn-cta {
941
- --btn-cta-font-size: var(--text-lg);
942
- }
943
-
944
- @media (min-width: 768px) {
945
-
946
- .ds-btn-cta {
947
- --btn-cta-font-size: var(--text-xl)
948
- }
949
- }
950
-
951
- .ds-btn-primary {
952
- --btn-primary-background-color: var(--color-primary);
953
- --btn-primary-color: var(--color-base-content);
954
- --btn-primary-background-color-hover: var(--color-primary-300);
955
- --btn-primary-color-hover: var(--color-base-content);
956
- --btn-primary-background-color-active: var(--color-primary-300);
957
- --btn-primary-box-shadow: 0;
958
- }
959
-
960
- @media print {
961
-
962
- .ds-btn-primary {
963
- --btn-primary-background-color: var(--color-white);
964
- --btn-primary-color: var(--color-base-content)
965
- }
966
- }
967
-
968
- .ds-btn-secondary {
969
- --btn-secondary-background-color: var(--color-base-300);
970
- --btn-secondary-color: var(--color-base-content);
971
- --btn-secondary-background-color-hover: var(--color-base-400);
972
- --btn-secondary-color-hover: var(--color-base-content);
973
- --btn-secondary-background-color-active: var(--color-base-500);
974
- --btn-secondary-box-shadow: 0;
975
- }
976
-
977
- @media print {
978
-
979
- .ds-btn-secondary {
980
- --btn-secondary-background-color: var(--color-white);
981
- --btn-secondary-color: var(--color-base-content)
982
- }
983
- }
984
-
985
- .ds-btn-warning {
986
- --btn-warning-background-color: var(--color-error);
987
- --btn-warning-color: var(--color-white);
988
- --btn-warning-background-color-hover: var(--color-error-hover);
989
- --btn-warning-color-hover: var(--color-white);
990
- --btn-warning-background-color-active: var(--color-error-hover);
991
- --btn-warning-box-shadow: 0;
992
- }
993
-
994
- @media print {
995
-
996
- .ds-btn-warning {
997
- --btn-warning-background-color: var(--color-white);
998
- --btn-warning-color: var(--color-base-content)
999
- }
1000
- }
1001
-
1002
- .ds-card__text {
1003
- --card__text-font-size: var(--text-base);
1004
- --card__text-line-height: var(--line-h-base);
1005
- }
1006
-
1007
- @media (min-width: 768px) {
1008
-
1009
- .ds-card__text {
1010
- --card__text-font-size: var(--text-lg);
1011
- --card__text-line-height: var(--line-h-lg)
1012
- }
1013
- }
1014
-
1015
- .ds-card {
1016
- --card-border-radius: var(--border-radius-lg);
1017
- --card-background-color: var(--color-base-200);
1018
- --card-padding: 1.5rem 1rem;
1019
- }
1020
-
1021
- .ds-label {
1022
- --label-font-size: var(--text-base);
1023
- --label-line-height: var(--line-h-base);
1024
- --label-letter-spacing: var(--letter-spacing-normal);
1025
- }
1026
-
1027
- @media (min-width: 768px) {
1028
-
1029
- .ds-label {
1030
- --label-font-size: var(--text-lg);
1031
- --label-line-height: var(--line-h-lg)
1032
- }
1033
- }
1034
-
1035
- .ds-input {
1036
- --input-border-radius: var(--border-radius-md);
1037
- }
1038
-
1039
- .ds-textarea {
1040
- --textarea-border-radius: var(--border-radius-md);
1041
- }
1042
-
1043
- .ds-select {
1044
- --select-border-radius: var(--border-radius-md);
1045
- }
1046
-
1047
- .ds-footer__copyright {
1048
- --footer__copyright-font-size: var(--text-sm);
1049
- }
1050
-
1051
- @media (min-width: 768px) {
1052
-
1053
- .ds-footer__copyright {
1054
- --footer__copyright-font-size: var(--text-base)
1055
- }
1056
- }
1057
-
1058
- .ds-footer {
1059
- --footer-border: solid var(--color-tertiary);
1060
- --footer-border-width: 0;
1061
- --footer-background-color: var(--color-base-900);
1062
- --footer-color: var(--color-base-200);
1063
- }
1064
-
1065
- .ds-footer__link {
1066
- --footer__link-text-decoration: none;
1067
- --footer__link-text-decoration-hover: underline;
1068
- --footer__link-color-hover: var(--color-base-300);
1069
- --footer__link-color-focus: var(--color-base-content);
1070
- }
1071
-
1072
- .ds-header {
1073
- --header-border: solid var(--color-base-300);
1074
- --header-border-width: 0 0 1px 0;
1075
- --header-background: var(--color-base-200);
1076
- }
1077
-
1078
- .ds-header__title {
1079
- --header__title-color: var(--header-color);
1080
- --header__title-color-hover: var(--header-color-hover);
1081
- }
1082
-
1083
- .ds-warning-text {
1084
- --warning-text-font-size: var(--text-base);
1085
- }
1086
-
1087
- @media (min-width: 768px) {
1088
-
1089
- .ds-warning-text {
1090
- --warning-text-font-size: var(--text-lg)
1091
- }
1092
- }
1093
-
1094
- .ds-details {
1095
- --details-font-size: var(--text-base);
1096
- --details-line-height: var(--line-h-base);
1097
- }
1098
-
1099
- @media (min-width: 768px) {
1100
-
1101
- .ds-details {
1102
- --details-font-size: var(--text-lg);
1103
- --details-line-height: var(--line-h-lg)
1104
- }
1105
- }
1106
-
1107
- .ds-details__summary {
1108
- --details__summary-font-size: var(--text-base);
1109
- --details__summary-line-height: var(--line-h-base);
1110
- }
1111
-
1112
- @media (min-width: 768px) {
1113
-
1114
- .ds-details__summary {
1115
- --details__summary-font-size: var(--text-lg);
1116
- --details__summary-line-height: var(--line-h-lg)
1117
- }
1118
- }
1119
-
1120
- .ds-details__summary--lg {
1121
- --details__summary--lg-font-size: var(--text-lg);
1122
- --details__summary--lg-line-height: var(--line-h-lg);
1123
- }
1124
-
1125
- @media (min-width: 768px) {
1126
-
1127
- .ds-details__summary--lg {
1128
- --details__summary--lg-font-size: var(--text-xl);
1129
- --details__summary--lg-line-height: var(--line-h-xl)
1130
- }
1131
- }
1132
-
1133
- .ds-blockquote {
1134
- --blockquote-font-size: var(--text-base);
1135
- --blockquote-line-height: var(--line-h-base);
1136
- }
1137
-
1138
- @media (min-width: 768px) {
1139
-
1140
- .ds-blockquote {
1141
- --blockquote-font-size: var(--text-lg);
1142
- --blockquote-line-height: var(--line-h-lg)
1143
- }
1144
- }
1145
-
1146
- .ds-notification-banner {
1147
- --notification-banner-border-radius: var(--border-radius-md);
1148
- }
1149
-
1150
- .ds-circular-progress__circle--1 {
1151
- --circular-progress__circle--1-stroke: var(--color-secondary);
1152
- }
1153
-
1154
- .ds-circular-progress__circle--2 {
1155
- --circular-progress__circle--2-stroke: var(--color-tertiary);
1156
- }
1157
-
1158
- .ds-tabs__panel {
1159
- --tabs__panel-border-radius: 0 var(--border-radius-md) var(--border-radius-lg);
1160
- }
1161
-
1162
- .ds-panel {
1163
- --panel-border-radius: var(--border-radius-md);
1164
- }
1165
-
1166
- .ds-panel__title {
1167
- --panel__title-font-size: var(--text-4xl);
1168
- --panel__title-line-height: var(--line-h-4xl);
1169
- --panel__title-margin-bottom: 1rem;
1170
- --panel__title-font-weight: 700;
1171
- --panel__title-letter-spacing: var(--letter-spacing-normal);
1172
- }
1173
-
1174
- @media (min-width: 768px) {
1175
-
1176
- .ds-panel__title {
1177
- --panel__title-font-size: var(--text-5xl);
1178
- --panel__title-line-height: var(--line-h-5xl);
1179
- --panel__title-margin-bottom: 1.5rem
1180
- }
1181
- }
1182
-
1183
- @media print {
1184
-
1185
- .ds-panel__title {
1186
- --panel__title-font-size: var(--text-4xl);
1187
- --panel__title-line-height: var(--line-h-4xl);
1188
- --panel__title-margin-bottom: 1.5rem
1189
- }
1190
- }
1191
-
1192
- .ds-panel__body {
1193
- --panel__body-font-size: var(--text-2xl);
1194
- --panel__body-line-height: var(--line-h-2xl);
1195
- --panel__body-margin: auto;
1196
- --panel__body-letter-spacing: var(--letter-spacing-normal);
1197
- }
1198
-
1199
- @media (min-width: 768px) {
1200
-
1201
- .ds-panel__body {
1202
- --panel__body-font-size: var(--text-4xl);
1203
- --panel__body-line-height: var(--line-h-4xl)
1204
- }
1205
- }
1206
-
1207
- @media print {
1208
-
1209
- .ds-panel__body {
1210
- --panel__body-font-size: var(--text-2xl);
1211
- --panel__body-line-height: var(--line-h-2xl)
1212
- }
1213
- }
1214
-
1215
- .ds-phase-banner__content {
1216
- --phase-banner__content-font-size: var(--text-base);
1217
- }
1218
-
1219
- @media (min-width: 768px) {
1220
-
1221
- .ds-phase-banner__content {
1222
- --phase-banner__content-font-size: var(--text-lg)
1223
- }
1224
- }
1225
-
1226
- .ds-radios__label {
1227
- --radios__label-font-size: var(--text-base);
1228
- }
1229
-
1230
- @media (min-width: 768px) {
1231
-
1232
- .ds-radios__label {
1233
- --radios__label-font-size: var(--text-lg)
1234
- }
1235
- }
1236
-
1237
- .ds-summary-list {
1238
- --summary-list-font-size: var(--text-base);
1239
- }
1240
-
1241
- @media (min-width: 768px) {
1242
-
1243
- .ds-summary-list {
1244
- --summary-list-font-size: var(--text-lg)
1245
- }
1246
- }
1247
-
1248
- .ds-heading-xl {
1249
- --heading-xl-font-size: var(--text-3xl);
1250
- --heading-xl-line-height: var(--line-h-3xl);
1251
- --heading-xl-margin-bottom: 2rem;
1252
- --heading-xl-font-weight: 700;
1253
- --heading-xl-letter-spacing: var(--letter-spacing-normal);
1254
- }
1255
-
1256
- @media (min-width: 768px) {
1257
-
1258
- .ds-heading-xl {
1259
- --heading-xl-font-size: var(--text-5xl);
1260
- --heading-xl-line-height: var(--line-h-5xl);
1261
- --heading-xl-margin-bottom: 3rem
1262
- }
1263
- }
1264
-
1265
- .ds-heading-lg {
1266
- --heading-lg-font-size: var(--text-2xl);
1267
- --heading-lg-line-height: var(--line-h-2xl);
1268
- --heading-lg-margin-bottom: 2rem;
1269
- --heading-lg-font-weight: 700;
1270
- --heading-lg-letter-spacing: var(--letter-spacing-normal);
1271
- }
1272
-
1273
- @media (min-width: 768px) {
1274
-
1275
- .ds-heading-lg {
1276
- --heading-lg-font-size: var(--text-4xl);
1277
- --heading-lg-line-height: var(--line-h-4xl);
1278
- --heading-lg-margin-bottom: 2.5rem
1279
- }
1280
- }
1281
-
1282
- .ds-heading-md {
1283
- --heading-md-font-size: var(--text-xl);
1284
- --heading-md-line-height: var(--line-h-xl);
1285
- --heading-md-margin-bottom: 1.5rem;
1286
- --heading-md-font-weight: 700;
1287
- --heading-md-letter-spacing: var(--letter-spacing-normal);
1288
- }
1289
-
1290
- @media (min-width: 768px) {
1291
-
1292
- .ds-heading-md {
1293
- --heading-md-font-size: var(--text-2xl);
1294
- --heading-md-line-height: var(--line-h-2xl);
1295
- --heading-md-margin-bottom: 2rem
1296
- }
1297
- }
1298
-
1299
- .ds-heading-sm {
1300
- --heading-sm-font-size: var(--text-base);
1301
- --heading-sm-line-height: var(--line-h-base);
1302
- --heading-sm-margin-bottom: 0.75rem;
1303
- --heading-sm-font-weight: 700;
1304
- --heading-sm-letter-spacing: var(--letter-spacing-normal);
1305
- }
1306
-
1307
- @media (min-width: 768px) {
1308
-
1309
- .ds-heading-sm {
1310
- --heading-sm-font-size: var(--text-lg);
1311
- --heading-sm-line-height: var(--line-h-lg);
1312
- --heading-sm-margin-bottom: 1.25rem
1313
- }
1314
- }
1315
-
1316
- .ds-heading-xs {
1317
- --heading-xs-font-size: var(--text-sm);
1318
- --heading-xs-line-height: var(--line-h-sm);
1319
- --heading-xs-margin-bottom: 0.5rem;
1320
- --heading-xs-font-weight: 700;
1321
- --heading-xs-letter-spacing: var(--letter-spacing-normal);
1322
- }
1323
-
1324
- @media (min-width: 768px) {
1325
-
1326
- .ds-heading-xs {
1327
- --heading-xs-font-size: var(--text-base);
1328
- --heading-xs-line-height: var(--line-h-base);
1329
- --heading-xs-margin-bottom: 1rem
1330
- }
1331
- }
1332
-
1333
- .ds-caption-xl {
1334
- --caption-xl-font-size: var(--text-xl);
1335
- --caption-xl-line-height: var(--line-h-xl);
1336
- --caption-xl-margin-bottom: 0.25rem;
1337
- --caption-xl-color: var(--color-base-800);
1338
- --caption-xl-font-weight: 400;
1339
- --caption-xl-letter-spacing: var(--letter-spacing-normal);
1340
- }
1341
-
1342
- @media (min-width: 768px) {
1343
-
1344
- .ds-caption-xl {
1345
- --caption-xl-font-size: var(--text-2xl);
1346
- --caption-xl-line-height: var(--line-h-2xl);
1347
- --caption-xl-margin-bottom: 0.5rem
1348
- }
1349
- }
1350
-
1351
- .ds-caption-lg {
1352
- --caption-lg-font-size: var(--text-lg);
1353
- --caption-lg-line-height: var(--line-h-lg);
1354
- --caption-lg-margin-bottom: 0rem;
1355
- --caption-lg-color: var(--color-base-800);
1356
- --caption-lg-font-weight: 400;
1357
- --caption-lg-letter-spacing: var(--letter-spacing-normal);
1358
- }
1359
-
1360
- @media (min-width: 768px) {
1361
-
1362
- .ds-caption-lg {
1363
- --caption-lg-font-size: var(--text-xl);
1364
- --caption-lg-line-height: var(--line-h-xl)
1365
- }
1366
- }
1367
-
1368
- .ds-caption-md {
1369
- --caption-md-font-size: var(--text-base);
1370
- --caption-md-line-height: var(--line-h-base);
1371
- --caption-md-margin-bottom: 0rem;
1372
- --caption-md-color: var(--color-base-800);
1373
- --caption-md-font-weight: 400;
1374
- --caption-md-letter-spacing: var(--letter-spacing-normal);
1375
- }
1376
-
1377
- @media (min-width: 768px) {
1378
-
1379
- .ds-caption-md {
1380
- --caption-md-font-size: var(--text-lg);
1381
- --caption-md-line-height: var(--line-h-lg)
1382
- }
1383
- }
1384
-
1385
- .ds-body {
1386
- --body-font-size: var(--text-base);
1387
- --body-line-height: var(--line-h-base);
1388
- --body-margin-bottom: 1rem;
1389
- --body-color: var(--color-base-content);
1390
- --body-letter-spacing: var(--letter-spacing-normal);
1391
- }
1392
-
1393
- @media (min-width: 768px) {
1394
-
1395
- .ds-body {
1396
- --body-font-size: var(--text-lg);
1397
- --body-line-height: var(--line-h-lg);
1398
- --body-margin-bottom: 2rem
1399
- }
1400
- }
1401
-
1402
- .ds-body-lg {
1403
- --body-lg-font-size: var(--text-lg);
1404
- --body-lg-line-height: var(--line-h-lg);
1405
- }
1406
-
1407
- .ds-body-sm {
1408
- --body-sm-font-size: var(--text-sm);
1409
- --body-sm-line-height: var(--line-h-sm);
1410
- }
1411
-
1412
- .ds-hint {
1413
- --hint-font-size: var(--text-base);
1414
- --hint-line-height: var(--line-h-base);
1415
- --hint-margin-bottom: 1rem;
1416
- --hint-color: var(--color-base-800);
1417
- --hint-letter-spacing: var(--letter-spacing-normal);
1418
- }
1419
-
1420
- @media (min-width: 768px) {
1421
-
1422
- .ds-hint {
1423
- --hint-font-size: var(--text-lg);
1424
- --hint-line-height: var(--line-h-lg)
1425
- }
1426
- }
1427
-
1428
- .ds-hint-lg {
1429
- --hint-lg-font-size: var(--text-lg);
1430
- --hint-lg-line-height: var(--line-h-lg);
1431
- }
1432
-
1433
- .ds-hint-sm {
1434
- --hint-sm-font-size: var(--text-sm);
1435
- --hint-sm-line-height: var(--line-h-sm);
1436
- }
1437
-
1438
- .ds-link {
1439
- --link-color: var(--color-link);
1440
- --link-color-active: var(--color-link-active);
1441
- --link-color-hover: var(--color-link-hover);
1442
- --link-padding: 0px;
1443
- --link-font-size: var(--text-base);
1444
- --link-line-height: var(--line-h-base);
1445
- --link-letter-spacing: var(--letter-spacing-normal);
1446
- }
1447
-
1448
- @media (min-width: 768px) {
1449
-
1450
- .ds-link {
1451
- --link-font-size: var(--text-lg);
1452
- --link-line-height: var(--line-h-lg)
1453
- }
1454
- }
1455
-
1456
- .ds-back-link {
1457
- --back-link-font-size: var(--text-base);
1458
- --back-link-letter-spacing: var(--letter-spacing-normal);
1459
- }
1460
-
1461
- @media (min-width: 768px) {
1462
-
1463
- .ds-back-link {
1464
- --back-link-font-size: var(--text-lg)
1465
- }
1466
- }
1467
-
1468
- .ds-list {
1469
- --list-font-size: var(--text-base);
1470
- --list-line-height: var(--line-h-base);
1471
- --list-letter-spacing: var(--letter-spacing-normal);
1472
- }
1473
-
1474
- @media (min-width: 768px) {
1475
-
1476
- .ds-list {
1477
- --list-font-size: var(--text-lg);
1478
- --list-line-height: var(--line-h-lg)
1479
- }
1480
- }