@primer/brand-css 0.79.1-rc.5d6b749b → 0.80.0-rc.e1dc6447

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/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/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.5d6b749b",
+  "version": "0.80.0-rc.e1dc6447",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",