PeaxConsent v0.2.0
Theme API and tokens
Public CSS variables and schema-v1 theme types.
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
| 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
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.