Merge branch 'master' into record-detail

grommet · Feb 10, 2025 · 07b417a · 07b417a
2 parents df00866 + 8ef639c
commit 07b417a
Show file tree

Hide file tree

Showing 45 changed files with 3,448 additions and 2,624 deletions.
diff --git a/.changeset/cuddly-elephants-happen.md b/.changeset/cuddly-elephants-happen.md
diff --git a/.changeset/early-hats-rhyme.md b/.changeset/early-hats-rhyme.md
diff --git a/.changeset/good-gorillas-suffer.md b/.changeset/good-gorillas-suffer.md
diff --git a/.changeset/lovely-penguins-rule.md b/.changeset/lovely-penguins-rule.md
diff --git a/.changeset/ninety-rocks-deliver.md b/.changeset/ninety-rocks-deliver.md
diff --git a/.changeset/old-snakes-bow.md b/.changeset/old-snakes-bow.md
diff --git a/.changeset/rare-needles-kiss.md b/.changeset/rare-needles-kiss.md
diff --git a/.changeset/rotten-experts-roll.md b/.changeset/rotten-experts-roll.md
diff --git a/.changeset/selfish-carrots-leave.md b/.changeset/selfish-carrots-leave.md
diff --git a/.changeset/seven-days-do.md b/.changeset/seven-days-do.md
diff --git a/.changeset/sharp-timers-deliver.md b/.changeset/sharp-timers-deliver.md
diff --git a/.changeset/sixty-bobcats-leave.md b/.changeset/sixty-bobcats-leave.md
diff --git a/.changeset/spicy-pumpkins-rush.md b/.changeset/spicy-pumpkins-rush.md
diff --git a/.changeset/tame-elephants-notice.md b/.changeset/tame-elephants-notice.md
diff --git a/.changeset/ten-crews-kick.md b/.changeset/ten-crews-kick.md
diff --git a/.changeset/ten-jeans-hide.md b/.changeset/ten-jeans-hide.md
diff --git a/aries-site/src/examples/tokens/TokenHighlight.js b/aries-site/src/examples/tokens/TokenHighlight.js
@@ -7,9 +7,9 @@ const parts = [
   'level',
   'type',
   'component',
+  'variant',
   'size',
   'element',
-  'variant',
   'state',
   'scale',
   'property',

diff --git a/aries-site/src/pages/design-tokens/all-design-tokens.js b/aries-site/src/pages/design-tokens/all-design-tokens.js
@@ -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: {},
@@ -200,7 +199,6 @@ const AllTokens = () => {
 
   return (
     <Page kind="full">
-      <BetaNotification />
       <Box direction="row" gap="large">
         {['large', 'xlarge'].includes(breakpoint) ? (
           <Box

diff --git a/aries-site/src/pages/design-tokens/how-to-read-design-tokens.mdx b/aries-site/src/pages/design-tokens/how-to-read-design-tokens.mdx
@@ -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.
@@ -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
 
@@ -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