@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.
Files changed (3) hide show
  1. package/dist/index.css +31 -1268
  2. package/dist/styles.css +93 -115
  3. 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.1rem;
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.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
+ }
873
+ .ml-1\.5 {
874
+ margin-left: 0.375rem;
872
875
  }
873
876
  .ml-2 {
874
- margin-left: 0.2rem;
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.2rem;
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: 1rem;
910
+ height: 2.5rem;
899
911
  }
900
912
  .h-12 {
901
- height: 1.2rem;
913
+ height: 3rem;
902
914
  }
903
915
  .h-16 {
904
- height: 1.6rem;
916
+ height: 4rem;
905
917
  }
906
918
  .h-2 {
907
- height: 0.2rem;
919
+ height: 0.5rem;
908
920
  }
909
921
  .h-28 {
910
- height: 2.8rem;
922
+ height: 7rem;
911
923
  }
912
924
  .h-3 {
913
- height: 0.3rem;
925
+ height: 0.75rem;
914
926
  }
915
927
  .h-4 {
916
- height: 0.4rem;
928
+ height: 1rem;
917
929
  }
918
930
  .h-5 {
919
- height: 0.5rem;
931
+ height: 1.25rem;
920
932
  }
921
933
  .h-8 {
922
- height: 0.8rem;
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.2rem;
943
+ width: 0.5rem;
932
944
  }
933
945
  .w-20 {
934
- width: 2rem;
946
+ width: 5rem;
935
947
  }
936
948
  .w-24 {
937
- width: 2.4rem;
949
+ width: 6rem;
938
950
  }
939
951
  .w-3 {
940
- width: 0.3rem;
952
+ width: 0.75rem;
941
953
  }
942
954
  .w-4 {
943
- width: 0.4rem;
955
+ width: 1rem;
944
956
  }
945
957
  .w-5 {
946
- width: 0.5rem;
958
+ width: 1.25rem;
947
959
  }
948
960
  .w-full {
949
961
  width: 100%;
950
962
  }
951
963
  .min-w-0 {
952
- min-width: 0.0rem;
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.1rem;
1030
+ gap: 0.25rem;
1019
1031
  }
1020
1032
  .gap-2 {
1021
- gap: 0.2rem;
1033
+ gap: 0.5rem;
1022
1034
  }
1023
1035
  .gap-3 {
1024
- gap: 0.3rem;
1036
+ gap: 0.75rem;
1025
1037
  }
1026
1038
  .gap-4 {
1027
- gap: 0.4rem;
1039
+ gap: 1rem;
1028
1040
  }
1029
1041
  .gap-6 {
1030
- gap: 0.6rem;
1042
+ gap: 1.5rem;
1031
1043
  }
1032
1044
  .gap-8 {
1033
- gap: 0.8rem;
1045
+ gap: 2rem;
1034
1046
  }
1035
1047
  .gap-x-6 {
1036
- -moz-column-gap: 0.6rem;
1037
- column-gap: 0.6rem;
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(1rem * calc(1 - var(--tw-space-y-reverse)));
1042
- 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));
1043
1055
  }
1044
1056
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
1045
1057
  --tw-space-y-reverse: 0;
1046
- margin-top: calc(0.3rem * calc(1 - var(--tw-space-y-reverse)));
1047
- 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));
1048
1060
  }
1049
1061
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
1050
1062
  --tw-space-y-reverse: 0;
1051
- margin-top: calc(0.4rem * calc(1 - var(--tw-space-y-reverse)));
1052
- 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));
1053
1065
  }
1054
1066
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
1055
1067
  --tw-space-y-reverse: 0;
1056
- margin-top: calc(0.6rem * calc(1 - var(--tw-space-y-reverse)));
1057
- 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));
1058
1070
  }
1059
1071
  .space-y-8 > :not([hidden]) ~ :not([hidden]) {
1060
1072
  --tw-space-y-reverse: 0;
1061
- margin-top: calc(0.8rem * calc(1 - var(--tw-space-y-reverse)));
1062
- 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));
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.8rem;
1094
+ border-radius: 0.5rem;
1080
1095
  }
1081
1096
  .rounded-md {
1082
- border-radius: 0.6rem;
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: 1.2rem;
1174
+ padding: 3rem;
1166
1175
  }
1167
1176
  .p-2 {
1168
- padding: 0.2rem;
1177
+ padding: 0.5rem;
1169
1178
  }
1170
1179
  .p-4 {
1171
- padding: 0.4rem;
1180
+ padding: 1rem;
1172
1181
  }
1173
1182
  .p-5 {
1174
- padding: 0.5rem;
1183
+ padding: 1.25rem;
1175
1184
  }
1176
1185
  .p-6 {
1177
- padding: 0.6rem;
1186
+ padding: 1.5rem;
1178
1187
  }
1179
1188
  .p-8 {
1180
- padding: 0.8rem;
1189
+ padding: 2rem;
1181
1190
  }
1182
1191
  .px-1 {
1183
- padding-left: 0.1rem;
1184
- padding-right: 0.1rem;
1192
+ padding-left: 0.25rem;
1193
+ padding-right: 0.25rem;
1185
1194
  }
1186
1195
  .px-3 {
1187
- padding-left: 0.3rem;
1188
- padding-right: 0.3rem;
1196
+ padding-left: 0.75rem;
1197
+ padding-right: 0.75rem;
1189
1198
  }
1190
1199
  .px-4 {
1191
- padding-left: 0.4rem;
1192
- padding-right: 0.4rem;
1200
+ padding-left: 1rem;
1201
+ padding-right: 1rem;
1193
1202
  }
1194
1203
  .px-6 {
1195
- padding-left: 0.6rem;
1196
- padding-right: 0.6rem;
1204
+ padding-left: 1.5rem;
1205
+ padding-right: 1.5rem;
1197
1206
  }
1198
1207
  .pt-2 {
1199
- padding-top: 0.2rem;
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: 18px;
1225
+ font-size: 1.5rem;
1226
+ line-height: 2rem;
1217
1227
  }
1218
1228
  .text-3xl {
1219
- font-size: 22px;
1229
+ font-size: 1.875rem;
1230
+ line-height: 2.25rem;
1220
1231
  }
1221
1232
  .text-4xl {
1222
- font-size: 32px;
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: 13px;
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: 12px;
1251
+ font-size: 0.875rem;
1252
+ line-height: 1.25rem;
1235
1253
  }
1236
1254
  .text-xl {
1237
- font-size: 14px;
1255
+ font-size: 1.25rem;
1256
+ line-height: 1.75rem;
1238
1257
  }
1239
1258
  .text-xs {
1240
- font-size: 11px;
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.12",
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",