diff --git a/apps/website/pages/components/typography/code.tsx b/apps/website/pages/components/typography/code.tsx new file mode 100644 index 0000000000..e8f94f7846 --- /dev/null +++ b/apps/website/pages/components/typography/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import TypographyPageLayout from "screens/components/typography/TypographyPageLayout"; +import TypographyCodePage from "screens/components/typography/code/TypographyCodePage"; + +const Code = () => ( + <> + + Typography — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/typography/index.tsx b/apps/website/pages/components/typography/index.tsx index 9152b38433..597832292f 100644 --- a/apps/website/pages/components/typography/index.tsx +++ b/apps/website/pages/components/typography/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import TypographyPageLayout from "screens/components/typography/TypographyPageLayout"; -import TypographyCodePage from "screens/components/typography/code/TypographyCodePage"; +import TypographyOverviewPage from "screens/components/typography/overview/TypographyOverviewPage"; -const Index = () => { - return ( - <> - - Typography — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Typography — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/typography/specifications.tsx b/apps/website/pages/components/typography/specifications.tsx deleted file mode 100644 index afee78e967..0000000000 --- a/apps/website/pages/components/typography/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TypographyPageLayout from "screens/components/typography/TypographyPageLayout"; -import TypographySpecsPage from "screens/components/typography/specs/TypographySpecsPage"; - -const Specifications = () => { - return ( - <> - - Typography Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/typography/usage.tsx b/apps/website/pages/components/typography/usage.tsx deleted file mode 100644 index a4b24972fa..0000000000 --- a/apps/website/pages/components/typography/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TypographyPageLayout from "screens/components/typography/TypographyPageLayout"; -import TypographyUsagePage from "screens/components/typography/usage/TypographyUsagePage"; - -const Usage = () => { - return ( - <> - - Typography Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/typography/TypographyPageLayout.tsx b/apps/website/screens/components/typography/TypographyPageLayout.tsx index 2d338106d7..2f79f3b5a9 100644 --- a/apps/website/screens/components/typography/TypographyPageLayout.tsx +++ b/apps/website/screens/components/typography/TypographyPageLayout.tsx @@ -1,14 +1,13 @@ import PageHeading from "@/common/PageHeading"; -import { DxcFlex, DxcAlert } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcAlert, DxcParagraph } from "@dxc-technology/halstack-react"; import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; import { ReactNode } from "react"; const TypographyPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/typography" }, - { label: "Usage", path: "/components/typography/usage" }, - { label: "Specifications", path: "/components/typography/specifications" }, + { label: "Overview", path: "/components/typography" }, + { label: "Code", path: "/components/typography/code" }, ]; return ( @@ -16,6 +15,10 @@ const TypographyPageHeading = ({ children }: { children: ReactNode }) => { + + Typography component is a primitive. This means that using this component, you can create any typography + variant that is included in the Halstack Design System. + { }} closable={false} /> - + {children} diff --git a/apps/website/screens/components/typography/code/TypographyCodePage.tsx b/apps/website/screens/components/typography/code/TypographyCodePage.tsx index 7edaf15134..4d26c96151 100644 --- a/apps/website/screens/components/typography/code/TypographyCodePage.tsx +++ b/apps/website/screens/components/typography/code/TypographyCodePage.tsx @@ -13,180 +13,184 @@ const sections = [ title: "Props", content: ( - - Name - Type - Description - Default - - - display - - 'inline' | 'block' - - - Specifies the display CSS property of the component. - - - 'inline' - - - - color - - string - - Color of the text. - - '#000000' - - - - fontFamily - - 'Open Sans, sans-serif' | 'Source Code Pro, monospace' - - - Specifies the font-family CSS property of the component. - - - 'Open Sans, sans-serif' - - - - fontSize - - '0.75rem' | '0.875rem' | '1rem' | '1.25rem' | '1.5rem' | '2rem' | '3rem' | '3.75rem' - - - Specifies the font-size CSS property of the component. - - - '1rem' - - - - fontStyle - - 'normal' | 'italic' - - - Specifies the font-style CSS property of the component. - - - 'normal' - - - - fontWeight - - '300' | '400' | '600' | '700' - - - Specifies the font-weight CSS property of the component. - - - '400' - - - - letterSpacing - - '-0.025em' | '-0.0125em' | '0em' | '0.025em' | '0.05em' | '0.1em' - - - Specifies the letter-spacing CSS property of the component. - - - '0em' - - - - lineHeight - - '1em' | '1.25em' | '1.365em' | '1.5em' | '1.715em' | '2em' - - - Specifies the line-height CSS property of the component. - - - '1.5em' - - - - textAlign - - 'left' | 'center' | 'right' - - - Specifies the text-align CSS property of the component. - - - 'left' - - - - textDecoration - - 'none' | 'underline' | 'line-through' - - - Specifies the text-decoration CSS property of the component. - - - 'none' - - - - textOverflow - - 'clip' | 'ellipsis' | 'unset' - - - Specifies the text-overflow CSS property of the component. - - - 'unset' - - - - whiteSpace - - 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' - - - Specifies the white-space CSS property of the component. - - - 'normal' - - - - - - - children - - - - React.ReactNode - - Custom text. - - - - - as - - - 'a' | 'blockquote' | 'cite' | 'code' | 'div' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | - 'h6' | 'p' | 'pre' | 'small' | 'span' | 'strong' - - - Determines the HTML tag with which the text is to be rendered. - - 'span' - - + + + Name + Type + Description + Default + + + + + as + + + 'a' | 'blockquote' | 'cite' | 'code' | 'div' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | + 'h6' | 'p' | 'pre' | 'small' | 'span' | 'strong' + + + Determines the HTML tag with which the text is to be rendered. + + 'span' + + + + + + + children + + + + React.ReactNode + + Custom text. + - + + + color + + string + + Color of the text. + + var(--color-fg-neutral-dark) + + + + display + + 'inline' | 'block' + + + Specifies the display CSS property of the component. + + + 'inline' + + + + fontFamily + + string + + + Specifies the font-family CSS property of the component. + + + var(--typography-font-family) + + + + fontSize + + string + + + Specifies the font-size CSS property of the component. + + + var(--typography-body-m) + + + + fontStyle + + 'normal' | 'italic' + + + Specifies the font-style CSS property of the component. + + + 'normal' + + + + fontWeight + + string + + + Specifies the font-weight CSS property of the component. + + + var(--typography-body-regular) + + + + letterSpacing + + string + + + Specifies the letter-spacing CSS property of the component. + + + var(--spacing-gap-none) + + + + lineHeight + + string + + + Specifies the line-height CSS property of the component. + + + var(--height-s) + + + + textAlign + + 'left' | 'center' | 'right' + + + Specifies the text-align CSS property of the component. + + + 'left' + + + + textDecoration + + 'none' | 'underline' | 'line-through' + + + Specifies the text-decoration CSS property of the component. + + + 'none' + + + + textOverflow + + 'clip' | 'ellipsis' | 'unset' + + + Specifies the text-overflow CSS property of the component. + + + 'unset' + + + + whiteSpace + + 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' + + + Specifies the white-space CSS property of the component. + + + 'normal' + + + ), }, @@ -205,15 +209,13 @@ const sections = [ }, ]; -const TypographyCodePage = () => { - return ( - - - - - - - ); -}; +const TypographyCodePage = () => ( + + + + + + +); export default TypographyCodePage; diff --git a/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx b/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx new file mode 100644 index 0000000000..7896a36463 --- /dev/null +++ b/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx @@ -0,0 +1,126 @@ +import Code from "@/common/Code"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import Link from "next/link"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + For our sans-serif font-family we use Open Sans; a modern, humanist sans-serif + typeface designed by Steve Matteson. It is known for its clarity, neutrality, and readability{" "} + across a wide range of digital and print applications. + + + With its open forms, neutral yet friendly appearance, and optimized legibility at small sizes + , Open Sans is optimized for both web and mobile interfaces, balancing aesthetic appeal with functional + clarity. The typeface includes a wide character set that supports{" "} + Latin, Greek, and Cyrillic scripts, making it suitable for internationalization. + + + Open Sans can be accessed via{" "} + + Google Fonts + + and is released under the + + SIL Open Font License Version 1.1 + + . + + + ), + }, + { + title: "Usage", + content: ( + <> + + Our Typography component should be considered a fallback option and used{" "} + only when none of the following components meet your specific needs. Each of these components + is designed to convey structure and meaning more effectively within an interface: + + + + + + Heading + + : + {" "} + Provides semantic structure and visual hierarchy to content sections, improving both navigation and + accessibility. + + + + + Paragraph + + : + {" "} + Used for blocks of body text, supporting longer-form content while maintaining readability and consistent + spacing. + + + + + Bulleted List + + : + {" "} + Ideal for presenting items or information in a non-sequential list, helping users quickly scan grouped + content. + + + + If your use case isn't addressed by any of these components, please reach out to our team. We're happy to + evaluate your scenario and find a suitable solution. + + + ), + }, + { + title: "Best practices", + content: ( + + + Keep a clear visual hierarchy: Use different sizes, weights, and styles to organize content. + This helps users quickly understand the structure and importance of information. + + + Prioritize readability: Make sure there is enough contrast between text and background to + ensure it's easy to read for everyone. + + + Allow for sufficient white space: Space between lines, paragraphs, and elements improves + legibility and creates a more open, scannable layout. + + + Ensure responsiveness: Typography should adapt to different screen sizes and resolutions + without breaking or becoming hard to read. + + + Avoid overusing all caps: All-uppercase text is harder to read in longer blocks. Use it + sparingly for labels or short button text. + + + ), + }, +]; + +const TypographyOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default TypographyOverviewPage; diff --git a/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx b/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx deleted file mode 100644 index 1658be1e6e..0000000000 --- a/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx +++ /dev/null @@ -1,778 +0,0 @@ -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; - -const sections = [ - { - title: "Font family", - content: ( - <> - - For our sans-serif font-family, we use the humanist typeface Open Sans, designed by Steve - Matteson and licensed under the{" "} - - Apache License, Version 2.0. - - - - - - Property - Description - Core token - Value - - - - - - font-family - - Default font family sans-serif - - font-family-sans - - 'Open Sans', sans-serif - - - - font-family - - Default font family monospaced - - font-family-mono - - Source Code Pro', monospace - - - - - ), - }, - { - title: "Weight", - content: ( - <> - - In order to add contrast between typographic elements in the UI, Halstack uses four different and well - balanced font-weight values. - - - - - Property - Description - Core token - Value - - - - - - font-weight - - Set font weight as light (300) - - font-weight-light - - 300 - - - - font-weight - - Set font weight as regular (400) - - font-weight-regular - - 400 - - - - font-weight - - Set font weight as semibold (600) - - font-weight-semibold - - 600 - - - - font-weight - - Set font weight as bold (700) - - font-weight-bold - - 700 - - - - - ), - }, - { - title: "Scale", - content: ( - <> - - As we approached the foundational elements with simplification and standardization in mind, the typographic - scale is one of the most important elements to create hierarchy. Our type scale provides eight relative values - based on a root font size of 16px, making it scalable and accessible. - - - - - Property - Description - Core token - Value (rem) - - - - - - font-size - - Set the font size as 12px - - font-scale-01 - - 0.75 - - - - font-size - - Set the font size as 14px - - font-scale-02 - - 0.875 - - - - font-size - - Set the font size as 16px - - font-scale-03 - - 1 - - - - font-size - - Set the font size as 20px - - font-scale-04 - - 1.25 - - - - font-size - - Set the font size as 24px - - font-scale-05 - - 1.5 - - - - font-size - - Set the font size as 32px - - font-scale-06 - - 2 - - - - font-size - - Set the font size as 48px - - font-scale-07 - - 3 - - - - font-size - - Set the font size as 60px - - font-scale-08 - - 3.75 - - - - - ), - }, - { - title: "Formatting", - subSections: [ - { - title: "Style", - content: ( - - - - Property - Description - Core token - Value - - - - - - font-style - - Set font style as italic - - font-style-italic - - italic - - - - font-style - - Set font style as normal - - font-style-normal - - normal - - - - ), - }, - { - title: "Letter spacing", - content: ( - <> - - We calibrate our letter-spacing at large scales to provide a better legibility and - readability of our text. - - - - - Property - Description - Core token - Value(em) - - - - - - letter-spacing - - Set letter spacing as -0.025em - - font-tracking-tight-02 - - -0.025 - - - - letter-spacing - - Set letter spacing as -0.0125em - - font-tracking-tight-01 - - -0.0125 - - - - letter-spacing - - Set letter spacing as 0em - - font-tracking-normal - - 0rem / 0px - - - - letter-spacing - - Set letter spacing as 0.025em - - font-tracking-wide-01 - - 0.025 - - - - letter-spacing - - Set letter spacing as 0.05em - - font-tracking-wide-02 - - 0.05 - - - - letter-spacing - - Set letter spacing as 0.1em - - font-tracking-wide-03 - - 0.1 - - - - - ), - }, - { - title: "Leading", - content: ( - <> - - We use a ratio of 1:1.5 as a standard line-height value. A body font of 16px (1rem) returns a - value of 24px (1.5rem), which is the main reference measurement for the vertical organization. - - - - - Property - Description - Core token - Value(em) - - - - - - line-height - - Set line height as 1em - - font-leading-compact-03 - - 1 - - - - line-height - - Set line height as 1.25em - - font-leading-compact-02 - - 1.25 - - - - line-height - - Set line height as 1.365em - - font-leading-compact-01 - - 1.365 - - - - line-height - - Set line height as 1.5em - - font-leading-normal - - 1.5 - - - - line-height - - Set line height as 1.715em - - font-leading-loose-01 - - 1.715 - - - - line-height - - Set line height as 2em - - font-leading-loose-02 - - 2 - - - - - ), - }, - { - title: "Capitalization", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - text-transform - - Preserve default value - - font-transform-initial - - initial - - - - text-transform - - Transform text to lowercase - - font-transform-lowercase - - lowercase - - - - text-transform - - Transform text to uppercase - - font-transform-uppercase - - uppercase - - - - - ), - }, - { - title: "Text decoration", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - text-decoration - - Unset all present decorations - - font-decoration-no-line - - none - - - - text-decoration - - Underline the text - - font-decoration-underline - - underline - - - - text-decoration - - Put a strikethrough the text - - font-decoration-line-through - - line-through - - - - - ), - }, - { - title: "Text align", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - text-align - - Centers the text. - - text-align-center - - center - - - - text-align - - Align the text to the right. - - text-align-right - - right - - - - text-align - - Align the text to the left. - - text-align-left - - left - - - - - ), - }, - { - title: "Display", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - display - - Displays an element as a block element. - - display-block - - block - - - - display - - Displays an element as an inline element. - - display-inline - - inline - - - - - ), - }, - { - title: "Text overflow", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - text-overflow - - The text is clipped and not accessible. - - text-overflow-clip - - clip - - - - text-overflow - - Render an ellipsis ("...") to represent the clipped text. - - text-overflow-ellipsis - - ellipsis - - - - text-overflow - - Set the property as unset. - - text-overflow-unset - - unset - - - - - ), - }, - { - title: "White space", - content: ( - <> - - - - Property - Description - Core token - Value - - - - - - white-space - - Whitespace is preserved by the browser. Text will only wrap on line breaks. - - text-whiteSpace-pre - - pre - - - - white-space - - - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. - - - text-whiteSpace-normal - - normal - - - - white-space - - - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next - line. The text continues on the same line until a 'br' tag is encountered. - - - text-whiteSpace-nowrap - - nowrap - - - - white-space - - - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and - on line breaks. - - - text-whiteSpace-pre-line - - pre-line - - - - white-space - - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks. - - text-whiteSpace-pre-wrap - - pre-wrap - - - - - ), - }, - ], - }, - { - title: "Accessibility", - subSections: [ - { - title: "WCAG", - content: ( - - - Understanding WCAG 2.2 -{" "} - - SC 1.4.6: Contrast (Enhanced) - - - - Understanding WCAG 2.2 -{" "} - - SC 1.4.12: Text Spacing - - - - ), - }, - ], - }, -]; - -const TypographySpecsPage = () => { - return ( - - - - - - - ); -}; - -export default TypographySpecsPage; diff --git a/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx b/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx deleted file mode 100644 index 57ed086723..0000000000 --- a/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; -import Link from "next/link"; - -const sections = [ - { - title: "Usage", - content: ( - <> - - Typography component is a primitive. This means that using this component, you can create any typography - variant that is included in the Halstack Design System. - - - It is important to highlight that the Typography component should always be the last option to be used as we - have other components that add some context to be included in the sites, these components are: - - - - - Bulleted list - - - - - Paragraph - - - - - Heading - - - - - If any of these components do not cover your use case, please contact us and we will study it. - - - ), - }, -]; - -const TypographyUsagePage = () => { - return ( - - - - - - - ); -}; - -export default TypographyUsagePage; diff --git a/packages/lib/src/typography/TypographyContext.tsx b/packages/lib/src/typography/TypographyContext.tsx index 66e8473bbc..9a825becde 100644 --- a/packages/lib/src/typography/TypographyContext.tsx +++ b/packages/lib/src/typography/TypographyContext.tsx @@ -3,14 +3,14 @@ import { TypographyContextProps } from "./types"; export default createContext({ as: "span", - color: "#000000", + color: "var(--color-fg-neutral-dark)", display: "inline", - fontFamily: "Open Sans, sans-serif", - fontSize: "1rem", + fontFamily: "var(--typography-font-family)", + fontSize: "var(--typography-body-m)", fontStyle: "normal", - fontWeight: "400", - letterSpacing: "0em", - lineHeight: "1.5em", + fontWeight: "var(--typography-body-regular)", + letterSpacing: "var(--spacing-gap-none)", + lineHeight: "var(--height-s)", textAlign: "left", textDecoration: "none", textOverflow: "unset", diff --git a/packages/lib/src/typography/types.ts b/packages/lib/src/typography/types.ts index 9f4e40c814..d686ea1812 100644 --- a/packages/lib/src/typography/types.ts +++ b/packages/lib/src/typography/types.ts @@ -23,12 +23,12 @@ export type Props = { children: ReactNode; color?: string; display?: "inline" | "block"; - fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace"; - fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem"; + fontFamily?: string; + fontSize?: string; fontStyle?: "italic" | "normal"; - fontWeight?: "300" | "400" | "600" | "700"; - letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em"; - lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em"; + fontWeight?: string; + letterSpacing?: string; + lineHeight?: string; textAlign?: "left" | "center" | "right"; textDecoration?: "none" | "underline" | "line-through"; textOverflow?: "clip" | "ellipsis" | "unset";