diff --git a/docs/source/text.md b/docs/source/text.md index 920d93aee..35ca5d312 100644 --- a/docs/source/text.md +++ b/docs/source/text.md @@ -4,3 +4,235 @@ title: "Text" --- # Text + + + +

Font family

+ +```html +
+``` + +```less +div { + .text-mono; +} +``` + +```less +// Customize the font stack +@system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; +@font-family-base: @system-font-stack; +@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; +``` + +

Font sizes

+ +```html +
+
+
+
+
+
+
+``` + +```less +div { + .text-xs; + .text-sm; + .text-base; + .text-lg; + .text-xl; + .text-2xl; + .text-3xl; +} +``` + +```less +// Customize the text size scale +@text-size-scale: + 'xs' @font-size-xs, + 'sm' @font-size-sm, + 'base' @font-size-base, + 'lg' @font-size-lg, + 'xl' @font-size-xl, + '2xl' @font-size-2xl, + '3xl' @font-size-3xl, +; +``` + +

Font weight

+ +```html +
+
+
+
+
+``` + +```less +div { + .text-hairline; + .text-thin; + .text-regular; + .text-medium; + .text-bold; +} +``` + +```less +// Customize the text weight scale +@text-weight-scale: + 'hairline' 200, + 'thin' 300, + 'regular' 400, + 'medium' 600, + 'bold' 700, +; +``` + +

Colors

+ +```html +
+
+
+
+ +
+
+
+
+``` + +```less +div { + .text-light; + .text-light-soft; + .text-light-softer; + .text-light-softest; + + .text-dark; + .text-dark-soft; + .text-dark-softer; + .text-dark-softest; +} +``` + +```less +// Customize the text colors +@text-colors: + 'light' hsl(0, 0%, 100%), + 'light-soft' hsl(0, 0%, 60%), + 'light-softer' hsl(0, 0%, 45%), + 'light-softest' hsl(0, 0%, 35%), + + 'dark' hsl(0, 0%, 25%), + 'dark-soft' hsl(0, 0%, 50%), + 'dark-softer' hsl(0, 0%, 65%), + 'dark-softest' hsl(0, 0%, 75%), +; +``` + +

Alignment

+ +```less +div { + // Horizontal + .text-center; + .text-left; + .text-right; + .text-justify; + + // Vertical + .align-baseline; + .align-top; + .align-middle; + .align-bottom; + .align-text-top; + .align-text-bottom; +} +``` + +

Styles

+ +```less +div { .text-em; } // Italic +div { .text-uppercase; } // Uppercase +div { .text-underline; } // Underline +div { .text-break; } // Pre line +div { .text-no-wrap; } // No wrap +div { .text-force-wrap; } // Break word +div { .text-smooth; } // Anti-aliased +div { .text-strike; } // Line through +div { .text-ellipsis; } // Overflow ellipsis +div { .text-shadow-solid; } // Shadow +``` + +

Line height

+ +```html +
+
+
+
+``` + +```less +div { + .leading-none; + .leading-tight; + .leading-normal; + .leading-loose; +} +``` + +```less +// Set the default line height +@line-height: 1.5; + +// Customize the leading scale +@leading-scale: + 'none' 1, + 'tight' 1.25, + 'normal' 1.5, + 'loose' 2, +; +``` + +

Letter spacing

+ +```html +
+
+
+``` + +```less +div { + .tracking-tight; + .tracking-normal; + .tracking-wide; +} +``` + +```less +// Customize the tracking scale +@tracking-scale: + 'tight' -0.05em, + 'normal' 0, + 'wide' 0.1em, +; +```