swapsies

primer · Feb 5, 2025 · 1e65033 · 1e65033
1 parent 4113637
commit 1e65033
Show file tree

Hide file tree

Showing 47 changed files with 345 additions and 652 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+  "recommendations": ["phoenisx.cssvar"],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,27 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "[postcss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "explicit"
+    }
+  },
+  "stylelint.validate": [
+    "css",
+    "scss"
+  ],
+  "cssvar.ignore": [
+    // exclude all but light theme, to avoid stacking suggestions
+    "node_modules/@primer/primitives/dist/css/functional/themes/dark-colorblind.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/dark-dimmed.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/dark-high-contrast.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/dark-tritanopia.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/dark.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/light-colorblind.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/light-high-contrast.css",
+    "node_modules/@primer/primitives/dist/css/functional/themes/light-tritanopia.css"
+  ],
+  "cssvar.files": ["node_modules/@primer/primitives/dist/css/**/*.css"]
+}
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
@@ -12,39 +12,30 @@
   list-style: none;
   cursor: pointer;
   background: var(--overlay-bgColor, var(--color-canvas-overlay));
-  // stylelint-disable-next-line primer/borders, primer/colors
-  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
-  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius;
+  border: var(--borderWidth-default) solid var(--borderColor-default, var(--color-border-default));
+  border-radius: var(--borderRadius-default);
   box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 
   li {
     display: block;
     padding: var(--base-size-4) var(--base-size-8);
-    // stylelint-disable-next-line primer/typography
-    font-weight: $font-weight-semibold;
-    // stylelint-disable-next-line primer/borders, primer/colors
-    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+    font-weight: var(--base-text-weight-light);
+    border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted));
 
     small {
-      // stylelint-disable-next-line primer/typography
-      font-weight: $font-weight-normal;
+      font-weight: var(--base-text-weight-light);
       color: var(--fgColor-muted, var(--color-fg-muted));
     }
 
     &:last-child {
       border-bottom: 0;
-      // stylelint-disable-next-line primer/borders
-      border-bottom-right-radius: $border-radius;
-      // stylelint-disable-next-line primer/borders
-      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: var(--borderRadius-default);
+      border-bottom-left-radius: var(--borderRadius-default);
     }
 
     &:first-child {
-      // stylelint-disable-next-line primer/borders
-      border-top-left-radius: $border-radius;
-      // stylelint-disable-next-line primer/borders
-      border-top-right-radius: $border-radius;
+      border-top-left-radius: var(--borderRadius-default);
+      border-top-right-radius: var(--borderRadius-default);
     }
 
     &:hover {

diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
@@ -11,7 +11,6 @@
   right: -15%;
   bottom: -9%;
   background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
-  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius-1;
+  border-radius: var(--borderRadius-default);;
   box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
@@ -45,8 +45,7 @@
     left: 0;
     width: 100%;
     content: '';
-    // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
+    border-bottom: var(--borderWidth-thick) dashed var(--borderColor-default, var(--color-border-default));
   }
 
   .CircleBadge {

diff --git a/src/base/base.scss b/src/base/base.scss
@@ -13,9 +13,9 @@ button {
 }
 
 body {
-  font-family: $body-font;
-  font-size: var(--body-font-size, $body-font-size);
-  line-height: $body-line-height;
+  font-family: var(--fontStack-sansSerif);
+  font-size: var(--body-font-size);
+  line-height: 1.5;
   color: var(--fgColor-default, var(--color-fg-default));
   background-color: var(--bgColor-default, var(--color-canvas-default));
 }
@@ -31,7 +31,7 @@ a {
 
 b,
 strong {
-  font-weight: $font-weight-bold;
+  font-weight: var(--base-text-weight-semibold);
 }
 
 fieldset {
@@ -41,7 +41,7 @@ fieldset {
 }
 
 label {
-  font-weight: $font-weight-bold;
+  font-weight: var(--base-text-weight-semibold);
 }
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
@@ -56,13 +56,11 @@ label {
 hr,
 .rule {
   height: 0;
-  // stylelint-disable-next-line primer/spacing
-  margin: 15px 0;
+  margin: var(--base-size-16) 0;
   overflow: hidden;
   background: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders, primer/colors
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: var(--borderWidth-default) solid var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();
 }
@@ -73,7 +71,6 @@ hr,
 
 table {
   border-spacing: 0;
-  // stylelint-disable-next-line primer/borders
   border-collapse: collapse;
 }
 

diff --git a/src/base/kbd.scss b/src/base/kbd.scss
@@ -4,18 +4,18 @@
 kbd {
   display: inline-block;
   padding: var(--base-size-4);
-  // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
-  font: 11px $mono-font;
-  // stylelint-disable-next-line primer/typography
+  , declaration-property-value-no-unknown
+  font: 11px var(--fontStack-monospace);
+
   line-height: 10px;
   color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
   background-color: var(--bgColor-muted, var(--color-canvas-subtle));
-  // stylelint-disable-next-line primer/borders, primer/colors
-  border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
+
+  border: $border-style var(--borderWidth-default) var(--borderColor-neutral-muted, var(--color-neutral-muted));
   border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
-  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius;
+
+  border-radius: var(--borderRadius-default);
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
 }
diff --git a/src/base/normalize.scss b/src/base/normalize.scss
@@ -261,7 +261,7 @@ textarea {
  */
 
 optgroup {
-  font-weight: $font-weight-bold;
+  font-weight: var(--base-text-weight-semibold);
 }
 
 /**
@@ -304,7 +304,7 @@ html [type="button"], /* 1 */
  */
 
 fieldset {
-  border: $border-width $border-style #c0c0c0;
+  border: var(--borderWidth-default) solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em $em-spacer-6;
 }

diff --git a/src/base/typography-base.scss b/src/base/typography-base.scss
@@ -23,12 +23,13 @@ h6 { @include h6; }
 
 p {
   margin-top: 0;
-  // stylelint-disable-next-line primer/spacing
+
+  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: 10px;
 }
 
 small {
-  // stylelint-disable-next-line primer/typography
+  /* stylelint-disable-next-line primer/typography */
   font-size: 90%;
 }
 
@@ -68,19 +69,15 @@ dd {
 tt,
 code,
 samp {
-  // stylelint-disable-next-line primer/typography
-  font-family: $mono-font;
-  // stylelint-disable-next-line primer/typography
-  font-size: $font-size-small;
+  font-family: var(--fontStack-monospace);
+  font-size: var(--text-body-size-small);
 }
 
 pre {
   margin-top: 0;
   margin-bottom: 0;
-  // stylelint-disable-next-line primer/typography
-  font-family: $mono-font;
-  // stylelint-disable-next-line primer/typography
-  font-size: $font-size-small;
+  font-family: var(--fontStack-monospace);
+  font-size: var(--text-body-size-small);
 }
 
 // Octicons

diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss
@@ -12,12 +12,9 @@
   .Box-header {
     margin: 0;
     border-width: 0;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-width: $border-width;
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: $border-radius;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: $border-radius;
+    border-bottom-width: var(--borderWidth-default);
+    border-top-left-radius: var(--borderRadius-default);
+    border-top-right-radius: var(--borderRadius-default);
   }
 }
 

diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss
@@ -4,18 +4,18 @@
 
 .branch-name {
   display: inline-block;
-  // stylelint-disable-next-line primer/spacing
+
   padding: 2px 6px;
-  // stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
-  font: 12px $mono-font;
+  , declaration-property-value-no-unknown
+  font: 12px var(--fontStack-monospace);
   color: var(--fgColor-muted, var(--color-fg-muted));
   word-break: break-all;
   background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
-  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius;
+
+  border-radius: var(--borderRadius-default);
 
   .octicon {
-    // stylelint-disable-next-line primer/spacing
+
     margin: 1px -2px 0 0;
     color: var(--fgColor-muted, var(--color-fg-muted));
   }

diff --git a/src/buttons/button-group.scss b/src/buttons/button-group.scss
@@ -23,28 +23,22 @@
   border-radius: 0;
 
   &:first-child {
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: $border-radius;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: $border-radius;
+    border-top-left-radius: var(--borderRadius-default);
+    border-bottom-left-radius: var(--borderRadius-default);
   }
 
   &:last-child {
-    // stylelint-disable-next-line primer/borders
-    border-right-width: $border-width;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: $border-radius;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: $border-radius;
+    border-right-width: var(--borderWidth-default);
+    border-top-right-radius: var(--borderRadius-default);
+    border-bottom-right-radius: var(--borderRadius-default);
   }
 
   &.selected,
   &[aria-selected='true'],
   &:focus,
   &:active,
   &:hover {
-    // stylelint-disable-next-line primer/borders
-    border-right-width: $border-width;
+    border-right-width: var(--borderWidth-default);
 
     + .BtnGroup-item,
     + .BtnGroup-parent .BtnGroup-item {
@@ -57,19 +51,14 @@
   float: left;
 
   &:first-child .BtnGroup-item {
-    // stylelint-disable-next-line primer/borders
-    border-top-left-radius: $border-radius;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-left-radius: $border-radius;
+    border-top-left-radius: var(--borderRadius-default);
+    border-bottom-left-radius: var(--borderRadius-default);
   }
 
   &:last-child .BtnGroup-item {
-    // stylelint-disable-next-line primer/borders
-    border-right-width: $border-width;
-    // stylelint-disable-next-line primer/borders
-    border-top-right-radius: $border-radius;
-    // stylelint-disable-next-line primer/borders
-    border-bottom-right-radius: $border-radius;
+    border-right-width: var(--borderWidth-default);
+    border-top-right-radius: var(--borderRadius-default);
+    border-bottom-right-radius: var(--borderRadius-default);
   }
 
   .BtnGroup-item {
@@ -83,8 +72,7 @@
   &:active,
   &:hover {
     .BtnGroup-item {
-      // stylelint-disable-next-line primer/borders
-      border-right-width: $border-width;
+      border-right-width: var(--borderWidth-default);
     }
 
     + .BtnGroup-item,