How to use the styled-tools.theme function in styled-tools

To help you get started, we’ve selected a few styled-tools examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github reakit / reakit / packages / reakit / src / Inline / Inline.ts View on Github external
import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface InlineProps extends BoxProps {}

const Inline = styled(Box)`
  display: inline;
  ${theme("Inline")};
`;

export default use(Inline, "span");
github mvfsillva / mvfsillva / src / components / paragraph.js View on Github external
import styled from 'styled-components'
import { theme } from 'styled-tools'

const Paragraph = styled.p`
  max-width: 80ch;
  ${theme('typography.paragraph')};
  color: ${theme('palette.black')};
  margin-top: ${theme('spacing.medium')};
  margin-bottom: ${theme('spacing.medium')};
`

export default Paragraph
github reakit / reakit / packages / reakit / src / Table / Table.tsx View on Github external
import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface TableProps extends BoxProps {}

const Table = styled(Box)`
  ${theme("Table")};
`;

export default use(Table, "table");
github involvestecnologia / violin / src / lib / components / FormGroup / style.js View on Github external
import styled from "styled-components";
import { theme as involves } from "../../theme";
import { theme, ifProp } from "styled-tools";

export const Wrapper = styled.div`
  display: block;
  margin-bottom: ${ifProp(
    "noMargin",
    "0",
    theme("spacing.space4", involves.spacing.space4)
  )};
`;
github reakit / reakit / packages / reakit / src / Group / GroupItem.ts View on Github external
import { theme } from "styled-tools";
import styled from "../styled";
import use from "../use";
import Box, { BoxProps } from "../Box";

export interface GroupItemProps extends BoxProps {}

const GroupItem = styled(Box)`
  ${theme("GroupItem")};
`;

export default use(GroupItem, "div");

styled-tools

Utilities for styled-components

MIT
Latest version published 4 years ago

Package Health Score

53 / 100
Full package analysis

Similar packages