chore: NO-JIRA 🚫 NO-MERGE 🚫 t-shirt to ordinal numeric size

.claude/rules/vue-components.md

@@ -30,9 +30,14 @@ paths:
 
 ## Sizes
 
-- Interactive components: `xs`, `sm`, `md`, `lg`, `xl` (string).
-- Icons: numeric scale `100`–`800`.
-- Export from `*_constants.js`: `COMPONENT_SIZES` object + `COMPONENT_SIZE_DEFAULT`.
+- All component size props use a numeric ordinal scale: `100` (xs), `200` (sm), `300` (md), `400` (lg), `500` (xl).
+- Prop type: `[String, Number]`. Default: numeric (e.g., `default: 300`).
+- T-shirt aliases (`xs`, `sm`, `md`, `lg`, `xl`) remain in constants for backward compat but are deprecated.
+- `@values` JSDoc: list numeric only (e.g., `@values 100, 200, 300, 400, 500`). Do not list t-shirt aliases.
+- Text headline extends the scale: `500` (xl), `600` (2xl), `700` (3xl).
+- Icons: separate numeric scale `100`–`800` (unchanged, do not modify).
+- Shared scale definition: `packages/dialtone-vue/common/constants/sizes.js`.
+- Export from `*_constants.js`: `COMPONENT_SIZE_MODIFIERS` object with both numeric and t-shirt keys.
 
 ## Separation of Concerns
 

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

@@ -4,7 +4,7 @@
       <dt-text
         as="h4"
         kind="headline"
-        size="lg"
+        :size="400"
         class="d-tt-capitalize"
         text-box-trim="start"
         tabindex="-1"

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

@@ -40,11 +40,11 @@
           <dt-stack gap="500">
             <dt-stack direction="row" gap="300">
               <dt-stack class="d-fl-grow5">
-                <dt-text kind="label" size="sm">
+                <dt-text kind="label" :size="200">
                   Name
                 </dt-text>
                 <dt-stack direction="row" justify="between">
-                  <dt-text kind="body" size="md" density="200">
+                  <dt-text kind="body" :size="300" density="200">
                     {{ name }}
                   </dt-text>
                 </dt-stack>
@@ -64,10 +64,10 @@
             </dt-stack>
             <dt-stack direction="row" align="center">
               <dt-stack class="d-fl-grow5">
-                <dt-text kind="label" size="sm">
+                <dt-text kind="label" :size="200">
                   Description
                 </dt-text>
-                <dt-text kind="body" size="md" density="200">
+                <dt-text kind="body" :size="300" density="200">
                   {{ desc }}
                 </dt-text>
               </dt-stack>
@@ -79,7 +79,7 @@
                   label="SVG"
                   readonly
                   tabindex="-1"
-                  size="sm"
+                  :size="200"
                   :value="rawSvg"
                 />
               </div>
@@ -96,7 +96,7 @@
                   label="Vue"
                   tabindex="-1"
                   readonly
-                  size="sm"
+                  :size="200"
                   :value="`<${vue} />`"
                 />
               </div>

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

@@ -18,23 +18,23 @@
       </component>
       <dt-stack as="section" direction="row" gap="400">
         <dt-avatar
-          size="md"
+          :size="300"
           :seed="author"
           :full-name="author"
         />
         <dt-stack>
-          <dt-text size="sm" kind="label" tone="secondary" density="200">
+          <dt-text :size="200" kind="label" tone="secondary" density="200">
             {{ author }}
           </dt-text>
-          <dt-text as="time" size="sm" kind="body" tone="tertiary">
+          <dt-text as="time" :size="200" kind="body" tone="tertiary">
             {{ format(posted, 'MMMM do, y') }}
           </dt-text>
         </dt-stack>
       </dt-stack>
       <dt-text
         v-if="excerpt"
         as="p"
-        :size="isPreview ? 'md' : 'lg'"
+        :size="isPreview ? 300 : 400"
         kind="body"
         tone="tertiary"
         class="d-mt8"

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

@@ -34,7 +34,7 @@ const kindDescriptions = {
           <div class="d-mb4">
             {{ importance }}
           </div>
-          <dt-text kind="body" size="sm" density="200" class="d-tt-none">
+          <dt-text kind="body" :size="200" density="200" class="d-tt-none">
             {{ importanceDescriptions[importance] }}
           </dt-text>
         </th>
@@ -46,7 +46,7 @@ const kindDescriptions = {
           <a class="d-link d-fs-100 d-fw-medium d-d-block d-mb4 d-tt-uppercase" :href="`#${kind}`">
             <strong>{{ kind }}</strong>
           </a>
-          <dt-text kind="body" size="sm" density="200">
+          <dt-text kind="body" :size="200" density="200">
             {{ kindDescriptions[kind] }}
           </dt-text>
         </th>

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

@@ -18,7 +18,7 @@
               v-dt-tooltip="`Clear`"
               kind="muted"
               importance="clear"
-              size="xs"
+              :size="100"
               aria-label="Clear search"
               @click="clearSearch"
             >
@@ -32,7 +32,7 @@
     </div>
     <dt-empty-state
       v-if="showEmptyState"
-      size="sm"
+      :size="200"
       :header-text="`No results found`"
       class="d-w100p d-ba d-bc-subtle d-bar8 d-pt32"
     >
@@ -58,7 +58,7 @@
         class="dialtone-doc-table-clamped__more-btn d-bgc-secondary d-bs-sm"
         kind="muted"
         importance="outlined"
-        size="xs"
+        :size="100"
         @click="() => handleExpand(scrollRef)"
       >
         {{ buttonLabel }}

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

@@ -2,7 +2,7 @@
   <dt-tab-group
     class="code-example-tab-group"
     activation-mode="auto"
-    size="xs"
+    :size="100"
     @change="selectedPanelId = $event.selected"
   >
     <template #tabs>
@@ -68,7 +68,7 @@
         class="code-example-tab-group__more-btn d-bgc-secondary d-bs-sm"
         kind="muted"
         importance="outlined"
-        size="xs"
+        :size="100"
         @click="expandCodeBlocks"
       >
         Show all

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

@@ -39,7 +39,7 @@
               <dt-text
                 as="span"
                 kind="code"
-                size="xs"
+                :size="100"
                 class="d-docsite-code"
               >
                 {{ item }}
@@ -49,7 +49,7 @@
               <dt-text
                 as="code"
                 kind="code"
-                size="xs"
+                :size="100"
                 class="code-example--inline"
               >
                 {{ applies }}
@@ -58,7 +58,7 @@
             <td>
               <dt-text
                 kind="body"
-                size="xs"
+                :size="100"
               >
                 {{ description }}
               </dt-text>

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

@@ -41,7 +41,7 @@
               <dt-text
                 as="span"
                 kind="code"
-                size="xs"
+                :size="100"
                 class="d-docsite-code"
               >
                 {{ className.startsWith('data-') ? className : `.${className}` }}
@@ -51,7 +51,7 @@
               <dt-text
                 as="code"
                 kind="code"
-                size="xs"
+                :size="100"
                 class="code-example--inline"
               >
                 {{ applies }}
@@ -60,7 +60,7 @@
             <td>
               <dt-text
                 kind="body"
-                size="xs"
+                :size="100"
               >
                 {{ description }}
               </dt-text>

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

@@ -46,7 +46,7 @@
           >
             <th scope="row">
               <dt-stack gap="300">
-                <dt-text as="code" kind="code" size="xs" class="d-docsite-code">
+                <dt-text as="code" kind="code" :size="100" class="d-docsite-code">
                   {{ item.name }}
                 </dt-text>
                 <dt-text
@@ -67,7 +67,7 @@
             </th>
 
             <td v-if="withDefault">
-              <dt-text v-if="item.defaultValue" as="code" kind="code" size="xs" class="d-docsite-code">
+              <dt-text v-if="item.defaultValue" as="code" kind="code" :size="100" class="d-docsite-code">
                 {{ item.defaultValue }}
               </dt-text>
             </td>
@@ -85,22 +85,22 @@
                     v-for="(value, index) in item.values"
                     :key="`${item.name} ${value}`"
                   >
-                    <dt-text v-if="index > 0" tone="muted" as="span" kind="body" size="xs">
+                    <dt-text v-if="index > 0" tone="muted" as="span" kind="body" :size="100">
                       |
                     </dt-text>
-                    <dt-text as="code" kind="code" size="xs" class="d-docsite-code">
+                    <dt-text as="code" kind="code" :size="100" class="d-docsite-code">
                       "{{ value }}"
                     </dt-text>
                   </template>
                 </dt-stack>
-                <dt-text v-else-if="item.type" as="code" kind="code" size="xs" class="d-docsite-code">
+                <dt-text v-else-if="item.type" as="code" kind="code" :size="100" class="d-docsite-code">
                   {{ item.type }}
                 </dt-text>
                 <dt-text
                   v-if="item.description"
                   as="p"
                   kind="body"
-                  size="sm"
+                  :size="200"
                   wrap="balance"
                 >
                   <markdown-render
@@ -111,7 +111,7 @@
                   v-if="item.deprecated && item.deprecatedMessage"
                   as="p"
                   kind="body"
-                  size="sm"
+                  :size="200"
                   tone="critical"
                 >
                   {{ item.deprecatedMessage }}

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

@@ -1,7 +1,7 @@
 <template>
   <dt-button
     :aria-label="ariaLabel"
-    size="xs"
+    :size="100"
     importance="clear"
     kind="muted"
     @click="copyToClipboard"

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

@@ -93,17 +93,17 @@ const colors = processColorsDocs(props.excludedColors, props.classPrefix);
             </th>
             <th class="d-lh-300" scope="row">
               <span class="d-tt-capitalize" v-text="color.name" />
-              <dt-text v-if="color.description" as="span" kind="body" size="xs" strength="normal" class="d-d-block">
+              <dt-text v-if="color.description" as="span" kind="body" :size="100" strength="normal" class="d-d-block">
                 {{ color.description }}
               </dt-text>
             </th>
             <td>
-              <dt-text as="span" kind="code" size="xs" class="d-docsite-code">
+              <dt-text as="span" kind="code" :size="100" class="d-docsite-code">
                 {{ color.tokenName ? `var(${color.tokenName})` : '-' }}
               </dt-text>
             </td>
             <td>
-              <dt-text as="span" kind="code" size="xs" class="d-docsite-code">
+              <dt-text as="span" kind="code" :size="100" class="d-docsite-code">
                 {{ color.utilityClass }}
               </dt-text>
             </td>

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

@@ -4,7 +4,7 @@
     <dt-text
       as="h1"
       kind="headline"
-      size="2xl"
+      :size="600"
       strength="medium"
       class="d-h100p d-w100p d-d-grid d-plc-center d-ta-center d-wmx1024 d-m-auto d-p32"
       style="

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

@@ -11,7 +11,7 @@
       <dt-select-menu
         v-model="selectedSize"
         label="Size"
-        size="sm"
+        :size="200"
       >
         <option
           v-for="option in sizeOptions"
@@ -24,10 +24,10 @@
     </div>
     <dt-stack direction="row" align="center">
       <dt-stack class="d-fl-grow5">
-        <dt-text kind="label" size="sm">
+        <dt-text kind="label" :size="200">
           Name
         </dt-text>
-        <dt-text kind="body" size="md" density="200">
+        <dt-text kind="body" :size="300" density="200">
           {{ iconName }}
         </dt-text>
       </dt-stack>
@@ -38,18 +38,18 @@
       />
     </dt-stack>
     <dt-stack>
-      <dt-text kind="label" size="sm">
+      <dt-text kind="label" :size="200">
         Category
       </dt-text>
-      <dt-text kind="body" size="md" density="200" class="d-tt-capitalize">
+      <dt-text kind="body" :size="300" density="200" class="d-tt-capitalize">
         {{ category }}
       </dt-text>
     </dt-stack>
     <dt-stack>
-      <dt-text kind="label" size="sm">
+      <dt-text kind="label" :size="200">
         Keywords
       </dt-text>
-      <dt-text kind="body" size="md" density="200">
+      <dt-text kind="body" :size="300" density="200">
         {{ keywords.join(', ') || '-' }}
       </dt-text>
     </dt-stack>
@@ -60,7 +60,7 @@
           label="SVG"
           readonly
           tabindex="-1"
-          size="sm"
+          :size="200"
           :value="svgExample"
         />
       </div>
@@ -77,7 +77,7 @@
           label="Vue"
           tabindex="-1"
           readonly
-          size="sm"
+          :size="200"
           :value="vueExample"
         />
       </div>
@@ -94,7 +94,7 @@
           label="Deprecated"
           tabindex="-1"
           readonly
-          size="sm"
+          :size="200"
           :value="vueExampleDeprecated"
         >
           <template #description>

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

@@ -22,13 +22,13 @@
             :key="className"
           >
             <th scope="row">
-              <dt-text as="span" kind="code" size="xs" class="d-docsite-code">
+              <dt-text as="span" kind="code" :size="100" class="d-docsite-code">
                 {{ className }}
               </dt-text>
             </th>
             <td class="d-ws-break-spaces">
               <dt-stack direction="row" justify="between" align="center" gap="500">
-                <dt-text as="span" kind="code" size="xs" class="d-fl-grow1">
+                <dt-text as="span" kind="code" :size="100" class="d-fl-grow1">
                   {{ value }}
                 </dt-text>
                 <slot name="example" :class-name="className" />