Skip to content

Add Dark Theme to Design System Explorer & Support Git Package Dependencies

Kyle Tee requested to merge LordParsley/exosphere:feature/721-design-system-light-dark-mode into master

Overview

Closes #721 (closed).

  • Fixes an issue in elm-ui-explorer impacting ColorMode on a fork of the package.
  • Update the design system explorer palette based on light/dark theme.
  • Implement elm-git-install so that Elm packages can be added directly from repos.

Open Points

How to Test

Dark Theme Support

Launch the Design System Explorer using:

npm rum live-design-system

And toggle light/dark mode theme using the sun/moon icon in the top right.

elm-git-install

The elm-git-install tool allows installing Elm packages from custom git sources.

Validate its behaviour by:

  • Running npm i if you are developing locally, or
  • Restarting your Docker.

(The elm:git script should be run as part of postinstall steps automatically.)

Expect output like this for local dev:

% npm i

> exosphere@2021.01.06 postinstall
> elm-tooling install && npm run elm:git

/exosphere/elm-tooling.json
elm 0.19.1: all good
elm-format 0.8.5: all good
elm-json 0.2.10: all good
elm-test-rs 1.0.0: all good

> exosphere@2021.01.06 elm:git
> npx elm-git-install

github.com/LordParsley/elm-ui-explorer.git => 9.0.1

> exosphere@2021.01.06 prepare
> husky install

husky - Git hooks installed

up to date, audited 231 packages in 4s

or this for Docker images:

> exosphere@2021.01.06 elm:git
> npx elm-git-install
github.com/LordParsley/elm-ui-explorer.git => 9.0.1

Screenshots

Screen_Recording_2022-04-11_at_15.10.37

Edited by Kyle Tee

Merge request reports