# UX4G Tokens — Position This page lists every primitive and semantic token for the **Position** family. - Primitive token source: `src/tokens/position.tokens.css` - Semantic token source: `src/semantic/position.semantic.css` ## Primitive tokens ```css :root { /* ===== Position Type (Primitive) ===== */ --ux4g-position-static: static; --ux4g-position-relative: relative; --ux4g-position-absolute: absolute; --ux4g-position-fixed: fixed; --ux4g-position-sticky: sticky; /* ===== Inset Value Scale (Primitive) ===== */ --ux4g-pos-value-0: 0; --ux4g-pos-value-50: 50%; --ux4g-pos-value-100: 100%; /* ===== Transform (Primitive) ===== */ --ux4g-translate-middle: translate(-50%, -50%); --ux4g-translate-middle-x: translateX(-50%); --ux4g-translate-middle-y: translateY(-50%); /* ===== Position Offset Scale (NEW) ===== */ --ux4g-pos-offset-0: 0; --ux4g-pos-offset-1: 1px; --ux4g-pos-offset-2: 2px; --ux4g-pos-offset-3: 3px; --ux4g-pos-offset-4: 4px; --ux4g-pos-offset-5: 5px; /* Negative offsets (for badges overflow) */ --ux4g-pos-offset-n1: -1px; --ux4g-pos-offset-n2: -2px; --ux4g-pos-offset-n3: -3px; --ux4g-pos-offset-n4: -4px; --ux4g-pos-offset-n5: -5px; } ``` ## Semantic tokens ```css :root { /* ===== Position ===== */ --ux4g-pos-static: var(--ux4g-position-static); --ux4g-pos-relative: var(--ux4g-position-relative); --ux4g-pos-absolute: var(--ux4g-position-absolute); --ux4g-pos-fixed: var(--ux4g-position-fixed); --ux4g-pos-sticky: var(--ux4g-position-sticky); /* ===== Top ===== */ --ux4g-pos-top-0: var(--ux4g-pos-value-0); --ux4g-pos-top-50: var(--ux4g-pos-value-50); --ux4g-pos-top-100: var(--ux4g-pos-value-100); /* ===== Bottom ===== */ --ux4g-pos-bottom-0: var(--ux4g-pos-value-0); --ux4g-pos-bottom-50: var(--ux4g-pos-value-50); --ux4g-pos-bottom-100: var(--ux4g-pos-value-100); /* ===== Start ===== */ --ux4g-pos-start-0: var(--ux4g-pos-value-0); --ux4g-pos-start-50: var(--ux4g-pos-value-50); --ux4g-pos-start-100: var(--ux4g-pos-value-100); /* ===== End ===== */ --ux4g-pos-end-0: var(--ux4g-pos-value-0); --ux4g-pos-end-50: var(--ux4g-pos-value-50); --ux4g-pos-end-100: var(--ux4g-pos-value-100); /* ===== Transform ===== */ --ux4g-pos-translate-middle: var(--ux4g-translate-middle); --ux4g-pos-translate-middle-x: var(--ux4g-translate-middle-x); --ux4g-pos-translate-middle-y: var(--ux4g-translate-middle-y); /* ===== Offset ===== */ --ux4g-pos-bottom-xs: var(--ux4g-pos-offset-1); --ux4g-pos-bottom-sm: var(--ux4g-pos-offset-5); --ux4g-pos-end-overflow-xs: var(--ux4g-pos-offset-n1); --ux4g-pos-end-overflow-sm: var(--ux4g-pos-offset-n3); --ux4g-pos-end-overflow-md: var(--ux4g-pos-offset-n5); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.