rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CSS custom properties for font size and button radius

Browse Source 
Expose --probo-font-size and --probo-btn-radius so customers
can scale typography and button shape without overriding
internals. The type scale now uses calc() offsets from the
base variable. The settings button defaults now follow
--probo-accent so a single accent change updates both the
banner and the floating button.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-17 12:46:47 +04:00
parent 0ab448691d
commit 80a4d44e6d
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/cookie-banner/README.md
View File

@@ -66,6 +66,8 @@ probo-cookie-banner {
--probo-accent-text: #ffffff; --probo-accent-text: #ffffff;
--probo-overlay: rgba(0, 0, 0, 0.4); --probo-overlay: rgba(0, 0, 0, 0.4);
--probo-z-index: 2147483646; --probo-z-index: 2147483646;
--probo-btn-radius: 8px;
--probo-font-size: 14px;
} }
``` ```

4
packages/cookie-banner/src/components/settings-button.ts
View File

@@ -54,8 +54,8 @@ export class ProboSettingsButton extends HTMLElement {
gap: 6px; gap: 6px;
border: none; border: none;
border-radius: var(--probo-settings-radius, 9999px); border-radius: var(--probo-settings-radius, 9999px);
background: var(--probo-settings-bg, #1a1a1a); background: var(--probo-settings-bg, var(--probo-accent, #1a1a1a));
color: var(--probo-settings-color, #ffffff); color: var(--probo-settings-color, var(--probo-accent-text, #ffffff));
padding: var(--probo-settings-padding, 10px); padding: var(--probo-settings-padding, 10px);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;

19
packages/cookie-banner/src/themed-banner/styles.ts
View File

@@ -25,11 +25,13 @@ export const THEMED_STYLES = `
--_accent-text: var(--probo-accent-text, #ffffff); --_accent-text: var(--probo-accent-text, #ffffff);
--_overlay: var(--probo-overlay, rgba(0, 0, 0, 0.4)); --_overlay: var(--probo-overlay, rgba(0, 0, 0, 0.4));
--_z-index: var(--probo-z-index, 2147483646); --_z-index: var(--probo-z-index, 2147483646);
--_btn-radius: var(--probo-btn-radius, 8px);
--_font-size: var(--probo-font-size, 14px);
all: initial; all: initial;
font-family: var(--_font); font-family: var(--_font);
color: var(--_text); color: var(--_text);
font-size: 14px; font-size: var(--_font-size);
line-height: 1.5; line-height: 1.5;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -61,7 +63,7 @@ export const THEMED_STYLES = `
} }
.title { .title {
font-size: 16px; font-size: calc(var(--_font-size) + 2px);
font-weight: 600; font-weight: 600;
margin: 0 0 8px; margin: 0 0 8px;
} }
@@ -69,7 +71,6 @@ export const THEMED_STYLES = `
.description { .description {
color: var(--_text-secondary); color: var(--_text-secondary);
margin: 0 0 20px; margin: 0 0 20px;
font-size: 14px;
} }
.description a { .description a {
@@ -87,12 +88,12 @@ export const THEMED_STYLES = `
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 10px 16px; padding: 10px 16px;
border-radius: 8px; border-radius: var(--_btn-radius);
border: 1px solid var(--_border); border: 1px solid var(--_border);
background: var(--_bg); background: var(--_bg);
color: var(--_text); color: var(--_text);
font-family: var(--_font); font-family: var(--_font);
font-size: 14px; font-size: var(--_font-size);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.15s, border-color 0.15s; transition: background 0.15s, border-color 0.15s;
@@ -127,7 +128,6 @@ export const THEMED_STYLES = `
padding: 4px; padding: 4px;
color: var(--_text); color: var(--_text);
font-family: var(--_font); font-family: var(--_font);
font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
@@ -165,17 +165,16 @@ export const THEMED_STYLES = `
.category-name { .category-name {
font-weight: 500; font-weight: 500;
font-size: 14px;
} }
.category-description { .category-description {
color: var(--_text-secondary); color: var(--_text-secondary);
font-size: 13px; font-size: calc(var(--_font-size) - 1px);
margin-top: 2px; margin-top: 2px;
} }
.category-required { .category-required {
font-size: 12px; font-size: calc(var(--_font-size) - 2px);
color: var(--_text-secondary); color: var(--_text-secondary);
font-style: italic; font-style: italic;
} }
@@ -242,7 +241,7 @@ export const THEMED_STYLES = `
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-size: 12px; font-size: calc(var(--_font-size) - 2px);
gap: 8px; gap: 8px;
} }