Skip to content

Added new section Tokens in Development #2311

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.

Sign up for GitHub

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

Merged
PelayoFelgueroso merged 4 commits into from
Oct 10, 2025
Merged

Added new section Tokens in Development #2311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3381d0
Added new section Tokens in Development
Jialecl Oct 10, 2025
59e0a88
Merge branch 'master' into jialecl-tokensInDev
PelayoFelgueroso Oct 10, 2025
b4683f4
Added missing tables
Jialecl Oct 10, 2025
090e745
Merge branch 'jialecl-tokensInDev' of https://github.com/dxc-technolo…
Jialecl Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 76 additions & 1 deletion apps/website/screens/foundations/tokens/TokensPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@ import DxcQuickNavContainer from "@/common/QuickNavContainer";
import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
import Link from "next/link";
import componentTokens from "./images/component_tokens.gif";
import {
AbsoluteTokens,
AlphaTokens,
NeutralTokens,
PrimaryTokens,
SecondaryTokens,
Semantic01Tokens,
Semantic02Tokens,
Semantic03Tokens,
Semantic04Tokens,
TertiaryTokens,
} from "./tables/CoreColorTokens";
import DimensionsTokens from "./tables/CoreDimensionsTokens";
import { FontFamilyTokens, FontSizesTokens, FontStylesTokens, FontWeightTokens } from "./tables/CoreFontTokens";
import BorderTokens from "./tables/CoreBorderTokens";

const sections = [
{
Expand Down Expand Up @@ -288,7 +303,67 @@ const sections = [
title: "Tokens in Development",
content: (
<>
<DxcParagraph>Work in Progress.</DxcParagraph>
<DxcParagraph>
We have overhauled our token system to improve consistency in naming and usability. To achieve this, we
chose an implementation with CSS variables over our previous JavaScript-based implementation. There are
other advantages to using CSS variables, including less re-rendering, better performance and the ability
to update them at runtime.
</DxcParagraph>
<DxcParagraph>
As explained in the previous section, the token structure has been updated from a two-layer system to a
three-layer system. This new structure will allow developers to customize both the first and third layers.
</DxcParagraph>
<DxcParagraph>
The first layer (composed of core tokens) can be customized when using the opinionated theming approach.
Below is the list of available core tokens:
</DxcParagraph>
<>
{/* Color Tokens */}
<DxcHeading level={4} text="Colors" />
<DxcHeading level={5} text="Absolute color tokens" />
<AbsoluteTokens />
<DxcHeading level={5} text="Primary color tokens" />
<PrimaryTokens />
<DxcHeading level={5} text="Secondary color tokens" />
<SecondaryTokens />
<DxcHeading level={5} text="Tertiary color tokens" />
<TertiaryTokens />
<DxcHeading level={5} text="Neutral color tokens" />
<NeutralTokens />
<DxcHeading level={5} text="Semantic 01 color tokens" />
<Semantic01Tokens />
<DxcHeading level={5} text="Semantic 02 color tokens" />
<Semantic02Tokens />
<DxcHeading level={5} text="Semantic 03 color tokens" />
<Semantic03Tokens />
<DxcHeading level={5} text="Semantic 04 color tokens" />
<Semantic04Tokens />
<DxcHeading level={5} text="Alpha color tokens" />
<AlphaTokens />
</>
<>
{/* Dimensions Tokens */}
<DxcHeading level={4} text="Dimensions" />
<DimensionsTokens />
</>
<>
{/* Font Tokens */}
<DxcHeading level={4} text="Font" />
<DxcHeading level={5} text="Font size tokens" />
<FontSizesTokens />
<DxcHeading level={5} text="Font weight tokens" />
<FontWeightTokens />
<DxcHeading level={5} text="Font family tokens" />
<FontFamilyTokens />
<DxcHeading level={5} text="Font style tokens" />
<FontStylesTokens />
</>
<>
{/* Border Tokens */}
<DxcHeading level={4} text="Border" />
<BorderTokens />
</>
<DxcParagraph>The component layer is still under development.</DxcParagraph>
</>
),
},
Expand Down
29 changes: 29 additions & 0 deletions apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { TableCode } from "@/common/Code";
import { DxcTable } from "@dxc-technology/halstack-react";

const BorderTokens = () => (
<DxcTable>
<thead>
<tr>
<th>Token</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<TableCode>line-style-dashed</TableCode>
</td>
<td>dashed</td>
</tr>
<tr>
<td>
<TableCode>line-style-solid</TableCode>
</td>
<td>solid</td>
</tr>
</tbody>
</DxcTable>
);

export default BorderTokens;
Loading