J3W1 / DESIGN SYSTEM
color.surface.raised
Sticky headers, menus, popovers; D-027 recessed it so an open list reads as depth rather than a lighter panel.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Find related usage · Specification anchor · Measured contrast report (default profile)
Report an issue with this token
color.surface.raised--color-surface-raiseddefault · approved
Provenance and restrictions
{
"status": "approved",
"approval": {
"decision": "D-027"
}
}Declared component and port usage
Relevant contrast declarations
- shortcut key border on the tooltip: color.border.control on color.surface.raised · spec/components/tooltip.md:44
/contrast/1 - group separator (decorative): color.border.divider on color.surface.raised · spec/components/combobox.md:79
/contrast/5 - item separator (decorative; role separator carries the grouping): color.border.divider on color.surface.raised · spec/components/menu.md:67
/contrast/2 - combobox no-results border: color.border.overlay on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - combobox open border: color.border.overlay on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - menu default border: color.border.overlay on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - skip-link default border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - tooltip default border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - submenu chevron (decorative; aria-haspopup carries the meaning): color.icon.decorative on color.surface.raised · spec/components/menu.md:68
/contrast/3 - ring on the raised surface: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:29
/contrast/0 - skip-link focus-visible outline: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - strong accent on raised: color.text.accent-strong on color.surface.raised · spec/contrast.json:18
/pairs/14 - menu checked fg: color.text.bright on color.surface.raised · spec/components/menu.md:62
/stateTokens/checked - shortcut on the tooltip: color.text.bright on color.surface.raised · spec/components/tooltip.md:43
/contrast/0 - skip-link default fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - sticky header text on the raised surface: color.text.bright on color.surface.raised · spec/components/table.md:66
/contrast/1 - calendar text: color.text.default on color.surface.raised · spec/components/date-picker.md:108
/contrast/5 - combobox open fg: color.text.default on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - default text on raised: color.text.default on color.surface.raised · spec/contrast.json:6
/pairs/2 - menu default fg: color.text.default on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - option text in the themed list: color.text.default on color.surface.raised · spec/components/select.md:63
/contrast/1 - tooltip default fg: color.text.default on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open fg: color.text.default on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - disabled item text (exempt; house floor 3:1): color.text.disabled on color.surface.raised · spec/components/menu.md:66
/contrast/1 - link text on raised surfaces: color.text.link on color.surface.raised · spec/components/link.md:45
/contrast/3 - combobox no-results fg: color.text.muted on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - group label in the themed list: color.text.muted on color.surface.raised · spec/components/select.md:64
/contrast/2 - muted text on raised: color.text.muted on color.surface.raised · spec/contrast.json:11
/pairs/7 - shortcut hint on the raised surface: color.text.muted on color.surface.raised · spec/components/menu.md:65
/contrast/0 - group heading on the listbox: color.text.subtle on color.surface.raised · spec/components/combobox.md:74
/contrast/0 - subtle text on raised: color.text.subtle on color.surface.raised · spec/contrast.json:13
/pairs/9
heritage-ansi · heritage
Provenance and restrictions
{
"status": "approved",
"approval": {
"decision": "D-027"
}
}Declared component and port usage
Relevant contrast declarations
- shortcut key border on the tooltip: color.border.control on color.surface.raised · spec/components/tooltip.md:44
/contrast/1 - group separator (decorative): color.border.divider on color.surface.raised · spec/components/combobox.md:79
/contrast/5 - item separator (decorative; role separator carries the grouping): color.border.divider on color.surface.raised · spec/components/menu.md:67
/contrast/2 - combobox no-results border: color.border.overlay on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - combobox open border: color.border.overlay on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - menu default border: color.border.overlay on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - skip-link default border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - tooltip default border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - submenu chevron (decorative; aria-haspopup carries the meaning): color.icon.decorative on color.surface.raised · spec/components/menu.md:68
/contrast/3 - ring on the raised surface: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:29
/contrast/0 - skip-link focus-visible outline: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - strong accent on raised: color.text.accent-strong on color.surface.raised · spec/contrast.json:18
/pairs/14 - menu checked fg: color.text.bright on color.surface.raised · spec/components/menu.md:62
/stateTokens/checked - shortcut on the tooltip: color.text.bright on color.surface.raised · spec/components/tooltip.md:43
/contrast/0 - skip-link default fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - sticky header text on the raised surface: color.text.bright on color.surface.raised · spec/components/table.md:66
/contrast/1 - calendar text: color.text.default on color.surface.raised · spec/components/date-picker.md:108
/contrast/5 - combobox open fg: color.text.default on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - default text on raised: color.text.default on color.surface.raised · spec/contrast.json:6
/pairs/2 - menu default fg: color.text.default on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - option text in the themed list: color.text.default on color.surface.raised · spec/components/select.md:63
/contrast/1 - tooltip default fg: color.text.default on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open fg: color.text.default on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - disabled item text (exempt; house floor 3:1): color.text.disabled on color.surface.raised · spec/components/menu.md:66
/contrast/1 - link text on raised surfaces: color.text.link on color.surface.raised · spec/components/link.md:45
/contrast/3 - combobox no-results fg: color.text.muted on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - group label in the themed list: color.text.muted on color.surface.raised · spec/components/select.md:64
/contrast/2 - muted text on raised: color.text.muted on color.surface.raised · spec/contrast.json:11
/pairs/7 - shortcut hint on the raised surface: color.text.muted on color.surface.raised · spec/components/menu.md:65
/contrast/0 - group heading on the listbox: color.text.subtle on color.surface.raised · spec/components/combobox.md:74
/contrast/0 - subtle text on raised: color.text.subtle on color.surface.raised · spec/contrast.json:13
/pairs/9
extended · proposed
Provenance and restrictions
{
"status": "approved",
"approval": {
"decision": "D-027"
}
}Declared component and port usage
Relevant contrast declarations
- shortcut key border on the tooltip: color.border.control on color.surface.raised · spec/components/tooltip.md:44
/contrast/1 - group separator (decorative): color.border.divider on color.surface.raised · spec/components/combobox.md:79
/contrast/5 - item separator (decorative; role separator carries the grouping): color.border.divider on color.surface.raised · spec/components/menu.md:67
/contrast/2 - combobox no-results border: color.border.overlay on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - combobox open border: color.border.overlay on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - menu default border: color.border.overlay on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - skip-link default border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible border: color.border.overlay on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - tooltip default border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open border: color.border.overlay on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - submenu chevron (decorative; aria-haspopup carries the meaning): color.icon.decorative on color.surface.raised · spec/components/menu.md:68
/contrast/3 - ring on the raised surface: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:29
/contrast/0 - skip-link focus-visible outline: color.interaction.focus.ring on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - strong accent on raised: color.text.accent-strong on color.surface.raised · spec/contrast.json:18
/pairs/14 - menu checked fg: color.text.bright on color.surface.raised · spec/components/menu.md:62
/stateTokens/checked - shortcut on the tooltip: color.text.bright on color.surface.raised · spec/components/tooltip.md:43
/contrast/0 - skip-link default fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:26
/stateTokens/default - skip-link focus-visible fg: color.text.bright on color.surface.raised · spec/components/skip-link.md:27
/stateTokens/focus-visible - sticky header text on the raised surface: color.text.bright on color.surface.raised · spec/components/table.md:66
/contrast/1 - calendar text: color.text.default on color.surface.raised · spec/components/date-picker.md:108
/contrast/5 - combobox open fg: color.text.default on color.surface.raised · spec/components/combobox.md:68
/stateTokens/open - default text on raised: color.text.default on color.surface.raised · spec/contrast.json:6
/pairs/2 - menu default fg: color.text.default on color.surface.raised · spec/components/menu.md:57
/stateTokens/default - option text in the themed list: color.text.default on color.surface.raised · spec/components/select.md:63
/contrast/1 - tooltip default fg: color.text.default on color.surface.raised · spec/components/tooltip.md:38
/stateTokens/default - tooltip open fg: color.text.default on color.surface.raised · spec/components/tooltip.md:41
/stateTokens/open - disabled item text (exempt; house floor 3:1): color.text.disabled on color.surface.raised · spec/components/menu.md:66
/contrast/1 - link text on raised surfaces: color.text.link on color.surface.raised · spec/components/link.md:45
/contrast/3 - combobox no-results fg: color.text.muted on color.surface.raised · spec/components/combobox.md:72
/stateTokens/no-results - group label in the themed list: color.text.muted on color.surface.raised · spec/components/select.md:64
/contrast/2 - muted text on raised: color.text.muted on color.surface.raised · spec/contrast.json:11
/pairs/7 - shortcut hint on the raised surface: color.text.muted on color.surface.raised · spec/components/menu.md:65
/contrast/0 - group heading on the listbox: color.text.subtle on color.surface.raised · spec/components/combobox.md:74
/contrast/0 - subtle text on raised: color.text.subtle on color.surface.raised · spec/contrast.json:13
/pairs/9