From 80a4d44e6d78d72e584d4430e9da6f4413d49741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Fri, 17 Apr 2026 12:46:47 +0400
Subject: [PATCH] Add CSS custom properties for font size and button radius
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/cookie-banner/README.md              |  2 ++
 .../src/components/settings-button.ts         |  4 ++--
 .../cookie-banner/src/themed-banner/styles.ts | 19 +++++++++----------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/cookie-banner/README.md b/packages/cookie-banner/README.md
index 819c2209b..8f8d25585 100644
--- a/packages/cookie-banner/README.md
+++ b/packages/cookie-banner/README.md
@@ -66,6 +66,8 @@ probo-cookie-banner {
   --probo-accent-text: #ffffff;
   --probo-overlay: rgba(0, 0, 0, 0.4);
   --probo-z-index: 2147483646;
+  --probo-btn-radius: 8px;
+  --probo-font-size: 14px;
 }
 ```
 
diff --git a/packages/cookie-banner/src/components/settings-button.ts b/packages/cookie-banner/src/components/settings-button.ts
index 62ed73610..1c5602d42 100644
--- a/packages/cookie-banner/src/components/settings-button.ts
+++ b/packages/cookie-banner/src/components/settings-button.ts
@@ -54,8 +54,8 @@ export class ProboSettingsButton extends HTMLElement {
           gap: 6px;
           border: none;
           border-radius: var(--probo-settings-radius, 9999px);
-          background: var(--probo-settings-bg, #1a1a1a);
-          color: var(--probo-settings-color, #ffffff);
+          background: var(--probo-settings-bg, var(--probo-accent, #1a1a1a));
+          color: var(--probo-settings-color, var(--probo-accent-text, #ffffff));
           padding: var(--probo-settings-padding, 10px);
           cursor: pointer;
           font-family: inherit;
diff --git a/packages/cookie-banner/src/themed-banner/styles.ts b/packages/cookie-banner/src/themed-banner/styles.ts
index d236b9b24..145078cd3 100644
--- a/packages/cookie-banner/src/themed-banner/styles.ts
+++ b/packages/cookie-banner/src/themed-banner/styles.ts
@@ -25,11 +25,13 @@ export const THEMED_STYLES = `
     --_accent-text: var(--probo-accent-text, #ffffff);
     --_overlay: var(--probo-overlay, rgba(0, 0, 0, 0.4));
     --_z-index: var(--probo-z-index, 2147483646);
+    --_btn-radius: var(--probo-btn-radius, 8px);
+    --_font-size: var(--probo-font-size, 14px);
 
     all: initial;
     font-family: var(--_font);
     color: var(--_text);
-    font-size: 14px;
+    font-size: var(--_font-size);
     line-height: 1.5;
     box-sizing: border-box;
   }
@@ -61,7 +63,7 @@ export const THEMED_STYLES = `
   }
 
   .title {
-    font-size: 16px;
+    font-size: calc(var(--_font-size) + 2px);
     font-weight: 600;
     margin: 0 0 8px;
   }
@@ -69,7 +71,6 @@ export const THEMED_STYLES = `
   .description {
     color: var(--_text-secondary);
     margin: 0 0 20px;
-    font-size: 14px;
   }
 
   .description a {
@@ -87,12 +88,12 @@ export const THEMED_STYLES = `
     flex: 1;
     min-width: 0;
     padding: 10px 16px;
-    border-radius: 8px;
+    border-radius: var(--_btn-radius);
     border: 1px solid var(--_border);
     background: var(--_bg);
     color: var(--_text);
     font-family: var(--_font);
-    font-size: 14px;
+    font-size: var(--_font-size);
     font-weight: 500;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s;
@@ -127,7 +128,6 @@ export const THEMED_STYLES = `
     padding: 4px;
     color: var(--_text);
     font-family: var(--_font);
-    font-size: 14px;
     display: flex;
     align-items: center;
     gap: 4px;
@@ -165,17 +165,16 @@ export const THEMED_STYLES = `
 
   .category-name {
     font-weight: 500;
-    font-size: 14px;
   }
 
   .category-description {
     color: var(--_text-secondary);
-    font-size: 13px;
+    font-size: calc(var(--_font-size) - 1px);
     margin-top: 2px;
   }
 
   .category-required {
-    font-size: 12px;
+    font-size: calc(var(--_font-size) - 2px);
     color: var(--_text-secondary);
     font-style: italic;
   }
@@ -242,7 +241,7 @@ export const THEMED_STYLES = `
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-    font-size: 12px;
+    font-size: calc(var(--_font-size) - 2px);
     gap: 8px;
   }