Merge pull request #6020 from telamonian/basic-statusbar-theming

Added basic theming for statusbar

packages/notebook/style/not-trusted-icon-dark.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#EEEEEE" stroke-width="2"/>
+    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#EEEEEE" stroke-width="2"/>
+    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#EEEEEE" stroke-width="2"/>
+</svg>

packages/notebook/style/not-trusted-icon-light.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-main" d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#333333" stroke-width="2"/>
+</svg>

packages/notebook/style/not-trusted-icon.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.33319 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(3 3)" stroke="#EEEEEE" stroke-width="2"/>
-<path d="M7.36842 0L0 7.36479" transform="translate(9.31592 9.32031)" stroke="#EEEEEE" stroke-width="2"/>
-<path d="M7.36842 0L0 7.36479" transform="translate(9.31592 16.6836) scale(1 -1)" stroke="#EEEEEE" stroke-width="2"/>
-</svg>

packages/notebook/style/status.css

@@ -3,10 +3,26 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.jp-StatusItem-untrusted {
-  background-image: url('./not-trusted-icon.svg');
+/*
+ * icons for light themes
+ */
+
+[data-theme-light='true'] .jp-StatusItem-untrusted {
+  background-image: url('./not-trusted-icon-light.svg');
+}
+
+[data-theme-light='true'] .jp-StatusItem-trusted {
+  background-image: url('./trusted-icon-light.svg');
+}
+
+/*
+ * icons for dark themes
+ */
+
+[data-theme-light='false'] .jp-StatusItem-untrusted {
+  background-image: url('./not-trusted-icon-dark.svg');
 }
 
-.jp-StatusItem-trusted {
-  background-image: url('./trusted-icon.svg');
+[data-theme-light='false'] .jp-StatusItem-trusted {
+  background-image: url('./trusted-icon-dark.svg');
 }

packages/notebook/style/trusted-icon-dark.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#EEEEEE" stroke-width="2"/>
+    <path class="jp-icon-main" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#EEEEEE" stroke="#EEEEEE"/>
+</svg>

packages/notebook/style/trusted-icon-light.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="jp-icon-main" d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-main" d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#333333" stroke="#333333"/>
+</svg>

packages/notebook/style/trusted-icon.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.86094 11.4409C0.826448 8.77027 0.863779 6.05764 1.24907 4.19932C2.48206 3.93347 4.08068 3.40347 5.60102 2.8449C7.23549 2.2444 8.85666 1.5815 9.9876 1.09539C11.0597 1.58341 12.6094 2.2444 14.218 2.84339C15.7503 3.41394 17.3995 3.95258 18.7539 4.21385C19.1364 6.07177 19.1709 8.77722 18.139 11.4409C17.0303 14.3032 14.6668 17.1844 9.99999 18.9354C5.3332 17.1844 2.96968 14.3032 1.86094 11.4409Z" transform="translate(2 3)" stroke="#EEEEEE" stroke-width="2"/>
-<path d="M2.86015 4.86535L0.726549 2.99959L0 3.63045L2.86015 6.13157L8 0.630872L7.27857 0L2.86015 4.86535Z" transform="translate(8 9.86719)" fill="#EEEEEE" stroke="#EEEEEE"/>
-</svg>

packages/statusbar/src/style/statusbar.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { textItem } from './text';
 import { style } from 'typestyle/lib';
 import vars from './variables';
 import { rightToLeft, leftToRight, centeredFlex } from './layout';
@@ -19,7 +20,12 @@ const interactiveHover = {
 };
 
 const clicked = {
-  backgroundColor: `${vars.clickColor}`
+  backgroundColor: vars.clickColor,
+  $nest: {
+    ['.' + textItem]: {
+      color: vars.textClickColor
+    }
+  }
 };
 
 export const statusBar = style(

packages/statusbar/src/style/variables.ts

@@ -2,12 +2,13 @@
 // Distributed under the terms of the Modified BSD License.
 
 export default {
-  hoverColor: '#8a8a8a',
-  clickColor: '#a6a6a6',
-  backgroundColor: '#757575',
+  hoverColor: 'var(--jp-layout-color3)',
+  clickColor: 'var(--jp-brand-color1)',
+  backgroundColor: 'var(--jp-layout-color2)',
   height: '24px',
   fontSize: 'var(--jp-ui-font-size1)',
-  textColor: '#EEEEEE',
+  textColor: 'var(--jp-ui-font-color1)',
+  textClickColor: 'white',
   itemMargin: '2px',
   itemPadding: '6px',
   textIconHalfSpacing: '3px',

packages/statusbar/style/index.css

@@ -3,14 +3,30 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.jp-StatusItem-kernel {
-  background-image: url('./kernel-icon.svg');
+.jp-StatusItem-line-form {
+  background-image: url('./line-form.svg');
 }
 
-.jp-StatusItem-terminal {
-  background-image: url('./terminal-icon.svg');
+/*
+ * icons for light themes
+ */
+
+[data-theme-light='true'] .jp-StatusItem-kernel {
+  background-image: url('./kernel-icon-light.svg');
 }
 
-.jp-StatusItem-line-form {
-  background-image: url('./line-form.svg');
+[data-theme-light='true'] .jp-StatusItem-terminal {
+  background-image: url('./terminal-icon-light.svg');
+}
+
+/*
+ * icons for dark themes
+ */
+
+[data-theme-light='false'] .jp-StatusItem-kernel {
+  background-image: url('./kernel-icon-dark.svg');
+}
+
+[data-theme-light='false'] .jp-StatusItem-terminal {
+  background-image: url('./terminal-icon-dark.svg');
 }

packages/statusbar/style/kernel-icon-dark.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" fill="black" fill-opacity="0"/>
+    <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
+    <path class="jp-icon-main" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#EEEEEE" stroke-width="2"/>
+    <path class="jp-icon-main" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#EEEEEE"/>
+</svg>

packages/statusbar/style/kernel-icon-light.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" fill="black" fill-opacity="0"/>
+    <rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
+    <path class="jp-icon-main" d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#333333" stroke-width="2"/>
+    <path class="jp-icon-main" d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#333333"/>
+</svg>

packages/statusbar/style/kernel-icon.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="black" fill-opacity="0"/>
-<rect width="18" height="20" fill="black" fill-opacity="0" transform="translate(3 2)"/>
-<path d="M4.10885 6.74135C4.20452 6.21505 4.39041 5.72544 4.80634 5.09319C5.35203 4.43482 6.35067 3.89653 7.68975 3.52838C9.02471 3.16136 10.5654 3 11.9998 3C13.4341 3 14.9749 3.16136 16.3098 3.52838C17.649 3.89655 18.6477 4.43488 19.1933 5.0933C19.6095 5.72557 19.7955 6.21514 19.8912 6.74139C19.9967 7.32185 20 7.97294 20 9C20 9.35129 19.7844 10.7386 19.2911 12.4034C18.8013 14.0565 18.0953 15.7799 17.2191 16.8753C16.7844 17.4188 16.3844 17.8059 16.0618 18.0944C15.9489 18.1953 15.8534 18.2774 15.7609 18.3569C15.7136 18.3976 15.6672 18.4375 15.6196 18.4789C15.5062 18.5777 15.3431 18.7207 15.2198 18.8745C14.9711 19.1847 14.7469 19.4839 14.5613 19.7317C14.4709 19.8523 14.3897 19.9607 14.3193 20.0523C14.0816 20.3611 13.9259 20.5338 13.777 20.6516C13.5455 20.8348 13.1949 21 11.9998 21C10.8047 21 10.4542 20.8348 10.2229 20.6517C10.074 20.5339 9.91841 20.3612 9.68072 20.0523C9.61032 19.9609 9.52922 19.8526 9.43901 19.7322C9.25332 19.4843 9.02907 19.1849 8.78025 18.8745C8.5646 18.6055 8.27898 18.3643 8.04285 18.1648C7.98552 18.1164 7.93111 18.0704 7.88133 18.0271C7.58713 17.7713 7.22852 17.4348 6.78084 16.8753C5.90445 15.7799 5.19851 14.0565 4.70872 12.4034C4.21548 10.7387 4 9.35134 4 9C4 7.97301 4.00333 7.32185 4.10885 6.74135Z" stroke="#EEEEEE" stroke-width="2"/>
-<path d="M15.9999 18C15.9999 19 14 22 12 22C10 22 8 19 8 18C8 14.9624 10.067 11 12 11C13.933 11 15.9999 14.9624 15.9999 18Z" fill="#EEEEEE"/>
-</svg>

packages/statusbar/style/line-form.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
+    <path class="jp-icon-main" fill="white" d="M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"/>
     <path fill="none" d="M0 0h24v24H0z"/>
 </svg>