From e3381d026335977f6e2afd773ef6f12e044efc9d Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 10 Oct 2025 10:28:46 +0200 Subject: [PATCH 1/2] Added new section Tokens in Development --- .../screens/foundations/tokens/TokensPage.tsx | 71 +- .../tokens/tables/CoreBorderTokens.tsx | 29 + .../tokens/tables/CoreColorTokens.tsx | 678 ++++++++++++++++++ .../tokens/tables/CoreDimensionsTokens.tsx | 137 ++++ .../tokens/tables/CoreFontTokens.tsx | 162 +++++ 5 files changed, 1076 insertions(+), 1 deletion(-) create mode 100644 apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx create mode 100644 apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx create mode 100644 apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx create mode 100644 apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx index 3728879d0..e6da45533 100644 --- a/apps/website/screens/foundations/tokens/TokensPage.tsx +++ b/apps/website/screens/foundations/tokens/TokensPage.tsx @@ -6,6 +6,19 @@ 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 { + 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 = [ { @@ -288,7 +301,63 @@ const sections = [ title: "Tokens in Development", content: ( <> - Work in Progress. + + 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. + + + 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. + + + The first layer (composed of core tokens) can be customized when using the opinionated theming approach. + Below is the list of available core tokens: + + <> + {/* Color Tokens */} + + + + + + + + + + + + + + + + + + + <> + {/* Dimensions Tokens */} + + + + <> + {/* Font Tokens */} + + + + + + + + + + + <> + {/* Border Tokens */} + + + + The component layer is still under development. ), }, diff --git a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx new file mode 100644 index 000000000..74e21cafa --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx @@ -0,0 +1,29 @@ +import { TableCode } from "@/common/Code"; +import { DxcTable } from "@dxc-technology/halstack-react"; + +const BorderTokens = () => ( + + + + Token + Default value + + + + + + line-style-dashed + + dashed + + + + line-style-solid + + solid + + + +); + +export default BorderTokens; diff --git a/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx new file mode 100644 index 000000000..4dbb60210 --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx @@ -0,0 +1,678 @@ +import { TableCode } from "@/common/Code"; +import { DxcTable } from "@dxc-technology/halstack-react"; + +export const AbsoluteTokens = () => ( + + + + Token + Default value + + + + + + color-absolutes-black + + #000000 + + + + color-absolutes-white + + #ffffff + + + +); + +export const AlphaTokens = () => ( + + + + Token + Default value + + + + + + color-alpha-100-a + + #ebebeb1a + + + + color-alpha-200-a + + #dedede33 + + + + color-alpha-300-a + + #d1d1d14d + + + + color-alpha-400-a + + #b5b5b566 + + + + color-alpha-500-a + + #9a9a9a80 + + + + color-alpha-600-a + + #79797999 + + + + color-alpha-700-a + + #5b5b5bb2 + + + + color-alpha-800-a + + #494949cc + + + + color-alpha-900-a + + #333333e5 + + + +); + +export const PrimaryTokens = () => ( + + + + Token + Default value + + + + + + color-primary-50 + + #fcfbfe + + + + color-primary-100 + + #f0e8fa + + + + color-primary-200 + + #e7d9f6 + + + + color-primary-300 + + #ddc9f3 + + + + color-primary-400 + + #c8a7eb + + + + color-primary-500 + + #b487e4 + + + + color-primary-600 + + #9363c8 + + + + color-primary-700 + + #6f4b97 + + + + color-primary-800 + + #5a3c7a + + + + color-primary-900 + + #3e2a55 + + + +); + +export const SecondaryTokens = () => ( + + + + Token + Default value + + + + + + color-secondary-50 + + #f8fcff + + + + color-secondary-100 + + #d9efff + + + + color-secondary-200 + + #bce3ff + + + + color-secondary-300 + + #a0d7ff + + + + color-secondary-400 + + #61bdff + + + + color-secondary-500 + + #30a1f1 + + + + color-secondary-600 + + #267fbf + + + + color-secondary-700 + + #1d6091 + + + + color-secondary-800 + + #174e74 + + + + color-secondary-900 + + #103651 + + + +); + +export const TertiaryTokens = () => ( + + + + Token + Default value + + + + + + color-tertiary-50 + + #fefbef + + + + color-tertiary-100 + + #fcedae + + + + color-tertiary-200 + + #f9de6e + + + + color-tertiary-300 + + #f5cd2b + + + + color-tertiary-400 + + #d4b226 + + + + color-tertiary-500 + + #b6981f + + + + color-tertiary-600 + + #8f7818 + + + + color-tertiary-700 + + #6c5a12 + + + + color-tertiary-800 + + #57490f + + + + color-tertiary-900 + + #3d3309 + + + +); + +export const NeutralTokens = () => ( + + + + Token + Default value + + + + + + color-neutral-50 + + #fbfbfb + + + + color-neutral-100 + + #ebebeb + + + + color-neutral-200 + + #dedede + + + + color-neutral-300 + + #d1d1d1 + + + + color-neutral-400 + + #b5b5b5 + + + + color-neutral-500 + + #9a9a9a + + + + color-neutral-600 + + #797979 + + + + color-neutral-700 + + #5b5b5b + + + + color-neutral-800 + + #494949 + + + + color-neutral-900 + + #333333 + + + +); + +export const Semantic01Tokens = () => ( + + + + Token + Default value + + + + + + color-semantic01-50 + + #f8fcff + + + + color-semantic01-100 + + #d9efff + + + + color-semantic01-200 + + #bce3ff + + + + color-semantic01-300 + + #a0d7ff + + + + color-semantic01-400 + + #61bdff + + + + color-semantic01-500 + + #30a1f1 + + + + color-semantic01-600 + + #267fbf + + + + color-semantic01-700 + + #1d6091 + + + + color-semantic01-800 + + #174e74 + + + + color-semantic01-900 + + #103651 + + + +); + +export const Semantic02Tokens = () => ( + + + + Token + Default value + + + + + + color-semantic02-50 + + #f3fcf5 + + + + color-semantic02-100 + + #d1f5db + + + + color-semantic02-200 + + #acecbe + + + + color-semantic02-300 + + #87e3a0 + + + + color-semantic02-400 + + #53cb75 + + + + color-semantic02-500 + + #47ae64 + + + + color-semantic02-600 + + #39884f + + + + color-semantic02-700 + + #2a673b + + + + color-semantic02-800 + + #225230 + + + + color-semantic02-900 + + #183921 + + + +); + +export const Semantic03Tokens = () => ( + + + + Token + Default value + + + + + + color-semantic03-50 + + #fffbf6 + + + + color-semantic03-100 + + #fde9d2 + + + + color-semantic03-200 + + #fbd9b3 + + + + color-semantic03-300 + + #f9c78f + + + + color-semantic03-400 + + #f5a344 + + + + color-semantic03-500 + + #d58a35 + + + + color-semantic03-600 + + #a76d2b + + + + color-semantic03-700 + + #7f5121 + + + + color-semantic03-800 + + #66421a + + + + color-semantic03-900 + + #3d3309 + + + +); + +export const Semantic04Tokens = () => ( + + + + Token + Default value + + + + + + color-semantic04-50 + + #fff7f6 + + + + color-semantic04-100 + + #ffe6e4 + + + + color-semantic04-200 + + #ffd3d0 + + + + color-semantic04-300 + + #ffc1bd + + + + color-semantic04-400 + + #ff9896 + + + + color-semantic04-500 + + #ff696f + + + + color-semantic04-600 + + #e33248 + + + + color-semantic04-700 + + #a92c37 + + + + color-semantic04-800 + + #87262d + + + + color-semantic04-900 + + #5b1f21 + + + +); diff --git a/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx new file mode 100644 index 000000000..999796add --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx @@ -0,0 +1,137 @@ +import { TableCode } from "@/common/Code"; +import { DxcTable } from "@dxc-technology/halstack-react"; + +const DimensionsTokens = () => ( + + + + Token + Default value + + + + + + dimensions-0 + + 0px + + + + dimensions-1 + + 1px + + + + dimensions-2 + + 2px + + + + dimensions-4 + + 4px + + + + dimensions-8 + + 8px + + + + dimensions-12 + + 12px + + + + dimensions-16 + + 16px + + + + dimensions-20 + + 20px + + + + dimensions-24 + + 24px + + + + dimensions-28 + + 28px + + + + dimensions-32 + + 32px + + + + dimensions-36 + + 36px + + + + dimensions-40 + + 40px + + + + dimensions-44 + + 44px + + + + dimensions-48 + + 48px + + + + dimensions-56 + + 56px + + + + dimensions-64 + + 64px + + + + dimensions-72 + + 72px + + + + dimensions-80 + + 80px + + + + dimensions-96 + + 96px + + + +); + +export default DimensionsTokens; diff --git a/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx new file mode 100644 index 000000000..2f9033e80 --- /dev/null +++ b/apps/website/screens/foundations/tokens/tables/CoreFontTokens.tsx @@ -0,0 +1,162 @@ +import { TableCode } from "@/common/Code"; +import { DxcTable } from "@dxc-technology/halstack-react"; + +export const FontSizesTokens = () => ( + + + + Token + Default value + + + + + + --font-size-12 + + 12px + + + + --font-size-14 + + 14px + + + + --font-size-16 + + 16px + + + + --font-size-18 + + 18px + + + + --font-size-20 + + 20px + + + + --font-size-24 + + 24px + + + + --font-size-32 + + 32px + + + + --font-size-40 + + 40px + + + + --font-size-48 + + 48px + + + + --font-size-60 + + 60px + + + +); + +export const FontWeightTokens = () => ( + + + + Token + Default value + + + + + + --font-weight-light + + 300 + + + + --font-weight-regular + + 400 + + + + --font-weight-semibold + + 600 + + + + --font-weight-bold + + 700 + + + +); + +export const FontFamilyTokens = () => ( + + + + Token + Default value + + + + + + --font-family-mono + + Source Code Pro, mono + + + + --font-family-sans + + Open Sans, sans-serif + + + +); + +export const FontStylesTokens = () => ( + + + + Token + Default value + + + + + + --font-style-lightitalic + + light italic + + + + --font-style-normal + + normal + + + +); From b4683f4fe07fb6fd9b533514ea5c494ff09eb2c2 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 10 Oct 2025 14:17:16 +0200 Subject: [PATCH 2/2] Added missing tables --- apps/website/screens/foundations/tokens/TokensPage.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx index e6da45533..8da050af9 100644 --- a/apps/website/screens/foundations/tokens/TokensPage.tsx +++ b/apps/website/screens/foundations/tokens/TokensPage.tsx @@ -7,6 +7,8 @@ import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } import Link from "next/link"; import componentTokens from "./images/component_tokens.gif"; import { + AbsoluteTokens, + AlphaTokens, NeutralTokens, PrimaryTokens, SecondaryTokens, @@ -318,6 +320,8 @@ const sections = [ <> {/* Color Tokens */} + + @@ -334,6 +338,8 @@ const sections = [ + + <> {/* Dimensions Tokens */}