@atlaskit/tokens - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

CHANGELOG.md

 # @atlaskit/tokens
 
+## 0.8.3
+
+### Patch Changes
+
+- [`530455156a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/530455156a8) - Deprecating color.background.inverse in favour of the new color.background.inverse.subtle token instead. Also introduced color.background.inverse.subtle.hovered and color.background.inverse.subtle.pressed tokens to supplement it.
+
 ## 0.8.2
@@ -4,0 +10,0 @@

dist/cjs/artifacts/rename-mapping.js

@@ -122,2 +122,6 @@ "use strict";
 }, {
+  "path": "color.background.inverse.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.inverse.subtle.[default]"
+}, {
   "path": "color.background.brand.[default].[default]",
@@ -124,0 +128,0 @@ "state": "deprecated",

dist/cjs/artifacts/token-default-values.js

@@ -140,3 +140,6 @@ "use strict";
   'color.background.disabled': '#091E420F',
-  'color.background.inverse': '#00000029',
+  'color.background.inverse.subtle': '#00000029',
+  'color.background.inverse.subtle.hovered': '#0000003D',
+  'color.background.inverse.subtle.pressed': '#00000052',
+  'color.background.inverse': '#FFFFFF29',
   'color.background.input': '#FFFFFF',
@@ -143,0 +146,0 @@ 'color.background.input.hovered': '#F7F8F9',

dist/cjs/artifacts/token-names.js

@@ -136,2 +136,5 @@ "use strict";
   'color.background.disabled': '--ds-background-disabled',
+  'color.background.inverse.subtle': '--ds-background-inverse-subtle',
+  'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',
+  'color.background.inverse.subtle.pressed': '--ds-background-inverse-subtle-pressed',
   'color.background.inverse': '--ds-background-inverse',
@@ -138,0 +141,0 @@ 'color.background.input': '--ds-background-input',

dist/cjs/get-token.js

@@ -15,3 +15,3 @@ "use strict";
 var name = "@atlaskit/tokens";
-var version = "0.8.2";
+var version = "0.8.3";
 
@@ -18,0 +18,0 @@ function token(path, fallback) {

dist/cjs/tokens/atlassian-dark/color/background.js

@@ -26,5 +26,17 @@ "use strict";
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#ffffff33'
+        subtle: {
+          // @ts-ignore temporary value (#FFFFFF 16% opacity)
+          '[default]': {
+            value: '#FFFFFF29'
+          },
+          // @ts-ignore temporary value (#FFFFFF 24% opacity)
+          hovered: {
+            value: '#FFFFFF3D'
+          },
+          // @ts-ignore temporary value (#FFFFFF 32% opacity)
+          pressed: {
+            value: '#FFFFFF52'
+          }
+        }
       },
@@ -31,0 +43,0 @@ input: {

dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js

@@ -205,2 +205,8 @@ "use strict";
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#00000029'
+        }
+      },
       overlay: {
@@ -207,0 +213,0 @@ value: 'DN200'

dist/cjs/tokens/atlassian-light/color/background.js

@@ -26,5 +26,17 @@ "use strict";
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#00000029'
+        subtle: {
+          // @ts-ignore temporary value (#000000 16% opacity)
+          '[default]': {
+            value: '#00000029'
+          },
+          // @ts-ignore temporary value (#000000 24% opacity)
+          hovered: {
+            value: '#0000003D'
+          },
+          // @ts-ignore temporary value (#000000 32% opacity)
+          pressed: {
+            value: '#00000052'
+          }
+        }
       },
@@ -31,0 +43,0 @@ input: {

dist/cjs/tokens/atlassian-light/deprecated/deprecated.js

@@ -205,2 +205,8 @@ "use strict";
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#FFFFFF29'
+        }
+      },
       overlay: {
@@ -207,0 +213,0 @@ value: 'N0'

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

@@ -16,2 +16,3 @@ "use strict";
               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.'
@@ -24,2 +25,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold blue accent backgrounds.'
@@ -34,2 +36,3 @@ }
               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.'
@@ -42,2 +45,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold red accent backgrounds.'
@@ -52,2 +56,3 @@ }
               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.'
@@ -60,2 +65,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold orange accent backgrounds.'
@@ -70,2 +76,3 @@ }
               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.'
@@ -78,2 +85,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold yellow accent backgrounds.'
@@ -88,2 +96,3 @@ }
               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.'
@@ -96,2 +105,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold green accent backgrounds.'
@@ -106,2 +116,3 @@ }
               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.'
@@ -114,2 +125,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold purple accent backgrounds.'
@@ -124,2 +136,3 @@ }
               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.'
@@ -132,2 +145,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold teal accent backgrounds.'
@@ -142,3 +156,4 @@ }
               state: 'active',
-              description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              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.'
             }
@@ -150,2 +165,3 @@ },
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold magenta accent backgrounds.'
@@ -163,2 +179,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -171,2 +188,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -179,2 +197,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -187,2 +206,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -195,2 +215,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -203,2 +224,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -211,2 +233,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -219,2 +242,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -231,2 +255,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -239,2 +264,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -247,2 +273,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -255,2 +282,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -263,2 +291,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -271,2 +300,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -279,2 +309,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -287,2 +318,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -300,2 +332,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -308,2 +341,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -316,2 +350,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -324,2 +359,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -334,2 +370,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -342,2 +379,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -350,2 +388,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -358,2 +397,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -368,2 +408,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -376,2 +417,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -384,2 +426,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -392,2 +435,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -402,2 +446,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -410,2 +455,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -418,2 +464,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -426,2 +473,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -436,2 +484,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -444,2 +493,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -452,2 +502,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -460,2 +511,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -470,2 +522,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -478,2 +531,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -486,2 +540,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -494,2 +549,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -504,2 +560,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -512,2 +569,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -520,2 +578,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -528,2 +587,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -538,2 +598,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -546,2 +607,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -554,2 +616,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -562,2 +625,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -564,0 +628,0 @@ }

dist/cjs/tokens/default/color/background.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for the screen overlay that appears with modal dialogs'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
@@ -30,2 +32,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
@@ -40,2 +43,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for backgrounds of elements in a disabled state.'
@@ -45,6 +49,27 @@ }
       inverse: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+        subtle: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the hovered state of color.background.inverse.subtle'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the pressed state of color.background.inverse.subtle'
+            }
+          }
         }
@@ -57,2 +82,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -65,2 +91,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Hovered state for color.background.input'
@@ -73,2 +100,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Pressed state for color.background.input'
@@ -84,2 +112,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'The default background for neutral elements, such as default buttons.'
@@ -92,2 +121,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral'
@@ -100,2 +130,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral'
@@ -110,2 +141,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.'
@@ -118,2 +150,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral.subtle'
@@ -126,2 +159,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral.subtle'
@@ -136,2 +170,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for neutral UI elements, such as announcement banners.'
@@ -144,2 +179,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.neutral.bold'
@@ -152,2 +188,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.neutral.bold'
@@ -164,2 +201,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
@@ -172,2 +210,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.brand.bold'
@@ -180,2 +219,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.brand.bold'
@@ -192,2 +232,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.'
@@ -200,2 +241,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state for color.background.selected'
@@ -208,2 +250,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state for color.background.selected'
@@ -218,3 +261,4 @@ }
               state: 'active',
-              description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
+              introduced: '0.6.2',
+              description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.'
             }
@@ -226,2 +270,3 @@ },
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state of color.background.selected.bold'
@@ -234,2 +279,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state of color.background.selected.bold'
@@ -246,3 +292,4 @@ }
               state: 'active',
-              description: 'Use for backgrounds communicating critical informaton, such in error section messages.'
+              introduced: '0.6.0',
+              description: 'Use for backgrounds communicating critical information, such in error section messages.'
             }
@@ -254,2 +301,3 @@ },
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.danger'
@@ -262,2 +310,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.danger'
@@ -272,2 +321,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.'
@@ -280,2 +330,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.danger.bold'
@@ -288,2 +339,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.danger.bold'
@@ -300,2 +352,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating caution, such as in warning section messages.'
@@ -308,2 +361,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.warning'
@@ -316,2 +370,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.warning'
@@ -326,2 +381,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.'
@@ -334,2 +390,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.warning.bold'
@@ -342,2 +399,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.warning.bold'
@@ -354,2 +412,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating a favourable outcome, such as in success section messages.'
@@ -362,2 +421,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.success'
@@ -370,2 +430,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.success'
@@ -380,2 +441,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating a favourable outcome, such as in checked toggles.'
@@ -388,2 +450,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.success.bold'
@@ -396,2 +459,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.success.bold'
@@ -408,2 +472,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.'
@@ -416,2 +481,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hover state for color.background.discovery'
@@ -424,2 +490,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.discovery'
@@ -434,2 +501,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.'
@@ -442,2 +510,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.discovery.bold'
@@ -450,2 +519,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.discovery.bold'
@@ -462,2 +532,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.'
@@ -470,2 +541,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information'
@@ -478,2 +550,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information'
@@ -488,2 +561,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating information or something in-progress.'
@@ -496,2 +570,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information.bold'
@@ -504,2 +579,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information.bold'
@@ -506,0 +582,0 @@ }

dist/cjs/tokens/default/color/border.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for focus rings of elements in a focus state.'
@@ -30,2 +32,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -38,2 +41,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of elements in a disabled state.'
@@ -46,2 +50,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
@@ -54,2 +59,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.'
@@ -62,2 +68,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating critical information, such as the borders on invalid text fields.'
@@ -70,2 +77,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating caution.'
@@ -78,2 +86,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating a favourable outcome, such as the borders on validated text fields.'
@@ -86,2 +95,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.'
@@ -94,2 +104,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating information or something in-progress.'
@@ -96,0 +107,0 @@ }

dist/cjs/tokens/default/color/icon.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icon-only buttons, or icons paired with color.text'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons paired with color.text.subtle'
@@ -30,2 +32,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons on bold backgrounds.'
@@ -38,2 +41,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons in a disabled state.'
@@ -46,2 +50,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons that reinforce our brand.'
@@ -54,2 +59,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.'
@@ -62,3 +68,4 @@ }
           state: 'active',
-          description: 'Use for icons communicating critical informaton, such as those used in error handing.'
+          introduced: '0.6.0',
+          description: 'Use for icons communicating critical information, such as those used in error handing.'
         }
@@ -71,2 +78,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons communicating caution, such as those used in warning section messages.'
@@ -79,2 +87,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons when on bold warning backgrounds.'
@@ -88,2 +97,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating a favourable outcome, such as those used in success section messaged.'
@@ -96,2 +106,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating change or something new, such as discovery section messages.'
@@ -104,2 +115,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating information or something in-progress, such as information section messages.'
@@ -106,0 +118,0 @@ }

dist/cjs/tokens/default/color/interaction.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
@@ -31,2 +33,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -39,2 +42,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -41,0 +45,0 @@ }

dist/cjs/tokens/default/color/skeleton.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for skeleton loading states'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for the pulse or shimmer effect in skeleton loading states'
@@ -24,0 +26,0 @@ }

dist/cjs/tokens/default/color/text.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for primary text, such as body copy, sentence case headers, and buttons.'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.'
@@ -30,2 +32,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.'
@@ -38,2 +41,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text in a disabled state.'
@@ -46,2 +50,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text on bold backgrounds.'
@@ -54,2 +59,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text that reinforces our brand.'
@@ -62,2 +68,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.'
@@ -70,2 +77,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for critical text, such as input field error messaging.'
@@ -79,2 +87,3 @@ }
             state: 'active',
+            introduced: '0.0.15',
             description: 'Use for text to emphasize caution, such as in moved lozenges.'
@@ -87,2 +96,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for text when on bold warning backgrounds.'
@@ -96,2 +106,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to communicate a favourable outcome, such as input field success messaging.'
@@ -104,2 +115,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to emphasize change or something new, such as in new lozenges.'
@@ -112,2 +124,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.'
@@ -122,2 +135,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a default or hovered state. Add an underline for hovered states.'
@@ -130,2 +144,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a pressed state.'
@@ -132,0 +147,0 @@ }

dist/cjs/tokens/default/deprecated/deprecated.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.blue.bolder',
@@ -23,2 +24,3 @@ description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.green.bolder',
@@ -32,2 +34,3 @@ description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.orange.bolder',
@@ -41,2 +44,3 @@ description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.purple.bolder',
@@ -50,2 +54,3 @@ description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.red.bolder',
@@ -59,2 +64,3 @@ description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.teal.bolder',
@@ -68,2 +74,3 @@ description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.blue.subtler',
@@ -77,2 +84,3 @@ description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.green.subtler',
@@ -86,2 +94,3 @@ description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.magenta.subtler',
@@ -95,2 +104,3 @@ description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.orange.subtler',
@@ -104,2 +114,3 @@ description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.purple.subtler',
@@ -113,2 +124,3 @@ description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.red.subtler',
@@ -122,2 +134,3 @@ description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.teal.subtler',
@@ -135,2 +148,3 @@ description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtler',
@@ -144,2 +158,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtle',
@@ -155,2 +170,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtler',
@@ -164,2 +180,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtle',
@@ -175,2 +192,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtler',
@@ -184,2 +202,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtle',
@@ -195,2 +214,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtler',
@@ -204,2 +224,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtle',
@@ -215,2 +236,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtler',
@@ -224,2 +246,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtle',
@@ -235,2 +258,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtler',
@@ -244,2 +268,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtle',
@@ -255,2 +280,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtler',
@@ -264,2 +290,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtle',
@@ -275,2 +302,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtler',
@@ -284,2 +312,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtle',
@@ -295,2 +324,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.blanket.[default]',
@@ -306,2 +336,3 @@ description: 'Use for the screen overlay that appears with modal dialogs'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].[default]',
@@ -315,2 +346,3 @@ description: 'Use for the background of elements used to reinforce our brand.'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].hovered',
@@ -324,2 +356,3 @@ description: 'Hovered state for color.background.brand'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].pressed',
@@ -336,2 +369,3 @@ description: 'Pressed state for color.background.brand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.hovered',
@@ -345,2 +379,3 @@ description: 'Hover state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.pressed',
@@ -354,2 +389,3 @@ description: 'Pressed state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.[default]',
@@ -365,2 +401,3 @@ description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.hovered',
@@ -374,2 +411,3 @@ description: 'Hover state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.pressed',
@@ -383,2 +421,3 @@ description: 'Pressed state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.[default]',
@@ -394,2 +433,3 @@ description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.hovered',
@@ -403,2 +443,3 @@ description: 'Hover state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.pressed',
@@ -412,2 +453,3 @@ description: 'Pressed state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.[default]',
@@ -423,2 +465,3 @@ description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.hovered',
@@ -432,2 +475,3 @@ description: 'Hover state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.pressed',
@@ -441,2 +485,3 @@ description: 'Pressed state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.[default]',
@@ -452,2 +497,3 @@ description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.hovered',
@@ -461,2 +507,3 @@ description: 'Hover state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.pressed',
@@ -470,2 +517,3 @@ description: 'Pressed state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.[default]',
@@ -481,2 +529,3 @@ description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.hovered',
@@ -490,2 +539,3 @@ description: 'Hover state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.pressed',
@@ -499,2 +549,3 @@ description: 'Pressed state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.[default]',
@@ -509,2 +560,3 @@ description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.raised',
@@ -518,2 +570,3 @@ description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.[default]',
@@ -523,2 +576,13 @@ description: 'Use as the primary background for the UI'
       },
+      inverse: {
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'deprecated',
+            introduced: '0.1.0',
+            replacement: 'color.background.inverse.subtle.[default]',
+            description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+          }
+        }
+      },
       overlay: {
@@ -528,2 +592,3 @@ attributes: {
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.overlay',
@@ -538,2 +603,3 @@ 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."
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].[default]',
@@ -547,2 +613,3 @@ description: 'Use for backgrounds of elements in a selected state'
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].hovered',
@@ -558,2 +625,3 @@ description: 'Hover state for color.background.selected'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.pressed',
@@ -567,2 +635,3 @@ description: 'Pressed state for background.subtleBorderedNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.[default]',
@@ -578,2 +647,3 @@ description: 'Hover state for background.subtleBorderedNeutral'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].hovered',
@@ -587,2 +657,3 @@ description: 'Hover state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].pressed',
@@ -596,2 +667,3 @@ description: 'Pressed state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].[default]',
@@ -607,2 +679,3 @@ description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].hovered',
@@ -616,2 +689,3 @@ description: 'Hover state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].pressed',
@@ -625,2 +699,3 @@ description: 'Pressed state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].[default]',
@@ -636,2 +711,3 @@ description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].hovered',
@@ -645,2 +721,3 @@ description: 'Hover state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].pressed',
@@ -654,2 +731,3 @@ description: 'Pressed state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].[default]',
@@ -665,2 +743,3 @@ description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].hovered',
@@ -674,2 +753,3 @@ description: 'Hover state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].pressed',
@@ -683,2 +763,3 @@ description: 'Pressed state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].[default]',
@@ -694,2 +775,3 @@ description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].hovered',
@@ -703,2 +785,3 @@ description: 'Hover state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].pressed',
@@ -712,2 +795,3 @@ description: 'Pressed state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].[default]',
@@ -723,2 +807,3 @@ description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].hovered',
@@ -732,2 +817,3 @@ description: 'Hover state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].pressed',
@@ -741,2 +827,3 @@ description: 'Pressed state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].[default]',
@@ -751,2 +838,3 @@ description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.sunken',
@@ -761,2 +849,3 @@ description: 'Use as a secondary background for the UI'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.hovered',
@@ -770,2 +859,3 @@ description: 'Hover state for UIs that do not have a default background, such as menu items or subtle buttons.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.pressed',
@@ -782,2 +872,3 @@ description: 'Pressed state for UIs that do not have a default background, such as menu items or subtle buttons.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.[default]',
@@ -792,2 +883,3 @@ description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.pressed',
@@ -801,2 +893,3 @@ description: 'Use for links in a pressed state'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.[default]',
@@ -811,2 +904,3 @@ description: 'Use for links in a resting or hover state. Add an underline for hover states'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtlest',
@@ -820,2 +914,3 @@ description: "\nUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.\n\nUse for icons that are paired with text.medEmphasis text"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtle',
@@ -829,2 +924,3 @@ description: "\nUse for secondary text, such navigation, subtle button links, input field labels, and all caps subheadings.\n\nUse for icon-only buttons, or icons paired with text.highEmphasis text\n          "
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.inverse',
@@ -838,2 +934,3 @@ description: 'Use for text and icons when on bold backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.warning.inverse',
@@ -849,2 +946,3 @@ description: 'Use for text and icons when on bold warning backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.focused',
@@ -858,2 +956,3 @@ description: 'Use for focus rings of elements in a focus state'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.[default]',
@@ -869,2 +968,3 @@ description: 'Use to create borders around UI elements such as text fields, checkboxes, and radio buttons, or to visually group or separate UI elements, such as flat cards or side panel dividers'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.brand',
@@ -878,2 +978,3 @@ description: "\nUse rarely for icons or borders representing brand, in-progress, or information, such as the icons in information sections messages.\n\nAlso use for blue icons or borders when there is no meaning tied to the color, such as file type icons."
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.danger',
@@ -887,2 +988,3 @@ description: "\nUse rarely for icons and borders representing critical information, such the icons in error section messages or the borders on invalid text fields.\n\nAlso use for red icons or borders when there is no meaning tied to the color, such as file type icons."
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.discovery',
@@ -896,2 +998,3 @@ description: "\nUse rarely for icons and borders representing new information, such as the icons in discovery section mesages or the borders in onboarding spotlights.\n\nAlso use for purple icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.success',
@@ -905,2 +1008,3 @@ description: "\nUse rarely for icons and borders representing positive information, such as the icons in success section messages or the borders on validated text fields.\n\nAlso use for green icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.warning.[default]',
@@ -916,2 +1020,3 @@ description: "\nUse rarely for icons and borders representing semi-urgent information, such as the icons in warning section messages.\n\nAlso use for yellow icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.hovered',
@@ -925,2 +1030,3 @@ description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.pressed',
@@ -937,2 +1043,3 @@ description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.raised',
@@ -946,2 +1053,3 @@ description: "\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board.\n\nCombine with background.overlay"
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.overlay',
@@ -948,0 +1056,0 @@ description: "\nUse for the box shadow 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 box shadow of raised cards in a dragged state.\n\nCombine with background.overlay"

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

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use to create a shadow when content scolls under other content."
@@ -30,2 +32,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state."
@@ -32,0 +35,0 @@ }

dist/cjs/tokens/default/elevation/surface.js

@@ -14,2 +14,3 @@ "use strict";
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as the primary background for the UI.'
@@ -22,2 +23,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.'
@@ -30,2 +32,3 @@ }
           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'
@@ -38,2 +41,3 @@ }
           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."
@@ -40,0 +44,0 @@ }

dist/cjs/tokens/default/utility/utility.js

@@ -13,2 +13,3 @@ "use strict";
         state: 'active',
+        introduced: '0.1.1',
         description: 'Transparent token used for backwards compatibility between new and old theming solutions'
@@ -21,2 +22,3 @@ }
         state: 'active',
+        introduced: '0.4.0',
         description: 'Used as a placeholder when a suitable token does not exist'
@@ -23,0 +25,0 @@ }

dist/cjs/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

dist/es2019/artifacts/rename-mapping.js

@@ -116,2 +116,6 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
 }, {
+  "path": "color.background.inverse.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.inverse.subtle.[default]"
+}, {
   "path": "color.background.brand.[default].[default]",
@@ -118,0 +122,0 @@ "state": "deprecated",

dist/es2019/artifacts/token-default-values.js

@@ -134,3 +134,6 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
   'color.background.disabled': '#091E420F',
-  'color.background.inverse': '#00000029',
+  'color.background.inverse.subtle': '#00000029',
+  'color.background.inverse.subtle.hovered': '#0000003D',
+  'color.background.inverse.subtle.pressed': '#00000052',
+  'color.background.inverse': '#FFFFFF29',
   'color.background.input': '#FFFFFF',
@@ -137,0 +140,0 @@ 'color.background.input.hovered': '#F7F8F9',

dist/es2019/artifacts/token-names.js

@@ -130,2 +130,5 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
   'color.background.disabled': '--ds-background-disabled',
+  'color.background.inverse.subtle': '--ds-background-inverse-subtle',
+  'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',
+  'color.background.inverse.subtle.pressed': '--ds-background-inverse-subtle-pressed',
   'color.background.inverse': '--ds-background-inverse',
@@ -132,0 +135,0 @@ 'color.background.input': '--ds-background-input',

dist/es2019/get-token.js

 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.8.2";
+const version = "0.8.3";
 
@@ -6,0 +6,0 @@ function token(path, fallback) {

dist/es2019/tokens/atlassian-dark/color/background.js

@@ -20,5 +20,17 @@ const color = {
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#ffffff33'
+        subtle: {
+          // @ts-ignore temporary value (#FFFFFF 16% opacity)
+          '[default]': {
+            value: '#FFFFFF29'
+          },
+          // @ts-ignore temporary value (#FFFFFF 24% opacity)
+          hovered: {
+            value: '#FFFFFF3D'
+          },
+          // @ts-ignore temporary value (#FFFFFF 32% opacity)
+          pressed: {
+            value: '#FFFFFF52'
+          }
+        }
       },
@@ -25,0 +37,0 @@ input: {

dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js

@@ -199,2 +199,8 @@ const color = {
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#00000029'
+        }
+      },
       overlay: {
@@ -201,0 +207,0 @@ value: 'DN200'

dist/es2019/tokens/atlassian-light/color/background.js

@@ -20,5 +20,17 @@ const color = {
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#00000029'
+        subtle: {
+          // @ts-ignore temporary value (#000000 16% opacity)
+          '[default]': {
+            value: '#00000029'
+          },
+          // @ts-ignore temporary value (#000000 24% opacity)
+          hovered: {
+            value: '#0000003D'
+          },
+          // @ts-ignore temporary value (#000000 32% opacity)
+          pressed: {
+            value: '#00000052'
+          }
+        }
       },
@@ -25,0 +37,0 @@ input: {

dist/es2019/tokens/atlassian-light/deprecated/deprecated.js

@@ -199,2 +199,8 @@ const color = {
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#FFFFFF29'
+        }
+      },
       overlay: {
@@ -201,0 +207,0 @@ value: 'N0'

dist/es2019/tokens/default/color/accent.js

@@ -10,2 +10,3 @@ const color = {
               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.'
@@ -18,2 +19,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold blue accent backgrounds.'
@@ -28,2 +30,3 @@ }
               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.'
@@ -36,2 +39,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold red accent backgrounds.'
@@ -46,2 +50,3 @@ }
               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.'
@@ -54,2 +59,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold orange accent backgrounds.'
@@ -64,2 +70,3 @@ }
               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.'
@@ -72,2 +79,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold yellow accent backgrounds.'
@@ -82,2 +90,3 @@ }
               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.'
@@ -90,2 +99,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold green accent backgrounds.'
@@ -100,2 +110,3 @@ }
               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.'
@@ -108,2 +119,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold purple accent backgrounds.'
@@ -118,2 +130,3 @@ }
               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.'
@@ -126,2 +139,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold teal accent backgrounds.'
@@ -136,3 +150,4 @@ }
               state: 'active',
-              description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              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.'
             }
@@ -144,2 +159,3 @@ },
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold magenta accent backgrounds.'
@@ -157,2 +173,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -165,2 +182,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -173,2 +191,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -181,2 +200,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -189,2 +209,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -197,2 +218,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -205,2 +227,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -213,2 +236,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -225,2 +249,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -233,2 +258,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -241,2 +267,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -249,2 +276,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -257,2 +285,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -265,2 +294,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -273,2 +303,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -281,2 +312,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -294,2 +326,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -302,2 +335,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -310,2 +344,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -318,2 +353,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -328,2 +364,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -336,2 +373,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -344,2 +382,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -352,2 +391,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -362,2 +402,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -370,2 +411,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -378,2 +420,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -386,2 +429,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -396,2 +440,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -404,2 +449,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -412,2 +458,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -420,2 +467,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -430,2 +478,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -438,2 +487,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -446,2 +496,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -454,2 +505,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -464,2 +516,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -472,2 +525,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -480,2 +534,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -488,2 +543,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -498,2 +554,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -506,2 +563,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -514,2 +572,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -522,2 +581,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -532,2 +592,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -540,2 +601,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -548,2 +610,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -556,2 +619,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -558,0 +622,0 @@ }

dist/es2019/tokens/default/color/background.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for the screen overlay that appears with modal dialogs'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
@@ -34,2 +37,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for backgrounds of elements in a disabled state.'
@@ -39,6 +43,27 @@ }
       inverse: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+        subtle: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the hovered state of color.background.inverse.subtle'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the pressed state of color.background.inverse.subtle'
+            }
+          }
         }
@@ -51,2 +76,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -59,2 +85,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Hovered state for color.background.input'
@@ -67,2 +94,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Pressed state for color.background.input'
@@ -78,2 +106,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'The default background for neutral elements, such as default buttons.'
@@ -86,2 +115,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral'
@@ -94,2 +124,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral'
@@ -104,2 +135,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.'
@@ -112,2 +144,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral.subtle'
@@ -120,2 +153,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral.subtle'
@@ -130,2 +164,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for neutral UI elements, such as announcement banners.'
@@ -138,2 +173,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.neutral.bold'
@@ -146,2 +182,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.neutral.bold'
@@ -158,2 +195,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
@@ -166,2 +204,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.brand.bold'
@@ -174,2 +213,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.brand.bold'
@@ -186,2 +226,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.'
@@ -194,2 +235,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state for color.background.selected'
@@ -202,2 +244,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state for color.background.selected'
@@ -212,3 +255,4 @@ }
               state: 'active',
-              description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
+              introduced: '0.6.2',
+              description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.'
             }
@@ -220,2 +264,3 @@ },
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state of color.background.selected.bold'
@@ -228,2 +273,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state of color.background.selected.bold'
@@ -240,3 +286,4 @@ }
               state: 'active',
-              description: 'Use for backgrounds communicating critical informaton, such in error section messages.'
+              introduced: '0.6.0',
+              description: 'Use for backgrounds communicating critical information, such in error section messages.'
             }
@@ -248,2 +295,3 @@ },
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.danger'
@@ -256,2 +304,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.danger'
@@ -266,2 +315,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.'
@@ -274,2 +324,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.danger.bold'
@@ -282,2 +333,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.danger.bold'
@@ -294,2 +346,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating caution, such as in warning section messages.'
@@ -302,2 +355,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.warning'
@@ -310,2 +364,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.warning'
@@ -320,2 +375,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.'
@@ -328,2 +384,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.warning.bold'
@@ -336,2 +393,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.warning.bold'
@@ -348,2 +406,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating a favourable outcome, such as in success section messages.'
@@ -356,2 +415,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.success'
@@ -364,2 +424,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.success'
@@ -374,2 +435,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating a favourable outcome, such as in checked toggles.'
@@ -382,2 +444,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.success.bold'
@@ -390,2 +453,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.success.bold'
@@ -402,2 +466,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.'
@@ -410,2 +475,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hover state for color.background.discovery'
@@ -418,2 +484,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.discovery'
@@ -428,2 +495,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.'
@@ -436,2 +504,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.discovery.bold'
@@ -444,2 +513,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.discovery.bold'
@@ -456,2 +526,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.'
@@ -464,2 +535,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information'
@@ -472,2 +544,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information'
@@ -482,2 +555,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating information or something in-progress.'
@@ -490,2 +564,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information.bold'
@@ -498,2 +573,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information.bold'
@@ -500,0 +576,0 @@ }

dist/es2019/tokens/default/color/border.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for focus rings of elements in a focus state.'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of elements in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.'
@@ -56,2 +62,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating critical information, such as the borders on invalid text fields.'
@@ -64,2 +71,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating caution.'
@@ -72,2 +80,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating a favourable outcome, such as the borders on validated text fields.'
@@ -80,2 +89,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.'
@@ -88,2 +98,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating information or something in-progress.'
@@ -90,0 +101,0 @@ }

dist/es2019/tokens/default/color/icon.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icon-only buttons, or icons paired with color.text'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons paired with color.text.subtle'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons on bold backgrounds.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons that reinforce our brand.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.'
@@ -56,3 +62,4 @@ }
           state: 'active',
-          description: 'Use for icons communicating critical informaton, such as those used in error handing.'
+          introduced: '0.6.0',
+          description: 'Use for icons communicating critical information, such as those used in error handing.'
         }
@@ -65,2 +72,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons communicating caution, such as those used in warning section messages.'
@@ -73,2 +81,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons when on bold warning backgrounds.'
@@ -82,2 +91,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating a favourable outcome, such as those used in success section messaged.'
@@ -90,2 +100,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating change or something new, such as discovery section messages.'
@@ -98,2 +109,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating information or something in-progress, such as information section messages.'
@@ -100,0 +112,0 @@ }

dist/es2019/tokens/default/color/interaction.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
@@ -25,2 +27,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -33,2 +36,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -35,0 +39,0 @@ }

dist/es2019/tokens/default/color/skeleton.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for skeleton loading states'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for the pulse or shimmer effect in skeleton loading states'
@@ -18,0 +20,0 @@ }

dist/es2019/tokens/default/color/text.js

@@ -8,2 +8,3 @@ const color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for primary text, such as body copy, sentence case headers, and buttons.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text on bold backgrounds.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text that reinforces our brand.'
@@ -56,2 +62,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.'
@@ -64,2 +71,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for critical text, such as input field error messaging.'
@@ -73,2 +81,3 @@ }
             state: 'active',
+            introduced: '0.0.15',
             description: 'Use for text to emphasize caution, such as in moved lozenges.'
@@ -81,2 +90,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for text when on bold warning backgrounds.'
@@ -90,2 +100,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to communicate a favourable outcome, such as input field success messaging.'
@@ -98,2 +109,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to emphasize change or something new, such as in new lozenges.'
@@ -106,2 +118,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.'
@@ -116,2 +129,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a default or hovered state. Add an underline for hovered states.'
@@ -124,2 +138,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a pressed state.'
@@ -126,0 +141,0 @@ }

dist/es2019/tokens/default/deprecated/deprecated.js

@@ -8,2 +8,3 @@ const color = {
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.blue.bolder',
@@ -17,2 +18,3 @@ description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.green.bolder',
@@ -26,2 +28,3 @@ description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.orange.bolder',
@@ -35,2 +38,3 @@ description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.purple.bolder',
@@ -44,2 +48,3 @@ description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.red.bolder',
@@ -53,2 +58,3 @@ description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.teal.bolder',
@@ -62,2 +68,3 @@ description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.blue.subtler',
@@ -71,2 +78,3 @@ description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.green.subtler',
@@ -80,2 +88,3 @@ description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.magenta.subtler',
@@ -89,2 +98,3 @@ description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.orange.subtler',
@@ -98,2 +108,3 @@ description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.purple.subtler',
@@ -107,2 +118,3 @@ description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.red.subtler',
@@ -116,2 +128,3 @@ description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.teal.subtler',
@@ -129,2 +142,3 @@ description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtler',
@@ -138,2 +152,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtle',
@@ -149,2 +164,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtler',
@@ -158,2 +174,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtle',
@@ -169,2 +186,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtler',
@@ -178,2 +196,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtle',
@@ -189,2 +208,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtler',
@@ -198,2 +218,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtle',
@@ -209,2 +230,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtler',
@@ -218,2 +240,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtle',
@@ -229,2 +252,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtler',
@@ -238,2 +262,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtle',
@@ -249,2 +274,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtler',
@@ -258,2 +284,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtle',
@@ -269,2 +296,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtler',
@@ -278,2 +306,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtle',
@@ -289,2 +318,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.blanket.[default]',
@@ -300,2 +330,3 @@ description: 'Use for the screen overlay that appears with modal dialogs'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].[default]',
@@ -309,2 +340,3 @@ description: 'Use for the background of elements used to reinforce our brand.'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].hovered',
@@ -318,2 +350,3 @@ description: 'Hovered state for color.background.brand'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].pressed',
@@ -330,2 +363,3 @@ description: 'Pressed state for color.background.brand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.hovered',
@@ -339,2 +373,3 @@ description: 'Hover state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.pressed',
@@ -348,2 +383,3 @@ description: 'Pressed state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.[default]',
@@ -359,2 +395,3 @@ description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.hovered',
@@ -368,2 +405,3 @@ description: 'Hover state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.pressed',
@@ -377,2 +415,3 @@ description: 'Pressed state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.[default]',
@@ -388,2 +427,3 @@ description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.hovered',
@@ -397,2 +437,3 @@ description: 'Hover state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.pressed',
@@ -406,2 +447,3 @@ description: 'Pressed state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.[default]',
@@ -417,2 +459,3 @@ description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.hovered',
@@ -426,2 +469,3 @@ description: 'Hover state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.pressed',
@@ -435,2 +479,3 @@ description: 'Pressed state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.[default]',
@@ -446,2 +491,3 @@ description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.hovered',
@@ -455,2 +501,3 @@ description: 'Hover state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.pressed',
@@ -464,2 +511,3 @@ description: 'Pressed state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.[default]',
@@ -475,2 +523,3 @@ description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.hovered',
@@ -484,2 +533,3 @@ description: 'Hover state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.pressed',
@@ -493,2 +543,3 @@ description: 'Pressed state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.[default]',
@@ -503,2 +554,3 @@ description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.raised',
@@ -512,2 +564,3 @@ description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.[default]',
@@ -517,2 +570,13 @@ description: 'Use as the primary background for the UI'
       },
+      inverse: {
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'deprecated',
+            introduced: '0.1.0',
+            replacement: 'color.background.inverse.subtle.[default]',
+            description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+          }
+        }
+      },
       overlay: {
@@ -522,2 +586,3 @@ attributes: {
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.overlay',
@@ -537,2 +602,3 @@ description: `
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].[default]',
@@ -546,2 +612,3 @@ description: 'Use for backgrounds of elements in a selected state'
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].hovered',
@@ -557,2 +624,3 @@ description: 'Hover state for color.background.selected'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.pressed',
@@ -566,2 +634,3 @@ description: 'Pressed state for background.subtleBorderedNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.[default]',
@@ -577,2 +646,3 @@ description: 'Hover state for background.subtleBorderedNeutral'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].hovered',
@@ -586,2 +656,3 @@ description: 'Hover state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].pressed',
@@ -595,2 +666,3 @@ description: 'Pressed state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].[default]',
@@ -606,2 +678,3 @@ description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].hovered',
@@ -615,2 +688,3 @@ description: 'Hover state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].pressed',
@@ -624,2 +698,3 @@ description: 'Pressed state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].[default]',
@@ -635,2 +710,3 @@ description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].hovered',
@@ -644,2 +720,3 @@ description: 'Hover state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].pressed',
@@ -653,2 +730,3 @@ description: 'Pressed state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].[default]',
@@ -664,2 +742,3 @@ description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].hovered',
@@ -673,2 +752,3 @@ description: 'Hover state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].pressed',
@@ -682,2 +762,3 @@ description: 'Pressed state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].[default]',
@@ -693,2 +774,3 @@ description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].hovered',
@@ -702,2 +784,3 @@ description: 'Hover state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].pressed',
@@ -711,2 +794,3 @@ description: 'Pressed state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].[default]',
@@ -722,2 +806,3 @@ description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].hovered',
@@ -731,2 +816,3 @@ description: 'Hover state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].pressed',
@@ -740,2 +826,3 @@ description: 'Pressed state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].[default]',
@@ -750,2 +837,3 @@ description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.sunken',
@@ -760,2 +848,3 @@ description: 'Use as a secondary background for the UI'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.hovered',
@@ -769,2 +858,3 @@ description: 'Hover state for UIs that do not have a default background, such as menu items or subtle buttons.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.pressed',
@@ -781,2 +871,3 @@ description: 'Pressed state for UIs that do not have a default background, such as menu items or subtle buttons.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.[default]',
@@ -791,2 +882,3 @@ description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.pressed',
@@ -800,2 +892,3 @@ description: 'Use for links in a pressed state'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.[default]',
@@ -810,2 +903,3 @@ description: 'Use for links in a resting or hover state. Add an underline for hover states'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtlest',
@@ -822,2 +916,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtle',
@@ -835,2 +930,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.inverse',
@@ -844,2 +940,3 @@ description: 'Use for text and icons when on bold backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.warning.inverse',
@@ -855,2 +952,3 @@ description: 'Use for text and icons when on bold warning backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.focused',
@@ -864,2 +962,3 @@ description: 'Use for focus rings of elements in a focus state'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.[default]',
@@ -875,2 +974,3 @@ description: 'Use to create borders around UI elements such as text fields, checkboxes, and radio buttons, or to visually group or separate UI elements, such as flat cards or side panel dividers'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.brand',
@@ -887,2 +987,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.danger',
@@ -899,2 +1000,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.discovery',
@@ -912,2 +1014,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.success',
@@ -925,2 +1028,3 @@ description: `
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.warning.[default]',
@@ -940,2 +1044,3 @@ description: `
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.hovered',
@@ -949,2 +1054,3 @@ description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.pressed',
@@ -961,2 +1067,3 @@ description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.raised',
@@ -973,2 +1080,3 @@ description: `
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.overlay',
@@ -975,0 +1083,0 @@ description: `

dist/es2019/tokens/default/elevation/shadow.js

@@ -8,2 +8,3 @@ const shadow = {
           state: 'active',
+          introduced: '0.6.0',
           description: `Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised`
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: `Use to create a shadow when content scolls under other content.`
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: `Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay
@@ -26,0 +29,0 @@

dist/es2019/tokens/default/elevation/surface.js

@@ -8,2 +8,3 @@ const shadow = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as the primary background for the UI.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.'
@@ -24,2 +26,3 @@ }
           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'
@@ -32,2 +35,3 @@ }
           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
@@ -34,0 +38,0 @@

dist/es2019/tokens/default/utility/utility.js

@@ -7,2 +7,3 @@ const utility = {
         state: 'active',
+        introduced: '0.1.1',
         description: 'Transparent token used for backwards compatibility between new and old theming solutions'
@@ -15,2 +16,3 @@ }
         state: 'active',
+        introduced: '0.4.0',
         description: 'Used as a placeholder when a suitable token does not exist'
@@ -17,0 +19,0 @@ }

dist/es2019/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

dist/esm/artifacts/rename-mapping.js

@@ -116,2 +116,6 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
 }, {
+  "path": "color.background.inverse.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.inverse.subtle.[default]"
+}, {
   "path": "color.background.brand.[default].[default]",
@@ -118,0 +122,0 @@ "state": "deprecated",

dist/esm/artifacts/token-default-values.js

@@ -134,3 +134,6 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
   'color.background.disabled': '#091E420F',
-  'color.background.inverse': '#00000029',
+  'color.background.inverse.subtle': '#00000029',
+  'color.background.inverse.subtle.hovered': '#0000003D',
+  'color.background.inverse.subtle.pressed': '#00000052',
+  'color.background.inverse': '#FFFFFF29',
   'color.background.input': '#FFFFFF',
@@ -137,0 +140,0 @@ 'color.background.input.hovered': '#F7F8F9',

dist/esm/artifacts/token-names.js

@@ -130,2 +130,5 @@ // THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
   'color.background.disabled': '--ds-background-disabled',
+  'color.background.inverse.subtle': '--ds-background-inverse-subtle',
+  'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',
+  'color.background.inverse.subtle.pressed': '--ds-background-inverse-subtle-pressed',
   'color.background.inverse': '--ds-background-inverse',
@@ -132,0 +135,0 @@ 'color.background.input': '--ds-background-input',

dist/esm/get-token.js

 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.8.2";
+var version = "0.8.3";
 
@@ -6,0 +6,0 @@ function token(path, fallback) {

dist/esm/tokens/atlassian-dark/color/background.js

@@ -20,5 +20,17 @@ var color = {
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#ffffff33'
+        subtle: {
+          // @ts-ignore temporary value (#FFFFFF 16% opacity)
+          '[default]': {
+            value: '#FFFFFF29'
+          },
+          // @ts-ignore temporary value (#FFFFFF 24% opacity)
+          hovered: {
+            value: '#FFFFFF3D'
+          },
+          // @ts-ignore temporary value (#FFFFFF 32% opacity)
+          pressed: {
+            value: '#FFFFFF52'
+          }
+        }
       },
@@ -25,0 +37,0 @@ input: {

dist/esm/tokens/atlassian-dark/deprecated/deprecated.js

@@ -199,2 +199,8 @@ var color = {
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#00000029'
+        }
+      },
       overlay: {
@@ -201,0 +207,0 @@ value: 'DN200'

dist/esm/tokens/atlassian-light/color/background.js

@@ -20,5 +20,17 @@ var color = {
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#00000029'
+        subtle: {
+          // @ts-ignore temporary value (#000000 16% opacity)
+          '[default]': {
+            value: '#00000029'
+          },
+          // @ts-ignore temporary value (#000000 24% opacity)
+          hovered: {
+            value: '#0000003D'
+          },
+          // @ts-ignore temporary value (#000000 32% opacity)
+          pressed: {
+            value: '#00000052'
+          }
+        }
       },
@@ -25,0 +37,0 @@ input: {

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

@@ -199,2 +199,8 @@ var color = {
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#FFFFFF29'
+        }
+      },
       overlay: {
@@ -201,0 +207,0 @@ value: 'N0'

dist/esm/tokens/default/color/accent.js

@@ -10,2 +10,3 @@ var color = {
               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.'
@@ -18,2 +19,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold blue accent backgrounds.'
@@ -28,2 +30,3 @@ }
               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.'
@@ -36,2 +39,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold red accent backgrounds.'
@@ -46,2 +50,3 @@ }
               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.'
@@ -54,2 +59,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold orange accent backgrounds.'
@@ -64,2 +70,3 @@ }
               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.'
@@ -72,2 +79,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold yellow accent backgrounds.'
@@ -82,2 +90,3 @@ }
               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.'
@@ -90,2 +99,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold green accent backgrounds.'
@@ -100,2 +110,3 @@ }
               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.'
@@ -108,2 +119,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold purple accent backgrounds.'
@@ -118,2 +130,3 @@ }
               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.'
@@ -126,2 +139,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold teal accent backgrounds.'
@@ -136,3 +150,4 @@ }
               state: 'active',
-              description: 'Use for megenta text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
+              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.'
             }
@@ -144,2 +159,3 @@ },
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold magenta accent backgrounds.'
@@ -157,2 +173,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -165,2 +182,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -173,2 +191,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -181,2 +200,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -189,2 +209,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -197,2 +218,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -205,2 +227,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -213,2 +236,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons.'
@@ -225,2 +249,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -233,2 +258,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -241,2 +267,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -249,2 +276,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -257,2 +285,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -265,2 +294,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -273,2 +303,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -281,2 +312,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
@@ -294,2 +326,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -302,2 +335,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -310,2 +344,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
@@ -318,2 +353,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -328,2 +364,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -336,2 +373,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -344,2 +382,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -352,2 +391,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -362,2 +402,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -370,2 +411,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -378,2 +420,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -386,2 +429,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -396,2 +440,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -404,2 +449,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -412,2 +458,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -420,2 +467,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -430,2 +478,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -438,2 +487,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -446,2 +496,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -454,2 +505,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -464,2 +516,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -472,2 +525,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -480,2 +534,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -488,2 +543,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -498,2 +554,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -506,2 +563,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -514,2 +572,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -522,2 +581,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -532,2 +592,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
@@ -540,2 +601,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -548,2 +610,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
@@ -556,2 +619,3 @@ }
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
@@ -558,0 +622,0 @@ }

dist/esm/tokens/default/color/background.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for the screen overlay that appears with modal dialogs'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements"
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements"
@@ -34,2 +37,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for backgrounds of elements in a disabled state.'
@@ -39,6 +43,27 @@ }
       inverse: {
-        attributes: {
-          group: 'paint',
-          state: 'active',
-          description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+        subtle: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the hovered state of color.background.inverse.subtle'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.8.3',
+              description: 'Use for the pressed state of color.background.inverse.subtle'
+            }
+          }
         }
@@ -51,2 +76,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -59,2 +85,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Hovered state for color.background.input'
@@ -67,2 +94,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Pressed state for color.background.input'
@@ -78,2 +106,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'The default background for neutral elements, such as default buttons.'
@@ -86,2 +115,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral'
@@ -94,2 +124,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral'
@@ -104,2 +135,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items.'
@@ -112,2 +144,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral.subtle'
@@ -120,2 +153,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral.subtle'
@@ -130,2 +164,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for neutral UI elements, such as announcement banners.'
@@ -138,2 +173,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.neutral.bold'
@@ -146,2 +182,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.neutral.bold'
@@ -158,2 +195,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
@@ -166,2 +204,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.brand.bold'
@@ -174,2 +213,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.brand.bold'
@@ -186,2 +226,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.'
@@ -194,2 +235,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state for color.background.selected'
@@ -202,2 +244,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state for color.background.selected'
@@ -212,3 +255,4 @@ }
               state: 'active',
-              description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
+              introduced: '0.6.2',
+              description: 'Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons.'
             }
@@ -220,2 +264,3 @@ },
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state of color.background.selected.bold'
@@ -228,2 +273,3 @@ }
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state of color.background.selected.bold'
@@ -240,3 +286,4 @@ }
               state: 'active',
-              description: 'Use for backgrounds communicating critical informaton, such in error section messages.'
+              introduced: '0.6.0',
+              description: 'Use for backgrounds communicating critical information, such in error section messages.'
             }
@@ -248,2 +295,3 @@ },
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.danger'
@@ -256,2 +304,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.danger'
@@ -266,2 +315,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.'
@@ -274,2 +324,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.danger.bold'
@@ -282,2 +333,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.danger.bold'
@@ -294,2 +346,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating caution, such as in warning section messages.'
@@ -302,2 +355,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.warning'
@@ -310,2 +364,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.warning'
@@ -320,2 +375,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.'
@@ -328,2 +384,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.warning.bold'
@@ -336,2 +393,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.warning.bold'
@@ -348,2 +406,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating a favourable outcome, such as in success section messages.'
@@ -356,2 +415,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.success'
@@ -364,2 +424,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.success'
@@ -374,2 +435,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating a favourable outcome, such as in checked toggles.'
@@ -382,2 +444,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.success.bold'
@@ -390,2 +453,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.success.bold'
@@ -402,2 +466,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.'
@@ -410,2 +475,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hover state for color.background.discovery'
@@ -418,2 +484,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.discovery'
@@ -428,2 +495,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.'
@@ -436,2 +504,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.discovery.bold'
@@ -444,2 +513,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.discovery.bold'
@@ -456,2 +526,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.'
@@ -464,2 +535,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information'
@@ -472,2 +544,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information'
@@ -482,2 +555,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating information or something in-progress.'
@@ -490,2 +564,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information.bold'
@@ -498,2 +573,3 @@ }
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information.bold'
@@ -500,0 +576,0 @@ }

dist/esm/tokens/default/color/border.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for focus rings of elements in a focus state.'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of elements in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items.'
@@ -56,2 +62,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating critical information, such as the borders on invalid text fields.'
@@ -64,2 +71,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating caution.'
@@ -72,2 +80,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating a favourable outcome, such as the borders on validated text fields.'
@@ -80,2 +89,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.'
@@ -88,2 +98,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating information or something in-progress.'
@@ -90,0 +101,0 @@ }

dist/esm/tokens/default/color/icon.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icon-only buttons, or icons paired with color.text'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons paired with color.text.subtle'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons on bold backgrounds.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons that reinforce our brand.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.'
@@ -56,3 +62,4 @@ }
           state: 'active',
-          description: 'Use for icons communicating critical informaton, such as those used in error handing.'
+          introduced: '0.6.0',
+          description: 'Use for icons communicating critical information, such as those used in error handing.'
         }
@@ -65,2 +72,3 @@ },
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons communicating caution, such as those used in warning section messages.'
@@ -73,2 +81,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons when on bold warning backgrounds.'
@@ -82,2 +91,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating a favourable outcome, such as those used in success section messaged.'
@@ -90,2 +100,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating change or something new, such as discovery section messages.'
@@ -98,2 +109,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating information or something in-progress, such as information section messages.'
@@ -100,0 +112,0 @@ }

dist/esm/tokens/default/color/interaction.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
@@ -25,2 +27,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -33,2 +36,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use as a background overlay for elements in a hovered state on bold backgrounds, such as the buttons on spotlight cards.'
@@ -35,0 +39,0 @@ }

dist/esm/tokens/default/color/skeleton.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for skeleton loading states'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for the pulse or shimmer effect in skeleton loading states'
@@ -18,0 +20,0 @@ }

dist/esm/tokens/default/color/text.js

@@ -8,2 +8,3 @@ var color = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for primary text, such as body copy, sentence case headers, and buttons.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings.'
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.'
@@ -32,2 +35,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text in a disabled state.'
@@ -40,2 +44,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text on bold backgrounds.'
@@ -48,2 +53,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text that reinforces our brand.'
@@ -56,2 +62,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for text in selected or opened states, such as tabs and dropdown buttons.'
@@ -64,2 +71,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for critical text, such as input field error messaging.'
@@ -73,2 +81,3 @@ }
             state: 'active',
+            introduced: '0.0.15',
             description: 'Use for text to emphasize caution, such as in moved lozenges.'
@@ -81,2 +90,3 @@ }
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for text when on bold warning backgrounds.'
@@ -90,2 +100,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to communicate a favourable outcome, such as input field success messaging.'
@@ -98,2 +109,3 @@ }
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for text to emphasize change or something new, such as in new lozenges.'
@@ -106,2 +118,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for informative text or to communicate something is in progress, such as in-progress lozenges.'
@@ -116,2 +129,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a default or hovered state. Add an underline for hovered states.'
@@ -124,2 +138,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for links in a pressed state.'
@@ -126,0 +141,0 @@ }

dist/esm/tokens/default/deprecated/deprecated.js

@@ -8,2 +8,3 @@ var color = {
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.blue.bolder',
@@ -17,2 +18,3 @@ description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.green.bolder',
@@ -26,2 +28,3 @@ description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.orange.bolder',
@@ -35,2 +38,3 @@ description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.purple.bolder',
@@ -44,2 +48,3 @@ description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.red.bolder',
@@ -53,2 +58,3 @@ description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.1',
           replacement: 'color.background.accent.teal.bolder',
@@ -62,2 +68,3 @@ description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.blue.subtler',
@@ -71,2 +78,3 @@ description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.green.subtler',
@@ -80,2 +88,3 @@ description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.magenta.subtler',
@@ -89,2 +98,3 @@ description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.orange.subtler',
@@ -98,2 +108,3 @@ description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.purple.subtler',
@@ -107,2 +118,3 @@ description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.red.subtler',
@@ -116,2 +128,3 @@ description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.background.accent.teal.subtler',
@@ -129,2 +142,3 @@ description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtler',
@@ -138,2 +152,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.blue.subtle',
@@ -149,2 +164,3 @@ description: 'Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtler',
@@ -158,2 +174,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.red.subtle',
@@ -169,2 +186,3 @@ description: 'Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtler',
@@ -178,2 +196,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.orange.subtle',
@@ -189,2 +208,3 @@ description: 'Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtler',
@@ -198,2 +218,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.yellow.subtle',
@@ -209,2 +230,3 @@ description: 'Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtler',
@@ -218,2 +240,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.green.subtle',
@@ -229,2 +252,3 @@ description: 'Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtler',
@@ -238,2 +262,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.teal.subtle',
@@ -249,2 +274,3 @@ description: 'Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtler',
@@ -258,2 +284,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.purple.subtle',
@@ -269,2 +296,3 @@ description: 'Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtler',
@@ -278,2 +306,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
               state: 'deleted',
+              introduced: '0.6.0',
               replacement: 'color.background.accent.magenta.subtle',
@@ -289,2 +318,3 @@ description: 'Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.blanket.[default]',
@@ -300,2 +330,3 @@ description: 'Use for the screen overlay that appears with modal dialogs'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].[default]',
@@ -309,2 +340,3 @@ description: 'Use for the background of elements used to reinforce our brand.'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].hovered',
@@ -318,2 +350,3 @@ description: 'Hovered state for color.background.brand'
               state: 'deprecated',
+              introduced: '0.6.0',
               replacement: 'color.background.selected.[default].pressed',
@@ -330,2 +363,3 @@ description: 'Pressed state for color.background.brand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.hovered',
@@ -339,2 +373,3 @@ description: 'Hover state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.pressed',
@@ -348,2 +383,3 @@ description: 'Pressed state of background.boldBrand'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.brand.bold.[default]',
@@ -359,2 +395,3 @@ description: 'A vibrant background for small UI elements like primary buttons and bold in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.hovered',
@@ -368,2 +405,3 @@ description: 'Hover state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.pressed',
@@ -377,2 +415,3 @@ description: 'Pressed state of background.boldDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.bold.[default]',
@@ -388,2 +427,3 @@ description: 'A vibrant background for small UI elements like danger buttons and bold removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.hovered',
@@ -397,2 +437,3 @@ description: 'Hover state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.pressed',
@@ -406,2 +447,3 @@ description: 'Pressed state of background.boldDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.bold.[default]',
@@ -417,2 +459,3 @@ description: 'A vibrant background for small UI elements like onboarding buttons and bold new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.hovered',
@@ -426,2 +469,3 @@ description: 'Hover state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.pressed',
@@ -435,2 +479,3 @@ description: 'Pressed state of background.boldNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.bold.[default]',
@@ -446,2 +491,3 @@ description: 'A vibrant background for small UI elements like unchecked toggles and bold default lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.hovered',
@@ -455,2 +501,3 @@ description: 'Hover state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.pressed',
@@ -464,2 +511,3 @@ description: 'Pressed state of background.boldSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.bold.[default]',
@@ -475,2 +523,3 @@ description: 'A vibrant background for small UI elements like checked toggles and bold success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.hovered',
@@ -484,2 +533,3 @@ description: 'Hover state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.pressed',
@@ -493,2 +543,3 @@ description: 'Pressed state of background.boldWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.bold.[default]',
@@ -503,2 +554,3 @@ description: 'A vibrant background for small UI elements like warning buttons and bold moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.raised',
@@ -512,2 +564,3 @@ description: 'Use for the background of raised cards, such as Jira cards on a Kanban board.\nCombine with shadow.card.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.[default]',
@@ -517,2 +570,13 @@ description: 'Use as the primary background for the UI'
       },
+      inverse: {
+        '[default]': {
+          attributes: {
+            group: 'paint',
+            state: 'deprecated',
+            introduced: '0.1.0',
+            replacement: 'color.background.inverse.subtle.[default]',
+            description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
+          }
+        }
+      },
       overlay: {
@@ -522,2 +586,3 @@ attributes: {
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.overlay',
@@ -532,2 +597,3 @@ 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."
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].[default]',
@@ -541,2 +607,3 @@ description: 'Use for backgrounds of elements in a selected state'
             state: 'deprecated',
+            introduced: '0.1.0',
             replacement: 'color.background.selected.[default].hovered',
@@ -552,2 +619,3 @@ description: 'Hover state for color.background.selected'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.pressed',
@@ -561,2 +629,3 @@ description: 'Pressed state for background.subtleBorderedNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.input.[default]',
@@ -572,2 +641,3 @@ description: 'Hover state for background.subtleBorderedNeutral'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].hovered',
@@ -581,2 +651,3 @@ description: 'Hover state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].pressed',
@@ -590,2 +661,3 @@ description: 'Pressed state for background.subtleBrand'
             state: 'deprecated',
+            introduced: '0.0.15',
             replacement: 'color.background.selected.[default].[default]',
@@ -601,2 +673,3 @@ description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].hovered',
@@ -610,2 +683,3 @@ description: 'Hover state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].pressed',
@@ -619,2 +693,3 @@ description: 'Pressed state for background.subtleDanger'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.danger.[default].[default]',
@@ -630,2 +705,3 @@ description: 'Use for subdued backgrounds of UI elements like error section messages and removed lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].hovered',
@@ -639,2 +715,3 @@ description: 'Hover state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].pressed',
@@ -648,2 +725,3 @@ description: 'Pressed state for background.subtleDiscovery'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.discovery.[default].[default]',
@@ -659,2 +737,3 @@ description: 'Use for subdued backgrounds of UI elements like discovery section messages and new lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].hovered',
@@ -668,2 +747,3 @@ description: 'Hover state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].pressed',
@@ -677,2 +757,3 @@ description: 'Pressed state for background.subtleNeutral'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.[default].[default]',
@@ -688,2 +769,3 @@ description: 'Use as the default background of UI elements like buttons, lozenges, and tags.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].hovered',
@@ -697,2 +779,3 @@ description: 'Hover state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].pressed',
@@ -706,2 +789,3 @@ description: 'Pressed state for background.subtleSuccess'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.success.[default].[default]',
@@ -717,2 +801,3 @@ description: 'Use for subdued backgrounds of UI elements like success section messages and success lozenges.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].hovered',
@@ -726,2 +811,3 @@ description: 'Hover state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].pressed',
@@ -735,2 +821,3 @@ description: 'Pressed state for background.subtleWarning'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.warning.[default].[default]',
@@ -745,2 +832,3 @@ description: 'Use for subdued backgrounds of UI elements like warning section messages and moved lozenges.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'elevation.surface.sunken',
@@ -755,2 +843,3 @@ description: 'Use as a secondary background for the UI'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.hovered',
@@ -764,2 +853,3 @@ description: 'Hover state for UIs that do not have a default background, such as menu items or subtle buttons.'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.background.neutral.subtle.pressed',
@@ -776,2 +866,3 @@ description: 'Pressed state for UIs that do not have a default background, such as menu items or subtle buttons.'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.[default]',
@@ -786,2 +877,3 @@ description: 'Use for primary text, such as body copy, sentence case headers, and buttons'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.pressed',
@@ -795,2 +887,3 @@ description: 'Use for links in a pressed state'
             state: 'deleted',
+            introduced: '0.0.15',
             replacement: 'color.link.[default]',
@@ -805,2 +898,3 @@ description: 'Use for links in a resting or hover state. Add an underline for hover states'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtlest',
@@ -814,2 +908,3 @@ description: "\nUse for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text.\n\nUse for icons that are paired with text.medEmphasis text"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.subtle',
@@ -823,2 +918,3 @@ description: "\nUse for secondary text, such navigation, subtle button links, input field labels, and all caps subheadings.\n\nUse for icon-only buttons, or icons paired with text.highEmphasis text\n          "
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.inverse',
@@ -832,2 +928,3 @@ description: 'Use for text and icons when on bold backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.text.warning.inverse',
@@ -843,2 +940,3 @@ description: 'Use for text and icons when on bold warning backgrounds'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.focused',
@@ -852,2 +950,3 @@ description: 'Use for focus rings of elements in a focus state'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.border.[default]',
@@ -863,2 +962,3 @@ description: 'Use to create borders around UI elements such as text fields, checkboxes, and radio buttons, or to visually group or separate UI elements, such as flat cards or side panel dividers'
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.brand',
@@ -872,2 +972,3 @@ description: "\nUse rarely for icons or borders representing brand, in-progress, or information, such as the icons in information sections messages.\n\nAlso use for blue icons or borders when there is no meaning tied to the color, such as file type icons."
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.danger',
@@ -881,2 +982,3 @@ description: "\nUse rarely for icons and borders representing critical information, such the icons in error section messages or the borders on invalid text fields.\n\nAlso use for red icons or borders when there is no meaning tied to the color, such as file type icons."
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.discovery',
@@ -890,2 +992,3 @@ description: "\nUse rarely for icons and borders representing new information, such as the icons in discovery section mesages or the borders in onboarding spotlights.\n\nAlso use for purple icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.success',
@@ -899,2 +1002,3 @@ description: "\nUse rarely for icons and borders representing positive information, such as the icons in success section messages or the borders on validated text fields.\n\nAlso use for green icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.0.15',
           replacement: 'color.icon.warning.[default]',
@@ -910,2 +1014,3 @@ description: "\nUse rarely for icons and borders representing semi-urgent information, such as the icons in warning section messages.\n\nAlso use for yellow icons or borders when there is no meaning tied to the color, such as file type icons.\n"
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.hovered',
@@ -919,2 +1024,3 @@ description: 'Use as a background overlay for elements in a hover state when their background color cannot change, such as avatars.'
           state: 'deleted',
+          introduced: '0.1.0',
           replacement: 'color.interaction.pressed',
@@ -931,2 +1037,3 @@ description: 'Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars.'
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.raised',
@@ -940,2 +1047,3 @@ description: "\nUse for the box shadow of raised card elements, such as Jira cards on a Kanban board.\n\nCombine with background.overlay"
         state: 'deleted',
+        introduced: '0.6.0',
         replacement: 'elevation.shadow.overlay',
@@ -942,0 +1050,0 @@ description: "\nUse for the box shadow 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 box shadow of raised cards in a dragged state.\n\nCombine with background.overlay"

dist/esm/tokens/default/elevation/shadow.js

@@ -8,2 +8,3 @@ var shadow = {
           state: 'active',
+          introduced: '0.6.0',
           description: "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use to create a shadow when content scolls under other content."
@@ -24,2 +26,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: "Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state."
@@ -26,0 +29,0 @@ }

dist/esm/tokens/default/elevation/surface.js

@@ -8,2 +8,3 @@ var shadow = {
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use as the primary background for the UI.'
@@ -16,2 +17,3 @@ }
           state: 'active',
+          introduced: '0.6.0',
           description: 'A secondary background for the UI commonly used for grouping items, such as Jira cards in columns.'
@@ -24,2 +26,3 @@ }
           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'
@@ -32,2 +35,3 @@ }
           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."
@@ -34,0 +38,0 @@ }

dist/esm/tokens/default/utility/utility.js

@@ -7,2 +7,3 @@ var utility = {
         state: 'active',
+        introduced: '0.1.1',
         description: 'Transparent token used for backwards compatibility between new and old theming solutions'
@@ -15,2 +16,3 @@ }
         state: 'active',
+        introduced: '0.4.0',
         description: 'Used as a placeholder when a suitable token does not exist'
@@ -17,0 +19,0 @@ }

dist/esm/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

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

@@ -131,3 +131,6 @@ /**
     readonly 'color.background.disabled': "#091E420F";
-    readonly 'color.background.inverse': "#00000029";
+    readonly 'color.background.inverse.subtle': "#00000029";
+    readonly 'color.background.inverse.subtle.hovered': "#0000003D";
+    readonly 'color.background.inverse.subtle.pressed': "#00000052";
+    readonly 'color.background.inverse': "#FFFFFF29";
     readonly 'color.background.input': "#FFFFFF";
@@ -134,0 +137,0 @@ readonly 'color.background.input.hovered': "#F7F8F9";

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

@@ -128,2 +128,5 @@ declare const tokens: {
     readonly 'color.background.disabled': "--ds-background-disabled";
+    readonly 'color.background.inverse.subtle': "--ds-background-inverse-subtle";
+    readonly 'color.background.inverse.subtle.hovered': "--ds-background-inverse-subtle-hovered";
+    readonly 'color.background.inverse.subtle.pressed': "--ds-background-inverse-subtle-pressed";
     readonly 'color.background.inverse': "--ds-background-inverse";
@@ -401,2 +404,5 @@ readonly 'color.background.input': "--ds-background-input";
     'color.background.disabled': 'var(--ds-background-disabled)';
+    'color.background.inverse.subtle': 'var(--ds-background-inverse-subtle)';
+    'color.background.inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
+    'color.background.inverse.subtle.pressed': 'var(--ds-background-inverse-subtle-pressed)';
     'color.background.inverse': 'var(--ds-background-inverse)';
@@ -403,0 +409,0 @@ 'color.background.input': 'var(--ds-background-input)';

dist/types/artifacts/tokens-raw/atlassian-dark.d.ts

@@ -5,2 +5,3 @@ declare const tokens: ({
         state: string;
+        introduced: string;
         description: string;
@@ -16,2 +17,3 @@ replacement?: undefined;
             state: string;
+            introduced: string;
             description: string;
@@ -28,2 +30,3 @@ replacement?: undefined;
         state: string;
+        introduced: string;
         replacement: string;
@@ -39,2 +42,3 @@ description: string;
             state: string;
+            introduced: string;
             replacement: string;
@@ -51,2 +55,3 @@ description: string;
         state: string;
+        introduced: string;
         replacement: string;
@@ -82,2 +87,3 @@ description: string;
             state: string;
+            introduced: string;
             replacement: string;
@@ -114,2 +120,3 @@ description: string;
         state: string;
+        introduced: string;
         description: string;
@@ -145,2 +152,3 @@ replacement?: undefined;
             state: string;
+            introduced: string;
             description: string;
@@ -147,0 +155,0 @@ replacement?: undefined;

dist/types/artifacts/tokens-raw/atlassian-light.d.ts

@@ -5,2 +5,3 @@ declare const tokens: ({
         state: string;
+        introduced: string;
         description: string;
@@ -16,2 +17,3 @@ replacement?: undefined;
             state: string;
+            introduced: string;
             description: string;
@@ -28,2 +30,3 @@ replacement?: undefined;
         state: string;
+        introduced: string;
         replacement: string;
@@ -39,2 +42,3 @@ description: string;
             state: string;
+            introduced: string;
             replacement: string;
@@ -51,2 +55,3 @@ description: string;
         state: string;
+        introduced: string;
         replacement: string;
@@ -70,2 +75,3 @@ description: string;
             state: string;
+            introduced: string;
             replacement: string;
@@ -90,2 +96,3 @@ description: string;
         state: string;
+        introduced: string;
         description: string;
@@ -109,2 +116,3 @@ replacement?: undefined;
             state: string;
+            introduced: string;
             description: string;
@@ -111,0 +119,0 @@ replacement?: undefined;

dist/types/artifacts/types-internal.d.ts

 /**
  * Internally types used for handling token ids
  */
-export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
+export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

dist/types/artifacts/types.d.ts

 /**
  * Type representing the currently active tokens
  */
-export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
+export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.disabled' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';

dist/types/types.d.ts

@@ -34,2 +34,3 @@ import { InternalTokenIds } from './artifacts/types-internal';
         state: ActiveTokenStates;
+        introduced: string;
         replacement?: undefined;
@@ -40,2 +41,3 @@ } | {
         state: ReplacedTokenStates;
+        introduced: string;
         replacement?: Replacement;
@@ -199,3 +201,9 @@ };
             disabled: PaintToken;
-            inverse: PaintToken;
+            inverse: {
+                subtle: {
+                    '[default]': PaintToken;
+                    hovered: PaintToken;
+                    pressed: PaintToken;
+                };
+            };
             input: {
@@ -583,2 +591,5 @@ '[default]': PaintToken;
             card: PaintToken;
+            inverse: {
+                '[default]': PaintToken;
+            };
             overlay: PaintToken;
@@ -585,0 +596,0 @@ selected: {

package.json

 {
   "name": "@atlaskit/tokens",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "author": "Atlassian Pty Ltd",
@@ -5,0 +5,0 @@ "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2036562

increased by7.55%

Lines of code

60971

increased by8.39%

No dependency changes