@atlaskit/tokens 0.7.0 → 0.7.3

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

@@ -3541,7 +3541,7 @@ const tokens = [{
   "attributes": {
     "group": "paint",
     "state": "deprecated",
-    "replacement": "color.blanket",
+    "replacement": "color.blanket.[default]",
     "description": "Use for the screen overlay that appears with modal dialogs"
   },
   "value": "#03040442",
@@ -3551,7 +3551,7 @@ const tokens = [{
     "attributes": {
       "group": "paint",
       "state": "deprecated",
-      "replacement": "color.blanket",
+      "replacement": "color.blanket.[default]",
       "description": "Use for the screen overlay that appears with modal dialogs"
     },
     "value": "DN-100A"
@@ -4499,8 +4499,46 @@ const tokens = [{
     },
     "value": "DN-100A"
   },
-  "name": "color.blanket",
-  "path": ["color", "blanket"]
+  "name": "color.blanket.[default]",
+  "path": ["color", "blanket", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+  },
+  "value": "#1D7AFCCC",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+    },
+    "value": "#1D7AFCCC"
+  },
+  "name": "color.blanket.selected",
+  "path": ["color", "blanket", "selected"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+  },
+  "value": "#E34935CC",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+    },
+    "value": "#E34935CC"
+  },
+  "name": "color.blanket.danger",
+  "path": ["color", "blanket", "danger"]
 }, {
   "attributes": {
     "group": "paint",
@@ -5212,6 +5250,57 @@ const tokens = [{
   },
   "name": "elevation.shadow.raised",
   "path": ["elevation", "shadow", "raised"]
+}, {
+  "attributes": {
+    "group": "shadow",
+    "state": "active",
+    "description": "Use to create a shadow when content scolls under other content."
+  },
+  "value": [{
+    "radius": 12,
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "color": "#030404",
+    "opacity": 0.56
+  }, {
+    "radius": 1,
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "color": "#030404",
+    "opacity": 0.5
+  }],
+  "filePath": "src/tokens/atlassian-dark/elevation/shadow.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shadow",
+      "state": "active",
+      "description": "Use to create a shadow when content scolls under other content."
+    },
+    "value": [{
+      "radius": 12,
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "color": "#030404",
+      "opacity": 0.56
+    }, {
+      "radius": 1,
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "color": "#030404",
+      "opacity": 0.5
+    }]
+  },
+  "name": "elevation.shadow.overflow",
+  "path": ["elevation", "shadow", "overflow"]
 }, {
   "attributes": {
     "group": "shadow",

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

@@ -3541,7 +3541,7 @@ const tokens = [{
   "attributes": {
     "group": "paint",
     "state": "deprecated",
-    "replacement": "color.blanket",
+    "replacement": "color.blanket.[default]",
     "description": "Use for the screen overlay that appears with modal dialogs"
   },
   "value": "#091E427A",
@@ -3551,7 +3551,7 @@ const tokens = [{
     "attributes": {
       "group": "paint",
       "state": "deprecated",
-      "replacement": "color.blanket",
+      "replacement": "color.blanket.[default]",
       "description": "Use for the screen overlay that appears with modal dialogs"
     },
     "value": "N500A"
@@ -4499,8 +4499,46 @@ const tokens = [{
     },
     "value": "N500A"
   },
-  "name": "color.blanket",
-  "path": ["color", "blanket"]
+  "name": "color.blanket.[default]",
+  "path": ["color", "blanket", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+  },
+  "value": "#388BFFCC",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+    },
+    "value": "#388BFFCC"
+  },
+  "name": "color.blanket.selected",
+  "path": ["color", "blanket", "selected"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+  },
+  "value": "#EF5C48CC",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+    },
+    "value": "#EF5C48CC"
+  },
+  "name": "color.blanket.danger",
+  "path": ["color", "blanket", "danger"]
 }, {
   "attributes": {
     "group": "paint",
@@ -5192,6 +5230,57 @@ const tokens = [{
   },
   "name": "elevation.shadow.raised",
   "path": ["elevation", "shadow", "raised"]
+}, {
+  "attributes": {
+    "group": "shadow",
+    "state": "active",
+    "description": "Use to create a shadow when content scolls under other content."
+  },
+  "value": [{
+    "radius": 8,
+    "offset": {
+      "x": 0,
+      "y": 8
+    },
+    "color": "#091E42",
+    "opacity": 0.08
+  }, {
+    "radius": 1,
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "color": "#091E42",
+    "opacity": 0.12
+  }],
+  "filePath": "src/tokens/atlassian-light/elevation/shadow.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shadow",
+      "state": "active",
+      "description": "Use to create a shadow when content scolls under other content."
+    },
+    "value": [{
+      "radius": 8,
+      "offset": {
+        "x": 0,
+        "y": 8
+      },
+      "color": "N1100",
+      "opacity": 0.08
+    }, {
+      "radius": 1,
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "color": "N1100",
+      "opacity": 0.12
+    }]
+  },
+  "name": "elevation.shadow.overflow",
+  "path": ["elevation", "shadow", "overflow"]
 }, {
   "attributes": {
     "group": "shadow",
@@ -5268,7 +5357,7 @@ const tokens = [{
     "state": "active",
     "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
   },
-  "value": "#091E4208",
+  "value": "#F7F8F9",
   "filePath": "src/tokens/atlassian-light/elevation/surface.tsx",
   "isSource": true,
   "original": {
@@ -5277,7 +5366,7 @@ const tokens = [{
       "state": "active",
       "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
     },
-    "value": "N100A"
+    "value": "N100"
   },
   "name": "elevation.surface.sunken",
   "path": ["elevation", "surface", "sunken"]

package/dist/es2019/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.7.0";
+const version = "0.7.3";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/tokens/atlassian-dark/color/background.js

@@ -1,7 +1,17 @@
 const color = {
   color: {
     blanket: {
-      value: 'DN-100A'
+      '[default]': {
+        value: 'DN-100A'
+      },
+      // @ts-ignore temporary value (B600 8% opacity)
+      selected: {
+        value: '#1D7AFCCC'
+      },
+      // @ts-ignore temporary value (R600 8% opacity)
+      danger: {
+        value: '#E34935CC'
+      }
     },
     background: {
       disabled: {

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

@@ -22,6 +22,29 @@ const shadow = {
           opacity: 0.5
         }]
       },
+      overflow: {
+        value: [{
+          radius: 12,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          // @ts-ignore no current palette colour for this yet
+          color: '#030404',
+          // This opacity overrides the color alpha.
+          opacity: 0.56
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          // @ts-ignore no current palette colour for this yet
+          color: '#030404',
+          // This opacity overrides the color alpha.
+          opacity: 0.5
+        }]
+      },
       overlay: {
         value: [{
           radius: 0,

package/dist/es2019/tokens/atlassian-light/color/background.js

@@ -1,7 +1,17 @@
 const color = {
   color: {
     blanket: {
-      value: 'N500A'
+      '[default]': {
+        value: 'N500A'
+      },
+      // @ts-ignore temporary value (B500 8% opacity)
+      selected: {
+        value: '#388BFFCC'
+      },
+      // @ts-ignore temporary value (R500 8% opacity)
+      danger: {
+        value: '#EF5C48CC'
+      }
     },
     background: {
       disabled: {

package/dist/es2019/tokens/atlassian-light/elevation/shadow.js

@@ -20,6 +20,25 @@ const shadow = {
           opacity: 0.31
         }]
       },
+      overflow: {
+        value: [{
+          radius: 8,
+          offset: {
+            x: 0,
+            y: 8
+          },
+          color: 'N1100',
+          opacity: 0.08
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'N1100',
+          opacity: 0.12
+        }]
+      },
       overlay: {
         value: [{
           radius: 12,

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

@@ -5,7 +5,7 @@ const elevation = {
         value: 'N0'
       },
       sunken: {
-        value: 'N100A'
+        value: 'N100'
       },
       raised: {
         value: 'N0'

package/dist/es2019/tokens/default/color/background.js

@@ -1,10 +1,26 @@
 const color = {
   color: {
     blanket: {
-      attributes: {
-        group: 'paint',
-        state: 'active',
-        description: 'Use for the screen overlay that appears with modal dialogs'
+      '[default]': {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for the screen overlay that appears with modal dialogs'
+        }
+      },
+      selected: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+        }
+      },
+      danger: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+        }
       }
     },
     background: {

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

@@ -257,7 +257,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.blanket',
+          replacement: 'color.blanket.[default]',
           description: 'Use for the screen overlay that appears with modal dialogs'
         }
       },

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

@@ -8,6 +8,13 @@ const shadow = {
           description: `Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised`
         }
       },
+      overflow: {
+        attributes: {
+          group: 'shadow',
+          state: 'active',
+          description: `Use to create a shadow when content scolls under other content.`
+        }
+      },
       overlay: {
         attributes: {
           group: 'shadow',

package/dist/es2019/version.json

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

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

@@ -135,7 +135,7 @@ var renameMapper = [{
 }, {
   "path": "color.background.blanket",
   "state": "deprecated",
-  "replacement": "color.blanket"
+  "replacement": "color.blanket.[default]"
 }, {
   "path": "color.background.boldBrand.hover",
   "state": "deprecated",

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

@@ -234,6 +234,8 @@ var defaultTokenValues = {
   'color.background.transparentNeutral.hover': '#091E420F',
   'color.background.transparentNeutral.pressed': '#091E4224',
   'color.blanket': '#091E427A',
+  'color.blanket.selected': '#388BFFCC',
+  'color.blanket.danger': '#EF5C48CC',
   'color.interaction.hovered': '#ffffff33',
   'color.interaction.pressed': '#ffffff5c',
   'color.interaction.inverse.hovered': '#00000029',
@@ -263,9 +265,10 @@ var defaultTokenValues = {
   'shadow.card': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
   'shadow.overlay': '0px 8px 12px #091E4226, 0px 0px 1px #091E424F',
   'elevation.shadow.raised': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
+  '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.sunken': '#091E4208',
+  'elevation.surface.sunken': '#F7F8F9',
   'elevation.surface.raised': '#FFFFFF',
   'elevation.surface.overlay': '#FFFFFF',
   'utility.UNSAFE_util.transparent': 'transparent',

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

@@ -230,6 +230,8 @@ var tokens = {
   'color.background.transparentNeutral.hover': '--ds-background-transparentNeutral-hover',
   'color.background.transparentNeutral.pressed': '--ds-background-transparentNeutral-pressed',
   'color.blanket': '--ds-blanket',
+  'color.blanket.selected': '--ds-blanket-selected',
+  'color.blanket.danger': '--ds-blanket-danger',
   'color.interaction.hovered': '--ds-interaction-hovered',
   'color.interaction.pressed': '--ds-interaction-pressed',
   'color.interaction.inverse.hovered': '--ds-interaction-inverse-hovered',
@@ -259,6 +261,7 @@ var tokens = {
   'shadow.card': '--ds-card',
   'shadow.overlay': '--ds-overlay',
   'elevation.shadow.raised': '--ds-shadow-raised',
+  'elevation.shadow.overflow': '--ds-shadow-overflow',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
   'elevation.surface.sunken': '--ds-surface-sunken',

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

@@ -3541,7 +3541,7 @@ var tokens = [{
   "attributes": {
     "group": "paint",
     "state": "deprecated",
-    "replacement": "color.blanket",
+    "replacement": "color.blanket.[default]",
     "description": "Use for the screen overlay that appears with modal dialogs"
   },
   "value": "#03040442",
@@ -3551,7 +3551,7 @@ var tokens = [{
     "attributes": {
       "group": "paint",
       "state": "deprecated",
-      "replacement": "color.blanket",
+      "replacement": "color.blanket.[default]",
       "description": "Use for the screen overlay that appears with modal dialogs"
     },
     "value": "DN-100A"
@@ -4499,8 +4499,46 @@ var tokens = [{
     },
     "value": "DN-100A"
   },
-  "name": "color.blanket",
-  "path": ["color", "blanket"]
+  "name": "color.blanket.[default]",
+  "path": ["color", "blanket", "[default]"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+  },
+  "value": "#1D7AFCCC",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
+    },
+    "value": "#1D7AFCCC"
+  },
+  "name": "color.blanket.selected",
+  "path": ["color", "blanket", "selected"]
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+  },
+  "value": "#E34935CC",
+  "filePath": "src/tokens/atlassian-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
+    },
+    "value": "#E34935CC"
+  },
+  "name": "color.blanket.danger",
+  "path": ["color", "blanket", "danger"]
 }, {
   "attributes": {
     "group": "paint",
@@ -5212,6 +5250,57 @@ var tokens = [{
   },
   "name": "elevation.shadow.raised",
   "path": ["elevation", "shadow", "raised"]
+}, {
+  "attributes": {
+    "group": "shadow",
+    "state": "active",
+    "description": "Use to create a shadow when content scolls under other content."
+  },
+  "value": [{
+    "radius": 12,
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "color": "#030404",
+    "opacity": 0.56
+  }, {
+    "radius": 1,
+    "offset": {
+      "x": 0,
+      "y": 0
+    },
+    "color": "#030404",
+    "opacity": 0.5
+  }],
+  "filePath": "src/tokens/atlassian-dark/elevation/shadow.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shadow",
+      "state": "active",
+      "description": "Use to create a shadow when content scolls under other content."
+    },
+    "value": [{
+      "radius": 12,
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "color": "#030404",
+      "opacity": 0.56
+    }, {
+      "radius": 1,
+      "offset": {
+        "x": 0,
+        "y": 0
+      },
+      "color": "#030404",
+      "opacity": 0.5
+    }]
+  },
+  "name": "elevation.shadow.overflow",
+  "path": ["elevation", "shadow", "overflow"]
 }, {
   "attributes": {
     "group": "shadow",