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

package/dist/css/functional/themes/light-high-contrast.css

@@ -42,25 +42,25 @@
   --header-borderColor-divider: #acb6c0;
   --headerSearch-bgColor: #0e1116;
   --headerSearch-borderColor: #4b535d;
-  --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: #004db3;
@@ -206,7 +206,7 @@
   --controlTrack-bgColor-disabled: #66707b;
   --controlTrack-fgColor-rest: #010409;
   --controlTrack-fgColor-disabled: #ffffff;
-  --controlTrack-borderColor-rest: #ffffff00;
+  --controlTrack-borderColor-rest: #66707b;
   --controlTrack-borderColor-disabled: #66707b;
   --controlKnob-bgColor-rest: #ffffff;
   --controlKnob-bgColor-disabled: #ced5dcb3;
@@ -429,9 +429,12 @@
   --label-coral-fgColor-rest: #ba2e12;
   --label-coral-fgColor-hover: #9b2712;
   --label-coral-fgColor-active: #7e2011;
+  --tooltip-bgColor: #0e1116;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #010409;
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #66707b;
@@ -606,25 +609,25 @@
     --header-borderColor-divider: #acb6c0;
     --headerSearch-bgColor: #0e1116;
     --headerSearch-borderColor: #4b535d;
-    --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: #004db3;
@@ -770,7 +773,7 @@
     --controlTrack-bgColor-disabled: #66707b;
     --controlTrack-fgColor-rest: #010409;
     --controlTrack-fgColor-disabled: #ffffff;
-    --controlTrack-borderColor-rest: #ffffff00;
+    --controlTrack-borderColor-rest: #66707b;
     --controlTrack-borderColor-disabled: #66707b;
     --controlKnob-bgColor-rest: #ffffff;
     --controlKnob-bgColor-disabled: #ced5dcb3;
@@ -993,9 +996,12 @@
     --label-coral-fgColor-rest: #ba2e12;
     --label-coral-fgColor-hover: #9b2712;
     --label-coral-fgColor-active: #7e2011;
+    --tooltip-bgColor: #0e1116;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #010409;
     --fgColor-muted: #0e1116;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #ffffff;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #66707b;

package/dist/css/functional/themes/light-tritanopia.css

@@ -42,25 +42,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;
@@ -429,9 +429,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;
@@ -606,25 +609,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;
@@ -993,9 +996,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/css/functional/themes/light.css

@@ -42,25 +42,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;
@@ -429,9 +429,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;
@@ -606,25 +609,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;
@@ -993,9 +996,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/css/primitives.css

@@ -109,12 +109,6 @@
   --controlStack-large-gap-auto: 0.5rem;
   --controlStack-large-gap-condensed: 0.5rem;
   --controlStack-large-gap-spacious: 0.75rem;
-  --space-xxsmall: 0.125rem;
-  --space-xsmall: 0.25rem;
-  --space-small: 0.375rem;
-  --space-medium: 0.5rem;
-  --space-large: 0.75rem;
-  --space-xlarge: 1rem;
   --spinner-strokeWidth-default: 0.125rem;
   --spinner-size-small: 1rem;
   --spinner-size-medium: 2rem;

package/dist/docs/functional/size/size.json

@@ -1024,168 +1024,6 @@
     "attributes": {},
     "path": ["controlStack", "large", "gap", "spacious"]
   },
-  "space-xxsmall": {
-    "value": "0.125rem",
-    "$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.25rem",
-    "$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",
-    "$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.5rem",
-    "$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.75rem",
-    "$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": "1rem",
-    "$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",
     "$type": "dimension",