@atlaskit/tokens 0.4.0 → 0.6.0

package/dist/esm/tokens/default/elevation/shadow.js

@@ -0,0 +1,21 @@
+var shadow = {
+  elevation: {
+    shadow: {
+      raised: {
+        attributes: {
+          group: 'shadow',
+          state: 'active',
+          description: "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
+        }
+      },
+      overlay: {
+        attributes: {
+          group: 'shadow',
+          state: 'active',
+          description: "Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state."
+        }
+      }
+    }
+  }
+};
+export default shadow;

package/dist/esm/tokens/default/elevation/surface.js

@@ -0,0 +1,35 @@
+var shadow = {
+  elevation: {
+    surface: {
+      '[default]': {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use as the primary background for the UI.'
+        }
+      },
+      sunken: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.'
+        }
+      },
+      raised: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised'
+        }
+      },
+      overlay: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: "Use for the background of elements that sit on top of they UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.shadow.overlay\n\nAlso use for the background of raised cards in a dragged state."
+        }
+      }
+    }
+  }
+};
+export default shadow;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

package/dist/types/artifacts/rename-mapping.d.ts

@@ -12,6 +12,10 @@
  */
 import tokens from './token-names';
 declare type Token = keyof typeof tokens | string;
-declare type RenameMapper = Partial<Record<Token, Token>>;
-declare const renameMapper: RenameMapper;
+declare type RenameMap = {
+    path: string;
+    state: 'deprecated' | 'deleted';
+    replacement: Token;
+};
+declare const renameMapper: RenameMap[];
 export default renameMapper;

package/dist/types/artifacts/token-default-values.d.ts

@@ -2,93 +2,222 @@
  * A map of token names to their value in the default Atlassian theme ('light')
  */
 declare const defaultTokenValues: {
-    readonly 'color.accent.boldBlue': "#579DFF";
-    readonly 'color.accent.boldGreen': "#4BCE97";
-    readonly 'color.accent.boldOrange': "#FAA53D";
-    readonly 'color.accent.boldPurple': "#9F8FEF";
-    readonly 'color.accent.boldRed': "#F87462";
-    readonly 'color.accent.boldTeal': "#60C6D2";
-    readonly 'color.accent.subtleBlue': "#CCE0FF";
-    readonly 'color.accent.subtleGreen': "#BAF3DB";
-    readonly 'color.accent.subtleMagenta': "#FDD0EC";
-    readonly 'color.accent.subtleOrange': "#FFE2BD";
-    readonly 'color.accent.subtlePurple': "#DFD8FD";
-    readonly 'color.accent.subtleRed': "#FFD2CC";
-    readonly 'color.accent.subtleTeal': "#C1F0F5";
-    readonly 'color.background.sunken': "#091E4208";
-    readonly 'color.background.default': "#FFFFFF";
+    readonly 'color.text.accent.blue': "#0055CC";
+    readonly 'color.text.accent.red': "#AE2A19";
+    readonly 'color.text.accent.orange': "#974F0C";
+    readonly 'color.text.accent.yellow': "#7F5F01";
+    readonly 'color.text.accent.green': "#216E4E";
+    readonly 'color.text.accent.purple': "#5E4DB2";
+    readonly 'color.text.accent.teal': "#206B74";
+    readonly 'color.text.accent.magenta': "#943D73";
+    readonly 'color.text': "#172B4D";
+    readonly 'color.text.subtle': "#44546F";
+    readonly 'color.text.subtlest': "#626F86";
+    readonly 'color.text.disabled': "#8993A5";
+    readonly 'color.text.inverse': "#FFFFFF";
+    readonly 'color.text.brand': "#0C66E4";
+    readonly 'color.text.danger': "#AE2A19";
+    readonly 'color.text.warning': "#974F0C";
+    readonly 'color.text.warning.inverse': "#172B4D";
+    readonly 'color.text.success': "#216E4E";
+    readonly 'color.text.discovery': "#5E4DB2";
+    readonly 'color.text.information': "#0055CC";
+    readonly 'color.text.highEmphasis': "#172B4D";
+    readonly 'color.text.link.pressed': "#0055CC";
+    readonly 'color.text.link.resting': "#0C66E4";
+    readonly 'color.text.lowEmphasis': "#626F86";
+    readonly 'color.text.mediumEmphasis': "#44546F";
+    readonly 'color.text.onBold': "#FFFFFF";
+    readonly 'color.text.onBoldWarning': "#172B4D";
+    readonly 'color.text.selected': "#0C66E4";
+    readonly 'color.icon.accent.blue': "#1D7AFC";
+    readonly 'color.icon.accent.red': "#E34935";
+    readonly 'color.icon.accent.orange': "#D97008";
+    readonly 'color.icon.accent.yellow': "#B38600";
+    readonly 'color.icon.accent.green': "#22A06B";
+    readonly 'color.icon.accent.purple': "#8270DB";
+    readonly 'color.icon.accent.teal': "#1D9AAA";
+    readonly 'color.icon.accent.magenta': "#CD519D";
+    readonly 'color.icon': "#44546F";
+    readonly 'color.icon.subtle': "#626F86";
+    readonly 'color.icon.inverse': "#FFFFFF";
+    readonly 'color.icon.disabled': "#8993A5";
+    readonly 'color.icon.brand': "#0C66E4";
+    readonly 'color.icon.danger': "#E34935";
+    readonly 'color.icon.warning': "#D97008";
+    readonly 'color.icon.warning.inverse': "#172B4D";
+    readonly 'color.icon.success': "#22A06B";
+    readonly 'color.icon.discovery': "#8270DB";
+    readonly 'color.icon.information': "#1D7AFC";
+    readonly 'color.border.accent.blue': "#1D7AFC";
+    readonly 'color.border.accent.red': "#E34935";
+    readonly 'color.border.accent.orange': "#D97008";
+    readonly 'color.border.accent.yellow': "#B38600";
+    readonly 'color.border.accent.green': "#22A06B";
+    readonly 'color.border.accent.purple': "#8270DB";
+    readonly 'color.border.accent.teal': "#1D9AAA";
+    readonly 'color.border.accent.magenta': "#CD519D";
+    readonly 'color.border': "#091E4224";
+    readonly 'color.border.focused': "#388BFF";
+    readonly 'color.border.input': "#091E4224";
+    readonly 'color.border.disabled': "#091E420F";
+    readonly 'color.border.brand': "#0C66E4";
+    readonly 'color.border.danger': "#E34935";
+    readonly 'color.border.warning': "#D97008";
+    readonly 'color.border.success': "#22A06B";
+    readonly 'color.border.discovery': "#8270DB";
+    readonly 'color.border.information': "#1D7AFC";
+    readonly 'color.border.focus': "#388BFF";
+    readonly 'color.border.neutral': "#091E4224";
+    readonly 'color.background.accent.blue': "#CCE0FF";
+    readonly 'color.background.accent.blue.bold': "#579DFF";
+    readonly 'color.background.accent.red': "#FFD2CC";
+    readonly 'color.background.accent.red.bold': "#F87462";
+    readonly 'color.background.accent.orange': "#FFE2BD";
+    readonly 'color.background.accent.orange.bold': "#FAA53D";
+    readonly 'color.background.accent.yellow': "#F8E6A0";
+    readonly 'color.background.accent.yellow.bold': "#E2B203";
+    readonly 'color.background.accent.green': "#BAF3DB";
+    readonly 'color.background.accent.green.bold': "#4BCE97";
+    readonly 'color.background.accent.teal': "#C1F0F5";
+    readonly 'color.background.accent.teal.bold': "#60C6D2";
+    readonly 'color.background.accent.purple': "#DFD8FD";
+    readonly 'color.background.accent.purple.bold': "#9F8FEF";
+    readonly 'color.background.accent.magenta': "#FDD0EC";
+    readonly 'color.background.accent.magenta.bold': "#E774BB";
+    readonly 'color.background.disabled': "#091E420F";
+    readonly 'color.background.inverse': "#00000029";
+    readonly 'color.background.input': "#091E4208";
+    readonly 'color.background.input.hovered': "#FFFFFF";
+    readonly 'color.background.input.pressed': "#091E420F";
+    readonly 'color.background.neutral': "#091E420F";
+    readonly 'color.background.neutral.hovered': "#091E4224";
+    readonly 'color.background.neutral.pressed': "#091E424F";
+    readonly 'color.background.neutral.subtle': "#00000000";
+    readonly 'color.background.neutral.subtle.hovered': "#091E420F";
+    readonly 'color.background.neutral.subtle.pressed': "#091E4224";
+    readonly 'color.background.neutral.bold': "#44546F";
+    readonly 'color.background.neutral.bold.hovered': "#2C3E5D";
+    readonly 'color.background.neutral.bold.pressed': "#172B4D";
+    readonly 'color.background.brand': "#E9F2FF";
+    readonly 'color.background.brand.hovered': "#CCE0FF";
+    readonly 'color.background.brand.pressed': "#85B8FF";
+    readonly 'color.background.brand.bold': "#0C66E4";
+    readonly 'color.background.brand.bold.hovered': "#0055CC";
+    readonly 'color.background.brand.bold.pressed': "#09326C";
+    readonly 'color.background.danger': "#FFEDEB";
+    readonly 'color.background.danger.hovered': "#FFD2CC";
+    readonly 'color.background.danger.pressed': "#FF9C8F";
+    readonly 'color.background.danger.bold': "#CA3521";
+    readonly 'color.background.danger.bold.hovered': "#AE2A19";
+    readonly 'color.background.danger.bold.pressed': "#601E16";
+    readonly 'color.background.warning': "#FFF7D6";
+    readonly 'color.background.warning.hovered': "#F8E6A0";
+    readonly 'color.background.warning.pressed': "#F5CD47";
+    readonly 'color.background.warning.bold': "#E2B203";
+    readonly 'color.background.warning.bold.hovered': "#CF9F02";
+    readonly 'color.background.warning.bold.pressed': "#B38600";
+    readonly 'color.background.success': "#DFFCF0";
+    readonly 'color.background.success.hovered': "#BAF3DB";
+    readonly 'color.background.success.pressed': "#7EE2B8";
+    readonly 'color.background.success.bold': "#1F845A";
+    readonly 'color.background.success.bold.hovered': "#216E4E";
+    readonly 'color.background.success.bold.pressed': "#164B35";
+    readonly 'color.background.discovery': "#F3F0FF";
+    readonly 'color.background.discovery.hovered': "#DFD8FD";
+    readonly 'color.background.discovery.pressed': "#B8ACF6";
+    readonly 'color.background.discovery.bold': "#6E5DC6";
+    readonly 'color.background.discovery.bold.hovered': "#5E4DB2";
+    readonly 'color.background.discovery.bold.pressed': "#352C63";
+    readonly 'color.background.information': "#E9F2FF";
+    readonly 'color.background.information.hovered': "#CCE0FF";
+    readonly 'color.background.information.pressed': "#85B8FF";
+    readonly 'color.background.information.bold': "#0C66E4";
+    readonly 'color.background.information.bold.hovered': "#0055CC";
+    readonly 'color.background.information.bold.pressed': "#09326C";
+    readonly 'color.background.blanket': "#091E427A";
+    readonly 'color.background.boldBrand.hover': "#0055CC";
+    readonly 'color.background.boldBrand.pressed': "#09326C";
+    readonly 'color.background.boldBrand.resting': "#0C66E4";
+    readonly 'color.background.boldDanger.hover': "#AE2A19";
+    readonly 'color.background.boldDanger.pressed': "#601E16";
+    readonly 'color.background.boldDanger.resting': "#CA3521";
+    readonly 'color.background.boldDiscovery.hover': "#5E4DB2";
+    readonly 'color.background.boldDiscovery.pressed': "#352C63";
+    readonly 'color.background.boldDiscovery.resting': "#6E5DC6";
+    readonly 'color.background.boldNeutral.hover': "#2C3E5D";
+    readonly 'color.background.boldNeutral.pressed': "#172B4D";
+    readonly 'color.background.boldNeutral.resting': "#44546F";
+    readonly 'color.background.boldSuccess.hover': "#216E4E";
+    readonly 'color.background.boldSuccess.pressed': "#164B35";
+    readonly 'color.background.boldSuccess.resting': "#1F845A";
+    readonly 'color.background.boldWarning.hover': "#CF9F02";
+    readonly 'color.background.boldWarning.pressed': "#B38600";
+    readonly 'color.background.boldWarning.resting': "#E2B203";
     readonly 'color.background.card': "#FFFFFF";
+    readonly 'color.background.default': "#FFFFFF";
     readonly 'color.background.overlay': "#FFFFFF";
     readonly 'color.background.selected.resting': "#E9F2FF";
     readonly 'color.background.selected.hover': "#CCE0FF";
     readonly 'color.background.selected.pressed': "#85B8FF";
-    readonly 'color.background.blanket': "#091E427A";
-    readonly 'color.background.disabled': "#091E420F";
-    readonly 'color.background.boldBrand.resting': "#0C66E4";
-    readonly 'color.background.boldBrand.hover': "#0055CC";
-    readonly 'color.background.boldBrand.pressed': "#09326C";
-    readonly 'color.background.subtleBrand.resting': "#E9F2FF";
+    readonly 'color.background.subtleBorderedNeutral.pressed': "#091E420F";
+    readonly 'color.background.subtleBorderedNeutral.resting': "#091E4208";
     readonly 'color.background.subtleBrand.hover': "#CCE0FF";
     readonly 'color.background.subtleBrand.pressed': "#85B8FF";
-    readonly 'color.background.boldDanger.resting': "#CA3521";
-    readonly 'color.background.boldDanger.hover': "#AE2A19";
-    readonly 'color.background.boldDanger.pressed': "#601E16";
-    readonly 'color.background.subtleDanger.resting': "#FFEDEB";
+    readonly 'color.background.subtleBrand.resting': "#E9F2FF";
     readonly 'color.background.subtleDanger.hover': "#FFD2CC";
     readonly 'color.background.subtleDanger.pressed': "#FF9C8F";
-    readonly 'color.background.boldWarning.resting': "#E2B203";
-    readonly 'color.background.boldWarning.hover': "#CF9F02";
-    readonly 'color.background.boldWarning.pressed': "#B38600";
-    readonly 'color.background.subtleWarning.resting': "#FFF7D6";
-    readonly 'color.background.subtleWarning.hover': "#F8E6A0";
-    readonly 'color.background.subtleWarning.pressed': "#F5CD47";
-    readonly 'color.background.boldSuccess.resting': "#1F845A";
-    readonly 'color.background.boldSuccess.hover': "#216E4E";
-    readonly 'color.background.boldSuccess.pressed': "#164B35";
-    readonly 'color.background.subtleSuccess.resting': "#DFFCF0";
-    readonly 'color.background.subtleSuccess.hover': "#BAF3DB";
-    readonly 'color.background.subtleSuccess.pressed': "#7EE2B8";
-    readonly 'color.background.boldDiscovery.resting': "#6E5DC6";
-    readonly 'color.background.boldDiscovery.hover': "#5E4DB2";
-    readonly 'color.background.boldDiscovery.pressed': "#352C63";
-    readonly 'color.background.subtleDiscovery.resting': "#F3F0FF";
+    readonly 'color.background.subtleDanger.resting': "#FFEDEB";
     readonly 'color.background.subtleDiscovery.hover': "#DFD8FD";
     readonly 'color.background.subtleDiscovery.pressed': "#B8ACF6";
-    readonly 'color.background.boldNeutral.resting': "#44546F";
-    readonly 'color.background.boldNeutral.hover': "#2C3E5D";
-    readonly 'color.background.boldNeutral.pressed': "#172B4D";
-    readonly 'color.background.transparentNeutral.hover': "#091E420F";
-    readonly 'color.background.transparentNeutral.pressed': "#091E4224";
-    readonly 'color.background.subtleNeutral.resting': "#091E420F";
+    readonly 'color.background.subtleDiscovery.resting': "#F3F0FF";
     readonly 'color.background.subtleNeutral.hover': "#091E4224";
     readonly 'color.background.subtleNeutral.pressed': "#091E424F";
-    readonly 'color.background.subtleBorderedNeutral.resting': "#091E4208";
-    readonly 'color.background.subtleBorderedNeutral.pressed': "#091E420F";
-    readonly 'color.border.focus': "#388BFF";
-    readonly 'color.border.neutral': "#091E4224";
+    readonly 'color.background.subtleNeutral.resting': "#091E420F";
+    readonly 'color.background.subtleSuccess.hover': "#BAF3DB";
+    readonly 'color.background.subtleSuccess.pressed': "#7EE2B8";
+    readonly 'color.background.subtleSuccess.resting': "#DFFCF0";
+    readonly 'color.background.subtleWarning.hover': "#F8E6A0";
+    readonly 'color.background.subtleWarning.pressed': "#F5CD47";
+    readonly 'color.background.subtleWarning.resting': "#FFF7D6";
+    readonly 'color.background.sunken': "#091E4208";
+    readonly 'color.background.transparentNeutral.hover': "#091E420F";
+    readonly 'color.background.transparentNeutral.pressed': "#091E4224";
+    readonly 'color.blanket': "#091E427A";
+    readonly 'color.interaction.hovered': "#ffffff33";
+    readonly 'color.interaction.pressed': "#ffffff5c";
+    readonly 'color.interaction.inverse.hovered': "#00000029";
+    readonly 'color.interaction.inverse.pressed': "#00000052";
+    readonly 'color.link': "#0C66E4";
+    readonly 'color.link.pressed': "#0055CC";
+    readonly 'color.accent.boldBlue': "#579DFF";
+    readonly 'color.accent.boldGreen': "#4BCE97";
+    readonly 'color.accent.boldOrange': "#FAA53D";
+    readonly 'color.accent.boldPurple': "#9F8FEF";
+    readonly 'color.accent.boldRed': "#F87462";
+    readonly 'color.accent.boldTeal': "#60C6D2";
+    readonly 'color.accent.subtleBlue': "#CCE0FF";
+    readonly 'color.accent.subtleGreen': "#BAF3DB";
+    readonly 'color.accent.subtleMagenta': "#FDD0EC";
+    readonly 'color.accent.subtleOrange': "#FFE2BD";
+    readonly 'color.accent.subtlePurple': "#DFD8FD";
+    readonly 'color.accent.subtleRed': "#FFD2CC";
+    readonly 'color.accent.subtleTeal': "#C1F0F5";
     readonly 'color.iconBorder.brand': "#1D7AFC";
     readonly 'color.iconBorder.danger': "#E34935";
-    readonly 'color.iconBorder.warning': "#D97008";
-    readonly 'color.iconBorder.success': "#22A06B";
     readonly 'color.iconBorder.discovery': "#8270DB";
+    readonly 'color.iconBorder.success': "#22A06B";
+    readonly 'color.iconBorder.warning': "#D97008";
     readonly 'color.overlay.hover': "#091E424F";
     readonly 'color.overlay.pressed': "#091E427A";
-    readonly 'color.text.selected': "#0C66E4";
-    readonly 'color.text.highEmphasis': "#172B4D";
-    readonly 'color.text.mediumEmphasis': "#44546F";
-    readonly 'color.text.lowEmphasis': "#626F86";
-    readonly 'color.text.onBold': "#FFFFFF";
-    readonly 'color.text.onBoldWarning': "#172B4D";
-    readonly 'color.text.link.resting': "#0C66E4";
-    readonly 'color.text.link.pressed': "#0055CC";
-    readonly 'color.text.brand': "#0055CC";
-    readonly 'color.text.warning': "#974F0C";
-    readonly 'color.text.danger': "#AE2A19";
-    readonly 'color.text.success': "#216E4E";
-    readonly 'color.text.discovery': "#5E4DB2";
-    readonly 'color.text.disabled': "#8993A5";
     readonly 'shadow.card': "0px 1px 1px #091E4240, 0px 0px 1px #091E424F";
     readonly 'shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
+    readonly 'elevation.shadow.raised': "0px 1px 1px #091E4240, 0px 0px 1px #091E424F";
+    readonly 'elevation.shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
+    readonly 'elevation.surface': "#FFFFFF";
+    readonly 'elevation.surface.sunken': "#091E4208";
+    readonly 'elevation.surface.raised': "#FFFFFF";
+    readonly 'elevation.surface.overlay': "#FFFFFF";
     readonly 'utility.UNSAFE_util.transparent': "transparent";
     readonly 'utility.UNSAFE_util.MISSING_TOKEN': "#FA11F2";
 };