@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

package/src/tokens/base/motion/timing.json5

@@ -2,51 +2,51 @@
   base: {
     duration: {
       '0': {
-        $value: '0ms',
+        $value: {value: 0, unit: 'ms'},
         $type: 'duration',
       },
       '50': {
-        $value: '50ms',
+        $value: {value: 50, unit: 'ms'},
         $type: 'duration',
       },
       '100': {
-        $value: '100ms',
+        $value: {value: 100, unit: 'ms'},
         $type: 'duration',
       },
       '200': {
-        $value: '200ms',
+        $value: {value: 200, unit: 'ms'},
         $type: 'duration',
       },
       '300': {
-        $value: '300ms',
+        $value: {value: 300, unit: 'ms'},
         $type: 'duration',
       },
       '400': {
-        $value: '400ms',
+        $value: {value: 400, unit: 'ms'},
         $type: 'duration',
       },
       '500': {
-        $value: '500ms',
+        $value: {value: 500, unit: 'ms'},
         $type: 'duration',
       },
       '600': {
-        $value: '600ms',
+        $value: {value: 600, unit: 'ms'},
         $type: 'duration',
       },
       '700': {
-        $value: '700ms',
+        $value: {value: 700, unit: 'ms'},
         $type: 'duration',
       },
       '800': {
-        $value: '800ms',
+        $value: {value: 800, unit: 'ms'},
         $type: 'duration',
       },
       '900': {
-        $value: '900ms',
+        $value: {value: 900, unit: 'ms'},
         $type: 'duration',
       },
       '1000': {
-        $value: '1000ms',
+        $value: {value: 1000, unit: 'ms'},
         $type: 'duration',
       },
     },

package/src/tokens/base/size/size.json5

@@ -1,196 +1,196 @@
 {
-  "base": {
-    "size": {
-      "2": {
-        "$value": "2px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "4": {
-        "$value": "4px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "6": {
-        "$value": "6px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "8": {
-        "$value": "8px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "12": {
-        "$value": "12px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "16": {
-        "$value": "16px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "20": {
-        "$value": "20px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "24": {
-        "$value": "24px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "28": {
-        "$value": "28px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "32": {
-        "$value": "32px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "36": {
-        "$value": "36px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "40": {
-        "$value": "40px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "44": {
-        "$value": "44px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "48": {
-        "$value": "48px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "64": {
-        "$value": "64px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "80": {
-        "$value": "80px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "96": {
-        "$value": "96px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "112": {
-        "$value": "112px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      },
-      "128": {
-        "$value": "128px",
-        "$type": "dimension",
-        "$extensions": {
-          "org.primer.figma": {
-            "collection": "base/size",
-            "scopes": ["size", "gap"]
-          }
-        }
-      }
-    }
-  }
+  base: {
+    size: {
+      '2': {
+        $value: {value: 2, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '4': {
+        $value: {value: 4, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '6': {
+        $value: {value: 6, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '8': {
+        $value: {value: 8, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '12': {
+        $value: {value: 12, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '16': {
+        $value: {value: 16, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '20': {
+        $value: {value: 20, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '24': {
+        $value: {value: 24, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '28': {
+        $value: {value: 28, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '32': {
+        $value: {value: 32, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '36': {
+        $value: {value: 36, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '40': {
+        $value: {value: 40, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '44': {
+        $value: {value: 44, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '48': {
+        $value: {value: 48, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '64': {
+        $value: {value: 64, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '80': {
+        $value: {value: 80, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '96': {
+        $value: {value: 96, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '112': {
+        $value: {value: 112, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+      '128': {
+        $value: {value: 128, unit: 'px'},
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'base/size',
+            scopes: ['size', 'gap'],
+          },
+        },
+      },
+    },
+  },
 }

package/src/tokens/base/typography/typography.json5

@@ -3,7 +3,7 @@
     text: {
       size: {
         xs: {
-          $value: '0.75rem',
+          $value: {value: 0.75, unit: 'rem'},
           $type: 'dimension',
           $description: '12px - Smallest text size for captions and compact UI elements.',
           $extensions: {
@@ -14,7 +14,7 @@
           },
         },
         sm: {
-          $value: '0.875rem',
+          $value: {value: 0.875, unit: 'rem'},
           $type: 'dimension',
           $description: '14px - Default body text size for UI.',
           $extensions: {
@@ -25,7 +25,7 @@
           },
         },
         md: {
-          $value: '1rem',
+          $value: {value: 1, unit: 'rem'},
           $type: 'dimension',
           $description: '16px - Large body text and small titles.',
           $extensions: {
@@ -36,7 +36,7 @@
           },
         },
         lg: {
-          $value: '1.25rem',
+          $value: {value: 1.25, unit: 'rem'},
           $type: 'dimension',
           $description: '20px - Medium titles and subtitles.',
           $extensions: {
@@ -47,7 +47,7 @@
           },
         },
         xl: {
-          $value: '2rem',
+          $value: {value: 2, unit: 'rem'},
           $type: 'dimension',
           $description: '32px - Large titles and page headings.',
           $extensions: {
@@ -58,7 +58,7 @@
           },
         },
         '2xl': {
-          $value: '2.5rem',
+          $value: {value: 2.5, unit: 'rem'},
           $type: 'dimension',
           $description: '40px - Display text for hero sections.',
           $extensions: {