@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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: {

package/src/tokens/component/avatar.json5

@@ -1,88 +1,116 @@
 {
   avatar: {
     bgColor: {
-      $value: '{base.color.neutral.0}',
-      $type: 'color',
-      $extensions: {
+      '$value': '{base.color.neutral.0}',
+      '$type': 'color',
+      '$extensions': {
         'org.primer.figma': {
           collection: 'mode',
           group: 'component (internal)',
-          scopes: ['bgColor'],
+          scopes: [
+            'bgColor'
+          ]
         },
         'org.primer.overrides': {
           dark: {
-            $value: '{base.color.neutral.13}',
-            alpha: 0.1,
-          },
-        },
-      },
+            '$value': '{base.color.neutral.13}',
+            alpha: 0.1
+          }
+        }
+      }
     },
     borderColor: {
-      $value: '{borderColor.translucent}',
-      $type: 'color',
-      $extensions: {
+      '$value': '{borderColor.translucent}',
+      '$type': 'color',
+      '$extensions': {
         'org.primer.figma': {
           collection: 'mode',
           group: 'component (internal)',
-          scopes: ['borderColor'],
+          scopes: [
+            'borderColor'
+          ]
         },
         'org.primer.overrides': {
           'dark-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'dark-dimmed-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'light-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'light-tritanopia-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'light-protanopia-deuteranopia-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'dark-tritanopia-high-contrast': {
-            $value: '{borderColor.emphasis}',
+            '$value': '{borderColor.emphasis}'
           },
           'dark-protanopia-deuteranopia-high-contrast': {
-            $value: '{borderColor.emphasis}',
-          },
-        },
-      },
+            '$value': '{borderColor.emphasis}'
+          }
+        }
+      }
     },
     shadow: {
-      $value: [
+      '$value': [
         {
           color: '{base.color.neutral.0}',
           alpha: 0.8,
-          offsetX: '0px',
-          offsetY: '0px',
-          blur: '0px',
-          spread: '2px',
-        },
+          offsetX: {
+            value: 0,
+            unit: 'px'
+          },
+          offsetY: {
+            value: 0,
+            unit: 'px'
+          },
+          blur: {
+            value: 0,
+            unit: 'px'
+          },
+          spread: {
+            value: 2,
+            unit: 'px'
+          }
+        }
       ],
-      $type: 'shadow',
-      $extensions: {
+      '$type': 'shadow',
+      '$extensions': {
         'org.primer.figma': {
           collection: 'mode',
-          group: 'component shadow',
+          group: 'component shadow'
         },
         'org.primer.overrides': {
           dark: {
-            $value: [
+            '$value': [
               {
                 color: '{base.color.neutral.1}',
                 alpha: 1,
-                offsetX: '0px',
-                offsetY: '0px',
-                blur: '0px',
-                spread: '2px',
-              },
-            ],
-          },
-        },
-      },
-    },
-  },
+                offsetX: {
+                  value: 0,
+                  unit: 'px'
+                },
+                offsetY: {
+                  value: 0,
+                  unit: 'px'
+                },
+                blur: {
+                  value: 0,
+                  unit: 'px'
+                },
+                spread: {
+                  value: 2,
+                  unit: 'px'
+                }
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
 }