@primer/primitives 8.2.4-rc.fba4a4ab → 9.0.0-rc.02c27a21

package/dist/internalCss/light.css

@@ -327,25 +327,25 @@
   --header-borderColor-divider: #57606a;
   --headerSearch-bgColor: #24292f;
   --headerSearch-borderColor: #57606a;
-  --data-blue-color: #006edb;
+  --data-blue-color-emphasis: #006edb;
   --data-blue-color-muted: #d1f0ff;
-  --data-auburn-color: #9d615c;
+  --data-auburn-color-emphasis: #9d615c;
   --data-auburn-color-muted: #f2e9e9;
-  --data-orange-color: #eb670f;
+  --data-orange-color-emphasis: #eb670f;
   --data-orange-color-muted: #ffe7d1;
-  --data-yellow-color: #b88700;
+  --data-yellow-color-emphasis: #b88700;
   --data-yellow-color-muted: #ffec9e;
-  --data-green-color: #30a147;
+  --data-green-color-emphasis: #30a147;
   --data-green-color-muted: #caf7ca;
-  --data-teal-color: #179b9b;
+  --data-teal-color-emphasis: #179b9b;
   --data-teal-color-muted: #c7f5ef;
-  --data-purple-color: #894ceb;
+  --data-purple-color-emphasis: #894ceb;
   --data-purple-color-muted: #f1e5ff;
-  --data-pink-color: #ce2c85;
+  --data-pink-color-emphasis: #ce2c85;
   --data-pink-color-muted: #ffe5f1;
-  --data-red-color: #df0c24;
+  --data-red-color-emphasis: #df0c24;
   --data-red-color-muted: #ffe2e0;
-  --data-gray-color: #808fa3;
+  --data-gray-color-emphasis: #808fa3;
   --data-gray-color-muted: #e8ecf2;
   --display-blue-bgColor-muted: #d1f0ff;
   --display-blue-bgColor-emphasis: #006edb;
@@ -714,9 +714,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #24292f;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
@@ -1176,25 +1179,25 @@
     --header-borderColor-divider: #57606a;
     --headerSearch-bgColor: #24292f;
     --headerSearch-borderColor: #57606a;
-    --data-blue-color: #006edb;
+    --data-blue-color-emphasis: #006edb;
     --data-blue-color-muted: #d1f0ff;
-    --data-auburn-color: #9d615c;
+    --data-auburn-color-emphasis: #9d615c;
     --data-auburn-color-muted: #f2e9e9;
-    --data-orange-color: #eb670f;
+    --data-orange-color-emphasis: #eb670f;
     --data-orange-color-muted: #ffe7d1;
-    --data-yellow-color: #b88700;
+    --data-yellow-color-emphasis: #b88700;
     --data-yellow-color-muted: #ffec9e;
-    --data-green-color: #30a147;
+    --data-green-color-emphasis: #30a147;
     --data-green-color-muted: #caf7ca;
-    --data-teal-color: #179b9b;
+    --data-teal-color-emphasis: #179b9b;
     --data-teal-color-muted: #c7f5ef;
-    --data-purple-color: #894ceb;
+    --data-purple-color-emphasis: #894ceb;
     --data-purple-color-muted: #f1e5ff;
-    --data-pink-color: #ce2c85;
+    --data-pink-color-emphasis: #ce2c85;
     --data-pink-color-muted: #ffe5f1;
-    --data-red-color: #df0c24;
+    --data-red-color-emphasis: #df0c24;
     --data-red-color-muted: #ffe2e0;
-    --data-gray-color: #808fa3;
+    --data-gray-color-emphasis: #808fa3;
     --data-gray-color-muted: #e8ecf2;
     --display-blue-bgColor-muted: #d1f0ff;
     --display-blue-bgColor-emphasis: #006edb;
@@ -1563,9 +1566,12 @@
     --label-coral-fgColor-rest: #ba2e12;
     --label-coral-fgColor-hover: #9b2712;
     --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #24292f;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
     --fgColor-white: #ffffff;
     --fgColor-black: #1f2328;
     --fgColor-disabled: #8c959f;

package/dist/styleLint/functional/size/size.json

@@ -1024,168 +1024,6 @@
     "attributes": {},
     "path": ["controlStack", "large", "gap", "spacious"]
   },
-  "space-xxsmall": {
-    "value": ["0.125rem", "2px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-2 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "2px",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-2 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-xxsmall",
-    "attributes": {},
-    "path": ["space", "xxsmall"]
-  },
-  "space-xsmall": {
-    "value": ["0.015625rem", "0.25px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-4 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "{base.size.4}",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-4 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-xsmall",
-    "attributes": {},
-    "path": ["space", "xsmall"]
-  },
-  "space-small": {
-    "value": ["0.375rem", "6px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-6 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "6px",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-6 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-small",
-    "attributes": {},
-    "path": ["space", "small"]
-  },
-  "space-medium": {
-    "value": ["0.03125rem", "0.5px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-8 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "{base.size.8}",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-8 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-medium",
-    "attributes": {},
-    "path": ["space", "medium"]
-  },
-  "space-large": {
-    "value": ["0.046875rem", "0.75px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-12 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "{base.size.12}",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-12 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-large",
-    "attributes": {},
-    "path": ["space", "large"]
-  },
-  "space-xlarge": {
-    "value": ["0.0625rem", "1px"],
-    "$type": "dimension",
-    "deprecated": "Use --base-size-16 instead",
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "functional/size",
-        "scopes": ["gap"]
-      }
-    },
-    "filePath": "src/tokens/functional/size/size.json",
-    "isSource": true,
-    "original": {
-      "value": "{base.size.16}",
-      "$type": "dimension",
-      "deprecated": "Use --base-size-16 instead",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "functional/size",
-          "scopes": ["gap"]
-        }
-      }
-    },
-    "name": "space-xlarge",
-    "attributes": {},
-    "path": ["space", "xlarge"]
-  },
   "spinner-strokeWidth-default": {
     "value": ["0.125rem", "2px"],
     "$type": "dimension",

package/dist/styleLint/functional/themes/dark-colorblind.json

@@ -1181,7 +1181,7 @@
     "attributes": {},
     "path": ["headerSearch", "borderColor"]
   },
-  "data-blue-color": {
+  "data-blue-color-emphasis": {
     "value": "#0576ff",
     "$type": "color",
     "$extensions": {
@@ -1206,9 +1206,9 @@
         }
       }
     },
-    "name": "data-blue-color",
+    "name": "data-blue-color-emphasis",
     "attributes": {},
-    "path": ["data", "blue", "color", "@"]
+    "path": ["data", "blue", "color", "emphasis"]
   },
   "data-blue-color-muted": {
     "value": "#001a47",
@@ -1239,7 +1239,7 @@
     "attributes": {},
     "path": ["data", "blue", "color", "muted"]
   },
-  "data-auburn-color": {
+  "data-auburn-color-emphasis": {
     "value": "#a86f6b",
     "$type": "color",
     "$extensions": {
@@ -1264,9 +1264,9 @@
         }
       }
     },
-    "name": "data-auburn-color",
+    "name": "data-auburn-color-emphasis",
     "attributes": {},
-    "path": ["data", "auburn", "color", "@"]
+    "path": ["data", "auburn", "color", "emphasis"]
   },
   "data-auburn-color-muted": {
     "value": "#271817",
@@ -1297,7 +1297,7 @@
     "attributes": {},
     "path": ["data", "auburn", "color", "muted"]
   },
-  "data-orange-color": {
+  "data-orange-color-emphasis": {
     "value": "#984b10",
     "$type": "color",
     "$extensions": {
@@ -1322,9 +1322,9 @@
         }
       }
     },
-    "name": "data-orange-color",
+    "name": "data-orange-color-emphasis",
     "attributes": {},
-    "path": ["data", "orange", "color", "@"]
+    "path": ["data", "orange", "color", "emphasis"]
   },
   "data-orange-color-muted": {
     "value": "#311708",
@@ -1355,7 +1355,7 @@
     "attributes": {},
     "path": ["data", "orange", "color", "muted"]
   },
-  "data-yellow-color": {
+  "data-yellow-color-emphasis": {
     "value": "#895906",
     "$type": "color",
     "$extensions": {
@@ -1380,9 +1380,9 @@
         }
       }
     },
-    "name": "data-yellow-color",
+    "name": "data-yellow-color-emphasis",
     "attributes": {},
-    "path": ["data", "yellow", "color", "@"]
+    "path": ["data", "yellow", "color", "emphasis"]
   },
   "data-yellow-color-muted": {
     "value": "#2e1a00",
@@ -1413,7 +1413,7 @@
     "attributes": {},
     "path": ["data", "yellow", "color", "muted"]
   },
-  "data-green-color": {
+  "data-green-color-emphasis": {
     "value": "#2f6f37",
     "$type": "color",
     "$extensions": {
@@ -1438,9 +1438,9 @@
         }
       }
     },
-    "name": "data-green-color",
+    "name": "data-green-color-emphasis",
     "attributes": {},
-    "path": ["data", "green", "color", "@"]
+    "path": ["data", "green", "color", "emphasis"]
   },
   "data-green-color-muted": {
     "value": "#122117",
@@ -1471,7 +1471,7 @@
     "attributes": {},
     "path": ["data", "green", "color", "muted"]
   },
-  "data-teal-color": {
+  "data-teal-color-emphasis": {
     "value": "#106c70",
     "$type": "color",
     "$extensions": {
@@ -1496,9 +1496,9 @@
         }
       }
     },
-    "name": "data-teal-color",
+    "name": "data-teal-color-emphasis",
     "attributes": {},
-    "path": ["data", "teal", "color", "@"]
+    "path": ["data", "teal", "color", "emphasis"]
   },
   "data-teal-color-muted": {
     "value": "#041f25",
@@ -1529,7 +1529,7 @@
     "attributes": {},
     "path": ["data", "teal", "color", "muted"]
   },
-  "data-purple-color": {
+  "data-purple-color-emphasis": {
     "value": "#975bf1",
     "$type": "color",
     "$extensions": {
@@ -1554,9 +1554,9 @@
         }
       }
     },
-    "name": "data-purple-color",
+    "name": "data-purple-color-emphasis",
     "attributes": {},
-    "path": ["data", "purple", "color", "@"]
+    "path": ["data", "purple", "color", "emphasis"]
   },
   "data-purple-color-muted": {
     "value": "#211047",
@@ -1587,7 +1587,7 @@
     "attributes": {},
     "path": ["data", "purple", "color", "muted"]
   },
-  "data-pink-color": {
+  "data-pink-color-emphasis": {
     "value": "#d34591",
     "$type": "color",
     "$extensions": {
@@ -1612,9 +1612,9 @@
         }
       }
     },
-    "name": "data-pink-color",
+    "name": "data-pink-color-emphasis",
     "attributes": {},
-    "path": ["data", "pink", "color", "@"]
+    "path": ["data", "pink", "color", "emphasis"]
   },
   "data-pink-color-muted": {
     "value": "#2d1524",
@@ -1645,7 +1645,7 @@
     "attributes": {},
     "path": ["data", "pink", "color", "muted"]
   },
-  "data-red-color": {
+  "data-red-color-emphasis": {
     "value": "#eb3342",
     "$type": "color",
     "$extensions": {
@@ -1670,9 +1670,9 @@
         }
       }
     },
-    "name": "data-red-color",
+    "name": "data-red-color-emphasis",
     "attributes": {},
-    "path": ["data", "red", "color", "@"]
+    "path": ["data", "red", "color", "emphasis"]
   },
   "data-red-color-muted": {
     "value": "#3c0614",
@@ -1703,7 +1703,7 @@
     "attributes": {},
     "path": ["data", "red", "color", "muted"]
   },
-  "data-gray-color": {
+  "data-gray-color-emphasis": {
     "value": "#576270",
     "$type": "color",
     "$extensions": {
@@ -1728,9 +1728,9 @@
         }
       }
     },
-    "name": "data-gray-color",
+    "name": "data-gray-color-emphasis",
     "attributes": {},
-    "path": ["data", "gray", "color", "@"]
+    "path": ["data", "gray", "color", "emphasis"]
   },
   "data-gray-color-muted": {
     "value": "#1c1c1c",
@@ -12560,6 +12560,64 @@
     "attributes": {},
     "path": ["label", "coral", "fgColor", "active"]
   },
+  "tooltip-bgColor": {
+    "value": "#6e7681",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{bgColor.emphasis}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "tooltip-bgColor",
+    "attributes": {},
+    "path": ["tooltip", "bgColor"]
+  },
+  "tooltip-fgColor": {
+    "value": "#ffffff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.onEmphasis}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "tooltip-fgColor",
+    "attributes": {},
+    "path": ["tooltip", "fgColor"]
+  },
   "fgColor-default": {
     "value": "#e6edf3",
     "$type": "color",
@@ -12681,6 +12739,35 @@
     "attributes": {},
     "path": ["fgColor", "onEmphasis"]
   },
+  "fgColor-onInverse": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.black}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "semantic",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "fgColor-onInverse",
+    "attributes": {},
+    "path": ["fgColor", "onInverse"]
+  },
   "fgColor-white": {
     "value": "#ffffff",
     "$type": "color",