@atlaskit/editor-palette 1.5.1 → 1.5.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.
package/CHANGELOG.md CHANGED
@@ -1,46 +1,58 @@
1
1
  # @atlaskit/editor-palette
2
2
 
3
+ ## 1.5.3
4
+
5
+ ### Patch Changes
6
+
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`
8
+
9
+ ## 1.5.2
10
+
11
+ ### Patch Changes
12
+
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
14
+
3
15
  ## 1.5.1
4
16
 
5
17
  ### Patch Changes
6
18
 
7
- - [`c5a5b4ec141`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5a5b4ec141) - Reverted back the changes done as part of UTEST-643
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
8
20
 
9
21
  ## 1.5.0
10
22
 
11
23
  ### Minor Changes
12
24
 
13
- - [`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
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
14
26
 
15
27
  ## 1.4.3
16
28
 
17
29
  ### Patch Changes
18
30
 
19
- - [`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.
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.
20
32
 
21
33
  ## 1.4.2
22
34
 
23
35
  ### Patch Changes
24
36
 
25
- - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
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
26
38
 
27
39
  ## 1.4.1
28
40
 
29
41
  ### Patch Changes
30
42
 
31
- - [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
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`
32
44
 
33
45
  ## 1.4.0
34
46
 
35
47
  ### Minor Changes
36
48
 
37
- - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
49
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
38
50
 
39
51
  ## 1.3.0
40
52
 
41
53
  ### Minor Changes
42
54
 
43
- - [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux] ED-17043 Expanded table chart colors from 20 to 36 colors.
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.
44
56
 
45
57
  ### Patch Changes
46
58
 
@@ -50,17 +62,17 @@
50
62
 
51
63
  ### Minor Changes
52
64
 
53
- - [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add "border" mark to stage0 ADF schema
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
54
66
 
55
67
  ## 1.1.0
56
68
 
57
69
  ### Minor Changes
58
70
 
59
- - [`47934727661`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47934727661) - ED-17042 - Add map hex colors to DST chart tokens
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
60
72
  - [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
61
73
 
62
74
  ## 1.0.0
63
75
 
64
76
  ### Major Changes
65
77
 
66
- - [`0ea58bc9901`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea58bc9901) - Remove undocumented palette object entrypoints
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
package/README.md CHANGED
@@ -55,3 +55,21 @@ The exact output of this function is an implementation detail and should only be
55
55
  content to the user, on a client with a matching major version of `@atlaskit/tokens`.
56
56
  - **DO NOT**: store the output of these functions in any user-generated content or back-end.
57
57
  - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
58
+
59
+ #### hexToEditorBorderPaletteColor
60
+
61
+ This takes an adf hex color and returns a matching border palette color.
62
+
63
+ ```ts
64
+ import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
65
+
66
+ const cssValue = hexToEditorBorderPaletteColor('#091E4224');
67
+ // ^? const cssValue: 'var(--ds-border, #091E4224)'
68
+ <span style={{borderColor: cssValue}} />
69
+ ```
70
+
71
+ The names of tokens can change over time, and the values of tokens will differ between themes.
72
+ The exact output of this function is an implementation detail and should only be used when rendering
73
+ content to the user, on a client with a matching major version of `@atlaskit/tokens`.
74
+ - **DO NOT**: store the output of these functions in any user-generated content or back-end.
75
+ - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
@@ -10,7 +10,6 @@ exports.hexToEditorBackgroundPaletteRawValue = hexToEditorBackgroundPaletteRawVa
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _tokens = require("@atlaskit/tokens");
12
12
  var _editorBackgroundPale; // This import will be stripped on build
13
- // eslint-disable-next-line import/no-extraneous-dependencies
14
13
  /**
15
14
  * This takes an adf hex color and returns a matching background palette
16
15
  * color.
@@ -66,7 +65,7 @@ function hexToEditorBackgroundPaletteRawValue(hexColor) {
66
65
  * Using object structure as getValue() function needed for table values, and other
67
66
  * properties may be needed in the future.
68
67
  */
69
- var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', {
68
+ var editorBackgroundPalette = exports.editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', {
70
69
  getValue: function getValue(fallback) {
71
70
  return (0, _tokens.getTokenValue)('color.background.accent.blue.subtlest', fallback);
72
71
  },
@@ -171,5 +170,4 @@ var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.
171
170
  return (0, _tokens.getTokenValue)('color.background.accent.gray.subtle', fallback);
172
171
  },
173
172
  token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
174
- }), _editorBackgroundPale);
175
- exports.editorBackgroundPalette = editorBackgroundPalette;
173
+ }), _editorBackgroundPale);
@@ -9,7 +9,6 @@ exports.hexToEditorBorderPaletteColor = hexToEditorBorderPaletteColor;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _editorBorderPalette;
11
11
  // This import will be stripped on build
12
- // eslint-disable-next-line import/no-extraneous-dependencies
13
12
 
14
13
  /**
15
14
  * This takes an adf hex color and returns a matching border palette color.
@@ -35,5 +34,4 @@ function hexToEditorBorderPaletteColor(hexColor) {
35
34
  // @ts-ignore
36
35
  return editorBorderPalette[hexColor.toUpperCase()];
37
36
  }
38
- var editorBorderPalette = (_editorBorderPalette = {}, (0, _defineProperty2.default)(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), (0, _defineProperty2.default)(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), (0, _defineProperty2.default)(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);
39
- exports.editorBorderPalette = editorBorderPalette;
37
+ var editorBorderPalette = exports.editorBorderPalette = (_editorBorderPalette = {}, (0, _defineProperty2.default)(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), (0, _defineProperty2.default)(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), (0, _defineProperty2.default)(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);
@@ -9,7 +9,6 @@ exports.hexToEditorTableChartsPaletteRawValue = hexToEditorTableChartsPaletteRaw
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _tokens = require("@atlaskit/tokens");
11
11
  var _editorTableChartsPal; // This import will be stripped on build
12
- // eslint-disable-next-line import/no-extraneous-dependencies
13
12
  /**
14
13
  * This takes an adf hex color and returns a matching chart palette
15
14
  * color.
@@ -60,6 +59,7 @@ function hexToEditorTableChartsPaletteRawValue(hexColor) {
60
59
  // Colors taken from
61
60
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
62
61
  // values are asserted to improve generated type declarations
62
+
63
63
  /**
64
64
  * Tokenize hex codes into DST chart colors or
65
65
  * into DST background.accent colors.
package/dist/cjs/text.js CHANGED
@@ -9,7 +9,6 @@ exports.hexToEditorTextPaletteColor = hexToEditorTextPaletteColor;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _editorTextPalette;
11
11
  // This import will be stripped on build
12
- // eslint-disable-next-line import/no-extraneous-dependencies
13
12
 
14
13
  /**
15
14
  * This takes an adf hex color and returns a matching text palette color.
@@ -38,5 +37,4 @@ function hexToEditorTextPaletteColor(hexColor) {
38
37
  // Colors taken from
39
38
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
40
39
  // values are asserted to improve generated type declarations
41
- var editorTextPalette = (_editorTextPalette = {}, (0, _defineProperty2.default)(_editorTextPalette, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#4C9AFF', "var(--ds-icon-accent-blue, #4C9AFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#0747A6', "var(--ds-text-accent-blue, #0747A6)"), (0, _defineProperty2.default)(_editorTextPalette, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#00B8D9', "var(--ds-icon-accent-teal, #00B8D9)"), (0, _defineProperty2.default)(_editorTextPalette, '#008DA6', "var(--ds-text-accent-teal, #008DA6)"), (0, _defineProperty2.default)(_editorTextPalette, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorTextPalette, '#36B37E', "var(--ds-icon-accent-green, #36B37E)"), (0, _defineProperty2.default)(_editorTextPalette, '#006644', "var(--ds-text-accent-green, #006644)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF991F', "var(--ds-icon-accent-orange, #FF991F)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF5630', "var(--ds-icon-accent-red, #FF5630)"), (0, _defineProperty2.default)(_editorTextPalette, '#BF2600', "var(--ds-text-accent-red, #BF2600)"), (0, _defineProperty2.default)(_editorTextPalette, '#EAE6FF', "var(--ds-background-accent-purple-subtler, #EAE6FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#6554C0', "var(--ds-icon-accent-purple, #6554C0)"), (0, _defineProperty2.default)(_editorTextPalette, '#403294', "var(--ds-text-accent-purple, #403294)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFFFFF', "var(--ds-text-inverse, #FFFFFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#97A0AF', "var(--ds-icon-accent-gray, #97A0AF)"), (0, _defineProperty2.default)(_editorTextPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorTextPalette);
42
- exports.editorTextPalette = editorTextPalette;
40
+ var editorTextPalette = exports.editorTextPalette = (_editorTextPalette = {}, (0, _defineProperty2.default)(_editorTextPalette, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#4C9AFF', "var(--ds-icon-accent-blue, #4C9AFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#0747A6', "var(--ds-text-accent-blue, #0747A6)"), (0, _defineProperty2.default)(_editorTextPalette, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#00B8D9', "var(--ds-icon-accent-teal, #00B8D9)"), (0, _defineProperty2.default)(_editorTextPalette, '#008DA6', "var(--ds-text-accent-teal, #008DA6)"), (0, _defineProperty2.default)(_editorTextPalette, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorTextPalette, '#36B37E', "var(--ds-icon-accent-green, #36B37E)"), (0, _defineProperty2.default)(_editorTextPalette, '#006644', "var(--ds-text-accent-green, #006644)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF991F', "var(--ds-icon-accent-orange, #FF991F)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorTextPalette, '#FF5630', "var(--ds-icon-accent-red, #FF5630)"), (0, _defineProperty2.default)(_editorTextPalette, '#BF2600', "var(--ds-text-accent-red, #BF2600)"), (0, _defineProperty2.default)(_editorTextPalette, '#EAE6FF', "var(--ds-background-accent-purple-subtler, #EAE6FF)"), (0, _defineProperty2.default)(_editorTextPalette, '#6554C0', "var(--ds-icon-accent-purple, #6554C0)"), (0, _defineProperty2.default)(_editorTextPalette, '#403294', "var(--ds-text-accent-purple, #403294)"), (0, _defineProperty2.default)(_editorTextPalette, '#FFFFFF', "var(--ds-text-inverse, #FFFFFF)"), (0, _defineProperty2.default)(_editorTextPalette, '#97A0AF', "var(--ds-icon-accent-gray, #97A0AF)"), (0, _defineProperty2.default)(_editorTextPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorTextPalette);
@@ -1,5 +1,4 @@
1
1
  // This import will be stripped on build
2
- // eslint-disable-next-line import/no-extraneous-dependencies
3
2
  import { getTokenValue } from '@atlaskit/tokens';
4
3
 
5
4
  /**
@@ -51,6 +50,7 @@ export function hexToEditorBackgroundPaletteRawValue(hexColor) {
51
50
  }
52
51
  // Colors taken from
53
52
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
53
+
54
54
  /**
55
55
  * Values are asserted to improve generated type declarations
56
56
  * Using object structure as getValue() function needed for table values, and other
@@ -83,108 +83,91 @@ export const editorBackgroundPalette = {
83
83
  getValue: fallback => getTokenValue('color.background.accent.teal.subtlest', fallback),
84
84
  token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
85
85
  },
86
-
87
86
  /** teal - medium */
88
87
  ['#B3F5FF']: {
89
88
  getValue: fallback => getTokenValue('color.background.accent.teal.subtler', fallback),
90
89
  token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
91
90
  },
92
-
93
91
  /** teal - strong */
94
92
  ['#79E2F2']: {
95
93
  getValue: fallback => getTokenValue('color.background.accent.teal.subtle', fallback),
96
94
  token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
97
95
  },
98
-
99
96
  // green
100
97
  /** green - light */
101
98
  ['#E3FCEF']: {
102
99
  getValue: fallback => getTokenValue('color.background.accent.green.subtlest', fallback),
103
100
  token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
104
101
  },
105
-
106
102
  /** green - medium */
107
103
  ['#ABF5D1']: {
108
104
  getValue: fallback => getTokenValue('color.background.accent.green.subtler', fallback),
109
105
  token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
110
106
  },
111
-
112
107
  /** green - strong */
113
108
  ['#57D9A3']: {
114
109
  getValue: fallback => getTokenValue('color.background.accent.green.subtle', fallback),
115
110
  token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
116
111
  },
117
-
118
112
  // yellowOrange
119
113
  /** yellowOrange - light */
120
114
  ['#FFFAE6']: {
121
115
  getValue: fallback => getTokenValue('color.background.accent.yellow.subtlest', fallback),
122
116
  token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
123
117
  },
124
-
125
118
  /** yellowOrange - medium */
126
119
  ['#FFF0B3']: {
127
120
  getValue: fallback => getTokenValue('color.background.accent.yellow.subtler', fallback),
128
121
  token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
129
122
  },
130
-
131
123
  /** yellowOrange - strong */
132
124
  ['#FFC400']: {
133
125
  getValue: fallback => getTokenValue('color.background.accent.orange.subtle', fallback),
134
126
  token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
135
127
  },
136
-
137
128
  // red
138
129
  /** red - light */
139
130
  ['#FFEBE6']: {
140
131
  getValue: fallback => getTokenValue('color.background.accent.red.subtlest', fallback),
141
132
  token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
142
133
  },
143
-
144
134
  /** red - medium */
145
135
  ['#FFBDAD']: {
146
136
  getValue: fallback => getTokenValue('color.background.accent.red.subtler', fallback),
147
137
  token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
148
138
  },
149
-
150
139
  /** red - strong */
151
140
  ['#FF8F73']: {
152
141
  getValue: fallback => getTokenValue('color.background.accent.red.subtle', fallback),
153
142
  token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
154
143
  },
155
-
156
144
  // purple
157
145
  /** purple - light */
158
146
  ['#EAE6FF']: {
159
147
  getValue: fallback => getTokenValue('color.background.accent.purple.subtlest', fallback),
160
148
  token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
161
149
  },
162
-
163
150
  /** purple - medium */
164
151
  ['#C0B6F2']: {
165
152
  getValue: fallback => getTokenValue('color.background.accent.purple.subtler', fallback),
166
153
  token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
167
154
  },
168
-
169
155
  /** purple - strong */
170
156
  ['#998DD9']: {
171
157
  getValue: fallback => getTokenValue('color.background.accent.purple.subtle', fallback),
172
158
  token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
173
159
  },
174
-
175
160
  // whiteGray
176
161
  /** whiteGray - light */
177
162
  ['#FFFFFF']: {
178
163
  getValue: fallback => getTokenValue('elevation.surface', fallback),
179
164
  token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
180
165
  },
181
-
182
166
  /** whiteGray - medium */
183
167
  ['#F4F5F7']: {
184
168
  getValue: fallback => getTokenValue('color.background.accent.gray.subtlest', fallback),
185
169
  token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
186
170
  },
187
-
188
171
  /** whiteGray - strong */
189
172
  ['#B3BAC5']: {
190
173
  getValue: fallback => getTokenValue('color.background.accent.gray.subtle', fallback),
@@ -1,5 +1,4 @@
1
1
  // This import will be stripped on build
2
- // eslint-disable-next-line import/no-extraneous-dependencies
3
2
 
4
3
  /**
5
4
  * This takes an adf hex color and returns a matching border palette color.
@@ -1,5 +1,4 @@
1
1
  // This import will be stripped on build
2
- // eslint-disable-next-line import/no-extraneous-dependencies
3
2
  import { getTokenValue } from '@atlaskit/tokens';
4
3
 
5
4
  /**
@@ -52,6 +51,7 @@ export function hexToEditorTableChartsPaletteRawValue(hexColor) {
52
51
  // Colors taken from
53
52
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
54
53
  // values are asserted to improve generated type declarations
54
+
55
55
  /**
56
56
  * Tokenize hex codes into DST chart colors or
57
57
  * into DST background.accent colors.
@@ -1,5 +1,4 @@
1
1
  // This import will be stripped on build
2
- // eslint-disable-next-line import/no-extraneous-dependencies
3
2
 
4
3
  /**
5
4
  * This takes an adf hex color and returns a matching text palette color.
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  var _editorBackgroundPale;
3
3
  // This import will be stripped on build
4
- // eslint-disable-next-line import/no-extraneous-dependencies
5
4
  import { getTokenValue } from '@atlaskit/tokens';
6
5
 
7
6
  /**
@@ -53,6 +52,7 @@ export function hexToEditorBackgroundPaletteRawValue(hexColor) {
53
52
  }
54
53
  // Colors taken from
55
54
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
55
+
56
56
  /**
57
57
  * Values are asserted to improve generated type declarations
58
58
  * Using object structure as getValue() function needed for table values, and other
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  var _editorBorderPalette;
3
3
  // This import will be stripped on build
4
- // eslint-disable-next-line import/no-extraneous-dependencies
5
4
 
6
5
  /**
7
6
  * This takes an adf hex color and returns a matching border palette color.
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  var _editorTableChartsPal;
3
3
  // This import will be stripped on build
4
- // eslint-disable-next-line import/no-extraneous-dependencies
5
4
  import { getTokenValue } from '@atlaskit/tokens';
6
5
 
7
6
  /**
@@ -54,6 +53,7 @@ export function hexToEditorTableChartsPaletteRawValue(hexColor) {
54
53
  // Colors taken from
55
54
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
56
55
  // values are asserted to improve generated type declarations
56
+
57
57
  /**
58
58
  * Tokenize hex codes into DST chart colors or
59
59
  * into DST background.accent colors.
package/dist/esm/text.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  var _editorTextPalette;
3
3
  // This import will be stripped on build
4
- // eslint-disable-next-line import/no-extraneous-dependencies
5
4
 
6
5
  /**
7
6
  * This takes an adf hex color and returns a matching text palette color.
package/docs/0-intro.tsx CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
 
3
3
  import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
4
4
  import SectionMessage from '@atlaskit/section-message';
5
+ import { token } from '@atlaskit/tokens';
5
6
 
6
7
  export default md`
7
8
  ${(<AtlassianInternalWarning />)}
@@ -36,7 +37,7 @@ or reach out to the Design System Team via the [Atlassian Developer Community fo
36
37
  ## API documentation
37
38
 
38
39
  ${(
39
- <div style={{ marginTop: '0.5rem' }}>
40
+ <div style={{ marginTop: token('space.100', '8px') }}>
40
41
  <SectionMessage
41
42
  title="Design token names and values are an implementation detail."
42
43
  appearance="warning"
@@ -92,4 +93,18 @@ ${code`
92
93
  <div style={{backgroundColor: cssValue}} />
93
94
  `}
94
95
 
96
+ ### \`hexToEditorBorderPaletteColor\`
97
+
98
+ This takes an adf hex color and returns a matching border palette color.
99
+
100
+ By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
101
+
102
+ #### Example usage
103
+
104
+ ${code`
105
+ const cssValue = hexToEditorBorderPaletteColor('#091E4224');
106
+ // ^? const cssValue: string
107
+ <div style={{border-color: cssValue}} />
108
+ `}
109
+
95
110
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.5.1",
3
+ "version": "1.5.3",
4
4
  "description": "The editor palette",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -8,14 +8,15 @@
8
8
  "registry": "https://registry.npmjs.org/"
9
9
  },
10
10
  "atlassian": {
11
- "team": "Editor",
11
+ "team": "Editor: Lego",
12
12
  "releaseModel": "continuous",
13
13
  "inPublicMirror": true,
14
14
  "website": {
15
15
  "name": "Editor Palette"
16
- }
16
+ },
17
+ "runReact18": false
17
18
  },
18
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
19
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
19
20
  "main": "dist/cjs/index.js",
20
21
  "module": "dist/esm/index.js",
21
22
  "module:es2019": "dist/es2019/index.js",
@@ -34,18 +35,15 @@
34
35
  ".": "./src/index.ts"
35
36
  },
36
37
  "dependencies": {
37
- "@atlaskit/tokens": "^1.9.0",
38
+ "@atlaskit/tokens": "^1.42.0",
38
39
  "@babel/runtime": "^7.0.0"
39
40
  },
40
41
  "devDependencies": {
41
- "@atlaskit/docs": "*",
42
- "@atlaskit/section-message": "^6.4.0",
43
- "@atlaskit/tokens": "^1.9.0",
44
42
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
45
43
  "@testing-library/react": "^12.1.5",
46
44
  "react": "^16.8.0",
47
45
  "react-dom": "^16.8.0",
48
- "typescript": "~4.9.5",
46
+ "typescript": "~5.4.2",
49
47
  "wait-for-expect": "^1.2.0"
50
48
  },
51
49
  "techstack": {
@@ -58,13 +56,14 @@
58
56
  ]
59
57
  },
60
58
  "@repo/internal": {
61
- "deprecation": [
62
- "no-deprecated-imports"
63
- ],
59
+ "deprecation": "no-deprecated-imports",
64
60
  "design-tokens": [
65
61
  "color"
62
+ ],
63
+ "styling": [
64
+ "emotion"
66
65
  ]
67
66
  }
68
67
  },
69
68
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
70
- }
69
+ }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/editor-palette",
3
- "version": "1.5.1",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/editor-palette",
3
- "version": "1.5.1",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/editor-palette",
3
- "version": "1.5.1",
4
- "sideEffects": false
5
- }
@@ -1,319 +0,0 @@
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
11
- const editorBackgroundPalette: {
12
- "#DEEBFF": {
13
- getValue: (fallback: string) => string;
14
- token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
15
- };
16
- "#B3D4FF": {
17
- getValue: (fallback: string) => string;
18
- token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
19
- };
20
- "#4C9AFF": {
21
- getValue: (fallback: string) => string;
22
- token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
23
- };
24
- "#E6FCFF": {
25
- getValue: (fallback: string) => string;
26
- token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
27
- };
28
- "#B3F5FF": {
29
- getValue: (fallback: string) => string;
30
- token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
31
- };
32
- "#79E2F2": {
33
- getValue: (fallback: string) => string;
34
- token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
35
- };
36
- "#E3FCEF": {
37
- getValue: (fallback: string) => string;
38
- token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
39
- };
40
- "#ABF5D1": {
41
- getValue: (fallback: string) => string;
42
- token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
43
- };
44
- "#57D9A3": {
45
- getValue: (fallback: string) => string;
46
- token: "var(--ds-background-accent-green-subtle, #57D9A3)";
47
- };
48
- "#FFFAE6": {
49
- getValue: (fallback: string) => string;
50
- token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
51
- };
52
- "#FFF0B3": {
53
- getValue: (fallback: string) => string;
54
- token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
55
- };
56
- "#FFC400": {
57
- getValue: (fallback: string) => string;
58
- token: "var(--ds-background-accent-orange-subtle, #FFC400)";
59
- };
60
- "#FFEBE6": {
61
- getValue: (fallback: string) => string;
62
- token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
63
- };
64
- "#FFBDAD": {
65
- getValue: (fallback: string) => string;
66
- token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
67
- };
68
- "#FF8F73": {
69
- getValue: (fallback: string) => string;
70
- token: "var(--ds-background-accent-red-subtle, #FF8F73)";
71
- };
72
- "#EAE6FF": {
73
- getValue: (fallback: string) => string;
74
- token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
75
- };
76
- "#C0B6F2": {
77
- getValue: (fallback: string) => string;
78
- token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
79
- };
80
- "#998DD9": {
81
- getValue: (fallback: string) => string;
82
- token: "var(--ds-background-accent-purple-subtle, #998DD9)";
83
- };
84
- "#FFFFFF": {
85
- getValue: (fallback: string) => string;
86
- token: "var(--ds-surface, #FFFFFF)";
87
- };
88
- "#F4F5F7": {
89
- getValue: (fallback: string) => string;
90
- token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
91
- };
92
- "#B3BAC5": {
93
- getValue: (fallback: string) => string;
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 EditorBorderPalette = typeof editorBorderPalette;
103
-
104
- // @public (undocumented)
105
- const editorBorderPalette: {
106
- "#091E4224": "var(--ds-border, #091E4224)";
107
- "#758195": "var(--ds-border-bold, #758195)";
108
- "#172B4D": "var(--ds-text, #172B4D)";
109
- };
110
-
111
- // @public (undocumented)
112
- type EditorBorderPaletteKey = keyof EditorBorderPalette;
113
-
114
- // @public (undocumented)
115
- type EditorTableChartsPalette = typeof editorTableChartsPalette;
116
-
117
- // @public
118
- const editorTableChartsPalette: {
119
- "#7AB2FF": {
120
- getValue: (fallback: string) => string;
121
- token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
122
- };
123
- "#60C6D2": {
124
- getValue: (fallback: string) => string;
125
- token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
126
- };
127
- "#6BE1B0": {
128
- getValue: (fallback: string) => string;
129
- token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
130
- };
131
- "#FFDB57": {
132
- getValue: (fallback: string) => string;
133
- token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
134
- };
135
- "#FAA53D": {
136
- getValue: (fallback: string) => string;
137
- token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
138
- };
139
- "#FF8F73": {
140
- getValue: (fallback: string) => string;
141
- token: "var(--ds-background-accent-red-subtle, #FF8F73)";
142
- };
143
- "#E774BB": {
144
- getValue: (fallback: string) => string;
145
- token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
146
- };
147
- "#B5A7FB": {
148
- getValue: (fallback: string) => string;
149
- token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
150
- };
151
- "#8993A5": {
152
- getValue: (fallback: string) => string;
153
- token: "var(--ds-background-accent-gray-subtler, #8993A5)";
154
- };
155
- "#247FFF": {
156
- getValue: (fallback: string) => string;
157
- token: "var(--ds-chart-blue-bold, #247FFF)";
158
- };
159
- "#1D9AAA": {
160
- getValue: (fallback: string) => string;
161
- token: "var(--ds-chart-teal-bold, #1D9AAA)";
162
- };
163
- "#23A971": {
164
- getValue: (fallback: string) => string;
165
- token: "var(--ds-chart-green-bold, #23A971)";
166
- };
167
- "#FFBE33": {
168
- getValue: (fallback: string) => string;
169
- token: "var(--ds-chart-yellow-bold, #FFBE33)";
170
- };
171
- "#D97008": {
172
- getValue: (fallback: string) => string;
173
- token: "var(--ds-chart-orange-bold, #D97008)";
174
- };
175
- "#FC552C": {
176
- getValue: (fallback: string) => string;
177
- token: "var(--ds-chart-red-bold, #FC552C)";
178
- };
179
- "#DA62AC": {
180
- getValue: (fallback: string) => string;
181
- token: "var(--ds-chart-magenta-bold, #DA62AC)";
182
- };
183
- "#8B77EE": {
184
- getValue: (fallback: string) => string;
185
- token: "var(--ds-chart-purple-bold, #8B77EE)";
186
- };
187
- "#8590A2": {
188
- getValue: (fallback: string) => string;
189
- token: "var(--ds-chart-gray-bold, #8590A2)";
190
- };
191
- "#0055CC": {
192
- getValue: (fallback: string) => string;
193
- token: "var(--ds-chart-blue-bolder, #0055CC)";
194
- };
195
- "#1D7F8C": {
196
- getValue: (fallback: string) => string;
197
- token: "var(--ds-chart-teal-bolder, #1D7F8C)";
198
- };
199
- "#177D52": {
200
- getValue: (fallback: string) => string;
201
- token: "var(--ds-chart-green-bolder, #177D52)";
202
- };
203
- "#FF9D00": {
204
- getValue: (fallback: string) => string;
205
- token: "var(--ds-chart-yellow-bolder, #FF9D00)";
206
- };
207
- "#B65C02": {
208
- getValue: (fallback: string) => string;
209
- token: "var(--ds-chart-orange-bolder, #B65C02)";
210
- };
211
- "#D32D03": {
212
- getValue: (fallback: string) => string;
213
- token: "var(--ds-chart-red-bolder, #D32D03)";
214
- };
215
- "#CD519D": {
216
- getValue: (fallback: string) => string;
217
- token: "var(--ds-chart-magenta-bolder, #CD519D)";
218
- };
219
- "#5A43D0": {
220
- getValue: (fallback: string) => string;
221
- token: "var(--ds-chart-purple-bolder, #5A43D0)";
222
- };
223
- "#758195": {
224
- getValue: (fallback: string) => string;
225
- token: "var(--ds-chart-gray-bolder, #758195)";
226
- };
227
- "#003884": {
228
- getValue: (fallback: string) => string;
229
- token: "var(--ds-chart-blue-boldest, #003884)";
230
- };
231
- "#206B74": {
232
- getValue: (fallback: string) => string;
233
- token: "var(--ds-chart-teal-boldest, #206B74)";
234
- };
235
- "#055C3F": {
236
- getValue: (fallback: string) => string;
237
- token: "var(--ds-chart-green-boldest, #055C3F)";
238
- };
239
- "#946104": {
240
- getValue: (fallback: string) => string;
241
- token: "var(--ds-chart-yellow-boldest, #946104)";
242
- };
243
- "#974F0C": {
244
- getValue: (fallback: string) => string;
245
- token: "var(--ds-chart-orange-boldest, #974F0C)";
246
- };
247
- "#A32000": {
248
- getValue: (fallback: string) => string;
249
- token: "var(--ds-chart-red-boldest, #A32000)";
250
- };
251
- "#943D73": {
252
- getValue: (fallback: string) => string;
253
- token: "var(--ds-chart-magenta-boldest, #943D73)";
254
- };
255
- "#44368B": {
256
- getValue: (fallback: string) => string;
257
- token: "var(--ds-chart-purple-boldest, #44368B)";
258
- };
259
- "#44546F": {
260
- getValue: (fallback: string) => string;
261
- token: "var(--ds-chart-gray-boldest, #44546F)";
262
- };
263
- };
264
-
265
- // @public (undocumented)
266
- type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
267
-
268
- // @public (undocumented)
269
- type EditorTextPalette = typeof editorTextPalette;
270
-
271
- // @public (undocumented)
272
- const editorTextPalette: {
273
- "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
274
- "#4C9AFF": "var(--ds-icon-accent-blue, #4C9AFF)";
275
- "#0747A6": "var(--ds-text-accent-blue, #0747A6)";
276
- "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
277
- "#00B8D9": "var(--ds-icon-accent-teal, #00B8D9)";
278
- "#008DA6": "var(--ds-text-accent-teal, #008DA6)";
279
- "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
280
- "#36B37E": "var(--ds-icon-accent-green, #36B37E)";
281
- "#006644": "var(--ds-text-accent-green, #006644)";
282
- "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
283
- "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
284
- "#FF991F": "var(--ds-icon-accent-orange, #FF991F)";
285
- "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
286
- "#FF5630": "var(--ds-icon-accent-red, #FF5630)";
287
- "#BF2600": "var(--ds-text-accent-red, #BF2600)";
288
- "#EAE6FF": "var(--ds-background-accent-purple-subtler, #EAE6FF)";
289
- "#6554C0": "var(--ds-icon-accent-purple, #6554C0)";
290
- "#403294": "var(--ds-text-accent-purple, #403294)";
291
- "#FFFFFF": "var(--ds-text-inverse, #FFFFFF)";
292
- "#97A0AF": "var(--ds-icon-accent-gray, #97A0AF)";
293
- "#172B4D": "var(--ds-text, #172B4D)";
294
- };
295
-
296
- // @public (undocumented)
297
- type EditorTextPaletteKey = keyof EditorTextPalette;
298
-
299
- // @public
300
- export function hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['token'] : string | undefined;
301
-
302
- // @public
303
- export function hexToEditorBackgroundPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? string : undefined;
304
-
305
- // @public
306
- export function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
307
-
308
- // @public
309
- export function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
310
-
311
- // @public
312
- export function hexToEditorTableChartsPaletteRawValue<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? string : undefined;
313
-
314
- // @public
315
- export function hexToEditorTextPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTextPaletteKey ? EditorTextPalette[HexColor] : string | undefined;
316
-
317
- // (No @packageDocumentation comment for this package)
318
-
319
- ```