@atlaskit/tokens 0.8.0 → 0.8.3

package/dist/es2019/constants.js

@@ -0,0 +1,8 @@
+export const ALLOWED_THEMES = ['light', 'dark'];
+export const DEFAULT_THEME = 'light';
+export const CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
+
+export const LONG_SHORT_MAPPING = {
+  'atlassian-light': 'light',
+  'atlassian-dark': 'dark'
+};

package/dist/es2019/entry-points/token-ids.js

@@ -0,0 +1 @@
+export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId } from '../token-ids';

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.0";
+const version = "0.8.3";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/token-ids.js

@@ -0,0 +1,51 @@
+import { CSS_PREFIX } from './constants';
+/**
+ * Transforms a style dictionary token path to a CSS custom property.
+ *
+ * A css prefix will be prepended and all [default] key words will be omitted
+ * from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty('color.background.bold.[default]')
+ */
+
+export const getCSSCustomProperty = path => {
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return `--${[CSS_PREFIX, ...normalizedPath.slice(1)].filter(el => el !== '[default]').join('-')}`;
+};
+
+/**
+ * Transforms a style dictionary token path to a shorthand token id
+ * These ids will be typically be how tokens are interacted with via typescript and css
+ *
+ * All [default] key words will be omitted from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns color.background.bold
+ * getTokenId(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold
+ * getTokenId('color.background.bold.[default]')
+ */
+export const getTokenId = path => {
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return normalizedPath.filter(el => el !== '[default]').join('.');
+};
+/**
+ * Transforms a style dictionary token path to a fully qualified token id
+ * These Ids are intended to be used internal to this package by style-dictionary
+ *
+ * [default] key words will NOT be omitted from the path
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold.[default]
+ * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
+ */
+
+export const getFullyQualifiedTokenId = path => path.join('.');

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/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/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.'
             }
           }