@atlaskit/tokens 0.4.1 → 0.6.1

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,36 +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"
-    ],
-    "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

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