@nswds/app 1.96.0 → 1.97.0

package/dist/globals.css

@@ -11,30 +11,22 @@
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-lime-500: oklch(76.8% 0.233 130.85);
-    --color-green-50: oklch(98.2% 0.018 155.826);
-    --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
     --color-cyan-500: oklch(71.5% 0.143 215.221);
-    --color-blue-50: oklch(97% 0.014 254.604);
-    --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-blue-900: oklch(37.9% 0.146 265.522);
-    --color-blue-950: oklch(28.2% 0.091 267.935);
     --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-purple-50: oklch(97.7% 0.014 308.299);
-    --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-500: oklch(62.7% 0.265 303.9);
-    --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-fuchsia-500: oklch(66.7% 0.295 322.15);
     --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -61,12 +53,16 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -1374,9 +1370,6 @@
   .h-\[3px\] {
     height: 3px;
   }
-  .h-\[44px\] {
-    height: 44px;
-  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -1452,9 +1445,6 @@
   .min-h-32 {
     min-height: calc(var(--spacing) * 32);
   }
-  .min-h-\[200px\] {
-    min-height: 200px;
-  }
   .min-h-dvh {
     min-height: 100dvh;
   }
@@ -1506,6 +1496,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -1560,9 +1553,6 @@
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
-  .w-\[44px\] {
-    width: 44px;
-  }
   .w-\[50vw\] {
     width: 50vw;
   }
@@ -1590,9 +1580,6 @@
   .w-\[260px\] {
     width: 260px;
   }
-  .w-\[400px\] {
-    width: 400px;
-  }
   .w-\[600px\] {
     width: 600px;
   }
@@ -1629,6 +1616,12 @@
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
@@ -1668,6 +1661,12 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-\(--cell-size\) {
     min-width: var(--cell-size);
   }
@@ -1695,6 +1694,12 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[52rem\] {
+    min-width: 52rem;
+  }
+  .min-w-\[66rem\] {
+    min-width: 66rem;
+  }
   .min-w-\[240px\] {
     min-width: 240px;
   }
@@ -1932,6 +1937,15 @@
   .grid-cols-\[1fr_auto\] {
     grid-template-columns: 1fr auto;
   }
+  .grid-cols-\[9rem_repeat\(4\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: 9rem repeat(4,minmax(0,1fr));
+  }
+  .grid-cols-\[9rem_repeat\(5\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: 9rem repeat(5,minmax(0,1fr));
+  }
+  .grid-cols-\[9rem_repeat\(6\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: 9rem repeat(6,minmax(0,1fr));
+  }
   .grid-rows-\[auto_auto\] {
     grid-template-rows: auto auto;
   }
@@ -2013,9 +2027,6 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
   .gap-9 {
     gap: calc(var(--spacing) * 9);
   }
@@ -2137,13 +2148,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-6 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -2410,12 +2414,6 @@
   .border-accent-600 {
     border-color: var(--color-accent-600);
   }
-  .border-blue-200 {
-    border-color: var(--color-blue-200);
-  }
-  .border-blue-500 {
-    border-color: var(--color-blue-500);
-  }
   .border-border {
     border-color: var(--border);
   }
@@ -2434,9 +2432,6 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
   .border-grey-100 {
     border-color: var(--color-grey-100);
   }
@@ -2452,6 +2447,15 @@
   .border-grey-600 {
     border-color: var(--color-grey-600);
   }
+  .border-grey-700 {
+    border-color: var(--color-grey-700);
+  }
+  .border-grey-700\/80 {
+    border-color: var(--color-grey-700);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-grey-700) 80%, transparent);
+    }
+  }
   .border-grey-900 {
     border-color: var(--color-grey-900);
   }
@@ -2485,6 +2489,12 @@
   .border-primary-500 {
     border-color: var(--color-primary-500);
   }
+  .border-primary-500\/70 {
+    border-color: var(--color-primary-500);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary-500) 70%, transparent);
+    }
+  }
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
@@ -2500,6 +2510,12 @@
   .border-red-400 {
     border-color: var(--color-red-400);
   }
+  .border-red-400\/80 {
+    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
+  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
@@ -2578,9 +2594,6 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
-  .bg-blue-50 {
-    background-color: var(--color-blue-50);
-  }
   .bg-blue-200 {
     background-color: var(--color-blue-200);
   }
@@ -2614,12 +2627,6 @@
       background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
     }
   }
-  .bg-destructive\/15 {
-    background-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
-    }
-  }
   .bg-emerald-500 {
     background-color: var(--color-emerald-500);
   }
@@ -2635,15 +2642,9 @@
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
-  .bg-gray-800 {
-    background-color: var(--color-gray-800);
-  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
   .bg-grey-50 {
     background-color: var(--color-grey-50);
   }
@@ -2668,6 +2669,15 @@
   .bg-grey-800 {
     background-color: var(--color-grey-800);
   }
+  .bg-grey-900 {
+    background-color: var(--color-grey-900);
+  }
+  .bg-grey-900\/60 {
+    background-color: var(--color-grey-900);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-grey-900) 60%, transparent);
+    }
+  }
   .bg-lime-500 {
     background-color: var(--color-lime-500);
   }
@@ -2731,9 +2741,6 @@
       background-color: color-mix(in oklab, var(--primary) 20%, transparent);
     }
   }
-  .bg-purple-50 {
-    background-color: var(--color-purple-50);
-  }
   .bg-secondary {
     background-color: var(--secondary);
   }
@@ -2962,9 +2969,6 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
-  .p-12 {
-    padding: calc(var(--spacing) * 12);
-  }
   .p-\[3px\] {
     padding: 3px;
   }
@@ -3211,8 +3215,8 @@
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
   }
   .pl-\[calc\(--spacing\(4\.5\)-1px\)\] {
     padding-left: calc(calc(var(--spacing) * 4.5) - 1px);
@@ -3519,12 +3523,6 @@
   .text-blue-500 {
     color: var(--color-blue-500);
   }
-  .text-blue-600 {
-    color: var(--color-blue-600);
-  }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -3534,6 +3532,9 @@
   .text-cyan-500 {
     color: var(--color-cyan-500);
   }
+  .text-danger-600 {
+    color: var(--danger-600);
+  }
   .text-destructive {
     color: var(--destructive);
   }
@@ -3564,12 +3565,18 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
-  .text-green-500 {
-    color: var(--color-green-500);
-  }
   .text-green-600 {
     color: var(--color-green-600);
   }
+  .text-grey-50 {
+    color: var(--color-grey-50);
+  }
+  .text-grey-100 {
+    color: var(--color-grey-100);
+  }
+  .text-grey-200 {
+    color: var(--color-grey-200);
+  }
   .text-grey-300 {
     color: var(--color-grey-300);
   }
@@ -3633,18 +3640,12 @@
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
-  .text-purple-500 {
-    color: var(--color-purple-500);
-  }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-secondary {
-    color: var(--secondary);
-  }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
@@ -3675,6 +3676,9 @@
   .text-violet-500 {
     color: var(--color-violet-500);
   }
+  .text-warning-600 {
+    color: var(--warning-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -5794,13 +5798,6 @@
       }
     }
   }
-  .hover\:bg-blue-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-100);
-      }
-    }
-  }
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
@@ -5825,13 +5822,6 @@
       }
     }
   }
-  .hover\:bg-green-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-100);
-      }
-    }
-  }
   .hover\:bg-grey-100 {
     &:hover {
       @media (hover: hover) {
@@ -5866,16 +5856,6 @@
       }
     }
   }
-  .hover\:bg-primary-800\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-primary-800);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary-800) 90%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -5886,13 +5866,6 @@
       }
     }
   }
-  .hover\:bg-purple-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-purple-100);
-      }
-    }
-  }
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
@@ -5933,13 +5906,6 @@
       }
     }
   }
-  .hover\:text-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-blue-600);
-      }
-    }
-  }
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
@@ -5954,13 +5920,6 @@
       }
     }
   }
-  .hover\:text-green-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-green-600);
-      }
-    }
-  }
   .hover\:text-grey-600 {
     &:hover {
       @media (hover: hover) {
@@ -5996,13 +5955,6 @@
       }
     }
   }
-  .hover\:text-primary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--primary);
-      }
-    }
-  }
   .hover\:text-primary-700 {
     &:hover {
       @media (hover: hover) {
@@ -6024,13 +5976,6 @@
       }
     }
   }
-  .hover\:text-purple-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-purple-600);
-      }
-    }
-  }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -7736,11 +7681,6 @@
       background-color: var(--background);
     }
   }
-  .data-\[state\=active\]\:bg-blue-500 {
-    &[data-state="active"] {
-      background-color: var(--color-blue-500);
-    }
-  }
   .data-\[state\=active\]\:bg-white {
     &[data-state="active"] {
       background-color: var(--color-white);
@@ -7756,11 +7696,6 @@
       color: var(--color-grey-900);
     }
   }
-  .data-\[state\=active\]\:text-white {
-    &[data-state="active"] {
-      color: var(--color-white);
-    }
-  }
   .data-\[state\=active\]\:shadow-sm {
     &[data-state="active"] {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -7926,16 +7861,6 @@
       }
     }
   }
-  .data-\[state\=on\]\:bg-blue-500 {
-    &[data-state="on"] {
-      background-color: var(--color-blue-500);
-    }
-  }
-  .data-\[state\=on\]\:bg-green-500 {
-    &[data-state="on"] {
-      background-color: var(--color-green-500);
-    }
-  }
   .data-\[state\=on\]\:bg-grey-100 {
     &[data-state="on"] {
       background-color: var(--color-grey-100);
@@ -7949,21 +7874,11 @@
       }
     }
   }
-  .data-\[state\=on\]\:bg-purple-500 {
-    &[data-state="on"] {
-      background-color: var(--color-purple-500);
-    }
-  }
   .data-\[state\=on\]\:text-grey-850 {
     &[data-state="on"] {
       color: var(--color-grey-850);
     }
   }
-  .data-\[state\=on\]\:text-white {
-    &[data-state="on"] {
-      color: var(--color-white);
-    }
-  }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--accent);
@@ -8445,6 +8360,11 @@
       border-bottom-width: 1px;
     }
   }
+  .motion-reduce\:animate-none {
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
   .motion-reduce\:transition-none {
     @media (prefers-reduced-motion: reduce) {
       transition-property: none;
@@ -8975,6 +8895,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .md\:grid-cols-5 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -9167,6 +9092,11 @@
       flex: none;
     }
   }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -9177,11 +9107,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .lg\:grid-cols-5 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
   .lg\:grid-cols-6 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -9192,6 +9117,16 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
   }
+  .lg\:grid-cols-\[18rem_1fr\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 18rem 1fr;
+    }
+  }
+  .lg\:grid-cols-\[20rem_1fr\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 20rem 1fr;
+    }
+  }
   .lg\:flex-wrap {
     @media (width >= 64rem) {
       flex-wrap: wrap;
@@ -9222,15 +9157,6 @@
       column-gap: calc(var(--spacing) * 8);
     }
   }
-  .lg\:space-x-6 {
-    @media (width >= 64rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
   .lg\:space-x-8 {
     @media (width >= 64rem) {
       :where(& > :not(:last-child)) {
@@ -9628,11 +9554,6 @@
       background-color: var(--color-blue-900);
     }
   }
-  .dark\:bg-blue-950 {
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-blue-950);
-    }
-  }
   .dark\:bg-danger-500 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--danger-500);
@@ -10262,9 +10183,9 @@
       --btn-bg: var(--color-grey-600);
     }
   }
-  .dark\:\[--btn-bg\:var\(--color-primary-400\)\] {
+  .dark\:\[--btn-bg\:var\(--color-primary-200\)\] {
     &:where([data-theme=dark], [data-theme=dark] *) {
-      --btn-bg: var(--color-primary-400);
+      --btn-bg: var(--color-primary-200);
     }
   }
   .dark\:\[--btn-bg\:var\(--color-primary-500\)\] {
@@ -10293,11 +10214,11 @@
       }
     }
   }
-  .dark\:\[--btn-border\:var\(--color-primary-400\)\]\/90 {
+  .dark\:\[--btn-border\:var\(--color-primary-200\)\]\/90 {
     &:where([data-theme=dark], [data-theme=dark] *) {
-      --btn-border: var(--color-primary-400);
+      --btn-border: var(--color-primary-200);
       @supports (color: color-mix(in lab, red, red)) {
-        --btn-border: color-mix(in oklab, var(--color-primary-400) 90%, transparent);
+        --btn-border: color-mix(in oklab, var(--color-primary-200) 90%, transparent);
       }
     }
   }
@@ -10370,6 +10291,11 @@
       --btn-text: var(--color-grey-800);
     }
   }
+  .dark\:\[--btn-text\:var\(--color-primary-800\)\] {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      --btn-text: var(--color-primary-800);
+    }
+  }
   .dark\:\[--btn-text\:white\] {
     &:where([data-theme=dark], [data-theme=dark] *) {
       --btn-text: white;

package/dist/index.cjs

@@ -4453,7 +4453,7 @@ var styles = {
       // States
       "[--btn-hover-overlay:var(--color-primary-200)]/10 data-[variant=solid]:[--btn-hover-overlay:var(--color-primary-800)]/10",
       // Dark mode
-      "dark:[--btn-bg:var(--color-primary-400)] dark:[--btn-border:var(--color-primary-400)]/90 dark:[--btn-text:white]",
+      "dark:[--btn-bg:var(--color-primary-200)] dark:[--btn-border:var(--color-primary-200)]/90 dark:[--btn-text:var(--color-primary-800)]",
       // Dark mode states
       "dark:[--btn-hover-overlay:var(--color-primary-400)]/30 dark:data-[variant=solid]:[--btn-hover-overlay:var(--color-white)]/10"
     ],
@@ -17596,7 +17596,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.95.1"};
+  version: "1.96.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";