add a more specific token size to tokenValueMap for the themed test

Author: Elijbet

Diff for: packages/calcite-components/src/custom-theme.stories.ts

@@ -153,7 +153,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${chips} ${pagination} ${slider}
       </div>
       <div class="demo-column">
-        ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
+        ${tabs} ${tabsBordered} ${label} ${link} ${list} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
         ${selectedComboboxItem}
       </div>
@@ -169,7 +169,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     </div>
     <div class="demo-row">
       <div class="demo-column">${fab}</div>
-      <div class="demo-column">${fabLoading}</div>
+      <div>${fabLoading} ${loader}</div>
     </div>
     <div class="demo-row">
       <div class="demo-column">${inputMessage}</div>

Diff for: packages/calcite-components/src/tests/utils/cssTokenValues.ts

@@ -7,14 +7,15 @@
  */
 export function getTokenValue(token: string): string {
   const tokenValueMap = {
-    spacing: "42px",
+    spacing$: "42px",
     // granular patterns for the same token must be listed first to match correctly
     background$: "rgb(252, 244, 52)",
     "text-color$": "rgb(239, 118, 39)",
     "border-color$": "rgb(156, 89, 209)",
     "background-color$": "rgb(252, 244, 52)",
     "icon-color-end$": "rgb(213, 156, 74)",
     "icon-color-start$": "rgb(98, 213, 180)",
+    "loader-size$": "12px",
     color$: "rgb(0, 191, 255)",
     hover$: "rgb(255, 105, 180)",
     pressed$: "rgb(44, 44, 44)",