@atlaskit/tokens 4.2.0 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/get-token.js +0 -4
  3. package/dist/es2019/get-token.js +0 -4
  4. package/dist/esm/get-token.js +0 -4
  5. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  6. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  7. package/package.json +3 -3
  8. package/dist/cjs/get-token-analytics.js +0 -57
  9. package/dist/es2019/get-token-analytics.js +0 -37
  10. package/dist/esm/get-token-analytics.js +0 -50
  11. package/dist/types/get-token-analytics.d.ts +0 -11
  12. package/dist/types-ts4.5/get-token-analytics.d.ts +0 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 4.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#121762](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121762)
8
+ [`a7fdeca193df1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7fdeca193df1) -
9
+ Remove analytics tracking from the token function
10
+
11
+ ## 4.3.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#121081](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121081)
16
+ [`90c226d24a7ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90c226d24a7ac) -
17
+ Expand dimension type in @atlaskit/css to include vw/vh and percentage values.
18
+
3
19
  ## 4.2.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/get-token.js CHANGED
@@ -9,7 +9,6 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
10
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
11
11
  var _constants = require("./constants");
12
- var _getTokenAnalytics = require("./get-token-analytics");
13
12
  /**
14
13
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
14
  * This should be used to implement design decisions throughout your application.
@@ -33,9 +32,6 @@ var _getTokenAnalytics = require("./get-token-analytics");
33
32
  *
34
33
  */
35
34
  function token(path, fallback) {
36
- if ((0, _platformFeatureFlags.fg)('platform-token-runtime-call-tracking')) {
37
- (0, _getTokenAnalytics.recordTokenCall)(path, fallback);
38
- }
39
35
  var token = _tokenNames.default[path];
40
36
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
41
37
  if (!token) {
package/dist/es2019/get-token.js CHANGED
@@ -2,7 +2,6 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import tokens from './artifacts/token-names';
4
4
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
5
- import { recordTokenCall } from './get-token-analytics';
6
5
  /**
7
6
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
7
  * This should be used to implement design decisions throughout your application.
@@ -26,9 +25,6 @@ import { recordTokenCall } from './get-token-analytics';
26
25
  *
27
26
  */
28
27
  function token(path, fallback) {
29
- if (fg('platform-token-runtime-call-tracking')) {
30
- recordTokenCall(path, fallback);
31
- }
32
28
  let token = tokens[path];
33
29
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
34
30
  if (!token) {
package/dist/esm/get-token.js CHANGED
@@ -2,7 +2,6 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import tokens from './artifacts/token-names';
4
4
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
5
- import { recordTokenCall } from './get-token-analytics';
6
5
  /**
7
6
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
7
  * This should be used to implement design decisions throughout your application.
@@ -26,9 +25,6 @@ import { recordTokenCall } from './get-token-analytics';
26
25
  *
27
26
  */
28
27
  function token(path, fallback) {
29
- if (fg('platform-token-runtime-call-tracking')) {
30
- recordTokenCall(path, fallback);
31
- }
32
28
  var token = tokens[path];
33
29
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
34
30
  if (!token) {
package/dist/types/entry-points/css-type-schema.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Strict design token based typedef representing a subset of safe CSS properties.
5
5
  *
6
- * @codegen <<SignedSource::d93aac128a4dab42b47c7390eecfd656>>
6
+ * @codegen <<SignedSource::533d7f37acd50cb73c2f898b77e8e078>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
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)';
@@ -16,7 +16,7 @@ export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-
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)' | 'inherit';
17
17
  export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indicator)' | 'var(--ds-border-width-outline)' | 0 | '0';
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
- export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
19
+ export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto' | `${number}vh` | `${number}vw` | `${number}%`;
20
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)';
21
21
  export type SpaceMargin = Space | 'auto' | '0 auto' | '0' | 0;
22
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)' | 'initial';
package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Strict design token based typedef representing a subset of safe CSS properties.
5
5
  *
6
- * @codegen <<SignedSource::d93aac128a4dab42b47c7390eecfd656>>
6
+ * @codegen <<SignedSource::533d7f37acd50cb73c2f898b77e8e078>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
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)';
@@ -16,7 +16,7 @@ export type BorderColor = 'transparent' | 'var(--ds-border)' | 'var(--ds-border-
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)' | 'inherit';
17
17
  export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indicator)' | 'var(--ds-border-width-outline)' | 0 | '0';
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
- export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
19
+ export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto' | `${number}vh` | `${number}vw` | `${number}%`;
20
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)';
21
21
  export type SpaceMargin = Space | 'auto' | '0 auto' | '0' | 0;
22
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)' | 'initial';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "4.2.0",
3
+ "version": "4.3.1",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,8 +45,8 @@
45
45
  "@af/accessibility-testing": "*",
46
46
  "@af/formatting": "*",
47
47
  "@atlaskit/button": "^21.1.0",
48
- "@atlaskit/calendar": "^17.0.0",
49
- "@atlaskit/checkbox": "^16.0.0",
48
+ "@atlaskit/calendar": "^17.1.0",
49
+ "@atlaskit/checkbox": "^17.0.0",
50
50
  "@atlaskit/radio": "^8.0.0",
51
51
  "@atlaskit/textfield": "^8.0.0",
52
52
  "@atlaskit/tooltip": "^20.0.0",
package/dist/cjs/get-token-analytics.js DELETED
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.recordTokenCall = void 0;
8
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
- // Extend the Window interface to include optional analyticsWebClient
11
-
12
- /**
13
- * Records a token call event to the analytics service. This is used to track which tokens are being used at runtime as they should be substituted by the values by @atlaskit/tokens/babel-plugin at build time.
14
- * @param token - The token that was called.
15
- * @param fallback - The fallback value that was used.
16
- */
17
- var recordTokenCall = exports.recordTokenCall = /*#__PURE__*/function () {
18
- var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(token, fallback) {
19
- var _window, analyticsClient, isThemeEnabled;
20
- return _regenerator.default.wrap(function _callee$(_context) {
21
- while (1) switch (_context.prev = _context.next) {
22
- case 0:
23
- try {
24
- // TODO: window.analyticsWebClient is a property specific to Jira. It is not available in the other products. We might consider to register a dedicated analytics client for logging token calls for each product to enable cohesive experience across different products.
25
- analyticsClient = (_window = window) === null || _window === void 0 ? void 0 : _window.analyticsWebClient;
26
- if (analyticsClient) {
27
- // Check for a <style> element with a data-theme attribute in the document
28
- isThemeEnabled = !!document.querySelector('style[data-theme]'); // when such property exists, we are using it to send this event https://data-portal.internal.atlassian.com/analytics/registry/75682 which is registered specifically for Jira.
29
- analyticsClient.sendEvent({
30
- type: 'TRACK',
31
- payload: {
32
- action: 'called_at_runtime',
33
- actionSubject: 'token',
34
- source: 'design-system',
35
- attributes: {
36
- url: window.location.href,
37
- token: token,
38
- fallback: fallback,
39
- isThemeEnabled: isThemeEnabled
40
- }
41
- }
42
- });
43
- }
44
- } catch (e) {
45
- // eslint-disable-next-line no-console
46
- console.error(e);
47
- }
48
- case 1:
49
- case "end":
50
- return _context.stop();
51
- }
52
- }, _callee);
53
- }));
54
- return function recordTokenCall(_x, _x2) {
55
- return _ref.apply(this, arguments);
56
- };
57
- }();
package/dist/es2019/get-token-analytics.js DELETED
@@ -1,37 +0,0 @@
1
- // Extend the Window interface to include optional analyticsWebClient
2
-
3
- /**
4
- * Records a token call event to the analytics service. This is used to track which tokens are being used at runtime as they should be substituted by the values by @atlaskit/tokens/babel-plugin at build time.
5
- * @param token - The token that was called.
6
- * @param fallback - The fallback value that was used.
7
- */
8
- export const recordTokenCall = async (token, fallback) => {
9
- try {
10
- var _window;
11
- // TODO: window.analyticsWebClient is a property specific to Jira. It is not available in the other products. We might consider to register a dedicated analytics client for logging token calls for each product to enable cohesive experience across different products.
12
- const analyticsClient = (_window = window) === null || _window === void 0 ? void 0 : _window.analyticsWebClient;
13
- if (analyticsClient) {
14
- // Check for a <style> element with a data-theme attribute in the document
15
- const isThemeEnabled = !!document.querySelector('style[data-theme]');
16
-
17
- // when such property exists, we are using it to send this event https://data-portal.internal.atlassian.com/analytics/registry/75682 which is registered specifically for Jira.
18
- analyticsClient.sendEvent({
19
- type: 'TRACK',
20
- payload: {
21
- action: 'called_at_runtime',
22
- actionSubject: 'token',
23
- source: 'design-system',
24
- attributes: {
25
- url: window.location.href,
26
- token,
27
- fallback,
28
- isThemeEnabled
29
- }
30
- }
31
- });
32
- }
33
- } catch (e) {
34
- // eslint-disable-next-line no-console
35
- console.error(e);
36
- }
37
- };
package/dist/esm/get-token-analytics.js DELETED
@@ -1,50 +0,0 @@
1
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
- import _regeneratorRuntime from "@babel/runtime/regenerator";
3
- // Extend the Window interface to include optional analyticsWebClient
4
-
5
- /**
6
- * Records a token call event to the analytics service. This is used to track which tokens are being used at runtime as they should be substituted by the values by @atlaskit/tokens/babel-plugin at build time.
7
- * @param token - The token that was called.
8
- * @param fallback - The fallback value that was used.
9
- */
10
- export var recordTokenCall = /*#__PURE__*/function () {
11
- var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(token, fallback) {
12
- var _window, analyticsClient, isThemeEnabled;
13
- return _regeneratorRuntime.wrap(function _callee$(_context) {
14
- while (1) switch (_context.prev = _context.next) {
15
- case 0:
16
- try {
17
- // TODO: window.analyticsWebClient is a property specific to Jira. It is not available in the other products. We might consider to register a dedicated analytics client for logging token calls for each product to enable cohesive experience across different products.
18
- analyticsClient = (_window = window) === null || _window === void 0 ? void 0 : _window.analyticsWebClient;
19
- if (analyticsClient) {
20
- // Check for a <style> element with a data-theme attribute in the document
21
- isThemeEnabled = !!document.querySelector('style[data-theme]'); // when such property exists, we are using it to send this event https://data-portal.internal.atlassian.com/analytics/registry/75682 which is registered specifically for Jira.
22
- analyticsClient.sendEvent({
23
- type: 'TRACK',
24
- payload: {
25
- action: 'called_at_runtime',
26
- actionSubject: 'token',
27
- source: 'design-system',
28
- attributes: {
29
- url: window.location.href,
30
- token: token,
31
- fallback: fallback,
32
- isThemeEnabled: isThemeEnabled
33
- }
34
- }
35
- });
36
- }
37
- } catch (e) {
38
- // eslint-disable-next-line no-console
39
- console.error(e);
40
- }
41
- case 1:
42
- case "end":
43
- return _context.stop();
44
- }
45
- }, _callee);
46
- }));
47
- return function recordTokenCall(_x, _x2) {
48
- return _ref.apply(this, arguments);
49
- };
50
- }();
package/dist/types/get-token-analytics.d.ts DELETED
@@ -1,11 +0,0 @@
1
- declare global {
2
- interface Window {
3
- analyticsWebClient?: any;
4
- }
5
- }
6
- /**
7
- * Records a token call event to the analytics service. This is used to track which tokens are being used at runtime as they should be substituted by the values by @atlaskit/tokens/babel-plugin at build time.
8
- * @param token - The token that was called.
9
- * @param fallback - The fallback value that was used.
10
- */
11
- export declare const recordTokenCall: <T extends "color.text" | "color.text.accent.lime" | "color.text.accent.lime.bolder" | "color.text.accent.red" | "color.text.accent.red.bolder" | "color.text.accent.orange" | "color.text.accent.orange.bolder" | "color.text.accent.yellow" | "color.text.accent.yellow.bolder" | "color.text.accent.green" | "color.text.accent.green.bolder" | "color.text.accent.teal" | "color.text.accent.teal.bolder" | "color.text.accent.blue" | "color.text.accent.blue.bolder" | "color.text.accent.purple" | "color.text.accent.purple.bolder" | "color.text.accent.magenta" | "color.text.accent.magenta.bolder" | "color.text.accent.gray" | "color.text.accent.gray.bolder" | "color.text.disabled" | "color.text.inverse" | "color.text.selected" | "color.text.brand" | "color.text.danger" | "color.text.warning" | "color.text.warning.inverse" | "color.text.success" | "color.text.discovery" | "color.text.information" | "color.text.subtlest" | "color.text.subtle" | "color.link" | "color.link.pressed" | "color.link.visited" | "color.link.visited.pressed" | "color.icon" | "color.icon.accent.lime" | "color.icon.accent.red" | "color.icon.accent.orange" | "color.icon.accent.yellow" | "color.icon.accent.green" | "color.icon.accent.teal" | "color.icon.accent.blue" | "color.icon.accent.purple" | "color.icon.accent.magenta" | "color.icon.accent.gray" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.selected" | "color.icon.brand" | "color.icon.danger" | "color.icon.warning" | "color.icon.warning.inverse" | "color.icon.success" | "color.icon.discovery" | "color.icon.information" | "color.icon.subtlest" | "color.icon.subtle" | "color.border" | "color.border.accent.lime" | "color.border.accent.red" | "color.border.accent.orange" | "color.border.accent.yellow" | "color.border.accent.green" | "color.border.accent.teal" | "color.border.accent.blue" | "color.border.accent.purple" | "color.border.accent.magenta" | "color.border.accent.gray" | "color.border.disabled" | "color.border.focused" | "color.border.input" | "color.border.inverse" | "color.border.selected" | "color.border.brand" | "color.border.danger" | "color.border.warning" | "color.border.success" | "color.border.discovery" | "color.border.information" | "color.border.bold" | "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.interaction.hovered" | "color.interaction.pressed" | "color.skeleton" | "color.skeleton.subtle" | "color.chart.categorical.1" | "color.chart.categorical.1.hovered" | "color.chart.categorical.2" | "color.chart.categorical.2.hovered" | "color.chart.categorical.3" | "color.chart.categorical.3.hovered" | "color.chart.categorical.4" | "color.chart.categorical.4.hovered" | "color.chart.categorical.5" | "color.chart.categorical.5.hovered" | "color.chart.categorical.6" | "color.chart.categorical.6.hovered" | "color.chart.categorical.7" | "color.chart.categorical.7.hovered" | "color.chart.categorical.8" | "color.chart.categorical.8.hovered" | "color.chart.lime.bold" | "color.chart.lime.bold.hovered" | "color.chart.lime.bolder" | "color.chart.lime.bolder.hovered" | "color.chart.lime.boldest" | "color.chart.lime.boldest.hovered" | "color.chart.neutral" | "color.chart.neutral.hovered" | "color.chart.red.bold" | "color.chart.red.bold.hovered" | "color.chart.red.bolder" | "color.chart.red.bolder.hovered" | "color.chart.red.boldest" | "color.chart.red.boldest.hovered" | "color.chart.orange.bold" | "color.chart.orange.bold.hovered" | "color.chart.orange.bolder" | "color.chart.orange.bolder.hovered" | "color.chart.orange.boldest" | "color.chart.orange.boldest.hovered" | "color.chart.yellow.bold" | "color.chart.yellow.bold.hovered" | "color.chart.yellow.bolder" | "color.chart.yellow.bolder.hovered" | "color.chart.yellow.boldest" | "color.chart.yellow.boldest.hovered" | "color.chart.green.bold" | "color.chart.green.bold.hovered" | "color.chart.green.bolder" | "color.chart.green.bolder.hovered" | "color.chart.green.boldest" | "color.chart.green.boldest.hovered" | "color.chart.teal.bold" | "color.chart.teal.bold.hovered" | "color.chart.teal.bolder" | "color.chart.teal.bolder.hovered" | "color.chart.teal.boldest" | "color.chart.teal.boldest.hovered" | "color.chart.blue.bold" | "color.chart.blue.bold.hovered" | "color.chart.blue.bolder" | "color.chart.blue.bolder.hovered" | "color.chart.blue.boldest" | "color.chart.blue.boldest.hovered" | "color.chart.purple.bold" | "color.chart.purple.bold.hovered" | "color.chart.purple.bolder" | "color.chart.purple.bolder.hovered" | "color.chart.purple.boldest" | "color.chart.purple.boldest.hovered" | "color.chart.magenta.bold" | "color.chart.magenta.bold.hovered" | "color.chart.magenta.bolder" | "color.chart.magenta.bolder.hovered" | "color.chart.magenta.boldest" | "color.chart.magenta.boldest.hovered" | "color.chart.gray.bold" | "color.chart.gray.bold.hovered" | "color.chart.gray.bolder" | "color.chart.gray.bolder.hovered" | "color.chart.gray.boldest" | "color.chart.gray.boldest.hovered" | "color.chart.brand" | "color.chart.brand.hovered" | "color.chart.danger" | "color.chart.danger.hovered" | "color.chart.danger.bold" | "color.chart.danger.bold.hovered" | "color.chart.warning" | "color.chart.warning.hovered" | "color.chart.warning.bold" | "color.chart.warning.bold.hovered" | "color.chart.success" | "color.chart.success.hovered" | "color.chart.success.bold" | "color.chart.success.bold.hovered" | "color.chart.discovery" | "color.chart.discovery.hovered" | "color.chart.discovery.bold" | "color.chart.discovery.bold.hovered" | "color.chart.information" | "color.chart.information.hovered" | "color.chart.information.bold" | "color.chart.information.bold.hovered" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "elevation.shadow.overflow" | "elevation.shadow.overflow.perimeter" | "elevation.shadow.overflow.spread" | "elevation.shadow.overlay" | "elevation.shadow.raised" | "opacity.disabled" | "opacity.loading" | "utility.UNSAFE.textTransformUppercase" | "utility.UNSAFE.transparent" | "utility.elevation.surface.current" | "border.radius.050" | "border.radius" | "border.radius.100" | "border.radius.200" | "border.radius.300" | "border.radius.400" | "border.radius.circle" | "border.width" | "border.width.0" | "border.width.indicator" | "border.width.outline" | "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | "space.negative.025" | "space.negative.050" | "space.negative.075" | "space.negative.100" | "space.negative.150" | "space.negative.200" | "space.negative.250" | "space.negative.300" | "space.negative.400" | "font.heading.xxlarge" | "font.heading.xlarge" | "font.heading.large" | "font.heading.medium" | "font.heading.small" | "font.heading.xsmall" | "font.heading.xxsmall" | "font.body.large" | "font.body" | "font.body.small" | "font.body.UNSAFE_small" | "font.code" | "font.weight.regular" | "font.weight.medium" | "font.weight.semibold" | "font.weight.bold" | "font.family.heading" | "font.family.body" | "font.family.code" | "font.family.brand.heading" | "font.family.brand.body">(token: T, fallback?: string) => Promise<void>;
package/dist/types-ts4.5/get-token-analytics.d.ts DELETED
@@ -1,11 +0,0 @@
1
- declare global {
2
- interface Window {
3
- analyticsWebClient?: any;
4
- }
5
- }
6
- /**
7
- * Records a token call event to the analytics service. This is used to track which tokens are being used at runtime as they should be substituted by the values by @atlaskit/tokens/babel-plugin at build time.
8
- * @param token - The token that was called.
9
- * @param fallback - The fallback value that was used.
10
- */
11
- export declare const recordTokenCall: <T extends "color.text" | "color.text.accent.lime" | "color.text.accent.lime.bolder" | "color.text.accent.red" | "color.text.accent.red.bolder" | "color.text.accent.orange" | "color.text.accent.orange.bolder" | "color.text.accent.yellow" | "color.text.accent.yellow.bolder" | "color.text.accent.green" | "color.text.accent.green.bolder" | "color.text.accent.teal" | "color.text.accent.teal.bolder" | "color.text.accent.blue" | "color.text.accent.blue.bolder" | "color.text.accent.purple" | "color.text.accent.purple.bolder" | "color.text.accent.magenta" | "color.text.accent.magenta.bolder" | "color.text.accent.gray" | "color.text.accent.gray.bolder" | "color.text.disabled" | "color.text.inverse" | "color.text.selected" | "color.text.brand" | "color.text.danger" | "color.text.warning" | "color.text.warning.inverse" | "color.text.success" | "color.text.discovery" | "color.text.information" | "color.text.subtlest" | "color.text.subtle" | "color.link" | "color.link.pressed" | "color.link.visited" | "color.link.visited.pressed" | "color.icon" | "color.icon.accent.lime" | "color.icon.accent.red" | "color.icon.accent.orange" | "color.icon.accent.yellow" | "color.icon.accent.green" | "color.icon.accent.teal" | "color.icon.accent.blue" | "color.icon.accent.purple" | "color.icon.accent.magenta" | "color.icon.accent.gray" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.selected" | "color.icon.brand" | "color.icon.danger" | "color.icon.warning" | "color.icon.warning.inverse" | "color.icon.success" | "color.icon.discovery" | "color.icon.information" | "color.icon.subtlest" | "color.icon.subtle" | "color.border" | "color.border.accent.lime" | "color.border.accent.red" | "color.border.accent.orange" | "color.border.accent.yellow" | "color.border.accent.green" | "color.border.accent.teal" | "color.border.accent.blue" | "color.border.accent.purple" | "color.border.accent.magenta" | "color.border.accent.gray" | "color.border.disabled" | "color.border.focused" | "color.border.input" | "color.border.inverse" | "color.border.selected" | "color.border.brand" | "color.border.danger" | "color.border.warning" | "color.border.success" | "color.border.discovery" | "color.border.information" | "color.border.bold" | "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.interaction.hovered" | "color.interaction.pressed" | "color.skeleton" | "color.skeleton.subtle" | "color.chart.categorical.1" | "color.chart.categorical.1.hovered" | "color.chart.categorical.2" | "color.chart.categorical.2.hovered" | "color.chart.categorical.3" | "color.chart.categorical.3.hovered" | "color.chart.categorical.4" | "color.chart.categorical.4.hovered" | "color.chart.categorical.5" | "color.chart.categorical.5.hovered" | "color.chart.categorical.6" | "color.chart.categorical.6.hovered" | "color.chart.categorical.7" | "color.chart.categorical.7.hovered" | "color.chart.categorical.8" | "color.chart.categorical.8.hovered" | "color.chart.lime.bold" | "color.chart.lime.bold.hovered" | "color.chart.lime.bolder" | "color.chart.lime.bolder.hovered" | "color.chart.lime.boldest" | "color.chart.lime.boldest.hovered" | "color.chart.neutral" | "color.chart.neutral.hovered" | "color.chart.red.bold" | "color.chart.red.bold.hovered" | "color.chart.red.bolder" | "color.chart.red.bolder.hovered" | "color.chart.red.boldest" | "color.chart.red.boldest.hovered" | "color.chart.orange.bold" | "color.chart.orange.bold.hovered" | "color.chart.orange.bolder" | "color.chart.orange.bolder.hovered" | "color.chart.orange.boldest" | "color.chart.orange.boldest.hovered" | "color.chart.yellow.bold" | "color.chart.yellow.bold.hovered" | "color.chart.yellow.bolder" | "color.chart.yellow.bolder.hovered" | "color.chart.yellow.boldest" | "color.chart.yellow.boldest.hovered" | "color.chart.green.bold" | "color.chart.green.bold.hovered" | "color.chart.green.bolder" | "color.chart.green.bolder.hovered" | "color.chart.green.boldest" | "color.chart.green.boldest.hovered" | "color.chart.teal.bold" | "color.chart.teal.bold.hovered" | "color.chart.teal.bolder" | "color.chart.teal.bolder.hovered" | "color.chart.teal.boldest" | "color.chart.teal.boldest.hovered" | "color.chart.blue.bold" | "color.chart.blue.bold.hovered" | "color.chart.blue.bolder" | "color.chart.blue.bolder.hovered" | "color.chart.blue.boldest" | "color.chart.blue.boldest.hovered" | "color.chart.purple.bold" | "color.chart.purple.bold.hovered" | "color.chart.purple.bolder" | "color.chart.purple.bolder.hovered" | "color.chart.purple.boldest" | "color.chart.purple.boldest.hovered" | "color.chart.magenta.bold" | "color.chart.magenta.bold.hovered" | "color.chart.magenta.bolder" | "color.chart.magenta.bolder.hovered" | "color.chart.magenta.boldest" | "color.chart.magenta.boldest.hovered" | "color.chart.gray.bold" | "color.chart.gray.bold.hovered" | "color.chart.gray.bolder" | "color.chart.gray.bolder.hovered" | "color.chart.gray.boldest" | "color.chart.gray.boldest.hovered" | "color.chart.brand" | "color.chart.brand.hovered" | "color.chart.danger" | "color.chart.danger.hovered" | "color.chart.danger.bold" | "color.chart.danger.bold.hovered" | "color.chart.warning" | "color.chart.warning.hovered" | "color.chart.warning.bold" | "color.chart.warning.bold.hovered" | "color.chart.success" | "color.chart.success.hovered" | "color.chart.success.bold" | "color.chart.success.bold.hovered" | "color.chart.discovery" | "color.chart.discovery.hovered" | "color.chart.discovery.bold" | "color.chart.discovery.bold.hovered" | "color.chart.information" | "color.chart.information.hovered" | "color.chart.information.bold" | "color.chart.information.bold.hovered" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "elevation.shadow.overflow" | "elevation.shadow.overflow.perimeter" | "elevation.shadow.overflow.spread" | "elevation.shadow.overlay" | "elevation.shadow.raised" | "opacity.disabled" | "opacity.loading" | "utility.UNSAFE.textTransformUppercase" | "utility.UNSAFE.transparent" | "utility.elevation.surface.current" | "border.radius.050" | "border.radius" | "border.radius.100" | "border.radius.200" | "border.radius.300" | "border.radius.400" | "border.radius.circle" | "border.width" | "border.width.0" | "border.width.indicator" | "border.width.outline" | "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | "space.negative.025" | "space.negative.050" | "space.negative.075" | "space.negative.100" | "space.negative.150" | "space.negative.200" | "space.negative.250" | "space.negative.300" | "space.negative.400" | "font.heading.xxlarge" | "font.heading.xlarge" | "font.heading.large" | "font.heading.medium" | "font.heading.small" | "font.heading.xsmall" | "font.heading.xxsmall" | "font.body.large" | "font.body" | "font.body.small" | "font.body.UNSAFE_small" | "font.code" | "font.weight.regular" | "font.weight.medium" | "font.weight.semibold" | "font.weight.bold" | "font.family.heading" | "font.family.body" | "font.family.code" | "font.family.brand.heading" | "font.family.brand.body">(token: T, fallback?: string) => Promise<void>;