@atlaskit/tokens 13.0.4 → 13.1.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.
Files changed (89) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  3. package/dist/cjs/artifacts/themes/atlassian-dark.js +2 -2
  4. package/dist/cjs/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  5. package/dist/cjs/artifacts/themes/atlassian-light.js +2 -2
  6. package/dist/cjs/artifacts/token-default-values.js +2 -2
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3 -3
  9. package/dist/cjs/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  10. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3 -3
  11. package/dist/cjs/constants.js +1 -0
  12. package/dist/cjs/entry-points/token-metadata.codegen.js +2 -2
  13. package/dist/cjs/get-theme-styles.js +27 -27
  14. package/dist/cjs/set-global-theme.js +32 -31
  15. package/dist/cjs/theme-config.js +2 -0
  16. package/dist/cjs/theme-state-transformer.js +1 -0
  17. package/dist/cjs/utils/color-utils.js +8 -0
  18. package/dist/cjs/utils/custom-theme-loading-utils.js +2 -0
  19. package/dist/cjs/utils/custom-theme-token-contrast-check.js +2 -0
  20. package/dist/cjs/utils/generate-custom-color-ramp.js +4 -0
  21. package/dist/cjs/utils/hct-color-utils/color-utils.js +8 -0
  22. package/dist/cjs/utils/load-theme-css.js +4 -4
  23. package/dist/cjs/utils/theme-loading.js +8 -8
  24. package/dist/es2019/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  25. package/dist/es2019/artifacts/themes/atlassian-dark.js +2 -2
  26. package/dist/es2019/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  27. package/dist/es2019/artifacts/themes/atlassian-light.js +2 -2
  28. package/dist/es2019/artifacts/token-default-values.js +2 -2
  29. package/dist/es2019/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  30. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3 -3
  31. package/dist/es2019/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  32. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3 -3
  33. package/dist/es2019/constants.js +1 -0
  34. package/dist/es2019/entry-points/token-metadata.codegen.js +2 -2
  35. package/dist/es2019/theme-config.js +2 -0
  36. package/dist/es2019/theme-state-transformer.js +1 -0
  37. package/dist/es2019/utils/color-utils.js +8 -0
  38. package/dist/es2019/utils/custom-theme-loading-utils.js +2 -0
  39. package/dist/es2019/utils/custom-theme-token-contrast-check.js +2 -0
  40. package/dist/es2019/utils/generate-custom-color-ramp.js +4 -0
  41. package/dist/es2019/utils/hct-color-utils/color-utils.js +8 -0
  42. package/dist/esm/artifacts/themes/atlassian-dark-increased-contrast.js +2 -2
  43. package/dist/esm/artifacts/themes/atlassian-dark.js +2 -2
  44. package/dist/esm/artifacts/themes/atlassian-light-increased-contrast.js +2 -2
  45. package/dist/esm/artifacts/themes/atlassian-light.js +2 -2
  46. package/dist/esm/artifacts/token-default-values.js +2 -2
  47. package/dist/esm/artifacts/tokens-raw/atlassian-dark-increased-contrast.js +3 -3
  48. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3 -3
  49. package/dist/esm/artifacts/tokens-raw/atlassian-light-increased-contrast.js +3 -3
  50. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3 -3
  51. package/dist/esm/constants.js +1 -0
  52. package/dist/esm/entry-points/token-metadata.codegen.js +2 -2
  53. package/dist/esm/get-theme-styles.js +26 -26
  54. package/dist/esm/set-global-theme.js +31 -30
  55. package/dist/esm/theme-config.js +2 -0
  56. package/dist/esm/theme-state-transformer.js +1 -0
  57. package/dist/esm/utils/color-utils.js +8 -0
  58. package/dist/esm/utils/custom-theme-loading-utils.js +2 -0
  59. package/dist/esm/utils/custom-theme-token-contrast-check.js +2 -0
  60. package/dist/esm/utils/generate-custom-color-ramp.js +4 -0
  61. package/dist/esm/utils/hct-color-utils/color-utils.js +8 -0
  62. package/dist/esm/utils/load-theme-css.js +4 -4
  63. package/dist/esm/utils/theme-loading.js +8 -8
  64. package/dist/types/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  65. package/dist/types/artifacts/themes/atlassian-dark.d.ts +2 -2
  66. package/dist/types/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  67. package/dist/types/artifacts/themes/atlassian-light.d.ts +2 -2
  68. package/dist/types/artifacts/token-default-values.d.ts +2 -2
  69. package/dist/types/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  70. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  71. package/dist/types/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  72. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  73. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  74. package/dist/types-ts4.5/artifacts/themes/atlassian-dark-increased-contrast.d.ts +2 -2
  75. package/dist/types-ts4.5/artifacts/themes/atlassian-dark.d.ts +2 -2
  76. package/dist/types-ts4.5/artifacts/themes/atlassian-light-increased-contrast.d.ts +2 -2
  77. package/dist/types-ts4.5/artifacts/themes/atlassian-light.d.ts +2 -2
  78. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +2 -2
  79. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark-increased-contrast.d.ts +1 -1
  80. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-dark.d.ts +1 -1
  81. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light-increased-contrast.d.ts +1 -1
  82. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-light.d.ts +1 -1
  83. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  84. package/figma/atlassian-dark-increased-contrast.json +1 -1
  85. package/figma/atlassian-dark.json +1 -1
  86. package/figma/atlassian-light-increased-contrast.json +1 -1
  87. package/figma/atlassian-light.json +1 -1
  88. package/package.json +11 -11
  89. package/tokens.docs.tsx +48 -46
package/tokens.docs.tsx CHANGED
@@ -1,53 +1,55 @@
1
1
  import path from 'path';
2
2
 
3
- import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
3
+ import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
4
4
 
5
- const documentation: ComponentStructuredContentSource[] = [
6
- {
7
- name: 'token',
8
- description:
9
- 'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
10
- status: 'general-availability',
11
- import: {
5
+ const documentation: StructuredContentSource = {
6
+ components: [
7
+ {
12
8
  name: 'token',
13
- package: '@atlaskit/tokens',
14
- type: 'named',
15
- packagePath: path.resolve(__dirname),
16
- packageJson: require('./package.json'),
17
- },
18
- usageGuidelines: [
19
- 'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
20
- 'Use the `token()` function with CSS-in-JS',
21
- 'Use semantic token names for better maintainability',
22
- ],
23
- accessibilityGuidelines: [
24
- 'Use color tokens to ensure proper contrast ratios',
25
- 'Test color combinations for accessibility compliance',
26
- 'Use semantic color names (success, warning, danger) for better meaning',
27
- ],
28
- examples: [
29
- {
30
- name: 'Basic',
31
- description: 'Basic example',
32
- source: path.resolve(__dirname, './examples/ai/basic.tsx'),
9
+ description:
10
+ 'Design tokens provide consistent, semantic values for colors, spacing, typography, motion, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
11
+ status: 'general-availability',
12
+ import: {
13
+ name: 'token',
14
+ package: '@atlaskit/tokens',
15
+ type: 'named',
16
+ packagePath: path.resolve(__dirname),
17
+ packageJson: require('./package.json'),
33
18
  },
34
- ],
35
- keywords: [
36
- 'token',
37
- 'design',
38
- 'system',
39
- 'color',
40
- 'motion',
41
- 'spacing',
42
- 'typography',
43
- 'radius',
44
- 'theme',
45
- 'css',
46
- 'style',
47
- 'variable',
48
- ],
49
- categories: ['tokens'],
50
- },
51
- ];
19
+ usageGuidelines: [
20
+ 'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
21
+ 'Use the `token()` function with CSS-in-JS',
22
+ 'Use semantic token names for better maintainability',
23
+ ],
24
+ accessibilityGuidelines: [
25
+ 'Use color tokens to ensure proper contrast ratios',
26
+ 'Test color combinations for accessibility compliance',
27
+ 'Use semantic color names (success, warning, danger) for better meaning',
28
+ ],
29
+ examples: [
30
+ {
31
+ name: 'Basic',
32
+ description: 'Basic example',
33
+ source: path.resolve(__dirname, './examples/ai/basic.tsx'),
34
+ },
35
+ ],
36
+ keywords: [
37
+ 'token',
38
+ 'design',
39
+ 'system',
40
+ 'color',
41
+ 'motion',
42
+ 'spacing',
43
+ 'typography',
44
+ 'radius',
45
+ 'theme',
46
+ 'css',
47
+ 'style',
48
+ 'variable',
49
+ ],
50
+ categories: ['tokens'],
51
+ },
52
+ ],
53
+ };
52
54
 
53
55
  export default documentation;