@sanity/runtime-cli 4.3.3 → 4.3.4

package/dist/server/static/components/app.css

@@ -1,50 +1,782 @@
+/* ==========================================================================
+   SANITY UI - CSS DESIGN VARIABLES
+   ==========================================================================
+
+   This file provides the core Sanity UI design language as CSS Custom Properties
+   (Variables) for direct consumption in CSS stylesheets or inline styles.
+
+   - Supports light and dark color schemes via `prefers-color-scheme`.
+   - Uses numerical scales for spacing, radius, font sizes, line heights,
+     and shadows where applicable for ergonomic adjustment.
+   - Provides semantic color variables for common UI roles (text, surface,
+     border, interactive states, etc.) mapped to the underlying palette.
+   - Includes typography, transitions, and layout constants.
+
+   --------------------------------------------------------------------------
+   Table of Contents
+   --------------------------------------------------------------------------
+   1.  SETUP & BASE
+   2.  RAW COLOR PALETTE
+   3.  SEMANTIC COLORS (LIGHT & DARK MODE)
+        - Brand / Primary
+        - Feedback (Positive, Caution, Critical)
+        - Neutral / Base UI
+        - Focus Ring
+        - Shadows (Colors Only)
+   4.  TYPOGRAPHY
+        - Font Families
+        - Font Weights
+        - Font Sizes (Numerical Scale)
+        - Line Heights (Numerical Scale)
+        - Letter Spacing (Numerical Scale)
+   5.  SPACING & SIZING
+        - Spacing (Numerical Scale)
+        - Border Radius (Numerical Scale)
+        - Container Widths (Numerical Scale)
+   6.  SHADOWS (COMPUTED)
+        - Shadow Components (Numerical Offsets/Blur/Spread)
+        - Box Shadows (Numerical Scale)
+   7.  TRANSITIONS
+   8.  LAYOUT & Z-INDEX
+   -------------------------------------------------------------------------- */
+
+/* ==========================================================================
+   1. SETUP & BASE
+   ========================================================================== */
+
+:root {
+  /* Enables system-level light/dark mode detection */
+  color-scheme: light dark;
+
+  /* Default to light mode colors (overridden later in dark mode) */
+  --base-color: var(--black);
+  --base-background-color: var(--white);
+
+  /* Default text rendering settings */
+  color: var(--base-color);
+  background-color: var(--base-background-color);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-family-sans);
+}
+
+/* ==========================================================================
+   2. RAW COLOR PALETTE
+   ==========================================================================
+
+   The base HSL palette values.
+   Naming: --<hue>-<value>
+*/
+:root {
+  --black: hsl(0, 0%, 0%);
+  --white: hsl(0, 0%, 100%);
+
+  --gray-50: hsl(240deg, 12%, 97%);
+  --gray-100: hsl(240deg, 10%, 94%);
+  --gray-200: hsl(231deg, 10%, 90%);
+  --gray-300: hsl(232deg, 11%, 76%);
+  --gray-400: hsl(228deg, 13%, 63%);
+  --gray-500: hsl(229deg, 13%, 51%);
+  --gray-600: hsl(228deg, 16%, 38%);
+  --gray-700: hsl(229deg, 18%, 27%);
+  --gray-800: hsl(229deg, 19%, 18%);
+  --gray-900: hsl(228deg, 19%, 13%);
+  --gray-950: hsl(233deg, 17%, 9%);
+
+  --blue-50: hsl(222deg, 100%, 98%);
+  --blue-100: hsl(222deg, 100%, 95%);
+  --blue-200: hsl(223deg, 100%, 93%);
+  --blue-300: hsl(224deg, 100%, 83%);
+  --blue-400: hsl(226deg, 100%, 73%);
+  --blue-500: hsl(232deg, 96%, 66%);
+  --blue-600: hsl(239deg, 78%, 58%);
+  --blue-700: hsl(241deg, 63%, 41%);
+  --blue-800: hsl(230deg, 55%, 22%);
+  --blue-900: hsl(234deg, 49%, 17%);
+  --blue-950: hsl(235deg, 43%, 11%);
+
+  --purple-50: hsl(260deg, 95%, 98%);
+  --purple-100: hsl(260deg, 98%, 96%);
+  --purple-200: hsl(263deg, 96%, 94%);
+  --purple-300: hsl(262deg, 92%, 84%);
+  --purple-400: hsl(262deg, 88%, 75%);
+  --purple-500: hsl(262deg, 83%, 64%);
+  --purple-600: hsl(265deg, 79%, 51%);
+  --purple-700: hsl(263deg, 72%, 36%);
+  --purple-800: hsl(258deg, 60%, 24%);
+  --purple-900: hsl(257deg, 46%, 17%);
+  --purple-950: hsl(260deg, 41%, 11%);
+
+  --magenta-50: hsl(340deg, 82%, 98%);
+  --magenta-100: hsl(339deg, 83%, 95%);
+  --magenta-200: hsl(339deg, 83%, 93%);
+  --magenta-300: hsl(340deg, 82%, 82%);
+  --magenta-400: hsl(340deg, 81%, 69%);
+  --magenta-500: hsl(340deg, 80%, 53%);
+  --magenta-600: hsl(337deg, 78%, 39%);
+  --magenta-700: hsl(333deg, 73%, 28%);
+  --magenta-800: hsl(328deg, 63%, 18%);
+  --magenta-900: hsl(327deg, 46%, 14%);
+  --magenta-950: hsl(341deg, 35%, 9%);
+
+  --red-50: hsl(5deg, 100%, 98%);
+  --red-100: hsl(4deg, 100%, 95%);
+  --red-200: hsl(4deg, 98%, 93%);
+  --red-300: hsl(5deg, 95%, 82%);
+  --red-400: hsl(6deg, 90%, 69%);
+  --red-500: hsl(5deg, 85%, 57%);
+  --red-600: hsl(5deg, 78%, 45%);
+  --red-700: hsl(4deg, 70%, 32%);
+  --red-800: hsl(3deg, 58%, 19%);
+  --red-900: hsl(2deg, 41%, 14%);
+  --red-950: hsl(356deg, 30%, 9%);
+
+  --orange-50: hsl(28deg, 100%, 97%);
+  --orange-100: hsl(25deg, 100%, 93%);
+  --orange-200: hsl(24deg, 100%, 89%);
+  --orange-300: hsl(24deg, 100%, 76%);
+  --orange-400: hsl(24deg, 100%, 63%);
+  --orange-500: hsl(24deg, 100%, 49%);
+  --orange-600: hsl(24deg, 98%, 35%);
+  --orange-700: hsl(24deg, 94%, 25%);
+  --orange-800: hsl(22deg, 82%, 15%);
+  --orange-900: hsl(17deg, 65%, 12%);
+  --orange-950: hsl(14deg, 43%, 9%);
+
+  --yellow-50: hsl(51deg, 94%, 94%);
+  --yellow-100: hsl(52deg, 91%, 86%);
+  --yellow-200: hsl(50deg, 90%, 78%);
+  --yellow-300: hsl(47deg, 91%, 65%);
+  --yellow-400: hsl(44deg, 95%, 53%);
+  --yellow-500: hsl(39deg, 96%, 42%);
+  --yellow-600: hsl(34deg, 90%, 31%);
+  --yellow-700: hsl(31deg, 80%, 22%);
+  --yellow-800: hsl(28deg, 66%, 14%);
+  --yellow-900: hsl(24deg, 40%, 11%);
+  --yellow-950: hsl(24deg, 20%, 8%);
+
+  --green-50: hsl(157deg, 89%, 95%);
+  --green-100: hsl(158deg, 89%, 88%);
+  --green-200: hsl(158deg, 87%, 82%);
+  --green-300: hsl(158deg, 86%, 65%);
+  --green-400: hsl(159deg, 88%, 50%);
+  --green-500: hsl(159deg, 96%, 37%);
+  --green-600: hsl(159deg, 98%, 24%);
+  --green-700: hsl(158deg, 98%, 16%);
+  --green-800: hsl(158deg, 91%, 10%);
+  --green-900: hsl(162deg, 72%, 8%);
+  --green-950: hsl(172deg, 51%, 6%);
+
+  --cyan-50: hsl(180deg, 92%, 95%);
+  --cyan-100: hsl(180deg, 91%, 88%);
+  --cyan-200: hsl(180deg, 87%, 78%);
+  --cyan-300: hsl(180deg, 81%, 66%);
+  --cyan-400: hsl(180deg, 81%, 49%);
+  --cyan-500: hsl(182deg, 96%, 38%);
+  --cyan-600: hsl(185deg, 96%, 26%);
+  --cyan-700: hsl(185deg, 95%, 16%);
+  --cyan-800: hsl(187deg, 86%, 11%);
+  --cyan-900: hsl(188deg, 68%, 9%);
+  --cyan-950: hsl(196deg, 37%, 8%);
+}
+
+/* ==========================================================================
+   3. SEMANTIC COLORS (LIGHT & DARK MODE)
+   ==========================================================================
+
+   Purpose-driven color variables mapped to the raw palette.
+
+   Naming: --color-<role>-<element?>-<state?>
+   Example: --color-text-default, --color-surface-primary-hover, --color-border-critical
+*/
+
+:root {
+  /* ---------------------------------- */
+  /* Semantic Colors: LIGHT MODE        */
+  /* ---------------------------------- */
+
+  /* --- Brand / Primary --- */
+  --color-brand-primary-fg: var(--blue-600);
+  --color-brand-primary-bg-strong: var(--blue-600);
+  --color-brand-primary-bg-med: var(--blue-100);
+  --color-brand-primary-bg-light: var(--blue-50);
+  --color-brand-primary-border: var(--blue-300);
+
+  /* --- Feedback: Positive (Green) --- */
+  --color-feedback-positive-fg: var(--green-700);
+  --color-feedback-positive-bg-strong: var(--green-500);
+  --color-feedback-positive-bg-med: var(--green-100);
+  --color-feedback-positive-bg-light: var(--green-50);
+  --color-feedback-positive-border: var(--green-300);
+
+  /* --- Feedback: Caution (Yellow/Orange) --- */
+  --color-feedback-caution-fg: var(--yellow-700);
+  --color-feedback-caution-bg-strong: var(--yellow-500);
+  --color-feedback-caution-bg-med: var(--yellow-100);
+  --color-feedback-caution-bg-light: var(--yellow-50);
+  --color-feedback-caution-border: var(--yellow-300);
+
+  /* --- Feedback: Critical (Red) --- */
+  --color-feedback-critical-fg: var(--red-600);
+  --color-feedback-critical-bg-strong: var(--red-600);
+  --color-feedback-critical-bg-med: var(--red-100);
+  --color-feedback-critical-bg-light: var(--red-50);
+  --color-feedback-critical-border: var(--red-300);
+
+  /* --- Neutral / Base UI --- */
+  /* Text */
+  --color-text-default: var(--gray-800);
+  --color-text-muted: var(--gray-600);
+  --color-text-on-contrast: var(--white); /* Text on dark/colored backgrounds */
+  --color-text-disabled: var(--gray-400);
+  --color-text-link: var(--blue-600);
+  --color-text-accent: var(--purple-600); /* Used for inline accents */
+
+  /* Surface (Backgrounds) */
+  --color-surface-default: var(--white); /* Base page/component background */
+  --color-surface-neutral: var(--gray-50); /* Slightly off-white */
+  --color-surface-subtle: var(--gray-100); /* Grouping subtle backgrounds */
+  --color-surface-strong: var(--gray-200); /* Grouping stronger backgrounds */
+  --color-surface-contrast: var(--gray-900); /* Dark background for contrast */
+  --color-surface-disabled: var(--gray-100);
+  --color-surface-backdrop: hsla(0, 0%, 0%, 0.5); /* Modal overlays etc */
+
+  /* Borders / Dividers */
+  --color-border-default: var(--gray-200);
+  --color-border-muted: var(--gray-100); /* Softer borders/dividers */
+  --color-border-strong: var(--gray-300);
+  --color-border-disabled: var(--gray-100);
+
+  /* Interactive States (Examples - Needs refinement based on components) */
+  /* These often combine surface/border/text colors based on component logic */
+  --color-interactive-primary-hover-bg: var(--blue-500);
+  --color-interactive-primary-active-bg: var(--blue-700);
+  --color-interactive-primary-resting-fg: var(--white);
+
+  --color-interactive-neutral-hover-bg: var(--gray-100);
+  --color-interactive-neutral-active-bg: var(--gray-200);
+
+  /* --- Focus Ring --- */
+  --color-focus-ring: var(--blue-500);
+
+  /* --- Shadows (Colors Only) --- */
+  /* These are combined with numerical offsets/blur later */
+  /* Using black with varying alpha for light mode shadows */
+  --color-shadow-umbra: hsla(0, 0%, 0%, 0.1);
+  --color-shadow-penumbra: hsla(0, 0%, 0%, 0.07);
+  --color-shadow-ambient: hsla(0, 0%, 0%, 0.06);
+  --color-shadow-outline: hsla(0, 0%, 0%, 0.15); /* Used for subtle outlines */
+}
+
+/* ---------------------------------- */
+/* Semantic Colors: DARK MODE         */
+/* ---------------------------------- */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Override base colors */
+    --base-color: var(--white);
+    --base-background-color: var(--gray-950); /* Or a dark gray like 950 */
+
+    /* --- Brand / Primary --- */
+    --color-brand-primary-fg: var(--blue-400);
+    --color-brand-primary-bg-strong: var(--blue-500);
+    --color-brand-primary-bg-med: var(--blue-900);
+    --color-brand-primary-bg-light: var(--blue-950);
+    --color-brand-primary-border: var(--blue-700);
+
+    /* --- Feedback: Positive --- */
+    --color-feedback-positive-fg: var(--green-400);
+    --color-feedback-positive-bg-strong: var(--green-500);
+    --color-feedback-positive-bg-med: var(--green-900);
+    --color-feedback-positive-bg-light: var(--green-950);
+    --color-feedback-positive-border: var(--green-700);
+
+    /* --- Feedback: Caution --- */
+    --color-feedback-caution-fg: var(--yellow-400);
+    --color-feedback-caution-bg-strong: var(--yellow-500);
+    --color-feedback-caution-bg-med: var(--yellow-900);
+    --color-feedback-caution-bg-light: var(--yellow-950);
+    --color-feedback-caution-border: var(--yellow-700);
+
+    /* --- Feedback: Critical --- */
+    --color-feedback-critical-fg: var(--red-400);
+    --color-feedback-critical-bg-strong: var(--red-500);
+    --color-feedback-critical-bg-med: var(--red-900);
+    --color-feedback-critical-bg-light: var(--red-950);
+    --color-feedback-critical-border: var(--red-700);
+
+    /* --- Neutral / Base UI --- */
+    /* Text */
+    --color-text-default: var(--gray-100);
+    --color-text-muted: var(--gray-400);
+    --color-text-on-contrast: var(--black); /* Text on light/colored backgrounds */
+    --color-text-disabled: var(--gray-600);
+    --color-text-link: var(--blue-400);
+    --color-text-accent: var(--purple-400);
+
+    /* Surface (Backgrounds) */
+    --color-surface-default: var(--gray-950); /* Darkest background */
+    --color-surface-neutral: var(--gray-900); /* Slightly lighter */
+    --color-surface-subtle: var(--gray-800);
+    --color-surface-strong: var(--gray-700);
+    --color-surface-contrast: var(--gray-50); /* Light background for contrast */
+    --color-surface-disabled: var(--gray-900);
+    --color-surface-backdrop: hsla(0, 0%, 0%, 0.7); /* Darker backdrop */
+
+    /* Borders / Dividers */
+    --color-border-default: var(--gray-800);
+    --color-border-muted: var(--gray-900); /* Darker, less visible */
+    --color-border-strong: var(--gray-700);
+    --color-border-disabled: var(--gray-800);
+
+    /* Interactive States (Examples) */
+    --color-interactive-primary-hover-bg: var(--blue-600);
+    --color-interactive-primary-active-bg: var(--blue-400);
+    --color-interactive-primary-resting-fg: var(--black); /* Text on primary */
+
+    --color-interactive-neutral-hover-bg: var(--gray-800);
+    --color-interactive-neutral-active-bg: var(--gray-700);
+
+    /* --- Focus Ring --- */
+    --color-focus-ring: var(--blue-500); /* Often same color, check contrast */
+
+    /* --- Shadows (Colors Only) --- */
+    /* Using black with higher alpha for dark mode shadows */
+    --color-shadow-umbra: hsla(0, 0%, 0%, 0.2);
+    --color-shadow-penumbra: hsla(0, 0%, 0%, 0.14);
+    --color-shadow-ambient: hsla(0, 0%, 0%, 0.12);
+    --color-shadow-outline: hsla(0, 0%, 0%, 0.3);
+  }
+}
+
+/* ==========================================================================
+   4. TYPOGRAPHY
+   ========================================================================== */
+
+:root {
+  /* ---------------------------------- */
+  /* Font Families                      */
+  /* ---------------------------------- */
+  --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  --font-family-text: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  /* ---------------------------------- */
+  /* Font Weights                       */
+  /* ---------------------------------- */
+  /* Use these named weights */
+  --font-weight-1: 400;
+  --font-weight-2: 500;
+  --font-weight-3: 600;
+  --font-weight-4: 700;
+  /* Note: Heavier weights (800, 900) exist in source but less common */
+  --font-weight-5: 800;
+  --font-weight-6: 900;
+
+  /* ---------------------------------- */
+  /* Font Sizes (Numerical Scale)       */
+  /* ---------------------------------- */
+  /* Combined scale from label, code, text, heading sizes. */
+  /* Use comments to hint at original context if needed. */
+  --font-size-1: 8.1px; /* label-1 */
+  --font-size-2: 9.5px; /* label-2 */
+  --font-size-3: 10px; /* code-1, text-1 */
+  --font-size-4: 10.8px; /* label-3 */
+  --font-size-5: 12.25px; /* label-4 */
+  --font-size-6: 13px; /* code-2, text-2, heading-1 */
+  --font-size-7: 13.6px; /* label-5 */
+  --font-size-8: 15px; /* text-3, label-6 */
+  --font-size-9: 16px; /* code-3, heading-2 */
+  --font-size-10: 18px; /* text-4 */
+  --font-size-11: 19px; /* code-4 */
+  --font-size-12: 21px; /* text-5, heading-3 */
+  --font-size-13: 22px; /* code-5 */
+  --font-size-14: 27px; /* heading-4 */
+  --font-size-15: 33px; /* heading-5 */
+  --font-size-16: 38px; /* heading-6 */
+
+  /* Category type scales */
+  --font-size-code-1: var(--font-size-3, 10px);
+  --font-size-code-2: var(--font-size-6, 13px);
+  --font-size-code-3: var(--font-size-9, 16px);
+  --font-size-code-4: var(--font-size-11, 19px);
+  --font-size-code-5: var(--font-size-13, 22px);
+
+  --font-size-text-1: var(--font-size-3, 10px);
+  --font-size-text-2: var(--font-size-6, 13px);
+  --font-size-text-3: var(--font-size-8, 15px);
+  --font-size-text-4: var(--font-size-10, 18px);
+  --font-size-text-5: var(--font-size-12, 21px);
+
+  --font-size-heading-1: var(--font-size-6, 13px);
+  --font-size-heading-2: var(--font-size-9, 16px);
+  --font-size-heading-3: var(--font-size-12, 21px);
+  --font-size-heading-4: var(--font-size-14, 27px);
+  --font-size-heading-5: var(--font-size-15, 33px);
+  --font-size-heading-6: var(--font-size-16, 38px);
+
+  --font-size-label-1: var(--font-size-1, 8.1px);
+  --font-size-label-2: var(--font-size-2, 9.5px);
+  --font-size-label-3: var(--font-size-4, 10.8px);
+  --font-size-label-4: var(--font-size-5, 12.25px);
+  --font-size-label-5: var(--font-size-7, 13.6px);
+  --font-size-label-6: var(--font-size-8, 15px);
+
+  /* ---------------------------------- */
+  /* Line Heights (Numerical Scale)     */
+  /* ---------------------------------- */
+  /* Unitless values are recommended for line-height. */
+  /* Scale derived from font sizes, may need adjustment/simplification. */
+  --line-height-1: 1.0; /* 15 / 15 */
+  --line-height-2: 1.03; /* 14 / 13.6 */
+  --line-height-3: 1.06; /* 13 / 12.25 */
+  --line-height-4: 1.11; /* 12 / 10.8 */
+  --line-height-5: 1.16; /* 11 / 9.5 */
+  --line-height-6: 1.23; /* 10 / 8.1 */
+  --line-height-7: 1.24; /* 41 / 33 - 47 / */
+  --line-height-8: 1.3; /* 35 / 27 */
+  --line-height-9: 1.38; /* 29 / 21 */
+  --line-height-10: 1.41; /* 31 / 22 */
+  --line-height-11: 1.42; /* 27 / 19 */
+  --line-height-12: 1.44; /* 23 / 16 */
+  --line-height-13: 1.46; /* 19 / 13 */
+  --line-height-14: 1.5; /* 27 / 18 - 15 / 10*/
+
+  /* Simplified options */
+  --line-height-solid: 1;
+  --line-height-heading: 1.25;
+  --line-height-text: 1.5;
+
+  /* ---------------------------------- */
+  /* Letter Spacing (Numerical Scale)   */
+  /* ---------------------------------- */
+  /* Using `em` units */
+  --letter-spacing-0: 0; /* Default for most text */
+  --letter-spacing-1: -0.02em; /* Example */
+  --letter-spacing-2: 0.025em; /* Example */
+  --letter-spacing-3: 0.05em; /* Derived from label styles (0.5px / ~10px font) */
+  --letter-spacing-4: 0.1em; /* Example */
+
+  /* FONT SHORTHAND */
+  --code-1: 10px / 1.5, var(--font-family-mono);
+  --code-2: 13px / 1.4615, var(--font-family-mono);
+  --code-3: 16px / 1.4375, var(--font-family-mono);
+  --code-4: 19px / 1.421, var(--font-family-mono);
+
+  --text-1: 10px / 1.5, var(--font-family-text);
+  --text-2: 13px / 1.4615, var(--font-family-text);
+  --text-3: 15px / 1.5333, var(--font-family-text);
+  --text-4: 18px / 1.5, var(--font-family-text);
+  --text-4: 21px / 1.4761, var(--font-family-text);
+
+  --heading-1: 13px / 1.4615, var(--font-family-heading);
+  --heading-2: 16px / 1.4375, var(--font-family-heading);
+  --heading-3: 21px / 1.3809, var(--font-family-heading);
+  --heading-4: 27px / 1.2962, var(--font-family-heading);
+  --heading-4: 33px / 1.2424, var(--font-family-heading);
+  --heading-4: 38px / 1.2368, var(--font-family-heading);
+
+  --label-1: 8.1px / 1.2345, var(--font-family-text);
+  --label-2: 9.5px / 1.1578, var(--font-family-text);
+  --label-3: 10.8px / 1.1111, var(--font-family-text);
+  --label-4: 12.25px / 1.0612, var(--font-family-text);
+  --label-5: 13.6px / 1.0294, var(--font-family-text);
+  --label-6: 15px / 1, var(--font-family-text);
+}
+
+/* ==========================================================================
+   5. SPACING & SIZING
+   ========================================================================== */
+
+:root {
+  /* ---------------------------------- */
+  /* Spacing (Numerical Scale)          */
+  /* ---------------------------------- */
+  /* Used for padding, margin, gap, etc. Assumed px units. */
+
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 20px;
+  --space-5: 32px;
+  --space-6: 52px;
+  --space-7: 84px;
+  --space-8: 136px;
+  --space-9: 220px;
+
+  /* ---------------------------------- */
+  /* Border Radius (Numerical Scale)    */
+  /* ---------------------------------- */
+  /* Assumed px units. Index 7 is 'pill' shape. */
+  --radius-0: 0px;
+  --radius-1: 1px;
+  --radius-2: 3px;
+  --radius-3: 6px;
+  --radius-4: 9px;
+  --radius-5: 12px;
+  --radius-6: 21px;
+  --radius-7: 9999px; /* Pill / Full round */
+
+  /* ---------------------------------- */
+  /* Container Widths (Numerical Scale) */
+  /* ---------------------------------- */
+  /* Max-widths for layout containers. Assumed px units. */
+  --container-1: 320px;
+  --container-2: 640px;
+  --container-3: 960px;
+  --container-4: 1280px;
+  --container-5: 1600px;
+  --container-6: 1920px;
+}
+
+/* ==========================================================================
+   6. SHADOWS (COMPUTED)
+   ========================================================================== */
+
+:root {
+  /* ---------------------------------- */
+  /* Shadow Components (Numerical)      */
+  /* ---------------------------------- */
+  /* Define the offset-x, offset-y, blur-radius, spread-radius in px */
+  /* Level 0 is null/none */
+  /* Level 1 (Subtle/Inset?) */
+  --shadow-umbra-px-1: 0px 0px 0px 0px;
+  --shadow-penumbra-px-1: 0px 0px 0px 0px;
+  --shadow-ambient-px-1: 0px 0px 0px 0px;
+  /* Level 2 (Low) */
+  --shadow-umbra-px-2: 0px 3px 5px -2px;
+  --shadow-penumbra-px-2: 0px 6px 10px 0px;
+  --shadow-ambient-px-2: 0px 1px 18px 1px;
+  /* Level 3 (Medium) */
+  --shadow-umbra-px-3: 0px 7px 8px -4px;
+  --shadow-penumbra-px-3: 0px 12px 17px 2px;
+  --shadow-ambient-px-3: 0px 5px 22px 4px;
+  /* Level 4 (High) */
+  --shadow-umbra-px-4: 0px 9px 11px -5px;
+  --shadow-penumbra-px-4: 0px 18px 28px 2px;
+  --shadow-ambient-px-4: 0px 7px 34px 6px;
+  /* Level 5 (Very High) */
+  --shadow-umbra-px-5: 0px 11px 15px -7px;
+  --shadow-penumbra-px-5: 0px 24px 38px 3px;
+  --shadow-ambient-px-5: 0px 9px 46px 8px;
+
+  /* ---------------------------------- */
+  /* Box Shadows (Numerical Scale)      */
+  /* ---------------------------------- */
+  /* Combines numerical components with semantic shadow colors */
+  --shadow-0: none;
+  /* Shadow 1 is typically inset or very subtle - example */
+  --shadow-1: inset 0 0 0 1px var(--color-border-default);
+  --shadow-2: var(--shadow-umbra-px-2) var(--color-shadow-umbra), var(--shadow-penumbra-px-2) var(--color-shadow-penumbra), var(--shadow-ambient-px-2) var(--color-shadow-ambient);
+  --shadow-3: var(--shadow-umbra-px-3) var(--color-shadow-umbra), var(--shadow-penumbra-px-3) var(--color-shadow-penumbra), var(--shadow-ambient-px-3) var(--color-shadow-ambient);
+  --shadow-4: var(--shadow-umbra-px-4) var(--color-shadow-umbra), var(--shadow-penumbra-px-4) var(--color-shadow-penumbra), var(--shadow-ambient-px-4) var(--color-shadow-ambient);
+  --shadow-5: var(--shadow-umbra-px-5) var(--color-shadow-umbra), var(--shadow-penumbra-px-5) var(--color-shadow-penumbra), var(--shadow-ambient-px-5) var(--color-shadow-ambient);
+}
+
+/* ==========================================================================
+   7. TRANSITIONS
+   ========================================================================== */
+
+:root {
+  --transition-duration-1: 100ms; /* From button styles */
+  --transition-duration-2: 150ms; /* From input switch */
+  --transition-duration-3: 200ms; /* Example */
+  --transition-duration-4: 300ms; /* Example */
+
+  --transition-easing-default: ease-in-out;
+  --transition-easing-ease-out: ease-out; /* From input switch */
+  --transition-easing-ease-in: ease-in;
+}
+
+/* ==========================================================================
+   8. LAYOUT & Z-INDEX
+   ========================================================================== */
+
+:root {
+  /* ---------------------------------- */
+  /* Z-Index (Numerical Scale)          */
+  /* ---------------------------------- */
+  /* Stacking order for layers */
+  --z-index-0: 0;
+  --z-index-1: 100; /* Base elements */
+  --z-index-2: 200; /* Tooltips (from layer.tooltip.zOffset) */
+  --z-index-3: 300;
+  --z-index-4: 400; /* Popovers (from layer.popover.zOffset) */
+  --z-index-5: 500;
+  --z-index-6: 600; /* Dialogs (from layer.dialog.zOffset) */
+  --z-index-7: 700; /* Max */
+
+  /* ---------------------------------- */
+  /* Media Query Breakpoints (Numerical)*/
+  /* ---------------------------------- */
+  /* Values from theme.media - use in @media (min-width: var(--media-N)) */
+  --media-1: 360px;
+  --media-2: 600px;
+  --media-3: 900px;
+  --media-4: 1200px;
+  --media-5: 1800px;
+  --media-6: 2400px;
+}
+
+/* --- End of Sanity UI CSS Variables --- */
+
 :root {
   --card-bg-color: light-dark(#f6f6f8, #0d0e12);
-  --card-border-color: light-dark(#dbdce2, #252837);
+  --card-border-color: light-dark(var(--gray-200), var(--gray-800));
   --text-color: light-dark(#242736, #e3e4e8);
   --button-text-color: light-dark(white, #0d0e12);
   --button-background-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
   --button-background-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
   --button-border-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
   --button-border-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
+
+  --button-color: light-dark(#fff, #000);
+  --button-primary-bg: light-dark(#272937, #999999);
+  --button-primary-bg-hover: light-dark(#1c1f28, #888888);
+
+  --size-1: 1px;
+  --size-2: 2px;
+  --size-3: 4px;
+  --size-4: 8px;
+  --size-5: 16px;
+  --size-6: 24px;
+  --size-7: 32px;
+  --size-8: 48px;
+  --size-9: 64px;
+  --size-10: 128px;
 }
+
 html {
   color-scheme: light dark;
 }
 
 body {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
-  background-color: var(--card-bg-color);
   color: var(--text-color) !important;
   min-height: 100vh;
   display: grid;
   grid-template-areas:
     'header'
+    'filters'
     'left-sidebar'
-    'main'
-    'footer';
-  grid-template-rows: min-content min-content 1fr min-content;
+    'main';
+
+  grid-template-rows: min-content min-content min-content 1fr;
+}
+
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Utilities */
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+
+.sticky {
+  position: sticky;
+}
+.relative {
+  position: relative;
+}
+
+.top-0 {
+  top: 0;
 }
+.right-0 {
+  right: 0;
+}
+.left-0 {
+  left: 0;
+}
+.bottom-0 {
+  bottom: 0;
+}
+
+.z-100 {
+  z-index: 100;
+}
+.h-100 {
+  height: 100%;
+}
+.max-h-100 {
+  max-height: 100%;
+}
+.min-h-0 {
+  min-height: 0;
+}
+.y-scroll {
+  overflow-y: scroll;
+}
+
+.border-color {
+  border-color: light-dark(var(--gray-200), var(--gray-800));
+}
+.border-left {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: var(--card-border-color);
+}
+.border-bottom {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--card-border-color);
+}
+.border-top {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--card-border-color);
+}
+.border-right {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-top-color: var(--card-border-color);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.hr-border {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 0;
+  border-top: 0;
+  border-bottom: 1px solid light-dark(var(--gray-200), var(--gray-800));
+}
+
+/* Layout */
 body > header {
   grid-area: header;
 }
+body > filters-component {
+  grid-area: filters;
+}
 body > nav {
   grid-area: left-sidebar;
 }
 body > main {
   grid-area: main;
 }
-body > footer {
-  grid-area: footer;
-}
 
 @media (min-width: 40rem) {
   body {
     grid-template:
       'header             header' min-content
+      'filters            filters' min-content
       'left-sidebar       main  ' 1fr
-      'footer             footer' min-content
-      / minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr);
+      / minmax(auto, 320px) minmax(var(--layout-min-content-width, 16rem), 1fr);
   }
 }
 
@@ -64,6 +796,7 @@ body > footer {
 
 header {
   border-bottom: 1px solid var(--card-border-color);
+  background: light-dark(white, var(--gray-950));
 }
 
 footer {
@@ -77,7 +810,7 @@ footer {
 }
 
 .logo-image {
-  height: 2.25em;
+  height: 25px;
   width: auto;
 }
 
@@ -88,68 +821,145 @@ footer {
 
 .logo-text {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  font-size: 13px;
   font-weight: 500;
   margin: 0px;
-  line-height: calc(1.46154);
   letter-spacing: 0px;
 }
 
-.footer-text {
-  position: relative;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
-  font-weight: 400;
-  padding: 1px 0px;
-  margin: 0px;
-  font-size: 0.8125rem;
-  line-height: calc(1.46154);
-  letter-spacing: 0px;
-  transform: translateY(0.3125rem);
-}
-
 .sanity-button {
-  color: var(--button-text-color) !important;
-  background-color: var(--button-background-color) !important;
-  border-color: var(--button-border-color) !important;
+  appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: light-dark(var(--gray-900), white) !important;
+  color: light-dark(white, var(--gray-950)) !important;
+  border: 0 !important;
+  border-radius: 3px !important;
+  outline: 0;
+  font-size: 14px !important;
+  line-height: 1;
+  padding: 0px 12px !important;
+  height: 24px !important;
 }
 
 .sanity-button:hover {
-  background-color: var(--button-background-color-hover) !important;
-  border-color: var(--button-border-color-hover) !important;
+  background-color: var(--button-primary-bg-hover) !important;
+}
+
+.config-label {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: .5px;
+}
+
+.config-label span {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.function-list-item {
+  color: light-dark(var(--gray-800), var(--gray-400));
+  padding: 8px;
+  font-size: .875rem;
+  border-radius: 3px;
+  margin: 0 0 1px 0;
+  cursor: pointer;
 }
 
 .selected {
-  color: var(--button-text-color);
-  background-color: var(--button-background-color);
+  color: light-dark(var(--gray-950), var(--gray-200));
+  background-color: light-dark(var(--gray-100), var(--gray-900));
 }
 
-ol[type='content'] li:hover {
-  color: var(--button-text-color);
-  background-color: var(--button-background-color-hover) !important;
+ol[type='content'] li:hover:not(.selected:not(.selected)) {
+  color: light-dark(var(--gray-950), var(--gray-200));
+  background-color: light-dark(var(--gray-50), var(--gray-900)) !important;
 }
 
-m-box,
-m-tabs {
+m-box {
   background-color: var(--card-bg-color) !important;
   border-color: var(--card-border-color) !important;
   color: var(--text-color) !important;
 }
 
+m-tabs {
+  font-size: 0.8125rem;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 0 10px 40px;
+}
+
 m-tabs {
   & > :is(a, button) {
-    color: var(--text-color) !important;
+    padding: 4px 12px !important;
+    color: light-dark(var(--gray-900), var(--gray-300)) !important;
   }
 }
 
 m-tabs {
   & > :is(a, button) {
     &[aria-selected='true'] {
-      border-color: var(--button-border-color) !important;
+      background: light-dark(var(--gray-100), var(--gray-800));
+      color: light-dark(var(--gray-800), var(--gray-100)) !important;
     }
   }
 }
 
+:is(ul, ol)[type='content'] {
+  & > li:not(:last-of-type) {
+    border-bottom: 0 !important;
+  }
+}
+
+.tab {
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: .1875rem;
+  padding: 8px;
+  border: 0 !important;
+}
+
 #payload,
 #response {
-  color: black;
-  background-color: white !important;
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.gutter-gradient {
+  background-image: linear-gradient(to right, light-dark(var(--gray-50), var(--gray-900)) 30px, light-dark(var(--gray-100), var(--gray-800)) 30.0001px, light-dark(var(--gray-100), var(--gray-800)) 31px, transparent 31px);
+}
+
+.bg {
+  background-color: light-dark(white, var(--gray-950));
+}
+
+.cm-editor {
+  background-color: transparent;
+}
+
+.cm-gutters.cm-gutters {
+  background-color: transparent;
+  color: light-dark(var(--gray-800), var(--gray-500));
+  border-right: none;
+}
+
+& :is(input:not([is='switch']), select, textarea) {
+  border: 1px solid light-dark(var(--gray-200), var(--gray-800)) !important;
+  border-radius: 3px;
+}
+
+.cm-activeLine.cm-activeLine {
+  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.025)) !important;
+}
+
+.cm-activeLineGutter.cm-activeLineGutter {
+  background-color: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.1)) !important;
+}
+
+pre {
+  background-color: transparent !important;
 }