@atlaskit/tokens 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/tokens
 
+## 0.6.1
+
+### Patch Changes
+
+- [`3ed3071ee35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ed3071ee35) - Updates elevation.surface.sunken base token in darkmode to DN-100A
+- Updated dependencies
+
 ## 0.6.0
 
 ### Minor Changes

package/css/atlassian-dark.css

@@ -214,7 +214,7 @@ html[data-theme="dark"] {
   --ds-shadow-raised: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
   --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
   --ds-surface: #161A1D;
-  --ds-surface-sunken: #BCD6F00A;
+  --ds-surface-sunken: #03040442;
   --ds-surface-raised: #1D2125;
   --ds-surface-overlay: #22272B;
   --ds-UNSAFE_util-transparent: transparent;

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

@@ -12,7 +12,7 @@ exports.default = void 0;
  * 1. Mark the old token's 'state' as deprecated
  * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
  * 3. Create a new token matching the token above: 'my.new.token'
- * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 4. Run 'yarn build tokens' to have you changes reflected in this map
  * 5. eslint and other tools will now use this to automate replacing tokens
  *
  * These changes will then be picked up by our tooling, which will attempt to

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

@@ -4387,7 +4387,7 @@ var tokens = [{
     "state": "active",
     "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
   },
-  "value": "#BCD6F00A",
+  "value": "#03040442",
   "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
   "isSource": true,
   "original": {
@@ -4396,7 +4396,7 @@ var tokens = [{
       "state": "active",
       "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
     },
-    "value": "DN100A"
+    "value": "DN-100A"
   },
   "name": "elevation.surface.sunken",
   "path": ["elevation", "surface", "sunken"]

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.6.0";
+var version = "0.6.1";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/tokens/atlassian-dark/elevation/surface.js

@@ -11,7 +11,7 @@ var elevation = {
         value: 'DN0'
       },
       sunken: {
-        value: 'DN100A'
+        value: 'DN-100A'
       },
       raised: {
         value: 'DN100'

package/dist/cjs/version.json

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

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

@@ -6,7 +6,7 @@
  * 1. Mark the old token's 'state' as deprecated
  * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
  * 3. Create a new token matching the token above: 'my.new.token'
- * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 4. Run 'yarn build tokens' to have you changes reflected in this map
  * 5. eslint and other tools will now use this to automate replacing tokens
  *
  * These changes will then be picked up by our tooling, which will attempt to

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

@@ -4381,7 +4381,7 @@ const tokens = [{
     "state": "active",
     "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
   },
-  "value": "#BCD6F00A",
+  "value": "#03040442",
   "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
   "isSource": true,
   "original": {
@@ -4390,7 +4390,7 @@ const tokens = [{
       "state": "active",
       "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
     },
-    "value": "DN100A"
+    "value": "DN-100A"
   },
   "name": "elevation.surface.sunken",
   "path": ["elevation", "surface", "sunken"]

package/dist/es2019/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.6.0";
+const version = "0.6.1";
 
 function token(path, fallback) {
   let token = tokens[path];

package/dist/es2019/tokens/atlassian-dark/elevation/surface.js

@@ -5,7 +5,7 @@ const elevation = {
         value: 'DN0'
       },
       sunken: {
-        value: 'DN100A'
+        value: 'DN-100A'
       },
       raised: {
         value: 'DN100'

package/dist/es2019/version.json

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

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

@@ -6,7 +6,7 @@
  * 1. Mark the old token's 'state' as deprecated
  * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
  * 3. Create a new token matching the token above: 'my.new.token'
- * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 4. Run 'yarn build tokens' to have you changes reflected in this map
  * 5. eslint and other tools will now use this to automate replacing tokens
  *
  * These changes will then be picked up by our tooling, which will attempt to

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

@@ -4381,7 +4381,7 @@ var tokens = [{
     "state": "active",
     "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
   },
-  "value": "#BCD6F00A",
+  "value": "#03040442",
   "filePath": "src/tokens/atlassian-dark/elevation/surface.tsx",
   "isSource": true,
   "original": {
@@ -4390,7 +4390,7 @@ var tokens = [{
       "state": "active",
       "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns."
     },
-    "value": "DN100A"
+    "value": "DN-100A"
   },
   "name": "elevation.surface.sunken",
   "path": ["elevation", "surface", "sunken"]

package/dist/esm/get-token.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.6.0";
+var version = "0.6.1";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/tokens/atlassian-dark/elevation/surface.js

@@ -5,7 +5,7 @@ var elevation = {
         value: 'DN0'
       },
       sunken: {
-        value: 'DN100A'
+        value: 'DN-100A'
       },
       raised: {
         value: 'DN100'

package/dist/esm/version.json

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

package/dist/types/artifacts/rename-mapping.d.ts

@@ -4,7 +4,7 @@
  * 1. Mark the old token's 'state' as deprecated
  * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
  * 3. Create a new token matching the token above: 'my.new.token'
- * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 4. Run 'yarn build tokens' to have you changes reflected in this map
  * 5. eslint and other tools will now use this to automate replacing tokens
  *
  * These changes will then be picked up by our tooling, which will attempt to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -26,23 +26,31 @@
     "./css": "./css"
   },
   "scripts": {
-    "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git",
-    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are is out of date, run bolt build tokens' && false)",
-    "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
+    "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git && yarn build-chrome-extension",
+    "check-clean-git": "git diff --exit-code -- packages/design-system/tokens/ || (echo 'tokens are is out of date, run yarn build tokens' && false)",
+    "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build",
+    "build-chrome-extension": "yarn --cwd tokens-browser-extension build-chrome-extension"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/ds-lib": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.15.0",
     "@babel/types": "^7.15.0"
   },
   "devDependencies": {
-    "@atlaskit/code": "*",
-    "@atlaskit/lozenge": "*",
-    "@atlaskit/tabs": "*",
+    "@atlaskit/code": "^14.3.0",
+    "@atlaskit/icon": "^21.10.2",
+    "@atlaskit/lozenge": "^11.0.0",
+    "@atlaskit/section-message": "^6.1.7",
+    "@atlaskit/tabs": "^13.2.4",
+    "@atlaskit/textfield": "^5.1.5",
+    "@atlaskit/theme": "^12.1.2",
+    "@atlaskit/toggle": "^12.4.2",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",
     "@emotion/core": "^10.0.9",
+    "@types/chrome": "^0.0.171",
+    "copy-webpack-plugin": "^6.4.0",
     "lodash": "^4.17.21",
     "prettier": "^2.1.1",
     "react": "^16.8.0",

package/tokens-browser-extension/README.md

@@ -1,28 +0,0 @@
-Atlaskit Tokens Browser Extension
-===
-
-This extension was made to help development of different themes using `@atlaskit/tokens`
-
-Installation
-===
-The extension currently is not available on any extension store and can only be installed in its unpacked form
-
-
-Chrome
- * Open [chrome://extensions](chrome://extensions)
- * Enable 'Developer Mode' checkbox
- * Click 'Load unpacked extensions...'
- * Select the `packages/design-system/tokens/tokens-browser-extension` folder
-
-Firefox
-* You can also install the extension in Firefox:
-* Unzip the extension and follow the instructions at [Temporary installation in Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/).
-
-Note: When you quit the browser it will remove the extension so you will have to follow the guide above to install it again. We can look at packaging the extension up properly if there is enough demand ;)
-
-Usage
-===
-
-While on any page, launch the devtools, you should see a new tab called 'Tokens theming controls'.
-
-You can toggle between the themes or disable the theme to see the legacy appearance

package/tokens-browser-extension/atlassian-theme.css

@@ -1,449 +0,0 @@
-/**
-* These styles have been copy-pasted from the output
-* in packages/design-system/tokens/css
-* this now includes namespaced tokens only
-*/
-
-html[data-theme='light'] {
-  --ds-text-accent-blue: #0055CC;
-  --ds-text-accent-red: #AE2A19;
-  --ds-text-accent-orange: #974F0C;
-  --ds-text-accent-yellow: #7F5F01;
-  --ds-text-accent-green: #216E4E;
-  --ds-text-accent-purple: #5E4DB2;
-  --ds-text-accent-teal: #206B74;
-  --ds-text-accent-magenta: #943D73;
-  --ds-text: #172B4D;
-  --ds-text-subtle: #44546F;
-  --ds-text-subtlest: #626F86;
-  --ds-text-disabled: #8993A5;
-  --ds-text-inverse: #FFFFFF;
-  --ds-text-brand: #0C66E4;
-  --ds-text-danger: #AE2A19;
-  --ds-text-warning: #974F0C;
-  --ds-text-warning-inverse: #172B4D;
-  --ds-text-success: #216E4E;
-  --ds-text-discovery: #5E4DB2;
-  --ds-text-information: #0055CC;
-  --ds-text-highEmphasis: #172B4D;
-  --ds-text-link-pressed: #0055CC;
-  --ds-text-link-resting: #0C66E4;
-  --ds-text-lowEmphasis: #626F86;
-  --ds-text-mediumEmphasis: #44546F;
-  --ds-text-onBold: #FFFFFF;
-  --ds-text-onBoldWarning: #172B4D;
-  --ds-text-selected: #0C66E4;
-  --ds-icon-accent-blue: #1D7AFC;
-  --ds-icon-accent-red: #E34935;
-  --ds-icon-accent-orange: #D97008;
-  --ds-icon-accent-yellow: #B38600;
-  --ds-icon-accent-green: #22A06B;
-  --ds-icon-accent-purple: #8270DB;
-  --ds-icon-accent-teal: #1D9AAA;
-  --ds-icon-accent-magenta: #CD519D;
-  --ds-icon: #44546F;
-  --ds-icon-subtle: #626F86;
-  --ds-icon-inverse: #FFFFFF;
-  --ds-icon-disabled: #8993A5;
-  --ds-icon-brand: #0C66E4;
-  --ds-icon-danger: #E34935;
-  --ds-icon-warning: #D97008;
-  --ds-icon-warning-inverse: #172B4D;
-  --ds-icon-success: #22A06B;
-  --ds-icon-discovery: #8270DB;
-  --ds-icon-information: #1D7AFC;
-  --ds-border-accent-blue: #1D7AFC;
-  --ds-border-accent-red: #E34935;
-  --ds-border-accent-orange: #D97008;
-  --ds-border-accent-yellow: #B38600;
-  --ds-border-accent-green: #22A06B;
-  --ds-border-accent-purple: #8270DB;
-  --ds-border-accent-teal: #1D9AAA;
-  --ds-border-accent-magenta: #CD519D;
-  --ds-border: #091E4224;
-  --ds-border-focused: #388BFF;
-  --ds-border-input: #091E4224;
-  --ds-border-disabled: #091E420F;
-  --ds-border-brand: #0C66E4;
-  --ds-border-danger: #E34935;
-  --ds-border-warning: #D97008;
-  --ds-border-success: #22A06B;
-  --ds-border-discovery: #8270DB;
-  --ds-border-information: #1D7AFC;
-  --ds-border-focus: #388BFF;
-  --ds-border-neutral: #091E4224;
-  --ds-background-accent-blue: #CCE0FF;
-  --ds-background-accent-blue-bold: #579DFF;
-  --ds-background-accent-red: #FFD2CC;
-  --ds-background-accent-red-bold: #F87462;
-  --ds-background-accent-orange: #FFE2BD;
-  --ds-background-accent-orange-bold: #FAA53D;
-  --ds-background-accent-yellow: #F8E6A0;
-  --ds-background-accent-yellow-bold: #E2B203;
-  --ds-background-accent-green: #BAF3DB;
-  --ds-background-accent-green-bold: #4BCE97;
-  --ds-background-accent-teal: #C1F0F5;
-  --ds-background-accent-teal-bold: #60C6D2;
-  --ds-background-accent-purple: #DFD8FD;
-  --ds-background-accent-purple-bold: #9F8FEF;
-  --ds-background-accent-magenta: #FDD0EC;
-  --ds-background-accent-magenta-bold: #E774BB;
-  --ds-background-disabled: #091E420F;
-  --ds-background-inverse: #00000029;
-  --ds-background-input: #091E4208;
-  --ds-background-input-hovered: #FFFFFF;
-  --ds-background-input-pressed: #091E420F;
-  --ds-background-neutral: #091E420F;
-  --ds-background-neutral-hovered: #091E4224;
-  --ds-background-neutral-pressed: #091E424F;
-  --ds-background-neutral-subtle: #00000000;
-  --ds-background-neutral-subtle-hovered: #091E420F;
-  --ds-background-neutral-subtle-pressed: #091E4224;
-  --ds-background-neutral-bold: #44546F;
-  --ds-background-neutral-bold-hovered: #2C3E5D;
-  --ds-background-neutral-bold-pressed: #172B4D;
-  --ds-background-brand: #E9F2FF;
-  --ds-background-brand-hovered: #CCE0FF;
-  --ds-background-brand-pressed: #85B8FF;
-  --ds-background-brand-bold: #0C66E4;
-  --ds-background-brand-bold-hovered: #0055CC;
-  --ds-background-brand-bold-pressed: #09326C;
-  --ds-background-danger: #FFEDEB;
-  --ds-background-danger-hovered: #FFD2CC;
-  --ds-background-danger-pressed: #FF9C8F;
-  --ds-background-danger-bold: #CA3521;
-  --ds-background-danger-bold-hovered: #AE2A19;
-  --ds-background-danger-bold-pressed: #601E16;
-  --ds-background-warning: #FFF7D6;
-  --ds-background-warning-hovered: #F8E6A0;
-  --ds-background-warning-pressed: #F5CD47;
-  --ds-background-warning-bold: #E2B203;
-  --ds-background-warning-bold-hovered: #CF9F02;
-  --ds-background-warning-bold-pressed: #B38600;
-  --ds-background-success: #DFFCF0;
-  --ds-background-success-hovered: #BAF3DB;
-  --ds-background-success-pressed: #7EE2B8;
-  --ds-background-success-bold: #1F845A;
-  --ds-background-success-bold-hovered: #216E4E;
-  --ds-background-success-bold-pressed: #164B35;
-  --ds-background-discovery: #F3F0FF;
-  --ds-background-discovery-hovered: #DFD8FD;
-  --ds-background-discovery-pressed: #B8ACF6;
-  --ds-background-discovery-bold: #6E5DC6;
-  --ds-background-discovery-bold-hovered: #5E4DB2;
-  --ds-background-discovery-bold-pressed: #352C63;
-  --ds-background-information: #E9F2FF;
-  --ds-background-information-hovered: #CCE0FF;
-  --ds-background-information-pressed: #85B8FF;
-  --ds-background-information-bold: #0C66E4;
-  --ds-background-information-bold-hovered: #0055CC;
-  --ds-background-information-bold-pressed: #09326C;
-  --ds-background-blanket: #091E427A;
-  --ds-background-boldBrand-hover: #0055CC;
-  --ds-background-boldBrand-pressed: #09326C;
-  --ds-background-boldBrand-resting: #0C66E4;
-  --ds-background-boldDanger-hover: #AE2A19;
-  --ds-background-boldDanger-pressed: #601E16;
-  --ds-background-boldDanger-resting: #CA3521;
-  --ds-background-boldDiscovery-hover: #5E4DB2;
-  --ds-background-boldDiscovery-pressed: #352C63;
-  --ds-background-boldDiscovery-resting: #6E5DC6;
-  --ds-background-boldNeutral-hover: #2C3E5D;
-  --ds-background-boldNeutral-pressed: #172B4D;
-  --ds-background-boldNeutral-resting: #44546F;
-  --ds-background-boldSuccess-hover: #216E4E;
-  --ds-background-boldSuccess-pressed: #164B35;
-  --ds-background-boldSuccess-resting: #1F845A;
-  --ds-background-boldWarning-hover: #CF9F02;
-  --ds-background-boldWarning-pressed: #B38600;
-  --ds-background-boldWarning-resting: #E2B203;
-  --ds-background-card: #FFFFFF;
-  --ds-background-default: #FFFFFF;
-  --ds-background-overlay: #FFFFFF;
-  --ds-background-selected-resting: #E9F2FF;
-  --ds-background-selected-hover: #CCE0FF;
-  --ds-background-selected-pressed: #85B8FF;
-  --ds-background-subtleBorderedNeutral-pressed: #091E420F;
-  --ds-background-subtleBorderedNeutral-resting: #091E4208;
-  --ds-background-subtleBrand-hover: #CCE0FF;
-  --ds-background-subtleBrand-pressed: #85B8FF;
-  --ds-background-subtleBrand-resting: #E9F2FF;
-  --ds-background-subtleDanger-hover: #FFD2CC;
-  --ds-background-subtleDanger-pressed: #FF9C8F;
-  --ds-background-subtleDanger-resting: #FFEDEB;
-  --ds-background-subtleDiscovery-hover: #DFD8FD;
-  --ds-background-subtleDiscovery-pressed: #B8ACF6;
-  --ds-background-subtleDiscovery-resting: #F3F0FF;
-  --ds-background-subtleNeutral-hover: #091E4224;
-  --ds-background-subtleNeutral-pressed: #091E424F;
-  --ds-background-subtleNeutral-resting: #091E420F;
-  --ds-background-subtleSuccess-hover: #BAF3DB;
-  --ds-background-subtleSuccess-pressed: #7EE2B8;
-  --ds-background-subtleSuccess-resting: #DFFCF0;
-  --ds-background-subtleWarning-hover: #F8E6A0;
-  --ds-background-subtleWarning-pressed: #F5CD47;
-  --ds-background-subtleWarning-resting: #FFF7D6;
-  --ds-background-sunken: #091E4208;
-  --ds-background-transparentNeutral-hover: #091E420F;
-  --ds-background-transparentNeutral-pressed: #091E4224;
-  --ds-blanket: #091E427A;
-  --ds-interaction-hovered: #ffffff33;
-  --ds-interaction-pressed: #ffffff5c;
-  --ds-interaction-inverse-hovered: #00000029;
-  --ds-interaction-inverse-pressed: #00000052;
-  --ds-link: #0C66E4;
-  --ds-link-pressed: #0055CC;
-  --ds-accent-boldBlue: #579DFF;
-  --ds-accent-boldGreen: #4BCE97;
-  --ds-accent-boldOrange: #FAA53D;
-  --ds-accent-boldPurple: #9F8FEF;
-  --ds-accent-boldRed: #F87462;
-  --ds-accent-boldTeal: #60C6D2;
-  --ds-accent-subtleBlue: #CCE0FF;
-  --ds-accent-subtleGreen: #BAF3DB;
-  --ds-accent-subtleMagenta: #FDD0EC;
-  --ds-accent-subtleOrange: #FFE2BD;
-  --ds-accent-subtlePurple: #DFD8FD;
-  --ds-accent-subtleRed: #FFD2CC;
-  --ds-accent-subtleTeal: #C1F0F5;
-  --ds-iconBorder-brand: #1D7AFC;
-  --ds-iconBorder-danger: #E34935;
-  --ds-iconBorder-discovery: #8270DB;
-  --ds-iconBorder-success: #22A06B;
-  --ds-iconBorder-warning: #D97008;
-  --ds-overlay-hover: #091E424F;
-  --ds-overlay-pressed: #091E427A;
-  --ds-card: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
-  --ds-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
-  --ds-shadow-raised: 0px 1px 1px #091E4240, 0px 0px 1px #091E424F;
-  --ds-shadow-overlay: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
-  --ds-surface: #FFFFFF;
-  --ds-surface-sunken: #091E4208;
-  --ds-surface-raised: #FFFFFF;
-  --ds-surface-overlay: #FFFFFF;
-  --ds-UNSAFE_util-transparent: transparent;
-  --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
-
-}
-
-html[data-theme='dark'] {
-  --ds-text-accent-blue: #85B8FF;
-  --ds-text-accent-red: #FF9C8F;
-  --ds-text-accent-orange: #FEC57B;
-  --ds-text-accent-yellow: #F5CD47;
-  --ds-text-accent-green: #7EE2B8;
-  --ds-text-accent-purple: #B8ACF6;
-  --ds-text-accent-teal: #8BDBE5;
-  --ds-text-accent-magenta: #F797D2;
-  --ds-text: #C7D1DB;
-  --ds-text-subtle: #9FADBC;
-  --ds-text-subtlest: #8696A7;
-  --ds-text-disabled: #5C6C7A;
-  --ds-text-inverse: #161A1D;
-  --ds-text-brand: #579DFF;
-  --ds-text-danger: #FF9C8F;
-  --ds-text-warning: #F5CD47;
-  --ds-text-warning-inverse: #161A1D;
-  --ds-text-success: #7EE2B8;
-  --ds-text-discovery: #B8ACF6;
-  --ds-text-information: #85B8FF;
-  --ds-text-highEmphasis: #C7D1DB;
-  --ds-text-link-pressed: #85B8FF;
-  --ds-text-link-resting: #579DFF;
-  --ds-text-lowEmphasis: #8696A7;
-  --ds-text-mediumEmphasis: #9FADBC;
-  --ds-text-onBold: #161A1D;
-  --ds-text-onBoldWarning: #161A1D;
-  --ds-text-selected: #579DFF;
-  --ds-icon-accent-blue: #388BFF;
-  --ds-icon-accent-red: #EF5C48;
-  --ds-icon-accent-orange: #F18D13;
-  --ds-icon-accent-yellow: #CF9F02;
-  --ds-icon-accent-green: #2ABB7F;
-  --ds-icon-accent-purple: #8F7EE7;
-  --ds-icon-accent-teal: #37B4C3;
-  --ds-icon-accent-magenta: #DA62AC;
-  --ds-icon: #9FADBC;
-  --ds-icon-subtle: #8696A7;
-  --ds-icon-inverse: #161A1D;
-  --ds-icon-disabled: #5C6C7A;
-  --ds-icon-brand: #579DFF;
-  --ds-icon-danger: #EF5C48;
-  --ds-icon-warning: #CF9F02;
-  --ds-icon-warning-inverse: #161A1D;
-  --ds-icon-success: #2ABB7F;
-  --ds-icon-discovery: #8F7EE7;
-  --ds-icon-information: #388BFF;
-  --ds-border-accent-blue: #388BFF;
-  --ds-border-accent-red: #EF5C48;
-  --ds-border-accent-orange: #F18D13;
-  --ds-border-accent-yellow: #CF9F02;
-  --ds-border-accent-green: #2ABB7F;
-  --ds-border-accent-purple: #8F7EE7;
-  --ds-border-accent-teal: #37B4C3;
-  --ds-border-accent-magenta: #DA62AC;
-  --ds-border: #A6C5E229;
-  --ds-border-focused: #85B8FF;
-  --ds-border-input: #A6C5E229;
-  --ds-border-disabled: #A1BDD914;
-  --ds-border-brand: #579DFF;
-  --ds-border-danger: #EF5C48;
-  --ds-border-warning: #CF9F02;
-  --ds-border-success: #2ABB7F;
-  --ds-border-discovery: #8F7EE7;
-  --ds-border-information: #388BFF;
-  --ds-border-focus: #85B8FF;
-  --ds-border-neutral: #A6C5E229;
-  --ds-background-accent-blue: #09326C;
-  --ds-background-accent-blue-bold: #0C66E4;
-  --ds-background-accent-red: #601E16;
-  --ds-background-accent-red-bold: #CA3521;
-  --ds-background-accent-orange: #5F3811;
-  --ds-background-accent-orange-bold: #B65C02;
-  --ds-background-accent-yellow: #533F04;
-  --ds-background-accent-yellow-bold: #946F00;
-  --ds-background-accent-green: #164B35;
-  --ds-background-accent-green-bold: #1F845A;
-  --ds-background-accent-teal: #1D474C;
-  --ds-background-accent-teal-bold: #1D7F8C;
-  --ds-background-accent-purple: #352C63;
-  --ds-background-accent-purple-bold: #6E5DC6;
-  --ds-background-accent-magenta: #50253F;
-  --ds-background-accent-magenta-bold: #AE4787;
-  --ds-background-disabled: #A1BDD914;
-  --ds-background-inverse: #ffffff33;
-  --ds-background-input: #BCD6F00A;
-  --ds-background-input-hovered: #161A1D;
-  --ds-background-input-pressed: #A1BDD914;
-  --ds-background-neutral: #A1BDD914;
-  --ds-background-neutral-hovered: #A6C5E229;
-  --ds-background-neutral-pressed: #BFDBF847;
-  --ds-background-neutral-subtle: #00000000;
-  --ds-background-neutral-subtle-hovered: #A1BDD914;
-  --ds-background-neutral-subtle-pressed: #A6C5E229;
-  --ds-background-neutral-bold: #9FADBC;
-  --ds-background-neutral-bold-hovered: #B6C2CF;
-  --ds-background-neutral-bold-pressed: #C7D1DB;
-  --ds-background-brand: #A1BDD914;
-  --ds-background-brand-hovered: #A6C5E229;
-  --ds-background-brand-pressed: #BFDBF847;
-  --ds-background-brand-bold: #579DFF;
-  --ds-background-brand-bold-hovered: #85B8FF;
-  --ds-background-brand-bold-pressed: #CCE0FF;
-  --ds-background-danger: #391813;
-  --ds-background-danger-hovered: #601E16;
-  --ds-background-danger-pressed: #AE2A19;
-  --ds-background-danger-bold: #F87462;
-  --ds-background-danger-bold-hovered: #FF9C8F;
-  --ds-background-danger-bold-pressed: #FFD2CC;
-  --ds-background-warning: #3D2E00;
-  --ds-background-warning-hovered: #533F04;
-  --ds-background-warning-pressed: #7F5F01;
-  --ds-background-warning-bold: #E2B203;
-  --ds-background-warning-bold-hovered: #F5CD47;
-  --ds-background-warning-bold-pressed: #F8E6A0;
-  --ds-background-success: #133527;
-  --ds-background-success-hovered: #164B35;
-  --ds-background-success-pressed: #216E4E;
-  --ds-background-success-bold: #4BCE97;
-  --ds-background-success-bold-hovered: #7EE2B8;
-  --ds-background-success-bold-pressed: #BAF3DB;
-  --ds-background-discovery: #231C3F;
-  --ds-background-discovery-hovered: #352C63;
-  --ds-background-discovery-pressed: #5E4DB2;
-  --ds-background-discovery-bold: #9F8FEF;
-  --ds-background-discovery-bold-hovered: #B8ACF6;
-  --ds-background-discovery-bold-pressed: #DFD8FD;
-  --ds-background-information: #082145;
-  --ds-background-information-hovered: #09326C;
-  --ds-background-information-pressed: #0055CC;
-  --ds-background-information-bold: #579DFF;
-  --ds-background-information-bold-hovered: #85B8FF;
-  --ds-background-information-bold-pressed: #CCE0FF;
-  --ds-background-blanket: #03040442;
-  --ds-background-boldBrand-hover: #85B8FF;
-  --ds-background-boldBrand-pressed: #CCE0FF;
-  --ds-background-boldBrand-resting: #579DFF;
-  --ds-background-boldDanger-hover: #FF9C8F;
-  --ds-background-boldDanger-pressed: #FFD2CC;
-  --ds-background-boldDanger-resting: #F87462;
-  --ds-background-boldDiscovery-hover: #B8ACF6;
-  --ds-background-boldDiscovery-pressed: #DFD8FD;
-  --ds-background-boldDiscovery-resting: #9F8FEF;
-  --ds-background-boldNeutral-hover: #B6C2CF;
-  --ds-background-boldNeutral-pressed: #C7D1DB;
-  --ds-background-boldNeutral-resting: #9FADBC;
-  --ds-background-boldSuccess-hover: #7EE2B8;
-  --ds-background-boldSuccess-pressed: #BAF3DB;
-  --ds-background-boldSuccess-resting: #4BCE97;
-  --ds-background-boldWarning-hover: #F5CD47;
-  --ds-background-boldWarning-pressed: #F8E6A0;
-  --ds-background-boldWarning-resting: #E2B203;
-  --ds-background-card: #1D2125;
-  --ds-background-default: #161A1D;
-  --ds-background-overlay: #22272B;
-  --ds-background-selected-resting: #A1BDD914;
-  --ds-background-selected-hover: #A6C5E229;
-  --ds-background-selected-pressed: #BFDBF847;
-  --ds-background-subtleBorderedNeutral-pressed: #A1BDD914;
-  --ds-background-subtleBorderedNeutral-resting: #BCD6F00A;
-  --ds-background-subtleBrand-hover: #09326C;
-  --ds-background-subtleBrand-pressed: #0055CC;
-  --ds-background-subtleBrand-resting: #082145;
-  --ds-background-subtleDanger-hover: #601E16;
-  --ds-background-subtleDanger-pressed: #AE2A19;
-  --ds-background-subtleDanger-resting: #391813;
-  --ds-background-subtleDiscovery-hover: #352C63;
-  --ds-background-subtleDiscovery-pressed: #5E4DB2;
-  --ds-background-subtleDiscovery-resting: #231C3F;
-  --ds-background-subtleNeutral-hover: #A6C5E229;
-  --ds-background-subtleNeutral-pressed: #BFDBF847;
-  --ds-background-subtleNeutral-resting: #A1BDD914;
-  --ds-background-subtleSuccess-hover: #164B35;
-  --ds-background-subtleSuccess-pressed: #216E4E;
-  --ds-background-subtleSuccess-resting: #133527;
-  --ds-background-subtleWarning-hover: #533F04;
-  --ds-background-subtleWarning-pressed: #7F5F01;
-  --ds-background-subtleWarning-resting: #3D2E00;
-  --ds-background-sunken: #03040442;
-  --ds-background-transparentNeutral-hover: #A1BDD914;
-  --ds-background-transparentNeutral-pressed: #A6C5E229;
-  --ds-blanket: #03040442;
-  --ds-interaction-hovered: #00000029;
-  --ds-interaction-pressed: #00000052;
-  --ds-interaction-inverse-hovered: #ffffff33;
-  --ds-interaction-inverse-pressed: #ffffff5c;
-  --ds-link: #579DFF;
-  --ds-link-pressed: #85B8FF;
-  --ds-accent-boldBlue: #0C66E4;
-  --ds-accent-boldGreen: #1F845A;
-  --ds-accent-boldOrange: #B65C02;
-  --ds-accent-boldPurple: #6E5DC6;
-  --ds-accent-boldRed: #CA3521;
-  --ds-accent-boldTeal: #1D7F8C;
-  --ds-accent-subtleBlue: #09326C;
-  --ds-accent-subtleGreen: #164B35;
-  --ds-accent-subtleMagenta: #50253F;
-  --ds-accent-subtleOrange: #5F3811;
-  --ds-accent-subtlePurple: #352C63;
-  --ds-accent-subtleRed: #601E16;
-  --ds-accent-subtleTeal: #1D474C;
-  --ds-iconBorder-brand: #388BFF;
-  --ds-iconBorder-danger: #EF5C48;
-  --ds-iconBorder-discovery: #8F7EE7;
-  --ds-iconBorder-success: #2ABB7F;
-  --ds-iconBorder-warning: #CF9F02;
-  --ds-overlay-hover: #BFDBF847;
-  --ds-overlay-pressed: #A9C5DF7A;
-  --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;
-  --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
-  --ds-surface: #161A1D;
-  --ds-surface-sunken: #03040442;
-  --ds-surface-raised: #1D2125;
-  --ds-surface-overlay: #22272B;
-  --ds-UNSAFE_util-transparent: transparent;
-  --ds-UNSAFE_util-MISSING_TOKEN: #FA11F2;
-
-}

package/tokens-browser-extension/background.js

@@ -1,75 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable no-console */
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-
-// Chrome automatically creates a background.html page for this to execute.
-// This can access the inspected page via executeScript
-//
-// Can use:
-// chrome.tabs.*
-// chrome.extension.*
-
-// sync options settings
-function setOptions(data = {}) {
-  chrome.storage.sync.set(data, function () {
-    console.log('Settings saved');
-  });
-}
-
-function getOptions(keys, callback) {
-  chrome.storage.sync.get(keys, function (data) {
-    console.log('Settings retrieved', data);
-    callback(data);
-  });
-}
-
-function queryTheme() {
-  const theme = window.localStorage && window.localStorage.theme;
-  console.log('theme', theme);
-  chrome.runtime.sendMessage({ theme });
-}
-
-// when the extension is loaded when opening devtools
-chrome.runtime.onConnect.addListener(function (port) {
-  // check for the theme in the running tab
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.executeScript(tabs[0].id, {
-      code: `(${queryTheme})()`,
-    });
-  });
-  const extensionListener = function (message, sender, sendResponse) {
-    if (message.tabId && message.action) {
-      // handle changing theme from extension into inspected page
-      // these messages come from panel.js
-
-      console.log('background', message);
-      switch (message.action) {
-        case 'removeTheme':
-          chrome.tabs.sendMessage(message.tabId, 'none');
-          break;
-        case 'setTheme-light':
-          chrome.tabs.sendMessage(message.tabId, 'light');
-          break;
-        case 'setTheme-dark':
-          chrome.tabs.sendMessage(message.tabId, 'dark');
-          break;
-        default:
-          break;
-      }
-
-      // This accepts messages from the inspected page and
-      // sends them to the panel
-    } else {
-      port.postMessage(message);
-    }
-    sendResponse(message);
-  };
-
-  // Listens to messages sent from the panel
-  chrome.runtime.onMessage.addListener(extensionListener);
-
-  port.onDisconnect.addListener(function () {
-    chrome.runtime.onMessage.removeListener(extensionListener);
-  });
-});

package/tokens-browser-extension/content-script.js

@@ -1,75 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable no-console */
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-
-// This is included and executed in the inspected page
-
-// local storage helpers
-// we store the theme name here for when users refresh the page
-// we can quickly check and add the theme tokens back into the page
-function getLocalStorage(key) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  return window.localStorage && window.localStorage[key];
-}
-
-function setLocalStorage(key, value) {
-  if (window && window.localStorage) {
-    window.localStorage[key] = value;
-  }
-}
-
-// these functions are almost identical to the ones in background.js
-// we need them here because the extension is isolated from the inspected page
-// and has no idea if someone were to delete local storage or change the theme value
-// in local storage
-// This file is also run on document_start - https://developer.chrome.com/docs/extensions/mv3/content_scripts/#run_time
-// which allows the theme CSS to seemingly persist across page refreshes
-function removeTheme() {
-  const html = document.querySelector('html');
-  if (html) {
-    html.removeAttribute('data-theme');
-    setLocalStorage('theme', 'none');
-  }
-}
-
-function setTheme(themeName = 'light') {
-  const html = document.querySelector('html');
-  html.setAttribute('data-theme', themeName);
-  setLocalStorage('theme', themeName);
-}
-
-function handleTheme(theme) {
-  if (!theme || theme === 'none') {
-    removeTheme();
-  } else if (theme === 'light') {
-    setTheme(theme);
-  } else if (theme === 'dark') {
-    setTheme(theme);
-  }
-}
-
-function init() {
-  console.log('tokens extension script attached');
-  const theme = getLocalStorage('theme');
-  handleTheme(theme);
-
-  const port = chrome.runtime.connect({
-    name: 'Theming Communication',
-  });
-  // tell extension what the theme value was from local storage
-  port.postMessage({ theme });
-}
-
-function main() {
-  init();
-
-  chrome.runtime.onMessage.addListener(function (message) {
-    // the theme value from panel.html
-    const theme = message || 'none';
-    handleTheme(theme);
-  });
-}
-main();

package/tokens-browser-extension/devtools.html

@@ -1 +0,0 @@
-<script src="devtools.js"></script>

package/tokens-browser-extension/devtools.js

@@ -1,14 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable no-undef */
-
-// Can use
-// chrome.devtools.*
-// chrome.extension.*
-
-// Create a tab in the devtools area
-chrome.devtools.panels.create(
-  'Tokens theming controls',
-  'toast.png',
-  'panel.html',
-  function () {},
-);

package/tokens-browser-extension/manifest.json

@@ -1,35 +0,0 @@
-{
-    "name": "Tokens Test Theming Extension",
-    "version": "0.2",
-    "description": "An extension to test theming implementations with @atlaskit/tokens",
-    "devtools_page": "devtools.html",
-    "background": {
-        "scripts": [
-            "background.js"
-        ]
-    },
-    "permissions": [
-        "tabs",
-        "activeTab",
-        "http://*/*",
-        "https://*/*",
-        "storage",
-        "webNavigation"
-    ],
-    "content_scripts": [
-        {
-            "matches": [
-                "http://*/*",
-                "https://*/*"
-            ],
-            "js": [
-                "content-script.js"
-            ],
-            "css": [
-                "atlassian-theme.css"
-            ],
-            "run_at": "document_start"
-        }
-    ],
-    "manifest_version": 2
-}

package/tokens-browser-extension/messageback-script.js

@@ -1,10 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable no-undef */
-
-document.querySelector('button').addEventListener('click', function () {
-  sendObjectToDevTools({ content: 'Changed by page' });
-});
-function sendObjectToDevTools(message) {
-  // The callback here can be used to execute something on receipt
-  chrome.extension.sendMessage(message, function () {});
-}

package/tokens-browser-extension/messaging.js

@@ -1,36 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable func-names */
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-
-// This creates and maintains the communication channel between
-// the inspectedPage and the dev tools panel.
-//
-// In this example, messages are JSON objects
-// {
-//   action: ['code'|'script'|'message'], // What action to perform on the inspected page
-//   content: [String|Path to script|Object], // data to be passed through
-//   tabId: [Automatically added]
-// }
-
-(function createChannel() {
-  // Create a port with background page for continous message communication
-  const port = chrome.runtime.connect({
-    name: 'Theming Communication',
-  });
-
-  // Listen to messages from the background page
-  port.onMessage.addListener(function (message) {
-    // the theme value from local storage in the inspected page
-    const theme = message.theme || 'none';
-    // update the extension panel.html with the theme value
-    document.querySelector('#selected-theme').innerHTML = theme;
-  });
-})();
-
-// This sends an object to the background page
-// where it can be relayed to the inspected page
-function sendObjectToInspectedPage(message) {
-  message.tabId = chrome.devtools.inspectedWindow.tabId;
-  chrome.runtime.sendMessage(message);
-}

package/tokens-browser-extension/panel.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html style="background: white">
-  <head>
-    <style>
-      button {
-        margin: 1rem 0;
-        padding: 0.5rem 1rem;
-      }
-      p {
-        font-size: 1rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div style="display: flex; flex-direction: column">
-      <h1>Settings</h1>
-      <p>Theme: <span id="selected-theme">none</span></p>
-      <button id="disable-theme">Disable theme</button>
-      <button id="enable-light-theme">Enable Atlassian light theme</button>
-      <button id="enable-dark-theme">Enable Atlassian dark theme</button>
-    </div>
-    <script src="messaging.js"></script>
-    <script src="panel.js"></script>
-  </body>
-</html>

package/tokens-browser-extension/panel.js

@@ -1,46 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable no-console */
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-
-// This one acts in the context of the panel in the Dev Tools
-//
-// Can use
-// chrome.devtools.*
-// chrome.extension.*
-
-// handle interactivity for panel.html
-const themeValue = document.querySelector('#selected-theme');
-
-document.querySelector('#disable-theme').addEventListener(
-  'click',
-  function () {
-    sendObjectToInspectedPage({
-      action: 'removeTheme',
-    });
-    themeValue.innerText = 'none';
-  },
-  false,
-);
-
-document.querySelector('#enable-light-theme').addEventListener(
-  'click',
-  function () {
-    sendObjectToInspectedPage({
-      action: 'setTheme-light',
-    });
-    themeValue.innerText = 'light';
-  },
-  false,
-);
-
-document.querySelector('#enable-dark-theme').addEventListener(
-  'click',
-  function () {
-    sendObjectToInspectedPage({
-      action: 'setTheme-dark',
-    });
-    themeValue.innerText = 'dark';
-  },
-  false,
-);