1 | @# Variables
|
2 |
|
3 | Available for use with Sass and Less.
|
4 |
|
5 | ```css.scss
|
6 | // Sass
|
7 | @import "path/to/@blueprintjs/core/lib/scss/variables";
|
8 | ```
|
9 |
|
10 | ```css.less
|
11 | // Less
|
12 | @import "path/to/@blueprintjs/core/lib/less/variables";
|
13 | ```
|
14 |
|
15 | The Sass `$` convention is used in this documentation for consistency with the original source code.
|
16 | Every variable mentioned below is also available in `variables.less` with an `@` prefix instead of `$`.
|
17 |
|
18 | @## Font variables
|
19 |
|
20 | Typically, correct typography styles should be achieved by using the proper HTML tag (`<p>` for
|
21 | text, `<h*>` for headings, `<code>` for code, etc.). The following variables are provided for the
|
22 | rare cases where custom styling is necessary and should be used sparingly:
|
23 |
|
24 | - `$pt-font-family`
|
25 | - `$pt-font-family-monospace`
|
26 | - `$pt-font-size`
|
27 | - `$pt-font-size-small`
|
28 | - `$pt-font-size-large`
|
29 | - `$pt-line-height`
|
30 |
|
31 | @## Icon variables
|
32 |
|
33 | Most icons should be displayed using the `span.@ns-icon-*` classes or via modifier classes on
|
34 | components like `.@ns-button`. In rare cases, you may need direct access to the content
|
35 | string that generates each icon in the icon font. Blueprint provides these variables with
|
36 | straightforward names (see the [Icons section](#icons) for the full list of identifiers):
|
37 |
|
38 | - `$pt-icon-style`
|
39 | - `$pt-icon-align-left`
|
40 | - `$pt-icon-align-center`
|
41 | - ...
|
42 |
|
43 | Variables are also provided for the two icon font families and their pixel sizes:
|
44 |
|
45 | - `$icons16-family`
|
46 | - `$icons20-family`
|
47 | - `$pt-icon-size-standard`
|
48 | - `$pt-icon-size-large`
|
49 |
|
50 | @## Grids & dimensions
|
51 |
|
52 | Sizes of common components. Most sizing variables are based on `$pt-grid-size`, which has
|
53 | a value of `10px`. Custom components should adhere to the relevant `height` variable.
|
54 |
|
55 | - `$pt-grid-size`
|
56 | - `$pt-border-radius`
|
57 | - `$pt-button-height`
|
58 | - `$pt-button-height-large`
|
59 | - `$pt-input-height`
|
60 | - `$pt-input-height-large`
|
61 | - `$pt-navbar-height`
|
62 |
|
63 | @### Grid system
|
64 |
|
65 | Blueprint doesn't provide a grid system. In general, you should try to use the `$pt-grid-size`
|
66 | variable to generate layout & sizing style rules in your CSS codebase.
|
67 |
|
68 | In lieu of a full grid system, you should try to use the __CSS flexible box layout model__ (a.k.a.
|
69 | "flexbox"). It's quite powerful on its own and allows you to build robust, responsive layouts
|
70 | without writing much CSS. Here are some resources for learning flexbox:
|
71 | - [MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
|
72 | - [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
73 |
|
74 | @## Layering
|
75 |
|
76 | Blueprint provides variables for three z-index layers. This should be enough for most use cases,
|
77 | especially if you make correct use of [stacking context][MDN]. [Overlay](#core/components/overlay)
|
78 | components such as dialogs and popovers use these z-index values to configure their stacking
|
79 | contexts.
|
80 |
|
81 | - `$pt-z-index-base`
|
82 | - `$pt-z-index-content`
|
83 | - `$pt-z-index-overlay`
|
84 |
|
85 | [MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
86 |
|
87 | @## Light theme styles
|
88 |
|
89 | Use these when you need to build custom UI components that look similar to Blueprint's
|
90 | light theme components.
|
91 |
|
92 | - `$pt-dialog-box-shadow`
|
93 | - `$pt-input-box-shadow`
|
94 | - `$pt-popover-box-shadow`
|
95 | - `$pt-tooltip-box-shadow`
|
96 |
|
97 | @## Dark theme styles
|
98 |
|
99 | Use these when you need to build custom UI components that look similar to Blueprint's
|
100 | dark theme components.
|
101 |
|
102 | - `$pt-dark-dialog-box-shadow`
|
103 | - `$pt-dark-input-box-shadow`
|
104 | - `$pt-dark-popover-box-shadow`
|
105 | - `$pt-dark-tooltip-box-shadow`
|
106 |
|
107 | @## Elevation drop shadows
|
108 |
|
109 | Use these when you need to apply a drop shadow to custom UI components to simulate height.
|
110 | These elevations correspond to those of the [Card](#core/components/card.elevation) component.
|
111 |
|
112 | - `$pt-elevation-shadow-0`
|
113 | - `$pt-elevation-shadow-1`
|
114 | - `$pt-elevation-shadow-2`
|
115 | - `$pt-elevation-shadow-3`
|
116 | - `$pt-elevation-shadow-4`
|
117 |
|
118 | Use these for drop shadows in dark theme.
|
119 |
|
120 | - `$pt-dark-elevation-shadow-0`
|
121 | - `$pt-dark-elevation-shadow-1`
|
122 | - `$pt-dark-elevation-shadow-2`
|
123 | - `$pt-dark-elevation-shadow-3`
|
124 | - `$pt-dark-elevation-shadow-4`
|
125 |
|
126 | @## Color aliases
|
127 |
|
128 | These variables are semantic aliases of our [colors](#core/colors).
|
129 | They are used throughout Blueprint itself to ensure consistent color usage across components
|
130 | and are available in the Sass or Less variables files.
|
131 |
|
132 | <table class="@ns-html-table docs-color-aliases-table">
|
133 | <thead>
|
134 | <tr>
|
135 | <th></th>
|
136 | <th>Variable</th>
|
137 | <th>Description</th>
|
138 | </tr>
|
139 | </thead>
|
140 | <tbody>
|
141 | <tr>
|
142 | <td>
|
143 | <div class="docs-color-bubble alias-intent-primary"></div>
|
144 | </td>
|
145 | <td><code>$pt-intent-primary</code></td>
|
146 | <td>Primary intent color</td>
|
147 | </tr>
|
148 | <tr>
|
149 | <td>
|
150 | <div class="docs-color-bubble alias-intent-success"></div>
|
151 | </td>
|
152 | <td><code>$pt-intent-success</code></td>
|
153 | <td>Success intent color</td>
|
154 | </tr>
|
155 | <tr>
|
156 | <td>
|
157 | <div class="docs-color-bubble alias-intent-warning"></div>
|
158 | </td>
|
159 | <td><code>$pt-intent-warning</code></td>
|
160 | <td>Warning intent color</td>
|
161 | </tr>
|
162 | <tr>
|
163 | <td>
|
164 | <div class="docs-color-bubble alias-intent-danger"></div>
|
165 | </td>
|
166 | <td><code>$pt-intent-danger</code></td>
|
167 | <td>Danger intent color</td>
|
168 | </tr>
|
169 | <tr>
|
170 | <td>
|
171 | <div class="docs-color-bubble alias-app-background-color"></div>
|
172 | </td>
|
173 | <td><code>$pt-app-background-color</code></td>
|
174 | <td>Application background color</td>
|
175 | </tr>
|
176 | <tr>
|
177 | <td>
|
178 | <div class="docs-color-bubble alias-dark-app-background-color"></div>
|
179 | </td>
|
180 | <td><code>$pt-dark-app-background-color</code></td>
|
181 | <td>Dark theme application background color</td>
|
182 | </tr>
|
183 | <tr>
|
184 | <td>
|
185 | <div class="docs-color-bubble alias-text-color"></div>
|
186 | </td>
|
187 | <td><code>$pt-text-color</code></td>
|
188 | <td>Default text color</td>
|
189 | </tr>
|
190 | <tr>
|
191 | <td>
|
192 | <div class="docs-color-bubble alias-text-color-muted"></div>
|
193 | </td>
|
194 | <td><code>$pt-text-color-muted</code></td>
|
195 | <td>Muted text color</td>
|
196 | </tr>
|
197 | <tr>
|
198 | <td>
|
199 | <div class="docs-color-bubble alias-text-color-disabled"></div>
|
200 | </td>
|
201 | <td><code>$pt-text-color-disabled</code></td>
|
202 | <td>Disabled text color</td>
|
203 | </tr>
|
204 | <tr>
|
205 | <td>
|
206 | <div class="docs-color-bubble alias-heading-color"></div>
|
207 | </td>
|
208 | <td><code>$pt-heading-color</code></td>
|
209 | <td>Text color for headers</td>
|
210 | </tr>
|
211 | <tr>
|
212 | <td>
|
213 | <div class="docs-color-bubble alias-link-color"></div>
|
214 | </td>
|
215 | <td><code>$pt-link-color</code></td>
|
216 | <td>Text color for links</td>
|
217 | </tr>
|
218 | <tr>
|
219 | <td>
|
220 | <div class="docs-color-bubble alias-dark-text-color"></div>
|
221 | </td>
|
222 | <td><code>$pt-dark-text-color</code></td>
|
223 | <td>Dark theme default text color</td>
|
224 | </tr>
|
225 | <tr>
|
226 | <td>
|
227 | <div class="docs-color-bubble alias-dark-text-color-muted"></div>
|
228 | </td>
|
229 | <td><code>$pt-dark-text-color-muted</code></td>
|
230 | <td>Dark theme muted text color</td>
|
231 | </tr>
|
232 | <tr>
|
233 | <td>
|
234 | <div class="docs-color-bubble alias-dark-text-color-disabled"></div>
|
235 | </td>
|
236 | <td><code>$pt-dark-text-color-disabled</code></td>
|
237 | <td>Dark theme disabled text color</td>
|
238 | </tr>
|
239 | <tr>
|
240 | <td>
|
241 | <div class="docs-color-bubble alias-dark-heading-color"></div>
|
242 | </td>
|
243 | <td><code>$pt-dark-heading-color</code></td>
|
244 | <td>Dark theme text color for headers</td>
|
245 | </tr>
|
246 | <tr>
|
247 | <td>
|
248 | <div class="docs-color-bubble alias-dark-link-color"></div>
|
249 | </td>
|
250 | <td><code>$pt-dark-link-color</code></td>
|
251 | <td>Dark theme text color for links</td>
|
252 | </tr>
|
253 | <tr>
|
254 | <td>
|
255 | <div class="docs-color-bubble alias-text-selection-color"></div>
|
256 | </td>
|
257 | <td><code>$pt-text-selection-color</code></td>
|
258 | <td>Text selection color</td>
|
259 | </tr>
|
260 | <tr>
|
261 | <td>
|
262 | <div class="docs-color-bubble alias-icon-color"></div>
|
263 | </td>
|
264 | <td><code>$pt-icon-color</code></td>
|
265 | <td>Default icon color</td>
|
266 | </tr>
|
267 | <tr>
|
268 | <td>
|
269 | <div class="docs-color-bubble alias-icon-color-hover"></div>
|
270 | </td>
|
271 | <td><code>$pt-icon-color-hover</code></td>
|
272 | <td>Hovered icon color</td>
|
273 | </tr>
|
274 | <tr>
|
275 | <td>
|
276 | <div class="docs-color-bubble alias-icon-color-disabled"></div>
|
277 | </td>
|
278 | <td><code>$pt-icon-color-disabled</code></td>
|
279 | <td>Disabled icon color</td>
|
280 | </tr>
|
281 | <tr>
|
282 | <td>
|
283 | <div class="docs-color-bubble alias-icon-color-selected"></div>
|
284 | </td>
|
285 | <td><code>$pt-icon-color-selected</code></td>
|
286 | <td>Selected icon color</td>
|
287 | </tr>
|
288 | <tr>
|
289 | <td>
|
290 | <div class="docs-color-bubble alias-dark-icon-color"></div>
|
291 | </td>
|
292 | <td><code>$pt-dark-icon-color</code></td>
|
293 | <td>Dark theme default icon color</td>
|
294 | </tr>
|
295 | <tr>
|
296 | <td>
|
297 | <div class="docs-color-bubble alias-dark-icon-color-hover"></div>
|
298 | </td>
|
299 | <td><code>$pt-dark-icon-color-hover</code></td>
|
300 | <td>Dark theme hovered icon color</td>
|
301 | </tr>
|
302 | <tr>
|
303 | <td>
|
304 | <div class="docs-color-bubble alias-dark-icon-color-disabled"></div>
|
305 | </td>
|
306 | <td><code>$pt-dark-icon-color-disabled</code></td>
|
307 | <td>Dark theme disabled icon color</td>
|
308 | </tr>
|
309 | <tr>
|
310 | <td>
|
311 | <div class="docs-color-bubble alias-dark-icon-color-selected"></div>
|
312 | </td>
|
313 | <td><code>$pt-dark-icon-color-selected</code></td>
|
314 | <td>Dark theme selected icon color</td>
|
315 | </tr>
|
316 | <tr>
|
317 | <td>
|
318 | <div class="docs-color-bubble alias-divider-black"></div>
|
319 | </td>
|
320 | <td><code>$pt-divider-black</code></td>
|
321 | <td>Black divider color</td>
|
322 | </tr>
|
323 | <tr>
|
324 | <td>
|
325 | <div class="docs-color-bubble alias-dark-divider-black"></div>
|
326 | </td>
|
327 | <td><code>$pt-dark-divider-black</code></td>
|
328 | <td>Dark theme black divider color</td>
|
329 | </tr>
|
330 | <tr>
|
331 | <td>
|
332 | <div class="docs-color-bubble alias-dark-divider-white"></div>
|
333 | </td>
|
334 | <td><code>$pt-dark-divider-white</code></td>
|
335 | <td>Dark theme white divider color</td>
|
336 | </tr>
|
337 | <tr>
|
338 | <td>
|
339 | <div class="docs-color-bubble alias-code-text-color"></div>
|
340 | </td>
|
341 | <td><code>$pt-code-text-color</code></td>
|
342 | <td>Code text color</td>
|
343 | </tr>
|
344 | <tr>
|
345 | <td>
|
346 | <div class="docs-color-bubble alias-code-background-color"></div>
|
347 | </td>
|
348 | <td><code>$pt-code-background-color</code></td>
|
349 | <td>Code background color</td>
|
350 | </tr>
|
351 | <tr>
|
352 | <td>
|
353 | <div class="docs-color-bubble alias-dark-code-text-color"></div>
|
354 | </td>
|
355 | <td><code>$pt-dark-code-text-color</code></td>
|
356 | <td>Dark theme code text color</td>
|
357 | </tr>
|
358 | <tr>
|
359 | <td>
|
360 | <div class="docs-color-bubble alias-dark-code-background-color"></div>
|
361 | </td>
|
362 | <td><code>$pt-dark-code-background-color</code></td>
|
363 | <td>Dark theme code background color</td>
|
364 | </tr>
|
365 | </tbody>
|
366 | </table>
|
367 |
|