@abhir9/pd-design-system 0.1.12 → 0.1.14
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 +31 -1268
- package/dist/styles.css +93 -115
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -852,7 +852,7 @@ button {
|
|
|
852
852
|
position: sticky;
|
|
853
853
|
}
|
|
854
854
|
.bottom-1 {
|
|
855
|
-
bottom: 0.
|
|
855
|
+
bottom: 0.25rem;
|
|
856
856
|
}
|
|
857
857
|
.left-1\/2 {
|
|
858
858
|
left: 50%;
|
|
@@ -862,19 +862,31 @@ button {
|
|
|
862
862
|
margin-right: auto;
|
|
863
863
|
}
|
|
864
864
|
.mb-1 {
|
|
865
|
-
margin-bottom: 0.
|
|
865
|
+
margin-bottom: 0.25rem;
|
|
866
866
|
}
|
|
867
867
|
.mb-2 {
|
|
868
|
-
margin-bottom: 0.
|
|
868
|
+
margin-bottom: 0.5rem;
|
|
869
869
|
}
|
|
870
870
|
.mb-6 {
|
|
871
|
-
margin-bottom:
|
|
871
|
+
margin-bottom: 1.5rem;
|
|
872
|
+
}
|
|
873
|
+
.ml-1\.5 {
|
|
874
|
+
margin-left: 0.375rem;
|
|
872
875
|
}
|
|
873
876
|
.ml-2 {
|
|
874
|
-
margin-left: 0.
|
|
877
|
+
margin-left: 0.5rem;
|
|
878
|
+
}
|
|
879
|
+
.ml-2\.5 {
|
|
880
|
+
margin-left: 0.625rem;
|
|
881
|
+
}
|
|
882
|
+
.mr-1\.5 {
|
|
883
|
+
margin-right: 0.375rem;
|
|
875
884
|
}
|
|
876
885
|
.mr-2 {
|
|
877
|
-
margin-right: 0.
|
|
886
|
+
margin-right: 0.5rem;
|
|
887
|
+
}
|
|
888
|
+
.mr-2\.5 {
|
|
889
|
+
margin-right: 0.625rem;
|
|
878
890
|
}
|
|
879
891
|
.inline {
|
|
880
892
|
display: inline;
|
|
@@ -895,31 +907,31 @@ button {
|
|
|
895
907
|
display: none;
|
|
896
908
|
}
|
|
897
909
|
.h-10 {
|
|
898
|
-
height:
|
|
910
|
+
height: 2.5rem;
|
|
899
911
|
}
|
|
900
912
|
.h-12 {
|
|
901
|
-
height:
|
|
913
|
+
height: 3rem;
|
|
902
914
|
}
|
|
903
915
|
.h-16 {
|
|
904
|
-
height:
|
|
916
|
+
height: 4rem;
|
|
905
917
|
}
|
|
906
918
|
.h-2 {
|
|
907
|
-
height: 0.
|
|
919
|
+
height: 0.5rem;
|
|
908
920
|
}
|
|
909
921
|
.h-28 {
|
|
910
|
-
height:
|
|
922
|
+
height: 7rem;
|
|
911
923
|
}
|
|
912
924
|
.h-3 {
|
|
913
|
-
height: 0.
|
|
925
|
+
height: 0.75rem;
|
|
914
926
|
}
|
|
915
927
|
.h-4 {
|
|
916
|
-
height:
|
|
928
|
+
height: 1rem;
|
|
917
929
|
}
|
|
918
930
|
.h-5 {
|
|
919
|
-
height:
|
|
931
|
+
height: 1.25rem;
|
|
920
932
|
}
|
|
921
933
|
.h-8 {
|
|
922
|
-
height:
|
|
934
|
+
height: 2rem;
|
|
923
935
|
}
|
|
924
936
|
.min-h-\[100px\] {
|
|
925
937
|
min-height: 100px;
|
|
@@ -928,28 +940,28 @@ button {
|
|
|
928
940
|
min-height: 100vh;
|
|
929
941
|
}
|
|
930
942
|
.w-2 {
|
|
931
|
-
width: 0.
|
|
943
|
+
width: 0.5rem;
|
|
932
944
|
}
|
|
933
945
|
.w-20 {
|
|
934
|
-
width:
|
|
946
|
+
width: 5rem;
|
|
935
947
|
}
|
|
936
948
|
.w-24 {
|
|
937
|
-
width:
|
|
949
|
+
width: 6rem;
|
|
938
950
|
}
|
|
939
951
|
.w-3 {
|
|
940
|
-
width: 0.
|
|
952
|
+
width: 0.75rem;
|
|
941
953
|
}
|
|
942
954
|
.w-4 {
|
|
943
|
-
width:
|
|
955
|
+
width: 1rem;
|
|
944
956
|
}
|
|
945
957
|
.w-5 {
|
|
946
|
-
width:
|
|
958
|
+
width: 1.25rem;
|
|
947
959
|
}
|
|
948
960
|
.w-full {
|
|
949
961
|
width: 100%;
|
|
950
962
|
}
|
|
951
963
|
.min-w-0 {
|
|
952
|
-
min-width:
|
|
964
|
+
min-width: 0px;
|
|
953
965
|
}
|
|
954
966
|
.max-w-3xl {
|
|
955
967
|
max-width: 48rem;
|
|
@@ -1015,51 +1027,51 @@ button {
|
|
|
1015
1027
|
justify-content: center;
|
|
1016
1028
|
}
|
|
1017
1029
|
.gap-1 {
|
|
1018
|
-
gap: 0.
|
|
1030
|
+
gap: 0.25rem;
|
|
1019
1031
|
}
|
|
1020
1032
|
.gap-2 {
|
|
1021
|
-
gap: 0.
|
|
1033
|
+
gap: 0.5rem;
|
|
1022
1034
|
}
|
|
1023
1035
|
.gap-3 {
|
|
1024
|
-
gap: 0.
|
|
1036
|
+
gap: 0.75rem;
|
|
1025
1037
|
}
|
|
1026
1038
|
.gap-4 {
|
|
1027
|
-
gap:
|
|
1039
|
+
gap: 1rem;
|
|
1028
1040
|
}
|
|
1029
1041
|
.gap-6 {
|
|
1030
|
-
gap:
|
|
1042
|
+
gap: 1.5rem;
|
|
1031
1043
|
}
|
|
1032
1044
|
.gap-8 {
|
|
1033
|
-
gap:
|
|
1045
|
+
gap: 2rem;
|
|
1034
1046
|
}
|
|
1035
1047
|
.gap-x-6 {
|
|
1036
|
-
-moz-column-gap:
|
|
1037
|
-
column-gap:
|
|
1048
|
+
-moz-column-gap: 1.5rem;
|
|
1049
|
+
column-gap: 1.5rem;
|
|
1038
1050
|
}
|
|
1039
1051
|
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
|
|
1040
1052
|
--tw-space-y-reverse: 0;
|
|
1041
|
-
margin-top: calc(
|
|
1042
|
-
margin-bottom: calc(
|
|
1053
|
+
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1054
|
+
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
|
|
1043
1055
|
}
|
|
1044
1056
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
1045
1057
|
--tw-space-y-reverse: 0;
|
|
1046
|
-
margin-top: calc(0.
|
|
1047
|
-
margin-bottom: calc(0.
|
|
1058
|
+
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1059
|
+
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
1048
1060
|
}
|
|
1049
1061
|
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
|
1050
1062
|
--tw-space-y-reverse: 0;
|
|
1051
|
-
margin-top: calc(
|
|
1052
|
-
margin-bottom: calc(
|
|
1063
|
+
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1064
|
+
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
|
1053
1065
|
}
|
|
1054
1066
|
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
|
1055
1067
|
--tw-space-y-reverse: 0;
|
|
1056
|
-
margin-top: calc(
|
|
1057
|
-
margin-bottom: calc(
|
|
1068
|
+
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1069
|
+
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
|
1058
1070
|
}
|
|
1059
1071
|
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
|
|
1060
1072
|
--tw-space-y-reverse: 0;
|
|
1061
|
-
margin-top: calc(
|
|
1062
|
-
margin-bottom: calc(
|
|
1073
|
+
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1074
|
+
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
|
1063
1075
|
}
|
|
1064
1076
|
.overflow-hidden {
|
|
1065
1077
|
overflow: hidden;
|
|
@@ -1075,11 +1087,17 @@ button {
|
|
|
1075
1087
|
.whitespace-nowrap {
|
|
1076
1088
|
white-space: nowrap;
|
|
1077
1089
|
}
|
|
1090
|
+
.rounded-full {
|
|
1091
|
+
border-radius: 9999px;
|
|
1092
|
+
}
|
|
1078
1093
|
.rounded-lg {
|
|
1079
|
-
border-radius: 0.
|
|
1094
|
+
border-radius: 0.5rem;
|
|
1080
1095
|
}
|
|
1081
1096
|
.rounded-md {
|
|
1082
|
-
border-radius: 0.
|
|
1097
|
+
border-radius: 0.375rem;
|
|
1098
|
+
}
|
|
1099
|
+
.rounded-xl {
|
|
1100
|
+
border-radius: 0.75rem;
|
|
1083
1101
|
}
|
|
1084
1102
|
.border {
|
|
1085
1103
|
border-width: 1px;
|
|
@@ -1114,12 +1132,6 @@ button {
|
|
|
1114
1132
|
.border-\[var\(--border-yellow-subtle\)\] {
|
|
1115
1133
|
border-color: var(--border-yellow-subtle);
|
|
1116
1134
|
}
|
|
1117
|
-
.border-\[var\(--pd-border-primary\)\] {
|
|
1118
|
-
border-color: var(--pd-border-primary);
|
|
1119
|
-
}
|
|
1120
|
-
.border-\[var\(--pd-border-red\)\] {
|
|
1121
|
-
border-color: var(--pd-border-red);
|
|
1122
|
-
}
|
|
1123
1135
|
.bg-\[var\(--background-base\)\] {
|
|
1124
1136
|
background-color: var(--background-base);
|
|
1125
1137
|
}
|
|
@@ -1150,9 +1162,6 @@ button {
|
|
|
1150
1162
|
.bg-\[var\(--content-primary\)\] {
|
|
1151
1163
|
background-color: var(--content-primary);
|
|
1152
1164
|
}
|
|
1153
|
-
.bg-\[var\(--pd-background-base\)\] {
|
|
1154
|
-
background-color: var(--pd-background-base);
|
|
1155
|
-
}
|
|
1156
1165
|
.bg-blue-400 {
|
|
1157
1166
|
--tw-bg-opacity: 1;
|
|
1158
1167
|
background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
|
|
@@ -1162,41 +1171,41 @@ button {
|
|
|
1162
1171
|
background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
|
|
1163
1172
|
}
|
|
1164
1173
|
.p-12 {
|
|
1165
|
-
padding:
|
|
1174
|
+
padding: 3rem;
|
|
1166
1175
|
}
|
|
1167
1176
|
.p-2 {
|
|
1168
|
-
padding: 0.
|
|
1177
|
+
padding: 0.5rem;
|
|
1169
1178
|
}
|
|
1170
1179
|
.p-4 {
|
|
1171
|
-
padding:
|
|
1180
|
+
padding: 1rem;
|
|
1172
1181
|
}
|
|
1173
1182
|
.p-5 {
|
|
1174
|
-
padding:
|
|
1183
|
+
padding: 1.25rem;
|
|
1175
1184
|
}
|
|
1176
1185
|
.p-6 {
|
|
1177
|
-
padding:
|
|
1186
|
+
padding: 1.5rem;
|
|
1178
1187
|
}
|
|
1179
1188
|
.p-8 {
|
|
1180
|
-
padding:
|
|
1189
|
+
padding: 2rem;
|
|
1181
1190
|
}
|
|
1182
1191
|
.px-1 {
|
|
1183
|
-
padding-left: 0.
|
|
1184
|
-
padding-right: 0.
|
|
1192
|
+
padding-left: 0.25rem;
|
|
1193
|
+
padding-right: 0.25rem;
|
|
1185
1194
|
}
|
|
1186
1195
|
.px-3 {
|
|
1187
|
-
padding-left: 0.
|
|
1188
|
-
padding-right: 0.
|
|
1196
|
+
padding-left: 0.75rem;
|
|
1197
|
+
padding-right: 0.75rem;
|
|
1189
1198
|
}
|
|
1190
1199
|
.px-4 {
|
|
1191
|
-
padding-left:
|
|
1192
|
-
padding-right:
|
|
1200
|
+
padding-left: 1rem;
|
|
1201
|
+
padding-right: 1rem;
|
|
1193
1202
|
}
|
|
1194
1203
|
.px-6 {
|
|
1195
|
-
padding-left:
|
|
1196
|
-
padding-right:
|
|
1204
|
+
padding-left: 1.5rem;
|
|
1205
|
+
padding-right: 1.5rem;
|
|
1197
1206
|
}
|
|
1198
1207
|
.pt-2 {
|
|
1199
|
-
padding-top: 0.
|
|
1208
|
+
padding-top: 0.5rem;
|
|
1200
1209
|
}
|
|
1201
1210
|
.text-center {
|
|
1202
1211
|
text-align: center;
|
|
@@ -1213,13 +1222,16 @@ button {
|
|
|
1213
1222
|
monospace;
|
|
1214
1223
|
}
|
|
1215
1224
|
.text-2xl {
|
|
1216
|
-
font-size:
|
|
1225
|
+
font-size: 1.5rem;
|
|
1226
|
+
line-height: 2rem;
|
|
1217
1227
|
}
|
|
1218
1228
|
.text-3xl {
|
|
1219
|
-
font-size:
|
|
1229
|
+
font-size: 1.875rem;
|
|
1230
|
+
line-height: 2.25rem;
|
|
1220
1231
|
}
|
|
1221
1232
|
.text-4xl {
|
|
1222
|
-
font-size:
|
|
1233
|
+
font-size: 2.25rem;
|
|
1234
|
+
line-height: 2.5rem;
|
|
1223
1235
|
}
|
|
1224
1236
|
.text-\[10px\] {
|
|
1225
1237
|
font-size: 10px;
|
|
@@ -1228,16 +1240,24 @@ button {
|
|
|
1228
1240
|
font-size: 8px;
|
|
1229
1241
|
}
|
|
1230
1242
|
.text-base {
|
|
1231
|
-
font-size:
|
|
1243
|
+
font-size: 1rem;
|
|
1244
|
+
line-height: 1.5rem;
|
|
1245
|
+
}
|
|
1246
|
+
.text-lg {
|
|
1247
|
+
font-size: 1.125rem;
|
|
1248
|
+
line-height: 1.75rem;
|
|
1232
1249
|
}
|
|
1233
1250
|
.text-sm {
|
|
1234
|
-
font-size:
|
|
1251
|
+
font-size: 0.875rem;
|
|
1252
|
+
line-height: 1.25rem;
|
|
1235
1253
|
}
|
|
1236
1254
|
.text-xl {
|
|
1237
|
-
font-size:
|
|
1255
|
+
font-size: 1.25rem;
|
|
1256
|
+
line-height: 1.75rem;
|
|
1238
1257
|
}
|
|
1239
1258
|
.text-xs {
|
|
1240
|
-
font-size:
|
|
1259
|
+
font-size: 0.75rem;
|
|
1260
|
+
line-height: 1rem;
|
|
1241
1261
|
}
|
|
1242
1262
|
.font-bold {
|
|
1243
1263
|
font-weight: 700;
|
|
@@ -1281,12 +1301,6 @@ button {
|
|
|
1281
1301
|
.text-\[var\(--content-yellow\)\] {
|
|
1282
1302
|
color: var(--content-yellow);
|
|
1283
1303
|
}
|
|
1284
|
-
.text-\[var\(--pd-content-primary\)\] {
|
|
1285
|
-
color: var(--pd-content-primary);
|
|
1286
|
-
}
|
|
1287
|
-
.text-\[var\(--pd-content-red\)\] {
|
|
1288
|
-
color: var(--pd-content-red);
|
|
1289
|
-
}
|
|
1290
1304
|
.text-gray-500 {
|
|
1291
1305
|
--tw-text-opacity: 1;
|
|
1292
1306
|
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
|
@@ -1371,24 +1385,6 @@ button {
|
|
|
1371
1385
|
background-color 0.15s ease-in-out,
|
|
1372
1386
|
border-color 0.15s ease-in-out;
|
|
1373
1387
|
}
|
|
1374
|
-
.file\:border-0::file-selector-button {
|
|
1375
|
-
border-width: 0px;
|
|
1376
|
-
}
|
|
1377
|
-
.file\:bg-transparent::file-selector-button {
|
|
1378
|
-
background-color: transparent;
|
|
1379
|
-
}
|
|
1380
|
-
.file\:text-sm::file-selector-button {
|
|
1381
|
-
font-size: 12px;
|
|
1382
|
-
}
|
|
1383
|
-
.file\:font-medium::file-selector-button {
|
|
1384
|
-
font-weight: 500;
|
|
1385
|
-
}
|
|
1386
|
-
.placeholder\:text-\[var\(--pd-content-subtle\)\]::-moz-placeholder {
|
|
1387
|
-
color: var(--pd-content-subtle);
|
|
1388
|
-
}
|
|
1389
|
-
.placeholder\:text-\[var\(--pd-content-subtle\)\]::placeholder {
|
|
1390
|
-
color: var(--pd-content-subtle);
|
|
1391
|
-
}
|
|
1392
1388
|
.hover\:border-\[var\(--border-green-on-hover\)\]:hover {
|
|
1393
1389
|
border-color: var(--border-green-on-hover);
|
|
1394
1390
|
}
|
|
@@ -1459,12 +1455,6 @@ button {
|
|
|
1459
1455
|
var(--tw-ring-shadow, 0 0 #0000),
|
|
1460
1456
|
var(--tw-shadow);
|
|
1461
1457
|
}
|
|
1462
|
-
.focus-visible\:border-\[var\(--pd-border-blueOnHover\)\]:focus-visible {
|
|
1463
|
-
border-color: var(--pd-border-blueOnHover);
|
|
1464
|
-
}
|
|
1465
|
-
.focus-visible\:border-\[var\(--pd-border-redOnHover\)\]:focus-visible {
|
|
1466
|
-
border-color: var(--pd-border-redOnHover);
|
|
1467
|
-
}
|
|
1468
1458
|
.focus-visible\:outline-none:focus-visible {
|
|
1469
1459
|
outline: 2px solid transparent;
|
|
1470
1460
|
outline-offset: 2px;
|
|
@@ -1480,12 +1470,6 @@ button {
|
|
|
1480
1470
|
.focus-visible\:ring-\[var\(--border-blue\)\]:focus-visible {
|
|
1481
1471
|
--tw-ring-color: var(--border-blue);
|
|
1482
1472
|
}
|
|
1483
|
-
.focus-visible\:ring-\[var\(--pd-border-blue\)\]:focus-visible {
|
|
1484
|
-
--tw-ring-color: var(--pd-border-blue);
|
|
1485
|
-
}
|
|
1486
|
-
.focus-visible\:ring-\[var\(--pd-border-red\)\]:focus-visible {
|
|
1487
|
-
--tw-ring-color: var(--pd-border-red);
|
|
1488
|
-
}
|
|
1489
1473
|
.focus-visible\:ring-offset-2:focus-visible {
|
|
1490
1474
|
--tw-ring-offset-width: 2px;
|
|
1491
1475
|
}
|
|
@@ -1510,9 +1494,6 @@ button {
|
|
|
1510
1494
|
.disabled\:pointer-events-none:disabled {
|
|
1511
1495
|
pointer-events: none;
|
|
1512
1496
|
}
|
|
1513
|
-
.disabled\:cursor-not-allowed:disabled {
|
|
1514
|
-
cursor: not-allowed;
|
|
1515
|
-
}
|
|
1516
1497
|
.disabled\:border-\[var\(--border-subtle\)\]:disabled {
|
|
1517
1498
|
border-color: var(--border-subtle);
|
|
1518
1499
|
}
|
|
@@ -1528,9 +1509,6 @@ button {
|
|
|
1528
1509
|
.disabled\:text-\[var\(--content-subtle\)\]:disabled {
|
|
1529
1510
|
color: var(--content-subtle);
|
|
1530
1511
|
}
|
|
1531
|
-
.disabled\:text-\[var\(--pd-content-subtle\)\]:disabled {
|
|
1532
|
-
color: var(--pd-content-subtle);
|
|
1533
|
-
}
|
|
1534
1512
|
.disabled\:opacity-50:disabled {
|
|
1535
1513
|
opacity: 0.5;
|
|
1536
1514
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abhir9/pd-design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.14",
|
|
4
4
|
"description": "Production-grade design system with adapter layer support",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"build-storybook": "storybook build",
|
|
34
34
|
"build": "npm run generate:css-variables && tsup && npm run build:css && rm -f dist/*.css.map",
|
|
35
35
|
"generate:css-variables": "tsx scripts/generate-css-variables.ts",
|
|
36
|
-
"build:css": "
|
|
36
|
+
"build:css": "cp src/styles.css dist/index.css",
|
|
37
37
|
"dev": "tsup --watch",
|
|
38
38
|
"type-check": "tsc --noEmit",
|
|
39
39
|
"lint": "eslint src --ext .ts,.tsx",
|