@atlaskit/tokens 0.10.18 → 0.10.19

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 0.10.19
+
+### Patch Changes
+
+- [`efe09ca1159`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efe09ca1159) - Adds new opacity tokens, opacity.disabled and opacity.loading, that can be applied to elements to indicate loading and disabled states.
+
 ## 0.10.18
 
 ### 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::e7a1da5f12bf3daf065833cca6f750d8>>
+ * @codegen <<SignedSource::2d184cd66c975da2b8dadfece3cfd90b>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="dark"] {
@@ -285,6 +285,8 @@ html[data-theme="dark"] {
   --ds-surface-sunken: #101214;
   --ds-surface-raised: #1D2125;
   --ds-surface-overlay: #22272B;
+  --ds-opacity-disabled: 0.4;
+  --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;
   --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
 }

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::309d5e73b0df37c62c47c9818f306d6f>>
+ * @codegen <<SignedSource::9e4724606cca025b6077a0f11ccdee6c>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="legacy-dark"] {
@@ -285,6 +285,8 @@ html[data-theme="legacy-dark"] {
   --ds-surface-sunken: #67758F;
   --ds-surface-raised: #455166;
   --ds-surface-overlay: #7988A3;
+  --ds-opacity-disabled: 0.4;
+  --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;
   --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
 }

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::ec6a4031921471c3f81d72dd860c027d>>
+ * @codegen <<SignedSource::b2f59f139505a9ba4477df154a83033b>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="legacy-light"] {
@@ -285,6 +285,8 @@ html[data-theme="legacy-light"] {
   --ds-surface-sunken: #F4F5F7;
   --ds-surface-raised: #FFFFFF;
   --ds-surface-overlay: #FFFFFF;
+  --ds-opacity-disabled: 0.4;
+  --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;
   --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
 }

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::f188dd3bf2da5dc22166cc13f91c1373>>
+ * @codegen <<SignedSource::5db5ba104d3553b1f54a52b44df005b2>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="light"] {
@@ -285,6 +285,8 @@ html[data-theme="light"] {
   --ds-surface-sunken: #F7F8F9;
   --ds-surface-raised: #FFFFFF;
   --ds-surface-overlay: #FFFFFF;
+  --ds-opacity-disabled: 0.4;
+  --ds-opacity-loading: 0.2;
   --ds-UNSAFE_util-transparent: transparent;
   --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
 }

package/dist/cjs/artifacts/palettes-raw/legacy-palette.js

@@ -7,10 +7,44 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::73a857568cd56494102a8abd48a3f08c>>
+ * @codegen <<SignedSource::91ca2bc33315a9a910c7ca93bcb63936>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
+  "value": 0.2,
+  "attributes": {
+    "group": "palette",
+    "category": "opacity"
+  },
+  "filePath": "src/palettes/legacy-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 0.2,
+    "attributes": {
+      "group": "palette",
+      "category": "opacity"
+    }
+  },
+  "name": "value.opacity.Opacity20",
+  "path": ["value", "opacity", "Opacity20"]
+}, {
+  "value": 0.4,
+  "attributes": {
+    "group": "palette",
+    "category": "opacity"
+  },
+  "filePath": "src/palettes/legacy-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 0.4,
+    "attributes": {
+      "group": "palette",
+      "category": "opacity"
+    }
+  },
+  "name": "value.opacity.Opacity40",
+  "path": ["value", "opacity", "Opacity40"]
+}, {
   "value": "transparent",
   "attributes": {
     "group": "palette",

package/dist/cjs/artifacts/palettes-raw/palette.js

@@ -7,10 +7,44 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::48a859c3e6fb79202e5702421d1b6254>>
+ * @codegen <<SignedSource::54a73caa5e11805075c57f698252b1e7>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
+  "value": 0.2,
+  "attributes": {
+    "group": "palette",
+    "category": "opacity"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 0.2,
+    "attributes": {
+      "group": "palette",
+      "category": "opacity"
+    }
+  },
+  "name": "value.opacity.Opacity20",
+  "path": ["value", "opacity", "Opacity20"]
+}, {
+  "value": 0.4,
+  "attributes": {
+    "group": "palette",
+    "category": "opacity"
+  },
+  "filePath": "src/palettes/palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 0.4,
+    "attributes": {
+      "group": "palette",
+      "category": "opacity"
+    }
+  },
+  "name": "value.opacity.Opacity40",
+  "path": ["value", "opacity", "Opacity40"]
+}, {
   "value": "#E9F2FF",
   "attributes": {
     "group": "palette",

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::bf85c12f621d58ae427a6fd99c62fd24>>
+ * @codegen <<SignedSource::d33654f7422a0d210f1d8a1bf4497a45>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -295,6 +295,8 @@ var defaultTokenValues = {
   'elevation.surface.sunken': '#F7F8F9',
   'elevation.surface.raised': '#FFFFFF',
   'elevation.surface.overlay': '#FFFFFF',
+  'opacity.disabled': '0.4',
+  'opacity.loading': '0.2',
   'utility.UNSAFE_util.transparent': 'transparent',
   'utility.UNSAFE_util.MISSING_TOKEN': '#FA11F2'
 };

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::3acc6507214a2d925fd75bce0549f0ab>>
+ * @codegen <<SignedSource::e9fa17eebeaf3b2a8318f43c4f7e89c4>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -292,6 +292,8 @@ var tokens = {
   'elevation.surface.sunken': '--ds-surface-sunken',
   'elevation.surface.raised': '--ds-surface-raised',
   'elevation.surface.overlay': '--ds-surface-overlay',
+  'opacity.disabled': '--ds-opacity-disabled',
+  'opacity.loading': '--ds-opacity-loading',
   'utility.UNSAFE_util.transparent': '--ds-UNSAFE_util-transparent',
   'utility.UNSAFE_util.MISSING_TOKEN': '--ds-UNSAFE_util-MISSING_TOKEN'
 };

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::3fef3c7e03c920ccf46adb8e5016f1f9>>
+ * @codegen <<SignedSource::b756f5f6727c826e5f41b4d6b9d2b8e3>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -6506,7 +6506,7 @@ var tokens = [{
     "group": "shadow",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use to create a shadow when content scolls under other content."
+    "description": "Use to create a shadow when content scrolls under other content."
   },
   "value": [{
     "radius": 12,
@@ -6532,7 +6532,7 @@ var tokens = [{
       "group": "shadow",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use to create a shadow when content scolls under other content."
+      "description": "Use to create a shadow when content scrolls under other content."
     },
     "value": [{
       "radius": 12,
@@ -6711,6 +6711,48 @@ var tokens = [{
   },
   "name": "elevation.surface.overlay",
   "path": ["elevation", "surface", "overlay"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to images when in a disabled state."
+  },
+  "value": 0.4,
+  "filePath": "src/tokens/atlassian-dark/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to images when in a disabled state."
+    },
+    "value": "Opacity40"
+  },
+  "name": "opacity.disabled",
+  "path": ["opacity", "disabled"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to content that sits under a loading spinner."
+  },
+  "value": 0.2,
+  "filePath": "src/tokens/atlassian-dark/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to content that sits under a loading spinner."
+    },
+    "value": "Opacity20"
+  },
+  "name": "opacity.loading",
+  "path": ["opacity", "loading"]
 }, {
   "attributes": {
     "group": "raw",

package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-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::1db540cf97cd7f307fc628bbb5346972>>
+ * @codegen <<SignedSource::a99ec8f38397a16cab91e936de51714f>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -6506,7 +6506,7 @@ var tokens = [{
     "group": "shadow",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use to create a shadow when content scolls under other content."
+    "description": "Use to create a shadow when content scrolls under other content."
   },
   "value": [{
     "radius": 12,
@@ -6532,7 +6532,7 @@ var tokens = [{
       "group": "shadow",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use to create a shadow when content scolls under other content."
+      "description": "Use to create a shadow when content scrolls under other content."
     },
     "value": [{
       "radius": 12,
@@ -6711,6 +6711,48 @@ var tokens = [{
   },
   "name": "elevation.surface.overlay",
   "path": ["elevation", "surface", "overlay"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to images when in a disabled state."
+  },
+  "value": 0.4,
+  "filePath": "src/tokens/atlassian-legacy-dark/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to images when in a disabled state."
+    },
+    "value": "Opacity40"
+  },
+  "name": "opacity.disabled",
+  "path": ["opacity", "disabled"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to content that sits under a loading spinner."
+  },
+  "value": 0.2,
+  "filePath": "src/tokens/atlassian-legacy-dark/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to content that sits under a loading spinner."
+    },
+    "value": "Opacity20"
+  },
+  "name": "opacity.loading",
+  "path": ["opacity", "loading"]
 }, {
   "attributes": {
     "group": "raw",

package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.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::6a9c9852352020740a85fbffbcc447e3>>
+ * @codegen <<SignedSource::180d57420fabe8bfc7baadbcf7e39146>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -6486,7 +6486,7 @@ var tokens = [{
     "group": "shadow",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use to create a shadow when content scolls under other content."
+    "description": "Use to create a shadow when content scrolls under other content."
   },
   "value": [{
     "radius": 8,
@@ -6512,7 +6512,7 @@ var tokens = [{
       "group": "shadow",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use to create a shadow when content scolls under other content."
+      "description": "Use to create a shadow when content scrolls under other content."
     },
     "value": [{
       "radius": 8,
@@ -6671,6 +6671,48 @@ var tokens = [{
   },
   "name": "elevation.surface.overlay",
   "path": ["elevation", "surface", "overlay"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to images when in a disabled state."
+  },
+  "value": 0.4,
+  "filePath": "src/tokens/atlassian-legacy-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to images when in a disabled state."
+    },
+    "value": "Opacity40"
+  },
+  "name": "opacity.disabled",
+  "path": ["opacity", "disabled"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to content that sits under a loading spinner."
+  },
+  "value": 0.2,
+  "filePath": "src/tokens/atlassian-legacy-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to content that sits under a loading spinner."
+    },
+    "value": "Opacity20"
+  },
+  "name": "opacity.loading",
+  "path": ["opacity", "loading"]
 }, {
   "attributes": {
     "group": "raw",

package/dist/cjs/artifacts/tokens-raw/atlassian-light.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::f6a9d19d9e568ee23ce24a7127ceb09c>>
+ * @codegen <<SignedSource::6977decc7ef870a337b1171d6775d9dc>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -6486,7 +6486,7 @@ var tokens = [{
     "group": "shadow",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Use to create a shadow when content scolls under other content."
+    "description": "Use to create a shadow when content scrolls under other content."
   },
   "value": [{
     "radius": 8,
@@ -6512,7 +6512,7 @@ var tokens = [{
       "group": "shadow",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Use to create a shadow when content scolls under other content."
+      "description": "Use to create a shadow when content scrolls under other content."
     },
     "value": [{
       "radius": 8,
@@ -6671,6 +6671,48 @@ var tokens = [{
   },
   "name": "elevation.surface.overlay",
   "path": ["elevation", "surface", "overlay"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to images when in a disabled state."
+  },
+  "value": 0.4,
+  "filePath": "src/tokens/atlassian-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to images when in a disabled state."
+    },
+    "value": "Opacity40"
+  },
+  "name": "opacity.disabled",
+  "path": ["opacity", "disabled"]
+}, {
+  "attributes": {
+    "group": "opacity",
+    "state": "active",
+    "introduced": "0.10.13",
+    "description": "Apply to content that sits under a loading spinner."
+  },
+  "value": 0.2,
+  "filePath": "src/tokens/atlassian-light/opacity/opacity.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "opacity",
+      "state": "active",
+      "introduced": "0.10.13",
+      "description": "Apply to content that sits under a loading spinner."
+    },
+    "value": "Opacity20"
+  },
+  "name": "opacity.loading",
+  "path": ["opacity", "loading"]
 }, {
   "attributes": {
     "group": "raw",

package/dist/cjs/constants.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_NAME_MAP = exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.DEFAULT_THEME = exports.CSS_PREFIX = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_NAME_MAP = exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.DEFAULT_THEME = exports.CSS_VAR_FULL = exports.CSS_PREFIX = void 0;
 var THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark'];
 exports.THEMES = THEMES;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
 exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var DEFAULT_THEME = 'light';
 exports.DEFAULT_THEME = DEFAULT_THEME;
-var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
-
+var CSS_PREFIX = 'ds';
 exports.CSS_PREFIX = CSS_PREFIX;
+var CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
+
+exports.CSS_VAR_FULL = CSS_VAR_FULL;
 var THEME_NAME_MAP = {
   'atlassian-light': 'light',
   'atlassian-dark': 'dark',

package/dist/cjs/get-token.js

@@ -14,7 +14,7 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.10.18";
+var version = "0.10.19";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/palettes/legacy-palette.js

@@ -11,6 +11,24 @@ exports.default = void 0;
  * This palette should be exclusively used for backwards compatible themes
  */
 var palette = {
+  value: {
+    opacity: {
+      Opacity20: {
+        value: 0.2,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      },
+      Opacity40: {
+        value: 0.4,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      }
+    }
+  },
   color: {
     palette: {
       transparent: {

package/dist/cjs/palettes/palette.js

@@ -5,6 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var palette = {
+  value: {
+    opacity: {
+      Opacity20: {
+        value: 0.2,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      },
+      Opacity40: {
+        value: 0.4,
+        attributes: {
+          group: 'palette',
+          category: 'opacity'
+        }
+      }
+    }
+  },
   color: {
     palette: {
       B100: {

package/dist/cjs/tokens/atlassian-dark/opacity/opacity.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+var _default = opacity;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-legacy-dark/opacity/opacity.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+var _default = opacity;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-legacy-light/opacity/opacity.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+var _default = opacity;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-light/opacity/opacity.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+var _default = opacity;
+exports.default = _default;