@abhir9/pd-design-system 0.1.13 → 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/styles.css CHANGED
@@ -852,7 +852,7 @@ button {
852
852
  position: sticky;
853
853
  }
854
854
  .bottom-1 {
855
- bottom: 0.1rem;
855
+ bottom: 0.25rem;
856
856
  }
857
857
  .left-1\/2 {
858
858
  left: 50%;
@@ -862,37 +862,31 @@ button {
862
862
  margin-right: auto;
863
863
  }
864
864
  .mb-1 {
865
- margin-bottom: 0.1rem;
865
+ margin-bottom: 0.25rem;
866
866
  }
867
867
  .mb-2 {
868
- margin-bottom: 0.2rem;
868
+ margin-bottom: 0.5rem;
869
869
  }
870
870
  .mb-6 {
871
- margin-bottom: 0.6rem;
871
+ margin-bottom: 1.5rem;
872
872
  }
873
- .ml-10 {
874
- margin-left: 1rem;
875
- }
876
- .ml-12 {
877
- margin-left: 1.2rem;
873
+ .ml-1\.5 {
874
+ margin-left: 0.375rem;
878
875
  }
879
876
  .ml-2 {
880
- margin-left: 0.2rem;
881
- }
882
- .ml-8 {
883
- margin-left: 0.8rem;
877
+ margin-left: 0.5rem;
884
878
  }
885
- .mr-10 {
886
- margin-right: 1rem;
879
+ .ml-2\.5 {
880
+ margin-left: 0.625rem;
887
881
  }
888
- .mr-12 {
889
- margin-right: 1.2rem;
882
+ .mr-1\.5 {
883
+ margin-right: 0.375rem;
890
884
  }
891
885
  .mr-2 {
892
- margin-right: 0.2rem;
886
+ margin-right: 0.5rem;
893
887
  }
894
- .mr-8 {
895
- margin-right: 0.8rem;
888
+ .mr-2\.5 {
889
+ margin-right: 0.625rem;
896
890
  }
897
891
  .inline {
898
892
  display: inline;
@@ -913,40 +907,31 @@ button {
913
907
  display: none;
914
908
  }
915
909
  .h-10 {
916
- height: 1rem;
910
+ height: 2.5rem;
917
911
  }
918
912
  .h-12 {
919
- height: 1.2rem;
913
+ height: 3rem;
920
914
  }
921
915
  .h-16 {
922
- height: 1.6rem;
916
+ height: 4rem;
923
917
  }
924
918
  .h-2 {
925
- height: 0.2rem;
926
- }
927
- .h-20 {
928
- height: 2rem;
919
+ height: 0.5rem;
929
920
  }
930
921
  .h-28 {
931
- height: 2.8rem;
922
+ height: 7rem;
932
923
  }
933
924
  .h-3 {
934
- height: 0.3rem;
935
- }
936
- .h-36 {
937
- height: 3.6rem;
925
+ height: 0.75rem;
938
926
  }
939
927
  .h-4 {
940
- height: 0.4rem;
941
- }
942
- .h-40 {
943
- height: 4rem;
928
+ height: 1rem;
944
929
  }
945
930
  .h-5 {
946
- height: 0.5rem;
931
+ height: 1.25rem;
947
932
  }
948
933
  .h-8 {
949
- height: 0.8rem;
934
+ height: 2rem;
950
935
  }
951
936
  .min-h-\[100px\] {
952
937
  min-height: 100px;
@@ -954,35 +939,29 @@ button {
954
939
  .min-h-screen {
955
940
  min-height: 100vh;
956
941
  }
957
- .w-12 {
958
- width: 1.2rem;
959
- }
960
- .w-16 {
961
- width: 1.6rem;
962
- }
963
942
  .w-2 {
964
- width: 0.2rem;
943
+ width: 0.5rem;
965
944
  }
966
945
  .w-20 {
967
- width: 2rem;
946
+ width: 5rem;
968
947
  }
969
948
  .w-24 {
970
- width: 2.4rem;
949
+ width: 6rem;
971
950
  }
972
951
  .w-3 {
973
- width: 0.3rem;
952
+ width: 0.75rem;
974
953
  }
975
954
  .w-4 {
976
- width: 0.4rem;
955
+ width: 1rem;
977
956
  }
978
957
  .w-5 {
979
- width: 0.5rem;
958
+ width: 1.25rem;
980
959
  }
981
960
  .w-full {
982
961
  width: 100%;
983
962
  }
984
963
  .min-w-0 {
985
- min-width: 0.0rem;
964
+ min-width: 0px;
986
965
  }
987
966
  .max-w-3xl {
988
967
  max-width: 48rem;
@@ -1048,51 +1027,51 @@ button {
1048
1027
  justify-content: center;
1049
1028
  }
1050
1029
  .gap-1 {
1051
- gap: 0.1rem;
1030
+ gap: 0.25rem;
1052
1031
  }
1053
1032
  .gap-2 {
1054
- gap: 0.2rem;
1033
+ gap: 0.5rem;
1055
1034
  }
1056
1035
  .gap-3 {
1057
- gap: 0.3rem;
1036
+ gap: 0.75rem;
1058
1037
  }
1059
1038
  .gap-4 {
1060
- gap: 0.4rem;
1039
+ gap: 1rem;
1061
1040
  }
1062
1041
  .gap-6 {
1063
- gap: 0.6rem;
1042
+ gap: 1.5rem;
1064
1043
  }
1065
1044
  .gap-8 {
1066
- gap: 0.8rem;
1045
+ gap: 2rem;
1067
1046
  }
1068
1047
  .gap-x-6 {
1069
- -moz-column-gap: 0.6rem;
1070
- column-gap: 0.6rem;
1048
+ -moz-column-gap: 1.5rem;
1049
+ column-gap: 1.5rem;
1071
1050
  }
1072
1051
  .space-y-10 > :not([hidden]) ~ :not([hidden]) {
1073
1052
  --tw-space-y-reverse: 0;
1074
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1075
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1053
+ margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
1054
+ margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
1076
1055
  }
1077
1056
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
1078
1057
  --tw-space-y-reverse: 0;
1079
- margin-top: calc(0.3rem * calc(1 - var(--tw-space-y-reverse)));
1080
- margin-bottom: calc(0.3rem * var(--tw-space-y-reverse));
1058
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
1059
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
1081
1060
  }
1082
1061
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1083
1062
  --tw-space-y-reverse: 0;
1084
- margin-top: calc(0.4rem * calc(1 - var(--tw-space-y-reverse)));
1085
- margin-bottom: calc(0.4rem * var(--tw-space-y-reverse));
1063
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1064
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1086
1065
  }
1087
1066
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
1088
1067
  --tw-space-y-reverse: 0;
1089
- margin-top: calc(0.6rem * calc(1 - var(--tw-space-y-reverse)));
1090
- margin-bottom: calc(0.6rem * var(--tw-space-y-reverse));
1068
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
1069
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
1091
1070
  }
1092
1071
  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
1093
1072
  --tw-space-y-reverse: 0;
1094
- margin-top: calc(0.8rem * calc(1 - var(--tw-space-y-reverse)));
1095
- margin-bottom: calc(0.8rem * var(--tw-space-y-reverse));
1073
+ margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
1074
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
1096
1075
  }
1097
1076
  .overflow-hidden {
1098
1077
  overflow: hidden;
@@ -1108,11 +1087,17 @@ button {
1108
1087
  .whitespace-nowrap {
1109
1088
  white-space: nowrap;
1110
1089
  }
1090
+ .rounded-full {
1091
+ border-radius: 9999px;
1092
+ }
1111
1093
  .rounded-lg {
1112
- border-radius: 0.8rem;
1094
+ border-radius: 0.5rem;
1113
1095
  }
1114
1096
  .rounded-md {
1115
- border-radius: 0.6rem;
1097
+ border-radius: 0.375rem;
1098
+ }
1099
+ .rounded-xl {
1100
+ border-radius: 0.75rem;
1116
1101
  }
1117
1102
  .border {
1118
1103
  border-width: 1px;
@@ -1147,12 +1132,6 @@ button {
1147
1132
  .border-\[var\(--border-yellow-subtle\)\] {
1148
1133
  border-color: var(--border-yellow-subtle);
1149
1134
  }
1150
- .border-\[var\(--pd-border-primary\)\] {
1151
- border-color: var(--pd-border-primary);
1152
- }
1153
- .border-\[var\(--pd-border-red\)\] {
1154
- border-color: var(--pd-border-red);
1155
- }
1156
1135
  .bg-\[var\(--background-base\)\] {
1157
1136
  background-color: var(--background-base);
1158
1137
  }
@@ -1183,9 +1162,6 @@ button {
1183
1162
  .bg-\[var\(--content-primary\)\] {
1184
1163
  background-color: var(--content-primary);
1185
1164
  }
1186
- .bg-\[var\(--pd-background-base\)\] {
1187
- background-color: var(--pd-background-base);
1188
- }
1189
1165
  .bg-blue-400 {
1190
1166
  --tw-bg-opacity: 1;
1191
1167
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
@@ -1195,45 +1171,41 @@ button {
1195
1171
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
1196
1172
  }
1197
1173
  .p-12 {
1198
- padding: 1.2rem;
1174
+ padding: 3rem;
1199
1175
  }
1200
1176
  .p-2 {
1201
- padding: 0.2rem;
1177
+ padding: 0.5rem;
1202
1178
  }
1203
1179
  .p-4 {
1204
- padding: 0.4rem;
1180
+ padding: 1rem;
1205
1181
  }
1206
1182
  .p-5 {
1207
- padding: 0.5rem;
1183
+ padding: 1.25rem;
1208
1184
  }
1209
1185
  .p-6 {
1210
- padding: 0.6rem;
1186
+ padding: 1.5rem;
1211
1187
  }
1212
1188
  .p-8 {
1213
- padding: 0.8rem;
1189
+ padding: 2rem;
1214
1190
  }
1215
1191
  .px-1 {
1216
- padding-left: 0.1rem;
1217
- padding-right: 0.1rem;
1218
- }
1219
- .px-12 {
1220
- padding-left: 1.2rem;
1221
- padding-right: 1.2rem;
1222
- }
1223
- .px-16 {
1224
- padding-left: 1.6rem;
1225
- padding-right: 1.6rem;
1192
+ padding-left: 0.25rem;
1193
+ padding-right: 0.25rem;
1226
1194
  }
1227
1195
  .px-3 {
1228
- padding-left: 0.3rem;
1229
- padding-right: 0.3rem;
1196
+ padding-left: 0.75rem;
1197
+ padding-right: 0.75rem;
1230
1198
  }
1231
- .px-32 {
1232
- padding-left: 3.2rem;
1233
- padding-right: 3.2rem;
1199
+ .px-4 {
1200
+ padding-left: 1rem;
1201
+ padding-right: 1rem;
1202
+ }
1203
+ .px-6 {
1204
+ padding-left: 1.5rem;
1205
+ padding-right: 1.5rem;
1234
1206
  }
1235
1207
  .pt-2 {
1236
- padding-top: 0.2rem;
1208
+ padding-top: 0.5rem;
1237
1209
  }
1238
1210
  .text-center {
1239
1211
  text-align: center;
@@ -1250,13 +1222,16 @@ button {
1250
1222
  monospace;
1251
1223
  }
1252
1224
  .text-2xl {
1253
- font-size: 18px;
1225
+ font-size: 1.5rem;
1226
+ line-height: 2rem;
1254
1227
  }
1255
1228
  .text-3xl {
1256
- font-size: 22px;
1229
+ font-size: 1.875rem;
1230
+ line-height: 2.25rem;
1257
1231
  }
1258
1232
  .text-4xl {
1259
- font-size: 32px;
1233
+ font-size: 2.25rem;
1234
+ line-height: 2.5rem;
1260
1235
  }
1261
1236
  .text-\[10px\] {
1262
1237
  font-size: 10px;
@@ -1265,16 +1240,24 @@ button {
1265
1240
  font-size: 8px;
1266
1241
  }
1267
1242
  .text-base {
1268
- font-size: 13px;
1243
+ font-size: 1rem;
1244
+ line-height: 1.5rem;
1245
+ }
1246
+ .text-lg {
1247
+ font-size: 1.125rem;
1248
+ line-height: 1.75rem;
1269
1249
  }
1270
1250
  .text-sm {
1271
- font-size: 12px;
1251
+ font-size: 0.875rem;
1252
+ line-height: 1.25rem;
1272
1253
  }
1273
1254
  .text-xl {
1274
- font-size: 14px;
1255
+ font-size: 1.25rem;
1256
+ line-height: 1.75rem;
1275
1257
  }
1276
1258
  .text-xs {
1277
- font-size: 11px;
1259
+ font-size: 0.75rem;
1260
+ line-height: 1rem;
1278
1261
  }
1279
1262
  .font-bold {
1280
1263
  font-weight: 700;
@@ -1318,12 +1301,6 @@ button {
1318
1301
  .text-\[var\(--content-yellow\)\] {
1319
1302
  color: var(--content-yellow);
1320
1303
  }
1321
- .text-\[var\(--pd-content-primary\)\] {
1322
- color: var(--pd-content-primary);
1323
- }
1324
- .text-\[var\(--pd-content-red\)\] {
1325
- color: var(--pd-content-red);
1326
- }
1327
1304
  .text-gray-500 {
1328
1305
  --tw-text-opacity: 1;
1329
1306
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -1408,24 +1385,6 @@ button {
1408
1385
  background-color 0.15s ease-in-out,
1409
1386
  border-color 0.15s ease-in-out;
1410
1387
  }
1411
- .file\:border-0::file-selector-button {
1412
- border-width: 0px;
1413
- }
1414
- .file\:bg-transparent::file-selector-button {
1415
- background-color: transparent;
1416
- }
1417
- .file\:text-sm::file-selector-button {
1418
- font-size: 12px;
1419
- }
1420
- .file\:font-medium::file-selector-button {
1421
- font-weight: 500;
1422
- }
1423
- .placeholder\:text-\[var\(--pd-content-subtle\)\]::-moz-placeholder {
1424
- color: var(--pd-content-subtle);
1425
- }
1426
- .placeholder\:text-\[var\(--pd-content-subtle\)\]::placeholder {
1427
- color: var(--pd-content-subtle);
1428
- }
1429
1388
  .hover\:border-\[var\(--border-green-on-hover\)\]:hover {
1430
1389
  border-color: var(--border-green-on-hover);
1431
1390
  }
@@ -1496,12 +1455,6 @@ button {
1496
1455
  var(--tw-ring-shadow, 0 0 #0000),
1497
1456
  var(--tw-shadow);
1498
1457
  }
1499
- .focus-visible\:border-\[var\(--pd-border-blueOnHover\)\]:focus-visible {
1500
- border-color: var(--pd-border-blueOnHover);
1501
- }
1502
- .focus-visible\:border-\[var\(--pd-border-redOnHover\)\]:focus-visible {
1503
- border-color: var(--pd-border-redOnHover);
1504
- }
1505
1458
  .focus-visible\:outline-none:focus-visible {
1506
1459
  outline: 2px solid transparent;
1507
1460
  outline-offset: 2px;
@@ -1517,12 +1470,6 @@ button {
1517
1470
  .focus-visible\:ring-\[var\(--border-blue\)\]:focus-visible {
1518
1471
  --tw-ring-color: var(--border-blue);
1519
1472
  }
1520
- .focus-visible\:ring-\[var\(--pd-border-blue\)\]:focus-visible {
1521
- --tw-ring-color: var(--pd-border-blue);
1522
- }
1523
- .focus-visible\:ring-\[var\(--pd-border-red\)\]:focus-visible {
1524
- --tw-ring-color: var(--pd-border-red);
1525
- }
1526
1473
  .focus-visible\:ring-offset-2:focus-visible {
1527
1474
  --tw-ring-offset-width: 2px;
1528
1475
  }
@@ -1547,9 +1494,6 @@ button {
1547
1494
  .disabled\:pointer-events-none:disabled {
1548
1495
  pointer-events: none;
1549
1496
  }
1550
- .disabled\:cursor-not-allowed:disabled {
1551
- cursor: not-allowed;
1552
- }
1553
1497
  .disabled\:border-\[var\(--border-subtle\)\]:disabled {
1554
1498
  border-color: var(--border-subtle);
1555
1499
  }
@@ -1565,9 +1509,6 @@ button {
1565
1509
  .disabled\:text-\[var\(--content-subtle\)\]:disabled {
1566
1510
  color: var(--content-subtle);
1567
1511
  }
1568
- .disabled\:text-\[var\(--pd-content-subtle\)\]:disabled {
1569
- color: var(--pd-content-subtle);
1570
- }
1571
1512
  .disabled\:opacity-50:disabled {
1572
1513
  opacity: 0.5;
1573
1514
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abhir9/pd-design-system",
3
- "version": "0.1.13",
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": "postcss src/styles.css -o dist/index.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",