Overview
The color palette of the Camome design system is divided into three categories:
- Shade
- Semantic
- Template
Of these three, Shade is the most primitive and has higher level meanings as you go down.
Tokens that directly reference specific colors, such as color.red.5, are not
included to keep the size as compact as possible.
How to use
In general, do not use Shade in your code. If you use Shade directly, you will have to write a lot of selectors like :root[data-theme="dark"] when corresponding to a dark theme, for example.
Instead, use Semantic and Template. This way, your styles will be responsive to the theme no matter it's light or dark.
Differences between Semantic and Template
- Semantic - tokens that can be used generally anywhere.
- Template - tokens for specific UI patterns. For example, Button has multiple templates and can be switched by the
variantproperty. Radio is another example which implements only one template,soft.
Many UI components often match one of these templates, so it can be useful to inherit those tokens. You should also be able to adopt these tokens in your own custom components in your application.
Shade
Use Semantic or Template when you want to support multiple themes.
Primary
primary.0primary.1primary.2primary.3primary.4primary.5primary.6primary.7primary.8primary.9Neutral
neutral.0neutral.1neutral.2neutral.3neutral.4neutral.5neutral.6neutral.7neutral.8neutral.9Info
info.0info.1info.2info.3info.4info.5info.6info.7info.8info.9Success
success.0success.1success.2success.3success.4success.5success.6success.7success.8success.9Warn
warn.0warn.1warn.2warn.3warn.4warn.5warn.6warn.7warn.8warn.9Danger
danger.0danger.1danger.2danger.3danger.4danger.5danger.6danger.7danger.8danger.9Semantic
Font
font.basefont.mutedfont.subtlefont.onEmphasisSurface
surface.0surface.1surface.2surface.3surface.4Border
border.baseborder.subtlePrimary
primary.fontprimary.mutedprimary.subtleprimary.emphasisNeutral
neutral.fontneutral.mutedneutral.subtleneutral.emphasisInfo
info.fontinfo.mutedinfo.subtleinfo.emphasisSuccess
success.fontsuccess.mutedsuccess.subtlesuccess.emphasisWarn
warn.fontwarn.mutedwarn.subtlewarn.emphasisDanger
danger.fontdanger.muteddanger.subtledanger.emphasisTemplate
Primary
primary.solid.bgprimary.solid.bgHoverprimary.solid.fontprimary.soft.bgprimary.soft.bgHoverprimary.soft.fontprimary.outline.bgprimary.outline.bgHoverprimary.outline.fontprimary.outline.borderprimary.ghost.bgprimary.ghost.bgHoverprimary.ghost.fontNeutral
neutral.solid.bgneutral.solid.bgHoverneutral.solid.fontneutral.soft.bgneutral.soft.bgHoverneutral.soft.fontneutral.outline.bgneutral.outline.bgHoverneutral.outline.fontneutral.outline.borderneutral.ghost.bgneutral.ghost.bgHoverneutral.ghost.fontInfo
info.solid.bginfo.solid.bgHoverinfo.solid.fontinfo.soft.bginfo.soft.bgHoverinfo.soft.fontinfo.outline.bginfo.outline.bgHoverinfo.outline.fontinfo.outline.borderinfo.ghost.bginfo.ghost.bgHoverinfo.ghost.fontSuccess
success.solid.bgsuccess.solid.bgHoversuccess.solid.fontsuccess.soft.bgsuccess.soft.bgHoversuccess.soft.fontsuccess.outline.bgsuccess.outline.bgHoversuccess.outline.fontsuccess.outline.bordersuccess.ghost.bgsuccess.ghost.bgHoversuccess.ghost.fontWarn
warn.solid.bgwarn.solid.bgHoverwarn.solid.fontwarn.soft.bgwarn.soft.bgHoverwarn.soft.fontwarn.outline.bgwarn.outline.bgHoverwarn.outline.fontwarn.outline.borderwarn.ghost.bgwarn.ghost.bgHoverwarn.ghost.fontDanger
danger.solid.bgdanger.solid.bgHoverdanger.solid.fontdanger.soft.bgdanger.soft.bgHoverdanger.soft.fontdanger.outline.bgdanger.outline.bgHoverdanger.outline.fontdanger.outline.borderdanger.ghost.bgdanger.ghost.bgHoverdanger.ghost.font