@atlaskit/tokens 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @atlaskit/tokens
 
+## 0.8.0
+
+### Minor Changes
+
+- [`1fb52fef1a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1fb52fef1a8) - [ux] New Skeleton color tokens `color.skeleton.subtle` and `color.skeleton.subtlest`. Use for skeleton loading states
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`308db322b04`](https://bitbucket.org/atlassian/atlassian-frontend/commits/308db322b04) - The following tokens have been moved from the `deprecated` to `deleted` state in their lifecycles. These tokens will continue to exist, however tooling will begin to error wherever they're used. If you haven't already, please run `yarn eslint --fix` or similar to automate your migration.
+
+  - `color.background.blanket` => `color.blanket`
+  - `color.background.boldBrand.resting` => `color.background.brand.bold`
+  - `color.background.boldBrand.hover` => `color.background.brand.bold.hovered`
+  - `color.background.boldBrand.pressed` => `color.background.brand.bold.pressed`
+  - `color.background.boldDanger.resting` => `color.background.danger.bold`
+  - `color.background.boldDanger.hover` => `color.background.danger.bold.hovered`
+  - `color.background.boldDanger.pressed` => `color.background.danger.bold.pressed`
+  - `color.background.boldDiscovery.resting` => `color.background.discovery.bold`
+  - `color.background.boldDiscovery.hover` => `color.background.discovery.bold.hovered`
+  - `color.background.boldDiscovery.pressed` => `color.background.discovery.bold.pressed`
+  - `color.background.boldNeutral.resting` => `color.background.neutral.bold`
+  - `color.background.boldNeutral.hover` => `color.background.neutral.bold.hovered`
+  - `color.background.boldNeutral.pressed` => `color.background.neutral.bold.pressed`
+  - `color.background.boldSuccess.resting` => `color.background.success.bold`
+  - `color.background.boldSuccess.hover` => `color.background.success.bold.hovered`
+  - `color.background.boldSuccess.pressed` => `color.background.success.bold.pressed`
+  - `color.background.boldWarning.resting` => `color.background.warning.bold`
+  - `color.background.boldWarning.hover` => `color.background.warning.bold.hovered`
+  - `color.background.boldWarning.pressed` => `color.background.warning.bold.pressed`
+  - `color.background.default` => `elevation.surface`
+  - `color.background.card` => `elevation.surface.raised`
+  - `color.background.overlay` => `elevation.surface.overlay`
+  - `color.background.selected.resting` => `color.background.selected`
+  - `color.background.selected.hover` => `color.background.selected.hovered`
+  - `color.background.subtleBorderedNeutral.resting` => `color.background.input`
+  - `color.background.subtleBorderedNeutral.pressed` => `color.background.input.pressed`
+  - `color.background.subtleBrand.resting` => `color.background.brand`
+  - `color.background.subtleBrand.hover` => `color.background.brand.hovered`
+  - `color.background.subtleBrand.pressed` => `color.background.brand.pressed`
+  - `color.background.subtleDanger.resting` => `color.background.danger`
+  - `color.background.subtleDanger.hover` => `color.background.danger.hovered`
+  - `color.background.subtleDanger.pressed` => `color.background.danger.pressed`
+  - `color.background.subtleDiscovery.resting` => `color.background.discovery`
+  - `color.background.subtleDiscovery.hover` => `color.background.discovery.hovered`
+  - `color.background.subtleDiscovery.pressed` => `color.background.discovery.pressed`
+  - `color.background.subtleNeutral.resting` => `color.background.neutral`
+  - `color.background.subtleNeutral.hover` => `color.background.neutral.hovered`
+  - `color.background.subtleNeutral.pressed` => `color.background.neutral.pressed`
+  - `color.background.subtleSuccess.resting` => `color.background.success`
+  - `color.background.subtleSuccess.hover` => `color.background.success.hovered`
+  - `color.background.subtleSuccess.pressed` => `color.background.success.pressed`
+  - `color.background.subtleWarning.resting` => `color.background.warning`
+  - `color.background.subtleWarning.hover` => `color.background.warning.hovered`
+  - `color.background.subtleWarning.pressed` => `color.background.warning.pressed`
+  - `color.background.sunken` => `elevation.surface.sunken`
+  - `color.background.transparentNeutral.hover` => `color.background.neutral.subtle.hovered`
+  - `color.background.transparentNeutral.pressed` => `color.background.neutral.subtle.pressed`
+  - `color.text.highEmphasis` => `color.text`
+  - `color.text.mediumEmphasis` => `color.text.subtle`
+  - `color.text.lowEmphasis` => `color.text.subtlest`
+  - `color.text.link.resting` => `color.link`
+  - `color.text.link.pressed` => `color.link.pressed`
+  - `color.text.onBold` => `color.text.inverse`
+  - `color.text.onBoldWarning` => `color.text.inverse.warning`
+  - `color.border.focus` => `color.border.focused`
+  - `color.border.neutral` => `color.border`
+  - `color.iconBorder.brand` => `color.icon.brand` or `color.border.brand`
+  - `color.iconBorder.danger` => `color.icon.danger` or `color.border.danger`
+  - `color.iconBorder.warning` => `color.icon.warning` or `color.border.warning`
+  - `color.iconBorder.success` => `color.icon.success` or `color.border.success`
+  - `color.iconBorder.discovery` => `color.icon.discovery` or `color.border.discovery`
+  - `color.overlay.hover` => `color.interaction.hovered`
+  - `color.overlay.pressed` => `color.interaction.pressed`
+  - `color.shadow.card` => `elevation.shadow.raised`
+  - `color.shadow.overlay` => `elevation.shadow.overlay`
+
 ## 0.7.3
 
 ### Patch Changes

package/css/atlassian-dark.css

@@ -236,6 +236,8 @@ html[data-theme="dark"] {
   --ds-interaction-pressed: #00000052;
   --ds-interaction-inverse-hovered: #ffffff33;
   --ds-interaction-inverse-pressed: #ffffff5c;
+  --ds-skeleton: #A1BDD914;
+  --ds-skeleton-subtle: #BCD6F00A;
   --ds-link: #579DFF;
   --ds-link-pressed: #85B8FF;
   --ds-accent-boldBlue: #0C66E4;

package/css/atlassian-light.css

@@ -236,6 +236,8 @@
   --ds-interaction-pressed: #ffffff5c;
   --ds-interaction-inverse-hovered: #00000029;
   --ds-interaction-inverse-pressed: #00000052;
+  --ds-skeleton: #091E420F;
+  --ds-skeleton-subtle: #091E4208;
   --ds-link: #0C66E4;
   --ds-link-pressed: #0055CC;
   --ds-accent-boldBlue: #579DFF;

package/dist/cjs/artifacts/rename-mapping.js

@@ -20,103 +20,103 @@ exports.default = void 0;
  */
 var renameMapper = [{
   "path": "color.text.highEmphasis",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.text.[default]"
 }, {
   "path": "color.text.link.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.link.pressed"
 }, {
   "path": "color.text.link.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.link.[default]"
 }, {
   "path": "color.text.lowEmphasis",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.text.subtlest"
 }, {
   "path": "color.text.mediumEmphasis",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.text.subtle"
 }, {
   "path": "color.text.onBold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.text.inverse"
 }, {
   "path": "color.text.onBoldWarning",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.text.warning.inverse"
 }, {
   "path": "color.border.focus",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.border.focused"
 }, {
   "path": "color.border.neutral",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.border.[default]"
 }, {
   "path": "color.background.accent.blue.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.blue.subtler"
 }, {
   "path": "color.background.accent.blue.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.blue.subtle"
 }, {
   "path": "color.background.accent.red.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.red.subtler"
 }, {
   "path": "color.background.accent.red.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.red.subtle"
 }, {
   "path": "color.background.accent.orange.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.orange.subtler"
 }, {
   "path": "color.background.accent.orange.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.orange.subtle"
 }, {
   "path": "color.background.accent.yellow.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.yellow.subtler"
 }, {
   "path": "color.background.accent.yellow.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.yellow.subtle"
 }, {
   "path": "color.background.accent.green.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.green.subtler"
 }, {
   "path": "color.background.accent.green.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.green.subtle"
 }, {
   "path": "color.background.accent.teal.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.teal.subtler"
 }, {
   "path": "color.background.accent.teal.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.teal.subtle"
 }, {
   "path": "color.background.accent.purple.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.purple.subtler"
 }, {
   "path": "color.background.accent.purple.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.purple.subtle"
 }, {
   "path": "color.background.accent.magenta.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.magenta.subtler"
 }, {
   "path": "color.background.accent.magenta.bold",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.magenta.subtle"
 }, {
   "path": "color.background.brand.[default].[default]",
@@ -140,99 +140,99 @@ var renameMapper = [{
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.blanket",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.blanket.[default]"
 }, {
   "path": "color.background.boldBrand.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.brand.bold.hovered"
 }, {
   "path": "color.background.boldBrand.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.brand.bold.pressed"
 }, {
   "path": "color.background.boldBrand.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.brand.bold.[default]"
 }, {
   "path": "color.background.boldDanger.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.bold.hovered"
 }, {
   "path": "color.background.boldDanger.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.bold.pressed"
 }, {
   "path": "color.background.boldDanger.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.bold.[default]"
 }, {
   "path": "color.background.boldDiscovery.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.bold.hovered"
 }, {
   "path": "color.background.boldDiscovery.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.bold.pressed"
 }, {
   "path": "color.background.boldDiscovery.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.bold.[default]"
 }, {
   "path": "color.background.boldNeutral.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.bold.hovered"
 }, {
   "path": "color.background.boldNeutral.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.bold.pressed"
 }, {
   "path": "color.background.boldNeutral.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.bold.[default]"
 }, {
   "path": "color.background.boldSuccess.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.bold.hovered"
 }, {
   "path": "color.background.boldSuccess.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.bold.pressed"
 }, {
   "path": "color.background.boldSuccess.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.bold.[default]"
 }, {
   "path": "color.background.boldWarning.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.bold.hovered"
 }, {
   "path": "color.background.boldWarning.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.bold.pressed"
 }, {
   "path": "color.background.boldWarning.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.bold.[default]"
 }, {
   "path": "color.background.card",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.surface.raised"
 }, {
   "path": "color.background.default",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.surface.[default]"
 }, {
   "path": "color.background.overlay",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.surface.overlay"
 }, {
   "path": "color.background.subtleBorderedNeutral.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.input.pressed"
 }, {
   "path": "color.background.subtleBorderedNeutral.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.input.[default]"
 }, {
   "path": "color.background.subtleBrand.hover",
@@ -248,163 +248,163 @@ var renameMapper = [{
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.subtleDanger.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.[default].hovered"
 }, {
   "path": "color.background.subtleDanger.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.[default].pressed"
 }, {
   "path": "color.background.subtleDanger.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.danger.[default].[default]"
 }, {
   "path": "color.background.subtleDiscovery.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.[default].hovered"
 }, {
   "path": "color.background.subtleDiscovery.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.[default].pressed"
 }, {
   "path": "color.background.subtleDiscovery.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.discovery.[default].[default]"
 }, {
   "path": "color.background.subtleNeutral.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.[default].hovered"
 }, {
   "path": "color.background.subtleNeutral.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.[default].pressed"
 }, {
   "path": "color.background.subtleNeutral.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.[default].[default]"
 }, {
   "path": "color.background.subtleSuccess.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.[default].hovered"
 }, {
   "path": "color.background.subtleSuccess.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.[default].pressed"
 }, {
   "path": "color.background.subtleSuccess.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.success.[default].[default]"
 }, {
   "path": "color.background.subtleWarning.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.[default].hovered"
 }, {
   "path": "color.background.subtleWarning.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.[default].pressed"
 }, {
   "path": "color.background.subtleWarning.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.warning.[default].[default]"
 }, {
   "path": "color.background.sunken",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.surface.sunken"
 }, {
   "path": "color.background.transparentNeutral.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.subtle.hovered"
 }, {
   "path": "color.background.transparentNeutral.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.neutral.subtle.pressed"
 }, {
   "path": "color.accent.boldBlue",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.blue.bolder"
 }, {
   "path": "color.accent.boldGreen",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.green.bolder"
 }, {
   "path": "color.accent.boldOrange",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.orange.bolder"
 }, {
   "path": "color.accent.boldPurple",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.purple.bolder"
 }, {
   "path": "color.accent.boldRed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.red.bolder"
 }, {
   "path": "color.accent.boldTeal",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.teal.bolder"
 }, {
   "path": "color.accent.subtleBlue",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.blue.subtler"
 }, {
   "path": "color.accent.subtleGreen",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.green.subtler"
 }, {
   "path": "color.accent.subtleMagenta",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.magenta.subtler"
 }, {
   "path": "color.accent.subtleOrange",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.orange.subtler"
 }, {
   "path": "color.accent.subtlePurple",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.purple.subtler"
 }, {
   "path": "color.accent.subtleRed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.red.subtler"
 }, {
   "path": "color.accent.subtleTeal",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.accent.teal.subtler"
 }, {
   "path": "color.iconBorder.brand",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.icon.brand"
 }, {
   "path": "color.iconBorder.danger",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.icon.danger"
 }, {
   "path": "color.iconBorder.discovery",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.icon.discovery"
 }, {
   "path": "color.iconBorder.success",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.icon.success"
 }, {
   "path": "color.iconBorder.warning",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.icon.warning.[default]"
 }, {
   "path": "color.overlay.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.interaction.hovered"
 }, {
   "path": "color.overlay.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.interaction.pressed"
 }, {
   "path": "shadow.card",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.shadow.raised"
 }, {
   "path": "shadow.overlay",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "elevation.shadow.overlay"
 }];
 var _default = renameMapper;

package/dist/cjs/artifacts/token-default-values.js

@@ -246,6 +246,8 @@ var defaultTokenValues = {
   'color.interaction.pressed': '#ffffff5c',
   'color.interaction.inverse.hovered': '#00000029',
   'color.interaction.inverse.pressed': '#00000052',
+  'color.skeleton': '#091E420F',
+  'color.skeleton.subtle': '#091E4208',
   'color.link': '#0C66E4',
   'color.link.pressed': '#0055CC',
   'color.accent.boldBlue': '#579DFF',

package/dist/cjs/artifacts/token-names.js

@@ -242,6 +242,8 @@ var tokens = {
   'color.interaction.pressed': '--ds-interaction-pressed',
   'color.interaction.inverse.hovered': '--ds-interaction-inverse-hovered',
   'color.interaction.inverse.pressed': '--ds-interaction-inverse-pressed',
+  'color.skeleton': '--ds-skeleton',
+  'color.skeleton.subtle': '--ds-skeleton-subtle',
   'color.link': '--ds-link',
   'color.link.pressed': '--ds-link-pressed',
   'color.accent.boldBlue': '--ds-accent-boldBlue',