@atlaskit/tokens 8.3.0 → 8.4.1

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,20 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 8.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a60a82196851a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a60a82196851a) -
8
+ Internal refactors to remove unused variables. No functional or public changes.
9
+
10
+ ## 8.4.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`02aeea2e65ec2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02aeea2e65ec2) -
15
+ Enabled shape theme by default behind a feature gate. The shape theme remains undefined when the
16
+ gate is off.
17
+
3
18
  ## 8.3.0
4
19
 
5
20
  ### Minor Changes
@@ -239,6 +239,7 @@ function parseCSSPropertyName(cssString: string) {
239
239
  };
240
240
  }
241
241
 
242
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
242
243
  export default async function transformer(file: FileInfo, api: API, debug = false) {
243
244
  const j = api.jscodeshift;
244
245
  const source = j(file.source);
@@ -40,7 +40,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
40
40
  _ref$light = _ref.light,
41
41
  light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
42
42
  _ref$shape = _ref.shape,
43
- shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
43
+ shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref$shape,
44
44
  _ref$spacing = _ref.spacing,
45
45
  spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
46
46
  _ref$typography = _ref.typography,
@@ -42,7 +42,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
42
42
  _ref$contrastMode = _ref.contrastMode,
43
43
  contrastMode = _ref$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref$contrastMode,
44
44
  _ref$shape = _ref.shape,
45
- shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
45
+ shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref$shape,
46
46
  _ref$spacing = _ref.spacing,
47
47
  spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
48
48
  _ref$typography = _ref.typography,
@@ -53,7 +53,7 @@ var getThemeStyles = /*#__PURE__*/function () {
53
53
  contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || _themeConfig.themeStateDefaults['contrastMode'],
54
54
  dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
55
55
  light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
56
- shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'],
56
+ shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'](),
57
57
  spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
58
58
  typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']()
59
59
  };
@@ -83,8 +83,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
83
83
  nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
84
84
  themeLoader = _args3.length > 1 ? _args3[1] : undefined;
85
85
  _ref2 = typeof nextThemeState === 'function' ? nextThemeState(_objectSpread(_objectSpread({}, _themeConfig.themeStateDefaults), {}, {
86
- typography: _themeConfig.themeStateDefaults['typography']()
87
- }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
86
+ typography: _themeConfig.themeStateDefaults['typography'](),
87
+ shape: _themeConfig.themeStateDefaults['shape']()
88
+ }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography']() : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
88
89
  // without the feature flag enabled.
89
90
  if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
90
91
  if (light === 'light-increased-contrast') {
@@ -220,7 +220,12 @@ var themeStateDefaults = exports.themeStateDefaults = {
220
220
  contrastMode: 'auto',
221
221
  dark: 'dark',
222
222
  light: 'light',
223
- shape: undefined,
223
+ shape: function shape() {
224
+ if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
225
+ return 'shape';
226
+ }
227
+ return undefined;
228
+ },
224
229
  spacing: 'spacing',
225
230
  typography: function typography() {
226
231
  if ((0, _platformFeatureFlags.fg)('platform-disable-default-typography')) {
@@ -54,7 +54,7 @@ var themeStringToObject = exports.themeStringToObject = function themeStringToOb
54
54
  if (kind === customThemeOptions) {
55
55
  try {
56
56
  themeObject[customThemeOptions] = JSON.parse(id);
57
- } catch (e) {
57
+ } catch (_unused) {
58
58
  new Error('Invalid custom theme string');
59
59
  }
60
60
  }
@@ -28,7 +28,7 @@ const enableGlobalTheme = ({
28
28
  contrastMode = themeStateDefaults['contrastMode'],
29
29
  dark = themeStateDefaults['dark'],
30
30
  light = themeStateDefaults['light'],
31
- shape = themeStateDefaults['shape'],
31
+ shape = themeStateDefaults['shape'](),
32
32
  spacing = themeStateDefaults['spacing'],
33
33
  typography = themeStateDefaults['typography'](),
34
34
  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
@@ -26,7 +26,7 @@ const getThemeHtmlAttrs = ({
26
26
  dark = themeStateDefaults['dark'],
27
27
  light = themeStateDefaults['light'],
28
28
  contrastMode = themeStateDefaults['contrastMode'],
29
- shape = themeStateDefaults['shape'],
29
+ shape = themeStateDefaults['shape'](),
30
30
  spacing = themeStateDefaults['spacing'],
31
31
  typography = themeStateDefaults['typography'](),
32
32
  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
@@ -35,7 +35,7 @@ const getThemeStyles = async preferences => {
35
35
  contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || themeStateDefaults['contrastMode'],
36
36
  dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
37
37
  light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
38
- shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
38
+ shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'](),
39
39
  spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
40
40
  typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']()
41
41
  };
@@ -34,13 +34,14 @@ const setGlobalTheme = async (nextThemeState = {}, themeLoader) => {
34
34
  contrastMode = themeStateDefaults['contrastMode'],
35
35
  dark = themeStateDefaults['dark'],
36
36
  light = themeStateDefaults['light'],
37
- shape = themeStateDefaults['shape'],
37
+ shape = themeStateDefaults['shape'](),
38
38
  spacing = themeStateDefaults['spacing'],
39
39
  typography = themeStateDefaults['typography'](),
40
40
  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
41
41
  } = typeof nextThemeState === 'function' ? nextThemeState({
42
42
  ...themeStateDefaults,
43
43
  typography: themeStateDefaults['typography'](),
44
+ shape: themeStateDefaults['shape'](),
44
45
  ...getGlobalTheme()
45
46
  }) : nextThemeState;
46
47
 
@@ -215,7 +215,12 @@ export const themeStateDefaults = {
215
215
  contrastMode: 'auto',
216
216
  dark: 'dark',
217
217
  light: 'light',
218
- shape: undefined,
218
+ shape: () => {
219
+ if (fg('platform-dst-shape-theme-default')) {
220
+ return 'shape';
221
+ }
222
+ return undefined;
223
+ },
219
224
  spacing: 'spacing',
220
225
  typography: () => {
221
226
  if (fg('platform-disable-default-typography')) {
@@ -36,7 +36,7 @@ export const themeStringToObject = themeState => {
36
36
  if (kind === customThemeOptions) {
37
37
  try {
38
38
  themeObject[customThemeOptions] = JSON.parse(id);
39
- } catch (e) {
39
+ } catch {
40
40
  new Error('Invalid custom theme string');
41
41
  }
42
42
  }
@@ -34,7 +34,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
34
34
  _ref$light = _ref.light,
35
35
  light = _ref$light === void 0 ? themeStateDefaults['light'] : _ref$light,
36
36
  _ref$shape = _ref.shape,
37
- shape = _ref$shape === void 0 ? themeStateDefaults['shape'] : _ref$shape,
37
+ shape = _ref$shape === void 0 ? themeStateDefaults['shape']() : _ref$shape,
38
38
  _ref$spacing = _ref.spacing,
39
39
  spacing = _ref$spacing === void 0 ? themeStateDefaults['spacing'] : _ref$spacing,
40
40
  _ref$typography = _ref.typography,
@@ -35,7 +35,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
35
35
  _ref$contrastMode = _ref.contrastMode,
36
36
  contrastMode = _ref$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref$contrastMode,
37
37
  _ref$shape = _ref.shape,
38
- shape = _ref$shape === void 0 ? themeStateDefaults['shape'] : _ref$shape,
38
+ shape = _ref$shape === void 0 ? themeStateDefaults['shape']() : _ref$shape,
39
39
  _ref$spacing = _ref.spacing,
40
40
  spacing = _ref$spacing === void 0 ? themeStateDefaults['spacing'] : _ref$spacing,
41
41
  _ref$typography = _ref.typography,
@@ -44,7 +44,7 @@ var getThemeStyles = /*#__PURE__*/function () {
44
44
  contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || themeStateDefaults['contrastMode'],
45
45
  dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
46
46
  light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
47
- shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
47
+ shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'](),
48
48
  spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
49
49
  typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']()
50
50
  };
@@ -75,8 +75,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
75
75
  nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
76
76
  themeLoader = _args3.length > 1 ? _args3[1] : undefined;
77
77
  _ref2 = typeof nextThemeState === 'function' ? nextThemeState(_objectSpread(_objectSpread({}, themeStateDefaults), {}, {
78
- typography: themeStateDefaults['typography']()
79
- }, getGlobalTheme())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _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$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _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, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
78
+ typography: themeStateDefaults['typography'](),
79
+ shape: themeStateDefaults['shape']()
80
+ }, getGlobalTheme())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _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$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape']() : _ref2$shape, _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, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
80
81
  // without the feature flag enabled.
81
82
  if (!fg('platform_increased-contrast-themes')) {
82
83
  if (light === 'light-increased-contrast') {
@@ -215,7 +215,12 @@ export var themeStateDefaults = {
215
215
  contrastMode: 'auto',
216
216
  dark: 'dark',
217
217
  light: 'light',
218
- shape: undefined,
218
+ shape: function shape() {
219
+ if (fg('platform-dst-shape-theme-default')) {
220
+ return 'shape';
221
+ }
222
+ return undefined;
223
+ },
219
224
  spacing: 'spacing',
220
225
  typography: function typography() {
221
226
  if (fg('platform-disable-default-typography')) {
@@ -47,7 +47,7 @@ export var themeStringToObject = function themeStringToObject(themeState) {
47
47
  if (kind === customThemeOptions) {
48
48
  try {
49
49
  themeObject[customThemeOptions] = JSON.parse(id);
50
- } catch (e) {
50
+ } catch (_unused) {
51
51
  new Error('Invalid custom theme string');
52
52
  }
53
53
  }
@@ -133,8 +133,9 @@ export interface ThemeState {
133
133
  * Can't evaluate typography feature flags at the module level,
134
134
  * it will always resolve to false when server side rendered or when flags are loaded async.
135
135
  */
136
- interface ThemeStateDefaults extends Omit<ThemeState, 'typography'> {
136
+ interface ThemeStateDefaults extends Omit<ThemeState, 'typography' | 'shape'> {
137
137
  typography: () => ThemeState['typography'];
138
+ shape: () => ThemeState['shape'];
138
139
  }
139
140
  /**
140
141
  * themeStateDefaults: the default values for ThemeState used by theming utilities
@@ -172,8 +172,9 @@ export interface ThemeState {
172
172
  * Can't evaluate typography feature flags at the module level,
173
173
  * it will always resolve to false when server side rendered or when flags are loaded async.
174
174
  */
175
- interface ThemeStateDefaults extends Omit<ThemeState, 'typography'> {
175
+ interface ThemeStateDefaults extends Omit<ThemeState, 'typography' | 'shape'> {
176
176
  typography: () => ThemeState['typography'];
177
+ shape: () => ThemeState['shape'];
177
178
  }
178
179
  /**
179
180
  * themeStateDefaults: the default values for ThemeState used by theming utilities
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "8.3.0",
3
+ "version": "8.4.1",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -60,7 +60,7 @@
60
60
  "@atlaskit/link": "^3.2.0",
61
61
  "@atlaskit/lozenge": "^13.1.0",
62
62
  "@atlaskit/popup": "^4.6.0",
63
- "@atlaskit/primitives": "^16.3.0",
63
+ "@atlaskit/primitives": "^16.4.0",
64
64
  "@atlaskit/radio": "^8.3.0",
65
65
  "@atlaskit/section-message": "^8.9.0",
66
66
  "@atlaskit/select": "^21.4.0",
@@ -68,7 +68,7 @@
68
68
  "@atlaskit/textarea": "^8.1.0",
69
69
  "@atlaskit/textfield": "^8.1.0",
70
70
  "@atlaskit/theme": "^21.0.0",
71
- "@atlaskit/tooltip": "^20.10.0",
71
+ "@atlaskit/tooltip": "^20.11.0",
72
72
  "@atlassian/codegen": "^0.1.0",
73
73
  "@atlassian/feature-flags-test-utils": "^1.0.0",
74
74
  "@atlassian/repo-feature-flags-statsig": "^1.11.0",
@@ -132,6 +132,9 @@
132
132
  },
133
133
  "should-render-to-parent-should-be-true-design-syst": {
134
134
  "type": "boolean"
135
+ },
136
+ "platform-dst-shape-theme-default": {
137
+ "type": "boolean"
135
138
  }
136
139
  },
137
140
  "homepage": "https://atlassian.design/components/tokens"