@atlaskit/tokens 0.8.2 → 0.8.3

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

@@ -11,6 +11,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.0.15',
           description: 'Use for the screen overlay that appears with modal dialogs'
         }
       },
@@ -18,6 +19,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"
         }
       },
@@ -25,6 +27,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"
         }
       }
@@ -34,14 +37,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: {
@@ -49,6 +74,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.'
           }
         },
@@ -56,6 +82,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Hovered state for color.background.input'
           }
         },
@@ -63,6 +90,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Pressed state for color.background.input'
           }
         }
@@ -73,6 +101,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'The default background for neutral elements, such as default buttons.'
             }
           },
@@ -80,6 +109,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral'
             }
           },
@@ -87,6 +117,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral'
             }
           }
@@ -96,6 +127,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.'
             }
           },
@@ -103,6 +135,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.neutral.subtle'
             }
           },
@@ -110,6 +143,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.neutral.subtle'
             }
           }
@@ -119,6 +153,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.'
             }
           },
@@ -126,6 +161,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.neutral.bold'
             }
           },
@@ -133,6 +169,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.neutral.bold'
             }
           }
@@ -144,6 +181,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.'
             }
           },
@@ -151,6 +189,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.brand.bold'
             }
           },
@@ -158,6 +197,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.brand.bold'
             }
           }
@@ -169,6 +209,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.'
             }
           },
@@ -176,6 +217,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Hovered state for color.background.selected'
             }
           },
@@ -183,6 +225,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state for color.background.selected'
             }
           }
@@ -192,13 +235,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'
             }
           },
@@ -206,6 +251,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.2',
               description: 'Pressed state of color.background.selected.bold'
             }
           }
@@ -217,13 +263,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'
             }
           },
@@ -231,6 +279,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.danger'
             }
           }
@@ -240,6 +289,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.'
             }
           },
@@ -247,6 +297,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.danger.bold'
             }
           },
@@ -254,6 +305,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.danger.bold'
             }
           }
@@ -265,6 +317,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for backgrounds communicating caution, such as in warning section messages.'
             }
           },
@@ -272,6 +325,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.warning'
             }
           },
@@ -279,6 +333,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.warning'
             }
           }
@@ -288,6 +343,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.'
             }
           },
@@ -295,6 +351,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.warning.bold'
             }
           },
@@ -302,6 +359,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.warning.bold'
             }
           }
@@ -313,6 +371,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.'
             }
           },
@@ -320,6 +379,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state for color.background.success'
             }
           },
@@ -327,6 +387,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.success'
             }
           }
@@ -336,6 +397,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.'
             }
           },
@@ -343,6 +405,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.success.bold'
             }
           },
@@ -350,6 +413,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.success.bold'
             }
           }
@@ -361,6 +425,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.'
             }
           },
@@ -368,6 +433,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hover state for color.background.discovery'
             }
           },
@@ -375,6 +441,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state for color.background.discovery'
             }
           }
@@ -384,6 +451,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.'
             }
           },
@@ -391,6 +459,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.discovery.bold'
             }
           },
@@ -398,6 +467,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.discovery.bold'
             }
           }
@@ -409,6 +479,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.'
             }
           },
@@ -416,6 +487,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information'
             }
           },
@@ -423,6 +495,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information'
             }
           }
@@ -432,6 +505,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'A vibrant background option for communicating information or something in-progress.'
             }
           },
@@ -439,6 +513,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Hovered state of color.background.information.bold'
             }
           },
@@ -446,6 +521,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Pressed state of color.background.information.bold'
             }
           }

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

@@ -11,6 +11,7 @@ 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.'
         }
       },
@@ -18,6 +19,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for focus rings of elements in a focus state.'
         }
       },
@@ -25,6 +27,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.'
         }
       },
@@ -32,6 +35,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders of elements in a disabled state.'
         }
       },
@@ -39,6 +43,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.'
         }
       },
@@ -46,6 +51,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.'
         }
       },
@@ -53,6 +59,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.'
         }
       },
@@ -60,6 +67,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating caution.'
         }
       },
@@ -67,6 +75,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.'
         }
       },
@@ -74,6 +83,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.'
         }
       },
@@ -81,6 +91,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for borders communicating information or something in-progress.'
         }
       }

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

@@ -11,6 +11,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icon-only buttons, or icons paired with color.text'
         }
       },
@@ -18,6 +19,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons paired with color.text.subtle'
         }
       },
@@ -25,6 +27,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons on bold backgrounds.'
         }
       },
@@ -32,6 +35,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons in a disabled state.'
         }
       },
@@ -39,6 +43,7 @@ var color = {
         attributes: {
           group: 'paint',
           state: 'active',
+          introduced: '0.6.0',
           description: 'Use for icons that reinforce our brand.'
         }
       },
@@ -46,6 +51,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.'
         }
       },
@@ -53,7 +59,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: {
@@ -61,6 +68,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.'
           }
         },
@@ -68,6 +76,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for icons when on bold warning backgrounds.'
           }
         }
@@ -76,6 +85,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.'
         }
       },
@@ -83,6 +93,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.'
         }
       },
@@ -90,6 +101,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/cjs/tokens/default/color/interaction.js

@@ -11,6 +11,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.'
         }
       },
@@ -18,6 +19,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.'
         }
       },
@@ -26,6 +28,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.'
           }
         },
@@ -33,6 +36,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/cjs/tokens/default/color/skeleton.js

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