Responsive text-primary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-primary-on-light on a themable container with a light color palette and --rh-color-text-primary-on-dark on a themable container with a dark color palette.
Responsive text-primary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-primary-on-light on a themable container with a light color palette and --rh-color-text-primary-on-dark on a themable container with a dark color palette.
var(--rh-color-text-primary, light-dark(var(--rh-color-text-primary-on-light, #151515), var(--rh-color-text-primary-on-dark, #ffffff)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-primary
Permalink to this token
Aa
Click to copy
--rh-color-text-primary-on-light
#151515
Primary text color for light theme
var(--rh-color-text-primary-on-light, #151515)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-primary-on-dark
#ffffff
Primary text color for dark theme
var(--rh-color-text-primary-on-dark, #ffffff)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-dark
Permalink to this token
Responsive text-secondary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-secondary-on-light on a themable container with a light color palette and --rh-color-text-secondary-on-dark on a themable container with a dark color palette.
Responsive text-secondary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-secondary-on-light on a themable container with a light color palette and --rh-color-text-secondary-on-dark on a themable container with a dark color palette.
var(--rh-color-text-secondary, light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d), var(--rh-color-text-secondary-on-dark, #c7c7c7)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-secondary
Permalink to this token
Aa
Click to copy
--rh-color-text-secondary-on-light
#4d4d4d
Secondary text color for light theme
var(--rh-color-text-secondary-on-light, #4d4d4d)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-secondary-on-dark
#c7c7c7
Secondary text color for dark theme
var(--rh-color-text-secondary-on-dark, #c7c7c7)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-dark
Permalink to this token
Responsive text-brand color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-brand-on-light on a themable container with a light color palette and --rh-color-text-brand-on-dark on a themable container with a dark color palette.
Responsive text-brand color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-brand-on-light on a themable container with a light color palette and --rh-color-text-brand-on-dark on a themable container with a dark color palette.
var(--rh-color-text-brand, light-dark(var(--rh-color-text-brand-on-light, #ee0000), var(--rh-color-text-brand-on-dark, #ee0000)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-brand
Permalink to this token
Aa
Click to copy
--rh-color-text-brand-on-light
#ee0000
Brand text color for light theme
var(--rh-color-text-brand-on-light, #ee0000)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-brand-on-dark
#ee0000
Brand text color for dark theme
var(--rh-color-text-brand-on-dark, #ee0000)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-dark
Permalink to this token
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page,
contact us.
