@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 +15 -0
- package/codemods/theme-to-design-tokens/transform.tsx +1 -0
- package/dist/cjs/enable-global-theme.js +1 -1
- package/dist/cjs/get-theme-html-attrs.js +1 -1
- package/dist/cjs/get-theme-styles.js +1 -1
- package/dist/cjs/set-global-theme.js +3 -2
- package/dist/cjs/theme-config.js +6 -1
- package/dist/cjs/theme-state-transformer.js +1 -1
- package/dist/es2019/enable-global-theme.js +1 -1
- package/dist/es2019/get-theme-html-attrs.js +1 -1
- package/dist/es2019/get-theme-styles.js +1 -1
- package/dist/es2019/set-global-theme.js +2 -1
- package/dist/es2019/theme-config.js +6 -1
- package/dist/es2019/theme-state-transformer.js +1 -1
- package/dist/esm/enable-global-theme.js +1 -1
- package/dist/esm/get-theme-html-attrs.js +1 -1
- package/dist/esm/get-theme-styles.js +1 -1
- package/dist/esm/set-global-theme.js +3 -2
- package/dist/esm/theme-config.js +6 -1
- package/dist/esm/theme-state-transformer.js +1 -1
- package/dist/types/theme-config.d.ts +2 -1
- package/dist/types-ts4.5/theme-config.d.ts +2 -1
- package/package.json +6 -3
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
|
-
|
|
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') {
|
package/dist/cjs/theme-config.js
CHANGED
|
@@ -220,7 +220,12 @@ var themeStateDefaults = exports.themeStateDefaults = {
|
|
|
220
220
|
contrastMode: 'auto',
|
|
221
221
|
dark: 'dark',
|
|
222
222
|
light: 'light',
|
|
223
|
-
shape:
|
|
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 (
|
|
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:
|
|
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')) {
|
|
@@ -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
|
-
|
|
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') {
|
package/dist/esm/theme-config.js
CHANGED
|
@@ -215,7 +215,12 @@ export var themeStateDefaults = {
|
|
|
215
215
|
contrastMode: 'auto',
|
|
216
216
|
dark: 'dark',
|
|
217
217
|
light: 'light',
|
|
218
|
-
shape:
|
|
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 (
|
|
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
|
+
"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.
|
|
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.
|
|
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"
|