Baseweb: Responsive typography

[illogikal]

I have created a functionality in my theme file to make the typography styles responsive:

Feature description

const mediaSizes = {
  smallPhone: 320,
  bigPhone: 480,
  tablet: 600,
  bigTablet: 801,
  tabletLaptop: 1025,
  desktop: 1281
}

const makeFontSizeResponsive = fontSize => {
  const fontNumber = fontSize.slice(0, -2)
  const result = {
    [mediaQueries['smallPhone']]: { fontSize: `${fontNumber * 0.7}px` },
    [mediaQueries['bigPhone']]: { fontSize: `${fontNumber * 0.75}px` },
    [mediaQueries['tablet']]: { fontSize: `${fontNumber * 0.8}px` },
    [mediaQueries['bigTablet']]: { fontSize: `${fontNumber * 0.85}px` },
    [mediaQueries['tabletLaptop']]: { fontSize: `${fontNumber * 0.9}px` },
    [mediaQueries['desktop']]: { fontSize: `${fontNumber}px` }
  }
  return result
}
const newTheme = createTheme({
  ...,
  'typography': {
    'font100': {
      'fontFamily': 'Helvetica, Arial, sans-serif',
      'fontSize': '11px',
      'fontWeight': 'normal',
      'lineHeight': '1.45em',
      ...makeFontSizeResponsive('11px')
    },
  ...
}

However these do not work with the baseui typography classes because the fonts prop is filtered by individual keys, and I believe that the styles are also not deep merged. I could create my own custom typography components and probably will due to time, but I think it would be good to allow this. If there is a better way please advise?

See: https://github.com/uber-web/baseui/blob/master/src/block/styled-components.js#L86

[jh3y]

Hey @illogikal 👋

Are you able to provide a CodeSandbox example for what you are trying to achieve. From the code above, the media query keys wouldn't be populating as mediaQueries would be undefined. However, I'd imagine you have this code running somewhere 👍

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. If it's still valid, please remove the stale label or comment on the issue, otherwise this ticket will be closed in 5 days

[asherccohen]

Hey guys, how would you type custom media queries?I've added some to my theme overrides but I get type errors saying my properties don't exist.
The MediaQuery and Breakpoints interfaces are not exported so I can use them.

[sandgraham]

Hey guys, how would you type custom media queries?I've added some to my theme overrides but I get type errors saying my properties don't exist.

This section of the theming guide focuses on extending the default theme with new properties: https://baseweb.design/guides/theming/#customizing-the-theme-type

[asherccohen]

Ok but this means my custom mediaQueries will not be part of the existing ones.

To read them from the theme I would have to do:
theme.customMediaQuery.xxLarge

instead of:

theme.mediaQuery.xxLarge

And on top of that I would have to create my own MediaQuery type instead of using the one from baseUi.

Any suggestion?

[sandgraham]

@asherccohen Right now the only way to do something like this would be to create your own theme type that overrides the mediaQuery part of our default themes. Here is an example.

[asherccohen]

Great, that helped. Your example used Flow.
This is the TypeScript version:

type BaseBreakpoints = {
  small: number;
  medium: number;
  large: number;
};

type BaseMediaQuery = {
  small: string;
  medium: string;
  large: string;
};

type CustomBreakpoints = {
  xxLarge: number;
};

type CustomMediaQuery = {
  xxLarge: string;
};

export type CustomThemeT = Theme & {
// other custom values
  breakpoints: BaseBreakpoints & CustomBreakpoints;
  mediaQuery: BaseMediaQuery & CustomMediaQuery;
};

export const themedStyled = createThemedStyled<CustomThemeT>();
export const themedWithStyle = createThemedWithStyle<CustomThemeT>();
export const themedUseStyletron = createThemedUseStyletron<CustomThemeT>();

It would be nice to have the real Breakpoints and MediaQuery types to avoid having to create them here.

[sandgraham]

@asherccohen Ah okay, they are exported in Flow, but not Typescript. Opened #3779.