@primer/brand-css 0.79.1-rc.ed00156c → 0.80.0-rc.4bfa3a79

package/components/Accordion/Accordion.css

@@ -301,6 +301,13 @@ details[open] > .Accordion__summary .Accordion__summary-toggleIcon {
   -moz-osx-font-smoothing: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .Accordion__content {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 .Accordion__content p:not(:first-child) {
   margin-block-start: var(--base-size-16);
 }

package/components/FeatureComparisonTable/FeatureComparisonTable.css

@@ -5,6 +5,7 @@
   container-type: inline-size;
   width: 100%;
   color: var(--brand-color-text-default);
+  background-color: var(--brand-color-canvas-default);
 }
 
 .FeatureComparisonTable--items2 {
@@ -337,9 +338,6 @@
 
   .FeatureComparisonTable__tableCell {
     text-align: center;
-  }
-
-  .FeatureComparisonTable__tableCell--hasVariant {
     vertical-align: middle;
   }
 
@@ -383,6 +381,17 @@
     background-color: var(--brand-color-canvas-default);
   }
 
+  .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::before {
+    content: '';
+    inset: 0;
+    height: auto;
+    border: 0;
+    -o-border-image: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) 0;
+       border-image: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) fill 0;
+    border-image-outset: 0 100vw;
+    z-index: -1;
+  }
+
   .FeatureComparisonTable--stickyHeaders .FeatureComparisonTable__headingGrid::after {
     z-index: 4;
   }

package/components/Heading/Heading.css

@@ -20,6 +20,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .Heading {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
 .Heading-font--mona-sans {
   font-family: var(--brand-heading-fontFamily);
 }

package/components/IconButton/IconButton.css

@@ -84,23 +84,19 @@
   height: var(--brand-IconButton-icon-size-large);
 }
 
-.IconButton__loadingIndicator.IconButton__loadingIndicator {
+.IconButton__spinner.IconButton__spinner {
   display: block;
-  box-sizing: border-box;
   width: var(--brand-IconButton-icon-size-medium);
   height: var(--brand-IconButton-icon-size-medium);
-  border: var(--brand-borderWidth-thin) solid currentcolor;
-  border-inline-end-color: transparent;
-  border-radius: 50%;
-  animation: IconButton-spin var(--brand-IconButton-loadingIndicator-animationDuration-default) linear infinite;
+  animation-duration: var(--brand-IconButton-spinner-animationDuration-default);
 }
 
-.IconButton--small .IconButton__loadingIndicator {
+.IconButton--small .IconButton__spinner {
   width: var(--brand-IconButton-icon-size-small);
   height: var(--brand-IconButton-icon-size-small);
 }
 
-.IconButton--large .IconButton__loadingIndicator {
+.IconButton--large .IconButton__spinner {
   width: var(--brand-IconButton-icon-size-large);
   height: var(--brand-IconButton-icon-size-large);
 }
@@ -117,26 +113,19 @@
   border: 0;
 }
 
-@keyframes IconButton-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (forced-colors: active) {
   .IconButton--inactive {
     color: GrayText;
     border-color: GrayText;
   }
 
-  .IconButton__loadingIndicator {
-    border-color: ButtonText;
-    border-inline-end-color: transparent;
+  .IconButton__spinner {
+    color: ButtonText;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .IconButton__loadingIndicator {
-    animation-duration: var(--brand-IconButton-loadingIndicator-animationDuration-reducedMotion);
+  .IconButton__spinner {
+    animation-duration: var(--brand-IconButton-spinner-animationDuration-reducedMotion);
   }
 }

package/components/InlineLink/InlineLink.css

@@ -29,6 +29,13 @@
   -moz-osx-font-smoothing: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .InlineLink {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .InlineLink,

package/components/Label/Label.css

@@ -38,6 +38,13 @@
   -moz-osx-font-smoothing: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .Label {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 .Label::before {
   content: '';
   position: absolute;

package/components/LogoSuite/LogoSuite.css

@@ -75,21 +75,25 @@
   display: block;
 }
 
-.LogoSuite__logobar--variant-muted svg,
-.LogoSuite__logobar--variant-muted path {
+.LogoSuite__logobar--has-linked-logos :where(a) {
+  color: var(--brand-color-text-default);
+}
+
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) path {
   fill: var(--brand-LogoSuite-color-logo-muted);
 }
 
-.LogoSuite__logobar--variant-muted img {
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) img {
   filter: var(--brand-LogoSuite-color-logo-filter-muted);
 }
 
-.LogoSuite__logobar--variant-emphasis svg,
-.LogoSuite__logobar--variant-emphasis path {
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) path {
   fill: var(--brand-LogoSuite-color-logo-emphasis);
 }
 
-.LogoSuite__logobar--variant-emphasis img {
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) img {
   filter: var(--brand-LogoSuite-color-logo-filter-emphasis);
 }
 
@@ -226,45 +230,88 @@
   fill: var(--brand-color-text-muted);
 }
 
-/* Gridline expressive variant styles */
+/* Shared gridline variant styles */
+.LogoSuite--gridline,
 .LogoSuite--gridline-expressive {
   padding: 0;
 }
 
+.LogoSuite--gridline .LogoSuite__content,
 .LogoSuite--gridline-expressive .LogoSuite__content {
   padding-inline: 0;
   gap: 0;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__textContainer {
+.LogoSuite--gridline .LogoSuite__textContainer,
+.LogoSuite--gridline-expressive .LogoSuite__textContainer,
+.LogoSuite--gridline .LogoSuite__logobarContainer,
+.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--base-size-20);
 }
 
+.LogoSuite--gridline .LogoSuite__logobar,
 .LogoSuite--gridline-expressive .LogoSuite__logobar {
   margin-block-start: auto;
+  padding-block-start: 0;
 }
-.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);
+
+.LogoSuite--gridline .LogoSuite__heading + .LogoSuite__description,
+.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {
+  padding-block-start: var(--base-size-8);
 }
 
+.LogoSuite--gridline .LogoSuite__logobar,
+.LogoSuite--gridline .LogoSuite__logobar--has-marquee,
 .LogoSuite--gridline-expressive .LogoSuite__logobar,
 .LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {
-  max-width: none;
   width: 100%;
+  max-width: none;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {
-  padding-block-start: var(--base-size-8);
+/* Gridline variant styles */
+.LogoSuite--gridline .LogoSuite__textContainer {
+  padding: var(--base-size-40) var(--base-size-20) 0;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__logobar {
-  padding-block-start: 0;
+.LogoSuite--gridline .LogoSuite__logobarContainer {
+  padding: var(--base-size-40) var(--base-size-20) var(--base-size-48);
+}
+
+@media screen and (min-width: 48rem) {
+  .LogoSuite--gridline .LogoSuite__textContainer {
+    padding: var(--base-size-48) var(--base-size-40) 0;
+  }
+
+  .LogoSuite--gridline .LogoSuite__logobarContainer {
+    padding: var(--base-size-40) var(--base-size-40) var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 64rem) {
+  .LogoSuite--gridline .LogoSuite__textContainer {
+    padding: var(--base-size-48) var(--base-size-64) 0;
+  }
+
+  .LogoSuite--gridline .LogoSuite__logobarContainer {
+    padding: var(--base-size-48) var(--base-size-64) var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .LogoSuite--gridline .LogoSuite__content {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+/* Gridline expressive variant styles */
+.LogoSuite--gridline-expressive .LogoSuite__textContainer {
+  padding: var(--base-size-20);
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
+  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);
 }
 
 @media screen and (min-width: 48rem) {

package/components/NavList/NavList.css

@@ -458,6 +458,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .NavList {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .NavList,
   .NavList::before,

package/components/Spinner/Spinner.css

@@ -0,0 +1,41 @@
+.Spinner__box {
+  display: inline-flex;
+}
+
+.Spinner {
+  display: block;
+  box-sizing: border-box;
+  overflow: visible;
+  color: var(--brand-Spinner-fgColor);
+  animation-name: Spinner-spin;
+  animation-duration: var(--brand-Spinner-animationDuration-default);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.Spinner--small {
+  width: var(--brand-Spinner-size-small);
+  height: var(--brand-Spinner-size-small);
+}
+
+.Spinner--medium {
+  width: var(--brand-Spinner-size-medium);
+  height: var(--brand-Spinner-size-medium);
+}
+
+.Spinner--large {
+  width: var(--brand-Spinner-size-large);
+  height: var(--brand-Spinner-size-large);
+}
+
+@keyframes Spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Spinner {
+    animation-duration: var(--brand-Spinner-animationDuration-reducedMotion);
+  }
+}

package/components/SubNav/SubNav.css

@@ -26,6 +26,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .SubNav {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
 .SubNav__heading,
 .SubNav__subHeading {
   display: block;

package/components/Text/Text.css

@@ -7,6 +7,13 @@
   -moz-osx-font-smoothing: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .Text--antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 .Text--default {
   color: var(--brand-color-text-default);
 }

package/components/Token/Token.css

@@ -32,6 +32,13 @@
   -moz-osx-font-smoothing: auto;
 }
 
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'] .Token {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 .Token--variant-default {
   background-color: var(--brand-Token-bgColor-default);
   color: var(--brand-Token-fgColor-default);

package/components/forms/FormControl/FormControl.css

@@ -14,6 +14,44 @@
   grid-template-columns: auto 1fr;
 }
 
+.FormControl--toggle-switch {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  -moz-column-gap: var(--brand-ToggleSwitch-label-gap);
+       column-gap: var(--brand-ToggleSwitch-label-gap);
+  align-items: center;
+}
+
+.FormControl-control--toggle-switch {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+}
+
+.FormControl-label--toggle-switch {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+
+.FormControl-label--medium.FormControl-label--toggle-switch {
+  font-size: var(--brand-ToggleSwitch-label-fontSize);
+  line-height: max(var(--brand-ToggleSwitch-label-lineHeight), var(--brand-ToggleSwitch-target-minHeight));
+}
+
+.FormControl-toggleSwitch-spinnerSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--brand-ToggleSwitch-loading-size);
+  height: var(--brand-ToggleSwitch-loading-size);
+  margin-inline-start: var(--brand-ToggleSwitch-loading-gap);
+  vertical-align: middle;
+  pointer-events: none;
+}
+
 .FormControl--border {
   border: 1px solid var(--brand-control-color-border-default);
   border-radius: var(--brand-borderRadius-medium);
@@ -71,6 +109,7 @@
 
 /*Validation*/
 .FormControl-validation {
+  grid-column: 1 / 3;
   display: flex;
   gap: var(--base-size-4);
   align-items: center;
@@ -81,7 +120,7 @@
 }
 
 .FormControl-validation--error {
-  color: var(--brand-color-danger-fg);
+  color: var(--brand-control-color-validation-error);
 }
 
 .FormControl-validation-success-icon {
@@ -106,7 +145,3 @@
     transform: translateY(0);
   }
 }
-
-.FormControl-validation-checkbox {
-  grid-column: 1 / 3;
-}

package/components/forms/ToggleSwitch/ToggleSwitch.css

@@ -0,0 +1,162 @@
+.ToggleSwitch {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--brand-ToggleSwitch-loading-gap);
+  vertical-align: middle;
+}
+
+.ToggleSwitch-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--brand-ToggleSwitch-target-minHeight);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.ToggleSwitch-button:focus-visible {
+  outline: none;
+}
+
+.ToggleSwitch-button:focus-visible .ToggleSwitch-track {
+  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);
+  outline-offset: var(--brand-ToggleSwitch-focus-offset);
+}
+
+.ToggleSwitch-button--unavailable {
+  cursor: not-allowed;
+}
+
+.ToggleSwitch-track {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);
+  border-radius: var(--brand-ToggleSwitch-track-borderRadius);
+  background: var(--brand-ToggleSwitch-track-bgColor);
+}
+
+.ToggleSwitch-thumb {
+  position: absolute;
+  top: 50%;
+  box-sizing: border-box;
+  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);
+  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);
+  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);
+  transform: translateY(-50%);
+  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);
+}
+
+.ToggleSwitch-thumb--checked {
+  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);
+}
+
+.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {
+  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);
+}
+
+.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {
+  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);
+}
+
+.ToggleSwitch-thumb--disabled {
+  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);
+}
+
+.ToggleSwitch--medium .ToggleSwitch-track {
+  width: var(--brand-ToggleSwitch-track-width-medium);
+  height: var(--brand-ToggleSwitch-track-height-medium);
+}
+
+.ToggleSwitch--small .ToggleSwitch-track {
+  width: var(--brand-ToggleSwitch-track-width-small);
+  height: var(--brand-ToggleSwitch-track-height-small);
+}
+
+.ToggleSwitch--medium .ToggleSwitch-thumb {
+  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));
+  width: var(--brand-ToggleSwitch-thumb-size-medium);
+  height: var(--brand-ToggleSwitch-thumb-size-medium);
+}
+
+.ToggleSwitch--small .ToggleSwitch-thumb {
+  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));
+  width: var(--brand-ToggleSwitch-thumb-size-small);
+  height: var(--brand-ToggleSwitch-thumb-size-small);
+}
+
+.ToggleSwitch--medium .ToggleSwitch-thumb--checked {
+  inset-inline-start: calc(
+    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +
+      var(--brand-ToggleSwitch-thumb-travel-medium)
+  );
+}
+
+.ToggleSwitch--small .ToggleSwitch-thumb--checked {
+  inset-inline-start: calc(
+    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +
+      var(--brand-ToggleSwitch-thumb-travel-small)
+  );
+}
+
+.ToggleSwitch-spinnerSlot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--brand-ToggleSwitch-loading-size);
+  width: var(--brand-ToggleSwitch-loading-size);
+  height: var(--brand-ToggleSwitch-loading-size);
+  pointer-events: none;
+}
+
+.ToggleSwitch-spinner {
+  color: var(--brand-ToggleSwitch-loading-fgColor);
+  animation-duration: var(--brand-ToggleSwitch-loading-duration);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ToggleSwitch-thumb {
+    transition: none;
+  }
+
+  .ToggleSwitch-spinner {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ToggleSwitch-track {
+    border-color: ButtonText;
+    background: Canvas;
+  }
+
+  .ToggleSwitch-thumb,
+  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background: ButtonText;
+  }
+
+  .ToggleSwitch-thumb--checked,
+  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {
+    background: Highlight;
+  }
+
+  .ToggleSwitch-thumb--disabled {
+    background: GrayText;
+  }
+
+  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {
+    outline-color: Highlight;
+  }
+
+  .ToggleSwitch-spinner {
+    color: CanvasText;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.79.1-rc.ed00156c",
+  "version": "0.80.0-rc.4bfa3a79",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",