@atlaskit/editor-palette 1.5.3 → 1.6.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 (16) hide show
  1. package/.babelrc +3 -1
  2. package/CHANGELOG.md +60 -14
  3. package/LICENSE.md +6 -8
  4. package/dist/cjs/index.js +8 -1
  5. package/dist/cjs/text-background-color.js +38 -0
  6. package/dist/es2019/index.js +2 -1
  7. package/dist/es2019/text-background-color.js +41 -0
  8. package/dist/esm/index.js +2 -1
  9. package/dist/esm/text-background-color.js +30 -0
  10. package/dist/types/index.d.ts +1 -0
  11. package/dist/types/text-background-color.d.ts +35 -0
  12. package/dist/types-ts4.5/index.d.ts +1 -0
  13. package/dist/types-ts4.5/text-background-color.d.ts +35 -0
  14. package/docs/0-intro.tsx +45 -28
  15. package/package.json +64 -68
  16. package/report.api.md +266 -269
package/.babelrc CHANGED
@@ -1,3 +1,5 @@
1
1
  {
2
- "plugins": ["@atlaskit/tokens/babel-plugin"]
2
+ "plugins": [
3
+ ["@atlaskit/tokens/babel-plugin"]
4
+ ]
3
5
  }
package/CHANGELOG.md CHANGED
@@ -1,78 +1,124 @@
1
1
  # @atlaskit/editor-palette
2
2
 
3
+ ## 1.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#145551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145551)
8
+ [`d477dc32ae480`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d477dc32ae480) -
9
+ Removes 'shouldUseAutoFallbacks' config on '@atlaskit/tokens/babel-plugin' as this is now the
10
+ default.
11
+ - Updated dependencies
12
+
13
+ ## 1.6.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#95631](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95631)
18
+ [`8514eacd7c0e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8514eacd7c0e) -
19
+ [ED-23111] Add text background color palette to editor palettes
20
+
3
21
  ## 1.5.3
4
22
 
5
23
  ### Patch Changes
6
24
 
7
- - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
25
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
26
+ [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
27
+ Upgrade Typescript from `4.9.5` to `5.4.2`
8
28
 
9
29
  ## 1.5.2
10
30
 
11
31
  ### Patch Changes
12
32
 
13
- - [#42995](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42995) [`a527682dee6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a527682dee6) - add in missing dependencies for imported types
33
+ - [#42995](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42995)
34
+ [`a527682dee6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a527682dee6) - add in
35
+ missing dependencies for imported types
14
36
 
15
37
  ## 1.5.1
16
38
 
17
39
  ### Patch Changes
18
40
 
19
- - [#35804](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35804) [`c5a5b4ec141`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5a5b4ec141) - Reverted back the changes done as part of UTEST-643
41
+ - [#35804](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35804)
42
+ [`c5a5b4ec141`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5a5b4ec141) - Reverted
43
+ back the changes done as part of UTEST-643
20
44
 
21
45
  ## 1.5.0
22
46
 
23
47
  ### Minor Changes
24
48
 
25
- - [#34036](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34036) [`f22911fb9be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f22911fb9be) - ENGHEALTH-2667: Adjust table cell color logic to enable static analysis of token usages and follow eslint rules
49
+ - [#34036](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34036)
50
+ [`f22911fb9be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f22911fb9be) -
51
+ ENGHEALTH-2667: Adjust table cell color logic to enable static analysis of token usages and follow
52
+ eslint rules
26
53
 
27
54
  ## 1.4.3
28
55
 
29
56
  ### Patch Changes
30
57
 
31
- - [#35057](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35057) [`1add49b7bf7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1add49b7bf7) - Updated the babel config file extension to .cts to enable Parcel to support ts/tsx file extensions by default through parcel.
58
+ - [#35057](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35057)
59
+ [`1add49b7bf7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1add49b7bf7) - Updated
60
+ the babel config file extension to .cts to enable Parcel to support ts/tsx file extensions by
61
+ default through parcel.
32
62
 
33
63
  ## 1.4.2
34
64
 
35
65
  ### Patch Changes
36
66
 
37
- - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
67
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
68
+ [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
69
+ legacy types are published for TS 4.5-4.8
38
70
 
39
71
  ## 1.4.1
40
72
 
41
73
  ### Patch Changes
42
74
 
43
- - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
75
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
76
+ [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
77
+ Typescript from `4.5.5` to `4.9.5`
44
78
 
45
79
  ## 1.4.0
46
80
 
47
81
  ### Minor Changes
48
82
 
49
- - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
83
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
84
+ [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
85
+ minor dependency bump
50
86
 
51
87
  ## 1.3.0
52
88
 
53
89
  ### Minor Changes
54
90
 
55
- - [#32424](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32424) [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux] ED-17043 Expanded table chart colors from 20 to 36 colors.
91
+ - [#32424](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32424)
92
+ [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux]
93
+ ED-17043 Expanded table chart colors from 20 to 36 colors.
56
94
 
57
95
  ### Patch Changes
58
96
 
59
- - [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
97
+ - [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY
98
+ remove before merging to master; dupe adf-schema via adf-utils
60
99
 
61
100
  ## 1.2.0
62
101
 
63
102
  ### Minor Changes
64
103
 
65
- - [#31891](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31891) [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add "border" mark to stage0 ADF schema
104
+ - [#31891](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31891)
105
+ [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add
106
+ "border" mark to stage0 ADF schema
66
107
 
67
108
  ## 1.1.0
68
109
 
69
110
  ### Minor Changes
70
111
 
71
- - [#31299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31299) [`47934727661`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47934727661) - ED-17042 - Add map hex colors to DST chart tokens
72
- - [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
112
+ - [#31299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31299)
113
+ [`47934727661`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47934727661) -
114
+ ED-17042 - Add map hex colors to DST chart tokens
115
+ - [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux]
116
+ ED-16758 Added support for theme tokens in table cell background color.
73
117
 
74
118
  ## 1.0.0
75
119
 
76
120
  ### Major Changes
77
121
 
78
- - [#28932](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28932) [`0ea58bc9901`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea58bc9901) - Remove undocumented palette object entrypoints
122
+ - [#28932](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28932)
123
+ [`0ea58bc9901`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea58bc9901) - Remove
124
+ undocumented palette object entrypoints
package/LICENSE.md CHANGED
@@ -1,13 +1,11 @@
1
1
  Copyright 2022 Atlassian Pty Ltd
2
2
 
3
- Licensed under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License.
5
- You may obtain a copy of the License at
3
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
4
+ compliance with the License. You may obtain a copy of the License at
6
5
 
7
6
  http://www.apache.org/licenses/LICENSE-2.0
8
7
 
9
- Unless required by applicable law or agreed to in writing, software
10
- distributed under the License is distributed on an "AS IS" BASIS,
11
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- See the License for the specific language governing permissions and
13
- limitations under the License.
8
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
9
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10
+ implied. See the License for the specific language governing permissions and limitations under the
11
+ License.
package/dist/cjs/index.js CHANGED
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "hexToEditorTableChartsPaletteRawValue", {
33
33
  return _tableCharts.hexToEditorTableChartsPaletteRawValue;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "hexToEditorTextBackgroundPaletteColor", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _textBackgroundColor.hexToEditorTextBackgroundPaletteColor;
40
+ }
41
+ });
36
42
  Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
37
43
  enumerable: true,
38
44
  get: function get() {
@@ -42,4 +48,5 @@ Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
42
48
  var _background = require("./background");
43
49
  var _border = require("./border");
44
50
  var _text = require("./text");
45
- var _tableCharts = require("./table-charts");
51
+ var _tableCharts = require("./table-charts");
52
+ var _textBackgroundColor = require("./text-background-color");
package/dist/cjs/text-background-color.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.hexToEditorTextBackgroundPaletteColor = hexToEditorTextBackgroundPaletteColor;
8
+ exports.textBackgroundColorPalette = void 0;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _textBackgroundColorP;
11
+ // This import will be stripped on build
12
+
13
+ // Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
14
+ // values are asserted to improve generated type declarations
15
+ var textBackgroundColorPalette = exports.textBackgroundColorPalette = (_textBackgroundColorP = {}, (0, _defineProperty2.default)(_textBackgroundColorP, '#DCDFE4', "var(--ds-background-accent-gray-subtler, #DCDFE4)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#C6EDFB', "var(--ds-background-accent-teal-subtler, #C6EDFB)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#D3F1A7', "var(--ds-background-accent-lime-subtler, #D3F1A7)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#FEDEC8', "var(--ds-background-accent-orange-subtler, #FEDEC8)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#FDD0EC', "var(--ds-background-accent-magenta-subtler, #FDD0EC)"), (0, _defineProperty2.default)(_textBackgroundColorP, '#DFD8FD', "var(--ds-background-accent-purple-subtler, #DFD8FD)"), _textBackgroundColorP);
16
+ /**
17
+ * This takes an ADF hex color and returns a matching text background palette color.
18
+ *
19
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
20
+ *
21
+ * Example usage
22
+ * ```tsx
23
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
24
+ *
25
+ * <span style={{backgroundColor: cssValue}} />
26
+ * ```
27
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
28
+ * The exact output of this function is an implementation detail and should only be used when rendering
29
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
30
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
31
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
32
+ */
33
+ function hexToEditorTextBackgroundPaletteColor(hexColor) {
34
+ // Ts ignore was used to allow use of conditional return type
35
+ // (preferring better type on consumption over safety in implementation)
36
+ // @ts-ignore
37
+ return textBackgroundColorPalette[hexColor.toUpperCase()];
38
+ }
package/dist/es2019/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue } from './background';
2
2
  export { hexToEditorBorderPaletteColor } from './border';
3
3
  export { hexToEditorTextPaletteColor } from './text';
4
- export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
4
+ export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
5
+ export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';
package/dist/es2019/text-background-color.js ADDED
@@ -0,0 +1,41 @@
1
+ // This import will be stripped on build
2
+
3
+ // Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
4
+ // values are asserted to improve generated type declarations
5
+ export const textBackgroundColorPalette = {
6
+ /** Gray - light */
7
+ ['#DCDFE4']: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
8
+ /** Teal - light */
9
+ ['#C6EDFB']: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
10
+ /** Lime - light */
11
+ ['#D3F1A7']: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
12
+ /** Orange - light */
13
+ ['#FEDEC8']: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
14
+ /** Magenta - light */
15
+ ['#FDD0EC']: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
16
+ /** Purple - light */
17
+ ['#DFD8FD']: "var(--ds-background-accent-purple-subtler, #DFD8FD)"
18
+ };
19
+ /**
20
+ * This takes an ADF hex color and returns a matching text background palette color.
21
+ *
22
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
23
+ *
24
+ * Example usage
25
+ * ```tsx
26
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
27
+ *
28
+ * <span style={{backgroundColor: cssValue}} />
29
+ * ```
30
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
31
+ * The exact output of this function is an implementation detail and should only be used when rendering
32
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
33
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
34
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
35
+ */
36
+ export function hexToEditorTextBackgroundPaletteColor(hexColor) {
37
+ // Ts ignore was used to allow use of conditional return type
38
+ // (preferring better type on consumption over safety in implementation)
39
+ // @ts-ignore
40
+ return textBackgroundColorPalette[hexColor.toUpperCase()];
41
+ }
package/dist/esm/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue } from './background';
2
2
  export { hexToEditorBorderPaletteColor } from './border';
3
3
  export { hexToEditorTextPaletteColor } from './text';
4
- export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
4
+ export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue } from './table-charts';
5
+ export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';
package/dist/esm/text-background-color.js ADDED
@@ -0,0 +1,30 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ var _textBackgroundColorP;
3
+ // This import will be stripped on build
4
+
5
+ // Color tokens defined on https://hello.atlassian.net/wiki/spaces/EOU/pages/3587733210/Text+highlighting+-+designs#Colour-palette
6
+ // values are asserted to improve generated type declarations
7
+ export var textBackgroundColorPalette = (_textBackgroundColorP = {}, _defineProperty(_textBackgroundColorP, '#DCDFE4', "var(--ds-background-accent-gray-subtler, #DCDFE4)"), _defineProperty(_textBackgroundColorP, '#C6EDFB', "var(--ds-background-accent-teal-subtler, #C6EDFB)"), _defineProperty(_textBackgroundColorP, '#D3F1A7', "var(--ds-background-accent-lime-subtler, #D3F1A7)"), _defineProperty(_textBackgroundColorP, '#FEDEC8', "var(--ds-background-accent-orange-subtler, #FEDEC8)"), _defineProperty(_textBackgroundColorP, '#FDD0EC', "var(--ds-background-accent-magenta-subtler, #FDD0EC)"), _defineProperty(_textBackgroundColorP, '#DFD8FD', "var(--ds-background-accent-purple-subtler, #DFD8FD)"), _textBackgroundColorP);
8
+ /**
9
+ * This takes an ADF hex color and returns a matching text background palette color.
10
+ *
11
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
12
+ *
13
+ * Example usage
14
+ * ```tsx
15
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
16
+ *
17
+ * <span style={{backgroundColor: cssValue}} />
18
+ * ```
19
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
20
+ * The exact output of this function is an implementation detail and should only be used when rendering
21
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
22
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
23
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
24
+ */
25
+ export function hexToEditorTextBackgroundPaletteColor(hexColor) {
26
+ // Ts ignore was used to allow use of conditional return type
27
+ // (preferring better type on consumption over safety in implementation)
28
+ // @ts-ignore
29
+ return textBackgroundColorPalette[hexColor.toUpperCase()];
30
+ }
package/dist/types/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue
2
2
  export { hexToEditorBorderPaletteColor } from './border';
3
3
  export { hexToEditorTextPaletteColor } from './text';
4
4
  export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue, } from './table-charts';
5
+ export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';
package/dist/types/text-background-color.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ export declare const textBackgroundColorPalette: {
2
+ /** Gray - light */
3
+ "#DCDFE4": "var(--ds-background-accent-gray-subtler, #DCDFE4)";
4
+ /** Teal - light */
5
+ "#C6EDFB": "var(--ds-background-accent-teal-subtler, #C6EDFB)";
6
+ /** Lime - light */
7
+ "#D3F1A7": "var(--ds-background-accent-lime-subtler, #D3F1A7)";
8
+ /** Orange - light */
9
+ "#FEDEC8": "var(--ds-background-accent-orange-subtler, #FEDEC8)";
10
+ /** Magenta - light */
11
+ "#FDD0EC": "var(--ds-background-accent-magenta-subtler, #FDD0EC)";
12
+ /** Purple - light */
13
+ "#DFD8FD": "var(--ds-background-accent-purple-subtler, #DFD8FD)";
14
+ };
15
+ type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
16
+ export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
17
+ /**
18
+ * This takes an ADF hex color and returns a matching text background palette color.
19
+ *
20
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
21
+ *
22
+ * Example usage
23
+ * ```tsx
24
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
25
+ *
26
+ * <span style={{backgroundColor: cssValue}} />
27
+ * ```
28
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
29
+ * The exact output of this function is an implementation detail and should only be used when rendering
30
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
31
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
32
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
33
+ */
34
+ export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
35
+ export {};
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteRawValue
2
2
  export { hexToEditorBorderPaletteColor } from './border';
3
3
  export { hexToEditorTextPaletteColor } from './text';
4
4
  export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteRawValue, } from './table-charts';
5
+ export { hexToEditorTextBackgroundPaletteColor } from './text-background-color';
package/dist/types-ts4.5/text-background-color.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ export declare const textBackgroundColorPalette: {
2
+ /** Gray - light */
3
+ "#DCDFE4": "var(--ds-background-accent-gray-subtler, #DCDFE4)";
4
+ /** Teal - light */
5
+ "#C6EDFB": "var(--ds-background-accent-teal-subtler, #C6EDFB)";
6
+ /** Lime - light */
7
+ "#D3F1A7": "var(--ds-background-accent-lime-subtler, #D3F1A7)";
8
+ /** Orange - light */
9
+ "#FEDEC8": "var(--ds-background-accent-orange-subtler, #FEDEC8)";
10
+ /** Magenta - light */
11
+ "#FDD0EC": "var(--ds-background-accent-magenta-subtler, #FDD0EC)";
12
+ /** Purple - light */
13
+ "#DFD8FD": "var(--ds-background-accent-purple-subtler, #DFD8FD)";
14
+ };
15
+ type TextBackgroundColorPalette = typeof textBackgroundColorPalette;
16
+ export type TextBackgroundColorPaletteKey = keyof TextBackgroundColorPalette;
17
+ /**
18
+ * This takes an ADF hex color and returns a matching text background palette color.
19
+ *
20
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
21
+ *
22
+ * Example usage
23
+ * ```tsx
24
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
25
+ *
26
+ * <span style={{backgroundColor: cssValue}} />
27
+ * ```
28
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
29
+ * The exact output of this function is an implementation detail and should only be used when rendering
30
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
31
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
32
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
33
+ */
34
+ export declare function hexToEditorTextBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends TextBackgroundColorPaletteKey ? TextBackgroundColorPalette[HexColor] : string | undefined;
35
+ export {};
package/docs/0-intro.tsx CHANGED
@@ -36,34 +36,37 @@ or reach out to the Design System Team via the [Atlassian Developer Community fo
36
36
 
37
37
  ## API documentation
38
38
 
39
- ${(
40
- <div style={{ marginTop: token('space.100', '8px') }}>
41
- <SectionMessage
42
- title="Design token names and values are an implementation detail."
43
- appearance="warning"
44
- >
45
- <p>
46
- The names of tokens can change over time, and the values of tokens will
47
- differ between themes.
48
- </p>
49
- <p>
50
- The exact output of this function is an implementation detail only and
51
- should only be used when rendering content to the user, on a client with
52
- a matching major version of <code>@atlaskit/tokens</code>.
53
- </p>
54
- <ul>
55
- <li>
56
- <strong>DO NOT</strong>: store the output of these functions in any
57
- user-generated content or back-end.
58
- </li>
59
- <li>
60
- <strong>DO</strong>: store the ADF hex color, and use these utilities
61
- at render time to display the themed version of the color
62
- </li>
63
- </ul>
64
- </SectionMessage>
65
- </div>
66
- )}
39
+ ${
40
+ (
41
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
42
+ <div style={{ marginTop: token('space.100', '8px') }}>
43
+ <SectionMessage
44
+ title="Design token names and values are an implementation detail."
45
+ appearance="warning"
46
+ >
47
+ <p>
48
+ The names of tokens can change over time, and the values of tokens will differ between
49
+ themes.
50
+ </p>
51
+ <p>
52
+ The exact output of this function is an implementation detail only and should only be used
53
+ when rendering content to the user, on a client with a matching major version of{' '}
54
+ <code>@atlaskit/tokens</code>.
55
+ </p>
56
+ <ul>
57
+ <li>
58
+ <strong>DO NOT</strong>: store the output of these functions in any user-generated
59
+ content or back-end.
60
+ </li>
61
+ <li>
62
+ <strong>DO</strong>: store the ADF hex color, and use these utilities at render time to
63
+ display the themed version of the color
64
+ </li>
65
+ </ul>
66
+ </SectionMessage>
67
+ </div>
68
+ )
69
+ }
67
70
 
68
71
  ### \`hexToTextPaletteColor\`
69
72
 
@@ -107,4 +110,18 @@ ${code`
107
110
  <div style={{border-color: cssValue}} />
108
111
  `}
109
112
 
113
+ ### \`hexToEditorTextBackgroundPaletteColor\`
114
+
115
+ This takes an adf hex color and returns a matching text background palette color.
116
+
117
+ By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
118
+
119
+ #### Example usage
120
+
121
+ ${code`
122
+ const cssValue = hexToEditorTextBackgroundPaletteColor('#D3F1A7');
123
+ // ^? const cssValue: string
124
+ <div style={{backgroundColor: cssValue}} />
125
+ `}
126
+
110
127
  `;
package/package.json CHANGED
@@ -1,69 +1,65 @@
1
1
  {
2
- "name": "@atlaskit/editor-palette",
3
- "version": "1.5.3",
4
- "description": "The editor palette",
5
- "author": "Atlassian Pty Ltd",
6
- "license": "Apache-2.0",
7
- "publishConfig": {
8
- "registry": "https://registry.npmjs.org/"
9
- },
10
- "atlassian": {
11
- "team": "Editor: Lego",
12
- "releaseModel": "continuous",
13
- "inPublicMirror": true,
14
- "website": {
15
- "name": "Editor Palette"
16
- },
17
- "runReact18": false
18
- },
19
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
20
- "main": "dist/cjs/index.js",
21
- "module": "dist/esm/index.js",
22
- "module:es2019": "dist/es2019/index.js",
23
- "types": "dist/types/index.d.ts",
24
- "typesVersions": {
25
- ">=4.5 <4.9": {
26
- "*": [
27
- "dist/types-ts4.5/*",
28
- "dist/types-ts4.5/index.d.ts"
29
- ]
30
- }
31
- },
32
- "sideEffects": false,
33
- "atlaskit:src": "src/index.ts",
34
- "af:exports": {
35
- ".": "./src/index.ts"
36
- },
37
- "dependencies": {
38
- "@atlaskit/tokens": "^1.42.0",
39
- "@babel/runtime": "^7.0.0"
40
- },
41
- "devDependencies": {
42
- "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
43
- "@testing-library/react": "^12.1.5",
44
- "react": "^16.8.0",
45
- "react-dom": "^16.8.0",
46
- "typescript": "~5.4.2",
47
- "wait-for-expect": "^1.2.0"
48
- },
49
- "techstack": {
50
- "@atlassian/frontend": {
51
- "import-structure": [
52
- "atlassian-conventions"
53
- ],
54
- "circular-dependencies": [
55
- "file-and-folder-level"
56
- ]
57
- },
58
- "@repo/internal": {
59
- "deprecation": "no-deprecated-imports",
60
- "design-tokens": [
61
- "color"
62
- ],
63
- "styling": [
64
- "emotion"
65
- ]
66
- }
67
- },
68
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
69
- }
2
+ "name": "@atlaskit/editor-palette",
3
+ "version": "1.6.1",
4
+ "description": "The editor palette",
5
+ "author": "Atlassian Pty Ltd",
6
+ "license": "Apache-2.0",
7
+ "publishConfig": {
8
+ "registry": "https://registry.npmjs.org/"
9
+ },
10
+ "atlassian": {
11
+ "team": "Editor: Lego",
12
+ "website": {
13
+ "name": "Editor Palette"
14
+ },
15
+ "runReact18": false
16
+ },
17
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
18
+ "main": "dist/cjs/index.js",
19
+ "module": "dist/esm/index.js",
20
+ "module:es2019": "dist/es2019/index.js",
21
+ "types": "dist/types/index.d.ts",
22
+ "typesVersions": {
23
+ ">=4.5 <4.9": {
24
+ "*": [
25
+ "dist/types-ts4.5/*",
26
+ "dist/types-ts4.5/index.d.ts"
27
+ ]
28
+ }
29
+ },
30
+ "sideEffects": false,
31
+ "atlaskit:src": "src/index.ts",
32
+ "af:exports": {
33
+ ".": "./src/index.ts"
34
+ },
35
+ "dependencies": {
36
+ "@atlaskit/tokens": "^2.0.0",
37
+ "@babel/runtime": "^7.0.0"
38
+ },
39
+ "devDependencies": {
40
+ "@testing-library/react": "^12.1.5",
41
+ "react": "^16.8.0",
42
+ "react-dom": "^16.8.0",
43
+ "typescript": "~5.4.2",
44
+ "wait-for-expect": "^1.2.0"
45
+ },
46
+ "techstack": {
47
+ "@atlassian/frontend": {
48
+ "import-structure": [
49
+ "atlassian-conventions"
50
+ ],
51
+ "circular-dependencies": [
52
+ "file-and-folder-level"
53
+ ]
54
+ },
55
+ "@repo/internal": {
56
+ "deprecation": "no-deprecated-imports",
57
+ "design-tokens": [
58
+ "color"
59
+ ],
60
+ "styling": [
61
+ "emotion"
62
+ ]
63
+ }
64
+ }
65
+ }
package/report.api.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  ## API Report File for "@atlaskit/editor-palette"
4
4
 
5
- > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using
6
+ > [API Extractor](https://api-extractor.com/).
6
7
  > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
8
 
8
9
  ### Table of contents
@@ -20,90 +21,90 @@ type EditorBackgroundPalette = typeof editorBackgroundPalette;
20
21
 
21
22
  // @public
22
23
  const editorBackgroundPalette: {
23
- '#DEEBFF': {
24
- getValue: (fallback: string) => string;
25
- token: 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
26
- };
27
- '#B3D4FF': {
28
- getValue: (fallback: string) => string;
29
- token: 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
30
- };
31
- '#4C9AFF': {
32
- getValue: (fallback: string) => string;
33
- token: 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
34
- };
35
- '#E6FCFF': {
36
- getValue: (fallback: string) => string;
37
- token: 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
38
- };
39
- '#B3F5FF': {
40
- getValue: (fallback: string) => string;
41
- token: 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
42
- };
43
- '#79E2F2': {
44
- getValue: (fallback: string) => string;
45
- token: 'var(--ds-background-accent-teal-subtle, #79E2F2)';
46
- };
47
- '#E3FCEF': {
48
- getValue: (fallback: string) => string;
49
- token: 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
50
- };
51
- '#ABF5D1': {
52
- getValue: (fallback: string) => string;
53
- token: 'var(--ds-background-accent-green-subtler, #ABF5D1)';
54
- };
55
- '#57D9A3': {
56
- getValue: (fallback: string) => string;
57
- token: 'var(--ds-background-accent-green-subtle, #57D9A3)';
58
- };
59
- '#FFFAE6': {
60
- getValue: (fallback: string) => string;
61
- token: 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
62
- };
63
- '#FFF0B3': {
64
- getValue: (fallback: string) => string;
65
- token: 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
66
- };
67
- '#FFC400': {
68
- getValue: (fallback: string) => string;
69
- token: 'var(--ds-background-accent-orange-subtle, #FFC400)';
70
- };
71
- '#FFEBE6': {
72
- getValue: (fallback: string) => string;
73
- token: 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
74
- };
75
- '#FFBDAD': {
76
- getValue: (fallback: string) => string;
77
- token: 'var(--ds-background-accent-red-subtler, #FFBDAD)';
78
- };
79
- '#FF8F73': {
80
- getValue: (fallback: string) => string;
81
- token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
82
- };
83
- '#EAE6FF': {
84
- getValue: (fallback: string) => string;
85
- token: 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
86
- };
87
- '#C0B6F2': {
88
- getValue: (fallback: string) => string;
89
- token: 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
90
- };
91
- '#998DD9': {
92
- getValue: (fallback: string) => string;
93
- token: 'var(--ds-background-accent-purple-subtle, #998DD9)';
94
- };
95
- '#FFFFFF': {
96
- getValue: (fallback: string) => string;
97
- token: 'var(--ds-surface, #FFFFFF)';
98
- };
99
- '#F4F5F7': {
100
- getValue: (fallback: string) => string;
101
- token: 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
102
- };
103
- '#B3BAC5': {
104
- getValue: (fallback: string) => string;
105
- token: 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
106
- };
24
+ '#DEEBFF': {
25
+ getValue: (fallback: string) => string;
26
+ token: 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
27
+ };
28
+ '#B3D4FF': {
29
+ getValue: (fallback: string) => string;
30
+ token: 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
31
+ };
32
+ '#4C9AFF': {
33
+ getValue: (fallback: string) => string;
34
+ token: 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
35
+ };
36
+ '#E6FCFF': {
37
+ getValue: (fallback: string) => string;
38
+ token: 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
39
+ };
40
+ '#B3F5FF': {
41
+ getValue: (fallback: string) => string;
42
+ token: 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
43
+ };
44
+ '#79E2F2': {
45
+ getValue: (fallback: string) => string;
46
+ token: 'var(--ds-background-accent-teal-subtle, #79E2F2)';
47
+ };
48
+ '#E3FCEF': {
49
+ getValue: (fallback: string) => string;
50
+ token: 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
51
+ };
52
+ '#ABF5D1': {
53
+ getValue: (fallback: string) => string;
54
+ token: 'var(--ds-background-accent-green-subtler, #ABF5D1)';
55
+ };
56
+ '#57D9A3': {
57
+ getValue: (fallback: string) => string;
58
+ token: 'var(--ds-background-accent-green-subtle, #57D9A3)';
59
+ };
60
+ '#FFFAE6': {
61
+ getValue: (fallback: string) => string;
62
+ token: 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
63
+ };
64
+ '#FFF0B3': {
65
+ getValue: (fallback: string) => string;
66
+ token: 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
67
+ };
68
+ '#FFC400': {
69
+ getValue: (fallback: string) => string;
70
+ token: 'var(--ds-background-accent-orange-subtle, #FFC400)';
71
+ };
72
+ '#FFEBE6': {
73
+ getValue: (fallback: string) => string;
74
+ token: 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
75
+ };
76
+ '#FFBDAD': {
77
+ getValue: (fallback: string) => string;
78
+ token: 'var(--ds-background-accent-red-subtler, #FFBDAD)';
79
+ };
80
+ '#FF8F73': {
81
+ getValue: (fallback: string) => string;
82
+ token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
83
+ };
84
+ '#EAE6FF': {
85
+ getValue: (fallback: string) => string;
86
+ token: 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
87
+ };
88
+ '#C0B6F2': {
89
+ getValue: (fallback: string) => string;
90
+ token: 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
91
+ };
92
+ '#998DD9': {
93
+ getValue: (fallback: string) => string;
94
+ token: 'var(--ds-background-accent-purple-subtle, #998DD9)';
95
+ };
96
+ '#FFFFFF': {
97
+ getValue: (fallback: string) => string;
98
+ token: 'var(--ds-surface, #FFFFFF)';
99
+ };
100
+ '#F4F5F7': {
101
+ getValue: (fallback: string) => string;
102
+ token: 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
103
+ };
104
+ '#B3BAC5': {
105
+ getValue: (fallback: string) => string;
106
+ token: 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
107
+ };
107
108
  };
108
109
 
109
110
  // @public (undocumented)
@@ -114,9 +115,9 @@ type EditorBorderPalette = typeof editorBorderPalette;
114
115
 
115
116
  // @public (undocumented)
116
117
  const editorBorderPalette: {
117
- '#091E4224': 'var(--ds-border, #091E4224)';
118
- '#758195': 'var(--ds-border-bold, #758195)';
119
- '#172B4D': 'var(--ds-text, #172B4D)';
118
+ '#091E4224': 'var(--ds-border, #091E4224)';
119
+ '#758195': 'var(--ds-border-bold, #758195)';
120
+ '#172B4D': 'var(--ds-text, #172B4D)';
120
121
  };
121
122
 
122
123
  // @public (undocumented)
@@ -127,150 +128,150 @@ type EditorTableChartsPalette = typeof editorTableChartsPalette;
127
128
 
128
129
  // @public
129
130
  const editorTableChartsPalette: {
130
- '#7AB2FF': {
131
- getValue: (fallback: string) => string;
132
- token: 'var(--ds-background-accent-blue-subtle, #7AB2FF)';
133
- };
134
- '#60C6D2': {
135
- getValue: (fallback: string) => string;
136
- token: 'var(--ds-background-accent-teal-subtle, #60C6D2)';
137
- };
138
- '#6BE1B0': {
139
- getValue: (fallback: string) => string;
140
- token: 'var(--ds-background-accent-green-subtle, #6BE1B0)';
141
- };
142
- '#FFDB57': {
143
- getValue: (fallback: string) => string;
144
- token: 'var(--ds-background-accent-yellow-subtle, #FFDB57)';
145
- };
146
- '#FAA53D': {
147
- getValue: (fallback: string) => string;
148
- token: 'var(--ds-background-accent-orange-subtle, #FAA53D)';
149
- };
150
- '#FF8F73': {
151
- getValue: (fallback: string) => string;
152
- token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
153
- };
154
- '#E774BB': {
155
- getValue: (fallback: string) => string;
156
- token: 'var(--ds-background-accent-magenta-subtle, #E774BB)';
157
- };
158
- '#B5A7FB': {
159
- getValue: (fallback: string) => string;
160
- token: 'var(--ds-background-accent-purple-subtle, #B5A7FB)';
161
- };
162
- '#8993A5': {
163
- getValue: (fallback: string) => string;
164
- token: 'var(--ds-background-accent-gray-subtler, #8993A5)';
165
- };
166
- '#247FFF': {
167
- getValue: (fallback: string) => string;
168
- token: 'var(--ds-chart-blue-bold, #247FFF)';
169
- };
170
- '#1D9AAA': {
171
- getValue: (fallback: string) => string;
172
- token: 'var(--ds-chart-teal-bold, #1D9AAA)';
173
- };
174
- '#23A971': {
175
- getValue: (fallback: string) => string;
176
- token: 'var(--ds-chart-green-bold, #23A971)';
177
- };
178
- '#FFBE33': {
179
- getValue: (fallback: string) => string;
180
- token: 'var(--ds-chart-yellow-bold, #FFBE33)';
181
- };
182
- '#D97008': {
183
- getValue: (fallback: string) => string;
184
- token: 'var(--ds-chart-orange-bold, #D97008)';
185
- };
186
- '#FC552C': {
187
- getValue: (fallback: string) => string;
188
- token: 'var(--ds-chart-red-bold, #FC552C)';
189
- };
190
- '#DA62AC': {
191
- getValue: (fallback: string) => string;
192
- token: 'var(--ds-chart-magenta-bold, #DA62AC)';
193
- };
194
- '#8B77EE': {
195
- getValue: (fallback: string) => string;
196
- token: 'var(--ds-chart-purple-bold, #8B77EE)';
197
- };
198
- '#8590A2': {
199
- getValue: (fallback: string) => string;
200
- token: 'var(--ds-chart-gray-bold, #8590A2)';
201
- };
202
- '#0055CC': {
203
- getValue: (fallback: string) => string;
204
- token: 'var(--ds-chart-blue-bolder, #0055CC)';
205
- };
206
- '#1D7F8C': {
207
- getValue: (fallback: string) => string;
208
- token: 'var(--ds-chart-teal-bolder, #1D7F8C)';
209
- };
210
- '#177D52': {
211
- getValue: (fallback: string) => string;
212
- token: 'var(--ds-chart-green-bolder, #177D52)';
213
- };
214
- '#FF9D00': {
215
- getValue: (fallback: string) => string;
216
- token: 'var(--ds-chart-yellow-bolder, #FF9D00)';
217
- };
218
- '#B65C02': {
219
- getValue: (fallback: string) => string;
220
- token: 'var(--ds-chart-orange-bolder, #B65C02)';
221
- };
222
- '#D32D03': {
223
- getValue: (fallback: string) => string;
224
- token: 'var(--ds-chart-red-bolder, #D32D03)';
225
- };
226
- '#CD519D': {
227
- getValue: (fallback: string) => string;
228
- token: 'var(--ds-chart-magenta-bolder, #CD519D)';
229
- };
230
- '#5A43D0': {
231
- getValue: (fallback: string) => string;
232
- token: 'var(--ds-chart-purple-bolder, #5A43D0)';
233
- };
234
- '#758195': {
235
- getValue: (fallback: string) => string;
236
- token: 'var(--ds-chart-gray-bolder, #758195)';
237
- };
238
- '#003884': {
239
- getValue: (fallback: string) => string;
240
- token: 'var(--ds-chart-blue-boldest, #003884)';
241
- };
242
- '#206B74': {
243
- getValue: (fallback: string) => string;
244
- token: 'var(--ds-chart-teal-boldest, #206B74)';
245
- };
246
- '#055C3F': {
247
- getValue: (fallback: string) => string;
248
- token: 'var(--ds-chart-green-boldest, #055C3F)';
249
- };
250
- '#946104': {
251
- getValue: (fallback: string) => string;
252
- token: 'var(--ds-chart-yellow-boldest, #946104)';
253
- };
254
- '#974F0C': {
255
- getValue: (fallback: string) => string;
256
- token: 'var(--ds-chart-orange-boldest, #974F0C)';
257
- };
258
- '#A32000': {
259
- getValue: (fallback: string) => string;
260
- token: 'var(--ds-chart-red-boldest, #A32000)';
261
- };
262
- '#943D73': {
263
- getValue: (fallback: string) => string;
264
- token: 'var(--ds-chart-magenta-boldest, #943D73)';
265
- };
266
- '#44368B': {
267
- getValue: (fallback: string) => string;
268
- token: 'var(--ds-chart-purple-boldest, #44368B)';
269
- };
270
- '#44546F': {
271
- getValue: (fallback: string) => string;
272
- token: 'var(--ds-chart-gray-boldest, #44546F)';
273
- };
131
+ '#7AB2FF': {
132
+ getValue: (fallback: string) => string;
133
+ token: 'var(--ds-background-accent-blue-subtle, #7AB2FF)';
134
+ };
135
+ '#60C6D2': {
136
+ getValue: (fallback: string) => string;
137
+ token: 'var(--ds-background-accent-teal-subtle, #60C6D2)';
138
+ };
139
+ '#6BE1B0': {
140
+ getValue: (fallback: string) => string;
141
+ token: 'var(--ds-background-accent-green-subtle, #6BE1B0)';
142
+ };
143
+ '#FFDB57': {
144
+ getValue: (fallback: string) => string;
145
+ token: 'var(--ds-background-accent-yellow-subtle, #FFDB57)';
146
+ };
147
+ '#FAA53D': {
148
+ getValue: (fallback: string) => string;
149
+ token: 'var(--ds-background-accent-orange-subtle, #FAA53D)';
150
+ };
151
+ '#FF8F73': {
152
+ getValue: (fallback: string) => string;
153
+ token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
154
+ };
155
+ '#E774BB': {
156
+ getValue: (fallback: string) => string;
157
+ token: 'var(--ds-background-accent-magenta-subtle, #E774BB)';
158
+ };
159
+ '#B5A7FB': {
160
+ getValue: (fallback: string) => string;
161
+ token: 'var(--ds-background-accent-purple-subtle, #B5A7FB)';
162
+ };
163
+ '#8993A5': {
164
+ getValue: (fallback: string) => string;
165
+ token: 'var(--ds-background-accent-gray-subtler, #8993A5)';
166
+ };
167
+ '#247FFF': {
168
+ getValue: (fallback: string) => string;
169
+ token: 'var(--ds-chart-blue-bold, #247FFF)';
170
+ };
171
+ '#1D9AAA': {
172
+ getValue: (fallback: string) => string;
173
+ token: 'var(--ds-chart-teal-bold, #1D9AAA)';
174
+ };
175
+ '#23A971': {
176
+ getValue: (fallback: string) => string;
177
+ token: 'var(--ds-chart-green-bold, #23A971)';
178
+ };
179
+ '#FFBE33': {
180
+ getValue: (fallback: string) => string;
181
+ token: 'var(--ds-chart-yellow-bold, #FFBE33)';
182
+ };
183
+ '#D97008': {
184
+ getValue: (fallback: string) => string;
185
+ token: 'var(--ds-chart-orange-bold, #D97008)';
186
+ };
187
+ '#FC552C': {
188
+ getValue: (fallback: string) => string;
189
+ token: 'var(--ds-chart-red-bold, #FC552C)';
190
+ };
191
+ '#DA62AC': {
192
+ getValue: (fallback: string) => string;
193
+ token: 'var(--ds-chart-magenta-bold, #DA62AC)';
194
+ };
195
+ '#8B77EE': {
196
+ getValue: (fallback: string) => string;
197
+ token: 'var(--ds-chart-purple-bold, #8B77EE)';
198
+ };
199
+ '#8590A2': {
200
+ getValue: (fallback: string) => string;
201
+ token: 'var(--ds-chart-gray-bold, #8590A2)';
202
+ };
203
+ '#0055CC': {
204
+ getValue: (fallback: string) => string;
205
+ token: 'var(--ds-chart-blue-bolder, #0055CC)';
206
+ };
207
+ '#1D7F8C': {
208
+ getValue: (fallback: string) => string;
209
+ token: 'var(--ds-chart-teal-bolder, #1D7F8C)';
210
+ };
211
+ '#177D52': {
212
+ getValue: (fallback: string) => string;
213
+ token: 'var(--ds-chart-green-bolder, #177D52)';
214
+ };
215
+ '#FF9D00': {
216
+ getValue: (fallback: string) => string;
217
+ token: 'var(--ds-chart-yellow-bolder, #FF9D00)';
218
+ };
219
+ '#B65C02': {
220
+ getValue: (fallback: string) => string;
221
+ token: 'var(--ds-chart-orange-bolder, #B65C02)';
222
+ };
223
+ '#D32D03': {
224
+ getValue: (fallback: string) => string;
225
+ token: 'var(--ds-chart-red-bolder, #D32D03)';
226
+ };
227
+ '#CD519D': {
228
+ getValue: (fallback: string) => string;
229
+ token: 'var(--ds-chart-magenta-bolder, #CD519D)';
230
+ };
231
+ '#5A43D0': {
232
+ getValue: (fallback: string) => string;
233
+ token: 'var(--ds-chart-purple-bolder, #5A43D0)';
234
+ };
235
+ '#758195': {
236
+ getValue: (fallback: string) => string;
237
+ token: 'var(--ds-chart-gray-bolder, #758195)';
238
+ };
239
+ '#003884': {
240
+ getValue: (fallback: string) => string;
241
+ token: 'var(--ds-chart-blue-boldest, #003884)';
242
+ };
243
+ '#206B74': {
244
+ getValue: (fallback: string) => string;
245
+ token: 'var(--ds-chart-teal-boldest, #206B74)';
246
+ };
247
+ '#055C3F': {
248
+ getValue: (fallback: string) => string;
249
+ token: 'var(--ds-chart-green-boldest, #055C3F)';
250
+ };
251
+ '#946104': {
252
+ getValue: (fallback: string) => string;
253
+ token: 'var(--ds-chart-yellow-boldest, #946104)';
254
+ };
255
+ '#974F0C': {
256
+ getValue: (fallback: string) => string;
257
+ token: 'var(--ds-chart-orange-boldest, #974F0C)';
258
+ };
259
+ '#A32000': {
260
+ getValue: (fallback: string) => string;
261
+ token: 'var(--ds-chart-red-boldest, #A32000)';
262
+ };
263
+ '#943D73': {
264
+ getValue: (fallback: string) => string;
265
+ token: 'var(--ds-chart-magenta-boldest, #943D73)';
266
+ };
267
+ '#44368B': {
268
+ getValue: (fallback: string) => string;
269
+ token: 'var(--ds-chart-purple-boldest, #44368B)';
270
+ };
271
+ '#44546F': {
272
+ getValue: (fallback: string) => string;
273
+ token: 'var(--ds-chart-gray-boldest, #44546F)';
274
+ };
274
275
  };
275
276
 
276
277
  // @public (undocumented)
@@ -281,27 +282,27 @@ type EditorTextPalette = typeof editorTextPalette;
281
282
 
282
283
  // @public (undocumented)
283
284
  const editorTextPalette: {
284
- '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
285
- '#4C9AFF': 'var(--ds-icon-accent-blue, #4C9AFF)';
286
- '#0747A6': 'var(--ds-text-accent-blue, #0747A6)';
287
- '#B3F5FF': 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
288
- '#00B8D9': 'var(--ds-icon-accent-teal, #00B8D9)';
289
- '#008DA6': 'var(--ds-text-accent-teal, #008DA6)';
290
- '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)';
291
- '#36B37E': 'var(--ds-icon-accent-green, #36B37E)';
292
- '#006644': 'var(--ds-text-accent-green, #006644)';
293
- '#FFF0B3': 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
294
- '#FFC400': 'var(--ds-background-accent-orange-subtle, #FFC400)';
295
- '#FF991F': 'var(--ds-icon-accent-orange, #FF991F)';
296
- '#FFBDAD': 'var(--ds-background-accent-red-subtler, #FFBDAD)';
297
- '#FF5630': 'var(--ds-icon-accent-red, #FF5630)';
298
- '#BF2600': 'var(--ds-text-accent-red, #BF2600)';
299
- '#EAE6FF': 'var(--ds-background-accent-purple-subtler, #EAE6FF)';
300
- '#6554C0': 'var(--ds-icon-accent-purple, #6554C0)';
301
- '#403294': 'var(--ds-text-accent-purple, #403294)';
302
- '#FFFFFF': 'var(--ds-text-inverse, #FFFFFF)';
303
- '#97A0AF': 'var(--ds-icon-accent-gray, #97A0AF)';
304
- '#172B4D': 'var(--ds-text, #172B4D)';
285
+ '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
286
+ '#4C9AFF': 'var(--ds-icon-accent-blue, #4C9AFF)';
287
+ '#0747A6': 'var(--ds-text-accent-blue, #0747A6)';
288
+ '#B3F5FF': 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
289
+ '#00B8D9': 'var(--ds-icon-accent-teal, #00B8D9)';
290
+ '#008DA6': 'var(--ds-text-accent-teal, #008DA6)';
291
+ '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)';
292
+ '#36B37E': 'var(--ds-icon-accent-green, #36B37E)';
293
+ '#006644': 'var(--ds-text-accent-green, #006644)';
294
+ '#FFF0B3': 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
295
+ '#FFC400': 'var(--ds-background-accent-orange-subtle, #FFC400)';
296
+ '#FF991F': 'var(--ds-icon-accent-orange, #FF991F)';
297
+ '#FFBDAD': 'var(--ds-background-accent-red-subtler, #FFBDAD)';
298
+ '#FF5630': 'var(--ds-icon-accent-red, #FF5630)';
299
+ '#BF2600': 'var(--ds-text-accent-red, #BF2600)';
300
+ '#EAE6FF': 'var(--ds-background-accent-purple-subtler, #EAE6FF)';
301
+ '#6554C0': 'var(--ds-icon-accent-purple, #6554C0)';
302
+ '#403294': 'var(--ds-text-accent-purple, #403294)';
303
+ '#FFFFFF': 'var(--ds-text-inverse, #FFFFFF)';
304
+ '#97A0AF': 'var(--ds-icon-accent-gray, #97A0AF)';
305
+ '#172B4D': 'var(--ds-text, #172B4D)';
305
306
  };
306
307
 
307
308
  // @public (undocumented)
@@ -309,41 +310,37 @@ type EditorTextPaletteKey = keyof EditorTextPalette;
309
310
 
310
311
  // @public
311
312
  export function hexToEditorBackgroundPaletteColor<HexColor extends string>(
312
- hexColor: HexColor,
313
+ hexColor: HexColor,
313
314
  ): HexColor extends EditorBackgroundPaletteKey
314
- ? EditorBackgroundPalette[HexColor]['token']
315
- : string | undefined;
315
+ ? EditorBackgroundPalette[HexColor]['token']
316
+ : string | undefined;
316
317
 
317
318
  // @public
318
319
  export function hexToEditorBackgroundPaletteRawValue<HexColor extends string>(
319
- hexColor: HexColor,
320
+ hexColor: HexColor,
320
321
  ): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
321
322
 
322
323
  // @public
323
324
  export function hexToEditorBorderPaletteColor<HexColor extends string>(
324
- hexColor: HexColor,
325
- ): HexColor extends EditorBorderPaletteKey
326
- ? EditorBorderPalette[HexColor]
327
- : string | undefined;
325
+ hexColor: HexColor,
326
+ ): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
328
327
 
329
328
  // @public
330
329
  export function hexToEditorTableChartsPaletteColor<HexColor extends string>(
331
- hexColor: HexColor,
330
+ hexColor: HexColor,
332
331
  ): HexColor extends EditorTableChartsPaletteKey
333
- ? EditorTableChartsPalette[HexColor]['token']
334
- : string | undefined;
332
+ ? EditorTableChartsPalette[HexColor]['token']
333
+ : string | undefined;
335
334
 
336
335
  // @public
337
336
  export function hexToEditorTableChartsPaletteRawValue<HexColor extends string>(
338
- hexColor: HexColor,
337
+ hexColor: HexColor,
339
338
  ): HexColor extends EditorTableChartsPaletteKey ? string : undefined;
340
339
 
341
340
  // @public
342
341
  export function hexToEditorTextPaletteColor<HexColor extends string>(
343
- hexColor: HexColor,
344
- ): HexColor extends EditorTextPaletteKey
345
- ? EditorTextPalette[HexColor]
346
- : string | undefined;
342
+ hexColor: HexColor,
343
+ ): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
347
344
 
348
345
  // (No @packageDocumentation comment for this package)
349
346
  ```