{
  "version": 1.1,
  "properties": [
    {
      "name": "--mdui-breakpoint-xs",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `0px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xs: 0px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-breakpoint-sm",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `600px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-sm: 620px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-breakpoint-md",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `840px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-md: 860px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-breakpoint-lg",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `1080px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-lg: 1100px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-breakpoint-xl",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `1440px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xl: 1460px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-breakpoint-xxl",
      "description": {
        "kind": "markdown",
        "value": "The breakpoint value. The default is `1920px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n  --mdui-breakpoint-xxl: 1940px;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
        }
      ]
    },
    {
      "name": "--mdui-color-primary-light",
      "description": {
        "kind": "markdown",
        "value": "**Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-primary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**Primary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary-light",
      "description": {
        "kind": "markdown",
        "value": "**On Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**On Primary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-primary-light",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Primary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary-light",
      "description": {
        "kind": "markdown",
        "value": "**Secondary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**Secondary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary-light",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary-light",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary-light",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary-container-light",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-dim-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Dim**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-dim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-bright-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Bright**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-bright-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-bright-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-lowest-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Lowest**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-lowest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-low-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Low**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-low-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-high-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container High**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-high-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-highest-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Highest**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-container-highest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-variant-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface-light",
      "description": {
        "kind": "markdown",
        "value": "**On Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface-variant-light",
      "description": {
        "kind": "markdown",
        "value": "**On Surface Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-surface-light",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-on-surface-light",
      "description": {
        "kind": "markdown",
        "value": "**Inverse On Surface**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-inverse-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-background-light",
      "description": {
        "kind": "markdown",
        "value": "**Background**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-background-light",
      "description": {
        "kind": "markdown",
        "value": "**On Background**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error-light",
      "description": {
        "kind": "markdown",
        "value": "**Error**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error-container-light",
      "description": {
        "kind": "markdown",
        "value": "**Error Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error-light",
      "description": {
        "kind": "markdown",
        "value": "**On Error**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error-container-light",
      "description": {
        "kind": "markdown",
        "value": "**On Error Container**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-on-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline-light",
      "description": {
        "kind": "markdown",
        "value": "**Outline**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-outline-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline-variant-light",
      "description": {
        "kind": "markdown",
        "value": "**Outline Variant**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-outline-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-shadow-light",
      "description": {
        "kind": "markdown",
        "value": "**Shadow**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-shadow-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-shadow-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-tint-color-light",
      "description": {
        "kind": "markdown",
        "value": "**Surface Tint Color**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-surface-tint-color-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-scrim-light",
      "description": {
        "kind": "markdown",
        "value": "**Scrim**\n\nRGB color value for Light Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n  --mdui-color-scrim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n  color: rgb(var(--mdui-color-scrim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-primary-dark",
      "description": {
        "kind": "markdown",
        "value": "**Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-primary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**Primary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Primary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-primary-dark",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Primary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary-dark",
      "description": {
        "kind": "markdown",
        "value": "**Secondary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**Secondary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary-dark",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-dim-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Dim**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-dim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-bright-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Bright**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-bright-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-lowest-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Lowest**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-low-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Low**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-high-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container High**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-highest-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Highest**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-variant-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface-variant-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Surface Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-surface-dark",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-on-surface-dark",
      "description": {
        "kind": "markdown",
        "value": "**Inverse On Surface**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-background-dark",
      "description": {
        "kind": "markdown",
        "value": "**Background**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-background-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Background**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error-dark",
      "description": {
        "kind": "markdown",
        "value": "**Error**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**Error Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Error**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error-container-dark",
      "description": {
        "kind": "markdown",
        "value": "**On Error Container**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-on-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline-dark",
      "description": {
        "kind": "markdown",
        "value": "**Outline**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-outline-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline-variant-dark",
      "description": {
        "kind": "markdown",
        "value": "**Outline Variant**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-outline-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-shadow-dark",
      "description": {
        "kind": "markdown",
        "value": "**Shadow**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-shadow-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-shadow-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-tint-color-dark",
      "description": {
        "kind": "markdown",
        "value": "**Surface Tint Color**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-scrim-dark",
      "description": {
        "kind": "markdown",
        "value": "**Scrim**\n\nRGB color value for Dark Mode, separated by `,`.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n  --mdui-color-scrim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n  color: rgb(var(--mdui-color-scrim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-primary",
      "description": {
        "kind": "markdown",
        "value": "**Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-primary-light` and `--mdui-color-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-primary-light: 255, 0, 0;\n  --mdui-color-primary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-primary-container",
      "description": {
        "kind": "markdown",
        "value": "**Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-primary-container-light` and `--mdui-color-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-primary-container-light: 255, 0, 0;\n  --mdui-color-primary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary",
      "description": {
        "kind": "markdown",
        "value": "**On Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-primary-light` and `--mdui-color-on-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-primary-light: 255, 0, 0;\n  --mdui-color-on-primary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-primary-container",
      "description": {
        "kind": "markdown",
        "value": "**On Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-primary-container-light` and `--mdui-color-on-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-primary-container-light: 255, 0, 0;\n  --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-primary",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-primary-light` and `--mdui-color-inverse-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-primary-light: 255, 0, 0;\n  --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary",
      "description": {
        "kind": "markdown",
        "value": "**Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-secondary-light` and `--mdui-color-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-secondary-light: 255, 0, 0;\n  --mdui-color-secondary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-secondary-container",
      "description": {
        "kind": "markdown",
        "value": "**Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-secondary-container-light` and `--mdui-color-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-secondary-container-light: 255, 0, 0;\n  --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-secondary-light` and `--mdui-color-on-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-secondary-light: 255, 0, 0;\n  --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-secondary-container",
      "description": {
        "kind": "markdown",
        "value": "**On Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-secondary-container-light` and `--mdui-color-on-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-secondary-container-light: 255, 0, 0;\n  --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-tertiary-light` and `--mdui-color-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-tertiary-light: 255, 0, 0;\n  --mdui-color-tertiary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-tertiary-container",
      "description": {
        "kind": "markdown",
        "value": "**Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-tertiary-container-light` and `--mdui-color-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-tertiary-container-light: 255, 0, 0;\n  --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-tertiary-light` and `--mdui-color-on-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-tertiary-light: 255, 0, 0;\n  --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-tertiary-container",
      "description": {
        "kind": "markdown",
        "value": "**On Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-tertiary-container-light` and `--mdui-color-on-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-tertiary-container-light: 255, 0, 0;\n  --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface",
      "description": {
        "kind": "markdown",
        "value": "**Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-light` and `--mdui-color-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-light: 255, 0, 0;\n  --mdui-color-surface-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-dim",
      "description": {
        "kind": "markdown",
        "value": "**Surface Dim**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-dim-light` and `--mdui-color-surface-dim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-dim-light: 255, 0, 0;\n  --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-bright",
      "description": {
        "kind": "markdown",
        "value": "**Surface Bright**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-bright-light` and `--mdui-color-surface-bright-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-bright-light: 255, 0, 0;\n  --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-lowest",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Lowest**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-lowest-light` and `--mdui-color-surface-container-lowest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-lowest-light: 255, 0, 0;\n  --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-low",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Low**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-low-light` and `--mdui-color-surface-container-low-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-low-light: 255, 0, 0;\n  --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-light` and `--mdui-color-surface-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-light: 255, 0, 0;\n  --mdui-color-surface-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-high",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container High**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-high-light` and `--mdui-color-surface-container-high-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-high-light: 255, 0, 0;\n  --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-container-highest",
      "description": {
        "kind": "markdown",
        "value": "**Surface Container Highest**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-container-highest-light` and `--mdui-color-surface-container-highest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-container-highest-light: 255, 0, 0;\n  --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-variant",
      "description": {
        "kind": "markdown",
        "value": "**Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-variant-light` and `--mdui-color-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-variant-light: 255, 0, 0;\n  --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface",
      "description": {
        "kind": "markdown",
        "value": "**On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-surface-light` and `--mdui-color-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-surface-light: 255, 0, 0;\n  --mdui-color-on-surface-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-surface-variant",
      "description": {
        "kind": "markdown",
        "value": "**On Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-surface-variant-light` and `--mdui-color-on-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-surface-variant-light: 255, 0, 0;\n  --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-surface",
      "description": {
        "kind": "markdown",
        "value": "**Inverse Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-surface-light` and `--mdui-color-inverse-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-surface-light: 255, 0, 0;\n  --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-inverse-on-surface",
      "description": {
        "kind": "markdown",
        "value": "**Inverse On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-inverse-on-surface-light` and `--mdui-color-inverse-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-inverse-on-surface-light: 255, 0, 0;\n  --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-background",
      "description": {
        "kind": "markdown",
        "value": "**Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-background-light` and `--mdui-color-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-background-light: 255, 0, 0;\n  --mdui-color-background-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-background",
      "description": {
        "kind": "markdown",
        "value": "**On Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-background-light` and `--mdui-color-on-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-background-light: 255, 0, 0;\n  --mdui-color-on-background-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error",
      "description": {
        "kind": "markdown",
        "value": "**Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-error-light` and `--mdui-color-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-error-light: 255, 0, 0;\n  --mdui-color-error-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-error-container",
      "description": {
        "kind": "markdown",
        "value": "**Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-error-container-light` and `--mdui-color-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-error-container-light: 255, 0, 0;\n  --mdui-color-error-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error",
      "description": {
        "kind": "markdown",
        "value": "**On Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-error-light` and `--mdui-color-on-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-error-light: 255, 0, 0;\n  --mdui-color-on-error-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-on-error-container",
      "description": {
        "kind": "markdown",
        "value": "**On Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-on-error-container-light` and `--mdui-color-on-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-on-error-container-light: 255, 0, 0;\n  --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline",
      "description": {
        "kind": "markdown",
        "value": "**Outline**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-outline-light` and `--mdui-color-outline-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-outline-light: 255, 0, 0;\n  --mdui-color-outline-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-outline-variant",
      "description": {
        "kind": "markdown",
        "value": "**Outline Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-outline-variant-light` and `--mdui-color-outline-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-outline-variant-light: 255, 0, 0;\n  --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-shadow",
      "description": {
        "kind": "markdown",
        "value": "**Shadow**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-shadow-light` and `--mdui-color-shadow-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-shadow), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-shadow-light: 255, 0, 0;\n  --mdui-color-shadow-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-surface-tint-color",
      "description": {
        "kind": "markdown",
        "value": "**Surface Tint Color**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-surface-tint-color-light` and `--mdui-color-surface-tint-color-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-surface-tint-color-light: 255, 0, 0;\n  --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-color-scrim",
      "description": {
        "kind": "markdown",
        "value": "**Scrim**\n\nRGB color value that automatically adapts to light and dark modes, separated by `,`.\n\nIf you want to set this color value, it is recommended to set `--mdui-color-scrim-light` and `--mdui-color-scrim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n  color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n  color: rgba(var(--mdui-color-scrim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n  --mdui-color-scrim-light: 255, 0, 0;\n  --mdui-color-scrim-dark: 255, 0, 0;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level0",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 0 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level0 elevation */\n:root {\n  --mdui-elevation-level0: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level0 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level0);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level1",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 1 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level1 elevation */\n:root {\n  --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level1 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level1);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level2",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 2 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level2 elevation */\n:root {\n  --mdui-elevation-level2: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level2 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level2);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level3",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 3 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level3 elevation */\n:root {\n  --mdui-elevation-level3: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level3 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level3);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level4",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 4 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level4 elevation */\n:root {\n  --mdui-elevation-level4: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level4 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level4);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-elevation-level5",
      "description": {
        "kind": "markdown",
        "value": "Shadow value corresponding to Level 5 elevation.\n\n**Example**:\n```css\n/* Set the shadow value corresponding to level5 elevation */\n:root {\n  --mdui-elevation-level5: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value corresponding to level5 elevation */\n.element {\n  box-shadow: var(--mdui-elevation-level5);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-linear",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Linear Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Linear Animation */\n:root {\n  --mdui-motion-easing-linear: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Linear Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-linear);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-standard",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Standard Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Animation */\n:root {\n  --mdui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-standard-accelerate",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Standard Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Accelerated Animation */\n:root {\n  --mdui-motion-easing-standard-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Accelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard-accelerate);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-standard-decelerate",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Standard Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Decelerated Animation */\n:root {\n  --mdui-motion-easing-standard-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Decelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-standard-decelerate);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-emphasized",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Emphasized Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Animation */\n:root {\n  --mdui-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-emphasized-accelerate",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Emphasized Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Accelerated Animation */\n:root {\n  --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Accelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized-accelerate);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-easing-emphasized-decelerate",
      "description": {
        "kind": "markdown",
        "value": "Easing curve for Emphasized Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Decelerated Animation */\n:root {\n  --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Decelerated Animation */\n.element {\n  transition-timing-function: var(--mdui-motion-easing-emphasized-decelerate);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-short1",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for short1.\n\n**Example**:\n```css\n/* Set the animation duration for short1 */\n:root {\n  --mdui-motion-duration-short1: 0.3s;\n}\n\n/* Read the animation duration for short1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short1);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-short2",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for short2.\n\n**Example**:\n```css\n/* Set the animation duration for short2 */\n:root {\n  --mdui-motion-duration-short2: 0.3s;\n}\n\n/* Read the animation duration for short2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short2);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-short3",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for short3.\n\n**Example**:\n```css\n/* Set the animation duration for short3 */\n:root {\n  --mdui-motion-duration-short3: 0.3s;\n}\n\n/* Read the animation duration for short3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short3);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-short4",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for short4.\n\n**Example**:\n```css\n/* Set the animation duration for short4 */\n:root {\n  --mdui-motion-duration-short4: 0.3s;\n}\n\n/* Read the animation duration for short4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-short4);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-medium1",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for medium1.\n\n**Example**:\n```css\n/* Set the animation duration for medium1 */\n:root {\n  --mdui-motion-duration-medium1: 0.3s;\n}\n\n/* Read the animation duration for medium1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium1);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-medium2",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for medium2.\n\n**Example**:\n```css\n/* Set the animation duration for medium2 */\n:root {\n  --mdui-motion-duration-medium2: 0.3s;\n}\n\n/* Read the animation duration for medium2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium2);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-medium3",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for medium3.\n\n**Example**:\n```css\n/* Set the animation duration for medium3 */\n:root {\n  --mdui-motion-duration-medium3: 0.3s;\n}\n\n/* Read the animation duration for medium3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium3);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-medium4",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for medium4.\n\n**Example**:\n```css\n/* Set the animation duration for medium4 */\n:root {\n  --mdui-motion-duration-medium4: 0.3s;\n}\n\n/* Read the animation duration for medium4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-medium4);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-long1",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for long1.\n\n**Example**:\n```css\n/* Set the animation duration for long1 */\n:root {\n  --mdui-motion-duration-long1: 0.3s;\n}\n\n/* Read the animation duration for long1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long1);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-long2",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for long2.\n\n**Example**:\n```css\n/* Set the animation duration for long2 */\n:root {\n  --mdui-motion-duration-long2: 0.3s;\n}\n\n/* Read the animation duration for long2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long2);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-long3",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for long3.\n\n**Example**:\n```css\n/* Set the animation duration for long3 */\n:root {\n  --mdui-motion-duration-long3: 0.3s;\n}\n\n/* Read the animation duration for long3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long3);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-long4",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for long4.\n\n**Example**:\n```css\n/* Set the animation duration for long4 */\n:root {\n  --mdui-motion-duration-long4: 0.3s;\n}\n\n/* Read the animation duration for long4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-long4);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-extra-long1",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for extra-long1.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long1 */\n:root {\n  --mdui-motion-duration-extra-long1: 0.3s;\n}\n\n/* Read the animation duration for extra-long1 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long1);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-extra-long2",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for extra-long2.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long2 */\n:root {\n  --mdui-motion-duration-extra-long2: 0.3s;\n}\n\n/* Read the animation duration for extra-long2 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long2);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-extra-long3",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for extra-long3.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long3 */\n:root {\n  --mdui-motion-duration-extra-long3: 0.3s;\n}\n\n/* Read the animation duration for extra-long3 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long3);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-motion-duration-extra-long4",
      "description": {
        "kind": "markdown",
        "value": "Animation duration for extra-long4.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long4 */\n:root {\n  --mdui-motion-duration-extra-long4: 0.3s;\n}\n\n/* Read the animation duration for extra-long4 */\n.element {\n  transition-duration: var(--mdui-motion-duration-extra-long4);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-none",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for none level.\n\n**Example**:\n```css\n/* Set the corner radius value for none level */\n:root {\n  --mdui-shape-corner-none: 4px;\n}\n\n/* Read the corner radius value for none level */\n.element {\n  border-radius: var(--mdui-shape-corner-none);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-extra-small",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for extra-small level.\n\n**Example**:\n```css\n/* Set the corner radius value for extra-small level */\n:root {\n  --mdui-shape-corner-extra-small: 4px;\n}\n\n/* Read the corner radius value for extra-small level */\n.element {\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-small",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for small level.\n\n**Example**:\n```css\n/* Set the corner radius value for small level */\n:root {\n  --mdui-shape-corner-small: 4px;\n}\n\n/* Read the corner radius value for small level */\n.element {\n  border-radius: var(--mdui-shape-corner-small);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-medium",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for medium level.\n\n**Example**:\n```css\n/* Set the corner radius value for medium level */\n:root {\n  --mdui-shape-corner-medium: 4px;\n}\n\n/* Read the corner radius value for medium level */\n.element {\n  border-radius: var(--mdui-shape-corner-medium);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-large",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for large level.\n\n**Example**:\n```css\n/* Set the corner radius value for large level */\n:root {\n  --mdui-shape-corner-large: 4px;\n}\n\n/* Read the corner radius value for large level */\n.element {\n  border-radius: var(--mdui-shape-corner-large);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-extra-large",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for extra-large level.\n\n**Example**:\n```css\n/* Set the corner radius value for extra-large level */\n:root {\n  --mdui-shape-corner-extra-large: 4px;\n}\n\n/* Read the corner radius value for extra-large level */\n.element {\n  border-radius: var(--mdui-shape-corner-extra-large);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-shape-corner-full",
      "description": {
        "kind": "markdown",
        "value": "Corner radius value for full level.\n\n**Example**:\n```css\n/* Set the corner radius value for full level */\n:root {\n  --mdui-shape-corner-full: 4px;\n}\n\n/* Read the corner radius value for full level */\n.element {\n  border-radius: var(--mdui-shape-corner-full);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
        }
      ]
    },
    {
      "name": "--mdui-state-layer-hover",
      "description": {
        "kind": "markdown",
        "value": "Opacity for the state layer in the `hover` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in hover state */\n:root {\n  --mdui-state-layer-hover: 0.1;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        }
      ]
    },
    {
      "name": "--mdui-state-layer-focus",
      "description": {
        "kind": "markdown",
        "value": "Opacity for the state layer in the `focus` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in focus state */\n:root {\n  --mdui-state-layer-focus: 0.1;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        }
      ]
    },
    {
      "name": "--mdui-state-layer-pressed",
      "description": {
        "kind": "markdown",
        "value": "Opacity for the state layer in the `pressed` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in pressed state */\n:root {\n  --mdui-state-layer-pressed: 0.1;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        }
      ]
    },
    {
      "name": "--mdui-state-layer-dragged",
      "description": {
        "kind": "markdown",
        "value": "Opacity for the state layer in the `dragged` state.\n\n**Example**:\n```css\n/* Set the opacity for the state layer in dragged state */\n:root {\n  --mdui-state-layer-dragged: 0.1;\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-large-weight",
      "description": {
        "kind": "markdown",
        "value": "Display Large font weight.\n\n**Example**:\n```css\n/* Set Display Large font weight */\n:root {\n  --mdui-typescale-display-large-weight: 500;\n}\n\n/* Read Display Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-large-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-large-line-height",
      "description": {
        "kind": "markdown",
        "value": "Display Large line height.\n\n**Example**:\n```css\n/* Set Display Large line height */\n:root {\n  --mdui-typescale-display-large-line-height: 1.5;\n}\n\n/* Read Display Large line height */\n.element {\n  line-height: var(--mdui-typescale-display-large-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-large-size",
      "description": {
        "kind": "markdown",
        "value": "Display Large font size.\n\n**Example**:\n```css\n/* Set Display Large font size */\n:root {\n  --mdui-typescale-display-large-size: 16px;\n}\n\n/* Read Display Large font size */\n.element {\n  font-size: var(--mdui-typescale-display-large-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-large-tracking",
      "description": {
        "kind": "markdown",
        "value": "Display Large font tracking.\n\n**Example**:\n```css\n/* Set Display Large font tracking */\n:root {\n  --mdui-typescale-display-large-tracking: 0.1;\n}\n\n/* Read Display Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-large-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-medium-weight",
      "description": {
        "kind": "markdown",
        "value": "Display Medium font weight.\n\n**Example**:\n```css\n/* Set Display Medium font weight */\n:root {\n  --mdui-typescale-display-medium-weight: 500;\n}\n\n/* Read Display Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-medium-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-medium-line-height",
      "description": {
        "kind": "markdown",
        "value": "Display Medium line height.\n\n**Example**:\n```css\n/* Set Display Medium line height */\n:root {\n  --mdui-typescale-display-medium-line-height: 1.5;\n}\n\n/* Read Display Medium line height */\n.element {\n  line-height: var(--mdui-typescale-display-medium-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-medium-size",
      "description": {
        "kind": "markdown",
        "value": "Display Medium font size.\n\n**Example**:\n```css\n/* Set Display Medium font size */\n:root {\n  --mdui-typescale-display-medium-size: 16px;\n}\n\n/* Read Display Medium font size */\n.element {\n  font-size: var(--mdui-typescale-display-medium-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-medium-tracking",
      "description": {
        "kind": "markdown",
        "value": "Display Medium font tracking.\n\n**Example**:\n```css\n/* Set Display Medium font tracking */\n:root {\n  --mdui-typescale-display-medium-tracking: 0.1;\n}\n\n/* Read Display Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-medium-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-small-weight",
      "description": {
        "kind": "markdown",
        "value": "Display Small font weight.\n\n**Example**:\n```css\n/* Set Display Small font weight */\n:root {\n  --mdui-typescale-display-small-weight: 500;\n}\n\n/* Read Display Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-display-small-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-small-line-height",
      "description": {
        "kind": "markdown",
        "value": "Display Small line height.\n\n**Example**:\n```css\n/* Set Display Small line height */\n:root {\n  --mdui-typescale-display-small-line-height: 1.5;\n}\n\n/* Read Display Small line height */\n.element {\n  line-height: var(--mdui-typescale-display-small-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-small-size",
      "description": {
        "kind": "markdown",
        "value": "Display Small font size.\n\n**Example**:\n```css\n/* Set Display Small font size */\n:root {\n  --mdui-typescale-display-small-size: 16px;\n}\n\n/* Read Display Small font size */\n.element {\n  font-size: var(--mdui-typescale-display-small-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-display-small-tracking",
      "description": {
        "kind": "markdown",
        "value": "Display Small font tracking.\n\n**Example**:\n```css\n/* Set Display Small font tracking */\n:root {\n  --mdui-typescale-display-small-tracking: 0.1;\n}\n\n/* Read Display Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-display-small-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-large-weight",
      "description": {
        "kind": "markdown",
        "value": "Headline Large font weight.\n\n**Example**:\n```css\n/* Set Headline Large font weight */\n:root {\n  --mdui-typescale-headline-large-weight: 500;\n}\n\n/* Read Headline Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-large-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-large-line-height",
      "description": {
        "kind": "markdown",
        "value": "Headline Large line height.\n\n**Example**:\n```css\n/* Set Headline Large line height */\n:root {\n  --mdui-typescale-headline-large-line-height: 1.5;\n}\n\n/* Read Headline Large line height */\n.element {\n  line-height: var(--mdui-typescale-headline-large-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-large-size",
      "description": {
        "kind": "markdown",
        "value": "Headline Large font size.\n\n**Example**:\n```css\n/* Set Headline Large font size */\n:root {\n  --mdui-typescale-headline-large-size: 16px;\n}\n\n/* Read Headline Large font size */\n.element {\n  font-size: var(--mdui-typescale-headline-large-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-large-tracking",
      "description": {
        "kind": "markdown",
        "value": "Headline Large font tracking.\n\n**Example**:\n```css\n/* Set Headline Large font tracking */\n:root {\n  --mdui-typescale-headline-large-tracking: 0.1;\n}\n\n/* Read Headline Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-large-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-medium-weight",
      "description": {
        "kind": "markdown",
        "value": "Headline Medium font weight.\n\n**Example**:\n```css\n/* Set Headline Medium font weight */\n:root {\n  --mdui-typescale-headline-medium-weight: 500;\n}\n\n/* Read Headline Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-medium-line-height",
      "description": {
        "kind": "markdown",
        "value": "Headline Medium line height.\n\n**Example**:\n```css\n/* Set Headline Medium line height */\n:root {\n  --mdui-typescale-headline-medium-line-height: 1.5;\n}\n\n/* Read Headline Medium line height */\n.element {\n  line-height: var(--mdui-typescale-headline-medium-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-medium-size",
      "description": {
        "kind": "markdown",
        "value": "Headline Medium font size.\n\n**Example**:\n```css\n/* Set Headline Medium font size */\n:root {\n  --mdui-typescale-headline-medium-size: 16px;\n}\n\n/* Read Headline Medium font size */\n.element {\n  font-size: var(--mdui-typescale-headline-medium-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-medium-tracking",
      "description": {
        "kind": "markdown",
        "value": "Headline Medium font tracking.\n\n**Example**:\n```css\n/* Set Headline Medium font tracking */\n:root {\n  --mdui-typescale-headline-medium-tracking: 0.1;\n}\n\n/* Read Headline Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-small-weight",
      "description": {
        "kind": "markdown",
        "value": "Headline Small font weight.\n\n**Example**:\n```css\n/* Set Headline Small font weight */\n:root {\n  --mdui-typescale-headline-small-weight: 500;\n}\n\n/* Read Headline Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-headline-small-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-small-line-height",
      "description": {
        "kind": "markdown",
        "value": "Headline Small line height.\n\n**Example**:\n```css\n/* Set Headline Small line height */\n:root {\n  --mdui-typescale-headline-small-line-height: 1.5;\n}\n\n/* Read Headline Small line height */\n.element {\n  line-height: var(--mdui-typescale-headline-small-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-small-size",
      "description": {
        "kind": "markdown",
        "value": "Headline Small font size.\n\n**Example**:\n```css\n/* Set Headline Small font size */\n:root {\n  --mdui-typescale-headline-small-size: 16px;\n}\n\n/* Read Headline Small font size */\n.element {\n  font-size: var(--mdui-typescale-headline-small-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-headline-small-tracking",
      "description": {
        "kind": "markdown",
        "value": "Headline Small font tracking.\n\n**Example**:\n```css\n/* Set Headline Small font tracking */\n:root {\n  --mdui-typescale-headline-small-tracking: 0.1;\n}\n\n/* Read Headline Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-headline-small-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-large-weight",
      "description": {
        "kind": "markdown",
        "value": "Title Large font weight.\n\n**Example**:\n```css\n/* Set Title Large font weight */\n:root {\n  --mdui-typescale-title-large-weight: 500;\n}\n\n/* Read Title Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-large-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-large-line-height",
      "description": {
        "kind": "markdown",
        "value": "Title Large line height.\n\n**Example**:\n```css\n/* Set Title Large line height */\n:root {\n  --mdui-typescale-title-large-line-height: 1.5;\n}\n\n/* Read Title Large line height */\n.element {\n  line-height: var(--mdui-typescale-title-large-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-large-size",
      "description": {
        "kind": "markdown",
        "value": "Title Large font size.\n\n**Example**:\n```css\n/* Set Title Large font size */\n:root {\n  --mdui-typescale-title-large-size: 16px;\n}\n\n/* Read Title Large font size */\n.element {\n  font-size: var(--mdui-typescale-title-large-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-large-tracking",
      "description": {
        "kind": "markdown",
        "value": "Title Large font tracking.\n\n**Example**:\n```css\n/* Set Title Large font tracking */\n:root {\n  --mdui-typescale-title-large-tracking: 0.1;\n}\n\n/* Read Title Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-large-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-medium-weight",
      "description": {
        "kind": "markdown",
        "value": "Title Medium font weight.\n\n**Example**:\n```css\n/* Set Title Medium font weight */\n:root {\n  --mdui-typescale-title-medium-weight: 500;\n}\n\n/* Read Title Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-medium-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-medium-line-height",
      "description": {
        "kind": "markdown",
        "value": "Title Medium line height.\n\n**Example**:\n```css\n/* Set Title Medium line height */\n:root {\n  --mdui-typescale-title-medium-line-height: 1.5;\n}\n\n/* Read Title Medium line height */\n.element {\n  line-height: var(--mdui-typescale-title-medium-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-medium-size",
      "description": {
        "kind": "markdown",
        "value": "Title Medium font size.\n\n**Example**:\n```css\n/* Set Title Medium font size */\n:root {\n  --mdui-typescale-title-medium-size: 16px;\n}\n\n/* Read Title Medium font size */\n.element {\n  font-size: var(--mdui-typescale-title-medium-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-medium-tracking",
      "description": {
        "kind": "markdown",
        "value": "Title Medium font tracking.\n\n**Example**:\n```css\n/* Set Title Medium font tracking */\n:root {\n  --mdui-typescale-title-medium-tracking: 0.1;\n}\n\n/* Read Title Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-medium-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-small-weight",
      "description": {
        "kind": "markdown",
        "value": "Title Small font weight.\n\n**Example**:\n```css\n/* Set Title Small font weight */\n:root {\n  --mdui-typescale-title-small-weight: 500;\n}\n\n/* Read Title Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-title-small-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-small-line-height",
      "description": {
        "kind": "markdown",
        "value": "Title Small line height.\n\n**Example**:\n```css\n/* Set Title Small line height */\n:root {\n  --mdui-typescale-title-small-line-height: 1.5;\n}\n\n/* Read Title Small line height */\n.element {\n  line-height: var(--mdui-typescale-title-small-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-small-size",
      "description": {
        "kind": "markdown",
        "value": "Title Small font size.\n\n**Example**:\n```css\n/* Set Title Small font size */\n:root {\n  --mdui-typescale-title-small-size: 16px;\n}\n\n/* Read Title Small font size */\n.element {\n  font-size: var(--mdui-typescale-title-small-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-title-small-tracking",
      "description": {
        "kind": "markdown",
        "value": "Title Small font tracking.\n\n**Example**:\n```css\n/* Set Title Small font tracking */\n:root {\n  --mdui-typescale-title-small-tracking: 0.1;\n}\n\n/* Read Title Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-title-small-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-large-weight",
      "description": {
        "kind": "markdown",
        "value": "Label Large font weight.\n\n**Example**:\n```css\n/* Set Label Large font weight */\n:root {\n  --mdui-typescale-label-large-weight: 500;\n}\n\n/* Read Label Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-large-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-large-line-height",
      "description": {
        "kind": "markdown",
        "value": "Label Large line height.\n\n**Example**:\n```css\n/* Set Label Large line height */\n:root {\n  --mdui-typescale-label-large-line-height: 1.5;\n}\n\n/* Read Label Large line height */\n.element {\n  line-height: var(--mdui-typescale-label-large-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-large-size",
      "description": {
        "kind": "markdown",
        "value": "Label Large font size.\n\n**Example**:\n```css\n/* Set Label Large font size */\n:root {\n  --mdui-typescale-label-large-size: 16px;\n}\n\n/* Read Label Large font size */\n.element {\n  font-size: var(--mdui-typescale-label-large-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-large-tracking",
      "description": {
        "kind": "markdown",
        "value": "Label Large font tracking.\n\n**Example**:\n```css\n/* Set Label Large font tracking */\n:root {\n  --mdui-typescale-label-large-tracking: 0.1;\n}\n\n/* Read Label Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-large-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-medium-weight",
      "description": {
        "kind": "markdown",
        "value": "Label Medium font weight.\n\n**Example**:\n```css\n/* Set Label Medium font weight */\n:root {\n  --mdui-typescale-label-medium-weight: 500;\n}\n\n/* Read Label Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-medium-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-medium-line-height",
      "description": {
        "kind": "markdown",
        "value": "Label Medium line height.\n\n**Example**:\n```css\n/* Set Label Medium line height */\n:root {\n  --mdui-typescale-label-medium-line-height: 1.5;\n}\n\n/* Read Label Medium line height */\n.element {\n  line-height: var(--mdui-typescale-label-medium-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-medium-size",
      "description": {
        "kind": "markdown",
        "value": "Label Medium font size.\n\n**Example**:\n```css\n/* Set Label Medium font size */\n:root {\n  --mdui-typescale-label-medium-size: 16px;\n}\n\n/* Read Label Medium font size */\n.element {\n  font-size: var(--mdui-typescale-label-medium-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-medium-tracking",
      "description": {
        "kind": "markdown",
        "value": "Label Medium font tracking.\n\n**Example**:\n```css\n/* Set Label Medium font tracking */\n:root {\n  --mdui-typescale-label-medium-tracking: 0.1;\n}\n\n/* Read Label Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-medium-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-small-weight",
      "description": {
        "kind": "markdown",
        "value": "Label Small font weight.\n\n**Example**:\n```css\n/* Set Label Small font weight */\n:root {\n  --mdui-typescale-label-small-weight: 500;\n}\n\n/* Read Label Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-label-small-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-small-line-height",
      "description": {
        "kind": "markdown",
        "value": "Label Small line height.\n\n**Example**:\n```css\n/* Set Label Small line height */\n:root {\n  --mdui-typescale-label-small-line-height: 1.5;\n}\n\n/* Read Label Small line height */\n.element {\n  line-height: var(--mdui-typescale-label-small-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-small-size",
      "description": {
        "kind": "markdown",
        "value": "Label Small font size.\n\n**Example**:\n```css\n/* Set Label Small font size */\n:root {\n  --mdui-typescale-label-small-size: 16px;\n}\n\n/* Read Label Small font size */\n.element {\n  font-size: var(--mdui-typescale-label-small-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-label-small-tracking",
      "description": {
        "kind": "markdown",
        "value": "Label Small font tracking.\n\n**Example**:\n```css\n/* Set Label Small font tracking */\n:root {\n  --mdui-typescale-label-small-tracking: 0.1;\n}\n\n/* Read Label Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-label-small-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-large-weight",
      "description": {
        "kind": "markdown",
        "value": "Body Large font weight.\n\n**Example**:\n```css\n/* Set Body Large font weight */\n:root {\n  --mdui-typescale-body-large-weight: 500;\n}\n\n/* Read Body Large font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-large-line-height",
      "description": {
        "kind": "markdown",
        "value": "Body Large line height.\n\n**Example**:\n```css\n/* Set Body Large line height */\n:root {\n  --mdui-typescale-body-large-line-height: 1.5;\n}\n\n/* Read Body Large line height */\n.element {\n  line-height: var(--mdui-typescale-body-large-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-large-size",
      "description": {
        "kind": "markdown",
        "value": "Body Large font size.\n\n**Example**:\n```css\n/* Set Body Large font size */\n:root {\n  --mdui-typescale-body-large-size: 16px;\n}\n\n/* Read Body Large font size */\n.element {\n  font-size: var(--mdui-typescale-body-large-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-large-tracking",
      "description": {
        "kind": "markdown",
        "value": "Body Large font tracking.\n\n**Example**:\n```css\n/* Set Body Large font tracking */\n:root {\n  --mdui-typescale-body-large-tracking: 0.1;\n}\n\n/* Read Body Large font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-large-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-medium-weight",
      "description": {
        "kind": "markdown",
        "value": "Body Medium font weight.\n\n**Example**:\n```css\n/* Set Body Medium font weight */\n:root {\n  --mdui-typescale-body-medium-weight: 500;\n}\n\n/* Read Body Medium font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-medium-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-medium-line-height",
      "description": {
        "kind": "markdown",
        "value": "Body Medium line height.\n\n**Example**:\n```css\n/* Set Body Medium line height */\n:root {\n  --mdui-typescale-body-medium-line-height: 1.5;\n}\n\n/* Read Body Medium line height */\n.element {\n  line-height: var(--mdui-typescale-body-medium-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-medium-size",
      "description": {
        "kind": "markdown",
        "value": "Body Medium font size.\n\n**Example**:\n```css\n/* Set Body Medium font size */\n:root {\n  --mdui-typescale-body-medium-size: 16px;\n}\n\n/* Read Body Medium font size */\n.element {\n  font-size: var(--mdui-typescale-body-medium-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-medium-tracking",
      "description": {
        "kind": "markdown",
        "value": "Body Medium font tracking.\n\n**Example**:\n```css\n/* Set Body Medium font tracking */\n:root {\n  --mdui-typescale-body-medium-tracking: 0.1;\n}\n\n/* Read Body Medium font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-medium-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-small-weight",
      "description": {
        "kind": "markdown",
        "value": "Body Small font weight.\n\n**Example**:\n```css\n/* Set Body Small font weight */\n:root {\n  --mdui-typescale-body-small-weight: 500;\n}\n\n/* Read Body Small font weight */\n.element {\n  font-weight: var(--mdui-typescale-body-small-weight);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-small-line-height",
      "description": {
        "kind": "markdown",
        "value": "Body Small line height.\n\n**Example**:\n```css\n/* Set Body Small line height */\n:root {\n  --mdui-typescale-body-small-line-height: 1.5;\n}\n\n/* Read Body Small line height */\n.element {\n  line-height: var(--mdui-typescale-body-small-line-height);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-small-size",
      "description": {
        "kind": "markdown",
        "value": "Body Small font size.\n\n**Example**:\n```css\n/* Set Body Small font size */\n:root {\n  --mdui-typescale-body-small-size: 16px;\n}\n\n/* Read Body Small font size */\n.element {\n  font-size: var(--mdui-typescale-body-small-size);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    },
    {
      "name": "--mdui-typescale-body-small-tracking",
      "description": {
        "kind": "markdown",
        "value": "Body Small font tracking.\n\n**Example**:\n```css\n/* Set Body Small font tracking */\n:root {\n  --mdui-typescale-body-small-tracking: 0.1;\n}\n\n/* Read Body Small font tracking */\n.element {\n  letter-spacing: var(--mdui-typescale-body-small-tracking);\n}\n```\n"
      },
      "references": [
        {
          "name": "Docs",
          "url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
        }
      ]
    }
  ]
}