@primer/css 0.0.0-202198211147 → 0.0.0-20220106235309

package/utilities/colors.scss

@@ -18,43 +18,32 @@
 
 // Background
 
-.color-bg-default { background-color: var(--color-canvas-default) !important; }
-.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
-.color-bg-inset   { background-color: var(--color-canvas-inset) !important; }
-.color-bg-subtle  { background-color: var(--color-canvas-subtle) !important; }
-
-.color-bg-neutral-emphasis-plus { background-color: var(--color-neutral-emphasis-plus) !important; }
-.color-bg-neutral-emphasis      { background-color: var(--color-neutral-emphasis) !important; }
-.color-bg-neutral-muted         { background-color: var(--color-neutral-muted) !important; }
-.color-bg-neutral-subtle        { background-color: var(--color-neutral-subtle) !important; }
+.color-bg-default  { background-color: var(--color-canvas-default) !important; }
+.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
 
+.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
 .color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
-.color-bg-accent-muted    { background-color: var(--color-accent-muted) !important; }
-.color-bg-accent-subtle   { background-color: var(--color-accent-subtle) !important; }
 
+.color-bg-success          { background-color: var(--color-success-subtle) !important; }
 .color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
-.color-bg-success-muted    { background-color: var(--color-success-muted) !important; }
-.color-bg-success-subtle   { background-color: var(--color-success-subtle) !important; }
 
+.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
 .color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
-.color-bg-attention-muted    { background-color: var(--color-attention-muted) !important; }
-.color-bg-attention-subtle   { background-color: var(--color-attention-subtle) !important; }
 
+.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
 .color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
-.color-bg-severe-muted    { background-color: var(--color-severe-muted) !important; }
-.color-bg-severe-subtle   { background-color: var(--color-severe-subtle) !important; }
 
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
 .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
-.color-bg-danger-muted    { background-color: var(--color-danger-muted) !important; }
-.color-bg-danger-subtle   { background-color: var(--color-danger-subtle) !important; }
 
+.color-bg-done          { background-color: var(--color-done-subtle) !important; }
 .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
-.color-bg-done-muted    { background-color: var(--color-done-muted) !important; }
-.color-bg-done-subtle   { background-color: var(--color-done-subtle) !important; }
 
+.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
 .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
-.color-bg-sponsors-muted    { background-color: var(--color-sponsors-muted) !important; }
-.color-bg-sponsors-subtle   { background-color: var(--color-sponsors-subtle) !important; }
 
 // Border
 
@@ -62,13 +51,26 @@
 .color-border-muted   { border-color: var(--color-border-muted) !important; }
 .color-border-subtle  { border-color: var(--color-border-subtle) !important; }
 
-.color-border-accent    { border-color: var(--color-accent-emphasis) !important; }
-.color-border-success   { border-color: var(--color-success-emphasis) !important; }
-.color-border-attention { border-color: var(--color-attention-emphasis) !important; }
-.color-border-severe    { border-color: var(--color-severe-emphasis) !important; }
-.color-border-danger    { border-color: var(--color-danger-emphasis) !important; }
-.color-border-done      { border-color: var(--color-done-emphasis) !important; }
-.color-border-sponsors  { border-color: var(--color-sponsors-emphasis) !important; }
+.color-border-accent          { border-color: var(--color-accent-muted) !important; }
+.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+
+.color-border-success          { border-color: var(--color-success-muted) !important; }
+.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+
+.color-border-attention          { border-color: var(--color-attention-muted) !important; }
+.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+
+.color-border-severe          { border-color: var(--color-severe-muted) !important; }
+.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+
+.color-border-danger          { border-color: var(--color-danger-muted) !important; }
+.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+
+.color-border-done          { border-color: var(--color-done-muted) !important; }
+.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+
+.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
+.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
 
 // Misc
 

package/utilities/details.scss

@@ -9,7 +9,7 @@
   z-index: 80;
   display: block;
   cursor: default;
-  content: " ";
+  content: ' ';
   background: transparent;
 }
 

package/utilities/index.scss

@@ -1,14 +1,14 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 // utilities
-@import "./animations.scss";
-@import "./borders.scss";
-@import "./box-shadow.scss";
-@import "./colors.scss";
-@import "./details.scss";
-@import "./flexbox.scss";
-@import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";
-@import "./typography.scss";
+@import './animations.scss';
+@import './borders.scss';
+@import './box-shadow.scss';
+@import './colors.scss';
+@import './details.scss';
+@import './flexbox.scss';
+@import './layout.scss';
+@import './margin.scss';
+@import './padding.scss';
+@import './typography.scss';
 // Visibility and display should always come last in the imports so that they override other utilities with !important
-@import "./visibility-display.scss";
+@import './visibility-display.scss';

package/utilities/visibility-display.scss

@@ -14,19 +14,19 @@
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm - 1px) {
+@media (max-width: $width-sm - 0.02px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
+@media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
   .hide-md {
     display: none !important;
   }
 }
 
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
+@media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
   .hide-lg {
     display: none !important;
   }

package/actionlist/action-list-divider.scss

@@ -1,72 +0,0 @@
-// waiting on https://github.com/primer/primitives/pull/256 for these primitives
-$actionList-item-hover-bg: #f0f3f5;
-$actionList-item-active-bg: #e8ebed;
-$actionList-item-selected-bg: #f0f3f5;
-$actionList-item-focus-bg: #e0e4e7;
-$actionList-item-divider: #e9e9ed;
-
-$actionList-item-danger-hover-bg: #fff0f2;
-$actionList-item-danger-active-bg: #ffebed;
-$actionList-item-danger-focus-bg: #ffdbe0;
-
-// expanded from src/support/variables/layout.scss
-// adds 12px to the scale as of https://github.com/github/design-systems/issues/992
-//
-// https://github.com/github/design-systems/issues/1272
-
-$s-20: 20px;
-$s-28: 28px;
-
-// CSS Easing
-
-$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-$ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
-$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-// $actionList-item-padding-vertical: (($spacer-5 - $s-20) / 2); hmmmmm
-$actionList-item-padding-vertical: 6px;
-$actionList-item-padding-horizontal: $spacer-2;
-$actionList-item-bg-transition: background 33.333ms linear; // 2 frames on a 60hz monitor
-
-// emtpy divider
-
-.actionList-sectionDivider {
-  height: 1px;
-  background: $actionList-item-divider;
-  border: 0;
-  margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
-  padding: 0;
-}
-
-.actionList-sectionDivider--filled {
-  margin: $spacer-2 ($spacer-2 * -1);
-  background: var(--color-canvas-subtle);
-  border-top: 1px solid var(--color-scale-gray-2);
-  border-bottom: 1px solid var(--color-scale-gray-2);
-
-  // if no children, treat as divider
-  &:empty {
-    height: $spacer-2;
-    box-sizing: border-box;
-  }
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-// section header
-
-.actionList-sectionHeader {
-  // 32px total height considering 20px line-height
-  padding: (($spacer-5 - $s-20) / 2) $spacer-2;
-  font-size: $font-size-small;
-  font-weight: $font-weight-bold;
-  color: var(--color-fg-muted);
-  display: flex;
-  flex-direction: column;
-
-  .actionList-sectionHeader--description {
-    font-size: $font-size-small;
-    font-weight: $font-weight-normal;
-  }
-}

package/color-modes/themes/dark_protanopia.scss

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

package/color-modes/themes/light_protanopia.scss

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

package/marketing/support/mixins.scss

@@ -1,66 +0,0 @@
-@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
-  color: $color;
-  background-color: $bg2;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-
-  &::before {
-    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    background-color: $bg2;
-    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.5;
-  }
-}
-
-@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
-  color: $color;
-  background: none;
-  box-shadow: 0 0 0 1px $border inset;
-
-  &::before {
-    display: none;
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $color2;
-    background: none;
-    box-shadow: 0 0 0 2px $borderHover inset;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    opacity: 0.5;
-  }
-}