@atlaskit/tokens 0.10.18 → 0.10.20

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/elevation/shadow.js

@@ -3,6 +3,18 @@ var 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/esm/tokens/atlassian-dark/elevation/surface.js

@@ -2,16 +2,40 @@ var 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/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/elevation/shadow.js

@@ -3,6 +3,18 @@ var 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/esm/tokens/atlassian-legacy-dark/elevation/surface.js

@@ -2,16 +2,40 @@ var 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/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/elevation/surface.js

@@ -2,16 +2,40 @@ var 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/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/elevation/surface.js

@@ -2,16 +2,40 @@ var 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/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/deprecated/deprecated.js

@@ -605,7 +605,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.'
         }
       },
@@ -616,7 +616,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'
         }
       },
@@ -640,7 +640,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/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/elevation/surface.js

@@ -2,11 +2,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: {
@@ -18,19 +36,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/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.20",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/types/artifacts/palettes-raw/legacy-palette.d.ts

@@ -1,9 +1,26 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::73a857568cd56494102a8abd48a3f08c>>
+ * @codegen <<SignedSource::91ca2bc33315a9a910c7ca93bcb63936>>
  * @codegenCommand yarn build tokens
  */
-declare const tokens: {
+declare const tokens: ({
+    value: number;
+    attributes: {
+        group: string;
+        category: string;
+    };
+    filePath: string;
+    isSource: boolean;
+    original: {
+        value: number;
+        attributes: {
+            group: string;
+            category: string;
+        };
+    };
+    name: string;
+    path: string[];
+} | {
     value: string;
     attributes: {
         group: string;
@@ -20,5 +37,5 @@ declare const tokens: {
     };
     name: string;
     path: string[];
-}[];
+})[];
 export default tokens;

package/dist/types/artifacts/palettes-raw/palette.d.ts

@@ -1,9 +1,26 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::48a859c3e6fb79202e5702421d1b6254>>
+ * @codegen <<SignedSource::54a73caa5e11805075c57f698252b1e7>>
  * @codegenCommand yarn build tokens
  */
-declare const tokens: {
+declare const tokens: ({
+    value: number;
+    attributes: {
+        group: string;
+        category: string;
+    };
+    filePath: string;
+    isSource: boolean;
+    original: {
+        value: number;
+        attributes: {
+            group: string;
+            category: string;
+        };
+    };
+    name: string;
+    path: string[];
+} | {
     value: string;
     attributes: {
         group: string;
@@ -20,5 +37,5 @@ declare const tokens: {
     };
     name: string;
     path: string[];
-}[];
+})[];
 export default tokens;

package/dist/types/artifacts/rename-mapping.d.ts

@@ -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
  */
 import tokens from './token-names';

package/dist/types/artifacts/token-default-values.d.ts

@@ -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
  */
 declare const defaultTokenValues: {
@@ -285,9 +285,17 @@ declare const defaultTokenValues: {
     readonly 'elevation.shadow.overflow': "0px 8px 8px #091E4214, 0px 0px 1px #091E421F";
     readonly 'elevation.shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
     readonly 'elevation.surface': "#FFFFFF";
+    readonly 'elevation.surface.hovered': "#F1F2F4";
+    readonly 'elevation.surface.pressed': "#DCDFE4";
     readonly 'elevation.surface.sunken': "#F7F8F9";
     readonly 'elevation.surface.raised': "#FFFFFF";
+    readonly 'elevation.surface.raised.hovered': "#F1F2F4";
+    readonly 'elevation.surface.raised.pressed': "#DCDFE4";
     readonly 'elevation.surface.overlay': "#FFFFFF";
+    readonly 'elevation.surface.overlay.hovered': "#F1F2F4";
+    readonly 'elevation.surface.overlay.pressed': "#DCDFE4";
+    readonly 'opacity.disabled': "0.4";
+    readonly 'opacity.loading': "0.2";
     readonly 'utility.UNSAFE_util.transparent': "transparent";
     readonly 'utility.UNSAFE_util.MISSING_TOKEN': "#FA11F2";
 };

package/dist/types/artifacts/token-names.d.ts

@@ -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
  */
 declare const tokens: {
@@ -282,9 +282,17 @@ declare const tokens: {
     readonly 'elevation.shadow.overflow': "--ds-shadow-overflow";
     readonly 'elevation.shadow.overlay': "--ds-shadow-overlay";
     readonly 'elevation.surface': "--ds-surface";
+    readonly 'elevation.surface.hovered': "--ds-surface-hovered";
+    readonly 'elevation.surface.pressed': "--ds-surface-pressed";
     readonly 'elevation.surface.sunken': "--ds-surface-sunken";
     readonly 'elevation.surface.raised': "--ds-surface-raised";
+    readonly 'elevation.surface.raised.hovered': "--ds-surface-raised-hovered";
+    readonly 'elevation.surface.raised.pressed': "--ds-surface-raised-pressed";
     readonly 'elevation.surface.overlay': "--ds-surface-overlay";
+    readonly 'elevation.surface.overlay.hovered': "--ds-surface-overlay-hovered";
+    readonly 'elevation.surface.overlay.pressed': "--ds-surface-overlay-pressed";
+    readonly 'opacity.disabled': "--ds-opacity-disabled";
+    readonly 'opacity.loading': "--ds-opacity-loading";
     readonly 'utility.UNSAFE_util.transparent': "--ds-UNSAFE_util-transparent";
     readonly 'utility.UNSAFE_util.MISSING_TOKEN': "--ds-UNSAFE_util-MISSING_TOKEN";
 };
@@ -567,9 +575,17 @@ export declare type CSSTokenMap = {
     'elevation.shadow.overflow': 'var(--ds-shadow-overflow)';
     'elevation.shadow.overlay': 'var(--ds-shadow-overlay)';
     'elevation.surface': 'var(--ds-surface)';
+    'elevation.surface.hovered': 'var(--ds-surface-hovered)';
+    'elevation.surface.pressed': 'var(--ds-surface-pressed)';
     'elevation.surface.sunken': 'var(--ds-surface-sunken)';
     'elevation.surface.raised': 'var(--ds-surface-raised)';
+    'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
+    'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
     'elevation.surface.overlay': 'var(--ds-surface-overlay)';
+    'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
+    'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
+    'opacity.disabled': 'var(--ds-opacity-disabled)';
+    'opacity.loading': 'var(--ds-opacity-loading)';
     'utility.UNSAFE_util.transparent': 'var(--ds-UNSAFE_util-transparent)';
     'utility.UNSAFE_util.MISSING_TOKEN': 'var(--ds-UNSAFE_util-MISSING_TOKEN)';
 };