@atlaskit/tokens 0.6.1 → 0.7.0

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

@@ -5,7 +5,7 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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 @@ var 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: {
@@ -300,7 +474,7 @@ var color = {
           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'
           }
         },
@@ -308,17 +482,9 @@ var color = {
           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: {
@@ -344,7 +510,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].hovered',
+            replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
         },
@@ -352,7 +518,7 @@ var color = {
           attributes: {
             group: 'paint',
             state: 'deprecated',
-            replacement: 'color.background.brand.[default].pressed',
+            replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
         },
@@ -360,7 +526,7 @@ var color = {
           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.'
           }
         }
@@ -580,14 +746,6 @@ var color = {
           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/esm/tokens/palette.js

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

package/dist/esm/version.json

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

package/dist/types/artifacts/token-default-values.d.ts

@@ -3,19 +3,28 @@
  */
 declare const defaultTokenValues: {
     readonly 'color.text.accent.blue': "#0055CC";
+    readonly 'color.text.accent.blue.bolder': "#09326C";
     readonly 'color.text.accent.red': "#AE2A19";
+    readonly 'color.text.accent.red.bolder': "#601E16";
     readonly 'color.text.accent.orange': "#974F0C";
+    readonly 'color.text.accent.orange.bolder': "#5F3811";
     readonly 'color.text.accent.yellow': "#7F5F01";
+    readonly 'color.text.accent.yellow.bolder': "#533F04";
     readonly 'color.text.accent.green': "#216E4E";
+    readonly 'color.text.accent.green.bolder': "#164B35";
     readonly 'color.text.accent.purple': "#5E4DB2";
+    readonly 'color.text.accent.purple.bolder': "#352C63";
     readonly 'color.text.accent.teal': "#206B74";
+    readonly 'color.text.accent.teal.bolder': "#1D474C";
     readonly 'color.text.accent.magenta': "#943D73";
+    readonly 'color.text.accent.magenta.bolder': "#50253F";
     readonly 'color.text': "#172B4D";
     readonly 'color.text.subtle': "#44546F";
     readonly 'color.text.subtlest': "#626F86";
     readonly 'color.text.disabled': "#8993A5";
     readonly 'color.text.inverse': "#FFFFFF";
     readonly 'color.text.brand': "#0C66E4";
+    readonly 'color.text.selected': "#0C66E4";
     readonly 'color.text.danger': "#AE2A19";
     readonly 'color.text.warning': "#974F0C";
     readonly 'color.text.warning.inverse': "#172B4D";
@@ -29,7 +38,6 @@ declare const defaultTokenValues: {
     readonly 'color.text.mediumEmphasis': "#44546F";
     readonly 'color.text.onBold': "#FFFFFF";
     readonly 'color.text.onBoldWarning': "#172B4D";
-    readonly 'color.text.selected': "#0C66E4";
     readonly 'color.icon.accent.blue': "#1D7AFC";
     readonly 'color.icon.accent.red': "#E34935";
     readonly 'color.icon.accent.orange': "#D97008";
@@ -43,6 +51,7 @@ declare const defaultTokenValues: {
     readonly 'color.icon.inverse': "#FFFFFF";
     readonly 'color.icon.disabled': "#8993A5";
     readonly 'color.icon.brand': "#0C66E4";
+    readonly 'color.icon.selected': "#0C66E4";
     readonly 'color.icon.danger': "#E34935";
     readonly 'color.icon.warning': "#D97008";
     readonly 'color.icon.warning.inverse': "#172B4D";
@@ -62,6 +71,7 @@ declare const defaultTokenValues: {
     readonly 'color.border.input': "#091E4224";
     readonly 'color.border.disabled': "#091E420F";
     readonly 'color.border.brand': "#0C66E4";
+    readonly 'color.border.selected': "#0C66E4";
     readonly 'color.border.danger': "#E34935";
     readonly 'color.border.warning': "#D97008";
     readonly 'color.border.success': "#22A06B";
@@ -69,20 +79,52 @@ declare const defaultTokenValues: {
     readonly 'color.border.information': "#1D7AFC";
     readonly 'color.border.focus': "#388BFF";
     readonly 'color.border.neutral': "#091E4224";
+    readonly 'color.background.accent.blue.subtlest': "#E9F2FF";
+    readonly 'color.background.accent.blue.subtler': "#CCE0FF";
+    readonly 'color.background.accent.blue.subtle': "#579DFF";
+    readonly 'color.background.accent.blue.bolder': "#0C66E4";
     readonly 'color.background.accent.blue': "#CCE0FF";
     readonly 'color.background.accent.blue.bold': "#579DFF";
+    readonly 'color.background.accent.red.subtlest': "#FFEDEB";
+    readonly 'color.background.accent.red.subtler': "#FFD2CC";
+    readonly 'color.background.accent.red.subtle': "#F87462";
+    readonly 'color.background.accent.red.bolder': "#CA3521";
     readonly 'color.background.accent.red': "#FFD2CC";
     readonly 'color.background.accent.red.bold': "#F87462";
+    readonly 'color.background.accent.orange.subtlest': "#FFF4E5";
+    readonly 'color.background.accent.orange.subtler': "#FFE2BD";
+    readonly 'color.background.accent.orange.subtle': "#FAA53D";
+    readonly 'color.background.accent.orange.bolder': "#B65C02";
     readonly 'color.background.accent.orange': "#FFE2BD";
     readonly 'color.background.accent.orange.bold': "#FAA53D";
+    readonly 'color.background.accent.yellow.subtlest': "#FFF7D6";
+    readonly 'color.background.accent.yellow.subtler': "#F8E6A0";
+    readonly 'color.background.accent.yellow.subtle': "#E2B203";
+    readonly 'color.background.accent.yellow.bolder': "#946F00";
     readonly 'color.background.accent.yellow': "#F8E6A0";
     readonly 'color.background.accent.yellow.bold': "#E2B203";
+    readonly 'color.background.accent.green.subtlest': "#DFFCF0";
+    readonly 'color.background.accent.green.subtler': "#BAF3DB";
+    readonly 'color.background.accent.green.subtle': "#4BCE97";
+    readonly 'color.background.accent.green.bolder': "#1F845A";
     readonly 'color.background.accent.green': "#BAF3DB";
     readonly 'color.background.accent.green.bold': "#4BCE97";
+    readonly 'color.background.accent.teal.subtlest': "#E3FAFC";
+    readonly 'color.background.accent.teal.subtler': "#C1F0F5";
+    readonly 'color.background.accent.teal.subtle': "#60C6D2";
+    readonly 'color.background.accent.teal.bolder': "#1D7F8C";
     readonly 'color.background.accent.teal': "#C1F0F5";
     readonly 'color.background.accent.teal.bold': "#60C6D2";
+    readonly 'color.background.accent.purple.subtlest': "#F3F0FF";
+    readonly 'color.background.accent.purple.subtler': "#DFD8FD";
+    readonly 'color.background.accent.purple.subtle': "#9F8FEF";
+    readonly 'color.background.accent.purple.bolder': "#6E5DC6";
     readonly 'color.background.accent.purple': "#DFD8FD";
     readonly 'color.background.accent.purple.bold': "#9F8FEF";
+    readonly 'color.background.accent.magenta.subtlest': "#FFECF8";
+    readonly 'color.background.accent.magenta.subtler': "#FDD0EC";
+    readonly 'color.background.accent.magenta.subtle': "#E774BB";
+    readonly 'color.background.accent.magenta.bolder': "#AE4787";
     readonly 'color.background.accent.magenta': "#FDD0EC";
     readonly 'color.background.accent.magenta.bold': "#E774BB";
     readonly 'color.background.disabled': "#091E420F";
@@ -99,12 +141,20 @@ declare const defaultTokenValues: {
     readonly 'color.background.neutral.bold': "#44546F";
     readonly 'color.background.neutral.bold.hovered': "#2C3E5D";
     readonly 'color.background.neutral.bold.pressed': "#172B4D";
-    readonly 'color.background.brand': "#E9F2FF";
-    readonly 'color.background.brand.hovered': "#CCE0FF";
-    readonly 'color.background.brand.pressed': "#85B8FF";
     readonly 'color.background.brand.bold': "#0C66E4";
     readonly 'color.background.brand.bold.hovered': "#0055CC";
     readonly 'color.background.brand.bold.pressed': "#09326C";
+    readonly 'color.background.brand': "#E9F2FF";
+    readonly 'color.background.brand.hovered': "#CCE0FF";
+    readonly 'color.background.brand.pressed': "#85B8FF";
+    readonly 'color.background.selected': "#E9F2FF";
+    readonly 'color.background.selected.hovered': "#CCE0FF";
+    readonly 'color.background.selected.pressed': "#85B8FF";
+    readonly 'color.background.selected.bold': "#0C66E4";
+    readonly 'color.background.selected.bold.hovered': "#0055CC";
+    readonly 'color.background.selected.bold.pressed': "#09326C";
+    readonly 'color.background.selected.resting': "#E9F2FF";
+    readonly 'color.background.selected.hover': "#CCE0FF";
     readonly 'color.background.danger': "#FFEDEB";
     readonly 'color.background.danger.hovered': "#FFD2CC";
     readonly 'color.background.danger.pressed': "#FF9C8F";
@@ -157,9 +207,6 @@ declare const defaultTokenValues: {
     readonly 'color.background.card': "#FFFFFF";
     readonly 'color.background.default': "#FFFFFF";
     readonly 'color.background.overlay': "#FFFFFF";
-    readonly 'color.background.selected.resting': "#E9F2FF";
-    readonly 'color.background.selected.hover': "#CCE0FF";
-    readonly 'color.background.selected.pressed': "#85B8FF";
     readonly 'color.background.subtleBorderedNeutral.pressed': "#091E420F";
     readonly 'color.background.subtleBorderedNeutral.resting': "#091E4208";
     readonly 'color.background.subtleBrand.hover': "#CCE0FF";