@atlaskit/tokens 0.4.1 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/css/atlassian-dark.css +196 -67
  3. package/css/atlassian-light.css +196 -67
  4. package/dist/cjs/artifacts/rename-mapping.js +322 -2
  5. package/dist/cjs/artifacts/token-default-values.js +196 -67
  6. package/dist/cjs/artifacts/token-names.js +196 -67
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +3311 -616
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +3296 -621
  9. package/dist/cjs/artifacts/types-internal.js +5 -0
  10. package/dist/cjs/get-token.js +10 -3
  11. package/dist/cjs/tokens/atlassian-dark/color/accent.js +150 -39
  12. package/dist/cjs/tokens/atlassian-dark/color/background.js +178 -154
  13. package/dist/cjs/tokens/atlassian-dark/color/border.js +26 -2
  14. package/dist/cjs/tokens/atlassian-dark/color/icon.js +49 -0
  15. package/dist/cjs/tokens/atlassian-dark/color/interaction.js +32 -0
  16. package/dist/cjs/tokens/atlassian-dark/color/text.js +25 -23
  17. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +344 -0
  18. package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js +66 -0
  19. package/dist/cjs/tokens/atlassian-dark/elevation/surface.js +26 -0
  20. package/dist/cjs/tokens/atlassian-light/color/accent.js +150 -39
  21. package/dist/cjs/tokens/atlassian-light/color/background.js +178 -154
  22. package/dist/cjs/tokens/atlassian-light/color/border.js +26 -2
  23. package/dist/cjs/tokens/atlassian-light/color/icon.js +49 -0
  24. package/dist/cjs/tokens/atlassian-light/color/interaction.js +32 -0
  25. package/dist/cjs/tokens/atlassian-light/color/text.js +25 -23
  26. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +330 -0
  27. package/dist/cjs/tokens/atlassian-light/elevation/shadow.js +52 -0
  28. package/dist/cjs/tokens/atlassian-light/elevation/surface.js +26 -0
  29. package/dist/cjs/tokens/default/color/accent.js +306 -87
  30. package/dist/cjs/tokens/default/color/background.js +339 -309
  31. package/dist/cjs/tokens/default/color/border.js +60 -4
  32. package/dist/cjs/tokens/default/color/icon.js +93 -0
  33. package/dist/cjs/tokens/default/color/interaction.js +44 -0
  34. package/dist/cjs/tokens/default/color/text.js +37 -35
  35. package/dist/cjs/tokens/default/deprecated/deprecated.js +698 -0
  36. package/dist/cjs/tokens/default/elevation/shadow.js +28 -0
  37. package/dist/cjs/tokens/default/elevation/surface.js +42 -0
  38. package/dist/cjs/version.json +1 -1
  39. package/dist/es2019/artifacts/rename-mapping.js +322 -2
  40. package/dist/es2019/artifacts/token-default-values.js +196 -67
  41. package/dist/es2019/artifacts/token-names.js +196 -67
  42. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +3311 -616
  43. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +3296 -621
  44. package/dist/es2019/artifacts/types-internal.js +1 -0
  45. package/dist/es2019/get-token.js +8 -3
  46. package/dist/es2019/tokens/atlassian-dark/color/accent.js +150 -39
  47. package/dist/es2019/tokens/atlassian-dark/color/background.js +178 -154
  48. package/dist/es2019/tokens/atlassian-dark/color/border.js +26 -2
  49. package/dist/es2019/tokens/atlassian-dark/color/icon.js +42 -0
  50. package/dist/es2019/tokens/atlassian-dark/color/interaction.js +25 -0
  51. package/dist/es2019/tokens/atlassian-dark/color/text.js +25 -23
  52. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +337 -0
  53. package/dist/es2019/tokens/atlassian-dark/elevation/shadow.js +59 -0
  54. package/dist/es2019/tokens/atlassian-dark/elevation/surface.js +19 -0
  55. package/dist/es2019/tokens/atlassian-light/color/accent.js +150 -39
  56. package/dist/es2019/tokens/atlassian-light/color/background.js +178 -154
  57. package/dist/es2019/tokens/atlassian-light/color/border.js +26 -2
  58. package/dist/es2019/tokens/atlassian-light/color/icon.js +42 -0
  59. package/dist/es2019/tokens/atlassian-light/color/interaction.js +25 -0
  60. package/dist/es2019/tokens/atlassian-light/color/text.js +25 -23
  61. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +323 -0
  62. package/dist/es2019/tokens/atlassian-light/elevation/shadow.js +45 -0
  63. package/dist/es2019/tokens/atlassian-light/elevation/surface.js +19 -0
  64. package/dist/es2019/tokens/default/color/accent.js +306 -87
  65. package/dist/es2019/tokens/default/color/background.js +339 -314
  66. package/dist/es2019/tokens/default/color/border.js +60 -4
  67. package/dist/es2019/tokens/default/color/icon.js +86 -0
  68. package/dist/es2019/tokens/default/color/interaction.js +37 -0
  69. package/dist/es2019/tokens/default/color/text.js +37 -42
  70. package/dist/es2019/tokens/default/deprecated/deprecated.js +729 -0
  71. package/dist/es2019/tokens/default/elevation/shadow.js +23 -0
  72. package/dist/es2019/tokens/default/elevation/surface.js +37 -0
  73. package/dist/es2019/version.json +1 -1
  74. package/dist/esm/artifacts/rename-mapping.js +322 -2
  75. package/dist/esm/artifacts/token-default-values.js +196 -67
  76. package/dist/esm/artifacts/token-names.js +196 -67
  77. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +3311 -616
  78. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +3296 -621
  79. package/dist/esm/artifacts/types-internal.js +1 -0
  80. package/dist/esm/get-token.js +8 -3
  81. package/dist/esm/tokens/atlassian-dark/color/accent.js +150 -39
  82. package/dist/esm/tokens/atlassian-dark/color/background.js +178 -154
  83. package/dist/esm/tokens/atlassian-dark/color/border.js +26 -2
  84. package/dist/esm/tokens/atlassian-dark/color/icon.js +42 -0
  85. package/dist/esm/tokens/atlassian-dark/color/interaction.js +25 -0
  86. package/dist/esm/tokens/atlassian-dark/color/text.js +25 -23
  87. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +337 -0
  88. package/dist/esm/tokens/atlassian-dark/elevation/shadow.js +59 -0
  89. package/dist/esm/tokens/atlassian-dark/elevation/surface.js +19 -0
  90. package/dist/esm/tokens/atlassian-light/color/accent.js +150 -39
  91. package/dist/esm/tokens/atlassian-light/color/background.js +178 -154
  92. package/dist/esm/tokens/atlassian-light/color/border.js +26 -2
  93. package/dist/esm/tokens/atlassian-light/color/icon.js +42 -0
  94. package/dist/esm/tokens/atlassian-light/color/interaction.js +25 -0
  95. package/dist/esm/tokens/atlassian-light/color/text.js +25 -23
  96. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +323 -0
  97. package/dist/esm/tokens/atlassian-light/elevation/shadow.js +45 -0
  98. package/dist/esm/tokens/atlassian-light/elevation/surface.js +19 -0
  99. package/dist/esm/tokens/default/color/accent.js +306 -87
  100. package/dist/esm/tokens/default/color/background.js +339 -309
  101. package/dist/esm/tokens/default/color/border.js +60 -4
  102. package/dist/esm/tokens/default/color/icon.js +86 -0
  103. package/dist/esm/tokens/default/color/interaction.js +37 -0
  104. package/dist/esm/tokens/default/color/text.js +37 -35
  105. package/dist/esm/tokens/default/deprecated/deprecated.js +691 -0
  106. package/dist/esm/tokens/default/elevation/shadow.js +21 -0
  107. package/dist/esm/tokens/default/elevation/surface.js +35 -0
  108. package/dist/esm/version.json +1 -1
  109. package/dist/types/artifacts/rename-mapping.d.ts +7 -3
  110. package/dist/types/artifacts/token-default-values.d.ts +196 -67
  111. package/dist/types/artifacts/token-names.d.ts +392 -134
  112. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +86 -0
  113. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +62 -0
  114. package/dist/types/artifacts/types-internal.d.ts +4 -0
  115. package/dist/types/artifacts/types.d.ts +1 -1
  116. package/dist/types/get-token.d.ts +2 -2
  117. package/dist/types/tokens/atlassian-dark/color/icon.d.ts +3 -0
  118. package/dist/types/tokens/atlassian-dark/color/interaction.d.ts +3 -0
  119. package/dist/types/tokens/atlassian-dark/deprecated/deprecated.d.ts +3 -0
  120. package/dist/types/tokens/atlassian-dark/{shadow → elevation}/shadow.d.ts +0 -0
  121. package/dist/types/tokens/atlassian-dark/elevation/surface.d.ts +3 -0
  122. package/dist/types/tokens/atlassian-light/color/icon.d.ts +3 -0
  123. package/dist/types/tokens/atlassian-light/color/interaction.d.ts +3 -0
  124. package/dist/types/tokens/atlassian-light/deprecated/deprecated.d.ts +3 -0
  125. package/dist/types/tokens/atlassian-light/{shadow → elevation}/shadow.d.ts +0 -0
  126. package/dist/types/tokens/atlassian-light/elevation/surface.d.ts +3 -0
  127. package/dist/types/tokens/default/color/icon.d.ts +3 -0
  128. package/dist/types/tokens/default/color/interaction.d.ts +3 -0
  129. package/dist/types/tokens/default/deprecated/deprecated.d.ts +3 -0
  130. package/dist/types/tokens/default/{shadow → elevation}/shadow.d.ts +0 -0
  131. package/dist/types/tokens/default/elevation/surface.d.ts +3 -0
  132. package/dist/types/tokens/default/utility/utility.d.ts +72 -72
  133. package/dist/types/types.d.ts +294 -54
  134. package/package.json +18 -8
  135. package/dist/cjs/tokens/atlassian-dark/color/icon-border.js +0 -29
  136. package/dist/cjs/tokens/atlassian-dark/color/overlay.js +0 -20
  137. package/dist/cjs/tokens/atlassian-dark/shadow/shadow.js +0 -64
  138. package/dist/cjs/tokens/atlassian-light/color/icon-border.js +0 -29
  139. package/dist/cjs/tokens/atlassian-light/color/overlay.js +0 -20
  140. package/dist/cjs/tokens/atlassian-light/shadow/shadow.js +0 -50
  141. package/dist/cjs/tokens/default/color/icon-border.js +0 -49
  142. package/dist/cjs/tokens/default/color/overlay.js +0 -28
  143. package/dist/cjs/tokens/default/shadow/shadow.js +0 -26
  144. package/dist/es2019/tokens/atlassian-dark/color/icon-border.js +0 -22
  145. package/dist/es2019/tokens/atlassian-dark/color/overlay.js +0 -13
  146. package/dist/es2019/tokens/atlassian-dark/shadow/shadow.js +0 -57
  147. package/dist/es2019/tokens/atlassian-light/color/icon-border.js +0 -22
  148. package/dist/es2019/tokens/atlassian-light/color/overlay.js +0 -13
  149. package/dist/es2019/tokens/atlassian-light/shadow/shadow.js +0 -43
  150. package/dist/es2019/tokens/default/color/icon-border.js +0 -60
  151. package/dist/es2019/tokens/default/color/overlay.js +0 -21
  152. package/dist/es2019/tokens/default/shadow/shadow.js +0 -27
  153. package/dist/esm/tokens/atlassian-dark/color/icon-border.js +0 -22
  154. package/dist/esm/tokens/atlassian-dark/color/overlay.js +0 -13
  155. package/dist/esm/tokens/atlassian-dark/shadow/shadow.js +0 -57
  156. package/dist/esm/tokens/atlassian-light/color/icon-border.js +0 -22
  157. package/dist/esm/tokens/atlassian-light/color/overlay.js +0 -13
  158. package/dist/esm/tokens/atlassian-light/shadow/shadow.js +0 -43
  159. package/dist/esm/tokens/default/color/icon-border.js +0 -42
  160. package/dist/esm/tokens/default/color/overlay.js +0 -21
  161. package/dist/esm/tokens/default/shadow/shadow.js +0 -19
  162. package/dist/types/tokens/atlassian-dark/color/icon-border.d.ts +0 -3
  163. package/dist/types/tokens/atlassian-dark/color/overlay.d.ts +0 -3
  164. package/dist/types/tokens/atlassian-light/color/icon-border.d.ts +0 -3
  165. package/dist/types/tokens/atlassian-light/color/overlay.d.ts +0 -3
  166. package/dist/types/tokens/default/color/icon-border.d.ts +0 -3
  167. package/dist/types/tokens/default/color/overlay.d.ts +0 -3
  168. package/tokens-browser-extension/README.md +0 -28
  169. package/tokens-browser-extension/atlassian-theme.css +0 -449
  170. package/tokens-browser-extension/background.js +0 -75
  171. package/tokens-browser-extension/content-script.js +0 -75
  172. package/tokens-browser-extension/devtools.html +0 -1
  173. package/tokens-browser-extension/devtools.js +0 -14
  174. package/tokens-browser-extension/manifest.json +0 -36
  175. package/tokens-browser-extension/messageback-script.js +0 -10
  176. package/tokens-browser-extension/messaging.js +0 -36
  177. package/tokens-browser-extension/panel.html +0 -25
  178. package/tokens-browser-extension/panel.js +0 -46
  179. package/tokens-browser-extension/toast.png +0 -0
@@ -1,49 +1,51 @@
1
1
  const color = {
2
2
  color: {
3
3
  text: {
4
- selected: {
5
- value: 'B400'
6
- },
7
- highEmphasis: {
4
+ '[default]': {
8
5
  value: 'DN1000'
9
6
  },
10
- mediumEmphasis: {
7
+ subtle: {
11
8
  value: 'DN800'
12
9
  },
13
- lowEmphasis: {
10
+ subtlest: {
14
11
  value: 'DN700'
15
12
  },
16
- onBold: {
17
- value: 'DN0'
18
- },
19
- onBoldWarning: {
13
+ inverse: {
20
14
  value: 'DN0'
21
15
  },
22
- link: {
23
- resting: {
24
- value: 'B400'
25
- },
26
- pressed: {
27
- value: 'B300'
28
- }
16
+ disabled: {
17
+ value: 'DN500'
29
18
  },
30
19
  brand: {
31
- value: 'B300'
32
- },
33
- warning: {
34
- value: 'Y300'
20
+ value: 'B400'
35
21
  },
36
22
  danger: {
37
23
  value: 'R300'
38
24
  },
25
+ warning: {
26
+ '[default]': {
27
+ value: 'Y300'
28
+ },
29
+ inverse: {
30
+ value: 'DN0'
31
+ }
32
+ },
39
33
  success: {
40
34
  value: 'G300'
41
35
  },
36
+ information: {
37
+ value: 'B300'
38
+ },
42
39
  discovery: {
43
40
  value: 'P300'
41
+ }
42
+ },
43
+ link: {
44
+ '[default]': {
45
+ value: 'B400'
44
46
  },
45
- disabled: {
46
- value: 'DN500'
47
+ pressed: {
48
+ value: 'B300'
47
49
  }
48
50
  }
49
51
  }
@@ -0,0 +1,337 @@
1
+ const color = {
2
+ color: {
3
+ accent: {
4
+ boldBlue: {
5
+ value: 'B700'
6
+ },
7
+ boldGreen: {
8
+ value: 'G700'
9
+ },
10
+ boldOrange: {
11
+ value: 'O700'
12
+ },
13
+ boldPurple: {
14
+ value: 'P700'
15
+ },
16
+ boldRed: {
17
+ value: 'R700'
18
+ },
19
+ boldTeal: {
20
+ value: 'T700'
21
+ },
22
+ subtleBlue: {
23
+ value: 'B900'
24
+ },
25
+ subtleGreen: {
26
+ value: 'G900'
27
+ },
28
+ subtleMagenta: {
29
+ value: 'M900'
30
+ },
31
+ subtleOrange: {
32
+ value: 'O900'
33
+ },
34
+ subtlePurple: {
35
+ value: 'P900'
36
+ },
37
+ subtleRed: {
38
+ value: 'R900'
39
+ },
40
+ subtleTeal: {
41
+ value: 'T900'
42
+ }
43
+ },
44
+ background: {
45
+ blanket: {
46
+ value: 'DN-100A'
47
+ },
48
+ boldBrand: {
49
+ resting: {
50
+ value: 'B400'
51
+ },
52
+ hover: {
53
+ value: 'B300'
54
+ },
55
+ pressed: {
56
+ value: 'B200'
57
+ }
58
+ },
59
+ boldDanger: {
60
+ resting: {
61
+ value: 'R400'
62
+ },
63
+ hover: {
64
+ value: 'R300'
65
+ },
66
+ pressed: {
67
+ value: 'R200'
68
+ }
69
+ },
70
+ boldDiscovery: {
71
+ resting: {
72
+ value: 'P400'
73
+ },
74
+ hover: {
75
+ value: 'P300'
76
+ },
77
+ pressed: {
78
+ value: 'P200'
79
+ }
80
+ },
81
+ boldNeutral: {
82
+ resting: {
83
+ value: 'DN800'
84
+ },
85
+ hover: {
86
+ value: 'DN900'
87
+ },
88
+ pressed: {
89
+ value: 'DN1000'
90
+ }
91
+ },
92
+ boldSuccess: {
93
+ resting: {
94
+ value: 'G400'
95
+ },
96
+ hover: {
97
+ value: 'G300'
98
+ },
99
+ pressed: {
100
+ value: 'G200'
101
+ }
102
+ },
103
+ boldWarning: {
104
+ resting: {
105
+ value: 'Y400'
106
+ },
107
+ hover: {
108
+ value: 'Y300'
109
+ },
110
+ pressed: {
111
+ value: 'Y200'
112
+ }
113
+ },
114
+ default: {
115
+ value: 'DN0'
116
+ },
117
+ card: {
118
+ value: 'DN100'
119
+ },
120
+ overlay: {
121
+ value: 'DN200'
122
+ },
123
+ selected: {
124
+ resting: {
125
+ value: 'DN200A'
126
+ },
127
+ hover: {
128
+ value: 'DN300A'
129
+ },
130
+ pressed: {
131
+ value: 'DN400A'
132
+ }
133
+ },
134
+ subtleBorderedNeutral: {
135
+ resting: {
136
+ value: 'DN100A'
137
+ },
138
+ pressed: {
139
+ value: 'DN200A'
140
+ }
141
+ },
142
+ subtleBrand: {
143
+ resting: {
144
+ value: 'B1000'
145
+ },
146
+ hover: {
147
+ value: 'B900'
148
+ },
149
+ pressed: {
150
+ value: 'B800'
151
+ }
152
+ },
153
+ subtleDanger: {
154
+ resting: {
155
+ value: 'R1000'
156
+ },
157
+ hover: {
158
+ value: 'R900'
159
+ },
160
+ pressed: {
161
+ value: 'R800'
162
+ }
163
+ },
164
+ subtleDiscovery: {
165
+ resting: {
166
+ value: 'P1000'
167
+ },
168
+ hover: {
169
+ value: 'P900'
170
+ },
171
+ pressed: {
172
+ value: 'P800'
173
+ }
174
+ },
175
+ subtleNeutral: {
176
+ resting: {
177
+ value: 'DN200A'
178
+ },
179
+ hover: {
180
+ value: 'DN300A'
181
+ },
182
+ pressed: {
183
+ value: 'DN400A'
184
+ }
185
+ },
186
+ subtleSuccess: {
187
+ resting: {
188
+ value: 'G1000'
189
+ },
190
+ hover: {
191
+ value: 'G900'
192
+ },
193
+ pressed: {
194
+ value: 'G800'
195
+ }
196
+ },
197
+ subtleWarning: {
198
+ resting: {
199
+ value: 'Y1000'
200
+ },
201
+ hover: {
202
+ value: 'Y900'
203
+ },
204
+ pressed: {
205
+ value: 'Y800'
206
+ }
207
+ },
208
+ sunken: {
209
+ value: 'DN-100A'
210
+ },
211
+ transparentNeutral: {
212
+ hover: {
213
+ value: 'DN200A'
214
+ },
215
+ pressed: {
216
+ value: 'DN300A'
217
+ }
218
+ }
219
+ },
220
+ text: {
221
+ highEmphasis: {
222
+ value: 'DN1000'
223
+ },
224
+ mediumEmphasis: {
225
+ value: 'DN800'
226
+ },
227
+ lowEmphasis: {
228
+ value: 'DN700'
229
+ },
230
+ link: {
231
+ resting: {
232
+ value: 'B400'
233
+ },
234
+ pressed: {
235
+ value: 'B300'
236
+ }
237
+ },
238
+ onBold: {
239
+ value: 'DN0'
240
+ },
241
+ onBoldWarning: {
242
+ value: 'DN0'
243
+ },
244
+ selected: {
245
+ value: 'B400'
246
+ }
247
+ },
248
+ border: {
249
+ focus: {
250
+ value: 'B300'
251
+ },
252
+ neutral: {
253
+ value: 'DN300A'
254
+ }
255
+ },
256
+ iconBorder: {
257
+ brand: {
258
+ value: 'B500'
259
+ },
260
+ danger: {
261
+ value: 'R500'
262
+ },
263
+ warning: {
264
+ value: 'Y500'
265
+ },
266
+ success: {
267
+ value: 'G500'
268
+ },
269
+ discovery: {
270
+ value: 'P500'
271
+ }
272
+ },
273
+ overlay: {
274
+ hover: {
275
+ value: 'DN400A'
276
+ },
277
+ pressed: {
278
+ value: 'DN500A'
279
+ }
280
+ }
281
+ },
282
+ shadow: {
283
+ card: {
284
+ value: [{
285
+ radius: 1,
286
+ offset: {
287
+ x: 0,
288
+ y: 1
289
+ },
290
+ color: 'DN-100A',
291
+ // This opacity overrides the color alpha.
292
+ opacity: 0.5
293
+ }, {
294
+ radius: 1,
295
+ offset: {
296
+ x: 0,
297
+ y: 0
298
+ },
299
+ color: 'DN-100A',
300
+ // This opacity overrides the color alpha.
301
+ opacity: 0.5
302
+ }]
303
+ },
304
+ overlay: {
305
+ value: [{
306
+ radius: 0,
307
+ spread: 1,
308
+ color: 'DN100A',
309
+ offset: {
310
+ x: 0,
311
+ y: 0
312
+ },
313
+ opacity: 0.04,
314
+ inset: true
315
+ }, {
316
+ radius: 12,
317
+ offset: {
318
+ x: 0,
319
+ y: 8
320
+ },
321
+ color: 'DN-100A',
322
+ // This opacity overrides the color alpha.
323
+ opacity: 0.36
324
+ }, {
325
+ radius: 1,
326
+ offset: {
327
+ x: 0,
328
+ y: 0
329
+ },
330
+ color: 'DN-100A',
331
+ // This opacity overrides the color alpha.
332
+ opacity: 0.5
333
+ }]
334
+ }
335
+ }
336
+ };
337
+ export default color;
@@ -0,0 +1,59 @@
1
+ const shadow = {
2
+ elevation: {
3
+ shadow: {
4
+ raised: {
5
+ value: [{
6
+ radius: 1,
7
+ offset: {
8
+ x: 0,
9
+ y: 1
10
+ },
11
+ color: 'DN-100A',
12
+ // This opacity overrides the color alpha.
13
+ opacity: 0.5
14
+ }, {
15
+ radius: 1,
16
+ offset: {
17
+ x: 0,
18
+ y: 0
19
+ },
20
+ color: 'DN-100A',
21
+ // This opacity overrides the color alpha.
22
+ opacity: 0.5
23
+ }]
24
+ },
25
+ overlay: {
26
+ value: [{
27
+ radius: 0,
28
+ spread: 1,
29
+ color: 'DN100A',
30
+ offset: {
31
+ x: 0,
32
+ y: 0
33
+ },
34
+ opacity: 0.04,
35
+ inset: true
36
+ }, {
37
+ radius: 12,
38
+ offset: {
39
+ x: 0,
40
+ y: 8
41
+ },
42
+ color: 'DN-100A',
43
+ // This opacity overrides the color alpha.
44
+ opacity: 0.36
45
+ }, {
46
+ radius: 1,
47
+ offset: {
48
+ x: 0,
49
+ y: 0
50
+ },
51
+ color: 'DN-100A',
52
+ // This opacity overrides the color alpha.
53
+ opacity: 0.5
54
+ }]
55
+ }
56
+ }
57
+ }
58
+ };
59
+ export default shadow;
@@ -0,0 +1,19 @@
1
+ const elevation = {
2
+ elevation: {
3
+ surface: {
4
+ '[default]': {
5
+ value: 'DN0'
6
+ },
7
+ sunken: {
8
+ value: 'DN-100A'
9
+ },
10
+ raised: {
11
+ value: 'DN100'
12
+ },
13
+ overlay: {
14
+ value: 'DN200'
15
+ }
16
+ }
17
+ }
18
+ };
19
+ export default elevation;
@@ -1,44 +1,155 @@
1
1
  const color = {
2
2
  color: {
3
- accent: {
4
- boldBlue: {
5
- value: 'B400'
6
- },
7
- boldGreen: {
8
- value: 'G400'
9
- },
10
- boldOrange: {
11
- value: 'O400'
12
- },
13
- boldPurple: {
14
- value: 'P400'
15
- },
16
- boldRed: {
17
- value: 'R400'
18
- },
19
- boldTeal: {
20
- value: 'T400'
21
- },
22
- subtleBlue: {
23
- value: 'B200'
24
- },
25
- subtleGreen: {
26
- value: 'G200'
27
- },
28
- subtleMagenta: {
29
- value: 'M200'
30
- },
31
- subtleOrange: {
32
- value: 'O200'
33
- },
34
- subtlePurple: {
35
- value: 'P200'
36
- },
37
- subtleRed: {
38
- value: 'R200'
39
- },
40
- subtleTeal: {
41
- value: 'T200'
3
+ text: {
4
+ accent: {
5
+ blue: {
6
+ value: 'B800'
7
+ },
8
+ red: {
9
+ value: 'R800'
10
+ },
11
+ orange: {
12
+ value: 'O800'
13
+ },
14
+ yellow: {
15
+ value: 'Y800'
16
+ },
17
+ green: {
18
+ value: 'G800'
19
+ },
20
+ purple: {
21
+ value: 'P800'
22
+ },
23
+ teal: {
24
+ value: 'T800'
25
+ },
26
+ magenta: {
27
+ value: 'M800'
28
+ }
29
+ }
30
+ },
31
+ icon: {
32
+ accent: {
33
+ blue: {
34
+ value: 'B600'
35
+ },
36
+ red: {
37
+ value: 'R600'
38
+ },
39
+ orange: {
40
+ value: 'O600'
41
+ },
42
+ yellow: {
43
+ value: 'Y600'
44
+ },
45
+ green: {
46
+ value: 'G600'
47
+ },
48
+ purple: {
49
+ value: 'P600'
50
+ },
51
+ teal: {
52
+ value: 'T600'
53
+ },
54
+ magenta: {
55
+ value: 'M600'
56
+ }
57
+ }
58
+ },
59
+ border: {
60
+ accent: {
61
+ blue: {
62
+ value: 'B600'
63
+ },
64
+ red: {
65
+ value: 'R600'
66
+ },
67
+ orange: {
68
+ value: 'O600'
69
+ },
70
+ yellow: {
71
+ value: 'Y600'
72
+ },
73
+ green: {
74
+ value: 'G600'
75
+ },
76
+ purple: {
77
+ value: 'P600'
78
+ },
79
+ teal: {
80
+ value: 'T600'
81
+ },
82
+ magenta: {
83
+ value: 'M600'
84
+ }
85
+ }
86
+ },
87
+ background: {
88
+ accent: {
89
+ blue: {
90
+ '[default]': {
91
+ value: 'B200'
92
+ },
93
+ bold: {
94
+ value: 'B400'
95
+ }
96
+ },
97
+ red: {
98
+ '[default]': {
99
+ value: 'R200'
100
+ },
101
+ bold: {
102
+ value: 'R400'
103
+ }
104
+ },
105
+ orange: {
106
+ '[default]': {
107
+ value: 'O200'
108
+ },
109
+ bold: {
110
+ value: 'O400'
111
+ }
112
+ },
113
+ yellow: {
114
+ '[default]': {
115
+ value: 'Y200'
116
+ },
117
+ bold: {
118
+ value: 'Y400'
119
+ }
120
+ },
121
+ green: {
122
+ '[default]': {
123
+ value: 'G200'
124
+ },
125
+ bold: {
126
+ value: 'G400'
127
+ }
128
+ },
129
+ purple: {
130
+ '[default]': {
131
+ value: 'P200'
132
+ },
133
+ bold: {
134
+ value: 'P400'
135
+ }
136
+ },
137
+ teal: {
138
+ '[default]': {
139
+ value: 'T200'
140
+ },
141
+ bold: {
142
+ value: 'T400'
143
+ }
144
+ },
145
+ magenta: {
146
+ '[default]': {
147
+ value: 'M200'
148
+ },
149
+ bold: {
150
+ value: 'M400'
151
+ }
152
+ }
42
153
  }
43
154
  }
44
155
  }