Refresh ✨

docs/content/Label.md

@@ -7,9 +7,17 @@ The Label component is used to add contextual metadata to a design. Visually it
 ## Default example
 
 ```jsx live
-<Label m={1}>Default label</Label>
-<Label m={1} dropshadow bg='red.4'>Label with custom background</Label>
-<Label m={1} outline>Default outline label</Label>
+  <Label variant="small" outline borderColor="red.2" mr={2} color="red.4">small</Label>
+  <Label variant="medium" mr={2}>medium (default)</Label>
+  <Label variant="large" mr={2}>large</Label>
+  <Label variant="xl">xl label</Label>
+
+  <Box mt={4}/>
+  <Label variant="medium" bg="#A575FF" m={1}>good first issue</Label>
+  <Label variant="medium" bg="#FF75C8" m={1}>🚂 deploy: train</Label>
+  <Label variant="medium" bg="#1C90FA" m={1}>css</Label>
+  <Label variant="medium" bg=" #FFF06C" color="#24292E" m={1}>documentation</Label>
+  <Label variant="medium" bg="#656BFE" m={1}>primer</Label>
 ```
 
 ## System props

docs/package.json

@@ -11,7 +11,7 @@
     "node": "10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^0.16.9",
+    "@primer/gatsby-theme-doctocat": "^0.16.10",
     "@primer/octicons-react": "^9.2.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",

docs/yarn.lock

@@ -1234,10 +1234,10 @@
     react-is "16.10.2"
     styled-system "5.1.2"
 
-"@primer/gatsby-theme-doctocat@^0.16.9":
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.9.tgz#7ab8b769ac02c9ceaa1d43d150e24b0e75989f6c"
-  integrity sha512-Nz23CpAorBMntpVuvCJfUK/1CKD0BxdjqAIvDbfaHzgUZgLSXthAdXupQl1OEp4EPnDb2Egv3ZBt4CT5ssfdNQ==
+"@primer/gatsby-theme-doctocat@^0.16.10":
+  version "0.16.10"
+  resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.10.tgz#9798bca7b08b548e8b9bd62f8ca7a8be9003d5a5"
+  integrity sha512-173EeoIEwf1cAO3te4XDYg+kjQwLhtlOU2LAHty8T7Hb8hjOLysBPO3rmmtz583+eWhASA0GBb6cvR5S6/OQHg==
   dependencies:
     "@babel/preset-env" "^7.5.5"
     "@babel/preset-react" "^7.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "15.3.0",
+  "version": "16.0.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

src/BorderBox.js

@@ -10,7 +10,7 @@ BorderBox.defaultProps = {
   theme,
   border: '1px solid',
   borderColor: 'gray.2',
-  borderRadius: 1
+  borderRadius: 2
 }
 
 BorderBox.propTypes = {

src/Button.js

@@ -1,47 +1,47 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import {COMMON} from './constants'
-import theme from './theme'
-import buttonStyles from './ButtonStyles'
-import {compose, variant, layout, fontSize} from 'styled-system'
 import systemPropTypes from '@styled-system/prop-types'
+import {COMMON, get} from './constants'
+import theme from './theme'
+import ButtonBase from './ButtonBase'
+
+const Button = styled(ButtonBase)`
+  color: ${get('buttons.default.color.default')};
+  background-color: ${get('buttons.default.bg.default')};
+  border: 1px solid ${get('buttons.default.border.default')};
+  box-shadow: ${get('buttons.default.shadow.default')};
+
+  &:hover {
+    background-color: ${get('buttons.default.bg.hover')};
+    border-color: ${get('buttons.default.border.hover')};
+    box-shadow: ${get('buttons.default.shadow.hover')};
+  }
+
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: transparent;
+    box-shadow: ${get('buttons.default.shadow.focus')};
+  }
+
+  &:active {
+    background-color: ${get('buttons.default.bg.active')};
+    box-shadow: ${get('buttons.default.shadow.active')};
+    border-color: ${get('buttons.default.border.active')};
+  }
 
-const variants = variant({
-  variants: {
-    small: {
-      p: '3px 10px',
-      fontSize: 0
-    },
-    medium: {
-      fontSize: 1
-    },
-    large: {
-      fontSize: 2
-    }
+  &:disabled {
+    color: ${get('buttons.default.color.disabled')};
+    background-color: ${get('buttons.default.bg.disabled')};
+    border-color: ${get('buttons.default.border.disabled')};
   }
-})
-
-const Button = styled.button.attrs(({disabled, onClick}) => ({
-  onClick: disabled ? undefined : onClick
-}))`
-  ${buttonStyles}
-  ${variants}
-  ${compose(fontSize, COMMON, layout)}
 `
 
 Button.defaultProps = {
-  theme,
-  variant: 'medium'
+  theme
 }
 
 Button.propTypes = {
-  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]),
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  fontSize: systemPropTypes.typography.fontSize,
-  onClick: PropTypes.func,
   theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
   ...COMMON.propTypes,
   ...systemPropTypes.layout
 }

src/ButtonBase.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON} from './constants'
+import theme from './theme'
+import buttonBaseStyles from './ButtonStyles'
+import {compose, variant, layout, fontSize} from 'styled-system'
+import systemPropTypes from '@styled-system/prop-types'
+
+const variants = variant({
+  variants: {
+    small: {
+      p: '4px 12px',
+      fontSize: 0
+    },
+    medium: {
+      fontSize: 1
+    },
+    large: {
+      fontSize: 2,
+      p: '10px 20px'
+    }
+  }
+})
+
+const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({
+  onClick: disabled ? undefined : onClick
+}))`
+  ${buttonBaseStyles}
+  ${variants}
+  ${compose(fontSize, COMMON, layout)}
+`
+
+ButtonBase.defaultProps = {
+  theme,
+  variant: 'medium'
+}
+
+ButtonBase.propTypes = {
+  as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]),
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  fontSize: systemPropTypes.typography.fontSize,
+  onClick: PropTypes.func,
+  theme: PropTypes.object,
+  variant: PropTypes.oneOf(['small', 'medium', 'large']),
+  ...COMMON.propTypes,
+  ...systemPropTypes.layout
+}
+
+export default ButtonBase

src/ButtonDanger.js

@@ -1,49 +1,36 @@
 import styled from 'styled-components'
-import Button from './Button'
+import ButtonBase from './ButtonBase'
 import {get} from './constants'
 
-const ButtonDanger = styled(Button)`
-  color: ${get('colors.red.6')};
-  background-color: ${get('colors.gray.0')};
-  background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%);
+const ButtonDanger = styled(ButtonBase)`
+  color: ${get('buttons.danger.color.default')};
+  border: 1px solid ${get('buttons.danger.border.default')};
+  background-color: ${get('buttons.danger.bg.default')};
+  box-shadow: ${get('buttons.danger.shadow.default')};
 
   &:hover {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.red.6')};
-    background-image: linear-gradient(
-      -180deg,
-      ${get('colors.button.dangerHoverBgImage')} 0%,
-      ${get('colors.red.6')} 90%
-    );
-    border-color: ${get('colors.blackfade50')};
+    color: ${get('buttons.danger.color.hover')};
+    background-color: ${get('buttons.danger.bg.hover')};
+    border-color: ${get('buttons.danger.border.hover')};
+    box-shadow: ${get('buttons.danger.shadow.hover')};
   }
-
+  // focus must come before :active so that the active box shadow overrides
   &:focus {
-    box-shadow: ${get('colors.button.dangerFocusShadow')} 0px 0px 0px 0.2em;
+    border-color: transparent;
+    box-shadow: ${get('buttons.danger.shadow.focus')};
   }
 
   &:active {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.button.dangerActiveBg')};
-    background-image: none;
-    box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.blackfade50')};
-  }
-
-  &:selected {
-    color: ${get('colors.white')};
-    background-color: ${get('colors.button.dangerActiveBg')};
-    background-image: none;
-    box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset;
-    border-color: ${get('colors.blackfade50')};
+    color: ${get('buttons.danger.color.active')};
+    background-color: ${get('buttons.danger.bg.active')};
+    box-shadow: ${get('buttons.danger.shadow.active')};
+    border-color: ${get('buttons.danger.border.active')};
   }
 
   &:disabled {
-    color: ${get('colors.button.dangerDisabledColor')};
-    background-color: ${get('colors.button.disabledBg')};
-    background-image: none;
-    border-color: ${get('colors.blackfade20')};
-    box-shadow: none;
+    color: ${get('buttons.danger.color.disabled')};
+    background-color: ${get('buttons.danger.bg.disabled')};
+    border: 1px solid ${get('buttons.danger.border.default')};
   }
 `
 

src/ButtonGroup.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import {get} from './constants'
 import Box from './Box'
 
 const ButtonGroup = styled(Box)`
@@ -10,8 +11,8 @@ const ButtonGroup = styled(Box)`
     border-radius: 0;
 
     :first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
+      border-top-left-radius: ${get('radii.2')};
+      border-bottom-left-radius: ${get('radii.2')};
       margin-right: 0;
     }
 
@@ -22,8 +23,8 @@ const ButtonGroup = styled(Box)`
 
     :last-child {
       border-right-width: 1px;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
+      border-top-right-radius: ${get('radii.2')};
+      border-bottom-right-radius: ${get('radii.2')};
     }
 
     :focus,

src/ButtonOutline.js

@@ -1,36 +1,36 @@
 import styled from 'styled-components'
-import Button from './Button'
+import ButtonBase from './ButtonBase'
 import {get} from './constants'
 
-const ButtonOutline = styled(Button)`
-  color: ${get('colors.button.outlineBlue')};
-  background-color: ${get('colors.button.white')};
-  background-image: none;
+const ButtonOutline = styled(ButtonBase)`
+  color: ${get('buttons.outline.color.default')};
+  border: 1px solid ${get('buttons.outline.border.default')};
+  background-color: ${get('buttons.outline.bg.default')};
+  box-shadow: ${get('buttons.outline.shadow.default')};
 
   &:hover {
-    color: ${get('colors.button.white')};
-    background-color: ${get('colors.button.outlineBlue')};
-    background-image: none;
-    border-color: ${get('colors.button.outlineBlue')};
+    color: ${get('buttons.outline.color.hover')};
+    background-color: ${get('buttons.outline.bg.hover')};
+    border-color: ${get('buttons.outline.border.hover')};
+    box-shadow: ${get('buttons.outline.shadow.hover')};
   }
-
-  &:active {
-    color: ${get('colors.button.white')};
-    background-color: ${get('colors.button.outlineBlue')};
-    background-image: none;
-    border-color: ${get('colors.button.outlineBlue')};
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: transparent;
+    box-shadow: ${get('buttons.outline.shadow.focus')};
   }
 
-  &:focus {
-    box-shadow: ${get('colors.button.outlineShadow')} 0px 0px 0px 0.2em;
-    border-color: ${get('colors.button.outlineBlue')};
+  &:active {
+    color: ${get('buttons.outline.color.active')};
+    background-color: ${get('buttons.outline.bg.active')};
+    border-color: ${get('buttons.outline.border.active')};
+    box-shadow: ${get('buttons.outline.shadow.active')};
   }
 
   &:disabled {
-    color: ${get('colors.blackfade30')};
-    background-color: ${get('colors.white')};
-    border-color: ${get('colors.blackfade15')};
-    box-shadow: none;
+    color: ${get('buttons.outline.color.disabled')};
+    border-color: ${get('buttons.outline.border.default')};
+    background-color: ${get('buttons.outline.bg.disabled')};
   }
 `