@primer/primitives 8.2.4-rc.e3ccaf09 → 8.2.4-rc.eed8be14

package/README.md

@@ -27,7 +27,7 @@ Data is served from the `dist/` folder:
 
 All available imports:
 
-```
+```css
 /* size/typography */
 @import '@primer/primitives/dist/css/base/size/size.css';
 @import '@primer/primitives/dist/css/base/typography/typography.css';
@@ -70,13 +70,13 @@ In the individual files, e.g. `light.high-contrast.json5` you can now add tokens
 You can create color tokens that inherit a color but have a different alpha value by adding the `alpha` property.
 **Note:** The original alpha value will be replaced by your value. If you add `alpha: 0.4` to a color, it doesn't matter if the color you reference has no `alpha` or `alpha: 0.7`, the new token will always have newly the defined value of `alpha: 0.4`.
 
-```js
+```json5
 {
   muted: {
     $value: '{base.color.blue.3}',
     alpha: 0.4, // the opacity value of the color === 40% opaque
     $type: 'color',
-  }
+  },
 }
 ```
 
@@ -88,17 +88,17 @@ The `mix` proeprty mixes the color it gets into the main color from the `$value`
 
 A `mix` proprty must always have a `color` and a `weight` child. `color` can be a `hex` value or a reference to a valid color. The `weight` property must receive a value between `0.0` and `1`.
 
-```js
+```json5
 {
   control: {
-  $value: '{base.color.gray.4}', // main color
-  $type: 'color',
-  mix: {
-    color: '{base.color.gray.5}', // color to mix into the main color
-    weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
+    $value: '{base.color.gray.4}', // main color
+    $type: 'color',
+    mix: {
+      color: '{base.color.gray.5}', // color to mix into the main color
+      weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
+    },
   },
 }
-}
 ```
 
 #### Extensions property
@@ -113,7 +113,7 @@ For our Figma export we use the following meta data:
 
 Code example
 
-```js
+```json5
   bgColor: {
     $value: '{borderColor.accent.muted}',
     $type: 'color',
@@ -133,18 +133,18 @@ Token names have to be in camelCase or kebab-case and may only include letters,
 The only acception is the `@`-hack. This is used when you want to have a default value and sub-values, e.g. `bgColor.accent` and `bgColor.accent.muted`.
 In this case you can create the follwing structure. The `@` will be removed from the name and act as the default value.
 
-```js
+```json5
 {
   bgColor: {
     accent: {
-      "@": {
+      '@': {
         // values for accent (default)
       },
-      "muted": {
+      muted: {
         // values for accent-muted
-      }
-    }
-  }
+      },
+    },
+  },
 }
 ```
 
@@ -155,4 +155,3 @@ In this case you can create the follwing structure. The `@` will be removed from
 [primer]: https://github.com/primer/primer
 [npm]: https://www.npmjs.com/
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
-[scss]: https://sass-lang.com/

package/dist/css/functional/size/border.css

@@ -9,6 +9,7 @@
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;
   --borderRadius-full: 624.9375rem;
+  --borderRadius-default: 0.375rem;
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
 }

package/dist/css/functional/themes/dark-colorblind.css

@@ -428,9 +428,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #8d96a0;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #6e7681;

package/dist/css/functional/themes/dark-dimmed.css

@@ -428,9 +428,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #636e7b;
+  --tooltip-fgColor: #cdd9e5;
   --fgColor-default: #c5d1de;
   --fgColor-muted: #778491;
   --fgColor-onEmphasis: #cdd9e5;
+  --fgColor-onInverse: #1c2128;
   --fgColor-white: #cdd9e5;
   --fgColor-black: #1c2128;
   --fgColor-disabled: #636e7b;
@@ -992,9 +995,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #636e7b;
+    --tooltip-fgColor: #cdd9e5;
     --fgColor-default: #c5d1de;
     --fgColor-muted: #778491;
     --fgColor-onEmphasis: #cdd9e5;
+    --fgColor-onInverse: #1c2128;
     --fgColor-white: #cdd9e5;
     --fgColor-black: #1c2128;
     --fgColor-disabled: #636e7b;

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

@@ -206,7 +206,7 @@
   --controlTrack-bgColor-disabled: #9ea7b3;
   --controlTrack-fgColor-rest: #fbfcfd;
   --controlTrack-fgColor-disabled: #0a0c10;
-  --controlTrack-borderColor-rest: #00000000;
+  --controlTrack-borderColor-rest: #9ea7b3;
   --controlTrack-borderColor-disabled: #9ea7b3;
   --controlKnob-bgColor-rest: #010409;
   --controlKnob-bgColor-disabled: #3d424db3;
@@ -428,9 +428,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #ffffff;
+  --tooltip-fgColor: #010409;
   --fgColor-default: #fbfcfd;
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;
+  --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #9ea7b3;
@@ -770,7 +773,7 @@
     --controlTrack-bgColor-disabled: #9ea7b3;
     --controlTrack-fgColor-rest: #fbfcfd;
     --controlTrack-fgColor-disabled: #0a0c10;
-    --controlTrack-borderColor-rest: #00000000;
+    --controlTrack-borderColor-rest: #9ea7b3;
     --controlTrack-borderColor-disabled: #9ea7b3;
     --controlKnob-bgColor-rest: #010409;
     --controlKnob-bgColor-disabled: #3d424db3;
@@ -992,9 +995,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #ffffff;
+    --tooltip-fgColor: #010409;
     --fgColor-default: #fbfcfd;
     --fgColor-muted: #f0f3f6;
     --fgColor-onEmphasis: #0a0c10;
+    --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #9ea7b3;

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

@@ -428,9 +428,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #8d96a0;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #6e7681;

package/dist/css/functional/themes/dark.css

@@ -428,9 +428,12 @@
   --label-coral-fgColor-rest: #f7794b;
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
+  --tooltip-bgColor: #6e7681;
+  --tooltip-fgColor: #ffffff;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #010409;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
   --fgColor-disabled: #6e7681;
@@ -992,9 +995,12 @@
     --label-coral-fgColor-rest: #f7794b;
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
+    --tooltip-bgColor: #6e7681;
+    --tooltip-fgColor: #ffffff;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #8d96a0;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #010409;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;
     --fgColor-disabled: #6e7681;

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

@@ -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;
@@ -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-high-contrast.css

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -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;
@@ -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

@@ -41,6 +41,7 @@
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;
   --borderRadius-full: 624.9375rem;
+  --borderRadius-default: 0.375rem;
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
 }

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

@@ -205,6 +205,37 @@
     "attributes": {},
     "path": ["borderRadius", "full"]
   },
+  "borderRadius-default": {
+    "value": "0.375rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/size/border.json",
+    "isSource": true,
+    "original": {
+      "value": "{borderRadius.medium}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+          }
+        }
+      }
+    },
+    "name": "borderRadius-default",
+    "attributes": {},
+    "path": ["borderRadius", "default"]
+  },
   "outline-focus-offset": {
     "value": "-0.125rem",
     "$type": "dimension",

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

@@ -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",

package/dist/docs/functional/themes/dark-dimmed.json

@@ -12566,6 +12566,64 @@
     "attributes": {},
     "path": ["label", "coral", "fgColor", "active"]
   },
+  "tooltip-bgColor": {
+    "value": "#636e7b",
+    "$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": "#cdd9e5",
+    "$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": "#c5d1de",
     "$type": "color",
@@ -12687,6 +12745,35 @@
     "attributes": {},
     "path": ["fgColor", "onEmphasis"]
   },
+  "fgColor-onInverse": {
+    "value": "#1c2128",
+    "$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": "#cdd9e5",
     "$type": "color",