@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/dropdown/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/dropdown/dropdown.scss

@@ -7,7 +7,7 @@
   width: 0;
   height: 0;
   vertical-align: middle;
-  content: "";
+  content: '';
   border-style: $border-style;
   // stylelint-disable-next-line primer/borders
   border-width: $spacer-1 $spacer-1 0;
@@ -18,6 +18,7 @@
 
 // Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
 // way the menu should render from the element triggering it.
+
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -29,29 +30,31 @@
   // stylelint-disable-next-line primer/spacing
   margin-top: 2px;
   list-style: none;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-overlay);
   background-clip: padding-box;
-  border: $border;
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: $box-shadow-large;
+  box-shadow: var(--color-shadow-large);
 
   &::before,
   &::after {
     position: absolute;
     display: inline-block;
-    content: "";
+    content: '';
   }
 
+  // caret border
   &::before {
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: $border-black-fade;
+    border-bottom-color: var(--color-border-default);
   }
 
+  // caret background (should match dropdown background)
   &::after {
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
-    border-bottom-color: $border-white;
+    border-bottom-color: var(--color-canvas-overlay);
   }
 
   // stylelint-disable-next-line selector-max-type
@@ -75,21 +78,28 @@
   display: block;
   padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
   overflow: hidden;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus,
   &:hover {
-    color: $text-white;
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: $bg-blue;
-    outline: none;
+    background-color: var(--color-accent-emphasis);
 
     > .octicon {
       color: inherit;
       opacity: 1;
     }
+
+    [class*='color-text-'] {
+      color: inherit !important;
+    }
+
+    > .Label {
+      color: inherit !important;
+      border-color: currentColor;
+    }
   }
 
   &.btn-link {
@@ -109,16 +119,16 @@
   display: block;
   height: 0;
   margin: $spacer-2 0;
-  border-top: $border;
+  border-top: $border-width $border-style var(--color-border-default);
 }
 
 .dropdown-header {
   padding: $spacer-1 $spacer-3;
   font-size: $h6-size;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 }
 
-.dropdown-item[aria-checked="false"] .octicon-check {
+.dropdown-item[aria-checked='false'] .octicon-check {
   display: none;
 }
 
@@ -140,7 +150,7 @@
     right: -$spacer-3;
     left: auto;
     border-color: transparent;
-    border-left-color: $border-black-fade;
+    border-left-color: var(--color-border-default);
   }
 
   &::after {
@@ -148,7 +158,7 @@
     right: -14px;
     left: auto;
     border-color: transparent;
-    border-left-color: $border-white;
+    border-left-color: var(--color-canvas-overlay);
   }
 }
 
@@ -160,17 +170,17 @@
   margin-left: $spacer-2;
 
   &::before {
-    top: $spacer-2;
+    top: 10px;
     left: -$spacer-3;
     border-color: transparent;
-    border-right-color: $border-black-fade;
+    border-right-color: var(--color-border-default);
   }
 
   &::after {
     top: 11px;
     left: -14px;
     border-color: transparent;
-    border-right-color: $border-white;
+    border-right-color: var(--color-canvas-overlay);
   }
 }
 
@@ -191,7 +201,7 @@
     bottom: -$spacer-2;
     left: 9px;
     // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style $border-black-fade;
+    border-top: $spacer-2 $border-style var(--color-border-default);
     // stylelint-disable-next-line primer/borders
     border-right: $spacer-2 $border-style transparent;
     border-bottom: 0;
@@ -203,7 +213,7 @@
     bottom: -7px;
     left: 10px;
     // stylelint-disable-next-line primer/borders
-    border-top: 7px $border-style $border-white;
+    border-top: 7px $border-style var(--color-canvas-overlay);
     // stylelint-disable-next-line primer/borders
     border-right: 7px $border-style transparent;
     border-bottom: 0;
@@ -258,69 +268,3 @@
     left: 10px;
   }
 }
-
-// Dark dropdowns
-.dropdown-menu-dark {
-  color: $text-white;
-  // stylelint-disable-next-line primer/colors
-  background: $gray-800;
-  border-color: $border-gray-darker;
-  box-shadow: $box-shadow-large;
-
-  &::before {
-    border-bottom-color: $border-gray-darker;
-  }
-
-  &::after {
-    // stylelint-disable-next-line primer/borders
-    border-bottom-color: $gray-800;
-  }
-
-  .dropdown-header {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-300;
-  }
-
-  .dropdown-divider {
-    border-top-color: $border-gray-darker;
-  }
-
-  .dropdown-item {
-    color: inherit;
-  }
-
-  // Directional classes
-
-  &.dropdown-menu-w {
-    &::before {
-      border-color: transparent transparent transparent $border-gray-darker;
-    }
-
-    &::after {
-      // stylelint-disable-next-line primer/borders
-      border-color: transparent transparent transparent $gray-800;
-    }
-  }
-
-  &.dropdown-menu-e {
-    &::before {
-      border-color: transparent $border-gray-darker transparent transparent;
-    }
-
-    &::after {
-      // stylelint-disable-next-line primer/borders
-      border-color: transparent $gray-800 transparent transparent;
-    }
-  }
-
-  &.dropdown-menu-ne {
-    &::before {
-      border-color: $border-gray-darker transparent transparent transparent;
-    }
-
-    &::after {
-      // stylelint-disable-next-line primer/borders
-      border-color: $gray-800 transparent transparent transparent;
-    }
-  }
-}

package/dropdown/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./dropdown.scss";
+@import '../support/index.scss';
+@import './dropdown.scss';

package/forms/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/forms/form-control.scss

@@ -22,33 +22,33 @@ label {
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-default);
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style $border-color;
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  outline: none;
-  box-shadow: $box-shadow-inset;
-
-  &.focus,
-  &:focus {
-    border-color: $border-blue;
-    outline: none;
-    box-shadow: $box-shadow-focus;
-  }
+  box-shadow: var(--color-primer-shadow-inset);
 
   &[disabled] {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
-    // stylelint-disable-next-line primer/colors
-    background-color: #f3f4f6; // custom gray
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-input-disabled-bg);
+    border-color: var(--color-border-default);
+    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    opacity: 1; // Fix for Safari iOS
+
+    &::placeholder {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 
-  // Ensures inputs don't zoom on mobile but are body-font size on desktop
-  @include breakpoint(md) {
-    font-size: $body-font-size;
+  // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
+  @supports (-webkit-touch-callout: none) {
+    font-size: $h4-size;
+    @include breakpoint(md) {
+      font-size: $body-font-size;
+    }
   }
 }
 
@@ -61,41 +61,22 @@ textarea.form-control {
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: $bg-gray-light;
-
-  &:focus { background-color: $bg-white; }
-}
+  background-color: var(--color-canvas-inset);
 
-// Inputs to be used against dark backgrounds.
-.input-dark {
-  color: $text-white;
-  // stylelint-disable-next-line primer/colors
-  background-color: $white-fade-15;
-  border-color: transparent;
-  box-shadow: none;
-
-  &::placeholder {
-    color: inherit;
-    opacity: 0.6; // inceases contrast ratio to 4.52
-  }
-
-  &.focus,
   &:focus {
-    // stylelint-disable-next-line primer/borders
-    border-color: $black-fade-30;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
+    background-color: var(--color-canvas-default);
   }
 }
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: $text-gray-light;
+  color: var(--color-fg-subtle);
   opacity: 1; // override opacity in normalize.css
 }
 
 // Mini inputs, to match .minibutton
 .input-sm {
+  min-height: $size-4;
   // stylelint-disable-next-line primer/spacing
   padding-top: 3px;
   // stylelint-disable-next-line primer/spacing
@@ -149,14 +130,13 @@ textarea.form-control {
       // stylelint-disable-next-line primer/spacing
       padding: 2px $spacer-1;
       font-style: normal;
-      // stylelint-disable-next-line primer/colors
-      background: $yellow-100;
+      background: var(--color-attention-subtle);
       border-radius: $border-radius;
     }
   }
 
-  input[type=checkbox],
-  input[type=radio] {
+  input[type='checkbox'],
+  input[type='radio'] {
     float: left;
     // stylelint-disable-next-line primer/spacing
     margin: 5px 0 0 -20px;
@@ -168,7 +148,7 @@ textarea.form-control {
     margin: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
-    color: $text-gray;
+    color: var(--color-fg-muted);
   }
 }
 
@@ -180,7 +160,7 @@ textarea.form-control {
   &:checked {
     // child of sibling or sibling
     ~ * .form-checkbox-details,
-    ~ .form-checkbox-details { // eslint-disable selector-combinator-space-before
+    ~ .form-checkbox-details {
       display: block;
     }
   }
@@ -206,7 +186,7 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: $text-gray;
+        color: var(--color-fg-muted);
       }
 
       img {
@@ -222,8 +202,10 @@ textarea.form-control {
     margin: 28px 25px 0 -20px;
   }
 
-  // stylelint-disable-next-line primer/spacing
-  .form-select { margin-top: 5px; }
+  .form-select {
+    // stylelint-disable-next-line primer/spacing
+    margin-top: 5px;
+  }
 }
 
 // Hide the up/down buttons in <input type="number"> in the login form, the
@@ -255,11 +237,9 @@ input::-webkit-inner-spin-button {
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  // stylelint-disable-next-line primer/colors
-  color: $yellow-900;
-  // stylelint-disable-next-line primer/colors
-  background: $yellow-100;
-  border: $border-width $border-style $border-yellow;
+  color: var(--color-attention-fg);
+  background: var(--color-attention-subtle);
+  border: $border-width $border-style var(--color-attention-emphasis);
   border-radius: $border-radius;
 
   p {
@@ -267,5 +247,7 @@ input::-webkit-inner-spin-button {
     line-height: $lh-default;
   }
 
-  a { font-weight: $font-weight-bold; }
+  a {
+    font-weight: $font-weight-bold;
+  }
 }

package/forms/form-group.scss

@@ -20,10 +20,10 @@
     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; }
@@ -81,9 +81,9 @@
     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;
@@ -101,8 +101,8 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: $text-red;
-      content: "*";
+      color: var(--color-danger-fg);
+      content: '*';
     }
   }
 
@@ -134,7 +134,7 @@
   &.successful {
     .success {
       display: inline;
-      color: $text-green;
+      color: var(--color-success-fg);
     }
   }
 
@@ -169,7 +169,7 @@
         width: 0;
         height: 0;
         pointer-events: none;
-        content: " ";
+        content: ' ';
         // stylelint-disable-next-line primer/borders
         border: $border-style transparent;
       }
@@ -190,76 +190,59 @@
 
   &.successed {
     .success {
-      // stylelint-disable-next-line primer/colors
-      color: $green-900;
-      // stylelint-disable-next-line primer/colors
-      background-color: $green-100;
-      border-color: $border-green;
+      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 {
-        // stylelint-disable-next-line primer/borders
-        border-bottom-color: $green-100;
-      }
-
-      &::before {
-        border-bottom-color: $border-green;
-      }
+      &::after { border-bottom-color: var(--color-success-subtle); }
+      &::before { border-bottom-color: var(--color-success-muted); }
     }
   }
 
   &.warn {
     .form-control {
-      // stylelint-disable-next-line primer/borders
-      border-color: $yellow-600;
+      border-color: var(--color-attention-emphasis);
     }
 
     .warning {
-      // stylelint-disable-next-line primer/colors
-      background-color: $yellow-200;
-      border-color: $border-yellow;
-
-      &::after {
-        // stylelint-disable-next-line primer/borders
-        border-bottom-color: $yellow-200;
-      }
+      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 {
-      // stylelint-disable-next-line primer/borders
-      border-color: $red-600;
+      border-color: var(--color-danger-emphasis);
     }
 
     label {
-      color: $text-red;
+      color: var(--color-danger-fg);
     }
 
     .error {
-      background-color: $bg-red-light;
-      border-color: $border-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);
 
-      &::after {
-        // stylelint-disable-next-line primer/borders
-        border-bottom-color: $bg-red-light;
-      }
-
-      &::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

package/forms/form-select.scss

@@ -6,11 +6,12 @@
   max-width: 100%;
   height: $size-5;
   padding-right: $spacer-4;
-  background-color: $bg-white;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
+  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 8px center;
-  background-size: 8px 10px;
+  background-position: right 4px center;
+  background-size: 16px;
   appearance: none;
 
   // Hides the default caret in IE11
@@ -23,6 +24,13 @@
   }
 }
 
+@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: $size-4;
   // stylelint-disable-next-line primer/spacing