open-ds 0.0.0-stage → 0.1.0

package/assets/tokens/multi-brand/tokens.json

@@ -0,0 +1,1754 @@
+{
+  "color": {
+    "$description": "Colour options: raw hue ramps. Each hue has a light ramp and a dark ramp (the same steps tuned for dark backgrounds). Steps only: each theme decides its own base (@). Themes pick from these; components never read them.",
+    "slate": {
+      "$type": "color",
+      "$description": "The slate hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "0": {
+          "$value": "#FFFFFF"
+        },
+        "50": {
+          "$value": "#F8FAFC"
+        },
+        "100": {
+          "$value": "#F1F5F9"
+        },
+        "200": {
+          "$value": "#E2E8F0"
+        },
+        "300": {
+          "$value": "#CBD5E1"
+        },
+        "400": {
+          "$value": "#96A3B5",
+          "$description": "Derived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+        },
+        "500": {
+          "$value": "#64748B"
+        },
+        "600": {
+          "$value": "#4B5A6F",
+          "$description": "Derived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+        },
+        "700": {
+          "$value": "#334155"
+        },
+        "800": {
+          "$value": "#1E293B"
+        },
+        "900": {
+          "$value": "#0F172A"
+        },
+        "950": {
+          "$value": "#020617"
+        }
+      },
+      "dark": {
+        "0": {
+          "$value": "#020617"
+        },
+        "50": {
+          "$value": "#0F172A"
+        },
+        "100": {
+          "$value": "#1E293B"
+        },
+        "200": {
+          "$value": "#334155"
+        },
+        "300": {
+          "$value": "#64748B"
+        },
+        "400": {
+          "$value": "#96A3B5",
+          "$description": "Derived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+        },
+        "500": {
+          "$value": "#CBD5E1"
+        },
+        "600": {
+          "$value": "#D6DEE8",
+          "$description": "Derived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+        },
+        "700": {
+          "$value": "#E2E8F0"
+        },
+        "800": {
+          "$value": "#F1F5F9"
+        },
+        "900": {
+          "$value": "#F8FAFC"
+        },
+        "950": {
+          "$value": "#FFFFFF"
+        }
+      }
+    },
+    "teal": {
+      "$type": "color",
+      "$description": "The teal hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#E0F2F1"
+        },
+        "300": {
+          "$value": "#7FCFC6"
+        },
+        "500": {
+          "$value": "#14918A"
+        },
+        "600": {
+          "$value": "#0F766E"
+        },
+        "700": {
+          "$value": "#0B5B55"
+        },
+        "800": {
+          "$value": "#08423E"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#08423E"
+        },
+        "300": {
+          "$value": "#0B5B55"
+        },
+        "500": {
+          "$value": "#0F766E"
+        },
+        "600": {
+          "$value": "#14918A"
+        },
+        "700": {
+          "$value": "#7FCFC6"
+        },
+        "800": {
+          "$value": "#E0F2F1"
+        }
+      }
+    },
+    "purple": {
+      "$type": "color",
+      "$description": "The purple hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#EDE7FE"
+        },
+        "300": {
+          "$value": "#B79DF7"
+        },
+        "500": {
+          "$value": "#7C4DEB"
+        },
+        "600": {
+          "$value": "#6D28D9"
+        },
+        "700": {
+          "$value": "#5520AA"
+        },
+        "800": {
+          "$value": "#3E177D"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#3E177D"
+        },
+        "300": {
+          "$value": "#5520AA"
+        },
+        "500": {
+          "$value": "#6D28D9"
+        },
+        "600": {
+          "$value": "#7C4DEB"
+        },
+        "700": {
+          "$value": "#B79DF7"
+        },
+        "800": {
+          "$value": "#EDE7FE"
+        }
+      }
+    },
+    "orange": {
+      "$type": "color",
+      "$description": "The orange hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#FFEDE5"
+        },
+        "300": {
+          "$value": "#F7A67F"
+        },
+        "500": {
+          "$value": "#E2571D"
+        },
+        "600": {
+          "$value": "#C2410C"
+        },
+        "700": {
+          "$value": "#9A330A"
+        },
+        "800": {
+          "$value": "#732607"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#732607"
+        },
+        "300": {
+          "$value": "#9A330A"
+        },
+        "500": {
+          "$value": "#C2410C"
+        },
+        "600": {
+          "$value": "#E2571D"
+        },
+        "700": {
+          "$value": "#F7A67F"
+        },
+        "800": {
+          "$value": "#FFEDE5"
+        }
+      }
+    },
+    "green": {
+      "$type": "color",
+      "$description": "The green hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#E3F4EA"
+        },
+        "300": {
+          "$value": "#5CC283"
+        },
+        "700": {
+          "$value": "#1F7A3A"
+        },
+        "900": {
+          "$value": "#123322"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#123322"
+        },
+        "300": {
+          "$value": "#1F7A3A"
+        },
+        "700": {
+          "$value": "#5CC283"
+        },
+        "900": {
+          "$value": "#E3F4EA"
+        }
+      }
+    },
+    "amber": {
+      "$type": "color",
+      "$description": "The amber hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#FFF3D6"
+        },
+        "300": {
+          "$value": "#F2B84B"
+        },
+        "700": {
+          "$value": "#8A5600"
+        },
+        "900": {
+          "$value": "#3A2A05"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#3A2A05"
+        },
+        "300": {
+          "$value": "#8A5600"
+        },
+        "700": {
+          "$value": "#F2B84B"
+        },
+        "900": {
+          "$value": "#FFF3D6"
+        }
+      }
+    },
+    "red": {
+      "$type": "color",
+      "$description": "The red hue: a light ramp, a dark ramp and its base value.",
+      "light": {
+        "100": {
+          "$value": "#FDE7E7"
+        },
+        "300": {
+          "$value": "#F28B8B"
+        },
+        "700": {
+          "$value": "#C42B2B"
+        },
+        "900": {
+          "$value": "#3D1414"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#3D1414"
+        },
+        "300": {
+          "$value": "#C42B2B"
+        },
+        "700": {
+          "$value": "#F28B8B"
+        },
+        "900": {
+          "$value": "#FDE7E7"
+        }
+      }
+    },
+    "black": {
+      "$type": "color",
+      "$description": "See-through black for scrims behind dialogs, light and dark.",
+      "light": {
+        "scrim": {
+          "$value": "#0000008C"
+        }
+      },
+      "dark": {
+        "scrim": {
+          "$value": "#000000B3"
+        }
+      }
+    },
+    "blue": {
+      "$type": "color",
+      "$description": "Blue ramp for the info status and categories. Same values as the accessible-first blue ramp: borrowed, not invented.",
+      "light": {
+        "100": {
+          "$value": "#E1ECFF"
+        },
+        "300": {
+          "$value": "#8AB4F8"
+        },
+        "500": {
+          "$value": "#1A5DD0"
+        },
+        "600": {
+          "$value": "#0B4FC0"
+        },
+        "700": {
+          "$value": "#083C93"
+        },
+        "800": {
+          "$value": "#062C6E"
+        }
+      },
+      "dark": {
+        "100": {
+          "$value": "#062C6E"
+        },
+        "300": {
+          "$value": "#083C93"
+        },
+        "500": {
+          "$value": "#0B4FC0"
+        },
+        "600": {
+          "$value": "#1A5DD0"
+        },
+        "700": {
+          "$value": "#8AB4F8"
+        },
+        "800": {
+          "$value": "#E1ECFF"
+        }
+      }
+    },
+    "surface": {
+      "canvas": {
+        "$type": "color",
+        "$description": "The page background behind everything.",
+        "$value": "{aster.theme.light.color.surface.canvas}"
+      },
+      "default": {
+        "$type": "color",
+        "$description": "The base fill for content.",
+        "$value": "{aster.theme.light.color.surface.default}"
+      },
+      "raised": {
+        "$type": "color",
+        "$description": "Fills that float above content.",
+        "$value": "{aster.theme.light.color.surface.raised}"
+      },
+      "sunken": {
+        "$type": "color",
+        "$description": "A recessed fill, a step below content.",
+        "$value": "{aster.theme.light.color.surface.sunken}"
+      },
+      "selected": {
+        "$type": "color",
+        "$description": "The fill of a selected or current item.",
+        "$value": "{aster.theme.light.color.surface.selected}"
+      },
+      "inverse": {
+        "$type": "color",
+        "$description": "A reversed fill for small, short-lived messages.",
+        "$value": "{aster.theme.light.color.surface.inverse}"
+      },
+      "scrim": {
+        "$type": "color",
+        "$description": "The see-through layer behind a modal.",
+        "$value": "{aster.theme.light.color.surface.scrim}"
+      }
+    },
+    "text": {
+      "primary": {
+        "$type": "color",
+        "$description": "Body text and headings.",
+        "$value": "{aster.theme.light.color.text.primary}"
+      },
+      "secondary": {
+        "$type": "color",
+        "$description": "Supporting text.",
+        "$value": "{aster.theme.light.color.text.secondary}"
+      },
+      "muted": {
+        "$type": "color",
+        "$description": "The quietest text.",
+        "$value": "{aster.theme.light.color.text.muted}"
+      },
+      "inverse": {
+        "$type": "color",
+        "$description": "Text on an inverse fill.",
+        "$value": "{aster.theme.light.color.text.inverse}"
+      },
+      "on-action": {
+        "$type": "color",
+        "$description": "Text and icons on the main action's fill.",
+        "$value": "{aster.theme.light.color.text.on-action}"
+      },
+      "link": {
+        "$type": "color",
+        "$description": "Links in running text.",
+        "$value": "{aster.theme.light.color.text.link}"
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$description": "Quiet edges and dividers. Decorative, so it has no contrast minimum.",
+        "$value": "{aster.theme.light.color.border.default}"
+      },
+      "strong": {
+        "$type": "color",
+        "$description": "The edge of a control people must find.",
+        "$value": "{aster.theme.light.color.border.strong}"
+      },
+      "focus": {
+        "$type": "color",
+        "$description": "The focus ring.",
+        "$value": "{aster.theme.light.color.border.focus}"
+      }
+    },
+    "action": {
+      "primary": {
+        "@": {
+          "$type": "color",
+          "$description": "The one main action in a view.",
+          "$value": "{aster.theme.light.color.action.primary.@}"
+        },
+        "hover": {
+          "$type": "color",
+          "$description": "The main action under the pointer.",
+          "$value": "{aster.theme.light.color.action.primary.hover}"
+        }
+      },
+      "secondary": {
+        "@": {
+          "$type": "color",
+          "$description": "The fill of other actions.",
+          "$value": "{aster.theme.light.color.action.secondary.@}"
+        },
+        "hover": {
+          "$type": "color",
+          "$description": "Other actions under the pointer.",
+          "$value": "{aster.theme.light.color.action.secondary.hover}"
+        }
+      }
+    },
+    "status": {
+      "info": {
+        "@": {
+          "$type": "color",
+          "$description": "Neutral news: something changed and no action is needed. The lowest level of the urgency order.",
+          "$value": "{aster.theme.light.color.status.info.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "The fill behind info status.",
+          "$value": "{aster.theme.light.color.status.info.subtle}"
+        }
+      },
+      "success": {
+        "@": {
+          "$type": "color",
+          "$description": "Confirmation that something worked. It sits outside the urgency order.",
+          "$value": "{aster.theme.light.color.status.success.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "The fill behind success status.",
+          "$value": "{aster.theme.light.color.status.success.subtle}"
+        }
+      },
+      "warning": {
+        "@": {
+          "$type": "color",
+          "$description": "Caution: something may go wrong or needs a check, and it can be fixed.",
+          "$value": "{aster.theme.light.color.status.warning.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "The fill behind warning status.",
+          "$value": "{aster.theme.light.color.status.warning.subtle}"
+        }
+      },
+      "danger": {
+        "@": {
+          "$type": "color",
+          "$description": "Real risk: errors, failed checks, actions that cannot be undone. The top of the urgency order. Overuse wears it out.",
+          "$value": "{aster.theme.light.color.status.danger.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "The fill behind danger status.",
+          "$value": "{aster.theme.light.color.status.danger.subtle}"
+        }
+      }
+    },
+    "category": {
+      "1": {
+        "@": {
+          "$type": "color",
+          "$description": "Category 1: tells one item or series from another. It carries no meaning.",
+          "$value": "{aster.theme.light.color.category.1.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "Category 1: the fill of a tag.",
+          "$value": "{aster.theme.light.color.category.1.subtle}"
+        }
+      },
+      "2": {
+        "@": {
+          "$type": "color",
+          "$description": "Category 2: tells one item or series from another. It carries no meaning.",
+          "$value": "{aster.theme.light.color.category.2.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "Category 2: the fill of a tag.",
+          "$value": "{aster.theme.light.color.category.2.subtle}"
+        }
+      },
+      "3": {
+        "@": {
+          "$type": "color",
+          "$description": "Category 3: tells one item or series from another. It carries no meaning.",
+          "$value": "{aster.theme.light.color.category.3.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "Category 3: the fill of a tag.",
+          "$value": "{aster.theme.light.color.category.3.subtle}"
+        }
+      },
+      "4": {
+        "@": {
+          "$type": "color",
+          "$description": "Category 4: tells one item or series from another. It carries no meaning.",
+          "$value": "{aster.theme.light.color.category.4.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "Category 4: the fill of a tag.",
+          "$value": "{aster.theme.light.color.category.4.subtle}"
+        }
+      },
+      "5": {
+        "@": {
+          "$type": "color",
+          "$description": "Category 5: tells one item or series from another. It carries no meaning.",
+          "$value": "{aster.theme.light.color.category.5.@}"
+        },
+        "subtle": {
+          "$type": "color",
+          "$description": "Category 5: the fill of a tag.",
+          "$value": "{aster.theme.light.color.category.5.subtle}"
+        }
+      },
+      "$description": "Identity colours for tags, labels and chart series. They tell items apart and carry no meaning."
+    },
+    "disabled": {
+      "$description": "The shared look of controls that cannot be used right now.",
+      "text": {
+        "$type": "color",
+        "$description": "Text and icons of a control that cannot be used right now.",
+        "$value": "{aster.theme.light.color.disabled.text}"
+      },
+      "surface": {
+        "$type": "color",
+        "$description": "The fill of a control that cannot be used right now.",
+        "$value": "{aster.theme.light.color.disabled.surface}"
+      },
+      "border": {
+        "$type": "color",
+        "$description": "The edge of a control that cannot be used right now.",
+        "$value": "{aster.theme.light.color.disabled.border}"
+      }
+    }
+  },
+  "space": {
+    "8": {
+      "$type": "dimension",
+      "$value": "0.5rem"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "0.75rem"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "1rem"
+    },
+    "24": {
+      "$type": "dimension",
+      "$value": "1.5rem"
+    },
+    "48": {
+      "$type": "dimension",
+      "$value": "3rem"
+    },
+    "$description": "Space options. Names give the size in pixels at the default text size; values are rem.",
+    "gap": {
+      "tight": {
+        "$type": "dimension",
+        "$value": "{space.8}",
+        "$description": "Between things that belong together."
+      },
+      "default": {
+        "$type": "dimension",
+        "$value": "{space.12}",
+        "$description": "Between items in one group."
+      },
+      "group": {
+        "$type": "dimension",
+        "$value": "{space.24}",
+        "$description": "Between groups."
+      },
+      "section": {
+        "$type": "dimension",
+        "$value": "{space.48}",
+        "$description": "Between page sections."
+      }
+    },
+    "inset": {
+      "control-x": {
+        "$type": "dimension",
+        "$value": "{space.16}",
+        "$description": "Horizontal padding inside controls."
+      },
+      "container": {
+        "$type": "dimension",
+        "$value": "{space.24}",
+        "$description": "Padding inside cards and dialogs."
+      },
+      "cell-x": {
+        "$type": "dimension",
+        "$value": "{space.16}",
+        "$description": "Horizontal padding inside table cells."
+      }
+    }
+  },
+  "size": {
+    "16": {
+      "$type": "dimension",
+      "$value": "1rem"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "1.25rem"
+    },
+    "24": {
+      "$type": "dimension",
+      "$value": "1.5rem"
+    },
+    "36": {
+      "$type": "dimension",
+      "$value": "2.25rem"
+    },
+    "44": {
+      "$type": "dimension",
+      "$value": "2.75rem"
+    },
+    "48": {
+      "$type": "dimension",
+      "$value": "3rem"
+    },
+    "$description": "Size options for controls, rows and icons.",
+    "control": {
+      "default": {
+        "$type": "dimension",
+        "$value": "{size.44}",
+        "$description": "Height of buttons and inputs, and the smallest target."
+      },
+      "compact": {
+        "$type": "dimension",
+        "$value": "{size.36}",
+        "$description": "Height of compact controls."
+      }
+    },
+    "row": {
+      "$type": "dimension",
+      "$value": "{size.48}",
+      "$description": "Height of one table row."
+    },
+    "icon": {
+      "$type": "dimension",
+      "$value": "{size.16}",
+      "$description": "Icon size next to text."
+    }
+  },
+  "radius": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0rem"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "0.25rem"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "0.5rem"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "0.75rem"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "1rem"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "1.25rem"
+    },
+    "999": {
+      "$type": "dimension",
+      "$value": "9999px"
+    },
+    "$description": "Corner options.",
+    "full": {
+      "$type": "dimension",
+      "$value": "9999px",
+      "$description": "Fully round."
+    },
+    "control": {
+      "$type": "dimension",
+      "$value": "{aster.theme.base.radius.control}",
+      "$description": "Corner of buttons and inputs."
+    },
+    "badge": {
+      "$type": "dimension",
+      "$value": "{aster.theme.base.radius.badge}",
+      "$description": "Corner of badges and checkboxes."
+    },
+    "container": {
+      "$type": "dimension",
+      "$value": "{aster.theme.base.radius.container}",
+      "$description": "Corner of cards, menus and dialogs."
+    },
+    "round": {
+      "$type": "dimension",
+      "$value": "{radius.full}",
+      "$description": "Fully round: avatars and dots."
+    }
+  },
+  "border-width": {
+    "1": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "$description": "Border width options.",
+    "default": {
+      "$type": "dimension",
+      "$value": "{border-width.1}",
+      "$description": "Every border."
+    },
+    "focus": {
+      "$type": "dimension",
+      "$value": "{border-width.2}",
+      "$description": "The focus ring."
+    }
+  },
+  "font": {
+    "size": {
+      "13": {
+        "$type": "dimension",
+        "$value": "0.8125rem"
+      },
+      "14": {
+        "$type": "dimension",
+        "$value": "0.875rem"
+      },
+      "16": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "20": {
+        "$type": "dimension",
+        "$value": "1.25rem"
+      },
+      "24": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "32": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "$description": "Type size options. Names are pixels at the default text size; values are rem, so text grows with the user's setting."
+    },
+    "weight": {
+      "400": {
+        "$type": "fontWeight",
+        "$value": 400
+      },
+      "600": {
+        "$type": "fontWeight",
+        "$value": 600
+      },
+      "700": {
+        "$type": "fontWeight",
+        "$value": 700
+      }
+    },
+    "line-height": {
+      "1_2": {
+        "$type": "number",
+        "$value": 1.2,
+        "$description": "A ratio of the text size."
+      },
+      "1_25": {
+        "$type": "number",
+        "$value": 1.25,
+        "$description": "A ratio of the text size."
+      },
+      "1_3": {
+        "$type": "number",
+        "$value": 1.3,
+        "$description": "A ratio of the text size."
+      },
+      "1_4": {
+        "$type": "number",
+        "$value": 1.4,
+        "$description": "A ratio of the text size."
+      },
+      "1_5": {
+        "$type": "number",
+        "$value": 1.5,
+        "$description": "A ratio of the text size."
+      }
+    },
+    "family": {
+      "$description": "Font family options. Each brand's theme picks its display, body, interface and data fonts from these.",
+      "inter": {
+        "$type": "fontFamily",
+        "$value": "Inter, system-ui, sans-serif"
+      },
+      "ibm-plex-mono": {
+        "$type": "fontFamily",
+        "$value": "\"IBM Plex Mono\", ui-monospace, monospace"
+      },
+      "plus-jakarta-sans": {
+        "$type": "fontFamily",
+        "$value": "\"Plus Jakarta Sans\", system-ui, sans-serif"
+      },
+      "poppins": {
+        "$type": "fontFamily",
+        "$value": "Poppins, system-ui, sans-serif"
+      }
+    }
+  },
+  "duration": {
+    "fast": {
+      "$type": "duration",
+      "$value": "120ms",
+      "$description": "Fast: the usual convention for feedback, about 120ms."
+    },
+    "moderate": {
+      "$type": "duration",
+      "$value": "200ms",
+      "$description": "Moderate: a calm, easy-to-follow speed, about 200ms."
+    },
+    "relaxed": {
+      "$type": "duration",
+      "$value": "320ms",
+      "$description": "Relaxed: a slower, springy speed for expressive motion, about 320ms."
+    }
+  },
+  "easing": {
+    "standard": {
+      "$type": "cubicBezier",
+      "$value": [
+        0.2,
+        0,
+        0,
+        1
+      ],
+      "$description": "The easing for feedback transitions."
+    }
+  },
+  "opacity": {
+    "40": {
+      "$type": "number",
+      "$value": 0.4,
+      "$description": "An opacity option."
+    },
+    "disabled": {
+      "$type": "number",
+      "$value": "{opacity.40}",
+      "$description": "Disabled controls."
+    }
+  },
+  "shadow": {
+    "$description": "Raw shadows. Elevation semantics point at these.",
+    "card": {
+      "$type": "shadow",
+      "$value": {
+        "color": "#0F172A14",
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "8px",
+        "spread": "0px"
+      },
+      "$description": "Raw shadow for card in light mode."
+    },
+    "overlay": {
+      "$type": "shadow",
+      "$value": {
+        "color": "#0F172A29",
+        "offsetX": "0px",
+        "offsetY": "12px",
+        "blur": "32px",
+        "spread": "0px"
+      },
+      "$description": "Raw shadow for overlay in light mode."
+    },
+    "card-dark": {
+      "$type": "shadow",
+      "$value": {
+        "color": "#00000066",
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "8px",
+        "spread": "0px"
+      },
+      "$description": "Raw shadow for card in dark mode."
+    },
+    "overlay-dark": {
+      "$type": "shadow",
+      "$value": {
+        "color": "#00000080",
+        "offsetX": "0px",
+        "offsetY": "12px",
+        "blur": "32px",
+        "spread": "0px"
+      },
+      "$description": "Raw shadow for overlay in dark mode."
+    }
+  },
+  "aster": {
+    "theme": {
+      "base": {
+        "radius": {
+          "control": {
+            "$type": "dimension",
+            "$value": "{radius.4}"
+          },
+          "badge": {
+            "$type": "dimension",
+            "$value": "{radius.4}"
+          },
+          "container": {
+            "$type": "dimension",
+            "$value": "{radius.8}"
+          }
+        },
+        "type": {
+          "display": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "title": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "heading": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "body": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "label": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "caption": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          },
+          "data": {
+            "font-family": {
+              "$type": "fontFamily",
+              "$value": "{font.family.inter}"
+            }
+          }
+        }
+      },
+      "light": {
+        "color": {
+          "surface": {
+            "canvas": {
+              "$type": "color",
+              "$value": "{color.slate.light.50}"
+            },
+            "default": {
+              "$type": "color",
+              "$value": "{color.slate.light.0}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{color.slate.light.0}"
+            },
+            "sunken": {
+              "$type": "color",
+              "$value": "{color.slate.light.100}"
+            },
+            "selected": {
+              "$type": "color",
+              "$value": "{color.teal.light.100}"
+            },
+            "inverse": {
+              "$type": "color",
+              "$value": "{color.slate.light.900}"
+            },
+            "scrim": {
+              "$type": "color",
+              "$value": "{color.black.light.scrim}"
+            }
+          },
+          "text": {
+            "primary": {
+              "$type": "color",
+              "$value": "{color.slate.light.900}"
+            },
+            "secondary": {
+              "$type": "color",
+              "$value": "{color.slate.light.700}"
+            },
+            "muted": {
+              "$type": "color",
+              "$value": "{color.slate.light.600}"
+            },
+            "inverse": {
+              "$type": "color",
+              "$value": "{color.slate.light.0}"
+            },
+            "on-action": {
+              "$type": "color",
+              "$value": "{color.slate.light.0}"
+            },
+            "link": {
+              "$type": "color",
+              "$value": "{color.teal.light.700}"
+            }
+          },
+          "border": {
+            "default": {
+              "$type": "color",
+              "$value": "{color.slate.light.200}"
+            },
+            "strong": {
+              "$type": "color",
+              "$value": "{color.slate.light.500}"
+            },
+            "focus": {
+              "$type": "color",
+              "$value": "{color.teal.light.600}"
+            }
+          },
+          "action": {
+            "primary": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.teal.light.600}"
+              },
+              "hover": {
+                "$type": "color",
+                "$value": "{color.teal.light.700}"
+              }
+            },
+            "secondary": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.slate.light.0}"
+              },
+              "hover": {
+                "$type": "color",
+                "$value": "{color.slate.light.100}"
+              }
+            }
+          },
+          "status": {
+            "info": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.blue.light.700}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.blue.light.100}"
+              }
+            },
+            "success": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.green.light.700}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.green.light.100}"
+              }
+            },
+            "warning": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.amber.light.700}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.amber.light.100}"
+              }
+            },
+            "danger": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.red.light.700}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.red.light.100}"
+              }
+            }
+          },
+          "category": {
+            "1": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.teal.light.600}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.teal.light.100}"
+              }
+            },
+            "2": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.purple.light.600}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.purple.light.100}"
+              }
+            },
+            "3": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.orange.light.600}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.orange.light.100}"
+              }
+            },
+            "4": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.blue.light.600}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.blue.light.100}"
+              }
+            },
+            "5": {
+              "@": {
+                "$type": "color",
+                "$value": "{color.green.light.700}"
+              },
+              "subtle": {
+                "$type": "color",
+                "$value": "{color.green.light.100}"
+              }
+            }
+          },
+          "disabled": {
+            "text": {
+              "$type": "color",
+              "$value": "{color.slate.light.500}"
+            },
+            "surface": {
+              "$type": "color",
+              "$value": "{color.slate.light.100}"
+            },
+            "border": {
+              "$type": "color",
+              "$value": "{color.slate.light.200}"
+            }
+          }
+        },
+        "elevation": {
+          "card": {
+            "$type": "shadow",
+            "$value": "{shadow.card}"
+          },
+          "overlay": {
+            "$type": "shadow",
+            "$value": "{shadow.overlay}"
+          }
+        }
+      }
+    }
+  },
+  "type": {
+    "display": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.display.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.32}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_2}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.700}"
+      },
+      "$description": "The display text role."
+    },
+    "title": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.title.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.24}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_25}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.600}"
+      },
+      "$description": "The title text role."
+    },
+    "heading": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.heading.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.20}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_3}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.600}"
+      },
+      "$description": "The heading text role."
+    },
+    "body": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.body.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.16}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_5}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.400}"
+      },
+      "$description": "The body text role."
+    },
+    "label": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.label.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.14}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_4}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.600}"
+      },
+      "$description": "The label text role."
+    },
+    "caption": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.caption.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.13}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_4}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.400}"
+      },
+      "$description": "The caption text role."
+    },
+    "data": {
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{aster.theme.base.type.data.font-family}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.16}"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{font.line-height.1_5}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.400}"
+      },
+      "$description": "The data text role."
+    }
+  },
+  "motion": {
+    "duration": {
+      "feedback": {
+        "$type": "duration",
+        "$value": "{duration.moderate}",
+        "$description": "Feedback speed: moderate."
+      }
+    },
+    "easing": {
+      "standard": {
+        "$type": "cubicBezier",
+        "$value": "{easing.standard}",
+        "$description": "Feedback easing."
+      }
+    }
+  },
+  "elevation": {
+    "card": {
+      "$type": "shadow",
+      "$value": "{aster.theme.light.elevation.card}"
+    },
+    "overlay": {
+      "$type": "shadow",
+      "$value": "{aster.theme.light.elevation.overlay}"
+    }
+  },
+  "button": {
+    "primary": {
+      "background": {
+        "@": {
+          "$value": "{color.action.primary.@}",
+          "$description": "Primary button fill."
+        },
+        "hover": {
+          "$value": "{color.action.primary.hover}",
+          "$description": "Primary button fill on hover."
+        }
+      },
+      "label": {
+        "$value": "{color.text.on-action}",
+        "$description": "Primary button label color."
+      }
+    },
+    "secondary": {
+      "background": {
+        "@": {
+          "$value": "{color.action.secondary.@}",
+          "$description": "Secondary button fill."
+        },
+        "hover": {
+          "$value": "{color.action.secondary.hover}",
+          "$description": "Secondary button fill on hover."
+        }
+      },
+      "label": {
+        "$value": "{color.text.primary}",
+        "$description": "Secondary button label color."
+      },
+      "border": {
+        "$value": "{color.border.strong}",
+        "$description": "Secondary button border."
+      }
+    },
+    "ghost": {
+      "background-hover": {
+        "$value": "{color.surface.sunken}",
+        "$description": "Ghost button fill on hover."
+      },
+      "label": {
+        "$value": "{color.text.link}",
+        "$description": "Ghost button label color."
+      }
+    },
+    "height": {
+      "$value": "{size.control.default}",
+      "$description": "Button height."
+    },
+    "padding-x": {
+      "$value": "{space.inset.control-x}",
+      "$description": "Horizontal padding inside a button."
+    },
+    "radius": {
+      "$value": "{radius.control}",
+      "$description": "Button corner radius."
+    },
+    "font-size": {
+      "$value": "{type.label.font-size}",
+      "$description": "Button label size."
+    },
+    "font-weight": {
+      "$value": "{type.label.font-weight}",
+      "$description": "Button label weight."
+    },
+    "focus-ring": {
+      "$value": "{color.border.focus}",
+      "$description": "Focus ring color on any button."
+    },
+    "icon-size": {
+      "$value": "{size.icon}",
+      "$description": "Size of an icon inside a button."
+    },
+    "disabled": {
+      "background": {
+        "$value": "{color.disabled.surface}",
+        "$description": "Fill of a disabled button."
+      },
+      "label": {
+        "$value": "{color.disabled.text}",
+        "$description": "Label of a disabled button."
+      },
+      "border": {
+        "$value": "{color.disabled.border}",
+        "$description": "Border of a disabled secondary button."
+      }
+    }
+  },
+  "input": {
+    "background": {
+      "$value": "{color.surface.default}",
+      "$description": "Input fill."
+    },
+    "border": {
+      "@": {
+        "$value": "{color.border.strong}",
+        "$description": "Input border at rest."
+      },
+      "focus": {
+        "$value": "{color.border.focus}",
+        "$description": "Input border when focused."
+      }
+    },
+    "text": {
+      "$value": "{color.text.primary}",
+      "$description": "Typed text color."
+    },
+    "placeholder": {
+      "$value": "{color.text.muted}",
+      "$description": "Placeholder text color."
+    },
+    "height": {
+      "$value": "{size.control.default}",
+      "$description": "Input height."
+    },
+    "padding-x": {
+      "$value": "{space.inset.control-x}",
+      "$description": "Horizontal padding inside an input."
+    },
+    "radius": {
+      "$value": "{radius.control}",
+      "$description": "Input corner radius."
+    },
+    "font-size": {
+      "$value": "{type.body.font-size}",
+      "$description": "Typed text size."
+    },
+    "disabled": {
+      "background": {
+        "$value": "{color.disabled.surface}",
+        "$description": "Fill of a disabled input."
+      },
+      "border": {
+        "$value": "{color.disabled.border}",
+        "$description": "Border of a disabled input."
+      },
+      "text": {
+        "$value": "{color.disabled.text}",
+        "$description": "Text in a disabled input."
+      }
+    }
+  },
+  "control": {
+    "checked": {
+      "$value": "{color.action.primary.@}",
+      "$description": "Fill of a checked checkbox or an on switch."
+    },
+    "track": {
+      "$value": "{color.border.strong}",
+      "$description": "Track of an off switch."
+    },
+    "thumb": {
+      "$value": "{color.surface.default}",
+      "$description": "Switch thumb and checkmark color."
+    },
+    "radius": {
+      "$value": "{radius.badge}",
+      "$description": "Checkbox corner radius."
+    }
+  },
+  "badge": {
+    "radius": {
+      "$value": "{radius.badge}",
+      "$description": "Badge corner radius."
+    },
+    "padding-x": {
+      "$value": "{space.gap.tight}",
+      "$description": "Horizontal padding inside a badge."
+    },
+    "font-size": {
+      "$value": "{type.caption.font-size}",
+      "$description": "Badge label size."
+    },
+    "neutral": {
+      "background": {
+        "$value": "{color.surface.sunken}",
+        "$description": "Neutral badge fill."
+      },
+      "label": {
+        "$value": "{color.text.secondary}",
+        "$description": "Neutral badge label."
+      }
+    },
+    "success": {
+      "background": {
+        "$value": "{color.status.success.subtle}",
+        "$description": "Success badge fill."
+      },
+      "label": {
+        "$value": "{color.status.success.@}",
+        "$description": "Success badge label."
+      }
+    },
+    "warning": {
+      "background": {
+        "$value": "{color.status.warning.subtle}",
+        "$description": "Warning badge fill."
+      },
+      "label": {
+        "$value": "{color.status.warning.@}",
+        "$description": "Warning badge label."
+      }
+    },
+    "danger": {
+      "background": {
+        "$value": "{color.status.danger.subtle}",
+        "$description": "Danger badge fill."
+      },
+      "label": {
+        "$value": "{color.status.danger.@}",
+        "$description": "Danger badge label."
+      }
+    },
+    "info": {
+      "background": {
+        "$value": "{color.status.info.subtle}",
+        "$description": "Info badge fill."
+      },
+      "label": {
+        "$value": "{color.status.info.@}",
+        "$description": "Info badge label."
+      }
+    }
+  },
+  "card": {
+    "background": {
+      "$value": "{color.surface.default}",
+      "$description": "Card fill."
+    },
+    "border": {
+      "$value": "{color.border.default}",
+      "$description": "Card border."
+    },
+    "radius": {
+      "$value": "{radius.container}",
+      "$description": "Card corner radius."
+    },
+    "padding": {
+      "$value": "{space.inset.container}",
+      "$description": "Padding inside a card."
+    },
+    "shadow": {
+      "$value": "{elevation.card}",
+      "$description": "Card shadow."
+    }
+  },
+  "table": {
+    "header-background": {
+      "$value": "{color.surface.sunken}",
+      "$description": "Header row fill."
+    },
+    "row-height": {
+      "$value": "{size.row}",
+      "$description": "Height of one data row."
+    },
+    "cell-padding-x": {
+      "$value": "{space.inset.cell-x}",
+      "$description": "Horizontal padding inside a cell."
+    },
+    "row-border": {
+      "$value": "{color.border.default}",
+      "$description": "Line between rows."
+    },
+    "row-selected": {
+      "$value": "{color.surface.selected}",
+      "$description": "Fill of a selected row."
+    },
+    "font-size": {
+      "$value": "{type.data.font-size}",
+      "$description": "Cell text size."
+    }
+  },
+  "tabs": {
+    "indicator": {
+      "$value": "{color.action.primary.@}",
+      "$description": "Active tab indicator."
+    },
+    "label": {
+      "@": {
+        "$value": "{color.text.secondary}",
+        "$description": "Inactive tab label."
+      },
+      "active": {
+        "$value": "{color.text.primary}",
+        "$description": "Active tab label."
+      }
+    }
+  },
+  "overlay": {
+    "background": {
+      "$value": "{color.surface.raised}",
+      "$description": "Fill of a dialog, menu or toast."
+    },
+    "radius": {
+      "$value": "{radius.container}",
+      "$description": "Corner radius of overlays."
+    },
+    "shadow": {
+      "$value": "{elevation.overlay}",
+      "$description": "Shadow of overlays."
+    },
+    "scrim": {
+      "$value": "{color.surface.scrim}",
+      "$description": "Color that dims the page behind a dialog."
+    },
+    "item-height": {
+      "$value": "{size.control.default}",
+      "$description": "Height of a menu item."
+    }
+  },
+  "tooltip": {
+    "background": {
+      "$value": "{color.surface.inverse}",
+      "$description": "Tooltip fill."
+    },
+    "label": {
+      "$value": "{color.text.inverse}",
+      "$description": "Tooltip text."
+    }
+  },
+  "transition": {
+    "duration": {
+      "$value": "{motion.duration.feedback}",
+      "$description": "Duration of feedback transitions."
+    },
+    "easing": {
+      "$value": "{motion.easing.standard}",
+      "$description": "Easing of feedback transitions."
+    }
+  }
+}