@atlaskit/tokens 0.10.18 → 0.10.20

package/dist/es2019/palettes/palette.js

@@ -1,4 +1,22 @@
 const 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/es2019/tokens/atlassian-dark/elevation/shadow.js

@@ -3,6 +3,18 @@ const shadow = {
     shadow: {
       raised: {
         value: [{
+          // This inset shadow is just to allow animations between shadow types
+          radius: 0,
+          spread: 1,
+          // @ts-ignore no current palette colour for this yet
+          color: '#000000',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0,
+          inset: true
+        }, {
           radius: 1,
           offset: {
             x: 0,

package/dist/es2019/tokens/atlassian-dark/elevation/surface.js

@@ -2,16 +2,40 @@ const elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'DN0'
+        '[default]': {
+          value: 'DN0'
+        },
+        hovered: {
+          value: 'DN100'
+        },
+        pressed: {
+          value: 'DN200'
+        }
       },
       sunken: {
         value: 'DN-100'
       },
       raised: {
-        value: 'DN100'
+        '[default]': {
+          value: 'DN100'
+        },
+        hovered: {
+          value: 'DN200'
+        },
+        pressed: {
+          value: 'DN300'
+        }
       },
       overlay: {
-        value: 'DN200'
+        '[default]': {
+          value: 'DN200'
+        },
+        hovered: {
+          value: 'DN300'
+        },
+        pressed: {
+          value: 'DN400'
+        }
       }
     }
   }

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

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

package/dist/es2019/tokens/atlassian-legacy-dark/elevation/shadow.js

@@ -3,6 +3,18 @@ const shadow = {
     shadow: {
       raised: {
         value: [{
+          // This inset shadow is just to allow animations between shadow types
+          radius: 0,
+          spread: 1,
+          // @ts-ignore no current palette colour for this yet
+          color: '#000000',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0,
+          inset: true
+        }, {
           radius: 1,
           offset: {
             x: 0,

package/dist/es2019/tokens/atlassian-legacy-dark/elevation/surface.js

@@ -2,16 +2,40 @@ const elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'DN30'
+        '[default]': {
+          value: 'DN30'
+        },
+        hovered: {
+          value: 'DN40'
+        },
+        pressed: {
+          value: 'DN50'
+        }
       },
       sunken: {
         value: 'DN100'
       },
       raised: {
-        value: 'DN80'
+        '[default]': {
+          value: 'DN80'
+        },
+        hovered: {
+          value: 'DN90'
+        },
+        pressed: {
+          value: 'DN100'
+        }
       },
       overlay: {
-        value: 'DN200'
+        '[default]': {
+          value: 'DN200'
+        },
+        hovered: {
+          value: 'DN300'
+        },
+        pressed: {
+          value: 'DN400'
+        }
       }
     }
   }

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

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

package/dist/es2019/tokens/atlassian-legacy-light/elevation/surface.js

@@ -2,16 +2,40 @@ const elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       },
       sunken: {
         value: 'N20'
       },
       raised: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       },
       overlay: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N10'
+        },
+        pressed: {
+          value: 'N20'
+        }
       }
     }
   }

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

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

package/dist/es2019/tokens/atlassian-light/elevation/surface.js

@@ -2,16 +2,40 @@ const elevation = {
   elevation: {
     surface: {
       '[default]': {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       },
       sunken: {
         value: 'N100'
       },
       raised: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       },
       overlay: {
-        value: 'N0'
+        '[default]': {
+          value: 'N0'
+        },
+        hovered: {
+          value: 'N200'
+        },
+        pressed: {
+          value: 'N300'
+        }
       }
     }
   }

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

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

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

@@ -605,7 +605,7 @@ const 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.'
         }
       },
@@ -616,7 +616,7 @@ const 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'
         }
       },
@@ -640,7 +640,7 @@ const color = {
           introduced: '0.0.15',
           deprecated: '0.6.0',
           deleted: '0.8.0',
-          replacement: 'elevation.surface.overlay',
+          replacement: 'elevation.surface.overlay.[default]',
           description: `
 Use 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).
 

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

@@ -14,7 +14,7 @@ const 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/es2019/tokens/default/elevation/surface.js

@@ -2,11 +2,29 @@ const 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: {
@@ -18,21 +36,55 @@ const 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
-
-Also 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/es2019/tokens/default/opacity/opacity.js

@@ -0,0 +1,21 @@
+const 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/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.20",
 	"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/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
  */
 var renameMapper = [{
@@ -218,15 +218,15 @@ var 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/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::59a1a4aaa5f768efccaed2c726fc2b08>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -285,9 +285,17 @@ var 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/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::fc7198ce92b9604af441e36c1acb2075>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -282,9 +282,17 @@ var 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'
 };