@primer/primitives 7.12.0 → 7.13.0-rc.80d1e20

package/tokens-next-private/css/functional/themes/light.css

@@ -58,7 +58,7 @@
   --control-borderColor-emphasis: #868f99;
   --control-borderColor-disabled: #f6f8fa;
   --control-borderColor-selected: #f6f8fa;
-  --control-borderColor-success: #2da44e;
+  --control-borderColor-success: #1a7f37;
   --control-borderColor-danger: #cf222e;
   --control-borderColor-warning: #bf8700;
   --control-iconColor-rest: #636c76;
@@ -188,21 +188,35 @@
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
+  --fgColor-onInverse: #f6f8fa;
   --fgColor-disabled: #8c959f;
   --fgColor-link: #0969da;
+  --fgColor-link-onInverse: #54aeff;
+  --fgColor-neutral: #6e7781;
+  --fgColor-neutral-onInverse: #8c959f;
   --fgColor-accent: #0969da;
+  --fgColor-accent-onInverse: #54aeff;
   --fgColor-success: #1a7f37;
+  --fgColor-success-onInverse: #4ac26b;
   --fgColor-attention: #9a6700;
+  --fgColor-attention-onInverse: #d4a72c;
   --fgColor-severe: #bc4c00;
+  --fgColor-severe-onInverse: #fb8f44;
   --fgColor-danger: #d1242f;
+  --fgColor-danger-onInverse: #fa4549;
   --fgColor-open: #1a7f37;
+  --fgColor-open-onInverse: #4ac26b;
   --fgColor-closed: #d1242f;
+  --fgColor-closed-onInverse: #fa4549;
   --fgColor-done: #8250df;
+  --fgColor-done-onInverse: #a475f9;
   --fgColor-sponsors: #bf3989;
+  --fgColor-sponsors-onInverse: #e85aad;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
   --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
+  --bgColor-inverse: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
   --bgColor-neutral-muted: #eaeef280;
@@ -235,7 +249,7 @@
   --borderColor-accent-muted: #54aeff66;
   --borderColor-accent-emphasis: #0969da;
   --borderColor-success-muted: #4ac26b66;
-  --borderColor-success-emphasis: #2da44e;
+  --borderColor-success-emphasis: #1a7f37;
   --borderColor-attention-muted: #d4a72c66;
   --borderColor-attention-emphasis: #bf8700;
   --borderColor-severe-muted: #fb8f4466;
@@ -243,7 +257,7 @@
   --borderColor-danger-muted: #ff818266;
   --borderColor-danger-emphasis: #cf222e;
   --borderColor-open-muted: #4ac26b66;
-  --borderColor-open-emphasis: #2da44e;
+  --borderColor-open-emphasis: #1a7f37;
   --borderColor-closed-muted: #ff818266;
   --borderColor-closed-emphasis: #cf222e;
   --borderColor-done-muted: #c297ff66;
@@ -390,15 +404,15 @@
   --color-scale-coral-7: #801f0f;
   --color-scale-coral-8: #691105;
   --color-scale-coral-9: #510901;
-  --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-  --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-  --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-  --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-  --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-  --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-  --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-  --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-  --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+  --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+  --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+  --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
+  --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+  --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
+  --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+  --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+  --shadow-floating-large: 0px 40px 80px 0px #424a533d;
+  --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light"] {
@@ -460,7 +474,7 @@
     --control-borderColor-emphasis: #868f99;
     --control-borderColor-disabled: #f6f8fa;
     --control-borderColor-selected: #f6f8fa;
-    --control-borderColor-success: #2da44e;
+    --control-borderColor-success: #1a7f37;
     --control-borderColor-danger: #cf222e;
     --control-borderColor-warning: #bf8700;
     --control-iconColor-rest: #636c76;
@@ -590,21 +604,35 @@
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
+    --fgColor-onInverse: #f6f8fa;
     --fgColor-disabled: #8c959f;
     --fgColor-link: #0969da;
+    --fgColor-link-onInverse: #54aeff;
+    --fgColor-neutral: #6e7781;
+    --fgColor-neutral-onInverse: #8c959f;
     --fgColor-accent: #0969da;
+    --fgColor-accent-onInverse: #54aeff;
     --fgColor-success: #1a7f37;
+    --fgColor-success-onInverse: #4ac26b;
     --fgColor-attention: #9a6700;
+    --fgColor-attention-onInverse: #d4a72c;
     --fgColor-severe: #bc4c00;
+    --fgColor-severe-onInverse: #fb8f44;
     --fgColor-danger: #d1242f;
+    --fgColor-danger-onInverse: #fa4549;
     --fgColor-open: #1a7f37;
+    --fgColor-open-onInverse: #4ac26b;
     --fgColor-closed: #d1242f;
+    --fgColor-closed-onInverse: #fa4549;
     --fgColor-done: #8250df;
+    --fgColor-done-onInverse: #a475f9;
     --fgColor-sponsors: #bf3989;
+    --fgColor-sponsors-onInverse: #e85aad;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
     --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
+    --bgColor-inverse: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;
     --bgColor-neutral-muted: #eaeef280;
@@ -637,7 +665,7 @@
     --borderColor-accent-muted: #54aeff66;
     --borderColor-accent-emphasis: #0969da;
     --borderColor-success-muted: #4ac26b66;
-    --borderColor-success-emphasis: #2da44e;
+    --borderColor-success-emphasis: #1a7f37;
     --borderColor-attention-muted: #d4a72c66;
     --borderColor-attention-emphasis: #bf8700;
     --borderColor-severe-muted: #fb8f4466;
@@ -645,7 +673,7 @@
     --borderColor-danger-muted: #ff818266;
     --borderColor-danger-emphasis: #cf222e;
     --borderColor-open-muted: #4ac26b66;
-    --borderColor-open-emphasis: #2da44e;
+    --borderColor-open-emphasis: #1a7f37;
     --borderColor-closed-muted: #ff818266;
     --borderColor-closed-emphasis: #cf222e;
     --borderColor-done-muted: #c297ff66;
@@ -792,14 +820,14 @@
     --color-scale-coral-7: #801f0f;
     --color-scale-coral-8: #691105;
     --color-scale-coral-9: #510901;
-    --shadow-inset: inset 0px 1px 0px 0px #1f23280d;
-    --shadow-highlight: inset 0px 1px 0px 0px #ffffff40;
-    --shadow-resting-xsmall: 0px 1px 0px 0px #1f23280f;
-    --shadow-resting-small: 0px 1px 0px 0px #1f23280a;
-    --shadow-resting-medium: 0px 3px 6px 0px #8c959f26;
-    --shadow-floating-small: 0px 1px 3px 0px #1f23281f, 0px 8px 24px 0px #424a531f;
-    --shadow-floating-medium: 0px 4px 32px -4px #8c959f17, 0px 8px 16px -4px #8c959f17, 0px 24px 48px -12px #8c959f29, 0px 48px 96px -24px #8c959f3d;
-    --shadow-floating-large: 0px 8px 24px 0px #8c959f33;
-    --shadow-floating-xlarge: 0px 12px 28px 0px #8c959f4d;
+    --shadow-inset: inset 0px 1px 0px 0px #1f232814;
+    --shadow-highlight: inset 0px 1px 0px 0px #ffffff3d;
+    --shadow-resting-xsmall: 0px 1px 0px 0px #1f23281a;
+    --shadow-resting-small: 0px 1px 0px 0px #1f23280f, 0px 1px 3px 0px #1f232814;
+    --shadow-resting-medium: 0px 3px 6px 0px #424a531f;
+    --shadow-floating-small: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
+    --shadow-floating-medium: 0px 8px 16px -4px #424a5314, 0px 4px 32px -4px #424a5314, 0px 24px 48px -12px #424a5314, 0px 48px 96px -24px #424a5314;
+    --shadow-floating-large: 0px 40px 80px 0px #424a533d;
+    --shadow-floating-xlarge: 0px 56px 112px 0px #424a5352;
   }
 }

package/tokens-next-private/docs/functional/size/size.json

@@ -1323,5 +1323,355 @@
     "name": "stack-gap-spacious",
     "attributes": {},
     "path": ["stack", "gap", "spacious"]
+  },
+  "overlay-width-xsmall": {
+    "value": "12rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "192px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-width-xsmall",
+    "attributes": {},
+    "path": ["overlay", "width", "xsmall"]
+  },
+  "overlay-width-small": {
+    "value": "20rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "320px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-width-small",
+    "attributes": {},
+    "path": ["overlay", "width", "small"]
+  },
+  "overlay-width-medium": {
+    "value": "30rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "480px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-width-medium",
+    "attributes": {},
+    "path": ["overlay", "width", "medium"]
+  },
+  "overlay-width-large": {
+    "value": "40rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "640px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-width-large",
+    "attributes": {},
+    "path": ["overlay", "width", "large"]
+  },
+  "overlay-width-xlarge": {
+    "value": "60rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "960px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-width-xlarge",
+    "attributes": {},
+    "path": ["overlay", "width", "xlarge"]
+  },
+  "overlay-height-small": {
+    "value": "16rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "256px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-height-small",
+    "attributes": {},
+    "path": ["overlay", "height", "small"]
+  },
+  "overlay-height-medium": {
+    "value": "20rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "320px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-height-medium",
+    "attributes": {},
+    "path": ["overlay", "height", "medium"]
+  },
+  "overlay-height-large": {
+    "value": "27rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "432px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-height-large",
+    "attributes": {},
+    "path": ["overlay", "height", "large"]
+  },
+  "overlay-height-xlarge": {
+    "value": "37.5rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "600px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-height-xlarge",
+    "attributes": {},
+    "path": ["overlay", "height", "xlarge"]
+  },
+  "overlay-padding-normal": {
+    "value": "1rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.16}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "overlay-padding-normal",
+    "attributes": {},
+    "path": ["overlay", "padding", "normal"]
+  },
+  "overlay-padding-condensed": {
+    "value": "0.5rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.8}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "overlay-padding-condensed",
+    "attributes": {},
+    "path": ["overlay", "padding", "condensed"]
+  },
+  "overlay-paddingBlock-condensed": {
+    "value": "0.25rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.4}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "overlay-paddingBlock-condensed",
+    "attributes": {},
+    "path": ["overlay", "paddingBlock", "condensed"]
+  },
+  "overlay-paddingBlock-normal": {
+    "value": "0.75rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{base.size.12}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "overlay-paddingBlock-normal",
+    "attributes": {},
+    "path": ["overlay", "paddingBlock", "normal"]
+  },
+  "overlay-borderRadius": {
+    "value": "0.375rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["radius"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "{borderRadius.medium}",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["radius"]
+        }
+      }
+    },
+    "name": "overlay-borderRadius",
+    "attributes": {},
+    "path": ["overlay", "borderRadius"]
   }
 }