Move ToggleSwitch styles to PVC

.changeset/silent-starfishes-shake.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `ToggleSwitch` styles to PVC

app/components/primer/alpha/toggle_switch.pcss

@@ -0,0 +1,244 @@
+/* ToggleSwitch */
+
+/* Catalyst in dotcom applies a display: block to all web component elements. This
+** rule overrides it so the status label and toggle switch are laid out correctly. */
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
+.ToggleSwitch {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--primer-controlStack-medium-gap-condensed, 8px);
+
+  &:hover {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-hover-bg);
+    }
+  }
+
+  &:active {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-active-bg);
+    }
+  }
+}
+
+.ToggleSwitch--checked {
+  & .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+  & .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+}
+
+.ToggleSwitch-track {
+  position: relative;
+  display: block;
+  width: var(--base-size-64, 64px);
+  height: var(--primer-control-medium-size, 32px);
+  padding: 0;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--color-switch-track-bg);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: background-color, border-color;
+  appearance: none;
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+
+  @media (pointer: coarse) {
+    &::before {
+      @mixin minTouchTarget 44px;
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+
+    & * {
+      transition: none;
+    }
+  }
+}
+
+.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-subtle);
+
+  &:hover,
+  &:active {
+    background-color: var(--color-canvas-subtle);
+
+    /* This is the most straightforward way of setting the knob's styles when the
+    ** switch is both checked and disabled. */
+
+    & .ToggleSwitch-knob {
+      background-color: var(--color-switch-knob-checked-disabled-bg);
+    }
+  }
+
+  & .ToggleSwitch-knob {
+    background-color: var(--color-switch-knob-checked-disabled-bg);
+  }
+}
+
+.ToggleSwitch-track[aria-checked='true'] {
+  background-color: var(--color-switch-track-checked-bg);
+  border-color: var(--color-switch-track-checked-border);
+
+  &:hover {
+    background-color: var(--color-switch-track-checked-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--color-switch-track-checked-active-bg);
+  }
+
+  & .ToggleSwitch-knob {
+    background-color: var(--color-switch-knob-checked-bg);
+    border: 0;
+    transform: translateX(calc(100% + 1px));
+  }
+
+  & .ToggleSwitch-lineIcon {
+    transform: translateX(0%);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    transform: translateX(100%);
+  }
+}
+
+.ToggleSwitch-track[aria-disabled='true'] {
+  cursor: not-allowed;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-subtle);
+  transition-property: none;
+
+  &:hover,
+  &:active {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-bg);
+    }
+  }
+
+  & .ToggleSwitch-knob {
+    border-color: var(--color-border-default);
+    box-shadow: none;
+
+    &:hover,
+    &:active {
+      background-color: var(--color-btn-bg);
+    }
+  }
+
+  & .ToggleSwitch-lineIcon {
+    color: var(--color-fg-subtle);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    color: var(--color-fg-subtle);
+  }
+}
+
+.ToggleSwitch-icons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ToggleSwitch-lineIcon {
+  line-height: 0;
+  color: var(--color-accent-fg);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-100%);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-circleIcon {
+  line-height: 0;
+  color: var(--color-fg-default);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(0);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-knob {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  z-index: 1;
+  width: 50%;
+  background-color: var(--color-btn-bg);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-1px);
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.ToggleSwitch-status {
+  position: relative;
+  font-size: var(--primer-text-body-size-medium, 14px);
+  line-height: 1.5;
+  color: var(--color-fg-default);
+  text-align: right;
+}
+
+.ToggleSwitch--small {
+  & .ToggleSwitch-status {
+    font-size: var(--primer-text-body-size-small, 12px);
+  }
+
+  & .ToggleSwitch-track {
+    width: var(--base-size-48, 48px);
+    height: var(--primer-control-xsmall-size, 24px);
+  }
+}
+
+.ToggleSwitch--disabled {
+  & .ToggleSwitch-status {
+    color: var(--color-fg-muted);
+  }
+}
+
+.ToggleSwitch-statusOn {
+  height: 0;
+  visibility: hidden;
+}
+
+.ToggleSwitch-statusOff {
+  height: auto;
+  visibility: visible;
+}
+
+.ToggleSwitch--statusAtEnd {
+  flex-direction: row-reverse;
+
+  & .ToggleSwitch-status {
+    text-align: left;
+  }
+}

app/components/primer/primer.pcss

@@ -1,6 +1,7 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
 @import "./alpha/banner.pcss";
+@import "./alpha/toggle_switch.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";

demo/app/assets/stylesheets/application.css

@@ -28,5 +28,4 @@
  *= require @primer/css/dist/subhead.css
  *= require @primer/css/dist/timeline.css
  *= require @primer/css/dist/toasts.css
- *= require @primer/css/dist/toggle-switch.css
 */