Foundation
Semantic
Light/Dark에서 자동 스왑되는 시맨틱 매핑.
모든 컴포넌트가 사용해야 하는 layer. 우상단 토글로 light/dark 전환 시 모든 카드 색이 자동으로 바뀌는 것을 확인할 수 있습니다.
var(--bg-brand) · bg-brand · tokens.bg.brand
Background
bg.canvasbg.surfacebg.subtlebg.mutedbg.inversebg.brandbg.brand-hoverbg.brand-subtlebg.accentbg.accent-hoverbg.successbg.warningbg.dangerbg.infoText
Aa
text.primaryAa
text.secondaryAa
text.tertiaryAa
text.disabledAa
text.inverseAa
text.brandAa
text.accentAa
text.successAa
text.warningAa
text.dangerAa
text.on-brandBorder
border.defaultborder.subtleborder.strongborder.focusborder.danger