@atlaskit/tokens 0.10.31 → 0.10.33

package/dist/cjs/artifacts/typescript/atlassian-legacy-dark-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::709c400533fbf03cd0b347f1aa9b3ff6>>
+ * @codegen <<SignedSource::83290a114618bdfa1ff9d24e32a6f1b1>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -287,6 +287,8 @@ var tokens = {
   'shadow.overlay': '--ds-overlay',
   'elevation.shadow.raised': '--ds-shadow-raised',
   'elevation.shadow.overflow': '--ds-shadow-overflow',
+  'elevation.shadow.overflow.spread': '--ds-shadow-overflow-spread',
+  'elevation.shadow.overflow.perimeter': '--ds-shadow-overflow-perimeter',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
   'elevation.surface.hovered': '--ds-surface-hovered',

package/dist/cjs/artifacts/typescript/atlassian-legacy-light-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::709c400533fbf03cd0b347f1aa9b3ff6>>
+ * @codegen <<SignedSource::83290a114618bdfa1ff9d24e32a6f1b1>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -287,6 +287,8 @@ var tokens = {
   'shadow.overlay': '--ds-overlay',
   'elevation.shadow.raised': '--ds-shadow-raised',
   'elevation.shadow.overflow': '--ds-shadow-overflow',
+  'elevation.shadow.overflow.spread': '--ds-shadow-overflow-spread',
+  'elevation.shadow.overflow.perimeter': '--ds-shadow-overflow-perimeter',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
   'elevation.surface.hovered': '--ds-surface-hovered',

package/dist/cjs/artifacts/typescript/atlassian-light-token-default-values.js

@@ -11,7 +11,7 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::128d2aed73e7128437a797c426204b37>>
+ * @codegen <<SignedSource::ef6186f17dafc7e13af4096ad3cf41bb>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -290,7 +290,9 @@ var defaultTokenValues = {
   'shadow.card': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
   'shadow.overlay': '0px 8px 12px #091E4226, 0px 0px 1px #091E424F',
   'elevation.shadow.raised': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
-  'elevation.shadow.overflow': '0px 8px 8px #091E4214, 0px 0px 1px #091E421F',
+  'elevation.shadow.overflow': '0px 0px 8px #091E4229, 0px 0px 1px #091E421F',
+  'elevation.shadow.overflow.spread': '#091e4229',
+  'elevation.shadow.overflow.perimeter': '#091e421f',
   'elevation.shadow.overlay': '0px 8px 12px #091E4226, 0px 0px 1px #091E424F',
   'elevation.surface': '#FFFFFF',
   'elevation.surface.hovered': '#F1F2F4',

package/dist/cjs/artifacts/typescript/atlassian-light-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::709c400533fbf03cd0b347f1aa9b3ff6>>
+ * @codegen <<SignedSource::83290a114618bdfa1ff9d24e32a6f1b1>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -287,6 +287,8 @@ var tokens = {
   'shadow.overlay': '--ds-overlay',
   'elevation.shadow.raised': '--ds-shadow-raised',
   'elevation.shadow.overflow': '--ds-shadow-overflow',
+  'elevation.shadow.overflow.spread': '--ds-shadow-overflow-spread',
+  'elevation.shadow.overflow.perimeter': '--ds-shadow-overflow-perimeter',
   'elevation.shadow.overlay': '--ds-shadow-overlay',
   'elevation.surface': '--ds-surface',
   'elevation.surface.hovered': '--ds-surface-hovered',

package/dist/cjs/artifacts/typescript/atlassian-spacing-token-default-values.js

@@ -11,86 +11,86 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::05c2fcc3d0dba0931605dc98f7540009>>
+ * @codegen <<SignedSource::070fc18ba91d3a0673dcabb4f936f8d9>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
-  'spacing.scale.0': '0px',
-  'spacing.scale.100': '8px',
-  'spacing.scale.150': '12px',
-  'spacing.scale.200': '16px',
-  'spacing.scale.250': '20px',
-  'spacing.scale.300': '24px',
-  'spacing.scale.400': '32px',
-  'spacing.scale.500': '40px',
-  'spacing.scale.600': '48px',
-  'spacing.scale.025': '2px',
-  'spacing.scale.050': '4px',
-  'spacing.scale.075': '6px',
-  'spacing.scaleLinear.0': '0px',
-  'spacing.scaleLinear.100': '2px',
-  'spacing.scaleLinear.200': '4px',
-  'spacing.scaleLinear.300': '6px',
-  'spacing.scaleLinear.400': '8px',
-  'spacing.scaleLinear.500': '12px',
-  'spacing.scaleLinear.600': '16px',
-  'spacing.scaleLinear.700': '20px',
-  'spacing.scaleLinear.800': '24px',
-  'spacing.scaleLinear.900': '32px',
-  'spacing.scaleLinear.1000': '40px',
-  'spacing.scaleLinear.1100': '48px',
-  'spacing.pixel.0': '0px',
-  'spacing.pixel.2': '2px',
-  'spacing.pixel.4': '4px',
-  'spacing.pixel.6': '6px',
-  'spacing.pixel.8': '8px',
-  'spacing.pixel.12': '12px',
-  'spacing.pixel.16': '16px',
-  'spacing.pixel.20': '20px',
-  'spacing.pixel.24': '24px',
-  'spacing.pixel.32': '32px',
-  'spacing.pixel.40': '40px',
-  'spacing.pixel.48': '48px',
-  'spacing.size.none': '0px',
-  'spacing.size.xxxxSmall': '2px',
-  'spacing.size.xxxSmall': '4px',
-  'spacing.size.xxSmall': '6px',
-  'spacing.size.xsmall': '8px',
-  'spacing.size.small': '12px',
-  'spacing.size.medium': '16px',
-  'spacing.size.large': '20px',
-  'spacing.size.xlarge': '24px',
-  'spacing.size.xxlarge': '32px',
-  'spacing.size.xxxlarge': '40px',
-  'spacing.size.xxxxlarge': '48px',
-  'spacing.ecl.element.2': '2px',
-  'spacing.ecl.element.4': '4px',
-  'spacing.ecl.element.6': '6px',
-  'spacing.ecl.element.8': '8px',
-  'spacing.ecl.container.12': '12px',
-  'spacing.ecl.container.16': '16px',
-  'spacing.ecl.container.20': '20px',
-  'spacing.ecl.container.24': '24px',
-  'spacing.ecl.layout.32': '32px',
-  'spacing.ecl.layout.40': '40px',
-  'spacing.ecl.layout.64': '48px',
-  'spacing.ccc.component.2': '2px',
-  'spacing.ccc.component.4': '4px',
-  'spacing.ccc.component.6': '6px',
-  'spacing.ccc.component.8': '8px',
-  'spacing.ccc.content.12': '12px',
-  'spacing.ccc.content.16': '16px',
-  'spacing.ccc.content.20': '20px',
-  'spacing.ccc.content.24': '24px',
-  'spacing.ccc.container.32': '32px',
-  'spacing.ccc.container.40': '40px',
-  'spacing.ccc.container.48': '48px',
-  'spacing.gap.100': '8px',
-  'spacing.gap.200': '16px',
-  'spacing.gap.300': '24px',
-  'spacing.inset.100': '8px',
-  'spacing.inset.200': '16px',
-  'spacing.inset.300': '24px'
+  'spacing.scale.0': '0',
+  'spacing.scale.100': '0.5rem',
+  'spacing.scale.150': '0.75rem',
+  'spacing.scale.200': '1rem',
+  'spacing.scale.250': '1.25rem',
+  'spacing.scale.300': '1.5rem',
+  'spacing.scale.400': '2rem',
+  'spacing.scale.500': '2.5rem',
+  'spacing.scale.600': '3rem',
+  'spacing.scale.025': '0.125rem',
+  'spacing.scale.050': '0.25rem',
+  'spacing.scale.075': '0.375rem',
+  'spacing.scaleLinear.0': '0',
+  'spacing.scaleLinear.100': '0.125rem',
+  'spacing.scaleLinear.200': '0.25rem',
+  'spacing.scaleLinear.300': '0.375rem',
+  'spacing.scaleLinear.400': '0.5rem',
+  'spacing.scaleLinear.500': '0.75rem',
+  'spacing.scaleLinear.600': '1rem',
+  'spacing.scaleLinear.700': '1.25rem',
+  'spacing.scaleLinear.800': '1.5rem',
+  'spacing.scaleLinear.900': '2rem',
+  'spacing.scaleLinear.1000': '2.5rem',
+  'spacing.scaleLinear.1100': '3rem',
+  'spacing.pixel.0': '0',
+  'spacing.pixel.2': '0.125rem',
+  'spacing.pixel.4': '0.25rem',
+  'spacing.pixel.6': '0.375rem',
+  'spacing.pixel.8': '0.5rem',
+  'spacing.pixel.12': '0.75rem',
+  'spacing.pixel.16': '1rem',
+  'spacing.pixel.20': '1.25rem',
+  'spacing.pixel.24': '1.5rem',
+  'spacing.pixel.32': '2rem',
+  'spacing.pixel.40': '2.5rem',
+  'spacing.pixel.48': '3rem',
+  'spacing.size.none': '0',
+  'spacing.size.xxxxSmall': '0.125rem',
+  'spacing.size.xxxSmall': '0.25rem',
+  'spacing.size.xxSmall': '0.375rem',
+  'spacing.size.xsmall': '0.5rem',
+  'spacing.size.small': '0.75rem',
+  'spacing.size.medium': '1rem',
+  'spacing.size.large': '1.25rem',
+  'spacing.size.xlarge': '1.5rem',
+  'spacing.size.xxlarge': '2rem',
+  'spacing.size.xxxlarge': '2.5rem',
+  'spacing.size.xxxxlarge': '3rem',
+  'spacing.ecl.element.2': '0.125rem',
+  'spacing.ecl.element.4': '0.25rem',
+  'spacing.ecl.element.6': '0.375rem',
+  'spacing.ecl.element.8': '0.5rem',
+  'spacing.ecl.container.12': '0.75rem',
+  'spacing.ecl.container.16': '1rem',
+  'spacing.ecl.container.20': '1.25rem',
+  'spacing.ecl.container.24': '1.5rem',
+  'spacing.ecl.layout.32': '2rem',
+  'spacing.ecl.layout.40': '2.5rem',
+  'spacing.ecl.layout.64': '3rem',
+  'spacing.ccc.component.2': '0.125rem',
+  'spacing.ccc.component.4': '0.25rem',
+  'spacing.ccc.component.6': '0.375rem',
+  'spacing.ccc.component.8': '0.5rem',
+  'spacing.ccc.content.12': '0.75rem',
+  'spacing.ccc.content.16': '1rem',
+  'spacing.ccc.content.20': '1.25rem',
+  'spacing.ccc.content.24': '1.5rem',
+  'spacing.ccc.container.32': '2rem',
+  'spacing.ccc.container.40': '2.5rem',
+  'spacing.ccc.container.48': '3rem',
+  'spacing.gap.100': '0.5rem',
+  'spacing.gap.200': '1rem',
+  'spacing.gap.300': '1.5rem',
+  'spacing.inset.100': '0.5rem',
+  'spacing.inset.200': '1rem',
+  'spacing.inset.300': '1.5rem'
 };
 var _default = defaultTokenValues;
 exports.default = _default;

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.31";
+var version = "0.10.33";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/palettes/spacing-scale.js

@@ -8,73 +8,73 @@ var scale = {
   spacing: {
     scale: {
       Space0: {
-        value: '0px',
+        value: '0',
         attributes: {
           group: 'scale'
         }
       },
       Space025: {
-        value: '2px',
+        value: '0.125rem',
         attributes: {
           group: 'scale'
         }
       },
       Space050: {
-        value: '4px',
+        value: '0.25rem',
         attributes: {
           group: 'scale'
         }
       },
       Space075: {
-        value: '6px',
+        value: '0.375rem',
         attributes: {
           group: 'scale'
         }
       },
       Space100: {
-        value: '8px',
+        value: '0.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space150: {
-        value: '12px',
+        value: '0.75rem',
         attributes: {
           group: 'scale'
         }
       },
       Space200: {
-        value: '16px',
+        value: '1rem',
         attributes: {
           group: 'scale'
         }
       },
       Space250: {
-        value: '20px',
+        value: '1.25rem',
         attributes: {
           group: 'scale'
         }
       },
       Space300: {
-        value: '24px',
+        value: '1.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space400: {
-        value: '32px',
+        value: '2rem',
         attributes: {
           group: 'scale'
         }
       },
       Space500: {
-        value: '40px',
+        value: '2.5rem',
         attributes: {
           group: 'scale'
         }
       },
       Space600: {
-        value: '48px',
+        value: '3rem',
         attributes: {
           group: 'scale'
         }

package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js

@@ -41,27 +41,37 @@ var shadow = {
         }]
       },
       overflow: {
-        value: [{
-          radius: 12,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          // @ts-ignore no current palette colour for this yet
-          color: '#030404',
-          // This opacity overrides the color alpha.
-          opacity: 0.56
-        }, {
-          radius: 1,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          // @ts-ignore no current palette colour for this yet
-          color: '#030404',
-          // This opacity overrides the color alpha.
-          opacity: 0.5
-        }]
+        '[default]': {
+          value: [{
+            radius: 12,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            // @ts-ignore no current palette colour for this yet
+            color: '#030404',
+            // This opacity overrides the color alpha.
+            opacity: 0.56
+          }, {
+            radius: 1,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            // @ts-ignore no current palette colour for this yet
+            color: '#030404',
+            // This opacity overrides the color alpha.
+            opacity: 0.5
+          }]
+        },
+        // @ts-ignore no current palette colour for this yet
+        spread: {
+          value: '#0304048f'
+        },
+        // @ts-ignore no current palette colour for this yet
+        perimeter: {
+          value: '#03040480'
+        }
       },
       overlay: {
         value: [{

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

@@ -41,27 +41,37 @@ var shadow = {
         }]
       },
       overflow: {
-        value: [{
-          radius: 12,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          // @ts-ignore no current palette colour for this yet
-          color: '#030404',
-          // This opacity overrides the color alpha.
-          opacity: 0.56
-        }, {
-          radius: 1,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          // @ts-ignore no current palette colour for this yet
-          color: '#030404',
-          // This opacity overrides the color alpha.
-          opacity: 0.5
-        }]
+        '[default]': {
+          value: [{
+            radius: 12,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            // @ts-ignore no current palette colour for this yet
+            color: '#030404',
+            // This opacity overrides the color alpha.
+            opacity: 0.56
+          }, {
+            radius: 1,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            // @ts-ignore no current palette colour for this yet
+            color: '#030404',
+            // This opacity overrides the color alpha.
+            opacity: 0.5
+          }]
+        },
+        // @ts-ignore no current palette colour for this yet
+        spread: {
+          value: '#0304048f'
+        },
+        // @ts-ignore no current palette colour for this yet
+        perimeter: {
+          value: '#03040480'
+        }
       },
       overlay: {
         value: [{

package/dist/cjs/tokens/atlassian-legacy-light/elevation/shadow.js

@@ -27,23 +27,33 @@ var shadow = {
         }]
       },
       overflow: {
-        value: [{
-          radius: 8,
-          offset: {
-            x: 0,
-            y: 8
-          },
-          color: 'N50A',
-          opacity: 0.08
-        }, {
-          radius: 1,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          color: 'N60A',
-          opacity: 0.12
-        }]
+        '[default]': {
+          value: [{
+            radius: 8,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            color: 'N50A',
+            opacity: 0.16
+          }, {
+            radius: 1,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            color: 'N60A',
+            opacity: 0.12
+          }]
+        },
+        // @ts-ignore no current palette colour for this yet
+        spread: {
+          value: '#091e4229'
+        },
+        // @ts-ignore no current palette colour for this yet
+        perimeter: {
+          value: '#091e421f'
+        }
       },
       overlay: {
         value: [{

package/dist/cjs/tokens/atlassian-light/elevation/shadow.js

@@ -27,23 +27,33 @@ var shadow = {
         }]
       },
       overflow: {
-        value: [{
-          radius: 8,
-          offset: {
-            x: 0,
-            y: 8
-          },
-          color: 'Neutral1100',
-          opacity: 0.08
-        }, {
-          radius: 1,
-          offset: {
-            x: 0,
-            y: 0
-          },
-          color: 'Neutral1100',
-          opacity: 0.12
-        }]
+        '[default]': {
+          value: [{
+            radius: 8,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            color: 'Neutral1100',
+            opacity: 0.16
+          }, {
+            radius: 1,
+            offset: {
+              x: 0,
+              y: 0
+            },
+            color: 'Neutral1100',
+            opacity: 0.12
+          }]
+        },
+        // @ts-ignore no current palette colour for this yet
+        spread: {
+          value: '#091e4229'
+        },
+        // @ts-ignore no current palette colour for this yet
+        perimeter: {
+          value: '#091e421f'
+        }
       },
       overlay: {
         value: [{

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

@@ -16,11 +16,29 @@ var shadow = {
         }
       },
       overflow: {
-        attributes: {
-          group: 'shadow',
-          state: 'active',
-          introduced: '0.6.0',
-          description: "Use to create a shadow when content scrolls under other content."
+        '[default]': {
+          attributes: {
+            group: 'shadow',
+            state: 'active',
+            introduced: '0.6.0',
+            description: "Use to create a shadow when content scrolls under other content."
+          }
+        },
+        spread: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.32',
+            description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow.'
+          }
+        },
+        perimeter: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.32',
+            description: 'Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow.'
+          }
         }
       },
       overlay: {

package/dist/cjs/version.json

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