@jupyterlab/theme-light-extension 4.2.0-alpha.0 → 4.2.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +4 -4
  2. package/style/variables.css +71 -71
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jupyterlab/theme-light-extension",
3
- "version": "4.2.0-alpha.0",
3
+ "version": "4.2.0-alpha.2",
4
4
  "description": "JupyterLab - Default Light Theme",
5
5
  "homepage": "https://github.com/jupyterlab/jupyterlab",
6
6
  "bugs": {
@@ -32,9 +32,9 @@
32
32
  "watch": "tsc -b --watch"
33
33
  },
34
34
  "dependencies": {
35
- "@jupyterlab/application": "^4.2.0-alpha.0",
36
- "@jupyterlab/apputils": "^4.3.0-alpha.0",
37
- "@jupyterlab/translation": "^4.2.0-alpha.0"
35
+ "@jupyterlab/application": "^4.2.0-alpha.2",
36
+ "@jupyterlab/apputils": "^4.3.0-alpha.2",
37
+ "@jupyterlab/translation": "^4.2.0-alpha.2"
38
38
  },
39
39
  "devDependencies": {
40
40
  "rimraf": "~5.0.5",
package/style/variables.css CHANGED
@@ -87,11 +87,11 @@ all of MD as it is not optimized for dense, information rich UIs.
87
87
  */
88
88
 
89
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-inverse-border-color: var(--md-grey-600);
90
+ --jp-border-color0: var(--md-grey-400, #bdbdbd);
91
+ --jp-border-color1: var(--md-grey-400, #bdbdbd);
92
+ --jp-border-color2: var(--md-grey-300, #e0e0e0);
93
+ --jp-border-color3: var(--md-grey-200, #eee);
94
+ --jp-inverse-border-color: var(--md-grey-600, #757575);
95
95
  --jp-border-radius: 2px;
96
96
 
97
97
  /* UI Fonts
@@ -164,8 +164,8 @@ all of MD as it is not optimized for dense, information rich UIs.
164
164
  --jp-content-font-color1: rgba(0, 0, 0, 0.87);
165
165
  --jp-content-font-color2: rgba(0, 0, 0, 0.54);
166
166
  --jp-content-font-color3: rgba(0, 0, 0, 0.38);
167
- --jp-content-link-color: var(--md-blue-900);
168
- --jp-content-link-visited-color: var(--md-purple-700);
167
+ --jp-content-link-color: var(--md-blue-900, #0d47a1);
168
+ --jp-content-link-visited-color: var(--md-purple-700, #7b1fa2);
169
169
  --jp-content-font-family: system-ui, -apple-system, blinkmacsystemfont,
170
170
  'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji',
171
171
  'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -198,9 +198,9 @@ all of MD as it is not optimized for dense, information rich UIs.
198
198
 
199
199
  --jp-layout-color0: white;
200
200
  --jp-layout-color1: white;
201
- --jp-layout-color2: var(--md-grey-200);
202
- --jp-layout-color3: var(--md-grey-400);
203
- --jp-layout-color4: var(--md-grey-600);
201
+ --jp-layout-color2: var(--md-grey-200, #eee);
202
+ --jp-layout-color3: var(--md-grey-400, #bdbdbd);
203
+ --jp-layout-color4: var(--md-grey-600, #757575);
204
204
 
205
205
  /* Inverse Layout
206
206
  *
@@ -209,41 +209,41 @@ all of MD as it is not optimized for dense, information rich UIs.
209
209
  */
210
210
 
211
211
  --jp-inverse-layout-color0: #111;
212
- --jp-inverse-layout-color1: var(--md-grey-900);
213
- --jp-inverse-layout-color2: var(--md-grey-800);
214
- --jp-inverse-layout-color3: var(--md-grey-700);
215
- --jp-inverse-layout-color4: var(--md-grey-600);
212
+ --jp-inverse-layout-color1: var(--md-grey-900, #212121);
213
+ --jp-inverse-layout-color2: var(--md-grey-800, #424242);
214
+ --jp-inverse-layout-color3: var(--md-grey-700, #616161);
215
+ --jp-inverse-layout-color4: var(--md-grey-600, #757575);
216
216
 
217
217
  /* Brand/accent */
218
218
 
219
- --jp-brand-color0: var(--md-blue-900);
220
- --jp-brand-color1: var(--md-blue-700);
221
- --jp-brand-color2: var(--md-blue-300);
222
- --jp-brand-color3: var(--md-blue-100);
223
- --jp-brand-color4: var(--md-blue-50);
224
- --jp-accent-color0: var(--md-green-900);
225
- --jp-accent-color1: var(--md-green-700);
226
- --jp-accent-color2: var(--md-green-300);
227
- --jp-accent-color3: var(--md-green-100);
219
+ --jp-brand-color0: var(--md-blue-900, #0d47a1);
220
+ --jp-brand-color1: var(--md-blue-700, #1976d2);
221
+ --jp-brand-color2: var(--md-blue-300, #64b5f6);
222
+ --jp-brand-color3: var(--md-blue-100, #bbdefb);
223
+ --jp-brand-color4: var(--md-blue-50, #e3f2fd);
224
+ --jp-accent-color0: var(--md-green-900, #1b5e20);
225
+ --jp-accent-color1: var(--md-green-700, #388e3c);
226
+ --jp-accent-color2: var(--md-green-300, #81c784);
227
+ --jp-accent-color3: var(--md-green-100, #c8e6c9);
228
228
 
229
229
  /* State colors (warn, error, success, info) */
230
230
 
231
- --jp-warn-color0: var(--md-orange-900);
232
- --jp-warn-color1: var(--md-orange-700);
233
- --jp-warn-color2: var(--md-orange-300);
234
- --jp-warn-color3: var(--md-orange-100);
235
- --jp-error-color0: var(--md-red-900);
236
- --jp-error-color1: var(--md-red-700);
237
- --jp-error-color2: var(--md-red-300);
238
- --jp-error-color3: var(--md-red-100);
239
- --jp-success-color0: var(--md-green-900);
240
- --jp-success-color1: var(--md-green-700);
241
- --jp-success-color2: var(--md-green-300);
242
- --jp-success-color3: var(--md-green-100);
243
- --jp-info-color0: var(--md-cyan-900);
244
- --jp-info-color1: var(--md-cyan-700);
245
- --jp-info-color2: var(--md-cyan-300);
246
- --jp-info-color3: var(--md-cyan-100);
231
+ --jp-warn-color0: var(--md-orange-900, #e65100);
232
+ --jp-warn-color1: var(--md-orange-700, #f57c00);
233
+ --jp-warn-color2: var(--md-orange-300, #ffb74d);
234
+ --jp-warn-color3: var(--md-orange-100, #ffe0b2);
235
+ --jp-error-color0: var(--md-red-900, #b71c1c);
236
+ --jp-error-color1: var(--md-red-700, #d32f2f);
237
+ --jp-error-color2: var(--md-red-300, #e57373);
238
+ --jp-error-color3: var(--md-red-100, #ffcdd2);
239
+ --jp-success-color0: var(--md-green-900, #1b5e20);
240
+ --jp-success-color1: var(--md-green-700, #388e3c);
241
+ --jp-success-color2: var(--md-green-300, #81c784);
242
+ --jp-success-color3: var(--md-green-100, #c8e6c9);
243
+ --jp-info-color0: var(--md-cyan-900, #006064);
244
+ --jp-info-color1: var(--md-cyan-700, #0097a7);
245
+ --jp-info-color2: var(--md-cyan-300, #4dd0e1);
246
+ --jp-info-color3: var(--md-cyan-100, #b2ebf2);
247
247
 
248
248
  /* Cell specific styles */
249
249
 
@@ -251,9 +251,9 @@ all of MD as it is not optimized for dense, information rich UIs.
251
251
  --jp-cell-collapser-width: 8px;
252
252
  --jp-cell-collapser-min-height: 20px;
253
253
  --jp-cell-collapser-not-active-hover-opacity: 0.6;
254
- --jp-cell-editor-background: var(--md-grey-100);
255
- --jp-cell-editor-border-color: var(--md-grey-300);
256
- --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
254
+ --jp-cell-editor-background: var(--md-grey-100, #f5f5f5);
255
+ --jp-cell-editor-border-color: var(--md-grey-300, #e0e0e0);
256
+ --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300, #64b5f6);
257
257
  --jp-cell-editor-active-background: var(--jp-layout-color0);
258
258
  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
259
259
  --jp-cell-prompt-width: 64px;
@@ -261,7 +261,7 @@ all of MD as it is not optimized for dense, information rich UIs.
261
261
  --jp-cell-prompt-letter-spacing: 0;
262
262
  --jp-cell-prompt-opacity: 1;
263
263
  --jp-cell-prompt-not-active-opacity: 0.5;
264
- --jp-cell-prompt-not-active-font-color: var(--md-grey-700);
264
+ --jp-cell-prompt-not-active-font-color: var(--md-grey-700, #616161);
265
265
 
266
266
  /* A custom blend of MD grey and blue 600
267
267
  * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
@@ -275,7 +275,7 @@ all of MD as it is not optimized for dense, information rich UIs.
275
275
 
276
276
  --jp-notebook-padding: 10px;
277
277
  --jp-notebook-select-background: var(--jp-layout-color1);
278
- --jp-notebook-multiselected-color: var(--md-blue-50);
278
+ --jp-notebook-multiselected-color: var(--md-blue-50, #e3f2fd);
279
279
 
280
280
  /* The scroll padding is calculated to fill enough space at the bottom of the
281
281
  notebook to show one single-line cell (with appropriate padding) at the top
@@ -291,8 +291,8 @@ all of MD as it is not optimized for dense, information rich UIs.
291
291
  /* Rendermime styles */
292
292
 
293
293
  --jp-rendermime-error-background: #fdd;
294
- --jp-rendermime-table-row-background: var(--md-grey-100);
295
- --jp-rendermime-table-row-hover-background: var(--md-light-blue-50);
294
+ --jp-rendermime-table-row-background: var(--md-grey-100, #cfd8dc);
295
+ --jp-rendermime-table-row-hover-background: var(--md-light-blue-50, #e1f5fe);
296
296
 
297
297
  /* Dialog specific styles */
298
298
 
@@ -309,7 +309,7 @@ all of MD as it is not optimized for dense, information rich UIs.
309
309
  --jp-toolbar-background: var(--jp-layout-color1);
310
310
  --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);
311
311
  --jp-toolbar-header-margin: 4px 4px 0 4px;
312
- --jp-toolbar-active-background: var(--md-grey-300);
312
+ --jp-toolbar-active-background: var(--md-grey-300, #90a4ae);
313
313
 
314
314
  /* Statusbar specific styles */
315
315
 
@@ -317,10 +317,10 @@ all of MD as it is not optimized for dense, information rich UIs.
317
317
 
318
318
  /* Input field styles */
319
319
 
320
- --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
320
+ --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300, #64b5f6);
321
321
  --jp-input-active-background: var(--jp-layout-color1);
322
322
  --jp-input-hover-background: var(--jp-layout-color1);
323
- --jp-input-background: var(--md-grey-100);
323
+ --jp-input-background: var(--md-grey-100, #f5f5f5);
324
324
  --jp-input-border-color: var(--jp-inverse-border-color);
325
325
  --jp-input-active-border-color: var(--jp-brand-color1);
326
326
  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
@@ -337,7 +337,7 @@ all of MD as it is not optimized for dense, information rich UIs.
337
337
  --jp-mirror-editor-atom-color: #88f;
338
338
  --jp-mirror-editor-number-color: #080;
339
339
  --jp-mirror-editor-def-color: #00f;
340
- --jp-mirror-editor-variable-color: var(--md-grey-900);
340
+ --jp-mirror-editor-variable-color: var(--md-grey-900, #212121);
341
341
  --jp-mirror-editor-variable-2-color: rgb(0, 54, 109);
342
342
  --jp-mirror-editor-variable-3-color: #085;
343
343
  --jp-mirror-editor-punctuation-color: #05a;
@@ -393,32 +393,32 @@ all of MD as it is not optimized for dense, information rich UIs.
393
393
  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
394
394
 
395
395
  /* Icon colors that work well with light or dark backgrounds */
396
- --jp-icon-contrast-color0: var(--md-purple-600);
397
- --jp-icon-contrast-color1: var(--md-green-600);
398
- --jp-icon-contrast-color2: var(--md-pink-600);
399
- --jp-icon-contrast-color3: var(--md-blue-600);
396
+ --jp-icon-contrast-color0: var(--md-purple-600, #8e24aa);
397
+ --jp-icon-contrast-color1: var(--md-green-600, #43a047);
398
+ --jp-icon-contrast-color2: var(--md-pink-600, #d81b60);
399
+ --jp-icon-contrast-color3: var(--md-blue-600, #1e88e5);
400
400
 
401
401
  /* Button colors */
402
- --jp-accept-color-normal: var(--md-blue-700);
403
- --jp-accept-color-hover: var(--md-blue-800);
404
- --jp-accept-color-active: var(--md-blue-900);
405
- --jp-warn-color-normal: var(--md-red-700);
406
- --jp-warn-color-hover: var(--md-red-800);
407
- --jp-warn-color-active: var(--md-red-900);
408
- --jp-reject-color-normal: var(--md-grey-600);
409
- --jp-reject-color-hover: var(--md-grey-700);
410
- --jp-reject-color-active: var(--md-grey-800);
402
+ --jp-accept-color-normal: var(--md-blue-700, #1976d2);
403
+ --jp-accept-color-hover: var(--md-blue-800, #1565c0);
404
+ --jp-accept-color-active: var(--md-blue-900, #0d47a1);
405
+ --jp-warn-color-normal: var(--md-red-700, #d32f2f);
406
+ --jp-warn-color-hover: var(--md-red-800, #c62828);
407
+ --jp-warn-color-active: var(--md-red-900, #b71c1c);
408
+ --jp-reject-color-normal: var(--md-grey-600, #757575);
409
+ --jp-reject-color-hover: var(--md-grey-700, #616161);
410
+ --jp-reject-color-active: var(--md-grey-800, #424242);
411
411
 
412
412
  /* File or activity icons and switch semantic variables */
413
413
  --jp-jupyter-icon-color: #f37626;
414
414
  --jp-notebook-icon-color: #f37626;
415
- --jp-json-icon-color: var(--md-orange-700);
416
- --jp-console-icon-background-color: var(--md-blue-700);
415
+ --jp-json-icon-color: var(--md-orange-700, #f57c00);
416
+ --jp-console-icon-background-color: var(--md-blue-700, #1976d2);
417
417
  --jp-console-icon-color: white;
418
- --jp-terminal-icon-background-color: var(--md-grey-800);
419
- --jp-terminal-icon-color: var(--md-grey-200);
420
- --jp-text-editor-icon-color: var(--md-grey-700);
421
- --jp-inspector-icon-color: var(--md-grey-700);
422
- --jp-switch-color: var(--md-grey-400);
423
- --jp-switch-true-position-color: var(--md-orange-900);
418
+ --jp-terminal-icon-background-color: var(--md-grey-800, #424242);
419
+ --jp-terminal-icon-color: var(--md-grey-200, #eee);
420
+ --jp-text-editor-icon-color: var(--md-grey-700, #616161);
421
+ --jp-inspector-icon-color: var(--md-grey-700, #616161);
422
+ --jp-switch-color: var(--md-grey-400, #bdbdbd);
423
+ --jp-switch-true-position-color: var(--md-orange-900, #e65100);
424
424
  }