From e84fd71f1b36a1f295a92f34f2ec66864d9a9305 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 28 May 2024 11:23:05 +0200
Subject: [PATCH] feat: new size xxxs and xxs tokens

---
 composed-variables/composed-variables.css |  4 ++
 designTokens/size.ts                      | 60 +++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/composed-variables/composed-variables.css b/composed-variables/composed-variables.css
index 381e7aac..7fbe1640 100644
--- a/composed-variables/composed-variables.css
+++ b/composed-variables/composed-variables.css
@@ -46,6 +46,8 @@
   --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);
 
   /* Size */
+  --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-zero);
+  --sbb-size-element-xxs: var(--sbb-size-element-xxs-zero);
   --sbb-size-element-xs: var(--sbb-size-element-xs-zero);
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
@@ -118,6 +120,8 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-medium);
 
     /* Size */
+    --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-medium);
+    --sbb-size-element-xxs: var(--sbb-size-element-xxs-medium);
     --sbb-size-element-xs: var(--sbb-size-element-xs-medium);
     --sbb-size-element-s: var(--sbb-size-element-s-medium);
     --sbb-size-element-m: var(--sbb-size-element-m-medium);
diff --git a/designTokens/size.ts b/designTokens/size.ts
index 0fc56ea4..ce6fcd2c 100644
--- a/designTokens/size.ts
+++ b/designTokens/size.ts
@@ -9,6 +9,66 @@ const attributes = (group?: string): Partial<DesignToken> => ({
 
 export const size: DesignTokens = {
   element: {
+    xxxs: {
+      zero: {
+        value: 28,
+        ...attributes(),
+      },
+      micro: {
+        value: 28,
+        ...attributes(),
+      },
+      small: {
+        value: 28,
+        ...attributes(),
+      },
+      medium: {
+        value: 32,
+        ...attributes(),
+      },
+      large: {
+        value: 32,
+        ...attributes(),
+      },
+      wide: {
+        value: 32,
+        ...attributes(),
+      },
+      ultra: {
+        value: 32,
+        ...attributes(),
+      },
+    },
+    xxs: {
+      zero: {
+        value: 32,
+        ...attributes(),
+      },
+      micro: {
+        value: 32,
+        ...attributes(),
+      },
+      small: {
+        value: 32,
+        ...attributes(),
+      },
+      medium: {
+        value: 36,
+        ...attributes(),
+      },
+      large: {
+        value: 36,
+        ...attributes(),
+      },
+      wide: {
+        value: 36,
+        ...attributes(),
+      },
+      ultra: {
+        value: 36,
+        ...attributes(),
+      },
+    },
     xs: {
       zero: {
         value: 36,