feat: new size xxxs and xxs tokens (#515)

sbb-design-systems · May 28, 2024 · 6c687cf · 6c687cf
1 parent 1b3ca0c
commit 6c687cf
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git 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
@@ -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,