-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added typography section in Semantic token section
- Loading branch information
Francis Thibault
committed
Oct 30, 2023
1 parent
b7e2bbd
commit 0f7531e
Showing
11 changed files
with
2,059 additions
and
1,949 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import "@hopper-ui/tokens/fonts.css"; | ||
| import "./preview.css"; | ||
|
|
||
| interface TypographyPreviewProps { | ||
| values?: TypographyValues; | ||
| } | ||
|
|
||
| interface TypographyValues { | ||
| lineHeight?: string; | ||
| fontWeight?: string; | ||
| fontSize?: string; | ||
| fontFamily?: string; | ||
| } | ||
|
|
||
| interface TypographyPreviewElemProps { | ||
| className?: string; | ||
| content?: React.ReactNode; | ||
| style?: React.CSSProperties; | ||
| } | ||
|
|
||
| const TypographyPreview = ({ values }: TypographyPreviewProps) => { | ||
| let TypographyPreviewElem: TypographyPreviewElemProps = {}; | ||
|
|
||
| const sampleText = "Aa"; | ||
| console.log(values); | ||
|
|
||
| TypographyPreviewElem = { | ||
| style: { lineHeight: values?.lineHeight, fontWeight: values?.fontWeight, fontSize: values?.fontSize, fontFamily: values?.fontFamily }, | ||
| className: "hd-preview--font hd-preview--typography", | ||
| content: <>{sampleText}</> | ||
| }; | ||
|
|
||
| return <div className={`hd-preview ${TypographyPreviewElem.className}`} style={TypographyPreviewElem.style}>{TypographyPreviewElem.content}</div>; | ||
| }; | ||
|
|
||
| export default TypographyPreview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| "use client"; | ||
|
|
||
| import TypographyPreview from "@/components/preview/TypographyPreview"; | ||
| import Code from "@/components/ui/code/Code"; | ||
| import tokens from "../../../datas/tokens.json"; | ||
|
|
||
| import "./table.css"; | ||
|
|
||
| interface TypographyTableProps { | ||
| type: string; | ||
| data: { | ||
| [key: string]: { | ||
| "font-family": { $value: string }; | ||
| "font-size": { $type: string; $value: string }; | ||
| "font-weight": { $type: string; $value: string }; | ||
| "line-height": { $type: string; $value: string }; | ||
| }; | ||
| }; | ||
| } | ||
|
|
||
| const TypographyTable = ({ type, data }: TypographyTableProps) => { | ||
| const headings = Object.keys(data); | ||
|
|
||
| const listItems = headings.map(heading => { | ||
| const { | ||
| "font-family": fontFamily, | ||
| "font-size": fontSize, | ||
| "font-weight": fontWeight, | ||
| "line-height": lineHeight | ||
| } = data[heading]; | ||
|
|
||
| const lineHeightTokens = tokens.core.lineHeight; | ||
| const fontFamilyTokens = tokens.core.fontFamily; | ||
| const fontWeightTokens = tokens.core.fontWeight; | ||
| const fontSizeTokens = tokens.core.fontSize; | ||
|
|
||
| const getFontSize = (value: string) => { | ||
| const lastPart = value.match(/\.(\d+)(?=\})/); | ||
|
|
||
| if (lastPart) { | ||
| return lastPart[1]; | ||
| } | ||
| }; | ||
|
|
||
| const getFontWeight = (value: string) => { | ||
| const lastPart = value.match(/\.(\d+)(?=\})/); | ||
|
|
||
| if (lastPart) { | ||
| return lastPart[1]; | ||
| } | ||
| }; | ||
|
|
||
| const getlineHeight = (value: string) => { | ||
| const lastPart = value.match(/\.([\d-]+)(?=\})/); | ||
|
|
||
| if (lastPart) { | ||
| return lastPart[1]; | ||
| } | ||
| }; | ||
|
|
||
| const getFontFamily = (value: string) => { | ||
| const lastPart = value.match(/\.([^\s.}]+)(?=\})/); | ||
|
|
||
| if (lastPart) { | ||
| return lastPart[1]; | ||
| } | ||
| }; | ||
|
|
||
| const fontSizeValue = fontSizeTokens.find(item => item.name === `hop-font-size-${getFontSize(fontSize.$value)}`)?.value; | ||
| const fontWeightValue = fontWeightTokens.find(item => item.name === `hop-font-weight-${getFontWeight(fontWeight.$value)}`)?.value; | ||
| const fontFamilyValue = fontFamilyTokens.find(item => item.name === `hop-font-family-${getFontFamily(fontFamily.$value)}`)?.value; | ||
| const lineHeightValue = lineHeightTokens.find(item => item.name === `hop-line-height-${getlineHeight(lineHeight.$value)}`)?.value; | ||
|
|
||
| return ( | ||
| <> | ||
| <tr key={heading} className="hd-typo__row"> | ||
| <td className="hd-table__cell hd-typo__cell" rowSpan={4}>{heading}</td> | ||
| <td className="hd-table__cell hd-typo__cell" colSpan={3}> | ||
| Font Size | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| <Code value={`--hop-${type}-${heading}-font-size`}>{`--hop-${type}-${heading}-font-size`}</Code> | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| {fontSizeValue} | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell" rowSpan={4}> | ||
| <TypographyPreview values={{ lineHeight: lineHeightValue, fontSize: fontSizeValue, fontWeight: fontWeightValue, fontFamily: fontFamilyValue }} /> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td className="hd-table__cell hd-typo__cell" colSpan={3}> | ||
| Font Weight | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| <Code value={`--hop-${type}-${heading}-font-weight`}>{`--hop-${type}-${heading}-font-weight`}</Code> | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| {fontWeightValue} | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td className="hd-table__cell hd-typo__cell" colSpan={3}> | ||
| Line Height | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| <Code value={`--hop-${type}-${heading}-line-height`}>{`--hop-${type}-${heading}-line-height`}</Code> | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| {lineHeightValue} | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td className="hd-table__cell hd-typo__cell" colSpan={3}> | ||
| Font-Family | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| <Code value={`--hop-${type}-${heading}-font-family`}>{`--hop-${type}-${heading}-font-family`}</Code> | ||
| </td> | ||
| <td className="hd-table__cell hd-typo__cell"> | ||
| {fontFamilyValue} | ||
| </td> | ||
| </tr> | ||
| </> | ||
| ); | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <table className="hd-table" aria-label="Tokens"> | ||
| <thead> | ||
| <tr> | ||
| <th className="hd-table__column">Name</th> | ||
| <th className="hd-table__column" colSpan={5}>Values</th> | ||
| <th className="hd-table__column">Preview</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {listItems} | ||
| </tbody> | ||
| </table> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TypographyTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| --- | ||
| title: Typography | ||
| description: Getting started with Workleap Design Tokens | ||
| --- | ||
| import tokens from '../../../../../packages/tokens/src/tokens/semantic/light/fonts.tokens.json'; | ||
|
|
||
| # Typography | ||
|
|
||
| export const categoryKey = "typography"; | ||
|
|
||
| Typography tokens are composite tokens, meaning they are made up of multiple other tokens. This allows us to create a consistent typographic scale across our products. | ||
|
|
||
| ## Heading | ||
|
|
||
| Headings are used to create a hierarchy of content. They are used to help users scan and understand the content on a page. | ||
|
|
||
| <TypographyTable category={categoryKey} type="heading" data={tokens["heading"]} /> | ||
|
|
||
| ## Body | ||
|
|
||
| Body text is used to communicate the main content of a page. | ||
|
|
||
| <TypographyTable category={categoryKey} type="body" data={tokens["body"]} /> | ||
|
|
||
| ## Accent | ||
|
|
||
| Accent text is used to highlight important information on a page. | ||
|
|
||
| <TypographyTable category={categoryKey} type="accent" data={tokens["accent"]} /> |
Oops, something went wrong.