@atlaskit/tokens 0.10.4 → 0.10.7

package/dist/cjs/tokens/atlassian-light/color/accent.js

@@ -71,6 +71,14 @@ var color = {
           bolder: {
             value: 'M900'
           }
+        },
+        gray: {
+          '[default]': {
+            value: 'N800'
+          },
+          bolder: {
+            value: 'N1000'
+          }
         }
       }
     },
@@ -99,6 +107,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -127,6 +138,9 @@ var color = {
         },
         magenta: {
           value: 'M600'
+        },
+        gray: {
+          value: 'N600'
         }
       }
     },
@@ -243,6 +257,20 @@ var color = {
           bolder: {
             value: 'M700'
           }
+        },
+        gray: {
+          subtlest: {
+            value: 'N200'
+          },
+          subtler: {
+            value: 'N300'
+          },
+          subtle: {
+            value: 'N500'
+          },
+          bolder: {
+            value: 'N700'
+          }
         }
       }
     }

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

@@ -151,6 +151,24 @@ var color = {
               description: 'Use on bold magenta accent backgrounds.'
             }
           }
+        },
+        gray: {
+          '[default]': {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text on non-bold gray accent backgrounds, such as colored tags.'
+            }
+          },
+          bolder: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.10.5',
+              description: 'Use for text and icons on gray subtle accent backgrounds.'
+            }
+          }
         }
       }
     },
@@ -219,6 +237,14 @@ var color = {
             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.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for icons on non-bold gray accent backgrounds, such as file type icons.'
+          }
         }
       }
     },
@@ -287,6 +313,14 @@ var color = {
             introduced: '0.6.0',
             description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.'
           }
+        },
+        gray: {
+          attributes: {
+            group: 'paint',
+            state: 'active',
+            introduced: '0.10.5',
+            description: 'Use for borders on non-bold gray accent backgrounds.'
+          }
         }
       }
     },
@@ -306,7 +340,7 @@ var color = {
               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.'
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           subtle: {
@@ -314,7 +348,7 @@ var color = {
               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.'
+              description: 'Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           bolder: {
@@ -563,6 +597,40 @@ var color = {
               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.'
             }
           }
+        },
+        gray: {
+          subtlest: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color.'
+            }
+          },
+          subtler: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for gray backgrounds when there is no meaning tied to the color, such as colored tags.'
+            }
+          },
+          subtle: {
+            attributes: {
+              group: 'paint',
+              state: 'active',
+              introduced: '0.7.0',
+              description: 'Use for vibrant gray 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 for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements.'
+            }
+          }
         }
       }
     }

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

@@ -162,7 +162,7 @@ var color = {
               deprecated: '0.7.0',
               deleted: '0.8.0',
               replacement: 'color.background.accent.blue.subtler',
-              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags.'
+              description: 'Use for blue backgrounds when there is no meaning tied to the color, such as colored tags.'
             }
           },
           bold: {
@@ -362,9 +362,10 @@ var color = {
           '[default]': {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].[default]',
               description: 'Use for the background of elements used to reinforce our brand.'
             }
@@ -372,9 +373,10 @@ var color = {
           hovered: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].hovered',
               description: 'Hovered state for color.background.brand'
             }
@@ -382,9 +384,10 @@ var color = {
           pressed: {
             attributes: {
               group: 'paint',
-              state: 'deprecated',
+              state: 'deleted',
               introduced: '0.6.0',
               deprecated: '0.6.2',
+              deleted: '0.10.5',
               replacement: 'color.background.selected.[default].pressed',
               description: 'Pressed state for color.background.brand'
             }
@@ -627,9 +630,10 @@ var color = {
         '[default]': {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.8.3',
+            deleted: '0.10.5',
             replacement: 'color.background.inverse.subtle.[default]',
             description: 'Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards.'
           }
@@ -650,9 +654,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for backgrounds of elements in a selected state'
           }
@@ -660,9 +665,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.1.0',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for color.background.selected'
           }
@@ -696,9 +702,10 @@ var color = {
         hover: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].hovered',
             description: 'Hover state for background.subtleBrand'
           }
@@ -706,9 +713,10 @@ var color = {
         pressed: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].pressed',
             description: 'Pressed state for background.subtleBrand'
           }
@@ -716,9 +724,10 @@ var color = {
         resting: {
           attributes: {
             group: 'paint',
-            state: 'deprecated',
+            state: 'deleted',
             introduced: '0.0.15',
             deprecated: '0.6.0',
+            deleted: '0.10.5',
             replacement: 'color.background.selected.[default].[default]',
             description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
           }

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.4",
+	"version": "0.10.7",
 	"sideEffects": [
 		"**/*.css"
 	]

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

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::dd934162c3393bce214d694d47bbcf2a>>
+ * @codegen <<SignedSource::51fbaf5510a3fead6a2844d4df866a77>>
  * @codegenCommand yarn build tokens
  */
 const renameMapper = [{
@@ -117,27 +117,27 @@ const renameMapper = [{
   "replacement": "color.background.accent.magenta.subtle"
 }, {
   "path": "color.background.inverse.[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.inverse.subtle.[default]"
 }, {
   "path": "color.background.brand.[default].[default]",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.brand.[default].hovered",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.brand.[default].pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.selected.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.selected.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.blanket",
@@ -237,15 +237,15 @@ const renameMapper = [{
   "replacement": "color.background.input.[default]"
 }, {
   "path": "color.background.subtleBrand.hover",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].hovered"
 }, {
   "path": "color.background.subtleBrand.pressed",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].pressed"
 }, {
   "path": "color.background.subtleBrand.resting",
-  "state": "deprecated",
+  "state": "deleted",
   "replacement": "color.background.selected.[default].[default]"
 }, {
   "path": "color.background.subtleDanger.hover",

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

@@ -3,7 +3,7 @@
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
  * @codegenCommand yarn build tokens
  */
 const defaultTokenValues = {
@@ -23,6 +23,8 @@ const defaultTokenValues = {
   'color.text.accent.teal.bolder': '#1D474C',
   'color.text.accent.magenta': '#943D73',
   'color.text.accent.magenta.bolder': '#50253F',
+  'color.text.accent.gray': '#44546F',
+  'color.text.accent.gray.bolder': '#172B4D',
   'color.text': '#172B4D',
   'color.text.subtle': '#44546F',
   'color.text.subtlest': '#626F86',
@@ -51,6 +53,7 @@ const defaultTokenValues = {
   'color.icon.accent.purple': '#8270DB',
   'color.icon.accent.teal': '#1D9AAA',
   'color.icon.accent.magenta': '#CD519D',
+  'color.icon.accent.gray': '#758195',
   'color.icon': '#44546F',
   'color.icon.subtle': '#626F86',
   'color.icon.inverse': '#FFFFFF',
@@ -71,6 +74,7 @@ const defaultTokenValues = {
   'color.border.accent.purple': '#8270DB',
   'color.border.accent.teal': '#1D9AAA',
   'color.border.accent.magenta': '#CD519D',
+  'color.border.accent.gray': '#758195',
   'color.border': '#091E4224',
   'color.border.inverse': '#FFFFFF',
   'color.border.focused': '#388BFF',
@@ -133,6 +137,10 @@ const defaultTokenValues = {
   'color.background.accent.magenta.bolder': '#AE4787',
   'color.background.accent.magenta': '#FDD0EC',
   'color.background.accent.magenta.bold': '#E774BB',
+  'color.background.accent.gray.subtlest': '#F1F2F4',
+  'color.background.accent.gray.subtler': '#DCDFE4',
+  'color.background.accent.gray.subtle': '#8993A5',
+  'color.background.accent.gray.bolder': '#626F86',
   'color.background.disabled': '#091E420F',
   'color.background.inverse.subtle': '#00000029',
   'color.background.inverse.subtle.hovered': '#0000003D',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegen <<SignedSource::b251fc1793ba7f689b4c3707310c1556>>
  * @codegenCommand yarn build tokens
  */
 const tokens = {
@@ -20,6 +20,8 @@ const tokens = {
   '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.accent.gray': '--ds-text-accent-gray',
+  'color.text.accent.gray.bolder': '--ds-text-accent-gray-bolder',
   'color.text': '--ds-text',
   'color.text.subtle': '--ds-text-subtle',
   'color.text.subtlest': '--ds-text-subtlest',
@@ -48,6 +50,7 @@ const tokens = {
   'color.icon.accent.purple': '--ds-icon-accent-purple',
   'color.icon.accent.teal': '--ds-icon-accent-teal',
   'color.icon.accent.magenta': '--ds-icon-accent-magenta',
+  'color.icon.accent.gray': '--ds-icon-accent-gray',
   'color.icon': '--ds-icon',
   'color.icon.subtle': '--ds-icon-subtle',
   'color.icon.inverse': '--ds-icon-inverse',
@@ -68,6 +71,7 @@ const tokens = {
   'color.border.accent.purple': '--ds-border-accent-purple',
   'color.border.accent.teal': '--ds-border-accent-teal',
   'color.border.accent.magenta': '--ds-border-accent-magenta',
+  'color.border.accent.gray': '--ds-border-accent-gray',
   'color.border': '--ds-border',
   'color.border.inverse': '--ds-border-inverse',
   'color.border.focused': '--ds-border-focused',
@@ -130,6 +134,10 @@ const tokens = {
   '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.accent.gray.subtlest': '--ds-background-accent-gray-subtlest',
+  'color.background.accent.gray.subtler': '--ds-background-accent-gray-subtler',
+  'color.background.accent.gray.subtle': '--ds-background-accent-gray-subtle',
+  'color.background.accent.gray.bolder': '--ds-background-accent-gray-bolder',
   'color.background.disabled': '--ds-background-disabled',
   'color.background.inverse.subtle': '--ds-background-inverse-subtle',
   'color.background.inverse.subtle.hovered': '--ds-background-inverse-subtle-hovered',