@atlaskit/editor-palette 0.1.0 → 1.1.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 (22) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/background.js +83 -8
  3. package/dist/cjs/index.js +8 -9
  4. package/dist/cjs/table-charts.js +52 -0
  5. package/dist/cjs/text.js +1 -5
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/background.js +107 -50
  8. package/dist/es2019/index.js +3 -2
  9. package/dist/es2019/table-charts.js +80 -0
  10. package/dist/es2019/text.js +7 -22
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/background.js +81 -4
  13. package/dist/esm/index.js +3 -2
  14. package/dist/esm/table-charts.js +45 -0
  15. package/dist/esm/text.js +1 -2
  16. package/dist/esm/version.json +1 -1
  17. package/dist/types/background.d.ts +88 -22
  18. package/dist/types/index.d.ts +3 -2
  19. package/dist/types/table-charts.d.ts +71 -0
  20. package/docs/0-intro.tsx +95 -0
  21. package/package.json +7 -3
  22. package/report.api.md +189 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "0.1.0",
3
+ "version": "1.1.0",
4
4
  "description": "The editor palette",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,12 +29,14 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@atlaskit/docs": "*",
32
+ "@atlaskit/section-message": "^6.3.7",
32
33
  "@atlaskit/ssr": "*",
33
- "@atlaskit/tokens": "^0.11.1",
34
+ "@atlaskit/tokens": "^1.2.0",
34
35
  "@atlaskit/visual-regression": "*",
35
36
  "@atlaskit/webdriver-runner": "*",
36
37
  "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
37
38
  "@testing-library/react": "^12.1.5",
39
+ "react": "^16.8.0",
38
40
  "react-dom": "^16.8.0",
39
41
  "typescript": "4.5.5",
40
42
  "wait-for-expect": "^1.2.0"
@@ -52,7 +54,9 @@
52
54
  "deprecation": [
53
55
  "no-deprecated-imports"
54
56
  ],
55
- "theming": "tokens"
57
+ "design-tokens": [
58
+ "color"
59
+ ]
56
60
  }
57
61
  },
58
62
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/editor-palette"
4
4
 
@@ -8,6 +8,7 @@
8
8
  ### Table of contents
9
9
 
10
10
  - [Main Entry Types](#main-entry-types)
11
+ - [Peer Dependencies](#peer-dependencies)
11
12
 
12
13
  ### Main Entry Types
13
14
 
@@ -18,38 +19,150 @@
18
19
  type EditorBackgroundPalette = typeof editorBackgroundPalette;
19
20
 
20
21
  // @public (undocumented)
21
- export const editorBackgroundPalette: {
22
- '#DEEBFF': 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
23
- '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
24
- '#4C9AFF': 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
25
- '#E6FCFF': 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
26
- '#B3F5FF': 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
27
- '#79E2F2': 'var(--ds-background-accent-teal-subtle, #79E2F2)';
28
- '#E3FCEF': 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
29
- '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)';
30
- '#57D9A3': 'var(--ds-background-accent-green-subtle, #57D9A3)';
31
- '#FFFAE6': 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
32
- '#FFF0B3': 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
33
- '#FFC400': 'var(--ds-background-accent-orange-subtle, #FFC400)';
34
- '#FFEBE6': 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
35
- '#FFBDAD': 'var(--ds-background-accent-red-subtler, #FFBDAD)';
36
- '#FF8F73': 'var(--ds-background-accent-red-subtle, #FF8F73)';
37
- '#EAE6FF': 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
38
- '#C0B6F2': 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
39
- '#998DD9': 'var(--ds-background-accent-purple-subtle, #998DD9)';
40
- '#FFFFFF': 'var(--ds-surface, #FFFFFF)';
41
- '#F4F5F7': 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
42
- '#B3BAC5': 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
22
+ const editorBackgroundPalette: {
23
+ '#DEEBFF': {
24
+ tokenName: 'color.background.accent.blue.subtlest';
25
+ token: 'var(--ds-background-accent-blue-subtlest, #DEEBFF)';
26
+ };
27
+ '#B3D4FF': {
28
+ tokenName: 'color.background.accent.blue.subtler';
29
+ token: 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
30
+ };
31
+ '#4C9AFF': {
32
+ tokenName: 'color.background.accent.blue.subtle';
33
+ token: 'var(--ds-background-accent-blue-subtle, #4C9AFF)';
34
+ };
35
+ '#E6FCFF': {
36
+ tokenName: 'color.background.accent.teal.subtlest';
37
+ token: 'var(--ds-background-accent-teal-subtlest, #E6FCFF)';
38
+ };
39
+ '#B3F5FF': {
40
+ tokenName: 'color.background.accent.teal.subtler';
41
+ token: 'var(--ds-background-accent-teal-subtler, #B3F5FF)';
42
+ };
43
+ '#79E2F2': {
44
+ tokenName: 'color.background.accent.teal.subtle';
45
+ token: 'var(--ds-background-accent-teal-subtle, #79E2F2)';
46
+ };
47
+ '#E3FCEF': {
48
+ tokenName: 'color.background.accent.green.subtlest';
49
+ token: 'var(--ds-background-accent-green-subtlest, #E3FCEF)';
50
+ };
51
+ '#ABF5D1': {
52
+ tokenName: 'color.background.accent.green.subtler';
53
+ token: 'var(--ds-background-accent-green-subtler, #ABF5D1)';
54
+ };
55
+ '#57D9A3': {
56
+ tokenName: 'color.background.accent.green.subtle';
57
+ token: 'var(--ds-background-accent-green-subtle, #57D9A3)';
58
+ };
59
+ '#FFFAE6': {
60
+ tokenName: 'color.background.accent.yellow.subtlest';
61
+ token: 'var(--ds-background-accent-yellow-subtlest, #FFFAE6)';
62
+ };
63
+ '#FFF0B3': {
64
+ tokenName: 'color.background.accent.yellow.subtler';
65
+ token: 'var(--ds-background-accent-yellow-subtler, #FFF0B3)';
66
+ };
67
+ '#FFC400': {
68
+ tokenName: 'color.background.accent.orange.subtle';
69
+ token: 'var(--ds-background-accent-orange-subtle, #FFC400)';
70
+ };
71
+ '#FFEBE6': {
72
+ tokenName: 'color.background.accent.red.subtlest';
73
+ token: 'var(--ds-background-accent-red-subtlest, #FFEBE6)';
74
+ };
75
+ '#FFBDAD': {
76
+ tokenName: 'color.background.accent.red.subtler';
77
+ token: 'var(--ds-background-accent-red-subtler, #FFBDAD)';
78
+ };
79
+ '#FF8F73': {
80
+ tokenName: 'color.background.accent.red.subtle';
81
+ token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
82
+ };
83
+ '#EAE6FF': {
84
+ tokenName: 'color.background.accent.purple.subtlest';
85
+ token: 'var(--ds-background-accent-purple-subtlest, #EAE6FF)';
86
+ };
87
+ '#C0B6F2': {
88
+ tokenName: 'color.background.accent.purple.subtler';
89
+ token: 'var(--ds-background-accent-purple-subtler, #C0B6F2)';
90
+ };
91
+ '#998DD9': {
92
+ tokenName: 'color.background.accent.purple.subtle';
93
+ token: 'var(--ds-background-accent-purple-subtle, #998DD9)';
94
+ };
95
+ '#FFFFFF': {
96
+ tokenName: 'elevation.surface';
97
+ token: 'var(--ds-surface, #FFFFFF)';
98
+ };
99
+ '#F4F5F7': {
100
+ tokenName: 'color.background.accent.gray.subtlest';
101
+ token: 'var(--ds-background-accent-gray-subtlest, #F4F5F7)';
102
+ };
103
+ '#B3BAC5': {
104
+ tokenName: 'color.background.accent.gray.subtle';
105
+ token: 'var(--ds-background-accent-gray-subtle, #B3BAC5)';
106
+ };
43
107
  };
44
108
 
45
109
  // @public (undocumented)
46
110
  type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
47
111
 
112
+ // @public (undocumented)
113
+ type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
114
+
115
+ // @public (undocumented)
116
+ type EditorTableChartsPalette = typeof editorTableChartsPalette;
117
+
118
+ // @public
119
+ const editorTableChartsPalette: {
120
+ '#7AB2FF': 'var(--ds-background-accent-blue-subtle, #7AB2FF)';
121
+ '#60C6D2': 'var(--ds-background-accent-teal-subtle, #60C6D2)';
122
+ '#6BE1B0': 'var(--ds-background-accent-green-subtle, #6BE1B0)';
123
+ '#FFDB57': 'var(--ds-background-accent-yellow-subtle, #FFDB57)';
124
+ '#FAA53D': 'var(--ds-background-accent-orange-subtle, #FAA53D)';
125
+ '#FF8F73': 'var(--ds-background-accent-red-subtle, #FF8F73)';
126
+ '#E774BB': 'var(--ds-background-accent-magenta-subtle, #E774BB)';
127
+ '#B5A7FB': 'var(--ds-background-accent-purple-subtle, #B5A7FB)';
128
+ '#8993A5': 'var(--ds-background-accent-gray-subtler, #8993A5)';
129
+ '#247FFF': 'var(--ds-chart-blue-bold, #247FFF)';
130
+ '#1D9AAA': 'var(--ds-chart-teal-bold, #1D9AAA)';
131
+ '#23A971': 'var(--ds-chart-green-bold, #23A971)';
132
+ '#FFBE33': 'var(--ds-chart-yellow-bold, #FFBE33)';
133
+ '#D97008': 'var(--ds-chart-orange-bold, #D97008)';
134
+ '#FC552C': 'var(--ds-chart-red-bold, #FC552C)';
135
+ '#DA62AC': 'var(--ds-chart-magenta-bold, #DA62AC)';
136
+ '#8B77EE': 'var(--ds-chart-purple-bold, #8B77EE)';
137
+ '#8590A2': 'var(--ds-chart-gray-bold, #8590A2)';
138
+ '#0055CC': 'var(--ds-chart-blue-bolder, #0055CC)';
139
+ '#1D7F8C': 'var(--ds-chart-teal-bolder, #1D7F8C)';
140
+ '#177D52': 'var(--ds-chart-green-bolder, #177D52)';
141
+ '#FF9D00': 'var(--ds-chart-yellow-bolder, #FF9D00)';
142
+ '#B65C02': 'var(--ds-chart-orange-bolder, #B65C02)';
143
+ '#D32D03': 'var(--ds-chart-red-bolder, #D32D03)';
144
+ '#CD519D': 'var(--ds-chart-magenta-bolder, #CD519D)';
145
+ '#5A43D0': 'var(--ds-chart-purple-bolder, #5A43D0)';
146
+ '#758195': 'var(--ds-chart-gray-bolder, #758195)';
147
+ '#003884': 'var(--ds-chart-blue-boldest, #003884)';
148
+ '#206B74': 'var(--ds-chart-teal-boldest, #206B74)';
149
+ '#055C3F': 'var(--ds-chart-green-boldest, #055C3F)';
150
+ '#946104': 'var(--ds-chart-yellow-boldest, #946104)';
151
+ '#974F0C': 'var(--ds-chart-orange-boldest, #974F0C)';
152
+ '#A32000': 'var(--ds-chart-red-boldest, #A32000)';
153
+ '#943D73': 'var(--ds-chart-magenta-boldest, #943D73)';
154
+ '#44368B': 'var(--ds-chart-purple-boldest, #44368B)';
155
+ '#44546F': 'var(--ds-chart-gray-boldest, #44546F)';
156
+ };
157
+
158
+ // @public (undocumented)
159
+ type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
160
+
48
161
  // @public (undocumented)
49
162
  type EditorTextPalette = typeof editorTextPalette;
50
163
 
51
164
  // @public (undocumented)
52
- export const editorTextPalette: {
165
+ const editorTextPalette: {
53
166
  '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)';
54
167
  '#4C9AFF': 'var(--ds-icon-accent-blue, #4C9AFF)';
55
168
  '#0747A6': 'var(--ds-text-accent-blue, #0747A6)';
@@ -80,7 +193,23 @@ type EditorTextPaletteKey = keyof EditorTextPalette;
80
193
  export function hexToEditorBackgroundPaletteColor<HexColor extends string>(
81
194
  hexColor: HexColor,
82
195
  ): HexColor extends EditorBackgroundPaletteKey
83
- ? EditorBackgroundPalette[HexColor]
196
+ ? EditorBackgroundPalette[HexColor]['token']
197
+ : string | undefined;
198
+
199
+ // @public (undocumented)
200
+ export function hexToEditorBackgroundPaletteColorTokenName<
201
+ HexColor extends string,
202
+ >(
203
+ hexColor: HexColor,
204
+ ): HexColor extends EditorBackgroundPaletteKey
205
+ ? EditorBackgroundPalette[HexColor]['tokenName']
206
+ : EditorBackgroundPaletteTokenNames | undefined;
207
+
208
+ // @public
209
+ export function hexToEditorTableChartsPaletteColor<HexColor extends string>(
210
+ hexColor: HexColor,
211
+ ): HexColor extends EditorTableChartsPaletteKey
212
+ ? EditorTableChartsPalette[HexColor]
84
213
  : string | undefined;
85
214
 
86
215
  // @public
@@ -90,7 +219,42 @@ export function hexToEditorTextPaletteColor<HexColor extends string>(
90
219
  ? EditorTextPalette[HexColor]
91
220
  : string | undefined;
92
221
 
222
+ // @public (undocumented)
223
+ const tokenNames: (
224
+ | 'color.background.accent.blue.subtle'
225
+ | 'color.background.accent.blue.subtler'
226
+ | 'color.background.accent.blue.subtlest'
227
+ | 'color.background.accent.gray.subtle'
228
+ | 'color.background.accent.gray.subtlest'
229
+ | 'color.background.accent.green.subtle'
230
+ | 'color.background.accent.green.subtler'
231
+ | 'color.background.accent.green.subtlest'
232
+ | 'color.background.accent.orange.subtle'
233
+ | 'color.background.accent.purple.subtle'
234
+ | 'color.background.accent.purple.subtler'
235
+ | 'color.background.accent.purple.subtlest'
236
+ | 'color.background.accent.red.subtle'
237
+ | 'color.background.accent.red.subtler'
238
+ | 'color.background.accent.red.subtlest'
239
+ | 'color.background.accent.teal.subtle'
240
+ | 'color.background.accent.teal.subtler'
241
+ | 'color.background.accent.teal.subtlest'
242
+ | 'color.background.accent.yellow.subtler'
243
+ | 'color.background.accent.yellow.subtlest'
244
+ | 'elevation.surface'
245
+ )[];
246
+
93
247
  // (No @packageDocumentation comment for this package)
94
248
  ```
95
249
 
96
250
  <!--SECTION END: Main Entry Types-->
251
+
252
+ ### Peer Dependencies
253
+
254
+ <!--SECTION START: Peer Dependencies-->
255
+
256
+ ```json
257
+ {}
258
+ ```
259
+
260
+ <!--SECTION END: Peer Dependencies-->