- {value}
-
- ))}
- - There are no Sass variables for font styles at this time. -
- -#### Possible Values +The font style classes available are `.fst-normal` and `.fst-italic`. -1.5 for body text and 1.2 for headings.
-To make the line height equal to the font size, you can use the `.lh-1` class.
-There are no Sass variables for these row heights.
-Font sans-serif
`; + case 'Style': + return html` + ${['normal', 'italic'].map( + (val: string) => html`Font style ${val}
`, + )} + `; + case 'Weight': + return html` + ${['normal', 'bold'].map( + (val: string) => html`Font weight ${val}
`, + )} + `; + case 'Line height': + return html` + ${['1', 'base', 'sm', 'lg'].map( + (val: string) => html`Line height ${val}
`, + )} + `; + case 'Text align': + return html` + ${['start', 'end', 'center'].map( + val => html` +Text align ${val}
+Text decoration ${val}
`, + )} + `; + case 'Text transform': + return html` + ${['lowercase', 'uppercase', 'capitalize'].map( + val => html`Text transform ${val}
`, + )} + `; + case 'White space': + return html` + ${['wrap', 'nowrap'].map( + val => + html` ++ White space ${val} White space ${val} White space ${val} White space ${val} +
+ `, + )} + `; + case 'Word wrap break': + return html` + ${['break'].map( + val => + html` +Averylongwordthatwillbreak
+ `, + )} + `; + } +} + +export const Text: Story = { + render: () => { + return schemes( + () => html`This is sans serif text.
`, }; -export const FontSize: Story = { - render: () => html`This is tiny text.
`, -}; - export const FontWeight: Story = { render: () => html`This is bold text.
`, }; @@ -34,18 +30,10 @@ export const LineHeight: Story = { render: () => html`This text has a line height equal to the font size.
`, }; -export const TextColor: Story = { - decorators: [story => html`This is colored text.
- This is a colored link, it lightens on hover. - `, -}; - export const TextColorReset: Story = { decorators: [story => html`+
This is colored text with a link of the same color. @@ -96,6 +84,6 @@ export const TextDecoration: Story = { render: () => html`
This text has a line underneath it.
This text has a line going through it.
- This link has its text decoration removed + This link has its text decoration removed. `, }; diff --git a/packages/documentation/src/stories/utilities/text/text.styles.scss b/packages/documentation/src/stories/utilities/text/text.styles.scss index 509c0b15af..2ff08dd917 100644 --- a/packages/documentation/src/stories/utilities/text/text.styles.scss +++ b/packages/documentation/src/stories/utilities/text/text.styles.scss @@ -3,3 +3,11 @@ .my-container { background-color: post.$info; } + +.text-example-bordered { + border: 1px solid post.$gray-40; +} + +.my-colored-text { + color: post.$error; +} diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss index e8d4bde6d1..d39049c3dc 100644 --- a/packages/styles/src/themes/bootstrap/_utilities.scss +++ b/packages/styles/src/themes/bootstrap/_utilities.scss @@ -69,4 +69,15 @@ $utilities: map.remove($utilities, 'overflow'); $utilities: map.remove($utilities, 'overflow-x'); $utilities: map.remove($utilities, 'overflow-y'); +$utilities: map.remove($utilities, 'font-family'); +$utilities: map.remove($utilities, 'font-size'); +$utilities: map.remove($utilities, 'font-style'); +$utilities: map.remove($utilities, 'font-weight'); +$utilities: map.remove($utilities, 'line-height'); +$utilities: map.remove($utilities, 'text-align'); +$utilities: map.remove($utilities, 'text-decoration'); +$utilities: map.remove($utilities, 'text-transform'); +$utilities: map.remove($utilities, 'white-space'); +$utilities: map.remove($utilities, 'word-wrap'); + @import 'bootstrap/scss/utilities/api'; diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss index 04b78b2890..dae9454577 100644 --- a/packages/styles/src/utilities/_variables.scss +++ b/packages/styles/src/utilities/_variables.scss @@ -28,6 +28,15 @@ $position-values: ( 100: 100%, ); +$font-family-sans-serif: var(--post-device-font-family-default); + +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; + +$line-height-base: 1.5 !default; +$line-height-sm: 1.25 !default; +$line-height-lg: 2 !default; + $utilities: ( 'width': ( responsive: true, @@ -424,5 +433,70 @@ $utilities: ( property: overflow-y, values: auto hidden visible scroll, ), + 'font-family': ( + property: font-family, + class: font, + values: ( + 'sans-serif': $font-family-sans-serif, + ), + ), + 'font-style': ( + property: font-style, + class: fst, + values: italic normal, + ), + 'font-weight': ( + property: font-weight, + class: fw, + values: ( + normal: $font-weight-normal, + bold: $font-weight-bold, + ), + ), + 'line-height': ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ), + ), + 'text-align': ( + responsive: true, + property: text-align, + class: text, + values: ( + start: left, + end: right, + center: center, + ), + ), + 'text-decoration': ( + property: text-decoration, + values: none underline line-through, + ), + 'text-transform': ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize, + ), + 'white-space': ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ), + ), + 'word-wrap': ( + property: word-wrap word-break, + class: text, + values: ( + break: break-word, + ), + rtl: false, + ), // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`. );