mirror of https://github.com/status-im/consul.git
Merge pull request #15148 from hashicorp/ui/update-hds-usage-best-practices
UI: update hds usage to hds best practices
This commit is contained in:
Michael Klein
GitHub
commit
41e50a0f8d
|
|
@ -2,7 +2,7 @@
|
|||
<div class="flex h-24 p-6 overflow-x-auto space-x-12">
|
||||
<div class="shrink-0">
|
||||
<div
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
|
||||
>Status</div>
|
||||
<div class="flex items-center">
|
||||
<Peerings::Badge @peering={{@peering}} />
|
||||
|
|
@ -10,14 +10,15 @@
|
|||
</div>
|
||||
<div class="shrink-0">
|
||||
<div
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
|
||||
>Latest heartbeat</div>
|
||||
<div class="flex items-center">
|
||||
{{#if @peering.LastHeartbeat}}
|
||||
{{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
|
||||
<FlightIcon
|
||||
@name="activity"
|
||||
class="mr-0.5 text-hds-foreground-faint fill-current"
|
||||
@color="var(--token-color-foreground-faint)"
|
||||
class="mr-0.5"
|
||||
/>
|
||||
{{#if smartDate.isNearDate}}
|
||||
<span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
</div>
|
||||
<div class="shrink-0">
|
||||
<div
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary"
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
|
||||
>Latest receipt</div>
|
||||
<div class="flex items-center">
|
||||
{{#if @peering.LastReceive}}
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
</div>
|
||||
<div class="shrink-0">
|
||||
<div
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
|
||||
class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
|
||||
>Latest send</div>
|
||||
<div class="flex items-center">
|
||||
{{#if @peering.LastSend}}
|
||||
|
|
|
|||
|
|
@ -53,10 +53,12 @@
|
|||
@items={{search.data.items}}
|
||||
as |service index|
|
||||
>
|
||||
<li class="px-3 h-12 border-b border-hds-border-primary">
|
||||
<li
|
||||
class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0"
|
||||
>
|
||||
<a
|
||||
data-test-service-name
|
||||
class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
|
||||
class="hds-typography-display-300 hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
|
||||
href={{href-to
|
||||
"dc.services.show.index"
|
||||
service.Name
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.consul-surface-nav {
|
||||
background: var(--token-color-palette-neutral-700);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,50 +4,50 @@ 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.
|
||||
The application integrates setup that make it possible to use the [Hashicorp Design System (HDS)](https://github.com/hashicorp/design-system) in the application. The application also
|
||||
bundles [TailwindCSS](https://tailwindcss.com/) to follow a utility-based CSS approach that mixes well with HDS utility classes. Tailwind is expected to be used
|
||||
as a supplement to HDS's utility classes, and should mainly be used for layouting.
|
||||
|
||||
## 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:
|
||||
To make sure we follow HDS-guidelines, we disabled Tailwind's color utilities completely. Instead of relying on Tailwind for colors, you should be working with the colors from HashiCorp-Design-System and follow the [guidance in the docs](https://design-system-components-hashicorp.vercel.app/foundations/colors) on how to use them:
|
||||
|
||||
```hbs preview-template
|
||||
<h2 class="text-hds-consul-brand">
|
||||
<h2 class='hds-foreground-strong'>
|
||||
HDS is awesome
|
||||
</h2>
|
||||
```
|
||||
|
||||
Regular tailwindCss colors aren't available. You can only use colors defined in HDS with this pattern.
|
||||
Regular TailwindCSS colors aren't available.
|
||||
|
||||
```hbs preview-template
|
||||
<h2 class="text-red-400">
|
||||
<h2 class='text-red-400'>
|
||||
TailwindCSS colors won't work
|
||||
</h2>
|
||||
```
|
||||
|
||||
### Other tokens
|
||||
### HDS core styles
|
||||
|
||||
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`.
|
||||
HDS core styles are available via the provided `hds`-[utility-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:
|
||||
You for example would work with HDS' typography styles in this way:
|
||||
|
||||
```hbs preview-template
|
||||
<p class="hds-typography-display-400">
|
||||
<p class='hds-typography-display-400'>
|
||||
A paragraph styled via HDS.
|
||||
</p>
|
||||
```
|
||||
|
||||
Because HDS provides utility classes for core styles, you should not be using Tailwind classes to customize core styles like typography.
|
||||
|
||||
### 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:
|
||||
Tailwind is used as a supplement to what HDS provides. You will be using Tailwind for layouting and other utility functionality that isn't provided by HDS.
|
||||
|
||||
```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">
|
||||
<button type='button' class='underline transform scale-100 transition ease-in-out hover:scale-125'>
|
||||
Hover me
|
||||
</button>
|
||||
```
|
||||
|
|
@ -57,46 +57,58 @@ Because we are working with a customized tailwind configuration it is easy to co
|
|||
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">
|
||||
<nav
|
||||
class='h-16 w-full consul-surface-nav 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"
|
||||
@name='menu'
|
||||
@color='var(--token-color-foreground-high-contrast)'
|
||||
class='cursor-pointer'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<FlightIcon
|
||||
@name="consul"
|
||||
class="fill-current ml-4 h-8 w-8 text-hds-consul-brand"
|
||||
/>
|
||||
<FlightIcon @name='consul' class='ml-4 h-8 w-8' @color='var(--token-color-consul-brand)' />
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex items-center">
|
||||
<ul class='flex items-center space-x-2'>
|
||||
<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.ToggleButton @text='Help' />
|
||||
<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" />
|
||||
<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"
|
||||
<Hds::Link::Standalone
|
||||
@href='https://hashicorp.com'
|
||||
@icon='settings'
|
||||
@iconPosition='trailing'
|
||||
@size='medium'
|
||||
@text='Settings'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Please notice the custom `consul-surface-nav`-utility class. This class has been created because at the moment of writing,
|
||||
there wasn't a `hds-surface-` that matched what we needed for this navigation header. If you run into situations like
|
||||
that, you can add a `consul-`-utility class to the `utilities`-layer in `tailwind.scss`.
|
||||
|
||||
```css
|
||||
// consul-ui/app/styles/tailwind.scss
|
||||
@layer utilities {
|
||||
.consul-surface-nav {
|
||||
background: var(--token-color-palette-neutral-700);
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
This should only be used as a last resort and you should stick to `hds-`-utilities whenever possible.
|
||||
|
|
|
|||
|
|
@ -1,44 +1,9 @@
|
|||
/**
|
||||
* A function that parses the `tokens.css`-file from `@hashicorp/design-system-tokens`
|
||||
* and creates a map out of it that can be used to build up a color configuration
|
||||
* in `tailwind.config.js`.
|
||||
*
|
||||
* @param {string} tokensPath - The path to `tokens.css` from `@hashicorp/design-system-tokens`
|
||||
* @returns { { [string]: string } } An object that contains color names as keys and color values as values.
|
||||
*/
|
||||
function colorMapFromTokens(tokensPath) {
|
||||
const css = require('css');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const hdsTokensPath = path.join(__dirname, tokensPath);
|
||||
|
||||
const tokensFile = fs.readFileSync(hdsTokensPath, {
|
||||
encoding: 'utf8',
|
||||
flag: 'r',
|
||||
});
|
||||
|
||||
const ast = css.parse(tokensFile);
|
||||
const rootVars = ast.stylesheet.rules.filter((r) => r.type !== 'comment')[0];
|
||||
|
||||
// filter out all colors and then create a map out of them
|
||||
const vars = rootVars.declarations.filter((d) => d.type !== 'comment');
|
||||
const colorPropertyNameCleanupRegex = /^--token-color-(palette-)?/;
|
||||
const colors = vars.filter((d) => d.property.match(/^--token-color-/));
|
||||
|
||||
return colors.reduce((acc, d) => {
|
||||
acc[d.property.replace(colorPropertyNameCleanupRegex, 'hds-')] = d.value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['../**/*.{html.js,hbs,mdx}'],
|
||||
theme: {
|
||||
colors: colorMapFromTokens(
|
||||
'../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css'
|
||||
),
|
||||
// disable all color utilities - we want to use HDS instead
|
||||
colors: {},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue