@primer/primitives 7.15.4-rc.75e3949 → 7.15.4

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

@@ -14,13 +14,13 @@
   --diffBlob-deletion-bgColor-line: #f8514926;
   --diffBlob-deletion-bgColor-word: #f8514966;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #7d8590;
+  --diffBlob-expander-iconColor: #848d97;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #7d8590;
-  --codeMirror-lineNumber-fgColor: #7d8590;
+  --codeMirror-gutterMarker-fgColor-muted: #848d97;
+  --codeMirror-lineNumber-fgColor: #848d97;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -60,7 +60,7 @@
   --control-borderColor-success: #1f6feb;
   --control-borderColor-danger: #da3633;
   --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #7d8590;
+  --control-iconColor-rest: #848d97;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -87,7 +87,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #8b949e;
-  --controlTrack-fgColor-rest: #7d8590;
+  --controlTrack-fgColor-rest: #848d97;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #8b949e;
@@ -124,7 +124,7 @@
   --button-invisible-fgColor-rest: #2f81f7;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #8b949e;
-  --button-invisible-iconColor-rest: #7d8590;
+  --button-invisible-iconColor-rest: #848d97;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #8b949e;
   --button-invisible-bgColor-rest: #00000000;
@@ -185,12 +185,12 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
+  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #7d8590;
+  --underlineNav-iconColor-rest: #848d97;
   --fgColor-default: #e6edf3;
-  --fgColor-muted: #7d8590;
+  --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #0d1117;
   --fgColor-disabled: #8b949e;
@@ -434,13 +434,13 @@
     --diffBlob-deletion-bgColor-line: #f8514926;
     --diffBlob-deletion-bgColor-word: #f8514966;
     --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #7d8590;
+    --diffBlob-expander-iconColor: #848d97;
     --codeMirror-fgColor: #e6edf3;
     --codeMirror-bgColor: #0d1117;
     --codeMirror-gutters-bgColor: #0d1117;
     --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #7d8590;
-    --codeMirror-lineNumber-fgColor: #7d8590;
+    --codeMirror-gutterMarker-fgColor-muted: #848d97;
+    --codeMirror-lineNumber-fgColor: #848d97;
     --codeMirror-cursor-fgColor: #e6edf3;
     --codeMirror-selection-bgColor: #388bfd66;
     --codeMirror-activeline-bgColor: #6e768166;
@@ -480,7 +480,7 @@
     --control-borderColor-success: #1f6feb;
     --control-borderColor-danger: #da3633;
     --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #7d8590;
+    --control-iconColor-rest: #848d97;
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-hover: #b1bac41f;
     --control-transparent-bgColor-active: #b1bac433;
@@ -507,7 +507,7 @@
     --controlTrack-bgColor-hover: #292e36;
     --controlTrack-bgColor-active: #31363e;
     --controlTrack-bgColor-disabled: #8b949e;
-    --controlTrack-fgColor-rest: #7d8590;
+    --controlTrack-fgColor-rest: #848d97;
     --controlTrack-fgColor-disabled: #ffffff;
     --controlTrack-borderColor-rest: #00000000;
     --controlTrack-borderColor-disabled: #8b949e;
@@ -544,7 +544,7 @@
     --button-invisible-fgColor-rest: #2f81f7;
     --button-invisible-fgColor-hover: #58a6ff;
     --button-invisible-fgColor-disabled: #8b949e;
-    --button-invisible-iconColor-rest: #7d8590;
+    --button-invisible-iconColor-rest: #848d97;
     --button-invisible-iconColor-hover: #e6edf3;
     --button-invisible-iconColor-disabled: #8b949e;
     --button-invisible-bgColor-rest: #00000000;
@@ -605,12 +605,12 @@
     --sideNav-bgColor-selected: #21262d;
     --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
+    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #7d8590;
+    --underlineNav-iconColor-rest: #848d97;
     --fgColor-default: #e6edf3;
-    --fgColor-muted: #7d8590;
+    --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-onInverse: #0d1117;
     --fgColor-disabled: #8b949e;

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

@@ -14,13 +14,13 @@
   --diffBlob-deletion-bgColor-line: #f8514926;
   --diffBlob-deletion-bgColor-word: #f8514966;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #7d8590;
+  --diffBlob-expander-iconColor: #848d97;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #7d8590;
-  --codeMirror-lineNumber-fgColor: #7d8590;
+  --codeMirror-gutterMarker-fgColor-muted: #848d97;
+  --codeMirror-lineNumber-fgColor: #848d97;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -60,7 +60,7 @@
   --control-borderColor-success: #238636;
   --control-borderColor-danger: #da3633;
   --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #7d8590;
+  --control-iconColor-rest: #848d97;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -87,7 +87,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #8b949e;
-  --controlTrack-fgColor-rest: #7d8590;
+  --controlTrack-fgColor-rest: #848d97;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #8b949e;
@@ -124,7 +124,7 @@
   --button-invisible-fgColor-rest: #2f81f7;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #8b949e;
-  --button-invisible-iconColor-rest: #7d8590;
+  --button-invisible-iconColor-rest: #848d97;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #8b949e;
   --button-invisible-bgColor-rest: #00000000;
@@ -185,12 +185,12 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
+  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #7d8590;
+  --underlineNav-iconColor-rest: #848d97;
   --fgColor-default: #e6edf3;
-  --fgColor-muted: #7d8590;
+  --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-onInverse: #0d1117;
   --fgColor-disabled: #8b949e;
@@ -434,13 +434,13 @@
     --diffBlob-deletion-bgColor-line: #f8514926;
     --diffBlob-deletion-bgColor-word: #f8514966;
     --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #7d8590;
+    --diffBlob-expander-iconColor: #848d97;
     --codeMirror-fgColor: #e6edf3;
     --codeMirror-bgColor: #0d1117;
     --codeMirror-gutters-bgColor: #0d1117;
     --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #7d8590;
-    --codeMirror-lineNumber-fgColor: #7d8590;
+    --codeMirror-gutterMarker-fgColor-muted: #848d97;
+    --codeMirror-lineNumber-fgColor: #848d97;
     --codeMirror-cursor-fgColor: #e6edf3;
     --codeMirror-selection-bgColor: #388bfd66;
     --codeMirror-activeline-bgColor: #6e768166;
@@ -480,7 +480,7 @@
     --control-borderColor-success: #238636;
     --control-borderColor-danger: #da3633;
     --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #7d8590;
+    --control-iconColor-rest: #848d97;
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-hover: #b1bac41f;
     --control-transparent-bgColor-active: #b1bac433;
@@ -507,7 +507,7 @@
     --controlTrack-bgColor-hover: #292e36;
     --controlTrack-bgColor-active: #31363e;
     --controlTrack-bgColor-disabled: #8b949e;
-    --controlTrack-fgColor-rest: #7d8590;
+    --controlTrack-fgColor-rest: #848d97;
     --controlTrack-fgColor-disabled: #ffffff;
     --controlTrack-borderColor-rest: #00000000;
     --controlTrack-borderColor-disabled: #8b949e;
@@ -544,7 +544,7 @@
     --button-invisible-fgColor-rest: #2f81f7;
     --button-invisible-fgColor-hover: #58a6ff;
     --button-invisible-fgColor-disabled: #8b949e;
-    --button-invisible-iconColor-rest: #7d8590;
+    --button-invisible-iconColor-rest: #848d97;
     --button-invisible-iconColor-hover: #e6edf3;
     --button-invisible-iconColor-disabled: #8b949e;
     --button-invisible-bgColor-rest: #00000000;
@@ -605,12 +605,12 @@
     --sideNav-bgColor-selected: #21262d;
     --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
+    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #7d8590;
+    --underlineNav-iconColor-rest: #848d97;
     --fgColor-default: #e6edf3;
-    --fgColor-muted: #7d8590;
+    --fgColor-muted: #848d97;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-onInverse: #0d1117;
     --fgColor-disabled: #8b949e;

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

@@ -85,7 +85,10 @@
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
-        "scopes": ["radius"]
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/border.json",
@@ -96,7 +99,10 @@
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
-          "scopes": ["radius"]
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+          }
         }
       }
     },
@@ -110,7 +116,10 @@
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
-        "scopes": ["radius"]
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/border.json",
@@ -121,7 +130,10 @@
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
-          "scopes": ["radius"]
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+          }
         }
       }
     },
@@ -135,7 +147,10 @@
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
-        "scopes": ["radius"]
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/border.json",
@@ -146,7 +161,10 @@
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
-          "scopes": ["radius"]
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+          }
         }
       }
     },
@@ -161,7 +179,10 @@
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
-        "scopes": ["radius"]
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-full) /* utility class: .circle */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/border.json",
@@ -173,7 +194,10 @@
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
-          "scopes": ["radius"]
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-full) /* utility class: .circle */"
+          }
         }
       }
     },

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

@@ -1268,8 +1268,11 @@
     "$extensions": {
       "org.primer.figma": {
         "collection": "pattern/size",
+        "scopes": ["gap"],
         "group": "component",
-        "scopes": ["gap"]
+        "codeSyntax": {
+          "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1280,8 +1283,11 @@
       "$extensions": {
         "org.primer.figma": {
           "collection": "pattern/size",
+          "scopes": ["gap"],
           "group": "component",
-          "scopes": ["gap"]
+          "codeSyntax": {
+            "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
+          }
         }
       }
     },
@@ -1296,7 +1302,10 @@
       "org.primer.figma": {
         "collection": "pattern/size",
         "group": "component",
-        "scopes": ["gap"]
+        "scopes": ["gap"],
+        "codeSyntax": {
+          "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1308,7 +1317,10 @@
         "org.primer.figma": {
           "collection": "pattern/size",
           "group": "component",
-          "scopes": ["gap"]
+          "scopes": ["gap"],
+          "codeSyntax": {
+            "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
+          }
         }
       }
     },
@@ -1323,7 +1335,10 @@
       "org.primer.figma": {
         "collection": "pattern/size",
         "group": "component",
-        "scopes": ["gap"]
+        "scopes": ["gap"],
+        "codeSyntax": {
+          "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1335,7 +1350,10 @@
         "org.primer.figma": {
           "collection": "pattern/size",
           "group": "component",
-          "scopes": ["gap"]
+          "scopes": ["gap"],
+          "codeSyntax": {
+            "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
+          }
         }
       }
     },
@@ -1350,7 +1368,10 @@
       "org.primer.figma": {
         "collection": "pattern/size",
         "group": "component",
-        "scopes": ["gap"]
+        "scopes": ["gap"],
+        "codeSyntax": {
+          "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1362,7 +1383,10 @@
         "org.primer.figma": {
           "collection": "pattern/size",
           "group": "component",
-          "scopes": ["gap"]
+          "scopes": ["gap"],
+          "codeSyntax": {
+            "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
+          }
         }
       }
     },
@@ -1377,7 +1401,10 @@
       "org.primer.figma": {
         "collection": "pattern/size",
         "group": "component",
-        "scopes": ["gap"]
+        "scopes": ["gap"],
+        "codeSyntax": {
+          "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1389,7 +1416,10 @@
         "org.primer.figma": {
           "collection": "pattern/size",
           "group": "component",
-          "scopes": ["gap"]
+          "scopes": ["gap"],
+          "codeSyntax": {
+            "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
+          }
         }
       }
     },
@@ -1404,7 +1434,10 @@
       "org.primer.figma": {
         "collection": "pattern/size",
         "group": "component",
-        "scopes": ["gap"]
+        "scopes": ["gap"],
+        "codeSyntax": {
+          "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
+        }
       }
     },
     "filePath": "src/tokens/functional/size/size.json",
@@ -1416,7 +1449,10 @@
         "org.primer.figma": {
           "collection": "pattern/size",
           "group": "component",
-          "scopes": ["gap"]
+          "scopes": ["gap"],
+          "codeSyntax": {
+            "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
+          }
         }
       }
     },