Skip to content

Commit 8b42ecc

Browse files
pavelklibanipavelklibani
committed
Feat(web-react): Generate types and constants directly from tokens #DS-1650
- Emotion colors now use tokens instead of hardcoded dictionaries - Button colors now use tokens instead of hardcoded dictionaries - Button sizes now use tokens instead of hardcoded dictionaries - Container sizes now use tokens instead of hardcoded dictionaries - Radii now use tokens instead of hardcoded dictionaries
1 parent 9122d40 commit 8b42ecc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+319
-251
lines changed

‎packages/web-react/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,13 @@ The component will be hidden from the specified breakpoints up using CSS display
123123

124124
If you need even more control over the component styling, use [escape hatches](#escape-hatches).
125125

126+
## Types Generated From Design Tokens
127+
128+
Some props (e.g. color, radii, container sizes, …) use types generated from design tokens.
129+
They restrict values to those defined in the design system and stay up to date with every token change.
130+
131+
If you need additional values, you’ll need to coordinate with a designer so they can be added to the Figma and become available through tokens.
132+
126133
### Escape Hatches
127134

128135
While we encourage teams to utilize Spirit design as it is, we do realize that sometimes product specific customizations

‎packages/web-react/docs/constants.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Token colors are alphabetically sorted by default,
2+
// but for the demo we want a custom order.
3+
// Use this ordering for demo purposes only.
4+
export const DemoButtonComponentColors = {
5+
PRIMARY: 'primary',
6+
SECONDARY: 'secondary',
7+
TERTIARY: 'tertiary',
8+
PLAIN: 'plain',
9+
} as const;
10+
11+
export const DemoEmotionColors = {
12+
SUCCESS: 'success',
13+
INFORMATIVE: 'informative',
14+
WARNING: 'warning',
15+
DANGER: 'danger',
16+
} as const;

‎packages/web-react/docs/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as DocsBox } from './DocsBox';
2+
export { default as DocsSection } from './DocsSection';
3+
export { default as DocsStack } from './DocsStack';
4+
export * from './constants';

‎packages/web-react/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"@lmc-eu/eslint-config-typescript": "2.1.5",
3939
"@lmc-eu/spirit-common": "^0.4.1",
4040
"@lmc-eu/spirit-demo": "^1.1.0",
41-
"@lmc-eu/spirit-design-tokens": "^3.7.0",
4241
"@lmc-eu/spirit-web": "^3.16.0",
4342
"@rollup/plugin-node-resolve": "15.3.1",
4443
"@rollup/plugin-replace": "6.0.2",
@@ -88,12 +87,16 @@
8887
"webpack-merge": "6.0.1"
8988
},
9089
"peerDependencies": {
90+
"@lmc-eu/spirit-design-tokens": "^3.0.0",
9191
"@lmc-eu/spirit-icons": "^2.0.0",
9292
"@lmc-eu/spirit-web": "^3.0.0",
9393
"react": "^17.0.2 || ^18.0.0 || ^19.0.0",
9494
"react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
9595
},
9696
"peerDependenciesMeta": {
97+
"@lmc-eu/spirit-design-tokens": {
98+
"optional": true
99+
},
97100
"@lmc-eu/spirit-icons": {
98101
"optional": true
99102
},

‎packages/web-react/src/components/Alert/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import { Alert } from '@lmc-eu/spirit-web-react/components';
2727

2828
## API
2929

30-
| Name | Type | Default | Required | Description |
31-
| -------------- | -------------------------------------------- | --------- | -------- | -------------------------- |
32-
| `children` | `ReactNode` | — | ✓ | Content of the Alert |
33-
| `color` | [Emotion Color dictionary][dictionary-color] | `success` | ✕ | Color of the component |
34-
| `iconName` | `string` | `info` \* | ✕ | Icon used in Alert |
35-
| `isCentered` . | `bool` | `false` | ✕ | If true, Alert is centered |
30+
| Name | Type | Default | Required | Description |
31+
| -------------- | ----------------------------------------------- | --------- | -------- | -------------------------- |
32+
| `children` | `ReactNode` | — | ✓ | Content of the Alert |
33+
| `color` | [EmotionColorNamesType][readme-generated-types] | `success` | ✕ | Color of the component |
34+
| `iconName` | `string` | `info` \* | ✕ | Icon used in Alert |
35+
| `isCentered` . | `bool` | `false` | ✕ | If true, Alert is centered |
3636

3737
(\*) For each emotion color, a default icon is defined.
3838
The icons come from the [Icon package][icon-package], or from your custom source of icons.
@@ -53,9 +53,9 @@ This component uses the `Icon` component internally. To ensure correct rendering
5353
please refer to the [Icon component documentation][web-react-icon-documentation] for setup instructions.
5454

5555
[alert]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Alert/README.md
56-
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
5756
[icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
5857
[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
5958
[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
59+
[readme-generated-types]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#types-generated-from-design-tokens
6060
[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
6161
[web-react-icon-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Icon/README.md#-usage

‎packages/web-react/src/components/Box/README.md‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -87,32 +87,33 @@ You can define text color using the `textColor` prop.
8787

8888
## API
8989

90-
| Name | Type | Default | Required | Description |
91-
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ------------------------------ |
92-
| `backgroundColor` | \[[Background Color dictionary][dictionary-color] \| Accent Color \| [Emotion Color dictionary][dictionary-color] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Background color of the Box |
93-
| `backgroundGradient` | [Background Gradient dictionary][dictionary-gradient] | - | ✕ | Background gradient of the Box |
94-
| `borderColor` | \[[Border Color dictionary][dictionary-border-properities] \| Accent Color \| [Emotion Color dictionary][dictionary-color] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Border color of the Box |
95-
| `borderRadius` | \[`BorderRadiiDictionaryType` \| `Partial<Record<BreakpointToken, BorderRadiiDictionaryType>>`] | - | ✕ | Border radius of the Box |
96-
| `borderStyle` | [Border Style dictionary][dictionary-border-properities] | `solid` | ✕ | Border style of the Box |
97-
| `borderWidth` | [Border Width dictionary][dictionary-border-properities] | - | ✕ | Border width of the Box |
98-
| `elementType` | `ElementType` | `div` | ✕ | Type of element |
99-
| `padding` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding of the Box |
100-
| `paddingX` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Horizontal padding of the Box |
101-
| `paddingY` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Vertical padding of the Box |
102-
| `paddingTop` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding top of the Box |
103-
| `paddingRight` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding right of the Box |
104-
| `paddingBottom` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding bottom of the Box |
105-
| `paddingLeft` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding left of the Box |
106-
| `textColor` | \[[Text Color dictionary][dictionary-color] \| Accent Color \| [Emotion Color dictionary][dictionary-color] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Color of the text |
90+
| Name | Type | Default | Required | Description |
91+
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ------------------------------ |
92+
| `backgroundColor` | \[[Background Color dictionary][dictionary-color] \| [AccentColorNamesType][readme-generated-types] \| [EmotionColorNamesType][readme-generated-types] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Background color of the Box |
93+
| `backgroundGradient` | [Background Gradient dictionary][dictionary-gradient] | - | ✕ | Background gradient of the Box |
94+
| `borderColor` | \[[Border Color dictionary][dictionary-border-properities] \| [AccentColorNamesType][readme-generated-types] \| [EmotionColorNamesType][readme-generated-types] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Border color of the Box |
95+
| `borderRadius` | \[[BorderRadiiTokenType \| `Partial<Record<BreakpointToken, BorderRadiiTokenType>>`][readme-generated-types] | - | ✕ | Border radius of the Box |
96+
| `borderStyle` | [Border Style dictionary][dictionary-border-properities] | `solid` | ✕ | Border style of the Box |
97+
| `borderWidth` | [Border Width dictionary][dictionary-border-properities] | - | ✕ | Border width of the Box |
98+
| `elementType` | `ElementType` | `div` | ✕ | Type of element |
99+
| `padding` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding of the Box |
100+
| `paddingX` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Horizontal padding of the Box |
101+
| `paddingY` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Vertical padding of the Box |
102+
| `paddingTop` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding top of the Box |
103+
| `paddingRight` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding right of the Box |
104+
| `paddingBottom` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding bottom of the Box |
105+
| `paddingLeft` | \[`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | - | ✕ | Padding left of the Box |
106+
| `textColor` | \[[TextColorNamesType \| AccentColorNamesType \| EmotionColorNamesType][readme-generated-types] ✕ [Intensity dictionary][dictionary-intensity]] | - | ✕ | Color of the text |
107107

108108
On top of the API options, the components accept [additional attributes][readme-additional-attributes].
109109
If you need more control over the styling of a component, you can use [style props][readme-style-props]
110110
and [escape hatches][readme-escape-hatches].
111111

112-
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
113112
[dictionary-border-properities]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#border-properties
113+
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
114114
[dictionary-gradient]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#gradient
115115
[dictionary-intensity]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#intensity
116116
[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
117117
[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
118+
[readme-generated-types]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#types-generated-from-design-tokens
118119
[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

0 commit comments

Comments
 (0)