@atlaskit/tokens 0.10.18 → 0.10.19

package/dist/es2019/utils/token-ids.js

@@ -1,4 +1,4 @@
-import { CSS_PREFIX } from '../constants';
+import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
 /**
  * Transforms a style dictionary token path to a CSS custom property.
  *
@@ -15,10 +15,11 @@ import { CSS_PREFIX } from '../constants';
  */
 
 export const getCSSCustomProperty = path => {
-  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
-  return `--${[CSS_PREFIX, ...normalizedPath.slice(1)].filter(el => el !== '[default]').join('-')}`;
-};
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
 
+  const slice = CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
+  return `--${[CSS_PREFIX, ...normalizedPath.slice(slice)].filter(el => el !== '[default]').join('-')}`;
+};
 /**
  * Transforms a style dictionary token path to a shorthand token id
  * These ids will be typically be how tokens are interacted with via typescript and css
@@ -33,6 +34,7 @@ export const getCSSCustomProperty = path => {
  * // Returns color.background.bold
  * getTokenId('color.background.bold.[default]')
  */
+
 export const getTokenId = path => {
   const normalizedPath = typeof path === 'string' ? path.split('.') : path;
   return normalizedPath.filter(el => el !== '[default]').join('.');

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.18",
+	"version": "0.10.19",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -1,9 +1,43 @@
 /**
  * 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/esm/artifacts/palettes-raw/palette.js

@@ -1,9 +1,43 @@
 /**
  * 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/esm/artifacts/token-default-values.js

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::bf85c12f621d58ae427a6fd99c62fd24>>
+ * @codegen <<SignedSource::d33654f7422a0d210f1d8a1bf4497a45>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -288,6 +288,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/esm/artifacts/token-names.js

@@ -1,6 +1,6 @@
 /**
  * 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 = {
@@ -285,6 +285,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/esm/artifacts/tokens-raw/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * 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 = [{
@@ -6499,7 +6499,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,
@@ -6525,7 +6525,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,
@@ -6704,6 +6704,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/esm/artifacts/tokens-raw/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * 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 = [{
@@ -6499,7 +6499,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,
@@ -6525,7 +6525,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,
@@ -6704,6 +6704,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/esm/artifacts/tokens-raw/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * 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 = [{
@@ -6479,7 +6479,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,
@@ -6505,7 +6505,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,
@@ -6664,6 +6664,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/esm/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * 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 = [{
@@ -6479,7 +6479,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,
@@ -6505,7 +6505,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,
@@ -6664,6 +6664,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/esm/constants.js

@@ -1,7 +1,8 @@
 export var THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark'];
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var DEFAULT_THEME = 'light';
-export var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
+export var CSS_PREFIX = 'ds';
+export var CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
 
 export var THEME_NAME_MAP = {
   'atlassian-light': 'light',

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "0.10.18";
+var version = "0.10.19";
 
 function token(path, fallback) {
   var token = tokens[path];

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

@@ -4,6 +4,24 @@
  * 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/esm/palettes/palette.js

@@ -1,4 +1,22 @@
 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/esm/tokens/atlassian-dark/opacity/opacity.js

@@ -0,0 +1,11 @@
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+export default opacity;

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

@@ -0,0 +1,11 @@
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+export default opacity;

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

@@ -0,0 +1,11 @@
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+export default opacity;

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

@@ -0,0 +1,11 @@
+var opacity = {
+  opacity: {
+    disabled: {
+      value: 'Opacity40'
+    },
+    loading: {
+      value: 'Opacity20'
+    }
+  }
+};
+export default opacity;

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

@@ -14,7 +14,7 @@ var shadow = {
           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."
         }
       },
       overlay: {

package/dist/esm/tokens/default/opacity/opacity.js

@@ -0,0 +1,21 @@
+var opacity = {
+  opacity: {
+    disabled: {
+      attributes: {
+        group: 'opacity',
+        state: 'active',
+        introduced: '0.10.13',
+        description: "Apply to images when in a disabled state."
+      }
+    },
+    loading: {
+      attributes: {
+        group: 'opacity',
+        state: 'active',
+        introduced: '0.10.13',
+        description: "Apply to content that sits under a loading spinner."
+      }
+    }
+  }
+};
+export default opacity;

package/dist/esm/utils/token-ids.js

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { CSS_PREFIX } from '../constants';
+import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
 /**
  * Transforms a style dictionary token path to a CSS custom property.
  *
@@ -16,12 +16,13 @@ import { CSS_PREFIX } from '../constants';
  */
 
 export var getCSSCustomProperty = function getCSSCustomProperty(path) {
-  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
-  return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(1))).filter(function (el) {
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
+
+  var slice = CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
+  return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(slice))).filter(function (el) {
     return el !== '[default]';
   }).join('-'));
 };
-
 /**
  * Transforms a style dictionary token path to a shorthand token id
  * These ids will be typically be how tokens are interacted with via typescript and css
@@ -36,6 +37,7 @@ export var getCSSCustomProperty = function getCSSCustomProperty(path) {
  * // Returns color.background.bold
  * getTokenId('color.background.bold.[default]')
  */
+
 export var getTokenId = function getTokenId(path) {
   var normalizedPath = typeof path === 'string' ? path.split('.') : path;
   return normalizedPath.filter(function (el) {

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.18",
+	"version": "0.10.19",
 	"sideEffects": [
 		"**/*.css"
 	]