@atlaskit/editor-palette 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/{.babelrc → .babelrc.cts} +2 -2
  2. package/CHANGELOG.md +12 -0
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/version.json +1 -1
  5. package/dist/esm/version.json +1 -1
  6. package/dist/types-ts4.5/background.d.ts +133 -0
  7. package/dist/types-ts4.5/border.d.ts +29 -0
  8. package/dist/types-ts4.5/index.d.ts +4 -0
  9. package/dist/types-ts4.5/table-charts.d.ts +182 -0
  10. package/dist/types-ts4.5/text.d.ts +65 -0
  11. package/package.json +3 -3
  12. package/tmp/api-report-tmp.d.ts +331 -0
package/{.babelrc → .babelrc.cts} RENAMED
@@ -1,3 +1,3 @@
1
- {
1
+ module.exports = {
2
2
  "plugins": ["@atlaskit/tokens/babel-plugin"]
3
- }
3
+ };
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-palette
2
2
 
3
+ ## 1.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+
9
+ ## 1.4.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
14
+
3
15
  ## 1.4.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/types-ts4.5/background.d.ts ADDED
@@ -0,0 +1,133 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching background palette
3
+ * color.
4
+ *
5
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
6
+ *
7
+ * Example usage
8
+ * ```tsx
9
+ * const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
10
+ * // ^? const cssValue: string
11
+ * <div style={{backgroundColor: cssValue}} />
12
+ * ```
13
+ *
14
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
15
+ * The exact output of this function is an implementation detail and should only be used when rendering
16
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
17
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
18
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
19
+ */
20
+ export declare function hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['token'] : string | undefined;
21
+ export declare function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
22
+ type EditorBackgroundPalette = typeof editorBackgroundPalette;
23
+ export type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
24
+ export declare const editorBackgroundPalette: {
25
+ /** blue - light */
26
+ "#DEEBFF": {
27
+ tokenName: "color.background.accent.blue.subtlest";
28
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
29
+ };
30
+ /** blue - medium */
31
+ "#B3D4FF": {
32
+ tokenName: "color.background.accent.blue.subtler";
33
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
34
+ };
35
+ /** blue - strong */
36
+ "#4C9AFF": {
37
+ tokenName: "color.background.accent.blue.subtle";
38
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
39
+ };
40
+ /** teal - light */
41
+ "#E6FCFF": {
42
+ tokenName: "color.background.accent.teal.subtlest";
43
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
44
+ };
45
+ /** teal - medium */
46
+ "#B3F5FF": {
47
+ tokenName: "color.background.accent.teal.subtler";
48
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
49
+ };
50
+ /** teal - strong */
51
+ "#79E2F2": {
52
+ tokenName: "color.background.accent.teal.subtle";
53
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
54
+ };
55
+ /** green - light */
56
+ "#E3FCEF": {
57
+ tokenName: "color.background.accent.green.subtlest";
58
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
59
+ };
60
+ /** green - medium */
61
+ "#ABF5D1": {
62
+ tokenName: "color.background.accent.green.subtler";
63
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
64
+ };
65
+ /** green - strong */
66
+ "#57D9A3": {
67
+ tokenName: "color.background.accent.green.subtle";
68
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)";
69
+ };
70
+ /** yellowOrange - light */
71
+ "#FFFAE6": {
72
+ tokenName: "color.background.accent.yellow.subtlest";
73
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
74
+ };
75
+ /** yellowOrange - medium */
76
+ "#FFF0B3": {
77
+ tokenName: "color.background.accent.yellow.subtler";
78
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
79
+ };
80
+ /** yellowOrange - strong */
81
+ "#FFC400": {
82
+ tokenName: "color.background.accent.orange.subtle";
83
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)";
84
+ };
85
+ /** red - light */
86
+ "#FFEBE6": {
87
+ tokenName: "color.background.accent.red.subtlest";
88
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
89
+ };
90
+ /** red - medium */
91
+ "#FFBDAD": {
92
+ tokenName: "color.background.accent.red.subtler";
93
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
94
+ };
95
+ /** red - strong */
96
+ "#FF8F73": {
97
+ tokenName: "color.background.accent.red.subtle";
98
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)";
99
+ };
100
+ /** purple - light */
101
+ "#EAE6FF": {
102
+ tokenName: "color.background.accent.purple.subtlest";
103
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
104
+ };
105
+ /** purple - medium */
106
+ "#C0B6F2": {
107
+ tokenName: "color.background.accent.purple.subtler";
108
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
109
+ };
110
+ /** purple - strong */
111
+ "#998DD9": {
112
+ tokenName: "color.background.accent.purple.subtle";
113
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)";
114
+ };
115
+ /** whiteGray - light */
116
+ "#FFFFFF": {
117
+ tokenName: "elevation.surface";
118
+ token: "var(--ds-surface, #FFFFFF)";
119
+ };
120
+ /** whiteGray - medium */
121
+ "#F4F5F7": {
122
+ tokenName: "color.background.accent.gray.subtlest";
123
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
124
+ };
125
+ /** whiteGray - strong */
126
+ "#B3BAC5": {
127
+ tokenName: "color.background.accent.gray.subtle";
128
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
129
+ };
130
+ };
131
+ declare const tokenNames: ("color.background.accent.blue.subtlest" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtle" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtler" | "color.background.accent.green.subtle" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtler" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtle" | "elevation.surface" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtle")[];
132
+ export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
133
+ export {};
package/dist/types-ts4.5/border.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching border palette color.
3
+ *
4
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
5
+ *
6
+ * Example usage
7
+ * ```tsx
8
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
9
+ * // ^? const cssValue: string
10
+ * <div style={{borderColor: cssValue}} />
11
+ * ```
12
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
13
+ * The exact output of this function is an implementation detail and should only be used when rendering
14
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
15
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
16
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
17
+ */
18
+ export declare function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
19
+ type EditorBorderPalette = typeof editorBorderPalette;
20
+ export type EditorBorderPaletteKey = keyof EditorBorderPalette;
21
+ export declare const editorBorderPalette: {
22
+ /** gray - subtle */
23
+ "#091E4224": "var(--ds-border, #091E4224)";
24
+ /** gray */
25
+ "#758195": "var(--ds-border-bold, #758195)";
26
+ /** gray - bold */
27
+ "#172B4D": "var(--ds-text, #172B4D)";
28
+ };
29
+ export {};
package/dist/types-ts4.5/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName, } from './background';
2
+ export { hexToEditorBorderPaletteColor } from './border';
3
+ export { hexToEditorTextPaletteColor } from './text';
4
+ export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName, } from './table-charts';
package/dist/types-ts4.5/table-charts.d.ts ADDED
@@ -0,0 +1,182 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching chart palette
3
+ * color.
4
+ *
5
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
6
+ *
7
+ * Example usage
8
+ * ```tsx
9
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
10
+ * // ^? const cssValue: string
11
+ * <div style={{backgroundColor: cssValue}} />
12
+ * ```
13
+ *
14
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
15
+ * The exact output of this function is an implementation detail and should only be used when rendering
16
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
17
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
18
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
19
+ */
20
+ export declare function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
21
+ export declare function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
22
+ type EditorTableChartsPalette = typeof editorTableChartsPalette;
23
+ export type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
24
+ /**
25
+ * Tokenize hex codes into DST chart colors or
26
+ * into DST background.accent colors.
27
+ *
28
+ * The hex codes do not match the DST tokens, they are
29
+ * constants that are saved in the ADF that will be rendered
30
+ * as the mapped DST token.
31
+ *
32
+ * https://product-fabric.atlassian.net/browse/ED-17042
33
+ */
34
+ declare const editorTableChartsPalette: {
35
+ "#7AB2FF": {
36
+ tokenName: "color.background.accent.blue.subtle";
37
+ token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
38
+ };
39
+ "#60C6D2": {
40
+ tokenName: "color.background.accent.teal.subtle";
41
+ token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
42
+ };
43
+ "#6BE1B0": {
44
+ tokenName: "color.background.accent.green.subtle";
45
+ token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
46
+ };
47
+ "#FFDB57": {
48
+ tokenName: "color.background.accent.yellow.subtle";
49
+ token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
50
+ };
51
+ "#FAA53D": {
52
+ tokenName: "color.background.accent.orange.subtle";
53
+ token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
54
+ };
55
+ "#FF8F73": {
56
+ tokenName: "color.background.accent.red.subtle";
57
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)";
58
+ };
59
+ "#E774BB": {
60
+ tokenName: "color.background.accent.magenta.subtle";
61
+ token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
62
+ };
63
+ "#B5A7FB": {
64
+ tokenName: "color.background.accent.purple.subtle";
65
+ token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
66
+ };
67
+ "#8993A5": {
68
+ tokenName: "color.background.accent.gray.subtler";
69
+ token: "var(--ds-background-accent-gray-subtler, #8993A5)";
70
+ };
71
+ "#247FFF": {
72
+ tokenName: "color.chart.blue.bold";
73
+ token: "var(--ds-chart-blue-bold, #247FFF)";
74
+ };
75
+ "#1D9AAA": {
76
+ tokenName: "color.chart.teal.bold";
77
+ token: "var(--ds-chart-teal-bold, #1D9AAA)";
78
+ };
79
+ "#23A971": {
80
+ tokenName: "color.chart.green.bold";
81
+ token: "var(--ds-chart-green-bold, #23A971)";
82
+ };
83
+ "#FFBE33": {
84
+ tokenName: "color.chart.yellow.bold";
85
+ token: "var(--ds-chart-yellow-bold, #FFBE33)";
86
+ };
87
+ "#D97008": {
88
+ tokenName: "color.chart.orange.bold";
89
+ token: "var(--ds-chart-orange-bold, #D97008)";
90
+ };
91
+ "#FC552C": {
92
+ tokenName: "color.chart.red.bold";
93
+ token: "var(--ds-chart-red-bold, #FC552C)";
94
+ };
95
+ "#DA62AC": {
96
+ tokenName: "color.chart.magenta.bold";
97
+ token: "var(--ds-chart-magenta-bold, #DA62AC)";
98
+ };
99
+ "#8B77EE": {
100
+ tokenName: "color.chart.purple.bold";
101
+ token: "var(--ds-chart-purple-bold, #8B77EE)";
102
+ };
103
+ "#8590A2": {
104
+ tokenName: "color.chart.gray.bold";
105
+ token: "var(--ds-chart-gray-bold, #8590A2)";
106
+ };
107
+ "#0055CC": {
108
+ tokenName: "color.chart.blue.bolder";
109
+ token: "var(--ds-chart-blue-bolder, #0055CC)";
110
+ };
111
+ "#1D7F8C": {
112
+ tokenName: "color.chart.teal.bolder";
113
+ token: "var(--ds-chart-teal-bolder, #1D7F8C)";
114
+ };
115
+ "#177D52": {
116
+ tokenName: "color.chart.green.bolder";
117
+ token: "var(--ds-chart-green-bolder, #177D52)";
118
+ };
119
+ "#FF9D00": {
120
+ tokenName: "color.chart.yellow.bolder";
121
+ token: "var(--ds-chart-yellow-bolder, #FF9D00)";
122
+ };
123
+ "#B65C02": {
124
+ tokenName: "color.chart.orange.bolder";
125
+ token: "var(--ds-chart-orange-bolder, #B65C02)";
126
+ };
127
+ "#D32D03": {
128
+ tokenName: "color.chart.red.bolder";
129
+ token: "var(--ds-chart-red-bolder, #D32D03)";
130
+ };
131
+ "#CD519D": {
132
+ tokenName: "color.chart.magenta.bolder";
133
+ token: "var(--ds-chart-magenta-bolder, #CD519D)";
134
+ };
135
+ "#5A43D0": {
136
+ tokenName: "color.chart.purple.bolder";
137
+ token: "var(--ds-chart-purple-bolder, #5A43D0)";
138
+ };
139
+ "#758195": {
140
+ tokenName: "color.chart.gray.bolder";
141
+ token: "var(--ds-chart-gray-bolder, #758195)";
142
+ };
143
+ "#003884": {
144
+ tokenName: "color.chart.blue.boldest";
145
+ token: "var(--ds-chart-blue-boldest, #003884)";
146
+ };
147
+ "#206B74": {
148
+ tokenName: "color.chart.teal.boldest";
149
+ token: "var(--ds-chart-teal-boldest, #206B74)";
150
+ };
151
+ "#055C3F": {
152
+ tokenName: "color.chart.green.boldest";
153
+ token: "var(--ds-chart-green-boldest, #055C3F)";
154
+ };
155
+ "#946104": {
156
+ tokenName: "color.chart.yellow.boldest";
157
+ token: "var(--ds-chart-yellow-boldest, #946104)";
158
+ };
159
+ "#974F0C": {
160
+ tokenName: "color.chart.orange.boldest";
161
+ token: "var(--ds-chart-orange-boldest, #974F0C)";
162
+ };
163
+ "#A32000": {
164
+ tokenName: "color.chart.red.boldest";
165
+ token: "var(--ds-chart-red-boldest, #A32000)";
166
+ };
167
+ "#943D73": {
168
+ tokenName: "color.chart.magenta.boldest";
169
+ token: "var(--ds-chart-magenta-boldest, #943D73)";
170
+ };
171
+ "#44368B": {
172
+ tokenName: "color.chart.purple.boldest";
173
+ token: "var(--ds-chart-purple-boldest, #44368B)";
174
+ };
175
+ "#44546F": {
176
+ tokenName: "color.chart.gray.boldest";
177
+ token: "var(--ds-chart-gray-boldest, #44546F)";
178
+ };
179
+ };
180
+ declare const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.yellow.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.gray.subtler" | "color.chart.blue.bold" | "color.chart.teal.bold" | "color.chart.green.bold" | "color.chart.yellow.bold" | "color.chart.orange.bold" | "color.chart.red.bold" | "color.chart.magenta.bold" | "color.chart.purple.bold" | "color.chart.gray.bold" | "color.chart.blue.bolder" | "color.chart.teal.bolder" | "color.chart.green.bolder" | "color.chart.yellow.bolder" | "color.chart.orange.bolder" | "color.chart.red.bolder" | "color.chart.magenta.bolder" | "color.chart.purple.bolder" | "color.chart.gray.bolder" | "color.chart.blue.boldest" | "color.chart.teal.boldest" | "color.chart.green.boldest" | "color.chart.yellow.boldest" | "color.chart.orange.boldest" | "color.chart.red.boldest" | "color.chart.magenta.boldest" | "color.chart.purple.boldest" | "color.chart.gray.boldest")[];
181
+ export type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
182
+ export {};
package/dist/types-ts4.5/text.d.ts ADDED
@@ -0,0 +1,65 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching text palette color.
3
+ *
4
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
5
+ *
6
+ * Example usage
7
+ * ```tsx
8
+ * const cssValue = hexToTextPaletteColor('#0747A6');
9
+ * // ^? const cssValue: string
10
+ * <span style={{textColor: cssValue}} />
11
+ * ```
12
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
13
+ * The exact output of this function is an implementation detail and should only be used when rendering
14
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
15
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
16
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
17
+ */
18
+ export declare function hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
19
+ type EditorTextPalette = typeof editorTextPalette;
20
+ export type EditorTextPaletteKey = keyof EditorTextPalette;
21
+ export declare const editorTextPalette: {
22
+ /** blue - light */
23
+ "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
24
+ /** blue - medium */
25
+ "#4C9AFF": "var(--ds-icon-accent-blue, #4C9AFF)";
26
+ /** blue - strong */
27
+ "#0747A6": "var(--ds-text-accent-blue, #0747A6)";
28
+ /** teal - light */
29
+ "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
30
+ /** teal - medium */
31
+ "#00B8D9": "var(--ds-icon-accent-teal, #00B8D9)";
32
+ /** teal - strong */
33
+ "#008DA6": "var(--ds-text-accent-teal, #008DA6)";
34
+ /** green - light */
35
+ "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
36
+ /** green - medium */
37
+ "#36B37E": "var(--ds-icon-accent-green, #36B37E)";
38
+ /** green - strong */
39
+ "#006644": "var(--ds-text-accent-green, #006644)";
40
+ /** yellowOrange - light */
41
+ "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
42
+ /** yellowOrange - medium */
43
+ "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
44
+ /** yellowOrange - strong */
45
+ "#FF991F": "var(--ds-icon-accent-orange, #FF991F)";
46
+ /** red - light */
47
+ "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
48
+ /** red - medium */
49
+ "#FF5630": "var(--ds-icon-accent-red, #FF5630)";
50
+ /** red - strong */
51
+ "#BF2600": "var(--ds-text-accent-red, #BF2600)";
52
+ /** purple - light */
53
+ "#EAE6FF": "var(--ds-background-accent-purple-subtler, #EAE6FF)";
54
+ /** purple - medium */
55
+ "#6554C0": "var(--ds-icon-accent-purple, #6554C0)";
56
+ /** purple - strong */
57
+ "#403294": "var(--ds-text-accent-purple, #403294)";
58
+ /** whiteGray - light */
59
+ "#FFFFFF": "var(--ds-text-inverse, #FFFFFF)";
60
+ /** whiteGray - medium */
61
+ "#97A0AF": "var(--ds-icon-accent-gray, #97A0AF)";
62
+ /** whiteGray - strong */
63
+ "#172B4D": "var(--ds-text, #172B4D)";
64
+ };
65
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "The editor palette",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -9,7 +9,7 @@
9
9
  },
10
10
  "atlassian": {
11
11
  "team": "Editor",
12
- "releaseModel": "scheduled",
12
+ "releaseModel": "continuous",
13
13
  "website": {
14
14
  "name": "Editor Palette"
15
15
  }
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/docs": "*",
40
40
  "@atlaskit/section-message": "^6.4.0",
41
41
  "@atlaskit/ssr": "*",
42
- "@atlaskit/tokens": "^1.4.0",
42
+ "@atlaskit/tokens": "^1.5.0",
43
43
  "@atlaskit/visual-regression": "*",
44
44
  "@atlaskit/webdriver-runner": "*",
45
45
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
package/tmp/api-report-tmp.d.ts ADDED
@@ -0,0 +1,331 @@
1
+ ## API Report File for "@atlaskit/editor-palette"
2
+
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ ```ts
6
+
7
+ // @public (undocumented)
8
+ type EditorBackgroundPalette = typeof editorBackgroundPalette;
9
+
10
+ // @public (undocumented)
11
+ const editorBackgroundPalette: {
12
+ "#DEEBFF": {
13
+ tokenName: "color.background.accent.blue.subtlest";
14
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
15
+ };
16
+ "#B3D4FF": {
17
+ tokenName: "color.background.accent.blue.subtler";
18
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
19
+ };
20
+ "#4C9AFF": {
21
+ tokenName: "color.background.accent.blue.subtle";
22
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
23
+ };
24
+ "#E6FCFF": {
25
+ tokenName: "color.background.accent.teal.subtlest";
26
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
27
+ };
28
+ "#B3F5FF": {
29
+ tokenName: "color.background.accent.teal.subtler";
30
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
31
+ };
32
+ "#79E2F2": {
33
+ tokenName: "color.background.accent.teal.subtle";
34
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
35
+ };
36
+ "#E3FCEF": {
37
+ tokenName: "color.background.accent.green.subtlest";
38
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
39
+ };
40
+ "#ABF5D1": {
41
+ tokenName: "color.background.accent.green.subtler";
42
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
43
+ };
44
+ "#57D9A3": {
45
+ tokenName: "color.background.accent.green.subtle";
46
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)";
47
+ };
48
+ "#FFFAE6": {
49
+ tokenName: "color.background.accent.yellow.subtlest";
50
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
51
+ };
52
+ "#FFF0B3": {
53
+ tokenName: "color.background.accent.yellow.subtler";
54
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
55
+ };
56
+ "#FFC400": {
57
+ tokenName: "color.background.accent.orange.subtle";
58
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)";
59
+ };
60
+ "#FFEBE6": {
61
+ tokenName: "color.background.accent.red.subtlest";
62
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
63
+ };
64
+ "#FFBDAD": {
65
+ tokenName: "color.background.accent.red.subtler";
66
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
67
+ };
68
+ "#FF8F73": {
69
+ tokenName: "color.background.accent.red.subtle";
70
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)";
71
+ };
72
+ "#EAE6FF": {
73
+ tokenName: "color.background.accent.purple.subtlest";
74
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
75
+ };
76
+ "#C0B6F2": {
77
+ tokenName: "color.background.accent.purple.subtler";
78
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
79
+ };
80
+ "#998DD9": {
81
+ tokenName: "color.background.accent.purple.subtle";
82
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)";
83
+ };
84
+ "#FFFFFF": {
85
+ tokenName: "elevation.surface";
86
+ token: "var(--ds-surface, #FFFFFF)";
87
+ };
88
+ "#F4F5F7": {
89
+ tokenName: "color.background.accent.gray.subtlest";
90
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
91
+ };
92
+ "#B3BAC5": {
93
+ tokenName: "color.background.accent.gray.subtle";
94
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
95
+ };
96
+ };
97
+
98
+ // @public (undocumented)
99
+ type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
100
+
101
+ // @public (undocumented)
102
+ type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
103
+
104
+ // @public (undocumented)
105
+ type EditorBackgroundPaletteTokenNames_2 = (typeof tokenNames_2)[number];
106
+
107
+ // @public (undocumented)
108
+ type EditorBorderPalette = typeof editorBorderPalette;
109
+
110
+ // @public (undocumented)
111
+ const editorBorderPalette: {
112
+ "#091E4224": "var(--ds-border, #091E4224)";
113
+ "#758195": "var(--ds-border-bold, #758195)";
114
+ "#172B4D": "var(--ds-text, #172B4D)";
115
+ };
116
+
117
+ // @public (undocumented)
118
+ type EditorBorderPaletteKey = keyof EditorBorderPalette;
119
+
120
+ // @public (undocumented)
121
+ type EditorTableChartsPalette = typeof editorTableChartsPalette;
122
+
123
+ // @public
124
+ const editorTableChartsPalette: {
125
+ "#7AB2FF": {
126
+ tokenName: "color.background.accent.blue.subtle";
127
+ token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
128
+ };
129
+ "#60C6D2": {
130
+ tokenName: "color.background.accent.teal.subtle";
131
+ token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
132
+ };
133
+ "#6BE1B0": {
134
+ tokenName: "color.background.accent.green.subtle";
135
+ token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
136
+ };
137
+ "#FFDB57": {
138
+ tokenName: "color.background.accent.yellow.subtle";
139
+ token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
140
+ };
141
+ "#FAA53D": {
142
+ tokenName: "color.background.accent.orange.subtle";
143
+ token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
144
+ };
145
+ "#FF8F73": {
146
+ tokenName: "color.background.accent.red.subtle";
147
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)";
148
+ };
149
+ "#E774BB": {
150
+ tokenName: "color.background.accent.magenta.subtle";
151
+ token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
152
+ };
153
+ "#B5A7FB": {
154
+ tokenName: "color.background.accent.purple.subtle";
155
+ token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
156
+ };
157
+ "#8993A5": {
158
+ tokenName: "color.background.accent.gray.subtler";
159
+ token: "var(--ds-background-accent-gray-subtler, #8993A5)";
160
+ };
161
+ "#247FFF": {
162
+ tokenName: "color.chart.blue.bold";
163
+ token: "var(--ds-chart-blue-bold, #247FFF)";
164
+ };
165
+ "#1D9AAA": {
166
+ tokenName: "color.chart.teal.bold";
167
+ token: "var(--ds-chart-teal-bold, #1D9AAA)";
168
+ };
169
+ "#23A971": {
170
+ tokenName: "color.chart.green.bold";
171
+ token: "var(--ds-chart-green-bold, #23A971)";
172
+ };
173
+ "#FFBE33": {
174
+ tokenName: "color.chart.yellow.bold";
175
+ token: "var(--ds-chart-yellow-bold, #FFBE33)";
176
+ };
177
+ "#D97008": {
178
+ tokenName: "color.chart.orange.bold";
179
+ token: "var(--ds-chart-orange-bold, #D97008)";
180
+ };
181
+ "#FC552C": {
182
+ tokenName: "color.chart.red.bold";
183
+ token: "var(--ds-chart-red-bold, #FC552C)";
184
+ };
185
+ "#DA62AC": {
186
+ tokenName: "color.chart.magenta.bold";
187
+ token: "var(--ds-chart-magenta-bold, #DA62AC)";
188
+ };
189
+ "#8B77EE": {
190
+ tokenName: "color.chart.purple.bold";
191
+ token: "var(--ds-chart-purple-bold, #8B77EE)";
192
+ };
193
+ "#8590A2": {
194
+ tokenName: "color.chart.gray.bold";
195
+ token: "var(--ds-chart-gray-bold, #8590A2)";
196
+ };
197
+ "#0055CC": {
198
+ tokenName: "color.chart.blue.bolder";
199
+ token: "var(--ds-chart-blue-bolder, #0055CC)";
200
+ };
201
+ "#1D7F8C": {
202
+ tokenName: "color.chart.teal.bolder";
203
+ token: "var(--ds-chart-teal-bolder, #1D7F8C)";
204
+ };
205
+ "#177D52": {
206
+ tokenName: "color.chart.green.bolder";
207
+ token: "var(--ds-chart-green-bolder, #177D52)";
208
+ };
209
+ "#FF9D00": {
210
+ tokenName: "color.chart.yellow.bolder";
211
+ token: "var(--ds-chart-yellow-bolder, #FF9D00)";
212
+ };
213
+ "#B65C02": {
214
+ tokenName: "color.chart.orange.bolder";
215
+ token: "var(--ds-chart-orange-bolder, #B65C02)";
216
+ };
217
+ "#D32D03": {
218
+ tokenName: "color.chart.red.bolder";
219
+ token: "var(--ds-chart-red-bolder, #D32D03)";
220
+ };
221
+ "#CD519D": {
222
+ tokenName: "color.chart.magenta.bolder";
223
+ token: "var(--ds-chart-magenta-bolder, #CD519D)";
224
+ };
225
+ "#5A43D0": {
226
+ tokenName: "color.chart.purple.bolder";
227
+ token: "var(--ds-chart-purple-bolder, #5A43D0)";
228
+ };
229
+ "#758195": {
230
+ tokenName: "color.chart.gray.bolder";
231
+ token: "var(--ds-chart-gray-bolder, #758195)";
232
+ };
233
+ "#003884": {
234
+ tokenName: "color.chart.blue.boldest";
235
+ token: "var(--ds-chart-blue-boldest, #003884)";
236
+ };
237
+ "#206B74": {
238
+ tokenName: "color.chart.teal.boldest";
239
+ token: "var(--ds-chart-teal-boldest, #206B74)";
240
+ };
241
+ "#055C3F": {
242
+ tokenName: "color.chart.green.boldest";
243
+ token: "var(--ds-chart-green-boldest, #055C3F)";
244
+ };
245
+ "#946104": {
246
+ tokenName: "color.chart.yellow.boldest";
247
+ token: "var(--ds-chart-yellow-boldest, #946104)";
248
+ };
249
+ "#974F0C": {
250
+ tokenName: "color.chart.orange.boldest";
251
+ token: "var(--ds-chart-orange-boldest, #974F0C)";
252
+ };
253
+ "#A32000": {
254
+ tokenName: "color.chart.red.boldest";
255
+ token: "var(--ds-chart-red-boldest, #A32000)";
256
+ };
257
+ "#943D73": {
258
+ tokenName: "color.chart.magenta.boldest";
259
+ token: "var(--ds-chart-magenta-boldest, #943D73)";
260
+ };
261
+ "#44368B": {
262
+ tokenName: "color.chart.purple.boldest";
263
+ token: "var(--ds-chart-purple-boldest, #44368B)";
264
+ };
265
+ "#44546F": {
266
+ tokenName: "color.chart.gray.boldest";
267
+ token: "var(--ds-chart-gray-boldest, #44546F)";
268
+ };
269
+ };
270
+
271
+ // @public (undocumented)
272
+ type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
273
+
274
+ // @public (undocumented)
275
+ type EditorTextPalette = typeof editorTextPalette;
276
+
277
+ // @public (undocumented)
278
+ const editorTextPalette: {
279
+ "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
280
+ "#4C9AFF": "var(--ds-icon-accent-blue, #4C9AFF)";
281
+ "#0747A6": "var(--ds-text-accent-blue, #0747A6)";
282
+ "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
283
+ "#00B8D9": "var(--ds-icon-accent-teal, #00B8D9)";
284
+ "#008DA6": "var(--ds-text-accent-teal, #008DA6)";
285
+ "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
286
+ "#36B37E": "var(--ds-icon-accent-green, #36B37E)";
287
+ "#006644": "var(--ds-text-accent-green, #006644)";
288
+ "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
289
+ "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
290
+ "#FF991F": "var(--ds-icon-accent-orange, #FF991F)";
291
+ "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
292
+ "#FF5630": "var(--ds-icon-accent-red, #FF5630)";
293
+ "#BF2600": "var(--ds-text-accent-red, #BF2600)";
294
+ "#EAE6FF": "var(--ds-background-accent-purple-subtler, #EAE6FF)";
295
+ "#6554C0": "var(--ds-icon-accent-purple, #6554C0)";
296
+ "#403294": "var(--ds-text-accent-purple, #403294)";
297
+ "#FFFFFF": "var(--ds-text-inverse, #FFFFFF)";
298
+ "#97A0AF": "var(--ds-icon-accent-gray, #97A0AF)";
299
+ "#172B4D": "var(--ds-text, #172B4D)";
300
+ };
301
+
302
+ // @public (undocumented)
303
+ type EditorTextPaletteKey = keyof EditorTextPalette;
304
+
305
+ // @public
306
+ export function hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['token'] : string | undefined;
307
+
308
+ // @public (undocumented)
309
+ export function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
310
+
311
+ // @public
312
+ export function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
313
+
314
+ // @public
315
+ export function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
316
+
317
+ // @public (undocumented)
318
+ export function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames_2 | undefined;
319
+
320
+ // @public
321
+ export function hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
322
+
323
+ // @public (undocumented)
324
+ const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtlest" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtlest" | "color.background.accent.green.subtle" | "color.background.accent.green.subtler" | "color.background.accent.green.subtlest" | "color.background.accent.orange.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtlest" | "color.background.accent.red.subtle" | "color.background.accent.red.subtler" | "color.background.accent.red.subtlest" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtlest" | "elevation.surface")[];
325
+
326
+ // @public (undocumented)
327
+ const tokenNames_2: ("color.background.accent.blue.subtle" | "color.background.accent.gray.subtler" | "color.background.accent.green.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.red.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.yellow.subtle" | "color.chart.blue.bold" | "color.chart.blue.bolder" | "color.chart.blue.boldest" | "color.chart.gray.bold" | "color.chart.gray.bolder" | "color.chart.gray.boldest" | "color.chart.green.bold" | "color.chart.green.bolder" | "color.chart.green.boldest" | "color.chart.magenta.bold" | "color.chart.magenta.bolder" | "color.chart.magenta.boldest" | "color.chart.orange.bold" | "color.chart.orange.bolder" | "color.chart.orange.boldest" | "color.chart.purple.bold" | "color.chart.purple.bolder" | "color.chart.purple.boldest" | "color.chart.red.bold" | "color.chart.red.bolder" | "color.chart.red.boldest" | "color.chart.teal.bold" | "color.chart.teal.bolder" | "color.chart.teal.boldest" | "color.chart.yellow.bold" | "color.chart.yellow.bolder" | "color.chart.yellow.boldest")[];
328
+
329
+ // (No @packageDocumentation comment for this package)
330
+
331
+ ```