@atlaskit/tokens 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 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;

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;

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',

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',

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",

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",

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.1";
 
 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-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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"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',

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',

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",

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",

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.1";
 
 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-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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"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',

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',