@atlaskit/tokens 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/tokens
 
+## 0.4.0
+
+### Minor Changes
+
+- [`b46c0681c29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b46c0681c29) - Adds "MISSING_TOKEN" for instances where a suitable token does not exist
+- [`d5e751f7236`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d5e751f7236) - Tweaks new palette colors to reflect feedback from the pilot program
+- [`2c855cf3bf4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c855cf3bf4) - New internal config change allows this package to be run pre-build by ts-node, allowing access to the babel plugin by repo build tooling
+
+  Removes token-default-values entrypoint
+
+- [`81a0d9b5692`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81a0d9b5692) - Pulled tokens babel plugin in and updated the entrypoint from `@atlaskit/babel-plugin-tokens` to `@atlaskit/tokens/babel-plugin`
+- [`4ec42b57298`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ec42b57298) - Updates the figma synchroniser to remove theme prefixes from tokens names, incorperate the isPalette flag into the group attribute and space separate interaction states. These changes improve the findability of tokens in figma
+
+### Patch Changes
+
+- [`a1ad2de440a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1ad2de440a) - Fixes internal types being coerced to implicit any.
+- [`286e1d43477`](https://bitbucket.org/atlassian/atlassian-frontend/commits/286e1d43477) - Updated internal token representation to include state/lifecycle metadata
+- [`ed086330194`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed086330194) - Internal file restructure for style-dictionary to group it’s inputs /src/tokens and outputs /src/artifacts in dedicated directories
+- [`9b1703048e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9b1703048e3) - Updates build tooling in preparation for the new taxonomy.
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -42,3 +42,31 @@ import { setGlobalTheme } from '@atlaskit/tokens';
 
 setGlobalTheme('light');
 ```
+
+# BabelPlugin
+
+A babel plugin to optimise performance and support fallbacks for Design System tokens.
+
+It replaces any calls to the `@atlaskit/tokens` token() function with the CSS value the function would return (i.e. var(--token-name) or
+variations with fallbacks).
+
+If there’s no fallback, the plugin (optionally) finds the token’s value from the default Atlassian theme, and sets it as the fallback.
+
+If there is a fallback defined in code, it’s inserted into the style (expressions are inserted using template strings).
+
+## Usage
+
+Add the plugin to your babel configuration:
+
+```
+{
+  "plugins": ["@atlaskit/tokens/babel-plugin"]
+}
+```
+
+### Options
+
+Currently the plugin supports one option, `shouldUseAutoFallback`. When enabled, the plugin will fetch the token's value in the default
+Atlassian theme (currently `atlassian-light`) and use it as the fallback value. 
+
+This is useful for cases where tokens are in use, but token definitions aren't present in the top-level page CSS.

package/babel-plugin/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/tokens/babel-plugin",
+  "main": "../dist/cjs/entry-points/babel-plugin.js",
+  "module": "../dist/esm/entry-points/babel-plugin.js",
+  "module:es2019": "../dist/es2019/entry-points/babel-plugin.js",
+  "types": "../dist/types/entry-points/babel-plugin.d.ts"
+}

package/css/atlassian-dark.css

@@ -3,25 +3,25 @@
 html[data-theme="dark"] {
   --ds-accent-boldBlue: #0C66E4;
   --ds-accent-boldGreen: #1F845A;
-  --ds-accent-boldOrange: #B85C00;
+  --ds-accent-boldOrange: #B65C02;
   --ds-accent-boldPurple: #6E5DC6;
-  --ds-accent-boldRed: #CE2E1C;
+  --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: #601D16;
+  --ds-accent-subtleRed: #601E16;
   --ds-accent-subtleTeal: #1D474C;
-  --ds-background-sunken: #03040454;
+  --ds-background-sunken: #03040442;
   --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-blanket: #03040442;
   --ds-background-disabled: #A1BDD914;
   --ds-background-boldBrand-resting: #579DFF;
   --ds-background-boldBrand-hover: #85B8FF;
@@ -29,21 +29,21 @@ html[data-theme="dark"] {
   --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-resting: #F87462;
+  --ds-background-boldDanger-hover: #FF9C8F;
   --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-subtleDanger-resting: #391813;
+  --ds-background-subtleDanger-hover: #601E16;
+  --ds-background-subtleDanger-pressed: #AE2A19;
+  --ds-background-boldWarning-resting: #E2B203;
+  --ds-background-boldWarning-hover: #F5CD47;
+  --ds-background-boldWarning-pressed: #F8E6A0;
   --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-boldSuccess-resting: #4BCE97;
+  --ds-background-boldSuccess-hover: #7EE2B8;
+  --ds-background-boldSuccess-pressed: #BAF3DB;
   --ds-background-subtleSuccess-resting: #133527;
   --ds-background-subtleSuccess-hover: #164B35;
   --ds-background-subtleSuccess-pressed: #216E4E;
@@ -66,12 +66,12 @@ html[data-theme="dark"] {
   --ds-border-focus: #85B8FF;
   --ds-border-neutral: #A6C5E229;
   --ds-iconBorder-brand: #388BFF;
-  --ds-iconBorder-danger: #F35844;
-  --ds-iconBorder-warning: #D19D00;
+  --ds-iconBorder-danger: #EF5C48;
+  --ds-iconBorder-warning: #CF9F02;
   --ds-iconBorder-success: #2ABB7F;
   --ds-iconBorder-discovery: #8F7EE7;
   --ds-overlay-hover: #BFDBF847;
-  --ds-overlay-pressed: #A3C0DB7A;
+  --ds-overlay-pressed: #A9C5DF7A;
   --ds-text-selected: #579DFF;
   --ds-text-highEmphasis: #C7D1DB;
   --ds-text-mediumEmphasis: #9FADBC;
@@ -81,12 +81,13 @@ html[data-theme="dark"] {
   --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-warning: #F5CD47;
+  --ds-text-danger: #FF9C8F;
+  --ds-text-success: #7EE2B8;
   --ds-text-discovery: #B8ACF6;
-  --ds-text-disabled: #5A6977;
+  --ds-text-disabled: #5C6C7A;
   --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/css/atlassian-light.css

@@ -2,18 +2,18 @@
 /* Re-generate by running `yarn build tokens`. */
 :root, html[data-theme="light"] {
   --ds-accent-boldBlue: #579DFF;
-  --ds-accent-boldGreen: #3ACF91;
-  --ds-accent-boldOrange: #FFA333;
+  --ds-accent-boldGreen: #4BCE97;
+  --ds-accent-boldOrange: #FAA53D;
   --ds-accent-boldPurple: #9F8FEF;
-  --ds-accent-boldRed: #F97362;
-  --ds-accent-boldTeal: #53C8D5;
+  --ds-accent-boldRed: #F87462;
+  --ds-accent-boldTeal: #60C6D2;
   --ds-accent-subtleBlue: #CCE0FF;
-  --ds-accent-subtleGreen: #AFF3D6;
+  --ds-accent-subtleGreen: #BAF3DB;
   --ds-accent-subtleMagenta: #FDD0EC;
-  --ds-accent-subtleOrange: #FFDEB8;
+  --ds-accent-subtleOrange: #FFE2BD;
   --ds-accent-subtlePurple: #DFD8FD;
   --ds-accent-subtleRed: #FFD2CC;
-  --ds-accent-subtleTeal: #ADEEF5;
+  --ds-accent-subtleTeal: #C1F0F5;
   --ds-background-sunken: #091E4208;
   --ds-background-default: #FFFFFF;
   --ds-background-card: #FFFFFF;
@@ -29,24 +29,24 @@
   --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-boldDanger-resting: #CA3521;
+  --ds-background-boldDanger-hover: #AE2A19;
+  --ds-background-boldDanger-pressed: #601E16;
   --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-subtleDanger-pressed: #FF9C8F;
+  --ds-background-boldWarning-resting: #E2B203;
+  --ds-background-boldWarning-hover: #CF9F02;
   --ds-background-boldWarning-pressed: #B38600;
   --ds-background-subtleWarning-resting: #FFF7D6;
-  --ds-background-subtleWarning-hover: #FFE785;
-  --ds-background-subtleWarning-pressed: #FFD138;
+  --ds-background-subtleWarning-hover: #F8E6A0;
+  --ds-background-subtleWarning-pressed: #F5CD47;
   --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-subtleSuccess-hover: #BAF3DB;
+  --ds-background-subtleSuccess-pressed: #7EE2B8;
   --ds-background-boldDiscovery-resting: #6E5DC6;
   --ds-background-boldDiscovery-hover: #5E4DB2;
   --ds-background-boldDiscovery-pressed: #352C63;
@@ -66,8 +66,8 @@
   --ds-border-focus: #388BFF;
   --ds-border-neutral: #091E4224;
   --ds-iconBorder-brand: #1D7AFC;
-  --ds-iconBorder-danger: #E8422C;
-  --ds-iconBorder-warning: #DB6E00;
+  --ds-iconBorder-danger: #E34935;
+  --ds-iconBorder-warning: #D97008;
   --ds-iconBorder-success: #22A06B;
   --ds-iconBorder-discovery: #8270DB;
   --ds-overlay-hover: #091E424F;
@@ -82,11 +82,12 @@
   --ds-text-link-pressed: #0055CC;
   --ds-text-brand: #0055CC;
   --ds-text-warning: #974F0C;
-  --ds-text-danger: #B22515;
+  --ds-text-danger: #AE2A19;
   --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;
 }

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// THIS IS AN AUTO-GENERATED FILE DO NOT MODIFY DIRECTLY
+
+/**
+ * This file is intended to help automate renaming of tokens.
+ *
+ * 1. Mark the old token's 'state' as deprecated
+ * 2. Add a 'rename' attribute to the token with the value 'my.new.token'
+ * 3. Create a new token matching the token above: 'my.new.token'
+ * 4. Run 'bolt build tokens' to have you changes reflected in this map
+ * 5. eslint and other tools will now use this to automate replacing tokens
+ *
+ * These changes will then be picked up by our tooling, which will attempt to
+ * migrate as many of these renames as possible
+ */
+var renameMapper = {};
+var _default = renameMapper;
+exports.default = _default;

package/dist/cjs/{tokens → artifacts}/token-default-values.js

@@ -12,18 +12,18 @@ exports.default = void 0;
  */
 var defaultTokenValues = {
   'color.accent.boldBlue': '#579DFF',
-  'color.accent.boldGreen': '#3ACF91',
-  'color.accent.boldOrange': '#FFA333',
+  'color.accent.boldGreen': '#4BCE97',
+  'color.accent.boldOrange': '#FAA53D',
   'color.accent.boldPurple': '#9F8FEF',
-  'color.accent.boldRed': '#F97362',
-  'color.accent.boldTeal': '#53C8D5',
+  'color.accent.boldRed': '#F87462',
+  'color.accent.boldTeal': '#60C6D2',
   'color.accent.subtleBlue': '#CCE0FF',
-  'color.accent.subtleGreen': '#AFF3D6',
+  'color.accent.subtleGreen': '#BAF3DB',
   'color.accent.subtleMagenta': '#FDD0EC',
-  'color.accent.subtleOrange': '#FFDEB8',
+  'color.accent.subtleOrange': '#FFE2BD',
   'color.accent.subtlePurple': '#DFD8FD',
   'color.accent.subtleRed': '#FFD2CC',
-  'color.accent.subtleTeal': '#ADEEF5',
+  'color.accent.subtleTeal': '#C1F0F5',
   'color.background.sunken': '#091E4208',
   'color.background.default': '#FFFFFF',
   'color.background.card': '#FFFFFF',
@@ -39,24 +39,24 @@ var defaultTokenValues = {
   'color.background.subtleBrand.resting': '#E9F2FF',
   'color.background.subtleBrand.hover': '#CCE0FF',
   'color.background.subtleBrand.pressed': '#85B8FF',
-  'color.background.boldDanger.resting': '#CE2E1C',
-  'color.background.boldDanger.hover': '#B22515',
-  'color.background.boldDanger.pressed': '#601D16',
+  'color.background.boldDanger.resting': '#CA3521',
+  'color.background.boldDanger.hover': '#AE2A19',
+  'color.background.boldDanger.pressed': '#601E16',
   'color.background.subtleDanger.resting': '#FFEDEB',
   'color.background.subtleDanger.hover': '#FFD2CC',
-  'color.background.subtleDanger.pressed': '#FF9A8F',
-  'color.background.boldWarning.resting': '#EBB800',
-  'color.background.boldWarning.hover': '#D19D00',
+  'color.background.subtleDanger.pressed': '#FF9C8F',
+  'color.background.boldWarning.resting': '#E2B203',
+  'color.background.boldWarning.hover': '#CF9F02',
   'color.background.boldWarning.pressed': '#B38600',
   'color.background.subtleWarning.resting': '#FFF7D6',
-  'color.background.subtleWarning.hover': '#FFE785',
-  'color.background.subtleWarning.pressed': '#FFD138',
+  'color.background.subtleWarning.hover': '#F8E6A0',
+  'color.background.subtleWarning.pressed': '#F5CD47',
   'color.background.boldSuccess.resting': '#1F845A',
   'color.background.boldSuccess.hover': '#216E4E',
   'color.background.boldSuccess.pressed': '#164B35',
   'color.background.subtleSuccess.resting': '#DFFCF0',
-  'color.background.subtleSuccess.hover': '#AFF3D6',
-  'color.background.subtleSuccess.pressed': '#76E0B4',
+  'color.background.subtleSuccess.hover': '#BAF3DB',
+  'color.background.subtleSuccess.pressed': '#7EE2B8',
   'color.background.boldDiscovery.resting': '#6E5DC6',
   'color.background.boldDiscovery.hover': '#5E4DB2',
   'color.background.boldDiscovery.pressed': '#352C63',
@@ -76,8 +76,8 @@ var defaultTokenValues = {
   'color.border.focus': '#388BFF',
   'color.border.neutral': '#091E4224',
   'color.iconBorder.brand': '#1D7AFC',
-  'color.iconBorder.danger': '#E8422C',
-  'color.iconBorder.warning': '#DB6E00',
+  'color.iconBorder.danger': '#E34935',
+  'color.iconBorder.warning': '#D97008',
   'color.iconBorder.success': '#22A06B',
   'color.iconBorder.discovery': '#8270DB',
   'color.overlay.hover': '#091E424F',
@@ -92,13 +92,14 @@ var defaultTokenValues = {
   'color.text.link.pressed': '#0055CC',
   'color.text.brand': '#0055CC',
   'color.text.warning': '#974F0C',
-  'color.text.danger': '#B22515',
+  'color.text.danger': '#AE2A19',
   'color.text.success': '#216E4E',
   'color.text.discovery': '#5E4DB2',
   'color.text.disabled': '#8993A5',
   'shadow.card': '0px 1px 1px #091E4240, 0px 0px 1px #091E424F',
   'shadow.overlay': '0px 8px 12px #091E4226, 0px 0px 1px #091E424F',
-  'utility.UNSAFE_util.transparent': 'transparent'
+  'utility.UNSAFE_util.transparent': 'transparent',
+  'utility.UNSAFE_util.MISSING_TOKEN': '#FA11F2'
 };
 var _default = defaultTokenValues;
 exports.default = _default;

package/dist/cjs/{tokens → artifacts}/token-names.js

@@ -94,7 +94,8 @@ var tokens = {
   'color.text.disabled': '--ds-text-disabled',
   'shadow.card': '--ds-card',
   'shadow.overlay': '--ds-overlay',
-  'utility.UNSAFE_util.transparent': '--ds-UNSAFE_util-transparent'
+  'utility.UNSAFE_util.transparent': '--ds-UNSAFE_util-transparent',
+  'utility.UNSAFE_util.MISSING_TOKEN': '--ds-UNSAFE_util-MISSING_TOKEN'
 };
 var _default = tokens;
 exports.default = _default;