@primer/css 20.4.2-rc.f78bb51b → 20.4.3-rc.acc52652

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.4.2-rc.f78bb51b",
+  "version": "20.4.3-rc.acc52652",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -25,6 +25,7 @@
   "scripts": {
     "build:docs": "script/build-docs",
     "build:docs:preview": "script/build-docs preview",
+    "build:css": "script/build-css.js",
     "dist": "script/dist.js",
     "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
@@ -45,16 +46,16 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.6",
-    "@changesets/cli": "2.23.2",
+    "@changesets/cli": "2.24.2",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
     "@primer/stylelint-config": "^12.4.0",
-    "autoprefixer": "10.4.7",
+    "autoprefixer": "10.4.8",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
     "eslint": "8.21.0",
     "eslint-plugin-github": "4.3.7",
-    "eslint-plugin-jest": "26.6.0",
+    "eslint-plugin-jest": "26.8.2",
     "eslint-plugin-prettier": "4.2.1",
     "filesize": "9.0.11",
     "front-matter": "4.0.2",
@@ -62,7 +63,7 @@
     "globby": "13.1.2",
     "jest": "28.1.3",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "postcss-calc": "8.2.4",
     "postcss-import": "14.1.0",
     "postcss-load-config": "4.0.1",
@@ -70,7 +71,7 @@
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.7.1",
     "semver": "7.3.7",
-    "stylelint": "14.9.1",
+    "stylelint": "14.10.0",
     "table": "6.8.0"
   },
   "jest": {

package/dist/segmented-control.css

@@ -1,2 +0,0 @@
-.SegmentedControl{position:relative;display:inline-flex;background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium, 6px);box-shadow:var(--primer-borderInset-thin, inset 0 0 0 1px) var(--color-border-default)}.SegmentedControl-button{position:relative;display:inline-flex;height:var(--primer-control-medium-size, 32px);padding:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));font-size:var(--primer-text-body-size-medium, 14px);color:var(--color-fg-default);background-color:transparent;border:var(--primer-borderWidth-thin, 1px) solid transparent;border-radius:var(--primer-borderRadius-medium, 6px)}.SegmentedControl-button:not(.SegmentedControl-button--selected):hover .SegmentedControl-content{background-color:var(--color-segmented-control-button-hover-bg);transition-duration:var(--primer-duration-fast, 80ms)}.SegmentedControl-button:not(.SegmentedControl-button--selected):active .SegmentedControl-content{background-color:var(--color-segmented-control-button-active-bg);transition-duration:0}.SegmentedControl-button.SegmentedControl-button--selected{font-weight:var(--base-text-weight-semibold, 600);background-color:var(--color-btn-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-button+.SegmentedControl-button::before{position:absolute;inset:var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px)*-1);height:var(--primer-text-body-size-large, 16px);margin-top:var(--primer-control-medium-paddingBlock, 6px);content:"";border-left:var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);transition:border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1)}.SegmentedControl-button.SegmentedControl-button--selected::before,.SegmentedControl-button.SegmentedControl-button--selected+.SegmentedControl-button::before{border-color:transparent}.SegmentedControl-content{display:flex;align-items:center;justify-content:center;gap:var(--primer-control-medium-gap, 8px);height:100%;padding:0 var(--primer-control-medium-paddingInline-condensed, 8px);border-radius:var(--primer-borderRadius-medium, 6px);transition:background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1)}.SegmentedControl-leadingVisual{color:var(--color-fg-muted)}.SegmentedControl-text{white-space:nowrap}.SegmentedControl-text[data-content]::before{display:block;height:0;font-weight:var(--base-text-weight-semibold, 600);visibility:hidden;content:attr(data-content)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-button{flex:1;justify-content:center}.SegmentedControl-button--iconOnly{width:var(--primer-control-medium-size, 32px)}.SegmentedControl-button--iconOnly .SegmentedControl-content{padding:0;flex:1}@media(max-width: 768px){.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button{width:var(--primer-control-medium-size, 32px)}.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content{padding:0;flex:1}.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text{display:none}}@media(pointer: coarse){.SegmentedControl-button{min-width:var(--primer-control-minTarget-coarse, 44px)}.SegmentedControl-button::after{position:absolute;top:50%;left:50%;width:100%;height:100%;min-height:var(--primer-control-minTarget-coarse, 44px);content:"";transform:translateX(-50%) translateY(-50%)}.SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button{min-width:unset}}
-/*# sourceMappingURL=segmented-control.css.map */

package/dist/segmented-control.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/segmented-control/index.scss%23sass"],"names":[],"mappings":"AAmjBA,kBAAA,iBAAA,CAAA,mBAAA,CAAA,kDAAA,CAAA,oDAAA,CAAA,sFAAA,CAAA,yBAAA,iBAAA,CAAA,mBAAA,CAAA,8CAAA,CAAA,6GAAA,CAAA,mDAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,4DAAA,CAAA,oDAAA,CAAA,iGAAA,+DAAA,CAAA,qDAAA,CAAA,kGAAA,gEAAA,CAAA,qBAAA,CAAA,2DAAA,iDAAA,CAAA,oCAAA,CAAA,kEAAA,CAAA,0DAAA,iBAAA,CAAA,0FAAA,CAAA,+CAAA,CAAA,yDAAA,CAAA,UAAA,CAAA,iFAAA,CAAA,2FAAA,CAAA,+JAAA,wBAAA,CAAA,0BAAA,YAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,yCAAA,CAAA,WAAA,CAAA,mEAAA,CAAA,oDAAA,CAAA,+FAAA,CAAA,gCAAA,2BAAA,CAAA,uBAAA,kBAAA,CAAA,6CAAA,aAAA,CAAA,QAAA,CAAA,iDAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,6BAAA,YAAA,CAAA,sDAAA,MAAA,CAAA,sBAAA,CAAA,mCAAA,6CAAA,CAAA,6DAAA,SAAA,CAAA,MAAA,CAAA,yBAAA,gEAAA,6CAAA,CAAA,iEAAA,SAAA,CAAA,MAAA,CAAA,8DAAA,YAAA,CAAA,CAAA,wBAAA,yBAAA,sDAAA,CAAA,gCAAA,iBAAA,CAAA,OAAA,CAAA,QAAA,CAAA,UAAA,CAAA,WAAA,CAAA,uDAAA,CAAA,UAAA,CAAA,2CAAA,CAAA,mGAAA,eAAA,CAAA","file":"segmented-control.css"}

package/dist/segmented-control.js

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

package/dist/stats/segmented-control.json

@@ -1 +0,0 @@
-{"size":2664,"gzipSize":758,"humanizedSize":"3KB","humanizedGzipSize":"758B","rules":{"total":21,"size":{"graph":[5,9,2,2,3,7,1,8,1,1,5,1,2,1,2,1,2,1,1,8,1],"max":9,"average":3.0476190476190474},"selectorByRuleSizes":[{"selector":".SegmentedControl-button","declarations":9},{"selector":".SegmentedControl-button::after","declarations":8},{"selector":".SegmentedControl-content","declarations":8},{"selector":".SegmentedControl-button+.SegmentedControl-button::before","declarations":7},{"selector":".SegmentedControl-text[data-content]::before","declarations":5},{"selector":".SegmentedControl","declarations":5},{"selector":".SegmentedControl-button.SegmentedControl-button--selected","declarations":3},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl--fullWidth .SegmentedControl-button","declarations":2},{"selector":".SegmentedControl-button:not(.SegmentedControl-button--selected):active .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button:not(.SegmentedControl-button--selected):hover .SegmentedControl-content","declarations":2},{"selector":".SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button--iconOnly","declarations":1},{"selector":".SegmentedControl--fullWidth","declarations":1},{"selector":".SegmentedControl-text","declarations":1},{"selector":".SegmentedControl-leadingVisual","declarations":1},{"selector":".SegmentedControl-button.SegmentedControl-button--selected::before,.SegmentedControl-button.SegmentedControl-button--selected+.SegmentedControl-button::before","declarations":1}]},"selectors":{"total":23,"type":0,"class":23,"id":0,"pseudoClass":2,"pseudoElement":5,"values":[".SegmentedControl",".SegmentedControl-button",".SegmentedControl-button:not(.SegmentedControl-button--selected):hover .SegmentedControl-content",".SegmentedControl-button:not(.SegmentedControl-button--selected):active .SegmentedControl-content",".SegmentedControl-button.SegmentedControl-button--selected",".SegmentedControl-button+.SegmentedControl-button::before",".SegmentedControl-button.SegmentedControl-button--selected::before",".SegmentedControl-button.SegmentedControl-button--selected+.SegmentedControl-button::before",".SegmentedControl-content",".SegmentedControl-leadingVisual",".SegmentedControl-text",".SegmentedControl-text[data-content]::before",".SegmentedControl--fullWidth",".SegmentedControl--fullWidth .SegmentedControl-button",".SegmentedControl-button--iconOnly",".SegmentedControl-button--iconOnly .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text",".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":40,"average":18.043478260869566}},"declarations":{"total":64,"unique":50,"uniqueToTotalRatio":0.78125,"properties":{"position":["relative","relative","absolute","absolute"],"display":["inline-flex","inline-flex","flex","block","flex","none"],"background-color":["var(--color-segmented-control-bg)","transparent","var(--color-segmented-control-button-hover-bg)","var(--color-segmented-control-button-active-bg)","var(--color-btn-bg)"],"border-radius":["6px","6px","6px"],"box-shadow":["inset 0 0 0 1px var(--color-border-default)"],"height":["32px","16px","100%","0","100%"],"padding":["calc(4px - 1px)","0 8px","0","0"],"font-size":["14px"],"color":["var(--color-fg-default)","var(--color-fg-muted)"],"border":["1px solid transparent"],"transition-duration":["80ms","0"],"font-weight":["600","600"],"border-color":["var(--color-segmented-control-button-selected-border)","transparent"],"inset":["1px 0 0 calc(1px*-1)"],"margin-top":["6px"],"content":["\"\"","attr(data-content)","\"\""],"border-left":["1px solid var(--color-border-default)"],"transition":["border-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)","background-color 160ms cubic-bezier(0.3, 0.1, 0.5, 1)"],"align-items":["center"],"justify-content":["center","center"],"gap":["8px"],"white-space":["nowrap"],"visibility":["hidden"],"flex":["1","1","1"],"width":["32px","32px","100%"],"min-width":["44px","unset"],"top":["50%"],"left":["50%"],"min-height":["44px"],"transform":["translateX(-50%) translateY(-50%)"]}},"mediaQueries":{"total":2,"unique":2,"values":["(max-width: 768px)","(pointer: coarse)"],"contents":[{"value":"(max-width: 768px)","rules":{"total":3,"size":{"graph":[1,2,1],"max":2,"average":1.3333333333333333},"selectorByRuleSizes":[{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content","declarations":2},{"selector":",.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text","declarations":1},{"selector":".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1}]},"selectors":{"total":3,"type":0,"class":3,"id":0,"pseudoClass":0,"pseudoElement":0,"values":[".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-content",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-text"],"specificity":{"max":20,"average":20}},"declarations":{"total":4,"unique":4,"uniqueToTotalRatio":1,"properties":{"width":["32px"],"padding":["0"],"flex":["1"],"display":["none"]}}},{"value":"(pointer: coarse)","rules":{"total":3,"size":{"graph":[1,8,1],"max":8,"average":3.3333333333333335},"selectorByRuleSizes":[{"selector":",.SegmentedControl-button::after","declarations":8},{"selector":",.SegmentedControl-button--iconOnly,.SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button","declarations":1},{"selector":".SegmentedControl-button","declarations":1}]},"selectors":{"total":4,"type":0,"class":4,"id":0,"pseudoClass":0,"pseudoElement":1,"values":[".SegmentedControl-button",".SegmentedControl-button::after",".SegmentedControl-button--iconOnly",".SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button"],"specificity":{"max":20,"average":12.75}},"declarations":{"total":10,"unique":10,"uniqueToTotalRatio":1,"properties":{"min-width":["44px","unset"],"position":["absolute"],"top":["50%"],"left":["50%"],"width":["100%"],"height":["100%"],"min-height":["44px"],"content":["\"\""],"transform":["translateX(-50%) translateY(-50%)"]}}}]}}

package/segmented-control/README.md

@@ -1,25 +0,0 @@
----
-bundle: "segmented-control"
-generated: true
----
-
-# Primer CSS: `segmented-control` bundle
-
-## Usage
-
-Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
-
-```scss
-@import "@primer/css/segmented-control/index.scss";
-```
-
-## Build
-
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/segmented-control.css`.
-
-## License
-
-[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
-
-
-[scss]: https://sass-lang.com/documentation/syntax#scss

package/segmented-control/index.scss

@@ -1,3 +0,0 @@
-// support files
-@import '../support/index.scss';
-@import './segmented-control.scss';

package/segmented-control/segmented-control.scss

@@ -1,162 +0,0 @@
-// SegmentedControl
-
-.SegmentedControl {
-  position: relative;
-  display: inline-flex;
-  background-color: var(--color-segmented-control-bg);
-  // stylelint-disable-next-line primer/borders
-  border-radius: var(--primer-borderRadius-medium, $border-radius);
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
-}
-
-// Button -----------------------------------------
-
-.SegmentedControl-button {
-  position: relative;
-  display: inline-flex;
-  height: var(--primer-control-medium-size, 32px);
-  // stylelint-disable-next-line primer/spacing
-  padding: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
-  // stylelint-disable-next-line primer/typography
-  font-size: var(--primer-text-body-size-medium, $body-font-size);
-  color: var(--color-fg-default);
-  background-color: transparent;
-  // stylelint-disable-next-line primer/borders
-  border: var(--primer-borderWidth-thin, $border-width) $border-style transparent;
-  // stylelint-disable-next-line primer/borders
-  border-radius: var(--primer-borderRadius-medium, $border-radius);
-
-  &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
-    background-color: var(--color-segmented-control-button-hover-bg);
-    transition-duration: var(--primer-duration-fast, 80ms);
-  }
-
-  &:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
-    background-color: var(--color-segmented-control-button-active-bg);
-    transition-duration: 0;
-  }
-
-  // Selected
-
-  &.SegmentedControl-button--selected {
-    // stylelint-disable-next-line primer/typography
-    font-weight: var(--base-text-weight-semibold, $font-weight-bold);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-segmented-control-button-selected-border);
-  }
-
-  // Divider
-
-  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-  & + .SegmentedControl-button::before {
-    position: absolute;
-    inset: var(--primer-borderWidth-thin, 1px) 0 0 calc(var(--primer-borderWidth-thin, 1px) * -1);
-    height: var(--primer-text-body-size-large, 16px);
-    // stylelint-disable-next-line primer/spacing
-    margin-top: var(--primer-control-medium-paddingBlock, 6px);
-    content: '';
-    // stylelint-disable-next-line primer/borders
-    border-left: var(--primer-borderWidth-thin, $border-width) $border-style var(--color-border-default);
-    transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
-  }
-
-  &.SegmentedControl-button--selected::before,
-  &.SegmentedControl-button--selected + .SegmentedControl-button::before {
-    border-color: transparent;
-  }
-}
-
-// Content -----------------------------------------
-
-.SegmentedControl-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--primer-control-medium-gap, $spacer-2);
-  height: 100%;
-  // stylelint-disable-next-line primer/spacing
-  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
-  // stylelint-disable-next-line primer/borders
-  border-radius: var(--primer-borderRadius-medium, $border-radius);
-  transition: background-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
-}
-
-// Leading visual -----------------------------------------
-
-.SegmentedControl-leadingVisual {
-  color: var(--color-fg-muted);
-}
-
-// Text -----------------------------------------
-
-.SegmentedControl-text {
-  white-space: nowrap;
-
-  // renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected
-  &[data-content]::before {
-    display: block;
-    height: 0;
-    // stylelint-disable-next-line primer/typography
-    font-weight: var(--base-text-weight-semibold, $font-weight-bold);
-    visibility: hidden;
-    content: attr(data-content);
-  }
-}
-
-// Variants -----------------------------------------
-
-// fullWidth
-.SegmentedControl--fullWidth {
-  display: flex;
-
-  .SegmentedControl-button {
-    flex: 1;
-    justify-content: center;
-  }
-}
-
-// Icon only
-.SegmentedControl-button--iconOnly {
-  width: var(--primer-control-medium-size, 32px);
-
-  .SegmentedControl-content {
-    padding: 0;
-    flex: 1;
-  }
-}
-
-// Icon only when narrow
-@media (max-width: $width-md) {
-  .SegmentedControl--iconOnly-whenNarrow {
-    .SegmentedControl-button {
-      width: var(--primer-control-medium-size, 32px);
-    }
-
-    .SegmentedControl-content {
-      padding: 0;
-      flex: 1;
-    }
-
-    .SegmentedControl-text {
-      display: none;
-    }
-  }
-}
-
-// Increase touch target
-@media (pointer: coarse) {
-  .SegmentedControl-button {
-    min-width: var(--primer-control-minTarget-coarse, 44px);
-
-    &::after {
-      @include minTouchTarget($min-height: var(--primer-control-minTarget-coarse, 44px));
-    }
-  }
-
-  // reset for icon-only buttons
-  .SegmentedControl-button--iconOnly,
-  .SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
-    min-width: unset;
-  }
-}