@primer/primitives 7.7.0-rc.053d36d → 7.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/primitives
 
+## 7.8.0
+
+### Minor Changes
+
+- [#317](https://github.com/primer/primitives/pull/317) [`45359ea`](https://github.com/primer/primitives/commit/45359eab4613edacfad331858128f187a01ce49c) Thanks [@langermank](https://github.com/langermank)! - - Initial design tokens release for interal Primer team use only
+  - Private docs that can be accessed at /typography and /size
+  - Separate dist for testing purposes only
+
 ## 7.7.0
 
 ### Minor Changes
@@ -292,7 +300,7 @@
   Each JSON file in the `deprecations` directory contains a mapping of deprecated variables to replacement variables. Example:
 
   ```js
-  // dist/decprecations/colors.json
+  // dist/deprecations/colors.json
   {
     "text.primary": "fg.default", // this means: `text.primary` is deprecated. Use `fg.default` instead
     "auto.blue.4": ["accent.fg, accent.emphasis"], // this means: `auto.blue.4` is deprecated. Use `accent.fg` or `accent.emphasis` instead

package/README.md

@@ -25,7 +25,7 @@ Primitive data is served in several formats from the `dist/` folder:
 
 ## Deprecating variables
 
-To deprecate a variable, define a mapping from the deprecated variable to its replacement(s) in a file called `deprecated.json` in the approriate subdirectory of `data`:
+To deprecate a variable, define a mapping from the deprecated variable to its replacement(s) in a file called `deprecated.json` in the appropriate subdirectory of `data`:
 
 ```diff
   data/
@@ -46,7 +46,7 @@ To deprecate a variable, define a mapping from the deprecated variable to its re
 }
 ```
 
-During the build process, the `deprecated.json` files will be added to a `dist/deprected` directory organized by variable category:
+During the build process, the `deprecated.json` files will be added to a `dist/deprecated` directory organized by variable category:
 
 ```diff
   dist/

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@primer/primitives",
-  "version": "7.7.0-rc.053d36d",
+  "version": "7.8.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
-    "dist"
+    "dist",
+    "tokens-v2-private"
   ],
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -23,11 +24,13 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "prebuild": "rm -rf dist",
     "build": "ts-node ./script/build.ts && tsc",
-    "prepack": "yarn build",
-    "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'",
-    "release": "yarn build && changeset publish"
+    "build:tokens": "node ./build.js",
+    "postinstall": "cd docs && yarn",
+    "prebuild": "rm -rf dist && rm -rf tokens-v2-private",
+    "prepack": "yarn build && yarn build:tokens",
+    "release": "changeset publish",
+    "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
@@ -37,8 +40,8 @@
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0",
     "@changesets/changelog-github": "^0.3.0",
-    "@changesets/cli": "^2.11.2",
-    "@github/prettier-config": "^0.0.4",
+    "@changesets/cli": "^2.22.0",
+    "@github/prettier-config": "0.0.4",
     "@octokit/rest": "^18.5.3",
     "@types/babel__traverse": "^7.14.2",
     "@types/chalk": "^2.2.0",
@@ -56,6 +59,7 @@
     "mkdirp": "^1.0.4",
     "node-sass": "^7.0.0",
     "sass-extract": "^2.1.0",
+    "style-dictionary": "^3.1.1",
     "ts-node": "^8.10.2",
     "typescript": "^3.7.2"
   }

package/tokens-v2-private/css/tokens/base/size/size.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --base-size-128: 8rem;
+  --base-size-112: 7rem;
+  --base-size-96: 6rem;
+  --base-size-80: 5rem;
+  --base-size-64: 4rem;
+  --base-size-48: 3rem;
+  --base-size-44: 2.75rem;
+  --base-size-40: 2.5rem;
+  --base-size-36: 2.25rem;
+  --base-size-32: 2rem;
+  --base-size-28: 1.75rem;
+  --base-size-24: 1.5rem;
+  --base-size-20: 1.25rem;
+  --base-size-16: 1rem;
+  --base-size-12: 0.75rem;
+  --base-size-8: 0.5rem;
+  --base-size-4: 0.25rem;
+}

package/tokens-v2-private/css/tokens/base/typography/typography.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --base-text-weight-semibold: 600;
+  --base-text-weight-medium: 500;
+  --base-text-weight-normal: 400;
+  --base-text-weight-light: 300;
+}

package/tokens-v2-private/css/tokens/functional/size/border.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --primer-borderRadius-full: 100vh;
+  --primer-borderRadius-large: 0.75rem;
+  --primer-borderRadius-medium: 0.375rem;
+  --primer-borderRadius-small: 0.1875rem;
+  --primer-borderWidth-thick: max(4px, 0.25rem);
+  --primer-borderWidth-normal: max(2px, 0.125rem);
+  --primer-borderWidth-thin: max(1px, 0.0625rem);
+  --primer-borderInset-thick: inset 0 0 0 var(--primer-borderWidth-thick);
+  --primer-borderInset-normal: inset 0 0 0 var(--primer-borderWidth-normal);
+  --primer-borderInset-thin: inset 0 0 0 var(--primer-borderWidth-thin);
+}

package/tokens-v2-private/css/tokens/functional/size/breakpoints.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --primer-breakpoint-xxlarge: 90rem;
+  --primer-breakpoint-xlarge: 80rem;
+  --primer-breakpoint-large: 63.25rem;
+  --primer-breakpoint-medium: 48rem;
+  --primer-breakpoint-small: 34rem;
+  --primer-breakpoint-xsmall: 20rem;
+}

package/tokens-v2-private/css/tokens/functional/size/size-fine.css

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+@media (pointer: fine) { :root {
+  --primer-control-minTarget-auto: 1rem;
+  --primer-controlStack-small-gap-auto: 0.5rem;
+  --primer-controlStack-medium-gap-auto: 0.5rem;
+}}

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

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --primer-stack-gap-spacious: var(--base-size-24);
+  --primer-stack-gap-normal: var(--base-size-16);
+  --primer-stack-gap-condensed: var(--base-size-8);
+  --primer-stack-padding-spacious: var(--base-size-24);
+  --primer-stack-padding-normal: var(--base-size-16);
+  --primer-stack-padding-condensed: var(--base-size-8);
+  --primer-controlStack-large-gap-spacious: var(--base-size-12);
+  --primer-controlStack-large-gap-condensed: var(--base-size-8);
+  --primer-controlStack-large-gap-auto: var(--base-size-8);
+  --primer-controlStack-medium-gap-spacious: var(--base-size-12);
+  --primer-controlStack-medium-gap-condensed: var(--base-size-8);
+  --primer-controlStack-small-gap-spacious: var(--base-size-16);
+  --primer-controlStack-small-gap-condensed: var(--base-size-8);
+  --primer-control-xlarge-gap: var(--base-size-8);
+  --primer-control-xlarge-paddingInline-spacious: var(--base-size-16);
+  --primer-control-xlarge-paddingInline-normal: var(--base-size-12);
+  --primer-control-xlarge-lineBoxHeight: var(--base-size-20);
+  --primer-control-xlarge-size: var(--base-size-48);
+  --primer-control-large-gap: var(--base-size-8);
+  --primer-control-large-paddingInline-spacious: var(--base-size-16);
+  --primer-control-large-paddingInline-normal: var(--base-size-12);
+  --primer-control-large-lineBoxHeight: var(--base-size-20);
+  --primer-control-large-size: var(--base-size-40);
+  --primer-control-medium-gap: var(--base-size-8);
+  --primer-control-medium-paddingInline-spacious: var(--base-size-16);
+  --primer-control-medium-paddingInline-normal: var(--base-size-12);
+  --primer-control-medium-paddingInline-condensed: var(--base-size-8);
+  --primer-control-medium-lineBoxHeight: var(--base-size-20);
+  --primer-control-medium-size: var(--base-size-32);
+  --primer-control-small-gap: var(--base-size-4);
+  --primer-control-small-paddingInline-normal: var(--base-size-12);
+  --primer-control-small-paddingInline-condensed: var(--base-size-8);
+  --primer-control-small-lineBoxHeight: var(--base-size-20);
+  --primer-control-small-size: var(--base-size-28);
+  --primer-control-xsmall-gap: var(--base-size-4);
+  --primer-control-xsmall-paddingInline-spacious: var(--base-size-12);
+  --primer-control-xsmall-paddingInline-normal: var(--base-size-8);
+  --primer-control-xsmall-paddingInline-condensed: var(--base-size-4);
+  --primer-control-xsmall-lineBoxHeight: var(--base-size-20);
+  --primer-control-xsmall-size: var(--base-size-24);
+  --primer-control-minTarget-coarse: var(--base-size-44);
+  --primer-control-minTarget-fine: var(--base-size-16);
+  --primer-control-xlarge-paddingBlock: calc((var(--primer-control-xlarge-size) - var(--primer-control-xlarge-lineBoxHeight)) / 2);
+  --primer-control-large-paddingBlock: calc((var(--primer-control-large-size) - var(--primer-control-large-lineBoxHeight)) / 2);
+  --primer-control-medium-paddingBlock: calc((var(--primer-control-medium-size) - var(--primer-control-medium-lineBoxHeight)) / 2);
+  --primer-control-small-paddingBlock: calc((var(--primer-control-small-size) - var(--primer-control-small-lineBoxHeight)) / 2);
+  --primer-control-xsmall-paddingBlock: calc((var(--primer-control-xsmall-size) - var(--primer-control-xsmall-lineBoxHeight)) / 2);
+}

package/tokens-v2-private/css/tokens/functional/size/viewport.css

@@ -0,0 +1,6 @@
+@custom-media --primer-viewportRange-narrow-viewport (max-width: calc(48rem - 0.02px));
+@custom-media --primer-viewportRange-narrowLandscape-viewport (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
+@custom-media --primer-viewportRange-regular-viewport (min-width: 48rem);
+@custom-media --primer-viewportRange-wide-viewport (min-width: 90rem);
+@custom-media --primer-viewportRange-portrait-viewport (orientation: portrait);
+@custom-media --primer-viewportRange-landscape-viewport (orientation: landscape);

package/tokens-v2-private/css/tokens/functional/typography/typography.css

@@ -0,0 +1,47 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 20 Apr 2022 17:00:28 GMT
+ */
+
+:root {
+  --primer-text-codeInline-size: 0.9285em;
+  --primer-text-codeBlock-lineHeight: 1.25rem;
+  --primer-text-codeBlock-size: 0.8125rem;
+  --primer-text-caption-lineHeight: 1rem;
+  --primer-text-caption-size: 0.75rem;
+  --primer-text-body-lineHeight-small: 1.25rem;
+  --primer-text-body-lineHeight-medium: 1.25rem;
+  --primer-text-body-lineHeight-large: 1.5rem;
+  --primer-text-body-size-small: 0.75rem;
+  --primer-text-body-size-medium: 0.875rem;
+  --primer-text-body-size-large: 1rem;
+  --primer-text-subtitle-lineHeight: 2rem;
+  --primer-text-subtitle-size: 1.25rem;
+  --primer-text-title-lineHeight-medium: 2rem;
+  --primer-text-title-lineHeight-large: 3rem;
+  --primer-text-title-size-medium: 1.25rem;
+  --primer-text-title-size-large: 2rem;
+  --primer-text-display-lineHeight: 3.5rem;
+  --primer-text-display-size: 2.5rem;
+  --primer-text-display-lineBoxHeight: 3.5rem;
+  --primer-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --primer-fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --primer-fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --primer-text-codeInline-weight: var(--base-text-weight-normal);
+  --primer-text-codeBlock-weight: var(--base-text-weight-normal);
+  --primer-text-caption-weight: var(--base-text-weight-normal);
+  --primer-text-body-weight: var(--base-text-weight-normal);
+  --primer-text-subtitle-weight: var(--base-text-weight-normal);
+  --primer-text-title-weight: var(--base-text-weight-semibold);
+  --primer-text-display-weight: var(--base-text-weight-medium);
+  --primer-text-codeInline-shorthand: var(--primer-text-codeInline-weight) var(--primer-text-codeInline-size)/inherit var(--primer-fontStack-monospace);
+  --primer-text-codeBlock-shorthand: var(--primer-text-codeBlock-weight) var(--primer-text-codeBlock-size)/var(--primer-text-codeBlock-lineHeight) var(--primer-fontStack-monospace);
+  --primer-text-caption-shorthand: var(--primer-text-caption-weight) var(--primer-text-caption-size)/var(--primer-text-caption-lineHeight) var(--primer-fontStack-sansSerif);
+  --primer-text-body-shorthand-small: var(--primer-text-body-weight) var(--primer-text-body-size-small)/var(--primer-text-body-lineHeight-small) var(--primer-fontStack-sansSerif);
+  --primer-text-body-shorthand-medium: var(--primer-text-body-weight) var(--primer-text-body-size-medium)/var(--primer-text-body-lineHeight-medium) var(--primer-fontStack-sansSerif);
+  --primer-text-body-shorthand-large: var(--primer-text-body-weight) var(--primer-text-body-size-large)/var(--primer-text-body-lineHeight-large) var(--primer-fontStack-sansSerif);
+  --primer-text-subtitle-shorthand: var(--primer-text-subtitle-weight) var(--primer-text-subtitle-size)/var(--primer-text-subtitle-lineHeight) var(--primer-fontStack-sansSerif);
+  --primer-text-title-shorthand-medium: var(--primer-text-title-weight) var(--primer-text-title-size-medium)/var(--primer-text-title-lineHeight-medium) var(--primer-fontStack-sansSerif);
+  --primer-text-title-shorthand-large: var(--primer-text-title-weight) var(--primer-text-title-size-large)/var(--primer-text-title-lineHeight-large) var(--primer-fontStack-sansSerif);
+  --primer-text-display-shorthand: var(--primer-text-display-weight) var(--primer-text-display-size)/var(--primer-text-display-lineHeight) var(--primer-fontStack-sansSerif);
+}