mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
142 lines
4.0 KiB
Plaintext
142 lines
4.0 KiB
Plaintext
// Font family
|
|
@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;
|
|
|
|
// Default line height
|
|
@line-height: 1.5;
|
|
|
|
// Sizes
|
|
@font-size-xs: (12rem / 16rem); // 12px
|
|
@font-size-sm: (14rem / 16rem); // 14px
|
|
@font-size-base: 1rem; // 16px
|
|
@font-size-lg: (18rem / 16rem); // 18px
|
|
@font-size-xl: (22rem / 16rem); // 22px
|
|
@font-size-2xl: (30rem / 16rem); // 30px
|
|
@font-size-3xl: (40rem / 16rem); // 40px
|
|
|
|
@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;
|
|
|
|
// Weights
|
|
@font-weight-hairline: 200;
|
|
@font-weight-thin: 300;
|
|
@font-weight-regular: 400;
|
|
@font-weight-medium: 600;
|
|
@font-weight-bold: 700;
|
|
|
|
// Colors
|
|
@text-light: hsl(0, 0%, 100%);
|
|
@text-light-soft: hsl(0, 0%, 60%);
|
|
@text-light-softer: hsl(0, 0%, 45%);
|
|
@text-light-softest: hsl(0, 0%, 35%);
|
|
|
|
@text-dark: hsl(0, 0%, 25%);
|
|
@text-dark-soft: hsl(0, 0%, 50%);
|
|
@text-dark-softer: hsl(0, 0%, 65%);
|
|
@text-dark-softest: hsl(0, 0%, 75%);
|
|
|
|
// Sizes
|
|
.define-text-sizes(
|
|
'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
|
|
; @screens);
|
|
|
|
// Weights
|
|
.define-text-weights(
|
|
'hairline' @font-weight-hairline,
|
|
'thin' @font-weight-thin,
|
|
'regular' @font-weight-regular,
|
|
'medium' @font-weight-medium,
|
|
'bold' @font-weight-bold
|
|
; @screens);
|
|
|
|
// Colors
|
|
@text-colors:
|
|
'light' @text-light,
|
|
'light-soft' @text-light-soft,
|
|
'light-softer' @text-light-softer,
|
|
'light-softest' @text-light-softest,
|
|
|
|
'dark' @text-dark,
|
|
'dark-soft' @text-dark-soft,
|
|
'dark-softer' @text-dark-softer,
|
|
'dark-softest' @text-dark-softest,
|
|
;
|
|
.define-text-colors(@text-colors; @screens);
|
|
|
|
// Line heights
|
|
@leading-scale:
|
|
'none' 1,
|
|
'tight' 1.25,
|
|
'normal' 1.5,
|
|
'loose' 2,
|
|
;
|
|
.define-leading-utilities(@leading-scale; @screens);
|
|
|
|
// Horizontal alignment
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
// Vertical alignment
|
|
.align-baseline { vertical-align: baseline; }
|
|
.align-top { vertical-align: top; }
|
|
.align-middle { vertical-align: middle; }
|
|
.align-bottom { vertical-align: bottom; }
|
|
.align-text-top { vertical-align: text-top; }
|
|
.align-text-bottom { vertical-align: text-bottom; }
|
|
|
|
// Styles
|
|
.text-em { font-style: italic; }
|
|
.text-uppercase { text-transform: uppercase; }
|
|
.text-underline { text-decoration: underline; }
|
|
.text-break { white-space: pre-line; }
|
|
.text-no-wrap { white-space: nowrap; }
|
|
.text-force-wrap { word-wrap: break-word; }
|
|
.text-smooth { -webkit-font-smoothing: antialiased; }
|
|
.text-spaced { letter-spacing: 0.05em; }
|
|
.text-strike { text-decoration: line-through; }
|
|
.text-shadow-solid { text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
|
|
.text-mono { font-family: @font-family-mono; }
|
|
.text-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.responsive({
|
|
&text-center { .text-center; }
|
|
&text-left { .text-left; }
|
|
&text-right { .text-right; }
|
|
&align-baseline { .align-baseline; }
|
|
&align-top { .align-top; }
|
|
&align-middle { .align-middle; }
|
|
&align-bottom { .align-bottom; }
|
|
&align-text-top { .align-text-top; }
|
|
&align-text-bottom { .align-text-bottom; }
|
|
&text-em { .text-em; }
|
|
&text-uppercase { .text-uppercase; }
|
|
&text-underline { .text-underline; }
|
|
&text-break { .text-break; }
|
|
&text-no-wrap { .text-no-wrap; }
|
|
&text-force-wrap { .text-force-wrap; }
|
|
&text-smooth { .text-smooth; }
|
|
&text-spaced { .text-spaced; }
|
|
&text-strike { .text-strike; }
|
|
&text-shadow-solid { .text-shadow-solid; }
|
|
&text-mono { .text-mono; }
|
|
&text-ellipsis { .text-ellipsis; }
|
|
});
|