@atlaskit/tokens 1.2.8 → 1.2.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 1.2.9
+
+### Patch Changes
+
+- [`aef90f8953b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aef90f8953b) - Tweaks to a subset of dark theme tokens behind a feature flag.
+
 ## 1.2.8
 
 ### 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::ce4463df8e613cb4c4a8b24907ce95ae>>
+ * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
  * @codegenCommand yarn build tokens
  */
 
@@ -55,6 +55,11 @@ var themeImportsMap = {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('./themes/atlassian-shape'));
     });
+  },
+  'dark-iteration': function darkIteration() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./themes/atlassian-dark-iteration'));
+    });
   }
 };
 var _default = themeImportsMap;

package/dist/cjs/artifacts/themes/atlassian-dark-iteration.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::337e80050595184e7a6198ba1c75e2fc>>
+ * @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  --ds-text: #B6C2CF;\n  --ds-text-inverse: #1D2125;\n  --ds-text-selected: #6EAAFF;\n  --ds-text-warning-inverse: #1D2125;\n  --ds-text-subtlest: #8C9BAB;\n  --ds-link: #6EAAFF;\n  --ds-link-pressed: #A8CCFF;\n  --ds-icon-inverse: #1D2125;\n  --ds-icon-selected: #6EAAFF;\n  --ds-icon-warning-inverse: #1D2125;\n  --ds-icon-subtle: #8C9BAB;\n  --ds-background-accent-red-subtlest: #4F1C16;\n  --ds-background-accent-orange-subtlest: #513010;\n  --ds-background-accent-yellow-subtlest: #473602;\n  --ds-background-accent-green-subtlest: #143E2C;\n  --ds-background-accent-teal-subtlest: #193E42;\n  --ds-background-accent-blue-subtlest: #092957;\n  --ds-background-accent-purple-subtlest: #2B2451;\n  --ds-background-accent-magenta-subtlest: #421F34;\n  --ds-background-accent-gray-bolder: #8C9BAB;\n  --ds-background-input: #22272B;\n  --ds-background-input-hovered: #282E33;\n  --ds-background-input-pressed: #22272B;\n  --ds-background-selected: #082145;\n  --ds-background-selected-pressed: #0055CC;\n  --ds-background-danger: #4F1C16;\n  --ds-background-danger-pressed: #872518;\n  --ds-background-warning: #473602;\n  --ds-background-warning-pressed: #6B5103;\n  --ds-background-success: #143E2C;\n  --ds-background-success-pressed: #1B5A40;\n  --ds-background-discovery: #2B2451;\n  --ds-background-discovery-pressed: #4A3D8A;\n  --ds-background-information: #092957;\n  --ds-background-information-pressed: #073A83;\n  --ds-blanket: #10121499;\n  --ds-chart-neutral-hovered: #8C9BAB;\n  --ds-chart-gray-bold-hovered: #8C9BAB;\n  --ds-chart-gray-bolder: #8C9BAB;\n  --ds-surface: #1D2125;\n  --ds-surface-hovered: #22272B;\n  --ds-surface-pressed: #282E33;\n  --ds-surface-overlay: #282E33;\n  --ds-surface-overlay-pressed: #38414A;\n  --ds-surface-raised: #22272B;\n  --ds-surface-raised-hovered: #282E33;\n  --ds-surface-sunken: #161A1D;\n  --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;\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.2.8";
+var version = "1.2.9";
 /**
  * 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.2.8";
+var version = "1.2.9";
 /**
  * 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

@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeLoading = require("./utils/theme-loading");
 var _themeStateTransformer = require("./utils/theme-state-transformer");
@@ -78,7 +79,10 @@ var setGlobalTheme = /*#__PURE__*/function () {
             _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
             // Dedupe list of themes to avoid race condition
             themePreferences = new Set([dark, light, spacing, typography]);
-            _context2.next = 4;
+            if ((0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
+              themePreferences.add('dark-iteration');
+            }
+            _context2.next = 5;
             return Promise.all((0, _toConsumableArray2.default)(themePreferences).filter(function (themeId) {
               return themeId !== undefined;
             }).map( /*#__PURE__*/function () {
@@ -102,7 +106,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
                 return _ref3.apply(this, arguments);
               };
             }()));
-          case 4:
+          case 5:
             if (colorMode === 'auto' && darkModeMql) {
               colorMode = darkModeMql.matches ? 'dark' : 'light';
               // Add an event listener for changes to the system theme.
@@ -128,7 +132,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
               document.documentElement.setAttribute(key, value);
             });
             return _context2.abrupt("return", unbindThemeChangeListener);
-          case 8:
+          case 9:
           case "end":
             return _context2.stop();
         }
@@ -180,7 +184,10 @@ var getThemeStyles = /*#__PURE__*/function () {
                 themePreferences.push(themeId);
               }
             });
-            _context4.next = 5;
+            if ((0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
+              themePreferences.push('dark-iteration');
+            }
+            _context4.next = 6;
             return Promise.all(themePreferences.map( /*#__PURE__*/function () {
               var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
                 var css;
@@ -215,12 +222,12 @@ var getThemeStyles = /*#__PURE__*/function () {
                 return _ref8.apply(this, arguments);
               };
             }()));
-          case 5:
+          case 6:
             results = _context4.sent;
             return _context4.abrupt("return", results.filter(function (theme) {
               return theme !== undefined;
             }));
-          case 7:
+          case 8:
           case "end":
             return _context4.stop();
         }

package/dist/cjs/theme-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeIds = exports.themeColorModes = exports.default = void 0;
+exports.themeOverrideConfig = exports.themeIds = exports.themeColorModes = exports.default = void 0;
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -98,5 +98,18 @@ var themeConfig = {
     }
   }
 };
+var themeOverrideConfig = {
+  'atlassian-dark-iteration': {
+    id: 'dark-iteration',
+    displayName: 'Dark Theme Iteration',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
+  }
+};
+exports.themeOverrideConfig = themeOverrideConfig;
 var _default = themeConfig;
 exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/accent.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    background: {
+      accent: {
+        blue: {
+          subtlest: {
+            // @ts-ignore Blue950 not currently available
+            value: '#092957'
+          }
+        },
+        red: {
+          subtlest: {
+            // @ts-ignore Red950 not currently available
+            value: '#4F1C16'
+          }
+        },
+        orange: {
+          subtlest: {
+            // @ts-ignore Orange950 not currently available
+            value: '#513010'
+          }
+        },
+        yellow: {
+          subtlest: {
+            // @ts-ignore Yellow950 not currently available
+            value: '#473602'
+          }
+        },
+        green: {
+          subtlest: {
+            // @ts-ignore Green950 not currently available
+            value: '#143E2C'
+          }
+        },
+        purple: {
+          subtlest: {
+            // @ts-ignore Purple950 not currently available
+            value: '#2B2451'
+          }
+        },
+        teal: {
+          subtlest: {
+            // @ts-ignore Teal950 not currently available
+            value: '#193E42'
+          }
+        },
+        magenta: {
+          subtlest: {
+            // @ts-ignore Magenta950 not currently available
+            value: '#421F34'
+          }
+        },
+        gray: {
+          bolder: {
+            // @ts-ignore new value for DarkNeautral700
+            value: '#8C9BAB'
+          }
+        }
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/background.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    blanket: {
+      // @ts-ignore DarkNeutral-100 at 60% not currently available
+      '[default]': {
+        value: '#10121499'
+      }
+    },
+    background: {
+      input: {
+        '[default]': {
+          value: 'DarkNeutral200'
+        },
+        hovered: {
+          // @ts-ignore DarkNeutral250 not currently available
+          value: '#282E33'
+        },
+        pressed: {
+          value: 'DarkNeutral200'
+        }
+      },
+      selected: {
+        '[default]': {
+          '[default]': {
+            value: 'Blue1000'
+          },
+          pressed: {
+            value: 'Blue800'
+          }
+        }
+      },
+      danger: {
+        '[default]': {
+          '[default]': {
+            // @ts-ignore Red950 not currently available
+            value: '#4F1C16'
+          },
+          pressed: {
+            // @ts-ignore Red850 not currently available
+            value: '#872518'
+          }
+        }
+      },
+      warning: {
+        '[default]': {
+          '[default]': {
+            // @ts-ignore Yellow950 not currently available
+            value: '#473602'
+          },
+          pressed: {
+            // @ts-ignore Yellow850 not currently available
+            value: '#6B5103'
+          }
+        }
+      },
+      success: {
+        '[default]': {
+          '[default]': {
+            // @ts-ignore Green950 not currently available
+            value: '#143E2C'
+          },
+          pressed: {
+            // @ts-ignore Green850 not currently available
+            value: '#1B5A40'
+          }
+        }
+      },
+      discovery: {
+        '[default]': {
+          '[default]': {
+            // @ts-ignore Purple950 not currently available
+            value: '#2B2451'
+          },
+          pressed: {
+            // @ts-ignore Purple850 not currently available
+            value: '#4A3D8A'
+          }
+        }
+      },
+      information: {
+        '[default]': {
+          '[default]': {
+            // @ts-ignore Blue950 not currently available
+            value: '#092957'
+          },
+          pressed: {
+            // @ts-ignore Blue850 not currently available
+            value: '#073A83'
+          }
+        }
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/chart.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    chart: {
+      neutral: {
+        hovered: {
+          // @ts-ignore new value for DarkNeautral700
+          value: '#8C9BAB'
+        }
+      },
+      gray: {
+        bold: {
+          hovered: {
+            // @ts-ignore new value for DarkNeautral700
+            value: '#8C9BAB'
+          }
+        },
+        bolder: {
+          '[default]': {
+            // @ts-ignore new value for DarkNeautral700
+            value: '#8C9BAB'
+          }
+        }
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/icon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    icon: {
+      subtle: {
+        // @ts-ignore new value for DarkNeautral700
+        value: '#8C9BAB'
+      },
+      inverse: {
+        value: 'DarkNeutral100'
+      },
+      selected: {
+        // @ts-ignore Blue350 not currently available
+        value: '#6EAAFF'
+      },
+      warning: {
+        inverse: {
+          value: 'DarkNeutral100'
+        }
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/color/text.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    text: {
+      '[default]': {
+        value: 'DarkNeutral900'
+      },
+      subtlest: {
+        // @ts-ignore new value for DarkNeautral700
+        value: '#8C9BAB'
+      },
+      inverse: {
+        value: 'DarkNeutral100'
+      },
+      selected: {
+        // @ts-ignore Blue350 not currently available
+        value: '#6EAAFF'
+      },
+      warning: {
+        inverse: {
+          value: 'DarkNeutral100'
+        }
+      }
+    },
+    link: {
+      '[default]': {
+        // @ts-ignore Blue350 not currently available
+        value: '#6EAAFF'
+      },
+      pressed: {
+        // @ts-ignore Blue250 not currently available
+        value: '#A8CCFF'
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/elevation/shadow.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var shadow = {
+  elevation: {
+    shadow: {
+      overlay: {
+        value: [{
+          radius: 0,
+          spread: 1,
+          color: 'DarkNeutral100A',
+          offset: {
+            x: 0,
+            y: 0
+          },
+          opacity: 0.12,
+          inset: true
+        }, {
+          radius: 12,
+          offset: {
+            x: 0,
+            y: 8
+          },
+          color: 'DarkNeutral-100A',
+          // This opacity overrides the color alpha.
+          opacity: 0.36
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'DarkNeutral-100A',
+          // This opacity overrides the color alpha.
+          opacity: 0.5
+        }]
+      }
+    }
+  }
+};
+var _default = shadow;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark-iteration/elevation/surface.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var elevation = {
+  elevation: {
+    surface: {
+      '[default]': {
+        '[default]': {
+          value: 'DarkNeutral100'
+        },
+        hovered: {
+          value: 'DarkNeutral200'
+        },
+        pressed: {
+          // @ts-ignore DarkNeutral250 not currently available
+          value: '#282E33'
+        }
+      },
+      sunken: {
+        value: 'DarkNeutral0'
+      },
+      raised: {
+        '[default]': {
+          value: 'DarkNeutral200'
+        },
+        hovered: {
+          // @ts-ignore DarkNeutral250 not currently available
+          value: '#282E33'
+        }
+      },
+      overlay: {
+        '[default]': {
+          // @ts-ignore DarkNeutral250 not currently available
+          value: '#282E33'
+        },
+        pressed: {
+          // @ts-ignore DarkNeutral350 not currently available
+          value: '#38414A'
+        }
+      }
+    }
+  }
+};
+var _default = elevation;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.2.8",
+	"version": "1.2.9",
 	"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::ce4463df8e613cb4c4a8b24907ce95ae>>
+ * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
  * @codegenCommand yarn build tokens
  */
 
@@ -24,6 +24,8 @@ const themeImportsMap = {
   'typography': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-typography" */
   './themes/atlassian-typography'),
   'shape': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
-  './themes/atlassian-shape')
+  './themes/atlassian-shape'),
+  'dark-iteration': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
+  './themes/atlassian-dark-iteration')
 };
 export default themeImportsMap;

package/dist/es2019/artifacts/themes/atlassian-dark-iteration.js

@@ -0,0 +1,58 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::337e80050595184e7a6198ba1c75e2fc>>
+ * @codegenCommand yarn build tokens
+ */
+export default `
+html[data-color-mode="light"][data-theme~="light:dark"],
+html[data-color-mode="dark"][data-theme~="dark:dark"] {
+  --ds-text: #B6C2CF;
+  --ds-text-inverse: #1D2125;
+  --ds-text-selected: #6EAAFF;
+  --ds-text-warning-inverse: #1D2125;
+  --ds-text-subtlest: #8C9BAB;
+  --ds-link: #6EAAFF;
+  --ds-link-pressed: #A8CCFF;
+  --ds-icon-inverse: #1D2125;
+  --ds-icon-selected: #6EAAFF;
+  --ds-icon-warning-inverse: #1D2125;
+  --ds-icon-subtle: #8C9BAB;
+  --ds-background-accent-red-subtlest: #4F1C16;
+  --ds-background-accent-orange-subtlest: #513010;
+  --ds-background-accent-yellow-subtlest: #473602;
+  --ds-background-accent-green-subtlest: #143E2C;
+  --ds-background-accent-teal-subtlest: #193E42;
+  --ds-background-accent-blue-subtlest: #092957;
+  --ds-background-accent-purple-subtlest: #2B2451;
+  --ds-background-accent-magenta-subtlest: #421F34;
+  --ds-background-accent-gray-bolder: #8C9BAB;
+  --ds-background-input: #22272B;
+  --ds-background-input-hovered: #282E33;
+  --ds-background-input-pressed: #22272B;
+  --ds-background-selected: #082145;
+  --ds-background-selected-pressed: #0055CC;
+  --ds-background-danger: #4F1C16;
+  --ds-background-danger-pressed: #872518;
+  --ds-background-warning: #473602;
+  --ds-background-warning-pressed: #6B5103;
+  --ds-background-success: #143E2C;
+  --ds-background-success-pressed: #1B5A40;
+  --ds-background-discovery: #2B2451;
+  --ds-background-discovery-pressed: #4A3D8A;
+  --ds-background-information: #092957;
+  --ds-background-information-pressed: #073A83;
+  --ds-blanket: #10121499;
+  --ds-chart-neutral-hovered: #8C9BAB;
+  --ds-chart-gray-bold-hovered: #8C9BAB;
+  --ds-chart-gray-bolder: #8C9BAB;
+  --ds-surface: #1D2125;
+  --ds-surface-hovered: #22272B;
+  --ds-surface-pressed: #282E33;
+  --ds-surface-overlay: #282E33;
+  --ds-surface-overlay-pressed: #38414A;
+  --ds-surface-raised: #22272B;
+  --ds-surface-raised-hovered: #282E33;
+  --ds-surface-sunken: #161A1D;
+  --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
+}
+`;

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.2.8";
+const version = "1.2.9";
 /**
  * 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.2.8";
+const version = "1.2.9";
 /**
  * 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

@@ -1,5 +1,6 @@
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
 import { themeObjectToString } from './utils/theme-state-transformer';
@@ -52,6 +53,9 @@ const setGlobalTheme = async ({
 } = {}) => {
   // Dedupe list of themes to avoid race condition
   const themePreferences = new Set([dark, light, spacing, typography]);
+  if (getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
+    themePreferences.add('dark-iteration');
+  }
   await Promise.all([...themePreferences].filter(themeId => themeId !== undefined).map(async themeId => await loadAndAppendThemeCss(themeId)));
   if (colorMode === 'auto' && darkModeMql) {
     colorMode = darkModeMql.matches ? 'dark' : 'light';
@@ -103,6 +107,9 @@ export const getThemeStyles = async ({
       themePreferences.push(themeId);
     }
   });
+  if (getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
+    themePreferences.push('dark-iteration');
+  }
   const results = await Promise.all(themePreferences.map(async themeId => {
     try {
       const css = await loadThemeCss(themeId);