Colors
If you're using Tailwind CSS, you can install the @qui/tailwind-plugin package to make each of these variables available as Tailwind classes.
Semantic
Semantic colors are commonly used to convey a specific status to the user.
CSS Variable
--q-semantic-primaryTailwind Class
*-semantic-primaryValue
Color
CSS Variable
--q-semantic-secondaryTailwind Class
*-semantic-secondaryValue
Color
CSS Variable
--q-semantic-negativeTailwind Class
*-semantic-negativeValue
Color
CSS Variable
--q-semantic-warningTailwind Class
*-semantic-warningValue
Color
CSS Variable
--q-semantic-positiveTailwind Class
*-semantic-positiveValue
Color
CSS Variable
--q-semantic-neutralTailwind Class
*-semantic-neutralValue
Color
Text
Black text inverts to white when switched to dark mode. Text link and error tokens change to a lighter shade to ensure that small text has a contrast ratio of 4.5:1 or greater when used on a dark background.
CSS Variable
--q-text-1-primaryTailwind Class
text-primaryValue
Color
CSS Variable
--q-text-1-secondaryTailwind Class
text-secondaryValue
Color
CSS Variable
--q-text-1-disabledTailwind Class
text-disabledValue
Color
CSS Variable
--q-text-2-primaryTailwind Class
text-contrast-primaryValue
Color
CSS Variable
--q-text-2-secondaryTailwind Class
text-contrast-secondaryValue
Color
CSS Variable
--q-text-2-disabledTailwind Class
text-contrast-disabledValue
Color
CSS Variable
--q-text-linkTailwind Class
text-linkValue
Color
CSS Variable
--q-text-errorTailwind Class
text-errorValue
Color
Background
Backgrounds are commonly used as colors for your app's surfaces, such as cards, pages, and menus.
CSS Variable
--q-background-1Tailwind Class
bg-1Value
Color
CSS Variable
--q-background-2Tailwind Class
bg-2Value
Color
CSS Variable
--q-background-3Tailwind Class
bg-3Value
Color
CSS Variable
--q-background-4Tailwind Class
bg-4Value
Color
CSS Variable
--q-background-1-contrastTailwind Class
bg-contrast-1Value
Color
CSS Variable
--q-background-2-contrastTailwind Class
bg-contrast-2Value
Color
CSS Variable
--q-background-3-contrastTailwind Class
bg-contrast-3Value
Color
CSS Variable
--q-background-4-contrastTailwind Class
bg-contrast-4Value
Color
Foreground
Similar to text color tokens, foreground token colors invert when switched to dark mode. Foreground colors are mainly used for black & white icons but can be used for illustrations or any graphical elements that should invert when toggled between modes.
CSS Variable
--q-foreground-1-primaryTailwind Class
foreground-primaryValue
Color
CSS Variable
--q-foreground-1-secondaryTailwind Class
foreground-secondaryValue
Color
CSS Variable
--q-foreground-1-disabledTailwind Class
foreground-disabledValue
Color
CSS Variable
--q-foreground-2-primaryTailwind Class
foreground-contrast-primaryValue
Color
CSS Variable
--q-foreground-2-secondaryTailwind Class
foreground-contrast-secondaryValue
Color
CSS Variable
--q-foreground-2-disabledTailwind Class
foreground-contrast-disabledValue
Color
Borders
Borders are lines that bring clarity to a layout 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
--q-border-1-defaultTailwind Class
border-defaultValue
Color
CSS Variable
--q-border-1-subtleTailwind Class
border-subtleValue
Color
CSS Variable
--q-border-1-strongTailwind Class
border-strongValue
Color
CSS Variable
--q-border-2-defaultTailwind Class
border-contrast-defaultValue
Color
CSS Variable
--q-border-2-subtleTailwind Class
border-contrast-subtleValue
Color
CSS Variable
--q-border-2-strongTailwind Class
border-contrast-strongValue
Color
CSS Variable
--q-border-focusTailwind Class
border-focusValue
Color