@atlaskit/button 16.0.0 → 16.1.3

package/dist/esm/shared/colors.js

@@ -1,4 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 // Hard coding the active rgba color value rather than using a helper to convert it
 // With helper it would be: hex2rgba(colors.B75, 0.6)
 var fadedB75 = 'rgba(179, 212, 255, 0.6)';
@@ -7,106 +8,106 @@ var values = {
   background: {
     default: {
       default: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.subtleNeutral.resting', colors.N20A),
+        dark: token('color.background.subtleNeutral.resting', colors.DN70)
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: token('color.background.subtleNeutral.hover', colors.N30A),
+        dark: token('color.background.subtleNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: token('color.background.subtleNeutral.pressed', fadedB75),
+        dark: token('color.background.subtleNeutral.pressed', colors.B75)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     primary: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: token('color.background.boldBrand.resting', colors.B400),
+        dark: token('color.background.boldBrand.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: token('color.background.boldBrand.hover', colors.B300),
+        dark: token('color.background.boldBrand.hover', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: token('color.background.boldBrand.pressed', colors.B500),
+        dark: token('color.background.boldBrand.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     warning: {
       default: {
-        light: colors.Y300,
-        dark: colors.Y300
+        light: token('color.background.boldWarning.resting', colors.Y300),
+        dark: token('color.background.boldWarning.resting', colors.Y300)
       },
       hover: {
-        light: colors.Y200,
-        dark: colors.Y200
+        light: token('color.background.boldWarning.hover', colors.Y200),
+        dark: token('color.background.boldWarning.hover', colors.Y200)
       },
       active: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.boldWarning.pressed', colors.Y400),
+        dark: token('color.background.boldWarning.pressed', colors.Y400)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
       },
       focusSelected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
       }
     },
     danger: {
       default: {
-        light: colors.R400,
-        dark: colors.R400
+        light: token('color.background.boldDanger.resting', colors.R400),
+        dark: token('color.background.boldDanger.resting', colors.R400)
       },
       hover: {
-        light: colors.R300,
-        dark: colors.R300
+        light: token('color.background.boldDanger.hover', colors.R300),
+        dark: token('color.background.boldDanger.hover', colors.R300)
       },
       active: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.boldDanger.pressed', colors.R500),
+        dark: token('color.background.boldDanger.pressed', colors.R500)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
       },
       focusSelected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
       }
     },
     link: {
@@ -115,12 +116,12 @@ var values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       }
     },
     subtle: {
@@ -129,24 +130,24 @@ var values = {
         dark: 'none'
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: token('color.background.transparentNeutral.hover', colors.N30A),
+        dark: token('color.background.transparentNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: token('color.background.transparentNeutral.pressed', fadedB75),
+        dark: token('color.background.transparentNeutral.pressed', colors.B75)
       },
       disabled: {
         light: 'none',
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     'subtle-link': {
@@ -155,236 +156,236 @@ var values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       }
     }
   },
   boxShadowColor: {
     default: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     primary: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     warning: {
       focus: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
       },
       focusSelected: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
       }
     },
     danger: {
       focus: {
-        light: colors.R100,
-        dark: colors.R100
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
       },
       focusSelected: {
-        light: colors.R100,
-        dark: colors.R100
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
       }
     },
     link: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     subtle: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     'subtle-link': {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     }
   },
   color: {
     default: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     primary: {
       default: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.DN30)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     warning: {
       default: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.onBoldWarning', colors.N800),
+        dark: token('color.text.onBoldWarning', colors.N800)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
       },
       focusSelected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
       }
     },
     danger: {
       default: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.N0)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
       },
       focusSelected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
       }
     },
     link: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: token('color.text.link.resting', colors.B400),
+        dark: token('color.text.link.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: token('color.text.link.resting', colors.B300),
+        dark: token('color.text.link.resting', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: token('color.text.link.pressed', colors.B500),
+        dark: token('color.text.link.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
       }
     },
     subtle: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     'subtle-link': {
       default: {
-        light: colors.N200,
-        dark: colors.DN400
+        light: token('color.text.mediumEmphasis', colors.N200),
+        dark: token('color.text.mediumEmphasis', colors.DN400)
       },
       hover: {
-        light: colors.N90,
-        dark: colors.B50
+        light: token('color.text.mediumEmphasis', colors.N90),
+        dark: token('color.text.mediumEmphasis', colors.B50)
       },
       active: {
-        light: colors.N400,
-        dark: colors.DN300
+        light: token('color.text.highEmphasis', colors.N400),
+        dark: token('color.text.highEmphasis', colors.DN300)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     }
   }

package/dist/esm/shared/css.js

@@ -167,7 +167,7 @@ export function getCss(_ref3) {
     // Giving disabled styles preference over active by listing them after.
     // Not using '&:disabled' because :disabled is not a valid state for all element types
     // so we are targeting the attribute
-    // Attributes have the same specificity a pesudo classes so we are overriding :disabled here
+    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
     '&[disabled]': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
       key: 'disabled',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.0.0",
+	"version": "16.1.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "16.0.0",
+  "version": "16.1.3",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,9 +32,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^1.2.0",
-    "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -43,10 +44,11 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/checkbox": "^12.2.0",
+    "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/logo": "^13.5.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -70,18 +72,10 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "homepage": "https://atlassian.design/components/button/",