@primer/css 20.0.0-rc.8702fd9a → 20.0.0-rc.e6f567ec

package/support/mixins/color-modes.scss

@@ -8,6 +8,7 @@
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
@@ -36,6 +37,7 @@
       @content;
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme*="#{$mode}"],
     [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
@@ -84,6 +86,7 @@
       @if $type == dark {
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
+
       @else {
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }

package/support/mixins/misc.scss

@@ -15,7 +15,8 @@
   }
 
   &::after {
-    margin-left: 1px;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 2px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
@@ -24,3 +25,49 @@
     background-color: $border;
   }
 }
+
+// global focus styles
+
+// inset box-shadow for form controls
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}
+
+// box-shadow for :target styles (no inset)
+// !important to override PCSS utilities
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+  outline: none !important;
+  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
+}
+
+// outline
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: none;
+}
+
+// outline with fg box-shadow for buttons
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 32px, $min-width: '') {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  content: '';
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

package/support/mixins/typography.scss

@@ -47,7 +47,6 @@
 
   // 32px on desktop
   @include breakpoint(md) { font-size: $h1-size; }
-
 }
 
 @mixin f2-responsive {
@@ -62,7 +61,6 @@
 
   // 20px on desktop
   @include breakpoint(md) { font-size: $h3-size; }
-
 }
 
 // These use the mixins from above for responsive heading sizes.
@@ -70,15 +68,18 @@
 // couple the responsive font-size with the font-weight.
 @mixin h1-responsive {
   @include f1-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
+
   font-weight: $font-weight-bold;
 }

package/support/variables/layout.scss

@@ -157,7 +157,7 @@ $responsive-variants: (
   xl: '-xl',
 ) !default;
 
-// responive utility position values
+// responsive utility position values
 $responsive-positions: (
   static,
   relative,
@@ -178,9 +178,8 @@ $sidebar-narrow-width: (
 ) !default;
 
 $sidebar-wide-width: (
-  md: 296px,
   lg: 320px,
-  xl: 344px
+  xl: 336px
 ) !default;
 
 $gutter: (

package/table-object/table-object.scss

@@ -1,3 +1,6 @@
+// Deprecated
+// TODO: Replace TableObject with flexbox or a new Table component
+
 // TableObject is a module for creating dynamically resizable elements that
 // always sit on the same horizontal line (e.g., they never wrap). Using
 // tables means it's cross browser friendly.

package/timeline/timeline-item.scss

@@ -67,7 +67,6 @@
   height: $spacer-4;
   margin: 0;
   margin-bottom: -$spacer-3;
-  // stylelint-disable-next-line primer/spacing
   margin-left: -($spacer-6 + $spacer-3);
   background-color: var(--color-canvas-default);
   border: 0;

package/toasts/toasts.scss

@@ -40,9 +40,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -119,6 +117,11 @@
 }
 
 @keyframes Toast--spinner {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

package/tooltips/tooltips.scss

@@ -264,13 +264,6 @@
   }
 }
 
-@media screen and (min-width: 0\0) {
-  // IE11
-  .tooltipped-multiline::after {
-    width: $tooltip-max-width;
-  }
-}
-
 // Sticky tooltips
 //
 // Always show the tooltip.

package/utilities/colors.scss

@@ -11,6 +11,8 @@
 .color-fg-attention { color: var(--color-attention-fg) !important; }
 .color-fg-severe    { color: var(--color-severe-fg) !important; }
 .color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-open      { color: var(--color-open-fg) !important; }
+.color-fg-closed    { color: var(--color-closed-fg) !important; }
 .color-fg-done      { color: var(--color-done-fg) !important; }
 .color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
 
@@ -39,12 +41,20 @@
 .color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
 .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
 
+.color-bg-open          { background-color: var(--color-open-subtle) !important; }
+.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+
+.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
+.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+
 .color-bg-done          { background-color: var(--color-done-subtle) !important; }
 .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
 
 .color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
 .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
 
+.color-bg-transparent { background-color: transparent !important; }
+
 // Border
 
 .color-border-default { border-color: var(--color-border-default) !important; }
@@ -66,6 +76,12 @@
 .color-border-danger          { border-color: var(--color-danger-muted) !important; }
 .color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
 
+.color-border-open          { border-color: var(--color-open-muted) !important; }
+.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+
+.color-border-closed          { border-color: var(--color-closed-muted) !important; }
+.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+
 .color-border-done          { border-color: var(--color-done-muted) !important; }
 .color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
 

package/utilities/details.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 
 .details-overlay[open] > summary::before {
   position: fixed;
@@ -20,9 +20,86 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > summary {
+    list-style: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    // fallback :focus state
+    &:focus {
+      @include focusOutline;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutline;
+    }
+
+    &.btn-primary {
+      // fallback :focus state
+      &:focus {
+        @include focusOutlineOnEmphasis;
+
+        // remove fallback :focus if :focus-visible is supported
+        &:not(:focus-visible) {
+          outline: solid 1px transparent;
+          box-shadow: none;
+        }
+      }
+
+      // default focus state
+      &:focus-visible {
+        @include focusOutlineOnEmphasis;
+      }
+    }
+  }
   // Remove marker added by details polyfill
-  > summary::before { display: none; }
+  > summary::before {
+    display: none;
+  }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  &.btn-primary {
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
 }

package/utilities/layout.scss

@@ -85,7 +85,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
 
-    // Auto varients
+    // Auto variants
     .width#{$variant}-auto { width: auto !important; }
 
     /* Set the direction to rtl */

package/utilities/margin.scss

@@ -1,5 +1,8 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Loop through the breakpoint values
 @each $breakpoint, $variant in $responsive-variants {

package/utilities/padding.scss

@@ -1,5 +1,7 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Responsive padding spacer utilities
 @each $breakpoint, $variant in $responsive-variants {

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;
   }
@@ -38,6 +38,55 @@
   }
 }
 
+// Show/Hide Viewport range utilities
+
+.show-whenNarrow,
+.show-whenRegular,
+.show-whenWide,
+.show-whenRegular.hide-whenWide {
+  display: none !important;
+}
+
+.hide-whenNarrow,
+.hide-whenRegular,
+.hide-whenWide {
+  display: block !important;
+}
+
+@media (max-width: $width-md - 0.02px) {
+  .show-whenNarrow {
+    display: block !important;
+  }
+
+  .hide-whenNarrow {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-md) {
+  .show-whenRegular,
+  .show-whenRegular.hide-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenRegular {
+    display: none !important;
+  }
+}
+
+// The width of a `wide` viewport range may change as we're finalizing
+// the Primer primitives viewport ranges proposal
+@media (min-width: $width-xl) {
+  .show-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenWide,
+  .show-whenRegular.hide-whenWide {
+    display: none !important;
+  }
+}
+
 /* Set the table-layout to fixed */
 .table-fixed { table-layout: fixed !important; }
 

package/table-object/README.md

@@ -1,25 +0,0 @@
----
-bundle: "table-object"
-generated: true
----
-
-# Primer CSS: `table-object` 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/table-object/index.scss";
-```
-
-## Build
-
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`.
-
-## License
-
-[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
-
-
-[scss]: https://sass-lang.com/documentation/syntax#scss