@atlaskit/editor-shared-styles 3.5.2 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/afm-dev-agents/tsconfig.json +36 -0
  3. package/dist/cjs/consts/consts.js +36 -18
  4. package/dist/es2019/consts/consts.js +36 -18
  5. package/dist/esm/consts/consts.js +36 -18
  6. package/dist/types/consts/types.d.ts +1 -0
  7. package/dist/types-ts4.5/consts/types.d.ts +1 -0
  8. package/package.json +3 -6
  9. package/src/consts/consts.ts +18 -0
  10. package/src/consts/types.ts +1 -0
  11. package/src/utils.test.ts +6 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-shared-styles
2
2
 
3
+ ## 3.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#197477](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197477)
8
+ [`48c9b1edbf876`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48c9b1edbf876) -
9
+ Include additional color mappings for SVG backgrounds
10
+
11
+ ## 3.5.3
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 3.5.2
4
18
 
5
19
  ### Patch Changes
package/afm-dev-agents/tsconfig.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.dev-agents.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../dev-agents/tsDist/@atlaskit__editor-shared-styles/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*",
18
+ "../src/**/examples.*",
19
+ "../src/**/examples/*",
20
+ "../src/**/examples/**/*",
21
+ "../src/**/*.stories.*",
22
+ "../src/**/stories/*",
23
+ "../src/**/stories/**/*"
24
+ ],
25
+ "references": [
26
+ {
27
+ "path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
31
+ },
32
+ {
33
+ "path": "../../../design-system/tokens/afm-dev-agents/tsconfig.json"
34
+ }
35
+ ]
36
+ }
package/dist/cjs/consts/consts.js CHANGED
@@ -185,56 +185,74 @@ var avatarColors = exports.avatarColors = ["var(--ds-icon-accent-red, #C9372C)",
185
185
  // MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
186
186
  var participantColors = exports.participantColors = [{
187
187
  textColor: "var(--ds-text-inverse, #FFFFFF)",
188
- backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
188
+ backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
189
+ svgBackgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
189
190
  }, {
190
191
  textColor: "var(--ds-text-inverse, #FFFFFF)",
191
- backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
192
+ backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
193
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)"
192
194
  }, {
193
195
  textColor: "var(--ds-text-inverse, #FFFFFF)",
194
- backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
196
+ backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
197
+ svgBackgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)"
195
198
  }, {
196
199
  textColor: "var(--ds-text-inverse, #FFFFFF)",
197
- backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
200
+ backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
201
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)"
198
202
  }, {
199
203
  textColor: "var(--ds-text-inverse, #FFFFFF)",
200
- backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
204
+ backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
205
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)"
201
206
  }, {
202
207
  textColor: "var(--ds-text-inverse, #FFFFFF)",
203
- backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
208
+ backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
209
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
204
210
  }, {
205
211
  textColor: "var(--ds-text-inverse, #FFFFFF)",
206
- backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
212
+ backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
213
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)"
207
214
  }, {
208
215
  textColor: "var(--ds-text-inverse, #FFFFFF)",
209
- backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
216
+ backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
217
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)"
210
218
  }, {
211
219
  textColor: "var(--ds-text-inverse, #FFFFFF)",
212
- backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
220
+ backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
221
+ svgBackgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
213
222
  }, {
214
223
  textColor: "var(--ds-text-inverse, #FFFFFF)",
215
- backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
224
+ backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
225
+ svgBackgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
216
226
  }, {
217
227
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
218
- backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
228
+ backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)",
229
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
219
230
  }, {
220
231
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
221
- backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
232
+ backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)",
233
+ svgBackgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)"
222
234
  }, {
223
235
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
224
- backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
236
+ backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)",
237
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtlest, #FFF3EB)"
225
238
  }, {
226
239
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
227
- backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
240
+ backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)",
241
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)"
228
242
  }, {
229
243
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
230
- backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
244
+ backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)",
245
+ svgBackgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)"
231
246
  }, {
232
247
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
233
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
248
+ backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)",
249
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)"
234
250
  }, {
235
251
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
236
- backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
252
+ backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)",
253
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
237
254
  }, {
238
255
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
239
- backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
256
+ backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)",
257
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtlest, #FFECF8)"
240
258
  }];
package/dist/es2019/consts/consts.js CHANGED
@@ -167,56 +167,74 @@ export const avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-bac
167
167
  // MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
168
168
  export const participantColors = [{
169
169
  textColor: "var(--ds-text-inverse, #FFFFFF)",
170
- backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
170
+ backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
171
+ svgBackgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
171
172
  }, {
172
173
  textColor: "var(--ds-text-inverse, #FFFFFF)",
173
- backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
174
+ backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
175
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)"
174
176
  }, {
175
177
  textColor: "var(--ds-text-inverse, #FFFFFF)",
176
- backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
178
+ backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
179
+ svgBackgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)"
177
180
  }, {
178
181
  textColor: "var(--ds-text-inverse, #FFFFFF)",
179
- backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
182
+ backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
183
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)"
180
184
  }, {
181
185
  textColor: "var(--ds-text-inverse, #FFFFFF)",
182
- backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
186
+ backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
187
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)"
183
188
  }, {
184
189
  textColor: "var(--ds-text-inverse, #FFFFFF)",
185
- backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
190
+ backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
191
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
186
192
  }, {
187
193
  textColor: "var(--ds-text-inverse, #FFFFFF)",
188
- backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
194
+ backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
195
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)"
189
196
  }, {
190
197
  textColor: "var(--ds-text-inverse, #FFFFFF)",
191
- backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
198
+ backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
199
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)"
192
200
  }, {
193
201
  textColor: "var(--ds-text-inverse, #FFFFFF)",
194
- backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
202
+ backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
203
+ svgBackgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
195
204
  }, {
196
205
  textColor: "var(--ds-text-inverse, #FFFFFF)",
197
- backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
206
+ backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
207
+ svgBackgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
198
208
  }, {
199
209
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
200
- backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
210
+ backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)",
211
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
201
212
  }, {
202
213
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
203
- backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
214
+ backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)",
215
+ svgBackgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)"
204
216
  }, {
205
217
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
206
- backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
218
+ backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)",
219
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtlest, #FFF3EB)"
207
220
  }, {
208
221
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
209
- backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
222
+ backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)",
223
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)"
210
224
  }, {
211
225
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
212
- backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
226
+ backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)",
227
+ svgBackgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)"
213
228
  }, {
214
229
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
215
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
230
+ backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)",
231
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)"
216
232
  }, {
217
233
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
218
- backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
234
+ backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)",
235
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
219
236
  }, {
220
237
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
221
- backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
238
+ backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)",
239
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtlest, #FFECF8)"
222
240
  }];
package/dist/esm/consts/consts.js CHANGED
@@ -176,56 +176,74 @@ export var avatarColors = ["var(--ds-icon-accent-red, #C9372C)", "var(--ds-backg
176
176
  // MDS-569: Will update references to avatarColors to use participantColors instead, we will then deprecate avatarColors
177
177
  export var participantColors = [{
178
178
  textColor: "var(--ds-text-inverse, #FFFFFF)",
179
- backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)"
179
+ backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
180
+ svgBackgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
180
181
  }, {
181
182
  textColor: "var(--ds-text-inverse, #FFFFFF)",
182
- backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)"
183
+ backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
184
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)"
183
185
  }, {
184
186
  textColor: "var(--ds-text-inverse, #FFFFFF)",
185
- backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)"
187
+ backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
188
+ svgBackgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)"
186
189
  }, {
187
190
  textColor: "var(--ds-text-inverse, #FFFFFF)",
188
- backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)"
191
+ backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
192
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)"
189
193
  }, {
190
194
  textColor: "var(--ds-text-inverse, #FFFFFF)",
191
- backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)"
195
+ backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
196
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)"
192
197
  }, {
193
198
  textColor: "var(--ds-text-inverse, #FFFFFF)",
194
- backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)"
199
+ backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
200
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
195
201
  }, {
196
202
  textColor: "var(--ds-text-inverse, #FFFFFF)",
197
- backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)"
203
+ backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
204
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)"
198
205
  }, {
199
206
  textColor: "var(--ds-text-inverse, #FFFFFF)",
200
- backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)"
207
+ backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
208
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)"
201
209
  }, {
202
210
  textColor: "var(--ds-text-inverse, #FFFFFF)",
203
- backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)"
211
+ backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
212
+ svgBackgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)"
204
213
  }, {
205
214
  textColor: "var(--ds-text-inverse, #FFFFFF)",
206
- backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)"
215
+ backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
216
+ svgBackgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)"
207
217
  }, {
208
218
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
209
- backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)"
219
+ backgroundColor: "var(--ds-background-accent-blue-subtle, #579DFF)",
220
+ svgBackgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
210
221
  }, {
211
222
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
212
- backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)"
223
+ backgroundColor: "var(--ds-background-accent-red-subtle, #F87168)",
224
+ svgBackgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)"
213
225
  }, {
214
226
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
215
- backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)"
227
+ backgroundColor: "var(--ds-background-accent-orange-subtle, #FEA362)",
228
+ svgBackgroundColor: "var(--ds-background-accent-orange-subtlest, #FFF3EB)"
216
229
  }, {
217
230
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
218
- backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)"
231
+ backgroundColor: "var(--ds-background-accent-yellow-subtle, #F5CD47)",
232
+ svgBackgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)"
219
233
  }, {
220
234
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
221
- backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)"
235
+ backgroundColor: "var(--ds-background-accent-green-subtle, #4BCE97)",
236
+ svgBackgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)"
222
237
  }, {
223
238
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
224
- backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
239
+ backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)",
240
+ svgBackgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)"
225
241
  }, {
226
242
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
227
- backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)"
243
+ backgroundColor: "var(--ds-background-accent-purple-subtle, #9F8FEF)",
244
+ svgBackgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
228
245
  }, {
229
246
  textColor: "var(--ds-text-accent-gray-bolder, #091E42)",
230
- backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
247
+ backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)",
248
+ svgBackgroundColor: "var(--ds-background-accent-magenta-subtlest, #FFECF8)"
231
249
  }];
package/dist/types/consts/types.d.ts CHANGED
@@ -4,4 +4,5 @@ export type EditorTheme = {
4
4
  export type ParticipantColor = {
5
5
  textColor: string;
6
6
  backgroundColor: string;
7
+ svgBackgroundColor: string;
7
8
  };
package/dist/types-ts4.5/consts/types.d.ts CHANGED
@@ -4,4 +4,5 @@ export type EditorTheme = {
4
4
  export type ParticipantColor = {
5
5
  textColor: string;
6
6
  backgroundColor: string;
7
+ svgBackgroundColor: string;
7
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-shared-styles",
3
- "version": "3.5.2",
3
+ "version": "3.6.0",
4
4
  "description": "Style values used in the editor/renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,14 +41,11 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
- "@atlaskit/tmp-editor-statsig": "^9.20.0",
45
- "@atlaskit/tokens": "^5.6.0",
44
+ "@atlaskit/tmp-editor-statsig": "^9.25.0",
45
+ "@atlaskit/tokens": "^6.0.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
49
- "devDependencies": {
50
- "typescript": "~5.4.2"
51
- },
52
49
  "techstack": {
53
50
  "@atlassian/frontend": {
54
51
  "circular-dependencies": [
package/src/consts/consts.ts CHANGED
@@ -220,73 +220,91 @@ export const participantColors: Array<ParticipantColor> = [
220
220
  {
221
221
  textColor: token('color.text.inverse'),
222
222
  backgroundColor: token('color.background.accent.red.bolder'),
223
+ svgBackgroundColor: token('color.background.accent.red.subtler'),
223
224
  },
224
225
  {
225
226
  textColor: token('color.text.inverse'),
226
227
  backgroundColor: token('color.background.accent.blue.bolder'),
228
+ svgBackgroundColor: token('color.background.accent.blue.subtler'),
227
229
  },
228
230
  {
229
231
  textColor: token('color.text.inverse'),
230
232
  backgroundColor: token('color.background.accent.green.bolder'),
233
+ svgBackgroundColor: token('color.background.accent.green.subtler'),
231
234
  },
232
235
  {
233
236
  textColor: token('color.text.inverse'),
234
237
  backgroundColor: token('color.background.accent.yellow.bolder'),
238
+ svgBackgroundColor: token('color.background.accent.yellow.subtler'),
235
239
  },
236
240
  {
237
241
  textColor: token('color.text.inverse'),
238
242
  backgroundColor: token('color.background.accent.purple.bolder'),
243
+ svgBackgroundColor: token('color.background.accent.purple.subtler'),
239
244
  },
240
245
  {
241
246
  textColor: token('color.text.inverse'),
242
247
  backgroundColor: token('color.background.accent.magenta.bolder'),
248
+ svgBackgroundColor: token('color.background.accent.magenta.subtler'),
243
249
  },
244
250
  {
245
251
  textColor: token('color.text.inverse'),
246
252
  backgroundColor: token('color.background.accent.teal.bolder'),
253
+ svgBackgroundColor: token('color.background.accent.teal.subtler'),
247
254
  },
248
255
  {
249
256
  textColor: token('color.text.inverse'),
250
257
  backgroundColor: token('color.background.accent.orange.bolder'),
258
+ svgBackgroundColor: token('color.background.accent.orange.subtler'),
251
259
  },
252
260
  {
253
261
  textColor: token('color.text.inverse'),
254
262
  backgroundColor: token('color.background.accent.lime.bolder'),
263
+ svgBackgroundColor: token('color.background.accent.lime.subtler'),
255
264
  },
256
265
  {
257
266
  textColor: token('color.text.inverse'),
258
267
  backgroundColor: token('color.background.accent.gray.bolder'),
268
+ svgBackgroundColor: token('color.background.accent.gray.subtler'),
259
269
  },
260
270
  {
261
271
  textColor: token('color.text.accent.gray.bolder'),
262
272
  backgroundColor: token('color.background.accent.blue.subtle'),
273
+ svgBackgroundColor: token('color.background.accent.blue.subtlest'),
263
274
  },
264
275
  {
265
276
  textColor: token('color.text.accent.gray.bolder'),
266
277
  backgroundColor: token('color.background.accent.red.subtle'),
278
+ svgBackgroundColor: token('color.background.accent.red.subtlest'),
267
279
  },
268
280
  {
269
281
  textColor: token('color.text.accent.gray.bolder'),
270
282
  backgroundColor: token('color.background.accent.orange.subtle'),
283
+ svgBackgroundColor: token('color.background.accent.orange.subtlest'),
271
284
  },
272
285
  {
273
286
  textColor: token('color.text.accent.gray.bolder'),
274
287
  backgroundColor: token('color.background.accent.yellow.subtle'),
288
+ svgBackgroundColor: token('color.background.accent.yellow.subtlest'),
275
289
  },
276
290
  {
277
291
  textColor: token('color.text.accent.gray.bolder'),
278
292
  backgroundColor: token('color.background.accent.green.subtle'),
293
+ svgBackgroundColor: token('color.background.accent.green.subtlest'),
279
294
  },
280
295
  {
281
296
  textColor: token('color.text.accent.gray.bolder'),
282
297
  backgroundColor: token('color.background.accent.teal.subtle'),
298
+ svgBackgroundColor: token('color.background.accent.teal.subtlest'),
283
299
  },
284
300
  {
285
301
  textColor: token('color.text.accent.gray.bolder'),
286
302
  backgroundColor: token('color.background.accent.purple.subtle'),
303
+ svgBackgroundColor: token('color.background.accent.purple.subtlest'),
287
304
  },
288
305
  {
289
306
  textColor: token('color.text.accent.gray.bolder'),
290
307
  backgroundColor: token('color.background.accent.magenta.subtle'),
308
+ svgBackgroundColor: token('color.background.accent.magenta.subtlest'),
291
309
  },
292
310
  ];
package/src/consts/types.ts CHANGED
@@ -5,4 +5,5 @@ export type EditorTheme = {
5
5
  export type ParticipantColor = {
6
6
  textColor: string;
7
7
  backgroundColor: string;
8
+ svgBackgroundColor: string;
8
9
  };
package/src/utils.test.ts CHANGED
@@ -20,6 +20,7 @@ describe('utils', () => {
20
20
  index: 2,
21
21
  color: {
22
22
  backgroundColor: token('color.background.accent.green.bolder'),
23
+ svgBackgroundColor: token('color.background.accent.green.subtler'),
23
24
  textColor: token('color.text.inverse'),
24
25
  },
25
26
  });
@@ -27,6 +28,7 @@ describe('utils', () => {
27
28
  index: 15,
28
29
  color: {
29
30
  backgroundColor: token('color.background.accent.teal.subtle'),
31
+ svgBackgroundColor: token('color.background.accent.teal.subtlest'),
30
32
  textColor: token('color.text.accent.gray.bolder'),
31
33
  },
32
34
  });
@@ -34,6 +36,7 @@ describe('utils', () => {
34
36
  index: 12,
35
37
  color: {
36
38
  backgroundColor: token('color.background.accent.orange.subtle'),
39
+ svgBackgroundColor: token('color.background.accent.orange.subtlest'),
37
40
  textColor: token('color.text.accent.gray.bolder'),
38
41
  },
39
42
  });
@@ -41,6 +44,7 @@ describe('utils', () => {
41
44
  index: 12,
42
45
  color: {
43
46
  backgroundColor: token('color.background.accent.orange.subtle'),
47
+ svgBackgroundColor: token('color.background.accent.orange.subtlest'),
44
48
  textColor: token('color.text.accent.gray.bolder'),
45
49
  },
46
50
  });
@@ -48,6 +52,7 @@ describe('utils', () => {
48
52
  index: 16,
49
53
  color: {
50
54
  backgroundColor: token('color.background.accent.purple.subtle'),
55
+ svgBackgroundColor: token('color.background.accent.purple.subtlest'),
51
56
  textColor: token('color.text.accent.gray.bolder'),
52
57
  },
53
58
  });
@@ -55,6 +60,7 @@ describe('utils', () => {
55
60
  index: 3,
56
61
  color: {
57
62
  backgroundColor: token('color.background.accent.yellow.bolder'),
63
+ svgBackgroundColor: token('color.background.accent.yellow.subtler'),
58
64
  textColor: token('color.text.inverse'),
59
65
  },
60
66
  });