@mesgflow/ui-kit 0.6.0 → 0.7.0

package/tokens.json

@@ -0,0 +1,1583 @@
+{
+  "$description": "@mesgflow/ui-kit 0.6.0 design tokens (W3C DTCG). Generated from projects/ui-kit/styles/tokens/*.css by scripts/export-tokens.mjs — do not edit.",
+  "primitives": {
+    "color": {
+      "primary": {
+        "50": {
+          "$type": "color",
+          "$value": "#eef9f5"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#d9f2ea"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#b4e6d6"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#81d0ba"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#10b981"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#059669"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#004d40"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0a4335"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#05362b"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#062c22"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#061d17"
+        },
+        "default": {
+          "$value": "var(--color-primary-600)",
+          "$extensions": {
+            "com.mesgflow.css": "var(--color-primary-600)"
+          }
+        }
+      },
+      "neutral": {
+        "50": {
+          "$type": "color",
+          "$value": "#f6f8f7"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f4f6f5"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#e8ecea"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#d8e0dc"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#b4bfbb"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#86948f"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#5e6d67"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#40504b"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#233530"
+        },
+        "850": {
+          "$type": "color",
+          "$value": "#192723"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#121e1b"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#0b1311"
+        },
+        "975": {
+          "$type": "color",
+          "$value": "#070e0c"
+        }
+      },
+      "success": {
+        "50": {
+          "$type": "color",
+          "$value": "#eefcef"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#d9f9dc"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#b5ebbc"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#91dd9c"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#68cf7b"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#52b666"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#419351"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#357642"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#2b5d34"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#1d4725"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#123218"
+        }
+      },
+      "warning": {
+        "50": {
+          "$type": "color",
+          "$value": "#fffae6"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#fef3c7"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f8da94"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f6be5f"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#f59e0b"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#e78a05"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#d97706"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#a64b08"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#92400e"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#762e00"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#572101"
+        }
+      },
+      "danger": {
+        "50": {
+          "$type": "color",
+          "$value": "#fef5f5"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#fde8e8"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f8c2c1"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f09b9a"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#e87878"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#d65453"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#c53030"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#b02626"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#9b1c1c"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#7c080d"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#5a0407"
+        }
+      },
+      "info": {
+        "50": {
+          "$type": "color",
+          "$value": "#f1f9ff"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#e0f2fe"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#b2e1fe"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#7ecffc"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#38bdf8"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#20a0e0"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#0284c7"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0369a1"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#075985"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#00446a"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#00304c"
+        }
+      },
+      "help": {
+        "50": {
+          "$type": "color",
+          "$value": "#f7f5ff"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#ede9fe"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#d5cafe"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#bdabfd"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#a78bfa"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#9370f2"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#6d28d9"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#6424c7"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#5b21b6"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#460b93"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#31046b"
+        }
+      }
+    },
+    "ease": {
+      "emphasis": {
+        "$type": "cubicBezier",
+        "$value": [0.2, 0, 0, 1]
+      },
+      "exit": {
+        "$type": "cubicBezier",
+        "$value": [0.4, 0, 1, 1]
+      },
+      "spring": {
+        "$value": "linear( 0, 0.406 6.3%, 0.67 12.5%, 0.834 18.8%, 0.932 25%, 0.987 31.3%, 1.014 37.5%, 1.026 43.8%, 1.028 50%, 1.026 56.3%, 1.022 62.5%, 1.017 68.8%, 1.013 75%, 1.01 81.3%, 1.007 87.5%, 1.005 93.8%, 1 )",
+        "$extensions": {
+          "com.mesgflow.css": "linear( 0, 0.406 6.3%, 0.67 12.5%, 0.834 18.8%, 0.932 25%, 0.987 31.3%, 1.014 37.5%, 1.026 43.8%, 1.028 50%, 1.026 56.3%, 1.022 62.5%, 1.017 68.8%, 1.013 75%, 1.01 81.3%, 1.007 87.5%, 1.005 93.8%, 1 )"
+        }
+      }
+    },
+    "duration": {
+      "instant": {
+        "$type": "duration",
+        "$value": "80ms"
+      },
+      "fast": {
+        "$type": "duration",
+        "$value": "120ms"
+      },
+      "base": {
+        "$type": "duration",
+        "$value": "180ms"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "260ms"
+      },
+      "slower": {
+        "$type": "duration",
+        "$value": "400ms"
+      }
+    },
+    "animate": {
+      "progress-slide": {
+        "$value": "progress-slide 1.1s var(--ease-emphasis) infinite",
+        "$extensions": {
+          "com.mesgflow.css": "progress-slide 1.1s var(--ease-emphasis) infinite"
+        }
+      },
+      "spin-slow": {
+        "$value": "ring-spin 1.4s linear infinite",
+        "$extensions": {
+          "com.mesgflow.css": "ring-spin 1.4s linear infinite"
+        }
+      },
+      "dialog-in": {
+        "$value": "dialog-in var(--duration-slow) var(--ease-spring)",
+        "$extensions": {
+          "com.mesgflow.css": "dialog-in var(--duration-slow) var(--ease-spring)"
+        }
+      },
+      "dialog-out": {
+        "$value": "dialog-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "dialog-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "sheet-in": {
+        "$value": "sheet-in var(--duration-slow) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "sheet-in var(--duration-slow) var(--ease-emphasis)"
+        }
+      },
+      "sheet-out": {
+        "$value": "sheet-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "sheet-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "drawer-in": {
+        "$value": "drawer-in var(--duration-slow) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-in var(--duration-slow) var(--ease-emphasis)"
+        }
+      },
+      "drawer-out": {
+        "$value": "drawer-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "drawer-start-in": {
+        "$value": "drawer-start-in var(--duration-slow) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-start-in var(--duration-slow) var(--ease-emphasis)"
+        }
+      },
+      "drawer-start-out": {
+        "$value": "drawer-start-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-start-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "drawer-top-in": {
+        "$value": "drawer-top-in var(--duration-slow) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-top-in var(--duration-slow) var(--ease-emphasis)"
+        }
+      },
+      "drawer-top-out": {
+        "$value": "drawer-top-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "drawer-top-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "pop": {
+        "$value": "pop var(--duration-base) var(--ease-spring)",
+        "$extensions": {
+          "com.mesgflow.css": "pop var(--duration-base) var(--ease-spring)"
+        }
+      },
+      "overlay-in": {
+        "$value": "overlay-in var(--duration-base) var(--ease-spring)",
+        "$extensions": {
+          "com.mesgflow.css": "overlay-in var(--duration-base) var(--ease-spring)"
+        }
+      },
+      "overlay-out": {
+        "$value": "overlay-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "overlay-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "toast-in": {
+        "$value": "toast-in var(--duration-slow) var(--ease-spring)",
+        "$extensions": {
+          "com.mesgflow.css": "toast-in var(--duration-slow) var(--ease-spring)"
+        }
+      },
+      "toast-out": {
+        "$value": "toast-out var(--mf-duration-exit) var(--ease-exit) forwards",
+        "$extensions": {
+          "com.mesgflow.css": "toast-out var(--mf-duration-exit) var(--ease-exit) forwards"
+        }
+      },
+      "countdown": {
+        "$value": "countdown var(--mf-toast-duration, 5s) linear forwards",
+        "$extensions": {
+          "com.mesgflow.css": "countdown var(--mf-toast-duration, 5s) linear forwards"
+        }
+      },
+      "list-in": {
+        "$value": "list-in var(--duration-slow) var(--ease-emphasis) both",
+        "$extensions": {
+          "com.mesgflow.css": "list-in var(--duration-slow) var(--ease-emphasis) both"
+        }
+      },
+      "draw": {
+        "$value": "draw var(--duration-base) var(--ease-emphasis) both",
+        "$extensions": {
+          "com.mesgflow.css": "draw var(--duration-base) var(--ease-emphasis) both"
+        }
+      },
+      "shimmer": {
+        "$value": "shimmer 1.6s var(--ease-emphasis) infinite",
+        "$extensions": {
+          "com.mesgflow.css": "shimmer 1.6s var(--ease-emphasis) infinite"
+        }
+      },
+      "fade-in": {
+        "$value": "fade-in var(--duration-base) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "fade-in var(--duration-base) var(--ease-emphasis)"
+        }
+      },
+      "panel-in": {
+        "$value": "panel-in var(--duration-base) var(--ease-emphasis)",
+        "$extensions": {
+          "com.mesgflow.css": "panel-in var(--duration-base) var(--ease-emphasis)"
+        }
+      }
+    },
+    "radius": {
+      "xs": {
+        "$type": "dimension",
+        "$value": "4px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "6px"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "8px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "12px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "16px"
+      }
+    },
+    "control-h": {
+      "xs": {
+        "$type": "dimension",
+        "$value": "1.75rem"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "2.25rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "3rem"
+      }
+    },
+    "font": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": ["Inter Variable", "Inter", "ui-sans-serif", "system-ui", "sans-serif"]
+      },
+      "display": {
+        "$type": "fontFamily",
+        "$value": [
+          "Space Grotesk Variable",
+          "Space Grotesk",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif"
+        ]
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": [
+          "JetBrains Mono Variable",
+          "JetBrains Mono",
+          "ui-monospace",
+          "Cascadia Code",
+          "monospace"
+        ]
+      }
+    },
+    "text": {
+      "label": {
+        "default": {
+          "$type": "dimension",
+          "$value": "0.8125rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.3
+        },
+        "font-weight": {
+          "$type": "number",
+          "$value": 500
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "0.01em"
+        }
+      },
+      "caption": {
+        "default": {
+          "$type": "dimension",
+          "$value": "0.6875rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.3
+        }
+      },
+      "eyebrow": {
+        "default": {
+          "$type": "dimension",
+          "$value": "0.6875rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.2
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "0.12em"
+        },
+        "font-weight": {
+          "$type": "number",
+          "$value": 600
+        }
+      },
+      "title-sm": {
+        "default": {
+          "$type": "dimension",
+          "$value": "0.9375rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.4
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.006em"
+        }
+      },
+      "title": {
+        "default": {
+          "$type": "dimension",
+          "$value": "1.125rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.35
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.012em"
+        }
+      },
+      "title-lg": {
+        "default": {
+          "$type": "dimension",
+          "$value": "1.375rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.25
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.018em"
+        }
+      },
+      "display": {
+        "default": {
+          "$value": "clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem)",
+          "$extensions": {
+            "com.mesgflow.css": "clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem)"
+          }
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.15
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.026em"
+        }
+      },
+      "display-lg": {
+        "default": {
+          "$value": "clamp(1.875rem, 1.4rem + 2vw, 2.5rem)",
+          "$extensions": {
+            "com.mesgflow.css": "clamp(1.875rem, 1.4rem + 2vw, 2.5rem)"
+          }
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1.08
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.03em"
+        }
+      },
+      "metric": {
+        "default": {
+          "$type": "dimension",
+          "$value": "1.75rem"
+        },
+        "line-height": {
+          "$type": "number",
+          "$value": 1
+        },
+        "letter-spacing": {
+          "$type": "dimension",
+          "$value": "-0.02em"
+        }
+      }
+    },
+    "tracking": {
+      "label": {
+        "$type": "dimension",
+        "$value": "0.015em"
+      }
+    }
+  },
+  "light": {
+    "mf": {
+      "canvas": {
+        "$type": "color",
+        "$value": "{color.neutral.100}"
+      },
+      "surface": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "surface-alt": {
+        "$type": "color",
+        "$value": "{color.neutral.200}"
+      },
+      "chrome": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "surface-sunken": {
+        "$type": "color",
+        "$value": "{color.neutral.50}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{color.neutral.300}"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "surface-inverse": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "glass": {
+        "$type": "color",
+        "$value": "rgba(255, 255, 255, 0.82)"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.200}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.300}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{color.neutral.400}"
+      },
+      "hairline": {
+        "$type": "color",
+        "$value": "rgba(11, 61, 36, 0.16)"
+      },
+      "state-hover": {
+        "$type": "color",
+        "$value": "rgba(10, 28, 23, 0.05)"
+      },
+      "state-pressed": {
+        "$type": "color",
+        "$value": "rgba(10, 28, 23, 0.09)"
+      },
+      "state-selected": {
+        "$type": "color",
+        "$value": "rgba(10, 28, 23, 0.07)"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "#0a1c17"
+      },
+      "fg-muted": {
+        "$type": "color",
+        "$value": "#4a5d56"
+      },
+      "fg-subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.500}"
+      },
+      "fg-on-accent": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "fg-inverse": {
+        "$type": "color",
+        "$value": "#f8fafc"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.primary.600}"
+      },
+      "accent-strong": {
+        "$type": "color",
+        "$value": "{color.primary.700}"
+      },
+      "focus-ring": {
+        "$type": "color",
+        "$value": "{color.primary.600}"
+      },
+      "accent-fill": {
+        "$type": "color",
+        "$value": "{color.primary.900}"
+      },
+      "accent-fill-hover": {
+        "$type": "color",
+        "$value": "{color.primary.700}"
+      },
+      "primary-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-primary-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-primary-600) 12%, transparent)"
+        }
+      },
+      "primary-tint-fg": {
+        "$type": "color",
+        "$value": "{color.primary.800}"
+      },
+      "neutral-fill": {
+        "$type": "color",
+        "$value": "#e2e8e5"
+      },
+      "neutral-fill-hover": {
+        "$type": "color",
+        "$value": "#d1dcd7"
+      },
+      "neutral-fill-fg": {
+        "$type": "color",
+        "$value": "#1c2825"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.success.700}"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.warning.700}"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "{color.danger.600}"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.info.700}"
+      },
+      "help": {
+        "$type": "color",
+        "$value": "{color.help.600}"
+      },
+      "success-fill": {
+        "$type": "color",
+        "$value": "{color.success.600}"
+      },
+      "success-fill-hover": {
+        "$type": "color",
+        "$value": "{color.success.500}"
+      },
+      "success-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "warning-fill": {
+        "$type": "color",
+        "$value": "{color.warning.600}"
+      },
+      "warning-fill-hover": {
+        "$type": "color",
+        "$value": "{color.warning.500}"
+      },
+      "warning-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "danger-fill": {
+        "$type": "color",
+        "$value": "{color.danger.600}"
+      },
+      "danger-fill-hover": {
+        "$type": "color",
+        "$value": "{color.danger.700}"
+      },
+      "danger-fill-fg": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "info-fill": {
+        "$type": "color",
+        "$value": "{color.info.700}"
+      },
+      "info-fill-hover": {
+        "$type": "color",
+        "$value": "{color.info.800}"
+      },
+      "info-fill-fg": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "help-fill": {
+        "$type": "color",
+        "$value": "{color.help.600}"
+      },
+      "help-fill-hover": {
+        "$type": "color",
+        "$value": "{color.help.700}"
+      },
+      "help-fill-fg": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "success-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-success-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-success-600) 12%, transparent)"
+        }
+      },
+      "success-tint-fg": {
+        "$type": "color",
+        "$value": "{color.success.800}"
+      },
+      "warning-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-warning-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-warning-600) 12%, transparent)"
+        }
+      },
+      "warning-tint-fg": {
+        "$type": "color",
+        "$value": "{color.warning.800}"
+      },
+      "danger-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-danger-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-danger-600) 12%, transparent)"
+        }
+      },
+      "danger-tint-fg": {
+        "$type": "color",
+        "$value": "{color.danger.800}"
+      },
+      "info-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-info-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-info-600) 12%, transparent)"
+        }
+      },
+      "info-tint-fg": {
+        "$type": "color",
+        "$value": "{color.info.800}"
+      },
+      "help-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-help-600) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-help-600) 12%, transparent)"
+        }
+      },
+      "help-tint-fg": {
+        "$type": "color",
+        "$value": "{color.help.800}"
+      },
+      "fg-on-success": {
+        "$value": "var(--mf-success-fill-fg)",
+        "$extensions": {
+          "com.mesgflow.css": "var(--mf-success-fill-fg)"
+        }
+      },
+      "fg-on-warning": {
+        "$value": "var(--mf-warning-fill-fg)",
+        "$extensions": {
+          "com.mesgflow.css": "var(--mf-warning-fill-fg)"
+        }
+      },
+      "chart-1": {
+        "$type": "color",
+        "$value": "#078968"
+      },
+      "chart-2": {
+        "$type": "color",
+        "$value": "#3370c7"
+      },
+      "chart-3": {
+        "$type": "color",
+        "$value": "#c85c2e"
+      },
+      "chart-4": {
+        "$type": "color",
+        "$value": "#7a53b4"
+      },
+      "chart-5": {
+        "$type": "color",
+        "$value": "#6f8d2a"
+      },
+      "chart-6": {
+        "$type": "color",
+        "$value": "#068db6"
+      },
+      "chart-7": {
+        "$type": "color",
+        "$value": "#b87501"
+      },
+      "chart-8": {
+        "$type": "color",
+        "$value": "#bb4e7f"
+      },
+      "chart-other": {
+        "$type": "color",
+        "$value": "{color.neutral.600}"
+      },
+      "chart-seq-1": {
+        "$type": "color",
+        "$value": "#bfe9d8"
+      },
+      "chart-seq-2": {
+        "$type": "color",
+        "$value": "#75c4a6"
+      },
+      "chart-seq-3": {
+        "$type": "color",
+        "$value": "#2fa984"
+      },
+      "chart-seq-4": {
+        "$type": "color",
+        "$value": "#068262"
+      },
+      "chart-seq-5": {
+        "$type": "color",
+        "$value": "#035b44"
+      },
+      "chart-div-1": {
+        "$type": "color",
+        "$value": "#ac430e"
+      },
+      "chart-div-2": {
+        "$type": "color",
+        "$value": "#dda189"
+      },
+      "chart-div-3": {
+        "$type": "color",
+        "$value": "{color.neutral.200}"
+      },
+      "chart-div-4": {
+        "$type": "color",
+        "$value": "#96b3de"
+      },
+      "chart-div-5": {
+        "$type": "color",
+        "$value": "#2460b7"
+      },
+      "gradient-brand": {
+        "$value": "linear-gradient( 135deg, var(--color-primary-500) 0%, var(--color-primary-700) 55%, var(--color-primary-900) 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "linear-gradient( 135deg, var(--color-primary-500) 0%, var(--color-primary-700) 55%, var(--color-primary-900) 100% )"
+        }
+      },
+      "gradient-text": {
+        "$value": "linear-gradient( 120deg, var(--color-primary-700) 0%, var(--color-primary-500) 50%, var(--color-info-600, var(--color-primary-600)) 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "linear-gradient( 120deg, var(--color-primary-700) 0%, var(--color-primary-500) 50%, var(--color-info-600, var(--color-primary-600)) 100% )"
+        }
+      },
+      "glow-brand": {
+        "$value": "radial-gradient( 60% 55% at 50% 0%, color-mix(in srgb, var(--color-primary-300) 45%, transparent) 0%, transparent 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "radial-gradient( 60% 55% at 50% 0%, color-mix(in srgb, var(--color-primary-300) 45%, transparent) 0%, transparent 100% )"
+        }
+      },
+      "grid-line": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-primary-900) 6%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-primary-900) 6%, transparent)"
+        }
+      },
+      "shadow-1": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(6, 44, 34, 0.06)"
+      },
+      "shadow-2": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(6, 44, 34, 0.05), 0 8px 24px -10px rgba(6, 44, 34, 0.18)"
+      },
+      "shadow-3": {
+        "$type": "shadow",
+        "$value": "0 2px 6px -1px rgba(6, 44, 34, 0.06), 0 24px 56px -16px rgba(6, 44, 34, 0.26)"
+      },
+      "shadow-highlight": {
+        "$value": "0 0 #0000",
+        "$extensions": {
+          "com.mesgflow.css": "0 0 #0000"
+        }
+      },
+      "shadow-control": {
+        "$type": "shadow",
+        "$value": "0 1px 1px rgba(6, 44, 34, 0.04)"
+      },
+      "shadow-filled": {
+        "$type": "shadow",
+        "$value": "0 1px 0 rgba(6, 44, 34, 0.12), 0 1px 2px rgba(6, 44, 34, 0.14)"
+      },
+      "shadow-glow": {
+        "$type": "shadow",
+        "$value": "0 1px 0 rgba(6, 44, 34, 0.12), 0 1px 2px rgba(6, 44, 34, 0.14)"
+      },
+      "duration-exit": {
+        "$type": "duration",
+        "$value": "120ms"
+      },
+      "dir": {
+        "$type": "number",
+        "$value": 1
+      }
+    }
+  },
+  "dark": {
+    "mf": {
+      "canvas": {
+        "$type": "color",
+        "$value": "{color.neutral.950}"
+      },
+      "surface": {
+        "$type": "color",
+        "$value": "{color.neutral.900}"
+      },
+      "surface-alt": {
+        "$type": "color",
+        "$value": "{color.neutral.850}"
+      },
+      "chrome": {
+        "$type": "color",
+        "$value": "{color.neutral.975}"
+      },
+      "surface-sunken": {
+        "$type": "color",
+        "$value": "{color.neutral.950}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{color.neutral.800}"
+      },
+      "overlay": {
+        "$type": "color",
+        "$value": "{color.neutral.850}"
+      },
+      "surface-inverse": {
+        "$type": "color",
+        "$value": "#f8fafc"
+      },
+      "glass": {
+        "$value": "var(--mf-surface)",
+        "$extensions": {
+          "com.mesgflow.css": "var(--mf-surface)"
+        }
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.700}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.600}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{color.neutral.500}"
+      },
+      "hairline": {
+        "$type": "color",
+        "$value": "{color.neutral.600}"
+      },
+      "state-hover": {
+        "$type": "color",
+        "$value": "rgba(236, 243, 240, 0.1)"
+      },
+      "state-pressed": {
+        "$type": "color",
+        "$value": "rgba(236, 243, 240, 0.18)"
+      },
+      "state-selected": {
+        "$type": "color",
+        "$value": "rgba(236, 243, 240, 0.14)"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "#ecf3f0"
+      },
+      "fg-muted": {
+        "$type": "color",
+        "$value": "{color.neutral.400}"
+      },
+      "fg-subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.500}"
+      },
+      "fg-on-accent": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "fg-inverse": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.primary.400}"
+      },
+      "accent-strong": {
+        "$type": "color",
+        "$value": "{color.primary.300}"
+      },
+      "focus-ring": {
+        "$type": "color",
+        "$value": "{color.primary.400}"
+      },
+      "accent-fill": {
+        "$type": "color",
+        "$value": "{color.primary.400}"
+      },
+      "accent-fill-hover": {
+        "$type": "color",
+        "$value": "{color.primary.500}"
+      },
+      "primary-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-primary-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-primary-400) 12%, transparent)"
+        }
+      },
+      "primary-tint-fg": {
+        "$type": "color",
+        "$value": "{color.primary.400}"
+      },
+      "neutral-fill": {
+        "$type": "color",
+        "$value": "#526660"
+      },
+      "neutral-fill-hover": {
+        "$type": "color",
+        "$value": "#637b74"
+      },
+      "neutral-fill-fg": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.success.400}"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.warning.400}"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "{color.danger.400}"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.info.400}"
+      },
+      "help": {
+        "$type": "color",
+        "$value": "{color.help.400}"
+      },
+      "success-fill": {
+        "$type": "color",
+        "$value": "{color.success.400}"
+      },
+      "success-fill-hover": {
+        "$type": "color",
+        "$value": "{color.success.500}"
+      },
+      "success-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "warning-fill": {
+        "$type": "color",
+        "$value": "{color.warning.400}"
+      },
+      "warning-fill-hover": {
+        "$type": "color",
+        "$value": "{color.warning.500}"
+      },
+      "warning-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "danger-fill": {
+        "$type": "color",
+        "$value": "{color.danger.400}"
+      },
+      "danger-fill-hover": {
+        "$type": "color",
+        "$value": "{color.danger.500}"
+      },
+      "danger-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "info-fill": {
+        "$type": "color",
+        "$value": "{color.info.400}"
+      },
+      "info-fill-hover": {
+        "$type": "color",
+        "$value": "{color.info.500}"
+      },
+      "info-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "help-fill": {
+        "$type": "color",
+        "$value": "{color.help.400}"
+      },
+      "help-fill-hover": {
+        "$type": "color",
+        "$value": "{color.help.500}"
+      },
+      "help-fill-fg": {
+        "$type": "color",
+        "$value": "#04110d"
+      },
+      "success-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-success-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-success-400) 12%, transparent)"
+        }
+      },
+      "success-tint-fg": {
+        "$type": "color",
+        "$value": "{color.success.400}"
+      },
+      "warning-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-warning-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-warning-400) 12%, transparent)"
+        }
+      },
+      "warning-tint-fg": {
+        "$type": "color",
+        "$value": "{color.warning.400}"
+      },
+      "danger-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-danger-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-danger-400) 12%, transparent)"
+        }
+      },
+      "danger-tint-fg": {
+        "$type": "color",
+        "$value": "{color.danger.400}"
+      },
+      "info-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-info-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-info-400) 12%, transparent)"
+        }
+      },
+      "info-tint-fg": {
+        "$type": "color",
+        "$value": "{color.info.400}"
+      },
+      "help-tint": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-help-400) 12%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-help-400) 12%, transparent)"
+        }
+      },
+      "help-tint-fg": {
+        "$type": "color",
+        "$value": "{color.help.400}"
+      },
+      "fg-on-success": {
+        "$value": "var(--mf-success-fill-fg)",
+        "$extensions": {
+          "com.mesgflow.css": "var(--mf-success-fill-fg)"
+        }
+      },
+      "fg-on-warning": {
+        "$value": "var(--mf-warning-fill-fg)",
+        "$extensions": {
+          "com.mesgflow.css": "var(--mf-warning-fill-fg)"
+        }
+      },
+      "chart-1": {
+        "$type": "color",
+        "$value": "#15ab83"
+      },
+      "chart-2": {
+        "$type": "color",
+        "$value": "#4e8ce6"
+      },
+      "chart-3": {
+        "$type": "color",
+        "$value": "#dc6e41"
+      },
+      "chart-4": {
+        "$type": "color",
+        "$value": "#9b74d9"
+      },
+      "chart-5": {
+        "$type": "color",
+        "$value": "#80a03e"
+      },
+      "chart-6": {
+        "$type": "color",
+        "$value": "#24a0cc"
+      },
+      "chart-7": {
+        "$type": "color",
+        "$value": "#c8800d"
+      },
+      "chart-8": {
+        "$type": "color",
+        "$value": "#d76797"
+      },
+      "chart-other": {
+        "$type": "color",
+        "$value": "{color.neutral.600}"
+      },
+      "chart-seq-1": {
+        "$type": "color",
+        "$value": "#0f4232"
+      },
+      "chart-seq-2": {
+        "$type": "color",
+        "$value": "#04654c"
+      },
+      "chart-seq-3": {
+        "$type": "color",
+        "$value": "#078968"
+      },
+      "chart-seq-4": {
+        "$type": "color",
+        "$value": "#37b08a"
+      },
+      "chart-seq-5": {
+        "$type": "color",
+        "$value": "#81d1b3"
+      },
+      "chart-div-1": {
+        "$type": "color",
+        "$value": "#dc6e41"
+      },
+      "chart-div-2": {
+        "$type": "color",
+        "$value": "#7d4833"
+      },
+      "chart-div-3": {
+        "$type": "color",
+        "$value": "#2b3d38"
+      },
+      "chart-div-4": {
+        "$type": "color",
+        "$value": "#3f597f"
+      },
+      "chart-div-5": {
+        "$type": "color",
+        "$value": "#5992e7"
+      },
+      "gradient-brand": {
+        "$value": "linear-gradient( 135deg, var(--color-primary-300) 0%, var(--color-primary-500) 50%, var(--color-primary-700) 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "linear-gradient( 135deg, var(--color-primary-300) 0%, var(--color-primary-500) 50%, var(--color-primary-700) 100% )"
+        }
+      },
+      "gradient-text": {
+        "$value": "linear-gradient( 120deg, var(--color-primary-200) 0%, var(--color-primary-400) 50%, var(--color-info-400, var(--color-primary-300)) 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "linear-gradient( 120deg, var(--color-primary-200) 0%, var(--color-primary-400) 50%, var(--color-info-400, var(--color-primary-300)) 100% )"
+        }
+      },
+      "glow-brand": {
+        "$value": "radial-gradient( 60% 55% at 50% 0%, color-mix(in srgb, var(--color-primary-500) 22%, transparent) 0%, transparent 100% )",
+        "$extensions": {
+          "com.mesgflow.css": "radial-gradient( 60% 55% at 50% 0%, color-mix(in srgb, var(--color-primary-500) 22%, transparent) 0%, transparent 100% )"
+        }
+      },
+      "grid-line": {
+        "$type": "color",
+        "$value": "color-mix(in srgb, var(--color-primary-100) 6%, transparent)",
+        "$extensions": {
+          "com.mesgflow.css": "color-mix(in srgb, var(--color-primary-100) 6%, transparent)"
+        }
+      },
+      "shadow-1": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(0, 0, 0, 0.24)"
+      },
+      "shadow-highlight": {
+        "$type": "shadow",
+        "$value": "inset 0 1px 0 rgba(236, 243, 240, 0.06)"
+      },
+      "shadow-2": {
+        "$type": "shadow",
+        "$value": "inset 0 1px 0 rgba(236, 243, 240, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.7)"
+      },
+      "shadow-3": {
+        "$type": "shadow",
+        "$value": "inset 0 1px 0 rgba(236, 243, 240, 0.07), 0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.75)"
+      },
+      "shadow-control": {
+        "$type": "shadow",
+        "$value": "inset 0 1px 0 rgba(255, 255, 255, 0.04)"
+      },
+      "shadow-filled": {
+        "$type": "shadow",
+        "$value": "0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4)"
+      },
+      "shadow-glow": {
+        "$type": "shadow",
+        "$value": "0 0 20px color-mix(in srgb, var(--color-primary-400) 20%, transparent), 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4)",
+        "$extensions": {
+          "com.mesgflow.css": "0 0 20px color-mix(in srgb, var(--color-primary-400) 20%, transparent), 0 1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4)"
+        }
+      }
+    }
+  },
+  "$themes": [
+    {
+      "id": "light",
+      "name": "Light",
+      "selectedTokenSets": {
+        "primitives": "source",
+        "light": "enabled"
+      }
+    },
+    {
+      "id": "dark",
+      "name": "Dark",
+      "selectedTokenSets": {
+        "primitives": "source",
+        "dark": "enabled"
+      }
+    }
+  ],
+  "$metadata": {
+    "tokenSetOrder": ["primitives", "light", "dark"]
+  }
+}