@primer/primitives 8.2.4-rc.d955f312 → 8.2.4-rc.ea4beb50

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,20 +428,23 @@
   --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;
   --fgColor-link: #4493f8;
-  --fgColor-neutral: #6e7681;
+  --fgColor-neutral: #b1bac4;
   --fgColor-accent: #4493f8;
   --fgColor-success: #58a6ff;
+  --fgColor-open: #f0883e;
   --fgColor-attention: #d29922;
   --fgColor-severe: #db6d28;
   --fgColor-danger: #db6d28;
-  --fgColor-open: #f0883e;
   --fgColor-closed: #8b949e;
   --fgColor-done: #ab7df8;
   --fgColor-upsell: #ab7df8;
@@ -461,14 +464,14 @@
   --bgColor-accent-emphasis: #1f6feb;
   --bgColor-success-muted: #388bfd26;
   --bgColor-success-emphasis: #1f6feb;
+  --bgColor-open-muted: #db6d2866;
+  --bgColor-open-emphasis: #bd561d;
   --bgColor-attention-muted: #bb800926;
   --bgColor-attention-emphasis: #9e6a03;
   --bgColor-severe-muted: #db6d281a;
   --bgColor-severe-emphasis: #bd561d;
   --bgColor-danger-muted: #db6d281a;
   --bgColor-danger-emphasis: #bd561d;
-  --bgColor-open-muted: #db6d2866;
-  --bgColor-open-emphasis: #bd561d;
   --bgColor-closed-muted: #6e768166;
   --bgColor-closed-emphasis: #6e7681;
   --bgColor-done-muted: #ab7df826;
@@ -489,14 +492,14 @@
   --borderColor-accent-emphasis: #1f6feb;
   --borderColor-success-muted: #388bfd66;
   --borderColor-success-emphasis: #1f6feb;
+  --borderColor-open-muted: #db6d2866;
+  --borderColor-open-emphasis: #db6d28;
   --borderColor-attention-muted: #bb800966;
   --borderColor-attention-emphasis: #9e6a03;
   --borderColor-severe-muted: #db6d2866;
   --borderColor-severe-emphasis: #bd561d;
   --borderColor-danger-muted: #db6d2866;
   --borderColor-danger-emphasis: #bd561d;
-  --borderColor-open-muted: #db6d2866;
-  --borderColor-open-emphasis: #db6d28;
   --borderColor-closed-muted: #6e768166;
   --borderColor-closed-emphasis: #6e7681;
   --borderColor-done-muted: #ab7df866;
@@ -992,20 +995,23 @@
     --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;
     --fgColor-link: #4493f8;
-    --fgColor-neutral: #6e7681;
+    --fgColor-neutral: #b1bac4;
     --fgColor-accent: #4493f8;
     --fgColor-success: #58a6ff;
+    --fgColor-open: #f0883e;
     --fgColor-attention: #d29922;
     --fgColor-severe: #db6d28;
     --fgColor-danger: #db6d28;
-    --fgColor-open: #f0883e;
     --fgColor-closed: #8b949e;
     --fgColor-done: #ab7df8;
     --fgColor-upsell: #ab7df8;
@@ -1025,14 +1031,14 @@
     --bgColor-accent-emphasis: #1f6feb;
     --bgColor-success-muted: #388bfd26;
     --bgColor-success-emphasis: #1f6feb;
+    --bgColor-open-muted: #db6d2866;
+    --bgColor-open-emphasis: #bd561d;
     --bgColor-attention-muted: #bb800926;
     --bgColor-attention-emphasis: #9e6a03;
     --bgColor-severe-muted: #db6d281a;
     --bgColor-severe-emphasis: #bd561d;
     --bgColor-danger-muted: #db6d281a;
     --bgColor-danger-emphasis: #bd561d;
-    --bgColor-open-muted: #db6d2866;
-    --bgColor-open-emphasis: #bd561d;
     --bgColor-closed-muted: #6e768166;
     --bgColor-closed-emphasis: #6e7681;
     --bgColor-done-muted: #ab7df826;
@@ -1053,14 +1059,14 @@
     --borderColor-accent-emphasis: #1f6feb;
     --borderColor-success-muted: #388bfd66;
     --borderColor-success-emphasis: #1f6feb;
+    --borderColor-open-muted: #db6d2866;
+    --borderColor-open-emphasis: #db6d28;
     --borderColor-attention-muted: #bb800966;
     --borderColor-attention-emphasis: #9e6a03;
     --borderColor-severe-muted: #db6d2866;
     --borderColor-severe-emphasis: #bd561d;
     --borderColor-danger-muted: #db6d2866;
     --borderColor-danger-emphasis: #bd561d;
-    --borderColor-open-muted: #db6d2866;
-    --borderColor-open-emphasis: #db6d28;
     --borderColor-closed-muted: #6e768166;
     --borderColor-closed-emphasis: #6e7681;
     --borderColor-done-muted: #ab7df866;

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

@@ -428,20 +428,23 @@
   --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;
   --fgColor-link: #478be6;
-  --fgColor-neutral: #636e7b;
+  --fgColor-neutral: #909dab;
   --fgColor-accent: #478be6;
   --fgColor-success: #57ab5a;
+  --fgColor-open: #57ab5a;
   --fgColor-attention: #c69026;
   --fgColor-severe: #cc6b2c;
   --fgColor-danger: #e5534b;
-  --fgColor-open: #57ab5a;
   --fgColor-closed: #e5534b;
   --fgColor-done: #986ee2;
   --fgColor-upsell: #986ee2;
@@ -461,15 +464,15 @@
   --bgColor-accent-emphasis: #316dca;
   --bgColor-success-muted: #46954a26;
   --bgColor-success-emphasis: #347d39;
+  --bgColor-open-muted: #46954a26;
+  --bgColor-open-emphasis: #347d39;
   --bgColor-attention-muted: #ae7c1426;
   --bgColor-attention-emphasis: #966600;
   --bgColor-severe-muted: #cc6b2c1a;
   --bgColor-severe-emphasis: #ae5622;
   --bgColor-danger-muted: #e5534b1a;
   --bgColor-danger-emphasis: #c93c37;
-  --bgColor-open-muted: #46954a1a;
-  --bgColor-open-emphasis: #347d39;
-  --bgColor-closed-muted: #e5534b26;
+  --bgColor-closed-muted: #e5534b1a;
   --bgColor-closed-emphasis: #c93c37;
   --bgColor-done-muted: #986ee226;
   --bgColor-done-emphasis: #8256d0;
@@ -489,14 +492,14 @@
   --borderColor-accent-emphasis: #316dca;
   --borderColor-success-muted: #46954a66;
   --borderColor-success-emphasis: #347d39;
+  --borderColor-open-muted: #46954a66;
+  --borderColor-open-emphasis: #347d39;
   --borderColor-attention-muted: #ae7c1466;
   --borderColor-attention-emphasis: #966600;
   --borderColor-severe-muted: #cc6b2c66;
   --borderColor-severe-emphasis: #ae5622;
   --borderColor-danger-muted: #e5534b66;
   --borderColor-danger-emphasis: #c93c37;
-  --borderColor-open-muted: #46954a66;
-  --borderColor-open-emphasis: #347d39;
   --borderColor-closed-muted: #e5534b66;
   --borderColor-closed-emphasis: #c93c37;
   --borderColor-done-muted: #986ee266;
@@ -992,20 +995,23 @@
     --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;
     --fgColor-link: #478be6;
-    --fgColor-neutral: #636e7b;
+    --fgColor-neutral: #909dab;
     --fgColor-accent: #478be6;
     --fgColor-success: #57ab5a;
+    --fgColor-open: #57ab5a;
     --fgColor-attention: #c69026;
     --fgColor-severe: #cc6b2c;
     --fgColor-danger: #e5534b;
-    --fgColor-open: #57ab5a;
     --fgColor-closed: #e5534b;
     --fgColor-done: #986ee2;
     --fgColor-upsell: #986ee2;
@@ -1025,15 +1031,15 @@
     --bgColor-accent-emphasis: #316dca;
     --bgColor-success-muted: #46954a26;
     --bgColor-success-emphasis: #347d39;
+    --bgColor-open-muted: #46954a26;
+    --bgColor-open-emphasis: #347d39;
     --bgColor-attention-muted: #ae7c1426;
     --bgColor-attention-emphasis: #966600;
     --bgColor-severe-muted: #cc6b2c1a;
     --bgColor-severe-emphasis: #ae5622;
     --bgColor-danger-muted: #e5534b1a;
     --bgColor-danger-emphasis: #c93c37;
-    --bgColor-open-muted: #46954a1a;
-    --bgColor-open-emphasis: #347d39;
-    --bgColor-closed-muted: #e5534b26;
+    --bgColor-closed-muted: #e5534b1a;
     --bgColor-closed-emphasis: #c93c37;
     --bgColor-done-muted: #986ee226;
     --bgColor-done-emphasis: #8256d0;
@@ -1053,14 +1059,14 @@
     --borderColor-accent-emphasis: #316dca;
     --borderColor-success-muted: #46954a66;
     --borderColor-success-emphasis: #347d39;
+    --borderColor-open-muted: #46954a66;
+    --borderColor-open-emphasis: #347d39;
     --borderColor-attention-muted: #ae7c1466;
     --borderColor-attention-emphasis: #966600;
     --borderColor-severe-muted: #cc6b2c66;
     --borderColor-severe-emphasis: #ae5622;
     --borderColor-danger-muted: #e5534b66;
     --borderColor-danger-emphasis: #c93c37;
-    --borderColor-open-muted: #46954a66;
-    --borderColor-open-emphasis: #347d39;
     --borderColor-closed-muted: #e5534b66;
     --borderColor-closed-emphasis: #c93c37;
     --borderColor-done-muted: #986ee266;