@papillonbits/css 1.0.0 → 1.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 MTS.
+Copyright (c) 2024 MTS.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/build/primer/base/base.scss

@@ -2,7 +2,7 @@
 @import "../support/variables/typography.scss";
 @import "../support/variables/misc.scss";
 
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
 * {
   box-sizing: border-box;
 }
@@ -20,12 +20,12 @@ body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 a {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
 
   &:hover {
@@ -50,7 +50,7 @@ label {
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-fg-subtle);
+  color: var(--fgColor-muted, var(--color-fg-subtle));
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -65,7 +65,8 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  // stylelint-disable-next-line primer/borders
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();
 }
@@ -76,6 +77,7 @@ hr,
 
 table {
   border-spacing: 0;
+  // stylelint-disable-next-line primer/borders
   border-collapse: collapse;
 }
 
@@ -100,13 +102,6 @@ details {
   summary {
     cursor: pointer;
   }
-
-  &:not([open]) {
-    // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) {
-      display: none !important;
-    }
-  }
 }
 
 // global focus styles

package/build/primer/base/index.scss

@@ -1,4 +1,5 @@
 @import '../support/index.scss';
+@import './native-colors.scss';
 @import './normalize.scss';
 @import './base.scss';
 @import './kbd.scss';

package/build/primer/base/kbd.scss

@@ -7,17 +7,19 @@
 
 kbd {
   display: inline-block;
-  padding: ($spacer-1 - 1) ($spacer-1 + 1);
+  padding: var(--base-size-4);
+  // stylelint-disable-next-line primer/typography
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  // stylelint-disable-next-line primer/borders
+  border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-neutral-muted);
-  border-bottom-color: var(--color-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
 }

package/build/primer/{color-modes/native.scss → base/native-colors.scss}

@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 // Windows High Contrast mode
@@ -18,5 +18,7 @@
   body {
     --color-accent-emphasis: Highlight;
     --color-fg-on-emphasis: LinkText;
+    --fgColor-onEmphasis: LinkText;
+    --fgColor-accent: Highlight;
   }
 }

package/build/primer/base/normalize.scss

@@ -7,6 +7,7 @@
  */
 
 html {
+  font-size: 16px; /* this can be removed when all of GitHub uses rem units */
   font-family: sans-serif; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -152,8 +153,8 @@ h1 {
  */
 
 mark {
-  background-color: var(--color-attention-subtle);
-  color: var(--color-fg-default);
+  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  color: var(--fgColor-default, var(--color-fg-default));
 }
 
 /**
@@ -225,7 +226,7 @@ samp {
  */
 
 figure {
-  margin: 1em $spacer-6;
+  margin: 1em var(--base-size-40);
 }
 
 /**

package/build/primer/base/typography-base.scss

@@ -71,14 +71,18 @@ dd {
 tt,
 code,
 samp {
+  // stylelint-disable-next-line primer/typography
   font-family: $mono-font;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
 }
 
 pre {
   margin-top: 0;
   margin-bottom: 0;
+  // stylelint-disable-next-line primer/typography
   font-family: $mono-font;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
 }
 

package/build/primer/color-modes/index.scss

@@ -9,4 +9,3 @@
 @import './themes/dark_high_contrast.scss';
 @import './themes/dark_colorblind.scss';
 @import './themes/dark_tritanopia.scss';
-@import './native.scss';

package/build/primer/color-modes/themes/dark.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(dark) {
-  @include primer-colors-dark;
-}
+@import '~@primer/primitives/dist/internalCss/dark.css';

package/build/primer/color-modes/themes/dark_colorblind.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(dark_colorblind) {
-  @include primer-colors-dark_colorblind;
-}
+@import '~@primer/primitives/dist/internalCss/dark-colorblind.css';

package/build/primer/color-modes/themes/dark_dimmed.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(dark_dimmed) {
-  @include primer-colors-dark_dimmed;
-}
+@import '~@primer/primitives/dist/internalCss/dark-dimmed.css';

package/build/primer/color-modes/themes/dark_high_contrast.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(dark_high_contrast) {
-  @include primer-colors-dark_high_contrast;
-}
+@import '~@primer/primitives/dist/internalCss/dark-high-contrast.css';

package/build/primer/color-modes/themes/dark_tritanopia.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(dark_tritanopia) {
-  @include primer-colors-dark_tritanopia;
-}
+@import '~@primer/primitives/dist/internalCss/dark-tritanopia.css';

package/build/primer/color-modes/themes/light.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_light.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(light, true) {
-  @include primer-colors-light;
-}
+@import '~@primer/primitives/dist/internalCss/light.css';

package/build/primer/color-modes/themes/light_colorblind.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_light_colorblind.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(light_colorblind) {
-  @include primer-colors-light_colorblind;
-}
+@import '~@primer/primitives/dist/internalCss/light-colorblind.css';

package/build/primer/color-modes/themes/light_high_contrast.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(light_high_contrast) {
-  @include primer-colors-light_high_contrast;
-}
+@import '~@primer/primitives/dist/internalCss/light-high-contrast.css';

package/build/primer/color-modes/themes/light_tritanopia.scss

@@ -1,6 +1 @@
-@import '~@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
-@import '../../support/mixins/color-modes.scss';
-
-@include color-mode-theme(light_tritanopia) {
-  @include primer-colors-light_tritanopia;
-}
+@import '~@primer/primitives/dist/internalCss/light-tritanopia.css';

package/build/primer/index.scss

@@ -1,6 +1,6 @@
 @import './color-modes/index.scss';
+@import './primitives/index.scss';
 @import './support/index.scss';
 @import './base/index.scss';
 @import './truncate/index.scss';
 @import './utilities/index.scss';
-

package/build/primer/primitives/index.scss

@@ -0,0 +1,21 @@
+// https://github.com/primer/primitives
+
+/* size/typography */
+@import '@primer/primitives/dist/css/base/size/size.css';
+@import '@primer/primitives/dist/css/base/typography/typography.css';
+@import '@primer/primitives/dist/css/functional/size/border.css';
+@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
+@import '@primer/primitives/dist/css/functional/size/size.css';
+@import '@primer/primitives/dist/css/functional/size/viewport.css';
+@import '@primer/primitives/dist/css/functional/typography/typography.css';
+
+/* color */
+@import '@primer/primitives/dist/css/functional/themes/light.css';
+@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
+@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
+@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
+@import '@primer/primitives/dist/css/functional/themes/dark.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
+@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';

package/build/primer/support/mixins/color-modes.scss

@@ -1,34 +1,122 @@
+// This mixin is used to output the tokens/variables from Primitives
+//
+// Example:
+//
+// @include color-mode-theme(dark) {
+//   --color: black;
+// }
+//
+// Warning!!!
+// Don't use this mixin with a class. E.g.
+// @include color-mode-theme(dark) {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// The outputted `::selection .my-class` will make the selector invalid and the entire ruleset is disregarded.
+// At some point we hopefully can remove the need for `&, &::selection {}` again (once the spec/implementation changes).
+
 @mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {
     :root,
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
 
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
+      @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
+    }
   }
 
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: light) {
     [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 
   @media (prefers-color-scheme: dark) {
     [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
+      &,
+      &::selection {
+        @content;
+      }
+    }
+
+    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
       @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
     }
   }
 }
 
+// This mixin wraps styles with light or dark mode selectors
+// If possible, use a color variable instead.
+//
+// Example:
+//
+// @include color-mode('dark') {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// Returns:
+//
+// [data-color-mode=light][data-light-theme*=dark] .my-class,
+// [data-color-mode=dark][data-dark-theme*=dark] .my-class {
+//   color: red;
+// }
+//
+// @media (prefers-color-scheme: light) {
+//   [data-color-mode=auto][data-light-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+// @media (prefers-color-scheme: dark) {
+//   [data-color-mode=auto][data-dark-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+
 @mixin color-mode($mode) {
   @if $mode == light {
     :root,
@@ -84,12 +172,10 @@
   @each $name, $value in $color-map {
     @each $type, $color in $value {
       @if $type == dark {
-        // stylelint-disable-next-line function-no-unknown
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
 
       @else {
-        // stylelint-disable-next-line function-no-unknown
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }
     }

package/build/primer/support/mixins/layout.scss

@@ -9,7 +9,6 @@
 
   @else {
     // Retrieves the value from the key
-    // stylelint-disable-next-line function-no-unknown
     $value: map-get($breakpoints, $breakpoint);
 
     // If the key exists in the map

package/build/primer/support/mixins/misc.scss

@@ -1,11 +1,12 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
   &::after,
   &::before {
     position: absolute;
+    // stylelint-disable-next-line primer/spacing
     top: 11px;
     right: 100%;
-    left: -8px;
+    left: calc(var(--base-size-8) * -1);
     display: block;
     width: 8px;
     height: 16px;
@@ -17,7 +18,7 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
     background-image: linear-gradient($background, $background);
   }
 
@@ -29,31 +30,34 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+  border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
+  // stylelint-disable-next-line primer/box-shadow
   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)) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
+  // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-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)) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }
 
 // if min-width is undefined, return only min-height

package/build/primer/support/mixins/typography.scss

@@ -12,32 +12,44 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size, $h1-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size, $h2-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size, $h3-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h4-size, $h4-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h5-size, $h5-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h6-size, $h6-size);
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
@@ -45,28 +57,34 @@
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h1-size, $h1-size);
   }
 }
 
 @mixin f2-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h2-size, $h2-size);
   }
 }
 
 @mixin f3-responsive {
+  // stylelint-disable-next-line primer/typography
   font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/typography
     font-size: var(--h3-size, $h3-size);
   }
 }
@@ -77,17 +95,20 @@
 @mixin h1-responsive {
   @include f1-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
 
+  // stylelint-disable-next-line primer/typography
   font-weight: $font-weight-bold;
 }

package/build/primer/support/variables/misc.scss

@@ -3,8 +3,8 @@
 // Border
 $border-width: 1px !default;
 $border-style: solid !default;
-$border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

package/build/primer/support/variables/typography.scss

@@ -36,7 +36,7 @@ $body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetic
 
 // Monospace font stack
 // Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
-$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
+$mono-font: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace) !default;
 
 // The base body size
 $body-font-size: 14px !default;

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/borders.scss

@@ -3,31 +3,31 @@
 @import "../support/mixins/layout.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;
+  border-right: $border-rem !important;
+  border-left: $border-rem !important;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
-  border-top: $border !important;
-  border-bottom: $border !important;
+  border-top: $border-rem !important;
+  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; }
+    .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; }
+    .border#{$variant}-top    { border-top: $border-rem !important; }
+    .border#{$variant}-right  { border-right: $border-rem !important; }
+    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    .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 +35,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 +50,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 +70,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

@@ -5,19 +5,23 @@
 // 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

@@ -2,94 +2,94 @@
 
 // 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-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-on-emphasis { color: var(--color-fg-on-emphasis) !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, .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, .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

@@ -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,6 @@
 @import "../support/mixins/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";
 
 // Layout
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable 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

@@ -2,8 +2,6 @@
 @import "../support/mixins/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
 

package/build/primer/utilities/padding.scss

@@ -2,7 +2,6 @@
 @import "../support/mixins/layout.scss";
 
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 
@@ -44,16 +43,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";
 
-// stylelint-disable comment-empty-line-before
+// stylelint-disable comment-empty-line-before, 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
@@ -311,7 +311,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

@@ -109,17 +109,18 @@
 
 // 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": "@papillonbits/css",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Papillon Bits CSS",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/css",
   "repository": {
@@ -23,5 +23,5 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "d3a3345971608290c739b1e1383428445b81b310"
+  "gitHead": "3860d47fb63b20d16c8c8d110c8280ff0c89de91"
 }