diff --git a/.gitignore b/.gitignore
index 9cf8cd6..3967bc9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,6 +68,10 @@ typings/
# Yarn Integrity file
.yarn-integrity
+# yarn >=2.x local files
+.yarn/*
+.pnp.*
+
# dotenv environment variables file
.env
.env.test
@@ -240,6 +244,10 @@ labextensions
.doit.*
# for VSCode users
-.vscode
+*.code-workspace
+.history
+.vscode/*
+!.vscode/extension.json
+# for MacOS users
.DS_Store
diff --git a/README.md b/README.md
index 084f95f..e884cfb 100644
--- a/README.md
+++ b/README.md
@@ -18,26 +18,39 @@ Welcome to the JupyterLab accessible themes repository ๐๐ฝ .
To learn more about the broader accessibility initiatives within Jupyter, check the [jupyter/accessibility repository][jupyter-accesibility].
- [JupyterLab accessible themes](#jupyterlab-accessible-themes)
+ - [Themes](#themes)
+ - [Font](#font)
- [๐ฆ Requirements](#-requirements)
- - [๐ Installing the extension](#-installing-the-extension)
- - [๐งฝ Uninstalling the extension](#-uninstalling-the-extension)
- [๐๐ฝโโ๏ธ Contributing](#๏ธ-contributing)
- [๐ป Installing the development version](#-installing-the-development-version)
- [Pre-requisites](#pre-requisites)
+ - [Building and linking the extension](#building-and-linking-the-extension)
+ - [๐งน Pre-commit hooks](#-pre-commit-hooks)
- [๐งฝ Uninstalling the development version](#-uninstalling-the-development-version)
- [โ
Testing the extension](#-testing-the-extension)
- [Frontend tests](#frontend-tests)
- [Integration tests](#integration-tests)
- [๐ฆ Packaging the extension](#-packaging-the-extension)
- [๐ License](#-license)
+ - [Acknowledgements](#acknowledgements)
This repository defines a set of accessible themes according to [WCAG color standards](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Please note that some themes are optimized for colorblindness and/or high contrast. Inside the readme of each theme you will find detailed information of the colors, its purpose and reference links from the original authors.
## Themes
-- [Pitaya Smoothie](./packages/pitaya_smoothie/README.md) - Color-blind friendly
+- [Pitaya Smoothie](./packages/pitayasmoothie/README.md) - Color-blind friendly
+- [GitHub light](./packages/githublight/README.md) - Color-blind friendly
+## Font
+
+All the themes are using the [Atkinson Hyperlegible font](https://brailleinstitute.org/freefont), which focuses on letterform distinction to increase character recognition, ultimately improving readability.
+
+This font can only be changed for the `Markdown viewer` and the `Terminal`. You will need to make these changes from the `Advanced settings` editor in the JupyterLab UI:
+
+1. Select the `Settings` option in the `menu bar`.
+2. Go to `Markdown viewer settings`, and type the font family that you want to use.
+3. To change the `Terminal` font, scroll down to `Terminal settings` and type the name of the font family.
## ๐ฆ Requirements
@@ -73,26 +86,36 @@ pip uninstall jupyterlab_accessible_themes
> **Note**
> The `jlpm` command is JupyterLab's pinned version of [yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use`yarn` or `npm` in lieu of `jlpm` in the commands below.
+> You will need to have NodeJS installed in your local computer to build the extension package.
-1. Clone this repository to your local computer
+1. Clone this repository to your local computer:
```bash
git clone https://github.com/Quansight-Labs/jupyterlab-accessible-themes.git
```
-2. Change to the `jupyterlab_accessible_themes` directory
+2. Change to the `jupyterlab-accessible-themes` directory:
```bash
- cd jupyterlab_accessible_themes
+ cd jupyterlab-accessible-themes
```
-3. Install the package in development mode
+3. Optional- Create and activate a development environment with your package manager:
```bash
- pip install -e .
+ # Create environment named `jupyterlab-accessible-themes`
+ conda create -n jupyterlab-accessible-themes
+ conda activate jupyterlab-accessible-themes
+ ```
+
+4. Install Jupyterlab and NodeJS **if not installed**:
+
+ ```bash
+ # Install node and jupyterlab from conda-forge
+ conda install -c conda-forge 'nodejs>16' 'jupyterlab<4'
```
-4. Now you'll need to link the development version of the extension to JupyterLab and rebuild the Typescript source:
+5. Install the node dependencies and build the extension:
```bash
# Install node dependencies
@@ -100,18 +123,39 @@ pip uninstall jupyterlab_accessible_themes
# Compile packages before linking to Jupyterlab development version
jlpm build
+ ```
+6. Install the package in development mode:
+
+ ```bash
+ pip install -e .
+ ```
+
+7. Now you'll need to link the development version of the extension to JupyterLab and rebuild the Typescript source:
+
+ ```bash
# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite
```
-5. After doing some changes, to visualize them in your local Jupyterlab please re-run the following command:
+8. On first installation, or after making some changes, to visualize them in your local JupyterLab re-run the following command:
```bash
# Rebuild extension Typescript source after making changes
jlpm build
```
+9. Run JupyterLab and check that the installation worked:
+
+ ```bash
+ # Run JupyterLab
+ jupyter lab
+ ```
+
+Once everything is installed, please remember that you will still need to select the theme inside JupyterLab via the main menu `Settings > Theme`.
+
+##### Further development tips
+
๐ You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
```bash
@@ -131,8 +175,6 @@ By default, the `jlpm build` command generates the source maps for this extensio
jupyter lab build --minimize=False
```
-Once everything is installed, please remember that you will still need to select the theme inside JupyterLab via the main menu `Settings > Theme`.
-
### ๐งน Pre-commit hooks
This repository uses the `prettier` [pre-commit hook](https://pre-commit.com/) to standardize our YAML and markdown structure.
@@ -213,3 +255,4 @@ Detailed instructions for creating a `jupyterlab-accesible-themes` can be found
We want to thank the following sources for being the source of inspiration for one or more themes that are available in this repository,
- [Pitaya Smoothie theme](https://github.com/trallard/pitaya_smoothie)
+- [GitHub's VS Code themes](https://github.com/primer/github-vscode-theme)
diff --git a/packages/githublight/README.md b/packages/githublight/README.md
new file mode 100644
index 0000000..21861a0
--- /dev/null
+++ b/packages/githublight/README.md
@@ -0,0 +1,52 @@
+# GitHub Light
+
+A theme heavily inspired by the [`GitHub light default theme` for VSCode](https://github.com/primer/github-vscode-theme).
+
+## Usage โจ
+
+To enable the theme from the JupyterLab menu bar. Go to `Settings -> JupyterLab Theme -> Github Light`
+
+## Colors
+
+All the colors used for text in the theme are conformant with [WCAG 2.1 contrast standards](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+
+Background color:  `#ffffff`
+
+Highlight color:  `#321f7ad9`
+
+**WCAG conformance**
+
+All the colors in the table shown were tested with the background color.
+
+| Color | Hex | Ratio | Normal text | Large text |
+| ------------------------------------------------------------ | --------- | -------- | ----------- | ---------- |
+|  | `#1F2328` | 15.8 : 1 | AAA | AAA |
+|  | `#6e7781` | 4.5 : 1 | AA | AAA |
+|  | `#57606a` | 6.4 : 1 | AA | AAA |
+|  | `#424a53` | 9.0 : 1 | AAA | AAA |
+|  | `#32383f` | 11.8 : 1 | AAA | AAA |
+|  | `#24292f` | 14.7 : 1 | AAA | AAA |
+|  | `#0550ae` | 7.6 : 1 | AAA | AAA |
+|  | `#0a3069` | 12.8 : 1 | AAA | AAA |
+|  | `#116329` | 7.4 : 1 | AAA | AAA |
+|  | `#953800` | 7.4 : 1 | AAA | AAA |
+|  | `#a40e26` | 7.9 : 1 | AAA | AAA |
+|  | `#6639ba` | 7.3 : 1 | AAA | AAA |
+
+## Font
+
+This theme is using the [Atkinson Hyperlegible font](https://brailleinstitute.org/freefont), which focuses on letterform distinction to increase character recognition, ultimately improving readability.
+
+This font can only be changed for the `Markdown viewer` and the `Terminal`. You will need to make these changes from the `Advanced settings` editor in the JupyterLab UI:
+
+1. Select the `Settings` option in the `menu bar`.
+2. Go to `Markdown viewer settings`, and type the font family that you want to use.
+3. To change the `Terminal` font, scroll down to `Terminal settings` and type the name of the font family.
+
+## Screenshots
+
+
+
+## Acknowledgements
+
+This theme is based on and inspired by the [`GitHub Light Default` theme for VSCode](https://github.com/primer/github-vscode-theme)
diff --git a/packages/githublight/images/screenshot.png b/packages/githublight/images/screenshot.png
new file mode 100644
index 0000000..7b2231c
Binary files /dev/null and b/packages/githublight/images/screenshot.png differ
diff --git a/packages/githublight/package.json b/packages/githublight/package.json
new file mode 100644
index 0000000..82adff0
--- /dev/null
+++ b/packages/githublight/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "@jupyterlab-accessible-themes/jupyterlab-theme-githublight",
+ "version": "0.1.0",
+ "description": "GitHub Light in JupyterLab: a theme based on GitHub light interface colors. The colors are optimized for some types of color blindness.",
+ "license": "BSD-3-Clause",
+ "author": "Jupyter Accessibility Team",
+ "homepage": "https://github.com/Quansight-Labs/jupyterlab-accessible-themes",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/Quansight-Labs/jupyterlab-accessible-themes"
+ },
+ "bugs": {
+ "url": "https://github.com/Quansight-Labs/jupyterlab-accessible-themes"
+ },
+ "main": "lib/index.js",
+ "files": [
+ "{lib,style,src}/**/*.{.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,css}"
+ ],
+ "scripts": {
+ "build:lib": "tsc -b",
+ "build:ext": "jupyter labextension build --debug .",
+ "watch:lib": "tsc -b -w --preserveWatchOutput",
+ "watch:ext": "jupyter labextension watch --debug ."
+ },
+ "sideEffects": [
+ "style/*.css"
+ ],
+ "types": "lib/index.d.ts",
+ "dependencies": {
+ "@jupyterlab/application": "^3.1.0",
+ "@jupyterlab/apputils": "^3.1.0",
+ "@jupyterlab/settingregistry": "^3.1.0"
+ },
+ "devDependencies": {
+ "@jupyterlab/builder": "^3.0.2",
+ "base64-inline-loader": "^1.1.1"
+ },
+ "keywords": [
+ "jupyter",
+ "jupyterlab",
+ "jupyterlab-extension"
+ ],
+ "jupyterlab": {
+ "themePath": "style/index.css",
+ "extension": "lib/index.js",
+ "discovery": {
+ "server": {
+ "base": {
+ "name": "jupyterlab-accessible-themes"
+ },
+ "managers": [
+ "pip"
+ ]
+ }
+ },
+ "outputDir": "../../jupyterlab_accessible_themes/labextensions/githublight"
+ }
+}
diff --git a/packages/githublight/src/index.ts b/packages/githublight/src/index.ts
new file mode 100644
index 0000000..42163ad
--- /dev/null
+++ b/packages/githublight/src/index.ts
@@ -0,0 +1,62 @@
+// Copyright (c) Jupyter Accessibility Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ JupyterFrontEnd,
+ JupyterFrontEndPlugin,
+} from "@jupyterlab/application";
+
+import { IThemeManager } from "@jupyterlab/apputils";
+
+import { ISettingRegistry } from "@jupyterlab/settingregistry";
+
+/**
+ * Initialization data for the jupyterlab-accessible-themes extension.
+ */
+const plugin: JupyterFrontEndPlugin = {
+ // NOTE: The package id cannot contain a dash or underscore, so we need
+ // to remove it here.
+ id: "jupyterlab-accessible-themes:githublight",
+ autoStart: true,
+ requires: [IThemeManager],
+ optional: [ISettingRegistry],
+ activate: (
+ app: JupyterFrontEnd,
+ manager: IThemeManager,
+ settingRegistry: ISettingRegistry | null
+ ) => {
+ console.log(
+ "JupyterLab extension jupyterlab-accessible-themes is activated!"
+ );
+ // NOTE: The package name cannot contain a dash or underscore, so we need
+ // to remove it for the installation folder name.
+ const style =
+ "@jupyterlab-accessible-themes/jupyterlab-theme-githublight/index.css";
+
+ manager.register({
+ name: "GitHub Light",
+ isLight: true,
+ load: () => manager.loadCSS(style),
+ unload: () => Promise.resolve(undefined),
+ });
+
+ if (settingRegistry) {
+ settingRegistry
+ .load(plugin.id)
+ .then((settings) => {
+ console.log(
+ "jupyterlab-accessible-themes settings loaded:",
+ settings.composite
+ );
+ })
+ .catch((reason) => {
+ console.error(
+ "Failed to load settings for jupyterlab-accessible-themes.",
+ reason
+ );
+ });
+ }
+ },
+};
+
+export default plugin;
diff --git a/packages/githublight/style/index.css b/packages/githublight/style/index.css
new file mode 100644
index 0000000..ab0c91f
--- /dev/null
+++ b/packages/githublight/style/index.css
@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/*
+The name of the variables follow the css patterns described in the css
+jupyterlab developer guide,
+https://jupyterlab.readthedocs.io/en/latest/developer/css.html
+*/
+@import "./variables.css";
+/* Set the default typography for monospace elements */
+tt,
+code,
+kbd,
+samp,
+pre {
+ font-family: var(--jp-code-font-family);
+ font-size: var(--jp-code-font-size);
+ line-height: var(--jp-code-line-height);
+}
+
+/* --------------------------------------
+/* Change gutter style
+-----------------------------------------*/
+.cm-s-jupyter .CodeMirror-gutter {
+ background-color: var(--gh-light-white);
+}
+
+/* --------------------------------------
+/* Change tab style
+-----------------------------------------*/
+.lm-DockPanel-tabBar .lm-TabBar-tab.jp-mod-current:before {
+ background: var(--gh-light-white);
+}
+
+.jp-FileBrowser-toolbar .jp-ToolbarButtonComponent[data-command='filebrowser:create-main-launcher'] {
+ background: var(--gh-light-green4);
+}
+
+.lm-DockPanel-tabBar {
+ color: var(--gh-light-blue6);
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
+ color: var(--gh-light-blue6);
+}
+
+/* --------------------------------------
+/* Change list item style
+-----------------------------------------*/
+.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
+ fill: var(--gh-light-blue6);
+}
+
+.jp-DirListing-item.jp-mod-selected {
+ background: var(--gh-light-gray2);
+}
+
+/* --------------------------------------
+/* Change disclaimer button font color
+-----------------------------------------*/
+.jp-extensionmanager-disclaimer-disable {
+ color: var(--gh-light-black) !important;
+}
+
+/* --------------------------------------
+/* Change fill color for icons
+-----------------------------------------*/
+.jp-icon3[fill] {
+ fill: unset;
+}
+
+/* --------------------------------------
+/* Change hover color in settings forms
+-----------------------------------------*/
+.jp-SettingsPanel .jp-objectFieldWrapper .form-group:hover {
+ background-color: var(--gh-light-gray1) !important;
+}
+
+/* --------------------------------------
+/* Change sidebar
+-----------------------------------------*/
+
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
+ fill: var(--gh-light-gray5);
+}
+
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab.lm-mod-current {
+ fill: var(--gh-light-black);
+}
+
+.jp-SideBar .lm-TabBar-tab:not(.lm-mod-current), #jp-down-stack .lm-TabBar-tab:not(.lm-mod-current) {
+ fill: var(--gh-light-gray5);
+}
+
+.jp-InputGroup input {
+ background-color: var(--gh-light-white);
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/packages/githublight/style/variables.css b/packages/githublight/style/variables.css
new file mode 100644
index 0000000..015f898
--- /dev/null
+++ b/packages/githublight/style/variables.css
@@ -0,0 +1,444 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/*
+The following CSS variables define the main, public API for styling JupyterLab.
+These variables should be used by all plugins wherever possible. In other
+words, plugins should not define custom colors, sizes, etc unless absolutely
+necessary. This enables users to change the visual theme of JupyterLab
+by changing these variables.
+
+Many variables appear in an ordered sequence (0,1,2,3). These sequences
+are designed to work well together, so for example, `--jp-border-color1` should
+be used with `--jp-layout-color1`. The numbers have the following meanings:
+
+* 0: super-primary, reserved for special emphasis
+* 1: primary, most important under normal situations
+* 2: secondary, next most important under normal situations
+* 3: tertiary, next most important under normal situations
+
+Throughout JupyterLab, we are mostly following principles from Google's
+Material Design when selecting colors. We are not, however, following
+all of MD as it is not optimized for dense, information rich UIs.
+
+The name of the variables follow the css patterns described in the css
+jupyterlab developer guide,
+https://jupyterlab.readthedocs.io/en/latest/developer/css.html and github
+vscode themes,
+https://github.com/primer/primitives/blob/main/data/colors/themes/light.ts.
+*/
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');
+
+:root {
+ /*
+ * Original colors are available at:
+ * https://github.com/primer/primitives/blob/main/data/colors/themes/light.ts
+ */
+ --gh-light-black: #1F2328;
+ --gh-light-white: #ffffff;
+ --gh-light-gray0: #f6f8fa;
+ --gh-light-gray1: #eaeef2;
+ --gh-light-gray2: #d0d7de;
+ --gh-light-gray3: #afb8c1;
+ --gh-light-gray4: #8c959f;
+ --gh-light-gray5: #6e7781;
+ --gh-light-gray6: #57606a;
+ --gh-light-gray7: #424a53;
+ --gh-light-gray8: #32383f;
+ --gh-light-gray9: #24292f;
+ --gh-light-blue0: #ddf4ff;
+ --gh-light-blue1: #b6e3ff;
+ --gh-light-blue2: #80ccff;
+ --gh-light-blue3: #54aeff;
+ --gh-light-blue4: #218bff;
+ --gh-light-blue5: #0969da;
+ --gh-light-blue6: #0550ae;
+ --gh-light-blue7: #033d8b;
+ --gh-light-blue8: #0a3069;
+ --gh-light-blue9: #002155;
+ --gh-light-green0: #dafbe1;
+ --gh-light-green1: #aceebb;
+ --gh-light-green2: #6fdd8b;
+ --gh-light-green3: #4ac26b;
+ --gh-light-green4: #2da44e;
+ --gh-light-green5: #1a7f37;
+ --gh-light-green6: #116329;
+ --gh-light-green7: #044f1e;
+ --gh-light-green8: #003d16;
+ --gh-light-green9: #002d11;
+ --gh-light-yellow0: #fff8c5;
+ --gh-light-yellow1: #fae17d;
+ --gh-light-yellow2: #eac54f;
+ --gh-light-yellow3: #d4a72c;
+ --gh-light-yellow4: #bf8700;
+ --gh-light-yellow5: #9a6700;
+ --gh-light-yellow6: #7d4e00;
+ --gh-light-yellow7: #633c01;
+ --gh-light-yellow8: #4d2d00;
+ --gh-light-yellow9: #3b2300;
+ --gh-light-orange0: #fff1e5;
+ --gh-light-orange1: #ffd8b5;
+ --gh-light-orange2: #ffb77c;
+ --gh-light-orange3: #fb8f44;
+ --gh-light-orange4: #e16f24;
+ --gh-light-orange5: #bc4c00;
+ --gh-light-orange6: #953800;
+ --gh-light-orange7: #762c00;
+ --gh-light-orange8: #5c2200;
+ --gh-light-orange9: #471700;
+ --gh-light-red0: #ffebe9;
+ --gh-light-red1: #ffcecb;
+ --gh-light-red2: #ffaba8;
+ --gh-light-red3: #ff8182;
+ --gh-light-red4: #fa4549;
+ --gh-light-red5: #cf222e;
+ --gh-light-red6: #a40e26;
+ --gh-light-red7: #82071e;
+ --gh-light-red8: #660018;
+ --gh-light-red9: #4c0014;
+ --gh-light-purple0: #fbefff;
+ --gh-light-purple1: #ecd8ff;
+ --gh-light-purple2: #d8b9ff;
+ --gh-light-purple3: #c297ff;
+ --gh-light-purple4: #a475f9;
+ --gh-light-purple5: #8250df;
+ --gh-light-purple6: #6639ba;
+ --gh-light-purple7: #512a97;
+ --gh-light-purple8: #3e1f79;
+ --gh-light-purple9: #2e1461;
+ --gh-light-pink0: #ffeff7;
+ --gh-light-pink1: #ffd3eb;
+ --gh-light-pink2: #ffadda;
+ --gh-light-pink3: #ff80c8;
+ --gh-light-pink4: #e85aad;
+ --gh-light-pink5: #bf3989;
+ --gh-light-pink6: #99286e;
+ --gh-light-pink7: #772057;
+ --gh-light-pink8: #611347;
+ --gh-light-pink9: #4d0336;
+ --gh-light-coral0: #fff0eb;
+ --gh-light-coral1: #ffd6cc;
+ --gh-light-coral2: #ffb4a1;
+ --gh-light-coral3: #fd8c73;
+ --gh-light-coral4: #ec6547;
+ --gh-light-coral5: #c4432b;
+ --gh-light-coral6: #9e2f1c;
+ --gh-light-coral7: #801f0f;
+ --gh-light-coral8: #691105;
+ --gh-light-coral9: #510901;
+ /* Make status bar */
+ --jp-statusbar-height: 24px;
+ /* Elevation
+ *
+ * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
+ *
+ * https://github.com/material-components/material-components-web
+ * https://material-components-web.appspot.com/elevation.html
+ */
+ --jp-shadow-base-lightness: 0;
+ --jp-shadow-umbra-color: rgba(
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ 0.2
+ );
+ --jp-shadow-penumbra-color: rgba(
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ 0.14
+ );
+ --jp-shadow-ambient-color: rgba(
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ var(--jp-shadow-base-lightness),
+ 0.12
+ );
+ --jp-elevation-z0: none;
+ --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color), 0px 1px 1px 0px var(--jp-shadow-penumbra-color),
+ 0px 1px 3px 0px var(--jp-shadow-ambient-color);
+ --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color), 0px 2px 2px 0px var(--jp-shadow-penumbra-color),
+ 0px 1px 5px 0px var(--jp-shadow-ambient-color);
+ --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color), 0px 4px 5px 0px var(--jp-shadow-penumbra-color),
+ 0px 1px 10px 0px var(--jp-shadow-ambient-color);
+ --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color), 0px 6px 10px 0px var(--jp-shadow-penumbra-color),
+ 0px 1px 18px 0px var(--jp-shadow-ambient-color);
+ --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color), 0px 8px 10px 1px var(--jp-shadow-penumbra-color),
+ 0px 3px 14px 2px var(--jp-shadow-ambient-color);
+ --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color), 0px 12px 17px 2px var(--jp-shadow-penumbra-color),
+ 0px 5px 22px 4px var(--jp-shadow-ambient-color);
+ --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
+ 0px 16px 24px 2px var(--jp-shadow-penumbra-color), 0px 6px 30px 5px var(--jp-shadow-ambient-color);
+ --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
+ 0px 20px 31px 3px var(--jp-shadow-penumbra-color), 0px 8px 38px 7px var(--jp-shadow-ambient-color);
+ --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
+ 0px 24px 38px 3px var(--jp-shadow-penumbra-color), 0px 9px 46px 8px var(--jp-shadow-ambient-color);
+ /* Borders
+ *
+ * The following variables, specify the visual styling of borders in JupyterLab.
+ */
+ --jp-border-width: 1px;
+ --jp-border-color0: var(--gh-light-gray0);
+ --jp-border-color1: var(--gh-light-gray1);
+ --jp-border-color2: var(--gh-light-gray2);
+ --jp-border-color3: var(--gh-light-gray3);
+ --jp-border-radius: 2px;
+ /* UI Fonts
+ *
+ * The UI font CSS variables are used for the typography all of the JupyterLab
+ * user interface elements that are not directly user generated content.
+ *
+ * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
+ * is applied to a parent element. When children elements, such as headings, are sized
+ * in em all things will be computed relative to that body size.
+ *
+ * By increasing the scale factor, the text will be easier to read and comprehend.
+ */
+ --jp-ui-font-scale-factor: 1.2;
+ --jp-ui-font-size0: 0.83333em;
+ --jp-ui-font-size1: 13px;
+ /* Base font size */
+ --jp-ui-font-size2: 1.25em;
+ --jp-ui-font-size3: 1.44em;
+ --jp-ui-font-family: "Atkinson Hyperlegible";
+ /*
+ * Use these font colors against the corresponding main layout colors.
+ * In a light theme, these go from dark to light.
+ * Dark theme: light to dark
+ */
+ /* Defaults use Material Design specification */
+ /* active item */
+ --jp-ui-font-color0: var(--gh-light-black);
+ /* sidebar files & top menu */
+ --jp-ui-font-color1: var(--gh-light-gray9);
+ --jp-ui-font-color2: var(--gh-light-gray8);
+ --jp-ui-font-color3: var(--gh-light-gray7);
+ /*
+ * Use these against the brand/accent/warn/error colors.
+ * These will typically go from light to darker, in both a dark and light theme.
+ */
+ --jp-ui-inverse-font-color0: var(--gh-light-black);
+ --jp-ui-inverse-font-color1: var(--gh-light-gray9);
+ --jp-ui-inverse-font-color2: var(--gh-light-gray8);
+ --jp-ui-inverse-font-color3: var(--gh-light-gray7);
+ /* Content Fonts
+ *
+ * Content font variables are used for typography of user generated content.
+ *
+ * The font sizing here is done assuming that the body font size of --jp-content-font-size1
+ * is applied to a parent element. When children elements, such as headings, are sized
+ * in em all things will be computed relative to that body size.
+ */
+ --jp-content-line-height: 1.6;
+ --jp-content-font-scale-factor: 1.2;
+ --jp-content-font-size0: 0.83333em;
+ --jp-content-font-size1: 14px;
+ /* Base font size */
+ --jp-content-font-size2: 1.2em;
+ --jp-content-font-size3: 1.44em;
+ --jp-content-font-size4: 1.728em;
+ --jp-content-font-size5: 2.0736em;
+ /* This gives a magnification of about 125% in presentation mode over normal. */
+ --jp-content-presentation-font-size1: 17px;
+ --jp-content-heading-line-height: 1;
+ --jp-content-heading-margin-top: 1.2em;
+ --jp-content-heading-margin-bottom: 0.8em;
+ --jp-content-heading-font-weight: 500;
+ /* Defaults use Material Design specification */
+ --jp-content-font-color0: var(--gh-light-black);
+ --jp-content-font-color1: var(--gh-light-black);
+ --jp-content-font-color2: var(--gh-light-black);
+ --jp-content-font-color3: var(--gh-light-black);
+ --jp-content-link-color: var(--gh-light-blue8);
+ --jp-content-font-family: "Atkinson Hyperlegible";
+ /*
+ * Code Fonts
+ *
+ * Code font variables are used for typography of code and other monospaces content.
+ */
+ --jp-code-font-size: 13px;
+ --jp-code-line-height: 1.3077;
+ /* 17px for 13px base */
+ --jp-code-padding: 0.385em;
+ /* 5px for 13px base */
+ --jp-code-font-family-default: Menlo, Consolas, "DejaVu Sans Mono", monospace;
+ --jp-code-font-family: var(--jp-code-font-family-default);
+ /* This gives a magnification of about 125% in presentation mode over normal. */
+ --jp-code-presentation-font-size: 16px;
+ /* may need to tweak cursor width if you change font size */
+ --jp-code-cursor-width0: 1.4px;
+ --jp-code-cursor-width1: 2px;
+ --jp-code-cursor-width2: 4px;
+ /* Layout
+ *
+ * The following are the main layout colors use in JupyterLab. In a light
+ * theme these would go from light to dark.
+ */
+ /* main notebook background - same as editor original theme*/
+ --jp-layout-color0: var(--gh-light-white);
+ /* sidebar - file names, menu bar, active tab */
+ --jp-layout-color1: var(--gh-light-gray0);
+ /* activity bar, inactive tab, status bar*/
+ /* here use same as inactive tabs */
+ --jp-layout-color2: var(--gh-light-gray0);
+ /* editor/notebok surrounding area */
+ --jp-layout-color3: var(--gh-light-gray0);
+ --jp-layout-color4: var(--gh-light-gray0);
+ /* Inverse Layout
+ *
+ * The following are the inverse layout colors use in JupyterLab. In a light
+ * theme these would go from dark to light.
+ *
+ * In versions of JupyterLab <= 3.5.x the variable is named as
+ * --jp-inverse-layout-colorX.
+ *
+ * In versions of JupyterLab >= 3.6.x the variable is named as
+ * --jp-inverse-layoutX.
+ *
+ * We are including both of them here.
+ */
+ --jp-inverse-layout-color0: var(--gh-light-black);
+ --jp-inverse-layout-color1: var(--gh-light-black);
+ /* status bar icons */
+ --jp-inverse-layout-color2: var(--gh-light-gray9);
+ /* activity bar icons */
+ --jp-inverse-layout-color3: var(--gh-light-gray8);
+ --jp-inverse-layout-color4: var(--gh-light-gray7);
+ --jp-inverse-layout0: var(--gh-light-black);
+ --jp-inverse-layout1: var(--gh-light-black);
+ --jp-inverse-layout2: var(--gh-light-gray9);
+ /* activity bar icons */
+ --jp-inverse-layout3: var(--gh-light-gray8);
+ --jp-inverse-layout4: var(--gh-light-gray7);
+ /* Brand/accent */
+ --jp-brand-color0: var(--gh-light-gray7);
+ /* sidebar active item */
+ --jp-brand-color1: var(--gh-light-gray0);
+ --jp-brand-color2: var(--gh-light-gray1);
+ --jp-brand-color3: var(--gh-light-gray2);
+ --jp-accent-color0: var(--gh-light-blue4);
+ --jp-accent-color1: var(--gh-light-blue3);
+ --jp-accent-color2: var(--gh-light-blue2);
+ --jp-accent-color3: var(--gh-light-blue1);
+ /* State colors (warn, error, success, info) */
+ --jp-warn-color0: var(--gh-light-gray6);
+ --jp-warn-color1: var(--gh-light-gray5);
+ --jp-warn-color2: var(--gh-light-gray4);
+ --jp-warn-color3: var(--gh-light-gray3);
+ --jp-error-color0: var(--gh-light-red4);
+ --jp-error-color1: var(--gh-light-red3);
+ --jp-error-color2: var(--gh-light-red2);
+ --jp-error-color3: var(--gh-light-red1);
+ --jp-success-color0: var(--gh-light-green4);
+ --jp-success-color1: var(--gh-light-green3);
+ --jp-success-color2: var(--gh-light-green2);
+ --jp-success-color3: var(--gh-light-green1);
+ --jp-info-color0: var(--gh-light-purple4);
+ --jp-info-color1: var(--gh-light-purple3);
+ --jp-info-color2: var(--gh-light-purple2);
+ --jp-info-color3: var(--gh-light-purple1);
+ /* Cell specific styles */
+ --jp-cell-padding: 5px;
+ --jp-cell-collapser-width: 8px;
+ --jp-cell-collapser-min-height: 20px;
+ --jp-cell-collapser-not-active-hover-opacity: 0.6;
+ --jp-cell-editor-background: var(--gh-light-white);
+ --jp-cell-editor-border-color: var(--gh-light-gray4);
+ --jp-cell-editor-active-background: var(--jp-layout-color2);
+ --jp-cell-editor-active-border-color: var(--jp-brand-color2);
+ --jp-cell-prompt-width: 64px;
+ --jp-cell-prompt-font-family: "Source Code Pro", monospace;
+ --jp-cell-prompt-letter-spacing: 0px;
+ --jp-cell-prompt-opacity: 1;
+ --jp-cell-prompt-not-active-opacity: 0.5;
+ --jp-cell-inprompt-font-color: var(--gh-light-black);
+ --jp-cell-prompt-not-active-font-color: var(--gh-light-black);
+ --jp-cell-outprompt-font-color: var(--gh-light-black);
+ /* Notebook specific styles */
+ --jp-notebook-padding: 10px;
+ --jp-notebook-select-background: var(--jp-layout-color1);
+ --jp-notebook-multiselected-color: var(--gh-light-yellow1);
+ /* The scroll padding is calculated to fill enough space at the bottom of the
+ notebook to show one single-line cell (with appropriate padding) at the top
+ when the notebook is scrolled all the way to the bottom. We also subtract one
+ pixel so that no scrollbar appears if we have just one single-line cell in the
+ notebook. This padding is to enable a 'scroll past end' feature in a notebook.
+ */
+ --jp-notebook-scroll-padding: calc(
+ 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - var(--jp-code-padding) - var(--jp-cell-padding) -
+ 1px
+ );
+ /* Dialog specific styles */
+ --jp-dialog-background: rgba(234, 238, 242, 0.8);
+ /* Console specific styles */
+ --jp-console-padding: 10px;
+ /* Toolbar specific styles */
+ --jp-toolbar-border-color: var(--jp-border-color1);
+ --jp-toolbar-micro-height: 8px;
+ --jp-toolbar-background: var(--jp-layout-color1);
+ --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(38, 27, 77, 0.24);
+ --jp-toolbar-header-margin: 4px 4px 0px 4px;
+ --jp-toolbar-active-background: var(--gh-light-gray2);
+ /* Input field styles */
+ --jp-input-active-background: var(--jp-layout-color1);
+ --jp-input-hover-background: var(--jp-layout-color1);
+ --jp-input-background: var(--jp-layout-color0);
+ --jp-input-border-color: var(--jp-border-color1);
+ --jp-input-active-border-color: var(--jp-brand-color1);
+ /* General editor styles */
+ --jp-editor-selected-background: var(--gh-light-blue0);
+ --jp-editor-selected-focused-background: var(--gh-light-gray1);
+ --jp-editor-cursor-color: var(--gh-light-black);
+ /* Code mirror specific styles
+ * The syntax highlighting used by code mirror is basic and will not
+ * differentiate a lot of tokens. When rendered, a lot of the tokens will be
+ * defined as a variable, for more info see:
+ * https://stackoverflow.com/questions/52877167/how-to-change-syntax-highlighting-in-jupyter-notebook
+ */
+ --jp-mirror-editor-keyword-color: var(--gh-light-red6);
+ --jp-mirror-editor-number-color: var(--gh-light-green6);
+ --jp-mirror-editor-def-color: var(--gh-light-purple6);
+ --jp-mirror-editor-variable-color: var(--gh-light-purple6);
+ --jp-mirror-editor-variable-2-color: var(--gh-light-orange6);
+ --jp-mirror-editor-variable-3-color: var(--gh-light-orange6);
+ --jp-mirror-editor-punctuation-color: var(--gh-light-green6);
+ --jp-mirror-editor-property-color: var(--gh-light-black);
+ --jp-mirror-editor-operator-color: var(--gh-light-orange6);
+ --jp-mirror-editor-comment-color: var(--gh-light-gray5);
+ --jp-mirror-editor-string-color: var(--gh-light-blue8);
+ --jp-mirror-editor-meta-color: var(--gh-light-blue6);
+ --jp-mirror-editor-string-2-color: var(--gh-light-blue6);
+ --jp-mirror-editor-builtin-color: var(--gh-light-purple6);
+ --jp-mirror-editor-bracket-color: var(--gh-light-orange6);
+ --jp-mirror-editor-tag-color: var(--gh-light-green6);
+ --jp-mirror-editor-attribute-color: var(--gh-light-black);
+ --jp-mirror-editor-header-color: var(--gh-light-red7);
+ --jp-mirror-editor-quote-color: var(--gh-light-green6);
+ --jp-mirror-editor-link-color: var(--gh-light-blue8);
+ --jp-mirror-editor-error-color: var(--gh-light-red7);
+ /* Vega extension styles */
+ --jp-vega-background: var(--gh-light-white);
+ /* Search-related styles */
+ --jp-search-toggle-off-opacity: 0.6;
+ --jp-search-toggle-hover-opacity: 0.8;
+ --jp-search-toggle-on-opacity: 1;
+ --jp-search-selected-match-background-color: var(--gh-light-blue0);
+ --jp-search-selected-match-color: var(--gh-light-green1);
+ --jp-search-unselected-match-background-color: var(--gh-light-yellow1);
+ --jp-search-unselected-match-color: var(--gh-light-yellow1);
+ /* scrollbar related styles. Supports every browser except Edge. */
+ --jp-scrollbar-background-color: var(--jp-layout-color4);
+ --jp-scrollbar-thumb-color: 242, 97, 150;
+ /* need to specify thumb color as an RGB triplet */
+ --jp-scrollbar-endpad: 3px;
+ /* the minimum gap between the thumb and the ends of a scrollbar */
+ /* hacks for setting the thumb shape. These do nothing in Firefox */
+ --jp-scrollbar-thumb-margin: 3.5px;
+ /* the space in between the sides of the thumb and the track */
+ --jp-scrollbar-thumb-radius: 9px;
+ /* set to a large-ish value for rounded endcaps on the thumb */
+ --jp-icon-contrast-color0: var(--gh-light-gray6);
+}
+
+/*# sourceMappingURL=variables.css.map */
diff --git a/packages/githublight/tsconfig.json b/packages/githublight/tsconfig.json
new file mode 100644
index 0000000..4432835
--- /dev/null
+++ b/packages/githublight/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig",
+ "compilerOptions": {
+ "outDir": "./lib",
+ "rootDir": "./src"
+ },
+ "include": ["./**/*"]
+}
diff --git a/packages/pitayasmoothie/README.md b/packages/pitayasmoothie/README.md
index 191b655..ff4fab2 100644
--- a/packages/pitayasmoothie/README.md
+++ b/packages/pitayasmoothie/README.md
@@ -18,7 +18,7 @@ Background color:  `
Highlight color:  `#321f7ad9`
-**WCAG compliance**
+**WCAG conformance**
| Color | Hex | Ratio | Normal text | Large text |
| ------------------------------------------------------------ | --------- | -------- | ----------- | ---------- |
@@ -35,6 +35,15 @@ Highlight color:  | `#f45c7b` | 5.7 : 1 | AA | AAA |
|  | `#ffe46b` | 14.2 : 1 | AAA | AAA |
+## Font
+
+This theme is using the [Atkinson Hyperlegible font](https://brailleinstitute.org/freefont), which focuses on letterform distinction to increase character recognition, ultimately improving readability.
+
+This font can only be changed for the `Markdown viewer` and the `Terminal`. You will need to make these changes from the `Advanced settings` editor in the JupyterLab UI:
+
+1. Select the `Settings` option in the `menu bar`.
+2. Go to `Markdown viewer settings`, and type the font family that you want to use.
+3. To change the `Terminal` font, scroll down to `Terminal settings` and type the name of the font family.
## Screenshots
diff --git a/packages/pitayasmoothie/package.json b/packages/pitayasmoothie/package.json
index b637b52..a155036 100644
--- a/packages/pitayasmoothie/package.json
+++ b/packages/pitayasmoothie/package.json
@@ -3,7 +3,7 @@
"version": "0.1.0",
"description": "Pitaya Smoothie in JupyterLab: a dark theme inspired by 2018 Pantone of the Year. Designed for low-light condition and colorblindness tested.",
"license": "BSD-3-Clause",
- "author": "jupyter accessibility group",
+ "author": "Jupyter Accessibility Team",
"homepage": "https://github.com/Quansight-Labs/jupyterlab-accessible-themes",
"repository": {
"type": "git",
diff --git a/packages/pitayasmoothie/style/variables.css b/packages/pitayasmoothie/style/variables.css
index 993f3d9..d5d87ef 100644
--- a/packages/pitayasmoothie/style/variables.css
+++ b/packages/pitayasmoothie/style/variables.css
@@ -27,6 +27,8 @@ jupyterlab developer guide,
https://jupyterlab.readthedocs.io/en/latest/developer/css.html and pitaya
smoothie main theme, https://github.com/trallard/pitaya_smoothie.
*/
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');
+
:root {
/* defining colours here */
--jupyter-orange: var(--md-orange-700);
@@ -147,8 +149,7 @@ smoothie main theme, https://github.com/trallard/pitaya_smoothie.
/* Base font size */
--jp-ui-font-size2: 1.2em;
--jp-ui-font-size3: 1.44em;
- --jp-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ --jp-ui-font-family: "Atkinson Hyperlegible";
/*
* Use these font colors against the corresponding main layout colors.
* In a light theme, these go from dark to light.
@@ -199,8 +200,7 @@ smoothie main theme, https://github.com/trallard/pitaya_smoothie.
--jp-content-font-color2: rgba(247, 247, 247, 0.54);
--jp-content-font-color3: rgba(247, 247, 247, 0.38);
--jp-content-link-color: var(--pitaya-lilac500);
- --jp-content-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ --jp-content-font-family: "Atkinson Hyperlegible";
/*
* Code Fonts
*
diff --git a/setup.py b/setup.py
index 39b63c3..53cd2fb 100644
--- a/setup.py
+++ b/setup.py
@@ -9,7 +9,7 @@
HERE = Path(__file__).parent
MOD = "jupyterlab_accessible_themes"
-VARIANTS = ["pitayasmoothie"]
+VARIANTS = ["pitayasmoothie", "githublight"]
EXTS = [HERE / MOD / f"labextensions/{v}" for v in VARIANTS]
MANIFESTS = [ext / "package.json" for ext in EXTS]
PACKAGES = [json.loads(pkg_json.read_text(encoding="utf-8")) for pkg_json in MANIFESTS]