@atlaskit/tokens 1.61.0 → 2.0.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 (10) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +3 -3
  3. package/dist/cjs/babel-plugin/plugin.js +1 -1
  4. package/dist/es2019/babel-plugin/plugin.js +1 -1
  5. package/dist/esm/babel-plugin/plugin.js +1 -1
  6. package/dist/types/babel-plugin/plugin.d.ts +3 -0
  7. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  8. package/dist/types-ts4.5/babel-plugin/plugin.d.ts +3 -0
  9. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#146966](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146966)
8
+ [`a0a364753d2c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0a364753d2c7) -
9
+ Modifies our bounded CSS type schema to allow both numeric and string `0` values for ease-of-use.
10
+
11
+ ## 2.0.0
12
+
13
+ ### Major Changes
14
+
15
+ - [#145551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145551)
16
+ [`d477dc32ae480`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d477dc32ae480) -
17
+ Changes the `@atlaskit/tokens/babel-plugin`'s 'shouldUseAutoFallback' configuration to be true by
18
+ default as this is currently the expectation within a majority of Atlassian's frontend code.
19
+
20
+ To opt-out (which likely means you must be using fallbacks manually or can guarantee theming is
21
+ turned on), you would have config like this in Babel, Webpack, or similar:
22
+
23
+ ```json
24
+ "plugins": [
25
+ ["@atlaskit/tokens/babel-plugin", { "shouldUseAutoFallback": false }]
26
+ ]
27
+ ```
28
+
29
+ ### Patch Changes
30
+
31
+ - [#145551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145551)
32
+ [`d477dc32ae480`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d477dc32ae480) -
33
+ Removes 'shouldUseAutoFallbacks' config on '@atlaskit/tokens/babel-plugin' as this is now the
34
+ default.
35
+
3
36
  ## 1.61.0
4
37
 
5
38
  ### Minor Changes
package/README.md CHANGED
@@ -39,9 +39,9 @@ Add the plugin to your babel configuration:
39
39
 
40
40
  ### Options
41
41
 
42
- Currently the plugin supports one option, `shouldUseAutoFallback`. When enabled, the plugin will
43
- fetch the token's value in the default Atlassian theme (currently `atlassian-light`) and use it as
44
- the fallback value.
42
+ Currently the plugin supports one option, `shouldUseAutoFallback`. When not disabled, the plugin
43
+ will fetch the token's value in the default Atlassian theme (currently `atlassian-light`) and use it
44
+ as the fallback value.
45
45
 
46
46
  This is useful for cases where tokens are in use, but token definitions aren't guaranteed to be
47
47
  present in the top-level page CSS.
package/dist/cjs/babel-plugin/plugin.js CHANGED
@@ -90,7 +90,7 @@ function plugin() {
90
90
 
91
91
  // if no fallback is set, optionally find one from the default theme
92
92
  if (path.node.arguments.length < 2) {
93
- if (state.opts.shouldUseAutoFallback) {
93
+ if (state.opts.shouldUseAutoFallback !== false) {
94
94
  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
95
95
  } else {
96
96
  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
package/dist/es2019/babel-plugin/plugin.js CHANGED
@@ -80,7 +80,7 @@ export default function plugin() {
80
80
 
81
81
  // if no fallback is set, optionally find one from the default theme
82
82
  if (path.node.arguments.length < 2) {
83
- if (state.opts.shouldUseAutoFallback) {
83
+ if (state.opts.shouldUseAutoFallback !== false) {
84
84
  replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName, state.opts.defaultTheme)})`);
85
85
  } else {
86
86
  replacementNode = t.stringLiteral(`var(${cssTokenValue})`);
package/dist/esm/babel-plugin/plugin.js CHANGED
@@ -80,7 +80,7 @@ export default function plugin() {
80
80
 
81
81
  // if no fallback is set, optionally find one from the default theme
82
82
  if (path.node.arguments.length < 2) {
83
- if (state.opts.shouldUseAutoFallback) {
83
+ if (state.opts.shouldUseAutoFallback !== false) {
84
84
  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
85
85
  } else {
86
86
  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
package/dist/types/babel-plugin/plugin.d.ts CHANGED
@@ -6,6 +6,9 @@ export default function plugin(): {
6
6
  Program: {
7
7
  enter(path: NodePath<t.Program>, state: {
8
8
  opts: {
9
+ /**
10
+ * @default true
11
+ */
9
12
  shouldUseAutoFallback?: boolean;
10
13
  shouldForceAutoFallback?: boolean;
11
14
  defaultTheme?: DefaultColorTheme;
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::21c2ae52ced4fa9337277f9daca4b814>>
6
+ * @codegen <<SignedSource::cc06e5fdad867aee8b6196015559844f>>
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)';
@@ -18,7 +18,7 @@ export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indi
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
19
  export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
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
- export type SpaceMargin = Space | 'auto' | '0 auto' | '0';
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)';
23
23
  export type TextColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
24
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)';
package/dist/types-ts4.5/babel-plugin/plugin.d.ts CHANGED
@@ -6,6 +6,9 @@ export default function plugin(): {
6
6
  Program: {
7
7
  enter(path: NodePath<t.Program>, state: {
8
8
  opts: {
9
+ /**
10
+ * @default true
11
+ */
9
12
  shouldUseAutoFallback?: boolean;
10
13
  shouldForceAutoFallback?: boolean;
11
14
  defaultTheme?: DefaultColorTheme;
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::21c2ae52ced4fa9337277f9daca4b814>>
6
+ * @codegen <<SignedSource::cc06e5fdad867aee8b6196015559844f>>
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)';
@@ -18,7 +18,7 @@ export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-indi
18
18
  export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
19
19
  export type SizeIntrinsic = `${number}px` | `${number}rem` | '100%' | 'min-content' | 'max-content' | 'fit-content' | 'auto';
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
- export type SpaceMargin = Space | 'auto' | '0 auto' | '0';
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)';
23
23
  export type TextColorPressed = 'var(--ds-link-pressed)' | 'var(--ds-link-visited-pressed)';
24
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)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.61.0",
3
+ "version": "2.0.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/"
@@ -44,7 +44,7 @@
44
44
  "devDependencies": {
45
45
  "@af/accessibility-testing": "*",
46
46
  "@af/formatting": "*",
47
- "@atlaskit/button": "^20.1.0",
47
+ "@atlaskit/button": "^20.2.0",
48
48
  "@atlaskit/calendar": "^15.0.0",
49
49
  "@atlaskit/checkbox": "^14.0.0",
50
50
  "@atlaskit/radio": "^6.5.0",