@papillonarts/css 0.5.0 → 0.7.0

package/build/primer/truncate/truncate.scss

@@ -1,66 +1,2 @@
-// https://raw.githubusercontent.com/primer/view_components/main/app/components/primer/truncate.pcss
-
-/* CSS truncate */
-
-/* css-truncate will shorten text with an ellipsis. */
-
-.css-truncate {
-  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */
-  &.css-truncate-overflow,
-  & .css-truncate-overflow,
-  &.css-truncate-target,
-  & .css-truncate-target {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* css-truncate-target will shorten text with an ellipsis and a max width */
-  &.css-truncate-target,
-  & .css-truncate-target {
-    display: inline-block;
-    max-width: 125px;
-    vertical-align: top;
-  }
-
-  &.expandable.zeroclipboard-is-hover .css-truncate-target,
-  &.expandable.zeroclipboard-is-hover.css-truncate-target,
-  &.expandable:hover .css-truncate-target,
-  &.expandable:hover.css-truncate-target {
-    max-width: 10000px !important;
-  }
-}
-
-// https://raw.githubusercontent.com/primer/view_components/main/app/components/primer/beta/truncate.pcss
-
-// /* Truncate */
-
-.Truncate {
-  display: inline-flex;
-  min-width: 0;
-  max-width: 100%;
-
-  & > .Truncate-text {
-    min-width: 1ch;
-    max-width: fit-content;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    & + .Truncate-text {
-      margin-left: var(--primer-control-small-gap, 4px);
-    }
-
-    &.Truncate-text--primary {
-      flex-basis: 200%;
-    }
-
-    &.Truncate-text--expandable:hover,
-    &.Truncate-text--expandable:focus,
-    &.Truncate-text--expandable:active {
-      max-width: 100% !important;
-      flex-shrink: 0;
-      cursor: pointer;
-    }
-  }
-}
+@import '@primer/view-components/app/components/primer/truncate';
+@import '@primer/view-components/app/components/primer/beta/truncate';

package/build/primer/utilities/README.md

@@ -0,0 +1,20 @@
+---
+bundle: "utilities"
+generated: true
+---
+
+# Primer CSS: `utilities` 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/utilities/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/build/primer/utilities/borders.scss

@@ -1,33 +1,42 @@
-@import "../support/variables/misc.scss";
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
+@import '../support/variables/misc.scss';
 
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before
+// stylelint-disable primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {
-  border-right: $border !important;
-  border-left: $border !important;
+  // stylelint-disable-next-line primer/colors
+  border-right: $border-rem !important;
+  // stylelint-disable-next-line primer/colors
+  border-left: $border-rem !important;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
-  border-top: $border !important;
-  border-bottom: $border !important;
+  // stylelint-disable-next-line primer/colors
+  border-top: $border-rem !important;
+  // stylelint-disable-next-line primer/colors
+  border-bottom: $border-rem !important;
 }
 
 /* Responsive gray borders */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     /* Add a gray border on all sides at/above this breakpoint */
-    .border#{$variant}        { border: $border !important; }
+    // stylelint-disable-next-line primer/colors
+    .border#{$variant}        { border: $border-rem !important; }
     .border#{$variant}-0      { border: 0 !important; }
 
-    .border#{$variant}-top    { border-top: $border !important; }
-    .border#{$variant}-right  { border-right: $border !important; }
-    .border#{$variant}-bottom { border-bottom: $border !important; }
-    .border#{$variant}-left   { border-left: $border !important; }
+    // stylelint-disable-next-line primer/colors
+    .border#{$variant}-top    { border-top: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
+    .border#{$variant}-right  { border-right: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
+    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    // stylelint-disable-next-line primer/colors
+    .border#{$variant}-left   { border-left: $border-rem !important; }
 
     .border#{$variant}-top-0    { border-top: 0 !important; }
     .border#{$variant}-right-0  { border-right: 0 !important; }
@@ -35,11 +44,11 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
-    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
+    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -50,19 +59,19 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
         }
       }
     }
@@ -70,7 +79,7 @@
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+.circle { border-radius: var(--borderRadius-full, 50%) !important; }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {

package/build/primer/utilities/box-shadow.scss

@@ -1,23 +1,25 @@
-@import "../support/variables/misc.scss";
-
 // Box shadow utilities
 
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--color-shadow-small) !important;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
 }
 
 .color-shadow-medium {
-  box-shadow: var(--color-shadow-medium) !important;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
 }
 
 .color-shadow-large {
-  box-shadow: var(--color-shadow-large) !important;
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--color-shadow-extra-large) !important;
+  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
+}
+
+.shadow-floating-small {
+  box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)) !important;
 }
 
 // Turn off box shadow

package/build/primer/utilities/colors.scss

@@ -1,95 +1,94 @@
-// stylelint-disable block-opening-brace-space-before
 
 // Foreground
 
-.color-fg-default     { color: var(--color-fg-default) !important; }
-.color-fg-muted       { color: var(--color-fg-muted) !important; }
-.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
+.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
+.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
+.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
 
-.color-fg-accent    { color: var(--color-accent-fg) !important; }
-.color-fg-success   { color: var(--color-success-fg) !important; }
-.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; }
+.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
+.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
+.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
+.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
+.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
+.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
+.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
+.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
+.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
 
-.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
+.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
 
 // 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-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
+.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
+.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
+.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
+.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, 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, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
+.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !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, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !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, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !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, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !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, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, 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-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, 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-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, 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-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, 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-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
-.color-bg-transparent { background-color: transparent !important; }
+.color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default { border-color: var(--color-border-default) !important; }
-.color-border-muted   { border-color: var(--color-border-muted) !important; }
-.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
+.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
+.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
-.color-border-accent          { border-color: var(--color-accent-muted) !important; }
-.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, 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-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, 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-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, 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-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, 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-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, 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-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, 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-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, 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; }
+.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, 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; }
+.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 
-.color-fg-inherit {
+.color-fg-inherit, .fgColor-inherit {
   color: inherit !important;
 }

package/build/primer/utilities/details.scss

@@ -1,4 +1,4 @@
-@import "../support/mixins/misc.scss";
+@import '../support/mixins/misc.scss';
 
 // stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 
@@ -17,7 +17,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 111;
-  background: var(--color-primer-canvas-backdrop);
+  background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 }
 
 .details-reset {

package/build/primer/utilities/flexbox.scss

@@ -1,7 +1,7 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Flex utility classes
-// stylelint-disable block-opening-brace-space-before
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Flexbox classes

package/build/primer/utilities/layout.scss

@@ -1,7 +1,7 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Layout
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
 /* Position */
 @each $breakpoint, $variant in $responsive-variants {
@@ -73,13 +73,15 @@
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
 /* Max width 100% */
-.width-fit   { max-width: 100% !important; }
+.width-fit         { max-width: 100% !important; }
 /* Set the width to 100% */
-.width-full  { width: 100% !important; }
+.width-full        { width: 100% !important; }
+/* Set the max-width to 65 characters */
+.width-comfortable { max-width: 65ch !important; }
 /* Max height 100% */
-.height-fit  { max-height: 100% !important; }
+.height-fit        { max-height: 100% !important; }
 /* Set the height to 100% */
-.height-full { height: 100% !important; }
+.height-full       { height: 100% !important; }
 
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }

package/build/primer/utilities/margin.scss

@@ -1,10 +1,7 @@
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Margin spacer utilities
-// 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

package/build/primer/utilities/padding.scss

@@ -1,9 +1,7 @@
-@import "../support/variables/layout.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before
-// stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 
 // Responsive padding spacer utilities
@@ -44,16 +42,16 @@
 
 // responsive padding for containers
 .p-responsive {
-  padding-right: var(--base-size-16, $spacer-3) !important;
-  padding-left: var(--base-size-16, $spacer-3) !important;
+  padding-right: var(--base-size-16) !important;
+  padding-left: var(--base-size-16) !important;
 
   @include breakpoint(sm) {
-    padding-right: var(--base-size-40, $spacer-6) !important;
-    padding-left: var(--base-size-40, $spacer-6) !important;
+    padding-right: var(--base-size-40) !important;
+    padding-left: var(--base-size-40) !important;
   }
 
   @include breakpoint(lg) {
-    padding-right: var(--base-size-16, $spacer-3) !important;
-    padding-left: var(--base-size-16, $spacer-3) !important;
+    padding-right: var(--base-size-16) !important;
+    padding-left: var(--base-size-16) !important;
   }
 }

package/build/primer/utilities/typography.scss

@@ -1,7 +1,7 @@
-@import "../support/variables/typography.scss";
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/typography.scss';
 
-// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/typography
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -69,7 +69,7 @@
 .h4,
 .h5,
 .h6 {
-  font-weight: var(--base-text-weight-semibold, $font-weight-bold) !important;
+  font-weight: $font-weight-bold !important;
 }
 
 // Type utilities that match type sale
@@ -123,7 +123,7 @@
 /* Set the font size to 40px and weight to light */
 .f00-light {
   font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h00-size, $h00-size) !important;
@@ -133,7 +133,7 @@
 /* Set the font size to 32px and weight to light */
 .f0-light {
   font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h0-size, $h0-size) !important;
@@ -143,7 +143,7 @@
 /* Set the font size to 26px and weight to light */
 .f1-light {
   font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h1-size, $h1-size) !important;
@@ -153,7 +153,7 @@
 /* Set the font size to 22px and weight to light */
 .f2-light {
   font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h2-size, $h2-size) !important;
@@ -164,7 +164,7 @@
 /* Set the font size to 18px and weight to light */
 .f3-light {
   font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h3-size, $h3-size) !important;
@@ -184,7 +184,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 30px;
   font-size: var(--h3-size, $h3-size);
-  font-weight: var(--base-text-weight-light, $font-weight-light);
+  font-weight: $font-weight-light;
 }
 
 // Line-height variations
@@ -290,6 +290,7 @@
 
 /* Force long "words" to wrap if they exceed the width of the container */
 .wb-break-word {
+    // stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
   word-break: break-word !important;
   // this is for backwards compatibility with browsers that don't respect overflow-wrap
   word-wrap: break-word !important;
@@ -311,7 +312,7 @@
 }
 
 .text-emphasized {
-  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 // List styles

package/build/primer/utilities/visibility-display.scss

@@ -1,4 +1,5 @@
-@import "../support/mixins/layout.scss";
+@import '../support/mixins/layout.scss';
+@import '../support/variables/layout.scss';
 
 // Visibility and display utilities
 
@@ -101,25 +102,26 @@
   height: 1px;
   padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: rect(0 0 0 0);
   // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
-  word-wrap: normal;
+  overflow-wrap: normal;
   border: 0;
 }
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+
+  &:not(:focus) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
 
   &:focus {
     z-index: 999;
-    width: auto;
-    height: auto;
-    clip: auto;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonarts/css",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Papillon Arts CSS",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/css",
   "repository": {
@@ -23,5 +23,5 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "fc275f515c0f1064f8653c1419b4f185567deb1f"
+  "gitHead": "5e6d4750895462f2cb0b1e7840eb0422e98e6043"
 }