@atlaskit/tokens 0.7.0 → 0.7.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/tokens
 
+## 0.7.3
+
+### Patch Changes
+
+- [`ba0ddcf976e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba0ddcf976e) - Adding new token for `elevation.shadow.overflow`
+
+## 0.7.2
+
+### Patch Changes
+
+- [`2229ec7c745`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2229ec7c745) - elevation.sunken no longer uses a transparent color
+
+## 0.7.1
+
+### Patch Changes
+
+- [`5d35c6b1c5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d35c6b1c5f) - Adding new tokens for `color.blanket.selected` and `color.blanket.danger`
+
 ## 0.7.0
 
 ### Minor Changes

package/css/atlassian-dark.css

@@ -230,6 +230,8 @@ html[data-theme="dark"] {
   --ds-background-transparentNeutral-hover: #A1BDD914;
   --ds-background-transparentNeutral-pressed: #A6C5E229;
   --ds-blanket: #03040442;
+  --ds-blanket-selected: #1D7AFCCC;
+  --ds-blanket-danger: #E34935CC;
   --ds-interaction-hovered: #00000029;
   --ds-interaction-pressed: #00000052;
   --ds-interaction-inverse-hovered: #ffffff33;
@@ -259,6 +261,7 @@ html[data-theme="dark"] {
   --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-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-sunken: #101214;

package/css/atlassian-light.css

@@ -230,6 +230,8 @@
   --ds-background-transparentNeutral-hover: #091E420F;
   --ds-background-transparentNeutral-pressed: #091E4224;
   --ds-blanket: #091E427A;
+  --ds-blanket-selected: #388BFFCC;
+  --ds-blanket-danger: #EF5C48CC;
   --ds-interaction-hovered: #ffffff33;
   --ds-interaction-pressed: #ffffff5c;
   --ds-interaction-inverse-hovered: #00000029;
@@ -259,9 +261,10 @@
   --ds-card: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
   --ds-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
   --ds-shadow-raised: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
+  --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-sunken: #091E4208;
+  --ds-surface-sunken: #F7F8F9;
   --ds-surface-raised: #FFFFFF;
   --ds-surface-overlay: #FFFFFF;
   --ds-UNSAFE_util-transparent: transparent;

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

@@ -141,7 +141,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/cjs/artifacts/token-default-values.js

@@ -240,6 +240,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',
@@ -269,9 +271,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/cjs/artifacts/token-names.js

@@ -236,6 +236,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',
@@ -265,6 +267,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/cjs/artifacts/tokens-raw/atlassian-dark.js

@@ -3547,7 +3547,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",
@@ -3557,7 +3557,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"
@@ -4505,8 +4505,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",
@@ -5218,6 +5256,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",

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

@@ -3547,7 +3547,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": "#091E427A",
@@ -3557,7 +3557,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": "N500A"
@@ -4505,8 +4505,46 @@ var 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",
@@ -5198,6 +5236,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": 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",
@@ -5274,7 +5363,7 @@ var 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": {
@@ -5283,7 +5372,7 @@ var 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/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.7.0";
+var version = "0.7.3";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

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

@@ -7,7 +7,17 @@ exports.default = void 0;
 var 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/cjs/tokens/atlassian-dark/elevation/shadow.js

@@ -28,6 +28,29 @@ var 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/cjs/tokens/atlassian-light/color/background.js

@@ -7,7 +7,17 @@ exports.default = void 0;
 var 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/cjs/tokens/atlassian-light/elevation/shadow.js

@@ -26,6 +26,25 @@ var 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/cjs/tokens/atlassian-light/elevation/surface.js

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

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

@@ -7,10 +7,26 @@ exports.default = void 0;
 var 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/cjs/tokens/default/deprecated/deprecated.js

@@ -263,7 +263,7 @@ var 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/cjs/tokens/default/elevation/shadow.js

@@ -14,6 +14,13 @@ var 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/cjs/version.json

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

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

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

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

@@ -234,6 +234,8 @@ const 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 @@ const 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/es2019/artifacts/token-names.js

@@ -230,6 +230,8 @@ const 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 @@ const 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',