@stackoverflow/stacks 3.0.0-beta.14 → 3.0.0-beta.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/stacks.css +276 -353
- package/dist/css/stacks.min.css +1 -1
- package/lib/base/body.less +1 -1
- package/lib/components/notice/notice.less +82 -73
- package/lib/components/popover/popover.less +2 -2
- package/lib/components/post-summary/post-summary.less +2 -2
- package/lib/components/prose/prose.less +5 -5
- package/lib/components/toast/toast.less +1 -2
- package/lib/components/user-card/user-card.less +88 -96
- package/lib/exports/constants-helpers.less +1 -1
- package/lib/exports/constants-type.less +18 -36
- package/package.json +1 -1
package/lib/base/body.less
CHANGED
|
@@ -9,32 +9,18 @@
|
|
|
9
9
|
*/
|
|
10
10
|
.generate-variant-variables(@colorName: "", @modifier: "") {
|
|
11
11
|
& when (@modifier = "") {
|
|
12
|
-
--_no-bc: ~"var(--@{colorName}-300)";
|
|
13
12
|
--_no-bg: ~"var(--@{colorName}-100)";
|
|
14
|
-
--_no-
|
|
15
|
-
--_no-btn-bg-focus: ~"var(--@{colorName}-200)";
|
|
16
|
-
--_no-btn-fc: ~"var(--@{colorName}-500)";
|
|
13
|
+
--_no-icon-bg: ~"var(--@{colorName}-200)";
|
|
17
14
|
--_no-code-bc: ~"var(--@{colorName}-300)";
|
|
18
15
|
--_no-code-bg: ~"var(--@{colorName}-200)";
|
|
19
|
-
|
|
20
|
-
.highcontrast-mode({
|
|
21
|
-
--_no-bc: ~"var(--@{colorName}-400)";
|
|
22
|
-
});
|
|
23
16
|
}
|
|
24
17
|
|
|
25
18
|
& when (@modifier = important) {
|
|
26
|
-
--_no-bc: var(--_no-bg);
|
|
27
19
|
--_no-bg: ~"var(--@{colorName}-400)";
|
|
20
|
+
--_no-icon-bg: ~"var(--@{colorName}-500)";
|
|
28
21
|
--_no-fc: var(--white);
|
|
29
|
-
--_no-btn-bg-active: ~"var(--@{colorName}-500)";
|
|
30
|
-
--_no-btn-bg-focus: ~"var(--@{colorName}-500)";
|
|
31
|
-
--_no-btn-fc: ~"var(--@{colorName}-100)";
|
|
32
22
|
--_no-code-bc: ~"var(--@{colorName}-300)";
|
|
33
23
|
--_no-code-bg: ~"var(--@{colorName}-500)";
|
|
34
|
-
|
|
35
|
-
.highcontrast-mode({
|
|
36
|
-
--_no-bg: ~"var(--@{colorName}-500)";
|
|
37
|
-
});
|
|
38
24
|
}
|
|
39
25
|
}
|
|
40
26
|
|
|
@@ -47,47 +33,27 @@
|
|
|
47
33
|
* @baseClass - The base class name for the notice component
|
|
48
34
|
*/
|
|
49
35
|
.construct-notice-component(@baseClass) {
|
|
50
|
-
--_no-
|
|
51
|
-
--_no-bg: var(--black-
|
|
52
|
-
--_no-fc: var(--black-
|
|
53
|
-
--_no-btn-bg-active: var(--black-250);
|
|
54
|
-
--_no-btn-bg-focus: var(--black-225);
|
|
55
|
-
--_no-btn-fc: var(--_no-fc);
|
|
36
|
+
--_no-bg: var(--black-150);
|
|
37
|
+
--_no-icon-bg: var(--black-200);
|
|
38
|
+
--_no-fc: var(--black-600);
|
|
56
39
|
--_no-code-bc: var(--black-300);
|
|
57
40
|
--_no-code-bg: var(--black-200);
|
|
58
41
|
--_no-code-fc: var(--_no-fc);
|
|
59
42
|
|
|
60
43
|
// CONTEXTUAL STYLES
|
|
61
44
|
.highcontrast-mode({
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
&.@{baseClass}__info,
|
|
65
|
-
&.@{baseClass}__success,
|
|
66
|
-
&.@{baseClass}__warning {
|
|
67
|
-
--_no-code-bc: var(--black-400);
|
|
68
|
-
--_no-code-bg: var(--white);
|
|
69
|
-
--_no-code-fc: var(--black);
|
|
70
|
-
|
|
71
|
-
&.@{baseClass}__important {
|
|
72
|
-
--_no-code-bc: var(--black-200);
|
|
73
|
-
--_no-code-bg: var(--black);
|
|
74
|
-
--_no-code-fc: var(--white);
|
|
75
|
-
}
|
|
45
|
+
&:not(&__important) {
|
|
46
|
+
--_no-icon-bc: var(--_no-code-bc);
|
|
76
47
|
}
|
|
77
|
-
|
|
78
|
-
--_no-bc: var(--black-400);
|
|
79
48
|
});
|
|
80
49
|
|
|
81
50
|
// MODIFIERS
|
|
82
|
-
&__important
|
|
83
|
-
--_no-
|
|
84
|
-
--_no-bg: var(--black-500);
|
|
51
|
+
&__important {
|
|
52
|
+
--_no-bg: var(--black-400);
|
|
53
|
+
--_no-icon-bg: var(--black-500);
|
|
85
54
|
--_no-fc: var(--white);
|
|
86
|
-
--_no-btn-bg-focus: var(--black-600);
|
|
87
|
-
--_no-btn-bg-active: var(--black-600);
|
|
88
|
-
--_no-btn-fc: var(--_no-fc);
|
|
89
55
|
--_no-code-bc: var(--black-300);
|
|
90
|
-
--_no-code-bg: var(--black-
|
|
56
|
+
--_no-code-bg: var(--black-500);
|
|
91
57
|
}
|
|
92
58
|
|
|
93
59
|
// VARIANTS
|
|
@@ -103,11 +69,11 @@
|
|
|
103
69
|
|
|
104
70
|
&__info {
|
|
105
71
|
&:not(.@{baseClass}__important) {
|
|
106
|
-
.generate-variant-variables(
|
|
72
|
+
.generate-variant-variables(blue);
|
|
107
73
|
}
|
|
108
74
|
|
|
109
75
|
&.@{baseClass}__important {
|
|
110
|
-
.generate-variant-variables(
|
|
76
|
+
.generate-variant-variables(blue, important);
|
|
111
77
|
}
|
|
112
78
|
}
|
|
113
79
|
|
|
@@ -121,33 +87,57 @@
|
|
|
121
87
|
}
|
|
122
88
|
}
|
|
123
89
|
|
|
90
|
+
&__featured {
|
|
91
|
+
&:not(.@{baseClass}__important) {
|
|
92
|
+
.generate-variant-variables(purple);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.@{baseClass}__important {
|
|
96
|
+
.generate-variant-variables(purple, important);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__activity {
|
|
101
|
+
&:not(.@{baseClass}__important) {
|
|
102
|
+
.generate-variant-variables(pink);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.@{baseClass}__important {
|
|
106
|
+
.generate-variant-variables(pink, important);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
124
110
|
&__warning {
|
|
125
111
|
&:not(.@{baseClass}__important) {
|
|
126
112
|
.generate-variant-variables(yellow);
|
|
127
|
-
|
|
113
|
+
|
|
128
114
|
}
|
|
129
115
|
|
|
130
116
|
&.@{baseClass}__important {
|
|
131
|
-
--_no-
|
|
132
|
-
--_no-bg: var(--yellow-400);
|
|
117
|
+
--_no-bg: var(--yellow-300);
|
|
118
|
+
--_no-icon-bg: var(--yellow-400);
|
|
133
119
|
--_no-fc: var(--black);
|
|
134
|
-
--_no-
|
|
135
|
-
--_no-
|
|
136
|
-
|
|
137
|
-
--
|
|
138
|
-
|
|
120
|
+
--_no-code-bc: var(--yellow-400);
|
|
121
|
+
--_no-code-bg: var(--yellow-200);
|
|
122
|
+
|
|
123
|
+
.s-notice--icon {
|
|
124
|
+
color: var(--white);
|
|
125
|
+
}
|
|
139
126
|
|
|
140
127
|
.dark-mode({
|
|
141
128
|
--_no-fc: var(--white);
|
|
142
129
|
--_no-code-bc: var(--yellow-300);
|
|
143
130
|
--_no-code-bg: var(--yellow-500);
|
|
131
|
+
--_no-bg: var(--yellow-400);
|
|
132
|
+
--_no-icon-bg: var(--yellow-500);
|
|
144
133
|
});
|
|
145
134
|
|
|
146
135
|
.highcontrast-mode({
|
|
147
|
-
--_no-bg: var(--yellow-
|
|
136
|
+
--_no-bg: var(--yellow-400);
|
|
137
|
+
--_no-icon-bg: var(--yellow-500);
|
|
138
|
+
--_no-code-bc: var(--yellow-300);
|
|
139
|
+
--_no-code-bg: var(--yellow-500);
|
|
148
140
|
--_no-fc: var(--white);
|
|
149
|
-
--_no-btn-bg-active: transparent;
|
|
150
|
-
--_no-btn-bg-focus: transparent;
|
|
151
141
|
});
|
|
152
142
|
}
|
|
153
143
|
}
|
|
@@ -157,41 +147,60 @@
|
|
|
157
147
|
background-color: var(--_no-code-bg);
|
|
158
148
|
color: var(--_no-code-fc);
|
|
159
149
|
outline: var(--su-static1) solid var(--_no-code-bc);
|
|
160
|
-
|
|
161
|
-
border-radius: var(--br-md);
|
|
162
150
|
padding-left: var(--su2);
|
|
163
151
|
padding-right: var(--su2);
|
|
152
|
+
white-space: nowrap;
|
|
164
153
|
}
|
|
165
154
|
|
|
166
|
-
|
|
167
|
-
// TODO: decouple .s-notice--btn from .s-btn
|
|
155
|
+
button&--dismiss {
|
|
168
156
|
&:active {
|
|
169
|
-
background-color: var(--_no-
|
|
157
|
+
background-color: var(--_no-fc);
|
|
158
|
+
color: var(--_no-bg);
|
|
170
159
|
}
|
|
171
160
|
|
|
172
161
|
&:focus-visible,
|
|
173
162
|
&:hover,
|
|
174
163
|
&.focus-inset-bordered {
|
|
175
|
-
background-color: var(--_no-
|
|
164
|
+
background-color: var(--_no-fc);
|
|
165
|
+
color: var(--_no-bg);
|
|
176
166
|
}
|
|
167
|
+
}
|
|
177
168
|
|
|
178
|
-
|
|
179
|
-
padding: var(--
|
|
169
|
+
:has(>button&--dismiss) {
|
|
170
|
+
padding-left: var(--su24);
|
|
171
|
+
//Add spacing between multiple notice actions
|
|
172
|
+
gap: calc(var(--su24) - var(--su2)); //22px
|
|
173
|
+
//Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
|
|
174
|
+
word-wrap: initial !important;
|
|
180
175
|
}
|
|
181
176
|
|
|
182
177
|
// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
|
|
183
178
|
background: var(--_no-bg);
|
|
184
|
-
border-color: var(--_no-bc);
|
|
185
179
|
color: var(--_no-fc);
|
|
186
|
-
|
|
187
|
-
border-style: solid;
|
|
188
|
-
font-size: var(--fs-body1);
|
|
189
180
|
}
|
|
190
181
|
|
|
191
182
|
.s-notice {
|
|
192
183
|
.construct-notice-component(s-notice);
|
|
193
184
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
|
|
188
|
+
--_no-pd: var(--su8);
|
|
189
|
+
padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
|
|
190
|
+
|
|
191
|
+
&--icon {
|
|
192
|
+
background: var(--_no-icon-bg);
|
|
193
|
+
border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
|
|
194
|
+
padding: var(--_no-pd);
|
|
195
|
+
margin-right: var(--su12);
|
|
196
|
+
align-self: stretch;
|
|
197
|
+
|
|
198
|
+
//Position the svg icon
|
|
199
|
+
display: flex;
|
|
200
|
+
align-items: top;
|
|
201
|
+
|
|
202
|
+
//Negative margin to make up for s-notice's padding
|
|
203
|
+
margin-top: calc(var(--_no-pd) * -1);
|
|
204
|
+
margin-bottom: calc(var(--_no-pd) * -1);
|
|
205
|
+
}
|
|
197
206
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--_po-bc: var(--bc-medium);
|
|
4
4
|
--_po-bs: var(--bs-md);
|
|
5
5
|
--_po-d: none;
|
|
6
|
-
--_po-wmn:
|
|
6
|
+
--_po-wmn: 10.5rem;
|
|
7
7
|
--_po-w: 100%;
|
|
8
8
|
// content
|
|
9
9
|
// --_po-topbar-height assumes the topbar height based on topbar styles
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
border-radius: var(--br-md);
|
|
52
52
|
color: var(--fc-dark);
|
|
53
53
|
font-size: var(--fs-body1);
|
|
54
|
-
max-width:
|
|
54
|
+
max-width: 21rem;
|
|
55
55
|
padding: var(--su12);
|
|
56
56
|
position: absolute;
|
|
57
57
|
white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
|
|
@@ -270,8 +270,8 @@
|
|
|
270
270
|
font-size: var(--fs-body3);
|
|
271
271
|
font-weight: normal;
|
|
272
272
|
line-height: var(--lh-md);
|
|
273
|
-
margin-bottom: 0.
|
|
274
|
-
margin-top: -0.
|
|
273
|
+
margin-bottom: 0.3365rem;
|
|
274
|
+
margin-top: -0.125rem; // Optical alignment to compensate for title's containing block
|
|
275
275
|
padding-right: var(--su24);
|
|
276
276
|
}
|
|
277
277
|
|
|
@@ -49,11 +49,11 @@
|
|
|
49
49
|
&&__xs,
|
|
50
50
|
&&__sm,
|
|
51
51
|
&&__md {
|
|
52
|
-
--_pr-h1-fs:
|
|
53
|
-
--_pr-h2-fs:
|
|
54
|
-
--_pr-h3-fs:
|
|
55
|
-
--_pr-h4-fs:
|
|
56
|
-
--_pr-h5-fs:
|
|
52
|
+
--_pr-h1-fs: 1.75em;
|
|
53
|
+
--_pr-h2-fs: 1.375em;
|
|
54
|
+
--_pr-h3-fs: 1.25em;
|
|
55
|
+
--_pr-h4-fs: 1.125em;
|
|
56
|
+
--_pr-h5-fs: 1em;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&&__xs {
|
|
@@ -1,129 +1,121 @@
|
|
|
1
1
|
.s-user-card {
|
|
2
2
|
--_uc-ai: center;
|
|
3
|
-
--_uc-
|
|
4
|
-
--_uc-
|
|
5
|
-
--_uc-
|
|
6
|
-
--_uc-
|
|
7
|
-
--_uc-
|
|
8
|
-
--_uc-p: var(--su8);
|
|
9
|
-
--_uc-info-ai: unset;
|
|
10
|
-
--_uc-info-fd: column;
|
|
11
|
-
--_uc-link-fs: var(--fs-caption);
|
|
12
|
-
--_uc-link-ws: unset;
|
|
13
|
-
--_uc-rep-fc: unset;
|
|
14
|
-
--_uc-time-fc: var(--black-400);
|
|
15
|
-
--_uc-time-ws: unset;
|
|
16
|
-
--_uc-type-fc: var(--theme-primary-400);
|
|
17
|
-
|
|
18
|
-
// MODIFIERS
|
|
19
|
-
&&__deleted {
|
|
20
|
-
--_uc-fc: var(--black-400);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&&__highlighted {
|
|
24
|
-
--_uc-bg: var(--theme-secondary-100);
|
|
25
|
-
--_uc-bar: var(--br-md);
|
|
26
|
-
--_uc-time-fc: var(--black-500);
|
|
27
|
-
--_uc-type-fc: var(--black-500);
|
|
28
|
-
}
|
|
3
|
+
--_uc-fd: unset;
|
|
4
|
+
--_uc-column-gap: var(--su6);
|
|
5
|
+
--_uc-group-gap: var(--su4);
|
|
6
|
+
--_uc-row-gap: var(--su6);
|
|
7
|
+
--_uc-username-fs: unset;
|
|
29
8
|
|
|
30
9
|
// VARIANTS
|
|
31
|
-
|
|
32
|
-
&&
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--_uc-info-ai: center;
|
|
37
|
-
--_uc-info-fd: row;
|
|
38
|
-
}
|
|
10
|
+
// SIZES
|
|
11
|
+
&&__lg {
|
|
12
|
+
.s-avatar {
|
|
13
|
+
margin-right: var(--su6);
|
|
14
|
+
}
|
|
39
15
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
16
|
+
.s-user-card--username {
|
|
17
|
+
margin-right: var(--su2);
|
|
18
|
+
}
|
|
44
19
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
20
|
+
.s-user-card--group:has(> .s-user-card--rep) {
|
|
21
|
+
margin-top: calc(var(--su2) * -1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
--_uc-ai: flex-start;
|
|
25
|
+
--_uc-fd: column;
|
|
26
|
+
--_uc-username-fs: var(--fs-body3);
|
|
49
27
|
}
|
|
50
28
|
|
|
51
29
|
// CHILD ELEMENTS
|
|
52
|
-
& &--
|
|
53
|
-
|
|
54
|
-
font-size: var(--fs-caption);
|
|
30
|
+
& &--bio {
|
|
31
|
+
.truncation(3);
|
|
55
32
|
color: var(--black-400);
|
|
56
33
|
}
|
|
57
34
|
|
|
58
|
-
& &--
|
|
59
|
-
|
|
60
|
-
font-size: var(--fs-caption);
|
|
61
|
-
}
|
|
35
|
+
& &--recognition {
|
|
36
|
+
--_uc-row-gap: var(--su4);
|
|
62
37
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
38
|
+
&,
|
|
39
|
+
& a {
|
|
40
|
+
color: var(--theme-primary);
|
|
41
|
+
}
|
|
67
42
|
}
|
|
68
43
|
|
|
69
|
-
& &--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
display: flex;
|
|
74
|
-
gap: var(--su4);
|
|
44
|
+
& &--rep {
|
|
45
|
+
color: var(--black-600);
|
|
46
|
+
font-weight: 600;
|
|
75
47
|
}
|
|
76
48
|
|
|
77
|
-
& &--
|
|
78
|
-
|
|
79
|
-
|
|
49
|
+
& &--time {
|
|
50
|
+
color: var(--black-400);
|
|
51
|
+
}
|
|
80
52
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
53
|
+
& &--username {
|
|
54
|
+
font-size: var(--_uc-username-fs);
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
min-width: 0;
|
|
84
57
|
overflow-wrap: break-word;
|
|
58
|
+
word-break: break-all;
|
|
85
59
|
}
|
|
86
60
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
61
|
+
// Layout specific
|
|
62
|
+
& &--column {
|
|
63
|
+
align-items: flex-start;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: var(--_uc-column-gap);
|
|
91
67
|
}
|
|
92
68
|
|
|
93
|
-
& &--
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
69
|
+
& &--group {
|
|
70
|
+
&:has(> .s-avatar) {
|
|
71
|
+
--_uc-group-gap: var(--su6);
|
|
72
|
+
}
|
|
98
73
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
74
|
+
&:has(+ .s-user-card--time) {
|
|
75
|
+
margin-right: var(--su2);
|
|
76
|
+
}
|
|
102
77
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
78
|
+
align-items: center;
|
|
79
|
+
display: flex;
|
|
80
|
+
gap: var(--_uc-group-gap);
|
|
106
81
|
}
|
|
107
82
|
|
|
108
|
-
& &--
|
|
109
|
-
|
|
110
|
-
|
|
83
|
+
& ul&--group {
|
|
84
|
+
&.s-user-card--group__split {
|
|
85
|
+
li:not(:last-child) {
|
|
86
|
+
&:after {
|
|
87
|
+
background-color: var(--black-350);
|
|
88
|
+
content: "";
|
|
89
|
+
display: block;
|
|
90
|
+
margin-left: var(--su4);
|
|
91
|
+
width: var(--su4);
|
|
92
|
+
height: var(--su4);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
111
95
|
}
|
|
112
96
|
|
|
113
|
-
|
|
97
|
+
li {
|
|
98
|
+
align-items: center;
|
|
99
|
+
display: inline-flex;
|
|
100
|
+
gap: var(--su2);
|
|
101
|
+
}
|
|
114
102
|
|
|
115
|
-
|
|
116
|
-
|
|
103
|
+
.list-reset;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
& &--row {
|
|
107
|
+
align-items: center;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
flex-wrap: wrap;
|
|
111
|
+
gap: var(--_uc-row-gap);
|
|
117
112
|
}
|
|
118
113
|
|
|
119
114
|
align-items: var(--_uc-ai);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
line-height: 1;
|
|
128
|
-
padding: var(--_uc-p);
|
|
129
|
-
}
|
|
115
|
+
color: var(--black-500);
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: var(--_uc-fd);
|
|
118
|
+
flex-wrap: wrap;
|
|
119
|
+
font-size: var(--fs-caption);
|
|
120
|
+
gap: var(--su6);
|
|
121
|
+
}
|
|
@@ -88,48 +88,30 @@
|
|
|
88
88
|
Menlo, Monaco, Consolas, // A few sensible system font choices
|
|
89
89
|
monospace; // The final fallback for rendering in monospace.
|
|
90
90
|
|
|
91
|
-
html
|
|
91
|
+
html {
|
|
92
|
+
font-size: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
92
95
|
body {
|
|
93
96
|
--ff-sans: @ff-sans;
|
|
94
97
|
--ff-serif: @ff-serif;
|
|
95
98
|
--ff-mono: @ff-mono;
|
|
96
99
|
--theme-body-font-family: var(--ff-sans);
|
|
97
100
|
|
|
98
|
-
//
|
|
99
|
-
//
|
|
100
|
-
//
|
|
101
|
-
//
|
|
102
|
-
--fs-
|
|
103
|
-
--fs-
|
|
104
|
-
--fs-
|
|
105
|
-
|
|
106
|
-
//
|
|
107
|
-
--fs-
|
|
108
|
-
--fs-
|
|
109
|
-
--fs-
|
|
110
|
-
--fs-
|
|
111
|
-
--fs-
|
|
112
|
-
--fs-headline2: 2.571rem; // 36px
|
|
113
|
-
--fs-display1: 3.286rem; // 46px
|
|
114
|
-
--fs-display2: 4.143rem; // 58px
|
|
115
|
-
--fs-display3: 5.143rem; // 72px
|
|
116
|
-
--fs-display4: 7.143rem; // 100px
|
|
117
|
-
|
|
118
|
-
// Relative to the parent
|
|
119
|
-
--fs-body2-relative: 1.143rem; // 16px
|
|
120
|
-
--fs-body3-relative: 1.286rem; // 18px
|
|
121
|
-
--fs-subheading-relative: 1.429rem; // 20px
|
|
122
|
-
--fs-title-relative: 1.571rem; // 22px
|
|
123
|
-
--fs-headline1-relative: 2rem; // 28px
|
|
124
|
-
--fs-headline2-relative: 2.571rem; // 36px
|
|
125
|
-
--fs-display1-relative: 3.286rem; // 46px
|
|
126
|
-
--fs-display2-relative: 4.143rem; // 58px
|
|
127
|
-
--fs-display3-relative: 5.143rem; // 72px
|
|
128
|
-
--fs-display4-relative: 7.143rem; // 100px
|
|
129
|
-
|
|
130
|
-
// this value is not using spacing units because the calc involved results
|
|
131
|
-
// in unexpected sizing. I'm not sure why, honestly.
|
|
132
|
-
--fs-base: 14px;
|
|
101
|
+
// All rem values are relative to the font size applied to <html> (16px by default).
|
|
102
|
+
--fs-fine: 0.75rem; // 12px
|
|
103
|
+
--fs-caption: 0.8125rem; // 13px
|
|
104
|
+
--fs-body1: 0.875rem; // 14px (base font size applied to <body>)
|
|
105
|
+
--fs-body2: 1rem; // 16px
|
|
106
|
+
--fs-body3: 1.125rem; // 18px
|
|
107
|
+
--fs-subheading: 1.25rem; // 20px
|
|
108
|
+
--fs-title: 1.375rem; // 22px
|
|
109
|
+
--fs-headline1: 1.75rem; // 28px
|
|
110
|
+
--fs-headline2: 2.25rem; // 36px
|
|
111
|
+
--fs-display1: 2.875rem; // 46px
|
|
112
|
+
--fs-display2: 3.625rem; // 58px
|
|
113
|
+
--fs-display3: 4.5rem; // 72px
|
|
114
|
+
--fs-display4: 6.25rem; // 100px
|
|
133
115
|
|
|
134
116
|
// ============================================================================
|
|
135
117
|
// $ LINE HEIGHT (lh-)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackoverflow/stacks",
|
|
3
3
|
"description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.15",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"lib",
|