Merge branch 'next' into DLT-3282

Author: iropolo

.mcp.json

@@ -1,7 +1,8 @@
 {
   "mcpServers": {
     "dialtone": {
-      "command": "dialtone-mcp-server"
+      "command": "node",
+      "args": ["./packages/dialtone-mcp-server/build/index.js"]
     }
   }
 }

apps/dialtone-documentation/docs/.vuepress/baseComponents/ClampedTableWrapper.vue

@@ -6,7 +6,7 @@
         aria-label="Search table"
         placeholder="Search table"
         type="search"
-        root-class="d-w-500"
+        class="d-w-500"
         @keydown.escape="handleEscapeKey"
       >
         <template #startIcon="{ iconSize }">
@@ -29,7 +29,7 @@
           </dt-stack>
         </template>
       </dt-input>
-      <dt-toggle v-if="hasDeprecatedRows" v-model="hideDeprecated" wrapper-class="d-g-100" size="sm">
+      <dt-toggle v-if="hasDeprecatedRows" v-model="hideDeprecated" class="d-g-100" size="sm">
         <dt-text kind="label" size="xs" strength="normal">
           Hide deprecated
         </dt-text>

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

@@ -40,14 +40,6 @@ export const SUBCATEGORY_MAP = {
   size: ['radius', 'border'],
 };
 
-export const DEPRECATED_PATTERNS = [
-  'typography-headline-',
-  'typography-body-',
-  'typography-label-',
-  'typography-helper-',
-  'typography-code-',
-];
-
 export const getTokensStructure = () => ({
   color: {
     foreground: {

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

@@ -1,5 +1,5 @@
 import tokensJson from '@dialpad/dialtone-tokens/dist/doc.json';
-import { CATEGORY_MAP, SUBCATEGORY_MAP, FORMAT_MAP, MODES, THEMES, DEPRECATED_PATTERNS, getTokensStructure } from './constants';
+import { CATEGORY_MAP, SUBCATEGORY_MAP, FORMAT_MAP, MODES, THEMES, getTokensStructure } from './constants';
 
 /**
   Process the file tokensJson and fill processedTokens with the data we want to show.
@@ -76,9 +76,8 @@ const addTokensToCategories = (token, format, structure) => {
   const [key, value] = token;
   if (!value[FORMAT_MAP[format]] || !value[FORMAT_MAP.CSS] || isBaseToken(key)) return;
 
-  const { name, value: tokenValue, description, keywords, isCompositionToken } = value[FORMAT_MAP[format]];
+  const { name, value: tokenValue, description, keywords, isCompositionToken, deprecated } = value[FORMAT_MAP[format]];
   const { value: exampleValue, name: exampleName } = value[FORMAT_MAP.CSS];
-  const deprecated = isDeprecatedToken(exampleName);
   const displayToken = { exampleValue, exampleName, name, tokenValue, description, keywords, deprecated };
 
   if (isCompositionToken) {
@@ -215,7 +214,3 @@ const addTokenToSubcategory = (token, category, subcategory, structure) => {
 };
 
 const isBaseToken = (name) => name.endsWith('base') || name.endsWith('root');
-
-const isDeprecatedToken = (name) => {
-  return DEPRECATED_PATTERNS.some(pattern => name.includes(pattern));
-};

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

@@ -314,7 +314,7 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const isActiveLink = (link) => {
   // For Design System, check all related paths (same as useSidebarItems.js)
   if (link === '/dialtone/') {
-    const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/dialtone/'];
+    const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/dialtone/', '/functions-and-utilities/'];
     return designSystemPaths.some(p => route.path.includes(p));
   }
   // For other links, use simple path matching

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

@@ -130,7 +130,7 @@ const route = useRoute();
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/theme/composables/useSidebarItems.js

@@ -9,7 +9,7 @@ import { usePageData } from 'vuepress/client';
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/design/', '/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/design/', '/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/theme/layouts/Layout.vue

@@ -83,7 +83,7 @@ const isMobile = ref(false);
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/views/UiKitsOverview.vue

@@ -25,37 +25,8 @@
             </div>
           </dt-stack>
           <dt-stack direction="row" gap="50" class="d-ai-center">
-            <svg
-              class="d-icon d-icon--size-200"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4.61824 20.4293L4.00072 3.92089C3.98032 3.37568 4.397 2.91362 4.93974
-                2.87959L18.9352 2.00199C19.4877 1.96735 19.9635 2.38859 19.998 2.94286C19.9993
-                2.96374 20 2.98466 20 3.00558V20.9945C20 21.5498 19.5513 22 18.9978 22C18.9828
-                22 18.9678 21.9997 18.9528 21.999L5.57482 21.3962C5.0538 21.3727 4.6378 20.9522
-                4.61824 20.4293Z"
-                fill="#FF4785"
-              />
-              <path
-                d="M15.8555 4.42657L15.9531 2.14956L17.9154 2L17.9999 4.34821C18.0028
-                4.42993 17.9369 4.49849 17.8527 4.50135C17.8166 4.50257 17.7813 4.49135
-                17.7529 4.46968L16.9962 3.89144L16.1003 4.55068C16.0331 4.6001 15.9374
-                4.58735 15.8864 4.5222C15.865 4.49478 15.854 4.46096 15.8555 4.42657ZM13.346
-                9.44092C13.346 9.82708 16.0275 9.642 16.3875 9.37075C16.3875 6.74106 14.9328
-                5.3592 12.2692 5.3592C9.60547 5.3592 8.11304 6.76256 8.11304 8.8676C8.11304
-                12.5339 13.2137 12.604 13.2137 14.6038C13.2137 15.1652 12.9304 15.4985 12.3069
-                15.4985C11.4946 15.4985 11.1735 15.096 11.2112 13.7278C11.2112 13.4309 8.11304
-                13.3384 8.01859 13.7278C7.77806 17.0436 9.90773 18 12.3447 18C14.7062 18 16.5575
-                16.779 16.5575 14.5687C16.5575 10.6393 11.3813 10.7446 11.3813 8.79743C11.3813
-                8.00804 11.9858 7.90279 12.3447 7.90279C12.7226 7.90279 13.4026 7.96739 13.346
-                9.44092Z"
-                fill="white"
-              />
-            </svg>
-            <span class="d-fs-125 d-fw-semibold d-fc-secondary">View in Storybook</span>
+            <dt-icon name="storybook-color" size="200" />
+            <dt-text kind="label" size="200" strength="medium" tone="secondary">Storybook</dt-text>
           </dt-stack>
         </dt-stack>
       </a>

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -923,7 +923,7 @@
         ],
         "/functions-and-utilities/": [
           {
-            "text": "Functions",
+            "text": "Vue Utilities",
             "link": "/functions-and-utilities/",
             "icon": "code"
           }