1/*-----------------------------------------------------------------------------
2| Copyright (c) Jupyter Development Team.
3| Distributed under the terms of the Modified BSD License.
4|----------------------------------------------------------------------------*/
5
6/*
7The following CSS variables define the main, public API for styling JupyterLab.
8These variables should be used by all plugins wherever possible. In other
9words, plugins should not define custom colors, sizes, etc unless absolutely
10necessary. This enables users to change the visual theme of JupyterLab
11by changing these variables.
12
13Many variables appear in an ordered sequence (0,1,2,3). These sequences
14are designed to work well together, so for example, `--jp-border-color1` should
15be used with `--jp-layout-color1`. The numbers have the following meanings:
16
17* 0: super-primary, reserved for special emphasis
18* 1: primary, most important under normal situations
19* 2: secondary, next most important under normal situations
20* 3: tertiary, next most important under normal situations
21
22Throughout JupyterLab, we are mostly following principles from Google's
23Material Design when selecting colors. We are not, however, following
24all of MD as it is not optimized for dense, information rich UIs.
25*/
26
27:root {
28  /* Elevation
29   *
30   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
31   *
32   * https://github.com/material-components/material-components-web
33   * https://material-components-web.appspot.com/elevation.html
34   */
35
36  --jp-shadow-base-lightness: 0;
37  --jp-shadow-umbra-color: rgba(
38    var(--jp-shadow-base-lightness),
39    var(--jp-shadow-base-lightness),
40    var(--jp-shadow-base-lightness),
41    0.2
42  );
43  --jp-shadow-penumbra-color: rgba(
44    var(--jp-shadow-base-lightness),
45    var(--jp-shadow-base-lightness),
46    var(--jp-shadow-base-lightness),
47    0.14
48  );
49  --jp-shadow-ambient-color: rgba(
50    var(--jp-shadow-base-lightness),
51    var(--jp-shadow-base-lightness),
52    var(--jp-shadow-base-lightness),
53    0.12
54  );
55  --jp-elevation-z0: none;
56  --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color),
57    0px 1px 1px 0px var(--jp-shadow-penumbra-color),
58    0px 1px 3px 0px var(--jp-shadow-ambient-color);
59  --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color),
60    0px 2px 2px 0px var(--jp-shadow-penumbra-color),
61    0px 1px 5px 0px var(--jp-shadow-ambient-color);
62  --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color),
63    0px 4px 5px 0px var(--jp-shadow-penumbra-color),
64    0px 1px 10px 0px var(--jp-shadow-ambient-color);
65  --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color),
66    0px 6px 10px 0px var(--jp-shadow-penumbra-color),
67    0px 1px 18px 0px var(--jp-shadow-ambient-color);
68  --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color),
69    0px 8px 10px 1px var(--jp-shadow-penumbra-color),
70    0px 3px 14px 2px var(--jp-shadow-ambient-color);
71  --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color),
72    0px 12px 17px 2px var(--jp-shadow-penumbra-color),
73    0px 5px 22px 4px var(--jp-shadow-ambient-color);
74  --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
75    0px 16px 24px 2px var(--jp-shadow-penumbra-color),
76    0px 6px 30px 5px var(--jp-shadow-ambient-color);
77  --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
78    0px 20px 31px 3px var(--jp-shadow-penumbra-color),
79    0px 8px 38px 7px var(--jp-shadow-ambient-color);
80  --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
81    0px 24px 38px 3px var(--jp-shadow-penumbra-color),
82    0px 9px 46px 8px var(--jp-shadow-ambient-color);
83
84  /* Borders
85   *
86   * The following variables, specify the visual styling of borders in JupyterLab.
87   */
88
89  --jp-border-width: 1px;
90  --jp-border-color0: var(--md-grey-400);
91  --jp-border-color1: var(--md-grey-400);
92  --jp-border-color2: var(--md-grey-300);
93  --jp-border-color3: var(--md-grey-200);
94  --jp-border-radius: 2px;
95
96  /* UI Fonts
97   *
98   * The UI font CSS variables are used for the typography all of the JupyterLab
99   * user interface elements that are not directly user generated content.
100   *
101   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
102   * is applied to a parent element. When children elements, such as headings, are sized
103   * in em all things will be computed relative to that body size.
104   */
105
106  --jp-ui-font-scale-factor: 1.2;
107  --jp-ui-font-size0: 0.83333em;
108  --jp-ui-font-size1: 13px; /* Base font size */
109  --jp-ui-font-size2: 1.2em;
110  --jp-ui-font-size3: 1.44em;
111
112  --jp-ui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
113    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
114
115  /*
116   * Use these font colors against the corresponding main layout colors.
117   * In a light theme, these go from dark to light.
118   */
119
120  /* Defaults use Material Design specification */
121  --jp-ui-font-color0: rgba(0, 0, 0, 1);
122  --jp-ui-font-color1: rgba(0, 0, 0, 0.87);
123  --jp-ui-font-color2: rgba(0, 0, 0, 0.54);
124  --jp-ui-font-color3: rgba(0, 0, 0, 0.38);
125
126  /*
127   * Use these against the brand/accent/warn/error colors.
128   * These will typically go from light to darker, in both a dark and light theme.
129   */
130
131  --jp-ui-inverse-font-color0: rgba(255, 255, 255, 1);
132  --jp-ui-inverse-font-color1: rgba(255, 255, 255, 1);
133  --jp-ui-inverse-font-color2: rgba(255, 255, 255, 0.7);
134  --jp-ui-inverse-font-color3: rgba(255, 255, 255, 0.5);
135
136  /* Content Fonts
137   *
138   * Content font variables are used for typography of user generated content.
139   *
140   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
141   * is applied to a parent element. When children elements, such as headings, are sized
142   * in em all things will be computed relative to that body size.
143   */
144
145  --jp-content-line-height: 1.6;
146  --jp-content-font-scale-factor: 1.2;
147  --jp-content-font-size0: 0.83333em;
148  --jp-content-font-size1: 14px; /* Base font size */
149  --jp-content-font-size2: 1.2em;
150  --jp-content-font-size3: 1.44em;
151  --jp-content-font-size4: 1.728em;
152  --jp-content-font-size5: 2.0736em;
153
154  /* This gives a magnification of about 125% in presentation mode over normal. */
155  --jp-content-presentation-font-size1: 17px;
156
157  --jp-content-heading-line-height: 1;
158  --jp-content-heading-margin-top: 1.2em;
159  --jp-content-heading-margin-bottom: 0.8em;
160  --jp-content-heading-font-weight: 500;
161
162  /* Defaults use Material Design specification */
163  --jp-content-font-color0: rgba(0, 0, 0, 1);
164  --jp-content-font-color1: rgba(0, 0, 0, 0.87);
165  --jp-content-font-color2: rgba(0, 0, 0, 0.54);
166  --jp-content-font-color3: rgba(0, 0, 0, 0.38);
167
168  --jp-content-link-color: var(--md-blue-700);
169
170  --jp-content-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
171    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
172    'Segoe UI Symbol';
173
174  /*
175   * Code Fonts
176   *
177   * Code font variables are used for typography of code and other monospaces content.
178   */
179
180  --jp-code-font-size: 13px;
181  --jp-code-line-height: 1.3077; /* 17px for 13px base */
182  --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */
183  --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
184  --jp-code-font-family: var(--jp-code-font-family-default);
185
186  /* This gives a magnification of about 125% in presentation mode over normal. */
187  --jp-code-presentation-font-size: 16px;
188
189  /* may need to tweak cursor width if you change font size */
190  --jp-code-cursor-width0: 1.4px;
191  --jp-code-cursor-width1: 2px;
192  --jp-code-cursor-width2: 4px;
193
194  /* Layout
195   *
196   * The following are the main layout colors use in JupyterLab. In a light
197   * theme these would go from light to dark.
198   */
199
200  --jp-layout-color0: white;
201  --jp-layout-color1: white;
202  --jp-layout-color2: var(--md-grey-200);
203  --jp-layout-color3: var(--md-grey-400);
204  --jp-layout-color4: var(--md-grey-600);
205
206  /* Inverse Layout
207   *
208   * The following are the inverse layout colors use in JupyterLab. In a light
209   * theme these would go from dark to light.
210   */
211
212  --jp-inverse-layout-color0: #111111;
213  --jp-inverse-layout-color1: var(--md-grey-900);
214  --jp-inverse-layout-color2: var(--md-grey-800);
215  --jp-inverse-layout-color3: var(--md-grey-700);
216  --jp-inverse-layout-color4: var(--md-grey-600);
217
218  /* Brand/accent */
219
220  --jp-brand-color0: var(--md-blue-900);
221  --jp-brand-color1: var(--md-blue-700);
222  --jp-brand-color2: var(--md-blue-300);
223  --jp-brand-color3: var(--md-blue-100);
224  --jp-brand-color4: var(--md-blue-50);
225
226  --jp-accent-color0: var(--md-green-900);
227  --jp-accent-color1: var(--md-green-700);
228  --jp-accent-color2: var(--md-green-300);
229  --jp-accent-color3: var(--md-green-100);
230
231  /* State colors (warn, error, success, info) */
232
233  --jp-warn-color0: var(--md-orange-900);
234  --jp-warn-color1: var(--md-orange-700);
235  --jp-warn-color2: var(--md-orange-300);
236  --jp-warn-color3: var(--md-orange-100);
237
238  --jp-error-color0: var(--md-red-900);
239  --jp-error-color1: var(--md-red-700);
240  --jp-error-color2: var(--md-red-300);
241  --jp-error-color3: var(--md-red-100);
242
243  --jp-success-color0: var(--md-green-900);
244  --jp-success-color1: var(--md-green-700);
245  --jp-success-color2: var(--md-green-300);
246  --jp-success-color3: var(--md-green-100);
247
248  --jp-info-color0: var(--md-cyan-900);
249  --jp-info-color1: var(--md-cyan-700);
250  --jp-info-color2: var(--md-cyan-300);
251  --jp-info-color3: var(--md-cyan-100);
252
253  /* Cell specific styles */
254
255  --jp-cell-padding: 5px;
256
257  --jp-cell-collapser-width: 8px;
258  --jp-cell-collapser-min-height: 20px;
259  --jp-cell-collapser-not-active-hover-opacity: 0.6;
260
261  --jp-cell-editor-background: var(--md-grey-100);
262  --jp-cell-editor-border-color: var(--md-grey-300);
263  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
264  --jp-cell-editor-active-background: var(--jp-layout-color0);
265  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
266
267  --jp-cell-prompt-width: 64px;
268  --jp-cell-prompt-font-family: var(--jp-code-font-family-default);
269  --jp-cell-prompt-letter-spacing: 0px;
270  --jp-cell-prompt-opacity: 1;
271  --jp-cell-prompt-not-active-opacity: 0.5;
272  --jp-cell-prompt-not-active-font-color: var(--md-grey-700);
273  /* A custom blend of MD grey and blue 600
274   * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
275  --jp-cell-inprompt-font-color: #307fc1;
276  /* A custom blend of MD grey and orange 600
277   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
278  --jp-cell-outprompt-font-color: #bf5b3d;
279
280  /* Notebook specific styles */
281
282  --jp-notebook-padding: 10px;
283  --jp-notebook-select-background: var(--jp-layout-color1);
284  --jp-notebook-multiselected-color: var(--md-blue-50);
285
286  /* The scroll padding is calculated to fill enough space at the bottom of the
287  notebook to show one single-line cell (with appropriate padding) at the top
288  when the notebook is scrolled all the way to the bottom. We also subtract one
289  pixel so that no scrollbar appears if we have just one single-line cell in the
290  notebook. This padding is to enable a 'scroll past end' feature in a notebook.
291  */
292  --jp-notebook-scroll-padding: calc(
293    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
294      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
295  );
296
297  /* Rendermime styles */
298
299  --jp-rendermime-error-background: #fdd;
300  --jp-rendermime-table-row-background: var(--md-grey-100);
301  --jp-rendermime-table-row-hover-background: var(--md-light-blue-50);
302
303  /* Dialog specific styles */
304
305  --jp-dialog-background: rgba(0, 0, 0, 0.25);
306
307  /* Console specific styles */
308
309  --jp-console-padding: 10px;
310
311  /* Toolbar specific styles */
312
313  --jp-toolbar-border-color: var(--jp-border-color1);
314  --jp-toolbar-micro-height: 8px;
315  --jp-toolbar-background: var(--jp-layout-color1);
316  --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24);
317  --jp-toolbar-header-margin: 4px 4px 0px 4px;
318  --jp-toolbar-active-background: var(--md-grey-300);
319
320  /* Statusbar specific styles */
321
322  --jp-statusbar-height: 24px;
323
324  /* Input field styles */
325
326  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
327  --jp-input-active-background: var(--jp-layout-color1);
328  --jp-input-hover-background: var(--jp-layout-color1);
329  --jp-input-background: var(--md-grey-100);
330  --jp-input-border-color: var(--jp-border-color1);
331  --jp-input-active-border-color: var(--jp-brand-color1);
332  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
333
334  /* General editor styles */
335
336  --jp-editor-selected-background: #d9d9d9;
337  --jp-editor-selected-focused-background: #d7d4f0;
338  --jp-editor-cursor-color: var(--jp-ui-font-color0);
339
340  /* Code mirror specific styles */
341
342  --jp-mirror-editor-keyword-color: #008000;
343  --jp-mirror-editor-atom-color: #88f;
344  --jp-mirror-editor-number-color: #080;
345  --jp-mirror-editor-def-color: #00f;
346  --jp-mirror-editor-variable-color: var(--md-grey-900);
347  --jp-mirror-editor-variable-2-color: #05a;
348  --jp-mirror-editor-variable-3-color: #085;
349  --jp-mirror-editor-punctuation-color: #05a;
350  --jp-mirror-editor-property-color: #05a;
351  --jp-mirror-editor-operator-color: #aa22ff;
352  --jp-mirror-editor-comment-color: #408080;
353  --jp-mirror-editor-string-color: #ba2121;
354  --jp-mirror-editor-string-2-color: #708;
355  --jp-mirror-editor-meta-color: #aa22ff;
356  --jp-mirror-editor-qualifier-color: #555;
357  --jp-mirror-editor-builtin-color: #008000;
358  --jp-mirror-editor-bracket-color: #997;
359  --jp-mirror-editor-tag-color: #170;
360  --jp-mirror-editor-attribute-color: #00c;
361  --jp-mirror-editor-header-color: blue;
362  --jp-mirror-editor-quote-color: #090;
363  --jp-mirror-editor-link-color: #00c;
364  --jp-mirror-editor-error-color: #f00;
365  --jp-mirror-editor-hr-color: #999;
366
367  /* Vega extension styles */
368
369  --jp-vega-background: white;
370
371  /* Sidebar-related styles */
372
373  --jp-sidebar-min-width: 250px;
374
375  /* Search-related styles */
376
377  --jp-search-toggle-off-opacity: 0.5;
378  --jp-search-toggle-hover-opacity: 0.8;
379  --jp-search-toggle-on-opacity: 1;
380  --jp-search-selected-match-background-color: rgb(245, 200, 0);
381  --jp-search-selected-match-color: black;
382  --jp-search-unselected-match-background-color: var(
383    --jp-inverse-layout-color0
384  );
385  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
386
387  /* Icon colors that work well with light or dark backgrounds */
388  --jp-icon-contrast-color0: var(--md-purple-600);
389  --jp-icon-contrast-color1: var(--md-green-600);
390  --jp-icon-contrast-color2: var(--md-pink-600);
391  --jp-icon-contrast-color3: var(--md-blue-600);
392}
393