@atlaskit/tokens 7.1.1 → 8.0.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 +26 -0
- package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +8 -8
- package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +7 -7
- package/dist/cjs/artifacts/palettes-raw/palette.js +147 -147
- package/dist/cjs/artifacts/theme-import-map.js +1 -13
- package/dist/cjs/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +266 -266
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +401 -401
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +436 -436
- package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +273 -273
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +375 -375
- package/dist/cjs/entry-points/palettes-raw.js +0 -7
- package/dist/cjs/entry-points/token-metadata.codegen.js +266 -266
- package/dist/cjs/entry-points/tokens-raw.js +0 -14
- package/dist/cjs/get-theme-styles.js +0 -3
- package/dist/cjs/get-token-value.js +0 -4
- package/dist/cjs/get-token.js +0 -4
- package/dist/cjs/theme-config.js +1 -19
- package/dist/cjs/utils/theme-loading.js +3 -7
- package/dist/es2019/artifacts/atlassian-dark-token-value-for-contrast-check.js +8 -8
- package/dist/es2019/artifacts/atlassian-light-token-value-for-contrast-check.js +7 -7
- package/dist/es2019/artifacts/palettes-raw/palette.js +147 -147
- package/dist/es2019/artifacts/theme-import-map.js +2 -6
- package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +289 -289
- package/dist/es2019/artifacts/themes/atlassian-dark.js +294 -294
- package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +218 -218
- package/dist/es2019/artifacts/themes/atlassian-light.js +266 -266
- package/dist/es2019/artifacts/token-default-values.js +266 -266
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +401 -401
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +436 -436
- package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +273 -273
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +375 -375
- package/dist/es2019/entry-points/palettes-raw.js +0 -1
- package/dist/es2019/entry-points/token-metadata.codegen.js +266 -266
- package/dist/es2019/entry-points/tokens-raw.js +0 -2
- package/dist/es2019/get-theme-styles.js +0 -1
- package/dist/es2019/get-token-value.js +0 -4
- package/dist/es2019/get-token.js +0 -4
- package/dist/es2019/theme-config.js +1 -19
- package/dist/es2019/utils/theme-loading.js +0 -4
- package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js +8 -8
- package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js +7 -7
- package/dist/esm/artifacts/palettes-raw/palette.js +147 -147
- package/dist/esm/artifacts/theme-import-map.js +1 -9
- package/dist/esm/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
- package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +266 -266
- package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +401 -401
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +436 -436
- package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +273 -273
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +375 -375
- package/dist/esm/entry-points/palettes-raw.js +0 -1
- package/dist/esm/entry-points/token-metadata.codegen.js +266 -266
- package/dist/esm/entry-points/tokens-raw.js +0 -2
- package/dist/esm/get-theme-styles.js +0 -3
- package/dist/esm/get-token-value.js +0 -4
- package/dist/esm/get-token.js +0 -4
- package/dist/esm/theme-config.js +1 -19
- package/dist/esm/utils/theme-loading.js +3 -7
- package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +8 -8
- package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +7 -7
- package/dist/types/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +266 -266
- package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types/entry-points/palettes-raw.d.ts +0 -1
- package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types/entry-points/tokens-raw.d.ts +0 -2
- package/dist/types/theme-config.d.ts +6 -6
- package/dist/types-ts4.5/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +8 -8
- package/dist/types-ts4.5/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +7 -7
- package/dist/types-ts4.5/artifacts/palettes-raw/palette.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +266 -266
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/palettes-raw.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/tokens-raw.d.ts +0 -2
- package/dist/types-ts4.5/theme-config.d.ts +4 -8
- package/figma/atlassian-dark-increased-contrast.json +292 -292
- package/figma/atlassian-dark.json +297 -297
- package/figma/atlassian-light-increased-contrast.json +220 -220
- package/figma/atlassian-light.json +268 -268
- package/package.json +5 -5
- package/dist/cjs/artifacts/themes/atlassian-dark-brand-refresh.js +0 -12
- package/dist/cjs/artifacts/themes/atlassian-light-brand-refresh.js +0 -12
- package/dist/es2019/artifacts/themes/atlassian-dark-brand-refresh.js +0 -401
- package/dist/es2019/artifacts/themes/atlassian-light-brand-refresh.js +0 -401
- package/dist/esm/artifacts/themes/atlassian-dark-brand-refresh.js +0 -6
- package/dist/esm/artifacts/themes/atlassian-light-brand-refresh.js +0 -6
- package/dist/types/artifacts/themes/atlassian-dark-brand-refresh.d.ts +0 -7
- package/dist/types/artifacts/themes/atlassian-light-brand-refresh.d.ts +0 -7
- package/dist/types-ts4.5/artifacts/themes/atlassian-dark-brand-refresh.d.ts +0 -7
- package/dist/types-ts4.5/artifacts/themes/atlassian-light-brand-refresh.d.ts +0 -7
- package/figma/atlassian-dark-brand-refresh.json +0 -3558
- package/figma/atlassian-light-brand-refresh.json +0 -3537
|
@@ -10,12 +10,6 @@ Object.defineProperty(exports, "dark", {
|
|
|
10
10
|
return _atlassianDark.default;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
-
Object.defineProperty(exports, "darkBrandRefresh", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function get() {
|
|
16
|
-
return _atlassianDarkBrandRefresh.default;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
13
|
Object.defineProperty(exports, "legacyLightTokens", {
|
|
20
14
|
enumerable: true,
|
|
21
15
|
get: function get() {
|
|
@@ -28,12 +22,6 @@ Object.defineProperty(exports, "light", {
|
|
|
28
22
|
return _atlassianLight.default;
|
|
29
23
|
}
|
|
30
24
|
});
|
|
31
|
-
Object.defineProperty(exports, "lightBrandRefresh", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
get: function get() {
|
|
34
|
-
return _atlassianLightBrandRefresh.default;
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
25
|
Object.defineProperty(exports, "shape", {
|
|
38
26
|
enumerable: true,
|
|
39
27
|
get: function get() {
|
|
@@ -71,10 +59,8 @@ Object.defineProperty(exports, "typographyRefreshed", {
|
|
|
71
59
|
}
|
|
72
60
|
});
|
|
73
61
|
var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
|
|
74
|
-
var _atlassianLightBrandRefresh = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light-brand-refresh"));
|
|
75
62
|
var _atlassianLegacyLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-legacy-light"));
|
|
76
63
|
var _atlassianDark = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-dark"));
|
|
77
|
-
var _atlassianDarkBrandRefresh = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-dark-brand-refresh"));
|
|
78
64
|
var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));
|
|
79
65
|
var _atlassianTypography = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography"));
|
|
80
66
|
var _atlassianTypographyAdg = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography-adg3"));
|
|
@@ -47,9 +47,6 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
47
47
|
return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
themePreferences = themePreferences.filter(function (n) {
|
|
51
|
-
return n !== 'light-brand-refresh' && n !== 'dark-brand-refresh';
|
|
52
|
-
});
|
|
53
50
|
} else {
|
|
54
51
|
themeState = {
|
|
55
52
|
colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
|
|
9
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
9
|
var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
|
|
11
10
|
/**
|
|
12
11
|
* Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
|
|
@@ -37,9 +36,6 @@ function getTokenValue(tokenId) {
|
|
|
37
36
|
if (!token) {
|
|
38
37
|
(0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " in @atlaskit/tokens"));
|
|
39
38
|
}
|
|
40
|
-
if (token === '--ds-icon-subtlest' && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
|
|
41
|
-
(0, _warnOnce.default)("Token \"color.icon.subtlest\" is only available when feature flag \"platform-component-visual-refresh\" is on, don't use it if the flag can't be turned on on this page");
|
|
42
|
-
}
|
|
43
39
|
}
|
|
44
40
|
if (typeof window === 'undefined') {
|
|
45
41
|
return tokenValue;
|
package/dist/cjs/get-token.js
CHANGED
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
|
|
9
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
9
|
var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
|
|
11
10
|
var _constants = require("./constants");
|
|
12
11
|
/**
|
|
@@ -37,9 +36,6 @@ function token(path, fallback) {
|
|
|
37
36
|
if (!token) {
|
|
38
37
|
(0, _warnOnce.default)("Unknown token id at path: ".concat(path, " in @atlaskit/tokens"));
|
|
39
38
|
}
|
|
40
|
-
if (token === '--ds-icon-subtlest' && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
|
|
41
|
-
(0, _warnOnce.default)("Token \"color.icon.subtlest\" is only available when feature flag \"platform-component-visual-refresh\" is on, don't use it if the flag can't be turned on on this page");
|
|
42
|
-
}
|
|
43
39
|
}
|
|
44
40
|
|
|
45
41
|
// if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
|
package/dist/cjs/theme-config.js
CHANGED
|
@@ -45,7 +45,7 @@ var themeContrastModes = ['more', 'no-preference', 'auto'];
|
|
|
45
45
|
*
|
|
46
46
|
* These ids must be kebab case
|
|
47
47
|
*/
|
|
48
|
-
var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', '
|
|
48
|
+
var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'legacy-light', 'legacy-dark', 'spacing', 'shape', 'typography', 'typography-adg3', 'typography-modernized', 'typography-refreshed'];
|
|
49
49
|
/**
|
|
50
50
|
* Theme override ids: the equivalent of themeIds for theme overrides.
|
|
51
51
|
* Theme overrides are temporary and there may not be any defined at times.
|
|
@@ -196,24 +196,6 @@ var themeConfig = {
|
|
|
196
196
|
attributes: {
|
|
197
197
|
type: 'typography'
|
|
198
198
|
}
|
|
199
|
-
},
|
|
200
|
-
'atlassian-light-brand-refresh': {
|
|
201
|
-
id: 'light-brand-refresh',
|
|
202
|
-
displayName: 'Light theme (Brand refresh)',
|
|
203
|
-
palette: 'brandRefreshPalette',
|
|
204
|
-
attributes: {
|
|
205
|
-
type: 'color',
|
|
206
|
-
mode: 'light'
|
|
207
|
-
}
|
|
208
|
-
},
|
|
209
|
-
'atlassian-dark-brand-refresh': {
|
|
210
|
-
id: 'dark-brand-refresh',
|
|
211
|
-
displayName: 'Dark theme (Brand refresh)',
|
|
212
|
-
palette: 'brandRefreshPalette',
|
|
213
|
-
attributes: {
|
|
214
|
-
type: 'color',
|
|
215
|
-
mode: 'dark'
|
|
216
|
-
}
|
|
217
199
|
}
|
|
218
200
|
};
|
|
219
201
|
|
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.moreContrastMediaQuery = exports.loadThemeCss = exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
|
|
8
8
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
10
|
var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
|
|
12
11
|
var _constants = require("../constants");
|
|
13
12
|
var loadAndAppendThemeCss = exports.loadAndAppendThemeCss = /*#__PURE__*/function () {
|
|
@@ -52,16 +51,13 @@ var loadThemeCss = exports.loadThemeCss = /*#__PURE__*/function () {
|
|
|
52
51
|
return _regenerator.default.wrap(function _callee2$(_context2) {
|
|
53
52
|
while (1) switch (_context2.prev = _context2.next) {
|
|
54
53
|
case 0:
|
|
55
|
-
|
|
56
|
-
themeId += '-brand-refresh';
|
|
57
|
-
}
|
|
58
|
-
_context2.next = 3;
|
|
54
|
+
_context2.next = 2;
|
|
59
55
|
return _themeImportMap.default[themeId]();
|
|
60
|
-
case
|
|
56
|
+
case 2:
|
|
61
57
|
_yield$themeImportMap = _context2.sent;
|
|
62
58
|
themeCss = _yield$themeImportMap.default;
|
|
63
59
|
return _context2.abrupt("return", themeCss);
|
|
64
|
-
case
|
|
60
|
+
case 5:
|
|
65
61
|
case "end":
|
|
66
62
|
return _context2.stop();
|
|
67
63
|
}
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their values, used for contrast checking when generating custom themes
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::a4300b2e54a0be0fd9143a9438bedc56>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
const tokenValues = {
|
|
10
|
-
'color.text.brand': '#
|
|
11
|
-
'elevation.surface.overlay': '#
|
|
12
|
-
'color.background.selected': '#
|
|
13
|
-
'color.text.selected': '#
|
|
14
|
-
'color.border.brand': '#
|
|
15
|
-
'color.chart.brand': '#
|
|
16
|
-
'color.text.inverse': '#
|
|
10
|
+
'color.text.brand': '#669DF1',
|
|
11
|
+
'elevation.surface.overlay': '#2B2C2F',
|
|
12
|
+
'color.background.selected': '#1C2B42',
|
|
13
|
+
'color.text.selected': '#669DF1',
|
|
14
|
+
'color.border.brand': '#669DF1',
|
|
15
|
+
'color.chart.brand': '#4688EC',
|
|
16
|
+
'color.text.inverse': '#1F1F21'
|
|
17
17
|
};
|
|
18
18
|
export default tokenValues;
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Token names mapped to their values, used for contrast checking when generating custom themes
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::9bb4cd1746b9d02e7d3b431f3310479f>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
const tokenValues = {
|
|
10
|
-
'color.text.brand': '#
|
|
11
|
-
'elevation.surface.sunken': '#
|
|
12
|
-
'color.background.selected': '#
|
|
13
|
-
'color.text.selected': '#
|
|
14
|
-
'color.border.brand': '#
|
|
15
|
-
'color.chart.brand': '#
|
|
10
|
+
'color.text.brand': '#1868DB',
|
|
11
|
+
'elevation.surface.sunken': '#F8F8F8',
|
|
12
|
+
'color.background.selected': '#E9F2FE',
|
|
13
|
+
'color.text.selected': '#1868DB',
|
|
14
|
+
'color.border.brand': '#1868DB',
|
|
15
|
+
'color.chart.brand': '#357DE8',
|
|
16
16
|
'color.text.inverse': '#FFFFFF'
|
|
17
17
|
};
|
|
18
18
|
export default tokenValues;
|