@peax/consent-banner-theme 0.0.3 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -61
- package/dist/index.d.ts +3 -0
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,102 +1,165 @@
|
|
|
1
1
|
# @peax/consent-banner-theme
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Shared CSS and semantic design tokens for Peax Consent banners. Framework-independent, with no runtime dependencies.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[Peax Consent](https://github.com/peaxco/consent/blob/main/README.md) · [All guides](https://github.com/peaxco/consent/blob/main/docs/README.md) · [React banner](https://github.com/peaxco/consent/blob/main/packages/consent-banner-react/README.md) · [Locales](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[Quick start](#quick-start) · [Theme modes](#theme-modes) · [Tokens](#tokens) · [CSS layers](#css-layers) · [TypeScript](#typescript)
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @peax/consent-banner-theme
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Load the stylesheet once, then override tokens on the banner root:
|
|
8
16
|
|
|
9
17
|
```css
|
|
10
18
|
@import "@peax/consent-banner-theme/styles.css";
|
|
19
|
+
|
|
20
|
+
.pxc {
|
|
21
|
+
--pxc-font-family: system-ui, sans-serif;
|
|
22
|
+
--pxc-font-size: 16px;
|
|
23
|
+
--pxc-radius-collapsed: 1rem;
|
|
24
|
+
}
|
|
11
25
|
```
|
|
12
26
|
|
|
13
|
-
|
|
27
|
+
Using React? Import the same stylesheet in your application entry and follow the [React integration guide](https://github.com/peaxco/consent/blob/main/packages/consent-banner-react/README.md#quick-start). The banner supplies the `.pxc` root and component classes.
|
|
14
28
|
|
|
15
|
-
|
|
16
|
-
|
|
29
|
+
| This package provides | Supplied by your application or adapter |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| Default tokens and complete banner/preferences styling | Component markup and interaction behavior |
|
|
32
|
+
| Light, dark, and automatic theme selection | Consent choices, storage, and script control |
|
|
33
|
+
| Focus, reduced-motion, and forced-colors styles | Font files and validation of custom color contrast |
|
|
17
34
|
|
|
18
|
-
|
|
19
|
-
'--pxc-color-surface': 'oklch(0.26 0 0)',
|
|
20
|
-
'--pxc-color-text': 'oklch(0.9 0 0)',
|
|
21
|
-
'--pxc-color-action': 'oklch(0.91 0.1 158)',
|
|
22
|
-
'--pxc-icon-size': '1.25rem',
|
|
23
|
-
} satisfies ThemeOverrides
|
|
24
|
-
```
|
|
35
|
+
## Theme modes
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
**Mode names describe the host page, not the banner surface.** The default palettes contrast with the host.
|
|
27
38
|
|
|
28
|
-
|
|
39
|
+
| Setting | Result |
|
|
40
|
+
| --- | --- |
|
|
41
|
+
| `light` | Dark banner panel (`#242424`) |
|
|
42
|
+
| `dark` | Light banner panel (`#e2e2e2`) |
|
|
43
|
+
| `auto` | Selects the host mode using `prefers-color-scheme` |
|
|
44
|
+
| No setting in standalone markup | Base dark panel, regardless of system preference |
|
|
29
45
|
|
|
30
|
-
|
|
46
|
+
For React, use `<Banner theme="auto" />` (`auto` is its default). For other markup, set `data-theme` on the `.pxc` root or an ancestor:
|
|
31
47
|
|
|
32
48
|
```html
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</main>
|
|
49
|
+
<div class="pxc" data-theme="dark">
|
|
50
|
+
<!-- Adapter-rendered banner content -->
|
|
51
|
+
</div>
|
|
37
52
|
```
|
|
38
53
|
|
|
39
|
-
The
|
|
54
|
+
The closest supported setting wins. A setting on the banner overrides any ancestor setting.
|
|
55
|
+
|
|
56
|
+
## Tokens
|
|
57
|
+
|
|
58
|
+
Override public **`--pxc-*`** properties on the banner root. Properties beginning **`--_pxc-*`** are private implementation details.
|
|
59
|
+
|
|
60
|
+
### Color
|
|
61
|
+
|
|
62
|
+
| Token | Controls |
|
|
63
|
+
| --- | --- |
|
|
64
|
+
| `--pxc-color-surface` | Main panel background |
|
|
65
|
+
| `--pxc-color-surface-secondary` | Secondary surfaces |
|
|
66
|
+
| `--pxc-color-text` | Primary text |
|
|
67
|
+
| `--pxc-color-text-muted` | Secondary text |
|
|
68
|
+
| `--pxc-color-border` | Component boundaries |
|
|
69
|
+
| `--pxc-color-focus-ring` | Keyboard focus indicator |
|
|
70
|
+
| `--pxc-color-action` | Primary action background and link hover text |
|
|
71
|
+
| `--pxc-color-action-hover` | Primary action hover background |
|
|
72
|
+
| `--pxc-color-action-text` | Text on primary actions |
|
|
73
|
+
| `--pxc-color-control-track` | Inactive switch track |
|
|
74
|
+
| `--pxc-color-control-thumb` | Inactive switch thumb |
|
|
75
|
+
|
|
76
|
+
### Layout and typography
|
|
77
|
+
|
|
78
|
+
| Tokens | Defaults / purpose |
|
|
79
|
+
| --- | --- |
|
|
80
|
+
| `--pxc-spacing-xs`, `-sm`, `-md`, `-lg`, `-xl` | `0.25rem`, `0.5rem`, `0.75rem`, `1rem`, `1.5rem` respectively |
|
|
81
|
+
| `--pxc-radius-sm`, `-lg`, `-xl` | `0.25rem`, `0.5rem`, `0.75rem` respectively |
|
|
82
|
+
| `--pxc-radius-collapsed` | Collapsed card radius; defaults to `var(--pxc-radius-xl)` |
|
|
83
|
+
| `--pxc-font-family` | Inherits the application font |
|
|
84
|
+
| `--pxc-font-family-headings` | Defaults to the body font |
|
|
85
|
+
| `--pxc-font-size` | `14px` base size |
|
|
86
|
+
| `--pxc-line-height` | `1.5` unitless base multiplier |
|
|
87
|
+
| `--pxc-icon-size`, `--pxc-control-size` | Derived from spacing by default |
|
|
88
|
+
| `--pxc-z-index` | `1000` on the fixed wrapper |
|
|
89
|
+
| `--pxc-ease-in-out` | Shared motion easing |
|
|
90
|
+
|
|
91
|
+
Spacing and radius suffixes above use the same full prefix, for example `--pxc-spacing-lg`. See [Typography](https://github.com/peaxco/consent/blob/main/docs/typography.md) for separate heading fonts, responsive sizing, and density. Fonts are loaded by the application.
|
|
40
92
|
|
|
41
|
-
###
|
|
93
|
+
### Custom color contrast
|
|
42
94
|
|
|
43
|
-
|
|
95
|
+
Defaults satisfy these contrast pairs. Custom themes must preserve them; the package does not repair arbitrary overrides.
|
|
96
|
+
|
|
97
|
+
| Minimum | Pairs (all use the `--pxc-color-` prefix) |
|
|
98
|
+
| --- | --- |
|
|
99
|
+
| `4.5:1` text | text/surface, text-muted/surface, text/surface-secondary, action-text/action, action-text/action-hover, action/surface |
|
|
100
|
+
| `3:1` UI | border/surface, focus-ring/surface, control-track/surface, control-thumb/control-track, action/surface-secondary |
|
|
101
|
+
|
|
102
|
+
## CSS layers
|
|
103
|
+
|
|
104
|
+
Default tokens, Button, and Container styles use the `peax-consent` cascade layer. Unlayered token overrides win without `!important`.
|
|
105
|
+
|
|
106
|
+
For layered overrides, declare the order before importing the stylesheet:
|
|
44
107
|
|
|
45
108
|
```css
|
|
46
109
|
@layer peax-consent, app;
|
|
47
110
|
@import "@peax/consent-banner-theme/styles.css";
|
|
48
111
|
|
|
49
112
|
@layer app {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
113
|
+
.pxc {
|
|
114
|
+
--pxc-icon-size: 1.25rem;
|
|
115
|
+
}
|
|
53
116
|
}
|
|
54
117
|
```
|
|
55
118
|
|
|
56
|
-
|
|
119
|
+
Text and LeadIcon retain some unlayered rules to resist host resets. Prefer token overrides to selectors tied to internal markup. Reduced motion includes an `!important` wrapper transform override to suppress inline animation transforms.
|
|
57
120
|
|
|
58
|
-
##
|
|
121
|
+
## TypeScript
|
|
59
122
|
|
|
60
|
-
The
|
|
61
|
-
|
|
62
|
-
- `--pxc-color-surface` is the banner panel surface.
|
|
63
|
-
- `--pxc-color-surface-secondary` is the nested or secondary surface.
|
|
64
|
-
- `--pxc-color-text` and `--pxc-color-text-muted` are primary and secondary text inks.
|
|
65
|
-
- `--pxc-color-border` identifies meaningful component boundaries.
|
|
66
|
-
- `--pxc-color-focus-ring` identifies keyboard focus.
|
|
67
|
-
- `--pxc-color-action`, `--pxc-color-action-hover`, and `--pxc-color-action-text` style primary actions.
|
|
68
|
-
- `--pxc-color-control-track` and `--pxc-color-control-thumb` style inactive controls.
|
|
69
|
-
|
|
70
|
-
Default and Studio-generated themes guarantee these rendered pairs:
|
|
71
|
-
|
|
72
|
-
| Requirement | Pairs |
|
|
73
|
-
| --- | --- |
|
|
74
|
-
| `4.5:1` text | text/surface, text-muted/surface, text/surface-secondary, action-text/action, action-text/action-hover |
|
|
75
|
-
| `3:1` UI | border/surface, focus-ring/surface, control-track/surface, control-thumb/control-track, action/surface, action/surface-secondary |
|
|
123
|
+
The package root exports types; the CSS is a separate entry. Use `ThemeOverrides` for partial customization:
|
|
76
124
|
|
|
77
|
-
|
|
125
|
+
```ts
|
|
126
|
+
import type { ThemeOverrides } from '@peax/consent-banner-theme'
|
|
78
127
|
|
|
79
|
-
|
|
128
|
+
const theme = {
|
|
129
|
+
'--pxc-font-size': '16px',
|
|
130
|
+
'--pxc-radius-collapsed': '1rem',
|
|
131
|
+
} satisfies ThemeOverrides
|
|
132
|
+
```
|
|
80
133
|
|
|
81
|
-
|
|
134
|
+
To pass typed variables directly to React's `style` prop:
|
|
82
135
|
|
|
83
|
-
|
|
136
|
+
```tsx
|
|
137
|
+
import type { CSSProperties } from 'react'
|
|
138
|
+
import { Banner } from '@peax/consent-banner-react'
|
|
139
|
+
import type { ThemeOverrides } from '@peax/consent-banner-theme'
|
|
84
140
|
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
|
|
141
|
+
const style: CSSProperties & ThemeOverrides = {
|
|
142
|
+
'--pxc-font-size': '16px',
|
|
143
|
+
'--pxc-radius-collapsed': '1rem',
|
|
144
|
+
}
|
|
89
145
|
|
|
90
|
-
|
|
146
|
+
export function ThemedBanner() {
|
|
147
|
+
return <Banner isOpen style={style} />
|
|
148
|
+
}
|
|
149
|
+
```
|
|
91
150
|
|
|
92
|
-
|
|
151
|
+
| Export | Purpose |
|
|
152
|
+
| --- | --- |
|
|
153
|
+
| `ThemeOverrides` | Partial tokens, including optional presentation overrides |
|
|
154
|
+
| `ResolvedThemeVariables` | Complete schema-v1 variable set |
|
|
155
|
+
| `ResolvedTheme` | `{ schemaVersion, variables }` payload from Studio |
|
|
156
|
+
| `ThemeSchemaVersion` | Resolved-theme schema version (`1`) |
|
|
157
|
+
| `@peax/consent-banner-theme/styles.css` | Tokens and all shared component styles |
|
|
93
158
|
|
|
94
|
-
|
|
95
|
-
- Has no React or consent runtime dependency.
|
|
96
|
-
- Keeps CSS as its only intentional module side effect.
|
|
97
|
-
- Allows consumers to replace the default theme without replacing consent behavior.
|
|
98
|
-
- Exposes public API only through declared package exports.
|
|
159
|
+
Theme generation, palette conversion, and contrast repair belong to Studio, outside this package. CSS is the only intentional module side effect; JavaScript and declarations use ESM. Only declared package exports are public.
|
|
99
160
|
|
|
100
|
-
##
|
|
161
|
+
## Continue
|
|
101
162
|
|
|
102
|
-
|
|
163
|
+
- [React banner](https://github.com/peaxco/consent/blob/main/packages/consent-banner-react/README.md) — render the UI and connect consent events.
|
|
164
|
+
- [Locales](https://github.com/peaxco/consent/blob/main/packages/consent-banner-locales/README.md) — customize language and copy.
|
|
165
|
+
- [Preferences](https://github.com/peaxco/consent/blob/main/docs/preferences.md) — configure the sections styled by this package.
|
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,9 @@ export declare type ResolvedThemeVariables = {
|
|
|
30
30
|
|
|
31
31
|
/** Optional presentation overrides; derived tokens are not part of the Studio payload. */
|
|
32
32
|
export declare type ThemeOverrides = Partial<ResolvedThemeVariables> & {
|
|
33
|
+
'--pxc-z-index'?: string;
|
|
34
|
+
'--pxc-line-height'?: string;
|
|
35
|
+
'--pxc-font-family-headings'?: string;
|
|
33
36
|
'--pxc-icon-size'?: string;
|
|
34
37
|
'--pxc-control-size'?: string;
|
|
35
38
|
'--pxc-ease-in-out'?: string;
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer peax-consent{.pxc{--pxc-color-surface:var(--_pxc-color-surface,oklch(26.0325% 0 0));--pxc-color-surface-secondary:var(--_pxc-color-surface-secondary,oklch(34.6057% .000792 106.521));--pxc-color-text:var(--_pxc-color-text,oklch(90.3314% .00594 106.521));--pxc-color-text-muted:var(--_pxc-color-text-muted,oklch(63.4022% .003452 106.521));--pxc-color-border:var(--_pxc-color-border,oklch(76.0427% .00462 106.521));--pxc-color-focus-ring:var(--_pxc-color-focus-ring,oklch(97.4757% .006601 106.521));--pxc-color-action:var(--_pxc-color-action,oklch(90.7921% .098163 158.085));--pxc-color-action-hover:var(--_pxc-color-action-hover,oklch(91.897% .086383 158.085));--pxc-color-action-text:var(--_pxc-color-action-text,oklch(20.5481% .003921 286.049));--pxc-color-control-track:var(--_pxc-color-control-track,oklch(53.5428% .002541 106.521));--pxc-color-control-thumb:var(--_pxc-color-control-thumb,oklch(84.6159% .005412 106.521));--pxc-spacing-xs:.25rem;--pxc-spacing-sm:.5rem;--pxc-spacing-md:.75rem;--pxc-spacing-lg:1rem;--pxc-spacing-xl:1.5rem;--pxc-radius-sm:.25rem;--pxc-radius-lg:.5rem;--pxc-radius-xl:.75rem;--pxc-radius-collapsed:var(--pxc-radius-xl);--pxc-font-size:14px;--pxc-font-family:inherit;--pxc-ease-in-out:cubic-bezier(.4, 0, .2, 1);--pxc-icon-size:clamp(1rem, var(--pxc-spacing-lg), 1.25rem);--pxc-control-size:max(2rem, calc(var(--pxc-spacing-lg) + var(--pxc-spacing-sm) + var(--pxc-spacing-xs)));container-type:inline-size}:where([data-theme=light],[data-theme=auto]){--_pxc-color-surface:initial;--_pxc-color-surface-secondary:initial;--_pxc-color-text:initial;--_pxc-color-text-muted:initial;--_pxc-color-border:initial;--_pxc-color-focus-ring:initial;--_pxc-color-action:initial;--_pxc-color-action-hover:initial;--_pxc-color-action-text:initial;--_pxc-color-control-track:initial;--_pxc-color-control-thumb:initial}:where([data-theme=dark]){--_pxc-color-surface:oklch(91.279% 0 0);--_pxc-color-surface-secondary:oklch(82.7913% .00047 286.049);--_pxc-color-text:oklch(27.6212% .003528 286.049);--_pxc-color-text-muted:oklch(50.6319% .002253 286.049);--_pxc-color-border:oklch(41.7674% .002744 286.049);--_pxc-color-focus-ring:oklch(20.5481% .003921 286.049);--_pxc-color-action:oklch(52.5678% .098163 158.085);--_pxc-color-action-hover:oklch(46.2597% .086383 158.085);--_pxc-color-action-text:oklch(97.4757% .006601 106.521);--_pxc-color-control-track:oklch(60.31% .001716 286.049);--_pxc-color-control-thumb:oklch(33.2797% .003215 286.049)}@media (prefers-color-scheme:dark){:where([data-theme=auto]){--_pxc-color-surface:oklch(91.279% 0 0);--_pxc-color-surface-secondary:oklch(82.7913% .00047 286.049);--_pxc-color-text:oklch(27.6212% .003528 286.049);--_pxc-color-text-muted:oklch(50.6319% .002253 286.049);--_pxc-color-border:oklch(41.7674% .002744 286.049);--_pxc-color-focus-ring:oklch(20.5481% .003921 286.049);--_pxc-color-action:oklch(52.5678% .098163 158.085);--_pxc-color-action-hover:oklch(46.2597% .086383 158.085);--_pxc-color-action-text:oklch(97.4757% .006601 106.521);--_pxc-color-control-track:oklch(60.31% .001716 286.049);--_pxc-color-control-thumb:oklch(33.2797% .003215 286.049)}}}
|
|
1
|
+
@layer peax-consent{.pxc-wrapper{box-sizing:border-box;z-index:var(--pxc-z-index);inset-inline:0;pointer-events:none;width:100%;min-width:320px;padding:var(--pxc-spacing-lg);padding-bottom:calc(var(--pxc-spacing-lg) + env(safe-area-inset-bottom,0px));position:fixed;bottom:0}@media (width>=768px){.pxc-wrapper{width:fit-content;max-width:800px}.pxc-wrapper--left{margin-right:auto}.pxc-wrapper--right{margin-left:auto}.pxc-wrapper--center{margin-inline:auto}}@media (prefers-reduced-motion:reduce){.pxc-wrapper{transform:none!important}}.pxc-container{pointer-events:auto;overflow-wrap:anywhere;align-items:center;gap:var(--pxc-spacing-md);padding:var(--pxc-spacing-md);color:var(--pxc-color-text);background-color:var(--pxc-color-surface);border-radius:var(--pxc-radius-xl);flex-flow:wrap;display:flex}[data-theme=light]>.pxc-wrapper>.pxc-container{border:1px solid var(--pxc-color-surface-secondary);box-shadow:0 8px 24px #0000002e,0 2px 6px #0000001f}@media (prefers-color-scheme:light){[data-theme=auto]>.pxc-wrapper>.pxc-container{border:1px solid var(--pxc-color-surface-secondary);box-shadow:0 8px 24px #0000002e,0 2px 6px #0000001f}}.pxc-container__content{align-items:center;gap:var(--pxc-spacing-md);flex:999999 1 0;min-width:min(100%,12rem);display:flex}.pxc-container__actions{justify-content:flex-end;gap:var(--pxc-spacing-lg) var(--pxc-spacing-md);flex-wrap:wrap;flex:1 0 auto;max-width:100%;display:flex}.pxc-container--with-actions,.pxc-container--preferences{box-sizing:border-box;max-block-size:calc(100dvh - 2 * var(--pxc-spacing-lg) - env(safe-area-inset-bottom,0px));overflow-y:auto}.pxc-container--with-actions{row-gap:var(--pxc-spacing-xl);scroll-padding-block:calc(var(--pxc-font-size) * var(--pxc-line-height))}@media (width<=767px){.pxc-container__content{flex:none;align-items:flex-start}.pxc-container__actions{flex:none}.pxc-container--with-actions{flex-flow:column;align-items:stretch}}[data-banner-variant=compact]>.pxc-wrapper{width:100%}[data-banner-variant=stacked] .pxc-container:not(.pxc-container--preferences){padding:var(--pxc-spacing-xl) var(--pxc-spacing-xl) var(--pxc-spacing-lg);flex-flow:column;align-items:stretch}[data-banner-variant=stacked] :is(.pxc-container__content,.pxc-container__actions){flex-flow:column;flex:none;align-items:stretch;min-inline-size:0}[data-banner-variant=stacked] .pxc-container__content{gap:var(--pxc-spacing-lg)}[data-banner-variant] .pxc-container--with-actions{container-type:inline-size}.pxc-banner__heading{align-items:center;gap:var(--pxc-spacing-md);display:flex}.pxc-banner__choices{gap:var(--pxc-spacing-md);flex-wrap:wrap;display:flex}.pxc-banner__choices>.pxc-button{flex:1 1 calc(50% - var(--pxc-spacing-md) / 2);white-space:normal;min-inline-size:fit-content}[data-banner-variant=compact] .pxc-container__actions,[data-banner-variant=compact] .pxc-banner__choices{reading-flow:flex-visual;flex-flow:row-reverse wrap}[data-banner-variant=compact] .pxc-banner__choices{flex:1 1 max-content;min-inline-size:0}[data-banner-variant=compact] .pxc-banner__choices>.pxc-button{flex-basis:0}.pxc-banner__preferences{justify-items:center;display:grid}[data-banner-variant=compact] .pxc-banner__preferences{flex:999999 0 var(--_pxc-icon-button-size);justify-items:start;container:pxc-preferences/inline-size}.pxc-banner__preferences span{display:none}.pxc-button{--_pxc-button-padding-block:var(--pxc-spacing-xs);box-sizing:border-box;min-inline-size:24px;max-inline-size:100%;min-block-size:max(2.5rem, var(--pxc-control-size));padding:var(--_pxc-button-padding-block) calc(var(--pxc-spacing-md) + var(--pxc-spacing-sm));font:inherit;font-family:var(--pxc-font-family);font-size:calc(var(--pxc-font-size) * var(--_pxc-font-scale,1));font-weight:500;line-height:max(1.1, calc(var(--pxc-line-height) - .25));letter-spacing:inherit;text-align:center;white-space:nowrap;cursor:pointer;border-radius:var(--pxc-radius-lg);transition:color .2s var(--pxc-ease-in-out), background-color .2s var(--pxc-ease-in-out);border:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.pxc-button--primary,.pxc-button--secondary{--_pxc-button-padding-block:var(--pxc-spacing-md)}.pxc-button--primary{color:var(--pxc-color-action-text);background-color:var(--pxc-color-action)}.pxc-button--secondary{color:var(--pxc-color-text);background-color:var(--pxc-color-surface-secondary)}.pxc-button--inline{min-block-size:24px;inline-size:fit-content;padding:var(--pxc-spacing-xs) var(--pxc-spacing-sm);color:color-mix(in srgb, var(--pxc-color-text-muted) 90%, var(--pxc-color-text));white-space:normal;overflow-wrap:anywhere;background-color:#0000;align-self:center}.pxc-banner__preferences,.pxc-button--iconed{--_pxc-icon-size:calc(var(--pxc-icon-size) * 1.125);--_pxc-icon-button-size:max(2.5rem, var(--pxc-control-size), calc(var(--_pxc-icon-size) + 2 * var(--pxc-spacing-xs)))}.pxc-button--iconed{inline-size:var(--_pxc-icon-button-size);block-size:var(--_pxc-icon-button-size);padding-inline:var(--pxc-spacing-xs);color:var(--pxc-color-text-muted);background-color:#0000}.pxc-button--iconed>svg{inline-size:var(--_pxc-icon-size);block-size:var(--_pxc-icon-size);flex-shrink:0}.pxc-button:focus-visible,.pxc-switch:focus-visible,.pxc-preferences__body:focus-visible{outline:2px solid var(--pxc-color-focus-ring)}.pxc-button:focus-visible{outline-offset:2px}.pxc-button--primary:active:not(:where(:disabled,[data-disabled],[aria-disabled=true])){background-color:var(--pxc-color-action-hover)}:is(.pxc-button--secondary,.pxc-button--iconed):active:not(:where(:disabled,[data-disabled],[aria-disabled=true])){background-color:color-mix(in srgb, var(--pxc-color-surface-secondary) 85%, var(--pxc-color-text))}:is(.pxc-button--iconed,.pxc-button--inline):active:not(:where(:disabled,[data-disabled],[aria-disabled=true])){color:var(--pxc-color-text)}.pxc-button:is(:disabled,[data-disabled],[aria-disabled=true]){color:var(--pxc-color-text-muted);background-color:color-mix(in srgb, var(--pxc-color-surface-secondary) 55%, var(--pxc-color-surface));cursor:default}@media (hover:hover){:is(.pxc-button--inline,.pxc-button--iconed):hover:not(:where(:disabled,[data-disabled],[aria-disabled=true])){color:var(--pxc-color-text)}.pxc-button--primary:hover:not(:where(:disabled,[data-disabled],[aria-disabled=true])){background-color:var(--pxc-color-action-hover)}.pxc-button--secondary:hover:not(:where(:active,:disabled,[data-disabled],[aria-disabled=true])){background-color:color-mix(in srgb, var(--pxc-color-surface-secondary) 90%, var(--pxc-color-text))}.pxc-button--iconed:hover:not(:where(:active,:disabled,[data-disabled],[aria-disabled=true])){background-color:var(--pxc-color-surface-secondary)}}@container pxc-preferences (inline-size=100cqi){.pxc-button{block-size:auto;inline-size:fit-content;padding-inline:var(--pxc-spacing-sm);color:color-mix(in srgb, var(--pxc-color-text-muted) 90%, var(--pxc-color-text));justify-self:center}.pxc-button>span{display:inline}.pxc-button>svg{display:none}.pxc-button:is(:hover,:active):not(:where(:disabled,[data-disabled],[aria-disabled=true])){background-color:#0000}}@media (prefers-reduced-motion:no-preference){.pxc-button:active:not(:where(:disabled,[data-disabled],[aria-disabled=true])){padding-block:calc(var(--_pxc-button-padding-block) + 1px) calc(var(--_pxc-button-padding-block) - 1px)}}@media (prefers-reduced-motion:reduce){.pxc-button{transition:none}}@media (forced-colors:active){.pxc-button,.pxc-button:is(:hover,:active){color:buttontext;background-color:buttonface}.pxc-button:focus-visible,.pxc-switch:focus-visible,.pxc-preferences__body:focus-visible{outline-color:highlight}.pxc-button:is(:disabled,[data-disabled],[aria-disabled=true]){color:graytext;background-color:buttonface}}.pxc-container--preferences{flex-flow:column;align-items:stretch;gap:0;padding:0;overflow:hidden}@media (width>=768px){[data-banner-variant=stacked]>.pxc-wrapper{width:calc(420px + 2 * var(--pxc-spacing-lg));max-width:100%}.pxc-wrapper:has(>.pxc-container--preferences){width:calc(420px + 2 * var(--pxc-spacing-lg));max-width:100%}}.pxc-preferences{min-block-size:0;max-block-size:inherit;font-size:calc(var(--pxc-font-size) * var(--_pxc-font-scale,1));flex-direction:column;display:flex}.pxc-preferences__header,.pxc-preferences__footer{justify-content:space-between;align-items:center;gap:var(--pxc-spacing-md);padding:var(--pxc-spacing-lg) var(--pxc-spacing-xl);flex:none;display:flex}.pxc-preferences__header{padding-block:var(--pxc-spacing-md);border-block-end:1px solid var(--pxc-color-surface-secondary);padding-inline-end:var(--pxc-spacing-md)}.pxc-preferences__scroll-area{flex-direction:column;min-block-size:0;display:flex;position:relative}.pxc-preferences__body{overscroll-behavior:contain;min-block-size:0;scroll-padding-block:var(--pxc-spacing-lg)}.pxc-preferences__body:focus-visible{outline-offset:-2px}.pxc-preferences__content{padding-inline:var(--pxc-spacing-md);display:flow-root}.pxc-preferences__scrollbar{box-sizing:border-box;inline-size:max(24px, var(--pxc-spacing-xl));padding-block:var(--pxc-spacing-xs)}.pxc-preferences__scroll-thumb{inline-size:100%;position:relative}.pxc-preferences__scroll-indicator{inline-size:var(--pxc-spacing-xs);border-radius:var(--pxc-radius-lg);background-color:var(--pxc-color-text-muted);position:absolute;inset-block:0;inset-inline-end:var(--pxc-spacing-xs)}.pxc-preferences__scrollbar:is(:hover,:active) .pxc-preferences__scroll-indicator{background-color:var(--pxc-color-text)}.pxc-preferences__section{gap:var(--pxc-spacing-sm);padding:var(--pxc-spacing-xl) var(--pxc-spacing-md);flex-direction:column;display:flex}.pxc-preferences__introduction{padding:var(--pxc-spacing-lg);border-radius:var(--pxc-radius-lg);background-color:color-mix(in srgb, var(--pxc-color-surface) 80%, black)}.pxc-preferences__section+.pxc-preferences__section{border-block-start:1px solid var(--pxc-color-surface-secondary)}.pxc-preferences__section-heading{justify-content:space-between;align-items:center;gap:var(--pxc-spacing-lg);display:flex}.pxc-preferences__footer{border-block-start:1px solid var(--pxc-color-surface-secondary);flex-flow:row-reverse wrap}.pxc-preferences__footer>.pxc-button{white-space:normal}.pxc-preferences__policy{min-inline-size:0;padding-block:var(--pxc-spacing-xs);border-radius:var(--pxc-radius-lg);line-height:var(--pxc-line-height)}@media (width<=767px){.pxc-preferences__footer{flex-flow:column;align-items:stretch}.pxc-preferences__footer>.pxc-button{inline-size:100%}.pxc-preferences__policy{text-align:center;align-self:center;max-inline-size:100%}}.pxc-switch{box-sizing:border-box;background-color:color-mix(in srgb, var(--pxc-color-control-track) 95%, var(--pxc-color-border));cursor:pointer;block-size:1.5rem;inline-size:2.5rem;transition:background-color .2s var(--pxc-ease-in-out);border-radius:999px;flex:none;align-items:center;padding:.25rem;display:inline-flex}.pxc-switch__thumb{border-radius:inherit;background-color:color-mix(in srgb, var(--pxc-color-control-thumb) 90%, var(--pxc-color-text));block-size:1rem;inline-size:1rem;transition:transform .2s var(--pxc-ease-in-out)}.pxc-switch[data-checked]{background-color:var(--pxc-color-action)}.pxc-switch[data-checked]>.pxc-switch__thumb{background-color:var(--pxc-color-action-text);transform:translate(1rem)}.pxc-switch:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))[data-checked]>.pxc-switch__thumb{transform:translate(-1rem)}.pxc-switch[data-disabled]{cursor:not-allowed;opacity:.65}.pxc-switch:focus-visible{outline-offset:3px}@media (prefers-reduced-motion:reduce){.pxc-switch,.pxc-switch__thumb{transition:none}}@media (forced-colors:active){.pxc-preferences__scroll-indicator,.pxc-preferences__scrollbar:is(:hover,:active) .pxc-preferences__scroll-indicator{background-color:canvastext}.pxc-switch{border:1px solid buttontext}.pxc-switch[data-checked]{background-color:highlight}.pxc-switch__thumb,.pxc-switch[data-checked]>.pxc-switch__thumb{background-color:buttontext}.pxc-switch[data-disabled]{opacity:1;border-color:graytext}}.pxc{--pxc-z-index:1000;--pxc-color-surface:var(--_pxc-color-surface,oklch(26.0325% 0 0));--pxc-color-surface-secondary:var(--_pxc-color-surface-secondary,oklch(34.6057% .000792 106.521));--pxc-color-text:var(--_pxc-color-text,oklch(90.3314% .00594 106.521));--pxc-color-text-muted:var(--_pxc-color-text-muted,oklch(63.4022% .003452 106.521));--pxc-color-border:var(--_pxc-color-border,oklch(76.0427% .00462 106.521));--pxc-color-focus-ring:var(--_pxc-color-focus-ring,oklch(97.4757% .006601 106.521));--pxc-color-action:var(--_pxc-color-action,oklch(90.7921% .098163 158.085));--pxc-color-action-hover:var(--_pxc-color-action-hover,oklch(84% .098163 158.085));--pxc-color-action-text:var(--_pxc-color-action-text,oklch(20.5481% .003921 286.049));--pxc-color-control-track:var(--_pxc-color-control-track,oklch(53.5428% .002541 106.521));--pxc-color-control-thumb:var(--_pxc-color-control-thumb,oklch(84.6159% .005412 106.521));--pxc-spacing-xs:.25rem;--pxc-spacing-sm:.5rem;--pxc-spacing-md:.75rem;--pxc-spacing-lg:1rem;--pxc-spacing-xl:1.5rem;--pxc-radius-sm:.25rem;--pxc-radius-lg:.5rem;--pxc-radius-xl:.75rem;--pxc-radius-collapsed:var(--pxc-radius-xl);--pxc-font-size:14px;--pxc-line-height:1.5;--_pxc-font-scale:1;container-type:inline-size}@media (width<=767px){.pxc{--_pxc-font-scale:.95}}.pxc{--pxc-font-family:inherit;--pxc-font-family-headings:var(--pxc-font-family);--pxc-ease-in-out:cubic-bezier(.4, 0, .2, 1);--pxc-icon-size:clamp(1rem, var(--pxc-spacing-lg), 1.25rem);--pxc-control-size:max(2rem, calc(var(--pxc-spacing-lg) + var(--pxc-spacing-sm) + var(--pxc-spacing-xs)))}:where([data-theme=light],[data-theme=auto]){--_pxc-color-surface:initial;--_pxc-color-surface-secondary:initial;--_pxc-color-text:initial;--_pxc-color-text-muted:initial;--_pxc-color-border:initial;--_pxc-color-focus-ring:initial;--_pxc-color-action:initial;--_pxc-color-action-hover:initial;--_pxc-color-action-text:initial;--_pxc-color-control-track:initial;--_pxc-color-control-thumb:initial}:where([data-theme=dark]){--_pxc-color-surface:oklch(91.279% 0 0);--_pxc-color-surface-secondary:oklch(82.7913% .00047 286.049);--_pxc-color-text:oklch(27.6212% .003528 286.049);--_pxc-color-text-muted:oklch(50.6319% .002253 286.049);--_pxc-color-border:oklch(41.7674% .002744 286.049);--_pxc-color-focus-ring:oklch(20.5481% .003921 286.049);--_pxc-color-action:oklch(49% .098163 158.085);--_pxc-color-action-hover:oklch(46.2597% .086383 158.085);--_pxc-color-action-text:oklch(97.4757% .006601 106.521);--_pxc-color-control-track:oklch(60.31% .001716 286.049);--_pxc-color-control-thumb:oklch(33.2797% .003215 286.049)}@media (prefers-color-scheme:dark){:where([data-theme=auto]){--_pxc-color-surface:oklch(91.279% 0 0);--_pxc-color-surface-secondary:oklch(82.7913% .00047 286.049);--_pxc-color-text:oklch(27.6212% .003528 286.049);--_pxc-color-text-muted:oklch(50.6319% .002253 286.049);--_pxc-color-border:oklch(41.7674% .002744 286.049);--_pxc-color-focus-ring:oklch(20.5481% .003921 286.049);--_pxc-color-action:oklch(49% .098163 158.085);--_pxc-color-action-hover:oklch(46.2597% .086383 158.085);--_pxc-color-action-text:oklch(97.4757% .006601 106.521);--_pxc-color-control-track:oklch(60.31% .001716 286.049);--_pxc-color-control-thumb:oklch(33.2797% .003215 286.049)}}}.pxc-banner__heading>.pxc-lead-icon{background-color:#0000;block-size:20px;inline-size:20px;padding:0}.pxc-banner__heading>.pxc-lead-icon>svg{block-size:100%;inline-size:100%}.pxc-preferences__header>h3:focus{outline:none}.pxc-preferences .pxc-preferences__introduction{margin-block-start:var(--pxc-spacing-md)}.pxc-preferences__description,.pxc-preferences .pxc-preferences__policy{color:color-mix(in srgb, var(--pxc-color-text-muted) 90%, var(--pxc-color-text))}.pxc-preferences__footer>.pxc-button{margin-inline-start:auto}:where([data-theme=light],[data-theme=auto]){--_pxc-lead-icon-color:var(--pxc-color-action)}:where([data-theme=dark]){--_pxc-lead-icon-color:var(--pxc-color-text)}@media (prefers-color-scheme:dark){:where([data-theme=auto]){--_pxc-lead-icon-color:var(--pxc-color-text)}}.pxc-lead-icon{box-sizing:border-box;inline-size:max(2.5rem, var(--pxc-control-size));block-size:max(2.5rem, var(--pxc-control-size));padding:var(--pxc-spacing-sm);color:var(--_pxc-lead-icon-color,var(--pxc-color-action));background-color:var(--pxc-color-surface-secondary);border-radius:var(--pxc-radius-xl);flex-shrink:0;justify-content:center;align-items:center;display:flex}.pxc-lead-icon>svg{block-size:1.25rem;inline-size:1.25rem}.pxc-text--h2,.pxc-text--h3,.pxc-text--h4,.pxc-text--label,.pxc-text--paragraph{--_pxc-text-font-size:calc(var(--pxc-font-size) * var(--_pxc-font-scale,1))}.pxc-text--h2{font-size:calc(var(--_pxc-text-font-size) * 1.5);line-height:max(1.1, calc(var(--pxc-line-height) - .3))}.pxc-text--h3{font-size:calc(var(--_pxc-text-font-size) * 1.25);line-height:max(1.1, calc(var(--pxc-line-height) - .2))}.pxc-text--h4{font-size:calc(var(--_pxc-text-font-size) * 1.125);line-height:max(1.1, calc(var(--pxc-line-height) - .1))}.pxc-text--label,.pxc-text--paragraph{font-size:var(--_pxc-text-font-size);line-height:var(--pxc-line-height)}.pxc-text--paragraph{margin:0}.pxc-link{color:var(--pxc-color-text);text-underline-offset:.15em;transition:color .2s var(--pxc-ease-in-out);-webkit-text-decoration:underline;text-decoration:underline}@media (hover:hover){.pxc-link:hover{color:var(--pxc-color-action)}}@media (prefers-reduced-motion:reduce){.pxc-link{transition:none}}.pxc-link:focus-visible{outline:2px solid var(--pxc-color-focus-ring);outline-offset:2px}.pxc-banner__heading>:is(.pxc-text--h2,.pxc-text--h3),.pxc-preferences__header>h3,.pxc-preferences__section-heading>h4{min-inline-size:0;font-family:var(--pxc-font-family-headings,var(--pxc-font-family));margin:0}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peax/consent-banner-theme",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Framework-independent semantic visual tokens and default styles for Peax Consent interfaces.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"consent-management",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@types/node": "^26.3.0",
|
|
56
56
|
"culori": "^4.0.2",
|
|
57
57
|
"jsdom": "30.0.1",
|
|
58
|
-
"typescript": "
|
|
58
|
+
"typescript": "5.9.3",
|
|
59
59
|
"vite": "^8.2.2",
|
|
60
60
|
"vite-plugin-dts": "^5.0.3",
|
|
61
61
|
"vitest": "^4.1.11"
|