{
  "$extensions": {
    "com.pupas.cssOnly": [
      "motion-drawer-distance",
      "easing-spring-productive-fast",
      "easing-spring-productive-base",
      "easing-spring-productive-slow",
      "easing-spring-expressive-base",
      "material-glass-prominent-tint"
    ]
  },
  "color": {
    "surface": {
      "default": {
        "$type": "color",
        "$value": "#1E1E1E"
      },
      "layer-1": {
        "$type": "color",
        "$value": "#262626"
      },
      "layer-2": {
        "$type": "color",
        "$value": "#303030"
      },
      "layer-3": {
        "$type": "color",
        "$value": "#404040"
      },
      "raised": {
        "$type": "color",
        "$value": "#262626"
      },
      "sunken": {
        "$type": "color",
        "$value": "#171717"
      },
      "hovered": {
        "$type": "color",
        "$value": "#303030"
      },
      "selected": {
        "$type": "color",
        "$value": "#404040"
      },
      "disabled": {
        "$type": "color",
        "$value": "#303030"
      },
      "inverse": {
        "$type": "color",
        "$value": "#FAFAFA"
      },
      "brand": {
        "$type": "color",
        "$value": "#E5E5E5"
      },
      "translucent": {
        "$type": "color",
        "$value": "#1E1E1ED9"
      },
      "checker": {
        "$type": "color",
        "$value": "#101010"
      },
      "scrim": {
        "$type": "color",
        "$value": "#0000007A"
      }
    },
    "text": {
      "default": {
        "$type": "color",
        "$value": "#FAFAFA"
      },
      "subtle": {
        "$type": "color",
        "$value": "#D4D4D4"
      },
      "subtlest": {
        "$type": "color",
        "$value": "#A1A1A1"
      },
      "placeholder": {
        "$type": "color",
        "$value": "#A1A1A1"
      },
      "disabled": {
        "$type": "color",
        "$value": "#525252"
      },
      "inverse": {
        "$type": "color",
        "$value": "#171717"
      },
      "on-brand": {
        "$type": "color",
        "$value": "#171717"
      },
      "link": {
        "$type": "color",
        "$value": "#FAFAFA"
      },
      "link-hovered": {
        "$type": "color",
        "$value": "#D4D4D4"
      },
      "danger": {
        "$type": "color",
        "$value": "#FFBEBB"
      },
      "success": {
        "$type": "color",
        "$value": "#A5E2B9"
      },
      "warning": {
        "$type": "color",
        "$value": "#F7C790"
      },
      "info": {
        "$type": "color",
        "$value": "#A9D7FF"
      }
    },
    "icon": {
      "default": {
        "$type": "color",
        "$value": "#F5F5F5"
      },
      "subtle": {
        "$type": "color",
        "$value": "#A1A1A1"
      },
      "disabled": {
        "$type": "color",
        "$value": "#525252"
      },
      "inverse": {
        "$type": "color",
        "$value": "#171717"
      },
      "brand": {
        "$type": "color",
        "$value": "#EA9774"
      },
      "danger": {
        "$type": "color",
        "$value": "#FF9A97"
      },
      "success": {
        "$type": "color",
        "$value": "#7DD09B"
      },
      "warning": {
        "$type": "color",
        "$value": "#ECAC5F"
      },
      "info": {
        "$type": "color",
        "$value": "#79C2FF"
      }
    },
    "border": {
      "default": {
        "$type": "color",
        "$value": "#404040"
      },
      "subtle": {
        "$type": "color",
        "$value": "#303030"
      },
      "strong": {
        "$type": "color",
        "$value": "#8C8C8C"
      },
      "input": {
        "$type": "color",
        "$value": "#737373"
      },
      "focus": {
        "$type": "color",
        "$value": "#E5E5E5"
      },
      "selected": {
        "$type": "color",
        "$value": "#E5E5E5"
      },
      "danger": {
        "$type": "color",
        "$value": "#FF9A97"
      },
      "disabled": {
        "$type": "color",
        "$value": "#404040"
      },
      "overlay": {
        "$type": "color",
        "$value": "#FFFFFF1A",
        "$description": "Hairline ring around floating surfaces: popovers, menus, dialogs, drawers, toasts."
      }
    },
    "focus": {
      "ring": {
        "$type": "color",
        "$value": "#8C8C8C"
      }
    },
    "action": {
      "primary": {
        "default": {
          "$type": "color",
          "$value": "#E5E5E5"
        },
        "hovered": {
          "$type": "color",
          "$value": "#D4D4D4"
        },
        "pressed": {
          "$type": "color",
          "$value": "#A1A1A1"
        }
      },
      "on-primary": {
        "default": {
          "$type": "color",
          "$value": "#171717"
        }
      },
      "secondary": {
        "default": {
          "$type": "color",
          "$value": "#262626"
        },
        "hovered": {
          "$type": "color",
          "$value": "#303030"
        },
        "pressed": {
          "$type": "color",
          "$value": "#404040"
        }
      },
      "on-secondary": {
        "default": {
          "$type": "color",
          "$value": "#FAFAFA"
        }
      },
      "subtle": {
        "hovered": {
          "$type": "color",
          "$value": "#303030"
        },
        "pressed": {
          "$type": "color",
          "$value": "#404040"
        }
      },
      "danger": {
        "default": {
          "$type": "color",
          "$value": "#FF9A97"
        },
        "hovered": {
          "$type": "color",
          "$value": "#FFBEBB"
        },
        "pressed": {
          "$type": "color",
          "$value": "#FFD6D4"
        }
      },
      "danger-subtle": {
        "hovered": {
          "$type": "color",
          "$value": "#331212"
        },
        "pressed": {
          "$type": "color",
          "$value": "#4C1D1D"
        }
      },
      "on-danger-subtle": {
        "default": {
          "$type": "color",
          "$value": "#FFBEBB"
        }
      },
      "on-danger": {
        "default": {
          "$type": "color",
          "$value": "#0A0A0A"
        }
      },
      "disabled": {
        "default": {
          "$type": "color",
          "$value": "#303030"
        }
      },
      "on-disabled": {
        "default": {
          "$type": "color",
          "$value": "#525252"
        }
      }
    },
    "status": {
      "neutral": {
        "background": {
          "$type": "color",
          "$value": "#303030"
        },
        "foreground": {
          "$type": "color",
          "$value": "#E5E5E5"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#A1A1A1"
        },
        "border": {
          "$type": "color",
          "$value": "#404040"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#0A0A0A"
        }
      },
      "brand": {
        "background": {
          "$type": "color",
          "$value": "#3C190A"
        },
        "foreground": {
          "$type": "color",
          "$value": "#F3B9A1"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#EA9774"
        },
        "border": {
          "$type": "color",
          "$value": "#5E2911"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#0A0A0A"
        }
      },
      "info": {
        "background": {
          "$type": "color",
          "$value": "#0D304B"
        },
        "foreground": {
          "$type": "color",
          "$value": "#C8E5FF"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#79C2FF"
        },
        "border": {
          "$type": "color",
          "$value": "#015182"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#072033"
        }
      },
      "success": {
        "background": {
          "$type": "color",
          "$value": "#103620"
        },
        "foreground": {
          "$type": "color",
          "$value": "#C3EED1"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#7DD09B"
        },
        "border": {
          "$type": "color",
          "$value": "#0D5C34"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#092414"
        }
      },
      "warning": {
        "background": {
          "$type": "color",
          "$value": "#422702"
        },
        "foreground": {
          "$type": "color",
          "$value": "#FDDBB4"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#ECAC5F"
        },
        "border": {
          "$type": "color",
          "$value": "#6C4300"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#2C1902"
        }
      },
      "danger": {
        "background": {
          "$type": "color",
          "$value": "#4C1D1D"
        },
        "foreground": {
          "$type": "color",
          "$value": "#FFD6D4"
        },
        "emphasis": {
          "$type": "color",
          "$value": "#FF9A97"
        },
        "border": {
          "$type": "color",
          "$value": "#822B2E"
        },
        "on-emphasis": {
          "$type": "color",
          "$value": "#331212"
        }
      }
    },
    "data": {
      "positive": {
        "$type": "color",
        "$value": "#A5E2B9"
      },
      "negative": {
        "$type": "color",
        "$value": "#FFBEBB"
      }
    },
    "illustration": {
      "ink": {
        "$type": "color",
        "$value": "#F5F5F5",
        "$description": "All outlines and small solid marks."
      },
      "surface": {
        "$type": "color",
        "$value": "#262626",
        "$description": "Paper and object faces, highlights."
      },
      "neutral-1": {
        "$type": "color",
        "$value": "#303030",
        "$description": "Shaded face of a surface, ground ellipse."
      },
      "neutral-2": {
        "$type": "color",
        "$value": "#404040",
        "$description": "Secondary objects, low-fi UI bars."
      },
      "neutral-3": {
        "$type": "color",
        "$value": "#737373",
        "$description": "Tertiary detail, abstract figure."
      },
      "primary-strong": {
        "$type": "color",
        "$value": "#EA9774",
        "$description": "Shaded face of brand objects, key detail."
      },
      "primary": {
        "$type": "color",
        "$value": "#D87347",
        "$description": "Main brand object body."
      },
      "primary-soft": {
        "$type": "color",
        "$value": "#5E2911",
        "$description": "Large soft brand areas, card faces."
      },
      "accent": {
        "$type": "color",
        "$value": "#698FE6",
        "$description": "One secondary hue object."
      },
      "accent-soft": {
        "$type": "color",
        "$value": "#253866",
        "$description": "Soft accent area."
      },
      "backdrop": {
        "$type": "color",
        "$value": "#3C190A",
        "$description": "Optional shape behind the composition."
      },
      "success": {
        "$type": "color",
        "$value": "#7DD09B",
        "$description": "Success mark only."
      },
      "warning": {
        "$type": "color",
        "$value": "#ECAC5F",
        "$description": "Warning or pending mark only."
      },
      "danger": {
        "$type": "color",
        "$value": "#FF9A97",
        "$description": "Error mark only."
      }
    },
    "chart": {
      "categorical": {
        "1": {
          "$type": "color",
          "$value": "#79C2FF"
        },
        "2": {
          "$type": "color",
          "$value": "#9EDFDA"
        },
        "3": {
          "$type": "color",
          "$value": "#C17A00"
        },
        "4": {
          "$type": "color",
          "$value": "#9575E2"
        },
        "5": {
          "$type": "color",
          "$value": "#F897C6"
        },
        "6": {
          "$type": "color",
          "$value": "#2DA264"
        },
        "7": {
          "$type": "color",
          "$value": "#FFBEBB"
        },
        "8": {
          "$type": "color",
          "$value": "#A1A1A1"
        }
      },
      "soft": {
        "1": {
          "$type": "color",
          "$value": "#015182"
        },
        "2": {
          "$type": "color",
          "$value": "#005956"
        },
        "3": {
          "$type": "color",
          "$value": "#6C4300"
        },
        "4": {
          "$type": "color",
          "$value": "#523E83"
        },
        "5": {
          "$type": "color",
          "$value": "#782F56"
        },
        "6": {
          "$type": "color",
          "$value": "#0D5C34"
        },
        "7": {
          "$type": "color",
          "$value": "#822B2E"
        },
        "8": {
          "$type": "color",
          "$value": "#262626"
        }
      },
      "grid": {
        "$type": "color",
        "$value": "#303030",
        "$description": "Horizontal split lines."
      },
      "axis": {
        "$type": "color",
        "$value": "#A1A1A1",
        "$description": "Axis labels."
      },
      "cursor": {
        "$type": "color",
        "$value": "#1E1E1E",
        "$description": "Hover band behind a bar."
      }
    },
    "tag": {
      "red": {
        "background": {
          "$type": "color",
          "$value": "#4C1D1D"
        },
        "foreground": {
          "$type": "color",
          "$value": "#FFD6D4"
        },
        "border": {
          "$type": "color",
          "$value": "#822B2E"
        }
      },
      "orange": {
        "background": {
          "$type": "color",
          "$value": "#422702"
        },
        "foreground": {
          "$type": "color",
          "$value": "#FDDBB4"
        },
        "border": {
          "$type": "color",
          "$value": "#6C4300"
        }
      },
      "green": {
        "background": {
          "$type": "color",
          "$value": "#103620"
        },
        "foreground": {
          "$type": "color",
          "$value": "#C3EED1"
        },
        "border": {
          "$type": "color",
          "$value": "#0D5C34"
        }
      },
      "blue": {
        "background": {
          "$type": "color",
          "$value": "#0D304B"
        },
        "foreground": {
          "$type": "color",
          "$value": "#C8E5FF"
        },
        "border": {
          "$type": "color",
          "$value": "#015182"
        }
      },
      "violet": {
        "background": {
          "$type": "color",
          "$value": "#31264C"
        },
        "foreground": {
          "$type": "color",
          "$value": "#E3DCFF"
        },
        "border": {
          "$type": "color",
          "$value": "#523E83"
        }
      },
      "teal": {
        "background": {
          "$type": "color",
          "$value": "#093533"
        },
        "foreground": {
          "$type": "color",
          "$value": "#BFECE8"
        },
        "border": {
          "$type": "color",
          "$value": "#005956"
        }
      },
      "pink": {
        "background": {
          "$type": "color",
          "$value": "#461E32"
        },
        "foreground": {
          "$type": "color",
          "$value": "#FFD3E6"
        },
        "border": {
          "$type": "color",
          "$value": "#782F56"
        }
      }
    },
    "material": {
      "glass": {
        "regular": {
          "$type": "color",
          "$value": "#1E1E1ED6",
          "$description": "Glass tint of chrome surfaces: top bar, popups, toasts, toolbars. text-default and text-subtle stay at 4.5:1 over any backdrop."
        },
        "regular-contrast": {
          "$type": "color",
          "$value": "#1E1E1EE0",
          "$description": "Denser glass tint for short confirm dialogs."
        },
        "clear": {
          "$type": "color",
          "$value": "#1E1E1E4D",
          "$description": "Clear glass for icon-only controls over media; never carries text."
        },
        "dim": {
          "$type": "color",
          "$value": "#00000059",
          "$description": "Dimming layer under clear glass over bright media."
        },
        "rim": {
          "$type": "color",
          "$value": "#FFFFFF2E",
          "$description": "1 px inset top highlight (rim light)."
        },
        "edge": {
          "$type": "color",
          "$value": "#FFFFFF1A",
          "$description": "Hairline all round a glass surface."
        },
        "shade": {
          "$type": "color",
          "$value": "#0000004D",
          "$description": "1 px inset bottom shade."
        },
        "specular": {
          "$type": "color",
          "$value": "#FFFFFF1F",
          "$description": "Top-lit radial highlight that follows the shape."
        }
      }
    }
  },
  "space": {
    "none": {
      "$type": "dimension",
      "$value": "0px"
    },
    "xxs": {
      "$type": "dimension",
      "$value": "2px"
    },
    "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"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "20px"
    },
    "3xl": {
      "$type": "dimension",
      "$value": "24px"
    },
    "4xl": {
      "$type": "dimension",
      "$value": "32px"
    },
    "5xl": {
      "$type": "dimension",
      "$value": "40px"
    },
    "6xl": {
      "$type": "dimension",
      "$value": "48px"
    },
    "7xl": {
      "$type": "dimension",
      "$value": "56px"
    }
  },
  "radius": {
    "none": {
      "$type": "dimension",
      "$value": "0px"
    },
    "base": {
      "$type": "dimension",
      "$value": "10px"
    },
    "2xs": {
      "$type": "dimension",
      "$value": "2px"
    },
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "6px"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "10px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "14px"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "18px"
    },
    "3xl": {
      "$type": "dimension",
      "$value": "22px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "border": {
    "width": {
      "default": {
        "$type": "dimension",
        "$value": "1px"
      },
      "focus": {
        "$type": "dimension",
        "$value": "2px"
      }
    }
  },
  "duration": {
    "instant": {
      "$type": "duration",
      "$value": "70ms"
    },
    "fast": {
      "$type": "duration",
      "$value": "110ms"
    },
    "normal": {
      "$type": "duration",
      "$value": "150ms"
    },
    "slow": {
      "$type": "duration",
      "$value": "240ms"
    },
    "slower": {
      "$type": "duration",
      "$value": "400ms"
    }
  },
  "easing": {
    "productive": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0.38,
        0.9
      ]
    },
    "expressive": {
      "$type": "cubicBezier",
      "$value": [
        0.4,
        0.14,
        0.3,
        1
      ]
    },
    "exit": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        1,
        0.9
      ],
      "$description": "Alias of easing.productive-exit, kept for existing consumers."
    },
    "productive-enter": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        0.38,
        0.9
      ],
      "$description": "Element appears or moves in."
    },
    "productive-exit": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        1,
        0.9
      ],
      "$description": "Element leaves permanently."
    },
    "expressive-enter": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        0.3,
        1
      ],
      "$description": "Brand moments only; never in money flows."
    },
    "expressive-exit": {
      "$type": "cubicBezier",
      "$value": [
        0.4,
        0.14,
        1,
        1
      ],
      "$description": "Brand moments only; never in money flows."
    },
    "linear": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        1,
        1
      ],
      "$description": "Loops and determinate progress only."
    }
  },
  "text": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "40px",
        "lineHeight": "48px",
        "fontWeight": 600
      }
    },
    "heading-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "32px",
        "lineHeight": "40px",
        "fontWeight": 600
      }
    },
    "heading-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "24px",
        "lineHeight": "32px",
        "fontWeight": 600
      }
    },
    "heading-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "20px",
        "lineHeight": "28px",
        "fontWeight": 600
      }
    },
    "heading-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 500
      }
    },
    "title-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "16px",
        "lineHeight": "20px",
        "fontWeight": 500
      },
      "$description": "Dialog title: 16 px medium; the 20 px line keeps Turkish descenders (ğ, ş, ç) clear."
    },
    "body-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "14px",
        "lineHeight": "20px",
        "fontWeight": 400
      }
    },
    "body-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "12px",
        "lineHeight": "16px",
        "fontWeight": 400
      }
    },
    "label-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 500
      }
    },
    "label-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "14px",
        "lineHeight": "20px",
        "fontWeight": 500
      }
    },
    "label-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Inter Variable",
          "Inter",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "sans-serif"
        ],
        "fontSize": "12px",
        "lineHeight": "16px",
        "fontWeight": 500
      }
    },
    "code-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "JetBrains Mono Variable",
          "JetBrains Mono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ],
        "fontSize": "14px",
        "lineHeight": "20px",
        "fontWeight": 400
      }
    }
  },
  "focus": {
    "offset": {
      "$type": "dimension",
      "$value": "2px",
      "$description": "Gap between a control edge and its focus outline."
    }
  },
  "blur": {
    "surface": {
      "scrim": {
        "$type": "dimension",
        "$value": "4px",
        "$description": "Backdrop blur behind a modal scrim."
      },
      "glass": {
        "$type": "dimension",
        "$value": "20px",
        "$description": "Backdrop blur of the regular glass material."
      },
      "glass-clear": {
        "$type": "dimension",
        "$value": "8px",
        "$description": "Backdrop blur of the clear glass material."
      }
    }
  },
  "letter-spacing": {
    "display": {
      "$type": "dimension",
      "$value": "-0.02em"
    },
    "heading-xl": {
      "$type": "dimension",
      "$value": "-0.02em"
    },
    "heading-lg": {
      "$type": "dimension",
      "$value": "-0.015em"
    },
    "heading-md": {
      "$type": "dimension",
      "$value": "-0.01em"
    },
    "heading-sm": {
      "$type": "dimension",
      "$value": "-0.01em"
    }
  },
  "spring": {
    "productive-fast": {
      "$type": "duration",
      "$value": "230ms",
      "$description": "Critically damped. Switch thumb, press release, drag settle."
    },
    "productive-base": {
      "$type": "duration",
      "$value": "310ms",
      "$description": "Critically damped. Tab indicator, list reorder, toast stack."
    },
    "productive-slow": {
      "$type": "duration",
      "$value": "400ms",
      "$description": "Critically damped. Drawer and sheet enter."
    },
    "expressive-base": {
      "$type": "duration",
      "$value": "330ms",
      "$description": "Slight overshoot. Brand moments only; never in money flows."
    }
  },
  "period": {
    "spinner": {
      "$type": "duration",
      "$value": "1000ms"
    },
    "shimmer": {
      "$type": "duration",
      "$value": "1500ms",
      "$description": "Skeleton shimmer; runs three times (4.5 s) and stops."
    },
    "indeterminate": {
      "$type": "duration",
      "$value": "1500ms",
      "$description": "Indeterminate progress bar."
    },
    "caret-blink": {
      "$type": "duration",
      "$value": "1000ms",
      "$description": "Drawn text caret of an empty OtpInput slot; blinks five times (5 s, SC 2.2.2) and then stays."
    }
  },
  "state": {
    "layer": {
      "hovered": {
        "$type": "number",
        "$value": 0.08
      },
      "focused": {
        "$type": "number",
        "$value": 0.1
      },
      "pressed": {
        "$type": "number",
        "$value": 0.1
      },
      "dragged": {
        "$type": "number",
        "$value": 0.16
      }
    }
  },
  "motion": {
    "press": {
      "duration": {
        "$type": "duration",
        "$value": "70ms"
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0.38,
          0.9
        ]
      },
      "scale": {
        "$type": "number",
        "$value": 0.97
      }
    },
    "release": {
      "duration": {
        "$type": "duration",
        "$value": "230ms"
      }
    },
    "glass": {
      "press": {
        "scale": {
          "$type": "number",
          "$value": 1.02,
          "$description": "Glass controls swell while pressed; solid controls keep the 0.97 press."
        }
      }
    },
    "hover": {
      "duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0.38,
          0.9
        ]
      },
      "lift": {
        "$type": "dimension",
        "$value": "-2px",
        "$description": "Raise of an interactive card. Not used on buttons."
      }
    },
    "focus": {
      "duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0.38,
          0.9
        ]
      }
    },
    "feedback": {
      "duration": {
        "$type": "duration",
        "$value": "240ms",
        "$description": "Success mark entering after an action completes."
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "scale": {
        "$type": "number",
        "$value": 0.6,
        "$description": "Start scale of the success mark."
      },
      "hold": {
        "$type": "duration",
        "$value": "2000ms",
        "$description": "How long a success state stays before the control returns to rest."
      }
    },
    "selection": {
      "duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "scale": {
        "$type": "number",
        "$value": 0.6,
        "$description": "Start scale of a check mark or radio dot."
      }
    },
    "switch": {
      "duration": {
        "$type": "duration",
        "$value": "230ms"
      }
    },
    "popover": {
      "enter-duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "enter-easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "exit-easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          1,
          0.9
        ]
      },
      "scale": {
        "$type": "number",
        "$value": 0.96
      },
      "distance": {
        "$type": "dimension",
        "$value": "4px"
      }
    },
    "tooltip": {
      "delay": {
        "$type": "duration",
        "$value": "400ms",
        "$description": "Hover intent before the first tooltip opens."
      },
      "enter-duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "70ms"
      },
      "distance": {
        "$type": "dimension",
        "$value": "2px"
      }
    },
    "dialog": {
      "enter-duration": {
        "$type": "duration",
        "$value": "240ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "enter-easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "exit-easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          1,
          0.9
        ]
      },
      "scale": {
        "$type": "number",
        "$value": 0.96
      },
      "distance": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "drawer": {
      "enter-duration": {
        "$type": "duration",
        "$value": "400ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "240ms"
      },
      "exit-easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          1,
          0.9
        ]
      }
    },
    "toast": {
      "enter-duration": {
        "$type": "duration",
        "$value": "240ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "enter-easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "exit-easing": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          1,
          0.9
        ]
      },
      "distance": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "collapsible": {
      "duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "easing": {
        "$type": "cubicBezier",
        "$value": [
          0,
          0,
          0.38,
          0.9
        ]
      },
      "distance": {
        "$type": "dimension",
        "$value": "4px"
      },
      "icon-duration": {
        "$type": "duration",
        "$value": "150ms"
      }
    },
    "indicator": {
      "duration": {
        "$type": "duration",
        "$value": "310ms",
        "$description": "Tabs and segmented-control indicator."
      }
    },
    "skeleton": {
      "reveal-duration": {
        "$type": "duration",
        "$value": "110ms",
        "$description": "Cross-fade from skeleton to content."
      }
    },
    "route": {
      "enter-duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "shared-duration": {
        "$type": "duration",
        "$value": "240ms",
        "$description": "Shared element between a list row and its detail page."
      }
    },
    "list": {
      "enter-duration": {
        "$type": "duration",
        "$value": "150ms"
      },
      "exit-duration": {
        "$type": "duration",
        "$value": "110ms"
      },
      "move-duration": {
        "$type": "duration",
        "$value": "310ms"
      },
      "distance": {
        "$type": "dimension",
        "$value": "4px"
      },
      "stagger": {
        "$type": "duration",
        "$value": "30ms",
        "$description": "Delay between items of one stagger group; at most 3 groups, 400 ms in total."
      }
    },
    "value": {
      "duration": {
        "$type": "duration",
        "$value": "110ms",
        "$description": "Cross-fade of a changed number. Amounts never count or roll."
      }
    },
    "progress": {
      "duration": {
        "$type": "duration",
        "$value": "150ms"
      }
    },
    "chart": {
      "enter-duration": {
        "$type": "duration",
        "$value": "400ms"
      },
      "update-duration": {
        "$type": "duration",
        "$value": "240ms"
      }
    }
  },
  "shadow": {
    "xs": {
      "$type": "shadow",
      "$value": {
        "color": "#00000000",
        "offsetX": "0px",
        "offsetY": "0px",
        "blur": "0px",
        "spread": "0px"
      },
      "$description": "Inputs and secondary buttons."
    },
    "raised": {
      "$type": "shadow",
      "$value": {
        "color": "#00000000",
        "offsetX": "0px",
        "offsetY": "0px",
        "blur": "0px",
        "spread": "0px"
      }
    },
    "overlay": {
      "$type": "shadow",
      "$value": {
        "color": "#0000007A",
        "offsetX": "0px",
        "offsetY": "8px",
        "blur": "24px",
        "spread": "0px"
      }
    },
    "popup": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#00000052",
          "offsetX": "0px",
          "offsetY": "4px",
          "blur": "6px",
          "spread": "-1px"
        },
        {
          "color": "#00000052",
          "offsetX": "0px",
          "offsetY": "2px",
          "blur": "4px",
          "spread": "-2px"
        }
      ],
      "$description": "Anchored popups: popover, menu, command list."
    },
    "panel": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#00000052",
          "offsetX": "0px",
          "offsetY": "10px",
          "blur": "15px",
          "spread": "-3px"
        },
        {
          "color": "#00000052",
          "offsetX": "0px",
          "offsetY": "4px",
          "blur": "6px",
          "spread": "-4px"
        }
      ],
      "$description": "Side drawer at the inline end."
    },
    "glass": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#0000007A",
          "offsetX": "0px",
          "offsetY": "8px",
          "blur": "32px",
          "spread": "-8px"
        },
        {
          "color": "#FFFFFF1A",
          "offsetX": "0px",
          "offsetY": "0px",
          "blur": "0px",
          "spread": "0.5px"
        }
      ],
      "$description": "Glass surfaces: a wide soft shadow, in dark mode with a 0.5 px light edge."
    }
  },
  "material": {
    "glass": {
      "saturate": {
        "$type": "number",
        "$value": 1.5,
        "$description": "saturate() factor of the glass backdrop; carries the backdrop colour into the tint."
      },
      "brightness": {
        "$type": "number",
        "$value": 0.96,
        "$description": "brightness() factor of the glass backdrop."
      },
      "refraction-scale": {
        "$type": "number",
        "$value": 18,
        "$description": "feDisplacementMap scale in px for the edge lens."
      },
      "refraction-band": {
        "$type": "dimension",
        "$value": "12px",
        "$description": "Width of the refracting edge band in the displacement map."
      },
      "scroll-edge": {
        "$type": "dimension",
        "$value": "24px",
        "$description": "Height of the scroll edge effect under a glass bar."
      }
    }
  },
  "button": {
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    },
    "height": {
      "xs": {
        "$type": "dimension",
        "$value": "24px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "36 px; 44 px under a coarse pointer."
      },
      "lg": {
        "$type": "dimension",
        "$value": "40px",
        "$description": "40 px; 48 px under a coarse pointer, so it stays above md."
      }
    },
    "padding-inline": {
      "xs": {
        "$type": "dimension",
        "$value": "8px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "12px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "16px"
      }
    },
    "icon": {
      "size": {
        "xs": {
          "$type": "dimension",
          "$value": "12px"
        },
        "sm": {
          "$type": "dimension",
          "$value": "16px"
        },
        "md": {
          "$type": "dimension",
          "$value": "16px"
        },
        "lg": {
          "$type": "dimension",
          "$value": "20px"
        }
      },
      "inset": {
        "$type": "dimension",
        "$value": "2px",
        "$description": "Taken off the inline padding on the side of a start or end icon, so the icon and the label look evenly placed."
      }
    }
  },
  "input": {
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "36 px; 44 px under a coarse pointer."
      },
      "lg": {
        "$type": "dimension",
        "$value": "40px",
        "$description": "40 px; 48 px under a coarse pointer, so it stays above md."
      }
    },
    "padding-inline": {
      "$type": "dimension",
      "$value": "12px"
    },
    "shadow": {
      "$type": "shadow",
      "$value": {
        "color": "#00000000",
        "offsetX": "0px",
        "offsetY": "0px",
        "blur": "0px",
        "spread": "0px"
      }
    }
  },
  "badge": {
    "radius": {
      "$type": "dimension",
      "$value": "9999px"
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "20px"
      }
    },
    "padding-inline": {
      "sm": {
        "$type": "dimension",
        "$value": "6px"
      },
      "md": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "icon": {
      "size": {
        "$type": "dimension",
        "$value": "12px"
      }
    },
    "padding-inline-icon": {
      "sm": {
        "$type": "dimension",
        "$value": "4px"
      },
      "md": {
        "$type": "dimension",
        "$value": "6px"
      }
    },
    "dot": {
      "size": {
        "$type": "dimension",
        "$value": "8px",
        "$description": "Diameter of a dot badge, a status mark without text."
      }
    }
  },
  "container": {
    "max-width": {
      "sm": {
        "$type": "dimension",
        "$value": "720px"
      },
      "md": {
        "$type": "dimension",
        "$value": "1104px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "1440px"
      }
    },
    "padding-inline": {
      "base": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "24px"
      }
    }
  },
  "icon": {
    "size": {
      "xs": {
        "$type": "dimension",
        "$value": "12px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "20px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "24px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "32px"
      }
    }
  },
  "checkbox": {
    "size": {
      "$type": "dimension",
      "$value": "16px"
    },
    "radius": {
      "$type": "dimension",
      "$value": "4px"
    },
    "mark-size": {
      "$type": "dimension",
      "$value": "14px",
      "$description": "Check and dash inside the box."
    }
  },
  "radio": {
    "size": {
      "$type": "dimension",
      "$value": "16px"
    }
  },
  "switch": {
    "width": {
      "sm": {
        "$type": "dimension",
        "$value": "24px"
      },
      "md": {
        "$type": "dimension",
        "$value": "32px"
      }
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "14px"
      },
      "md": {
        "$type": "dimension",
        "$value": "18px"
      }
    },
    "thumb": {
      "sm": {
        "$type": "dimension",
        "$value": "12px"
      },
      "md": {
        "$type": "dimension",
        "$value": "16px"
      }
    }
  },
  "tooltip": {
    "max-width": {
      "$type": "dimension",
      "$value": "240px",
      "$description": "Widest a tooltip grows before its text wraps."
    },
    "arrow-size": {
      "$type": "dimension",
      "$value": "10px",
      "$description": "Edge of the rotated square that forms the tooltip arrow."
    }
  },
  "tag": {
    "radius": {
      "$type": "dimension",
      "$value": "8px"
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "24px"
      },
      "md": {
        "$type": "dimension",
        "$value": "32px"
      }
    },
    "padding-inline": {
      "sm": {
        "$type": "dimension",
        "$value": "8px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      }
    }
  },
  "avatar": {
    "size": {
      "xs": {
        "$type": "dimension",
        "$value": "24px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "40px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "48px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "status-size": {
      "xs": {
        "$type": "dimension",
        "$value": "8px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "8px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "12px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "16px"
      }
    }
  },
  "chart": {
    "series": {
      "1": {
        "$type": "color",
        "$value": "#79C2FF"
      },
      "2": {
        "$type": "color",
        "$value": "#9EDFDA"
      },
      "3": {
        "$type": "color",
        "$value": "#C17A00"
      },
      "4": {
        "$type": "color",
        "$value": "#9575E2"
      },
      "5": {
        "$type": "color",
        "$value": "#F897C6"
      },
      "6": {
        "$type": "color",
        "$value": "#2DA264"
      },
      "7": {
        "$type": "color",
        "$value": "#FFBEBB"
      },
      "8": {
        "$type": "color",
        "$value": "#A1A1A1"
      }
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "160px"
      },
      "md": {
        "$type": "dimension",
        "$value": "240px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "320px"
      }
    },
    "sparkline": {
      "height": {
        "$type": "dimension",
        "$value": "32px"
      }
    },
    "bar-radius": {
      "$type": "dimension",
      "$value": "4px"
    },
    "line-width": {
      "$type": "dimension",
      "$value": "2px"
    }
  },
  "table": {
    "header": {
      "background": {
        "$type": "color",
        "$value": "#00000000"
      },
      "foreground": {
        "$type": "color",
        "$value": "#D4D4D4"
      },
      "border": {
        "$type": "color",
        "$value": "#404040",
        "$description": "Rule under the header row; stronger than the row dividers."
      },
      "height": {
        "$type": "dimension",
        "$value": "40px",
        "$description": "Height of the header row at the standard density."
      }
    },
    "row": {
      "height": {
        "compact": {
          "$type": "dimension",
          "$value": "32px"
        },
        "standard": {
          "$type": "dimension",
          "$value": "40px"
        },
        "comfortable": {
          "$type": "dimension",
          "$value": "48px"
        }
      },
      "background": {
        "hovered": {
          "$type": "color",
          "$value": "#303030"
        },
        "selected": {
          "$type": "color",
          "$value": "#404040"
        },
        "striped": {
          "$type": "color",
          "$value": "#171717"
        }
      }
    },
    "border": {
      "$type": "color",
      "$value": "#303030"
    },
    "cell": {
      "padding-inline": {
        "$type": "dimension",
        "$value": "8px"
      },
      "padding-block": {
        "compact": {
          "$type": "dimension",
          "$value": "4px"
        },
        "standard": {
          "$type": "dimension",
          "$value": "8px"
        },
        "comfortable": {
          "$type": "dimension",
          "$value": "12px"
        }
      }
    }
  },
  "meter": {
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "4px"
      },
      "md": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "tab": {
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    },
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "36 px; 44 px under a coarse pointer."
      }
    },
    "padding-inline": {
      "sm": {
        "$type": "dimension",
        "$value": "6px"
      },
      "md": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "indicator": {
      "thickness": {
        "$type": "dimension",
        "$value": "2px"
      }
    }
  },
  "dialog": {
    "width": {
      "sm": {
        "$type": "dimension",
        "$value": "400px"
      },
      "md": {
        "$type": "dimension",
        "$value": "560px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "720px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "960px"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "14px"
    },
    "padding": {
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "24px"
      }
    },
    "margin": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Space kept between the panel and the viewport edge."
    },
    "backdrop-blur": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Blur behind the scrim of a dialog, drawer or command dialog, where the browser supports it."
    },
    "media": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Icon tile beside the title of an alert dialog."
    }
  },
  "drawer": {
    "width": {
      "sm": {
        "$type": "dimension",
        "$value": "360px"
      },
      "md": {
        "$type": "dimension",
        "$value": "480px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "640px"
      }
    },
    "handle": {
      "width": {
        "$type": "dimension",
        "$value": "96px"
      },
      "height": {
        "$type": "dimension",
        "$value": "4px"
      }
    },
    "sheet-offset": {
      "$type": "dimension",
      "$value": "96px",
      "$description": "Space a bottom sheet leaves above it at its full height."
    },
    "stack": {
      "peek": {
        "$type": "dimension",
        "$value": "16px"
      },
      "step": {
        "$type": "number",
        "$value": 0.05
      }
    },
    "sheet-height": {
      "sm": {
        "$type": "dimension",
        "$value": "320px"
      },
      "md": {
        "$type": "dimension",
        "$value": "560px"
      }
    }
  },
  "popover": {
    "width": {
      "sm": {
        "$type": "dimension",
        "$value": "240px"
      },
      "md": {
        "$type": "dimension",
        "$value": "320px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "400px"
      }
    },
    "padding": {
      "$type": "dimension",
      "$value": "10px"
    },
    "gap": {
      "$type": "dimension",
      "$value": "10px",
      "$description": "Space between the header and the body of a popover."
    },
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    }
  },
  "popup": {
    "offset": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Gap between an anchored popup (menu, select list, popover, tooltip, date picker) and its trigger."
    }
  },
  "menu": {
    "min-width": {
      "$type": "dimension",
      "$value": "192px",
      "$description": "Narrowest a menu gets; it grows with its longest item."
    },
    "max-width": {
      "$type": "dimension",
      "$value": "320px"
    },
    "item-height": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Minimum height of a menu item; items with a description grow."
    },
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    },
    "item-radius": {
      "$type": "dimension",
      "$value": "6px",
      "$description": "Concentric with the popup: menu radius minus the 4 px inset."
    },
    "item-padding-inline": {
      "$type": "dimension",
      "$value": "8px"
    },
    "item-padding-block": {
      "$type": "dimension",
      "$value": "4px"
    },
    "item-gap": {
      "$type": "dimension",
      "$value": "8px"
    },
    "inset": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Padding between a popup edge and its option rows."
    }
  },
  "command": {
    "width": {
      "$type": "dimension",
      "$value": "560px",
      "$description": "Width of a command dialog; it never grows wider than the viewport minus its margin."
    },
    "offset-top": {
      "$type": "dimension",
      "$value": "12dvh",
      "$description": "Distance of a command dialog from the top of the viewport; the list grows down, so results stay above an on-screen keyboard."
    },
    "search-height": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Height of the filled search field at the top of a command list."
    }
  },
  "toast": {
    "width": {
      "$type": "dimension",
      "$value": "360px",
      "$description": "Width of a toast from 640 px up; below that toasts span the viewport minus its margin."
    },
    "gap": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Space between expanded toasts."
    },
    "peek": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "How much of each collapsed toast shows behind the frontmost one."
    },
    "margin": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Distance of the toast region from the viewport edges."
    },
    "radius": {
      "$type": "dimension",
      "$value": "14px"
    }
  },
  "empty-state": {
    "text-width": {
      "$type": "dimension",
      "$value": "440px",
      "$description": "Widest the title and description of an empty or result state get, for a comfortable line length."
    },
    "media": {
      "sm": {
        "$type": "dimension",
        "$value": "40px"
      },
      "md": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "actions-gap": {
      "$type": "dimension",
      "$value": "10px",
      "$description": "Space between the actions of an empty state."
    }
  },
  "progress": {
    "height": {
      "sm": {
        "$type": "dimension",
        "$value": "4px"
      },
      "md": {
        "$type": "dimension",
        "$value": "8px"
      }
    }
  },
  "combobox": {
    "list-max-height": {
      "$type": "dimension",
      "$value": "252px",
      "$description": "Tallest the option list of a Combobox grows before it scrolls."
    }
  },
  "input-group": {
    "button-size": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Height of InputGroup.Button, and the width of an icon-only one; the 24 px minimum target."
    }
  },
  "input-action": {
    "size": {
      "sm": {
        "$type": "dimension",
        "$value": "24px"
      },
      "md": {
        "$type": "dimension",
        "$value": "28px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "32px"
      }
    }
  },
  "calendar": {
    "cell-size": {
      "$type": "dimension",
      "$value": "40px"
    }
  },
  "slider": {
    "track-height": {
      "$type": "dimension",
      "$value": "4px"
    },
    "thumb-size": {
      "$type": "dimension",
      "$value": "20px"
    },
    "hit-size": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Pointer and touch target around the thumb."
    },
    "vertical-min-height": {
      "$type": "dimension",
      "$value": "160px",
      "$description": "Shortest track of a vertical slider."
    }
  },
  "stepper": {
    "marker-size": {
      "$type": "dimension",
      "$value": "24px"
    },
    "track-thickness": {
      "$type": "dimension",
      "$value": "2px"
    }
  },
  "timeline": {
    "marker-size": {
      "$type": "dimension",
      "$value": "24px"
    },
    "rail-thickness": {
      "$type": "dimension",
      "$value": "2px"
    }
  },
  "countdown-timer": {
    "ring-size": {
      "$type": "dimension",
      "$value": "40px"
    }
  },
  "consent-block": {
    "max-height": {
      "$type": "dimension",
      "$value": "240px"
    }
  },
  "accordion": {
    "padding-block": {
      "sm": {
        "$type": "dimension",
        "$value": "10px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      }
    }
  },
  "app-shell": {
    "sidebar": {
      "width": {
        "$type": "dimension",
        "$value": "256px",
        "$description": "Width of the open sidebar from 1024 px."
      },
      "width-collapsed": {
        "$type": "dimension",
        "$value": "48px",
        "$description": "Width of the sidebar narrowed to icons: a 32 px item with 8 px on each side."
      }
    },
    "drawer": {
      "width": {
        "$type": "dimension",
        "$value": "288px",
        "$description": "Width of the menu drawer below 1024 px; it never grows wider than 85% of the viewport."
      }
    },
    "item": {
      "height": {
        "$type": "dimension",
        "$value": "32px",
        "$description": "Height of a navigation item and a group heading."
      }
    },
    "rail": {
      "width": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "Hit zone at the sidebar edge that narrows or widens it."
      }
    }
  },
  "list-item": {
    "gap": {
      "sm": {
        "$type": "dimension",
        "$value": "8px"
      },
      "md": {
        "$type": "dimension",
        "$value": "10px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "10px"
      }
    },
    "media-size": {
      "sm": {
        "$type": "dimension",
        "$value": "32px"
      },
      "md": {
        "$type": "dimension",
        "$value": "40px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "48px"
      }
    }
  },
  "scroll-area": {
    "track-size": {
      "$type": "dimension",
      "$value": "10px",
      "$description": "Thickness of the scrollbar track; the thumb fills it inside a 1 px inset (8 px)."
    }
  },
  "kbd": {
    "radius": {
      "$type": "dimension",
      "$value": "6px"
    },
    "size": {
      "sm": {
        "$type": "dimension",
        "$value": "20px"
      },
      "md": {
        "$type": "dimension",
        "$value": "24px"
      }
    }
  },
  "card": {
    "radius": {
      "$type": "dimension",
      "$value": "14px"
    }
  },
  "qr": {
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "background": {
      "$type": "color",
      "$value": "#FFFFFF"
    }
  }
}