feat(tokens): DLT-2937 introduce spacing and layout token systems (#1045)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>
Co-authored-by: Francis Rupert <francis.rupert@dialpad.com>
Co-authored-by: Francis Rupert <francisrupert@gmail.com>

Author: 4 people

.github/actions/setup-environment/action.yml

@@ -12,6 +12,10 @@ runs:
       with:
         node-version-file: ".nvmrc"
         cache: "pnpm"
+        registry-url: "https://npm.pkg.github.com"
+        scope: "dialpad"
+      env:
+        NODE_AUTH_TOKEN: ${{ github.token }}
 
     - name: Install dependencies
       shell: bash

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/constants.js

@@ -27,6 +27,8 @@ export const THEMES = [
 export const CATEGORY_MAP = {
   color: ['color', 'opacity', 'shell'],
   typography: ['typography', 'font', 'text'],
+  spacing: ['spacing'],
+  layout: ['layout'],
   size: ['size'],
   shadow: ['shadow'],
   component: ['topbar', 'sidebar', 'presence', 'mention', 'avatar', 'badge', 'checkbox', 'icon', 'inputs', 'action'],
@@ -105,16 +107,20 @@ export const getTokensStructure = () => ({
   shadow: {
     _children: [],
   },
-  size: {
+  spacing: {
     base: {
       _children: [],
     },
     negative: {
       _children: [],
     },
-    percentage: {
+  },
+  layout: {
+    base: {
       _children: [],
     },
+  },
+  size: {
     radius: {
       _children: [],
     },

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/utilities.js

@@ -159,22 +159,34 @@ const addTokensToCategories = (token, format, structure) => {
     return;
   }
 
-  // SIZE
-  if (key.startsWith('size') && key.endsWith('negative')) {
-    structure.size.negative._children.push(displayToken);
+  // SPACING (0-64px)
+  if (key.startsWith('spacing') && key.endsWith('negative')) {
+    structure.spacing.negative._children.push(displayToken);
     return;
   }
 
-  if (key.startsWith('size') && key.endsWith('percent')) {
-    structure.size.percentage._children.push(displayToken);
+  if (key.startsWith('spacing')) {
+    structure.spacing.base._children.push(displayToken);
     return;
   }
 
-  if (key.startsWith('size') && SUBCATEGORY_MAP.size.includes(splitKeys[1])) {
-    addTokenToSubcategory(displayToken, 'size', SUBCATEGORY_MAP.size.find(sub => sub === splitKeys[1]), structure);
+  // LAYOUT (64px+)
+  if (key.startsWith('layout') && key.endsWith('negative')) {
+    structure.layout.negative._children.push(displayToken);
     return;
   }
 
+  if (key.startsWith('layout') && key.endsWith('percent')) {
+    structure.layout.percentage._children.push(displayToken);
+    return;
+  }
+
+  if (key.startsWith('layout')) {
+    structure.layout.base._children.push(displayToken);
+    return;
+  }
+
+  // SIZE (radius, border, and component-specific only)
   if (key.startsWith('size/radius')) {
     structure.size.radius._children.push(displayToken);
     return;
@@ -185,11 +197,6 @@ const addTokensToCategories = (token, format, structure) => {
     return;
   }
 
-  if (key.startsWith('size')) {
-    structure.size.base._children.push(displayToken);
-    return;
-  }
-
   if (CATEGORY_MAP.component.includes(splitKeys[0]) && splitKeys[1] === 'size') {
     if (splitKeys[2] === 'border') {
       structure.size.components._children.push({ ...displayToken, hidden: true });
@@ -199,8 +206,8 @@ const addTokensToCategories = (token, format, structure) => {
     return;
   }
 
-  // SPACE tokens are deprecated - they now alias to SIZE tokens
-  // Suppress them from the tokens page display
+  // Old size base/negative tokens are deprecated - suppress from display
+  // They are replaced by spacing (0-64px) and layout (64px+) tokens
 };
 
 const addTokenToSubcategory = (token, category, subcategory, structure) => {

apps/dialtone-documentation/docs/.vuepress/theme/components/Home.vue

@@ -12,8 +12,4 @@
 </template>
 
 <script setup>
-function sendAnalyticsEvent () {
-  if (!window.gtag) return;
-  window.gtag('event', 'click', { event_name: 'get_started_button_clicked' });
-}
 </script>