@atlaskit/tokens 1.3.2 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.4.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
+## 1.4.0
+
+### Minor Changes
+
+- [`36158b8bcb9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36158b8bcb9) - [ux] update color.border.input to meet 3:1 contrast
+
 ## 1.3.2
 
 ### Patch Changes

package/babel-plugin/package.json

@@ -8,9 +8,9 @@
   ],
   "types": "../dist/types/entry-points/babel-plugin.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/babel-plugin.d.ts"
+        "../dist/types-ts4.5/entry-points/babel-plugin.d.ts"
       ]
     }
   }

package/dist/cjs/artifacts/theme-import-map.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This allows users to compose their themes and only use the tokens that are requested.
  * When a new theme is created, the import should automatically be added to the map
  *
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -68,6 +68,18 @@ var themeImportsMap = {
       return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
       './themes/atlassian-dark-iteration'));
     });
+  },
+  'light-new-input-border': function lightNewInputBorder() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
+      './themes/atlassian-light-new-input-border'));
+    });
+  },
+  'dark-new-input-border': function darkNewInputBorder() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
+      './themes/atlassian-dark-new-input-border'));
+    });
   }
 };
 var _default = themeImportsMap;

package/dist/cjs/artifacts/themes/atlassian-dark-new-input-border.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
+ * @codegenCommand yarn build tokens
+ */
+var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border: #A6C5E229;\n  --ds-border-disabled: #A1BDD914;\n  --ds-border-focused: #85B8FF;\n  --ds-border-input: #738496;\n  --ds-border-inverse: #161A1D;\n  --ds-border-selected: #579DFF;\n  --ds-border-brand: #579DFF;\n  --ds-border-danger: #EF5C48;\n  --ds-border-warning: #CF9F02;\n  --ds-border-success: #2ABB7F;\n  --ds-border-discovery: #8F7EE7;\n  --ds-border-information: #388BFF;\n  --ds-border-bold: #738496;\n}\n";
+exports.default = _default;

package/dist/cjs/artifacts/themes/atlassian-light-new-input-border.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
+ * @codegenCommand yarn build tokens
+ */
+var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n  color-scheme: light;\n  --ds-border: #091E4224;\n  --ds-border-disabled: #091E420F;\n  --ds-border-focused: #388BFF;\n  --ds-border-input: #758195;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0C66E4;\n  --ds-border-brand: #0C66E4;\n  --ds-border-danger: #E34935;\n  --ds-border-warning: #D97008;\n  --ds-border-success: #22A06B;\n  --ds-border-discovery: #8270DB;\n  --ds-border-information: #1D7AFC;\n  --ds-border-bold: #758195;\n}\n";
+exports.default = _default;

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.3.2";
+var version = "1.4.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.3.2";
+var version = "1.4.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/set-global-theme.js

@@ -52,6 +52,9 @@ var getThemePreferences = function getThemePreferences(themeState) {
       themePreferences.push(themeId);
     }
   });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1')) {
+    themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
+  }
   return (0, _toConsumableArray2.default)(new Set(themePreferences));
 };
 

package/dist/cjs/theme-config.js

@@ -125,6 +125,26 @@ var themeOverrideConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-light-new-input-border': {
+    id: 'light-new-input-border',
+    displayName: 'Light Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'light',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-dark-new-input-border': {
+    id: 'dark-new-input-border',
+    displayName: 'Dark Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
   }
 };
 exports.themeOverrideConfig = themeOverrideConfig;

package/dist/cjs/tokens/atlassian-dark-new-input-border/color/border.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'DarkNeutral300A'
+      },
+      bold: {
+        value: 'DarkNeutral600'
+      },
+      inverse: {
+        value: 'DarkNeutral0'
+      },
+      focused: {
+        value: 'Blue300'
+      },
+      input: {
+        value: 'DarkNeutral600'
+      },
+      disabled: {
+        value: 'DarkNeutral200A'
+      },
+      brand: {
+        value: 'Blue400'
+      },
+      selected: {
+        value: 'Blue400'
+      },
+      danger: {
+        value: 'Red500'
+      },
+      warning: {
+        value: 'Yellow500'
+      },
+      success: {
+        value: 'Green500'
+      },
+      discovery: {
+        value: 'Purple500'
+      },
+      information: {
+        value: 'Blue500'
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-light-new-input-border/color/border.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'Neutral300A'
+      },
+      bold: {
+        value: 'Neutral600'
+      },
+      inverse: {
+        value: 'Neutral0'
+      },
+      focused: {
+        value: 'Blue500'
+      },
+      input: {
+        value: 'Neutral600'
+      },
+      disabled: {
+        value: 'Neutral200A'
+      },
+      brand: {
+        value: 'Blue700'
+      },
+      selected: {
+        value: 'Blue700'
+      },
+      danger: {
+        value: 'Red600'
+      },
+      warning: {
+        value: 'Orange600'
+      },
+      success: {
+        value: 'Green600'
+      },
+      discovery: {
+        value: 'Purple600'
+      },
+      information: {
+        value: 'Blue600'
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.3.2",
+	"version": "1.4.1",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/artifacts/theme-import-map.js

@@ -6,7 +6,7 @@
  * This allows users to compose their themes and only use the tokens that are requested.
  * When a new theme is created, the import should automatically be added to the map
  *
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -26,6 +26,10 @@ const themeImportsMap = {
   'shape': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
   './themes/atlassian-shape'),
   'dark-iteration': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
-  './themes/atlassian-dark-iteration')
+  './themes/atlassian-dark-iteration'),
+  'light-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
+  './themes/atlassian-light-new-input-border'),
+  'dark-new-input-border': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
+  './themes/atlassian-dark-new-input-border')
 };
 export default themeImportsMap;

package/dist/es2019/artifacts/themes/atlassian-dark-new-input-border.js

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
+ * @codegenCommand yarn build tokens
+ */
+export default `
+html[data-color-mode="light"][data-theme~="light:dark"],
+html[data-color-mode="dark"][data-theme~="dark:dark"] {
+  color-scheme: dark;
+  --ds-border: #A6C5E229;
+  --ds-border-disabled: #A1BDD914;
+  --ds-border-focused: #85B8FF;
+  --ds-border-input: #738496;
+  --ds-border-inverse: #161A1D;
+  --ds-border-selected: #579DFF;
+  --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-bold: #738496;
+}
+`;

package/dist/es2019/artifacts/themes/atlassian-light-new-input-border.js

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
+ * @codegenCommand yarn build tokens
+ */
+export default `
+html[data-color-mode="light"][data-theme~="light:light"],
+html[data-color-mode="dark"][data-theme~="dark:light"] {
+  color-scheme: light;
+  --ds-border: #091E4224;
+  --ds-border-disabled: #091E420F;
+  --ds-border-focused: #388BFF;
+  --ds-border-input: #758195;
+  --ds-border-inverse: #FFFFFF;
+  --ds-border-selected: #0C66E4;
+  --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-bold: #758195;
+}
+`;

package/dist/es2019/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.3.2";
+const version = "1.4.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.3.2";
+const version = "1.4.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/es2019/set-global-theme.js

@@ -43,6 +43,9 @@ const getThemePreferences = themeState => {
       themePreferences.push(themeId);
     }
   });
+  if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
+    themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
+  }
   return [...new Set(themePreferences)];
 };
 

package/dist/es2019/theme-config.js

@@ -118,6 +118,26 @@ export const themeOverrideConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-light-new-input-border': {
+    id: 'light-new-input-border',
+    displayName: 'Light Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'light',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-dark-new-input-border': {
+    id: 'dark-new-input-border',
+    displayName: 'Dark Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
   }
 };
 export default themeConfig;

package/dist/es2019/tokens/atlassian-dark-new-input-border/color/border.js

@@ -0,0 +1,46 @@
+const color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'DarkNeutral300A'
+      },
+      bold: {
+        value: 'DarkNeutral600'
+      },
+      inverse: {
+        value: 'DarkNeutral0'
+      },
+      focused: {
+        value: 'Blue300'
+      },
+      input: {
+        value: 'DarkNeutral600'
+      },
+      disabled: {
+        value: 'DarkNeutral200A'
+      },
+      brand: {
+        value: 'Blue400'
+      },
+      selected: {
+        value: 'Blue400'
+      },
+      danger: {
+        value: 'Red500'
+      },
+      warning: {
+        value: 'Yellow500'
+      },
+      success: {
+        value: 'Green500'
+      },
+      discovery: {
+        value: 'Purple500'
+      },
+      information: {
+        value: 'Blue500'
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/tokens/atlassian-light-new-input-border/color/border.js

@@ -0,0 +1,46 @@
+const color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'Neutral300A'
+      },
+      bold: {
+        value: 'Neutral600'
+      },
+      inverse: {
+        value: 'Neutral0'
+      },
+      focused: {
+        value: 'Blue500'
+      },
+      input: {
+        value: 'Neutral600'
+      },
+      disabled: {
+        value: 'Neutral200A'
+      },
+      brand: {
+        value: 'Blue700'
+      },
+      selected: {
+        value: 'Blue700'
+      },
+      danger: {
+        value: 'Red600'
+      },
+      warning: {
+        value: 'Orange600'
+      },
+      success: {
+        value: 'Green600'
+      },
+      discovery: {
+        value: 'Purple600'
+      },
+      information: {
+        value: 'Blue600'
+      }
+    }
+  }
+};
+export default color;

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.3.2",
+	"version": "1.4.1",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/artifacts/theme-import-map.js

@@ -6,7 +6,7 @@
  * This allows users to compose their themes and only use the tokens that are requested.
  * When a new theme is created, the import should automatically be added to the map
  *
- * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
+ * @codegen <<SignedSource::ca8d4c1cc14d5ffdeec544d1087312a4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -42,6 +42,14 @@ var themeImportsMap = {
   'dark-iteration': function darkIteration() {
     return import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
     './themes/atlassian-dark-iteration');
+  },
+  'light-new-input-border': function lightNewInputBorder() {
+    return import( /* webpackChunkName: "@atlaskit-internal_atlassian-light-new-input-border" */
+    './themes/atlassian-light-new-input-border');
+  },
+  'dark-new-input-border': function darkNewInputBorder() {
+    return import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-new-input-border" */
+    './themes/atlassian-dark-new-input-border');
   }
 };
 export default themeImportsMap;

package/dist/esm/artifacts/themes/atlassian-dark-new-input-border.js

@@ -0,0 +1,6 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
+ * @codegenCommand yarn build tokens
+ */
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n  color-scheme: dark;\n  --ds-border: #A6C5E229;\n  --ds-border-disabled: #A1BDD914;\n  --ds-border-focused: #85B8FF;\n  --ds-border-input: #738496;\n  --ds-border-inverse: #161A1D;\n  --ds-border-selected: #579DFF;\n  --ds-border-brand: #579DFF;\n  --ds-border-danger: #EF5C48;\n  --ds-border-warning: #CF9F02;\n  --ds-border-success: #2ABB7F;\n  --ds-border-discovery: #8F7EE7;\n  --ds-border-information: #388BFF;\n  --ds-border-bold: #738496;\n}\n";

package/dist/esm/artifacts/themes/atlassian-light-new-input-border.js

@@ -0,0 +1,6 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
+ * @codegenCommand yarn build tokens
+ */
+export default "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:light\"] {\n  color-scheme: light;\n  --ds-border: #091E4224;\n  --ds-border-disabled: #091E420F;\n  --ds-border-focused: #388BFF;\n  --ds-border-input: #758195;\n  --ds-border-inverse: #FFFFFF;\n  --ds-border-selected: #0C66E4;\n  --ds-border-brand: #0C66E4;\n  --ds-border-danger: #E34935;\n  --ds-border-warning: #D97008;\n  --ds-border-success: #22A06B;\n  --ds-border-discovery: #8270DB;\n  --ds-border-information: #1D7AFC;\n  --ds-border-bold: #758195;\n}\n";

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.3.2";
+var version = "1.4.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.3.2";
+var version = "1.4.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/esm/set-global-theme.js

@@ -46,6 +46,9 @@ var getThemePreferences = function getThemePreferences(themeState) {
       themePreferences.push(themeId);
     }
   });
+  if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
+    themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
+  }
   return _toConsumableArray(new Set(themePreferences));
 };
 

package/dist/esm/theme-config.js

@@ -118,6 +118,26 @@ export var themeOverrideConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-light-new-input-border': {
+    id: 'light-new-input-border',
+    displayName: 'Light Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'light',
+    attributes: {
+      type: 'color',
+      mode: 'light'
+    }
+  },
+  'atlassian-dark-new-input-border': {
+    id: 'dark-new-input-border',
+    displayName: 'Dark Theme New Input Border',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
   }
 };
 export default themeConfig;

package/dist/esm/tokens/atlassian-dark-new-input-border/color/border.js

@@ -0,0 +1,46 @@
+var color = {
+  color: {
+    border: {
+      '[default]': {
+        value: 'DarkNeutral300A'
+      },
+      bold: {
+        value: 'DarkNeutral600'
+      },
+      inverse: {
+        value: 'DarkNeutral0'
+      },
+      focused: {
+        value: 'Blue300'
+      },
+      input: {
+        value: 'DarkNeutral600'
+      },
+      disabled: {
+        value: 'DarkNeutral200A'
+      },
+      brand: {
+        value: 'Blue400'
+      },
+      selected: {
+        value: 'Blue400'
+      },
+      danger: {
+        value: 'Red500'
+      },
+      warning: {
+        value: 'Yellow500'
+      },
+      success: {
+        value: 'Green500'
+      },
+      discovery: {
+        value: 'Purple500'
+      },
+      information: {
+        value: 'Blue500'
+      }
+    }
+  }
+};
+export default color;