@atlaskit/tokens 0.8.1 → 0.9.0

package/dist/es2019/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.8.1";
+const version = "0.9.0";
 
 function token(path, fallback) {
   let token = tokens[path];

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

@@ -17,19 +17,31 @@ const 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/es2019/tokens/atlassian-dark/color/border.js

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

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

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

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

@@ -17,19 +17,31 @@ const 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/es2019/tokens/atlassian-light/color/border.js

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

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

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

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

@@ -7,6 +7,7 @@ const 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.'
             }
           },
@@ -14,6 +15,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold blue accent backgrounds.'
             }
           }
@@ -23,6 +25,7 @@ const 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.'
             }
           },
@@ -30,6 +33,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold red accent backgrounds.'
             }
           }
@@ -39,6 +43,7 @@ const 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.'
             }
           },
@@ -46,6 +51,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold orange accent backgrounds.'
             }
           }
@@ -55,6 +61,7 @@ const 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.'
             }
           },
@@ -62,6 +69,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold yellow accent backgrounds.'
             }
           }
@@ -71,6 +79,7 @@ const 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.'
             }
           },
@@ -78,6 +87,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold green accent backgrounds.'
             }
           }
@@ -87,6 +97,7 @@ const 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.'
             }
           },
@@ -94,6 +105,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold purple accent backgrounds.'
             }
           }
@@ -103,6 +115,7 @@ const 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.'
             }
           },
@@ -110,6 +123,7 @@ const color = {
             attributes: {
               group: 'paint',
               state: 'active',
+              introduced: '0.7.0',
               description: 'Use on bold teal accent backgrounds.'
             }
           }
@@ -119,13 +133,15 @@ const 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.'
             }
           }
@@ -138,6 +154,7 @@ const 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.'
           }
         },
@@ -145,6 +162,7 @@ const 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.'
           }
         },
@@ -152,6 +170,7 @@ const 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.'
           }
         },
@@ -159,6 +178,7 @@ const 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.'
           }
         },
@@ -166,6 +186,7 @@ const 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.'
           }
         },
@@ -173,6 +194,7 @@ const 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.'
           }
         },
@@ -180,6 +202,7 @@ const 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.'
           }
         },
@@ -187,6 +210,7 @@ const 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.'
           }
         }
@@ -198,6 +222,7 @@ const 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.'
           }
         },
@@ -205,6 +230,7 @@ const 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.'
           }
         },
@@ -212,6 +238,7 @@ const 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.'
           }
         },
@@ -219,6 +246,7 @@ const 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.'
           }
         },
@@ -226,6 +254,7 @@ const 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.'
           }
         },
@@ -233,6 +262,7 @@ const 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.'
           }
         },
@@ -240,6 +270,7 @@ const 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.'
           }
         },
@@ -247,6 +278,7 @@ const 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.'
           }
         }
@@ -259,6 +291,7 @@ const 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.'
             }
           },
@@ -266,6 +299,7 @@ const 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.'
             }
           },
@@ -273,6 +307,7 @@ const 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.'
             }
           },
@@ -280,6 +315,7 @@ const 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.'
             }
           }
@@ -289,6 +325,7 @@ const 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.'
             }
           },
@@ -296,6 +333,7 @@ const 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.'
             }
           },
@@ -303,6 +341,7 @@ const 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.'
             }
           },
@@ -310,6 +349,7 @@ const 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.'
             }
           }
@@ -319,6 +359,7 @@ const 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.'
             }
           },
@@ -326,6 +367,7 @@ const 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.'
             }
           },
@@ -333,6 +375,7 @@ const 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.'
             }
           },
@@ -340,6 +383,7 @@ const 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.'
             }
           }
@@ -349,6 +393,7 @@ const 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.'
             }
           },
@@ -356,6 +401,7 @@ const 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.'
             }
           },
@@ -363,6 +409,7 @@ const 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.'
             }
           },
@@ -370,6 +417,7 @@ const 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.'
             }
           }
@@ -379,6 +427,7 @@ const 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.'
             }
           },
@@ -386,6 +435,7 @@ const 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.'
             }
           },
@@ -393,6 +443,7 @@ const 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.'
             }
           },
@@ -400,6 +451,7 @@ const 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.'
             }
           }
@@ -409,6 +461,7 @@ const 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.'
             }
           },
@@ -416,6 +469,7 @@ const 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.'
             }
           },
@@ -423,6 +477,7 @@ const 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.'
             }
           },
@@ -430,6 +485,7 @@ const 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.'
             }
           }
@@ -439,6 +495,7 @@ const 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.'
             }
           },
@@ -446,6 +503,7 @@ const 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.'
             }
           },
@@ -453,6 +511,7 @@ const 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.'
             }
           },
@@ -460,6 +519,7 @@ const 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.'
             }
           }
@@ -469,6 +529,7 @@ const 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.'
             }
           },
@@ -476,6 +537,7 @@ const 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.'
             }
           },
@@ -483,6 +545,7 @@ const 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.'
             }
           },
@@ -490,6 +553,7 @@ const 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.'
             }
           }