mirror of
https://github.com/status-im/consul.git
synced 2025-01-12 06:44:41 +00:00
62a66a32d7
* Use postcss instead of ember-cli-sass This will make it possible to work with tailwindcss. * configure postcss to compile sass * add "sub-app" css into app/styles tree * pin node@14 via volta Only used by people that use volta * Install tailwind and autoprefixer * Create tailwind config * Use tailwind via postcss * Fix: tailwind changes current styling When adding tailwind to the bottom of app.scss we apparently change the way the application looks. We will import it first to make sure we don't change the current styling of the application right now. * Automatic import of HDS colors in tailwind * Install @hashicorp/design-system-components * install add-on * setup postcss scss pipeline to include tokens css * import add-on css * Install ember-auto-import v2 HDS depends on v2 of ember-auto-import so we need to upgrade. * Upgrade ember-cli-yadda v0.6.0 of ember-cli-yadda adds configuration for webpack. This configuration is incompatible with webpack v5 which ember-auto-import v2 is using. We need to upgrade ember-cli-yadda to the latest version that fixes this incompatability with auto-import v2 * Install ember-flight-icons HDS components are using the addon internally. * Document HDS usage in engineering docs * Upgrade ember-cli-api-double * fix new linting errors
103 lines
3.4 KiB
Plaintext
103 lines
3.4 KiB
Plaintext
---
|
|
title: Hashicorp Design System
|
|
---
|
|
|
|
# Hashicorp Design System
|
|
|
|
The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application.
|
|
|
|
## Design Tokens
|
|
|
|
HDS ships a set of [design tokens](https://design-system-components-hashicorp.vercel.app/foundations/tokens), which are implemented as CSS custom properties.
|
|
To make it easy to work with these design tokens without having to work with verbose CSS properties all over the place, we have setup a [TailwindCSS](https://tailwindcss.com/)-configuration that makes the color tokens
|
|
available via functional [utility classes](https://tailwindcss.com/docs/customizing-colors).
|
|
|
|
### Colors
|
|
|
|
You can work with any color from the HDS by prefixing colors with the `hds-`-prefix. The `hds-`-prefix makes it easy to see what classes are auto-generated from HDS. When we wanted to color a header tag with the `consul-brand`-color we could do it like this for example:
|
|
|
|
```hbs preview-template
|
|
<h2 class="text-hds-consul-brand">
|
|
HDS is awesome
|
|
</h2>
|
|
```
|
|
|
|
Regular tailwindCss colors aren't available. You can only use colors defined in HDS with this pattern.
|
|
|
|
```hbs preview-template
|
|
<h2 class="text-red-400">
|
|
TailwindCSS colors won't work
|
|
</h2>
|
|
```
|
|
|
|
### Other tokens
|
|
|
|
Other tokens than colors are available via the provided `hds`-[helper-classes](https://design-system-components-hashicorp.vercel.app/foundations/typography) made available via `@hashicorp/design-system-tokens`.
|
|
|
|
You for example would work with HDS' typography tokens in this way:
|
|
|
|
```hbs preview-template
|
|
<p class="hds-typography-display-400">
|
|
A paragraph styled via HDS.
|
|
</p>
|
|
```
|
|
|
|
### Combining HDS and Tailwind
|
|
|
|
Because we are working with a customized tailwind configuration it is easy to combine HDS design tokens with regular tailwind utility classes:
|
|
|
|
```hbs preview-template
|
|
<button type="button" class="text-hds-consul-brand underline transform scale-100 transition ease-in-out hover:text-hds-consul-foreground hover:scale-125">
|
|
Hover me
|
|
</button>
|
|
```
|
|
|
|
### Components
|
|
|
|
All components from Hashicorp Design System are available for you to use. Here's an example that shows how to implement a navigation bar with HDS and Tailwind in combination.
|
|
|
|
```hbs preview-template
|
|
<nav class="h-16 w-full bg-hds-foreground-strong flex items-center justify-between px-4 hds-font-weight-medium">
|
|
<ul class="flex items-center">
|
|
<li>
|
|
{{! should probably be a context-switcher }}
|
|
<FlightIcon
|
|
@name="menu"
|
|
class="fill-current cursor-pointer text-hds-neutral-200"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<FlightIcon
|
|
@name="consul"
|
|
class="fill-current ml-4 h-8 w-8 text-hds-consul-brand"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
<ul class="flex items-center">
|
|
<li>
|
|
<Hds::Dropdown as |dd|>
|
|
<dd.ToggleButton
|
|
@text="Help"
|
|
@color="secondary"
|
|
class="text-hds-neutral-300"
|
|
/>
|
|
<dd.Title @text="Consul HDS" />
|
|
<dd.Interactive @text="Documentation" @icon="docs-link" />
|
|
<dd.Interactive @text="HashiCorp Learn" @icon="learn-link" />
|
|
<dd.Separator />
|
|
<dd.Interactive @text="Provide Feedback" @icon="github" />
|
|
</Hds::Dropdown>
|
|
</li>
|
|
<li>
|
|
<Hds::Button
|
|
@text="Settings"
|
|
@color="tertiary"
|
|
@icon="settings"
|
|
@iconPosition="trailing"
|
|
class="text-hds-neutral-300"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
```
|