@atlaskit/tokens 0.10.18 → 0.10.20

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

@@ -611,7 +611,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.raised',
+          replacement: 'elevation.surface.raised.[default]',
           description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
         }
       },
@@ -622,7 +622,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.[default]',
+          replacement: 'elevation.surface.[default].[default]',
           description: 'Use as the primary background for the UI'
         }
       },
@@ -646,7 +646,7 @@ var color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.overlay',
+          replacement: 'elevation.surface.overlay.[default]',
           description: "\nUse for the background of overlay elements, such as modals, dropdown menus, flags, and inline dialogs (i.e. elements that sit on top of the UI).\n\nAlso use for the background of raised cards in a dragged state.\n\nCombine with shadow.overlay."
         }
       },

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

@@ -20,7 +20,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/cjs/tokens/default/elevation/surface.js

@@ -8,11 +8,29 @@ var shadow = {
   elevation: {
     surface: {
       '[default]': {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          description: 'Use as the primary background for the UI.'
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: 'Use as the primary background for the UI.'
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Hovered state of elevation.surface'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Pressed state of elevation.surface'
+          }
         }
       },
       sunken: {
@@ -24,19 +42,55 @@ var shadow = {
         }
       },
       raised: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          description: 'Use for the background of raised cards, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised'
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: 'Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised.'
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Hovered state of elevation.surface.raised'
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: 'Pressed state of elevation.surface.raised'
+          }
         }
       },
       overlay: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          introduced: '0.6.0',
-          description: "Use for the background of elements that sit on top of they UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.shadow.overlay\n\nAlso use for the background of raised cards in a dragged state."
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.6.0',
+            description: "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay."
+          }
+        },
+        hovered: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: "Hovered state of elevation.surface.overlay"
+          }
+        },
+        pressed: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.20',
+            description: "Pressed state of elevation.surface.overlay"
+          }
         }
       }
     }

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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."
+      }
+    }
+  }
+};
+var _default = opacity;
+exports.default = _default;

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

@@ -26,14 +26,13 @@ var _constants = require("../constants");
  * getCSSCustomProperty('color.background.bold.[default]')
  */
 var getCSSCustomProperty = function getCSSCustomProperty(path) {
-  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
-  return "--".concat([_constants.CSS_PREFIX].concat((0, _toConsumableArray2.default)(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 = _constants.CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
+  return "--".concat([_constants.CSS_PREFIX].concat((0, _toConsumableArray2.default)(normalizedPath.slice(slice))).filter(function (el) {
     return el !== '[default]';
   }).join('-'));
 };
-
-exports.getCSSCustomProperty = getCSSCustomProperty;
-
 /**
  * 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
@@ -48,6 +47,10 @@ exports.getCSSCustomProperty = getCSSCustomProperty;
  * // Returns color.background.bold
  * getTokenId('color.background.bold.[default]')
  */
+
+
+exports.getCSSCustomProperty = getCSSCustomProperty;
+
 var getTokenId = function getTokenId(path) {
   var normalizedPath = typeof path === 'string' ? path.split('.') : path;
   return normalizedPath.filter(function (el) {

package/dist/cjs/version.json

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

package/dist/es2019/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
  */
 const 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/es2019/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
  */
 const 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/es2019/artifacts/rename-mapping.js

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::afc1ce63c4571109e333891b70af2ae8>>
+ * @codegen <<SignedSource::785f21ff78f22bc07f51619e1add8ba9>>
  * @codegenCommand yarn build tokens
  */
 const renameMapper = [{
@@ -218,15 +218,15 @@ const renameMapper = [{
 }, {
   "path": "color.background.card",
   "state": "deleted",
-  "replacement": "elevation.surface.raised"
+  "replacement": "elevation.surface.raised.[default]"
 }, {
   "path": "color.background.default",
   "state": "deleted",
-  "replacement": "elevation.surface.[default]"
+  "replacement": "elevation.surface.[default].[default]"
 }, {
   "path": "color.background.overlay",
   "state": "deleted",
-  "replacement": "elevation.surface.overlay"
+  "replacement": "elevation.surface.overlay.[default]"
 }, {
   "path": "color.background.subtleBorderedNeutral.pressed",
   "state": "deleted",

package/dist/es2019/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::59a1a4aaa5f768efccaed2c726fc2b08>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -285,9 +285,17 @@ const defaultTokenValues = {
   '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.hovered': '#F1F2F4',
+  'elevation.surface.pressed': '#DCDFE4',
   'elevation.surface.sunken': '#F7F8F9',
   'elevation.surface.raised': '#FFFFFF',
+  'elevation.surface.raised.hovered': '#F1F2F4',
+  'elevation.surface.raised.pressed': '#DCDFE4',
   'elevation.surface.overlay': '#FFFFFF',
+  'elevation.surface.overlay.hovered': '#F1F2F4',
+  'elevation.surface.overlay.pressed': '#DCDFE4',
+  'opacity.disabled': '0.4',
+  'opacity.loading': '0.2',
   'utility.UNSAFE_util.transparent': 'transparent',
   'utility.UNSAFE_util.MISSING_TOKEN': '#FA11F2'
 };

package/dist/es2019/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::fc7198ce92b9604af441e36c1acb2075>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
@@ -282,9 +282,17 @@ const tokens = {
   'elevation.shadow.overflow': '--ds-shadow-overflow',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
+  'elevation.surface.hovered': '--ds-surface-hovered',
+  'elevation.surface.pressed': '--ds-surface-pressed',
   'elevation.surface.sunken': '--ds-surface-sunken',
   'elevation.surface.raised': '--ds-surface-raised',
+  'elevation.surface.raised.hovered': '--ds-surface-raised-hovered',
+  'elevation.surface.raised.pressed': '--ds-surface-raised-pressed',
   'elevation.surface.overlay': '--ds-surface-overlay',
+  'elevation.surface.overlay.hovered': '--ds-surface-overlay-hovered',
+  'elevation.surface.overlay.pressed': '--ds-surface-overlay-pressed',
+  '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'
 };