From 52f341dae6cd223137172352017f9eeacb7687b4 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Tue, 19 May 2026 11:45:18 +0300
Subject: [PATCH 1/2] fix: grid breakpoints from px -> rem, update variables
 #106

---
 scripts/variable-exporter.ts                           |  8 ++++++--
 src/_mixins.scss                                       | 10 +++++-----
 src/variables/_bootstrap-variables.scss                | 10 +++++-----
 .../themes/default/color-variables__dark.scss          |  6 ++++++
 .../themes/default/color-variables__default.scss       |  6 ++++++
 5 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/scripts/variable-exporter.ts b/scripts/variable-exporter.ts
index b46d84997..ff395ff8d 100644
--- a/scripts/variable-exporter.ts
+++ b/scripts/variable-exporter.ts
@@ -66,7 +66,10 @@ async function fetchFigmaVariables(): Promise<FigmaVariablesResponse> {
     headers: { "X-Figma-Token": FIGMA_VARIABLE_TOKEN ?? "" },
   });
 
-  if (!res.ok) throw new Error(`Figma API error: ${res.status}`);
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`Figma API error: ${res.status} ${res.statusText} — ${body || "<empty body>"}`);
+  }
 
   return (await res.json()) as FigmaVariablesResponse;
 }
@@ -124,7 +127,8 @@ function resolveValue(
     const v = "value" in raw ? raw.value : raw;
     const { r, g, b, a = 1 } = v;
     const [rr, gg, bb] = [r, g, b].map((c: number) => Math.round(c * 255));
-    return a === 1 ? `rgb(${rr}, ${gg}, ${bb})` : `rgba(${rr}, ${gg}, ${bb}, ${a})`;
+    const alpha = Number(a.toFixed(4));
+    return alpha === 1 ? `rgb(${rr}, ${gg}, ${bb})` : `rgba(${rr}, ${gg}, ${bb}, ${alpha})`;
   }
 
   const value = raw && typeof raw === "object" && "value" in raw ? raw.value : raw;
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 31940cddd..2ba0aca5c 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -4,11 +4,11 @@
 
 $breakpoints: (
   xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
+  sm: 36rem,
+  md: 48rem,
+  lg: 62rem,
+  xl: 75rem,
+  xxl: 87.5rem,
 );
 
 @mixin print-grayscale {
diff --git a/src/variables/_bootstrap-variables.scss b/src/variables/_bootstrap-variables.scss
index ad461b989..2676ec173 100644
--- a/src/variables/_bootstrap-variables.scss
+++ b/src/variables/_bootstrap-variables.scss
@@ -22,9 +22,9 @@ $spacers: (
 );
 $grid-breakpoints: (
   xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
+  sm: 36rem,
+  md: 48rem,
+  lg: 62rem,
+  xl: 75rem,
+  xxl: 87.5rem,
 );
diff --git a/src/variables/themes/default/color-variables__dark.scss b/src/variables/themes/default/color-variables__dark.scss
index 8485e2726..ea3be6864 100644
--- a/src/variables/themes/default/color-variables__dark.scss
+++ b/src/variables/themes/default/color-variables__dark.scss
@@ -259,6 +259,9 @@
   --file-dropzone-border-hover: var(--form-input-border-hover);
   --file-dropzone-text-default: var(--general-text-brand);
   --file-dropzone-text-drop-over: var(--general-text-tertiary);
+  --filter-primary-active-background: var(--button-main-primary-background-active);
+  --filter-primary-active-border: var(--button-main-primary-border-active);
+  --filter-primary-active-text: var(--button-main-primary-text-active);
   --filter-primary-default-background: var(--button-main-primary-background-default);
   --filter-primary-default-border: var(--button-main-primary-border-default);
   --filter-primary-default-text: var(--button-main-primary-text-default);
@@ -271,6 +274,9 @@
   --filter-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
   --filter-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
   --filter-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
+  --filter-secondary-active-background: var(--button-main-secondary-background-active);
+  --filter-secondary-active-border: var(--button-main-secondary-border-active);
+  --filter-secondary-active-text: var(--button-main-secondary-text-active);
   --filter-secondary-default-background: var(--button-main-secondary-background-default);
   --filter-secondary-default-border: var(--button-main-secondary-border-default);
   --filter-secondary-default-text: var(--button-main-secondary-text-default);
diff --git a/src/variables/themes/default/color-variables__default.scss b/src/variables/themes/default/color-variables__default.scss
index 35429415c..d3e986f95 100644
--- a/src/variables/themes/default/color-variables__default.scss
+++ b/src/variables/themes/default/color-variables__default.scss
@@ -259,6 +259,9 @@
   --file-dropzone-border-hover: var(--form-input-border-hover);
   --file-dropzone-text-default: var(--general-text-brand);
   --file-dropzone-text-drop-over: var(--general-text-tertiary);
+  --filter-primary-active-background: var(--button-main-primary-background-active);
+  --filter-primary-active-border: var(--button-main-primary-border-active);
+  --filter-primary-active-text: var(--button-main-primary-text-active);
   --filter-primary-default-background: var(--form-checkbox-radio-card-primary-default-background);
   --filter-primary-default-border: var(--form-checkbox-radio-card-primary-default-border-separate);
   --filter-primary-default-text: var(--form-checkbox-radio-card-primary-default-text);
@@ -271,6 +274,9 @@
   --filter-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
   --filter-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
   --filter-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
+  --filter-secondary-active-background: var(--button-main-secondary-background-active);
+  --filter-secondary-active-border: var(--button-main-secondary-border-active);
+  --filter-secondary-active-text: var(--button-main-secondary-text-active);
   --filter-secondary-default-background: var(--form-checkbox-radio-card-secondary-default-background);
   --filter-secondary-default-border: var(--form-checkbox-radio-card-secondary-default-border);
   --filter-secondary-default-text: var(--form-checkbox-radio-card-secondary-default-text);

From 57fce44a9ec2282140a396eab3c33870f25ef6b1 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Tue, 19 May 2026 12:01:29 +0300
Subject: [PATCH 2/2] fix: importer decimal cleanup #106

---
 scripts/variable-exporter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/variable-exporter.ts b/scripts/variable-exporter.ts
index ff395ff8d..5fb56043d 100644
--- a/scripts/variable-exporter.ts
+++ b/scripts/variable-exporter.ts
@@ -128,7 +128,7 @@ function resolveValue(
     const { r, g, b, a = 1 } = v;
     const [rr, gg, bb] = [r, g, b].map((c: number) => Math.round(c * 255));
     const alpha = Number(a.toFixed(4));
-    return alpha === 1 ? `rgb(${rr}, ${gg}, ${bb})` : `rgba(${rr}, ${gg}, ${bb}, ${alpha})`;
+    return a === 1 ? `rgb(${rr}, ${gg}, ${bb})` : `rgba(${rr}, ${gg}, ${bb}, ${alpha})`;
   }
 
   const value = raw && typeof raw === "object" && "value" in raw ? raw.value : raw;