@nswds/app 1.97.15 → 1.98.0

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/globals.css CHANGED
@@ -80,6 +80,8 @@
80
80
  --text-3xl--line-height: calc(2.25 / 1.875);
81
81
  --text-4xl: 2.25rem;
82
82
  --text-4xl--line-height: calc(2.5 / 2.25);
83
+ --text-5xl: 3rem;
84
+ --text-5xl--line-height: 1;
83
85
  --text-6xl: 3.75rem;
84
86
  --text-6xl--line-height: 1;
85
87
  --font-weight-light: 300;
@@ -97,6 +99,7 @@
97
99
  --radius-md: 0.375rem;
98
100
  --radius-lg: 0.5rem;
99
101
  --radius-xl: 0.75rem;
102
+ --radius-2xl: 1rem;
100
103
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
101
104
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
102
105
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -111,6 +114,7 @@
111
114
  --default-mono-font-family: var(--font-mono);
112
115
  --color-nsw-blue-800: var(--nsw-blue-800);
113
116
  --color-nsw-red-600: var(--nsw-red-600);
117
+ --color-primary-50: var(--nsw-blue-50);
114
118
  --color-primary-200: var(--nsw-blue-200);
115
119
  --color-primary-250: var(--nsw-blue-250);
116
120
  --color-primary-400: var(--nsw-blue-400);
@@ -1273,10 +1277,18 @@
1273
1277
  width: calc(var(--spacing) * 9);
1274
1278
  height: calc(var(--spacing) * 9);
1275
1279
  }
1280
+ .size-11 {
1281
+ width: calc(var(--spacing) * 11);
1282
+ height: calc(var(--spacing) * 11);
1283
+ }
1276
1284
  .size-12 {
1277
1285
  width: calc(var(--spacing) * 12);
1278
1286
  height: calc(var(--spacing) * 12);
1279
1287
  }
1288
+ .size-14 {
1289
+ width: calc(var(--spacing) * 14);
1290
+ height: calc(var(--spacing) * 14);
1291
+ }
1280
1292
  .size-\[max\(100\%\,2\.75rem\)\] {
1281
1293
  width: max(100%, 2.75rem);
1282
1294
  height: max(100%, 2.75rem);
@@ -1445,6 +1457,9 @@
1445
1457
  .min-h-32 {
1446
1458
  min-height: calc(var(--spacing) * 32);
1447
1459
  }
1460
+ .min-h-\[22rem\] {
1461
+ min-height: 22rem;
1462
+ }
1448
1463
  .min-h-dvh {
1449
1464
  min-height: 100dvh;
1450
1465
  }
@@ -1928,6 +1943,9 @@
1928
1943
  .grid-cols-4 {
1929
1944
  grid-template-columns: repeat(4, minmax(0, 1fr));
1930
1945
  }
1946
+ .grid-cols-5 {
1947
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1948
+ }
1931
1949
  .grid-cols-\[--spacing\(5\)_1fr\] {
1932
1950
  grid-template-columns: calc(var(--spacing) * 5) 1fr;
1933
1951
  }
@@ -2027,6 +2045,9 @@
2027
2045
  .gap-6 {
2028
2046
  gap: calc(var(--spacing) * 6);
2029
2047
  }
2048
+ .gap-8 {
2049
+ gap: calc(var(--spacing) * 8);
2050
+ }
2030
2051
  .gap-9 {
2031
2052
  gap: calc(var(--spacing) * 9);
2032
2053
  }
@@ -2253,6 +2274,9 @@
2253
2274
  .rounded {
2254
2275
  border-radius: 0.25rem;
2255
2276
  }
2277
+ .rounded-2xl {
2278
+ border-radius: var(--radius-2xl);
2279
+ }
2256
2280
  .rounded-\[1px\] {
2257
2281
  border-radius: 1px;
2258
2282
  }
@@ -2456,6 +2480,9 @@
2456
2480
  border-color: color-mix(in oklab, var(--color-grey-700) 80%, transparent);
2457
2481
  }
2458
2482
  }
2483
+ .border-grey-800 {
2484
+ border-color: var(--color-grey-800);
2485
+ }
2459
2486
  .border-grey-900 {
2460
2487
  border-color: var(--color-grey-900);
2461
2488
  }
@@ -2528,6 +2555,15 @@
2528
2555
  .border-transparent {
2529
2556
  border-color: transparent;
2530
2557
  }
2558
+ .border-white {
2559
+ border-color: var(--color-white);
2560
+ }
2561
+ .border-white\/30 {
2562
+ border-color: color-mix(in srgb, #fff 30%, transparent);
2563
+ @supports (color: color-mix(in lab, red, red)) {
2564
+ border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
2565
+ }
2566
+ }
2531
2567
  .border-t-transparent {
2532
2568
  border-top-color: transparent;
2533
2569
  }
@@ -2609,6 +2645,9 @@
2609
2645
  .bg-cyan-500 {
2610
2646
  background-color: var(--color-cyan-500);
2611
2647
  }
2648
+ .bg-danger-50 {
2649
+ background-color: var(--danger-50);
2650
+ }
2612
2651
  .bg-danger-200 {
2613
2652
  background-color: var(--danger-200);
2614
2653
  }
@@ -2705,6 +2744,15 @@
2705
2744
  .bg-primary {
2706
2745
  background-color: var(--primary);
2707
2746
  }
2747
+ .bg-primary-50 {
2748
+ background-color: var(--color-primary-50);
2749
+ }
2750
+ .bg-primary-50\/70 {
2751
+ background-color: var(--color-primary-50);
2752
+ @supports (color: color-mix(in lab, red, red)) {
2753
+ background-color: color-mix(in oklab, var(--color-primary-50) 70%, transparent);
2754
+ }
2755
+ }
2708
2756
  .bg-primary-200 {
2709
2757
  background-color: var(--color-primary-200);
2710
2758
  }
@@ -2753,6 +2801,9 @@
2753
2801
  .bg-sidebar-primary {
2754
2802
  background-color: var(--sidebar-primary);
2755
2803
  }
2804
+ .bg-success-50 {
2805
+ background-color: var(--success-50);
2806
+ }
2756
2807
  .bg-success-200 {
2757
2808
  background-color: var(--success-200);
2758
2809
  }
@@ -3298,6 +3349,9 @@
3298
3349
  .text-\[0\.8rem\] {
3299
3350
  font-size: 0.8rem;
3300
3351
  }
3352
+ .text-\[0\.72rem\] {
3353
+ font-size: 0.72rem;
3354
+ }
3301
3355
  .text-\[14px\] {
3302
3356
  font-size: 14px;
3303
3357
  }
@@ -3443,6 +3497,14 @@
3443
3497
  --tw-font-weight: var(--font-weight-semibold);
3444
3498
  font-weight: var(--font-weight-semibold);
3445
3499
  }
3500
+ .tracking-\[0\.16em\] {
3501
+ --tw-tracking: 0.16em;
3502
+ letter-spacing: 0.16em;
3503
+ }
3504
+ .tracking-\[0\.22em\] {
3505
+ --tw-tracking: 0.22em;
3506
+ letter-spacing: 0.22em;
3507
+ }
3446
3508
  .tracking-\[calc\(var\(--heading-letter-spacing-1\)_\+_var\(--heading-letter-spacing\)\)\] {
3447
3509
  --tw-tracking: calc(var(--heading-letter-spacing-1) + var(--heading-letter-spacing));
3448
3510
  letter-spacing: calc(var(--heading-letter-spacing-1) + var(--heading-letter-spacing));
@@ -3535,6 +3597,9 @@
3535
3597
  .text-danger-600 {
3536
3598
  color: var(--danger-600);
3537
3599
  }
3600
+ .text-danger-800 {
3601
+ color: var(--danger-800);
3602
+ }
3538
3603
  .text-destructive {
3539
3604
  color: var(--destructive);
3540
3605
  }
@@ -3670,6 +3735,9 @@
3670
3735
  .text-success-450 {
3671
3736
  color: var(--success-450);
3672
3737
  }
3738
+ .text-success-800 {
3739
+ color: var(--success-800);
3740
+ }
3673
3741
  .text-transparent {
3674
3742
  color: transparent;
3675
3743
  }
@@ -3857,6 +3925,9 @@
3857
3925
  --tw-ring-color: color-mix(in oklab, var(--color-grey-950) 10%, transparent);
3858
3926
  }
3859
3927
  }
3928
+ .ring-primary-500 {
3929
+ --tw-ring-color: var(--color-primary-500);
3930
+ }
3860
3931
  .ring-ring {
3861
3932
  --tw-ring-color: var(--ring);
3862
3933
  }
@@ -3875,6 +3946,13 @@
3875
3946
  .ring-white {
3876
3947
  --tw-ring-color: var(--color-white);
3877
3948
  }
3949
+ .ring-offset-2 {
3950
+ --tw-ring-offset-width: 2px;
3951
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3952
+ }
3953
+ .ring-offset-background {
3954
+ --tw-ring-offset-color: var(--background);
3955
+ }
3878
3956
  .ring-offset-white {
3879
3957
  --tw-ring-offset-color: var(--color-white);
3880
3958
  }
@@ -5756,6 +5834,13 @@
5756
5834
  }
5757
5835
  }
5758
5836
  }
5837
+ .hover\:scale-\[1\.03\] {
5838
+ &:hover {
5839
+ @media (hover: hover) {
5840
+ scale: 1.03;
5841
+ }
5842
+ }
5843
+ }
5759
5844
  .hover\:cursor-pointer {
5760
5845
  &:hover {
5761
5846
  @media (hover: hover) {
@@ -5822,6 +5907,13 @@
5822
5907
  }
5823
5908
  }
5824
5909
  }
5910
+ .hover\:bg-grey-50 {
5911
+ &:hover {
5912
+ @media (hover: hover) {
5913
+ background-color: var(--color-grey-50);
5914
+ }
5915
+ }
5916
+ }
5825
5917
  .hover\:bg-grey-100 {
5826
5918
  &:hover {
5827
5919
  @media (hover: hover) {
@@ -8427,11 +8519,21 @@
8427
8519
  min-height: calc(var(--spacing) * 12);
8428
8520
  }
8429
8521
  }
8522
+ .sm\:min-h-\[26rem\] {
8523
+ @media (width >= 40rem) {
8524
+ min-height: 26rem;
8525
+ }
8526
+ }
8430
8527
  .sm\:w-8 {
8431
8528
  @media (width >= 40rem) {
8432
8529
  width: calc(var(--spacing) * 8);
8433
8530
  }
8434
8531
  }
8532
+ .sm\:w-fit {
8533
+ @media (width >= 40rem) {
8534
+ width: fit-content;
8535
+ }
8536
+ }
8435
8537
  .sm\:max-w-lg {
8436
8538
  @media (width >= 40rem) {
8437
8539
  max-width: var(--container-lg);
@@ -8462,6 +8564,11 @@
8462
8564
  grid-template-columns: repeat(4, minmax(0, 1fr));
8463
8565
  }
8464
8566
  }
8567
+ .sm\:grid-cols-7 {
8568
+ @media (width >= 40rem) {
8569
+ grid-template-columns: repeat(7, minmax(0, 1fr));
8570
+ }
8571
+ }
8465
8572
  .sm\:grid-cols-\[--spacing\(4\)_1fr\] {
8466
8573
  @media (width >= 40rem) {
8467
8574
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
@@ -8482,6 +8589,16 @@
8482
8589
  flex-direction: row;
8483
8590
  }
8484
8591
  }
8592
+ .sm\:items-center {
8593
+ @media (width >= 40rem) {
8594
+ align-items: center;
8595
+ }
8596
+ }
8597
+ .sm\:justify-between {
8598
+ @media (width >= 40rem) {
8599
+ justify-content: space-between;
8600
+ }
8601
+ }
8485
8602
  .sm\:justify-center {
8486
8603
  @media (width >= 40rem) {
8487
8604
  justify-content: center;
@@ -8551,6 +8668,11 @@
8551
8668
  }
8552
8669
  }
8553
8670
  }
8671
+ .sm\:p-8 {
8672
+ @media (width >= 40rem) {
8673
+ padding: calc(var(--spacing) * 8);
8674
+ }
8675
+ }
8554
8676
  .sm\:px-0 {
8555
8677
  @media (width >= 40rem) {
8556
8678
  padding-inline: calc(var(--spacing) * 0);
@@ -8641,6 +8763,11 @@
8641
8763
  padding-right: calc(var(--spacing) * 16);
8642
8764
  }
8643
8765
  }
8766
+ .sm\:pb-16 {
8767
+ @media (width >= 40rem) {
8768
+ padding-bottom: calc(var(--spacing) * 16);
8769
+ }
8770
+ }
8644
8771
  .sm\:pb-32 {
8645
8772
  @media (width >= 40rem) {
8646
8773
  padding-bottom: calc(var(--spacing) * 32);
@@ -8661,12 +8788,24 @@
8661
8788
  text-align: left;
8662
8789
  }
8663
8790
  }
8791
+ .sm\:text-5xl {
8792
+ @media (width >= 40rem) {
8793
+ font-size: var(--text-5xl);
8794
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
8795
+ }
8796
+ }
8664
8797
  .sm\:text-6xl {
8665
8798
  @media (width >= 40rem) {
8666
8799
  font-size: var(--text-6xl);
8667
8800
  line-height: var(--tw-leading, var(--text-6xl--line-height));
8668
8801
  }
8669
8802
  }
8803
+ .sm\:text-base\/7 {
8804
+ @media (width >= 40rem) {
8805
+ font-size: var(--text-base);
8806
+ line-height: calc(var(--spacing) * 7);
8807
+ }
8808
+ }
8670
8809
  .sm\:text-sm\/5 {
8671
8810
  @media (width >= 40rem) {
8672
8811
  font-size: var(--text-sm);
@@ -9112,6 +9251,11 @@
9112
9251
  grid-template-columns: repeat(6, minmax(0, 1fr));
9113
9252
  }
9114
9253
  }
9254
+ .lg\:grid-cols-10 {
9255
+ @media (width >= 64rem) {
9256
+ grid-template-columns: repeat(10, minmax(0, 1fr));
9257
+ }
9258
+ }
9115
9259
  .lg\:grid-cols-12 {
9116
9260
  @media (width >= 64rem) {
9117
9261
  grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -9317,6 +9461,26 @@
9317
9461
  flex: none;
9318
9462
  }
9319
9463
  }
9464
+ .xl\:grid-cols-5 {
9465
+ @media (width >= 80rem) {
9466
+ grid-template-columns: repeat(5, minmax(0, 1fr));
9467
+ }
9468
+ }
9469
+ .xl\:grid-cols-\[minmax\(0\,1\.3fr\)_minmax\(20rem\,0\.9fr\)\] {
9470
+ @media (width >= 80rem) {
9471
+ grid-template-columns: minmax(0,1.3fr) minmax(20rem,0.9fr);
9472
+ }
9473
+ }
9474
+ .xl\:grid-cols-\[minmax\(0\,1\.5fr\)_minmax\(17rem\,0\.68fr\)\] {
9475
+ @media (width >= 80rem) {
9476
+ grid-template-columns: minmax(0,1.5fr) minmax(17rem,0.68fr);
9477
+ }
9478
+ }
9479
+ .xl\:grid-cols-\[repeat\(19\,minmax\(0\,1fr\)\)\] {
9480
+ @media (width >= 80rem) {
9481
+ grid-template-columns: repeat(19,minmax(0,1fr));
9482
+ }
9483
+ }
9320
9484
  .xl\:overflow-y-auto {
9321
9485
  @media (width >= 80rem) {
9322
9486
  overflow-y: auto;
@@ -9430,6 +9594,11 @@
9430
9594
  }
9431
9595
  }
9432
9596
  }
9597
+ .dark\:border-grey-400 {
9598
+ &:where([data-theme=dark], [data-theme=dark] *) {
9599
+ border-color: var(--color-grey-400);
9600
+ }
9601
+ }
9433
9602
  .dark\:border-grey-600 {
9434
9603
  &:where([data-theme=dark], [data-theme=dark] *) {
9435
9604
  border-color: var(--color-grey-600);
@@ -9567,6 +9736,14 @@
9567
9736
  }
9568
9737
  }
9569
9738
  }
9739
+ .dark\:bg-danger-950\/30 {
9740
+ &:where([data-theme=dark], [data-theme=dark] *) {
9741
+ background-color: var(--danger-950);
9742
+ @supports (color: color-mix(in lab, red, red)) {
9743
+ background-color: color-mix(in oklab, var(--danger-950) 30%, transparent);
9744
+ }
9745
+ }
9746
+ }
9570
9747
  .dark\:bg-destructive\/60 {
9571
9748
  &:where([data-theme=dark], [data-theme=dark] *) {
9572
9749
  background-color: var(--destructive);
@@ -9636,6 +9813,14 @@
9636
9813
  background-color: var(--color-grey-900);
9637
9814
  }
9638
9815
  }
9816
+ .dark\:bg-grey-900\/60 {
9817
+ &:where([data-theme=dark], [data-theme=dark] *) {
9818
+ background-color: var(--color-grey-900);
9819
+ @supports (color: color-mix(in lab, red, red)) {
9820
+ background-color: color-mix(in oklab, var(--color-grey-900) 60%, transparent);
9821
+ }
9822
+ }
9823
+ }
9639
9824
  .dark\:bg-grey-950 {
9640
9825
  &:where([data-theme=dark], [data-theme=dark] *) {
9641
9826
  background-color: var(--color-grey-950);
@@ -9667,6 +9852,14 @@
9667
9852
  background-color: var(--color-primary-950);
9668
9853
  }
9669
9854
  }
9855
+ .dark\:bg-primary-950\/30 {
9856
+ &:where([data-theme=dark], [data-theme=dark] *) {
9857
+ background-color: var(--color-primary-950);
9858
+ @supports (color: color-mix(in lab, red, red)) {
9859
+ background-color: color-mix(in oklab, var(--color-primary-950) 30%, transparent);
9860
+ }
9861
+ }
9862
+ }
9670
9863
  .dark\:bg-slate-900\/95 {
9671
9864
  &:where([data-theme=dark], [data-theme=dark] *) {
9672
9865
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
@@ -9688,6 +9881,14 @@
9688
9881
  }
9689
9882
  }
9690
9883
  }
9884
+ .dark\:bg-success-950\/30 {
9885
+ &:where([data-theme=dark], [data-theme=dark] *) {
9886
+ background-color: var(--success-950);
9887
+ @supports (color: color-mix(in lab, red, red)) {
9888
+ background-color: color-mix(in oklab, var(--success-950) 30%, transparent);
9889
+ }
9890
+ }
9891
+ }
9691
9892
  .dark\:bg-transparent {
9692
9893
  &:where([data-theme=dark], [data-theme=dark] *) {
9693
9894
  background-color: transparent;
@@ -9850,6 +10051,11 @@
9850
10051
  }
9851
10052
  }
9852
10053
  }
10054
+ .dark\:text-danger-200 {
10055
+ &:where([data-theme=dark], [data-theme=dark] *) {
10056
+ color: var(--danger-200);
10057
+ }
10058
+ }
9853
10059
  .dark\:text-gray-50 {
9854
10060
  &:where([data-theme=dark], [data-theme=dark] *) {
9855
10061
  color: var(--color-gray-50);
@@ -9945,6 +10151,11 @@
9945
10151
  color: var(--color-slate-400);
9946
10152
  }
9947
10153
  }
10154
+ .dark\:text-success-200 {
10155
+ &:where([data-theme=dark], [data-theme=dark] *) {
10156
+ color: var(--success-200);
10157
+ }
10158
+ }
9948
10159
  .dark\:text-white {
9949
10160
  &:where([data-theme=dark], [data-theme=dark] *) {
9950
10161
  color: var(--color-white);
@@ -10637,6 +10848,15 @@
10637
10848
  }
10638
10849
  }
10639
10850
  }
10851
+ .dark\:hover\:border-grey-500 {
10852
+ &:where([data-theme=dark], [data-theme=dark] *) {
10853
+ &:hover {
10854
+ @media (hover: hover) {
10855
+ border-color: var(--color-grey-500);
10856
+ }
10857
+ }
10858
+ }
10859
+ }
10640
10860
  .dark\:hover\:border-white {
10641
10861
  &:where([data-theme=dark], [data-theme=dark] *) {
10642
10862
  &:hover {
@@ -10703,6 +10923,18 @@
10703
10923
  }
10704
10924
  }
10705
10925
  }
10926
+ .dark\:hover\:bg-grey-900\/70 {
10927
+ &:where([data-theme=dark], [data-theme=dark] *) {
10928
+ &:hover {
10929
+ @media (hover: hover) {
10930
+ background-color: var(--color-grey-900);
10931
+ @supports (color: color-mix(in lab, red, red)) {
10932
+ background-color: color-mix(in oklab, var(--color-grey-900) 70%, transparent);
10933
+ }
10934
+ }
10935
+ }
10936
+ }
10937
+ }
10706
10938
  .dark\:hover\:bg-input\/50 {
10707
10939
  &:where([data-theme=dark], [data-theme=dark] *) {
10708
10940
  &:hover {