@prisma/studio-core 0.3.2 → 0.3.3

package/dist/ui/index.css

@@ -411,10 +411,8 @@
   --blur-sm: 8px;
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
 }
 .ps *, .ps ::after, .ps ::before, .ps ::backdrop, .ps ::file-selector-button {
   box-sizing: border-box;
@@ -426,8 +424,7 @@
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
   font-feature-settings: var(--default-font-feature-settings, normal);
   font-variation-settings: var(--default-font-variation-settings, normal);
   -webkit-tap-highlight-color: transparent;
@@ -454,8 +451,7 @@
   font-weight: bolder;
 }
 .ps code, .ps kbd, .ps samp, .ps pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
   font-feature-settings: var(--default-mono-font-feature-settings, normal);
   font-variation-settings: var(--default-mono-font-variation-settings, normal);
   font-size: 1em;
@@ -596,46 +592,46 @@
   position: sticky;
 }
 .ps .-inset-0 {
-  inset: calc(0.25rem * -0);
+  inset: calc(var(--spacing) * -0);
 }
 .ps .inset-0 {
-  inset: calc(0.25rem * 0);
+  inset: calc(var(--spacing) * 0);
 }
 .ps .inset-x-0 {
-  inset-inline: calc(0.25rem * 0);
+  inset-inline: calc(var(--spacing) * 0);
 }
 .ps .inset-y-0 {
-  inset-block: calc(0.25rem * 0);
+  inset-block: calc(var(--spacing) * 0);
 }
 .ps .-top-px {
   top: -1px;
 }
 .ps .top-0 {
-  top: calc(0.25rem * 0);
+  top: calc(var(--spacing) * 0);
 }
 .ps .top-4 {
-  top: calc(0.25rem * 4);
+  top: calc(var(--spacing) * 4);
 }
 .ps .top-\[50\%\] {
   top: 50%;
 }
 .ps .right-0 {
-  right: calc(0.25rem * 0);
+  right: calc(var(--spacing) * 0);
 }
 .ps .right-2 {
-  right: calc(0.25rem * 2);
+  right: calc(var(--spacing) * 2);
 }
 .ps .right-4 {
-  right: calc(0.25rem * 4);
+  right: calc(var(--spacing) * 4);
 }
 .ps .bottom-0 {
-  bottom: calc(0.25rem * 0);
+  bottom: calc(var(--spacing) * 0);
 }
 .ps .left-0 {
-  left: calc(0.25rem * 0);
+  left: calc(var(--spacing) * 0);
 }
 .ps .left-2 {
-  left: calc(0.25rem * 2);
+  left: calc(var(--spacing) * 2);
 }
 .ps .left-\[50\%\] {
   left: 50%;
@@ -662,31 +658,31 @@
   z-index: 900;
 }
 .ps .-mx-1 {
-  margin-inline: calc(0.25rem * -1);
+  margin-inline: calc(var(--spacing) * -1);
 }
 .ps .mx-auto {
   margin-inline: auto;
 }
 .ps .my-1 {
-  margin-block: calc(0.25rem * 1);
+  margin-block: calc(var(--spacing) * 1);
 }
 .ps .mt-0 {
-  margin-top: calc(0.25rem * 0);
+  margin-top: calc(var(--spacing) * 0);
 }
 .ps .mt-1 {
-  margin-top: calc(0.25rem * 1);
+  margin-top: calc(var(--spacing) * 1);
 }
 .ps .mt-4 {
-  margin-top: calc(0.25rem * 4);
+  margin-top: calc(var(--spacing) * 4);
 }
 .ps .mb-1 {
-  margin-bottom: calc(0.25rem * 1);
+  margin-bottom: calc(var(--spacing) * 1);
 }
 .ps .ml-1 {
-  margin-left: calc(0.25rem * 1);
+  margin-left: calc(var(--spacing) * 1);
 }
 .ps .ml-6 {
-  margin-left: calc(0.25rem * 6);
+  margin-left: calc(var(--spacing) * 6);
 }
 .ps .ml-auto {
   margin-left: auto;
@@ -719,29 +715,29 @@
   display: table;
 }
 .ps .size-4 {
-  width: calc(0.25rem * 4);
-  height: calc(0.25rem * 4);
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
 }
 .ps .size-8 {
-  width: calc(0.25rem * 8);
-  height: calc(0.25rem * 8);
+  width: calc(var(--spacing) * 8);
+  height: calc(var(--spacing) * 8);
 }
 .ps .size-9 {
-  width: calc(0.25rem * 9);
-  height: calc(0.25rem * 9);
+  width: calc(var(--spacing) * 9);
+  height: calc(var(--spacing) * 9);
 }
 .ps .cell-input-leading {
-  height: 38px;
+  height: var(--studio-cell-height);
   padding-block: 11px;
-  font-size: 0.75rem;
-  line-height: var(--tw-leading, calc(1 / 0.75));
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
   --tw-leading: 1;
   line-height: 1;
 }
 @media (width >= 48rem) {
   .ps .cell-input-leading {
-    font-size: 0.75rem;
-    line-height: var(--tw-leading, calc(1 / 0.75));
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 }
 @media (width >= 48rem) {
@@ -754,40 +750,40 @@
   height: var(--radix-select-trigger-height);
 }
 .ps .h-\(--studio-cell-height\) {
-  height: 38px;
+  height: var(--studio-cell-height);
 }
 .ps .h-0 {
-  height: calc(0.25rem * 0);
+  height: calc(var(--spacing) * 0);
 }
 .ps .h-2 {
-  height: calc(0.25rem * 2);
+  height: calc(var(--spacing) * 2);
 }
 .ps .h-3 {
-  height: calc(0.25rem * 3);
+  height: calc(var(--spacing) * 3);
 }
 .ps .h-3\.5 {
-  height: calc(0.25rem * 3.5);
+  height: calc(var(--spacing) * 3.5);
 }
 .ps .h-4 {
-  height: calc(0.25rem * 4);
+  height: calc(var(--spacing) * 4);
 }
 .ps .h-5 {
-  height: calc(0.25rem * 5);
+  height: calc(var(--spacing) * 5);
 }
 .ps .h-6 {
-  height: calc(0.25rem * 6);
+  height: calc(var(--spacing) * 6);
 }
 .ps .h-8 {
-  height: calc(0.25rem * 8);
+  height: calc(var(--spacing) * 8);
 }
 .ps .h-9 {
-  height: calc(0.25rem * 9);
+  height: calc(var(--spacing) * 9);
 }
 .ps .h-10 {
-  height: calc(0.25rem * 10);
+  height: calc(var(--spacing) * 10);
 }
 .ps .h-24 {
-  height: calc(0.25rem * 24);
+  height: calc(var(--spacing) * 24);
 }
 .ps .h-\[1\.2rem\] {
   height: 1.2rem;
@@ -814,13 +810,13 @@
   max-height: var(--radix-select-content-available-height);
 }
 .ps .max-h-10 {
-  max-height: calc(0.25rem * 10);
+  max-height: calc(var(--spacing) * 10);
 }
 .ps .max-h-32 {
-  max-height: calc(0.25rem * 32);
+  max-height: calc(var(--spacing) * 32);
 }
 .ps .max-h-64 {
-  max-height: calc(0.25rem * 64);
+  max-height: calc(var(--spacing) * 64);
 }
 .ps .max-h-\[520px\] {
   max-height: 520px;
@@ -835,61 +831,61 @@
   min-height: 100%;
 }
 .ps .w-0 {
-  width: calc(0.25rem * 0);
+  width: calc(var(--spacing) * 0);
 }
 .ps .w-1\/3 {
   width: calc(1/3 * 100%);
 }
 .ps .w-2 {
-  width: calc(0.25rem * 2);
+  width: calc(var(--spacing) * 2);
 }
 .ps .w-2\/3 {
   width: calc(2/3 * 100%);
 }
 .ps .w-3\.5 {
-  width: calc(0.25rem * 3.5);
+  width: calc(var(--spacing) * 3.5);
 }
 .ps .w-3\/4 {
   width: calc(3/4 * 100%);
 }
 .ps .w-4 {
-  width: calc(0.25rem * 4);
+  width: calc(var(--spacing) * 4);
 }
 .ps .w-4\/5 {
   width: calc(4/5 * 100%);
 }
 .ps .w-5 {
-  width: calc(0.25rem * 5);
+  width: calc(var(--spacing) * 5);
 }
 .ps .w-6 {
-  width: calc(0.25rem * 6);
+  width: calc(var(--spacing) * 6);
 }
 .ps .w-8 {
-  width: calc(0.25rem * 8);
+  width: calc(var(--spacing) * 8);
 }
 .ps .w-9 {
-  width: calc(0.25rem * 9);
+  width: calc(var(--spacing) * 9);
 }
 .ps .w-14 {
-  width: calc(0.25rem * 14);
+  width: calc(var(--spacing) * 14);
 }
 .ps .w-16 {
-  width: calc(0.25rem * 16);
+  width: calc(var(--spacing) * 16);
 }
 .ps .w-20 {
-  width: calc(0.25rem * 20);
+  width: calc(var(--spacing) * 20);
 }
 .ps .w-24 {
-  width: calc(0.25rem * 24);
+  width: calc(var(--spacing) * 24);
 }
 .ps .w-28 {
-  width: calc(0.25rem * 28);
+  width: calc(var(--spacing) * 28);
 }
 .ps .w-48 {
-  width: calc(0.25rem * 48);
+  width: calc(var(--spacing) * 48);
 }
 .ps .w-72 {
-  width: calc(0.25rem * 72);
+  width: calc(var(--spacing) * 72);
 }
 .ps .w-\[1\.2rem\] {
   width: 1.2rem;
@@ -910,16 +906,16 @@
   width: 1px;
 }
 .ps .max-w-44 {
-  max-width: calc(0.25rem * 44);
+  max-width: calc(var(--spacing) * 44);
 }
 .ps .max-w-72 {
-  max-width: calc(0.25rem * 72);
+  max-width: calc(var(--spacing) * 72);
 }
 .ps .max-w-\[300px\] {
   max-width: 300px;
 }
 .ps .max-w-lg {
-  max-width: 32rem;
+  max-width: var(--container-lg);
 }
 .ps .min-w-\(--radix-popover-trigger-width\) {
   min-width: var(--radix-popover-trigger-width);
@@ -928,10 +924,10 @@
   min-width: var(--radix-select-trigger-width);
 }
 .ps .min-w-0 {
-  min-width: calc(0.25rem * 0);
+  min-width: calc(var(--spacing) * 0);
 }
 .ps .min-w-32 {
-  min-width: calc(0.25rem * 32);
+  min-width: calc(var(--spacing) * 32);
 }
 .ps .min-w-\[250px\] {
   min-width: 250px;
@@ -967,8 +963,8 @@
   border-collapse: separate;
 }
 .ps .border-spacing-0 {
-  --tw-border-spacing-x: calc(0.25rem * 0);
-  --tw-border-spacing-y: calc(0.25rem * 0);
+  --tw-border-spacing-x: calc(var(--spacing) * 0);
+  --tw-border-spacing-y: calc(var(--spacing) * 0);
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 .ps .origin-\(--radix-context-menu-content-transform-origin\) {
@@ -1022,10 +1018,10 @@
   animation: indeterminate 1.5s infinite ease-in-out;
 }
 .ps .animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: var(--animate-pulse);
 }
 .ps .animate-spin {
-  animation: spin 1s linear infinite;
+  animation: var(--animate-spin);
 }
 .ps .cursor-col-resize {
   cursor: col-resize;
@@ -1085,34 +1081,34 @@
   justify-content: flex-start;
 }
 .ps .gap-0 {
-  gap: calc(0.25rem * 0);
+  gap: calc(var(--spacing) * 0);
 }
 .ps .gap-1 {
-  gap: calc(0.25rem * 1);
+  gap: calc(var(--spacing) * 1);
 }
 .ps .gap-2 {
-  gap: calc(0.25rem * 2);
+  gap: calc(var(--spacing) * 2);
 }
 .ps .gap-4 {
-  gap: calc(0.25rem * 4);
+  gap: calc(var(--spacing) * 4);
 }
 .ps .gap-px {
   gap: 1px;
 }
 .ps :where(.space-y-1\.5 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(0.25rem * 1.5) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+  margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
 }
 .ps :where(.space-y-2 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(0.25rem * 2) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(0.25rem * 2) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
 }
 .ps :where(.space-y-3 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(0.25rem * 3) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(0.25rem * 3) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
 }
 .ps .self-end {
   align-self: flex-end;
@@ -1150,39 +1146,39 @@
   border-radius: calc(infinity * 1px);
 }
 .ps .rounded-lg {
-  border-radius: 0.5rem;
+  border-radius: var(--radius);
 }
 .ps .rounded-md {
-  border-radius: calc(0.5rem - 2px);
+  border-radius: calc(var(--radius) - 2px);
 }
 .ps .rounded-none {
   border-radius: 0;
 }
 .ps .rounded-sm {
-  border-radius: calc(0.5rem - 4px);
+  border-radius: calc(var(--radius) - 4px);
 }
 .ps .rounded-xl {
-  border-radius: calc(0.5rem + 4px);
+  border-radius: calc(var(--radius) + 4px);
 }
 .ps .rounded-s-md {
-  border-start-start-radius: calc(0.5rem - 2px);
-  border-end-start-radius: calc(0.5rem - 2px);
+  border-start-start-radius: calc(var(--radius) - 2px);
+  border-end-start-radius: calc(var(--radius) - 2px);
 }
 .ps .rounded-e-md {
-  border-start-end-radius: calc(0.5rem - 2px);
-  border-end-end-radius: calc(0.5rem - 2px);
+  border-start-end-radius: calc(var(--radius) - 2px);
+  border-end-end-radius: calc(var(--radius) - 2px);
 }
 .ps .rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .ps .rounded-r-full {
   border-top-right-radius: calc(infinity * 1px);
   border-bottom-right-radius: calc(infinity * 1px);
 }
 .ps .rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .ps .border {
   border-style: var(--tw-border-style);
@@ -1217,14 +1213,14 @@
   border-style: none;
 }
 .ps .border-border {
-  border-color: oklch(0.92 0.004 286.32);
+  border-color: var(--border);
 }
 .ps .border-green-500\/50 {
   border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-green-500\/50 {
-    border-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 50%, transparent);
+    border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
   }
 }
 .ps .border-green-500\/60 {
@@ -1232,32 +1228,32 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-green-500\/60 {
-    border-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 60%, transparent);
+    border-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);
   }
 }
 .ps .border-input {
-  border-color: oklch(0.92 0.004 286.32);
+  border-color: var(--input);
 }
 .ps .border-muted-foreground\/50 {
-  border-color: oklch(0.552 0.016 285.938);
+  border-color: var(--muted-foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-muted-foreground\/50 {
-    border-color: color-mix(in oklab, oklch(0.552 0.016 285.938) 50%, transparent);
+    border-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
   }
 }
 .ps .border-orange-400 {
-  border-color: oklch(75% 0.183 55.934);
+  border-color: var(--color-orange-400);
 }
 .ps .border-primary {
-  border-color: oklch(0.64 0.1423 268.56);
+  border-color: var(--primary);
 }
 .ps .border-red-400\/20 {
   border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 20%, transparent);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-red-400\/20 {
-    border-color: color-mix(in oklab, oklch(70.4% 0.191 22.216) 20%, transparent);
+    border-color: color-mix(in oklab, var(--color-red-400) 20%, transparent);
   }
 }
 .ps .border-red-400\/50 {
@@ -1265,7 +1261,7 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-red-400\/50 {
-    border-color: color-mix(in oklab, oklch(70.4% 0.191 22.216) 50%, transparent);
+    border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
   }
 }
 .ps .border-red-500\/60 {
@@ -1273,43 +1269,43 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-red-500\/60 {
-    border-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 60%, transparent);
+    border-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
   }
 }
 .ps .border-ring\/20 {
-  border-color: oklch(0.705 0.015 286.067);
+  border-color: var(--ring);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .border-ring\/20 {
-    border-color: color-mix(in oklab, oklch(0.705 0.015 286.067) 20%, transparent);
+    border-color: color-mix(in oklab, var(--ring) 20%, transparent);
   }
 }
 .ps .border-table-border {
-  border-color: oklch(0.92 0.004 286.32);
+  border-color: var(--border);
 }
 .ps .border-transparent {
   border-color: transparent;
 }
 .ps .bg-accent {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--accent);
 }
 .ps .bg-background {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .bg-background\/50 {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-background\/50 {
-    background-color: color-mix(in oklab, oklch(1 0 0) 50%, transparent);
+    background-color: color-mix(in oklab, var(--background) 50%, transparent);
   }
 }
 .ps .bg-background\/90 {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-background\/90 {
-    background-color: color-mix(in oklab, oklch(1 0 0) 90%, transparent);
+    background-color: color-mix(in oklab, var(--background) 90%, transparent);
   }
 }
 .ps .bg-black\/80 {
@@ -1317,24 +1313,24 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-black\/80 {
-    background-color: color-mix(in oklab, #000 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
   }
 }
 .ps .bg-border {
-  background-color: oklch(0.92 0.004 286.32);
+  background-color: var(--border);
 }
 .ps .bg-card {
-  background-color: oklch(1 0 0);
+  background-color: var(--card);
 }
 .ps .bg-destructive {
-  background-color: oklch(0.577 0.245 27.325);
+  background-color: var(--destructive);
 }
 .ps .bg-foreground\/10 {
-  background-color: oklch(0.141 0.005 285.823);
+  background-color: var(--foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-foreground\/10 {
-    background-color: color-mix(in oklab, oklch(0.141 0.005 285.823) 10%, transparent);
+    background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
   }
 }
 .ps .bg-green-500\/10 {
@@ -1342,7 +1338,7 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-green-500\/10 {
-    background-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 10%, transparent);
+    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
   }
 }
 .ps .bg-green-500\/30 {
@@ -1350,46 +1346,46 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-green-500\/30 {
-    background-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 30%, transparent);
+    background-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
   }
 }
 .ps .bg-muted {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--muted);
 }
 .ps .bg-muted\/50 {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--muted);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-muted\/50 {
-    background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 50%, transparent);
+    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
   }
 }
 .ps .bg-muted\/70 {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--muted);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-muted\/70 {
-    background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 70%, transparent);
+    background-color: color-mix(in oklab, var(--muted) 70%, transparent);
   }
 }
 .ps .bg-neutral-100 {
-  background-color: oklch(97% 0 0);
+  background-color: var(--color-neutral-100);
 }
 .ps .bg-orange-100 {
-  background-color: oklch(95.4% 0.038 75.164);
+  background-color: var(--color-orange-100);
 }
 .ps .bg-popover {
-  background-color: oklch(1 0 0);
+  background-color: var(--popover);
 }
 .ps .bg-primary {
-  background-color: oklch(0.64 0.1423 268.56);
+  background-color: var(--primary);
 }
 .ps .bg-red-400\/30 {
   background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-red-400\/30 {
-    background-color: color-mix(in oklab, oklch(70.4% 0.191 22.216) 30%, transparent);
+    background-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
   }
 }
 .ps .bg-red-500\/10 {
@@ -1397,33 +1393,33 @@
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-red-500\/10 {
-    background-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 10%, transparent);
+    background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
   }
 }
 .ps .bg-secondary {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 .ps .bg-secondary\/50 {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-secondary\/50 {
-    background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 50%, transparent);
+    background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
   }
 }
 .ps .bg-secondary\/70 {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .bg-secondary\/70 {
-    background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 70%, transparent);
+    background-color: color-mix(in oklab, var(--secondary) 70%, transparent);
   }
 }
 .ps .bg-table-border {
-  background-color: oklch(0.92 0.004 286.32);
+  background-color: var(--border);
 }
 .ps .bg-table-head {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .bg-transparent {
   background-color: transparent;
@@ -1432,64 +1428,64 @@
   fill: currentcolor;
 }
 .ps .p-\(--studio-cell-spacing\) {
-  padding: 0.5rem;
+  padding: var(--studio-cell-spacing);
 }
 .ps .p-0 {
-  padding: calc(0.25rem * 0);
+  padding: calc(var(--spacing) * 0);
 }
 .ps .p-0\.5 {
-  padding: calc(0.25rem * 0.5);
+  padding: calc(var(--spacing) * 0.5);
 }
 .ps .p-1 {
-  padding: calc(0.25rem * 1);
+  padding: calc(var(--spacing) * 1);
 }
 .ps .p-2 {
-  padding: calc(0.25rem * 2);
+  padding: calc(var(--spacing) * 2);
 }
 .ps .p-3 {
-  padding: calc(0.25rem * 3);
+  padding: calc(var(--spacing) * 3);
 }
 .ps .p-4 {
-  padding: calc(0.25rem * 4);
+  padding: calc(var(--spacing) * 4);
 }
 .ps .p-6 {
-  padding: calc(0.25rem * 6);
+  padding: calc(var(--spacing) * 6);
 }
 .ps .p-px {
   padding: 1px;
 }
 .ps .px-\(--studio-cell-spacing\) {
-  padding-inline: 0.5rem;
+  padding-inline: var(--studio-cell-spacing);
 }
 .ps .px-0 {
-  padding-inline: calc(0.25rem * 0);
+  padding-inline: calc(var(--spacing) * 0);
 }
 .ps .px-2 {
-  padding-inline: calc(0.25rem * 2);
+  padding-inline: calc(var(--spacing) * 2);
 }
 .ps .px-2\.5 {
-  padding-inline: calc(0.25rem * 2.5);
+  padding-inline: calc(var(--spacing) * 2.5);
 }
 .ps .px-3 {
-  padding-inline: calc(0.25rem * 3);
+  padding-inline: calc(var(--spacing) * 3);
 }
 .ps .px-4 {
-  padding-inline: calc(0.25rem * 4);
+  padding-inline: calc(var(--spacing) * 4);
 }
 .ps .px-8 {
-  padding-inline: calc(0.25rem * 8);
+  padding-inline: calc(var(--spacing) * 8);
 }
 .ps .cell-input-base {
   padding-block: 11px;
-  font-size: 0.75rem;
-  line-height: var(--tw-leading, calc(1 / 0.75));
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
   --tw-leading: 1;
   line-height: 1;
 }
 @media (width >= 48rem) {
   .ps .cell-input-base {
-    font-size: 0.75rem;
-    line-height: var(--tw-leading, calc(1 / 0.75));
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 }
 @media (width >= 48rem) {
@@ -1499,64 +1495,64 @@
   }
 }
 .ps .py-0 {
-  padding-block: calc(0.25rem * 0);
+  padding-block: calc(var(--spacing) * 0);
 }
 .ps .py-0\.5 {
-  padding-block: calc(0.25rem * 0.5);
+  padding-block: calc(var(--spacing) * 0.5);
 }
 .ps .py-1 {
-  padding-block: calc(0.25rem * 1);
+  padding-block: calc(var(--spacing) * 1);
 }
 .ps .py-1\.5 {
-  padding-block: calc(0.25rem * 1.5);
+  padding-block: calc(var(--spacing) * 1.5);
 }
 .ps .py-2 {
-  padding-block: calc(0.25rem * 2);
+  padding-block: calc(var(--spacing) * 2);
 }
 .ps .py-3 {
-  padding-block: calc(0.25rem * 3);
+  padding-block: calc(var(--spacing) * 3);
 }
 .ps .py-8 {
-  padding-block: calc(0.25rem * 8);
+  padding-block: calc(var(--spacing) * 8);
 }
 .ps .pt-0 {
-  padding-top: calc(0.25rem * 0);
+  padding-top: calc(var(--spacing) * 0);
 }
 .ps .pt-3 {
-  padding-top: calc(0.25rem * 3);
+  padding-top: calc(var(--spacing) * 3);
 }
 .ps .pt-4 {
-  padding-top: calc(0.25rem * 4);
+  padding-top: calc(var(--spacing) * 4);
 }
 .ps .pr-\(--studio-cell-spacing\) {
-  padding-right: 0.5rem;
+  padding-right: var(--studio-cell-spacing);
 }
 .ps .pr-2 {
-  padding-right: calc(0.25rem * 2);
+  padding-right: calc(var(--spacing) * 2);
 }
 .ps .pr-2\.5 {
-  padding-right: calc(0.25rem * 2.5);
+  padding-right: calc(var(--spacing) * 2.5);
 }
 .ps .pr-8 {
-  padding-right: calc(0.25rem * 8);
+  padding-right: calc(var(--spacing) * 8);
 }
 .ps .pb-0\.5 {
-  padding-bottom: calc(0.25rem * 0.5);
+  padding-bottom: calc(var(--spacing) * 0.5);
 }
 .ps .pb-2 {
-  padding-bottom: calc(0.25rem * 2);
+  padding-bottom: calc(var(--spacing) * 2);
 }
 .ps .pb-3 {
-  padding-bottom: calc(0.25rem * 3);
+  padding-bottom: calc(var(--spacing) * 3);
 }
 .ps .pl-2 {
-  padding-left: calc(0.25rem * 2);
+  padding-left: calc(var(--spacing) * 2);
 }
 .ps .pl-2\.5 {
-  padding-left: calc(0.25rem * 2.5);
+  padding-left: calc(var(--spacing) * 2.5);
 }
 .ps .pl-8 {
-  padding-left: calc(0.25rem * 8);
+  padding-left: calc(var(--spacing) * 8);
 }
 .ps .text-center {
   text-align: center;
@@ -1571,55 +1567,53 @@
   vertical-align: middle;
 }
 .ps .font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+  font-family: var(--font-mono);
 }
 .ps .font-sans {
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-sans);
 }
 .ps .text-lg {
-  font-size: 1.125rem;
-  line-height: var(--tw-leading, calc(1.75 / 1.125));
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
 }
 .ps .text-sm {
-  font-size: 0.875rem;
-  line-height: var(--tw-leading, calc(1.25 / 0.875));
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
 }
 .ps .text-xs {
-  font-size: 0.75rem;
-  line-height: var(--tw-leading, calc(1 / 0.75));
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
 }
 .ps .text-\[8px\] {
   font-size: 8px;
 }
 .ps .leading-\(--studio-cell-height\) {
-  --tw-leading: 38px;
-  line-height: 38px;
+  --tw-leading: var(--studio-cell-height);
+  line-height: var(--studio-cell-height);
 }
 .ps .leading-none {
   --tw-leading: 1;
   line-height: 1;
 }
 .ps .font-medium {
-  --tw-font-weight: 500;
-  font-weight: 500;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
 }
 .ps .font-normal {
-  --tw-font-weight: 400;
-  font-weight: 400;
+  --tw-font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-normal);
 }
 .ps .font-semibold {
-  --tw-font-weight: 600;
-  font-weight: 600;
+  --tw-font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-semibold);
 }
 .ps .tracking-tight {
-  --tw-tracking: -0.025em;
-  letter-spacing: -0.025em;
+  --tw-tracking: var(--tracking-tight);
+  letter-spacing: var(--tracking-tight);
 }
 .ps .tracking-widest {
-  --tw-tracking: 0.1em;
-  letter-spacing: 0.1em;
+  --tw-tracking: var(--tracking-widest);
+  letter-spacing: var(--tracking-widest);
 }
 .ps .text-ellipsis {
   text-overflow: ellipsis;
@@ -1631,84 +1625,84 @@
   white-space: pre-wrap;
 }
 .ps .text-blue-500 {
-  color: oklch(62.3% 0.214 259.815);
+  color: var(--color-blue-500);
 }
 .ps .text-card-foreground {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--card-foreground);
 }
 .ps .text-current {
   color: currentcolor;
 }
 .ps .text-foreground {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 .ps .text-foreground\! {
-  color: oklch(0.141 0.005 285.823) !important;
+  color: var(--foreground) !important;
 }
 .ps .text-foreground\/60 {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .text-foreground\/60 {
-    color: color-mix(in oklab, oklch(0.141 0.005 285.823) 60%, transparent);
+    color: color-mix(in oklab, var(--foreground) 60%, transparent);
   }
 }
 .ps .text-foreground\/90 {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .text-foreground\/90 {
-    color: color-mix(in oklab, oklch(0.141 0.005 285.823) 90%, transparent);
+    color: color-mix(in oklab, var(--foreground) 90%, transparent);
   }
 }
 .ps .text-gray-500 {
-  color: oklch(55.1% 0.027 264.364);
+  color: var(--color-gray-500);
 }
 .ps .text-green-500 {
-  color: oklch(72.3% 0.219 149.579);
+  color: var(--color-green-500);
 }
 .ps .text-muted-foreground {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .text-muted-foreground\/60 {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .text-muted-foreground\/60 {
-    color: color-mix(in oklab, oklch(0.552 0.016 285.938) 60%, transparent);
+    color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
   }
 }
 .ps .text-muted-foreground\/70 {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .text-muted-foreground\/70 {
-    color: color-mix(in oklab, oklch(0.552 0.016 285.938) 70%, transparent);
+    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
   }
 }
 .ps .text-neutral-600 {
-  color: oklch(43.9% 0 0);
+  color: var(--color-neutral-600);
 }
 .ps .text-orange-700 {
-  color: oklch(55.3% 0.195 38.402);
+  color: var(--color-orange-700);
 }
 .ps .text-popover-foreground {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--popover-foreground);
 }
 .ps .text-primary {
-  color: oklch(0.64 0.1423 268.56);
+  color: var(--primary);
 }
 .ps .text-primary-foreground {
-  color: oklch(0.985 0 0);
+  color: var(--primary-foreground);
 }
 .ps .text-red-400 {
-  color: oklch(70.4% 0.191 22.216);
+  color: var(--color-red-400);
 }
 .ps .text-red-500 {
-  color: oklch(63.7% 0.237 25.331);
+  color: var(--color-red-500);
 }
 .ps .text-secondary-foreground {
-  color: oklch(0.21 0.006 285.885);
+  color: var(--secondary-foreground);
 }
 .ps .lowercase {
   text-transform: lowercase;
@@ -1771,7 +1765,7 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .ps .ring-offset-background {
-  --tw-ring-offset-color: oklch(1 0 0);
+  --tw-ring-offset-color: var(--background);
 }
 .ps .outline {
   outline-style: var(--tw-outline-style);
@@ -1781,34 +1775,34 @@
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
 .ps .backdrop-blur-sm {
-  --tw-backdrop-blur: blur(8px);
+  --tw-backdrop-blur: blur(var(--blur-sm));
   -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
 }
 .ps .transition {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .ps .transition-all {
   transition-property: all;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .ps .transition-colors {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .ps .transition-opacity {
   transition-property: opacity;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .ps .transition-transform {
   transition-property: transform, translate, scale, rotate;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .ps .transition-none {
   transition-property: none;
@@ -1818,8 +1812,8 @@
   transition-duration: 200ms;
 }
 .ps .ease-in-out {
-  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --tw-ease: var(--ease-in-out);
+  transition-timing-function: var(--ease-in-out);
 }
 .ps .fade-in-0 {
   --tw-enter-opacity: calc(0/100);
@@ -1838,39 +1832,39 @@
   --tw-enter-scale: .95;
 }
 .ps .group-odd\:bg-table-cell-odd:is(:where(.group):nth-child(odd) *) {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .group-even\:bg-table-cell-even:is(:where(.group):nth-child(even) *) {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 @media (hover: hover) {
   .ps .group-hover\:bg-muted:is(:where(.group):hover *) {
-    background-color: oklch(0.967 0.001 286.375);
+    background-color: var(--muted);
   }
 }
 .ps .group-data-\[select\=true\]\:p-0:is(:where(.group)[data-select="true"] *) {
-  padding: calc(0.25rem * 0);
+  padding: calc(var(--spacing) * 0);
 }
 .ps .group-\[\.toast\]\:bg-muted:is(:where(.group):is(.toast) *) {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--muted);
 }
 .ps .group-\[\.toast\]\:bg-primary:is(:where(.group):is(.toast) *) {
-  background-color: oklch(0.64 0.1423 268.56);
+  background-color: var(--primary);
 }
 .ps .group-\[\.toast\]\:text-muted-foreground:is(:where(.group):is(.toast) *) {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .group-\[\.toast\]\:text-primary-foreground:is(:where(.group):is(.toast) *) {
-  color: oklch(0.985 0 0);
+  color: var(--primary-foreground);
 }
 .ps .group-\[\.toaster\]\:border-border:is(:where(.group):is(.toaster) *) {
-  border-color: oklch(0.92 0.004 286.32);
+  border-color: var(--border);
 }
 .ps .group-\[\.toaster\]\:bg-background:is(:where(.group):is(.toaster) *) {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .group-\[\.toaster\]\:text-foreground:is(:where(.group):is(.toaster) *) {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 .ps .group-\[\.toaster\]\:shadow-lg:is(:where(.group):is(.toaster) *) {
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1890,47 +1884,47 @@
   background-color: transparent;
 }
 .ps .file\:text-sm::file-selector-button {
-  font-size: 0.875rem;
-  line-height: var(--tw-leading, calc(1.25 / 0.875));
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
 }
 .ps .file\:font-medium::file-selector-button {
-  --tw-font-weight: 500;
-  font-weight: 500;
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
 }
 .ps .file\:text-foreground::file-selector-button {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 .ps .placeholder\:text-muted-foreground::placeholder {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .odd\:bg-table-cell-odd:nth-child(odd) {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .even\:bg-table-cell-even\/50:nth-child(even) {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .even\:bg-table-cell-even\/50:nth-child(even) {
-    background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 50%, transparent);
+    background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
   }
 }
 @media (hover: hover) {
   .ps .hover\:border-table-border:hover {
-    border-color: oklch(0.92 0.004 286.32);
+    border-color: var(--border);
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-accent:hover {
-    background-color: oklch(0.967 0.001 286.375);
+    background-color: var(--accent);
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-destructive\/90:hover {
-    background-color: oklch(0.577 0.245 27.325);
+    background-color: var(--destructive);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-destructive\/90:hover {
-      background-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 90%, transparent);
+      background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
     }
   }
 }
@@ -1940,37 +1934,37 @@
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-green-500\/80:hover {
-      background-color: color-mix(in oklab, oklch(72.3% 0.219 149.579) 80%, transparent);
+      background-color: color-mix(in oklab, var(--color-green-500) 80%, transparent);
     }
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-muted\/50:hover {
-    background-color: oklch(0.967 0.001 286.375);
+    background-color: var(--muted);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-muted\/50:hover {
-      background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 50%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
     }
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-primary\/80:hover {
-    background-color: oklch(0.64 0.1423 268.56);
+    background-color: var(--primary);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-primary\/80:hover {
-      background-color: color-mix(in oklab, oklch(0.64 0.1423 268.56) 80%, transparent);
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
     }
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-primary\/90:hover {
-    background-color: oklch(0.64 0.1423 268.56);
+    background-color: var(--primary);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-primary\/90:hover {
-      background-color: color-mix(in oklab, oklch(0.64 0.1423 268.56) 90%, transparent);
+      background-color: color-mix(in oklab, var(--primary) 90%, transparent);
     }
   }
 }
@@ -1980,33 +1974,33 @@
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-red-400\/80:hover {
-      background-color: color-mix(in oklab, oklch(70.4% 0.191 22.216) 80%, transparent);
+      background-color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
     }
   }
 }
 @media (hover: hover) {
   .ps .hover\:bg-secondary\/80:hover {
-    background-color: oklch(0.967 0.001 286.375);
+    background-color: var(--secondary);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ps .hover\:bg-secondary\/80:hover {
-      background-color: color-mix(in oklab, oklch(0.967 0.001 286.375) 80%, transparent);
+      background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
     }
   }
 }
 @media (hover: hover) {
   .ps .hover\:text-accent-foreground:hover {
-    color: oklch(0.21 0.006 285.885);
+    color: var(--accent-foreground);
   }
 }
 @media (hover: hover) {
   .ps .hover\:text-foreground:hover {
-    color: oklch(0.141 0.005 285.823);
+    color: var(--foreground);
   }
 }
 @media (hover: hover) {
   .ps .hover\:text-primary:hover {
-    color: oklch(0.64 0.1423 268.56);
+    color: var(--primary);
   }
 }
 @media (hover: hover) {
@@ -2020,10 +2014,10 @@
   }
 }
 .ps .focus\:bg-accent:focus {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--accent);
 }
 .ps .focus\:text-accent-foreground:focus {
-  color: oklch(0.21 0.006 285.885);
+  color: var(--accent-foreground);
 }
 .ps .focus\:ring-1:focus {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2034,10 +2028,10 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .ps .focus\:ring-accent-foreground:focus {
-  --tw-ring-color: oklch(0.21 0.006 285.885);
+  --tw-ring-color: var(--accent-foreground);
 }
 .ps .focus\:ring-ring:focus {
-  --tw-ring-color: oklch(0.705 0.015 286.067);
+  --tw-ring-color: var(--ring);
 }
 .ps .focus\:ring-offset-1:focus {
   --tw-ring-offset-width: 1px;
@@ -2048,7 +2042,7 @@
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 }
 .ps .focus\:ring-offset-background:focus {
-  --tw-ring-offset-color: oklch(1 0 0);
+  --tw-ring-offset-color: var(--background);
 }
 .ps .focus\:outline-none:focus {
   --tw-outline-style: none;
@@ -2067,14 +2061,14 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .ps .focus-visible\:ring-ring:focus-visible {
-  --tw-ring-color: oklch(0.705 0.015 286.067);
+  --tw-ring-color: var(--ring);
 }
 .ps .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 }
 .ps .focus-visible\:ring-offset-background:focus-visible {
-  --tw-ring-offset-color: oklch(1 0 0);
+  --tw-ring-offset-color: var(--background);
 }
 .ps .focus-visible\:outline-none:focus-visible {
   --tw-outline-style: none;
@@ -2090,7 +2084,7 @@
   opacity: 50%;
 }
 .ps .aria-selected\:text-muted-foreground[aria-selected="true"] {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .aria-selected\:opacity-30[aria-selected="true"] {
   opacity: 30%;
@@ -2105,61 +2099,61 @@
   opacity: 50%;
 }
 .ps .data-placeholder\:text-muted-foreground[data-placeholder] {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .data-\[active\=true\]\:bg-accent[data-active="true"] {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--accent);
 }
 .ps .data-\[active\=true\]\:text-foreground[data-active="true"] {
-  color: oklch(0.141 0.005 285.823);
+  color: var(--foreground);
 }
 .ps .data-\[focus\=true\]\:ring-2[data-focus="true"] {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .ps .data-\[focus\=true\]\:ring-indigo-400[data-focus="true"] {
-  --tw-ring-color: oklch(67.3% 0.182 276.935);
+  --tw-ring-color: var(--color-indigo-400);
 }
 .ps .data-\[focus\=true\]\:ring-inset[data-focus="true"] {
   --tw-ring-inset: inset;
 }
 .ps .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
-  --tw-translate-y: calc(0.25rem * 1);
+  --tw-translate-y: calc(var(--spacing) * 1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
-  --tw-enter-translate-y: calc(2*0.25rem*-1);
+  --tw-enter-translate-y: calc(2*var(--spacing)*-1);
 }
 .ps .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
-  --tw-translate-x: calc(0.25rem * -1);
+  --tw-translate-x: calc(var(--spacing) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
-  --tw-enter-translate-x: calc(2*0.25rem);
+  --tw-enter-translate-x: calc(2*var(--spacing));
 }
 .ps .data-\[side\=right\]\:translate-x-1[data-side="right"] {
-  --tw-translate-x: calc(0.25rem * 1);
+  --tw-translate-x: calc(var(--spacing) * 1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
-  --tw-enter-translate-x: calc(2*0.25rem*-1);
+  --tw-enter-translate-x: calc(2*var(--spacing)*-1);
 }
 .ps .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
-  --tw-translate-y: calc(0.25rem * -1);
+  --tw-translate-y: calc(var(--spacing) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
-  --tw-enter-translate-y: calc(2*0.25rem);
+  --tw-enter-translate-y: calc(2*var(--spacing));
 }
 .ps .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
-  --tw-translate-x: calc(0.25rem * 4);
+  --tw-translate-x: calc(var(--spacing) * 4);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
-  background-color: oklch(0.64 0.1423 268.56);
+  background-color: var(--primary);
 }
 .ps .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
-  color: oklch(0.985 0 0);
+  color: var(--primary-foreground);
 }
 .ps .data-\[state\=closed\]\:animate-out[data-state="closed"] {
   animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
@@ -2198,19 +2192,19 @@
   animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
 }
 .ps .data-\[state\=open\]\:border-primary[data-state="open"] {
-  border-color: oklch(0.64 0.1423 268.56);
+  border-color: var(--primary);
 }
 .ps .data-\[state\=open\]\:bg-accent[data-state="open"] {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--accent);
 }
 .ps .data-\[state\=open\]\:bg-secondary[data-state="open"] {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--secondary);
 }
 .ps .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
-  color: oklch(0.21 0.006 285.885);
+  color: var(--accent-foreground);
 }
 .ps .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
-  color: oklch(0.552 0.016 285.938);
+  color: var(--muted-foreground);
 }
 .ps .data-\[state\=open\]\:duration-500[data-state="open"] {
   --tw-duration: 500ms;
@@ -2243,18 +2237,18 @@
   --tw-enter-translate-y: calc(48%*-1);
 }
 .ps .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
-  background-color: oklch(0.967 0.001 286.375);
+  background-color: var(--muted);
 }
 .ps .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
-  --tw-translate-x: calc(0.25rem * 0);
+  --tw-translate-x: calc(var(--spacing) * 0);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .ps .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
-  background-color: oklch(0.92 0.004 286.32);
+  background-color: var(--input);
 }
 @media (width >= 40rem) {
   .ps .sm\:max-w-sm {
-    max-width: 24rem;
+    max-width: var(--container-sm);
   }
 }
 @media (width >= 40rem) {
@@ -2270,13 +2264,13 @@
 @media (width >= 40rem) {
   .ps :where(.sm\:space-x-2 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(0.25rem * 2) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(0.25rem * 2) * calc(1 - var(--tw-space-x-reverse)));
+    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
 @media (width >= 40rem) {
   .ps .sm\:rounded-lg {
-    border-radius: 0.5rem;
+    border-radius: var(--radius);
   }
 }
 @media (width >= 40rem) {
@@ -2286,8 +2280,8 @@
 }
 @media (width >= 48rem) {
   .ps .md\:text-sm {
-    font-size: 0.875rem;
-    line-height: var(--tw-leading, calc(1.25 / 0.875));
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
 .ps .dark\:scale-0:is(.dark *) {
@@ -2309,23 +2303,23 @@
   rotate: 0deg;
 }
 .ps .dark\:bg-orange-950:is(.dark *) {
-  background-color: oklch(26.6% 0.079 36.259);
+  background-color: var(--color-orange-950);
 }
 .ps .dark\:text-orange-300:is(.dark *) {
-  color: oklch(83.7% 0.128 66.29);
+  color: var(--color-orange-300);
 }
 .ps .dark\:text-white:is(.dark *) {
-  color: #fff;
+  color: var(--color-white);
 }
 .ps .\[\&_button\]\:border button {
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
 .ps .\[\&_button\]\:border-input button {
-  border-color: oklch(0.92 0.004 286.32);
+  border-color: var(--input);
 }
 .ps .\[\&_button\]\:bg-background button {
-  background-color: oklch(1 0 0);
+  background-color: var(--background);
 }
 .ps .\[\&_button\]\:shadow-sm button {
   --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));
@@ -2333,43 +2327,43 @@
 }
 @media (hover: hover) {
   .ps .hover\:\[\&_button\]\:bg-accent:hover button {
-    background-color: oklch(0.967 0.001 286.375);
+    background-color: var(--accent);
   }
 }
 @media (hover: hover) {
   .ps .hover\:\[\&_button\]\:text-accent-foreground:hover button {
-    color: oklch(0.21 0.006 285.885);
+    color: var(--accent-foreground);
   }
 }
 .ps .\[\&_button_\>_svg\]\:fill-foreground button > svg {
-  fill: oklch(0.141 0.005 285.823);
+  fill: var(--foreground);
 }
 .ps .\[\&_svg\]\:pointer-events-none svg {
   pointer-events: none;
 }
 .ps .\[\&_svg\]\:size-3 svg {
-  width: calc(0.25rem * 3);
-  height: calc(0.25rem * 3);
+  width: calc(var(--spacing) * 3);
+  height: calc(var(--spacing) * 3);
 }
 .ps .\[\&_svg\]\:size-4 svg {
-  width: calc(0.25rem * 4);
-  height: calc(0.25rem * 4);
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
 }
 .ps .\[\&_svg\]\:shrink-0 svg {
   flex-shrink: 0;
 }
 .ps .\[\&_svg_\>_path\]\:fill-background svg > path {
-  fill: oklch(1 0 0);
+  fill: var(--background);
 }
 .ps .\[\&_svg_\>_path\]\:opacity-50 svg > path {
   opacity: 50%;
 }
 .ps .\[\&_svg_\>_rect\]\:fill-muted-foreground\/80 svg > rect {
-  fill: oklch(0.552 0.016 285.938);
+  fill: var(--muted-foreground);
 }
 @supports (color: color-mix(in lab, red, red)) {
   .ps .\[\&_svg_\>_rect\]\:fill-muted-foreground\/80 svg > rect {
-    fill: color-mix(in oklab, oklch(0.552 0.016 285.938) 80%, transparent);
+    fill: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
   }
 }
 .ps .\[\&_tr\:last-child\]\:border-0 tr:last-child {
@@ -2381,27 +2375,27 @@
   border-bottom-width: 0px;
 }
 .ps .\[\&\>button\]\:bg-primary>button {
-  background-color: oklch(0.64 0.1423 268.56);
+  background-color: var(--primary);
 }
 .ps .\[\&\>button\]\:bg-transparent>button {
   background-color: transparent;
 }
 .ps .\[\&\>button\]\:font-bold>button {
-  --tw-font-weight: 700;
-  font-weight: 700;
+  --tw-font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-bold);
 }
 .ps .\[\&\>button\]\:text-accent-foreground>button {
-  color: oklch(0.21 0.006 285.885);
+  color: var(--accent-foreground);
 }
 .ps .\[\&\>button\]\:text-foreground\!>button {
-  color: oklch(0.141 0.005 285.823) !important;
+  color: var(--foreground) !important;
 }
 .ps .\[\&\>button\]\:text-primary-foreground>button {
-  color: oklch(0.985 0 0);
+  color: var(--primary-foreground);
 }
 @media (hover: hover) {
   .ps .\[\&\>button\]\:hover\:bg-primary>button:hover {
-    background-color: oklch(0.64 0.1423 268.56);
+    background-color: var(--primary);
   }
 }
 @media (hover: hover) {
@@ -2411,12 +2405,12 @@
 }
 @media (hover: hover) {
   .ps .\[\&\>button\]\:hover\:text-foreground\!>button:hover {
-    color: oklch(0.141 0.005 285.823) !important;
+    color: var(--foreground) !important;
   }
 }
 @media (hover: hover) {
   .ps .\[\&\>button\]\:hover\:text-primary-foreground>button:hover {
-    color: oklch(0.985 0 0);
+    color: var(--primary-foreground);
   }
 }
 .ps .\[\&\>span\]\:line-clamp-1>span {
@@ -2426,8 +2420,8 @@
   -webkit-line-clamp: 1;
 }
 .ps .\[\&\>svg\]\:size-4>svg {
-  width: calc(0.25rem * 4);
-  height: calc(0.25rem * 4);
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
 }
 .ps .\[\&\>svg\]\:shrink-0>svg {
   flex-shrink: 0;
@@ -2437,10 +2431,10 @@
   border-bottom-width: 0px;
 }
 .ps .\[\&\[aria-selected\]\>button\]\:bg-primary[aria-selected]>button {
-  background-color: oklch(0.64 0.1423 268.56);
+  background-color: var(--primary);
 }
 .ps .\[\&\[aria-selected\]\>button\]\:text-primary-foreground[aria-selected]>button {
-  color: oklch(0.985 0 0);
+  color: var(--primary-foreground);
 }
 @property --tw-animation-delay {
   syntax: "*";
@@ -2545,6 +2539,31 @@
   --studio-cell-height: 38px;
   --text-xs: 0.75rem;
 }
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.64 0.1423 268.56);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
 .ps a,
   .ps button {
   cursor: pointer;
@@ -2559,8 +2578,7 @@
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
   font-feature-settings: var(--default-font-feature-settings, normal);
   font-variation-settings: var(--default-font-variation-settings, normal);
   -webkit-tap-highlight-color: transparent;
@@ -2587,8 +2605,7 @@
   font-weight: bolder;
 }
 .ps code, .ps kbd, .ps samp, .ps pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-feature-settings: var(--default-mono-font-feature-settings, normal);
   font-variation-settings: var(--default-mono-font-variation-settings, normal);
   font-size: 1em;