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

package/buttons/button.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
+// stylelint-disable selector-max-type, no-duplicate-selectors
 
 // Base button styles
 .btn {
@@ -24,12 +24,8 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     cursor: default;
-
-    .octicon {
-      color: inherit;
-    }
   }
 
   i {
@@ -40,7 +36,7 @@
 
   .octicon {
     margin-right: $spacer-1;
-    color: $text-gray-light;
+    color: var(--color-fg-muted);
     vertical-align: text-bottom;
 
     &:only-child {
@@ -54,8 +50,7 @@
     color: inherit;
     text-shadow: none;
     vertical-align: top;
-    // stylelint-disable-next-line primer/colors
-    background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
+    background-color: var(--color-btn-counter-bg);
   }
 
   .dropdown-caret {
@@ -67,125 +62,104 @@
 // Default button
 
 .btn {
-  $bg-default: $bg-gray-light;
-  $bg-hover: #f3f4f6; // custom gray
-  $bg-active: darken($bg-hover, 2%);
-  $bg-disabled: $bg-default;
-
-  color: $text-gray-dark;
-  background-color: $bg-default;
-  border-color: $border-color-button;
-  box-shadow: $box-shadow, $box-shadow-highlight;
-  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  color: var(--color-btn-text);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: $bg-hover;
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
     transition-duration: 0.1s;
   }
 
-  &:active,
-  &.selected,
-  &[aria-selected=true] {
-    background-color: $bg-active;
-    box-shadow: $box-shadow-inset;
+  &:active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
     transition: none;
   }
 
+  &.selected,
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
-    background-color: $bg-disabled;
-    border-color: $border-color-button;
-  }
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
 
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    outline: 1px dotted transparent; // Support Firfox custom colors
-    outline-offset: 2px;
-    box-shadow: $box-shadow-focus;
+    .octicon {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 }
 
 // Primary button
 
 .btn-primary {
-  $bg-default: #2ea44f; // custom green
-  $bg-hover: #2c974b; // custom green
-  $bg-active: darken($bg-hover, 2%);
-  $bg-disabled: #94d3a2; // custom green
-
-  $shadow: $green-900;
-  $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
-
-  color: $text-white;
-  background-color: $bg-default;
-  // stylelint-disable-next-line primer/borders
-  border-color: rgba($black, 0.15);
-  box-shadow: $box-shadow;
+  color: var(--color-btn-primary-text);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: $bg-hover;
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
   }
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
-    background-color: $bg-active;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+  &[aria-selected='true'] {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
-    color: rgba($text-white, 0.8);
-    background-color: $bg-disabled;
-    // stylelint-disable-next-line primer/borders
-    border-color: rgba($black, 0.1);
-    box-shadow: $box-shadow;
-  }
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
 
-  &:focus,
-  &.focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
+    .octicon {
+      color: var(--color-btn-primary-disabled-text);
+    }
   }
 
   .Counter {
     color: inherit;
-    // stylelint-disable-next-line primer/colors
-    background-color: rgba($bg-white, 0.2);
+    background-color: var(--color-btn-primary-counter-bg);
   }
 
   .octicon {
-    // stylelint-disable-next-line primer/colors
-    color: rgba($text-white, 0.8);
+    color: var(--color-btn-primary-icon);
   }
 }
 
-// Mixin: btn-inverse-on-hover
+// Outline button
 
-@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) {
-  color: $color;
-  transition: none;
+.btn-outline {
+  color: var(--color-btn-outline-text);
 
   &:hover,
   [open] > & {
-    color: $text-white;
-    background-color: $bg-hover;
-    border-color: rgba($black, 0.15);
-    box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
+    color: var(--color-btn-outline-hover-text);
+    background-color: var(--color-btn-outline-hover-bg);
+    border-color: var(--color-btn-outline-hover-border);
+    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
 
     .Counter {
-      background-color: rgba($bg-white, 0.2);
+      background-color: var(--color-btn-outline-hover-counter-bg);
     }
 
     .octicon {
@@ -195,67 +169,87 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
-    color: $text-white;
-    background-color: $bg-active;
-    border-color: rgba($black, 0.15);
-    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+  &[aria-selected='true'] {
+    color: var(--color-btn-outline-selected-text);
+    background-color: var(--color-btn-outline-selected-bg);
+    border-color: var(--color-btn-outline-selected-border);
+    box-shadow: var(--color-btn-outline-selected-shadow);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
-    color: rgba($color, 0.5);
-    background-color: $bg-gray-light;
-    border-color: $border-color-button;
-    box-shadow: $box-shadow, $box-shadow-highlight;
+  &[aria-disabled='true'] {
+    color: var(--color-btn-outline-disabled-text);
+    background-color: var(--color-btn-outline-disabled-bg);
+    border-color: var(--color-btn-border);
+    box-shadow: none;
 
     .Counter {
-      background-color: rgba($color, 0.05);
+      background-color: var(--color-btn-outline-disabled-counter-bg);
     }
   }
 
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
-  }
-
   .Counter {
     color: inherit;
-    background-color: rgba($color, 0.1);
+    background-color: var(--color-btn-outline-counter-bg);
   }
 }
 
 // Danger button
 
 .btn-danger {
-  @include btn-inverse-on-hover(
-    $color: $text-red,
-    $bg-hover: $red-600,
-    $bg-active: darken($red-600, 3%),
-    $shadow: $red-900
-  );
-}
+  color: var(--color-btn-danger-text);
 
-// Outline button
+  .octicon {
+    color: var(--color-btn-danger-icon);
+  }
 
-.btn-outline {
-  @include btn-inverse-on-hover(
-    $color: $blue-500,
-    $bg-hover: $blue-500,
-    $bg-active: darken($blue-500, 3%),
-    $shadow: $blue-900
-  );
-}
+  &:hover,
+  [open] > & {
+    color: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
 
-// Solid buttons TODO: Deprecate?
-//
-//
-.btn-blue {
-  @include btn-solid(
-    $text-white,
-    lighten($blue-500, 8%),
-    darken($blue-500, 2%)
-  );
+    .Counter {
+      background-color: var(--color-btn-danger-hover-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-hover-icon);
+    }
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='true'] {
+    color: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+    box-shadow: none;
+
+    .Counter {
+      background-color: var(--color-btn-danger-disabled-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-danger-disabled-text);
+    }
+  }
+
+  .Counter {
+    color: inherit;
+    background-color: var(--color-btn-danger-counter-bg);
+  }
 }
 
 // Sizes

package/buttons/index.scss

@@ -1,4 +1,4 @@
-@import "../support/index.scss";
-@import "./button.scss";
-@import "./button-group.scss";
-@import "./misc.scss";
+@import '../support/index.scss';
+@import './button.scss';
+@import './button-group.scss';
+@import './misc.scss';

package/buttons/misc.scss

@@ -7,7 +7,7 @@
   display: inline-block;
   padding: 0;
   font-size: inherit;
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -21,11 +21,10 @@
   }
 
   &:disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     &,
     &:hover {
-      // stylelint-disable-next-line primer/colors
-      color: rgba($gray-600, 0.5);
+      color: var(--color-primer-fg-disabled);
       cursor: default;
     }
   }
@@ -35,23 +34,34 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
-  border-radius: 0;
+  border-radius: $border-radius;
   box-shadow: none;
 
   &:hover,
+  &.zeroclipboard-is-hover {
+    color: var(--color-accent-fg);
+    background: none;
+    outline: none;
+    box-shadow: none;
+  }
+
   &:active,
-  &:focus,
   &.selected,
-  &[aria-selected=true],
-  &.zeroclipboard-is-hover,
+  &[aria-selected='true'],
   &.zeroclipboard-is-active {
-    color: $text-blue;
+    color: var(--color-accent-fg);
     background: none;
-    outline: none;
-    box-shadow: none;
+    @include focusOutline;
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: transparent;
   }
 }
 
@@ -65,28 +75,31 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   vertical-align: middle;
 
   // For `<button>` elements
   background: transparent;
   border: 0;
+  box-shadow: none;
 
-  &:hover { color: $text-blue; }
+  &:hover {
+    color: var(--color-accent-fg);
+  }
 
   &.disabled,
-  &[aria-disabled=true] {
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    // stylelint-disable-next-line primer/colors
-    &:hover { color: $gray-400; }
+    &:hover {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: $text-red;
+  color: var(--color-danger-fg);
 }
 
 // Close button
@@ -94,9 +107,17 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
+  color: var(--color-fg-muted);
   background: transparent;
   border: 0;
-  outline: none;
+
+  &:hover {
+    color: var(--color-fg-default);
+  }
+
+  &:active {
+    @include focusOutline;
+  }
 }
 
 // Hidden text button
@@ -125,26 +146,22 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-fg-default);
   text-decoration: none;
   vertical-align: middle;
-  // stylelint-disable-next-line primer/colors
-  background: lighten($gray-300, 5%);
+  background: var(--color-neutral-muted);
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    // stylelint-disable-next-line primer/colors
-    background-color: darken($gray-300, 4%);
+    background-color: var(--color-accent-muted);
   }
 
   &:active {
-    color: $text-white;
-    // stylelint-disable-next-line primer/colors
-    background-color: $blue-400;
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 }
 
@@ -174,14 +191,14 @@
   font-weight: $font-weight-bold;
   // 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;
-  border: $border-width $border-style $border-color-button;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-btn-border);
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: $box-shadow, $box-shadow-highlight;
+  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
 
   &:hover,
   &:active {
@@ -189,13 +206,7 @@
   }
 
   &:hover {
-    color: $text-blue;
+    color: var(--color-accent-fg);
     cursor: pointer;
   }
-
-  &:focus {
-    z-index: 1;
-    outline: 0;
-    box-shadow: $box-shadow-focus;
-  }
 }

package/color-modes/index.scss

@@ -0,0 +1,9 @@
+// All themes
+
+@import './themes/light.scss';
+@import './themes/light_colorblind.scss';
+@import './themes/dark.scss';
+@import './themes/dark_dimmed.scss';
+@import './themes/dark_high_contrast.scss';
+@import './themes/dark_colorblind.scss';
+@import './native.scss';

package/color-modes/native.scss

@@ -0,0 +1,10 @@
+// color-scheme
+// Enables color modes for native elements
+
+@include color-mode(light) { color-scheme: light; }
+@include color-mode(dark) { color-scheme: dark; }
+
+[data-color-mode] {
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+}

package/color-modes/themes/dark.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark.scss";
+
+@include color-mode-theme(dark) {
+  @include primer-colors-dark;
+}

package/color-modes/themes/dark_colorblind.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark_colorblind.scss";
+
+@include color-mode-theme(dark_colorblind) {
+  @include primer-colors-dark_colorblind;
+}

package/color-modes/themes/dark_dimmed.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";
+
+@include color-mode-theme(dark_dimmed) {
+  @include primer-colors-dark_dimmed;
+}

package/color-modes/themes/dark_high_contrast.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark_high_contrast.scss";
+
+@include color-mode-theme(dark_high_contrast) {
+  @include primer-colors-dark_high_contrast;
+}

package/color-modes/themes/light.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_light.scss";
+
+@include color-mode-theme(light, true) {
+  @include primer-colors-light;
+}

package/color-modes/themes/light_colorblind.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_light_colorblind.scss";
+
+@include color-mode-theme(light_colorblind) {
+  @include primer-colors-light_colorblind;
+}

package/core/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/core/index.scss

@@ -5,24 +5,25 @@
  * Released under MIT license. Copyright (c) 2019 GitHub Inc.
  */
 
-// Include .octicon base styles
-@import "@primer/octicons/index.scss";
-
 // Global requirements
-@import "../support/index.scss";
+@import '../support/index.scss';
+
+// Color modes
 
 // Core modules
-@import "../base/index.scss";
-@import "../box/index.scss";
-@import "../breadcrumb/index.scss";
-@import "../buttons/index.scss";
-@import "../table-object/index.scss";
-@import "../forms/index.scss";
-@import "../layout/index.scss";
-@import "../navigation/index.scss";
-@import "../pagination/index.scss";
-@import "../tooltips/index.scss";
-@import "../truncate/index.scss";
+@import '../actionlist/index.scss';
+@import '../base/index.scss';
+@import '../box/index.scss';
+@import '../breadcrumb/index.scss';
+@import '../buttons/index.scss';
+@import '../table-object/index.scss';
+@import '../forms/index.scss';
+@import '../layout/index.scss';
+@import '../links/index.scss';
+@import '../navigation/index.scss';
+@import '../pagination/index.scss';
+@import '../tooltips/index.scss';
+@import '../truncate/index.scss';
 
 // Utilities always go last so that they can override components
-@import "../utilities/index.scss";
+@import '../utilities/index.scss';