@atlaskit/tokens 0.6.1 → 0.7.0

package/dist/es2019/tokens/default/deprecated/deprecated.js

@@ -5,7 +5,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.blue.bold',
+          replacement: 'color.background.accent.blue.bolder',
           description: 'Use for blue backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -13,7 +13,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.green.bold',
+          replacement: 'color.background.accent.green.bolder',
           description: 'Use for green backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -21,7 +21,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.orange.bold',
+          replacement: 'color.background.accent.orange.bolder',
           description: 'Use for orange backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -29,7 +29,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.purple.bold',
+          replacement: 'color.background.accent.purple.bolder',
           description: 'Use for purple backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -37,7 +37,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.red.bold',
+          replacement: 'color.background.accent.red.bolder',
           description: 'Use for red backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -45,7 +45,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.teal.bold',
+          replacement: 'color.background.accent.teal.bolder',
           description: 'Use for teal backgrounds of stronger emphasis when there is no meaning tied to the color, such as bold tags.'
         }
       },
@@ -53,7 +53,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.blue.[default]',
+          replacement: 'color.background.accent.blue.subtler',
           description: 'Use for blue subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -61,7 +61,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.green.[default]',
+          replacement: 'color.background.accent.green.subtler',
           description: 'Use for green subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -69,7 +69,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.magenta.[default]',
+          replacement: 'color.background.accent.magenta.subtler',
           description: 'Use for magenta subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -77,7 +77,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.orange.[default]',
+          replacement: 'color.background.accent.orange.subtler',
           description: 'Use for orange subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -85,7 +85,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.purple.[default]',
+          replacement: 'color.background.accent.purple.subtler',
           description: 'Use for purple subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -93,7 +93,7 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.red.[default]',
+          replacement: 'color.background.accent.red.subtler',
           description: 'Use for red subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       },
@@ -101,12 +101,158 @@ const color = {
         attributes: {
           group: 'paint',
           state: 'deprecated',
-          replacement: 'color.background.accent.teal.[default]',
+          replacement: 'color.background.accent.teal.subtler',
           description: 'Use for teal subdued backgrounds when there is no meaning tied to the color, such as colored tags.'
         }
       }
     },
     background: {
+      accent: {
+        blue: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.blue.subtler',
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.blue.subtle',
+              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.'
+            }
+          }
+        },
+        red: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.red.subtler',
+              description: 'Use for red backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.red.subtle',
+              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.'
+            }
+          }
+        },
+        orange: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.orange.subtler',
+              description: 'Use for orange backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.orange.subtle',
+              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.'
+            }
+          }
+        },
+        yellow: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.yellow.subtler',
+              description: 'Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.yellow.subtle',
+              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.'
+            }
+          }
+        },
+        green: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.green.subtler',
+              description: 'Use for green backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.green.subtle',
+              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.'
+            }
+          }
+        },
+        teal: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.teal.subtler',
+              description: 'Use for teal backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.teal.subtle',
+              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.'
+            }
+          }
+        },
+        purple: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.purple.subtler',
+              description: 'Use for purple backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.purple.subtle',
+              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.'
+            }
+          }
+        },
+        magenta: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.magenta.subtler',
+              description: 'Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          bold: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.accent.magenta.subtle',
+              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.'
+            }
+          }
+        }
+      },
       blanket: {
         attributes: {
           group: 'paint',
@@ -115,6 +261,34 @@ const color = {
           description: 'Use for the screen overlay that appears with modal dialogs'
         }
       },
+      brand: {
+        '[default]': {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].[default]',
+              description: 'Use for the background of elements used to reinforce our brand.'
+            }
+          },
+          hovered: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].hovered',
+              description: 'Hovered state for color.background.brand'
+            }
+          },
+          pressed: {
+            attributes: {
+              group: 'paint',
+              state: 'deprecated',
+              replacement: 'color.background.selected.[default].pressed',
+              description: 'Pressed state for color.background.brand'
+            }
+          }
+        }
+      },
       boldBrand: {
         hover: {
           attributes: {
@@ -305,7 +479,7 @@ Combine with shadow.overlay.`
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].[default]',
+            replacement: 'color.background.selected.[default].[default]',
             description: 'Use for backgrounds of elements in a selected state'
           }
         },
@@ -313,17 +487,9 @@ Combine with shadow.overlay.`
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].hovered',
+            replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for color.background.selected'
           }
-        },
-        pressed: {
-          attributes: {
-            group: 'paint',
-            state: 'deprecated',
-            replacement: 'color.background.brand.[default].pressed',
-            description: 'Pressed state for color.background.selected'
-          }
         }
       },
       subtleBorderedNeutral: {
@@ -349,7 +515,7 @@ Combine with shadow.overlay.`
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].hovered',
+            replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
         },
@@ -357,7 +523,7 @@ Combine with shadow.overlay.`
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].pressed',
+            replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
         },
@@ -365,7 +531,7 @@ Combine with shadow.overlay.`
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].[default]',
+            replacement: 'color.background.selected.[default].[default]',
             description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
           }
         }
@@ -592,14 +758,6 @@ Use for icon-only buttons, or icons paired with text.highEmphasis text
           replacement: 'color.text.warning.inverse',
           description: 'Use for text and icons when on bold warning backgrounds'
         }
-      },
-      selected: {
-        attributes: {
-          group: 'paint',
-          state: 'deprecated',
-          replacement: 'color.text.brand',
-          description: 'Use for text, icons, borders, or other visual indicators in selected states'
-        }
       }
     },
     border: {

package/dist/es2019/tokens/palette.js

@@ -481,6 +481,12 @@ const palette = {
           group: 'palette'
         }
       },
+      'DN-100': {
+        value: '#101214',
+        attributes: {
+          group: 'palette'
+        }
+      },
       'DN-100A': {
         // #030404 26%
         value: '#03040442',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.6.1",
+	"version": "0.7.0",
 	"sideEffects": false
 }

package/dist/esm/artifacts/rename-mapping.js

@@ -40,10 +40,6 @@ var renameMapper = [{
   "path": "color.text.onBoldWarning",
   "state": "deprecated",
   "replacement": "color.text.warning.inverse"
-}, {
-  "path": "color.text.selected",
-  "state": "deprecated",
-  "replacement": "color.text.brand"
 }, {
   "path": "color.border.focus",
   "state": "deprecated",
@@ -52,6 +48,90 @@ var renameMapper = [{
   "path": "color.border.neutral",
   "state": "deprecated",
   "replacement": "color.border.[default]"
+}, {
+  "path": "color.background.accent.blue.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.blue.subtler"
+}, {
+  "path": "color.background.accent.blue.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.blue.subtle"
+}, {
+  "path": "color.background.accent.red.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.red.subtler"
+}, {
+  "path": "color.background.accent.red.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.red.subtle"
+}, {
+  "path": "color.background.accent.orange.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.orange.subtler"
+}, {
+  "path": "color.background.accent.orange.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.orange.subtle"
+}, {
+  "path": "color.background.accent.yellow.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.yellow.subtler"
+}, {
+  "path": "color.background.accent.yellow.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.yellow.subtle"
+}, {
+  "path": "color.background.accent.green.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.green.subtler"
+}, {
+  "path": "color.background.accent.green.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.green.subtle"
+}, {
+  "path": "color.background.accent.teal.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.teal.subtler"
+}, {
+  "path": "color.background.accent.teal.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.teal.subtle"
+}, {
+  "path": "color.background.accent.purple.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.purple.subtler"
+}, {
+  "path": "color.background.accent.purple.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.purple.subtle"
+}, {
+  "path": "color.background.accent.magenta.[default]",
+  "state": "deprecated",
+  "replacement": "color.background.accent.magenta.subtler"
+}, {
+  "path": "color.background.accent.magenta.bold",
+  "state": "deprecated",
+  "replacement": "color.background.accent.magenta.subtle"
+}, {
+  "path": "color.background.brand.[default].[default]",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].[default]"
+}, {
+  "path": "color.background.brand.[default].hovered",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].hovered"
+}, {
+  "path": "color.background.brand.[default].pressed",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].pressed"
+}, {
+  "path": "color.background.selected.resting",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].[default]"
+}, {
+  "path": "color.background.selected.hover",
+  "state": "deprecated",
+  "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.blanket",
   "state": "deprecated",
@@ -140,18 +220,6 @@ var renameMapper = [{
   "path": "color.background.overlay",
   "state": "deprecated",
   "replacement": "elevation.surface.overlay"
-}, {
-  "path": "color.background.selected.resting",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].[default]"
-}, {
-  "path": "color.background.selected.hover",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].hovered"
-}, {
-  "path": "color.background.selected.pressed",
-  "state": "deprecated",
-  "replacement": "color.background.brand.[default].pressed"
 }, {
   "path": "color.background.subtleBorderedNeutral.pressed",
   "state": "deprecated",
@@ -163,15 +231,15 @@ var renameMapper = [{
 }, {
   "path": "color.background.subtleBrand.hover",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].hovered"
+  "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.subtleBrand.pressed",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].pressed"
+  "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.subtleBrand.resting",
   "state": "deprecated",
-  "replacement": "color.background.brand.[default].[default]"
+  "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.subtleDanger.hover",
   "state": "deprecated",
@@ -247,55 +315,55 @@ var renameMapper = [{
 }, {
   "path": "color.accent.boldBlue",
   "state": "deprecated",
-  "replacement": "color.background.accent.blue.bold"
+  "replacement": "color.background.accent.blue.bolder"
 }, {
   "path": "color.accent.boldGreen",
   "state": "deprecated",
-  "replacement": "color.background.accent.green.bold"
+  "replacement": "color.background.accent.green.bolder"
 }, {
   "path": "color.accent.boldOrange",
   "state": "deprecated",
-  "replacement": "color.background.accent.orange.bold"
+  "replacement": "color.background.accent.orange.bolder"
 }, {
   "path": "color.accent.boldPurple",
   "state": "deprecated",
-  "replacement": "color.background.accent.purple.bold"
+  "replacement": "color.background.accent.purple.bolder"
 }, {
   "path": "color.accent.boldRed",
   "state": "deprecated",
-  "replacement": "color.background.accent.red.bold"
+  "replacement": "color.background.accent.red.bolder"
 }, {
   "path": "color.accent.boldTeal",
   "state": "deprecated",
-  "replacement": "color.background.accent.teal.bold"
+  "replacement": "color.background.accent.teal.bolder"
 }, {
   "path": "color.accent.subtleBlue",
   "state": "deprecated",
-  "replacement": "color.background.accent.blue.[default]"
+  "replacement": "color.background.accent.blue.subtler"
 }, {
   "path": "color.accent.subtleGreen",
   "state": "deprecated",
-  "replacement": "color.background.accent.green.[default]"
+  "replacement": "color.background.accent.green.subtler"
 }, {
   "path": "color.accent.subtleMagenta",
   "state": "deprecated",
-  "replacement": "color.background.accent.magenta.[default]"
+  "replacement": "color.background.accent.magenta.subtler"
 }, {
   "path": "color.accent.subtleOrange",
   "state": "deprecated",
-  "replacement": "color.background.accent.orange.[default]"
+  "replacement": "color.background.accent.orange.subtler"
 }, {
   "path": "color.accent.subtlePurple",
   "state": "deprecated",
-  "replacement": "color.background.accent.purple.[default]"
+  "replacement": "color.background.accent.purple.subtler"
 }, {
   "path": "color.accent.subtleRed",
   "state": "deprecated",
-  "replacement": "color.background.accent.red.[default]"
+  "replacement": "color.background.accent.red.subtler"
 }, {
   "path": "color.accent.subtleTeal",
   "state": "deprecated",
-  "replacement": "color.background.accent.teal.[default]"
+  "replacement": "color.background.accent.teal.subtler"
 }, {
   "path": "color.iconBorder.brand",
   "state": "deprecated",