@atlaskit/tokens 0.8.1 → 0.9.0

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.8.1";
+var version = "0.9.0";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

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

@@ -23,19 +23,31 @@ var color = {
       disabled: {
         value: 'DN200A'
       },
-      // @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'
+          }
+        }
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

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

@@ -10,6 +10,9 @@ var color = {
       '[default]': {
         value: 'DN300A'
       },
+      inverse: {
+        value: 'DN0'
+      },
       focused: {
         value: 'B300'
       },

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

@@ -202,6 +202,12 @@ var color = {
       card: {
         value: 'DN100'
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#00000029'
+        }
+      },
       overlay: {
         value: 'DN200'
       },

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

@@ -23,19 +23,31 @@ var color = {
       disabled: {
         value: 'N200A'
       },
-      // @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'
+          }
+        }
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

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

@@ -10,6 +10,9 @@ var color = {
       '[default]': {
         value: 'N300A'
       },
+      inverse: {
+        value: 'N0'
+      },
       focused: {
         value: 'B500'
       },

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

@@ -202,6 +202,12 @@ var color = {
       card: {
         value: 'N0'
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#FFFFFF29'
+        }
+      },
       overlay: {
         value: 'N0'
       },

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

@@ -13,6 +13,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -20,6 +21,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold blue accent backgrounds.'
             }
           }
@@ -29,6 +31,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -36,6 +39,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold red accent backgrounds.'
             }
           }
@@ -45,6 +49,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -52,6 +57,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold orange accent backgrounds.'
             }
           }
@@ -61,6 +67,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -68,6 +75,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold yellow accent backgrounds.'
             }
           }
@@ -77,6 +85,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -84,6 +93,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold green accent backgrounds.'
             }
           }
@@ -93,6 +103,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -100,6 +111,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold purple accent backgrounds.'
             }
           }
@@ -109,6 +121,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.6.0',
               description: 'Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -116,6 +129,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold teal accent backgrounds.'
             }
           }
@@ -125,13 +139,15 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
           bolder: {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold magenta accent backgrounds.'
             }
           }
@@ -144,6 +160,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -151,6 +168,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -158,6 +176,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -165,6 +184,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -172,6 +192,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -179,6 +200,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -186,6 +208,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         },
@@ -193,6 +216,7 @@ var color = {
           attributes: {
             group: 'paint',
             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.'
           }
         }
@@ -204,6 +228,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -211,6 +236,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -218,6 +244,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -225,6 +252,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -232,6 +260,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -239,6 +268,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -246,6 +276,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         },
@@ -253,6 +284,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'active',
+            introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
         }
@@ -265,6 +297,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -272,6 +305,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
             }
           },
@@ -279,6 +313,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -286,6 +321,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -295,6 +331,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -302,6 +339,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -309,6 +347,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -316,6 +355,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -325,6 +365,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -332,6 +373,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -339,6 +381,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -346,6 +389,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -355,6 +399,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -362,6 +407,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -369,6 +415,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -376,6 +423,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -385,6 +433,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -392,6 +441,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -399,6 +449,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -406,6 +457,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -415,6 +467,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -422,6 +475,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -429,6 +483,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -436,6 +491,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -445,6 +501,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -452,6 +509,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -459,6 +517,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -466,6 +525,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }
@@ -475,6 +535,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -482,6 +543,7 @@ var color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
@@ -489,6 +551,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           },
@@ -496,6 +559,7 @@ var color = {
             attributes: {
               group: 'paint',
               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.'
             }
           }