Pagination theming

The values listed below are exposed as --rozie-pagination-* custom properties, each with a built-in fallback, so Pagination works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-pagination-gap: 0.25rem;
  --rozie-pagination-accent: #0066cc;
  --rozie-pagination-size: 2.25rem;
  --rozie-pagination-hover-bg: rgba(0, 0, 0, 0.05);
}

Tokens

layout / typography

Token	Default
--rozie-pagination-gap	0.25rem
--rozie-pagination-font	inherit
--rozie-pagination-font-weight	500

accent — the single color most consumers will set; the active page + focus ring derive from it

Token	Default
--rozie-pagination-accent	#0066cc

per-control box model

Token	Default
--rozie-pagination-size	2.25rem
--rozie-pagination-padding-x	0.5rem
--rozie-pagination-fg	#1a1a1a
--rozie-pagination-bg	transparent
--rozie-pagination-border-width	1px
--rozie-pagination-border	rgba(0, 0, 0, 0.18)
--rozie-pagination-radius	6px

hover

Token	Default
--rozie-pagination-hover-bg	rgba(0, 0, 0, 0.05)
--rozie-pagination-hover-border	rgba(0, 0, 0, 0.28)

active (current) page

Token	Default
--rozie-pagination-active-fg	#fff

focus ring

Token	Default
--rozie-pagination-ring-width	2px
--rozie-pagination-ring-offset	1px

ellipsis marker

Token	Default
--rozie-pagination-ellipsis-fg	rgba(0, 0, 0, 0.5)

disabled

Token	Default
--rozie-pagination-disabled-opacity	0.5

Defaulted where Pagination reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-pagination-active-bg	var(--rozie-pagination-accent, #0066cc)
--rozie-pagination-active-border	var(--rozie-pagination-accent, #0066cc)
--rozie-pagination-ring	var(--rozie-pagination-accent, #0066cc)

Design-system bridges

Each package ships token presets that map Pagination's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/pagination-react/themes/base.css';
import '@rozie-ui/pagination-react/themes/bootstrap.css';
import '@rozie-ui/pagination-react/themes/material.css';
import '@rozie-ui/pagination-react/themes/shadcn.css';

See also

• Pagination — showcase & API — the full prop / event / slot / handle reference.
• Pagination — API reference — every prop, event, slot, and handle verb.
• Pagination — usage examples — idiomatic per-framework consumption code.
• Pagination comparison — how it stacks up against the per-framework libraries.
• Pagination — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).