Skip to content

Commit 276c0f8

Browse files
mbicembice
committed
Align heading styles and font sizes with OOB SharePoint
1 parent 221ab47 commit 276c0f8

31 files changed

+131
-117
lines changed

‎src/controls/richText/RichText.module.scss

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -65,24 +65,28 @@
6565
.toolbarDropDownOption {
6666

6767
&.toolbarButtonH2 {
68-
font-size: 21px;
69-
font-weight: 100;
68+
font-size: 20px;
69+
font-weight: 600;
7070
}
7171

7272
&.toolbarButtonH3 {
73-
font-size: 14px;
74-
font-weight: 100 !important;
73+
font-size: 18px;
74+
font-weight: 600;
7575
}
7676

7777
&.toolbarButtonH4 {
78-
font-size: 14px;
79-
font-weight: 100 !important;
78+
font-size: 16px;
79+
font-weight: 600;
8080
}
8181

8282
&.toolbarButtonBlockQuote {
83-
font-size: 14px;
83+
font-size: 16px;
8484
font-style: italic;
8585
}
86+
87+
&.toolbarButtonNormal {
88+
font-size: 16px;
89+
}
8690
}
8791

8892
.toolbarSubmenuCaret {
@@ -179,7 +183,7 @@
179183
.ql-snow .ql-toolbar button {
180184
background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
181185
color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
182-
font-size: 14px;
186+
font-size: 16px;
183187
min-width: 34px;
184188
height: 34px;
185189
padding-top: 4px;
@@ -250,21 +254,21 @@
250254
min-height: 68px;
251255
font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
252256
BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
253-
font-size: 17px;
257+
font-size: 18px;
254258

255259
h2 {
256-
font-weight: 100 !important;
260+
font-weight: 600 !important;
257261
font-size: 28px;
258262
}
259263

260264
h3 {
261265
font-size: 24px;
262-
font-weight: 100 !important;
266+
font-weight: 600 !important;
263267
}
264268

265269
h4 {
266-
font-size: 21px;
267-
font-weight: 100 !important;
270+
font-size: 20px;
271+
font-weight: 600 !important;
268272
}
269273

270274
blockquote,
@@ -276,14 +280,13 @@
276280
p,
277281
ul {
278282
-webkit-font-smoothing: antialiased;
279-
color: "[theme:black, default:#{$ms-color-black}]";
280283
line-height: 1.3;
281284
// margin: 0 0 16px;
282285
word-wrap: break-word;
283286
}
284287

285288
blockquote {
286-
border-bottom-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
289+
border-bottom-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
287290
border-bottom-style: solid;
288291
border-bottom-width: 1px;
289292
border-left-style: none;
@@ -292,14 +295,13 @@
292295
border-right-style: none;
293296
border-right-width: 0;
294297
border-right-color: transparent;
295-
border-top-color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
298+
border-top-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
296299
border-top-style: solid;
297300
border-top-width: 1px;
298-
color: "[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]";
299-
font-size: 24px;
301+
font-size: 20px;
300302
font-style: italic;
301-
font-weight: 100;
302-
line-height: 31.2px;
303+
font-weight: 600;
304+
line-height: 1.3;
303305
margin-bottom: 28px;
304306
padding-bottom: 32px;
305307
margin-top: 28px;
@@ -311,6 +313,10 @@
311313
text-align: center;
312314
}
313315

316+
.ql-size-xsmall {
317+
font-size: 10px;
318+
}
319+
314320
.ql-size-small {
315321
font-size: 12px;
316322
}
@@ -320,15 +326,15 @@
320326
}
321327

322328
.ql-size-mediumplus {
323-
font-size: 15px;
329+
font-size: 16px;
324330
}
325331

326332
.ql-size-large {
327-
font-size: 17px;
333+
font-size: 18px;
328334
}
329335

330336
.ql-size-xlarge {
331-
font-size: 21px;
337+
font-size: 20px;
332338
}
333339

334340
.ql-size-xlargeplus {
@@ -350,15 +356,19 @@
350356
.ql-size-super {
351357
font-size: 42px;
352358
}
359+
360+
.ql-size-superlarge {
361+
font-size: 68px;
362+
}
353363
}
354364

355365
@media screen and (min-width: 1024px) {
356366
.ql-editor div,
357367
.ql-editor ol,
358368
.ql-editor p,
359369
.ql-editor ul {
360-
font-size: 17px;
361-
font-weight: 300;
370+
font-size: 18px;
371+
font-weight: 400;
362372
line-height: 1.3;
363373
}
364374
}
@@ -375,8 +385,8 @@
375385
.ql-editor.ql-blank::before {
376386
font-style: normal;
377387
color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
378-
font-size: 17px;
379-
font-weight: 300;
388+
font-size: 18px;
389+
font-weight: 400;
380390
line-height: 1.3;
381391
}
382392

‎src/controls/richText/RichText.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
4141
private _richTextId = undefined;
4242

4343
private ddStyleOpts = [{
44-
key: 0,
45-
text: strings.HeaderNormalText,
46-
data: {}
47-
}, {
4844
key: 2,
4945
text: strings.HeaderH2,
5046
data:
@@ -59,6 +55,10 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
5955
text: strings.HeaderH4,
6056
data:
6157
{ className: styles.toolbarButtonH4 }
58+
}, {
59+
key: 0,
60+
text: strings.HeaderNormalText,
61+
data: { className: styles.toolbarButtonNormal }
6262
}, {
6363
key: 7,
6464
text: strings.HeaderBlockQuote,
@@ -511,7 +511,8 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
511511
'xxlarge',
512512
'xxxlarge',
513513
'xxlargeplus',
514-
'super'];
514+
'super',
515+
'superlarge'];
515516
ReactQuillInstance.register(sizeClass, true);
516517

517518
return (

‎src/controls/richText/RichText.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export interface StyleOptions {
105105
showImage?: boolean;
106106

107107
/**
108-
* Indicates if we should show the Styles button (Heading 1, Heading 2, ..., Pull quote)
108+
* Indicates if we should show the Styles button (Heading 2, Heading 3, ..., Pull quote)
109109
* @defaultvalue true
110110
*/
111111
showStyles?: boolean;

‎src/controls/richText/RichTextPropertyPane.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,16 +190,18 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
190190
ariaLabel={strings.FontSizeTitle}
191191
selectedKey={selectedSize}
192192
options={[
193+
{ key: 'xsmall', text: '10' },
193194
{ key: 'small', text: '12' },
194195
{ key: 'medium', text: '14' },
195-
{ key: 'mediumplus', text: '15' },
196-
{ key: 'large', text: '17' },
197-
{ key: 'xlarge', text: '21' },
196+
{ key: 'mediumplus', text: '16' },
197+
{ key: 'large', text: '18' },
198+
{ key: 'xlarge', text: '20' },
198199
{ key: 'xlargeplus', text: '24' },
199200
{ key: 'xxlarge', text: '28' },
200201
{ key: 'xxxlarge', text: '32' },
201202
{ key: 'xxlargeplus', text: '36' },
202203
{ key: 'super', text: '42' },
204+
{ key: 'superlarge', text: '68' }
203205
]}
204206
onChanged={this.onChangeSize}
205207
/>

‎src/loc/bg-bg.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ define([], () => {
7979
"mapsTitlePrefix": "Карта на",
8080
"ListViewFilterLabel": "Филтриране на списъка",
8181
"HeaderNormalText": "Нормален текст",
82-
"HeaderH2": "Функция 1",
83-
"HeaderH3": "Функция 2",
84-
"HeaderH4": "Функция 3",
82+
"HeaderH2": "Функция 2",
83+
"HeaderH3": "Функция 3",
84+
"HeaderH4": "Функция 4",
8585
"HeaderBlockQuote": "Изтегли цитат",
8686
"AlignLeft": "Подравни отляво",
8787
"AlignCenter": "Център",

‎src/loc/ca-es.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ define([], () => {
7979
"mapsTitlePrefix": "Mapa de",
8080
"ListViewFilterLabel": "Filtrar la llista",
8181
"HeaderNormalText": "Text normal",
82-
"HeaderH2": "Encapçalament 1",
83-
"HeaderH3": "Encapçalament 2",
84-
"HeaderH4": "Encapçalament 3",
82+
"HeaderH2": "Encapçalament 2",
83+
"HeaderH3": "Encapçalament 3",
84+
"HeaderH4": "Encapçalament 4",
8585
"HeaderBlockQuote": "Cita introductòria",
8686
"AlignLeft": "Alinea a l'esquerra",
8787
"AlignCenter": "Centre",

‎src/loc/da-dk.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ define([], () => {
7979
"mapsTitlePrefix": "Kort over",
8080
"ListViewFilterLabel": "Filtrere listen",
8181
"HeaderNormalText": "Normal tekst",
82-
"HeaderH2": "Overskrift 1",
83-
"HeaderH3": "Overskrift 2",
84-
"HeaderH4": "Overskrift 3",
82+
"HeaderH2": "Overskrift 2",
83+
"HeaderH3": "Overskrift 3",
84+
"HeaderH4": "Overskrift 4",
8585
"HeaderBlockQuote": "Citat",
8686
"AlignLeft": "Venstrejusteret",
8787
"AlignCenter": "Midte",

‎src/loc/de-de.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ define([], () => {
7979
"mapsTitlePrefix": "Karte von",
8080
"ListViewFilterLabel": "Filter",
8181
"HeaderNormalText": "Standardtext",
82-
"HeaderH2": "Überschrift 1",
83-
"HeaderH3": "Überschrift 2",
84-
"HeaderH4": "Überschrift 3",
82+
"HeaderH2": "Überschrift 2",
83+
"HeaderH3": "Überschrift 3",
84+
"HeaderH4": "Überschrift 4",
8585
"HeaderBlockQuote": "Textzitat",
8686
"AlignLeft": "Linksbündig",
8787
"AlignCenter": "Zentrieren",

‎src/loc/el-gr.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ define([], () => {
7979
"mapsTitlePrefix": "Χάρτης",
8080
"ListViewFilterLabel": "Φιλτράρισμα της λίστας",
8181
"HeaderNormalText": "Κανονικό κείμενο",
82-
"HeaderH2": "Τομέας 1",
83-
"HeaderH3": "Τομέας 2",
84-
"HeaderH4": "Τομέας 3",
82+
"HeaderH2": "Τομέας 2",
83+
"HeaderH3": "Τομέας 3",
84+
"HeaderH4": "Τομέας 4",
8585
"HeaderBlockQuote": "Ελκυστική φράση",
8686
"AlignLeft": "Στοίχιση αριστερά",
8787
"AlignCenter": "Κέντρο",

‎src/loc/en-us.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,11 @@ define([], () => {
9090
ListViewFilterLabel: "Filter the list",
9191

9292
HeaderNormalText: "Normal text",
93-
HeaderH2: "Heading 1",
94-
HeaderH3: "Heading 2",
95-
HeaderH4: "Heading 3",
93+
HeaderH2: "Heading 2",
94+
HeaderH3: "Heading 3",
95+
HeaderH4: "Heading 4",
9696
HeaderBlockQuote: "Pull quote",
97+
HeaderMonospaced: "Monospaced",
9798
AlignLeft: "Align left",
9899
AlignCenter: "Center",
99100
AlignRight: "Align right",

0 commit comments

Comments
 (0)