@atlaskit/tokens 0.10.19 → 0.10.20

package/dist/esm/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6977decc7ef870a337b1171d6775d9dc>>
+ * @codegen <<SignedSource::3e1535e99114e3ceefa050ae548283a1>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -4825,7 +4825,7 @@ var tokens = [{
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
     "deleted": "0.8.0",
-    "replacement": "elevation.surface.raised",
+    "replacement": "elevation.surface.raised.[default]",
     "description": "Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card."
   },
   "value": "#FFFFFF",
@@ -4838,7 +4838,7 @@ var tokens = [{
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
       "deleted": "0.8.0",
-      "replacement": "elevation.surface.raised",
+      "replacement": "elevation.surface.raised.[default]",
       "description": "Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card."
     },
     "value": "N0"
@@ -4852,7 +4852,7 @@ var tokens = [{
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
     "deleted": "0.8.0",
-    "replacement": "elevation.surface.[default]",
+    "replacement": "elevation.surface.[default].[default]",
     "description": "Use as the primary background for the UI"
   },
   "value": "#FFFFFF",
@@ -4865,7 +4865,7 @@ var tokens = [{
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
       "deleted": "0.8.0",
-      "replacement": "elevation.surface.[default]",
+      "replacement": "elevation.surface.[default].[default]",
       "description": "Use as the primary background for the UI"
     },
     "value": "N0"
@@ -4879,7 +4879,7 @@ var tokens = [{
     "introduced": "0.0.15",
     "deprecated": "0.6.0",
     "deleted": "0.8.0",
-    "replacement": "elevation.surface.overlay",
+    "replacement": "elevation.surface.overlay.[default]",
     "description": "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
   },
   "value": "#FFFFFF",
@@ -4892,7 +4892,7 @@ var tokens = [{
       "introduced": "0.0.15",
       "deprecated": "0.6.0",
       "deleted": "0.8.0",
-      "replacement": "elevation.surface.overlay",
+      "replacement": "elevation.surface.overlay.[default]",
       "description": "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
     },
     "value": "N0"
@@ -6599,8 +6599,50 @@ var tokens = [{
     },
     "value": "N0"
   },
-  "name": "elevation.surface.[default]",
-  "path": ["elevation", "surface", "[default]"]
+  "name": "elevation.surface.[default].[default]",
+  "path": ["elevation", "surface", "[default]", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Hovered state of elevation.surface"
+  },
+  "value": "#F1F2F4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface"
+    },
+    "value": "N200"
+  },
+  "name": "elevation.surface.[default].hovered",
+  "path": ["elevation", "surface", "[default]", "hovered"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Pressed state of elevation.surface"
+  },
+  "value": "#DCDFE4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface"
+    },
+    "value": "N300"
+  },
+  "name": "elevation.surface.[default].pressed",
+  "path": ["elevation", "surface", "[default]", "pressed"]
 }, {
   "attributes": {
     "group": "paint",
@@ -6627,7 +6669,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised"
+    "description": "Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised."
   },
   "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
@@ -6637,18 +6679,60 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised"
+      "description": "Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised."
     },
     "value": "N0"
   },
-  "name": "elevation.surface.raised",
-  "path": ["elevation", "surface", "raised"]
+  "name": "elevation.surface.raised.[default]",
+  "path": ["elevation", "surface", "raised", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Hovered state of elevation.surface.raised"
+  },
+  "value": "#F1F2F4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface.raised"
+    },
+    "value": "N200"
+  },
+  "name": "elevation.surface.raised.hovered",
+  "path": ["elevation", "surface", "raised", "hovered"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Pressed state of elevation.surface.raised"
+  },
+  "value": "#DCDFE4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface.raised"
+    },
+    "value": "N300"
+  },
+  "name": "elevation.surface.raised.pressed",
+  "path": ["elevation", "surface", "raised", "pressed"]
 }, {
   "attributes": {
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "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."
+    "description": "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."
   },
   "value": "#FFFFFF",
   "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
@@ -6658,12 +6742,54 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "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."
+      "description": "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."
     },
     "value": "N0"
   },
-  "name": "elevation.surface.overlay",
-  "path": ["elevation", "surface", "overlay"]
+  "name": "elevation.surface.overlay.[default]",
+  "path": ["elevation", "surface", "overlay", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Hovered state of elevation.surface.overlay"
+  },
+  "value": "#F1F2F4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface.overlay"
+    },
+    "value": "N200"
+  },
+  "name": "elevation.surface.overlay.hovered",
+  "path": ["elevation", "surface", "overlay", "hovered"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "0.10.20",
+    "description": "Pressed state of elevation.surface.overlay"
+  },
+  "value": "#DCDFE4",
+  "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface.overlay"
+    },
+    "value": "N300"
+  },
+  "name": "elevation.surface.overlay.pressed",
+  "path": ["elevation", "surface", "overlay", "pressed"]
 }, {
   "attributes": {
     "group": "opacity",

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "0.10.19";
+var version = "0.10.20";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/tokens/atlassian-dark/elevation/shadow.js

@@ -3,6 +3,18 @@ var shadow = {
     shadow: {
       raised: {
         value: [{
+          // This inset shadow is just to allow animations between shadow types
+          radius: 0,
+          spread: 1,
+          // @ts-ignore no current palette colour for this yet
+          color: '#000000',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0,
+          inset: true
+        }, {
           radius: 1,
           offset: {
             x: 0,

package/dist/esm/tokens/atlassian-dark/elevation/surface.js

@@ -2,16 +2,40 @@ var elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'DN0'
+        '[default]': {
+          value: 'DN0'
+        },
+        hovered: {
+          value: 'DN100'
+        },
+        pressed: {
+          value: 'DN200'
+        }
       },
       sunken: {
         value: 'DN-100'
       },
       raised: {
-        value: 'DN100'
+        '[default]': {
+          value: 'DN100'
+        },
+        hovered: {
+          value: 'DN200'
+        },
+        pressed: {
+          value: 'DN300'
+        }
       },
       overlay: {
-        value: 'DN200'
+        '[default]': {
+          value: 'DN200'
+        },
+        hovered: {
+          value: 'DN300'
+        },
+        pressed: {
+          value: 'DN400'
+        }
       }
     }
   }

package/dist/esm/tokens/atlassian-legacy-dark/elevation/shadow.js

@@ -3,6 +3,18 @@ var shadow = {
     shadow: {
       raised: {
         value: [{
+          // This inset shadow is just to allow animations between shadow types
+          radius: 0,
+          spread: 1,
+          // @ts-ignore no current palette colour for this yet
+          color: '#000000',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0,
+          inset: true
+        }, {
           radius: 1,
           offset: {
             x: 0,

package/dist/esm/tokens/atlassian-legacy-dark/elevation/surface.js

@@ -2,16 +2,40 @@ var elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'DN30'
+        '[default]': {
+          value: 'DN30'
+        },
+        hovered: {
+          value: 'DN40'
+        },
+        pressed: {
+          value: 'DN50'
+        }
       },
       sunken: {
         value: 'DN100'
       },
       raised: {
-        value: 'DN80'
+        '[default]': {
+          value: 'DN80'
+        },
+        hovered: {
+          value: 'DN90'
+        },
+        pressed: {
+          value: 'DN100'
+        }
       },
       overlay: {
-        value: 'DN200'
+        '[default]': {
+          value: 'DN200'
+        },
+        hovered: {
+          value: 'DN300'
+        },
+        pressed: {
+          value: 'DN400'
+        }
       }
     }
   }

package/dist/esm/tokens/atlassian-legacy-light/elevation/surface.js

@@ -2,16 +2,40 @@ var elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       },
       sunken: {
         value: 'N20'
       },
       raised: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       },
       overlay: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       }
     }
   }

package/dist/esm/tokens/atlassian-light/elevation/surface.js

@@ -2,16 +2,40 @@ var elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       },
       sunken: {
         value: 'N100'
       },
       raised: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       },
       overlay: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       }
     }
   }

package/dist/esm/tokens/default/deprecated/deprecated.js

@@ -605,7 +605,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.raised',
+          replacement: 'elevation.surface.raised.[default]',
           description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
         }
       },
@@ -616,7 +616,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.[default]',
+          replacement: 'elevation.surface.[default].[default]',
           description: 'Use as the primary background for the UI'
         }
       },
@@ -640,7 +640,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.overlay',
+          replacement: 'elevation.surface.overlay.[default]',
           description: "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
         }
       },

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

@@ -2,11 +2,29 @@ var shadow = {
   elevation: {
     surface: {
       '[default]': {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          description: 'Use as the primary background for the UI.'
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: 'Use as the primary background for the UI.'
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Hovered state of elevation.surface'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Pressed state of elevation.surface'
+          }
         }
       },
       sunken: {
@@ -18,19 +36,55 @@ var shadow = {
         }
       },
       raised: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          description: 'Use for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised'
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: 'Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.'
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Hovered state of elevation.surface.raised'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Pressed state of elevation.surface.raised'
+          }
         }
       },
       overlay: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          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."
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: "Hovered state of elevation.surface.overlay"
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: "Pressed state of elevation.surface.overlay"
+          }
         }
       }
     }

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.19",
+	"version": "0.10.20",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::afc1ce63c4571109e333891b70af2ae8>>
+ * @codegen <<SignedSource::785f21ff78f22bc07f51619e1add8ba9>>
  * @codegenCommand yarn build tokens
  */
 import tokens from './token-names';

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

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::d33654f7422a0d210f1d8a1bf4497a45>>
+ * @codegen <<SignedSource::59a1a4aaa5f768efccaed2c726fc2b08>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
@@ -285,9 +285,15 @@ declare const defaultTokenValues: {
     readonly 'elevation.shadow.overflow': "0px 8px 8px #091E4214, 0px 0px 1px #091E421F";
     readonly 'elevation.shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
     readonly 'elevation.surface': "#FFFFFF";
+    readonly 'elevation.surface.hovered': "#F1F2F4";
+    readonly 'elevation.surface.pressed': "#DCDFE4";
     readonly 'elevation.surface.sunken': "#F7F8F9";
     readonly 'elevation.surface.raised': "#FFFFFF";
+    readonly 'elevation.surface.raised.hovered': "#F1F2F4";
+    readonly 'elevation.surface.raised.pressed': "#DCDFE4";
     readonly 'elevation.surface.overlay': "#FFFFFF";
+    readonly 'elevation.surface.overlay.hovered': "#F1F2F4";
+    readonly 'elevation.surface.overlay.pressed': "#DCDFE4";
     readonly 'opacity.disabled': "0.4";
     readonly 'opacity.loading': "0.2";
     readonly 'utility.UNSAFE_util.transparent': "transparent";