Theme Colors
List of colors and utility CSS classes.
This page documents core palette tokens, semantic colors, and utility class naming patterns for reliable theme implementation across component states.
- Token prefix:
--smart-*for theme variables. - Utility pattern:
.smart-background-color-*,.smart-color-*,.smart-border-*. - Recommended use: semantic tokens (
primary,success,warning,error) for app-level consistency.
Theme Colors
--smart-white
--smart-base-50
--smart-base-100
--smart-base-200
--smart-base-300
--smart-base-400
--smart-base-500
--smart-base-600
--smart-base-700
--smart-base-800
--smart-base-900
--smart-black
--smart-base
--smart-base-lighter
--smart-base-light
--smart-base-dark
--smart-base-darker
--smart-primary
--smart-primary-lighter
--smart-primary-light
--smart-primary-dark
--smart-primary-darker
--smart-secondary
--smart-secondary-lighter
--smart-secondary-light
--smart-secondary-dark
--smart-secondary-darker
--smart-info
--smart-info-lighter
--smart-info-light
--smart-info-dark
--smart-info-darker
--smart-success
--smart-success-lighter
--smart-success-light
--smart-success-dark
--smart-success-darker
--smart-warning
--smart-warning-lighter
--smart-warning-light
--smart-warning-dark
--smart-warning-darker
--smart-error
--smart-error-lighter
--smart-error-light
--smart-error-dark
--smart-error-darker
Use these classes to set background, text or border colors. E.g.
class="smart-background-color-secondary"
Background-color
.smart-background-color-white
.smart-background-color-base-50
.smart-background-color-base-100
.smart-background-color-base-200
.smart-background-color-base-300
.smart-background-color-base-400
.smart-background-color-base-500
.smart-background-color-base-600
.smart-background-color-base-700
.smart-background-color-base-800
.smart-background-color-base-900
.smart-background-color-black
.smart-background-color-primary-lighter
.smart-background-color-primary-light
.smart-background-color-primary
.smart-background-color-primary-dark
.smart-background-color-primary-darker
.smart-background-color-secondary-lighter
.smart-background-color-secondary-light
.smart-background-color-secondary
.smart-background-color-secondary-dark
.smart-background-color-secondary-darker
.smart-background-color-info-lighter
.smart-background-color-info-light
.smart-background-color-info
.smart-background-color-info-dark
.smart-background-color-info-darker
.smart-background-color-success-lighter
.smart-background-color-success-light
.smart-background-color-success
.smart-background-color-success-dark
.smart-background-color-success-darker
.smart-background-color-warning-lighter
.smart-background-color-warning-light
.smart-background-color-warning
.smart-background-color-warning-dark
.smart-background-color-warning-darker
.smart-background-color-error-lighter
.smart-background-color-error-light
.smart-background-color-error
.smart-background-color-error-dark
.smart-background-color-error-darker
Color on white
.smart-color-white
.smart-color-base-50
.smart-color-base-100
.smart-color-base-200
.smart-color-base-300
.smart-color-base-400
.smart-color-base-500
.smart-color-base-600
.smart-color-base-700
.smart-color-base-800
.smart-color-base-900
.smart-color-black
.smart-color-primary-lighter
.smart-color-primary-light
.smart-color-primary
.smart-color-primary-dark
.smart-color-primary-darker
.smart-color-secondary-lighter
.smart-color-secondary-light
.smart-color-secondary
.smart-color-secondary-dark
.smart-color-secondary-darker
.smart-color-info-lighter
.smart-color-info-light
.smart-color-info
.smart-color-info-dark
.smart-color-info-darker
.smart-color-success-lighter
.smart-color-success-light
.smart-color-success
.smart-color-success-dark
.smart-color-success-darker
.smart-color-warning-lighter
.smart-color-warning-light
.smart-color-warning
.smart-color-warning-dark
.smart-color-warning-darker
.smart-color-error-lighter
.smart-color-error-light
.smart-color-error
.smart-color-error-dark
.smart-color-error-darker
Color on black
.smart-color-white
.smart-color-base-50
.smart-color-base-100
.smart-color-base-200
.smart-color-base-300
.smart-color-base-400
.smart-color-base-500
.smart-color-base-600
.smart-color-base-700
.smart-color-base-800
.smart-color-base-900
.smart-color-black
.smart-color-primary-lighter
.smart-color-primary-light
.smart-color-primary
.smart-color-primary-dark
.smart-color-primary-darker
.smart-color-secondary-lighter
.smart-color-secondary-light
.smart-color-secondary
.smart-color-secondary-dark
.smart-color-secondary-darker
.smart-color-info-lighter
.smart-color-info-light
.smart-color-info
.smart-color-info-dark
.smart-color-info-darker
.smart-color-success-lighter
.smart-color-success-light
.smart-color-success
.smart-color-success-dark
.smart-color-success-darker
.smart-color-warning-lighter
.smart-color-warning-light
.smart-color-warning
.smart-color-warning-dark
.smart-color-warning-darker
.smart-color-error-lighter
.smart-color-error-light
.smart-color-error
.smart-color-error-dark
.smart-color-error-darker