@primer/primitives 9.1.2 → 10.0.0-rc.29e661a3

package/dist/css/primitives.css

@@ -136,25 +136,45 @@
   --overlay-offset: 0.25rem;
 }
 :root {
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeInline-weight: var(--base-text-weight-normal);
   --text-codeInline-size: 0.9285em;
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-codeBlock-weight: var(--base-text-weight-normal);
   --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-caption-weight: var(--base-text-weight-normal);
   --text-caption-lineHeight: 1.3333;
   --text-caption-size: 0.75rem;
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-body-weight: var(--base-text-weight-normal);
   --text-body-lineHeight-small: 1.6666;
   --text-body-lineHeight-medium: 1.4285;
   --text-body-lineHeight-large: 1.5;
   --text-body-size-small: 0.75rem;
   --text-body-size-medium: 0.875rem;
   --text-body-size-large: 1rem;
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-subtitle-weight: var(--base-text-weight-normal);
   --text-subtitle-lineHeight: 1.6;
   --text-subtitle-size: 1.25rem;
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-title-weight-small: var(--base-text-weight-semibold);
+  --text-title-weight-medium: var(--base-text-weight-semibold);
+  --text-title-weight-large: var(--base-text-weight-semibold);
   --text-title-lineHeight-small: 1.5;
   --text-title-lineHeight-medium: 1.6;
   --text-title-lineHeight-large: 1.5;
   --text-title-size-small: 1rem;
   --text-title-size-medium: 1.25rem;
   --text-title-size-large: 2rem;
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
+  --text-display-weight: var(--base-text-weight-medium);
   --text-display-lineHeight: 1.4;
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
@@ -162,24 +182,4 @@
   --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-codeInline-weight: var(--base-text-weight-normal);
-  --text-codeBlock-weight: var(--base-text-weight-normal);
-  --text-caption-weight: var(--base-text-weight-normal);
-  --text-body-weight: var(--base-text-weight-normal);
-  --text-subtitle-weight: var(--base-text-weight-normal);
-  --text-title-weight-small: var(--base-text-weight-semibold);
-  --text-title-weight-medium: var(--base-text-weight-semibold);
-  --text-title-weight-large: var(--base-text-weight-semibold);
-  --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
 }

package/dist/docs/base/size/size.json

@@ -1,7 +1,5 @@
 {
   "base-size-2": {
-    "value": "0.125rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -11,7 +9,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "2px",
+      "$value": "2px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -22,11 +20,11 @@
     },
     "name": "base-size-2",
     "attributes": {},
-    "path": ["base", "size", "2"]
+    "path": ["base", "size", "2"],
+    "value": "0.125rem",
+    "type": "dimension"
   },
   "base-size-4": {
-    "value": "0.25rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -36,7 +34,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "4px",
+      "$value": "4px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -47,11 +45,11 @@
     },
     "name": "base-size-4",
     "attributes": {},
-    "path": ["base", "size", "4"]
+    "path": ["base", "size", "4"],
+    "value": "0.25rem",
+    "type": "dimension"
   },
   "base-size-6": {
-    "value": "0.375rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -61,7 +59,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "6px",
+      "$value": "6px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -72,11 +70,11 @@
     },
     "name": "base-size-6",
     "attributes": {},
-    "path": ["base", "size", "6"]
+    "path": ["base", "size", "6"],
+    "value": "0.375rem",
+    "type": "dimension"
   },
   "base-size-8": {
-    "value": "0.5rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -86,7 +84,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "8px",
+      "$value": "8px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -97,11 +95,11 @@
     },
     "name": "base-size-8",
     "attributes": {},
-    "path": ["base", "size", "8"]
+    "path": ["base", "size", "8"],
+    "value": "0.5rem",
+    "type": "dimension"
   },
   "base-size-12": {
-    "value": "0.75rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -111,7 +109,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "12px",
+      "$value": "12px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -122,11 +120,11 @@
     },
     "name": "base-size-12",
     "attributes": {},
-    "path": ["base", "size", "12"]
+    "path": ["base", "size", "12"],
+    "value": "0.75rem",
+    "type": "dimension"
   },
   "base-size-16": {
-    "value": "1rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -136,7 +134,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "16px",
+      "$value": "16px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -147,11 +145,11 @@
     },
     "name": "base-size-16",
     "attributes": {},
-    "path": ["base", "size", "16"]
+    "path": ["base", "size", "16"],
+    "value": "1rem",
+    "type": "dimension"
   },
   "base-size-20": {
-    "value": "1.25rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -161,7 +159,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "20px",
+      "$value": "20px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -172,11 +170,11 @@
     },
     "name": "base-size-20",
     "attributes": {},
-    "path": ["base", "size", "20"]
+    "path": ["base", "size", "20"],
+    "value": "1.25rem",
+    "type": "dimension"
   },
   "base-size-24": {
-    "value": "1.5rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -186,7 +184,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "24px",
+      "$value": "24px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -197,11 +195,11 @@
     },
     "name": "base-size-24",
     "attributes": {},
-    "path": ["base", "size", "24"]
+    "path": ["base", "size", "24"],
+    "value": "1.5rem",
+    "type": "dimension"
   },
   "base-size-28": {
-    "value": "1.75rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -211,7 +209,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "28px",
+      "$value": "28px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -222,11 +220,11 @@
     },
     "name": "base-size-28",
     "attributes": {},
-    "path": ["base", "size", "28"]
+    "path": ["base", "size", "28"],
+    "value": "1.75rem",
+    "type": "dimension"
   },
   "base-size-32": {
-    "value": "2rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -236,7 +234,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "32px",
+      "$value": "32px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -247,11 +245,11 @@
     },
     "name": "base-size-32",
     "attributes": {},
-    "path": ["base", "size", "32"]
+    "path": ["base", "size", "32"],
+    "value": "2rem",
+    "type": "dimension"
   },
   "base-size-36": {
-    "value": "2.25rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -261,7 +259,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "36px",
+      "$value": "36px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -272,11 +270,11 @@
     },
     "name": "base-size-36",
     "attributes": {},
-    "path": ["base", "size", "36"]
+    "path": ["base", "size", "36"],
+    "value": "2.25rem",
+    "type": "dimension"
   },
   "base-size-40": {
-    "value": "2.5rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -286,7 +284,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "40px",
+      "$value": "40px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -297,11 +295,11 @@
     },
     "name": "base-size-40",
     "attributes": {},
-    "path": ["base", "size", "40"]
+    "path": ["base", "size", "40"],
+    "value": "2.5rem",
+    "type": "dimension"
   },
   "base-size-44": {
-    "value": "2.75rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -311,7 +309,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "44px",
+      "$value": "44px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -322,11 +320,11 @@
     },
     "name": "base-size-44",
     "attributes": {},
-    "path": ["base", "size", "44"]
+    "path": ["base", "size", "44"],
+    "value": "2.75rem",
+    "type": "dimension"
   },
   "base-size-48": {
-    "value": "3rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -336,7 +334,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "48px",
+      "$value": "48px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -347,11 +345,11 @@
     },
     "name": "base-size-48",
     "attributes": {},
-    "path": ["base", "size", "48"]
+    "path": ["base", "size", "48"],
+    "value": "3rem",
+    "type": "dimension"
   },
   "base-size-64": {
-    "value": "4rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -361,7 +359,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "64px",
+      "$value": "64px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -372,11 +370,11 @@
     },
     "name": "base-size-64",
     "attributes": {},
-    "path": ["base", "size", "64"]
+    "path": ["base", "size", "64"],
+    "value": "4rem",
+    "type": "dimension"
   },
   "base-size-80": {
-    "value": "5rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -386,7 +384,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "80px",
+      "$value": "80px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -397,11 +395,11 @@
     },
     "name": "base-size-80",
     "attributes": {},
-    "path": ["base", "size", "80"]
+    "path": ["base", "size", "80"],
+    "value": "5rem",
+    "type": "dimension"
   },
   "base-size-96": {
-    "value": "6rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -411,7 +409,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "96px",
+      "$value": "96px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -422,11 +420,11 @@
     },
     "name": "base-size-96",
     "attributes": {},
-    "path": ["base", "size", "96"]
+    "path": ["base", "size", "96"],
+    "value": "6rem",
+    "type": "dimension"
   },
   "base-size-112": {
-    "value": "7rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -436,7 +434,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "112px",
+      "$value": "112px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -447,11 +445,11 @@
     },
     "name": "base-size-112",
     "attributes": {},
-    "path": ["base", "size", "112"]
+    "path": ["base", "size", "112"],
+    "value": "7rem",
+    "type": "dimension"
   },
   "base-size-128": {
-    "value": "8rem",
-    "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/size",
@@ -461,7 +459,7 @@
     "filePath": "src/tokens/base/size/size.json",
     "isSource": true,
     "original": {
-      "value": "128px",
+      "$value": "128px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -472,6 +470,8 @@
     },
     "name": "base-size-128",
     "attributes": {},
-    "path": ["base", "size", "128"]
+    "path": ["base", "size", "128"],
+    "value": "8rem",
+    "type": "dimension"
   }
 }

package/dist/docs/base/typography/typography.json

@@ -1,7 +1,5 @@
 {
   "base-text-weight-light": {
-    "$type": "fontWeight",
-    "value": 300,
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/typography",
@@ -12,7 +10,7 @@
     "isSource": true,
     "original": {
       "$type": "fontWeight",
-      "value": 300,
+      "$value": 300,
       "$extensions": {
         "org.primer.figma": {
           "collection": "base/typography",
@@ -22,11 +20,11 @@
     },
     "name": "base-text-weight-light",
     "attributes": {},
-    "path": ["base", "text", "weight", "light"]
+    "path": ["base", "text", "weight", "light"],
+    "value": 300,
+    "type": "fontWeight"
   },
   "base-text-weight-normal": {
-    "value": 400,
-    "$type": "fontWeight",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/typography",
@@ -36,7 +34,7 @@
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
-      "value": 400,
+      "$value": 400,
       "$type": "fontWeight",
       "$extensions": {
         "org.primer.figma": {
@@ -47,11 +45,11 @@
     },
     "name": "base-text-weight-normal",
     "attributes": {},
-    "path": ["base", "text", "weight", "normal"]
+    "path": ["base", "text", "weight", "normal"],
+    "value": 400,
+    "type": "fontWeight"
   },
   "base-text-weight-medium": {
-    "value": 500,
-    "$type": "fontWeight",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/typography",
@@ -61,7 +59,7 @@
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
-      "value": 500,
+      "$value": 500,
       "$type": "fontWeight",
       "$extensions": {
         "org.primer.figma": {
@@ -72,11 +70,11 @@
     },
     "name": "base-text-weight-medium",
     "attributes": {},
-    "path": ["base", "text", "weight", "medium"]
+    "path": ["base", "text", "weight", "medium"],
+    "value": 500,
+    "type": "fontWeight"
   },
   "base-text-weight-semibold": {
-    "value": 600,
-    "$type": "fontWeight",
     "$extensions": {
       "org.primer.figma": {
         "collection": "base/typography",
@@ -86,7 +84,7 @@
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
-      "value": 600,
+      "$value": 600,
       "$type": "fontWeight",
       "$extensions": {
         "org.primer.figma": {
@@ -97,6 +95,8 @@
     },
     "name": "base-text-weight-semibold",
     "attributes": {},
-    "path": ["base", "text", "weight", "semibold"]
+    "path": ["base", "text", "weight", "semibold"],
+    "value": 600,
+    "type": "fontWeight"
   }
 }