@primer/primitives 7.15.13 → 7.15.14-rc.ed4ead94

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

@@ -133,7 +133,7 @@
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
   --avatar-bgColor: #ffffff;
-  --avatar-borderColor: #d0d7de;
+  --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
   --avatarStack-fade-bgColor-default: #afb8c1;
   --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -289,6 +289,7 @@
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
+  --fgColor-black: #1f2328;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
   --fgColor-neutral: #6e7781;
@@ -306,6 +307,8 @@
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-inverse: #24292f;
+  --bgColor-white: #ffffff;
+  --bgColor-black: #1f2328;
   --bgColor-disabled: #eaeef2b3;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #afb8c133;
@@ -495,7 +498,7 @@
   --color-scale-coral-9: #510901;
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
   --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
   --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
   --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
@@ -637,7 +640,7 @@
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
     --avatar-bgColor: #ffffff;
-    --avatar-borderColor: #d0d7de;
+    --avatar-borderColor: #1f232826;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
     --avatarStack-fade-bgColor-default: #afb8c1;
     --avatarStack-fade-bgColor-muted: #d0d7de;
@@ -793,6 +796,7 @@
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-white: #ffffff;
+    --fgColor-black: #1f2328;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
     --fgColor-neutral: #6e7781;
@@ -810,6 +814,8 @@
     --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-inverse: #24292f;
+    --bgColor-white: #ffffff;
+    --bgColor-black: #1f2328;
     --bgColor-disabled: #eaeef2b3;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #afb8c133;
@@ -999,7 +1005,7 @@
     --color-scale-coral-9: #510901;
     --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
     --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
     --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
     --shadow-floating-small: 0px 0px 0px 1px #d0d7de80, 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
     --shadow-floating-medium: 0px 0px 0px 1px #d0d7de, 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;

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

@@ -3823,7 +3823,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#30363db3",
+    "value": "#ffffff26",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3833,10 +3833,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{base.color.white}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3845,7 +3846,8 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.15
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -5919,7 +5921,7 @@
     "path": ["button", "primary", "fgColor", "rest"]
   },
   "button-primary-fgColor-disabled": {
-    "value": "#ffffffcc",
+    "value": "#ffffff66",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5929,7 +5931,7 @@
         "scopes": ["fgColor"]
       }
     },
-    "alpha": 0.8,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
@@ -5943,7 +5945,7 @@
           "scopes": ["fgColor"]
         }
       },
-      "alpha": 0.8
+      "alpha": 0.4
     },
     "name": "button-primary-fgColor-disabled",
     "attributes": {},
@@ -8499,7 +8501,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "#ffffff",
+      "value": "{base.color.white}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8514,6 +8516,35 @@
     "attributes": {},
     "path": ["fgColor", "white"]
   },
+  "fgColor-black": {
+    "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-black",
+    "attributes": {},
+    "path": ["fgColor", "black"]
+  },
   "fgColor-disabled": {
     "value": "#6e7681",
     "$type": "color",
@@ -9099,6 +9130,64 @@
     "attributes": {},
     "path": ["bgColor", "inverse"]
   },
+  "bgColor-white": {
+    "value": "#ffffff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.white}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "semantic",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-white",
+    "attributes": {},
+    "path": ["bgColor", "white"]
+  },
+  "bgColor-black": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "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": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-black",
+    "attributes": {},
+    "path": ["bgColor", "black"]
+  },
   "bgColor-disabled": {
     "value": "#21262db3",
     "$type": "color",
@@ -13475,7 +13564,7 @@
     "path": ["shadow", "resting", "xsmall"]
   },
   "shadow-resting-small": {
-    "value": "0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966",
+    "value": "0px 1px 0px 0px #01040966",
     "$type": "shadow",
     "$extensions": {
       "org.primer.figma": {
@@ -13496,15 +13585,6 @@
           "blur": "0px",
           "spread": "0px",
           "inset": false
-        },
-        {
-          "color": "{base.color.black}",
-          "alpha": 0.4,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "3px",
-          "spread": "0px",
-          "inset": false
         }
       ],
       "$type": "shadow",

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

@@ -3823,7 +3823,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#444c56b3",
+    "value": "#cdd9e526",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3833,10 +3833,11 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{borderColor.muted}",
+      "value": "{base.color.white}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -3845,7 +3846,8 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      }
+      },
+      "alpha": 0.15
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -5900,10 +5902,10 @@
         "scopes": ["fgColor"]
       }
     },
-    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.white}",
+      "value": "#ffffff",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -5919,7 +5921,7 @@
     "path": ["button", "primary", "fgColor", "rest"]
   },
   "button-primary-fgColor-disabled": {
-    "value": "#cdd9e5cc",
+    "value": "#cdd9e566",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5929,7 +5931,7 @@
         "scopes": ["fgColor"]
       }
     },
-    "alpha": 0.8,
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
@@ -5943,7 +5945,7 @@
           "scopes": ["fgColor"]
         }
       },
-      "alpha": 0.8
+      "alpha": 0.4
     },
     "name": "button-primary-fgColor-disabled",
     "attributes": {},
@@ -5960,10 +5962,10 @@
         "scopes": ["fgColor"]
       }
     },
-    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "filePath": "src/tokens/functional/color/dark/overrides/dark.dimmed.json5",
     "isSource": true,
     "original": {
-      "value": "{fgColor.white}",
+      "value": "#ffffff",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8492,7 +8494,7 @@
     "path": ["fgColor", "onEmphasis"]
   },
   "fgColor-white": {
-    "value": "#ffffff",
+    "value": "#cdd9e5",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -8505,7 +8507,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "#ffffff",
+      "value": "{base.color.white}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8520,6 +8522,35 @@
     "attributes": {},
     "path": ["fgColor", "white"]
   },
+  "fgColor-black": {
+    "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-black",
+    "attributes": {},
+    "path": ["fgColor", "black"]
+  },
   "fgColor-disabled": {
     "value": "#636e7b",
     "$type": "color",
@@ -9105,6 +9136,64 @@
     "attributes": {},
     "path": ["bgColor", "inverse"]
   },
+  "bgColor-white": {
+    "value": "#cdd9e5",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.white}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "semantic",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-white",
+    "attributes": {},
+    "path": ["bgColor", "white"]
+  },
+  "bgColor-black": {
+    "value": "#1c2128",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "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": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-black",
+    "attributes": {},
+    "path": ["bgColor", "black"]
+  },
   "bgColor-disabled": {
     "value": "#373e47b3",
     "$type": "color",
@@ -13479,7 +13568,7 @@
     "path": ["shadow", "resting", "xsmall"]
   },
   "shadow-resting-small": {
-    "value": "0px 1px 0px 0px #1c212866, 0px 1px 3px 0px #1c212866",
+    "value": "0px 1px 0px 0px #1c212866",
     "$type": "shadow",
     "$extensions": {
       "org.primer.figma": {
@@ -13500,15 +13589,6 @@
           "blur": "0px",
           "spread": "0px",
           "inset": false
-        },
-        {
-          "color": "{base.color.black}",
-          "alpha": 0.4,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "3px",
-          "spread": "0px",
-          "inset": false
         }
       ],
       "$type": "shadow",

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -3837,9 +3837,9 @@
         "scopes": ["borderColor"]
       }
     },
+    "alpha": 0.9,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
-    "alpha": 0.9,
     "original": {
       "value": "{base.color.white}",
       "$type": "color",
@@ -6090,7 +6090,7 @@
     "path": ["button", "primary", "bgColor", "active"]
   },
   "button-primary-bgColor-disabled": {
-    "value": "#6bdc84",
+    "value": "#048f2f",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6101,10 +6101,10 @@
       }
     },
     "mix": {
-      "color": "#acf7b6",
+      "color": "#007728",
       "weight": 0.6
     },
-    "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
       "value": "{base.color.green.5}",
@@ -6118,7 +6118,7 @@
         }
       },
       "mix": {
-        "color": "{base.color.green.0}",
+        "color": "{base.color.green.8}",
         "weight": 0.6
       }
     },
@@ -8523,7 +8523,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "#ffffff",
+      "value": "{base.color.white}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -8538,6 +8538,35 @@
     "attributes": {},
     "path": ["fgColor", "white"]
   },
+  "fgColor-black": {
+    "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-black",
+    "attributes": {},
+    "path": ["fgColor", "black"]
+  },
   "fgColor-disabled": {
     "value": "#9ea7b3",
     "$type": "color",
@@ -9123,6 +9152,64 @@
     "attributes": {},
     "path": ["bgColor", "inverse"]
   },
+  "bgColor-white": {
+    "value": "#ffffff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.white}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "semantic",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-white",
+    "attributes": {},
+    "path": ["bgColor", "white"]
+  },
+  "bgColor-black": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "semantic",
+        "scopes": ["bgColor"]
+      }
+    },
+    "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": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-black",
+    "attributes": {},
+    "path": ["bgColor", "black"]
+  },
   "bgColor-disabled": {
     "value": "#3d424db3",
     "$type": "color",
@@ -13497,7 +13584,7 @@
     "path": ["shadow", "resting", "xsmall"]
   },
   "shadow-resting-small": {
-    "value": "0px 1px 0px 0px #01040966, 0px 1px 3px 0px #01040966",
+    "value": "0px 1px 0px 0px #01040966",
     "$type": "shadow",
     "$extensions": {
       "org.primer.figma": {
@@ -13518,15 +13605,6 @@
           "blur": "0px",
           "spread": "0px",
           "inset": false
-        },
-        {
-          "color": "{base.color.black}",
-          "alpha": 0.4,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "3px",
-          "spread": "0px",
-          "inset": false
         }
       ],
       "$type": "shadow",