# Theme API and tokens

Public CSS variables and schema-v1 theme types.

Source: https://docs.peax.co/consent/reference/theme



## Stylesheet entry [#stylesheet-entry]

`@peax/consent-banner-theme/styles.css` contains the shared default theme and component styles. JavaScript exports are types-only; fonts belong to your application.

## Public tokens [#public-tokens]

| Group                | Variables with the `--pxc-` prefix                                   |
| -------------------- | -------------------------------------------------------------------- |
| Surfaces             | `color-surface`, `color-surface-secondary`                           |
| Text                 | `color-text`, `color-text-muted`                                     |
| Boundaries and focus | `color-border`, `color-focus-ring`                                   |
| Actions              | `color-action`, `color-action-hover`, `color-action-text`            |
| Switches             | `color-control-track`, `color-control-thumb`                         |
| Spacing              | `spacing-xs`, `spacing-sm`, `spacing-md`, `spacing-lg`, `spacing-xl` |
| Shape                | `radius-sm`, `radius-lg`, `radius-xl`, `radius-collapsed`            |
| Typography           | `font-family`, `font-family-headings`, `font-size`, `line-height`    |
| Presentation         | `icon-size`, `control-size`, `z-index`, `ease-in-out`                |

Set overrides on `.pxc`. Properties starting with `--_pxc-` are implementation details.

Text/surface, muted text/surface, text/secondary surface and action text/action pairs need 4.5:1 contrast. Borders, focus rings, switch tracks and thumbs need 3:1 against adjacent surfaces. Validate hover states as well.

## Published type signatures [#published-type-signatures]

```ts
export declare type ResolvedTheme = {
    schemaVersion: ThemeSchemaVersion;
    variables: ResolvedThemeVariables;
};
export declare type ResolvedThemeVariables = {
    '--pxc-color-surface': string;
    '--pxc-color-surface-secondary': string;
    '--pxc-color-text': string;
    '--pxc-color-text-muted': string;
    '--pxc-color-border': string;
    '--pxc-color-focus-ring': string;
    '--pxc-color-action': string;
    '--pxc-color-action-hover': string;
    '--pxc-color-action-text': string;
    '--pxc-color-control-track': string;
    '--pxc-color-control-thumb': string;
    '--pxc-spacing-xs': string;
    '--pxc-spacing-sm': string;
    '--pxc-spacing-md': string;
    '--pxc-spacing-lg': string;
    '--pxc-spacing-xl': string;
    '--pxc-radius-sm': string;
    '--pxc-radius-lg': string;
    '--pxc-radius-xl': string;
    '--pxc-radius-collapsed': string;
    '--pxc-font-size': string;
    '--pxc-font-family': string;
};
/** Optional presentation overrides; derived tokens are not part of the Studio payload. */
export declare type ThemeOverrides = Partial<ResolvedThemeVariables> & {
    '--pxc-z-index'?: string;
    '--pxc-line-height'?: string;
    '--pxc-font-family-headings'?: string;
    '--pxc-icon-size'?: string;
    '--pxc-control-size'?: string;
    '--pxc-ease-in-out'?: string;
};
export declare type ThemeSchemaVersion = 1;
export {};

```

`ResolvedTheme` is a schema-v1 payload. `ThemeOverrides` permits partial customization, including optional presentation tokens. Theme generation and contrast repair are Studio responsibilities; the public stylesheet does not repair arbitrary overrides.