Foundation
Semantic
Light/Dark에서 자동 스왑되는 시맨틱 매핑.
모든 컴포넌트가 사용해야 하는 layer. 우상단 토글로 light/dark 전환 시 모든 카드 색이 자동으로 바뀌는 것을 확인할 수 있습니다.
이름은 {category}.{role}{Weight} 규칙을 따릅니다. bg는 배경, fg는 전경(텍스트·아이콘), stroke는 테두리입니다. layer*는 고도를 뜻하며 라이트에서는 위로 갈수록 밝아지고 다크에서는 반대입니다.
var(--bg-brand-solid) · bg-brand-solid · tokens.bg.brandSolid
Background
bg.layerBasementbg.layerDefaultbg.layerFloatbg.neutralWeakbg.neutralbg.neutralStrongbg.neutralSolidbg.brandWeakbg.brandSolidbg.brandSolidHoveredbg.accentWeakbg.accentSolidbg.accentSolidHoveredbg.successWeakbg.successSolidbg.warningWeakbg.warningSolidbg.dangerWeakbg.dangerSolidbg.informativeWeakbg.informativeSolidForeground
Aa
fg.neutralAa
fg.neutralMutedAa
fg.neutralSubtleAa
fg.neutralDisabledAa
fg.neutralInverseAa
fg.brandAa
fg.accentAa
fg.successAa
fg.warningAa
fg.dangerAa
fg.onBrandSolidAa
fg.onNeutralSolidStroke
stroke.neutralWeakstroke.neutralstroke.neutralStrongstroke.brandstroke.brandWeakstroke.danger