@atlaskit/tokens 0.8.1 → 0.9.0

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

@@ -5,6 +5,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for the screen overlay that appears with modal dialogs'
         }
       },
@@ -12,6 +13,7 @@ var color = {
         attributes: {
           group: 'paint',
           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"
         }
       },
@@ -19,6 +21,7 @@ var color = {
         attributes: {
           group: 'paint',
           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"
         }
       }
@@ -28,14 +31,36 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for backgrounds of elements in a disabled state.'
         }
       },
       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'
+            }
+          }
         }
       },
       input: {
@@ -43,6 +68,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for background of form UI elements, such as text fields, checkboxes, and radio buttons.'
           }
         },
@@ -50,6 +76,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Hovered state for color.background.input'
           }
         },
@@ -57,6 +84,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Pressed state for color.background.input'
           }
         }
@@ -67,6 +95,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'The default background for neutral elements, such as default buttons.'
             }
           },
@@ -74,6 +103,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral'
             }
           },
@@ -81,6 +111,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral'
             }
           }
@@ -90,6 +121,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -97,6 +129,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral.subtle'
             }
           },
@@ -104,6 +137,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral.subtle'
             }
           }
@@ -113,6 +147,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for neutral UI elements, such as announcement banners.'
             }
           },
@@ -120,6 +155,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.neutral.bold'
             }
           },
@@ -127,6 +163,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.neutral.bold'
             }
           }
@@ -138,6 +175,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
             }
           },
@@ -145,6 +183,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.brand.bold'
             }
           },
@@ -152,6 +191,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.brand.bold'
             }
           }
@@ -163,6 +203,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Use for the background of elements in a selected state, such as in opened dropdown buttons.'
             }
           },
@@ -170,6 +211,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state for color.background.selected'
             }
           },
@@ -177,6 +219,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state for color.background.selected'
             }
           }
@@ -186,13 +229,15 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
           hovered: {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state of color.background.selected.bold'
             }
           },
@@ -200,6 +245,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state of color.background.selected.bold'
             }
           }
@@ -211,13 +257,15 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
           hovered: {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.danger'
             }
           },
@@ -225,6 +273,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.danger'
             }
           }
@@ -234,6 +283,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating critical information, such as in danger buttons and error banners.'
             }
           },
@@ -241,6 +291,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.danger.bold'
             }
           },
@@ -248,6 +299,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.danger.bold'
             }
           }
@@ -259,6 +311,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating caution, such as in warning section messages.'
             }
           },
@@ -266,6 +319,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.warning'
             }
           },
@@ -273,6 +327,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.warning'
             }
           }
@@ -282,6 +337,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating caution, such as in warning buttons and warning banners.'
             }
           },
@@ -289,6 +345,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.warning.bold'
             }
           },
@@ -296,6 +353,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.warning.bold'
             }
           }
@@ -307,6 +365,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating a favourable outcome, such as in success section messages.'
             }
           },
@@ -314,6 +373,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.success'
             }
           },
@@ -321,6 +381,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.success'
             }
           }
@@ -330,6 +391,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating a favourable outcome, such as in checked toggles.'
             }
           },
@@ -337,6 +399,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.success.bold'
             }
           },
@@ -344,6 +407,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.success.bold'
             }
           }
@@ -355,6 +419,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating change or something new, such as in discovery section messages.'
             }
           },
@@ -362,6 +427,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hover state for color.background.discovery'
             }
           },
@@ -369,6 +435,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.discovery'
             }
           }
@@ -378,6 +445,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option communicating change or something new, such as in onboarding spotlights.'
             }
           },
@@ -385,6 +453,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.discovery.bold'
             }
           },
@@ -392,6 +461,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.discovery.bold'
             }
           }
@@ -403,6 +473,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating information or something in-progress, such as in information section messages.'
             }
           },
@@ -410,6 +481,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information'
             }
           },
@@ -417,6 +489,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information'
             }
           }
@@ -426,6 +499,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating information or something in-progress.'
             }
           },
@@ -433,6 +507,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information.bold'
             }
           },
@@ -440,6 +515,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information.bold'
             }
           }

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

@@ -5,13 +5,23 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use to visually group or separate UI elements, such as flat cards or side panel dividers.'
         }
       },
+      inverse: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          introduced: '0.6.0',
+          description: 'Use for borders on bold backgrounds.'
+        }
+      },
       focused: {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for focus rings of elements in a focus state.'
         }
       },
@@ -19,6 +29,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons.'
         }
       },
@@ -26,6 +37,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of elements in a disabled state.'
         }
       },
@@ -33,6 +45,7 @@ var color = {
         attributes: {
           group: 'paint',
           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.'
         }
       },
@@ -40,6 +53,7 @@ var color = {
         attributes: {
           group: 'paint',
           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.'
         }
       },
@@ -47,6 +61,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating critical information, such as the borders on invalid text fields.'
         }
       },
@@ -54,6 +69,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating caution.'
         }
       },
@@ -61,6 +77,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating a favourable outcome, such as the borders on validated text fields.'
         }
       },
@@ -68,6 +85,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.'
         }
       },
@@ -75,6 +93,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating information or something in-progress.'
         }
       }

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

@@ -5,6 +5,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icon-only buttons, or icons paired with color.text'
         }
       },
@@ -12,6 +13,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons paired with color.text.subtle'
         }
       },
@@ -19,6 +21,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons on bold backgrounds.'
         }
       },
@@ -26,6 +29,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons in a disabled state.'
         }
       },
@@ -33,6 +37,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons that reinforce our brand.'
         }
       },
@@ -40,6 +45,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.2',
           description: 'Use for icons in selected or opened states, such as those used in dropdown buttons.'
         }
       },
@@ -47,7 +53,8 @@ var color = {
         attributes: {
           group: 'paint',
           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.'
         }
       },
       warning: {
@@ -55,6 +62,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons communicating caution, such as those used in warning section messages.'
           }
         },
@@ -62,6 +70,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons when on bold warning backgrounds.'
           }
         }
@@ -70,6 +79,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating a favourable outcome, such as those used in success section messaged.'
         }
       },
@@ -77,6 +87,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating change or something new, such as discovery section messages.'
         }
       },
@@ -84,6 +95,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons communicating information or something in-progress, such as information section messages.'
         }
       }

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

@@ -5,6 +5,7 @@ var color = {
         attributes: {
           group: 'paint',
           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.'
         }
       },
@@ -12,6 +13,7 @@ var color = {
         attributes: {
           group: 'paint',
           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.'
         }
       },
@@ -20,6 +22,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -27,6 +30,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         }

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

@@ -5,6 +5,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for skeleton loading states'
         }
       },
@@ -12,6 +13,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.8.0',
           description: 'Use for the pulse or shimmer effect in skeleton loading states'
         }
       }