Design Token
Mình sẽ approach build design token first.
Token là layer thấp nhất để build up lên các atomic component, quyết định về màu sắc, spacing, font size...
Có thể nói Tokens là DNA của một design system.Common Color
Bao gồm các màu sắc sử dụng chung cho cả Text, Background, Border, ICon...
CSS Variable
Class
--w3-brand
{text|bg|border}-brand
--w3-purple
{text|bg|border}-purple
--w3-info
{text|bg|border}-info
--w3-warn
{text|bg|border}-warn
--w3-success
{text|bg|border}-success
--w3-danger
{text|bg|border}-danger
Text Color
CSS Variable
Class
--w3-text-primary
text-text-primary
--w3-text-sub
text-text-sub
--w3-text-disable
text-text-disable
--w3-text-statis
text-text-statis
--w3-text-secondary
text-text-secondary
--w3-text-blueshade
text-text-blueshade
Background Color
CSS Variable
Class
--w3-bg
bg-bg
--w3-bg-primary
bg-bg-primary
--w3-bg-surface
bg-bg-surface
--w3-bg-overlay
bg-bg-overlay
--w3-bg-holder
bg-bg-holder
--w3-bg-glass
bg-bg-glass
Others
CSS Variable
Class
--w3-link
text-link
--w3-border
border-border
--w3-divider
bg-divider