-
Notifications
You must be signed in to change notification settings - Fork 17
Halstack site updates based on the new design tokens #2193
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Halstack site updates based on the new design tokens #2193
Conversation
…-site-updates-design-tokens
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).