Thematic is a library and web application to aid designers in creating color palettes that unify application colors based on a desired look and feel (e.g., corporate branding) while also providing perceptually balanced color palettes and ramps for data visualization within the application. The primary goal is to provide several bindings to common application development and visualization frameworks, so theming across platforms and contexts is simple and consistent across platforms such as Power BI, Office, and web frameworks (React, Fabric, D3, Vega).
MIT License
This repository holds all of the packages for creating shareable, perceptually-balanced and tastefully complementary (hopefully!) application and data viz themes. There are adapter libraries and tools to apply themes across several environments, which will be detailed below. We briefly describe the intentions and usage of the library in a paper on visualizing workgroup collaboration.
This repository is structured as a yarn monorepo. It contains separate packages for all of the theme generation, management, and applications. To use thematic in your app, you should only need to install the relevant packages for your use case(s).
The webapp package is a guide for everything Thematic. In particular, it comprises:
This webapp is deployed as the github.io site for the repo, so you can use it directly without cloning anything yourself.
Our thematic packages are published under the @thematic
scope.
These are the core Thematic libraries, see individual README.md files for greater detail:
selection.call(fn, [params])
as needed.If you want to run locally and work on the app or any theme components, you can run the whole thing from the root folder. The web app will run using yarn start
as with our typical development structure, and changes to any of the other packages will be reflected live. See the Available Scripts section below.
Commits to main
will automatically deploy to the hosted website. Pull requests should use yarn version check --interactive
to create semantic versioning documents describing the impact of a PR. When a release is ready, run yarn release
to publish packages to npm.
In the project directory, you can run:
yarn start
Runs the app in the development mode. An available port will be selected automatically, such as 8080. Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
yarn test
Launches the test runner using Jest.
yarn build
Builds packages for production to their respective dist
folders.
yarn clean
Cleans out the node_modules and built dist directories for every package.
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.