Add github light

.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

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,39 +86,54 @@ 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
 
    ```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. Install Jupyterlab and NodeJS **if not installed**
 
    ```bash
-   pip install -e .
+   # Install JupyterLab 3.x
+   pip install 'jupyterlab<4.0'
+
+   # Install node from conda-forge
+   conda install -c conda-forge 'nodejs>16'
    ```
 
-4. Now you'll need to link the development version of the extension to JupyterLab and rebuild the Typescript source:
+4. Install the node dependencies and build the extension
 
    ```bash
    # Install node dependencies
    jlpm install
 
    # Compile packages before linking to Jupyterlab development version
    jlpm build
+   ```
+
+5. Install the package in development mode
 
+   ```bash
+   pip install -e .
+   ```
+
+6. 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:
+7. After making some changes, to visualize them in your local JupyterLab re-run the following command:
 
    ```bash
    # Rebuild extension Typescript source after making changes
@@ -213,3 +241,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)

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](https://via.placeholder.com/20/#ffffff/#ffffff.png) `#ffffff`
+
+Highlight color: ![#321f7ad9](https://via.placeholder.com/20/321f7ad9/321f7ad9.png) `#321f7ad9`
+
+**WCAG conformance**
+
+All the colors in the table shown were tested with the background color.
+
+| Color                                                        | Hex       | Ratio    | Normal text | Large text |
+| ------------------------------------------------------------ | --------- | -------- | ----------- | ---------- |
+| ![#1F2328](https://via.placeholder.com/20/1F2328/1F2328.png) | `#1F2328` | 15.8 : 1 | AAA         | AAA        |
+| ![#6e7781](https://via.placeholder.com/20/6e7781/6e7781.png) | `#6e7781` | 4.5 : 1  | AA          | AAA        |
+| ![#57606a](https://via.placeholder.com/20/57606a/57606a.png) | `#57606a` | 6.4 : 1  | AA          | AAA        |
+| ![#424a53](https://via.placeholder.com/20/424a53/424a53.png) | `#424a53` | 9.0 : 1  | AAA         | AAA        |
+| ![#32383f](https://via.placeholder.com/20/32383f/32383f.png) | `#32383f` | 11.8 : 1 | AAA         | AAA        |
+| ![#24292f](https://via.placeholder.com/20/24292f/24292f.png) | `#24292f` | 14.7 : 1 | AAA         | AAA        |
+| ![#0550ae](https://via.placeholder.com/20/0550ae/0550ae.png) | `#0550ae` | 7.6 : 1  | AAA         | AAA        |
+| ![#0a3069](https://via.placeholder.com/20/0a3069/0a3069.png) | `#0a3069` | 12.8 : 1 | AAA         | AAA        |
+| ![#116329](https://via.placeholder.com/20/116329/116329.png) | `#116329` | 7.4 : 1  | AAA         | AAA        |
+| ![#953800](https://via.placeholder.com/20/953800/953800.png) | `#953800` | 7.4 : 1  | AAA         | AAA        |
+| ![#a40e26](https://via.placeholder.com/20/a40e26/a40e26.png) | `#a40e26` | 7.9 : 1  | AAA         | AAA        |
+| ![#6639ba](https://via.placeholder.com/20/6639ba/6639ba.png) | `#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
+
+<img alt="JupyterLab GitHub Light screenshot" src="./images/screenshot.png"/>
+
+## Acknowledgements
+
+This theme is based on and inspired by the [`GitHub Light Default` theme for VSCode](https://github.com/primer/github-vscode-theme)

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"
+  }
+}

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<void> = {
+  // 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;