@primer/css 0.0.0-1ea75fe → 0.0.0-202110118627

package/forms/form-group.scss

@@ -1,21 +1,29 @@
-// Form groups
-//
-// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
-// `<dd> containing the form elements.
 // stylelint-disable selector-max-compound-selectors
 // stylelint-disable selector-max-type
+
+// Form groups
+//
+// Usage:
+//
+// <div class="form-group">
+//   <div class="form-group-header"> containing the label
+//   <div class="form-group-body"> containing the form elements
+// </div>
+
 .form-group {
+  // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
 
   // Text fields
   .form-control {
     width: 440px;
     max-width: 100%;
+    // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: $bg-gray-light;
+    background-color: var(--color-canvas-inset);
 
     &:focus {
-      background-color: $bg-white;
+      background-color: var(--color-canvas-default);
     }
 
     &.shorter { width: 130px; }
@@ -40,7 +48,9 @@
   // stylelint-enable selector-no-qualifying-type
 
   // The Label
-  dt {
+  dt, // TODO: Deprecate
+  .form-group-header {
+    // stylelint-disable-next-line primer/spacing
     margin: 0 0 6px;
   }
 
@@ -48,13 +58,17 @@
     position: relative;
   }
 
-  &.flattened dt {
+  &.flattened dt, // TODO: Deprecate
+  &.flattened .form-group-header {
     float: left;
     margin: 0;
+    // stylelint-disable-next-line primer/typography
     line-height: 32px;
   }
 
-  &.flattened dd {
+  &.flattened dd, // TODO: Deprecate
+  &.flattened .form-group-body {
+    // stylelint-disable-next-line primer/typography
     line-height: 32px;
   }
 
@@ -62,13 +76,14 @@
   // Form Elements
   //
   // stylelint-disable selector-no-qualifying-type
-  dd {
+  dd, // TODO: Deprecate
+  .form-group-body {
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error { color: $text-red; }
+      &.is-error { color: var(--color-danger-fg); }
 
-      &.is-success { color: $text-green; }
+      &.is-success { color: var(--color-success-fg); }
 
       + .note {
         margin-top: 0;
@@ -82,10 +97,12 @@
   //
 
   &.required {
-    dt label::after {
+    dt label::after, // TODO: Deprecate
+    .form-group-header label::after {
+      // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: $text-red;
-      content: "*";
+      color: var(--color-danger-fg);
+      content: '*';
     }
   }
 
@@ -117,7 +134,7 @@
   &.successful {
     .success {
       display: inline;
-      color: $text-green;
+      color: var(--color-success-fg);
     }
   }
 
@@ -125,21 +142,23 @@
   //
   // Our inline errors
 
+  &.successed,
   &.warn,
   &.errored {
+    .success,
     .warning,
     .error {
       position: absolute;
       z-index: 10;
       display: block; // Show up in errored/warn state
       max-width: 450px; // Keep our long errors readable
-      padding: 5px $spacer-2;
-      margin: $spacer-1 0 0;
-      font-size: 13px;
+      padding: $spacer-1 $spacer-2;
+      margin: $spacer-2 0 0;
+      font-size: $font-size-small;
       font-weight: $font-weight-normal;
-      border-style: solid;
-      border-width: 1px;
-      border-radius: 3px;
+      border-style: $border-style;
+      border-width: $border-width;
+      border-radius: $border-radius;
 
       &::after,
       &::before {
@@ -150,65 +169,83 @@
         width: 0;
         height: 0;
         pointer-events: none;
-        content: " ";
-        border: solid transparent;
+        content: ' ';
+        // stylelint-disable-next-line primer/borders
+        border: $border-style transparent;
       }
 
       &::after {
+        // stylelint-disable-next-line primer/borders
         border-width: 5px;
       }
 
       &::before {
+        // stylelint-disable-next-line primer/spacing
         margin-left: -1px;
+        // stylelint-disable-next-line primer/borders
         border-width: 6px;
       }
     }
   }
 
+  &.successed {
+    .success {
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+      border-color: var(--color-success-muted);
+
+      &::after { border-bottom-color: var(--color-success-subtle); }
+      &::before { border-bottom-color: var(--color-success-muted); }
+    }
+  }
+
   &.warn {
-    .warning {
-      color: $yellow-900;
-      background-color: $yellow-100;
-      border-color: $border-yellow;
+    .form-control {
+      border-color: var(--color-attention-emphasis);
+    }
 
-      &::after {
-        border-bottom-color: $yellow-100;
-      }
+    .warning {
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+      border-color: var(--color-attention-muted);
 
-      &::before {
-        border-bottom-color: $border-yellow;
-      }
+      &::after { border-bottom-color: var(--color-attention-subtle); }
+      &::before { border-bottom-color: var(--color-attention-muted); }
     }
   }
 
   &.errored {
+    .form-control {
+      border-color: var(--color-danger-emphasis);
+    }
+
     label {
-      color: $text-red;
+      color: var(--color-danger-fg);
     }
 
     .error {
-      color: $red-900;
-      background-color: $bg-red-light;
-      border-color: $border-red-light;
-
-      &::after {
-        border-bottom-color: $bg-red-light;
-      }
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+      border-color: var(--color-danger-muted);
 
-      &::before {
-        border-bottom-color: $border-red-light;
-      }
+      &::after { border-bottom-color: var(--color-danger-subtle); }
+      &::before { border-bottom-color: var(--color-danger-muted); }
     }
   }
 }
 
+// tooltip
 .note {
   min-height: 17px;
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   .spinner {
+    // stylelint-disable-next-line primer/spacing
     margin-right: 3px;
     vertical-align: middle;
   }

package/forms/form-select.scss

@@ -4,10 +4,14 @@
 .form-select {
   display: inline-block;
   max-width: 100%;
-  height: 34px;
+  height: $size-5;
   padding-right: $spacer-4;
-  background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
-  background-size: 8px 10px;
+  background-color: var(--color-canvas-default);
+  // SVG with fill: #586069 (--color-icon-secondary)
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 16px;
   appearance: none;
 
   // Hides the default caret in IE11
@@ -20,10 +24,18 @@
   }
 }
 
+@include color-mode(dark) {
+  .form-select {
+    // SVG with fill: #6e7681 (--color-icon-secondary)
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+  }
+}
+
 .select-sm {
-  height: 28px;
-  min-height: 28px;
+  height: $size-4;
+  // stylelint-disable-next-line primer/spacing
   padding-top: 3px;
+  // stylelint-disable-next-line primer/spacing
   padding-bottom: 3px;
   font-size: $font-size-small;
 

package/forms/form-validation.scss

@@ -1,30 +1,33 @@
 // Needs refactoring
 // stylelint-disable selector-no-qualifying-type, selector-max-type
-dl.form-group > dd {
+dl.form-group > dd, // TODO: Deprecate
+.form-group > .form-group-body {
   .form-control {
     &.is-autocheck-loading,
     &.is-autocheck-successful,
     &.is-autocheck-errored {
+      // stylelint-disable-next-line primer/spacing
       padding-right: 30px; // Leave some space for our validation icons
     }
 
     &.is-autocheck-loading {
-      background-image: url("/images/spinners/octocat-spinner-16px.gif");
+      background-image: url('/images/spinners/octocat-spinner-16px.gif');
     }
 
     &.is-autocheck-successful {
-      background-image: url("/images/modules/ajax/success.png");
+      background-image: url('/images/modules/ajax/success.png');
     }
 
     &.is-autocheck-errored {
-      background-image: url("/images/modules/ajax/error.png");
+      background-image: url('/images/modules/ajax/error.png');
     }
   }
 }
 
 // Retinization of form validation icons that aren't octicons yet
 @include retina-media-query {
-  dl.form-group > dd {
+  dl.form-group > dd, // TODO: Deprecate
+  .form-group > .form-group-body {
     .form-control {
       &.is-autocheck-loading,
       &.is-autocheck-successful,
@@ -33,15 +36,15 @@ dl.form-group > dd {
       }
 
       &.is-autocheck-loading {
-        background-image: url("/images/spinners/octocat-spinner-32.gif");
+        background-image: url('/images/spinners/octocat-spinner-32.gif');
       }
 
       &.is-autocheck-successful {
-        background-image: url("/images/modules/ajax/success@2x.png");
+        background-image: url('/images/modules/ajax/success@2x.png');
       }
 
       &.is-autocheck-errored {
-        background-image: url("/images/modules/ajax/error@2x.png");
+        background-image: url('/images/modules/ajax/error@2x.png');
       }
     }
   }
@@ -53,6 +56,7 @@ dl.form-group > dd {
   display: inline-block;
   width: 16px;
   height: 16px;
+  // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
 
   .octicon {
@@ -63,13 +67,13 @@ dl.form-group > dd {
 .status-indicator-success {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
     display: inline-block;
-    color: $green;
-    fill: $green;
+    color: var(--color-success-fg);
+    fill: var(--color-success-fg);
   }
 
   .octicon-x {
@@ -80,7 +84,7 @@ dl.form-group > dd {
 .status-indicator-failed {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
@@ -89,14 +93,16 @@ dl.form-group > dd {
 
   .octicon-x {
     display: inline-block;
-    color: $text-red;
-    fill: $red;
+    color: var(--color-danger-fg);
+    fill: var(--color-danger-fg);
   }
 }
 
 .status-indicator-loading {
   width: 16px;
-  background: url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;
+  background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif');
+  background-repeat: no-repeat;
+  background-position: 0 0;
   background-size: 16px;
 }
 
@@ -114,16 +120,19 @@ dl.form-group > dd {
 // Previously part of `_forms.scss` in Primer. Needs accounting for.
 
 .drag-and-drop {
+  // stylelint-disable-next-line primer/spacing
   padding: 7px 10px;
   margin: 0;
+  // stylelint-disable-next-line primer/typography
   font-size: 13px;
+  // stylelint-disable-next-line primer/typography
   line-height: 16px;
-  color: $text-gray;
-  background-color: $gray-000;
-  border: 1px solid darken($gray-300, 5%);
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border: $border-width $border-style var(--color-border-default);
   border-top: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
 
   .default,
   .loading,
@@ -132,7 +141,7 @@ dl.form-group > dd {
   }
 
   .error {
-    color: $text-red;
+    color: var(--color-danger-fg);
   }
 
   // Spinner
@@ -179,10 +188,10 @@ dl.form-group > dd {
 
 .drag-and-drop-error-info {
   font-weight: $font-weight-normal;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   a {
-    color: $text-blue;
+    color: var(--color-accent-fg);
   }
 }
 
@@ -193,7 +202,9 @@ dl.form-group > dd {
 .manual-file-chooser {
   position: absolute;
   width: 240px;
+  // stylelint-disable-next-line primer/spacing
   padding: 5px;
+  // stylelint-disable-next-line primer/spacing
   margin-left: -80px;
   cursor: pointer;
   opacity: 0.0001;
@@ -208,6 +219,7 @@ dl.form-group > dd {
   .manual-file-chooser {
     top: 0;
     padding: 0;
+    // stylelint-disable-next-line primer/typography
     line-height: 34px;
   }
 }
@@ -216,21 +228,22 @@ dl.form-group > dd {
 .upload-enabled {
   textarea {
     display: block;
-    border-bottom: 1px dashed lighten($gray-300, 5%);
+    // stylelint-disable-next-line primer/borders
+    border-bottom: $border-width dashed var(--color-border-default);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   &.focused {
-    border-radius: 3px;
-    box-shadow: $form-control-shadow, $btn-input-focus-shadow;
+    border-radius: $border-radius;
+    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
 
     .form-control {
       box-shadow: none;
     }
 
     .drag-and-drop {
-      border-color: lighten($blue-400, 8%);
+      border-color: var(--color-accent-emphasis);
     }
   }
 }
@@ -238,6 +251,7 @@ dl.form-group > dd {
 // Dropping a file on top
 .dragover textarea,
 .dragover .drag-and-drop {
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: rgba(#c9ff00, 1) 0 0 3px;
 }
 
@@ -255,7 +269,7 @@ dl.form-group > dd {
   }
 
   .comment {
-    border: 1px solid darken($gray-300, 5%);
+    border: $border-width $border-style var(--color-border-default);
   }
 
   .comment-form-error { margin-bottom: $spacer-2; }
@@ -284,6 +298,7 @@ dl.form-group > dd {
 // Used in our boxed-group-less form styles. Give the sumbit button enough space
 // to breathe without the need for the extra hr.
 .form-action-spacious {
+  // stylelint-disable-next-line primer/spacing
   margin-top: 10px;
 }
 
@@ -302,6 +317,7 @@ div.composer {
   min-height: 200px;
 }
 
+// stylelint-disable-next-line primer/spacing
 .composer .tabnav { margin: 0 0 10px; }
 
 // Misc CSS
@@ -309,24 +325,27 @@ div.composer {
 // Previously part of `_forms.scss` in Primer. Needs accounting for.
 
 h2.account {
+  // stylelint-disable-next-line primer/spacing
   margin: 15px 0 0;
+  // stylelint-disable-next-line primer/typography
   font-size: 18px;
   font-weight: $font-weight-normal;
-  color: $gray-600;
+  color: var(--color-fg-muted);
 }
 
 p.explain {
   position: relative;
   font-size: $font-size-small;
-  color: $gray-600;
+  color: var(--color-fg-muted);
 
   strong {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
   }
 
   .octicon {
+    // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    color: $gray-400;
+    color: var(--color-fg-muted);
   }
 
   .minibutton {

package/forms/index.scss

@@ -1,6 +1,7 @@
-@import "../support/index.scss";
-@import "./form-control.scss";
-@import "./form-select.scss";
-@import "./form-group.scss";
-@import "./form-validation.scss";
-@import "./input-group.scss";
+@import '../support/index.scss';
+@import './form-control.scss';
+@import './form-select.scss';
+@import './form-group.scss';
+@import './form-validation.scss';
+@import './input-group.scss';
+@import './radio-group.scss';

package/forms/input-group.scss

@@ -37,6 +37,7 @@
 }
 
 .input-group-button:first-child .btn {
+  // stylelint-disable-next-line primer/spacing
   margin-right: -1px;
 }
 
@@ -47,5 +48,6 @@
 }
 
 .input-group-button:last-child .btn {
+  // stylelint-disable-next-line primer/spacing
   margin-left: -1px;
 }

package/forms/radio-group.scss

@@ -0,0 +1,62 @@
+// Tab like radio group
+
+.radio-group {
+  @include clearfix;
+}
+
+.radio-label {
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
+  // stylelint-disable-next-line primer/spacing
+  margin-left: -1px;
+  font-size: $body-font-size;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px; // Specifically not inherit our `<body>` default
+  color: var(--color-fg-default);
+  cursor: pointer;
+  border: $border-width $border-style var(--color-border-default);
+
+  :checked + & {
+    position: relative;
+    z-index: 1;
+    border-color: var(--color-accent-emphasis);
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  .octicon {
+    margin-left: $spacer-1;
+    color: var(--color-fg-subtle);
+  }
+}
+
+.radio-input {
+  z-index: 3;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  margin: 10px (-$spacer-5) 0 $spacer-3;
+
+  &:disabled {
+    position: relative; // enables z-index
+
+    + .radio-label {
+      color: var(--color-primer-fg-disabled);
+      cursor: default;
+      background-color: var(--color-neutral-subtle);
+
+      .octicon {
+        color: inherit;
+      }
+    }
+  }
+}

package/header/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "header"
+generated: true
+---
+
+# Primer CSS: `header` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/header/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/header.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss