@atlaskit/tokens 0.10.19 → 0.10.20

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tokens
 
+## 0.10.20
+
+### Patch Changes
+
+- [`9f6aa1d7cdc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f6aa1d7cdc) - Introduces new interaction states to a number of existing elevation tokens:
+
+  - elevation.surface.hovered
+  - elevation.surface.pressed
+  - elevation.surface.raised.hovered
+  - elevation.surface.raised.pressed
+  - elevation.surface.overlay.hovered
+  - elevation.surface.overlay.pressed
+
 ## 0.10.19
 
 ### Patch Changes

package/css/atlassian-dark.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d184cd66c975da2b8dadfece3cfd90b>>
+ * @codegen <<SignedSource::8ea685e3399add36f0e3d6a9900ff227>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="dark"] {
@@ -278,13 +278,19 @@ html[data-theme="dark"] {
   --ds-overlay-pressed: #9BB4CA80;
   --ds-card: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
   --ds-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
-  --ds-shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
+  --ds-shadow-raised: inset 0px 0px 0px 1px #00000000, 0px 1px 1px #03040480, 0px 0px 1px #03040480;
   --ds-shadow-overflow: 0px 0px 12px #0304048F, 0px 0px 1px #03040480;
   --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
   --ds-surface: #161A1D;
+  --ds-surface-hovered: #1D2125;
+  --ds-surface-pressed: #22272B;
   --ds-surface-sunken: #101214;
   --ds-surface-raised: #1D2125;
+  --ds-surface-raised-hovered: #22272B;
+  --ds-surface-raised-pressed: #2C333A;
   --ds-surface-overlay: #22272B;
+  --ds-surface-overlay-hovered: #2C333A;
+  --ds-surface-overlay-pressed: #454F59;
   --ds-opacity-disabled: 0.4;
   --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;

package/css/atlassian-legacy-dark.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9e4724606cca025b6077a0f11ccdee6c>>
+ * @codegen <<SignedSource::71b7c5a8b5077f954c16cb37bf043616>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="legacy-dark"] {
@@ -278,13 +278,19 @@ html[data-theme="legacy-dark"] {
   --ds-overlay-pressed: #FA11F2;
   --ds-card: 0px 1px 1px #FA11F280, 0px 0px 1px #FA11F280;
   --ds-overlay: inset 0px 0px 0px 1px #FA11F20A, 0px 8px 12px #FA11F25C, 0px 0px 1px #FA11F280;
-  --ds-shadow-raised: 0px 1px 1px #0d142480, 0px 0px 1px #0d142480;
+  --ds-shadow-raised: inset 0px 0px 0px 1px #00000000, 0px 1px 1px #0d142480, 0px 0px 1px #0d142480;
   --ds-shadow-overflow: 0px 0px 12px #0304048F, 0px 0px 1px #03040480;
   --ds-shadow-overlay: inset 0px 0px 0px 1px #0d14240A, 0px 8px 12px #0d14245C, 0px 0px 1px #0d142480;
   --ds-surface: #1B2638;
+  --ds-surface-hovered: #202B3D;
+  --ds-surface-pressed: #283447;
   --ds-surface-sunken: #67758F;
   --ds-surface-raised: #455166;
+  --ds-surface-raised-hovered: #56637A;
+  --ds-surface-raised-pressed: #67758F;
   --ds-surface-overlay: #7988A3;
+  --ds-surface-overlay-hovered: #8C9CB8;
+  --ds-surface-overlay-pressed: #9FB0CC;
   --ds-opacity-disabled: 0.4;
   --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;

package/css/atlassian-legacy-light.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b2f59f139505a9ba4477df154a83033b>>
+ * @codegen <<SignedSource::7a959658c89ba654506e1ad33c9e0304>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="legacy-light"] {
@@ -282,9 +282,15 @@ html[data-theme="legacy-light"] {
   --ds-shadow-overflow: 0px 8px 8px #091e4214, 0px 0px 1px #091e421F;
   --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;
   --ds-surface: #FFFFFF;
+  --ds-surface-hovered: #FAFBFC;
+  --ds-surface-pressed: #F4F5F7;
   --ds-surface-sunken: #F4F5F7;
   --ds-surface-raised: #FFFFFF;
+  --ds-surface-raised-hovered: #FAFBFC;
+  --ds-surface-raised-pressed: #F4F5F7;
   --ds-surface-overlay: #FFFFFF;
+  --ds-surface-overlay-hovered: #FAFBFC;
+  --ds-surface-overlay-pressed: #F4F5F7;
   --ds-opacity-disabled: 0.4;
   --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;

package/css/atlassian-light.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5db5ba104d3553b1f54a52b44df005b2>>
+ * @codegen <<SignedSource::b0bd5f514de59300b04488d137e01ca3>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="light"] {
@@ -282,9 +282,15 @@ html[data-theme="light"] {
   --ds-shadow-overflow: 0px 8px 8px #091E4214, 0px 0px 1px #091E421F;
   --ds-shadow-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
   --ds-surface: #FFFFFF;
+  --ds-surface-hovered: #F1F2F4;
+  --ds-surface-pressed: #DCDFE4;
   --ds-surface-sunken: #F7F8F9;
   --ds-surface-raised: #FFFFFF;
+  --ds-surface-raised-hovered: #F1F2F4;
+  --ds-surface-raised-pressed: #DCDFE4;
   --ds-surface-overlay: #FFFFFF;
+  --ds-surface-overlay-hovered: #F1F2F4;
+  --ds-surface-overlay-pressed: #DCDFE4;
   --ds-opacity-disabled: 0.4;
   --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;

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

@@ -19,7 +19,7 @@ exports.default = void 0;
  * 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
  */
 var renameMapper = [{
@@ -225,15 +225,15 @@ var renameMapper = [{
 }, {
   "path": "color.background.card",
   "state": "deleted",
-  "replacement": "elevation.surface.raised"
+  "replacement": "elevation.surface.raised.[default]"
 }, {
   "path": "color.background.default",
   "state": "deleted",
-  "replacement": "elevation.surface.[default]"
+  "replacement": "elevation.surface.[default].[default]"
 }, {
   "path": "color.background.overlay",
   "state": "deleted",
-  "replacement": "elevation.surface.overlay"
+  "replacement": "elevation.surface.overlay.[default]"
 }, {
   "path": "color.background.subtleBorderedNeutral.pressed",
   "state": "deleted",

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

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

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e9fa17eebeaf3b2a8318f43c4f7e89c4>>
+ * @codegen <<SignedSource::fc7198ce92b9604af441e36c1acb2075>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -289,9 +289,15 @@ var tokens = {
   'elevation.shadow.overflow': '--ds-shadow-overflow',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
+  'elevation.surface.hovered': '--ds-surface-hovered',
+  'elevation.surface.pressed': '--ds-surface-pressed',
   'elevation.surface.sunken': '--ds-surface-sunken',
   'elevation.surface.raised': '--ds-surface-raised',
+  'elevation.surface.raised.hovered': '--ds-surface-raised-hovered',
+  'elevation.surface.raised.pressed': '--ds-surface-raised-pressed',
   'elevation.surface.overlay': '--ds-surface-overlay',
+  'elevation.surface.overlay.hovered': '--ds-surface-overlay-hovered',
+  'elevation.surface.overlay.pressed': '--ds-surface-overlay-pressed',
   'opacity.disabled': '--ds-opacity-disabled',
   'opacity.loading': '--ds-opacity-loading',
   'utility.UNSAFE_util.transparent': '--ds-UNSAFE_util-transparent',

package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b756f5f6727c826e5f41b4d6b9d2b8e3>>
+ * @codegen <<SignedSource::41ca1e1e710a7febb4c2b2ec651ef5f6>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -4832,7 +4832,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": "#1D2125",
@@ -4845,7 +4845,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": "DN100"
@@ -4859,7 +4859,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": "#161A1D",
@@ -4872,7 +4872,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": "DN0"
@@ -4886,7 +4886,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": "#22272B",
@@ -4899,7 +4899,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": "DN200"
@@ -6456,6 +6456,16 @@ var tokens = [{
     "description": "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
   },
   "value": [{
+    "radius": 0,
+    "spread": 1,
+    "color": "#000000",
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "opacity": 0,
+    "inset": true
+  }, {
     "radius": 1,
     "offset": {
       "x": 0,
@@ -6482,6 +6492,16 @@ var tokens = [{
       "description": "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
     },
     "value": [{
+      "radius": 0,
+      "spread": 1,
+      "color": "#000000",
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "opacity": 0,
+      "inset": true
+    }, {
       "radius": 1,
       "offset": {
         "x": 0,
@@ -6646,8 +6666,50 @@ var tokens = [{
     },
     "value": "DN0"
   },
-  "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": "#1D2125",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface"
+    },
+    "value": "DN100"
+  },
+  "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": "#22272B",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface"
+    },
+    "value": "DN200"
+  },
+  "name": "elevation.surface.[default].pressed",
+  "path": ["elevation", "surface", "[default]", "pressed"]
 }, {
   "attributes": {
     "group": "paint",
@@ -6674,7 +6736,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": "#1D2125",
   "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
@@ -6684,18 +6746,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": "DN100"
   },
-  "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": "#22272B",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface.raised"
+    },
+    "value": "DN200"
+  },
+  "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": "#2C333A",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface.raised"
+    },
+    "value": "DN300"
+  },
+  "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": "#22272B",
   "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
@@ -6705,12 +6809,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": "DN200"
   },
-  "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": "#2C333A",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Hovered state of elevation.surface.overlay"
+    },
+    "value": "DN300"
+  },
+  "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": "#454F59",
+  "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "0.10.20",
+      "description": "Pressed state of elevation.surface.overlay"
+    },
+    "value": "DN400"
+  },
+  "name": "elevation.surface.overlay.pressed",
+  "path": ["elevation", "surface", "overlay", "pressed"]
 }, {
   "attributes": {
     "group": "opacity",