@atlaskit/tokens 1.2.8 → 1.2.10

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);

package/dist/es2019/theme-config.js

@@ -90,4 +90,16 @@ const themeConfig = {
     }
   }
 };
+export const themeOverrideConfig = {
+  'atlassian-dark-iteration': {
+    id: 'dark-iteration',
+    displayName: 'Dark Theme Iteration',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
+  }
+};
 export default themeConfig;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+const 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
+        }]
+      }
+    }
+  }
+};
+export default shadow;

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

@@ -0,0 +1,41 @@
+const 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'
+        }
+      }
+    }
+  }
+};
+export default elevation;

package/dist/es2019/version.json

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

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

@@ -0,0 +1,6 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::337e80050595184e7a6198ba1c75e2fc>>
+ * @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  --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";

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

@@ -5,6 +5,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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';
@@ -71,7 +72,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 (getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
+              themePreferences.add('dark-iteration');
+            }
+            _context2.next = 5;
             return Promise.all(_toConsumableArray(themePreferences).filter(function (themeId) {
               return themeId !== undefined;
             }).map( /*#__PURE__*/function () {
@@ -95,7 +99,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.
@@ -121,7 +125,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
               document.documentElement.setAttribute(key, value);
             });
             return _context2.abrupt("return", unbindThemeChangeListener);
-          case 8:
+          case 9:
           case "end":
             return _context2.stop();
         }
@@ -173,7 +177,10 @@ export var getThemeStyles = /*#__PURE__*/function () {
                 themePreferences.push(themeId);
               }
             });
-            _context4.next = 5;
+            if (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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
                 var css;
@@ -208,12 +215,12 @@ export 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/esm/theme-config.js

@@ -90,4 +90,16 @@ var themeConfig = {
     }
   }
 };
+export var themeOverrideConfig = {
+  'atlassian-dark-iteration': {
+    id: 'dark-iteration',
+    displayName: 'Dark Theme Iteration',
+    palette: 'defaultPalette',
+    overrideTheme: 'dark',
+    attributes: {
+      type: 'color',
+      mode: 'dark'
+    }
+  }
+};
 export default themeConfig;

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

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

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

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