@atlaskit/tokens 0.10.16 → 0.10.19

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

@@ -0,0 +1,516 @@
+var color = {
+  color: {
+    accent: {
+      // @ts-expect-error deprecated tokens should not be in use
+      boldBlue: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      boldGreen: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      boldOrange: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      boldPurple: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      boldRed: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      boldTeal: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleBlue: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleGreen: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleMagenta: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleOrange: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtlePurple: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleRed: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      subtleTeal: {
+        value: '#FA11F2'
+      }
+    },
+    background: {
+      accent: {
+        blue: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        red: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        orange: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        yellow: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        green: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        purple: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        teal: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        },
+        magenta: {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          bold: {
+            value: '#FA11F2'
+          }
+        }
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      blanket: {
+        value: '#FA11F2'
+      },
+      brand: {
+        '[default]': {
+          // @ts-expect-error deprecated tokens should not be in use
+          '[default]': {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          hovered: {
+            value: '#FA11F2'
+          },
+          // @ts-expect-error deprecated tokens should not be in use
+          pressed: {
+            value: '#FA11F2'
+          }
+        }
+      },
+      boldBrand: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      boldDanger: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      boldDiscovery: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      boldNeutral: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      boldSuccess: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      boldWarning: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      default: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      card: {
+        value: '#FA11F2'
+      },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        // @ts-expect-error deprecated tokens should not be in use
+        '[default]': {
+          value: '#FA11F2FFFFFF29'
+        }
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      overlay: {
+        value: '#FA11F2'
+      },
+      selected: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        }
+      },
+      subtleBorderedNeutral: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleBrand: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleDanger: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleDiscovery: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleNeutral: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleSuccess: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      subtleWarning: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      sunken: {
+        value: '#FA11F2'
+      },
+      transparentNeutral: {
+        // @ts-expect-error deprecated tokens should not be in use
+        hover: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      }
+    },
+    text: {
+      // @ts-expect-error deprecated tokens should not be in use
+      highEmphasis: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      mediumEmphasis: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      lowEmphasis: {
+        value: '#FA11F2'
+      },
+      link: {
+        // @ts-expect-error deprecated tokens should not be in use
+        resting: {
+          value: '#FA11F2'
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        pressed: {
+          value: '#FA11F2'
+        }
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      onBold: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      onBoldWarning: {
+        value: '#FA11F2'
+      }
+    },
+    border: {
+      // @ts-expect-error deprecated tokens should not be in use
+      focus: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      neutral: {
+        value: '#FA11F2'
+      }
+    },
+    iconBorder: {
+      // @ts-expect-error deprecated tokens should not be in use
+      brand: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      danger: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      warning: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      success: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      discovery: {
+        value: '#FA11F2'
+      }
+    },
+    overlay: {
+      // @ts-expect-error deprecated tokens should not be in use
+      hover: {
+        value: '#FA11F2'
+      },
+      // @ts-expect-error deprecated tokens should not be in use
+      pressed: {
+        value: '#FA11F2'
+      }
+    },
+    interaction: {
+      inverse: {
+        hovered: {
+          // @ts-ignore temporary values
+          // @ts-expect-error deprecated tokens should not be in use
+          value: '#FA11F2'
+        },
+        pressed: {
+          // @ts-ignore temporary values
+          // @ts-expect-error deprecated tokens should not be in use
+          value: '#FA11F2'
+        }
+      }
+    }
+  },
+  shadow: {
+    card: {
+      value: [{
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 1
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        color: '#FA11F2',
+        opacity: 0.25
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        color: '#FA11F2',
+        opacity: 0.31
+      }]
+    },
+    overlay: {
+      value: [{
+        radius: 12,
+        offset: {
+          x: 0,
+          y: 8
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        color: '#FA11F2',
+        opacity: 0.15
+      }, {
+        radius: 1,
+        offset: {
+          x: 0,
+          y: 0
+        },
+        // @ts-expect-error deprecated tokens should not be in use
+        color: '#FA11F2',
+        opacity: 0.31
+      }]
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,64 @@
+var shadow = {
+  elevation: {
+    shadow: {
+      raised: {
+        value: [{
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 1
+          },
+          color: 'N50A',
+          opacity: 0.25
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'N40A',
+          opacity: 0.31
+        }]
+      },
+      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
+        }]
+      },
+      overlay: {
+        value: [{
+          radius: 12,
+          offset: {
+            x: 0,
+            y: 8
+          },
+          color: 'N50A',
+          opacity: 0.15
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'N60A',
+          opacity: 0.31
+        }]
+      }
+    }
+  }
+};
+export default shadow;

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

@@ -0,0 +1,19 @@
+var elevation = {
+  elevation: {
+    surface: {
+      '[default]': {
+        value: 'N0'
+      },
+      sunken: {
+        value: 'N20'
+      },
+      raised: {
+        value: 'N0'
+      },
+      overlay: {
+        value: 'N0'
+      }
+    }
+  }
+};
+export default elevation;

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-legacy-light/utility/utility.js

@@ -0,0 +1,13 @@
+var utility = {
+  UNSAFE_util: {
+    transparent: {
+      value: 'transparent'
+    },
+    MISSING_TOKEN: {
+      value: '#FA11F2'
+    }
+  }
+};
+export default {
+  utility: utility
+};

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.16",
+	"version": "0.10.19",
 	"sideEffects": [
 		"**/*.css"
 	]