/
_stacks-constants-type.less
92 lines (81 loc) · 3.46 KB
/
_stacks-constants-type.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//
// STACK OVERFLOW
// CONSTANTS -- TYPOGRAPHY
//
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
// Stack Overflow. For documentation of all these classes and how to contribute,
// visit https://stackoverflow.design/
//
// These are the Stacks type variables. These should be used in place of
// hard-coded values within CSS declarations.
//
//
// ============================================================================
// $ FONT FAMILY (ff-)
// ----------------------------------------------------------------------------
@ff-sans:
-apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
"Segoe UI", // Windows
"Liberation Sans", // Linux
sans-serif; // The final fallback for rendering in sans-serif.
@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@ff-mono:
ui-monospace, // San Francisco Mono on macOS and iOS
"Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
"Liberation Mono", // Linux
Menlo, Monaco, Consolas, // A few sensible system font choices
monospace; // The final fallback for rendering in monospace.
body {
--ff-sans: @ff-sans;
--ff-serif: @ff-serif;
--ff-mono: @ff-mono;
--theme-body-font-family: var(--ff-sans);
}
// ============================================================================
// $ FONT SIZES (fs-)
// Base font-size is 13px.
// ----------------------------------------------------------------------------
@fs-fine: 11px;
@fs-caption: 12px;
@fs-body1: 13px;
// Relative to the root element
@fs-body2: 1.153846154rem;
@fs-body3: 1.307692308rem;
@fs-subheading: 1.461538462rem;
@fs-title: 1.615384615rem;
@fs-headline1: 2.076923077rem;
@fs-headline2: 2.615384615rem;
@fs-display1: 3.307692308rem;
@fs-display2: 4.230769231rem;
@fs-display3: 5.307692308rem;
@fs-display4: 7.615384615rem;
// Relative to the parent
@fs-body2-relative: 1.153846154em;
@fs-body3-relative: 1.307692308em;
@fs-subheading-relative: 1.461538462em;
@fs-title-relative: 1.615384615em;
@fs-headline1-relative: 2.076923077em;
@fs-headline2-relative: 2.615384615em;
@fs-display1-relative: 3.307692308em;
@fs-display2-relative: 4.230769231em;
@fs-display3-relative: 5.307692308em;
@fs-display4-relative: 7.615384615em;
@fs-base: 13px;
// ============================================================================
// $ LINE HEIGHT (lh-)
// ----------------------------------------------------------------------------
// Need to remove the unit off the font-size to make line-height unitless
// FIXME this shouldn't be public.
@_stacks-internals-lh-unit: unit(@fs-base);
// Now the various line-height variables
@lh-xs: 1;
@lh-sm: ((@_stacks-internals-lh-unit + 2) / @_stacks-internals-lh-unit);
@lh-md: ((@_stacks-internals-lh-unit + 4) / @_stacks-internals-lh-unit);
@lh-lg: ((@_stacks-internals-lh-unit + 8) / @_stacks-internals-lh-unit);
@lh-xl: ((@_stacks-internals-lh-unit + 12) / @_stacks-internals-lh-unit);
@lh-xxl: 2;
@lh-base: @lh-md;
// Holdover line-heights from production. These are NOT to be used and
// need to be deprecated.
// ----------------------------------------------------------------------------
@lh-6: ((@_stacks-internals-lh-unit + 6) / @_stacks-internals-lh-unit);