@atlaskit/tokens 0.10.33 → 0.10.34

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 (22) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +5 -5
  3. package/dist/cjs/get-token.js +23 -2
  4. package/dist/cjs/set-global-theme.js +12 -0
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +5 -5
  7. package/dist/es2019/get-token.js +22 -1
  8. package/dist/es2019/set-global-theme.js +12 -0
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +5 -5
  11. package/dist/esm/get-token.js +22 -1
  12. package/dist/esm/set-global-theme.js +12 -0
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  15. package/dist/types/get-token.d.ts +21 -0
  16. package/dist/types/set-global-theme.d.ts +12 -0
  17. package/dist/types-ts4.0/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -1
  18. package/dist/types-ts4.0/get-token.d.ts +21 -0
  19. package/dist/types-ts4.0/set-global-theme.d.ts +12 -0
  20. package/package.json +1 -1
  21. package/report.api.md +2 -2
  22. package/tmp/api-report-tmp.d.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 0.10.34
4
+
5
+ ### Patch Changes
6
+
7
+ - [`10f2fea8f3d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10f2fea8f3d) - Updated JSDoc descriptions for token() and setGlobalTheme()
8
+
3
9
  ## 0.10.33
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js CHANGED
@@ -7,7 +7,7 @@ exports.default = void 0;
7
7
 
8
8
  /**
9
9
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
10
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
10
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
11
11
  * @codegenCommand yarn build tokens
12
12
  */
13
13
  var tokens = [{
@@ -6492,10 +6492,10 @@ var tokens = [{
6492
6492
  "radius": 8,
6493
6493
  "offset": {
6494
6494
  "x": 0,
6495
- "y": 8
6495
+ "y": 0
6496
6496
  },
6497
6497
  "color": "#091e423f",
6498
- "opacity": 0.08
6498
+ "opacity": 0.16
6499
6499
  }, {
6500
6500
  "radius": 1,
6501
6501
  "offset": {
@@ -6518,10 +6518,10 @@ var tokens = [{
6518
6518
  "radius": 8,
6519
6519
  "offset": {
6520
6520
  "x": 0,
6521
- "y": 8
6521
+ "y": 0
6522
6522
  },
6523
6523
  "color": "N50A",
6524
- "opacity": 0.08
6524
+ "opacity": 0.16
6525
6525
  }, {
6526
6526
  "radius": 1,
6527
6527
  "offset": {
package/dist/cjs/get-token.js CHANGED
@@ -14,8 +14,29 @@ var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
14
14
  var _constants = require("./constants");
15
15
 
16
16
  var name = "@atlaskit/tokens";
17
- var version = "0.10.33";
18
-
17
+ var version = "0.10.34";
18
+
19
+ /**
20
+ * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
21
+ * This should be used to implement design decisions throughout your application.
22
+ *
23
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
24
+ *
25
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
26
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
27
+ *
28
+ * @example
29
+ * ```
30
+ * <div
31
+ * css={{
32
+ * backgroundColor: token('elevation.surface.raised', N0),
33
+ * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
34
+ * padding: token('spacing.scale.100', '8px'),
35
+ * }}
36
+ * />
37
+ * ```
38
+ *
39
+ */
19
40
  function token(path, fallback) {
20
41
  var token = _tokenNames.default[path];
21
42
 
package/dist/cjs/set-global-theme.js CHANGED
@@ -11,6 +11,18 @@ var _constants = require("./constants");
11
11
 
12
12
  var _themeConfig = _interopRequireDefault(require("./theme-config"));
13
13
 
14
+ /**
15
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
16
+ *
17
+ * @param {string} themeId - Which theme should be used by default.
18
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
19
+ *
20
+ * @example
21
+ * ```
22
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
23
+ * setGlobalTheme('light', true);
24
+ * ```
25
+ */
14
26
  var setGlobalTheme = function setGlobalTheme(themeId) {
15
27
  var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
16
28
  var theme = Object.values(_themeConfig.default).find(function (_ref) {
package/dist/cjs/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.33",
3
+ "version": "0.10.34",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
3
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  const tokens = [{
@@ -6485,10 +6485,10 @@ const tokens = [{
6485
6485
  "radius": 8,
6486
6486
  "offset": {
6487
6487
  "x": 0,
6488
- "y": 8
6488
+ "y": 0
6489
6489
  },
6490
6490
  "color": "#091e423f",
6491
- "opacity": 0.08
6491
+ "opacity": 0.16
6492
6492
  }, {
6493
6493
  "radius": 1,
6494
6494
  "offset": {
@@ -6511,10 +6511,10 @@ const tokens = [{
6511
6511
  "radius": 8,
6512
6512
  "offset": {
6513
6513
  "x": 0,
6514
- "y": 8
6514
+ "y": 0
6515
6515
  },
6516
6516
  "color": "N50A",
6517
- "opacity": 0.08
6517
+ "opacity": 0.16
6518
6518
  }, {
6519
6519
  "radius": 1,
6520
6520
  "offset": {
package/dist/es2019/get-token.js CHANGED
@@ -2,8 +2,29 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "0.10.33";
5
+ const version = "0.10.34";
6
6
 
7
+ /**
8
+ * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
9
+ * This should be used to implement design decisions throughout your application.
10
+ *
11
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
12
+ *
13
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
14
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
15
+ *
16
+ * @example
17
+ * ```
18
+ * <div
19
+ * css={{
20
+ * backgroundColor: token('elevation.surface.raised', N0),
21
+ * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
22
+ * padding: token('spacing.scale.100', '8px'),
23
+ * }}
24
+ * />
25
+ * ```
26
+ *
27
+ */
7
28
  function token(path, fallback) {
8
29
  let token = tokens[path];
9
30
 
package/dist/es2019/set-global-theme.js CHANGED
@@ -1,5 +1,17 @@
1
1
  import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
2
2
  import themeConfig from './theme-config';
3
+ /**
4
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
5
+ *
6
+ * @param {string} themeId - Which theme should be used by default.
7
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
8
+ *
9
+ * @example
10
+ * ```
11
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
12
+ * setGlobalTheme('light', true);
13
+ * ```
14
+ */
3
15
 
4
16
  const setGlobalTheme = (themeId, shouldMatchSystem = false) => {
5
17
  const theme = Object.values(themeConfig).find(({
package/dist/es2019/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.33",
3
+ "version": "0.10.34",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
3
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  var tokens = [{
@@ -6485,10 +6485,10 @@ var tokens = [{
6485
6485
  "radius": 8,
6486
6486
  "offset": {
6487
6487
  "x": 0,
6488
- "y": 8
6488
+ "y": 0
6489
6489
  },
6490
6490
  "color": "#091e423f",
6491
- "opacity": 0.08
6491
+ "opacity": 0.16
6492
6492
  }, {
6493
6493
  "radius": 1,
6494
6494
  "offset": {
@@ -6511,10 +6511,10 @@ var tokens = [{
6511
6511
  "radius": 8,
6512
6512
  "offset": {
6513
6513
  "x": 0,
6514
- "y": 8
6514
+ "y": 0
6515
6515
  },
6516
6516
  "color": "N50A",
6517
- "opacity": 0.08
6517
+ "opacity": 0.16
6518
6518
  }, {
6519
6519
  "radius": 1,
6520
6520
  "offset": {
package/dist/esm/get-token.js CHANGED
@@ -2,8 +2,29 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "0.10.33";
5
+ var version = "0.10.34";
6
6
 
7
+ /**
8
+ * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
9
+ * This should be used to implement design decisions throughout your application.
10
+ *
11
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
12
+ *
13
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
14
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
15
+ *
16
+ * @example
17
+ * ```
18
+ * <div
19
+ * css={{
20
+ * backgroundColor: token('elevation.surface.raised', N0),
21
+ * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
22
+ * padding: token('spacing.scale.100', '8px'),
23
+ * }}
24
+ * />
25
+ * ```
26
+ *
27
+ */
7
28
  function token(path, fallback) {
8
29
  var token = tokens[path];
9
30
 
package/dist/esm/set-global-theme.js CHANGED
@@ -1,5 +1,17 @@
1
1
  import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
2
2
  import themeConfig from './theme-config';
3
+ /**
4
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
5
+ *
6
+ * @param {string} themeId - Which theme should be used by default.
7
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
8
+ *
9
+ * @example
10
+ * ```
11
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
12
+ * setGlobalTheme('light', true);
13
+ * ```
14
+ */
3
15
 
4
16
  var setGlobalTheme = function setGlobalTheme(themeId) {
5
17
  var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
package/dist/esm/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.33",
3
+ "version": "0.10.34",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
3
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: ({
package/dist/types/get-token.d.ts CHANGED
@@ -1,4 +1,25 @@
1
1
  import tokens, { CSSTokenMap } from './artifacts/token-names';
2
2
  declare type Tokens = typeof tokens;
3
+ /**
4
+ * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
5
+ * This should be used to implement design decisions throughout your application.
6
+ *
7
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
8
+ *
9
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
10
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
11
+ *
12
+ * @example
13
+ * ```
14
+ * <div
15
+ * css={{
16
+ * backgroundColor: token('elevation.surface.raised', N0),
17
+ * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
18
+ * padding: token('spacing.scale.100', '8px'),
19
+ * }}
20
+ * />
21
+ * ```
22
+ *
23
+ */
3
24
  declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
4
25
  export default token;
package/dist/types/set-global-theme.d.ts CHANGED
@@ -1,3 +1,15 @@
1
1
  import { ThemeIds } from './theme-config';
2
+ /**
3
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
4
+ *
5
+ * @param {string} themeId - Which theme should be used by default.
6
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
7
+ *
8
+ * @example
9
+ * ```
10
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
11
+ * setGlobalTheme('light', true);
12
+ * ```
13
+ */
2
14
  declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
3
15
  export default setGlobalTheme;
package/dist/types-ts4.0/artifacts/tokens-raw/atlassian-legacy-light.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::cebe4ed5e9e0dc70bed7437dafe3c98c>>
3
+ * @codegen <<SignedSource::e18ea502db6feafafab91d0838cfa797>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: ({
package/dist/types-ts4.0/get-token.d.ts CHANGED
@@ -1,4 +1,25 @@
1
1
  import tokens, { CSSTokenMap } from './artifacts/token-names';
2
2
  declare type Tokens = typeof tokens;
3
+ /**
4
+ * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
5
+ * This should be used to implement design decisions throughout your application.
6
+ *
7
+ * Note: With `@atlaskit/babel-plugin-tokens`, this function can be pre-compiled and a fallback value automatically inserted.
8
+ *
9
+ * @param {string} path - A dot-separated token name (example: `'color.background.brand'` or `'spacing.scale.100'`).
10
+ * @param {string} [fallback] - The fallback value that should render when token CSS is not present in your app.
11
+ *
12
+ * @example
13
+ * ```
14
+ * <div
15
+ * css={{
16
+ * backgroundColor: token('elevation.surface.raised', N0),
17
+ * boxShadow: token('elevation.shadow.raised', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`),
18
+ * padding: token('spacing.scale.100', '8px'),
19
+ * }}
20
+ * />
21
+ * ```
22
+ *
23
+ */
3
24
  declare function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
4
25
  export default token;
package/dist/types-ts4.0/set-global-theme.d.ts CHANGED
@@ -1,3 +1,15 @@
1
1
  import { ThemeIds } from './theme-config';
2
+ /**
3
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
4
+ *
5
+ * @param {string} themeId - Which theme should be used by default.
6
+ * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
7
+ *
8
+ * @example
9
+ * ```
10
+ * // Set light theme as the default theme, but switch to others based on the system color theme.
11
+ * setGlobalTheme('light', true);
12
+ * ```
13
+ */
2
14
  declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
3
15
  export default setGlobalTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.33",
3
+ "version": "0.10.34",
4
4
  "author": "Atlassian Pty Ltd",
5
5
  "description": "Design tokens are the single source of truth to name and store design decisions.",
6
6
  "license": "Apache-2.0",
package/report.api.md CHANGED
@@ -400,7 +400,7 @@ type CSSTokenMap_3 = {
400
400
  // @public
401
401
  type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
402
402
 
403
- // @public (undocumented)
403
+ // @public
404
404
  export const setGlobalTheme: (
405
405
  themeId: ThemeIds,
406
406
  shouldMatchSystem?: boolean,
@@ -460,7 +460,7 @@ export type Themes =
460
460
  | 'atlassian-light'
461
461
  | 'atlassian-spacing';
462
462
 
463
- // @public (undocumented)
463
+ // @public
464
464
  export function token<T extends keyof Tokens>(
465
465
  path: T,
466
466
  fallback?: string,
package/tmp/api-report-tmp.d.ts CHANGED
@@ -390,7 +390,7 @@ type CSSTokenMap_3 = {
390
390
  // @public
391
391
  type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
392
392
 
393
- // @public (undocumented)
393
+ // @public
394
394
  export const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
395
395
 
396
396
  // @public
@@ -435,7 +435,7 @@ export class ThemeMutationObserver {
435
435
  // @public
436
436
  export type Themes = 'atlassian-dark' | 'atlassian-legacy-dark' | 'atlassian-legacy-light' | 'atlassian-light' | 'atlassian-spacing';
437
437
 
438
- // @public (undocumented)
438
+ // @public
439
439
  export function token<T extends keyof Tokens>(path: T, fallback?: string): CSSTokenMap[T];
440
440
 
441
441
  // @public (undocumented)