@atlaskit/tokens 0.6.3 → 0.7.0

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

@@ -11,7 +11,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.'
         }
       },
@@ -19,7 +19,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.'
         }
       },
@@ -27,7 +27,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.'
         }
       },
@@ -35,7 +35,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.'
         }
       },
@@ -43,7 +43,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.'
         }
       },
@@ -51,7 +51,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.'
         }
       },
@@ -59,7 +59,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.'
         }
       },
@@ -67,7 +67,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.'
         }
       },
@@ -75,7 +75,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.'
         }
       },
@@ -83,7 +83,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.'
         }
       },
@@ -91,7 +91,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.'
         }
       },
@@ -99,7 +99,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.'
         }
       },
@@ -107,12 +107,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',

package/dist/cjs/version.json

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

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

@@ -48,6 +48,70 @@ const 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",
@@ -251,55 +315,55 @@ const 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",

package/dist/es2019/artifacts/token-default-values.js

@@ -6,13 +6,21 @@
  */
 const defaultTokenValues = {
   'color.text.accent.blue': '#0055CC',
+  'color.text.accent.blue.bolder': '#09326C',
   'color.text.accent.red': '#AE2A19',
+  'color.text.accent.red.bolder': '#601E16',
   'color.text.accent.orange': '#974F0C',
+  'color.text.accent.orange.bolder': '#5F3811',
   'color.text.accent.yellow': '#7F5F01',
+  'color.text.accent.yellow.bolder': '#533F04',
   'color.text.accent.green': '#216E4E',
+  'color.text.accent.green.bolder': '#164B35',
   'color.text.accent.purple': '#5E4DB2',
+  'color.text.accent.purple.bolder': '#352C63',
   'color.text.accent.teal': '#206B74',
+  'color.text.accent.teal.bolder': '#1D474C',
   'color.text.accent.magenta': '#943D73',
+  'color.text.accent.magenta.bolder': '#50253F',
   'color.text': '#172B4D',
   'color.text.subtle': '#44546F',
   'color.text.subtlest': '#626F86',
@@ -74,20 +82,52 @@ const defaultTokenValues = {
   'color.border.information': '#1D7AFC',
   'color.border.focus': '#388BFF',
   'color.border.neutral': '#091E4224',
+  'color.background.accent.blue.subtlest': '#E9F2FF',
+  'color.background.accent.blue.subtler': '#CCE0FF',
+  'color.background.accent.blue.subtle': '#579DFF',
+  'color.background.accent.blue.bolder': '#0C66E4',
   'color.background.accent.blue': '#CCE0FF',
   'color.background.accent.blue.bold': '#579DFF',
+  'color.background.accent.red.subtlest': '#FFEDEB',
+  'color.background.accent.red.subtler': '#FFD2CC',
+  'color.background.accent.red.subtle': '#F87462',
+  'color.background.accent.red.bolder': '#CA3521',
   'color.background.accent.red': '#FFD2CC',
   'color.background.accent.red.bold': '#F87462',
+  'color.background.accent.orange.subtlest': '#FFF4E5',
+  'color.background.accent.orange.subtler': '#FFE2BD',
+  'color.background.accent.orange.subtle': '#FAA53D',
+  'color.background.accent.orange.bolder': '#B65C02',
   'color.background.accent.orange': '#FFE2BD',
   'color.background.accent.orange.bold': '#FAA53D',
+  'color.background.accent.yellow.subtlest': '#FFF7D6',
+  'color.background.accent.yellow.subtler': '#F8E6A0',
+  'color.background.accent.yellow.subtle': '#E2B203',
+  'color.background.accent.yellow.bolder': '#946F00',
   'color.background.accent.yellow': '#F8E6A0',
   'color.background.accent.yellow.bold': '#E2B203',
+  'color.background.accent.green.subtlest': '#DFFCF0',
+  'color.background.accent.green.subtler': '#BAF3DB',
+  'color.background.accent.green.subtle': '#4BCE97',
+  'color.background.accent.green.bolder': '#1F845A',
   'color.background.accent.green': '#BAF3DB',
   'color.background.accent.green.bold': '#4BCE97',
+  'color.background.accent.teal.subtlest': '#E3FAFC',
+  'color.background.accent.teal.subtler': '#C1F0F5',
+  'color.background.accent.teal.subtle': '#60C6D2',
+  'color.background.accent.teal.bolder': '#1D7F8C',
   'color.background.accent.teal': '#C1F0F5',
   'color.background.accent.teal.bold': '#60C6D2',
+  'color.background.accent.purple.subtlest': '#F3F0FF',
+  'color.background.accent.purple.subtler': '#DFD8FD',
+  'color.background.accent.purple.subtle': '#9F8FEF',
+  'color.background.accent.purple.bolder': '#6E5DC6',
   'color.background.accent.purple': '#DFD8FD',
   'color.background.accent.purple.bold': '#9F8FEF',
+  'color.background.accent.magenta.subtlest': '#FFECF8',
+  'color.background.accent.magenta.subtler': '#FDD0EC',
+  'color.background.accent.magenta.subtle': '#E774BB',
+  'color.background.accent.magenta.bolder': '#AE4787',
   'color.background.accent.magenta': '#FDD0EC',
   'color.background.accent.magenta.bold': '#E774BB',
   'color.background.disabled': '#091E420F',

package/dist/es2019/artifacts/token-names.js

@@ -2,13 +2,21 @@
 // Re-generate by running `yarn build tokens`.
 const tokens = {
   'color.text.accent.blue': '--ds-text-accent-blue',
+  'color.text.accent.blue.bolder': '--ds-text-accent-blue-bolder',
   'color.text.accent.red': '--ds-text-accent-red',
+  'color.text.accent.red.bolder': '--ds-text-accent-red-bolder',
   'color.text.accent.orange': '--ds-text-accent-orange',
+  'color.text.accent.orange.bolder': '--ds-text-accent-orange-bolder',
   'color.text.accent.yellow': '--ds-text-accent-yellow',
+  'color.text.accent.yellow.bolder': '--ds-text-accent-yellow-bolder',
   'color.text.accent.green': '--ds-text-accent-green',
+  'color.text.accent.green.bolder': '--ds-text-accent-green-bolder',
   'color.text.accent.purple': '--ds-text-accent-purple',
+  'color.text.accent.purple.bolder': '--ds-text-accent-purple-bolder',
   'color.text.accent.teal': '--ds-text-accent-teal',
+  'color.text.accent.teal.bolder': '--ds-text-accent-teal-bolder',
   'color.text.accent.magenta': '--ds-text-accent-magenta',
+  'color.text.accent.magenta.bolder': '--ds-text-accent-magenta-bolder',
   'color.text': '--ds-text',
   'color.text.subtle': '--ds-text-subtle',
   'color.text.subtlest': '--ds-text-subtlest',
@@ -70,20 +78,52 @@ const tokens = {
   'color.border.information': '--ds-border-information',
   'color.border.focus': '--ds-border-focus',
   'color.border.neutral': '--ds-border-neutral',
+  'color.background.accent.blue.subtlest': '--ds-background-accent-blue-subtlest',
+  'color.background.accent.blue.subtler': '--ds-background-accent-blue-subtler',
+  'color.background.accent.blue.subtle': '--ds-background-accent-blue-subtle',
+  'color.background.accent.blue.bolder': '--ds-background-accent-blue-bolder',
   'color.background.accent.blue': '--ds-background-accent-blue',
   'color.background.accent.blue.bold': '--ds-background-accent-blue-bold',
+  'color.background.accent.red.subtlest': '--ds-background-accent-red-subtlest',
+  'color.background.accent.red.subtler': '--ds-background-accent-red-subtler',
+  'color.background.accent.red.subtle': '--ds-background-accent-red-subtle',
+  'color.background.accent.red.bolder': '--ds-background-accent-red-bolder',
   'color.background.accent.red': '--ds-background-accent-red',
   'color.background.accent.red.bold': '--ds-background-accent-red-bold',
+  'color.background.accent.orange.subtlest': '--ds-background-accent-orange-subtlest',
+  'color.background.accent.orange.subtler': '--ds-background-accent-orange-subtler',
+  'color.background.accent.orange.subtle': '--ds-background-accent-orange-subtle',
+  'color.background.accent.orange.bolder': '--ds-background-accent-orange-bolder',
   'color.background.accent.orange': '--ds-background-accent-orange',
   'color.background.accent.orange.bold': '--ds-background-accent-orange-bold',
+  'color.background.accent.yellow.subtlest': '--ds-background-accent-yellow-subtlest',
+  'color.background.accent.yellow.subtler': '--ds-background-accent-yellow-subtler',
+  'color.background.accent.yellow.subtle': '--ds-background-accent-yellow-subtle',
+  'color.background.accent.yellow.bolder': '--ds-background-accent-yellow-bolder',
   'color.background.accent.yellow': '--ds-background-accent-yellow',
   'color.background.accent.yellow.bold': '--ds-background-accent-yellow-bold',
+  'color.background.accent.green.subtlest': '--ds-background-accent-green-subtlest',
+  'color.background.accent.green.subtler': '--ds-background-accent-green-subtler',
+  'color.background.accent.green.subtle': '--ds-background-accent-green-subtle',
+  'color.background.accent.green.bolder': '--ds-background-accent-green-bolder',
   'color.background.accent.green': '--ds-background-accent-green',
   'color.background.accent.green.bold': '--ds-background-accent-green-bold',
+  'color.background.accent.teal.subtlest': '--ds-background-accent-teal-subtlest',
+  'color.background.accent.teal.subtler': '--ds-background-accent-teal-subtler',
+  'color.background.accent.teal.subtle': '--ds-background-accent-teal-subtle',
+  'color.background.accent.teal.bolder': '--ds-background-accent-teal-bolder',
   'color.background.accent.teal': '--ds-background-accent-teal',
   'color.background.accent.teal.bold': '--ds-background-accent-teal-bold',
+  'color.background.accent.purple.subtlest': '--ds-background-accent-purple-subtlest',
+  'color.background.accent.purple.subtler': '--ds-background-accent-purple-subtler',
+  'color.background.accent.purple.subtle': '--ds-background-accent-purple-subtle',
+  'color.background.accent.purple.bolder': '--ds-background-accent-purple-bolder',
   'color.background.accent.purple': '--ds-background-accent-purple',
   'color.background.accent.purple.bold': '--ds-background-accent-purple-bold',
+  'color.background.accent.magenta.subtlest': '--ds-background-accent-magenta-subtlest',
+  'color.background.accent.magenta.subtler': '--ds-background-accent-magenta-subtler',
+  'color.background.accent.magenta.subtle': '--ds-background-accent-magenta-subtle',
+  'color.background.accent.magenta.bolder': '--ds-background-accent-magenta-bolder',
   'color.background.accent.magenta': '--ds-background-accent-magenta',
   'color.background.accent.magenta.bold': '--ds-background-accent-magenta-bold',
   'color.background.disabled': '--ds-background-disabled',