@atlaskit/tokens 0.10.8 → 0.10.11

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/tokens
 
+## 0.10.11
+
+### Patch Changes
+
+- [`d9d18df130f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d18df130f) - [ux] Tweaked the values of the DN500 and DN500A base tokens to improve color contrast when paired with text:
+
+  - DN500 has changed from `#5C6C7A` to `#596773`
+  - DN500A has changed from `#A9C5DF7A` to `#9BB4CA80`
+
+  This changes the values in dark mode for the following tokens:
+
+  _(active)_:
+
+  - `color.text.disabled`
+  - `color.icon.disabled`
+  - `color.background.accent.gray.subtle`
+
+  _(deprecated)_:
+
+  - `color.overlay.pressed`
+
+## 0.10.10
+
+### Patch Changes
+
+- [`dc05530d2a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc05530d2a0) - Internal refactor to the way the documentation is built.
+
+## 0.10.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.10.8
 
 ### Patch Changes

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::06644f07e43bf7d1a70b1768c2f0d7ea>>
+ * @codegen <<SignedSource::85d62de0416ec3b21500de8c73032a0b>>
  * @codegenCommand yarn build tokens
  */
 html[data-theme="dark"] {
@@ -25,7 +25,7 @@ html[data-theme="dark"] {
   --ds-text: #C7D1DB;
   --ds-text-subtle: #9FADBC;
   --ds-text-subtlest: #8696A7;
-  --ds-text-disabled: #5C6C7A;
+  --ds-text-disabled: #596773;
   --ds-text-inverse: #161A1D;
   --ds-text-brand: #579DFF;
   --ds-text-selected: #579DFF;
@@ -54,7 +54,7 @@ html[data-theme="dark"] {
   --ds-icon: #9FADBC;
   --ds-icon-subtle: #8696A7;
   --ds-icon-inverse: #161A1D;
-  --ds-icon-disabled: #5C6C7A;
+  --ds-icon-disabled: #596773;
   --ds-icon-brand: #579DFF;
   --ds-icon-selected: #579DFF;
   --ds-icon-danger: #EF5C48;
@@ -137,7 +137,7 @@ html[data-theme="dark"] {
   --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-subtle: #596773;
   --ds-background-accent-gray-bolder: #8696A7;
   --ds-background-disabled: #A1BDD914;
   --ds-background-inverse-subtle: #FFFFFF29;
@@ -275,7 +275,7 @@ html[data-theme="dark"] {
   --ds-iconBorder-success: #2ABB7F;
   --ds-iconBorder-warning: #CF9F02;
   --ds-overlay-hover: #BFDBF847;
-  --ds-overlay-pressed: #A9C5DF7A;
+  --ds-overlay-pressed: #9BB4CA80;
   --ds-card: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
   --ds-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
   --ds-shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040480;

package/dist/cjs/artifacts/palettes-raw.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::d96054f56fadd3c595206b9334ccc5e6>>
+ * @codegen <<SignedSource::4d0639c90d18380e142efed6da97a9b0>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -1558,7 +1558,7 @@ var tokens = [{
   "name": "color.palette.DN400A",
   "path": ["color", "palette", "DN400A"]
 }, {
-  "value": "#5C6C7A",
+  "value": "#596773",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1566,7 +1566,7 @@ var tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#5C6C7A",
+    "value": "#596773",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"
@@ -1575,7 +1575,7 @@ var tokens = [{
   "name": "color.palette.DN500",
   "path": ["color", "palette", "DN500"]
 }, {
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1583,7 +1583,7 @@ var tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#A9C5DF7A",
+    "value": "#9BB4CA80",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"

package/dist/cjs/artifacts/tokens-raw/atlassian-dark.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::f6554dd5fa7c18bf2250697f2e567297>>
+ * @codegen <<SignedSource::98101caf910ff8cddc38a424e29e4980>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -458,7 +458,7 @@ var tokens = [{
     "introduced": "0.0.15",
     "description": "Use for text in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/text.tsx",
   "isSource": true,
   "original": {
@@ -1109,7 +1109,7 @@ var tokens = [{
     "introduced": "0.6.0",
     "description": "Use for icons in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/icon.tsx",
   "isSource": true,
   "original": {
@@ -2960,7 +2960,7 @@ var tokens = [{
     "introduced": "0.7.0",
     "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
   "isSource": true,
   "original": {
@@ -6281,7 +6281,7 @@ var tokens = [{
     "replacement": "color.interaction.pressed",
     "description": "Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars."
   },
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "filePath": "src/tokens/atlassian-dark/deprecated/deprecated.tsx",
   "isSource": true,
   "original": {

package/dist/cjs/get-token.js

@@ -14,7 +14,7 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 
 var name = "@atlaskit/tokens";
-var version = "0.10.8";
+var version = "0.10.11";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/tokens/palette.js

@@ -650,15 +650,15 @@ var palette = {
         }
       },
       DN500: {
-        value: '#5C6C7A',
+        value: '#596773',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN500A: {
-        // #A9C5DF 48%
-        value: '#A9C5DF7A',
+        // #9BB4CA @50%
+        value: '#9BB4CA80',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'

package/dist/cjs/version.json

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

package/dist/es2019/artifacts/palettes-raw.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d96054f56fadd3c595206b9334ccc5e6>>
+ * @codegen <<SignedSource::4d0639c90d18380e142efed6da97a9b0>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -1551,7 +1551,7 @@ const tokens = [{
   "name": "color.palette.DN400A",
   "path": ["color", "palette", "DN400A"]
 }, {
-  "value": "#5C6C7A",
+  "value": "#596773",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1559,7 +1559,7 @@ const tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#5C6C7A",
+    "value": "#596773",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"
@@ -1568,7 +1568,7 @@ const tokens = [{
   "name": "color.palette.DN500",
   "path": ["color", "palette", "DN500"]
 }, {
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1576,7 +1576,7 @@ const tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#A9C5DF7A",
+    "value": "#9BB4CA80",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"

package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f6554dd5fa7c18bf2250697f2e567297>>
+ * @codegen <<SignedSource::98101caf910ff8cddc38a424e29e4980>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -451,7 +451,7 @@ const tokens = [{
     "introduced": "0.0.15",
     "description": "Use for text in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/text.tsx",
   "isSource": true,
   "original": {
@@ -1102,7 +1102,7 @@ const tokens = [{
     "introduced": "0.6.0",
     "description": "Use for icons in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/icon.tsx",
   "isSource": true,
   "original": {
@@ -2953,7 +2953,7 @@ const tokens = [{
     "introduced": "0.7.0",
     "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
   "isSource": true,
   "original": {
@@ -6274,7 +6274,7 @@ const tokens = [{
     "replacement": "color.interaction.pressed",
     "description": "Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars."
   },
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "filePath": "src/tokens/atlassian-dark/deprecated/deprecated.tsx",
   "isSource": true,
   "original": {

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "0.10.8";
+const version = "0.10.11";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/tokens/palette.js

@@ -644,15 +644,15 @@ const palette = {
         }
       },
       DN500: {
-        value: '#5C6C7A',
+        value: '#596773',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN500A: {
-        // #A9C5DF 48%
-        value: '#A9C5DF7A',
+        // #9BB4CA @50%
+        value: '#9BB4CA80',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'

package/dist/es2019/version.json

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

package/dist/esm/artifacts/palettes-raw.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d96054f56fadd3c595206b9334ccc5e6>>
+ * @codegen <<SignedSource::4d0639c90d18380e142efed6da97a9b0>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -1551,7 +1551,7 @@ var tokens = [{
   "name": "color.palette.DN400A",
   "path": ["color", "palette", "DN400A"]
 }, {
-  "value": "#5C6C7A",
+  "value": "#596773",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1559,7 +1559,7 @@ var tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#5C6C7A",
+    "value": "#596773",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"
@@ -1568,7 +1568,7 @@ var tokens = [{
   "name": "color.palette.DN500",
   "path": ["color", "palette", "DN500"]
 }, {
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "attributes": {
     "group": "palette",
     "category": "dark mode neutral"
@@ -1576,7 +1576,7 @@ var tokens = [{
   "filePath": "src/tokens/palette.tsx",
   "isSource": false,
   "original": {
-    "value": "#A9C5DF7A",
+    "value": "#9BB4CA80",
     "attributes": {
       "group": "palette",
       "category": "dark mode neutral"

package/dist/esm/artifacts/tokens-raw/atlassian-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f6554dd5fa7c18bf2250697f2e567297>>
+ * @codegen <<SignedSource::98101caf910ff8cddc38a424e29e4980>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -451,7 +451,7 @@ var tokens = [{
     "introduced": "0.0.15",
     "description": "Use for text in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/text.tsx",
   "isSource": true,
   "original": {
@@ -1102,7 +1102,7 @@ var tokens = [{
     "introduced": "0.6.0",
     "description": "Use for icons in a disabled state."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/icon.tsx",
   "isSource": true,
   "original": {
@@ -2953,7 +2953,7 @@ var tokens = [{
     "introduced": "0.7.0",
     "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags."
   },
-  "value": "#5C6C7A",
+  "value": "#596773",
   "filePath": "src/tokens/atlassian-dark/color/accent.tsx",
   "isSource": true,
   "original": {
@@ -6274,7 +6274,7 @@ var tokens = [{
     "replacement": "color.interaction.pressed",
     "description": "Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars."
   },
-  "value": "#A9C5DF7A",
+  "value": "#9BB4CA80",
   "filePath": "src/tokens/atlassian-dark/deprecated/deprecated.tsx",
   "isSource": true,
   "original": {

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "0.10.8";
+var version = "0.10.11";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/tokens/palette.js

@@ -644,15 +644,15 @@ var palette = {
         }
       },
       DN500: {
-        value: '#5C6C7A',
+        value: '#596773',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'
         }
       },
       DN500A: {
-        // #A9C5DF 48%
-        value: '#A9C5DF7A',
+        // #9BB4CA @50%
+        value: '#9BB4CA80',
         attributes: {
           group: 'palette',
           category: 'dark mode neutral'

package/dist/esm/version.json

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

package/dist/types/artifacts/palettes-raw.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d96054f56fadd3c595206b9334ccc5e6>>
+ * @codegen <<SignedSource::4d0639c90d18380e142efed6da97a9b0>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {

package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f6554dd5fa7c18bf2250697f2e567297>>
+ * @codegen <<SignedSource::98101caf910ff8cddc38a424e29e4980>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.8",
+  "version": "0.10.11",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
     "build-chrome-extension": "yarn --cwd tokens-browser-extension build-chrome-extension"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.0.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0"
@@ -95,6 +95,7 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "ui-components": "lite-mode",
       "deprecation": "no-deprecated-imports",

package/report.api.md

@@ -0,0 +1,36 @@
+## API Report File for "@atlaskit/tokens"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+// @public (undocumented)
+export type CSSToken = CSSTokenMap[keyof CSSTokenMap];
+
+// @public (undocumented)
+export const setGlobalTheme: (theme: Themes) => void;
+
+// @public
+export class ThemeMutationObserver {
+  constructor(callback: (theme: Themes | null) => unknown);
+  // (undocumented)
+  disconnect(): void;
+  // (undocumented)
+  observe(): void;
+  // (undocumented)
+  observer: MutationObserver | null;
+}
+
+// @public (undocumented)
+export type Themes = typeof THEMES[number];
+
+// @public (undocumented)
+export function token<T extends keyof Tokens>(
+  path: T,
+  fallback?: string,
+): CSSTokenMap[T];
+
+// @public
+export const useThemeObserver: () => Themes | null;
+
+// (No @packageDocumentation comment for this package)
+```