@atlaskit/tokens 0.2.1 → 0.4.2

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>

package/tokens-browser-extension/panel.js

@@ -0,0 +1,46 @@
+/* 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,
+);

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

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-var renameMapping = {};
-var _default = renameMapping;
-exports.default = _default;

package/dist/cjs/tokens/token-names.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
-// Re-generate by running `yarn build tokens`.
-var tokens = {
-  'color.accent.boldBlue': '--accent-boldBlue',
-  'color.accent.boldGreen': '--accent-boldGreen',
-  'color.accent.boldOrange': '--accent-boldOrange',
-  'color.accent.boldPurple': '--accent-boldPurple',
-  'color.accent.boldRed': '--accent-boldRed',
-  'color.accent.boldTeal': '--accent-boldTeal',
-  'color.accent.subtleBlue': '--accent-subtleBlue',
-  'color.accent.subtleGreen': '--accent-subtleGreen',
-  'color.accent.subtleMagenta': '--accent-subtleMagenta',
-  'color.accent.subtleOrange': '--accent-subtleOrange',
-  'color.accent.subtlePurple': '--accent-subtlePurple',
-  'color.accent.subtleRed': '--accent-subtleRed',
-  'color.accent.subtleTeal': '--accent-subtleTeal',
-  'color.background.sunken': '--background-sunken',
-  'color.background.default': '--background-default',
-  'color.background.card': '--background-card',
-  'color.background.overlay': '--background-overlay',
-  'color.background.selected.resting': '--background-selected-resting',
-  'color.background.selected.hover': '--background-selected-hover',
-  'color.background.selected.pressed': '--background-selected-pressed',
-  'color.background.blanket': '--background-blanket',
-  'color.background.disabled': '--background-disabled',
-  'color.background.boldBrand.resting': '--background-boldBrand-resting',
-  'color.background.boldBrand.hover': '--background-boldBrand-hover',
-  'color.background.boldBrand.pressed': '--background-boldBrand-pressed',
-  'color.background.subtleBrand.resting': '--background-subtleBrand-resting',
-  'color.background.subtleBrand.hover': '--background-subtleBrand-hover',
-  'color.background.subtleBrand.pressed': '--background-subtleBrand-pressed',
-  'color.background.boldDanger.resting': '--background-boldDanger-resting',
-  'color.background.boldDanger.hover': '--background-boldDanger-hover',
-  'color.background.boldDanger.pressed': '--background-boldDanger-pressed',
-  'color.background.subtleDanger.resting': '--background-subtleDanger-resting',
-  'color.background.subtleDanger.hover': '--background-subtleDanger-hover',
-  'color.background.subtleDanger.pressed': '--background-subtleDanger-pressed',
-  'color.background.boldWarning.resting': '--background-boldWarning-resting',
-  'color.background.boldWarning.hover': '--background-boldWarning-hover',
-  'color.background.boldWarning.pressed': '--background-boldWarning-pressed',
-  'color.background.subtleWarning.resting': '--background-subtleWarning-resting',
-  'color.background.subtleWarning.hover': '--background-subtleWarning-hover',
-  'color.background.subtleWarning.pressed': '--background-subtleWarning-pressed',
-  'color.background.boldSuccess.resting': '--background-boldSuccess-resting',
-  'color.background.boldSuccess.hover': '--background-boldSuccess-hover',
-  'color.background.boldSuccess.pressed': '--background-boldSuccess-pressed',
-  'color.background.subtleSuccess.resting': '--background-subtleSuccess-resting',
-  'color.background.subtleSuccess.hover': '--background-subtleSuccess-hover',
-  'color.background.subtleSuccess.pressed': '--background-subtleSuccess-pressed',
-  'color.background.boldDiscovery.resting': '--background-boldDiscovery-resting',
-  'color.background.boldDiscovery.hover': '--background-boldDiscovery-hover',
-  'color.background.boldDiscovery.pressed': '--background-boldDiscovery-pressed',
-  'color.background.subtleDiscovery.resting': '--background-subtleDiscovery-resting',
-  'color.background.subtleDiscovery.hover': '--background-subtleDiscovery-hover',
-  'color.background.subtleDiscovery.pressed': '--background-subtleDiscovery-pressed',
-  'color.background.boldNeutral.resting': '--background-boldNeutral-resting',
-  'color.background.boldNeutral.hover': '--background-boldNeutral-hover',
-  'color.background.boldNeutral.pressed': '--background-boldNeutral-pressed',
-  'color.background.transparentNeutral.hover': '--background-transparentNeutral-hover',
-  'color.background.transparentNeutral.pressed': '--background-transparentNeutral-pressed',
-  'color.background.subtleNeutral.resting': '--background-subtleNeutral-resting',
-  'color.background.subtleNeutral.hover': '--background-subtleNeutral-hover',
-  'color.background.subtleNeutral.pressed': '--background-subtleNeutral-pressed',
-  'color.background.subtleBorderedNeutral.resting': '--background-subtleBorderedNeutral-resting',
-  'color.background.subtleBorderedNeutral.pressed': '--background-subtleBorderedNeutral-pressed',
-  'color.border.focus': '--border-focus',
-  'color.border.neutral': '--border-neutral',
-  'color.iconBorder.brand': '--iconBorder-brand',
-  'color.iconBorder.danger': '--iconBorder-danger',
-  'color.iconBorder.warning': '--iconBorder-warning',
-  'color.iconBorder.success': '--iconBorder-success',
-  'color.iconBorder.discovery': '--iconBorder-discovery',
-  'color.overlay.hover': '--overlay-hover',
-  'color.overlay.pressed': '--overlay-pressed',
-  'color.text.selected': '--text-selected',
-  'color.text.highEmphasis': '--text-highEmphasis',
-  'color.text.mediumEmphasis': '--text-mediumEmphasis',
-  'color.text.lowEmphasis': '--text-lowEmphasis',
-  'color.text.onBold': '--text-onBold',
-  'color.text.onBoldWarning': '--text-onBoldWarning',
-  'color.text.link.resting': '--text-link-resting',
-  'color.text.link.pressed': '--text-link-pressed',
-  'color.text.brand': '--text-brand',
-  'color.text.warning': '--text-warning',
-  'color.text.danger': '--text-danger',
-  'color.text.success': '--text-success',
-  'color.text.discovery': '--text-discovery',
-  'color.text.disabled': '--text-disabled',
-  'shadow.card': '--card',
-  'shadow.overlay': '--overlay',
-  'utility.UNSAFE_util.transparent': '--UNSAFE_util-transparent'
-};
-var _default = tokens;
-exports.default = _default;

package/dist/es2019/entry-points/token-default-values.js

@@ -1 +0,0 @@
-export { default } from '../tokens/token-default-values';

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

@@ -1,21 +0,0 @@
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-const renameMapping = {};
-export default renameMapping;

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

@@ -1,93 +0,0 @@
-// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
-// Re-generate by running `yarn build tokens`.
-const tokens = {
-  'color.accent.boldBlue': '--accent-boldBlue',
-  'color.accent.boldGreen': '--accent-boldGreen',
-  'color.accent.boldOrange': '--accent-boldOrange',
-  'color.accent.boldPurple': '--accent-boldPurple',
-  'color.accent.boldRed': '--accent-boldRed',
-  'color.accent.boldTeal': '--accent-boldTeal',
-  'color.accent.subtleBlue': '--accent-subtleBlue',
-  'color.accent.subtleGreen': '--accent-subtleGreen',
-  'color.accent.subtleMagenta': '--accent-subtleMagenta',
-  'color.accent.subtleOrange': '--accent-subtleOrange',
-  'color.accent.subtlePurple': '--accent-subtlePurple',
-  'color.accent.subtleRed': '--accent-subtleRed',
-  'color.accent.subtleTeal': '--accent-subtleTeal',
-  'color.background.sunken': '--background-sunken',
-  'color.background.default': '--background-default',
-  'color.background.card': '--background-card',
-  'color.background.overlay': '--background-overlay',
-  'color.background.selected.resting': '--background-selected-resting',
-  'color.background.selected.hover': '--background-selected-hover',
-  'color.background.selected.pressed': '--background-selected-pressed',
-  'color.background.blanket': '--background-blanket',
-  'color.background.disabled': '--background-disabled',
-  'color.background.boldBrand.resting': '--background-boldBrand-resting',
-  'color.background.boldBrand.hover': '--background-boldBrand-hover',
-  'color.background.boldBrand.pressed': '--background-boldBrand-pressed',
-  'color.background.subtleBrand.resting': '--background-subtleBrand-resting',
-  'color.background.subtleBrand.hover': '--background-subtleBrand-hover',
-  'color.background.subtleBrand.pressed': '--background-subtleBrand-pressed',
-  'color.background.boldDanger.resting': '--background-boldDanger-resting',
-  'color.background.boldDanger.hover': '--background-boldDanger-hover',
-  'color.background.boldDanger.pressed': '--background-boldDanger-pressed',
-  'color.background.subtleDanger.resting': '--background-subtleDanger-resting',
-  'color.background.subtleDanger.hover': '--background-subtleDanger-hover',
-  'color.background.subtleDanger.pressed': '--background-subtleDanger-pressed',
-  'color.background.boldWarning.resting': '--background-boldWarning-resting',
-  'color.background.boldWarning.hover': '--background-boldWarning-hover',
-  'color.background.boldWarning.pressed': '--background-boldWarning-pressed',
-  'color.background.subtleWarning.resting': '--background-subtleWarning-resting',
-  'color.background.subtleWarning.hover': '--background-subtleWarning-hover',
-  'color.background.subtleWarning.pressed': '--background-subtleWarning-pressed',
-  'color.background.boldSuccess.resting': '--background-boldSuccess-resting',
-  'color.background.boldSuccess.hover': '--background-boldSuccess-hover',
-  'color.background.boldSuccess.pressed': '--background-boldSuccess-pressed',
-  'color.background.subtleSuccess.resting': '--background-subtleSuccess-resting',
-  'color.background.subtleSuccess.hover': '--background-subtleSuccess-hover',
-  'color.background.subtleSuccess.pressed': '--background-subtleSuccess-pressed',
-  'color.background.boldDiscovery.resting': '--background-boldDiscovery-resting',
-  'color.background.boldDiscovery.hover': '--background-boldDiscovery-hover',
-  'color.background.boldDiscovery.pressed': '--background-boldDiscovery-pressed',
-  'color.background.subtleDiscovery.resting': '--background-subtleDiscovery-resting',
-  'color.background.subtleDiscovery.hover': '--background-subtleDiscovery-hover',
-  'color.background.subtleDiscovery.pressed': '--background-subtleDiscovery-pressed',
-  'color.background.boldNeutral.resting': '--background-boldNeutral-resting',
-  'color.background.boldNeutral.hover': '--background-boldNeutral-hover',
-  'color.background.boldNeutral.pressed': '--background-boldNeutral-pressed',
-  'color.background.transparentNeutral.hover': '--background-transparentNeutral-hover',
-  'color.background.transparentNeutral.pressed': '--background-transparentNeutral-pressed',
-  'color.background.subtleNeutral.resting': '--background-subtleNeutral-resting',
-  'color.background.subtleNeutral.hover': '--background-subtleNeutral-hover',
-  'color.background.subtleNeutral.pressed': '--background-subtleNeutral-pressed',
-  'color.background.subtleBorderedNeutral.resting': '--background-subtleBorderedNeutral-resting',
-  'color.background.subtleBorderedNeutral.pressed': '--background-subtleBorderedNeutral-pressed',
-  'color.border.focus': '--border-focus',
-  'color.border.neutral': '--border-neutral',
-  'color.iconBorder.brand': '--iconBorder-brand',
-  'color.iconBorder.danger': '--iconBorder-danger',
-  'color.iconBorder.warning': '--iconBorder-warning',
-  'color.iconBorder.success': '--iconBorder-success',
-  'color.iconBorder.discovery': '--iconBorder-discovery',
-  'color.overlay.hover': '--overlay-hover',
-  'color.overlay.pressed': '--overlay-pressed',
-  'color.text.selected': '--text-selected',
-  'color.text.highEmphasis': '--text-highEmphasis',
-  'color.text.mediumEmphasis': '--text-mediumEmphasis',
-  'color.text.lowEmphasis': '--text-lowEmphasis',
-  'color.text.onBold': '--text-onBold',
-  'color.text.onBoldWarning': '--text-onBoldWarning',
-  'color.text.link.resting': '--text-link-resting',
-  'color.text.link.pressed': '--text-link-pressed',
-  'color.text.brand': '--text-brand',
-  'color.text.warning': '--text-warning',
-  'color.text.danger': '--text-danger',
-  'color.text.success': '--text-success',
-  'color.text.discovery': '--text-discovery',
-  'color.text.disabled': '--text-disabled',
-  'shadow.card': '--card',
-  'shadow.overlay': '--overlay',
-  'utility.UNSAFE_util.transparent': '--UNSAFE_util-transparent'
-};
-export default tokens;

package/dist/esm/entry-points/token-default-values.js

@@ -1 +0,0 @@
-export { default } from '../tokens/token-default-values';

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

@@ -1,21 +0,0 @@
-/**
- * This file is intended to help create automation on top of renaming of tokens.
- *
- * When renaming tokens, you must first update the token at its source of truth.
- * For example: packages/design-system/tokens/src/tokens/atlassian-dark/color/accent.tsx
- *
- * That token might go from `color.accentBlueSubtle` to `color.accentBluePrimary`
- * which is totally acceptable on its own but for some platform targets, such as Figma,
- * we need to provide additional metadata to tell figma that this is a rename and not a removal/addition.
- *
- * To create a rename mapping:
- *
- * 1. Get the fully object path, separated by a '.', i.e. color.background.primary
- * 2. Create a key value pair to the renameMapping below, with key representing the old token and value representing the new token.
- * 3. Update the token at its source of truth
- * 4. run `yarn build tokens`
- * 5. The artifact containing the automation should now be available in the `/dist` folder. i.e. packages/design-system/tokens/dist/figma/atlassian-light/sync-figma-tokens.js
- * 6. After building make sure to remove the mapping from this file before checking it in
- */
-var renameMapping = {};
-export default renameMapping;