@atlaskit/tokens 0.2.1 → 0.3.0

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

@@ -0,0 +1,375 @@
+/**
+* These styles have been copy-pasted from the output
+* in packages/design-system/tokens/css
+* this includes namespaced and non-namespaced tokens
+*/
+
+html[data-theme='light'] {
+  --accent-boldBlue: #579dff;
+  --accent-boldGreen: #3acf91;
+  --accent-boldOrange: #ffa333;
+  --accent-boldPurple: #9f8fef;
+  --accent-boldRed: #f97362;
+  --accent-boldTeal: #53c8d5;
+  --accent-subtleBlue: #cce0ff;
+  --accent-subtleGreen: #aff3d6;
+  --accent-subtleMagenta: #fdd0ec;
+  --accent-subtleOrange: #ffdeb8;
+  --accent-subtlePurple: #dfd8fd;
+  --accent-subtleRed: #ffd2cc;
+  --accent-subtleTeal: #adeef5;
+  --background-sunken: #091e4208;
+  --background-default: #ffffff;
+  --background-card: #ffffff;
+  --background-overlay: #ffffff;
+  --background-selected-resting: #e9f2ff;
+  --background-selected-hover: #cce0ff;
+  --background-selected-pressed: #85b8ff;
+  --background-blanket: #091e427a;
+  --background-disabled: #091e420f;
+  --background-boldBrand-resting: #0c66e4;
+  --background-boldBrand-hover: #0055cc;
+  --background-boldBrand-pressed: #09326c;
+  --background-subtleBrand-resting: #e9f2ff;
+  --background-subtleBrand-hover: #cce0ff;
+  --background-subtleBrand-pressed: #85b8ff;
+  --background-boldDanger-resting: #ce2e1c;
+  --background-boldDanger-hover: #b22515;
+  --background-boldDanger-pressed: #601d16;
+  --background-subtleDanger-resting: #ffedeb;
+  --background-subtleDanger-hover: #ffd2cc;
+  --background-subtleDanger-pressed: #ff9a8f;
+  --background-boldWarning-resting: #ebb800;
+  --background-boldWarning-hover: #d19d00;
+  --background-boldWarning-pressed: #b38600;
+  --background-subtleWarning-resting: #fff7d6;
+  --background-subtleWarning-hover: #ffe785;
+  --background-subtleWarning-pressed: #ffd138;
+  --background-boldSuccess-resting: #1f845a;
+  --background-boldSuccess-hover: #216e4e;
+  --background-boldSuccess-pressed: #164b35;
+  --background-subtleSuccess-resting: #dffcf0;
+  --background-subtleSuccess-hover: #aff3d6;
+  --background-subtleSuccess-pressed: #76e0b4;
+  --background-boldDiscovery-resting: #6e5dc6;
+  --background-boldDiscovery-hover: #5e4db2;
+  --background-boldDiscovery-pressed: #352c63;
+  --background-subtleDiscovery-resting: #f3f0ff;
+  --background-subtleDiscovery-hover: #dfd8fd;
+  --background-subtleDiscovery-pressed: #b8acf6;
+  --background-boldNeutral-resting: #44546f;
+  --background-boldNeutral-hover: #2c3e5d;
+  --background-boldNeutral-pressed: #172b4d;
+  --background-transparentNeutral-hover: #091e420f;
+  --background-transparentNeutral-pressed: #091e4224;
+  --background-subtleNeutral-resting: #091e420f;
+  --background-subtleNeutral-hover: #091e4224;
+  --background-subtleNeutral-pressed: #091e424f;
+  --background-subtleBorderedNeutral-resting: #091e4208;
+  --background-subtleBorderedNeutral-pressed: #091e420f;
+  --border-focus: #388bff;
+  --border-neutral: #091e4224;
+  --iconBorder-brand: #1d7afc;
+  --iconBorder-danger: #e8422c;
+  --iconBorder-warning: #db6e00;
+  --iconBorder-success: #22a06b;
+  --iconBorder-discovery: #8270db;
+  --overlay-hover: #091e424f;
+  --overlay-pressed: #091e427a;
+  --text-selected: #0c66e4;
+  --text-highEmphasis: #172b4d;
+  --text-mediumEmphasis: #44546f;
+  --text-lowEmphasis: #626f86;
+  --text-onBold: #ffffff;
+  --text-onBoldWarning: #172b4d;
+  --text-link-resting: #0c66e4;
+  --text-link-pressed: #0055cc;
+  --text-brand: #0055cc;
+  --text-warning: #974f0c;
+  --text-danger: #b22515;
+  --text-success: #216e4e;
+  --text-discovery: #5e4db2;
+  --text-disabled: #8993a5;
+  --card: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f;
+  --overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424f;
+  --UNSAFE_util-transparent: transparent;
+  --UNSAFE_util-MISSING_TOKEN: hotpink;
+
+  /* namespaced */
+
+  --ds-accent-boldBlue: #579dff;
+  --ds-accent-boldGreen: #3acf91;
+  --ds-accent-boldOrange: #ffa333;
+  --ds-accent-boldPurple: #9f8fef;
+  --ds-accent-boldRed: #f97362;
+  --ds-accent-boldTeal: #53c8d5;
+  --ds-accent-subtleBlue: #cce0ff;
+  --ds-accent-subtleGreen: #aff3d6;
+  --ds-accent-subtleMagenta: #fdd0ec;
+  --ds-accent-subtleOrange: #ffdeb8;
+  --ds-accent-subtlePurple: #dfd8fd;
+  --ds-accent-subtleRed: #ffd2cc;
+  --ds-accent-subtleTeal: #adeef5;
+  --ds-background-sunken: #091e4208;
+  --ds-background-default: #ffffff;
+  --ds-background-card: #ffffff;
+  --ds-background-overlay: #ffffff;
+  --ds-background-selected-resting: #e9f2ff;
+  --ds-background-selected-hover: #cce0ff;
+  --ds-background-selected-pressed: #85b8ff;
+  --ds-background-blanket: #091e427a;
+  --ds-background-disabled: #091e420f;
+  --ds-background-boldBrand-resting: #0c66e4;
+  --ds-background-boldBrand-hover: #0055cc;
+  --ds-background-boldBrand-pressed: #09326c;
+  --ds-background-subtleBrand-resting: #e9f2ff;
+  --ds-background-subtleBrand-hover: #cce0ff;
+  --ds-background-subtleBrand-pressed: #85b8ff;
+  --ds-background-boldDanger-resting: #ce2e1c;
+  --ds-background-boldDanger-hover: #b22515;
+  --ds-background-boldDanger-pressed: #601d16;
+  --ds-background-subtleDanger-resting: #ffedeb;
+  --ds-background-subtleDanger-hover: #ffd2cc;
+  --ds-background-subtleDanger-pressed: #ff9a8f;
+  --ds-background-boldWarning-resting: #ebb800;
+  --ds-background-boldWarning-hover: #d19d00;
+  --ds-background-boldWarning-pressed: #b38600;
+  --ds-background-subtleWarning-resting: #fff7d6;
+  --ds-background-subtleWarning-hover: #ffe785;
+  --ds-background-subtleWarning-pressed: #ffd138;
+  --ds-background-boldSuccess-resting: #1f845a;
+  --ds-background-boldSuccess-hover: #216e4e;
+  --ds-background-boldSuccess-pressed: #164b35;
+  --ds-background-subtleSuccess-resting: #dffcf0;
+  --ds-background-subtleSuccess-hover: #aff3d6;
+  --ds-background-subtleSuccess-pressed: #76e0b4;
+  --ds-background-boldDiscovery-resting: #6e5dc6;
+  --ds-background-boldDiscovery-hover: #5e4db2;
+  --ds-background-boldDiscovery-pressed: #352c63;
+  --ds-background-subtleDiscovery-resting: #f3f0ff;
+  --ds-background-subtleDiscovery-hover: #dfd8fd;
+  --ds-background-subtleDiscovery-pressed: #b8acf6;
+  --ds-background-boldNeutral-resting: #44546f;
+  --ds-background-boldNeutral-hover: #2c3e5d;
+  --ds-background-boldNeutral-pressed: #172b4d;
+  --ds-background-transparentNeutral-hover: #091e420f;
+  --ds-background-transparentNeutral-pressed: #091e4224;
+  --ds-background-subtleNeutral-resting: #091e420f;
+  --ds-background-subtleNeutral-hover: #091e4224;
+  --ds-background-subtleNeutral-pressed: #091e424f;
+  --ds-background-subtleBorderedNeutral-resting: #091e4208;
+  --ds-background-subtleBorderedNeutral-pressed: #091e420f;
+  --ds-border-focus: #388bff;
+  --ds-border-neutral: #091e4224;
+  --ds-iconBorder-brand: #1d7afc;
+  --ds-iconBorder-danger: #e8422c;
+  --ds-iconBorder-warning: #db6e00;
+  --ds-iconBorder-success: #22a06b;
+  --ds-iconBorder-discovery: #8270db;
+  --ds-overlay-hover: #091e424f;
+  --ds-overlay-pressed: #091e427a;
+  --ds-text-selected: #0c66e4;
+  --ds-text-highEmphasis: #172b4d;
+  --ds-text-mediumEmphasis: #44546f;
+  --ds-text-lowEmphasis: #626f86;
+  --ds-text-onBold: #ffffff;
+  --ds-text-onBoldWarning: #172b4d;
+  --ds-text-link-resting: #0c66e4;
+  --ds-text-link-pressed: #0055cc;
+  --ds-text-brand: #0055cc;
+  --ds-text-warning: #974f0c;
+  --ds-text-danger: #b22515;
+  --ds-text-success: #216e4e;
+  --ds-text-discovery: #5e4db2;
+  --ds-text-disabled: #8993a5;
+  --ds-card: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f;
+  --ds-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424f;
+  --ds-UNSAFE_util-transparent: transparent;
+  --ds-UNSAFE_util-MISSING_TOKEN: #fa11f2;
+}
+
+html[data-theme='dark'] {
+  --accent-boldBlue: #0c66e4;
+  --accent-boldGreen: #1f845a;
+  --accent-boldOrange: #b85c00;
+  --accent-boldPurple: #6e5dc6;
+  --accent-boldRed: #ce2e1c;
+  --accent-boldTeal: #1d7f8c;
+  --accent-subtleBlue: #09326c;
+  --accent-subtleGreen: #164b35;
+  --accent-subtleMagenta: #50253f;
+  --accent-subtleOrange: #5f3811;
+  --accent-subtlePurple: #352c63;
+  --accent-subtleRed: #601d16;
+  --accent-subtleTeal: #1d474c;
+  --background-sunken: #03040454;
+  --background-default: #161a1d;
+  --background-card: #1d2125;
+  --background-overlay: #22272b;
+  --background-selected-resting: #a1bdd914;
+  --background-selected-hover: #a6c5e229;
+  --background-selected-pressed: #bfdbf847;
+  --background-blanket: #03040454;
+  --background-disabled: #a1bdd914;
+  --background-boldBrand-resting: #579dff;
+  --background-boldBrand-hover: #85b8ff;
+  --background-boldBrand-pressed: #cce0ff;
+  --background-subtleBrand-resting: #082145;
+  --background-subtleBrand-hover: #09326c;
+  --background-subtleBrand-pressed: #0055cc;
+  --background-boldDanger-resting: #f97362;
+  --background-boldDanger-hover: #ff9a8f;
+  --background-boldDanger-pressed: #ffd2cc;
+  --background-subtleDanger-resting: #391713;
+  --background-subtleDanger-hover: #601d16;
+  --background-subtleDanger-pressed: #b22515;
+  --background-boldWarning-resting: #ebb800;
+  --background-boldWarning-hover: #ffd138;
+  --background-boldWarning-pressed: #ffe785;
+  --background-subtleWarning-resting: #3d2e00;
+  --background-subtleWarning-hover: #533f04;
+  --background-subtleWarning-pressed: #7f5f01;
+  --background-boldSuccess-resting: #3acf91;
+  --background-boldSuccess-hover: #76e0b4;
+  --background-boldSuccess-pressed: #aff3d6;
+  --background-subtleSuccess-resting: #133527;
+  --background-subtleSuccess-hover: #164b35;
+  --background-subtleSuccess-pressed: #216e4e;
+  --background-boldDiscovery-resting: #9f8fef;
+  --background-boldDiscovery-hover: #b8acf6;
+  --background-boldDiscovery-pressed: #dfd8fd;
+  --background-subtleDiscovery-resting: #231c3f;
+  --background-subtleDiscovery-hover: #352c63;
+  --background-subtleDiscovery-pressed: #5e4db2;
+  --background-boldNeutral-resting: #9fadbc;
+  --background-boldNeutral-hover: #b6c2cf;
+  --background-boldNeutral-pressed: #c7d1db;
+  --background-transparentNeutral-hover: #a1bdd914;
+  --background-transparentNeutral-pressed: #a6c5e229;
+  --background-subtleNeutral-resting: #a1bdd914;
+  --background-subtleNeutral-hover: #a6c5e229;
+  --background-subtleNeutral-pressed: #bfdbf847;
+  --background-subtleBorderedNeutral-resting: #bcd6f00a;
+  --background-subtleBorderedNeutral-pressed: #a1bdd914;
+  --border-focus: #85b8ff;
+  --border-neutral: #a6c5e229;
+  --iconBorder-brand: #388bff;
+  --iconBorder-danger: #f35844;
+  --iconBorder-warning: #d19d00;
+  --iconBorder-success: #2abb7f;
+  --iconBorder-discovery: #8f7ee7;
+  --overlay-hover: #bfdbf847;
+  --overlay-pressed: #a3c0db7a;
+  --text-selected: #579dff;
+  --text-highEmphasis: #c7d1db;
+  --text-mediumEmphasis: #9fadbc;
+  --text-lowEmphasis: #8696a7;
+  --text-onBold: #161a1d;
+  --text-onBoldWarning: #161a1d;
+  --text-link-resting: #579dff;
+  --text-link-pressed: #85b8ff;
+  --text-brand: #85b8ff;
+  --text-warning: #ffd138;
+  --text-danger: #ff9a8f;
+  --text-success: #76e0b4;
+  --text-discovery: #b8acf6;
+  --text-disabled: #5a6977;
+  --card: 0px 1px 1px #03040480, 0px 0px 1px #03040480;
+  --overlay: inset 0px 0px 0px 1px #bcd6f00a, 0px 8px 12px #0304045c,
+    0px 0px 1px #03040480;
+  --UNSAFE_util-transparent: transparent;
+  --UNSAFE_util-MISSING_TOKEN: hotpink;
+
+  /* namespaced */
+
+  --ds-accent-boldBlue: #0c66e4;
+  --ds-accent-boldGreen: #1f845a;
+  --ds-accent-boldOrange: #b85c00;
+  --ds-accent-boldPurple: #6e5dc6;
+  --ds-accent-boldRed: #ce2e1c;
+  --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: #601d16;
+  --ds-accent-subtleTeal: #1d474c;
+  --ds-background-sunken: #03040454;
+  --ds-background-default: #161a1d;
+  --ds-background-card: #1d2125;
+  --ds-background-overlay: #22272b;
+  --ds-background-selected-resting: #a1bdd914;
+  --ds-background-selected-hover: #a6c5e229;
+  --ds-background-selected-pressed: #bfdbf847;
+  --ds-background-blanket: #03040454;
+  --ds-background-disabled: #a1bdd914;
+  --ds-background-boldBrand-resting: #579dff;
+  --ds-background-boldBrand-hover: #85b8ff;
+  --ds-background-boldBrand-pressed: #cce0ff;
+  --ds-background-subtleBrand-resting: #082145;
+  --ds-background-subtleBrand-hover: #09326c;
+  --ds-background-subtleBrand-pressed: #0055cc;
+  --ds-background-boldDanger-resting: #f97362;
+  --ds-background-boldDanger-hover: #ff9a8f;
+  --ds-background-boldDanger-pressed: #ffd2cc;
+  --ds-background-subtleDanger-resting: #391713;
+  --ds-background-subtleDanger-hover: #601d16;
+  --ds-background-subtleDanger-pressed: #b22515;
+  --ds-background-boldWarning-resting: #ebb800;
+  --ds-background-boldWarning-hover: #ffd138;
+  --ds-background-boldWarning-pressed: #ffe785;
+  --ds-background-subtleWarning-resting: #3d2e00;
+  --ds-background-subtleWarning-hover: #533f04;
+  --ds-background-subtleWarning-pressed: #7f5f01;
+  --ds-background-boldSuccess-resting: #3acf91;
+  --ds-background-boldSuccess-hover: #76e0b4;
+  --ds-background-boldSuccess-pressed: #aff3d6;
+  --ds-background-subtleSuccess-resting: #133527;
+  --ds-background-subtleSuccess-hover: #164b35;
+  --ds-background-subtleSuccess-pressed: #216e4e;
+  --ds-background-boldDiscovery-resting: #9f8fef;
+  --ds-background-boldDiscovery-hover: #b8acf6;
+  --ds-background-boldDiscovery-pressed: #dfd8fd;
+  --ds-background-subtleDiscovery-resting: #231c3f;
+  --ds-background-subtleDiscovery-hover: #352c63;
+  --ds-background-subtleDiscovery-pressed: #5e4db2;
+  --ds-background-boldNeutral-resting: #9fadbc;
+  --ds-background-boldNeutral-hover: #b6c2cf;
+  --ds-background-boldNeutral-pressed: #c7d1db;
+  --ds-background-transparentNeutral-hover: #a1bdd914;
+  --ds-background-transparentNeutral-pressed: #a6c5e229;
+  --ds-background-subtleNeutral-resting: #a1bdd914;
+  --ds-background-subtleNeutral-hover: #a6c5e229;
+  --ds-background-subtleNeutral-pressed: #bfdbf847;
+  --ds-background-subtleBorderedNeutral-resting: #bcd6f00a;
+  --ds-background-subtleBorderedNeutral-pressed: #a1bdd914;
+  --ds-border-focus: #85b8ff;
+  --ds-border-neutral: #a6c5e229;
+  --ds-iconBorder-brand: #388bff;
+  --ds-iconBorder-danger: #f35844;
+  --ds-iconBorder-warning: #d19d00;
+  --ds-iconBorder-success: #2abb7f;
+  --ds-iconBorder-discovery: #8f7ee7;
+  --ds-overlay-hover: #bfdbf847;
+  --ds-overlay-pressed: #a3c0db7a;
+  --ds-text-selected: #579dff;
+  --ds-text-highEmphasis: #c7d1db;
+  --ds-text-mediumEmphasis: #9fadbc;
+  --ds-text-lowEmphasis: #8696a7;
+  --ds-text-onBold: #161a1d;
+  --ds-text-onBoldWarning: #161a1d;
+  --ds-text-link-resting: #579dff;
+  --ds-text-link-pressed: #85b8ff;
+  --ds-text-brand: #85b8ff;
+  --ds-text-warning: #ffd138;
+  --ds-text-danger: #ff9a8f;
+  --ds-text-success: #76e0b4;
+  --ds-text-discovery: #b8acf6;
+  --ds-text-disabled: #5a6977;
+  --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-UNSAFE_util-transparent: transparent;
+  --ds-UNSAFE_util-MISSING_TOKEN: #fa11f2;
+}

package/tokens-browser-extension/background.js

@@ -0,0 +1,75 @@
+/* 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

@@ -0,0 +1,75 @@
+/* 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

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

package/tokens-browser-extension/devtools.js

@@ -0,0 +1,14 @@
+/* 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

@@ -0,0 +1,36 @@
+{
+    "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"
+    ],
+    "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAs88BPdeATfZMpEmyioaG2gS8OXpcEYKTnfriDiOPrHApjiMOrbiMU2cFZsbxqKpBMktKrmOa6PRq328H6N4QN42p2c9eGdY1Mgun9UAQFV1EQWsUelAWzKeZRMRPWVBTnMHVRIHe7p9cXoHCTRB0kIbqR+P7zhxaf2bCaaiQ/UUMeX7LFLDoXNCmuFOnjLLupkNgJJdPIDCHpEypwQCpNNUH4UsOxJ0yTfAplYdw7cc7ZwSh/BJqAWRplywkXwRrL5FeFfXknIi/tMZzxYv4ZM89CY5ogPr1JZMVA5sw0xW0oh81wLHa6Y47mmPXgMtzyNKZ/QJRP6b66uNuot+FXQIDAQAB",
+    "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

@@ -0,0 +1,10 @@
+/* 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

@@ -0,0 +1,36 @@
+/* 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

@@ -0,0 +1,25 @@
+<!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>