How to use the styled-system.themeGet function in styled-system

To help you get started, we’ve selected a few styled-system 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 ConsenSys / rimble-ui / src / OutlineButton / index.js View on Github external
const OutlineButton = styled(Button).attrs(props => ({
  primarycolor: themeGet('colors.primary', '#000')(props),
}))`
  & {
github opencollective / opencollective-frontend / src / components / StyledTextarea.js View on Github external
${styledSystem.borders}
  ${styledSystem.borderRadius}
  ${styledSystem.borderColor}

  /** Text */ 
  ${styledSystem.color}
  ${styledSystem.fontSize}
  ${styledSystem.fontWeight}
  ${styledSystem.letterSpacing}
  ${styledSystem.lineHeight}
  ${styledSystem.textAlign}

  outline: none;

  &:disabled {
    background-color: ${styledSystem.themeGet('colors.black.50')};
    cursor: not-allowed;
  }

  &:focus, &:hover:not(:disabled) {
    border-color: ${styledSystem.themeGet('colors.primary.300')};
  }

  &::placeholder {
    color: ${styledSystem.themeGet('colors.black.400')};
  }
`;

/**
 * A styled textarea that can grows with its content.
 */
export default class StyledTextarea extends React.PureComponent {
github rebassjs / rebass / src / Input.js View on Github external
props => ({
  fontFamily: 'inherit',
  display: 'inline-block',
  verticalAlign: 'middle',
  border: 0,
  appearance: 'none',
  '&:focus': {
    outline: 'none',
    boxShadow: `inset 0 0 0 1px ${themeGet('colors.blue')(props)}`,
  },
  '&:disabled': {
    opacity: 1/4
  },
}))
github LN-Zap / zap-desktop / renderer / components / UI / Dropmenu.js View on Github external
function getColor(props) {
  return props.isHovered
    ? themeGet('colors.lightningOrange')(props)
    : themeGet('colors.primaryText')(props)
}
github LN-Zap / zap-desktop / renderer / components / Form / PasswordInput.js View on Github external
import Input from './Input'
import Eye from 'components/Icon/Eye'
import EyeOff from 'components/Icon/EyeOff'

const iconCss = `
  cursor: pointer;
  height: 32px;
  padding: 0 8px;
  position: absolute;
  right: 8px;
  user-select: none;
  width: 32px;
`
const StyledEyeIcon = styled(Eye)`
  ${iconCss}
  color: ${themeGet('colors.gray')};
`
const StyledEyeOffIcon = styled(EyeOff)`
  ${iconCss}
  color: ${themeGet('colors.gray')};
`

const PasswordInput = props => {
  const [isPasswordVisible, setPasswordVisible] = useState(false)
  const toggleIsPasswordVisible = () => {
    setPasswordVisible(!isPasswordVisible)
  }

  return (
github rebassjs / rebass / src / Button.js View on Github external
props => ({
    '&:focus': {
      outline: 'none',
      boxShadow: `0 0 0 2px ${themeGet('colors.' + props.bg, props.bg)(props)}`
    }
  }),
  'fontSize',