UNPKG

@salesforce-ux/design-tokens

Version:

Salesforce Design System Tokens & Styling Hooks

2,157 lines • 67.9 kB
{
  "slds": {
    "s": {
      "alert": {
        "font": {
          "weight": {
            "$type": "fontWeight",
            "$value": "{slds.g.font.weight.6}",
            "$description": "Alert font weight",
            "name": "weight",
            "originalValue": "{slds.g.font.weight.6}",
            "type": "fontWeight",
            "category": "",
            "scope": "",
            "namespace": "weight",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "font-weight"
            ]
          }
        },
        "close": {
          "button": {
            "hover": {
              "$type": "color",
              "$value": "{slds.g.color.on.surface.3}",
              "$description": "Alert close button hover state",
              "name": "hover",
              "originalValue": "{slds.g.color.on.surface.3}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        }
      },
      "avatar": {
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "{slds.g.radius.border.circle}",
            "$description": "Avatar default border radius",
            "name": "border",
            "originalValue": "{slds.g.radius.border.circle}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        }
      },
      "backdrop": {
        "color": {
          "background": {
            "$type": "color",
            "$value": "color-mix(in oklab, var(--slds-g-color-palette-neutral-20),transparent 20%)",
            "$extensions": {
              "com.salesforce-ux.mode": {
                "dark": {
                  "$value": "color-mix(in oklab, var(--slds-g-color-palette-neutral-95),transparent 20%)"
                }
              }
            },
            "$description": "Backdrop color",
            "name": "background",
            "originalValue": "color-mix(in oklab, var(--slds-g-color-palette-neutral-20),transparent 20%)",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "background",
            "themeOwned": true,
            "cssProperties": [
              "background-color"
            ]
          }
        }
      },
      "button": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.accent.2}",
          "$description": "Text color for non-brand and non-feedback button family",
          "name": "color",
          "originalValue": "{slds.g.color.accent.2}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "shadow": {
          "focus": {
            "$type": "shadow",
            "$value": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "$description": "Focus border color of neutral buttons",
            "name": "focus",
            "originalValue": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "focus",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          },
          "focus-inverse": {
            "$type": "shadow",
            "$value": "0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1)",
            "$description": "Focus border color of inverse buttons",
            "name": "focus-inverse",
            "originalValue": "0 0 0 2px var(--slds-g-color-brand-base-15), 0 0 0 4px var(--slds-g-color-surface-1)",
            "type": "shadow",
            "category": "",
            "scope": "inverse",
            "namespace": "focus",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          },
          "active": {
            "$type": "shadow",
            "$value": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset",
            "$description": "Active border color of neutral buttons",
            "name": "active",
            "originalValue": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "active",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          }
        },
        "brand": {
          "shadow": {
            "hover": {
              "$type": "shadow",
              "$value": "0 2px 0 0 light-dark(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-70))",
              "$description": "Hover shadow for brand buttons",
              "name": "hover",
              "originalValue": "0 2px 0 0 light-dark(var(--slds-g-color-brand-base-20), var(--slds-g-color-brand-base-70))",
              "type": "shadow",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "themeOwned": true,
              "cssProperties": [
                "box-shadow"
              ]
            }
          },
          "transform": {
            "hover": {
              "$type": "string",
              "$value": "translateY(-2px)",
              "$description": "Transform button to animate vertical movement on hover",
              "name": "hover",
              "originalValue": "translateY(-2px)",
              "type": "string",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "themeOwned": true,
              "cssProperties": [
                "transform"
              ]
            }
          }
        },
        "bordered": {
          "shadow": {
            "hover": {
              "$type": "shadow",
              "$value": "0 1.5px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-70))",
              "$description": "Hover shadow for bordered buttons",
              "name": "hover",
              "originalValue": "0 1.5px 0 0 light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-70))",
              "type": "shadow",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "themeOwned": true,
              "cssProperties": [
                "box-shadow"
              ]
            }
          },
          "transform": {
            "hover": {
              "$type": "string",
              "$value": "translateY(-1.5px)",
              "$description": "Transform button to animate vertical movement on hover",
              "name": "hover",
              "originalValue": "translateY(-1.5px)",
              "type": "string",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "themeOwned": true,
              "cssProperties": [
                "transform"
              ]
            }
          }
        },
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "{slds.g.radius.border.pill}",
            "$description": "Default border radius for buttons",
            "name": "border",
            "originalValue": "{slds.g.radius.border.pill}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        },
        "spacing": {
          "inline": {
            "$type": "dimension",
            "$value": "{slds.g.spacing.4}",
            "$description": "Inline/horizontal spacing of buttons",
            "name": "inline",
            "originalValue": "{slds.g.spacing.4}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "inline",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "padding",
              "margin",
              "top",
              "right",
              "bottom",
              "left"
            ]
          }
        }
      },
      "button-color-background": {
        "$type": "color",
        "$value": "{slds.g.color.surface.container.1}",
        "$description": "Background of neutral buttons",
        "name": "button-color-background",
        "originalValue": "{slds.g.color.surface.container.1}",
        "type": "color",
        "syntax": "<color>",
        "category": "background",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "button-color-background-hover": {
        "$type": "color",
        "$value": "{slds.g.color.brand.base.90}",
        "$description": "Hover background of neutral buttons",
        "name": "button-color-background-hover",
        "originalValue": "{slds.g.color.brand.base.90}",
        "type": "color",
        "syntax": "<color>",
        "category": "background",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "button-color-background-focus": {
        "$type": "color",
        "$value": "{slds.g.color.surface.container.2}",
        "$description": "Focus background of neutral buttons",
        "name": "button-color-background-focus",
        "originalValue": "{slds.g.color.surface.container.2}",
        "type": "color",
        "syntax": "<color>",
        "category": "background",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "button-color-background-active": {
        "$type": "color",
        "$value": "{slds.g.color.surface.container.2}",
        "$description": "Active background of neutral buttons",
        "name": "button-color-background-active",
        "originalValue": "{slds.g.color.surface.container.2}",
        "type": "color",
        "syntax": "<color>",
        "category": "background",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "button-color-border": {
        "$type": "color",
        "$value": "{slds.g.color.border.2}",
        "$description": "Border color of neutral buttons",
        "name": "button-color-border",
        "originalValue": "{slds.g.color.border.2}",
        "type": "color",
        "syntax": "<color>",
        "category": "border",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "button-color-hover": {
        "$type": "color",
        "$value": "{slds.g.color.on.surface.3}",
        "$description": "Hover text color of neutral buttons",
        "name": "button-color-hover",
        "originalValue": "{slds.g.color.on.surface.3}",
        "type": "color",
        "syntax": "<color>",
        "category": "hover",
        "scope": "color",
        "namespace": "button",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "container": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.on.surface.1}",
          "$description": "Container text color",
          "name": "color",
          "originalValue": "{slds.g.color.on.surface.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "shadow": {
          "$type": "shadow",
          "$value": "none",
          "$description": "Container shadow",
          "name": "shadow",
          "originalValue": "none",
          "type": "shadow",
          "category": "",
          "scope": "",
          "namespace": "shadow",
          "themeOwned": true,
          "cssProperties": [
            "box-shadow"
          ]
        },
        "footer": {
          "sizing": {
            "border": {
              "$type": "dimension",
              "$value": "{slds.g.sizing.border.1}",
              "$description": "Container border size",
              "name": "border",
              "originalValue": "{slds.g.sizing.border.1}",
              "type": "dimension",
              "syntax": "<length>",
              "category": "",
              "scope": "",
              "namespace": "border",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "border-width",
                "width"
              ]
            }
          },
          "color": {
            "background": {
              "$type": "color",
              "$value": "{slds.g.color.surface.container.1}",
              "$description": "Container footer background color",
              "name": "background",
              "originalValue": "{slds.g.color.surface.container.1}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          },
          "font": {
            "align": {
              "$type": "string",
              "$value": "right",
              "$description": "Container footer font alignment",
              "name": "align",
              "originalValue": "right",
              "type": "string",
              "category": "",
              "scope": "",
              "namespace": "align",
              "themeOwned": true,
              "cssProperties": [
                "text-align"
              ]
            },
            "color": {
              "$type": "color",
              "$value": "{slds.g.color.on.surface.2}",
              "$description": "Container heading font color",
              "name": "color",
              "originalValue": "{slds.g.color.on.surface.2}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "color",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        },
        "sizing": {
          "border": {
            "$type": "dimension",
            "$value": "0",
            "$description": "Container border width",
            "name": "border",
            "originalValue": "0",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          }
        },
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "{slds.g.radius.border.4}",
            "$description": "Container border radius",
            "name": "border",
            "originalValue": "{slds.g.radius.border.4}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        },
        "heading": {
          "font": {
            "color": {
              "$type": "color",
              "$value": "{slds.g.color.on.surface.3}",
              "$description": "Container heading font color",
              "name": "color",
              "originalValue": "{slds.g.color.on.surface.3}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "color",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            },
            "size": {
              "$type": "dimension",
              "$value": "{slds.g.font.scale.3}",
              "$description": "Container heading font size",
              "name": "size",
              "originalValue": "{slds.g.font.scale.3}",
              "type": "dimension",
              "syntax": "<length>",
              "category": "",
              "scope": "",
              "namespace": "size",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "font-size"
              ]
            },
            "weight": {
              "$type": "fontWeight",
              "$value": "{slds.g.font.weight.4}",
              "$description": "Container heading font weight",
              "name": "weight",
              "originalValue": "{slds.g.font.weight.4}",
              "type": "fontWeight",
              "category": "",
              "scope": "",
              "namespace": "weight",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "font-weight"
              ]
            },
            "align": {
              "$type": "string",
              "$value": "left",
              "$description": "Container heading font alignment",
              "name": "align",
              "originalValue": "left",
              "type": "string",
              "category": "",
              "scope": "",
              "namespace": "align",
              "themeOwned": true,
              "cssProperties": [
                "text-align"
              ]
            }
          }
        },
        "content": {
          "color": {
            "$type": "color",
            "$value": "{slds.g.color.on.surface.1}",
            "$description": "Container content text color",
            "name": "color",
            "originalValue": "{slds.g.color.on.surface.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "color",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        }
      },
      "container-color-border": {
        "$type": "color",
        "$value": "transparent",
        "$description": "Container border color",
        "name": "container-color-border",
        "originalValue": "transparent",
        "type": "color",
        "syntax": "<color>",
        "category": "border",
        "scope": "color",
        "namespace": "container",
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "container-heading-var-font-size": {
        "$type": "dimension",
        "$value": "{slds.g.font.scale.var.3}",
        "$description": "Container heading variable font size",
        "name": "container-heading-var-font-size",
        "originalValue": "{slds.g.font.scale.var.3}",
        "type": "dimension",
        "syntax": "<length>",
        "category": "var",
        "scope": "heading",
        "namespace": "container",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "font-size"
        ]
      },
      "header": {
        "sizing": {
          "height": {
            "$type": "dimension",
            "$value": {
              "value": 3.125,
              "unit": "rem"
            },
            "$description": "Header height",
            "name": "height",
            "originalValue": "3.125rem",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "height",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          }
        }
      },
      "helptext": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.on.surface.1}",
          "$description": "Default color for helptext.",
          "name": "color",
          "originalValue": "{slds.g.color.on.surface.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "font": {
          "size": {
            "$type": "dimension",
            "$value": "{slds.g.font.scale.neg.1}",
            "$description": "Text size of help text that sits below a form control, if present.",
            "name": "size",
            "originalValue": "{slds.g.font.scale.neg.1}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "size",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "font-size"
            ]
          }
        },
        "spacing": {
          "$type": "dimension",
          "$value": "{slds.g.spacing.1}",
          "$description": "Spacing between the helptext and the form control.",
          "name": "spacing",
          "originalValue": "{slds.g.spacing.1}",
          "type": "dimension",
          "syntax": "<length>",
          "category": "",
          "scope": "",
          "namespace": "spacing",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "padding",
            "margin",
            "top",
            "right",
            "bottom",
            "left"
          ]
        }
      },
      "icon": {
        "color": {
          "foreground": {
            "$type": "color",
            "$value": "{slds.g.color.on.surface.1}",
            "$description": "Fill color for icons. The default is utility icons.",
            "name": "foreground",
            "originalValue": "{slds.g.color.on.surface.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "foreground",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        },
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "{slds.g.radius.border.circle}",
            "$description": "Default border radius for icons.",
            "name": "border",
            "originalValue": "{slds.g.radius.border.circle}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        }
      },
      "input": {
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "{slds.g.radius.border.2}",
            "$description": "Border radius for inputs",
            "name": "border",
            "originalValue": "{slds.g.radius.border.2}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        },
        "color": {
          "background": {
            "$type": "color",
            "$value": "{slds.g.color.surface.container.1}",
            "$description": "Background color for inputs",
            "name": "background",
            "originalValue": "{slds.g.color.surface.container.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "background-disabled": {
            "$type": "color",
            "$value": "{slds.g.color.disabled.container.1}",
            "$description": "Background color for inputs when disabled",
            "name": "background-disabled",
            "originalValue": "{slds.g.color.disabled.container.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "disabled",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "background-invalid": {
            "$type": "color",
            "$value": "{slds.g.color.error.container.1}",
            "$description": "Background color for inputs when disabled",
            "name": "background-invalid",
            "originalValue": "{slds.g.color.error.container.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "invalid",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "border": {
            "$type": "color",
            "$value": "{slds.g.color.border.2}",
            "$description": "Border color for inputs",
            "name": "border",
            "originalValue": "{slds.g.color.border.2}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "border-disabled": {
            "$type": "color",
            "$value": "{slds.g.color.border.disabled.1}",
            "$description": "Disabled border color for input containers",
            "name": "border-disabled",
            "originalValue": "{slds.g.color.border.disabled.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "disabled",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "border-focus": {
            "$type": "color",
            "$value": "{slds.g.color.border.2}",
            "$description": "Border color for inputs on focus.",
            "name": "border-focus",
            "originalValue": "{slds.g.color.border.2}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "focus",
            "namespace": "border",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        },
        "spacing": {
          "$type": "dimension",
          "$value": "{slds.g.spacing.2}",
          "$description": "Spacing for inputs. Set as padding.",
          "name": "spacing",
          "originalValue": "{slds.g.spacing.2}",
          "type": "dimension",
          "syntax": "<length>",
          "category": "",
          "scope": "",
          "namespace": "spacing",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "padding",
            "margin",
            "top",
            "right",
            "bottom",
            "left"
          ]
        },
        "shadow": {
          "focus": {
            "$type": "shadow",
            "$value": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "$description": "Box shadow for inputs on focus.",
            "name": "focus",
            "originalValue": "2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.35) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.15) inset, 0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "focus",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          },
          "invalid": {
            "$type": "shadow",
            "$value": "none",
            "$description": "Box shadow for inputs on focus.",
            "name": "invalid",
            "originalValue": "none",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "invalid",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          }
        }
      },
      "input-color": {
        "$type": "color",
        "$value": "{slds.g.color.on.surface.2}",
        "$description": "Text color for inputs",
        "name": "input-color",
        "originalValue": "{slds.g.color.on.surface.2}",
        "type": "color",
        "syntax": "<color>",
        "category": "",
        "scope": "color",
        "namespace": "input",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "input-color-disabled": {
        "$type": "color",
        "$value": "{slds.g.color.on.disabled.1}",
        "$description": "Disabled text color for input content",
        "name": "input-color-disabled",
        "originalValue": "{slds.g.color.on.disabled.1}",
        "type": "color",
        "syntax": "<color>",
        "category": "disabled",
        "scope": "color",
        "namespace": "input",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "input-color-invalid": {
        "$type": "color",
        "$value": "{slds.g.color.error.1}",
        "$description": "Text color for inputs when disabled",
        "name": "input-color-invalid",
        "originalValue": "{slds.g.color.error.1}",
        "type": "color",
        "syntax": "<color>",
        "category": "invalid",
        "scope": "color",
        "namespace": "input",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      },
      "label": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.on.surface.2}",
          "$description": "Text color for form labels",
          "name": "color",
          "originalValue": "{slds.g.color.on.surface.2}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "font": {
          "size": {
            "$type": "dimension",
            "$value": "{slds.g.font.size.base}",
            "$description": "Font size for form labels",
            "name": "size",
            "originalValue": "{slds.g.font.size.base}",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "size",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "font-size"
            ]
          },
          "weight": {
            "$type": "fontWeight",
            "$value": "{slds.g.font.weight.6}",
            "$description": "Default font weight for input labels.",
            "name": "weight",
            "originalValue": "{slds.g.font.weight.6}",
            "type": "fontWeight",
            "category": "",
            "scope": "",
            "namespace": "weight",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "font-weight"
            ]
          }
        },
        "spacing": {
          "$type": "dimension",
          "$value": "{slds.g.spacing.2}",
          "$description": "Spacing between the label and the input",
          "name": "spacing",
          "originalValue": "{slds.g.spacing.2}",
          "type": "dimension",
          "syntax": "<length>",
          "category": "",
          "scope": "",
          "namespace": "spacing",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "padding",
            "margin",
            "top",
            "right",
            "bottom",
            "left"
          ]
        },
        "spacing-gap": {
          "$type": "dimension",
          "$value": "{slds.g.spacing.1}",
          "$description": "Default gap spacing for input labels.",
          "name": "spacing-gap",
          "originalValue": "{slds.g.spacing.1}",
          "type": "dimension",
          "syntax": "<length>",
          "category": "",
          "scope": "gap",
          "namespace": "spacing",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "padding",
            "margin",
            "top",
            "right",
            "bottom",
            "left"
          ]
        }
      },
      "link": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.accent.2}",
          "$description": "Default color for links",
          "name": "color",
          "originalValue": "{slds.g.color.accent.2}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-hover": {
          "$type": "color",
          "$value": "{slds.g.color.accent.3}",
          "$description": "Default color for links on hover",
          "name": "color-hover",
          "originalValue": "{slds.g.color.accent.3}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "hover",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-focus": {
          "$type": "color",
          "$value": "{slds.g.color.accent.3}",
          "$description": "Default color for links on focus",
          "name": "color-focus",
          "originalValue": "{slds.g.color.accent.3}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "focus",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-active": {
          "$type": "color",
          "$value": "{slds.g.color.accent.3}",
          "$description": "Default color for links on active",
          "name": "color-active",
          "originalValue": "{slds.g.color.accent.3}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "active",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "outline": {
          "color": {
            "$type": "color",
            "$value": "{slds.g.color.brand.base.15}",
            "$description": "Default outline color for links on focus",
            "name": "color",
            "originalValue": "{slds.g.color.brand.base.15}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "color",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        }
      },
      "mark": {
        "color": {
          "foreground-checked": {
            "$type": "color",
            "$value": "{slds.g.color.on.accent.1}",
            "$description": "Color of checkmarks",
            "name": "foreground-checked",
            "originalValue": "{slds.g.color.on.accent.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "checked",
            "namespace": "foreground",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "background": {
            "$type": "color",
            "$value": "{slds.g.color.surface.container.1}",
            "$description": "Color of checkmark background unchecked",
            "name": "background",
            "originalValue": "{slds.g.color.surface.container.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "background-checked": {
            "$type": "color",
            "$value": "{slds.g.color.accent.container.1}",
            "$description": "Color of background checkmarks are on",
            "name": "background-checked",
            "originalValue": "{slds.g.color.accent.container.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "checked",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "foreground-invalid": {
            "$type": "color",
            "$value": "{slds.g.color.error.base.100}",
            "$description": "Color of background checkmarks are on",
            "name": "foreground-invalid",
            "originalValue": "{slds.g.color.error.base.100}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "invalid",
            "namespace": "foreground",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "background-invalid": {
            "$type": "color",
            "$value": "{slds.g.color.error.base.40}",
            "$description": "Color of background checkmarks are on",
            "name": "background-invalid",
            "originalValue": "{slds.g.color.error.base.40}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "invalid",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        },
        "shadow": {
          "focus": {
            "$type": "shadow",
            "$value": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "$description": "Box shadow for checked inputs on focus.",
            "name": "focus",
            "originalValue": "0 0 0 2px var(--slds-g-color-surface-1), 0 0 0 4px var(--slds-g-color-brand-base-15)",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "focus",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          },
          "checked": {
            "$type": "shadow",
            "$value": "0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset",
            "$description": "Box shadow for checked inputs when checked.",
            "name": "checked",
            "originalValue": "0px 1px 0px 0px rgba(0, 0, 0, 0.08) inset, 0px 0.5px 2px 0px rgba(0, 0, 0, 0.08) inset, 2px 2px 5px 0px rgba(0, 0, 0, 0.08) inset",
            "type": "shadow",
            "category": "",
            "scope": "",
            "namespace": "checked",
            "themeOwned": true,
            "cssProperties": [
              "box-shadow"
            ]
          }
        }
      },
      "menu": {
        "item": {
          "color": {
            "background": {
              "active": {
                "$type": "color",
                "$value": "{slds.g.color.brand.base.90}",
                "$description": "Active background color for menu/listbox items",
                "name": "active",
                "originalValue": "{slds.g.color.brand.base.90}",
                "type": "color",
                "syntax": "<color>",
                "category": "",
                "scope": "",
                "namespace": "active",
                "inherits": true,
                "themeOwned": true,
                "cssProperties": [
                  "background-color",
                  "color",
                  "border-color",
                  "fill"
                ]
              }
            },
            "active": {
              "$type": "color",
              "$value": "{slds.g.color.accent.1}",
              "$description": "Active text color for menu/listbox items",
              "name": "active",
              "originalValue": "{slds.g.color.accent.1}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "active",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        }
      },
      "navigation": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.on.surface.1}",
          "$description": "Default color for tabs",
          "name": "color",
          "originalValue": "{slds.g.color.on.surface.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-active": {
          "$type": "color",
          "$value": "{slds.g.color.accent.3}",
          "$description": "Default color for tabs",
          "name": "color-active",
          "originalValue": "{slds.g.color.accent.3}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "active",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-hover": {
          "$type": "color",
          "$value": "{slds.g.color.brand.base.15}",
          "$description": "Default color for tabs",
          "name": "color-hover",
          "originalValue": "{slds.g.color.brand.base.15}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "hover",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-background": {
          "$type": "color",
          "$value": "{slds.g.color.surface.container.1}",
          "$description": "Default color for tabs",
          "name": "color-background",
          "originalValue": "{slds.g.color.surface.container.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "background",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-background-active": {
          "$type": "color",
          "$value": "{slds.g.color.surface.container.1}",
          "$description": "Default color for tabs",
          "name": "color-background-active",
          "originalValue": "{slds.g.color.surface.container.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "active",
          "scope": "background",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-background-hover": {
          "$type": "color",
          "$value": "{slds.g.color.brand.base.90}",
          "$description": "Default color for tabs",
          "name": "color-background-hover",
          "originalValue": "{slds.g.color.brand.base.90}",
          "type": "color",
          "syntax": "<color>",
          "category": "hover",
          "scope": "background",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-border": {
          "$type": "color",
          "$value": "{slds.g.color.border.1}",
          "$description": "Default border color for tabs",
          "name": "color-border",
          "originalValue": "{slds.g.color.border.1}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "border",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "color-border-hover": {
          "$type": "color",
          "$value": "{slds.g.color.brand.base.15}",
          "$description": "Default border color for tabs",
          "name": "color-border-hover",
          "originalValue": "{slds.g.color.brand.base.15}",
          "type": "color",
          "syntax": "<color>",
          "category": "hover",
          "scope": "border",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "sizing": {
          "border-hover": {
            "$type": "dimension",
            "$value": {
              "value": 3,
              "unit": "px"
            },
            "$description": "Default border color for tabs",
            "name": "border-hover",
            "originalValue": "3px",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "hover",
            "namespace": "border",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          },
          "border-active": {
            "$type": "dimension",
            "$value": {
              "value": 3,
              "unit": "px"
            },
            "$description": "Default border color for tabs",
            "name": "border-active",
            "originalValue": "3px",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "active",
            "namespace": "border",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          },
          "height": {
            "$type": "dimension",
            "$value": {
              "value": 2.5,
              "unit": "rem"
            },
            "$description": "Default height for tabs",
            "name": "height",
            "originalValue": "2.5rem",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "height",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          }
        },
        "font": {
          "weight": {
            "$type": "fontWeight",
            "$value": "600",
            "$description": "Default border color for tabs",
            "name": "weight",
            "originalValue": "600",
            "type": "fontWeight",
            "category": "",
            "scope": "",
            "namespace": "weight",
            "themeOwned": true,
            "cssProperties": [
              "font-weight"
            ]
          },
          "weight-active": {
            "$type": "fontWeight",
            "$value": "600",
            "$description": "Default border color for tabs",
            "name": "weight-active",
            "originalValue": "600",
            "type": "fontWeight",
            "category": "",
            "scope": "active",
            "namespace": "weight",
            "themeOwned": true,
            "cssProperties": [
              "font-weight"
            ]
          },
          "lineheight": {
            "$type": "dimension",
            "$value": {
              "value": 2.5,
              "unit": "rem"
            },
            "$description": "Default lineheight for tabs",
            "name": "lineheight",
            "originalValue": "2.5rem",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "lineheight",
            "themeOwned": true,
            "cssProperties": [
              "line-height"
            ]
          }
        }
      },
      "pageheader": {
        "color": {
          "background": {
            "$type": "color",
            "$value": "{slds.g.color.surface.container.2}",
            "$description": "Background color of all page header",
            "name": "background",
            "originalValue": "{slds.g.color.surface.container.2}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "background",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        },
        "row": {
          "color": {
            "background": {
              "$type": "color",
              "$value": "{slds.g.color.surface.container.2}",
              "$description": "Background color of all page header rows",
              "name": "background",
              "originalValue": "{slds.g.color.surface.container.2}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        },
        "radius": {
          "border": {
            "$type": "dimension",
            "$value": "0",
            "$description": "Border radius for all page headers",
            "name": "border",
            "originalValue": "0",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "themeOwned": true,
            "cssProperties": [
              "border-radius"
            ]
          }
        },
        "title": {
          "font": {
            "size": {
              "$type": "dimension",
              "$value": "{slds.g.font.scale.5}",
              "$description": "Font-size of all page header titles",
              "name": "size",
              "originalValue": "{slds.g.font.scale.5}",
              "type": "dimension",
              "syntax": "<length>",
              "category": "",
              "scope": "",
              "namespace": "size",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "font-size"
              ]
            },
            "weight": {
              "$type": "fontWeight",
              "$value": "{slds.g.font.weight.4}",
              "$description": "Font-weight of all page header titles",
              "name": "weight",
              "originalValue": "{slds.g.font.weight.4}",
              "type": "fontWeight",
              "category": "",
              "scope": "",
              "namespace": "weight",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "font-weight"
              ]
            }
          }
        },
        "sizing": {
          "border": {
            "$type": "dimension",
            "$value": "0",
            "$description": "Border width for all page headers",
            "name": "border",
            "originalValue": "0",
            "type": "dimension",
            "syntax": "<length>",
            "category": "",
            "scope": "",
            "namespace": "border",
            "themeOwned": true,
            "cssProperties": [
              "border-width",
              "width"
            ]
          }
        },
        "shadow": {
          "$type": "shadow",
          "$value": "none",
          "$description": "Box shadow for all page headers",
          "name": "shadow",
          "originalValue": "none",
          "type": "shadow",
          "category": "",
          "scope": "",
          "namespace": "shadow",
          "themeOwned": true,
          "cssProperties": [
            "box-shadow"
          ]
        },
        "action": {
          "bottom": {
            "spacing": {
              "$type": "dimension",
              "$value": "{slds.g.spacing.1}",
              "$description": "bottom spacing for pageheader action.",
              "name": "spacing",
              "originalValue": "{slds.g.spacing.1}",
              "type": "dimension",
              "syntax": "<length>",
              "category": "",
              "scope": "",
              "namespace": "spacing",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "padding",
                "margin",
                "top",
                "right",
                "bottom",
                "left"
              ]
            }
          }
        }
      },
      "pill": {
        "color": {
          "background": {
            "hover": {
              "$type": "color",
              "$value": "{slds.g.color.brand.base.90}",
              "$description": "Hover background color for pills",
              "name": "hover",
              "originalValue": "{slds.g.color.brand.base.90}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "hover",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        }
      },
      "table": {
        "color": {
          "$type": "color",
          "$value": "{slds.g.color.neutral.base.0}",
          "$description": "Text/icon color for the table",
          "name": "color",
          "originalValue": "{slds.g.color.neutral.base.0}",
          "type": "color",
          "syntax": "<color>",
          "category": "",
          "scope": "",
          "namespace": "color",
          "inherits": true,
          "themeOwned": true,
          "cssProperties": [
            "background-color",
            "color",
            "border-color",
            "fill"
          ]
        },
        "header": {
          "color": {
            "background": {
              "$type": "color",
              "$value": "{slds.g.color.surface.container.2}",
              "$description": "Background color for the table header",
              "name": "background",
              "originalValue": "{slds.g.color.surface.container.2}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            },
            "background-hover": {
              "$type": "color",
              "$value": "{slds.g.color.surface.container.3}",
              "$description": "Background color for the table header cells on hover",
              "name": "background-hover",
              "originalValue": "{slds.g.color.surface.container.3}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "hover",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            },
            "background-selected": {
              "$type": "color",
              "$value": "{slds.g.color.surface.container.1}",
              "$description": "Background color for the table cells on active/selected",
              "name": "background-selected",
              "originalValue": "{slds.g.color.surface.container.1}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "selected",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          },
          "font": {
            "weight": {
              "$type": "fontWeight",
              "$value": "{slds.g.font.weight.6}",
              "$description": "Font weight for the table header",
              "name": "weight",
              "originalValue": "{slds.g.font.weight.6}",
              "type": "fontWeight",
              "category": "",
              "scope": "",
              "namespace": "weight",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "font-weight"
              ]
            }
          }
        },
        "resize": {
          "color": {
            "$type": "color",
            "$value": "{slds.g.color.border.1}",
            "$description": "Color of the resize handle on table columns",
            "name": "color",
            "originalValue": "{slds.g.color.border.1}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "",
            "namespace": "color",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          },
          "color-active": {
            "$type": "color",
            "$value": "{slds.g.color.accent.3}",
            "$description": "Active color of the resize handle on table columns",
            "name": "color-active",
            "originalValue": "{slds.g.color.accent.3}",
            "type": "color",
            "syntax": "<color>",
            "category": "",
            "scope": "active",
            "namespace": "color",
            "inherits": true,
            "themeOwned": true,
            "cssProperties": [
              "background-color",
              "color",
              "border-color",
              "fill"
            ]
          }
        },
        "row": {
          "color": {
            "background-selected": {
              "$type": "color",
              "$value": "{slds.g.color.brand.base.90}",
              "$description": "Background color of the selected table row",
              "name": "background-selected",
              "originalValue": "{slds.g.color.brand.base.90}",
              "type": "color",
              "syntax": "<color>",
              "category": "",
              "scope": "selected",
              "namespace": "background",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            },
            "border-selected-hover": {
              "$type": "color",
              "$value": "{slds.g.color.border.accent.2}",
              "$description": "Border color of the selected table row on hover",
              "name": "border-selected-hover",
              "originalValue": "{slds.g.color.border.accent.2}",
              "type": "color",
              "syntax": "<color>",
              "category": "hover",
              "scope": "selected",
              "namespace": "border",
              "inherits": true,
              "themeOwned": true,
              "cssProperties": [
                "background-color",
                "color",
                "border-color",
                "fill"
              ]
            }
          }
        },
        "cell": {
          "shadow": {
            "selected": {
              "$type": "shadow",
              "$value": "var(--slds-g-color-brand-base-15) 0 0 0 2px inset",
              "$description": "Box shadow of the selected table cell",
              "name": "selected",
              "originalValue": "var(--slds-g-color-brand-base-15) 0 0 0 2px inset",
              "type": "shadow",
              "category": "",
              "scope": "",
              "namespace": "selected",
              "themeOwned": true,
              "cssProperties": [
                "box-shadow"
              ]
            }
          }
        }
      },
      "table-header-color": {
        "$type": "color",
        "$value": "{slds.g.color.on.surface.1}",
        "$description": "Text/icon color for the table header",
        "name": "table-header-color",
        "originalValue": "{slds.g.color.on.surface.1}",
        "type": "color",
        "syntax": "<color>",
        "category": "color",
        "scope": "header",
        "namespace": "table",
        "inherits": true,
        "themeOwned": true,
        "cssProperties": [
          "background-color",
          "color",
          "border-color",
          "fill"
        ]
      }
    }
  }
}