From 1398bcbc8c7d1702b8cc154416b620d0444d2318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Thu, 11 Jul 2024 18:07:51 +0200
Subject: [PATCH] :sparkles: Add spacing tokens to the design system

---
 frontend/src/app/main/ui/ds/_utils.scss     | 12 +++++++++
 frontend/src/app/main/ui/ds/spacing.scss    | 27 +++++++++++++++++++++
 frontend/src/app/main/ui/ds/storybook.scss  |  2 --
 frontend/src/app/main/ui/ds/typography.scss |  7 +-----
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/main/ui/ds/_utils.scss
 create mode 100644 frontend/src/app/main/ui/ds/spacing.scss

diff --git a/frontend/src/app/main/ui/ds/_utils.scss b/frontend/src/app/main/ui/ds/_utils.scss
new file mode 100644
index 000000000..248d43d00
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/_utils.scss
@@ -0,0 +1,12 @@
+// 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
+
+@use "sass:math";
+
+@function px2rem($value) {
+  $remValue: math.div($value, 16) * 1rem;
+  @return $remValue;
+}
diff --git a/frontend/src/app/main/ui/ds/spacing.scss b/frontend/src/app/main/ui/ds/spacing.scss
new file mode 100644
index 000000000..46fd5bbaa
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/spacing.scss
@@ -0,0 +1,27 @@
+// 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
+
+@use "./utils.scss" as *;
+
+$_sp-2: px2rem(2);
+$_sp-4: px2rem(4);
+$_sp-8: px2rem(8);
+$_sp-12: px2rem(12);
+$_sp-16: px2rem(16);
+$_sp-20: px2rem(20);
+$_sp-24: px2rem(24);
+$_sp-32: px2rem(32);
+
+:global(:root) {
+  --sp-xxs: #{$_sp-2};
+  --sp-xs: #{$_sp-4};
+  --sp-s: #{$_sp-8};
+  --sp-m: #{$_sp-12};
+  --sp-l: #{$_sp-16};
+  --sp-xl: #{$_sp-20};
+  --sp-xxl: #{$_sp-24};
+  --sp-xxxl: #{$_sp-32};
+}
diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss
index 9e4036c54..167fe085c 100644
--- a/frontend/src/app/main/ui/ds/storybook.scss
+++ b/frontend/src/app/main/ui/ds/storybook.scss
@@ -1,5 +1,3 @@
-@use "./colors.scss";
-
 .story-wrapper {
   display: grid;
   row-gap: 1rem;
diff --git a/frontend/src/app/main/ui/ds/typography.scss b/frontend/src/app/main/ui/ds/typography.scss
index de5293fcb..2d0174f91 100644
--- a/frontend/src/app/main/ui/ds/typography.scss
+++ b/frontend/src/app/main/ui/ds/typography.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "sass:math";
+@use "./utils.scss" as *;
 
 $_font-weight-regular: 400;
 $_font-weight-medium: 500;
@@ -13,11 +13,6 @@ $_font-lineheight-dense: 1.2;
 $_font-lineheight-compact: 1.3;
 $_font-lineheight-normal: 1.4;
 
-@function px2rem($value) {
-  $remValue: math.div($value, 16) * 1rem;
-  @return $remValue;
-}
-
 $_fs-12: px2rem(12);
 $_fs-14: px2rem(14);
 $_fs-16: px2rem(16);