From a330ed19cf33fc7ff60398098364402bcc069550 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Wed, 8 Apr 2026 12:11:19 +0000
Subject: [PATCH] :bug: Fix Swatch Storybook dev-mode error by moving @property
 to global CSS

---
 .../ui/src/lib/utilities/Swatch.module.scss       |  6 ------
 frontend/packages/ui/src/lib/utilities/Swatch.tsx |  3 +++
 .../ui/src/lib/utilities/swatch-properties.scss   | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 frontend/packages/ui/src/lib/utilities/swatch-properties.scss

diff --git a/frontend/packages/ui/src/lib/utilities/Swatch.module.scss b/frontend/packages/ui/src/lib/utilities/Swatch.module.scss
index a2b6faeecd..977c9a1ff2 100644
--- a/frontend/packages/ui/src/lib/utilities/Swatch.module.scss
+++ b/frontend/packages/ui/src/lib/utilities/Swatch.module.scss
@@ -7,12 +7,6 @@
 @use "../_ds/_borders.scss" as *;
 @use "../_ds/_sizes.scss" as *;
 
-@property --solid-color-overlay {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: rgb(0 0 0 / 0%);
-}
-
 .swatch {
   --border-color: var(--color-accent-primary-muted);
   --border-radius: #{$br-4};
diff --git a/frontend/packages/ui/src/lib/utilities/Swatch.tsx b/frontend/packages/ui/src/lib/utilities/Swatch.tsx
index a28c38d076..6b9c4c107b 100644
--- a/frontend/packages/ui/src/lib/utilities/Swatch.tsx
+++ b/frontend/packages/ui/src/lib/utilities/Swatch.tsx
@@ -6,6 +6,9 @@
 
 import { memo, useCallback, useId, useRef } from "react";
 import clsx from "clsx";
+// Global @property registration — must be a non-module import so the
+// @property rule lands in the global scope (CSS Modules cannot scope it).
+import "./swatch-properties.scss";
 import styles from "./Swatch.module.scss";
 
 // ---------------------------------------------------------------------------
diff --git a/frontend/packages/ui/src/lib/utilities/swatch-properties.scss b/frontend/packages/ui/src/lib/utilities/swatch-properties.scss
new file mode 100644
index 0000000000..7638f93c21
--- /dev/null
+++ b/frontend/packages/ui/src/lib/utilities/swatch-properties.scss
@@ -0,0 +1,15 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// Global CSS @property registration for Swatch component.
+// This must be a non-module SCSS file because @property rules cannot be
+// scoped — they register a CSS property globally.
+
+@property --solid-color-overlay {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(0 0 0 / 0%);
+}