Skip to content

Commit

Permalink
Remove beta notification for design tokens (#4769)
Browse files Browse the repository at this point in the history 
* Remove beta notification

* Update yarn.lock
  • Loading branch information
@taysea
taysea authored Feb 7, 2025
1 parent f270a23 commit 8ef639c
Show file tree
Hide file tree
Showing 8 changed files with 224 additions and 241 deletions.
2 changes: 1 addition & 1 deletion aries-site/src/examples/tokens/TokenHighlight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ const parts = [
'level',
'type',
'component',
'variant',
'size',
'element',
'variant',
'state',
'scale',
'property',
Expand Down
2 changes: 0 additions & 2 deletions aries-site/src/pages/design-tokens/all-design-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { Close, Folder, Menu } from 'grommet-icons';
import { ThemeContext } from 'styled-components';
// eslint-disable-next-line import/no-unresolved
import * as tokens from 'hpe-design-tokens/docs';
import { BetaNotification } from '../../examples';

const structuredTokens = {
primitive: {},
Expand Down Expand Up @@ -200,7 +199,6 @@ const AllTokens = () => {

return (
<Page kind="full">
<BetaNotification />
<Box direction="row" gap="large">
{['large', 'xlarge'].includes(breakpoint) ? (
<Box
Expand Down
46 changes: 22 additions & 24 deletions aries-site/src/pages/design-tokens/how-to-read-design-tokens.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Example } from '../../layouts';
import { Box, Text } from 'grommet';
import { BetaNotification, TokenHighlight } from '../../examples';

<BetaNotification />
import { TokenHighlight } from '../../examples';

<Example height={{ min: 'xsmall' }}>
<Text size="xlarge">hpe.button.primary.enabled.background</Text>
<Text size="xlarge">hpe.button.primary.rest.background</Text>
</Example>

A token is read in a left-to-right order, moving from general to specific.
Expand All @@ -26,18 +24,18 @@ These are all of the possible parts of a token name, but each [type of design to
<TokenHighlight highlight="all" />
</Example>

| Category | Definition | Examples | Notes |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **prefix** | Provides top-level encapsulation of a particular flavor of HPE theme. The prefix helps to avoid collisions and improve developer experience when scanning styles to identify those belonging to HPE Design Tokens. | hpe | -- |
| **level** | Identifies if a token is from the “base” (primitive) level of the tokens hierarchy. | base | Primitive tokens point directly to raw values and should not be used directly by developers/designers. |
| **type** | The category of a token. | color, dimension, spacing, radius | -- |
| **component** | A specific component (such as button) or a family of related components (such as input). | anchor, button, formField, menu | For multi-word names, use camelCase. |
| **size** | The t-shirt size of the component family or individual component. | small, medium, large | -- |
| **variant** | A stylistic variant of a token. | secondary, primary, critical, warning | -- |
| **element** | When a component has distinct pieces of anatomy, this refers to the specific sub-element. | item (in a menu), input (in a form field) | -- |
| **scale** | A size/emphasis modifier for primitive and semantic tokens. | strong, weak, 100, 200 | -- |
| **state** | Interactive or programmatically unique state. | enabled, hover, readOnly, selected, indeterminate | -- |
| **property** | An item’s style. This is required for component tokens. | background, borderRadius, lineHeight, fontSize | It usually matches a CSS property, but it can also store other conceptual definitions such as size, paddingX, etc. For multi-word properties, use camelCase. |
| Category | Definition | Examples | Notes |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **prefix** | Provides top-level encapsulation of a particular flavor of HPE theme. The prefix helps to avoid collisions and improve developer experience when scanning styles to identify those belonging to HPE Design Tokens. | hpe | -- |
| **level** | Identifies if a token is from the “base” (primitive) level of the tokens hierarchy. | base | Primitive tokens point directly to raw values and should not be used directly by developers/designers. |
| **type** | The category of a token. | color, dimension, spacing, radius | -- |
| **component** | A specific component (such as button) or a family of related components (such as input). | anchor, button, formField, menu | For multi-word names, use camelCase. |
| **variant** | A stylistic variant of a token. | secondary, primary, critical, warning | -- |
| **size** | The t-shirt size of the component family or individual component. | small, medium, large | -- |
| **element** | When a component has distinct pieces of anatomy, this refers to the specific sub-element. | item (in a menu), input (in a form field) | -- |
| **scale** | A size/emphasis modifier for primitive and semantic tokens. | strong, weak, 100, 200 | -- |
| **state** | Interactive or programmatically unique state. | rest, hover, readOnly, selected, indeterminate | -- |
| **property** | An item’s style. This is required for component tokens. | background, borderRadius, lineHeight, fontSize | It usually matches a CSS property, but it can also store other conceptual definitions such as size, paddingX, etc. For multi-word properties, use camelCase. |

## Types of design tokens

Expand Down Expand Up @@ -93,14 +91,14 @@ Component tokens represent tokens for specific components and should not be used
/>
</Example>

| prefix | component | size | element | variant | state | property | Token |
| ------ | --------- | ------ | ------- | --------- | -------- | ----------- | --------------------------------------- |
| hpe | button | medium | -- | secondary | -- | borderWidth | hpe.button.medium.secondary.borderWidth |
| hpe | button | -- | -- | primary | disabled | background | hpe.button.primary.disabled.background |
| hpe | menu | medium | item | -- | -- | paddingX | hpe.menu.medium.item.paddingX |
| hpe | menu | -- | item | -- | enabled | background | hpe.menu.item.enabled.background |
| hpe | select | medium | option | -- | -- | paddingY | hpe.select.medium.option.paddingY |
| hpe | select | -- | option | -- | enabled | textColor | hpe.select.option.enabled.textColor |
| prefix | component | variant | size | element | state | property | Token |
| ------ | --------- | --------- | ------ | ------- | -------- | ----------- | ----------------------------------------- |
| hpe | button | secondary | medium | -- | -- | borderWidth | hpe.button.secondary.medium.borderWidth |
| hpe | button | primary | -- | -- | disabled | background | hpe.button.primary.disabled.background |
| hpe | menu | default | medium | item | -- | paddingX | hpe.menu.default.medium.item.paddingX |
| hpe | menu | default | item | -- | rest | background | hpe.menu.default.item.rest.background |
| hpe | select | default | medium | option | -- | paddingY | hpe.select.default.medium.option.paddingY |
| hpe | select | default | | option | rest | textColor | hpe.select.option.rest.textColor |

## Token delimiters

Expand Down
8 changes: 0 additions & 8 deletions aries-site/src/pages/design-tokens/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
Grid,
PageContent,
Paragraph,
Notification,
} from 'grommet';
import { Meta, ContentCard } from '../../components';
import { getCards, getPageDetails, nameToPath } from '../../utils';
Expand All @@ -28,13 +27,6 @@ const Tokens = () => (
<Heading margin="none">{title}</Heading>
<Paragraph size="large">{pageDetails.description}</Paragraph>
</Box>
<Notification
message={`Design tokens are in a beta phase. Accordingly,
this documentation is a work in progress and will be
updated as needed during this phase.`}
width="large"
margin={{ bottom: 'large' }}
/>
<Data data={cards} pad={{ bottom: 'large' }}>
<DataContext.Consumer>
{({ data }) => {
Expand Down
5 changes: 1 addition & 4 deletions aries-site/src/pages/design-tokens/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ import { Box, Button, Notification, Text } from 'grommet';
import { Checkmark, Next } from 'grommet-icons';
import Link from 'next/link';
import { Example } from '../../layouts';
import { BetaNotification } from '../../examples';

<BetaNotification />

## Overview

Expand Down Expand Up @@ -96,7 +93,7 @@ The value of a component token can either be a reference to a primitive token, s
<Example height={{ min: 'xsmall' }}>
<Box align="center" direction="row" gap="small">
<Box background="brand" pad="medium" round="small" flex={false} />
<Text size="large">hpe.button.primary.enabled.background</Text>
<Text size="large">hpe.button.primary.rest.background</Text>
</Box>
</Example>

Expand Down
28 changes: 14 additions & 14 deletions aries-site/src/pages/design-tokens/using-design-tokens-in-code.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import { BetaNotification } from '../../examples';

<BetaNotification />

## Using tokens with Grommet

There is no need to install "hpe-design-tokens" or change how you build with Grommet. The HPE Design System team has mapped "hpe-design-tokens" into "grommet-theme-hpe", so there should be no change to your workflow.
Expand Down Expand Up @@ -40,12 +36,12 @@ To use hpe-design-tokens as CSS variables, first import the CSS files into your

```
// For example, main.jsx
import 'hpe-design-tokens/dist/css/base.css';
import 'hpe-design-tokens/dist/css/primitives.css';
import 'hpe-design-tokens/dist/css/color.light.css';
import 'hpe-design-tokens/dist/css/color.dark.css';
import 'hpe-design-tokens/dist/css/global.css';
import 'hpe-design-tokens/dist/css/components.css';
import 'hpe-design-tokens/dist/css/dimension.large.css';
import 'hpe-design-tokens/dist/css/dimension.css';
import 'hpe-design-tokens/dist/css/dimension.small.css';
```

Expand All @@ -55,45 +51,49 @@ Then, apply the token directly to a CSS property, or create your own CSS variabl
// For example, styles.css
button.primary {
--button-primary-background: var(--hpe-button-primary-enabled-background);
--button-primary-background: var(--hpe-button-primary-rest-background);
background: var(--button-primary-background);
}
button.primary:hover {
--button-primary-background: var(--hpe-button-primary-hover-background);
}
button.primary:disabled {
--button-primary-background: var(--hpe-button-primary-disabled-background);
--button-primary-background: var(--hpe-button-primary-disabled-rest-background);
}
```

#### ESM

To use hpe-design-tokens as ESM, import the modules into your project.
To use hpe-design-tokens as ESM, import the modules into your project. This format is intended to be used in conjunction with the CSS files.

The values returned are the CSS variable for each design token.

```
// For example, main.jsx
import { light, dark, large, small, global, components } from 'hpe-design-tokens';
import { light, dark, dimension, small, global, components } from 'hpe-design-tokens';
const theme = {
button: {
primary: {
background: components.hpe.button.primary.enabled.background,
background: components.hpe.button.primary.rest.background, // var(--hpe-button-primary-rest-background)
}
}
}
```

#### CommonJS

To use hpe-design-tokens with CommonJS, import the modules into your project.
To use hpe-design-tokens with CommonJS, import the modules into your project. This format is intended to be used in conjunction with the CSS files.

The values returned are the CSS variable for each design token.

```
const { light, dark, large, small, global, components } = require("hpe-design-tokens");
const { light, dark, dimension, small, global, components } = require("hpe-design-tokens");
const theme = {
button: {
primary: {
background: components.hpe.button.primary.enabled.background,
background: components.hpe.button.primary.rest.background, // var(--hpe-button-primary-rest-background)
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions aries-site/src/pages/design-tokens/using-design-tokens-in-figma.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Notification } from 'grommet';
import { BetaNotification, TokenTypes } from '../../examples';

<BetaNotification />
import { TokenTypes } from '../../examples';

In Figma, design tokens are stored as variables and styles. They are used by applying these to properties in a file.

Expand Down
Loading

0 comments on commit 8ef639c

Please sign in to comment.