@atlaskit/tokens 1.5.1 → 1.6.0

package/dist/cjs/artifacts/tokens-raw/atlassian-shape.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7cdaa82f55e6537ca0b68d196db9e1d6>>
+ * @codegen <<SignedSource::8b50feb722f3a686c5a45c85ec5545b2>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for selection indicators, like tabs."
   },
   "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -22,9 +22,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for selection indicators, like tabs."
     },
     "value": "Radius050"
   },
@@ -34,9 +34,31 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
+    "introduced": "1.5.2",
+    "description": "The default border radius."
+  },
+  "value": "4px",
+  "filePath": "src/tokens/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "introduced": "1.5.2",
+      "description": "The default border radius."
+    },
+    "value": "Radius100"
+  },
+  "name": "border.radius.[default]",
+  "path": ["border", "radius", "[default]"],
+  "cleanName": "border.radius"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for buttons and inputs."
   },
   "value": "4px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -44,9 +66,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for buttons and inputs."
     },
     "value": "Radius100"
   },
@@ -56,9 +78,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for smaller cards."
   },
   "value": "8px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -66,9 +88,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for smaller cards."
     },
     "value": "Radius200"
   },
@@ -78,9 +100,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for cards and larger containers."
   },
   "value": "12px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -88,9 +110,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for cards and larger containers."
     },
     "value": "Radius300"
   },
@@ -100,9 +122,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for modals."
   },
   "value": "16px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -110,9 +132,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for modals."
     },
     "value": "Radius400"
   },
@@ -122,25 +144,47 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for circular containers, like a rounded button."
   },
-  "value": "50%",
+  "value": "32032px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
   "isSource": true,
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for circular containers, like a rounded button."
     },
     "value": "RadiusCircle"
   },
-  "name": "border.radius.round",
-  "path": ["border", "radius", "round"],
-  "cleanName": "border.radius.round"
+  "name": "border.radius.circle",
+  "path": ["border", "radius", "circle"],
+  "cleanName": "border.radius.circle"
+}, {
+  "attributes": {
+    "group": "shape",
+    "state": "active",
+    "introduced": "1.5.2",
+    "description": "The default border width."
+  },
+  "value": "1px",
+  "filePath": "src/tokens/atlassian-shape/shape.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "shape",
+      "state": "active",
+      "introduced": "1.5.2",
+      "description": "The default border width."
+    },
+    "value": "Size050"
+  },
+  "name": "border.width.[default]",
+  "path": ["border", "width", "[default]"],
+  "cleanName": "border.width"
 }, {
   "attributes": {
     "group": "shape",
@@ -166,9 +210,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for all borders and dividers."
   },
   "value": "1px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -176,9 +220,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for all borders and dividers."
     },
     "value": "Size050"
   },
@@ -188,9 +232,9 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "shape",
-    "state": "experimental",
+    "state": "active",
     "introduced": "1.1.0",
-    "description": "Experimental, description needs to be amended"
+    "description": "Used for bolder dividers and interaction states."
   },
   "value": "2px",
   "filePath": "src/tokens/atlassian-shape/shape.tsx",
@@ -198,9 +242,9 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "shape",
-      "state": "experimental",
+      "state": "active",
       "introduced": "1.1.0",
-      "description": "Experimental, description needs to be amended"
+      "description": "Used for bolder dividers and interaction states."
     },
     "value": "Size100"
   },

package/dist/cjs/constants.js

@@ -12,7 +12,7 @@ var DEFAULT_THEME = 'light';
 exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds';
 exports.CSS_PREFIX = CSS_PREFIX;
-var CSS_VAR_FULL = ['opacity', 'font', 'space'];
+var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 exports.CSS_VAR_FULL = CSS_VAR_FULL;
 var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");
 exports.TOKEN_NOT_FOUND_CSS_VAR = TOKEN_NOT_FOUND_CSS_VAR;

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.5.1";
+var version = "1.6.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.5.1";
+var version = "1.6.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/palettes/shape-palette.js

@@ -60,7 +60,8 @@ var baseRadiusTokens = {
     }
   },
   RadiusCircle: {
-    value: '50%',
+    // The year atlassian was founded in rem
+    value: 32032,
     attributes: {
       group: 'shape'
     }

package/dist/cjs/set-global-theme.js

@@ -27,6 +27,7 @@ var themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
+  shape: undefined,
   spacing: undefined,
   typography: undefined
 };
@@ -84,6 +85,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
       dark,
       _ref2$light,
       light,
+      _ref2$shape,
+      shape,
       _ref2$spacing,
       spacing,
       _ref2$typography,
@@ -94,11 +97,12 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
+          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -161,6 +165,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -208,17 +213,20 @@ var getThemeStyles = /*#__PURE__*/function () {
       spacing,
       _ref7$typography,
       typography,
+      _ref7$shape,
+      shape,
       themePreferences,
       results,
       _args4 = arguments;
     return _regenerator.default.wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
-          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
+          _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
             light: light,
+            shape: shape,
             spacing: spacing,
             typography: typography
           });
@@ -303,6 +311,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     dark = _ref9$dark === void 0 ? themeStateDefaults['dark'] : _ref9$dark,
     _ref9$light = _ref9.light,
     light = _ref9$light === void 0 ? themeStateDefaults['light'] : _ref9$light,
+    _ref9$shape = _ref9.shape,
+    shape = _ref9$shape === void 0 ? themeStateDefaults['shape'] : _ref9$shape,
     _ref9$spacing = _ref9.spacing,
     spacing = _ref9$spacing === void 0 ? themeStateDefaults['spacing'] : _ref9$spacing,
     _ref9$typography = _ref9.typography,
@@ -311,7 +321,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     dark: dark,
     light: light,
     spacing: spacing,
-    typography: typography
+    typography: typography,
+    shape: shape
   };
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
   return _ref10 = {}, (0, _defineProperty2.default)(_ref10, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref10, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;

package/dist/cjs/tokens/atlassian-dark-new-input-border/color/border.js

@@ -7,44 +7,8 @@ exports.default = void 0;
 var color = {
   color: {
     border: {
-      '[default]': {
-        value: 'DarkNeutral300A'
-      },
-      bold: {
-        value: 'DarkNeutral600'
-      },
-      inverse: {
-        value: 'DarkNeutral0'
-      },
-      focused: {
-        value: 'Blue300'
-      },
       input: {
-        value: 'DarkNeutral600'
-      },
-      disabled: {
-        value: 'DarkNeutral200A'
-      },
-      brand: {
-        value: 'Blue400'
-      },
-      selected: {
-        value: 'Blue400'
-      },
-      danger: {
-        value: 'Red500'
-      },
-      warning: {
-        value: 'Yellow500'
-      },
-      success: {
-        value: 'Green500'
-      },
-      discovery: {
-        value: 'Purple500'
-      },
-      information: {
-        value: 'Blue500'
+        value: 'DarkNeutral500'
       }
     }
   }

package/dist/cjs/tokens/atlassian-light-new-input-border/color/border.js

@@ -7,44 +7,8 @@ exports.default = void 0;
 var color = {
   color: {
     border: {
-      '[default]': {
-        value: 'Neutral300A'
-      },
-      bold: {
-        value: 'Neutral600'
-      },
-      inverse: {
-        value: 'Neutral0'
-      },
-      focused: {
-        value: 'Blue500'
-      },
       input: {
-        value: 'Neutral600'
-      },
-      disabled: {
-        value: 'Neutral200A'
-      },
-      brand: {
-        value: 'Blue700'
-      },
-      selected: {
-        value: 'Blue700'
-      },
-      danger: {
-        value: 'Red600'
-      },
-      warning: {
-        value: 'Orange600'
-      },
-      success: {
-        value: 'Green600'
-      },
-      discovery: {
-        value: 'Purple600'
-      },
-      information: {
-        value: 'Blue600'
+        value: 'Neutral500'
       }
     }
   }

package/dist/cjs/tokens/atlassian-shape/shape.js

@@ -11,6 +11,9 @@ exports.default = void 0;
 var shape = {
   border: {
     width: {
+      '[default]': {
+        value: 'Size050'
+      },
       '0': {
         value: 'Size0'
       },
@@ -22,6 +25,9 @@ var shape = {
       }
     },
     radius: {
+      '[default]': {
+        value: 'Radius100'
+      },
       '050': {
         value: 'Radius050'
       },
@@ -37,7 +43,7 @@ var shape = {
       '400': {
         value: 'Radius400'
       },
-      round: {
+      circle: {
         value: 'RadiusCircle'
       }
     }

package/dist/cjs/tokens/default/color/accent.js

@@ -14,7 +14,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -22,7 +22,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold blue accent backgrounds.'
+              description: 'Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -32,7 +32,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -40,7 +40,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold red accent backgrounds.'
+              description: 'Use for red text on subtle red accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -50,7 +50,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -58,7 +58,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold orange accent backgrounds.'
+              description: 'Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -68,7 +68,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -76,7 +76,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold yellow accent backgrounds.'
+              description: 'Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -86,7 +86,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -94,7 +94,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold green accent backgrounds.'
+              description: 'Use for green text on subtle green accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -104,7 +104,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -112,7 +112,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold purple accent backgrounds.'
+              description: 'Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -122,7 +122,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -130,7 +130,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold teal accent backgrounds.'
+              description: 'Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },
@@ -140,7 +140,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.6.0',
-              description: 'Use for magenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              description: 'Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color.'
             }
           },
           bolder: {
@@ -148,7 +148,7 @@ var color = {
               group: 'paint',
               state: 'active',
               introduced: '0.7.0',
-              description: 'Use on bold magenta accent backgrounds.'
+              description: 'Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color.'
             }
           }
         },