@ilo-org/themes

ILO Design System - Themes Package

This package provides the theme tokens consumed by the styles package and/or another application to output styling for ILO Design[p] System components. It uses Style Dictionary to manage the tokens, which consumes the tokens as JSON files, which it uses to output SASS variables and maps.

• @ilo-org/fonts

Installation and PNPM Commands

To install

npm i @ilo-org/themes

To build

pnpm build

To test formatting

pnpm format

To test formatting and fix errors

pnpm format:fix

To lint

pnpm lint

To test formatting and fix errors

pnpm lint:fix

Questions and Feedback

(TBD)

Accessibility Standards

(TBD)

Contributing

ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.

Branches

Branch	Purpose
main	The latest version of all packages
develop	The next release of all packages

Contribution workflow

• Fork and clone the repo
• Create a new branch from the develop branch
• Make your changes and add a changeset identifying the changes and affected packages
• Push your branch to the forked version of the repo
• Open a pull request back to the develop branch of the main repo

Versioning

The project uses changesets to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.

See more information on how to add a changeset

Conventions

Contributions should respect the following conventions for branch names, commit messages and pull request descriptions

Commits

Commits should follow Angular Commit Message Guidelines.

<type>(<scope>): <subject>

Examples:

fix(react): change button color on hover
feat(twig): add button component
ci(github): add release workflow
perf(react): improve modal animations

Types

• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• test: Adding missing tests or correcting existing tests

Scopes

This should be a package name or an aspect of the project's configuration.

Branches

Branch names should broadly mirror the same convention as commits.

Examples:

feat/react/modal-wrapper
fix/twig/modal-wrapper

Pull requests

Pull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.

Building the project

Use nvm to make sure you have the correct version of node installed.

nvm use

Install pnpm.

npm i -g pnpm

Install dependencies

pnpm recursive install

Build all packages.

pnpm build:all

Start React storybook

pnpm start:react-storybook

Start Twig storybook

pnpm start:twig-storybook

Check types

pnpm check:types

Run all tests

pnpm test:all