@atlaskit/tokens 0.10.4 → 0.10.7

package/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  overrides: [
+    {
+      // Lint documentation to ensure usage examples are up-to-date
+      files: ['./examples/**', './docs/**'],
+      rules: {
+        '@atlaskit/design-system/no-deprecated-design-token-usage': ['warn'],
+        '@atlaskit/design-system/ensure-design-token-usage': [
+          'error',
+          { shouldEnforceFallbacks: true },
+        ],
+      },
+    },
+    {
+      // Constellation examples, and docs, include fallbacks for now
+      files: ['./examples/constellation/**', './docs/**'],
+      rules: {
+        '@atlaskit/design-system/no-unsafe-design-token-usage': [
+          'error',
+          { shouldEnforceFallbacks: true },
+        ],
+      },
+    },
+    {
+      // Atlaskit examples don't all have fallbacks
+      files: ['./examples/**.tsx'],
+      rules: {
+        '@atlaskit/design-system/no-unsafe-design-token-usage': [
+          'error',
+          { shouldEnforceFallbacks: false },
+        ],
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @atlaskit/tokens
 
+## 0.10.7
+
+### Patch Changes
+
+- [`cb8723a7974`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb8723a7974) - Introduces a new set of neutral accent tokens:
+
+  - `color.background.accent.gray.bolder`
+  - `color.background.accent.gray.subtle`
+  - `color.background.accent.gray.subtler`
+  - `color.background.accent.gray.subtlest`
+  - `color.border.accent.gray`
+  - `color.icon.accent.gray`
+  - `color.text.accent.gray`
+  - `color.text.accent.gray.bolder`
+
+## 0.10.6
+
+### Patch Changes
+
+- [`04fc3d5c658`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04fc3d5c658) - Run token transform earlier by hooking into Program visitor
+
+## 0.10.5
+
+### Patch Changes
+
+- [`1124fa435ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1124fa435ed) - Moves the following `deprecated` tokens to the `sunset` phase. Please ensure that all `sunset` tokens are removed from your application, they will be completely removed in the next major version:
+
+  - `color.background.brand.hovered` => `color.background.selected.hovered`
+  - `color.background.brand.pressed` => `color.background.selected.pressed`
+  - `color.background.brand` => `color.background.selected`
+  - `color.background.inverse` => `color.background.inverse.subtle`
+  - `color.background.selected.hover` => `color.background.selected.hovered`
+  - `color.background.selected.resting` => `color.background.selected`
+  - `color.background.subtleBrand.hover` => `color.background.selected.hovered`
+  - `color.background.subtleBrand.pressed` => `color.background.selected.pressed`
+  - `color.background.subtleBrand.resting` => `color.background.selected`
+
+  If you have configured the design token eslint rules, running `eslint --fix` will resolve these changes automatically.
+
 ## 0.10.4
 
 ### Patch Changes

package/README.md

@@ -67,6 +67,6 @@ Add the plugin to your babel configuration:
 ### Options
 
 Currently the plugin supports one option, `shouldUseAutoFallback`. When enabled, the plugin will fetch the token's value in the default
-Atlassian theme (currently `atlassian-light`) and use it as the fallback value. 
+Atlassian theme (currently `atlassian-light`) and use it as the fallback value.
 
 This is useful for cases where tokens are in use, but token definitions aren't present in the top-level page CSS.

package/css/atlassian-dark.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::72839d415565553fa9a4a239d93dc7e1>>
+ * @codegen <<SignedSource::72c4c7f8d16e9e200a1e7d4b601e83f8>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="dark"] {
@@ -20,6 +20,8 @@ html[data-theme="dark"] {
   --ds-text-accent-teal-bolder: #C1F0F5;
   --ds-text-accent-magenta: #F797D2;
   --ds-text-accent-magenta-bolder: #FDD0EC;
+  --ds-text-accent-gray: #9FADBC;
+  --ds-text-accent-gray-bolder: #C7D1DB;
   --ds-text: #C7D1DB;
   --ds-text-subtle: #9FADBC;
   --ds-text-subtlest: #8696A7;
@@ -48,6 +50,7 @@ html[data-theme="dark"] {
   --ds-icon-accent-purple: #8F7EE7;
   --ds-icon-accent-teal: #37B4C3;
   --ds-icon-accent-magenta: #DA62AC;
+  --ds-icon-accent-gray: #738496;
   --ds-icon: #9FADBC;
   --ds-icon-subtle: #8696A7;
   --ds-icon-inverse: #161A1D;
@@ -68,6 +71,7 @@ html[data-theme="dark"] {
   --ds-border-accent-purple: #8F7EE7;
   --ds-border-accent-teal: #37B4C3;
   --ds-border-accent-magenta: #DA62AC;
+  --ds-border-accent-gray: #738496;
   --ds-border: #A6C5E229;
   --ds-border-inverse: #161A1D;
   --ds-border-focused: #85B8FF;
@@ -130,6 +134,10 @@ html[data-theme="dark"] {
   --ds-background-accent-magenta-bolder: #E774BB;
   --ds-background-accent-magenta: #50253F;
   --ds-background-accent-magenta-bold: #AE4787;
+  --ds-background-accent-gray-subtlest: #2C333A;
+  --ds-background-accent-gray-subtler: #454F59;
+  --ds-background-accent-gray-subtle: #5C6C7A;
+  --ds-background-accent-gray-bolder: #8696A7;
   --ds-background-disabled: #A1BDD914;
   --ds-background-inverse-subtle: #FFFFFF29;
   --ds-background-inverse-subtle-hovered: #FFFFFF3D;

package/css/atlassian-light.css

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2e7937ac84595597ac1147c208f1d259>>
+ * @codegen <<SignedSource::36363c01cdfd5db57a96f4475f9a6a82>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="light"] {
@@ -20,6 +20,8 @@ html[data-theme="light"] {
   --ds-text-accent-teal-bolder: #1D474C;
   --ds-text-accent-magenta: #943D73;
   --ds-text-accent-magenta-bolder: #50253F;
+  --ds-text-accent-gray: #44546F;
+  --ds-text-accent-gray-bolder: #172B4D;
   --ds-text: #172B4D;
   --ds-text-subtle: #44546F;
   --ds-text-subtlest: #626F86;
@@ -48,6 +50,7 @@ html[data-theme="light"] {
   --ds-icon-accent-purple: #8270DB;
   --ds-icon-accent-teal: #1D9AAA;
   --ds-icon-accent-magenta: #CD519D;
+  --ds-icon-accent-gray: #758195;
   --ds-icon: #44546F;
   --ds-icon-subtle: #626F86;
   --ds-icon-inverse: #FFFFFF;
@@ -68,6 +71,7 @@ html[data-theme="light"] {
   --ds-border-accent-purple: #8270DB;
   --ds-border-accent-teal: #1D9AAA;
   --ds-border-accent-magenta: #CD519D;
+  --ds-border-accent-gray: #758195;
   --ds-border: #091E4224;
   --ds-border-inverse: #FFFFFF;
   --ds-border-focused: #388BFF;
@@ -130,6 +134,10 @@ html[data-theme="light"] {
   --ds-background-accent-magenta-bolder: #AE4787;
   --ds-background-accent-magenta: #FDD0EC;
   --ds-background-accent-magenta-bold: #E774BB;
+  --ds-background-accent-gray-subtlest: #F1F2F4;
+  --ds-background-accent-gray-subtler: #DCDFE4;
+  --ds-background-accent-gray-subtle: #8993A5;
+  --ds-background-accent-gray-bolder: #626F86;
   --ds-background-disabled: #091E420F;
   --ds-background-inverse-subtle: #00000029;
   --ds-background-inverse-subtle-hovered: #0000003D;

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

@@ -19,7 +19,7 @@ exports.default = void 0;
  * 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
  */
 var renameMapper = [{
@@ -124,27 +124,27 @@ var 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",
@@ -244,15 +244,15 @@ var 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/cjs/artifacts/token-default-values.js

@@ -10,7 +10,7 @@ exports.default = void 0;
  *
  * Token names mapped to their value in the default Atlassian theme ('light')
  *
- * @codegen <<SignedSource::3dd78c77e87d6557a4bade2368be7eb8>>
+ * @codegen <<SignedSource::a819b31f00d394be417445acd67bd024>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -30,6 +30,8 @@ var 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',
@@ -58,6 +60,7 @@ var 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',
@@ -78,6 +81,7 @@ var 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',
@@ -140,6 +144,10 @@ var 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/cjs/artifacts/token-names.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab44c57c547c6cb7bb389b286bdd50f>>
+ * @codegen <<SignedSource::b251fc1793ba7f689b4c3707310c1556>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -27,6 +27,8 @@ var 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',
@@ -55,6 +57,7 @@ var 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',
@@ -75,6 +78,7 @@ var 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',
@@ -137,6 +141,10 @@ var 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',