@atlaskit/tokens 1.5.2 → 1.7.0

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4f1312b7d279fa9e11425bc4621e8a31>>
+ * @codegen <<SignedSource::2246b2d7c94a1fe562f7860f3b40764b>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -36,7 +36,7 @@ var tokens = [{
     "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."
   },
   "value": "#AE2A19",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -46,7 +46,7 @@ var tokens = [{
       "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."
     },
     "value": "Red800"
   },
@@ -58,7 +58,7 @@ var tokens = [{
     "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."
   },
   "value": "#601E16",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -68,7 +68,7 @@ var tokens = [{
       "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."
     },
     "value": "Red900"
   },
@@ -80,7 +80,7 @@ var tokens = [{
     "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."
   },
   "value": "#974F0C",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -90,7 +90,7 @@ var tokens = [{
       "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."
     },
     "value": "Orange800"
   },
@@ -102,7 +102,7 @@ var tokens = [{
     "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."
   },
   "value": "#5F3811",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -112,7 +112,7 @@ var tokens = [{
       "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."
     },
     "value": "Orange900"
   },
@@ -124,7 +124,7 @@ var tokens = [{
     "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."
   },
   "value": "#7F5F01",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -134,7 +134,7 @@ var tokens = [{
       "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."
     },
     "value": "Yellow800"
   },
@@ -146,7 +146,7 @@ var tokens = [{
     "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."
   },
   "value": "#533F04",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -156,7 +156,7 @@ var tokens = [{
       "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."
     },
     "value": "Yellow900"
   },
@@ -168,7 +168,7 @@ var tokens = [{
     "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."
   },
   "value": "#216E4E",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -178,7 +178,7 @@ var tokens = [{
       "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."
     },
     "value": "Green800"
   },
@@ -190,7 +190,7 @@ var tokens = [{
     "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."
   },
   "value": "#164B35",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -200,7 +200,7 @@ var tokens = [{
       "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."
     },
     "value": "Green900"
   },
@@ -212,7 +212,7 @@ var tokens = [{
     "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."
   },
   "value": "#206B74",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -222,7 +222,7 @@ var tokens = [{
       "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."
     },
     "value": "Teal800"
   },
@@ -234,7 +234,7 @@ var tokens = [{
     "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."
   },
   "value": "#1D474C",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -244,7 +244,7 @@ var tokens = [{
       "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."
     },
     "value": "Teal900"
   },
@@ -256,7 +256,7 @@ var tokens = [{
     "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."
   },
   "value": "#0055CC",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -266,7 +266,7 @@ var tokens = [{
       "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."
     },
     "value": "Blue800"
   },
@@ -278,7 +278,7 @@ var tokens = [{
     "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."
   },
   "value": "#09326C",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -288,7 +288,7 @@ var tokens = [{
       "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."
     },
     "value": "Blue900"
   },
@@ -300,7 +300,7 @@ var tokens = [{
     "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."
   },
   "value": "#5E4DB2",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -310,7 +310,7 @@ var tokens = [{
       "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."
     },
     "value": "Purple800"
   },
@@ -322,7 +322,7 @@ var tokens = [{
     "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."
   },
   "value": "#352C63",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -332,7 +332,7 @@ var tokens = [{
       "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."
     },
     "value": "Purple900"
   },
@@ -344,7 +344,7 @@ var tokens = [{
     "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."
   },
   "value": "#943D73",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -354,7 +354,7 @@ var tokens = [{
       "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."
     },
     "value": "Magenta800"
   },
@@ -366,7 +366,7 @@ var tokens = [{
     "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."
   },
   "value": "#50253F",
   "filePath": "src/tokens/atlassian-light/color/accent.tsx",
@@ -376,7 +376,7 @@ var tokens = [{
       "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."
     },
     "value": "Magenta900"
   },

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.2";
+var version = "1.7.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.2";
+var version = "1.7.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'
     }