@primer/primitives 7.12.0-rc.f16a928 → 7.12.0

package/README.md

@@ -194,6 +194,27 @@ Code example
   }
 ```
 
+#### Token names and @-hack
+
+Token names have to be in camelCase or kebab-case and may only include letters, numbers and `-`. This is enforced by the token validation (`npm run lint:tokens`).
+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
+{
+  bgColor: {
+    accent: {
+      "@": {
+        // default values
+      },
+      "muted": {
+        // values for accent-muted
+      }
+    }
+  }
+}
+```
+
 ## License
 
 [MIT](./LICENSE) © [GitHub](https://github.com/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.12.0-rc.f16a928",
+  "version": "7.12.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/tokens-next-private/css/functional/size/size.css

@@ -40,6 +40,12 @@
   --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;
   --stack-padding-condensed: 0.5rem;
   --stack-padding-normal: 1rem;
   --stack-padding-spacious: 1.5rem;

package/tokens-next-private/css/functional/themes/dark-colorblind.css

@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

package/tokens-next-private/css/functional/themes/dark-dimmed.css

@@ -200,6 +200,7 @@
   --fgColor-sponsors: #c96198;
   --bgColor-default: #22272e;
   --bgColor-muted: #2d333b;
+  --bgColor-inset: #1c2128;
   --bgColor-emphasis: #636e7b;
   --bgColor-disabled: #2d333b;
   --bgColor-transparent: #00000000;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #c96198;
     --bgColor-default: #22272e;
     --bgColor-muted: #2d333b;
+    --bgColor-inset: #1c2128;
     --bgColor-emphasis: #636e7b;
     --bgColor-disabled: #2d333b;
     --bgColor-transparent: #00000000;

package/tokens-next-private/css/functional/themes/dark-high-contrast.css

@@ -200,6 +200,7 @@
   --fgColor-sponsors: #ef6eb1;
   --bgColor-default: #0a0c10;
   --bgColor-muted: #272b33;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #ffffff;
   --bgColor-disabled: #272b33;
   --bgColor-transparent: #00000000;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #ef6eb1;
     --bgColor-default: #0a0c10;
     --bgColor-muted: #272b33;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #ffffff;
     --bgColor-disabled: #272b33;
     --bgColor-transparent: #00000000;

package/tokens-next-private/css/functional/themes/dark-tritanopia.css

@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

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

@@ -200,6 +200,7 @@
   --fgColor-sponsors: #db61a2;
   --bgColor-default: #0d1117;
   --bgColor-muted: #161b22;
+  --bgColor-inset: #010409;
   --bgColor-emphasis: #6e7681;
   --bgColor-disabled: #161b22;
   --bgColor-transparent: #00000000;
@@ -601,6 +602,7 @@
     --fgColor-sponsors: #db61a2;
     --bgColor-default: #0d1117;
     --bgColor-muted: #161b22;
+    --bgColor-inset: #010409;
     --bgColor-emphasis: #6e7681;
     --bgColor-disabled: #161b22;
     --bgColor-transparent: #00000000;

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

@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;

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

@@ -201,6 +201,7 @@
   --fgColor-sponsors: #971368;
   --bgColor-default: #ffffff;
   --bgColor-muted: #e7ecf0;
+  --bgColor-inset: #ffffff;
   --bgColor-emphasis: #0e1116;
   --bgColor-disabled: #e7ecf0;
   --bgColor-transparent: #ffffff00;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #971368;
     --bgColor-default: #ffffff;
     --bgColor-muted: #e7ecf0;
+    --bgColor-inset: #ffffff;
     --bgColor-emphasis: #0e1116;
     --bgColor-disabled: #e7ecf0;
     --bgColor-transparent: #ffffff00;

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

@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;

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

@@ -201,6 +201,7 @@
   --fgColor-sponsors: #bf3989;
   --bgColor-default: #ffffff;
   --bgColor-muted: #f6f8fa;
+  --bgColor-inset: #f6f8fa;
   --bgColor-emphasis: #24292f;
   --bgColor-disabled: #f6f8fa;
   --bgColor-transparent: #ffffff00;
@@ -602,6 +603,7 @@
     --fgColor-sponsors: #bf3989;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
+    --bgColor-inset: #f6f8fa;
     --bgColor-emphasis: #24292f;
     --bgColor-disabled: #f6f8fa;
     --bgColor-transparent: #ffffff00;

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

@@ -1024,7 +1024,82 @@
     "attributes": {},
     "path": ["controlStack", "large", "gap", "spacious"]
   },
-  "stack-padding-condensed": {
+  "space-xxsmall": {
+    "value": "0.125rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "2px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "space-xxsmall",
+    "attributes": {},
+    "path": ["space", "xxsmall"]
+  },
+  "space-xsmall": {
+    "value": "0.25rem",
+    "$type": "dimension",
+    "$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",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "space-xsmall",
+    "attributes": {},
+    "path": ["space", "xsmall"]
+  },
+  "space-small": {
+    "value": "0.375rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["gap"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "6px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "space-small",
+    "attributes": {},
+    "path": ["space", "small"]
+  },
+  "space-medium": {
     "value": "0.5rem",
     "$type": "dimension",
     "$extensions": {
@@ -1045,6 +1120,81 @@
         }
       }
     },
+    "name": "space-medium",
+    "attributes": {},
+    "path": ["space", "medium"]
+  },
+  "space-large": {
+    "value": "0.75rem",
+    "$type": "dimension",
+    "$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",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "space-large",
+    "attributes": {},
+    "path": ["space", "large"]
+  },
+  "space-xlarge": {
+    "value": "1rem",
+    "$type": "dimension",
+    "$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",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["gap"]
+        }
+      }
+    },
+    "name": "space-xlarge",
+    "attributes": {},
+    "path": ["space", "xlarge"]
+  },
+  "stack-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": "stack-padding-condensed",
     "attributes": {},
     "path": ["stack", "padding", "condensed"]
@@ -1054,7 +1204,7 @@
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
-        "collection": "functional/size",
+        "collection": "pattern/size",
         "scopes": ["gap"]
       }
     },
@@ -1065,7 +1215,7 @@
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
-          "collection": "functional/size",
+          "collection": "pattern/size",
           "scopes": ["gap"]
         }
       }
@@ -1079,7 +1229,7 @@
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
-        "collection": "functional/size",
+        "collection": "pattern/size",
         "scopes": ["gap"]
       }
     },
@@ -1090,7 +1240,7 @@
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
-          "collection": "functional/size",
+          "collection": "pattern/size",
           "scopes": ["gap"]
         }
       }
@@ -1104,7 +1254,7 @@
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
-        "collection": "functional/size",
+        "collection": "pattern/size",
         "scopes": ["gap"]
       }
     },
@@ -1115,7 +1265,7 @@
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
-          "collection": "functional/size",
+          "collection": "pattern/size",
           "scopes": ["gap"]
         }
       }
@@ -1129,7 +1279,7 @@
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
-        "collection": "functional/size",
+        "collection": "pattern/size",
         "scopes": ["gap"]
       }
     },
@@ -1140,7 +1290,7 @@
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
-          "collection": "functional/size",
+          "collection": "pattern/size",
           "scopes": ["gap"]
         }
       }
@@ -1154,7 +1304,7 @@
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
-        "collection": "functional/size",
+        "collection": "pattern/size",
         "scopes": ["gap"]
       }
     },
@@ -1165,7 +1315,7 @@
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
-          "collection": "functional/size",
+          "collection": "pattern/size",
           "scopes": ["gap"]
         }
       }

package/tokens-next-private/docs/functional/themes/dark-colorblind.json

@@ -5249,7 +5249,7 @@
     },
     "name": "fgColor-link",
     "attributes": {},
-    "path": ["fgColor", "link"]
+    "path": ["fgColor", "link", "@"]
   },
   "fgColor-accent": {
     "value": "#2f81f7",
@@ -5556,6 +5556,33 @@
     "attributes": {},
     "path": ["bgColor", "muted"]
   },
+  "bgColor-inset": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "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",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-inset",
+    "attributes": {},
+    "path": ["bgColor", "inset"]
+  },
   "bgColor-emphasis": {
     "value": "#6e7681",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-dimmed.json

@@ -5255,7 +5255,7 @@
     },
     "name": "fgColor-link",
     "attributes": {},
-    "path": ["fgColor", "link"]
+    "path": ["fgColor", "link", "@"]
   },
   "fgColor-accent": {
     "value": "#3b7cdb",
@@ -5562,6 +5562,33 @@
     "attributes": {},
     "path": ["bgColor", "muted"]
   },
+  "bgColor-inset": {
+    "value": "#1c2128",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "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",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-inset",
+    "attributes": {},
+    "path": ["bgColor", "inset"]
+  },
   "bgColor-emphasis": {
     "value": "#636e7b",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-high-contrast.json

@@ -5263,7 +5263,7 @@
     },
     "name": "fgColor-link",
     "attributes": {},
-    "path": ["fgColor", "link"]
+    "path": ["fgColor", "link", "@"]
   },
   "fgColor-accent": {
     "value": "#409eff",
@@ -5570,6 +5570,33 @@
     "attributes": {},
     "path": ["bgColor", "muted"]
   },
+  "bgColor-inset": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "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",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-inset",
+    "attributes": {},
+    "path": ["bgColor", "inset"]
+  },
   "bgColor-emphasis": {
     "value": "#ffffff",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark-tritanopia.json

@@ -5255,7 +5255,7 @@
     },
     "name": "fgColor-link",
     "attributes": {},
-    "path": ["fgColor", "link"]
+    "path": ["fgColor", "link", "@"]
   },
   "fgColor-accent": {
     "value": "#2f81f7",
@@ -5562,6 +5562,33 @@
     "attributes": {},
     "path": ["bgColor", "muted"]
   },
+  "bgColor-inset": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "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",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-inset",
+    "attributes": {},
+    "path": ["bgColor", "inset"]
+  },
   "bgColor-emphasis": {
     "value": "#6e7681",
     "$type": "color",

package/tokens-next-private/docs/functional/themes/dark.json

@@ -5255,7 +5255,7 @@
     },
     "name": "fgColor-link",
     "attributes": {},
-    "path": ["fgColor", "link"]
+    "path": ["fgColor", "link", "@"]
   },
   "fgColor-accent": {
     "value": "#2f81f7",
@@ -5562,6 +5562,33 @@
     "attributes": {},
     "path": ["bgColor", "muted"]
   },
+  "bgColor-inset": {
+    "value": "#010409",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "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",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "bgColor-inset",
+    "attributes": {},
+    "path": ["bgColor", "inset"]
+  },
   "bgColor-emphasis": {
     "value": "#6e7681",
     "$type": "color",