May release questions

As usual I am having difficulties figuring out some of the new features that are mentioned in the release notes:

  • What are “style tokens”? And is it possible to write our own “web theme”? So far I have modified mine with some additional CSS.

  • What is the “participants pane”?

You can see it on meet.jit.si.

1 Like

@vp8x8 Can you shed some light on the Add style tokens and web theme :slight_smile: Thanks

Using style tokens is our attempt to create a uniform look across the web and the mobile app.
These are basically pieces of CSS (for the web) / style (for mobile) that are added to the default theme and used everywhere.
You can think of it like basic building blocks which will be used to create all the other visual elements.

A simple example (for web) would be:

const useStyles = makeStyles(theme => {
    return {
        root: {
            color: theme.palette.text01,
            marginTop: theme.spacing(3),
            marginBottom: 10,
            ...withPixelLineHeight(theme.typography.heading5)
        }
    }
})

As you can see we use the palette, spacing and typography properties declared on the theme.

In the future we will allow changing not only colors/theme with a simple config, but be able to easily customize almost any component because we are migrating to JSS. JSS will also allow us to do a lot of cool stuff like dynamically modifying the appearance of the app.
We are building on the concepts used by https://material-ui.com/ on web and the short term goal is to allow simple creation of a color theme using a configuration property.

4 Likes