Skip to content

Commit 035a8d1

Browse files
Linda-EditorLinda-Editor
authored
Added HTML tables back in
1 parent d2642bd commit 035a8d1

File tree

1 file changed

+295
-1
lines changed

1 file changed

+295
-1
lines changed

‎docs/design/themes-colors.md

Lines changed: 295 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,300 @@ The SharePoint color palette has been optimized for screens and devices, and to
5252

5353
<br/>
5454

55-
## See also
5655

56+
57+
### Red
58+
59+
<table>
60+
<tr>
61+
<td style="color:white; background-color:#751b1e">themeDarker: #751b1e</td>
62+
<td style="color:white; background-color:#000000">black: #000000</td>
63+
</tr>
64+
<tr>
65+
<td style="color:white; background-color:#952226">themeDark: #952226</td>
66+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
67+
</tr>
68+
<tr>
69+
<td style="color:white; background-color:#c02b30">themeDarkAlt: #c02b30</td>
70+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
71+
</tr>
72+
<tr>
73+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#d13438">themePrimary: #d13438</td>
74+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
75+
</tr>
76+
<tr>
77+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
78+
</tr>
79+
<tr>
80+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
81+
</tr>
82+
<tr>
83+
<td style="color:white; background-color:#d6494d">themeSecondary: #d6494d</td>
84+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
85+
</tr>
86+
<tr>
87+
<td style="color:black; background-color:#ecaaac">themeTertiary: #ecaaac</td>
88+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
89+
</tr>
90+
<tr>
91+
<td style="color:black; background-color:#f6d6d8">themeLight: #f6d6d8</td>
92+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td></tr>
93+
<tr>
94+
<td style="color:black; background-color:#faebeb">themeLighter: #faebeb</td>
95+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
96+
</tr>
97+
<tr>
98+
<td style="color:black; background-color:#fdf5f5">themeLighterAlt: #fdf5f5</td>
99+
<td style="color:black; background-color:#fff">white: #fff</td>
100+
</tr>
101+
</table>
102+
103+
<br/>
104+
105+
### Orange
106+
107+
<table>
108+
<tr>
109+
<td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td>
110+
<td style="color:white; background-color:#000000">black: #000000</td>
111+
</tr>
112+
<tr>
113+
<td style="color:white; background-color:#8d390b">themeDark: #8d390b</td>
114+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
115+
</tr>
116+
<tr>
117+
<td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td>
118+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
119+
</tr>
120+
<tr>
121+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#ca5010">themePrimary: #ca5010</td>
122+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
123+
</tr>
124+
<tr>
125+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
126+
</tr>
127+
<tr>
128+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
129+
</tr>
130+
<tr>
131+
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
132+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
133+
</tr>
134+
<tr>
135+
<td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td>
136+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
137+
</tr>
138+
<tr>
139+
<td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td>
140+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
141+
</tr>
142+
<tr>
143+
<td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td>
144+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
145+
</tr>
146+
<tr>
147+
<td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td>
148+
<td style="color:black; background-color:#fff">white: #fff</td>
149+
</tr>
150+
</table>
151+
152+
<br/>
153+
154+
### Green
155+
156+
<table>
157+
<tr>
158+
<td style="color:white; background-color:#094c23">themeDarker: #094c23</td>
159+
<td style="color:white; background-color:#000000">black: #000000</td>
160+
</tr>
161+
<tr>
162+
<td style="color:white; background-color:#0c602c">themeDark: #0c602c</td>
163+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
164+
</tr>
165+
<tr>
166+
<td style="color:white; background-color:#0f7c39">themeDarkAlt: #0f7c39</td>
167+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
168+
</tr>
169+
<tr>
170+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#10893e">themePrimary: #10893e</td>
171+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
172+
</tr>
173+
<tr>
174+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
175+
</tr>
176+
<tr>
177+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
178+
</tr>
179+
<tr>
180+
<td style="color:white; background-color:#14a94e">themeSecondary: #14a94e</td>
181+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
182+
</tr>
183+
<tr>
184+
<td style="color:black; background-color:#7aefa7">themeTertiary: #7aefa7</td>
185+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
186+
</tr>
187+
<tr>
188+
<td style="color:black; background-color:#bff7d5">themeLight: #bff7d5</td>
189+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
190+
</tr>
191+
<tr>
192+
<td style="color:black; background-color:#dffbea">themeLighter: #dffbea</td>
193+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
194+
</tr>
195+
<tr>
196+
<td style="color:black; background-color:#effdf4">themeLighterAlt: #effdf4</td>
197+
<td style="color:black; background-color:#fff">white: #fff</td>
198+
</tr>
199+
</table>
200+
201+
<br/>
202+
203+
### Blue
204+
205+
<table>
206+
<tr>
207+
<td style="color:white; background-color:#004578">themeDarker: #004578</td>
208+
<td style="color:white; background-color:#000000">black: #000000</td>
209+
</tr>
210+
<tr>
211+
<td style="color:white; background-color:#005a9e">themeDark: #005a9e</td>
212+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
213+
</tr>
214+
<tr>
215+
<td style="color:white; background-color:#106ebe">themeDarkAlt: #106ebe</td>
216+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
217+
</tr>
218+
<tr>
219+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#0078d7">themePrimary: #0078d7</td>
220+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
221+
</tr>
222+
<tr>
223+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
224+
</tr>
225+
<tr>
226+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
227+
</tr>
228+
<tr>
229+
<td style="color:white; background-color:#2b88d8">themeSecondary: #2b88d8</td>
230+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
231+
</tr>
232+
<tr>
233+
<td style="color:black; background-color:#71afe5">themeTertiary: #71afe5</td>
234+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
235+
</tr>
236+
<tr>
237+
<td style="color:black; background-color:#c7e0f4">themeLight: #c7e0f4</td>
238+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
239+
</tr>
240+
<tr>
241+
<td style="color:black; background-color:#deecf9">themeLighter: #deecf9</td>
242+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
243+
</tr>
244+
<tr>
245+
<td style="color:black; background-color:#eff6fc">themeLighterAlt: #eff6fc</td>
246+
<td style="color:black; background-color:#fff">white: #fff</td>
247+
</tr>
248+
</table>
249+
250+
<br/>
251+
252+
### Purple
253+
254+
<table>
255+
<tr>
256+
<td style="color:white; background-color:#27268a">themeDarker: #27268a</td>
257+
<td style="color:white; background-color:#000000">black: #000000</td>
258+
</tr>
259+
<tr>
260+
<td style="color:white; background-color:#3230b0">themeDark: #3230b0</td>
261+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
262+
</tr>
263+
<tr>
264+
<td style="color:white; background-color:#5250cf">themeDarkAlt: #5250cf</td>
265+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
266+
</tr>
267+
<tr>
268+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#6b69d6">themePrimary: #6b69d6</td>
269+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
270+
</tr>
271+
<tr>
272+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
273+
</tr>
274+
<tr>
275+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
276+
</tr>
277+
<tr>
278+
<td style="color:white; background-color:#7a78da">themeSecondary: #7a78da</td>
279+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
280+
</tr>
281+
<tr>
282+
<td style="color:black; background-color:#c1c0ee">themeTertiary: #c1c0ee</td>
283+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
284+
</tr>
285+
<tr>
286+
<td style="color:black; background-color:#e1e1f7">themeLight: #e1e1f7</td>
287+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
288+
</tr>
289+
<tr>
290+
<td style="color:black; background-color:#f0f0fb">themeLighter: #f0f0fb</td>
291+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
292+
</tr>
293+
<tr>
294+
<td style="color:black; background-color:#f8f7fd">themeLighterAlt: #f8f7fd</td>
295+
<td style="color:black; background-color:#fff">white: #fff</td>
296+
</tr>
297+
</table>
298+
299+
<br/>
300+
301+
### Gray
302+
303+
<table>
304+
<tr>
305+
<td style="color:white; background-color:#323130">themeDarker: #323130</td>
306+
<td style="color:white; background-color:#000000">black: #000000</td>
307+
</tr>
308+
<tr>
309+
<td style="color:white; background-color:#403e3d">themeDark: #403e3d</td>
310+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
311+
</tr>
312+
<tr>
313+
<td style="color:white; background-color:#53504e">themeDarkAlt: #53504e</td>
314+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
315+
</tr>
316+
<tr>
317+
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#5d5a58">themePrimary: #5d5a58</td>
318+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
319+
</tr>
320+
<tr>
321+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
322+
</tr>
323+
<tr>
324+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
325+
</tr>
326+
<tr>
327+
<td style="color:white; background-color:#6d6a67">themeSecondary: #6d6a67</td>
328+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
329+
</tr>
330+
<tr>
331+
<td style="color:black; background-color:#bbb9b8">themeTertiary: #bbb9b8</td>
332+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
333+
</tr>
334+
<tr>
335+
<td style="color:black; background-color:#dfdedd">themeLight: #dfdedd</td>
336+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
337+
</tr>
338+
<tr>
339+
<td style="color:black; background-color:#efeeee">themeLighter: #efeeee</td>
340+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
341+
</tr>
342+
<tr>
343+
<td style="color:black; background-color:#f7f7f7">themeLighterAlt: #f7f7f7</td>
344+
<td style="color:black; background-color:#fff">white: #fff</td>
345+
</tr>
346+
</table>
347+
348+
<br/>
349+
350+
## See also
57351
- [Designing great SharePoint experiences](design-guidance-overview.md)

0 commit comments

Comments
 (0)