Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Build consistent, themeable React UIs based on design system constraints and design tokens
Build consistent, themeable React UIs based on design system constraints and design tokens
css
prop and @styled-system/cssnpm i theme-ui @emotion/core @mdx-js/react
Wrap your application with the ThemeProvider
component and pass in a custom theme
object.
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
The theme
object should follow the System UI Theme Specification,
which lets you define custom color palettes, typographic scales, fonts, and more.
// example theme.js
export default {
fonts: {
body: 'system-ui, sans-serif',
heading: '"Avenir Next", sans-serif',
monospace: 'Menlo, monospace',
},
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
}
css
propUse the css
prop throughout your application, along with the css
utility to pick up values from the theme.
Using the css
utility means that
color and other values can reference values defined in theme
object.
import React from 'react'
import { css } from 'theme-ui'
export default () => (
<div
css={css({
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`
})}
>
Hello
</div>
)
Read more about the css
utility in the @styled-system/css docs.
The css
utility also supports using arrays as values to change properties responsively with a mobile-first approach.
import React from 'react'
import { css } from 'theme-ui'
export default props => (
<div
css={css({
// applies width 100% to all viewport widths,
// width 50% above the first breakpoint,
// and 25% above the next breakpoint
width: ['100%', '50%', '25%'],
})}
/>
)
jsx
pragmaTo use values from the theme
object without importing the css
utility, use the custom jsx
pragma, which will automatically convert Theme UI css
prop values.
/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
css={{
fontSize: 4,
color: 'primary',
bg: 'lightgray',
}}
/>
)
Read more in the custom pragma docs.
Use the components
prop to add components to MDX scope.
This can be used to introduce new behavior to markdown elements in MDX, such as adding linked headings or live-editable code examples.
Internally, the ThemeProvider
is a combination of MDXProvider
and Emotion's ThemeProvider
.
// with mdx components
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import mdxComponents from './mdx-components'
import theme from './theme'
export default props => (
<ThemeProvider components={mdxComponents} theme={theme}>
{props.children}
</ThemeProvider>
)
theme.styles
The MDX components can also be styled via the theme.styles
object.
This can be used as a mechanism to pass in fully-baked themes and typographic styles to MDX content.
// example theme
export default {
colors: {
primary: '#33e',
},
styles: {
// this styles child MDX `<h1>` components
h1: {
fontSize: 32,
// this value comes from the `color` object
color: 'primary',
},
},
}
These components' styles can also be consumed outside of an MDX doc with the Styled
component.
Note that these are only styled using the same theme.styles
object and not the same components passed to the ThemeProvider
context.
import React from 'react'
import { Styled } from 'theme-ui'
export default props => (
<Styled.div>
<Styled.h1>Hello</Styled.h1>
</Styled.div>
)
To change the underlying component in Styled
, use the as
prop.
<Styled.a as={Link} to="/">
Home
</Styled.a>
Theme UI includes several components for creating page layouts.
Layout
: sets a flex column with 100vh min-heightHeader
: flexbox rowFooter
: flexbox rowMain
: flex auto container for pushing the Footer to the bottom of the viewportContainer
: max-width, centered containerimport React from 'react'
import { Layout, Header, Main, Container, Footer } from 'theme-ui'
export default props => (
<Layout>
<Header>Hello</Header>
<Main>
<Container>{props.children}</Container>
</Main>
<Footer>© 2019</Footer>
</Layout>
)
The Box
& Flex
layout components are similar to the ones found in Rebass, but are built with Emotion and @styled-system/css
.
import React from 'react'
import { Flex, Box } from 'theme-ui'
export default props => (
<Flex flexWrap="wrap">
<Box width={[1, 1 / 2]} />
<Box width={[1, 1 / 2]} />
</Flex>
)
MIT License
FAQs
The Design Graph Framework
The npm package theme-ui receives a total of 21,147 weekly downloads. As such, theme-ui popularity was classified as popular.
We found that theme-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.