Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hashicorp/design-system
Helios Design System
https://github.com/hashicorp/design-system
components design-system design-systems design-tokens emberjs hashicorp helios icons
Last synced: 3 days ago
JSON representation
Helios Design System
- Host: GitHub
- URL: https://github.com/hashicorp/design-system
- Owner: hashicorp
- License: mpl-2.0
- Created: 2021-11-01T20:19:43.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T00:55:52.000Z (5 days ago)
- Last Synced: 2025-01-14T01:35:46.882Z (5 days ago)
- Topics: components, design-system, design-systems, design-tokens, emberjs, hashicorp, helios, icons
- Language: TypeScript
- Homepage: https://helios.hashicorp.design
- Size: 271 MB
- Stars: 449
- Watchers: 154
- Forks: 44
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome - hashicorp/design-system - Helios Design System (TypeScript)
README
The Helios Design System provides the building blocks to design and implement consistent, accessible, and delightful product experiences across HashiCorp.
## Usage
For guidelines on how to use Helios, see our [documentation website](https://helios.hashicorp.design).
## Release notes
[A changelog for code and Figma changes is kept on the Helios website](https://helios.hashicorp.design/whats-new/release-notes)
## Packages
### `packages/components` [](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-components)
Design System components in Ember.js
- npm package: `@hashicorp/design-system-components`
- website: [https://helios.hashicorp.design/components](https://helios.hashicorp.design/components)
- more info: see [components/README](packages/components/README.md) and [components/CONTRIBUTING](packages/components/CONTRIBUTING.md).
### `packages/ember-flight-icons` [](https://badge.fury.io/js/%40hashicorp%2Fember-flight-icons)
Ember.js addon with `` component (deprecated)
- npm package: `@hashicorp/ember-flight-icons`
- website: [https://helios.hashicorp.design/icons/library](https://helios.hashicorp.design/icons/library)
- more info: see [ember-flight-icons/README](packages/ember-flight-icons/README.md) and [ember-flight-icons/CONTRIBUTING](packages/ember-flight-icons/CONTRIBUTING.md) for details on how to build and test the Ember.js addon.
### `packages/flight-icons` [](https://badge.fury.io/js/%40hashicorp%2Fflight-icons)
- website: [https://helios.hashicorp.design/icons/library](https://helios.hashicorp.design/icons/library)
Flight icons in different formats (SVG/SVG Sprite/React)
- npm package: `@hashicorp/flight-icons`
- more info: see [flight-icons/README](packages/flight-icons/README.md) and [flight-icons/CONTRIBUTING](packages/flight-icons/CONTRIBUTING.md) for details on how to use the "sync/build" scripts that export the assets from Figma and generate a bundle of standalone SVG files.
### `packages/tokens` [](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-tokens)
Design tokens
- npm package: `@hashicorp/design-system-tokens`
- website: [https://helios.hashicorp.design/foundations/tokens](https://helios.hashicorp.design/foundations/tokens)
- more info: see [tokens/README](packages/tokens/README.md) and [tokens/CONTRIBUTING](packages/tokens/CONTRIBUTING.md) for details on how to update the design tokens.
## Contributing
### Workspaces
This monorepo uses [yarn workspaces](https://yarnpkg.com/features/workspaces/) to manage dependencies for all packages.
#### Adding new packages
Run this command from the monorepo root:
```bash
yarn workspace add --dev
```
e.g. `yarn workspace @hashicorp/design-system-components add --dev ember-cli-flash`
#### Using ember install in the monorepo
Run this command from the monorepo root:
```bash
yarn workspace run ember install
```
e.g. `yarn workspace @hashicorp/design-system-components run ember install ember-a11y-refocus`
### Changesets
This project uses [changesets](https://github.com/changesets/changesets) to manage how changes will be released. Each user-facing change to a package should come with a changeset for each package that has changed.
To create a changeset, run and follow the prompts in your terminal:
```bash
yarn changeset
```
See the [changeset docs](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) for more information.
Note: If you want to ignore a changeset bump in terminal (e.g. major bump for selected "package x" is N/A, want a patch release), press return on the command line to skip that step. Press the spacebar to select that step.
## Releasing
See the [release docs](https://hashicorp.atlassian.net/wiki/x/HIBT0Q) for the process we follow to publish a new package version.
## License
This project is licensed under the [Mozilla Public License 2.0](LICENSE).
## Versioning
We use [SemVer](http://semver.org/) for versioning.