@atlaskit/tokens 0.1.1 → 0.4.0

package/dist/types/types.d.ts

@@ -1,24 +1,57 @@
-export interface Token<TValue, Group extends string> {
+import { ActiveTokens } from './artifacts/types';
+export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
+export declare type ActiveTokenStates = 'active';
+export declare type ReplacedTokenStates = 'deprecated' | 'deleted';
+export declare type TokenState = ActiveTokenStates | ReplacedTokenStates;
+export declare type Replacement = ActiveTokens[];
+export interface Token<TValue, Group extends Groups> {
     value: TValue;
     attributes: {
-        group?: Group;
+        group: Group;
         description?: string;
+        state?: TokenState;
+        replacement?: Replacement;
     };
 }
-export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
-export declare type PaintToken<Value extends string = ColorPalette> = Token<Value, 'paint'>;
-export declare type PaletteToken = Token<string, 'paint'> & {
+/**
+ * Base tokens define the raw values consumed by Design Tokens. They are a context-agnostic
+ * name:value pairing (for example, the base token N0 represents the value #FFFFFF ).
+ */
+export interface BaseToken<TValue, Group extends Groups> extends Token<TValue, Group> {
     attributes: {
-        isPalette: true;
+        group: Group;
     };
+}
+/**
+ * Design tokens represent single sources of truth to name and store semantic design decisions.
+ * They map a semantic name (color.background.default) to a base token (N0).
+ */
+export interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group> {
+    attributes: {
+        group: Group;
+        description: string;
+        state: ActiveTokenStates;
+        replacement?: undefined;
+    } | {
+        group: Group;
+        description: string;
+        state: ReplacedTokenStates;
+        replacement?: Replacement;
+    };
+}
+declare type OmitDistributive<T, K extends PropertyKey> = T extends any ? T extends object ? Id<DeepOmit<T, K>> : T : never;
+declare type Id<T> = {} & {
+    [P in keyof T]: T[P];
 };
-export declare type ValueSchema<Schema extends object> = {
-    [Key in keyof Schema]: ValueSchema<Omit<Schema[Key], 'attributes'>>;
-};
-export declare type AttributeSchema<Schema extends object> = {
-    [Key in keyof Schema]: AttributeSchema<Omit<Schema[Key], 'value'>>;
-};
-export declare type ShadowToken<Value extends string = ColorPalette> = Token<Array<{
+declare type DeepOmit<T extends any, K extends PropertyKey> = Omit<{
+    [P in keyof T]: OmitDistributive<T[P], K>;
+}, K>;
+export declare type ValueSchema<Schema extends object> = DeepOmit<Schema, 'attributes'>;
+export declare type AttributeSchema<Schema extends object> = DeepOmit<Schema, 'value'>;
+export declare type PaletteToken = BaseToken<string, 'palette'>;
+export declare type ColorPalette = keyof PaletteColorTokenSchema['color']['palette'];
+export declare type PaintToken<Value extends string = ColorPalette> = DesignToken<Value, 'paint'>;
+export declare type ShadowToken<Value extends string = ColorPalette> = DesignToken<Array<{
     color: Value;
     opacity: number;
     offset: {
@@ -29,7 +62,7 @@ export declare type ShadowToken<Value extends string = ColorPalette> = Token<Arr
     spread?: number;
     inset?: boolean;
 }>, 'shadow'>;
-export declare type RawToken = Token<string, 'raw'>;
+export declare type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema {
     color: {
         palette: {
@@ -313,7 +346,9 @@ export interface ShadowTokenSchema {
 export interface UtilTokenSchema {
     UNSAFE_util: {
         transparent: RawToken;
+        MISSING_TOKEN: RawToken;
     };
 }
 export declare type ColorTokenSchema = BackgroundColorTokenSchema & BorderColorTokenSchema & IconBorderColorTokenSchema & TextColorTokenSchema & AccentColorTokenSchema & UtilTokenSchema;
 export declare type TokenSchema = PaletteColorTokenSchema & ColorTokenSchema & ShadowTokenSchema;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.1.1",
+  "version": "0.4.0",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -21,7 +21,8 @@
   "af:exports": {
     ".": "./src/index.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
-    "./rename-mapping": "./src/entry-points/rename-mapping.tsx"
+    "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
+    "./babel-plugin": "./src/entry-points/babel-plugin.tsx"
   },
   "scripts": {
     "ak-postbuild": "yarn codegen-tokens && yarn check-clean-git",
@@ -29,12 +30,20 @@
     "codegen-tokens": "ts-node --project ../../../tsconfig.node.json ./scripts/style-dictionary/build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "@babel/traverse": "^7.15.0",
+    "@babel/types": "^7.15.0"
   },
   "devDependencies": {
+    "@atlaskit/code": "*",
+    "@atlaskit/lozenge": "*",
+    "@atlaskit/tabs": "*",
     "@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",
     "lodash": "^4.17.15",
     "prettier": "^2.1.1",
+    "react": "^16.8.0",
     "style-dictionary": "^3.0.0",
     "ts-node": "^10.0.0",
     "typescript": "3.9.6"
@@ -47,8 +56,11 @@
     "@repo/internal": {
       "design-system": "v1",
       "ui-components": "lite-mode",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/tokens-browser-extension/README.md

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

@@ -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);
+  });
+});