@atlaskit/tokens 1.59.1 → 1.61.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 +21 -0
- package/dist/cjs/artifacts/theme-import-map.js +1 -1
- package/dist/cjs/babel-plugin/plugin.js +3 -11
- package/dist/cjs/get-ssr-auto-script.js +1 -1
- package/dist/cjs/get-theme-html-attrs.js +1 -1
- package/dist/cjs/get-theme-styles.js +2 -2
- package/dist/cjs/set-global-theme.js +5 -5
- package/dist/cjs/utils/configure-page.js +2 -2
- package/dist/cjs/utils/get-theme-preferences.js +2 -2
- package/dist/cjs/utils/hct-color-utils/color-utils.js +1 -1
- package/dist/cjs/utils/hct-color-utils/contrast.js +1 -1
- package/dist/cjs/utils/hct-color-utils/hct.js +1 -1
- package/dist/es2019/get-ssr-auto-script.js +2 -2
- package/dist/es2019/get-theme-html-attrs.js +2 -2
- package/dist/es2019/get-theme-styles.js +1 -1
- package/dist/es2019/set-global-theme.js +1 -1
- package/dist/es2019/utils/configure-page.js +3 -3
- package/dist/es2019/utils/get-theme-preferences.js +2 -2
- package/dist/esm/babel-plugin/plugin.js +2 -10
- package/dist/esm/get-ssr-auto-script.js +2 -2
- package/dist/esm/get-theme-html-attrs.js +2 -2
- package/dist/esm/get-theme-styles.js +1 -1
- package/dist/esm/set-global-theme.js +4 -4
- package/dist/esm/utils/configure-page.js +3 -3
- package/dist/esm/utils/get-theme-preferences.js +2 -2
- package/dist/types/entry-points/css-type-schema.codegen.d.ts +21 -8
- package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +21 -8
- package/package.json +6 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/tokens
|
|
2
2
|
|
|
3
|
+
## 1.61.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#143310](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143310)
|
|
8
|
+
[`b41f7cad2418e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b41f7cad2418e) -
|
|
9
|
+
Migrated feature flag for increased contrast themes to new provider
|
|
10
|
+
|
|
11
|
+
## 1.60.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#138792](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138792)
|
|
16
|
+
[`59c6812e1be91`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/59c6812e1be91) -
|
|
17
|
+
Update the @atlaskit/css schema to include:
|
|
18
|
+
|
|
19
|
+
- `border` and `font` shorthand token values
|
|
20
|
+
- Background and color `-hovered` and `-pressed` tokens are available in the non-psuedo-states for
|
|
21
|
+
patterns like `<div css={[isHovered && hoveredStyles]} />`
|
|
22
|
+
- Adds more commonly used media queries
|
|
23
|
+
|
|
3
24
|
## 1.59.1
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
10
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
10
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
11
|
/**
|
|
12
12
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
13
13
|
*
|
|
@@ -15,7 +15,7 @@ var _atlassianShape = _interopRequireDefault(require("../artifacts/tokens-raw/at
|
|
|
15
15
|
var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));
|
|
16
16
|
var _atlassianTypographyAdg = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography-adg3"));
|
|
17
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
21
|
// Convert raw tokens to key-value pairs { token: value }
|
|
@@ -65,15 +65,7 @@ function plugin() {
|
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
67
67
|
path.traverse({
|
|
68
|
-
CallExpression: function (
|
|
69
|
-
function CallExpression(_x) {
|
|
70
|
-
return _CallExpression.apply(this, arguments);
|
|
71
|
-
}
|
|
72
|
-
CallExpression.toString = function () {
|
|
73
|
-
return _CallExpression.toString();
|
|
74
|
-
};
|
|
75
|
-
return CallExpression;
|
|
76
|
-
}(function (path) {
|
|
68
|
+
CallExpression: function CallExpression(path) {
|
|
77
69
|
var tokenImportScope = getTokenImportScope(path);
|
|
78
70
|
if (!tokenImportScope) {
|
|
79
71
|
return;
|
|
@@ -127,7 +119,7 @@ function plugin() {
|
|
|
127
119
|
replacementNode && path.replaceWith(replacementNode);
|
|
128
120
|
// @ts-ignore crawl is a valid property
|
|
129
121
|
tokenImportScope.crawl();
|
|
130
|
-
}
|
|
122
|
+
}
|
|
131
123
|
});
|
|
132
124
|
},
|
|
133
125
|
exit: function exit(path) {
|
|
@@ -20,7 +20,7 @@ var getSSRAutoScript = function getSSRAutoScript(colorMode, contrastMode) {
|
|
|
20
20
|
return undefined;
|
|
21
21
|
}
|
|
22
22
|
var setColorMode = colorMode === 'auto' ? "\n try {\n const darkModeMql = window.matchMedia('".concat(_themeLoading.darkModeMediaQuery, "');\n const colorMode = darkModeMql.matches ? 'dark' : 'light';\n document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n } catch (e) {}") : '';
|
|
23
|
-
var setContrastMode = (0, _platformFeatureFlags.
|
|
23
|
+
var setContrastMode = contrastMode === 'auto' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes') ? "\n try {\n const contrastModeMql = window.matchMedia('".concat(_themeLoading.moreContrastMediaQuery, "');\n const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';\n document.documentElement.setAttribute('").concat(_constants.CONTRAST_MODE_ATTRIBUTE, "', contrastMode);\n } catch (e) {}") : '';
|
|
24
24
|
return "(() => {".concat(setColorMode).concat(setContrastMode, "})()");
|
|
25
25
|
};
|
|
26
26
|
var _default = exports.default = getSSRAutoScript;
|
|
@@ -58,7 +58,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
|
|
|
58
58
|
typography: typography
|
|
59
59
|
});
|
|
60
60
|
var result = (_result = {}, (0, _defineProperty2.default)(_result, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_result, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
|
|
61
|
-
if ((0, _platformFeatureFlags.
|
|
61
|
+
if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
62
62
|
result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, _constants.CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
|
|
63
63
|
}
|
|
64
64
|
if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
|
|
@@ -15,7 +15,7 @@ var _colorUtils = require("./utils/color-utils");
|
|
|
15
15
|
var _getThemePreferences = require("./utils/get-theme-preferences");
|
|
16
16
|
var _themeLoading = require("./utils/theme-loading");
|
|
17
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
19
|
/**
|
|
20
20
|
* Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
|
|
21
21
|
* Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
|
|
@@ -43,7 +43,7 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
43
43
|
themePreferences = _themeConfig.themeIdsWithOverrides;
|
|
44
44
|
|
|
45
45
|
// CLEANUP: Remove
|
|
46
|
-
if (!(0, _platformFeatureFlags.fg)('
|
|
46
|
+
if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
47
47
|
themePreferences = themePreferences.filter(function (n) {
|
|
48
48
|
return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
|
|
49
49
|
});
|
|
@@ -15,11 +15,11 @@ var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
|
|
|
15
15
|
var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
|
|
16
16
|
var _getThemePreferences = require("./utils/get-theme-preferences");
|
|
17
17
|
var _themeLoading = require("./utils/theme-loading");
|
|
18
|
-
function _createForOfIteratorHelper(
|
|
19
|
-
function _unsupportedIterableToArray(
|
|
20
|
-
function _arrayLikeToArray(
|
|
18
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
19
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
20
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
22
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
23
|
/**
|
|
24
24
|
* Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
|
|
25
25
|
*
|
|
@@ -80,7 +80,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
80
80
|
themeLoader = _args3.length > 1 ? _args3[1] : undefined;
|
|
81
81
|
// CLEANUP: Remove. This blocks application of increased contrast themes
|
|
82
82
|
// without the feature flag enabled.
|
|
83
|
-
if (!(0, _platformFeatureFlags.fg)('
|
|
83
|
+
if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
84
84
|
if (light === 'light-increased-contrast') {
|
|
85
85
|
light = 'light';
|
|
86
86
|
}
|
|
@@ -23,7 +23,7 @@ function configurePage(themeState) {
|
|
|
23
23
|
} else {
|
|
24
24
|
_colorModeListeners.default.unbind();
|
|
25
25
|
}
|
|
26
|
-
if ((0, _platformFeatureFlags.
|
|
26
|
+
if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
27
27
|
if (themeState.contrastMode === 'auto') {
|
|
28
28
|
// Set contrastMode based on the user preference
|
|
29
29
|
themeState.contrastMode = _contrastModeListeners.default.getContrastMode();
|
|
@@ -42,7 +42,7 @@ function configurePage(themeState) {
|
|
|
42
42
|
});
|
|
43
43
|
return function () {
|
|
44
44
|
_colorModeListeners.default.unbind();
|
|
45
|
-
if ((0, _platformFeatureFlags.
|
|
45
|
+
if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
46
46
|
_contrastModeListeners.default.unbind();
|
|
47
47
|
}
|
|
48
48
|
};
|
|
@@ -19,7 +19,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
|
|
|
19
19
|
var autoColorModeThemes = [light, dark];
|
|
20
20
|
var themePreferences = [];
|
|
21
21
|
if (colorMode === 'auto') {
|
|
22
|
-
if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('
|
|
22
|
+
if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
23
23
|
autoColorModeThemes.forEach(function (normalTheme) {
|
|
24
24
|
var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(normalTheme);
|
|
25
25
|
if (increasedContrastTheme) {
|
|
@@ -30,7 +30,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
|
|
|
30
30
|
themePreferences.push.apply(themePreferences, autoColorModeThemes);
|
|
31
31
|
} else {
|
|
32
32
|
themePreferences.push(themeState[colorMode]);
|
|
33
|
-
if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('
|
|
33
|
+
if (contrastMode !== 'no-preference' && (0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
|
|
34
34
|
var increasedContrastTheme = (0, _getIncreasedContrastTheme.default)(themeState[colorMode]);
|
|
35
35
|
if (increasedContrastTheme) {
|
|
36
36
|
themePreferences.push(increasedContrastTheme);
|
|
@@ -24,7 +24,7 @@ exports.xyzFromArgb = xyzFromArgb;
|
|
|
24
24
|
exports.yFromLstar = yFromLstar;
|
|
25
25
|
var mathUtils = _interopRequireWildcard(require("./math-utils"));
|
|
26
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
27
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
27
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
28
28
|
/**
|
|
29
29
|
* Below lines are copied from @material/material-color-utilities.
|
|
30
30
|
* Do not modify it.
|
|
@@ -11,7 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
|
|
|
11
11
|
var utils = _interopRequireWildcard(require("./color-utils"));
|
|
12
12
|
var math = _interopRequireWildcard(require("./math-utils"));
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
15
|
/**
|
|
16
16
|
* Below lines are copied from @material/material-color-utilities.
|
|
17
17
|
* Do not modify it.
|
|
@@ -33,7 +33,7 @@ var _class2;
|
|
|
33
33
|
* limitations under the License.
|
|
34
34
|
*/
|
|
35
35
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
36
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
36
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
37
37
|
/**
|
|
38
38
|
* A color system built using CAM16 hue and chroma, and L* from
|
|
39
39
|
* L*a*b*.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE } from './constants';
|
|
3
3
|
import { darkModeMediaQuery, moreContrastMediaQuery } from './utils/theme-loading';
|
|
4
4
|
|
|
@@ -19,7 +19,7 @@ const getSSRAutoScript = (colorMode, contrastMode) => {
|
|
|
19
19
|
const colorMode = darkModeMql.matches ? 'dark' : 'light';
|
|
20
20
|
document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
|
|
21
21
|
} catch (e) {}` : '';
|
|
22
|
-
const setContrastMode =
|
|
22
|
+
const setContrastMode = contrastMode === 'auto' && fg('platform_increased-contrast-themes') ? `\n try {
|
|
23
23
|
const contrastModeMql = window.matchMedia('${moreContrastMediaQuery}');
|
|
24
24
|
const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';
|
|
25
25
|
document.documentElement.setAttribute('${CONTRAST_MODE_ATTRIBUTE}', contrastMode);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
|
|
3
3
|
import { themeStateDefaults } from './theme-config';
|
|
4
4
|
import { themeObjectToString } from './theme-state-transformer';
|
|
@@ -42,7 +42,7 @@ const getThemeHtmlAttrs = ({
|
|
|
42
42
|
[THEME_DATA_ATTRIBUTE]: themeAttribute,
|
|
43
43
|
[COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
|
|
44
44
|
};
|
|
45
|
-
if (
|
|
45
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
46
46
|
result = {
|
|
47
47
|
...result,
|
|
48
48
|
// CLEANUP: Move this to the initial `result` assignment above
|
|
@@ -26,7 +26,7 @@ const getThemeStyles = async preferences => {
|
|
|
26
26
|
themePreferences = themeIdsWithOverrides;
|
|
27
27
|
|
|
28
28
|
// CLEANUP: Remove
|
|
29
|
-
if (!fg('
|
|
29
|
+
if (!fg('platform_increased-contrast-themes')) {
|
|
30
30
|
themePreferences = themePreferences.filter(n => n !== 'light-increased-contrast' && n !== 'dark-increased-contrast');
|
|
31
31
|
}
|
|
32
32
|
themePreferences = themePreferences.filter(n => n !== 'light-brand-refresh' && n !== 'dark-brand-refresh');
|
|
@@ -39,7 +39,7 @@ const setGlobalTheme = async ({
|
|
|
39
39
|
} = {}, themeLoader) => {
|
|
40
40
|
// CLEANUP: Remove. This blocks application of increased contrast themes
|
|
41
41
|
// without the feature flag enabled.
|
|
42
|
-
if (!fg('
|
|
42
|
+
if (!fg('platform_increased-contrast-themes')) {
|
|
43
43
|
if (light === 'light-increased-contrast') {
|
|
44
44
|
light = 'light';
|
|
45
45
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import getThemeHtmlAttrs from '../get-theme-html-attrs';
|
|
3
3
|
import ColorModeObserver from './color-mode-listeners';
|
|
4
4
|
import ContrastModeObserver from './contrast-mode-listeners';
|
|
@@ -16,7 +16,7 @@ export default function configurePage(themeState) {
|
|
|
16
16
|
} else {
|
|
17
17
|
ColorModeObserver.unbind();
|
|
18
18
|
}
|
|
19
|
-
if (
|
|
19
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
20
20
|
if (themeState.contrastMode === 'auto') {
|
|
21
21
|
// Set contrastMode based on the user preference
|
|
22
22
|
themeState.contrastMode = ContrastModeObserver.getContrastMode();
|
|
@@ -32,7 +32,7 @@ export default function configurePage(themeState) {
|
|
|
32
32
|
});
|
|
33
33
|
return () => {
|
|
34
34
|
ColorModeObserver.unbind();
|
|
35
|
-
if (
|
|
35
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
36
36
|
ContrastModeObserver.unbind();
|
|
37
37
|
}
|
|
38
38
|
};
|
|
@@ -13,7 +13,7 @@ export const getThemePreferences = themeState => {
|
|
|
13
13
|
const autoColorModeThemes = [light, dark];
|
|
14
14
|
const themePreferences = [];
|
|
15
15
|
if (colorMode === 'auto') {
|
|
16
|
-
if (contrastMode !== 'no-preference' && fg('
|
|
16
|
+
if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
|
|
17
17
|
autoColorModeThemes.forEach(normalTheme => {
|
|
18
18
|
const increasedContrastTheme = getIncreasedContrastTheme(normalTheme);
|
|
19
19
|
if (increasedContrastTheme) {
|
|
@@ -24,7 +24,7 @@ export const getThemePreferences = themeState => {
|
|
|
24
24
|
themePreferences.push(...autoColorModeThemes);
|
|
25
25
|
} else {
|
|
26
26
|
themePreferences.push(themeState[colorMode]);
|
|
27
|
-
if (contrastMode !== 'no-preference' && fg('
|
|
27
|
+
if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
|
|
28
28
|
const increasedContrastTheme = getIncreasedContrastTheme(themeState[colorMode]);
|
|
29
29
|
if (increasedContrastTheme) {
|
|
30
30
|
themePreferences.push(increasedContrastTheme);
|
|
@@ -55,15 +55,7 @@ export default function plugin() {
|
|
|
55
55
|
return;
|
|
56
56
|
}
|
|
57
57
|
path.traverse({
|
|
58
|
-
CallExpression: function (
|
|
59
|
-
function CallExpression(_x) {
|
|
60
|
-
return _CallExpression.apply(this, arguments);
|
|
61
|
-
}
|
|
62
|
-
CallExpression.toString = function () {
|
|
63
|
-
return _CallExpression.toString();
|
|
64
|
-
};
|
|
65
|
-
return CallExpression;
|
|
66
|
-
}(function (path) {
|
|
58
|
+
CallExpression: function CallExpression(path) {
|
|
67
59
|
var tokenImportScope = getTokenImportScope(path);
|
|
68
60
|
if (!tokenImportScope) {
|
|
69
61
|
return;
|
|
@@ -117,7 +109,7 @@ export default function plugin() {
|
|
|
117
109
|
replacementNode && path.replaceWith(replacementNode);
|
|
118
110
|
// @ts-ignore crawl is a valid property
|
|
119
111
|
tokenImportScope.crawl();
|
|
120
|
-
}
|
|
112
|
+
}
|
|
121
113
|
});
|
|
122
114
|
},
|
|
123
115
|
exit: function exit(path) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE } from './constants';
|
|
3
3
|
import { darkModeMediaQuery, moreContrastMediaQuery } from './utils/theme-loading';
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ var getSSRAutoScript = function getSSRAutoScript(colorMode, contrastMode) {
|
|
|
15
15
|
return undefined;
|
|
16
16
|
}
|
|
17
17
|
var setColorMode = colorMode === 'auto' ? "\n try {\n const darkModeMql = window.matchMedia('".concat(darkModeMediaQuery, "');\n const colorMode = darkModeMql.matches ? 'dark' : 'light';\n document.documentElement.setAttribute('").concat(COLOR_MODE_ATTRIBUTE, "', colorMode);\n } catch (e) {}") : '';
|
|
18
|
-
var setContrastMode =
|
|
18
|
+
var setContrastMode = contrastMode === 'auto' && fg('platform_increased-contrast-themes') ? "\n try {\n const contrastModeMql = window.matchMedia('".concat(moreContrastMediaQuery, "');\n const contrastMode = contrastModeMql.matches ? 'more' : 'no-preference';\n document.documentElement.setAttribute('").concat(CONTRAST_MODE_ATTRIBUTE, "', contrastMode);\n } catch (e) {}") : '';
|
|
19
19
|
return "(() => {".concat(setColorMode).concat(setContrastMode, "})()");
|
|
20
20
|
};
|
|
21
21
|
export default getSSRAutoScript;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import {
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
|
|
6
6
|
import { themeStateDefaults } from './theme-config';
|
|
7
7
|
import { themeObjectToString } from './theme-state-transformer';
|
|
@@ -51,7 +51,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
|
|
|
51
51
|
typography: typography
|
|
52
52
|
});
|
|
53
53
|
var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
|
|
54
|
-
if (
|
|
54
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
55
55
|
result = _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
|
|
56
56
|
}
|
|
57
57
|
if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
|
|
@@ -33,7 +33,7 @@ var getThemeStyles = /*#__PURE__*/function () {
|
|
|
33
33
|
themePreferences = themeIdsWithOverrides;
|
|
34
34
|
|
|
35
35
|
// CLEANUP: Remove
|
|
36
|
-
if (!fg('
|
|
36
|
+
if (!fg('platform_increased-contrast-themes')) {
|
|
37
37
|
themePreferences = themePreferences.filter(function (n) {
|
|
38
38
|
return n !== 'light-increased-contrast' && n !== 'dark-increased-contrast';
|
|
39
39
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
-
function _createForOfIteratorHelper(
|
|
3
|
-
function _unsupportedIterableToArray(
|
|
4
|
-
function _arrayLikeToArray(
|
|
2
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
5
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
7
|
import { themeStateDefaults } from './theme-config';
|
|
@@ -71,7 +71,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
|
|
|
71
71
|
themeLoader = _args3.length > 1 ? _args3[1] : undefined;
|
|
72
72
|
// CLEANUP: Remove. This blocks application of increased contrast themes
|
|
73
73
|
// without the feature flag enabled.
|
|
74
|
-
if (!fg('
|
|
74
|
+
if (!fg('platform_increased-contrast-themes')) {
|
|
75
75
|
if (light === 'light-increased-contrast') {
|
|
76
76
|
light = 'light';
|
|
77
77
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import {
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import getThemeHtmlAttrs from '../get-theme-html-attrs';
|
|
4
4
|
import ColorModeObserver from './color-mode-listeners';
|
|
5
5
|
import ContrastModeObserver from './contrast-mode-listeners';
|
|
@@ -17,7 +17,7 @@ export default function configurePage(themeState) {
|
|
|
17
17
|
} else {
|
|
18
18
|
ColorModeObserver.unbind();
|
|
19
19
|
}
|
|
20
|
-
if (
|
|
20
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
21
21
|
if (themeState.contrastMode === 'auto') {
|
|
22
22
|
// Set contrastMode based on the user preference
|
|
23
23
|
themeState.contrastMode = ContrastModeObserver.getContrastMode();
|
|
@@ -36,7 +36,7 @@ export default function configurePage(themeState) {
|
|
|
36
36
|
});
|
|
37
37
|
return function () {
|
|
38
38
|
ColorModeObserver.unbind();
|
|
39
|
-
if (
|
|
39
|
+
if (fg('platform_increased-contrast-themes')) {
|
|
40
40
|
ContrastModeObserver.unbind();
|
|
41
41
|
}
|
|
42
42
|
};
|
|
@@ -12,7 +12,7 @@ export var getThemePreferences = function getThemePreferences(themeState) {
|
|
|
12
12
|
var autoColorModeThemes = [light, dark];
|
|
13
13
|
var themePreferences = [];
|
|
14
14
|
if (colorMode === 'auto') {
|
|
15
|
-
if (contrastMode !== 'no-preference' && fg('
|
|
15
|
+
if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
|
|
16
16
|
autoColorModeThemes.forEach(function (normalTheme) {
|
|
17
17
|
var increasedContrastTheme = getIncreasedContrastTheme(normalTheme);
|
|
18
18
|
if (increasedContrastTheme) {
|
|
@@ -23,7 +23,7 @@ export var getThemePreferences = function getThemePreferences(themeState) {
|
|
|
23
23
|
themePreferences.push.apply(themePreferences, autoColorModeThemes);
|
|
24
24
|
} else {
|
|
25
25
|
themePreferences.push(themeState[colorMode]);
|
|
26
|
-
if (contrastMode !== 'no-preference' && fg('
|
|
26
|
+
if (contrastMode !== 'no-preference' && fg('platform_increased-contrast-themes')) {
|
|
27
27
|
var increasedContrastTheme = getIncreasedContrastTheme(themeState[colorMode]);
|
|
28
28
|
if (increasedContrastTheme) {
|
|
29
29
|
themePreferences.push(increasedContrastTheme);
|
|
@@ -3,23 +3,25 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Strict design token based typedef representing a subset of safe CSS properties.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::21c2ae52ced4fa9337277f9daca4b814>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
|
-
export type BackgroundColor = 'transparent' | 'currentcolor' | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
|
|
10
9
|
export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
|
|
11
10
|
export type BackgroundColorPressed = 'var(--ds-background-accent-lime-subtlest-pressed)' | 'var(--ds-background-accent-lime-subtler-pressed)' | 'var(--ds-background-accent-lime-subtle-pressed)' | 'var(--ds-background-accent-lime-bolder-pressed)' | 'var(--ds-background-accent-red-subtlest-pressed)' | 'var(--ds-background-accent-red-subtler-pressed)' | 'var(--ds-background-accent-red-subtle-pressed)' | 'var(--ds-background-accent-red-bolder-pressed)' | 'var(--ds-background-accent-orange-subtlest-pressed)' | 'var(--ds-background-accent-orange-subtler-pressed)' | 'var(--ds-background-accent-orange-subtle-pressed)' | 'var(--ds-background-accent-orange-bolder-pressed)' | 'var(--ds-background-accent-yellow-subtlest-pressed)' | 'var(--ds-background-accent-yellow-subtler-pressed)' | 'var(--ds-background-accent-yellow-subtle-pressed)' | 'var(--ds-background-accent-yellow-bolder-pressed)' | 'var(--ds-background-accent-green-subtlest-pressed)' | 'var(--ds-background-accent-green-subtler-pressed)' | 'var(--ds-background-accent-green-subtle-pressed)' | 'var(--ds-background-accent-green-bolder-pressed)' | 'var(--ds-background-accent-teal-subtlest-pressed)' | 'var(--ds-background-accent-teal-subtler-pressed)' | 'var(--ds-background-accent-teal-subtle-pressed)' | 'var(--ds-background-accent-teal-bolder-pressed)' | 'var(--ds-background-accent-blue-subtlest-pressed)' | 'var(--ds-background-accent-blue-subtler-pressed)' | 'var(--ds-background-accent-blue-subtle-pressed)' | 'var(--ds-background-accent-blue-bolder-pressed)' | 'var(--ds-background-accent-purple-subtlest-pressed)' | 'var(--ds-background-accent-purple-subtler-pressed)' | 'var(--ds-background-accent-purple-subtle-pressed)' | 'var(--ds-background-accent-purple-bolder-pressed)' | 'var(--ds-background-accent-magenta-subtlest-pressed)' | 'var(--ds-background-accent-magenta-subtler-pressed)' | 'var(--ds-background-accent-magenta-subtle-pressed)' | 'var(--ds-background-accent-magenta-bolder-pressed)' | 'var(--ds-background-accent-gray-subtlest-pressed)' | 'var(--ds-background-accent-gray-subtler-pressed)' | 'var(--ds-background-accent-gray-subtle-pressed)' | 'var(--ds-background-accent-gray-bolder-pressed)' | 'var(--ds-background-input-pressed)' | 'var(--ds-background-inverse-subtle-pressed)' | 'var(--ds-background-neutral-pressed)' | 'var(--ds-background-neutral-subtle-pressed)' | 'var(--ds-background-neutral-bold-pressed)' | 'var(--ds-background-selected-pressed)' | 'var(--ds-background-selected-bold-pressed)' | 'var(--ds-background-brand-subtlest-pressed)' | 'var(--ds-background-brand-bold-pressed)' | 'var(--ds-background-brand-boldest-pressed)' | 'var(--ds-background-danger-pressed)' | 'var(--ds-background-danger-bold-pressed)' | 'var(--ds-background-warning-pressed)' | 'var(--ds-background-warning-bold-pressed)' | 'var(--ds-background-success-pressed)' | 'var(--ds-background-success-bold-pressed)' | 'var(--ds-background-discovery-pressed)' | 'var(--ds-background-discovery-bold-pressed)' | 'var(--ds-background-information-pressed)' | 'var(--ds-background-information-bold-pressed)' | 'var(--ds-surface-pressed)' | 'var(--ds-surface-overlay-pressed)' | 'var(--ds-surface-raised-pressed)';
|
|
12
|
-
export type
|
|
11
|
+
export type BackgroundColor = 'transparent' | 'currentcolor' | BackgroundColorHovered | BackgroundColorPressed | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
|
|
12
|
+
export type FontShorthand = 'var(--ds-font-heading-xxlarge)' | 'var(--ds-font-heading-xlarge)' | 'var(--ds-font-heading-large)' | 'var(--ds-font-heading-medium)' | 'var(--ds-font-heading-small)' | 'var(--ds-font-heading-xsmall)' | 'var(--ds-font-heading-xxsmall)' | 'var(--ds-font-body-large)' | 'var(--ds-font-body)' | 'var(--ds-font-body-small)' | 'var(--ds-font-body-UNSAFE_small)' | 'var(--ds-font-code)';
|
|
13
13
|
export type IconColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
|
|
14
|
-
export type
|
|
15
|
-
export type
|
|
14
|
+
export type IconColor = IconColorPressed | 'var(--ds-link)' | 'var(--ds-link-visited)' | 'var(--ds-icon)' | 'var(--ds-icon-accent-lime)' | 'var(--ds-icon-accent-red)' | 'var(--ds-icon-accent-orange)' | 'var(--ds-icon-accent-yellow)' | 'var(--ds-icon-accent-green)' | 'var(--ds-icon-accent-teal)' | 'var(--ds-icon-accent-blue)' | 'var(--ds-icon-accent-purple)' | 'var(--ds-icon-accent-magenta)' | 'var(--ds-icon-accent-gray)' | 'var(--ds-icon-disabled)' | 'var(--ds-icon-inverse)' | 'var(--ds-icon-selected)' | 'var(--ds-icon-brand)' | 'var(--ds-icon-danger)' | 'var(--ds-icon-warning)' | 'var(--ds-icon-warning-inverse)' | 'var(--ds-icon-success)' | 'var(--ds-icon-discovery)' | 'var(--ds-icon-information)' | 'var(--ds-icon-subtlest)' | 'var(--ds-icon-subtle)';
|
|
15
|
+
export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-warning)' | 'var(--ds-border-success)' | 'var(--ds-border-discovery)' | 'var(--ds-border-information)' | 'var(--ds-border-bold)';
|
|
16
16
|
export type BorderRadius = 'var(--ds-border-radius-050)' | 'var(--ds-border-radius)' | 'var(--ds-border-radius-100)' | 'var(--ds-border-radius-200)' | 'var(--ds-border-radius-300)' | 'var(--ds-border-radius-400)' | 'var(--ds-border-radius-circle)';
|
|
17
|
-
export type
|
|
17
|
+
export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indicator)' | 'var(--ds-border-width-outline)';
|
|
18
|
+
export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
|
|
19
|
+
export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
|
|
18
20
|
export type Space = 'var(--ds-space-0)' | 'var(--ds-space-025)' | 'var(--ds-space-050)' | 'var(--ds-space-075)' | 'var(--ds-space-100)' | 'var(--ds-space-150)' | 'var(--ds-space-200)' | 'var(--ds-space-250)' | 'var(--ds-space-300)' | 'var(--ds-space-400)' | 'var(--ds-space-500)' | 'var(--ds-space-600)' | 'var(--ds-space-800)' | 'var(--ds-space-1000)' | 'var(--ds-space-negative-025)' | 'var(--ds-space-negative-050)' | 'var(--ds-space-negative-075)' | 'var(--ds-space-negative-100)' | 'var(--ds-space-negative-150)' | 'var(--ds-space-negative-200)' | 'var(--ds-space-negative-250)' | 'var(--ds-space-negative-300)' | 'var(--ds-space-negative-400)';
|
|
19
21
|
export type SpaceMargin = Space | 'auto' | '0 auto' | '0';
|
|
20
22
|
export type Shadow = 'var(--ds-shadow-overflow)' | 'var(--ds-shadow-overflow-perimeter)' | 'var(--ds-shadow-overflow-spread)' | 'var(--ds-shadow-overlay)' | 'var(--ds-shadow-raised)';
|
|
21
|
-
export type TextColor = 'transparent' | 'var(--ds-text)' | 'var(--ds-text-accent-lime)' | 'var(--ds-text-accent-lime-bolder)' | 'var(--ds-text-accent-red)' | 'var(--ds-text-accent-red-bolder)' | 'var(--ds-text-accent-orange)' | 'var(--ds-text-accent-orange-bolder)' | 'var(--ds-text-accent-yellow)' | 'var(--ds-text-accent-yellow-bolder)' | 'var(--ds-text-accent-green)' | 'var(--ds-text-accent-green-bolder)' | 'var(--ds-text-accent-teal)' | 'var(--ds-text-accent-teal-bolder)' | 'var(--ds-text-accent-blue)' | 'var(--ds-text-accent-blue-bolder)' | 'var(--ds-text-accent-purple)' | 'var(--ds-text-accent-purple-bolder)' | 'var(--ds-text-accent-magenta)' | 'var(--ds-text-accent-magenta-bolder)' | 'var(--ds-text-accent-gray)' | 'var(--ds-text-accent-gray-bolder)' | 'var(--ds-text-disabled)' | 'var(--ds-text-inverse)' | 'var(--ds-text-selected)' | 'var(--ds-text-brand)' | 'var(--ds-text-danger)' | 'var(--ds-text-warning)' | 'var(--ds-text-warning-inverse)' | 'var(--ds-text-success)' | 'var(--ds-text-discovery)' | 'var(--ds-text-information)' | 'var(--ds-text-subtlest)' | 'var(--ds-text-subtle)' | 'var(--ds-link)' | 'var(--ds-link-visited)';
|
|
22
23
|
export type TextColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
|
|
24
|
+
export type TextColor = 'transparent' | TextColorPressed | 'var(--ds-text)' | 'var(--ds-text-accent-lime)' | 'var(--ds-text-accent-lime-bolder)' | 'var(--ds-text-accent-red)' | 'var(--ds-text-accent-red-bolder)' | 'var(--ds-text-accent-orange)' | 'var(--ds-text-accent-orange-bolder)' | 'var(--ds-text-accent-yellow)' | 'var(--ds-text-accent-yellow-bolder)' | 'var(--ds-text-accent-green)' | 'var(--ds-text-accent-green-bolder)' | 'var(--ds-text-accent-teal)' | 'var(--ds-text-accent-teal-bolder)' | 'var(--ds-text-accent-blue)' | 'var(--ds-text-accent-blue-bolder)' | 'var(--ds-text-accent-purple)' | 'var(--ds-text-accent-purple-bolder)' | 'var(--ds-text-accent-magenta)' | 'var(--ds-text-accent-magenta-bolder)' | 'var(--ds-text-accent-gray)' | 'var(--ds-text-accent-gray-bolder)' | 'var(--ds-text-disabled)' | 'var(--ds-text-inverse)' | 'var(--ds-text-selected)' | 'var(--ds-text-brand)' | 'var(--ds-text-danger)' | 'var(--ds-text-warning)' | 'var(--ds-text-warning-inverse)' | 'var(--ds-text-success)' | 'var(--ds-text-discovery)' | 'var(--ds-text-information)' | 'var(--ds-text-subtlest)' | 'var(--ds-text-subtle)' | 'var(--ds-link)' | 'var(--ds-link-visited)';
|
|
23
25
|
export type Opacity = 'var(--ds-opacity-disabled)' | 'var(--ds-opacity-loading)';
|
|
24
26
|
export interface CSSPropertiesHovered {
|
|
25
27
|
backgroundColor: BackgroundColorHovered;
|
|
@@ -31,6 +33,17 @@ export interface CSSPropertiesActive {
|
|
|
31
33
|
export interface DesignTokenStyles {
|
|
32
34
|
'&:active': CSSPropertiesActive;
|
|
33
35
|
'&:hover': CSSPropertiesHovered;
|
|
36
|
+
border: BorderShorthand;
|
|
37
|
+
borderBlock: BorderShorthand;
|
|
38
|
+
borderBlockEnd: BorderShorthand;
|
|
39
|
+
borderBlockStart: BorderShorthand;
|
|
40
|
+
borderBottom: BorderShorthand;
|
|
41
|
+
borderInline: BorderShorthand;
|
|
42
|
+
borderInlineEnd: BorderShorthand;
|
|
43
|
+
borderInlineStart: BorderShorthand;
|
|
44
|
+
borderLeft: BorderShorthand;
|
|
45
|
+
borderRight: BorderShorthand;
|
|
46
|
+
borderTop: BorderShorthand;
|
|
34
47
|
appearance: 'none' | 'auto';
|
|
35
48
|
backgroundColor: BackgroundColor;
|
|
36
49
|
blockSize: SizeIntrinsic;
|
|
@@ -76,7 +89,7 @@ export interface DesignTokenStyles {
|
|
|
76
89
|
containerName: never;
|
|
77
90
|
containerType: never;
|
|
78
91
|
float: never;
|
|
79
|
-
font:
|
|
92
|
+
font: FontShorthand;
|
|
80
93
|
fontFamily: never;
|
|
81
94
|
fontSize: never;
|
|
82
95
|
fontSizeAdjust: never;
|
|
@@ -3,23 +3,25 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Strict design token based typedef representing a subset of safe CSS properties.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::21c2ae52ced4fa9337277f9daca4b814>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
|
-
export type BackgroundColor = 'transparent' | 'currentcolor' | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
|
|
10
9
|
export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
|
|
11
10
|
export type BackgroundColorPressed = 'var(--ds-background-accent-lime-subtlest-pressed)' | 'var(--ds-background-accent-lime-subtler-pressed)' | 'var(--ds-background-accent-lime-subtle-pressed)' | 'var(--ds-background-accent-lime-bolder-pressed)' | 'var(--ds-background-accent-red-subtlest-pressed)' | 'var(--ds-background-accent-red-subtler-pressed)' | 'var(--ds-background-accent-red-subtle-pressed)' | 'var(--ds-background-accent-red-bolder-pressed)' | 'var(--ds-background-accent-orange-subtlest-pressed)' | 'var(--ds-background-accent-orange-subtler-pressed)' | 'var(--ds-background-accent-orange-subtle-pressed)' | 'var(--ds-background-accent-orange-bolder-pressed)' | 'var(--ds-background-accent-yellow-subtlest-pressed)' | 'var(--ds-background-accent-yellow-subtler-pressed)' | 'var(--ds-background-accent-yellow-subtle-pressed)' | 'var(--ds-background-accent-yellow-bolder-pressed)' | 'var(--ds-background-accent-green-subtlest-pressed)' | 'var(--ds-background-accent-green-subtler-pressed)' | 'var(--ds-background-accent-green-subtle-pressed)' | 'var(--ds-background-accent-green-bolder-pressed)' | 'var(--ds-background-accent-teal-subtlest-pressed)' | 'var(--ds-background-accent-teal-subtler-pressed)' | 'var(--ds-background-accent-teal-subtle-pressed)' | 'var(--ds-background-accent-teal-bolder-pressed)' | 'var(--ds-background-accent-blue-subtlest-pressed)' | 'var(--ds-background-accent-blue-subtler-pressed)' | 'var(--ds-background-accent-blue-subtle-pressed)' | 'var(--ds-background-accent-blue-bolder-pressed)' | 'var(--ds-background-accent-purple-subtlest-pressed)' | 'var(--ds-background-accent-purple-subtler-pressed)' | 'var(--ds-background-accent-purple-subtle-pressed)' | 'var(--ds-background-accent-purple-bolder-pressed)' | 'var(--ds-background-accent-magenta-subtlest-pressed)' | 'var(--ds-background-accent-magenta-subtler-pressed)' | 'var(--ds-background-accent-magenta-subtle-pressed)' | 'var(--ds-background-accent-magenta-bolder-pressed)' | 'var(--ds-background-accent-gray-subtlest-pressed)' | 'var(--ds-background-accent-gray-subtler-pressed)' | 'var(--ds-background-accent-gray-subtle-pressed)' | 'var(--ds-background-accent-gray-bolder-pressed)' | 'var(--ds-background-input-pressed)' | 'var(--ds-background-inverse-subtle-pressed)' | 'var(--ds-background-neutral-pressed)' | 'var(--ds-background-neutral-subtle-pressed)' | 'var(--ds-background-neutral-bold-pressed)' | 'var(--ds-background-selected-pressed)' | 'var(--ds-background-selected-bold-pressed)' | 'var(--ds-background-brand-subtlest-pressed)' | 'var(--ds-background-brand-bold-pressed)' | 'var(--ds-background-brand-boldest-pressed)' | 'var(--ds-background-danger-pressed)' | 'var(--ds-background-danger-bold-pressed)' | 'var(--ds-background-warning-pressed)' | 'var(--ds-background-warning-bold-pressed)' | 'var(--ds-background-success-pressed)' | 'var(--ds-background-success-bold-pressed)' | 'var(--ds-background-discovery-pressed)' | 'var(--ds-background-discovery-bold-pressed)' | 'var(--ds-background-information-pressed)' | 'var(--ds-background-information-bold-pressed)' | 'var(--ds-surface-pressed)' | 'var(--ds-surface-overlay-pressed)' | 'var(--ds-surface-raised-pressed)';
|
|
12
|
-
export type
|
|
11
|
+
export type BackgroundColor = 'transparent' | 'currentcolor' | BackgroundColorHovered | BackgroundColorPressed | 'var(--ds-background-accent-lime-subtlest)' | 'var(--ds-background-accent-lime-subtler)' | 'var(--ds-background-accent-lime-subtle)' | 'var(--ds-background-accent-lime-bolder)' | 'var(--ds-background-accent-red-subtlest)' | 'var(--ds-background-accent-red-subtler)' | 'var(--ds-background-accent-red-subtle)' | 'var(--ds-background-accent-red-bolder)' | 'var(--ds-background-accent-orange-subtlest)' | 'var(--ds-background-accent-orange-subtler)' | 'var(--ds-background-accent-orange-subtle)' | 'var(--ds-background-accent-orange-bolder)' | 'var(--ds-background-accent-yellow-subtlest)' | 'var(--ds-background-accent-yellow-subtler)' | 'var(--ds-background-accent-yellow-subtle)' | 'var(--ds-background-accent-yellow-bolder)' | 'var(--ds-background-accent-green-subtlest)' | 'var(--ds-background-accent-green-subtler)' | 'var(--ds-background-accent-green-subtle)' | 'var(--ds-background-accent-green-bolder)' | 'var(--ds-background-accent-teal-subtlest)' | 'var(--ds-background-accent-teal-subtler)' | 'var(--ds-background-accent-teal-subtle)' | 'var(--ds-background-accent-teal-bolder)' | 'var(--ds-background-accent-blue-subtlest)' | 'var(--ds-background-accent-blue-subtler)' | 'var(--ds-background-accent-blue-subtle)' | 'var(--ds-background-accent-blue-bolder)' | 'var(--ds-background-accent-purple-subtlest)' | 'var(--ds-background-accent-purple-subtler)' | 'var(--ds-background-accent-purple-subtle)' | 'var(--ds-background-accent-purple-bolder)' | 'var(--ds-background-accent-magenta-subtlest)' | 'var(--ds-background-accent-magenta-subtler)' | 'var(--ds-background-accent-magenta-subtle)' | 'var(--ds-background-accent-magenta-bolder)' | 'var(--ds-background-accent-gray-subtlest)' | 'var(--ds-background-accent-gray-subtler)' | 'var(--ds-background-accent-gray-subtle)' | 'var(--ds-background-accent-gray-bolder)' | 'var(--ds-background-disabled)' | 'var(--ds-background-input)' | 'var(--ds-background-inverse-subtle)' | 'var(--ds-background-neutral)' | 'var(--ds-background-neutral-subtle)' | 'var(--ds-background-neutral-bold)' | 'var(--ds-background-selected)' | 'var(--ds-background-selected-bold)' | 'var(--ds-background-brand-subtlest)' | 'var(--ds-background-brand-bold)' | 'var(--ds-background-brand-boldest)' | 'var(--ds-background-danger)' | 'var(--ds-background-danger-bold)' | 'var(--ds-background-warning)' | 'var(--ds-background-warning-bold)' | 'var(--ds-background-success)' | 'var(--ds-background-success-bold)' | 'var(--ds-background-discovery)' | 'var(--ds-background-discovery-bold)' | 'var(--ds-background-information)' | 'var(--ds-background-information-bold)' | 'var(--ds-skeleton)' | 'var(--ds-skeleton-subtle)' | 'var(--ds-surface)' | 'var(--ds-surface-overlay)' | 'var(--ds-surface-raised)' | 'var(--ds-surface-sunken)' | 'var(--ds-elevation-surface-current)';
|
|
12
|
+
export type FontShorthand = 'var(--ds-font-heading-xxlarge)' | 'var(--ds-font-heading-xlarge)' | 'var(--ds-font-heading-large)' | 'var(--ds-font-heading-medium)' | 'var(--ds-font-heading-small)' | 'var(--ds-font-heading-xsmall)' | 'var(--ds-font-heading-xxsmall)' | 'var(--ds-font-body-large)' | 'var(--ds-font-body)' | 'var(--ds-font-body-small)' | 'var(--ds-font-body-UNSAFE_small)' | 'var(--ds-font-code)';
|
|
13
13
|
export type IconColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
|
|
14
|
-
export type
|
|
15
|
-
export type
|
|
14
|
+
export type IconColor = IconColorPressed | 'var(--ds-link)' | 'var(--ds-link-visited)' | 'var(--ds-icon)' | 'var(--ds-icon-accent-lime)' | 'var(--ds-icon-accent-red)' | 'var(--ds-icon-accent-orange)' | 'var(--ds-icon-accent-yellow)' | 'var(--ds-icon-accent-green)' | 'var(--ds-icon-accent-teal)' | 'var(--ds-icon-accent-blue)' | 'var(--ds-icon-accent-purple)' | 'var(--ds-icon-accent-magenta)' | 'var(--ds-icon-accent-gray)' | 'var(--ds-icon-disabled)' | 'var(--ds-icon-inverse)' | 'var(--ds-icon-selected)' | 'var(--ds-icon-brand)' | 'var(--ds-icon-danger)' | 'var(--ds-icon-warning)' | 'var(--ds-icon-warning-inverse)' | 'var(--ds-icon-success)' | 'var(--ds-icon-discovery)' | 'var(--ds-icon-information)' | 'var(--ds-icon-subtlest)' | 'var(--ds-icon-subtle)';
|
|
15
|
+
export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-accent-lime)' | 'var(--ds-border-accent-red)' | 'var(--ds-border-accent-orange)' | 'var(--ds-border-accent-yellow)' | 'var(--ds-border-accent-green)' | 'var(--ds-border-accent-teal)' | 'var(--ds-border-accent-blue)' | 'var(--ds-border-accent-purple)' | 'var(--ds-border-accent-magenta)' | 'var(--ds-border-accent-gray)' | 'var(--ds-border-disabled)' | 'var(--ds-border-focused)' | 'var(--ds-border-input)' | 'var(--ds-border-inverse)' | 'var(--ds-border-selected)' | 'var(--ds-border-brand)' | 'var(--ds-border-danger)' | 'var(--ds-border-warning)' | 'var(--ds-border-success)' | 'var(--ds-border-discovery)' | 'var(--ds-border-information)' | 'var(--ds-border-bold)';
|
|
16
16
|
export type BorderRadius = 'var(--ds-border-radius-050)' | 'var(--ds-border-radius)' | 'var(--ds-border-radius-100)' | 'var(--ds-border-radius-200)' | 'var(--ds-border-radius-300)' | 'var(--ds-border-radius-400)' | 'var(--ds-border-radius-circle)';
|
|
17
|
-
export type
|
|
17
|
+
export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indicator)' | 'var(--ds-border-width-outline)';
|
|
18
|
+
export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
|
|
19
|
+
export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
|
|
18
20
|
export type Space = 'var(--ds-space-0)' | 'var(--ds-space-025)' | 'var(--ds-space-050)' | 'var(--ds-space-075)' | 'var(--ds-space-100)' | 'var(--ds-space-150)' | 'var(--ds-space-200)' | 'var(--ds-space-250)' | 'var(--ds-space-300)' | 'var(--ds-space-400)' | 'var(--ds-space-500)' | 'var(--ds-space-600)' | 'var(--ds-space-800)' | 'var(--ds-space-1000)' | 'var(--ds-space-negative-025)' | 'var(--ds-space-negative-050)' | 'var(--ds-space-negative-075)' | 'var(--ds-space-negative-100)' | 'var(--ds-space-negative-150)' | 'var(--ds-space-negative-200)' | 'var(--ds-space-negative-250)' | 'var(--ds-space-negative-300)' | 'var(--ds-space-negative-400)';
|
|
19
21
|
export type SpaceMargin = Space | 'auto' | '0 auto' | '0';
|
|
20
22
|
export type Shadow = 'var(--ds-shadow-overflow)' | 'var(--ds-shadow-overflow-perimeter)' | 'var(--ds-shadow-overflow-spread)' | 'var(--ds-shadow-overlay)' | 'var(--ds-shadow-raised)';
|
|
21
|
-
export type TextColor = 'transparent' | 'var(--ds-text)' | 'var(--ds-text-accent-lime)' | 'var(--ds-text-accent-lime-bolder)' | 'var(--ds-text-accent-red)' | 'var(--ds-text-accent-red-bolder)' | 'var(--ds-text-accent-orange)' | 'var(--ds-text-accent-orange-bolder)' | 'var(--ds-text-accent-yellow)' | 'var(--ds-text-accent-yellow-bolder)' | 'var(--ds-text-accent-green)' | 'var(--ds-text-accent-green-bolder)' | 'var(--ds-text-accent-teal)' | 'var(--ds-text-accent-teal-bolder)' | 'var(--ds-text-accent-blue)' | 'var(--ds-text-accent-blue-bolder)' | 'var(--ds-text-accent-purple)' | 'var(--ds-text-accent-purple-bolder)' | 'var(--ds-text-accent-magenta)' | 'var(--ds-text-accent-magenta-bolder)' | 'var(--ds-text-accent-gray)' | 'var(--ds-text-accent-gray-bolder)' | 'var(--ds-text-disabled)' | 'var(--ds-text-inverse)' | 'var(--ds-text-selected)' | 'var(--ds-text-brand)' | 'var(--ds-text-danger)' | 'var(--ds-text-warning)' | 'var(--ds-text-warning-inverse)' | 'var(--ds-text-success)' | 'var(--ds-text-discovery)' | 'var(--ds-text-information)' | 'var(--ds-text-subtlest)' | 'var(--ds-text-subtle)' | 'var(--ds-link)' | 'var(--ds-link-visited)';
|
|
22
23
|
export type TextColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
|
|
24
|
+
export type TextColor = 'transparent' | TextColorPressed | 'var(--ds-text)' | 'var(--ds-text-accent-lime)' | 'var(--ds-text-accent-lime-bolder)' | 'var(--ds-text-accent-red)' | 'var(--ds-text-accent-red-bolder)' | 'var(--ds-text-accent-orange)' | 'var(--ds-text-accent-orange-bolder)' | 'var(--ds-text-accent-yellow)' | 'var(--ds-text-accent-yellow-bolder)' | 'var(--ds-text-accent-green)' | 'var(--ds-text-accent-green-bolder)' | 'var(--ds-text-accent-teal)' | 'var(--ds-text-accent-teal-bolder)' | 'var(--ds-text-accent-blue)' | 'var(--ds-text-accent-blue-bolder)' | 'var(--ds-text-accent-purple)' | 'var(--ds-text-accent-purple-bolder)' | 'var(--ds-text-accent-magenta)' | 'var(--ds-text-accent-magenta-bolder)' | 'var(--ds-text-accent-gray)' | 'var(--ds-text-accent-gray-bolder)' | 'var(--ds-text-disabled)' | 'var(--ds-text-inverse)' | 'var(--ds-text-selected)' | 'var(--ds-text-brand)' | 'var(--ds-text-danger)' | 'var(--ds-text-warning)' | 'var(--ds-text-warning-inverse)' | 'var(--ds-text-success)' | 'var(--ds-text-discovery)' | 'var(--ds-text-information)' | 'var(--ds-text-subtlest)' | 'var(--ds-text-subtle)' | 'var(--ds-link)' | 'var(--ds-link-visited)';
|
|
23
25
|
export type Opacity = 'var(--ds-opacity-disabled)' | 'var(--ds-opacity-loading)';
|
|
24
26
|
export interface CSSPropertiesHovered {
|
|
25
27
|
backgroundColor: BackgroundColorHovered;
|
|
@@ -31,6 +33,17 @@ export interface CSSPropertiesActive {
|
|
|
31
33
|
export interface DesignTokenStyles {
|
|
32
34
|
'&:active': CSSPropertiesActive;
|
|
33
35
|
'&:hover': CSSPropertiesHovered;
|
|
36
|
+
border: BorderShorthand;
|
|
37
|
+
borderBlock: BorderShorthand;
|
|
38
|
+
borderBlockEnd: BorderShorthand;
|
|
39
|
+
borderBlockStart: BorderShorthand;
|
|
40
|
+
borderBottom: BorderShorthand;
|
|
41
|
+
borderInline: BorderShorthand;
|
|
42
|
+
borderInlineEnd: BorderShorthand;
|
|
43
|
+
borderInlineStart: BorderShorthand;
|
|
44
|
+
borderLeft: BorderShorthand;
|
|
45
|
+
borderRight: BorderShorthand;
|
|
46
|
+
borderTop: BorderShorthand;
|
|
34
47
|
appearance: 'none' | 'auto';
|
|
35
48
|
backgroundColor: BackgroundColor;
|
|
36
49
|
blockSize: SizeIntrinsic;
|
|
@@ -76,7 +89,7 @@ export interface DesignTokenStyles {
|
|
|
76
89
|
containerName: never;
|
|
77
90
|
containerType: never;
|
|
78
91
|
float: never;
|
|
79
|
-
font:
|
|
92
|
+
font: FontShorthand;
|
|
80
93
|
fontFamily: never;
|
|
81
94
|
fontSize: never;
|
|
82
95
|
fontSizeAdjust: never;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.61.0",
|
|
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/"
|
|
@@ -18,10 +18,6 @@
|
|
|
18
18
|
"atlaskit:src": "src/index.tsx",
|
|
19
19
|
"atlassian": {
|
|
20
20
|
"team": "Design System Team",
|
|
21
|
-
"productPushConsumption": [
|
|
22
|
-
"jira"
|
|
23
|
-
],
|
|
24
|
-
"releaseModel": "continuous",
|
|
25
21
|
"runReact18": true,
|
|
26
22
|
"website": {
|
|
27
23
|
"name": "Design tokens",
|
|
@@ -35,7 +31,7 @@
|
|
|
35
31
|
"codegen-tokens": "run-ts ./scripts/style-dictionary/build.tsx && cd $(npx repo-root)/packages/design-system/primitives && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/ds-explorations && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/heading && yarn codegen"
|
|
36
32
|
},
|
|
37
33
|
"dependencies": {
|
|
38
|
-
"@atlaskit/ds-lib": "^2.
|
|
34
|
+
"@atlaskit/ds-lib": "^2.6.0",
|
|
39
35
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
40
36
|
"@babel/runtime": "^7.0.0",
|
|
41
37
|
"@babel/traverse": "^7.23.2",
|
|
@@ -49,8 +45,8 @@
|
|
|
49
45
|
"@af/accessibility-testing": "*",
|
|
50
46
|
"@af/formatting": "*",
|
|
51
47
|
"@atlaskit/button": "^20.1.0",
|
|
52
|
-
"@atlaskit/calendar": "^
|
|
53
|
-
"@atlaskit/checkbox": "^
|
|
48
|
+
"@atlaskit/calendar": "^15.0.0",
|
|
49
|
+
"@atlaskit/checkbox": "^14.0.0",
|
|
54
50
|
"@atlaskit/radio": "^6.5.0",
|
|
55
51
|
"@atlaskit/textfield": "^6.5.0",
|
|
56
52
|
"@atlaskit/tooltip": "^18.7.0",
|
|
@@ -58,7 +54,7 @@
|
|
|
58
54
|
"@atlassian/codegen": "^0.1.0",
|
|
59
55
|
"@atlassian/feature-flags-test-utils": "*",
|
|
60
56
|
"@atlassian/ts-loader": "*",
|
|
61
|
-
"@babel/core": "
|
|
57
|
+
"@babel/core": "7.24.9",
|
|
62
58
|
"@emotion/react": "^11.7.1",
|
|
63
59
|
"@hypermod/utils": "^0.4.2",
|
|
64
60
|
"@testing-library/dom": "^10.1.0",
|
|
@@ -129,7 +125,7 @@
|
|
|
129
125
|
"./css-type-schema": "./src/entry-points/css-type-schema.codegen.tsx"
|
|
130
126
|
},
|
|
131
127
|
"platform-feature-flags": {
|
|
132
|
-
"
|
|
128
|
+
"platform_increased-contrast-themes": {
|
|
133
129
|
"type": "boolean"
|
|
134
130
|
},
|
|
135
131
|
"platform-component-visual-refresh": {
|