@atlaskit/tokens 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 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
+
+- [`bae41641c82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bae41641c82) - Enable the dark theme tweaks for Confluence behind a feature flag.
+
 ## 1.3.1
 
 ### Patch Changes

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.1";
+var version = "1.4.0";
 /**
  * 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.1";
+var version = "1.4.0";
 /**
  * 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));
 };
 
@@ -120,15 +123,29 @@ var setGlobalTheme = /*#__PURE__*/function () {
             };
           }()));
         case 4:
-          if (!(
+          if (!themePreferences.includes('dark')) {
+            _context2.next = 13;
+            break;
+          }
+          if (!
           // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark'))) {
-            _context2.next = 7;
+          (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln')) {
+            _context2.next = 10;
             break;
           }
-          _context2.next = 7;
+          _context2.next = 8;
           return (0, _themeLoading.loadAndAppendThemeCss)('dark-iteration');
-        case 7:
+        case 8:
+          _context2.next = 13;
+          break;
+        case 10:
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 13;
+          return (0, _themeLoading.loadAndAppendThemeCss)('dark-iteration');
+        case 13:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
             // Add an event listener for changes to the system theme.
@@ -154,7 +171,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             document.documentElement.setAttribute(key, value);
           });
           return _context2.abrupt("return", unbindThemeChangeListener);
-        case 11:
+        case 17:
         case "end":
           return _context2.stop();
       }
@@ -205,10 +222,14 @@ var getThemeStyles = /*#__PURE__*/function () {
             spacing: spacing,
             typography: typography
           });
-          if (
-          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-            themePreferences.push('dark-iteration');
+          if (themePreferences.includes('dark')) {
+            if (
+            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+            (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln')) {
+              themePreferences.push('dark-iteration');
+            } else if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+              themePreferences.push('dark-iteration');
+            }
           }
           _context4.next = 5;
           return Promise.all(themePreferences.map( /*#__PURE__*/function () {

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.1",
+	"version": "1.4.0",
 	"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.1";
+const version = "1.4.0";
 /**
  * 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.1";
+const version = "1.4.0";
 /**
  * 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)];
 };
 
@@ -78,10 +81,14 @@ const setGlobalTheme = async ({
     typography
   });
   await Promise.all(themePreferences.map(async themeId => await loadAndAppendThemeCss(themeId)));
-  if (
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-    await loadAndAppendThemeCss('dark-iteration');
+  if (themePreferences.includes('dark')) {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+      await loadAndAppendThemeCss('dark-iteration');
+    } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+      await loadAndAppendThemeCss('dark-iteration');
+    }
   }
   if (colorMode === 'auto' && darkModeMql) {
     colorMode = darkModeMql.matches ? 'dark' : 'light';
@@ -134,10 +141,14 @@ export const getThemeStyles = async ({
     spacing,
     typography
   });
-  if (
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-    themePreferences.push('dark-iteration');
+  if (themePreferences.includes('dark')) {
+    if (
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+      themePreferences.push('dark-iteration');
+    } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+      themePreferences.push('dark-iteration');
+    }
   }
   const results = await Promise.all(themePreferences.map(async themeId => {
     try {

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.1",
+	"version": "1.4.0",
 	"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.1";
+var version = "1.4.0";
 /**
  * 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.1";
+var version = "1.4.0";
 /**
  * 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));
 };
 
@@ -114,15 +117,29 @@ var setGlobalTheme = /*#__PURE__*/function () {
             };
           }()));
         case 4:
-          if (!(
+          if (!themePreferences.includes('dark')) {
+            _context2.next = 13;
+            break;
+          }
+          if (!
           // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark'))) {
-            _context2.next = 7;
+          getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+            _context2.next = 10;
             break;
           }
-          _context2.next = 7;
+          _context2.next = 8;
           return loadAndAppendThemeCss('dark-iteration');
-        case 7:
+        case 8:
+          _context2.next = 13;
+          break;
+        case 10:
+          if (!getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+            _context2.next = 13;
+            break;
+          }
+          _context2.next = 13;
+          return loadAndAppendThemeCss('dark-iteration');
+        case 13:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
             // Add an event listener for changes to the system theme.
@@ -148,7 +165,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             document.documentElement.setAttribute(key, value);
           });
           return _context2.abrupt("return", unbindThemeChangeListener);
-        case 11:
+        case 17:
         case "end":
           return _context2.stop();
       }
@@ -199,10 +216,14 @@ export var getThemeStyles = /*#__PURE__*/function () {
             spacing: spacing,
             typography: typography
           });
-          if (
-          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
-            themePreferences.push('dark-iteration');
+          if (themePreferences.includes('dark')) {
+            if (
+            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+            getBooleanFF('design-system-team.dark-theme-iteration_dk1ln')) {
+              themePreferences.push('dark-iteration');
+            } else if (getBooleanFF('platform.design-system-team.dark-iteration-confluence_e2t22')) {
+              themePreferences.push('dark-iteration');
+            }
           }
           _context4.next = 5;
           return Promise.all(themePreferences.map( /*#__PURE__*/function () {

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;

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

@@ -0,0 +1,46 @@
+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'
+      }
+    }
+  }
+};
+export default color;

package/dist/esm/version.json

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

package/dist/types/artifacts/theme-import-map.d.ts

@@ -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
  */
 import { ThemeIds, ThemeOverrideIds } from '../theme-config';

package/dist/types/artifacts/themes/atlassian-dark-new-input-border.d.ts

@@ -0,0 +1,7 @@
+declare const _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";
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c975c1ac2db9f1c0efff9214a1aac7b7>>
+ * @codegenCommand yarn build tokens
+ */
+export default _default;

package/dist/types/artifacts/themes/atlassian-light-new-input-border.d.ts

@@ -0,0 +1,7 @@
+declare const _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";
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::901558f32ad8ab69dd685f026e5d85db>>
+ * @codegenCommand yarn build tokens
+ */
+export default _default;

package/dist/types/theme-config.d.ts

@@ -8,7 +8,7 @@
  */
 export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
 export declare type ThemeFileNames = Themes;
-export declare type ThemeOverrides = 'atlassian-dark-iteration';
+export declare type ThemeOverrides = 'atlassian-dark-iteration' | 'atlassian-light-new-input-border' | 'atlassian-dark-new-input-border';
 /**
  * Theme kinds: The type of theme.
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
@@ -32,7 +32,7 @@ export declare type DataColorModes = Exclude<ThemeColorModes, 'auto'>;
  */
 export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography", "shape"];
 export declare type ThemeIds = (typeof themeIds)[number];
-export declare type ThemeOverrideIds = 'dark-iteration';
+export declare type ThemeOverrideIds = 'dark-iteration' | 'light-new-input-border' | 'dark-new-input-border';
 /**
  * Theme to use a base. This will create the theme as
  * an extension with all token values marked as optional
@@ -74,5 +74,25 @@ export declare const themeOverrideConfig: {
             mode: string;
         };
     };
+    'atlassian-light-new-input-border': {
+        id: string;
+        displayName: string;
+        palette: string;
+        overrideTheme: string;
+        attributes: {
+            type: string;
+            mode: string;
+        };
+    };
+    'atlassian-dark-new-input-border': {
+        id: string;
+        displayName: string;
+        palette: string;
+        overrideTheme: string;
+        attributes: {
+            type: string;
+            mode: string;
+        };
+    };
 };
 export default themeConfig;

package/dist/types/tokens/atlassian-dark-new-input-border/color/border.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/palette';
+import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
+export default color;

package/dist/types/tokens/atlassian-light-new-input-border/color/border.d.ts

@@ -0,0 +1,4 @@
+import type { BaseToken } from '../../../palettes/palette';
+import type { BorderColorTokenSchema, ValueSchema } from '../../../types';
+declare const color: ValueSchema<BorderColorTokenSchema<BaseToken>>;
+export default color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "Atlassian Pty Ltd",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "license": "Apache-2.0",
@@ -67,7 +67,7 @@
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/badge": "^15.1.0",
     "@atlaskit/button": "^16.7.0",
-    "@atlaskit/checkbox": "^12.5.0",
+    "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/docs": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.8.0",
@@ -75,7 +75,7 @@
     "@atlaskit/dynamic-table": "^14.9.0",
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/focus-ring": "^1.3.0",
-    "@atlaskit/grid": "^0.9.0",
+    "@atlaskit/grid": "^0.10.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -135,6 +135,12 @@
   "platform-feature-flags": {
     "design-system-team.dark-theme-iteration_dk1ln": {
       "type": "boolean"
+    },
+    "platform.design-system-team.dark-iteration-confluence_e2t22": {
+      "type": "boolean"
+    },
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/tokens",