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
variant
property. 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.0
primary.1
primary.2
primary.3
primary.4
primary.5
primary.6
primary.7
primary.8
primary.9
Neutral
neutral.0
neutral.1
neutral.2
neutral.3
neutral.4
neutral.5
neutral.6
neutral.7
neutral.8
neutral.9
Info
info.0
info.1
info.2
info.3
info.4
info.5
info.6
info.7
info.8
info.9
Success
success.0
success.1
success.2
success.3
success.4
success.5
success.6
success.7
success.8
success.9
Warn
warn.0
warn.1
warn.2
warn.3
warn.4
warn.5
warn.6
warn.7
warn.8
warn.9
Danger
danger.0
danger.1
danger.2
danger.3
danger.4
danger.5
danger.6
danger.7
danger.8
danger.9
Semantic
Font
font.base
font.muted
font.subtle
font.onEmphasis
Surface
surface.0
surface.1
surface.2
surface.3
surface.4
Border
border.base
border.subtle
Primary
primary.font
primary.muted
primary.subtle
primary.emphasis
Neutral
neutral.font
neutral.muted
neutral.subtle
neutral.emphasis
Info
info.font
info.muted
info.subtle
info.emphasis
Success
success.font
success.muted
success.subtle
success.emphasis
Warn
warn.font
warn.muted
warn.subtle
warn.emphasis
Danger
danger.font
danger.muted
danger.subtle
danger.emphasis
Template
Primary
primary.solid.bg
primary.solid.bgHover
primary.solid.font
primary.soft.bg
primary.soft.bgHover
primary.soft.font
primary.outline.bg
primary.outline.bgHover
primary.outline.font
primary.outline.border
primary.ghost.bg
primary.ghost.bgHover
primary.ghost.font
Neutral
neutral.solid.bg
neutral.solid.bgHover
neutral.solid.font
neutral.soft.bg
neutral.soft.bgHover
neutral.soft.font
neutral.outline.bg
neutral.outline.bgHover
neutral.outline.font
neutral.outline.border
neutral.ghost.bg
neutral.ghost.bgHover
neutral.ghost.font
Info
info.solid.bg
info.solid.bgHover
info.solid.font
info.soft.bg
info.soft.bgHover
info.soft.font
info.outline.bg
info.outline.bgHover
info.outline.font
info.outline.border
info.ghost.bg
info.ghost.bgHover
info.ghost.font
Success
success.solid.bg
success.solid.bgHover
success.solid.font
success.soft.bg
success.soft.bgHover
success.soft.font
success.outline.bg
success.outline.bgHover
success.outline.font
success.outline.border
success.ghost.bg
success.ghost.bgHover
success.ghost.font
Warn
warn.solid.bg
warn.solid.bgHover
warn.solid.font
warn.soft.bg
warn.soft.bgHover
warn.soft.font
warn.outline.bg
warn.outline.bgHover
warn.outline.font
warn.outline.border
warn.ghost.bg
warn.ghost.bgHover
warn.ghost.font
Danger
danger.solid.bg
danger.solid.bgHover
danger.solid.font
danger.soft.bg
danger.soft.bgHover
danger.soft.font
danger.outline.bg
danger.outline.bgHover
danger.outline.font
danger.outline.border
danger.ghost.bg
danger.ghost.bgHover
danger.ghost.font