noecosystem-design 0.1.0

package/packages/design-tokens/src/tokens.css

@@ -0,0 +1,251 @@
+/* GENERATED — DO NOT EDIT. Source: tokens.json */
+
+/* Primitive tokens: raw visual values. */
+:root {
+  --noe-primitive-color-paper-0: #ffffff;
+  --noe-primitive-color-paper-50: #f6f4f2;
+  --noe-primitive-color-paper-100: #f3f0ea;
+  --noe-primitive-color-paper-200: #e8e3dc;
+  --noe-primitive-color-paper-250: #f6f4f2;
+  --noe-primitive-color-paper-300: #e7e2da;
+  --noe-primitive-color-ink-300: #a6a19c;
+  --noe-primitive-color-ink-400: #a6a19c;
+  --noe-primitive-color-ink-500: #565c58;
+  --noe-primitive-color-ink-600: #302f2e;
+  --noe-primitive-color-ink-700: #252423;
+  --noe-primitive-color-ink-800: #302f2e;
+  --noe-primitive-color-ink-850: #302f2e;
+  --noe-primitive-color-ink-900: #171918;
+  --noe-primitive-color-ink-950: #252423;
+  --noe-primitive-color-ink-1000: #1c1b1b;
+  --noe-primitive-color-mint-100: #98e8cf;
+  --noe-primitive-color-mint-200: #abefd9;
+  --noe-primitive-color-mint-300: #1dbf98;
+  --noe-primitive-color-mint-400: #0f6d5b;
+  --noe-primitive-color-mint-500: #0b6f6b;
+  --noe-primitive-color-mint-600: #095c59;
+  --noe-primitive-color-coral-400: #ff5b57;
+  --noe-primitive-color-coral-500: #c43f3c;
+  --noe-primitive-color-coral-600: #9e2f2c;
+  --noe-primitive-color-amber-400: #ffb84a;
+  --noe-primitive-color-amber-500: #986000;
+  --noe-primitive-color-cyan-400: #55d6ff;
+  --noe-primitive-color-cyan-500: #006d91;
+  --noe-primitive-color-violet-400: #7478ff;
+  --noe-primitive-color-violet-500: #5753bd;
+  --noe-primitive-color-ember-400: oklch(0.775 0.155 38);
+  --noe-primitive-color-ember-500: oklch(0.745 0.155 36);
+  --noe-primitive-color-ember-550: oklch(0.72 0.17 34);
+  --noe-primitive-color-ember-600: oklch(0.675 0.185 32);
+  --noe-primitive-color-ember-700: oklch(0.625 0.195 30);
+  --noe-primitive-color-green-500: #1dbf98;
+  --noe-primitive-color-green-600: #0b6f6b;
+  --noe-primitive-color-red-500: #ff5b57;
+  --noe-primitive-color-red-600: #c43f3c;
+  --noe-primitive-color-blue-500: #55d6ff;
+  --noe-primitive-color-blue-600: #006d91;
+  --noe-primitive-color-alpha-focus-light: rgba(11, 111, 107, 0.32);
+  --noe-primitive-color-alpha-focus-dark: rgba(152, 232, 207, 0.45);
+  --noe-primitive-color-alpha-overlay-light: rgba(23, 25, 24, 0.08);
+  --noe-primitive-color-alpha-overlay-dark: rgba(0, 0, 0, 0.62);
+  --noe-primitive-space-0: 0;
+  --noe-primitive-space-1: 0.25rem;
+  --noe-primitive-space-2: 0.5rem;
+  --noe-primitive-space-3: 0.75rem;
+  --noe-primitive-space-4: 1rem;
+  --noe-primitive-space-5: 1.25rem;
+  --noe-primitive-space-6: 1.5rem;
+  --noe-primitive-space-8: 2rem;
+  --noe-primitive-space-10: 2.5rem;
+  --noe-primitive-space-12: 3rem;
+  --noe-primitive-space-16: 4rem;
+  --noe-primitive-space-20: 5rem;
+  --noe-primitive-space-24: 6rem;
+  --noe-primitive-radius-sm: 0.375rem;
+  --noe-primitive-radius-md: 0.625rem;
+  --noe-primitive-radius-lg: 0.875rem;
+  --noe-primitive-radius-xl: 1.25rem;
+  --noe-primitive-radius-pill: 999px;
+  --noe-primitive-duration-fast: 120ms;
+  --noe-primitive-duration-normal: 200ms;
+  --noe-primitive-duration-slow: 320ms;
+}
+
+/* Semantic tokens: shared scales and contracts. */
+:root {
+  --noe-font-family-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, IRANYekanXFaNum, sans-serif;
+  --noe-font-family-heading: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, IRANYekanXFaNum, sans-serif;
+  --noe-font-family-mono: "SFMono-Regular", "SF Pro Display", "SF Pro Text", Consolas, "Liberation Mono", monospace;
+  --noe-font-size-xs: 0.75rem;
+  --noe-font-size-sm: 0.875rem;
+  --noe-font-size-md: 1rem;
+  --noe-font-size-lg: 1.125rem;
+  --noe-font-size-xl: 1.375rem;
+  --noe-font-size-2xl: clamp(1.75rem, 3vw, 2.75rem);
+  --noe-font-size-display: clamp(2.6rem, 7vw, 6.75rem);
+  --noe-font-weight-regular: 400;
+  --noe-font-weight-medium: 500;
+  --noe-font-weight-semibold: 600;
+  --noe-font-leading-tight: 1.08;
+  --noe-font-leading-snug: 1.3;
+  --noe-font-leading-normal: 1.55;
+  --noe-font-tracking-tight: -0.025em;
+  --noe-font-tracking-normal: 0;
+  --noe-space-0: var(--noe-primitive-space-0);
+  --noe-space-1: var(--noe-primitive-space-1);
+  --noe-space-2: var(--noe-primitive-space-2);
+  --noe-space-3: var(--noe-primitive-space-3);
+  --noe-space-4: var(--noe-primitive-space-4);
+  --noe-space-5: var(--noe-primitive-space-5);
+  --noe-space-6: var(--noe-primitive-space-6);
+  --noe-space-8: var(--noe-primitive-space-8);
+  --noe-space-10: var(--noe-primitive-space-10);
+  --noe-space-12: var(--noe-primitive-space-12);
+  --noe-space-16: var(--noe-primitive-space-16);
+  --noe-space-20: var(--noe-primitive-space-20);
+  --noe-space-24: var(--noe-primitive-space-24);
+  --noe-radius-sm: var(--noe-primitive-radius-sm);
+  --noe-radius-md: var(--noe-primitive-radius-md);
+  --noe-radius-lg: var(--noe-primitive-radius-lg);
+  --noe-radius-xl: var(--noe-primitive-radius-xl);
+  --noe-radius-pill: var(--noe-primitive-radius-pill);
+  --noe-border-width-hairline: 1px;
+  --noe-border-width-strong: 2px;
+  --noe-control-height-sm: 2rem;
+  --noe-control-height-md: 2.5rem;
+  --noe-control-height-lg: 3rem;
+  --noe-icon-size-sm: 1rem;
+  --noe-icon-size-md: 1.25rem;
+  --noe-icon-size-lg: 1.5rem;
+  --noe-z-index-base: 0;
+  --noe-z-index-sticky: 20;
+  --noe-z-index-overlay: 60;
+  --noe-z-index-toast: 80;
+  --noe-motion-duration-fast: var(--noe-primitive-duration-fast);
+  --noe-motion-duration-normal: var(--noe-primitive-duration-normal);
+  --noe-motion-duration-slow: var(--noe-primitive-duration-slow);
+  --noe-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --noe-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --noe-container-sm: 42rem;
+  --noe-container-md: 64rem;
+  --noe-container-lg: 80rem;
+  --noe-container-xl: 96rem;
+}
+
+/* Semantic tokens: light is the explicit and no-preference theme. */
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --noe-color-background: var(--noe-primitive-color-paper-100);
+  --noe-color-surface: var(--noe-primitive-color-paper-50);
+  --noe-color-surface-raised: var(--noe-primitive-color-paper-0);
+  --noe-color-surface-sunken: var(--noe-primitive-color-paper-200);
+  --noe-color-foreground: var(--noe-primitive-color-ink-900);
+  --noe-color-muted: var(--noe-primitive-color-paper-200);
+  --noe-color-muted-foreground: var(--noe-primitive-color-ink-500);
+  --noe-color-border: rgba(23, 25, 24, 0.16);
+  --noe-color-border-strong: var(--noe-primitive-color-ink-300);
+  --noe-color-accent: var(--noe-primitive-color-mint-500);
+  --noe-color-accent-hover: var(--noe-primitive-color-mint-400);
+  --noe-color-accent-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-signal: var(--noe-primitive-color-coral-500);
+  --noe-color-success: var(--noe-primitive-color-green-600);
+  --noe-color-success-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-warning: var(--noe-primitive-color-amber-500);
+  --noe-color-warning-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-destructive: var(--noe-primitive-color-coral-500);
+  --noe-color-destructive-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-info: var(--noe-primitive-color-cyan-500);
+  --noe-color-info-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-light);
+  --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-light);
+  --noe-shadow-raised: 0 1px 2px rgba(23, 25, 24, 0.05), 0 14px 34px rgba(23, 25, 24, 0.07);
+  --noe-shadow-overlay: 0 24px 64px rgba(23, 25, 24, 0.16);
+}
+
+/* Semantic tokens: explicit dark theme. */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --noe-color-background: var(--noe-primitive-color-ink-950);
+  --noe-color-surface: var(--noe-primitive-color-ink-850);
+  --noe-color-surface-raised: var(--noe-primitive-color-ink-800);
+  --noe-color-surface-sunken: var(--noe-primitive-color-ink-1000);
+  --noe-color-foreground: var(--noe-primitive-color-paper-250);
+  --noe-color-muted: var(--noe-primitive-color-ink-800);
+  --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);
+  --noe-color-border: rgba(246, 244, 242, 0.14);
+  --noe-color-border-strong: var(--noe-primitive-color-ink-600);
+  --noe-color-accent: var(--noe-primitive-color-mint-100);
+  --noe-color-accent-hover: var(--noe-primitive-color-mint-200);
+  --noe-color-accent-foreground: var(--noe-primitive-color-ink-950);
+  --noe-color-signal: var(--noe-primitive-color-coral-400);
+  --noe-color-success: var(--noe-primitive-color-green-500);
+  --noe-color-success-foreground: var(--noe-primitive-color-ink-950);
+  --noe-color-warning: var(--noe-primitive-color-amber-400);
+  --noe-color-warning-foreground: var(--noe-primitive-color-ink-950);
+  --noe-color-destructive: var(--noe-primitive-color-red-500);
+  --noe-color-destructive-foreground: var(--noe-primitive-color-ink-950);
+  --noe-color-info: var(--noe-primitive-color-blue-500);
+  --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
+  --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
+  --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
+  --noe-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 48px rgba(0, 0, 0, 0.26);
+  --noe-shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.46);
+}
+
+/* Semantic tokens: follow the OS only when no explicit theme is set. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --noe-color-background: var(--noe-primitive-color-ink-950);
+    --noe-color-surface: var(--noe-primitive-color-ink-850);
+    --noe-color-surface-raised: var(--noe-primitive-color-ink-800);
+    --noe-color-surface-sunken: var(--noe-primitive-color-ink-1000);
+    --noe-color-foreground: var(--noe-primitive-color-paper-250);
+    --noe-color-muted: var(--noe-primitive-color-ink-800);
+    --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);
+    --noe-color-border: rgba(246, 244, 242, 0.14);
+    --noe-color-border-strong: var(--noe-primitive-color-ink-600);
+    --noe-color-accent: var(--noe-primitive-color-mint-100);
+    --noe-color-accent-hover: var(--noe-primitive-color-mint-200);
+    --noe-color-accent-foreground: var(--noe-primitive-color-ink-950);
+    --noe-color-signal: var(--noe-primitive-color-coral-400);
+    --noe-color-success: var(--noe-primitive-color-green-500);
+    --noe-color-success-foreground: var(--noe-primitive-color-ink-950);
+    --noe-color-warning: var(--noe-primitive-color-amber-400);
+    --noe-color-warning-foreground: var(--noe-primitive-color-ink-950);
+    --noe-color-destructive: var(--noe-primitive-color-red-500);
+    --noe-color-destructive-foreground: var(--noe-primitive-color-ink-950);
+    --noe-color-info: var(--noe-primitive-color-blue-500);
+    --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
+    --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
+    --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
+    --noe-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 48px rgba(0, 0, 0, 0.26);
+    --noe-shadow-overlay: 0 30px 80px rgba(0, 0, 0, 0.46);
+  }
+}
+
+/* Palette: Graphite is the only approved palette. Extendable via [data-noe-palette="..."] overrides. */
+:root,
+[data-noe-palette="graphite"] {
+  /* No overrides — graphite uses the default semantic tokens above. */
+}
+
+/* Component tokens: stable customization seams. */
+:root {
+  --noe-component-button-height: var(--noe-control-height-md);
+  --noe-component-button-radius: var(--noe-radius-md);
+  --noe-component-button-gap: var(--noe-space-2);
+  --noe-component-field-gap: var(--noe-space-2);
+  --noe-component-dialog-radius: var(--noe-radius-lg);
+  --noe-component-dialog-padding: var(--noe-space-6);
+  --noe-component-dialog-width: 32rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --noe-motion-duration-fast: 1ms;
+    --noe-motion-duration-normal: 1ms;
+    --noe-motion-duration-slow: 1ms;
+  }
+}

package/packages/design-tokens/src/tokens.json

@@ -0,0 +1,275 @@
+{
+  "primitive": {
+    "color": {
+      "paper": {
+        "0": "#ffffff",
+        "50": "#f6f4f2",
+        "100": "#f3f0ea",
+        "200": "#e8e3dc",
+        "250": "#f6f4f2",
+        "300": "#e7e2da"
+      },
+      "ink": {
+        "300": "#a6a19c",
+        "400": "#a6a19c",
+        "500": "#565c58",
+        "600": "#302f2e",
+        "700": "#252423",
+        "800": "#302f2e",
+        "850": "#302f2e",
+        "900": "#171918",
+        "950": "#252423",
+        "1000": "#1c1b1b"
+      },
+      "mint": {
+        "100": "#98e8cf",
+        "200": "#abefd9",
+        "300": "#1dbf98",
+        "400": "#0f6d5b",
+        "500": "#0b6f6b",
+        "600": "#095c59"
+      },
+      "coral": {
+        "400": "#ff5b57",
+        "500": "#c43f3c",
+        "600": "#9e2f2c"
+      },
+      "amber": {
+        "400": "#ffb84a",
+        "500": "#986000"
+      },
+      "cyan": {
+        "400": "#55d6ff",
+        "500": "#006d91"
+      },
+      "violet": {
+        "400": "#7478ff",
+        "500": "#5753bd"
+      },
+      "ember": {
+        "400": "oklch(0.775 0.155 38)",
+        "500": "oklch(0.745 0.155 36)",
+        "550": "oklch(0.72 0.17 34)",
+        "600": "oklch(0.675 0.185 32)",
+        "700": "oklch(0.625 0.195 30)"
+      },
+      "green": {
+        "500": "#1dbf98",
+        "600": "#0b6f6b"
+      },
+      "red": {
+        "500": "#ff5b57",
+        "600": "#c43f3c"
+      },
+      "blue": {
+        "500": "#55d6ff",
+        "600": "#006d91"
+      },
+      "alpha": {
+        "focusLight": "rgba(11, 111, 107, 0.32)",
+        "focusDark": "rgba(152, 232, 207, 0.45)",
+        "overlayLight": "rgba(23, 25, 24, 0.08)",
+        "overlayDark": "rgba(0, 0, 0, 0.62)"
+      }
+    },
+    "space": {
+      "0": "0",
+      "1": "0.25rem",
+      "2": "0.5rem",
+      "3": "0.75rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "8": "2rem",
+      "10": "2.5rem",
+      "12": "3rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem"
+    },
+    "radius": {
+      "sm": "0.375rem",
+      "md": "0.625rem",
+      "lg": "0.875rem",
+      "xl": "1.25rem",
+      "pill": "999px"
+    },
+    "duration": {
+      "fast": "120ms",
+      "normal": "200ms",
+      "slow": "320ms"
+    }
+  },
+  "color": {
+    "light": {
+      "background": "{primitive.color.paper.100}",
+      "surface": "{primitive.color.paper.50}",
+      "surfaceRaised": "{primitive.color.paper.0}",
+      "surfaceSunken": "{primitive.color.paper.200}",
+      "foreground": "{primitive.color.ink.900}",
+      "muted": "{primitive.color.paper.200}",
+      "mutedForeground": "{primitive.color.ink.500}",
+      "border": "rgba(23, 25, 24, 0.16)",
+      "borderStrong": "{primitive.color.ink.300}",
+      "accent": "{primitive.color.mint.500}",
+      "accentHover": "{primitive.color.mint.400}",
+      "accentForeground": "{primitive.color.paper.0}",
+      "signal": "{primitive.color.coral.500}",
+      "success": "{primitive.color.green.600}",
+      "successForeground": "{primitive.color.paper.0}",
+      "warning": "{primitive.color.amber.500}",
+      "warningForeground": "{primitive.color.paper.0}",
+      "destructive": "{primitive.color.coral.500}",
+      "destructiveForeground": "{primitive.color.paper.0}",
+      "info": "{primitive.color.cyan.500}",
+      "infoForeground": "{primitive.color.paper.0}",
+      "focusRing": "{primitive.color.alpha.focusLight}",
+      "overlay": "{primitive.color.alpha.overlayLight}"
+    },
+    "dark": {
+      "background": "{primitive.color.ink.950}",
+      "surface": "{primitive.color.ink.850}",
+      "surfaceRaised": "{primitive.color.ink.800}",
+      "surfaceSunken": "{primitive.color.ink.1000}",
+      "foreground": "{primitive.color.paper.250}",
+      "muted": "{primitive.color.ink.800}",
+      "mutedForeground": "{primitive.color.ink.400}",
+      "border": "rgba(246, 244, 242, 0.14)",
+      "borderStrong": "{primitive.color.ink.600}",
+      "accent": "{primitive.color.mint.100}",
+      "accentHover": "{primitive.color.mint.200}",
+      "accentForeground": "{primitive.color.ink.950}",
+      "signal": "{primitive.color.coral.400}",
+      "success": "{primitive.color.green.500}",
+      "successForeground": "{primitive.color.ink.950}",
+      "warning": "{primitive.color.amber.400}",
+      "warningForeground": "{primitive.color.ink.950}",
+      "destructive": "{primitive.color.red.500}",
+      "destructiveForeground": "{primitive.color.ink.950}",
+      "info": "{primitive.color.blue.500}",
+      "infoForeground": "{primitive.color.ink.950}",
+      "focusRing": "{primitive.color.alpha.focusDark}",
+      "overlay": "{primitive.color.alpha.overlayDark}"
+    }
+  },
+  "shadow": {
+    "light": {
+      "raised": "0 1px 2px rgba(23, 25, 24, 0.05), 0 14px 34px rgba(23, 25, 24, 0.07)",
+      "overlay": "0 24px 64px rgba(23, 25, 24, 0.16)"
+    },
+    "dark": {
+      "raised": "0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 48px rgba(0, 0, 0, 0.26)",
+      "overlay": "0 30px 80px rgba(0, 0, 0, 0.46)"
+    }
+  },
+  "font": {
+    "family": {
+      "sans": "\"SF Pro Display\", \"SF Pro Text\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, IRANYekanXFaNum, sans-serif",
+      "heading": "\"SF Pro Display\", \"SF Pro Text\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, IRANYekanXFaNum, sans-serif",
+      "mono": "\"SFMono-Regular\", \"SF Pro Display\", \"SF Pro Text\", Consolas, \"Liberation Mono\", monospace"
+    },
+    "size": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "md": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.375rem",
+      "2xl": "clamp(1.75rem, 3vw, 2.75rem)",
+      "display": "clamp(2.6rem, 7vw, 6.75rem)"
+    },
+    "weight": {
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600"
+    },
+    "leading": {
+      "tight": "1.08",
+      "snug": "1.3",
+      "normal": "1.55"
+    },
+    "tracking": {
+      "tight": "-0.025em",
+      "normal": "0"
+    }
+  },
+  "space": {
+    "0": "{primitive.space.0}",
+    "1": "{primitive.space.1}",
+    "2": "{primitive.space.2}",
+    "3": "{primitive.space.3}",
+    "4": "{primitive.space.4}",
+    "5": "{primitive.space.5}",
+    "6": "{primitive.space.6}",
+    "8": "{primitive.space.8}",
+    "10": "{primitive.space.10}",
+    "12": "{primitive.space.12}",
+    "16": "{primitive.space.16}",
+    "20": "{primitive.space.20}",
+    "24": "{primitive.space.24}"
+  },
+  "radius": {
+    "sm": "{primitive.radius.sm}",
+    "md": "{primitive.radius.md}",
+    "lg": "{primitive.radius.lg}",
+    "xl": "{primitive.radius.xl}",
+    "pill": "{primitive.radius.pill}"
+  },
+  "border": {
+    "width": {
+      "hairline": "1px",
+      "strong": "2px"
+    }
+  },
+  "control": {
+    "height": {
+      "sm": "2rem",
+      "md": "2.5rem",
+      "lg": "3rem"
+    }
+  },
+  "icon": {
+    "size": {
+      "sm": "1rem",
+      "md": "1.25rem",
+      "lg": "1.5rem"
+    }
+  },
+  "zIndex": {
+    "base": "0",
+    "sticky": "20",
+    "overlay": "60",
+    "toast": "80"
+  },
+  "motion": {
+    "duration": {
+      "fast": "{primitive.duration.fast}",
+      "normal": "{primitive.duration.normal}",
+      "slow": "{primitive.duration.slow}"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.2, 0, 0, 1)",
+      "emphasized": "cubic-bezier(0.16, 1, 0.3, 1)"
+    }
+  },
+  "container": {
+    "sm": "42rem",
+    "md": "64rem",
+    "lg": "80rem",
+    "xl": "96rem"
+  },
+  "component": {
+    "button": {
+      "height": "{control.height.md}",
+      "radius": "{radius.md}",
+      "gap": "{space.2}"
+    },
+    "field": {
+      "gap": "{space.2}"
+    },
+    "dialog": {
+      "radius": "{radius.lg}",
+      "padding": "{space.6}",
+      "width": "32rem"
+    }
+  }
+}