Skip to content

Commit

Permalink
Grommet demo app buildTheme - Ensure all text sizes and weights are a…
Browse files Browse the repository at this point in the history 
…ccounted for (#4701)

* Ensure all text sizes and weights are accounted for

* Removed 6xl from sticker-sheet text sizes
  • Loading branch information
@halocline
halocline authored Jan 16, 2025
1 parent 0afc0a1 commit 8c8ca7c
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 18 deletions.
1 change: 0 additions & 1 deletion sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ const textSizes = [
'3xl',
'4xl',
'5xl',
'6xl',
];

const StickerSheet = () => {
Expand Down
62 changes: 45 additions & 17 deletions sandbox/grommet-app/src/themes/theme.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,18 +541,46 @@ const buildTheme = tokens => {

const paragraphTheme = {};
const textTheme = {};
const fontWeights = {};
// Keep track of the largest text size to use as a fallback
// because grommet theme has a max size of 6xl, but design tokens
// only supports up to 5xl.
const fallback = {
size: '0rem',
height: '0rem',
maxWidth: '0rem',
weight: 0,
};
textSizes.forEach(size => {
if (
parseInt(large.hpe.text?.[size]?.fontSize.replace('rem', ''), 10) >
parseInt(fallback.size.replace('rem', ''), 10)
) {
fallback.size = large.hpe.text?.[size]?.fontSize;
fallback.height = large.hpe.text?.[size]?.lineHeight;
fallback.maxWidth = large.hpe.text?.[size]?.maxWidth;
fallback.weight = large.hpe.text?.[size]?.fontWeight;
}
paragraphTheme[size] = {
size: large.hpe.text?.[size]?.fontSize,
height: large.hpe.text?.[size]?.lineHeight,
maxWidth: large.hpe.text?.[size]?.maxWidth,
size: large.hpe.text?.[size]?.fontSize || fallback.size,
height: large.hpe.text?.[size]?.lineHeight || fallback.height,
maxWidth: large.hpe.text?.[size]?.maxWidth || fallback.maxWidth,
};
textTheme[size] = {
size: large.hpe.text?.[size].fontSize,
height: large.hpe.text?.[size].lineHeight,
size: large.hpe.text?.[size]?.fontSize || fallback.size,
height: large.hpe.text?.[size]?.lineHeight || fallback.height,
};
fontWeights[size] = large.hpe.text?.[size]?.fontWeight || fallback.weight;
});

textTheme.extend = ({ size }) => {
return `font-weight: ${fontWeights[size]};`;
};

paragraphTheme.extend = ({ size }) => {
return `font-weight: ${fontWeights[size]};`;
};

const buttonKindTheme = {};
buttonKinds.forEach(kind => {
const borderWidth = oldTheme
Expand Down Expand Up @@ -756,37 +784,37 @@ const buildTheme = tokens => {
face: `
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
}
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
font-weight: 400;
}
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff") format('woff');
font-weight: 700;
}
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff") format('woff');
font-weight: 600;
}
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff") format('woff');
font-weight: 500;
}
@font-face {
font-family: "Metric";
src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff2") format('woff2'),
url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff") format('woff');
src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Light.woff2") format('woff2'),
url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Light.woff") format('woff');
font-weight: 100;
}`,
size: large.hpe.text.medium.fontSize,
Expand Down

0 comments on commit 8c8ca7c

Please sign in to comment.