Colors
Note that the classes on this page are only available if you've installed and configured the @qualcomm-ui/tailwind-plugin package.
Text
Text colors are used for typography throughout your application. They automatically adapt when switching between light and dark modes to maintain proper contrast ratios.
CSS Variable
--color-text-brand-accent-01Tailwind Class
text-brand-accent-01Value
Color
CSS Variable
--color-text-brand-accent-02Tailwind Class
text-brand-accent-02Value
Color
CSS Variable
--color-text-brand-primaryTailwind Class
text-brand-primaryValue
Color
CSS Variable
--color-text-neutral-inverseTailwind Class
text-neutral-inverseValue
Color
CSS Variable
--color-text-neutral-primaryTailwind Class
text-neutral-primaryValue
Color
CSS Variable
--color-text-neutral-secondaryTailwind Class
text-neutral-secondaryValue
Color
CSS Variable
--color-text-support-dangerTailwind Class
text-support-dangerValue
Color
Icon
Icon colors ensure proper visual hierarchy and accessibility for icons. Like text colors, they automatically adjust for light and dark modes.
CSS Variable
--color-icon-brand-accent-01Tailwind Class
text-icon-brand-accent-01Value
Color
CSS Variable
--color-icon-brand-accent-02Tailwind Class
text-icon-brand-accent-02Value
Color
CSS Variable
--color-icon-brand-primaryTailwind Class
text-icon-brand-primaryValue
Color
CSS Variable
--color-icon-neutral-inverseTailwind Class
text-icon-neutral-inverseValue
Color
CSS Variable
--color-icon-neutral-primaryTailwind Class
text-icon-neutral-primaryValue
Color
CSS Variable
--color-icon-neutral-secondaryTailwind Class
text-icon-neutral-secondaryValue
Color
CSS Variable
--color-icon-support-dangerTailwind Class
text-icon-support-dangerValue
Color
CSS Variable
--color-icon-support-infoTailwind Class
text-icon-support-infoValue
Color
CSS Variable
--color-icon-support-neutralTailwind Class
text-icon-support-neutralValue
Color
CSS Variable
--color-icon-support-successTailwind Class
text-icon-support-successValue
Color
CSS Variable
--color-icon-support-warningTailwind Class
text-icon-support-warningValue
Color
Background
Background colors include brand, neutral, and support colors. They are commonly used as colors for your app's surfaces, cards, and UI elements.
CSS Variable
--color-background-brand-accent-01Tailwind Class
bg-brand-accent-01Value
Color
CSS Variable
--color-background-brand-accent-02Tailwind Class
bg-brand-accent-02Value
Color
CSS Variable
--color-background-brand-primary-strongTailwind Class
bg-brand-primary-strongValue
Color
CSS Variable
--color-background-brand-primary-subtleTailwind Class
bg-brand-primary-subtleValue
Color
CSS Variable
--color-background-brand-primaryTailwind Class
bg-brand-primaryValue
Color
CSS Variable
--color-background-neutral-00Tailwind Class
bg-neutral-00Value
Color
CSS Variable
--color-background-neutral-01Tailwind Class
bg-neutral-01Value
Color
CSS Variable
--color-background-neutral-02Tailwind Class
bg-neutral-02Value
Color
CSS Variable
--color-background-neutral-03Tailwind Class
bg-neutral-03Value
Color
CSS Variable
--color-background-neutral-04Tailwind Class
bg-neutral-04Value
Color
CSS Variable
--color-background-neutral-05Tailwind Class
bg-neutral-05Value
Color
CSS Variable
--color-background-neutral-06Tailwind Class
bg-neutral-06Value
Color
CSS Variable
--color-background-neutral-07Tailwind Class
bg-neutral-07Value
Color
CSS Variable
--color-background-neutral-08Tailwind Class
bg-neutral-08Value
Color
CSS Variable
--color-background-neutral-09Tailwind Class
bg-neutral-09Value
Color
CSS Variable
--color-background-neutral-10Tailwind Class
bg-neutral-10Value
Color
CSS Variable
--color-background-support-danger-mediumTailwind Class
bg-support-danger-mediumValue
Color
CSS Variable
--color-background-support-danger-subtleTailwind Class
bg-support-danger-subtleValue
Color
CSS Variable
--color-background-support-dangerTailwind Class
bg-support-dangerValue
Color
CSS Variable
--color-background-support-info-mediumTailwind Class
bg-support-info-mediumValue
Color
CSS Variable
--color-background-support-info-subtleTailwind Class
bg-support-info-subtleValue
Color
CSS Variable
--color-background-support-infoTailwind Class
bg-support-infoValue
Color
CSS Variable
--color-background-support-neutral-mediumTailwind Class
bg-support-neutral-mediumValue
Color
CSS Variable
--color-background-support-neutral-subtleTailwind Class
bg-support-neutral-subtleValue
Color
CSS Variable
--color-background-support-neutralTailwind Class
bg-support-neutralValue
Color
CSS Variable
--color-background-support-success-mediumTailwind Class
bg-support-success-mediumValue
Color
CSS Variable
--color-background-support-success-subtleTailwind Class
bg-support-success-subtleValue
Color
CSS Variable
--color-background-support-successTailwind Class
bg-support-successValue
Color
CSS Variable
--color-background-support-warning-mediumTailwind Class
bg-support-warning-mediumValue
Color
CSS Variable
--color-background-support-warning-subtleTailwind Class
bg-support-warning-subtleValue
Color
CSS Variable
--color-background-support-warningTailwind Class
bg-support-warningValue
Color
Surface
Surface colors are used for primary application surfaces like pages, modals, and overlays.
CSS Variable
--color-surface-overlayTailwind Class
bg-overlayValue
Color
CSS Variable
--color-surface-primaryTailwind Class
bg-primaryValue
Color
CSS Variable
--color-surface-raisedTailwind Class
bg-raisedValue
Color
CSS Variable
--color-surface-secondaryTailwind Class
bg-secondaryValue
Color
Border
Border colors bring clarity to layouts by grouping and dividing content. They are used to divide text or components such as table rows, action button groups, and components within a panel.
CSS Variable
--color-border-brand-accent-01Tailwind Class
border-brand-accent-01Value
Color
CSS Variable
--color-border-brand-accent-02Tailwind Class
border-brand-accent-02Value
Color
CSS Variable
--color-border-brand-primary-subtleTailwind Class
border-brand-primary-subtleValue
Color
CSS Variable
--color-border-brand-primaryTailwind Class
border-brand-primaryValue
Color
CSS Variable
--color-border-neutral-00Tailwind Class
border-neutral-00Value
Color
CSS Variable
--color-border-neutral-01Tailwind Class
border-neutral-01Value
Color
CSS Variable
--color-border-neutral-02Tailwind Class
border-neutral-02Value
Color
CSS Variable
--color-border-neutral-03Tailwind Class
border-neutral-03Value
Color
CSS Variable
--color-border-neutral-10Tailwind Class
border-neutral-10Value
Color
CSS Variable
--color-border-support-dangerTailwind Class
border-support-dangerValue
Color
CSS Variable
--color-border-support-infoTailwind Class
border-support-infoValue
Color
CSS Variable
--color-border-support-neutralTailwind Class
border-support-neutralValue
Color
CSS Variable
--color-border-support-successTailwind Class
border-support-successValue
Color
CSS Variable
--color-border-support-warningTailwind Class
border-support-warningValue
Color
CSS Variable
--color-utility-focus-borderTailwind Class
border-focus-borderValue
Color
Category
Category colors provide a palette for data visualization and content categorization. Each category has three variants: subtle, medium, and strong.
CSS Variable
--color-category-blue-mediumTailwind Class
*-category-blue-mediumValue
Color
CSS Variable
--color-category-blue-strongTailwind Class
*-category-blue-strongValue
Color
CSS Variable
--color-category-blue-subtleTailwind Class
*-category-blue-subtleValue
Color
CSS Variable
--color-category-cyan-mediumTailwind Class
*-category-cyan-mediumValue
Color
CSS Variable
--color-category-cyan-strongTailwind Class
*-category-cyan-strongValue
Color
CSS Variable
--color-category-cyan-subtleTailwind Class
*-category-cyan-subtleValue
Color
CSS Variable
--color-category-teal-mediumTailwind Class
*-category-teal-mediumValue
Color
CSS Variable
--color-category-teal-strongTailwind Class
*-category-teal-strongValue
Color
CSS Variable
--color-category-teal-subtleTailwind Class
*-category-teal-subtleValue
Color
CSS Variable
--color-category-green-mediumTailwind Class
*-category-green-mediumValue
Color
CSS Variable
--color-category-green-strongTailwind Class
*-category-green-strongValue
Color
CSS Variable
--color-category-green-subtleTailwind Class
*-category-green-subtleValue
Color
CSS Variable
--color-category-kiwi-mediumTailwind Class
*-category-kiwi-mediumValue
Color
CSS Variable
--color-category-kiwi-strongTailwind Class
*-category-kiwi-strongValue
Color
CSS Variable
--color-category-kiwi-subtleTailwind Class
*-category-kiwi-subtleValue
Color
CSS Variable
--color-category-yellow-mediumTailwind Class
*-category-yellow-mediumValue
Color
CSS Variable
--color-category-yellow-strongTailwind Class
*-category-yellow-strongValue
Color
CSS Variable
--color-category-yellow-subtleTailwind Class
*-category-yellow-subtleValue
Color
CSS Variable
--color-category-orange-mediumTailwind Class
*-category-orange-mediumValue
Color
CSS Variable
--color-category-orange-strongTailwind Class
*-category-orange-strongValue
Color
CSS Variable
--color-category-orange-subtleTailwind Class
*-category-orange-subtleValue
Color
CSS Variable
--color-category-red-mediumTailwind Class
*-category-red-mediumValue
Color
CSS Variable
--color-category-red-strongTailwind Class
*-category-red-strongValue
Color
CSS Variable
--color-category-red-subtleTailwind Class
*-category-red-subtleValue
Color
CSS Variable
--color-category-magenta-mediumTailwind Class
*-category-magenta-mediumValue
Color
CSS Variable
--color-category-magenta-strongTailwind Class
*-category-magenta-strongValue
Color
CSS Variable
--color-category-magenta-subtleTailwind Class
*-category-magenta-subtleValue
Color
CSS Variable
--color-category-purple-mediumTailwind Class
*-category-purple-mediumValue
Color
CSS Variable
--color-category-purple-strongTailwind Class
*-category-purple-strongValue
Color
CSS Variable
--color-category-purple-subtleTailwind Class
*-category-purple-subtleValue
Color