Halstack site updates based on the new design tokens#2193
Conversation
…-site-updates-design-tokens
There was a problem hiding this comment.
Copilot reviewed 189 out of 189 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (1)
apps/website/pages/components/divider/code.tsx:9
- [nitpick] Consider using consistent title casing across pages (for example, 'Divider Code' vs 'Divider code') to maintain uniformity in the UI.
<title>Divider code — Halstack Design System</title>
There was a problem hiding this comment.
Pull Request Overview
This PR updates the Halstack website to reflect the new design tokens and removes outdated theme pages.
- Removed the deprecated /themes page and associated code.
- Refactored several page components to use implicit return arrow functions.
- Updated document titles and adjusted layout components in the main app.
Reviewed Changes
Copilot reviewed 311 out of 311 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| apps/website/pages/principles/typography/index.tsx | Converted component to implicit return and updated layout. |
| apps/website/pages/principles/themes.tsx | Removed the deprecated themes page. |
| apps/website/pages/principles/spacing.tsx | Refactored to use an implicit return arrow function. |
| apps/website/pages/principles/localization.tsx | Refactored to use an implicit return arrow function. |
| apps/website/pages/principles/layout.tsx | Simplified component structure with implicit return. |
| apps/website/pages/principles/iconography.tsx | Refactored component structure with implicit return. |
| apps/website/pages/principles/data-visualization.tsx | Converted to use implicit return and cleaned up layout. |
| apps/website/pages/principles/color.tsx | Refactored component and updated document title. |
| apps/website/pages/overview/releases.tsx | Simplified component structure with minor type adjustments. |
| apps/website/pages/overview/introduction.tsx | Refactored to use an implicit return arrow function. |
| apps/website/pages/overview/installation.tsx | Streamlined component to use an implicit return. |
| apps/website/pages/overview/component-lifecycle.tsx | Converted to implicit return arrow function. |
| apps/website/pages/components/divider/index.tsx | Refactored and updated component structure. |
| apps/website/pages/components/divider/code.tsx | Updated document title and simplified component structure. |
| apps/website/pages/components/contextual-menu/index.tsx | Renamed component for consistency and refactored structure. |
| apps/website/pages/components/contextual-menu/code.tsx | Updated document title and refactored component structure. |
| apps/website/pages/components/button/code.tsx | Updated document title and refactored component structure. |
| apps/website/pages/components/alert/index.tsx | Refactored component to use implicit return. |
| apps/website/pages/components/alert/code.tsx | Updated document title and refactored component structure. |
| apps/website/pages/_app.tsx | Removed unused providers and wrappers; updated layout logic. |
…-site-updates-design-tokens
…-site-updates-design-tokens
Mil4n0r
left a comment
There was a problem hiding this comment.
There are multiple appearances (192) in which you are using:
DxcInset space="var(--spacing-gap-...)
For space, we should be using spacing padding instead for these cases
apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts
Outdated
Show resolved
Hide resolved
apps/website/screens/components/checkbox/code/examples/uncontrolled.ts
Outdated
Show resolved
Hide resolved
apps/website/screens/components/checkbox/code/examples/uncontrolled.ts
Outdated
Show resolved
Hide resolved
apps/website/screens/components/checkbox/overview/examples/stacking.ts
Outdated
Show resolved
Hide resolved
Mil4n0r
left a comment
There was a problem hiding this comment.
By the way, there are still some appearances where "4rem" is being applied to the gap inside DxcFlex, should we change them to --spacing-gap-xxl or asking the designers to add additional alias for it to match the 64px value?
I will ask for feedback to the designers. |
We are going to keep it as it is, because it is a specific use case. |
Checklist
/libdirectory./websiteas needed.Description
/theme-generatorpage: https://developer.dxc.com/halstack/15/theme-generator/opinionated-theme//themespage: https://developer.dxc.com/halstack/15/principles/themes/Code,TableCode,ExtendedTableCode,HeadingLink,Example,CodeBlock,SidenavLogo,DocFooter, etc).