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