@primer/css 20.1.1 → 20.2.0

package/dist/toggle-switch.css

@@ -0,0 +1,2 @@
+.ToggleSwitch{align-items:center;display:inline-flex;gap:8px}.ToggleSwitch:hover .ToggleSwitch-knob{background-color:var(--color-btn-hover-bg)}.ToggleSwitch:active .ToggleSwitch-knob{background-color:var(--color-btn-active-bg)}.ToggleSwitch-track{position:relative;display:block;width:64px;height:32px;padding:0;overflow:hidden;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--color-switch-track-bg);border:1px solid var(--color-switch-track-border);border-radius:6px;transition-timing-function:cubic-bezier(0.5, 1, 0.89, 1);transition-duration:80ms;transition-property:background-color,border-color;-webkit-appearance:none;appearance:none}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:0}@media(pointer: coarse){.ToggleSwitch-track::before{position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:44px;content:"";transform:translateX(-50%) translateY(-50%)}}@media(prefers-reduced-motion){.ToggleSwitch-track{transition:none}.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-canvas-subtle);border-color:var(--color-border-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active{background-color:var(--color-canvas-subtle)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-disabled-bg)}.ToggleSwitch-track[aria-checked=true][aria-disabled=true] .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)}.ToggleSwitch-track[aria-checked=true]:hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border:0;transform:translateX(calc(100% + 1px))}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0%)}.ToggleSwitch-track[aria-checked=true] .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}.ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob,.ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active{background-color:var(--color-btn-bg)}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-fg-subtle)}.ToggleSwitch-track[aria-disabled=true] .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:1px solid var(--color-switch-track-border);border-radius: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){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{position:relative;font-size:14px;line-height:1.5;color:var(--color-fg-default);text-align:right}.ToggleSwitch--small .ToggleSwitch-status{font-size:12px}.ToggleSwitch--small .ToggleSwitch-track{width:48px;height: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--statusAtEnd .ToggleSwitch-status{text-align:left}
+/*# sourceMappingURL=toggle-switch.css.map */

package/dist/toggle-switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["file:///home/runner/work/css/css/src/toggle-switch/index.scss%23sass"],"names":[],"mappings":"AA2iBA,cAAA,kBAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,uCAAA,0CAAA,CAAA,wCAAA,2CAAA,CAAA,oBAAA,iBAAA,CAAA,aAAA,CAAA,UAAA,CAAA,WAAA,CAAA,SAAA,CAAA,eAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,6CAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,iDAAA,CAAA,uBAAA,CAAA,eAAA,CAAA,4DAAA,gBAAA,CAAA,wBAAA,4BAAA,iBAAA,CAAA,OAAA,CAAA,QAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,UAAA,CAAA,2CAAA,CAAA,CAAA,+BAAA,oBAAA,eAAA,CAAA,sBAAA,eAAA,CAAA,CAAA,2DAAA,2CAAA,CAAA,uCAAA,CAAA,mIAAA,2CAAA,CAAA,yKAAA,6DAAA,CAAA,8EAAA,6DAAA,CAAA,uCAAA,qDAAA,CAAA,qDAAA,CAAA,6CAAA,2DAAA,CAAA,8CAAA,4DAAA,CAAA,0DAAA,oDAAA,CAAA,QAAA,CAAA,sCAAA,CAAA,8DAAA,wBAAA,CAAA,gEAAA,0BAAA,CAAA,wCAAA,kBAAA,CAAA,2CAAA,CAAA,uCAAA,CAAA,wBAAA,CAAA,mIAAA,oCAAA,CAAA,2DAAA,wCAAA,CAAA,eAAA,CAAA,mIAAA,oCAAA,CAAA,+DAAA,4BAAA,CAAA,iEAAA,4BAAA,CAAA,oBAAA,YAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,WAAA,CAAA,eAAA,CAAA,uBAAA,aAAA,CAAA,4BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,yBAAA,aAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,mBAAA,iBAAA,CAAA,QAAA,CAAA,WAAA,CAAA,SAAA,CAAA,SAAA,CAAA,oCAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,mEAAA,CAAA,wDAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,0BAAA,CAAA,+BAAA,mBAAA,eAAA,CAAA,CAAA,qBAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,6BAAA,CAAA,gBAAA,CAAA,0CAAA,cAAA,CAAA,yCAAA,UAAA,CAAA,WAAA,CAAA,6CAAA,2BAAA,CAAA,uBAAA,QAAA,CAAA,iBAAA,CAAA,wBAAA,WAAA,CAAA,kBAAA,CAAA,2BAAA,0BAAA,CAAA,gDAAA,eAAA","file":"toggle-switch.css"}

package/dist/toggle-switch.js

@@ -0,0 +1 @@
+export {cssstats: require('./stats/toggle-switch.json')}

package/layout/page-layout.scss

@@ -111,12 +111,15 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     // sticky pane
 
-    &.PageLayout--isPaneSticky {
-      .PageLayout-pane {
-        position: sticky;
-        top: 0;
-        max-height: 100vh;
-        overflow: auto;
+    .PageLayout-pane--sticky {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow: auto;
+      scrollbar-width: thin;
+
+      @supports (max-height: 100dvh) {
+        max-height: 100dvh;
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.1.1",
+  "version": "20.2.0",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -60,7 +60,7 @@
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
     "globby": "13.1.1",
-    "jest": "27.5.1",
+    "jest": "28.1.0",
     "js-yaml": "4.1.0",
     "postcss": "8.4.13",
     "postcss-calc": "8.2.4",

package/product/index.scss

@@ -25,3 +25,4 @@
 @import '../subhead/index.scss';
 @import '../timeline/index.scss';
 @import '../toasts/index.scss';
+@import '../toggle-switch/index.scss';

package/toggle-switch/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './toggle-switch.scss';

package/toggle-switch/toggle-switch.scss

@@ -0,0 +1,225 @@
+.ToggleSwitch {
+  align-items: center;
+  display: inline-flex;
+  gap: $spacer-2;
+
+  &:hover {
+    .ToggleSwitch-knob {
+      background-color: var(--color-btn-hover-bg);
+    }
+  }
+
+  &:active {
+    .ToggleSwitch-knob {
+      background-color: var(--color-btn-active-bg);
+    }
+  }
+}
+
+.ToggleSwitch-track {
+  position: relative;
+  display: block;
+  width: $spacer-8;
+  height: $spacer-5;
+  padding: 0;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--color-switch-track-bg);
+  border: $border-width $border-style var(--color-switch-track-border);
+  border-radius: $border-radius;
+  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 {
+      @include minTouchTarget(calc($spacer-6 + $spacer-1));
+    }
+  }
+
+  @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.
+
+    // stylelint-disable-next-line selector-max-specificity
+    .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: $border-width $border-style var(--color-switch-track-border);
+  border-radius: $border-radius;
+  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: $body-font-size;
+  line-height: $body-line-height;
+  color: var(--color-fg-default);
+  text-align: right;
+}
+
+.ToggleSwitch--small {
+  .ToggleSwitch-status {
+    font-size: $font-size-small;
+  }
+
+  .ToggleSwitch-track {
+    width: $spacer-7;
+    height: $spacer-4;
+  }
+}
+
+.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;
+  }
+}