@primer/primitives 7.11.15-rc.7ef640d → 7.11.15-rc.c614689

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.11.15-rc.7ef640d",
+  "version": "7.11.15-rc.c614689",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -36,8 +36,9 @@
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config .eslintrc.js",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config .eslintrc.js && npm run lint:tokens",
     "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.js",
+    "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
     "prebuild": "rm -rf dist",
     "prebuild:tokens": "rm -rf tokens-v2-private",
     "prebuild:next": "rm -rf tokens-next-private",
@@ -88,6 +89,8 @@
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "zod": "^3.21.4",
+    "zod-validation-error": "^1.3.1"
   }
 }

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

@@ -5,10 +5,10 @@
   --borderWidth-thin: max(1px, 0.0625rem);
   --borderWidth-thick: max(2px, 0.125rem);
   --borderWidth-thicker: max(4px, 0.25rem);
-  --borderRadius-small: 3px;
-  --borderRadius-medium: 6px;
-  --borderRadius-large: 12px;
-  --borderRadius-full: 9999px;
+  --borderRadius-small: 0.1875rem;
+  --borderRadius-medium: 0.375rem;
+  --borderRadius-large: 0.75rem;
+  --borderRadius-full: 624.9375rem;
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
 }

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

@@ -3,33 +3,33 @@
   --control-minTarget-coarse: 2.75rem;
   --control-xsmall-size: 1.5rem;
   --control-xsmall-lineBoxHeight: 1.25rem;
-  --control-xsmall-paddingBlock: calc((1.5rem - 1.25rem) / 2);
+  --control-xsmall-paddingBlock: 0.125rem;
   --control-xsmall-paddingInline-condensed: 0.25rem;
   --control-xsmall-paddingInline-normal: 0.5rem;
   --control-xsmall-paddingInline-spacious: 0.75rem;
   --control-xsmall-gap: 0.25rem;
   --control-small-size: 1.75rem;
   --control-small-lineBoxHeight: 1.25rem;
-  --control-small-paddingBlock: calc((1.75rem - 1.25rem) / 2);
+  --control-small-paddingBlock: 0.25rem;
   --control-small-paddingInline-condensed: 0.5rem;
   --control-small-paddingInline-normal: 0.75rem;
   --control-small-gap: 0.25rem;
   --control-medium-size: 2rem;
   --control-medium-lineBoxHeight: 1.25rem;
-  --control-medium-paddingBlock: calc((2rem - 1.25rem) / 2);
+  --control-medium-paddingBlock: 0.375rem;
   --control-medium-paddingInline-condensed: 0.5rem;
   --control-medium-paddingInline-normal: 0.75rem;
   --control-medium-paddingInline-spacious: 1rem;
   --control-medium-gap: 0.5rem;
   --control-large-size: 2.5rem;
   --control-large-lineBoxHeight: 1.25rem;
-  --control-large-paddingBlock: calc((2.5rem - 1.25rem) / 2);
+  --control-large-paddingBlock: 0.625rem;
   --control-large-paddingInline-normal: 0.75rem;
   --control-large-paddingInline-spacious: 1rem;
   --control-large-gap: 0.5rem;
   --control-xlarge-size: 3rem;
   --control-xlarge-lineBoxHeight: 1.25rem;
-  --control-xlarge-paddingBlock: calc((3rem - 1.25rem) / 2);
+  --control-xlarge-paddingBlock: 0.875rem;
   --control-xlarge-paddingInline-normal: 0.75rem;
   --control-xlarge-paddingInline-spacious: 1rem;
   --control-xlarge-gap: 0.5rem;

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

@@ -1,24 +1,24 @@
 :root {
   --text-codeInline-size: 0.9285em;
-  --text-codeBlock-lineHeight: calc(20/13);
+  --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
-  --text-caption-lineHeight: calc(16/12);
+  --text-caption-lineHeight: 1.3333;
   --text-caption-size: 0.75rem;
-  --text-body-lineHeight-small: calc(20/12);
-  --text-body-lineHeight-medium: calc(20/14);
-  --text-body-lineHeight-large: calc(24/16);
+  --text-body-lineHeight-small: 1.6666;
+  --text-body-lineHeight-medium: 1.4285;
+  --text-body-lineHeight-large: 1.5;
   --text-body-size-small: 0.75rem;
   --text-body-size-medium: 0.875rem;
   --text-body-size-large: 1rem;
-  --text-subtitle-lineHeight: calc(32/20);
+  --text-subtitle-lineHeight: 1.6;
   --text-subtitle-size: 1.25rem;
-  --text-title-lineHeight-small: calc(24/16);
-  --text-title-lineHeight-medium: calc(32/20);
-  --text-title-lineHeight-large: calc(48/32);
+  --text-title-lineHeight-small: 1.5;
+  --text-title-lineHeight-medium: 1.6;
+  --text-title-lineHeight-large: 1.5;
   --text-title-size-small: 1rem;
   --text-title-size-medium: 1.25rem;
   --text-title-size-large: 2rem;
-  --text-display-lineHeight: calc(56/40);
+  --text-display-lineHeight: 1.4;
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 3.5rem;
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

package/tokens-next-private/docs/base/typography/typography.json

@@ -1,12 +1,12 @@
 {
   "base-text-weight-light": {
-    "value": 300,
     "$type": "fontWeight",
+    "value": 300,
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
-      "value": 300,
-      "$type": "fontWeight"
+      "$type": "fontWeight",
+      "value": 300
     },
     "name": "base-text-weight-light",
     "attributes": {},

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

@@ -2,11 +2,13 @@
   "boxShadow-thin": {
     "value": "inset 0 0 0 max(1px, 0.0625rem)",
     "comment": "Thin shadow for borders",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
       "value": "inset 0 0 0 {borderWidth.thin}",
-      "comment": "Thin shadow for borders"
+      "comment": "Thin shadow for borders",
+      "$type": "string"
     },
     "name": "boxShadow-thin",
     "attributes": {},
@@ -14,10 +16,12 @@
   },
   "boxShadow-thick": {
     "value": "inset 0 0 0 max(2px, 0.125rem)",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "inset 0 0 0 {borderWidth.thick}"
+      "value": "inset 0 0 0 {borderWidth.thick}",
+      "$type": "string"
     },
     "name": "boxShadow-thick",
     "attributes": {},
@@ -25,10 +29,12 @@
   },
   "boxShadow-thicker": {
     "value": "inset 0 0 0 max(4px, 0.25rem)",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "inset 0 0 0 {borderWidth.thicker}"
+      "value": "inset 0 0 0 {borderWidth.thicker}",
+      "$type": "string"
     },
     "name": "boxShadow-thicker",
     "attributes": {},
@@ -36,10 +42,12 @@
   },
   "borderWidth-thin": {
     "value": "max(1px, 0.0625rem)",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "max(1px, 0.0625rem)"
+      "value": "max(1px, 0.0625rem)",
+      "$type": "string"
     },
     "name": "borderWidth-thin",
     "attributes": {},
@@ -47,10 +55,12 @@
   },
   "borderWidth-thick": {
     "value": "max(2px, 0.125rem)",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "max(2px, 0.125rem)"
+      "value": "max(2px, 0.125rem)",
+      "$type": "string"
     },
     "name": "borderWidth-thick",
     "attributes": {},
@@ -58,54 +68,64 @@
   },
   "borderWidth-thicker": {
     "value": "max(4px, 0.25rem)",
+    "$type": "string",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "max(4px, 0.25rem)"
+      "value": "max(4px, 0.25rem)",
+      "$type": "string"
     },
     "name": "borderWidth-thicker",
     "attributes": {},
     "path": ["borderWidth", "thicker"]
   },
   "borderRadius-small": {
-    "value": "3px",
+    "value": "0.1875rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "3px"
+      "value": "3px",
+      "$type": "dimension"
     },
     "name": "borderRadius-small",
     "attributes": {},
     "path": ["borderRadius", "small"]
   },
   "borderRadius-medium": {
-    "value": "6px",
+    "value": "0.375rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "6px"
+      "value": "6px",
+      "$type": "dimension"
     },
     "name": "borderRadius-medium",
     "attributes": {},
     "path": ["borderRadius", "medium"]
   },
   "borderRadius-large": {
-    "value": "12px",
+    "value": "0.75rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "12px"
+      "value": "12px",
+      "$type": "dimension"
     },
     "name": "borderRadius-large",
     "attributes": {},
     "path": ["borderRadius", "large"]
   },
   "borderRadius-full": {
-    "value": "9999px",
+    "value": "624.9375rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/border.json",
     "isSource": true,
     "original": {
-      "value": "9999px"
+      "value": "9999px",
+      "$type": "dimension"
     },
     "name": "borderRadius-full",
     "attributes": {},

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

@@ -52,11 +52,13 @@
     "path": ["control", "xsmall", "lineBoxHeight"]
   },
   "control-xsmall-paddingBlock": {
-    "value": "calc((1.5rem - 1.25rem) / 2)",
+    "value": "0.125rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/size.json",
     "isSource": true,
     "original": {
-      "value": "calc(({control.xsmall.size} - {control.xsmall.lineBoxHeight}) / 2)"
+      "value": "2px",
+      "$type": "dimension"
     },
     "name": "control-xsmall-paddingBlock",
     "attributes": {},
@@ -141,11 +143,13 @@
     "path": ["control", "small", "lineBoxHeight"]
   },
   "control-small-paddingBlock": {
-    "value": "calc((1.75rem - 1.25rem) / 2)",
+    "value": "0.25rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/size.json",
     "isSource": true,
     "original": {
-      "value": "calc(({control.small.size} - {control.small.lineBoxHeight}) / 2)"
+      "value": "{base.size.4}",
+      "$type": "dimension"
     },
     "name": "control-small-paddingBlock",
     "attributes": {},
@@ -217,11 +221,13 @@
     "path": ["control", "medium", "lineBoxHeight"]
   },
   "control-medium-paddingBlock": {
-    "value": "calc((2rem - 1.25rem) / 2)",
+    "value": "0.375rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/size.json",
     "isSource": true,
     "original": {
-      "value": "calc(({control.medium.size} - {control.medium.lineBoxHeight}) / 2)"
+      "value": "6px",
+      "$type": "dimension"
     },
     "name": "control-medium-paddingBlock",
     "attributes": {},
@@ -306,11 +312,13 @@
     "path": ["control", "large", "lineBoxHeight"]
   },
   "control-large-paddingBlock": {
-    "value": "calc((2.5rem - 1.25rem) / 2)",
+    "value": "0.625rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/size.json",
     "isSource": true,
     "original": {
-      "value": "calc(({control.large.size} - {control.large.lineBoxHeight}) / 2)"
+      "value": "10px",
+      "$type": "dimension"
     },
     "name": "control-large-paddingBlock",
     "attributes": {},
@@ -382,11 +390,13 @@
     "path": ["control", "xlarge", "lineBoxHeight"]
   },
   "control-xlarge-paddingBlock": {
-    "value": "calc((3rem - 1.25rem) / 2)",
+    "value": "0.875rem",
+    "$type": "dimension",
     "filePath": "src/tokens/functional/size/size.json",
     "isSource": true,
     "original": {
-      "value": "calc(({control.xlarge.size} - {control.xlarge.lineBoxHeight}) / 2)"
+      "value": "14px",
+      "$type": "dimension"
     },
     "name": "control-xlarge-paddingBlock",
     "attributes": {},

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

@@ -1537,7 +1537,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -1559,7 +1559,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -1733,7 +1733,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2018,7 +2018,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2220,7 +2220,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5520,7 +5520,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5542,7 +5542,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -5587,7 +5587,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",

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

@@ -1537,7 +1537,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -1559,7 +1559,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -1739,7 +1739,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2024,7 +2024,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2226,7 +2226,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5524,7 +5524,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5546,7 +5546,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -5591,7 +5591,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",

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

@@ -1545,7 +1545,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -1567,7 +1567,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -1751,7 +1751,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2036,7 +2036,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2238,7 +2238,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5532,7 +5532,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5554,7 +5554,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -5599,7 +5599,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",

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

@@ -1537,7 +1537,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -1559,7 +1559,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -1739,7 +1739,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2024,7 +2024,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -2226,7 +2226,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5526,7 +5526,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",
@@ -5548,7 +5548,7 @@
     "isSource": true,
     "original": {
       "value": {
-        "color": "transparent",
+        "color": "{base.color.transparent}",
         "alpha": 0,
         "offsetX": "0px",
         "offsetY": "0px",
@@ -5593,7 +5593,7 @@
     "original": {
       "value": [
         {
-          "color": "transparent",
+          "color": "{base.color.transparent}",
           "alpha": 0,
           "offsetX": "0px",
           "offsetY": "0px",