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