Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…
Browse files Browse the repository at this point in the history 
… into 842-implement-narrow-screen-font-design-tokens
  • Loading branch information
@masoudmanson
masoudmanson committed Nov 8, 2024
2 parents d066b19 + 75375d3 commit a974143
Show file tree
Hide file tree
Showing 6 changed files with 416 additions and 100 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/core/Callout/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const StyledCallout = styled(Alert, {
const alertMessagePaddingTop = Math.abs(
((iconSizes?.l.height ?? 0) -
parseInt(
String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
String(typography?.wideStyles?.body?.regular?.xs?.lineHeight ?? "0")
)) /
2
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/Notification/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const StyledNotification = styled(Alert, {
const alertMessagePaddingTop = Math.abs(
((iconSizes?.l.height ?? 0) -
parseInt(
String(typography?.styles?.body?.regular?.xs?.lineHeight ?? "0")
String(typography?.wideStyles?.body?.regular?.xs?.lineHeight ?? "0")
)) /
2
);
Expand Down
265 changes: 264 additions & 1 deletion packages/components/src/core/styles/common/SDSAppTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,270 @@ const sharedAppTheme: Omit<AppTheme, "colors" | "mode"> = {
header: fontFamily,
tabular: fontFamily,
},
styles: {
narrowStyles: {
body: {
regular: {
button: {
fontSize: 13,
fontWeight: FontWeight.regular,
letterSpacing: "0.08px",
lineHeight: "20px",
textTransform: "none",
},
l: {
fontSize: 16,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "26px",
textTransform: "none",
},
m: {
fontSize: 14,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
s: {
fontSize: 14,
fontWeight: FontWeight.regular,
letterSpacing: "0.08px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontWeight: FontWeight.regular,
letterSpacing: "0.08px",
lineHeight: "20px",
textTransform: "none",
},
xxs: {
fontSize: 12,
fontWeight: FontWeight.regular,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
xxxs: {
fontSize: 12,
fontWeight: FontWeight.regular,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
},
semibold: {
button: {
fontSize: 13,
fontWeight: FontWeight.semibold,
letterSpacing: "0.08px",
lineHeight: "20px",
textTransform: "none",
},
l: {
fontSize: 16,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "26px",
textTransform: "none",
},
m: {
fontSize: 14,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
s: {
fontSize: 14,
fontWeight: FontWeight.semibold,
letterSpacing: "0.08px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontWeight: FontWeight.semibold,
letterSpacing: "0.08px",
lineHeight: "20px",
textTransform: "none",
},
xxs: {
fontSize: 12,
fontWeight: FontWeight.semibold,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
xxxs: {
fontSize: 12,
fontWeight: FontWeight.semibold,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
},
},
caps: {
semibold: {
xxs: {
fontSize: 12,
fontWeight: FontWeight.semibold,
letterSpacing: "0.5px",
lineHeight: "18px",
textTransform: "uppercase",
},
xxxs: {
fontSize: 11,
fontWeight: FontWeight.semibold,
letterSpacing: "0.5px",
lineHeight: "16px",
textTransform: "uppercase",
},
xxxxs: {
fontSize: 11,
fontWeight: FontWeight.semibold,
letterSpacing: "0.5px",
lineHeight: "16px",
textTransform: "uppercase",
},
},
},
code: {
regular: {
s: {
fontSize: 14,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "20px",
textTransform: "none",
},
},
semibold: {
s: {
fontSize: 14,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "20px",
textTransform: "none",
},
},
},
header: {
semibold: {
l: {
fontSize: 16,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "22px",
textTransform: "none",
},
m: {
fontSize: 14,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "20px",
textTransform: "none",
},
s: {
fontSize: 14,
fontWeight: FontWeight.semibold,
letterSpacing: "0.08px",
lineHeight: "20px",
textTransform: "none",
},
xl: {
fontSize: 18,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontWeight: FontWeight.semibold,
letterSpacing: "0.08px",
lineHeight: "18px",
textTransform: "none",
},
xxl: {
fontSize: 22,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "30px",
textTransform: "none",
},
xxs: {
fontSize: 12,
fontWeight: FontWeight.semibold,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
xxxs: {
fontSize: 12,
fontWeight: FontWeight.semibold,
letterSpacing: "0.1px",
lineHeight: "18px",
textTransform: "none",
},
},
},
tabular: {
regular: {
s: {
fontSize: 14,
fontVariantNumeric: tabularNums,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontVariantNumeric: tabularNums,
fontWeight: FontWeight.regular,
letterSpacing: "0px",
lineHeight: "20px",
textTransform: "none",
},
},
semibold: {
s: {
fontSize: 14,
fontVariantNumeric: tabularNums,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "24px",
textTransform: "none",
},
xs: {
fontSize: 13,
fontVariantNumeric: tabularNums,
fontWeight: FontWeight.semibold,
letterSpacing: "0px",
lineHeight: "20px",
textTransform: "none",
},
},
},
},
wideStyles: {
body: {
regular: {
button: {
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/core/styles/common/makeThemeOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,20 +442,20 @@ export function makeThemeOptions(
},
},
typography: {
body1: appTheme.typography.styles.body.regular.xs,
body2: appTheme.typography.styles.body.regular.xxs,
button: appTheme.typography.styles.body.regular.button,
caption: appTheme.typography.styles.body.regular.xxxs,
body1: appTheme.typography.wideStyles.body.regular.xs,
body2: appTheme.typography.wideStyles.body.regular.xxs,
button: appTheme.typography.wideStyles.body.regular.button,
caption: appTheme.typography.wideStyles.body.regular.xxxs,
fontFamily: `${appTheme.typography.fontFamily.body}, sans-serif`,
h1: appTheme.typography.styles.header.semibold.xxl,
h2: appTheme.typography.styles.header.semibold.xl,
h3: appTheme.typography.styles.header.semibold.l,
h4: appTheme.typography.styles.header.semibold.m,
h5: appTheme.typography.styles.header.semibold.s,
h6: appTheme.typography.styles.header.semibold.xs,
overline: appTheme.typography.styles.caps.semibold.xxxs,
subtitle1: appTheme.typography.styles.body.regular.xs,
subtitle2: appTheme.typography.styles.header.semibold.xxs,
h1: appTheme.typography.wideStyles.header.semibold.xxl,
h2: appTheme.typography.wideStyles.header.semibold.xl,
h3: appTheme.typography.wideStyles.header.semibold.l,
h4: appTheme.typography.wideStyles.header.semibold.m,
h5: appTheme.typography.wideStyles.header.semibold.s,
h6: appTheme.typography.wideStyles.header.semibold.xs,
overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
subtitle1: appTheme.typography.wideStyles.body.regular.xs,
subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
},
};
}
Loading

0 comments on commit a974143

Please sign in to comment.