From effcc29f3afe49dec17b9ffdd6e66173249496b0 Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Mon, 31 Mar 2025 07:23:21 +0200
Subject: [PATCH] fix: design system box-shadows

---
 packages/design-system/generate/generate.ts | 2 +-
 packages/design-system/lib/styles/base.css  | 8 ++++----
 packages/design-system/lib/styles/base.js   | 8 ++++----
 packages/design-system/lib/tokens/index.ts  | 8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/generate/generate.ts b/packages/design-system/generate/generate.ts
index 6eee0413a..b433f3284 100644
--- a/packages/design-system/generate/generate.ts
+++ b/packages/design-system/generate/generate.ts
@@ -179,7 +179,7 @@ json.collections.forEach((collection) => {
             case 'DROP_SHADOW': {
               const { r, g, b, a } = effect.color
               const { x, y } = effect.offset
-              const value = `${x} ${y} ${effect.radius} ${effect.spread} rgba(${r}, ${g}, ${b}, ${a})`
+              const value = `${x}px ${y}px ${effect.radius}px ${effect.spread}px rgba(${r}, ${g}, ${b}, ${a})`
               const token = `BoxShadow-${variable.name}`
 
               const theme = themes.get(FALLBACK_THEME)
diff --git a/packages/design-system/lib/styles/base.css b/packages/design-system/lib/styles/base.css
index afc0b3236..87e02be01 100644
--- a/packages/design-system/lib/styles/base.css
+++ b/packages/design-system/lib/styles/base.css
@@ -5,10 +5,10 @@
   --Border-width-md: 2px;
   --Border-width-none: 0px;
   --Border-width-sm: 1px;
-  --BoxShadow-Level-1: 0 0 2 1 rgba(0, 0, 0, 0.1);
-  --BoxShadow-Level-2: 0 0 4 2 rgba(0, 0, 0, 0.1);
-  --BoxShadow-Level-3: 0 0 8 3 rgba(0, 0, 0, 0.1);
-  --BoxShadow-Level-4: 0 0 14 6 rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-1: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-2: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-3: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
+  --BoxShadow-Level-4: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
   --Breakpoints-max-width: 767px;
   --Breakpoints-min-width: 320px;
   --Columns-Column: 4px;
diff --git a/packages/design-system/lib/styles/base.js b/packages/design-system/lib/styles/base.js
index 0deb13a42..839c0e91e 100644
--- a/packages/design-system/lib/styles/base.js
+++ b/packages/design-system/lib/styles/base.js
@@ -104,8 +104,8 @@ export const theme = {
   'Text size/3xs': 16,
   'Text size/2xs': 16,
   'Text size/lg': 24,
-  'BoxShadow-Level 1': '0 0 2 1 rgba(0, 0, 0, 0.1)',
-  'BoxShadow-Level 2': '0 0 4 2 rgba(0, 0, 0, 0.1)',
-  'BoxShadow-Level 3': '0 0 8 3 rgba(0, 0, 0, 0.1)',
-  'BoxShadow-Level 4': '0 0 14 6 rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 1': '0px 0px 2px 1px rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 2': '0px 0px 4px 2px rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 3': '0px 0px 8px 3px rgba(0, 0, 0, 0.1)',
+  'BoxShadow-Level 4': '0px 0px 14px 6px rgba(0, 0, 0, 0.1)',
 }
diff --git a/packages/design-system/lib/tokens/index.ts b/packages/design-system/lib/tokens/index.ts
index 29219f87b..7c64e3878 100644
--- a/packages/design-system/lib/tokens/index.ts
+++ b/packages/design-system/lib/tokens/index.ts
@@ -106,10 +106,10 @@ export const base = {
   'Text size/3xs': { resolved: 16, alias: 'Size/300-16' },
   'Text size/2xs': { resolved: 16, alias: 'Size/300-16' },
   'Text size/lg': { resolved: 24, alias: 'Size/500-24' },
-  'BoxShadow-Level 1': { resolved: '0 0 2 1 rgba(0, 0, 0, 0.1)' },
-  'BoxShadow-Level 2': { resolved: '0 0 4 2 rgba(0, 0, 0, 0.1)' },
-  'BoxShadow-Level 3': { resolved: '0 0 8 3 rgba(0, 0, 0, 0.1)' },
-  'BoxShadow-Level 4': { resolved: '0 0 14 6 rgba(0, 0, 0, 0.1)' },
+  'BoxShadow-Level 1': { resolved: '0px 0px 2px 1px rgba(0, 0, 0, 0.1)' },
+  'BoxShadow-Level 2': { resolved: '0px 0px 4px 2px rgba(0, 0, 0, 0.1)' },
+  'BoxShadow-Level 3': { resolved: '0px 0px 8px 3px rgba(0, 0, 0, 0.1)' },
+  'BoxShadow-Level 4': { resolved: '0px 0px 14px 6px rgba(0, 0, 0, 0.1)' },
 } as const
 export const scandic = {
   'Scandic/Grey/00': { resolved: '#F9F6F4' },