feat(typography, tokens): DLT-2856 DLT-2857 next typography system (#994)

Author: francisrupert

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

@@ -59,7 +59,7 @@
                     'background-color': `var(--dt-shell-mention-color-background)`,
                   }"
                 >
-                  Aa
+                  Ag
                 </dt-stack>
               </dt-stack>
               <dt-stack
@@ -78,7 +78,7 @@
                 :style="{ color: `var(${color.variable})` }"
                 class="d-fs-300 d-p6 d-ta-center d-fw-medium"
               >
-                Aa
+                Ag
               </div>
               <div
                 v-else-if="color.property === 'border-color'"

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokenExample.vue

@@ -8,18 +8,18 @@
     :style="getColorStyle"
   >
     <div v-if="isForeground || isLink" :class="['d-headline--lg', { 'link-example': isLink }]">
-      Aa
+      Ag
     </div>
   </dt-stack>
   <dt-stack
-    v-if="category === 'typography'"
+    v-if="category === 'typography' || category === 'text'"
     direction="row"
     justify="center"
     align="center"
     class="d-h32"
   >
     <div :style="getTypographyStyle">
-      Aa
+      Ag
     </div>
   </dt-stack>
   <div
@@ -65,6 +65,7 @@ const TYPOGRAPHY_KEY_MAP = {
 const SHADOW_COMPOSITION_TOKENS = ['small', 'medium', 'large', 'extra-large', 'card', 'focus', 'focus-inset'];
 
 const isTypography = (name, key) => name.includes('--dt-typography') && name.includes(key);
+const isText = (name, key) => name.includes('--dt-text') && name.includes(key);
 const isFont = (name, key) => name.includes(`--dt-font-${key}`);
 const getRectSizeStyle = (value) => {
   if (value.endsWith('%')) return { 'inline-size': value };
@@ -142,11 +143,11 @@ const foregroundBackgroundColor = computed(() => {
 
 const getTypographyStyle = computed(() => {
   for (const key in TYPOGRAPHY_KEY_MAP) {
-    if (isFont(props.name, key) || isTypography(props.name, key)) {
+    if (isFont(props.name, key) || isTypography(props.name, key) || isText(props.name, key)) {
       return { [TYPOGRAPHY_KEY_MAP[key]]: props.value };
     }
   }
-  if (props.name.startsWith('var(--dt-typography')) {
+  if (props.name.startsWith('var(--dt-typography') || props.name.startsWith('var(--dt-text')) {
     return `font: ${props.value}`;
   }
   return null;

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokenTable.vue

@@ -42,7 +42,7 @@
         </thead>
         <tbody>
           <tr
-            v-for="({ exampleValue, exampleName, name, tokenValue, description }) in shownTokens"
+            v-for="({ exampleValue, exampleName, name, tokenValue, description, deprecated }) in shownTokens"
             :key="name"
             tabindex="0"
             @mouseenter="onEnterRow(name)"
@@ -59,6 +59,7 @@
               />
             </td>
             <th scope="row">
+              <dt-badge v-if="deprecated" type="critical" kind="label" text="Deprecated" />
               <dt-stack
                 direction="row"
                 gap="300"
@@ -86,7 +87,7 @@
                 :tokens="tokens"
               />
             </th>
-            <td v-if="!isSmallDevice && showValue" class="d-code--sm  d-fc-blue-500 d-ta-right d-wmx164">
+            <td v-if="!isSmallDevice && showValue" class="d-code--sm d-fc-blue-500 d-ta-right d-wmx164">
               <token-value :token-value="valueToString(tokenValue)" :tokens="tokens" />
             </td>
             <td

apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokenValue.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="d-code--sm d-docsite-code d-wmx164">
+  <div class="d-code--sm d-docsite-code">
     <div v-if="isCompositionToken(tokenValue)">
       <span v-for="value in tokenValue" :key="value">
-        <span v-dt-tooltip="getTooltipValue(value)" :class="{ 'h:d-fc-secondary': getTooltipValue(value) }">
+        <span
+          v-dt-tooltip="getTooltipValue(value)"
+          :class="{ 'd-d-block h:d-fc-secondary d-c-default': getTooltipValue(value) }"
+        >
           {{ value }}&nbsp;
         </span>
       </span>

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

@@ -26,7 +26,7 @@ export const THEMES = [
 
 export const CATEGORY_MAP = {
   color: ['color', 'opacity', 'shell'],
-  typography: ['typography', 'font'],
+  typography: ['typography', 'font', 'text'],
   size: ['size'],
   space: ['space'],
   shadow: ['shadow'],
@@ -39,6 +39,14 @@ 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: {
@@ -73,7 +81,7 @@ export const getTokensStructure = () => ({
     },
   },
   typography: {
-    'font style': {
+    'text style': {
       _children: [],
     },
     'font family': {

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, getTokensStructure } from './constants';
+import { CATEGORY_MAP, SUBCATEGORY_MAP, FORMAT_MAP, MODES, THEMES, DEPRECATED_PATTERNS, getTokensStructure } from './constants';
 
 /**
   Process the file tokensJson and fill processedTokens with the data we want to show.
@@ -24,6 +24,9 @@ export const addTokensToStructure = (structure) => {
         Object.entries(combined).forEach((token) => {
           addTokensToCategories(token, format, structure[format][themeKey]);
         });
+
+        // Sort text style tokens: text first, then typography, each by type then size
+        structure[format][themeKey].typography['text style']._children.sort(sortFontStyleTokens);
       }
     }
   });
@@ -41,14 +44,42 @@ const splitCompositionTokenIntoArray = (value) => {
   return value;
 };
 
+/**
+ * Sort text style tokens: text tokens first, then typography tokens,
+ * each sorted by type (headline, body, label, code, etc.) then by size (xxxl -> xs)
+ */
+const TYPE_ORDER = ['headline', 'body', 'label', 'code', 'helper', 'button', 'inputs'];
+const SIZE_ORDER = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+const sortFontStyleTokens = (a, b) => {
+  const aName = a.name || a.exampleName || '';
+  const bName = b.name || b.exampleName || '';
+
+  // Text tokens before typography tokens
+  const aIsText = aName.includes('--dt-text');
+  const bIsText = bName.includes('--dt-text');
+  if (aIsText !== bIsText) return aIsText ? -1 : 1;
+
+  // Sort by type
+  const aType = TYPE_ORDER.findIndex(t => aName.includes(t));
+  const bType = TYPE_ORDER.findIndex(t => bName.includes(t));
+  if (aType !== bType) return aType - bType;
+
+  // Sort by size
+  const aSize = SIZE_ORDER.findIndex(s => aName.includes(`-${s})`));
+  const bSize = SIZE_ORDER.findIndex(s => bName.includes(`-${s})`));
+  return aSize - bSize;
+};
+
 // eslint-disable-next-line complexity
 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 { value: exampleValue, name: exampleName } = value[FORMAT_MAP.CSS];
-  const displayToken = { exampleValue, exampleName, name, tokenValue, description, keywords };
+  const deprecated = isDeprecatedToken(exampleName);
+  const displayToken = { exampleValue, exampleName, name, tokenValue, description, keywords, deprecated };
 
   if (isCompositionToken) {
     displayToken.tokenValue = splitCompositionTokenIntoArray(tokenValue);
@@ -90,7 +121,7 @@ const addTokensToCategories = (token, format, structure) => {
 
   // TYPOGRAPHY
   if (key.startsWith('typography')) {
-    structure.typography['font style']._children.push({ ...displayToken, hidden: !isCompositionToken });
+    structure.typography['text style']._children.push({ ...displayToken, hidden: !isCompositionToken });
     return;
   }
 
@@ -116,6 +147,12 @@ const addTokensToCategories = (token, format, structure) => {
     return;
   }
 
+  // TEXT (display alongside typography in Font Style)
+  if (key.startsWith('text')) {
+    structure.typography['text style']._children.push({ ...displayToken, hidden: !isCompositionToken });
+    return;
+  }
+
   // SHADOW
   if (key.startsWith('shadow')) {
     structure.shadow._children.push({ ...displayToken, hidden: !isCompositionToken });
@@ -183,3 +220,7 @@ 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));
+};