Skip to content
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

Orbit tokens typography #4425

Closed
wants to merge 3 commits into from
Closed
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions docs/src/__examples__/Heading/DEFAULT.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ export default {
options: [
"display",
"displaySubtitle",
"title0",
"title1",
"title2",
"title3",
1 change: 1 addition & 0 deletions docs/src/__examples__/Heading/TYPES.tsx
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ export default {
name: "DisplaySubtitle",
code: `() => <Heading type="displaySubtitle">DisplaySubtitle title</Heading>`,
},
{ name: "Title0", code: `() => <Heading type="title0">Title0 title</Heading>` },
{ name: "Title1", code: `() => <Heading type="title1">Title1 title</Heading>` },
{ name: "Title2", code: `() => <Heading type="title2">Title2 title</Heading>` },
{ name: "Title3", code: `() => <Heading type="title3">Title3 title</Heading>` },
14 changes: 7 additions & 7 deletions docs/src/theme.tsx
Original file line number Diff line number Diff line change
@@ -7,16 +7,16 @@ export default {
fontFamily: '"DM Sans", sans-serif',
fontSizeHeadingDisplay: "48px",
fontWeightHeadingDisplay: "700",
fontSizeHeadingTitle1: "28px",
fontSizeHeadingTitle1: "24px",
fontWeightHeadingTitle1: "700",
fontSizeHeadingTitle2: "22px",
fontWeightHeadingTitle2: "500",
fontSizeHeadingTitle2: "20px",
fontWeightHeadingTitle2: "700",
fontSizeHeadingTitle3: "18px",
fontWeightHeadingTitle3: "500",
fontWeightHeadingTitle3: "700",
fontSizeHeadingTitle4: "16px",
fontWeightHeadingTitle4: "500",
fontSizeHeadingTitle5: "14px",
fontWeightHeadingTitle5: "500",
fontWeightHeadingTitle4: "700",
fontSizeHeadingTitle5: "15px",
fontWeightHeadingTitle5: "700",
fontSizeTextLarge: "18px",
fontSizeTextNormal: "16px",
fontSizeTextSmall: "14px",
16 changes: 16 additions & 0 deletions packages/orbit-components/src/Heading/Heading.stories.tsx
Original file line number Diff line number Diff line change
@@ -56,6 +56,22 @@ TitleDisplaySubtitle.story = {
},
};

export const Title0 = () => {
const customTitle = text("Title", "Orbit design system");
const as = select("as", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H0);
return (
<Heading type="title0" as={as}>
{customTitle}
</Heading>
);
};

Title0.story = {
parameters: {
info: "Headings are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
},
};

export const Title1 = () => {
const customTitle = text("Title", "Orbit design system");
const as = select("as", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H1);
2 changes: 2 additions & 0 deletions packages/orbit-components/src/Heading/consts.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export enum ELEMENT_OPTIONS {
H0 = "h0",
H1 = "h1",
H2 = "h2",
H3 = "h3",
@@ -11,6 +12,7 @@ export enum ELEMENT_OPTIONS {
export enum TYPE_OPTIONS {
DISPLAY = "display",
DISPLAYSUBTITLE = "displaySubtitle",
TITLE0 = "title0",
TITLE1 = "title1",
TITLE2 = "title2",
TITLE3 = "title3",
11 changes: 11 additions & 0 deletions packages/orbit-components/src/Heading/twClasses.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ export const typeClasses: {
[TYPE_OPTIONS.DISPLAY]: "text-heading-display leading-heading-display font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"text-heading-display-subtitle leading-heading-display-subtitle font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]: "text-heading-title0 leading-heading-title0 font-heading-title0",
[TYPE_OPTIONS.TITLE1]: "text-heading-title1 leading-heading-title1 font-heading-title1",
[TYPE_OPTIONS.TITLE2]: "text-heading-title2 leading-heading-title2 font-heading-title2",
[TYPE_OPTIONS.TITLE3]: "text-heading-title3 leading-heading-title3 font-heading-title3",
@@ -18,6 +19,8 @@ export const typeClasses: {
"mm:text-heading-display mm:leading-heading-display mm:font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"mm:text-heading-display-subtitle mm:leading-heading-display-subtitle mm:font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]:
"mm:text-heading-title0 mm:leading-heading-title0 mm:font-heading-title0",
[TYPE_OPTIONS.TITLE1]:
"mm:text-heading-title1 mm:leading-heading-title1 mm:font-heading-title1",
[TYPE_OPTIONS.TITLE2]:
@@ -36,6 +39,8 @@ export const typeClasses: {
"lm:text-heading-display lm:leading-heading-display lm:font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"lm:text-heading-display-subtitle lm:leading-heading-display-subtitle lm:font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]:
"lm:text-heading-title0 lm:leading-heading-title0 lm:font-heading-title0",
[TYPE_OPTIONS.TITLE1]:
"lm:text-heading-title1 lm:leading-heading-title1 lm:font-heading-title1",
[TYPE_OPTIONS.TITLE2]:
@@ -54,6 +59,8 @@ export const typeClasses: {
"tb:text-heading-display tb:leading-heading-display tb:font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"tb:text-heading-display-subtitle tb:leading-heading-display-subtitle tb:font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]:
"tb:text-heading-title0 tb:leading-heading-title0 tb:font-heading-title0",
[TYPE_OPTIONS.TITLE1]:
"tb:text-heading-title1 tb:leading-heading-title1 tb:font-heading-title1",
[TYPE_OPTIONS.TITLE2]:
@@ -72,6 +79,8 @@ export const typeClasses: {
"de:text-heading-display de:leading-heading-display de:font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"de:text-heading-display-subtitle de:leading-heading-display-subtitle de:font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]:
"de:text-heading-title0 de:leading-heading-title0 de:font-heading-title0",
[TYPE_OPTIONS.TITLE1]:
"de:text-heading-title1 de:leading-heading-title1 de:font-heading-title1",
[TYPE_OPTIONS.TITLE2]:
@@ -90,6 +99,8 @@ export const typeClasses: {
"ld:text-heading-display ld:leading-heading-display ld:font-heading-display",
[TYPE_OPTIONS.DISPLAYSUBTITLE]:
"ld:text-heading-display-subtitle ld:leading-heading-display-subtitle ld:font-heading-display-subtitle",
[TYPE_OPTIONS.TITLE0]:
"ld:text-heading-title0 ld:leading-heading-title0 ld:font-heading-title0",
[TYPE_OPTIONS.TITLE1]:
"ld:text-heading-title1 ld:leading-heading-title1 ld:font-heading-title1",
[TYPE_OPTIONS.TITLE2]:
1 change: 1 addition & 0 deletions packages/orbit-components/src/Heading/types.d.ts
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import type * as Common from "../common/types";
export type Type =
| "display"
| "displaySubtitle"
| "title0"
| "title1"
| "title2"
| "title3"
Original file line number Diff line number Diff line change
@@ -1882,6 +1882,7 @@ exports[`orbitPreset should have preflight disabled 1`] = `
"form-element-normal": "15px",
"heading-display": "40px",
"heading-display-subtitle": "22px",
"heading-title0": undefined,
"heading-title1": "28px",
"heading-title2": "22px",
"heading-title3": "18px",
@@ -1896,6 +1897,7 @@ exports[`orbitPreset should have preflight disabled 1`] = `
"bold": "700",
"heading-display": "700",
"heading-display-subtitle": "400",
"heading-title0": undefined,
"heading-title1": "700",
"heading-title2": "500",
"heading-title3": "500",
@@ -2408,6 +2410,7 @@ exports[`orbitPreset should have preflight disabled 1`] = `
"heading": "1.2",
"heading-display": "44px",
"heading-display-subtitle": "28px",
"heading-title0": undefined,
"heading-title1": "32px",
"heading-title2": "28px",
"heading-title3": "24px",
3 changes: 3 additions & 0 deletions packages/orbit-tailwind-preset/src/index.ts
Original file line number Diff line number Diff line change
@@ -102,6 +102,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
fontSize: {
"heading-display": tokens.headingDisplayFontSize,
"heading-display-subtitle": tokens.headingDisplaySubtitleFontSize,
// "heading-title0": tokens.headingTitle0FontSize,
"heading-title1": tokens.headingTitle1FontSize,
"heading-title2": tokens.headingTitle2FontSize,
"heading-title3": tokens.headingTitle3FontSize,
@@ -116,6 +117,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
fontWeight: {
"heading-display": tokens.headingDisplayFontWeight,
"heading-display-subtitle": tokens.headingDisplaySubtitleFontWeight,
// "heading-title0": tokens.headingTitle0FontWeight,
"heading-title1": tokens.headingTitle1FontWeight,
"heading-title2": tokens.headingTitle2FontWeight,
"heading-title3": tokens.headingTitle3FontWeight,
@@ -129,6 +131,7 @@ export default function orbitTailwindPreset(options?: Options): Config {
heading: tokens.lineHeightHeading,
"heading-display": tokens.headingDisplayLineHeight,
"heading-display-subtitle": tokens.headingDisplaySubtitleLineHeight,
// "heading-title0": tokens.headingTitle0LineHeight,
"heading-title1": tokens.headingTitle1LineHeight,
"heading-title2": tokens.headingTitle2LineHeight,
"heading-title3": tokens.headingTitle3LineHeight,