Component defs
Return list of all component definitions, excluding those that are hidden.
GET /api/v2/theme/component-defs/?format=api
[
{
"component_id": "button-background",
"name": "Button Background",
"fallback": {
"light": "hsl(226, 64%, 17%)",
"dark": "hsl(4, 64%, 52%)"
},
"variables": [
{
"css_variable": "--btn-primary-color"
},
{
"css_variable": "--btn-primary-shadow-color",
"opacity": 0.5,
"lightness_offset": -0.6
},
{
"css_variable": "--primary-d1"
}
],
"contrast_against": [
{
"type": "component",
"value": "button-text",
"contrast_type": "text"
}
]
},
{
"component_id": "button-background-hover",
"name": "Button Background (Hover)",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--btn-primary-hover-color"
},
{
"css_variable": "--btn-primary-hover-shadow-color",
"opacity": 0.65,
"lightness_offset": -0.6
},
{
"css_variable": "--primary"
},
{
"css_variable": "--primary-d3",
"lightness_offset": -0.6
}
],
"contrast_against": [
{
"type": "component",
"value": "button-text-hover",
"contrast_type": "text"
}
]
},
{
"component_id": "button-text",
"name": "Button Text",
"fallback": {
"light": "hsl(0, 0%, 100%)",
"dark": "hsl(0, 0%, 100%)"
},
"variables": [
{
"css_variable": "--btn-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "button-background",
"contrast_type": "text"
}
]
},
{
"component_id": "button-text-hover",
"name": "Button Text (Hover)",
"fallback": {
"light": "hsl(0, 0%, 100%)",
"dark": "hsl(0, 0%, 100%)"
},
"variables": [
{
"css_variable": "--btn-text-hover-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "button-background-hover",
"contrast_type": "text"
}
]
},
{
"component_id": "borderless-button",
"name": "Borderless Button",
"fallback": {
"light": "hsl(226, 64%, 17%)",
"dark": "hsl(4, 64%, 52%)"
},
"variables": [
{
"css_variable": "--btn-borderless-active-text-color"
},
{
"css_variable": "--btn-borderless-active-icon-color"
},
{
"css_variable": "--btn-borderless-secondary-active-bg-color",
"lightness": 60,
"opacity": 0.15
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--y1",
"contrast_type": "text"
}
]
},
{
"component_id": "link-text",
"name": "Link Text",
"fallback": {
"light": "hsl(226, 64%, 17%)",
"dark": "hsl(4, 64%, 52%)"
},
"variables": [
{
"css_variable": "--link-color"
},
{
"css_variable": "--link-underline-color",
"opacity": 0.2
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--y1",
"contrast_type": "text"
}
]
},
{
"component_id": "link-text-hover",
"name": "Link Text (Hover)",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--link-hover-color"
},
{
"css_variable": "--link-underline-hover-color",
"opacity": 0.6
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--y1",
"contrast_type": "text"
}
]
},
{
"component_id": "header-icons-text",
"name": "Header Icons & Text",
"fallback": {
"light": "hsl(240, 16%, 12%)",
"dark": "hsl(240, 100%, 99%)"
},
"variables": [
{
"css_variable": "--header-fg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
}
]
},
{
"component_id": "tab-text",
"name": "Tab Text",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--tab-active-icon-color"
},
{
"css_variable": "--tab-active-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "text"
}
]
},
{
"component_id": "tab-line",
"name": "Tab Line",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--tab-active-border-color"
},
{
"css_variable": "--tab-focus-border-color",
"opacity": 0.5
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "non-text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "non-text"
}
]
},
{
"component_id": "avatar-background",
"name": "Avatar Background",
"fallback": {
"light": "hsl(171, 61%, 91%)",
"dark": "hsl(186, 25%, 18%)"
},
"variables": [
{
"css_variable": "--avatar-bg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "avatar-icon",
"contrast_type": "non-text"
}
]
},
{
"component_id": "avatar-icon",
"name": "Avatar Icon",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--avatar-icon-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "avatar-background",
"contrast_type": "non-text"
}
]
},
{
"component_id": "label-background",
"name": "Label Background",
"fallback": {
"light": "hsl(171, 61%, 91%)",
"dark": "hsl(186, 25%, 18%)"
},
"variables": [
{
"css_variable": "--label-bg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "label-text",
"contrast_type": "text"
}
]
},
{
"component_id": "label-text",
"name": "Label Text",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(0, 0%, 100%)"
},
"variables": [
{
"css_variable": "--label-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "label-background",
"contrast_type": "text"
}
]
},
{
"component_id": "icon-focus-outline-accent-text",
"name": "Icon, Focus Outline, Text/Input Accent",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--icon-brand"
},
{
"css_variable": "--text-brand"
},
{
"css_variable": "--focus-outline-color"
},
{
"css_variable": "--link-underline-focus-color"
},
{
"css_variable": "--input-color"
},
{
"css_variable": "--input-hover-color",
"lightness_offset": -0.1
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-background",
"name": "Main Menu Background",
"fallback": {
"light": "hsl(0, 0%, 100%)",
"dark": "hsl(240, 6%, 14%)"
},
"variables": [
{
"css_variable": "--main-menu-bg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-text",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-text",
"name": "Main Menu Text",
"fallback": {
"light": "hsla(240, 91%, 2%, 0.9)",
"dark": "hsl(240, 100%, 98%)"
},
"variables": [
{
"css_variable": "--main-menu-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-background",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-item-background-hover",
"name": "Main Menu Item Background (Hover)",
"fallback": {
"light": "hsla(0, 0%, 63%, 0.15)",
"dark": "hsla(0, 0%, 63%, 0.15)"
},
"variables": [
{
"css_variable": "--main-menu-item-bg-hover-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-text-hover",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-text-hover",
"name": "Main Menu Text (Hover)",
"fallback": {
"light": "main-menu-text",
"dark": "main-menu-text"
},
"variables": [
{
"css_variable": "--main-menu-text-hover-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-item-background-hover",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-active-item-background",
"name": "Main Menu Active Item Background",
"fallback": {
"light": "hsl(171, 61%, 91%)",
"dark": "hsl(186, 25%, 18%)"
},
"variables": [
{
"css_variable": "--main-menu-active-item-bg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-active-item-text",
"contrast_type": "text"
}
]
},
{
"component_id": "main-menu-active-item-text",
"name": "Main Menu Active Item Text",
"fallback": {
"light": "hsla(240, 91%, 2%, 0.9)",
"dark": "hsl(240, 100%, 98%)"
},
"variables": [
{
"css_variable": "--main-menu-active-item-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "main-menu-active-item-background",
"contrast_type": "text"
}
]
},
{
"component_id": "active-menu-item",
"name": "Highlighted Item Background",
"fallback": {
"light": "hsl(171, 61%, 91%)",
"dark": "hsl(186, 25%, 18%)"
},
"variables": [
{
"css_variable": "--highlight-bg-color"
},
{
"css_variable": "--primary-l"
}
],
"contrast_against": [
{
"type": "component",
"value": "highlighted-item-text",
"contrast_type": "text"
}
]
},
{
"component_id": "highlighted-item-text",
"name": "Highlighted Item Text",
"fallback": {
"light": "hsla(240, 91%, 2%, 0.9)",
"dark": "hsl(240, 100%, 98%)"
},
"variables": [
{
"css_variable": "--highlight-text-color",
"opacity": 0.93
},
{
"css_variable": "--highlight-icon-color",
"opacity": 0.8
}
],
"contrast_against": [
{
"type": "component",
"value": "active-menu-item",
"contrast_type": "text"
}
]
},
{
"component_id": "message-bubble",
"name": "Message Bubble",
"fallback": {
"light": "hsl(171, 61%, 91%)",
"dark": "hsl(240, 7%, 20%)"
},
"variables": [
{
"css_variable": "--message-bubble-bg"
}
],
"contrast_against": [
{
"type": "variable",
"value": "--n7-transp",
"contrast_type": "text"
}
]
},
{
"component_id": "badge",
"name": "Badge",
"fallback": {
"light": "hsl(226, 64%, 17%)",
"dark": "hsl(4, 64%, 52%)"
},
"variables": [
{
"css_variable": "--badge-bg-brand"
}
],
"contrast_against": [
{
"type": "hsl",
"value": "hsl(0, 0%, 100%)",
"contrast_type": "text"
}
]
},
{
"component_id": "image-overlay",
"name": "Image Overlay",
"fallback": {
"light": "hsla(173, 68%, 45%, 0.45)",
"dark": "hsla(173, 68%, 45%, 0.45)"
},
"can_edit_opacity": true,
"default_opacity": 0.45,
"variables": [
{
"css_variable": "--background-overlay-color"
},
{
"css_variable": "--bg-overlay-color-primary"
},
{
"css_variable": "--primary-d2"
}
]
},
{
"component_id": "quick-link-card-overlay",
"name": "Quick Link Card Overlay",
"fallback": {
"light": "hsla(226, 64%, 17%, 0.9)",
"dark": "hsla(4, 64%, 52%, 0.9)"
},
"can_edit_opacity": true,
"default_opacity": 0.9,
"variables": [
{
"css_variable": "--quick-link-card-overlay"
}
]
},
{
"component_id": "base-background-color",
"name": "Base Page Background",
"fallback": {
"light": "hsl(240, 4%, 95%)",
"dark": "hsl(0, 0%, 8%)"
},
"variables": [
{
"css_variable": "--bg-color-base"
}
],
"contrast_against": [
{
"type": "component",
"value": "link-text",
"contrast_type": "text"
},
{
"type": "component",
"value": "link-text-hover",
"contrast_type": "text"
},
{
"type": "component",
"value": "borderless-button",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--n6-transp",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--n5-transp",
"contrast_type": "text"
},
{
"type": "variable",
"value": "--n7-transp",
"contrast_type": "text"
},
{
"type": "component",
"value": "header-icons-text",
"contrast_type": "text"
},
{
"type": "component",
"value": "tab-line",
"contrast_type": "non-text"
},
{
"type": "component",
"value": "icon-focus-outline-accent-text",
"contrast_type": "text"
},
{
"type": "component",
"value": "loader",
"contrast_type": "non-text"
},
{
"type": "component",
"value": "tab-text",
"contrast_type": "text"
}
]
},
{
"component_id": "dashboard-background-overlay",
"name": "Dashboard Background Image Overlay Color",
"fallback": {
"light": "hsla(240, 4%, 95%, 0.7)",
"dark": "hsla(0, 0%, 8%, 0.7)"
},
"can_edit_opacity": true,
"default_opacity": 0.9,
"variables": [
{
"css_variable": "--dashboard-background-overlay"
}
]
},
{
"component_id": "dashboard-heading",
"name": "Dashboard Icons & Text (when dashboard background set)",
"fallback": {
"light": "hsl(240, 16%, 12%)",
"dark": "hsl(240, 100%, 99%)"
},
"variables": [
{
"css_variable": "--dashboard-foreground-color"
}
]
},
{
"component_id": "quick-link-capsule-background",
"name": "Quick Link Capsule Background",
"fallback": {
"light": "hsl(226, 64%, 17%)",
"dark": "hsl(4, 64%, 52%)"
},
"variables": [
{
"css_variable": "--quick-link-capsule-bg-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "quick-link-capsule-text",
"contrast_type": "text"
}
]
},
{
"component_id": "quick-link-capsule-background-hover",
"name": "Quick Link Capsule Background (Hover)",
"fallback": {
"light": "hsla(0, 0%, 63%, 0.15)",
"dark": "hsla(0, 0%, 63%, 0.15)"
},
"variables": [
{
"css_variable": "--quick-link-capsule-bg-hover-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "quick-link-capsule-text",
"contrast_type": "text"
}
]
},
{
"component_id": "quick-link-capsule-text",
"name": "Quick Link Capsule Text",
"fallback": {
"light": "hsl(0, 0%, 100%)",
"dark": "hsl(0, 0%, 100%)"
},
"variables": [
{
"css_variable": "--quick-link-capsule-text-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "quick-link-capsule-background",
"contrast_type": "text"
},
{
"type": "component",
"value": "quick-link-capsule-background-hover",
"contrast_type": "text"
}
]
},
{
"component_id": "loader",
"name": "Loader",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--loader-color"
}
],
"contrast_against": [
{
"type": "component",
"value": "base-background-color",
"contrast_type": "non-text"
},
{
"type": "variable",
"value": "--white",
"contrast_type": "non-text"
}
]
},
{
"component_id": "login-config-issue-page-background",
"name": "Login/Error/Agreement/Enrichment Page Background",
"fallback": {
"light": "hsl(4, 100%, 68%)",
"dark": "hsl(4, 100%, 68%)"
},
"variables": [
{
"css_variable": "--login-config-issue-background-color"
},
{
"css_variable": "--splash-background-color"
}
]
}
]