/
variables.less
173 lines (148 loc) · 7.33 KB
/
variables.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
@import 'mediawiki.skin.variables.less';
//
// == Media query breakpoints ==
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
//
@max-width-breakpoint-mobile: 719px;
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
@max-width-breakpoint-tablet: 999px;
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
@max-width-breakpoint-desktop: 1199px;
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em );
// Sizing calculation primitives.
@font-size-root: 100%;
@font-size-browser: 16; // Assumed browser default of `16px`
//
// == Page content ==
//
@color-link-selected: @color-base;
//
// == Typography ==
//
// Font family stack is defined in Codex “WikimediaUI“ theme, available
// through 'mediawiki.less/mediawiki.skin.variables.less' in MediaWiki core:
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex-design-tokens/src/theme-wikimedia-ui.json#429
// See also Vector's 'mediawiki.skin.variables.less' overrides.
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@font-size-reset: @font-size-root;
@font-size-heading-1: 1.8em;
@font-size-heading-2: 1.5em;
@font-size-heading-3: 1.2em;
@font-size-notification: 0.8em;
@font-size-site-notice: 0.8em;
@font-size-footer: unit( 12 / @font-size-browser, em );
@line-height-base: 1.6;
@line-height-code: 1.3;
@line-height-footer-info: 1.4;
@line-height-footer-buttons: 2;
@size-icon: unit( 20 / @font-size-browser, em );
// FIXME: Use global variable since Echo and CentralNotice use this variable
@border-color-content: #a7d7f9;
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
@border-color-portal-heading: #c8ccd1;
// Use `rgba()` notation for better Safari support, see T254489.
@border-start-blockquote: 4px @border-style-base #eaecf0;
@padding-blockquote: 8px 32px;
@background-color-secondary--modern: #f8f9fa;
@background-color-page-container: var( --background-color-base );
// Navigation
@background-color-secondary: #f6f6f6;
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
@line-height-nav: 1.125em;
// Navigation: Personal tools
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
@top-personal-tools: 6px;
@font-size-nav-personal: 0.75em;
// Using `unit()` without second parameter to achieve a unitless output for `line-height`.
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
// Tabs
@padding-horizontal-tabs: 8px;
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
// Content boxes
@border-radius-content-box: 4px;
@border-color-content-box: @background-color-interactive;
// Content padding
@padding-vertical-content-box: @spacing-150;
@padding-horizontal-content-box: @spacing-150;
// content box changes *horizontal* padding at wide resolutions
@padding-horizontal-content-box-wide: @spacing-300;
// Content box shadow
@box-shadow-content-box: @box-shadow-drop-medium;
// Dropdowns & menus
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
@padding-horizontal-dropdown-menu: 16px;
@padding-vertical-dropdown-menu: 16px;
@padding-vertical-dropdown-menu-item: 6px;
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
// TOC
@size-toc-subsection-toggle: 22px;
@size-toc-subsection-toggle-icon: 0.7rem;
@toc-list-item-padding-start: 12px;
// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@min-width-search-button: 28px;
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
// Derived from @size-typeahead-search-focus-addition in Codex
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#703
@size-search-expand: 24px;
@margin-end-search: 12px;
// Pre-content
@margin-top-pre-content: 8px;
// Header
// T245190 T296321 For sticky header, set an explicit height. This is needed for scroll padding
// and for other sticky elements on the page. Setting the height in relative units enables
// the header's height to adapt to the browser's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-header: unit( 50px / @font-size-browser, rem );
// Z-indices
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
@z-index-header: @z-index-stacking-3;
@z-index-search-button: @z-index-stacking-1;
// Ensure that this is displayed on top of .vector-body and clickable.
@z-index-indicators: @z-index-stacking-1;
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
// @z-index-dropdown: 50; in Codex
// @z-index-overlay is 450 in new Codex tokens; was 101;
// See skinStyles/jquery.ui/jquery.ui.slider.css.
// @z-index-ui-slider-range: 1;
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
// See skinStyles/jquery.ui/jquery.ui.slider.css.
// @z-index-ui-slider-handle: 2;
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
// @z-index-ui-selectable-helper: 100;
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
// @z-index-ui-tooltip: 9999;
// Transitions
// Sticky header hide/show transition
@transition-sticky-header: transform 250ms linear;
//
// Layout
//
@max-width-page-container: unit( 1596px / @font-size-browser, rem ); // T305069 - 99.75rem @ 16
@max-width-content-container: unit( 948px / @font-size-browser, rem ); // T335155
@padding-horizontal-page-container: unit( 24px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, rem );
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, rem );
// T314419 - Scroll padding is modified primarily to bring section headings into a position that is
// easier to read, which is slightly lower than the very top of the page. The primary use-case is when
// navigating sections via the table of contents. When changing this value, also change the value in
// resources/skins.vector.scripts/setupIntersectionObservers.js
@scroll-padding-top: 75px;
// Grid
@grid-row-gap: 24px;
@grid-column-gap: 24px;
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
@width-page-content: minmax(0, 1fr);
@width-column-desktop: unit( 196px / @font-size-browser, rem ); // Total width including gap is 232px
@width-column-desktop-wide: unit( 248px / @font-size-browser, rem ); // Total width including gap is 284px
@grid-template-column-desktop: ~'@{width-column-desktop} @{width-page-content}';
@grid-template-column-desktop-wide: ~'@{width-column-desktop-wide} @{width-page-content}';