# UX4G Tokens — Object-fit

This page lists every primitive and semantic token for the **Object-fit** family.

- Primitive token source: `src/tokens/object-fit.tokens.css`
- Semantic token source: `src/semantic/object-fit.semantic.css`

## Primitive tokens

```css
:root {
  --ux4g-object-fit-contain: contain;
  --ux4g-object-fit-cover: cover;
  --ux4g-object-fit-fill: fill;
  --ux4g-object-fit-none: none;
  --ux4g-object-fit-scale-down: scale-down;


  /* Object Position Primitive Tokens */
   --ux4g-object-position-center: center;
  --ux4g-object-position-top: top;
  --ux4g-object-position-bottom: bottom;
  --ux4g-object-position-left: left;
  --ux4g-object-position-right: right;
  --ux4g-object-position-top-left: top left;
  --ux4g-object-position-top-right: top right;
  --ux4g-object-position-bottom-left: bottom left;
  --ux4g-object-position-bottom-right: bottom right;
}
```

## Semantic tokens

```css
:root {
  /* Media Semantics */
  --ux4g-of-image: var(--ux4g-object-fit-cover);
  --ux4g-of-video: var(--ux4g-object-fit-contain);

  /* Component Semantics */
  --ux4g-of-avatar: var(--ux4g-object-fit-cover);
  --ux4g-of-thumbnail: var(--ux4g-object-fit-cover);
  --ux4g-of-card-media: var(--ux4g-object-fit-cover);
  --ux4g-of-logo: var(--ux4g-object-fit-contain);

  /* Utility Bridge*/
  --ux4g-of-contain: var(--ux4g-object-fit-contain);
  --ux4g-of-cover: var(--ux4g-object-fit-cover);
  --ux4g-of-fill: var(--ux4g-object-fit-fill);
  --ux4g-of-none: var(--ux4g-object-fit-none);
  --ux4g-of-scale-down: var(--ux4g-object-fit-scale-down);


    /* ===== Object Position Semantic ===== */
  --ux4g-op-image: var(--ux4g-object-position-center);
  --ux4g-op-avatar: var(--ux4g-object-position-center);
  --ux4g-op-thumbnail: var(--ux4g-object-position-center);
  --ux4g-op-card-media: var(--ux4g-object-position-center);
  --ux4g-op-logo: var(--ux4g-object-position-center);

  /* Generic Bridge (like object-fit) */
  --ux4g-op-center: var(--ux4g-object-position-center);
  --ux4g-op-top: var(--ux4g-object-position-top);
  --ux4g-op-bottom: var(--ux4g-object-position-bottom);
  --ux4g-op-left: var(--ux4g-object-position-left);
  --ux4g-op-right: var(--ux4g-object-position-right);
  --ux4g-op-top-left: var(--ux4g-object-position-top-left);
  --ux4g-op-top-right: var(--ux4g-object-position-top-right);
  --ux4g-op-bottom-left: var(--ux4g-object-position-bottom-left);
  --ux4g-op-bottom-right: var(--ux4g-object-position-bottom-right);
}
```

## Dark theme

Add `data-theme="dark"` to `<html>` or any ancestor to switch to the dark semantic token set.