@atlaskit/tokens 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`85b5f222844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85b5f222844) - We are testing shape and space tokens behind a feature flag. These tokens will be enabled by default whenever `setGlobalTheme` is called. If this test is successful it will be available in a later release.
8
+
3
9
  ## 1.6.0
4
10
 
5
11
  ### Minor Changes
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var name = "@atlaskit/tokens";
11
- var version = "1.6.0";
11
+ var version = "1.7.0";
12
12
  /**
13
13
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
14
14
  * resulting CSS Custom Property.
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var _constants = require("./constants");
11
11
  var name = "@atlaskit/tokens";
12
- var version = "1.6.0";
12
+ var version = "1.7.0";
13
13
  /**
14
14
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
15
  * This should be used to implement design decisions throughout your application.
@@ -45,10 +45,11 @@ var getThemePreferences = function getThemePreferences(themeState) {
45
45
  var colorMode = themeState.colorMode,
46
46
  dark = themeState.dark,
47
47
  light = themeState.light,
48
+ shape = themeState.shape,
48
49
  spacing = themeState.spacing,
49
50
  typography = themeState.typography;
50
51
  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
51
- [spacing, typography].forEach(function (themeId) {
52
+ [shape, spacing, typography].forEach(function (themeId) {
52
53
  if (themeId) {
53
54
  themePreferences.push(themeId);
54
55
  }
@@ -56,6 +57,16 @@ var getThemePreferences = function getThemePreferences(themeState) {
56
57
  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1')) {
57
58
  themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
58
59
  }
60
+
61
+ // Load shape and spacing by default, currently behind a feature flag
62
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
63
+ if (!themePreferences.includes('shape')) {
64
+ themePreferences.push('shape');
65
+ }
66
+ if (!themePreferences.includes('spacing')) {
67
+ themePreferences.push('spacing');
68
+ }
69
+ }
59
70
  return (0, _toConsumableArray2.default)(new Set(themePreferences));
60
71
  };
61
72
 
@@ -66,6 +77,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
66
77
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
67
78
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
68
79
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
80
+ * @param {string} themeState.shape The shape theme to be applied.
69
81
  * @param {string} themeState.spacing The spacing theme to be applied.
70
82
  * @param {string} themeState.typography The typography theme to be applied.
71
83
  *
@@ -194,6 +206,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
194
206
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
195
207
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
196
208
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
209
+ * @param {string} themeState.shape The shape theme to be applied.
197
210
  * @param {string} themeState.spacing The spacing theme to be applied.
198
211
  * @param {string} themeState.typography The typography theme to be applied.
199
212
  *
@@ -209,19 +222,19 @@ var getThemeStyles = /*#__PURE__*/function () {
209
222
  dark,
210
223
  _ref7$light,
211
224
  light,
225
+ _ref7$shape,
226
+ shape,
212
227
  _ref7$spacing,
213
228
  spacing,
214
229
  _ref7$typography,
215
230
  typography,
216
- _ref7$shape,
217
- shape,
218
231
  themePreferences,
219
232
  results,
220
233
  _args4 = arguments;
221
234
  return _regenerator.default.wrap(function _callee4$(_context4) {
222
235
  while (1) switch (_context4.prev = _context4.next) {
223
236
  case 0:
224
- _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape;
237
+ _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
225
238
  themePreferences = getThemePreferences({
226
239
  colorMode: colorMode,
227
240
  dark: dark,
@@ -320,10 +333,21 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
320
333
  var themePreferences = {
321
334
  dark: dark,
322
335
  light: light,
336
+ shape: shape,
323
337
  spacing: spacing,
324
- typography: typography,
325
- shape: shape
338
+ typography: typography
326
339
  };
340
+
341
+ // Load shape and spacing by default, currently behind a feature flag
342
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
343
+ themePreferences = {
344
+ dark: dark,
345
+ light: light,
346
+ shape: 'shape',
347
+ spacing: 'spacing',
348
+ typography: typography
349
+ };
350
+ }
327
351
  var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
328
352
  return _ref10 = {}, (0, _defineProperty2.default)(_ref10, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref10, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
329
353
  };
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  const name = "@atlaskit/tokens";
4
- const version = "1.6.0";
4
+ const version = "1.7.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "1.6.0";
5
+ const version = "1.7.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
@@ -35,11 +35,12 @@ const getThemePreferences = themeState => {
35
35
  colorMode,
36
36
  dark,
37
37
  light,
38
+ shape,
38
39
  spacing,
39
40
  typography
40
41
  } = themeState;
41
42
  const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
42
- [spacing, typography].forEach(themeId => {
43
+ [shape, spacing, typography].forEach(themeId => {
43
44
  if (themeId) {
44
45
  themePreferences.push(themeId);
45
46
  }
@@ -47,6 +48,16 @@ const getThemePreferences = themeState => {
47
48
  if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
48
49
  themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
49
50
  }
51
+
52
+ // Load shape and spacing by default, currently behind a feature flag
53
+ if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
54
+ if (!themePreferences.includes('shape')) {
55
+ themePreferences.push('shape');
56
+ }
57
+ if (!themePreferences.includes('spacing')) {
58
+ themePreferences.push('spacing');
59
+ }
60
+ }
50
61
  return [...new Set(themePreferences)];
51
62
  };
52
63
 
@@ -57,6 +68,7 @@ const getThemePreferences = themeState => {
57
68
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
58
69
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
59
70
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
71
+ * @param {string} themeState.shape The shape theme to be applied.
60
72
  * @param {string} themeState.spacing The spacing theme to be applied.
61
73
  * @param {string} themeState.typography The typography theme to be applied.
62
74
  *
@@ -125,6 +137,7 @@ const setGlobalTheme = async ({
125
137
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
126
138
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
127
139
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
140
+ * @param {string} themeState.shape The shape theme to be applied.
128
141
  * @param {string} themeState.spacing The spacing theme to be applied.
129
142
  * @param {string} themeState.typography The typography theme to be applied.
130
143
  *
@@ -135,9 +148,9 @@ export const getThemeStyles = async ({
135
148
  colorMode = themeStateDefaults['colorMode'],
136
149
  dark = themeStateDefaults['dark'],
137
150
  light = themeStateDefaults['light'],
151
+ shape = themeStateDefaults['shape'],
138
152
  spacing = themeStateDefaults['spacing'],
139
- typography = themeStateDefaults['typography'],
140
- shape = themeStateDefaults['shape']
153
+ typography = themeStateDefaults['typography']
141
154
  } = {}) => {
142
155
  const themePreferences = getThemePreferences({
143
156
  colorMode,
@@ -195,13 +208,24 @@ export const getThemeHtmlAttrs = ({
195
208
  spacing = themeStateDefaults['spacing'],
196
209
  typography = themeStateDefaults['typography']
197
210
  } = {}) => {
198
- const themePreferences = {
211
+ let themePreferences = {
199
212
  dark,
200
213
  light,
214
+ shape,
201
215
  spacing,
202
- typography,
203
- shape
216
+ typography
204
217
  };
218
+
219
+ // Load shape and spacing by default, currently behind a feature flag
220
+ if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
221
+ themePreferences = {
222
+ dark,
223
+ light,
224
+ shape: 'shape',
225
+ spacing: 'spacing',
226
+ typography
227
+ };
228
+ }
205
229
  const themeAttribute = themeObjectToString(themePreferences);
206
230
  return {
207
231
  [THEME_DATA_ATTRIBUTE]: themeAttribute,
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  var name = "@atlaskit/tokens";
4
- var version = "1.6.0";
4
+ var version = "1.7.0";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "1.6.0";
5
+ var version = "1.7.0";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.
@@ -39,10 +39,11 @@ var getThemePreferences = function getThemePreferences(themeState) {
39
39
  var colorMode = themeState.colorMode,
40
40
  dark = themeState.dark,
41
41
  light = themeState.light,
42
+ shape = themeState.shape,
42
43
  spacing = themeState.spacing,
43
44
  typography = themeState.typography;
44
45
  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
45
- [spacing, typography].forEach(function (themeId) {
46
+ [shape, spacing, typography].forEach(function (themeId) {
46
47
  if (themeId) {
47
48
  themePreferences.push(themeId);
48
49
  }
@@ -50,6 +51,16 @@ var getThemePreferences = function getThemePreferences(themeState) {
50
51
  if (getBooleanFF('platform.design-system-team.update-border-input_ff9l1')) {
51
52
  themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
52
53
  }
54
+
55
+ // Load shape and spacing by default, currently behind a feature flag
56
+ if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
57
+ if (!themePreferences.includes('shape')) {
58
+ themePreferences.push('shape');
59
+ }
60
+ if (!themePreferences.includes('spacing')) {
61
+ themePreferences.push('spacing');
62
+ }
63
+ }
53
64
  return _toConsumableArray(new Set(themePreferences));
54
65
  };
55
66
 
@@ -60,6 +71,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
60
71
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
61
72
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
62
73
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
74
+ * @param {string} themeState.shape The shape theme to be applied.
63
75
  * @param {string} themeState.spacing The spacing theme to be applied.
64
76
  * @param {string} themeState.typography The typography theme to be applied.
65
77
  *
@@ -188,6 +200,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
188
200
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
189
201
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
190
202
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
203
+ * @param {string} themeState.shape The shape theme to be applied.
191
204
  * @param {string} themeState.spacing The spacing theme to be applied.
192
205
  * @param {string} themeState.typography The typography theme to be applied.
193
206
  *
@@ -203,19 +216,19 @@ export var getThemeStyles = /*#__PURE__*/function () {
203
216
  dark,
204
217
  _ref7$light,
205
218
  light,
219
+ _ref7$shape,
220
+ shape,
206
221
  _ref7$spacing,
207
222
  spacing,
208
223
  _ref7$typography,
209
224
  typography,
210
- _ref7$shape,
211
- shape,
212
225
  themePreferences,
213
226
  results,
214
227
  _args4 = arguments;
215
228
  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
216
229
  while (1) switch (_context4.prev = _context4.next) {
217
230
  case 0:
218
- _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape;
231
+ _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$shape = _ref7.shape, shape = _ref7$shape === void 0 ? themeStateDefaults['shape'] : _ref7$shape, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
219
232
  themePreferences = getThemePreferences({
220
233
  colorMode: colorMode,
221
234
  dark: dark,
@@ -313,10 +326,21 @@ export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
313
326
  var themePreferences = {
314
327
  dark: dark,
315
328
  light: light,
329
+ shape: shape,
316
330
  spacing: spacing,
317
- typography: typography,
318
- shape: shape
331
+ typography: typography
319
332
  };
333
+
334
+ // Load shape and spacing by default, currently behind a feature flag
335
+ if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
336
+ themePreferences = {
337
+ dark: dark,
338
+ light: light,
339
+ shape: 'shape',
340
+ spacing: 'spacing',
341
+ typography: typography
342
+ };
343
+ }
320
344
  var themeAttribute = themeObjectToString(themePreferences);
321
345
  return _ref10 = {}, _defineProperty(_ref10, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_ref10, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
322
346
  };
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -18,6 +18,7 @@ export interface ActiveThemeState extends ThemeState {
18
18
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
19
19
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
20
20
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
21
+ * @param {string} themeState.shape The shape theme to be applied.
21
22
  * @param {string} themeState.spacing The spacing theme to be applied.
22
23
  * @param {string} themeState.typography The typography theme to be applied.
23
24
  *
@@ -42,13 +43,14 @@ export interface ThemeStyles {
42
43
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
43
44
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
44
45
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
46
+ * @param {string} themeState.shape The shape theme to be applied.
45
47
  * @param {string} themeState.spacing The spacing theme to be applied.
46
48
  * @param {string} themeState.typography The typography theme to be applied.
47
49
  *
48
50
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
49
51
  * If an error is encountered while loading themes, the themes arrav will be emptv.
50
52
  */
51
- export declare const getThemeStyles: ({ colorMode, dark, light, spacing, typography, shape, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
53
+ export declare const getThemeStyles: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
52
54
  /**
53
55
  * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
54
56
  * Note: this utility does not handle automatic theme switching.
@@ -18,6 +18,7 @@ export interface ActiveThemeState extends ThemeState {
18
18
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
19
19
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
20
20
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
21
+ * @param {string} themeState.shape The shape theme to be applied.
21
22
  * @param {string} themeState.spacing The spacing theme to be applied.
22
23
  * @param {string} themeState.typography The typography theme to be applied.
23
24
  *
@@ -42,13 +43,14 @@ export interface ThemeStyles {
42
43
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
43
44
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
44
45
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
46
+ * @param {string} themeState.shape The shape theme to be applied.
45
47
  * @param {string} themeState.spacing The spacing theme to be applied.
46
48
  * @param {string} themeState.typography The typography theme to be applied.
47
49
  *
48
50
  * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
49
51
  * If an error is encountered while loading themes, the themes arrav will be emptv.
50
52
  */
51
- export declare const getThemeStyles: ({ colorMode, dark, light, spacing, typography, shape, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
53
+ export declare const getThemeStyles: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
52
54
  /**
53
55
  * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
54
56
  * Note: this utility does not handle automatic theme switching.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "author": "Atlassian Pty Ltd",
5
5
  "description": "Design tokens are the single source of truth to name and store design decisions.",
6
6
  "license": "Apache-2.0",
@@ -71,7 +71,7 @@
71
71
  "@atlaskit/docs": "^9.1.0",
72
72
  "@atlaskit/dropdown-menu": "^11.9.0",
73
73
  "@atlaskit/ds-explorations": "^2.2.0",
74
- "@atlaskit/dynamic-table": "^14.10.0",
74
+ "@atlaskit/dynamic-table": "^14.11.0",
75
75
  "@atlaskit/grid": "^0.11.0",
76
76
  "@atlaskit/heading": "^1.3.0",
77
77
  "@atlaskit/icon": "^21.12.0",
@@ -135,6 +135,9 @@
135
135
  },
136
136
  "platform.design-system-team.update-border-input_ff9l1": {
137
137
  "type": "boolean"
138
+ },
139
+ "platform.design-system-team.space-and-shape-tokens_q5me6": {
140
+ "type": "boolean"
138
141
  }
139
142
  },
140
143
  "homepage": "https://atlassian.design/components/tokens",
package/report.api.md CHANGED
@@ -933,9 +933,9 @@ export const getThemeStyles: ({
933
933
  colorMode,
934
934
  dark,
935
935
  light,
936
+ shape,
936
937
  spacing,
937
938
  typography,
938
- shape,
939
939
  }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
940
940
 
941
941
  // @public
@@ -574,7 +574,7 @@ export const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string |
574
574
  export const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
575
575
 
576
576
  // @public
577
- export const getThemeStyles: ({ colorMode, dark, light, spacing, typography, shape, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
577
+ export const getThemeStyles: ({ colorMode, dark, light, shape, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
578
578
 
579
579
  // @public
580
580
  export function getTokenValue<T extends keyof Tokens_2>(tokenId: T, fallback?: string): string;