Foundations
Warna
Token warna semantik berbasis warna sistem Apple (Juni 2025). Nilainya berganti mengikuti tema — terang, gelap, dan kontras tinggi; coba lewat menu Tema di kanan atas. Komponen hanya memakai token semantik, bukan palet mentah.
Aksen (biru sistem)
accent/border
*-accent-borderaccent/emphasis
*-accent-emphasisaccent/emphasis-hover
*-accent-emphasis-hoveraccent/emphasis-pressed
*-accent-emphasis-pressedaccent/fg
*-accent-fgaccent/muted
*-accent-mutedaccent/on-emphasis
*-accent-on-emphasisaccent/on-solid
Teks/ikon di atas accent/solid. Terang = putih, Gelap = label gelap.*-accent-on-solidaccent/solid
Latar status Solid (StateLabel, Badge). Terang = accent/fg (versi aksesibel), Gelap = accent/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-accent-solidaccent/subtle
*-accent-subtleAksi netral
action/hover
*-action-hoveraction/pressed
*-action-pressedaction/selected
*-action-selectedLatar
bg/backdrop
bg-backdropbg/canvas
bg-canvasbg/default
bg-defaultbg/emphasis
bg-emphasisbg/muted
bg-mutedbg/overlay
bg-overlaybg/subtle
bg-subtleGaris
border/control
border-controlborder/default
border-defaultborder/muted
border-mutedborder/on-emphasis
border-on-emphasisborder/strong
border-strongSidebar (chrome)
chrome/bg
*-chrome-bgchrome/bg-current
*-chrome-bg-currentchrome/bg-hover
*-chrome-bg-hoverchrome/border
*-chrome-borderchrome/fg
*-chrome-fgchrome/fg-current
*-chrome-fg-currentchrome/fg-muted
*-chrome-fg-mutedchrome/marker
*-chrome-markerchrome/marker-on
*-chrome-marker-onKontrol
control/bg
*-control-bgcontrol/bg-hover
*-control-bg-hovercontrol/bg-pressed
*-control-bg-pressedBahaya
danger/border
*-danger-borderdanger/emphasis
*-danger-emphasisdanger/emphasis-hover
*-danger-emphasis-hoverdanger/emphasis-pressed
*-danger-emphasis-presseddanger/fg
*-danger-fgdanger/muted
*-danger-muteddanger/on-emphasis
*-danger-on-emphasisdanger/on-solid
Teks/ikon di atas danger/solid. Terang = putih, Gelap = label gelap.*-danger-on-soliddanger/solid
Latar status Solid (StateLabel, Badge). Terang = danger/fg (versi aksesibel), Gelap = danger/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-danger-soliddanger/subtle
*-danger-subtleVisualisasi data
dataviz/axis
*-dataviz-axisdataviz/baseline
*-dataviz-baselinedataviz/cat-1
*-dataviz-cat-1dataviz/cat-2
*-dataviz-cat-2dataviz/cat-3
*-dataviz-cat-3dataviz/cat-4
*-dataviz-cat-4dataviz/cat-5
*-dataviz-cat-5dataviz/cat-6
*-dataviz-cat-6dataviz/cat-7
*-dataviz-cat-7dataviz/cat-8
*-dataviz-cat-8dataviz/grid
*-dataviz-griddataviz/negative
*-dataviz-negativedataviz/positive
*-dataviz-positivedataviz/seq-1
*-dataviz-seq-1dataviz/seq-2
*-dataviz-seq-2dataviz/seq-3
*-dataviz-seq-3dataviz/seq-4
*-dataviz-seq-4dataviz/seq-5
*-dataviz-seq-5dataviz/target
*-dataviz-targetTeks & ikon
fg/default
text-defaultfg/disabled
text-disabledfg/muted
text-mutedfg/on-emphasis
text-on-emphasisfg/subtle
text-subtleFokus
focus/ring
*-focus-ringLiquid Glass
glass/dim
*-glass-dimglass/edge
*-glass-edgeglass/fill
*-glass-fillglass/highlight
*-glass-highlightglass/scroll-edge
*-glass-scroll-edgeglass/tint
*-glass-tintSorotan
highlight/border
*-highlight-borderhighlight/emphasis
*-highlight-emphasishighlight/fg
*-highlight-fghighlight/on-emphasis
*-highlight-on-emphasishighlight/on-solid
Teks/ikon di atas highlight/solid. Terang = putih, Gelap = label gelap.*-highlight-on-solidhighlight/solid
Latar status Solid (StateLabel, Badge). Terang = highlight/fg (versi aksesibel), Gelap = highlight/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-highlight-solidhighlight/subtle
*-highlight-subtleInfo
info/border
*-info-borderinfo/emphasis
*-info-emphasisinfo/emphasis-hover
*-info-emphasis-hoverinfo/emphasis-pressed
*-info-emphasis-pressedinfo/fg
*-info-fginfo/muted
*-info-mutedinfo/on-emphasis
*-info-on-emphasisinfo/on-solid
Teks/ikon di atas info/solid. Terang = putih, Gelap = label gelap.*-info-on-solidinfo/solid
Latar status Solid (StateLabel, Badge). Terang = info/fg (versi aksesibel), Gelap = info/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-info-solidinfo/subtle
*-info-subtleMaterial
material/chrome
*-material-chromematerial/regular
*-material-regularmaterial/thick
*-material-thickmaterial/thin
*-material-thinmaterial/ultra-thin
*-material-ultra-thinNetral
neutral/border
*-neutral-borderneutral/emphasis
*-neutral-emphasisneutral/fg
*-neutral-fgneutral/muted
*-neutral-mutedneutral/on-emphasis
*-neutral-on-emphasisneutral/on-solid
Teks/ikon di atas neutral/solid. Terang = putih, Gelap = label gelap.*-neutral-on-solidneutral/solid
Latar status Solid (StateLabel, Badge). Terang = neutral/fg (versi aksesibel), Gelap = neutral/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-neutral-solidneutral/subtle
*-neutral-subtleBayangan
shadow/elevation-1-a
*-shadow-elevation-1-ashadow/elevation-1-b
*-shadow-elevation-1-bshadow/elevation-2-a
*-shadow-elevation-2-ashadow/elevation-2-b
*-shadow-elevation-2-bshadow/elevation-3-a
*-shadow-elevation-3-ashadow/elevation-3-b
*-shadow-elevation-3-bshadow/inset
*-shadow-insetshadow/resting
*-shadow-restingBerhasil
success/border
*-success-bordersuccess/emphasis
*-success-emphasissuccess/emphasis-hover
*-success-emphasis-hoversuccess/emphasis-pressed
*-success-emphasis-pressedsuccess/fg
*-success-fgsuccess/muted
*-success-mutedsuccess/on-emphasis
*-success-on-emphasissuccess/on-solid
Teks/ikon di atas success/solid. Terang = putih, Gelap = label gelap.*-success-on-solidsuccess/solid
Latar status Solid (StateLabel, Badge). Terang = success/fg (versi aksesibel), Gelap = success/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-success-solidsuccess/subtle
*-success-subtlePeringatan
warning/border
*-warning-borderwarning/emphasis
*-warning-emphasiswarning/emphasis-hover
*-warning-emphasis-hoverwarning/emphasis-pressed
*-warning-emphasis-pressedwarning/fg
*-warning-fgwarning/muted
*-warning-mutedwarning/on-emphasis
*-warning-on-emphasiswarning/on-solid
Teks/ikon di atas warning/solid. Terang = putih, Gelap = label gelap.*-warning-on-solidwarning/solid
Latar status Solid (StateLabel, Badge). Terang = warning/fg (versi aksesibel), Gelap = warning/emphasis — agar teks on-solid ≥ 4,5:1 (HIG). Khusus Circca HIG.*-warning-solidwarning/subtle
*-warning-subtle