Smooth ui v11

[gregberge]

Theme getters

th is now part of the system, it gets values from the theme.

import { th } from '@smooth-ui/system'

const Container = styled.div`
  color: ${th('colors.primary'); /* Read the primary color from the theme */
`

Specific getters can be used to get known values, the following getters are available:

• th.color
• th.px
• th.percent
• th.radius
• th.border
• th.borderStyle
• th.shadow
• th.width
• th.height
• th.maxWidth
• th.maxHeight
• th.minWidth
• th.minHeight
• th.size
• th.zIndex
• th.space
• th.font
• th.fontSize
• th.lineHeight
• th.fontWeight
• th.letterSpacing

All getters have the same behaviour as their corresponding system properties. For example, th.width(0.5) result is 50%, th.space(2) is 8px.

import { th } from '@smooth-ui/system'

const Container = styled.div`
  margin: ${th.space(2)}; /* 8px */
  width: ${th.width(0.2)}; /* 20% */
  font-family: ${th.font('sans-serif')}; /* Arial, Helvetica, sans-serif */
  color: ${th.color('primary')}; /* red */
`

Variant utility

variant helper creates reusable variants.

import { variant } from '@smooth-ui/system'

const variants = variant({
  // Variants are found in `theme.buttons`
  key: 'buttons',
  // Default variants
  variants: {
    primary: { color: 'red' },
    secondary: { color: 'blue' },
  },
  // Property used to trigger variant
  prop: 'variant',
})

const sizes = variant({
  prop: 'size',
  variants: {
    sm: { padding: 10 },
    md: { padding: 20 },
  },
})

const Button = styled.button`
  ${variants};
  ${sizes};
`

<Button size="md" variant="primary" />

Breakpoints utilities

breakpoints

Use breakpoints to specify any breakpoint.

import { breakpoints } from '@smooth-ui/system'

const Container = styled.div`
  ${breakpoints({
    xs: css`
      /* All devices */
    `,
    md: css`
     /* Starting from md breakpoint */
    `
  }}
`

up, down, between

up, down and between let you apply style relative to breakpoints.

import { styled, css, up } from '@smooth-ui/system'

const RedBox = styled.div`
  width: 200px;
  height: 200px;
  ${up(
    'md',
    css`
      height: 300px;
    `,
  )}
`

[gregberge]

See https://www.smooth-code.com/open-source/xstyled/