# UX4G Tokens — Overflow This page lists every primitive and semantic token for the **Overflow** family. - Primitive token source: `src/tokens/overflow.tokens.css` - Semantic token source: `src/semantic/overflow.semantic.css` ## Primitive tokens ```css :root { --ux4g-overflow-auto: auto; --ux4g-overflow-hidden: hidden; --ux4g-overflow-visible: visible; --ux4g-overflow-scroll: scroll; --ux4g-scrollbar-thumb: var(--ux4g-color-neutral-500); --ux4g-scrollbar-track: transparent; --ux4g-scrollbar-size: 8px; --ux4g-scrollbar-radius: 999px;} ``` ## Semantic tokens ```css :root { --ux4g-of-auto: var(--ux4g-overflow-auto); --ux4g-of-hidden: var(--ux4g-overflow-hidden); --ux4g-of-visible: var(--ux4g-overflow-visible); --ux4g-of-scroll: var(--ux4g-overflow-scroll); /* Axis semantic */ --ux4g-ofx-auto: var(--ux4g-overflow-auto); --ux4g-ofx-hidden: var(--ux4g-overflow-hidden); --ux4g-ofx-visible: var(--ux4g-overflow-visible); --ux4g-ofx-scroll: var(--ux4g-overflow-scroll); --ux4g-ofy-auto: var(--ux4g-overflow-auto); --ux4g-ofy-hidden: var(--ux4g-overflow-hidden); --ux4g-ofy-visible: var(--ux4g-overflow-visible); --ux4g-ofy-scroll: var(--ux4g-overflow-scroll); /* Semantic Scroll (used by overflow utilities) */ --ux4g-scroll-thumb: var(--ux4g-scrollbar-thumb); --ux4g-scroll-track: var(--ux4g-scrollbar-track); --ux4g-scroll-size: var(--ux4g-scrollbar-size); --ux4g-scroll-radius: var(--ux4g-scrollbar-radius); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.