open-index/open-npm huggingface dataset:
npm package: @styled-lib/common
Description: the common / theme set of styled lib
Author: sihui
Latest version: 1.2.0


# Style lib: common

the essential set that been share between components in styled components

## Color

how to consume colors in common:
[bind colors with ThemeProvider](https://youtu.be/O8ZXfhE9rEU)

## Reset

how to consume reset: [setup global style in styled components](
  https://youtu.be/VCfEA1Epo64?t=270
)

## breakpoints

how to consume breakpoints in common:  [hooking breakpoints with helper screen](https://youtu.be/E4MgstT1sQ8)
npm package: @styled-lib/utils
Description: the helpers for styled lib
Author: seeliang
Latest version: 1.1.1

Styled lib: utils
____

### Colors 
* generateColor()

  how to generate ${color} snippets in styled components library: [mapping colors to function](https://youtu.be/5wWo4viSIGI?t=328)

### Screen
* generateScreen()
  
  how to generate${screen} snippets and handle media query with consistency device based breakpoints: [mapping breakpoints to function](https://youtu.be/E4MgstT1sQ8)
npm package: @styled-system-ts/variant
Description: Read the docs: https://styled-system.com/variants
Author: Brent Jackson & Andy Wilson
Latest version: 0.3.1

# @styled-system-ts/variant

Read the docs: https://styled-system.com/variants

## Usage

```js
import styled from 'styled-components';
import variant from '@styled-system-ts/variant';

const Button = styled('button')(
  variant({
    variants: {
      primary: {
        color: 'white',
        bg: 'primary',
        ':hover': {
          bg: 'black',
        },
      },
      secondary: {
        color: 'white',
        bg: 'secondary',
        ':hover': {
          bg: 'black',
        },
      },
    },
  })
);

// <Button variant='primary' />
// <Button variant='secondary' />
```

## Options

- `variants`: object of theme-aware variant styles with user-defined shape
- `prop`: (default `variant`) custom prop name for variant
- `scale`: optional theme key for adding variants to the theme object

MIT License
npm package: @styled-system/babel-plugin
Description: **EXPERIMENTAL**
Author: Brent Jackson
Latest version: 0.0.20


# @styled-system/babel-plugin

**EXPERIMENTAL**

Use Styled System props on any JSX element

```sh
npm i -D @styled-system/babel-plugin
```

```jsx
<h1 mt={0} mb={4} color='primary'>
  Hello
</h1>
```

- Use Styled System props on **any** JSX element
- Support for **all** CSS properties
- Picks up values from theme context
- Use arrays for responsive styles
- Removes props from rendered HTML

## Getting Started

Add the plugin to your Babel config.
Be sure that `@emotion/babel-preset-css-prop` is included as well.

```js
// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@emotion/babel-preset-css-prop',
  ],
  plugins: [
    '@styles-system/babel-plugin',
  ]
}
```

Use Styled System props or CSS properties as React props on any JSX element.

```jsx
<h1
  color='tomato'
  fontFamily='system-ui'
  textDecoration='underline'
  textDecorationStyle='wavy'
/>
```

## What it does

`@styled-system/babel-plugin` converts style props to objects in a `css` prop, allowing libraries like Emotion to parse the styles into CSS.

```jsx
// in
<div color='tomato' px={32} />

// out (before Emotion's Babel plugin)
<div
  css={{
    color: 'tomato',
    paddingLeft: 32,
    paddingRight: 32,
  }}
/>
```

## Use values from your theme

When colors, fonts, font sizes, a spacing scale, or other values are definied in an Emotion theme context, the values can be referenced by key in the props.

```js
// example theme
export default {
  colors: {
    primary: '#07c',
    muted: '#f6f6f9'
  }
}
```

```jsx
<div color='primary' bg='muted' />
```

## Use arrays for responsive styles

```jsx
<div width={[ '100%', '50%', '25%' ]} />
```

### Caveats

- Breakpoints can *only* be configured in the Babel plugin options (this is an intentional performance enhancement)
- Theme values with *not* work when a custom function is used in the `css` prop
- Does not parse props on SVG elements
- This does not use the core `styled-system` package under the hood and is an alternative implementation. This is **not** intended to be used with components built with `styled-system` and may work differently than exppected.
- Does not transform fractional width values
- Does not include default scales for `space` or `fontSizes`

To configure custom breakpoint values, set the `breakpoints` option in your Babel config file.

```js
// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@emotion/babel-preset-css-prop',
  ],
  plugins: [
    [ '@styles-system/babel-plugin', {
      breakpoints: [
        '32em', '48em', '64em', '72em',
      ]
    } ]
  ]
}
```

MIT License
npm package: @styled-system/css
Description: Styled System for the `css` prop
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/css

Styled System for the `css` prop

```sh
npm i @styled-system/css
```

Styled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.

```jsx
// usage with the css prop
import React from 'react'
import css from '@styled-system/css'

const Beep = props =>
  <div
    {...props}
    css={css({
      fontSize: [4, 5, 6],
      color: 'primary',
    })}
  />
```

```js
// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@styled-system/css'

const Boop = styled('div')(
  css({
    fontSize: [ 4, 5, 6 ],
    color: 'primary',
    bg: 'gray',
    '&:hover': {
      color: 'secondary',
    },
  })
)
```

To make the css prop work with `styled-components`, `babel-plugin-styled-components` must be enabled.

## Theme Keys

The following keys in your style object will work the same as Styled System props, pulling values from your `theme` object.

Property  | Theme Key
---|---
`fontFamily` | `fonts`
`fontSize` | `fontSizes`
`fontWeight` | `fontWeights`
`lineHeight` | `lineHeights`
`letterSpacing` | `letterSpacings`
`color` | `colors`
`backgroundColor`, `bg` | `colors`
`margin`, `m` | `space`
`marginTop`, `mt` | `space`
`marginRight`, `mr` | `space`
`marginBottom`, `mb` | `space`
`marginLeft`, `ml` | `space`
`marginX`, `mx` | `space`
`marginY`, `my` | `space`
`padding`, `p` | `space`
`paddingTop`, `pt` | `space`
`paddingRight`, `pr` | `space`
`paddingBottom`, `pb` | `space`
`paddingLeft`, `pl` | `space`
`paddingX`, `px` | `space`
`paddingY`, `py` | `space`
`top` | `space`
`bottom` | `space`
`left` | `space`
`right` | `space`
`border` | `borders`
`borderTop` | `borders`
`borderRight` | `borders`
`borderBottom` | `borders`
`borderLeft` | `borders`
`borderColor` | `colors`
`borderWidth` | `borderWidths`
`borderStyle` | `borderStyles`
`borderRadius` | `radii`
`boxShadow` | `shadows`
`textShadow` | `shadows`
`zIndex` | `zIndices`
`width` | `sizes`
`minWidth` | `sizes`
`maxWidth` | `sizes`
`height` | `sizes`
`minHeight` | `sizes`
`maxHeight` | `sizes`
`size` | `sizes`

## Responsive Arrays

All CSS properties accept arrays as values for responsive styles.

```jsx
<div
  css={css({
    fontSize: [ 4, 5, 6 ],
  })}
/>
```

In this example, `fontSize` accepts an array, picking up values from the `theme.fontSizes` scale, and `borderBottom` is passed through as plain CSS.

```jsx
<div
  css={css({
    // Styled System key
    fontSize: [ 3, 4, 5 ],
    // CSS property
    borderBottom: '2px solid tomato',
  })}
/>
```

MIT License
npm package: @styled-system/edit
Description: **WIP** Debugging tool for live editing Styled System theme objects
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/edit

**WIP** Debugging tool for live editing Styled System theme objects

*Currently only works with Emotion*

```sh
npm i @styled-system/edit
```

```jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <EditProvider>
      {props.children}
      <ThemeControls />
    </EditProvider>
  </ThemeProvider>
```

## Components

- `EditProvider` a stateful theme provider with context for live editing – receives `theme` from parent context
- `ThemeControls` a full, batteries-included theme editing form
- `FieldSet` renders fields for part of a `theme` object
- `Field` renders a form field for a single value from the `theme` object

```jsx
// example using FieldSet
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors' />
      <FieldSet name='fontSizes' />
    </EditProvider>
  </ThemeProvider>
```

```jsx
// example using Field
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors.text' />
      <FieldSet name='colors.background' />
    </EditProvider>
  </ThemeProvider>
```

## `FieldSet`

**Props**

- `name` (string) dot-notation key path for `theme` object
- `type` (string) type prop for child Field components (see below)
- `ignore` (array) array of key names to omit from the form

## `Field`

**Props**

- `name` (string) dot-notation key path for `theme` object
- `type` (string | 'number', 'select', or 'color') type of form field to render
- `options` (array) array of options to render for `select` type fields
- `render` (function) render prop for custom field UI

MIT License
npm package: @styled-system/jsx
Description: Custom JSX pragma for `css` prop with Styled System - built with [Emotion][]
Author: Brent Jackson
Latest version: 5.0.13
Deprecated: This package has been replaced with theme-ui. See https://theme-ui.com for more.


# @styled-system/jsx

Custom JSX pragma for `css` prop with Styled System - built with [Emotion][]

```jsx
/** @jsx jsx */
import jsx from '@styled-system/jsx'

export default props =>
  <div
    {...props}
    css={{
      fontSize: 32,
      // use theme values
      color: 'primary',
      // responsive arrays
      padding: [ 2, 3, 4 ],
      // use shorthands
      mx: 'auto',
    }}
  />
```

- Use Styled System seamlessly with the `css` prop
- No custom `styled` HOC API required
- Mix with *any* CSS property
- Pick up theme values for anything
- Apply any CSS property responsively with array props

## Getting Started

If you're already using JSX syntax, the most explicit way to use Styled System JSX is by adding a custom pragma to the top of any module that uses the pragma.

```js
/** @jsx jsx */
import jsx from '@styled-system/jsx'
```

This is similar to what the Emotion plugin does, so the Emotion plugin should be disabled when using this one instead.

For any module with the custom pragma enabled, use Styled System shortcuts, responsive arrays and theme values directly in the `css` prop.

```jsx
<div
  css={{
    px: 3,
    py: 4,
    mb: 4,
    bg: 'primary'
  }}
/>
```

To use explicit values instead of referencing values from the theme, use a value that will *not* be interpreted as an object key.
For example, use `2px` instead of `2` (which would pick up the `space[2]` value.

```jsx
<div css={{ mb: '2px' }} />
```

## Styled Components

To create reusable styled components, wrap an element like so.

```jsx
/** @jsx jsx */
import jsx from '@styled-system/jsx'

export const Button = ({
  primary,
  ...props
}) =>
  <button
    {...props}
    css={{
      color: 'white',
      bg: primary ? 'primary' : 'secondary',
    }}
  />
```

### Differences from core Styled System

- No `width` fractions
- No need to define custom style functions
- No responsive object syntax (this would get messy with nested styles)

[emotion]: https://emotion.sh

MIT License
npm package: @styled-system/prop-types
Description: Add prop types to components built with Styled System
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/prop-types

Add prop types to components built with Styled System

```sh
npm i styled-system @styled-system/prop-types
```

```js
import styled from 'styled-components'
import { space, color } from 'styled-system'
import propTypes from '@styled-system/prop-types'

const Box = styled('div')(space, color)

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.color,
}
```

## Available Type Categories

* `space`
* `color`
* `layout`
* `typography`
* `flexbox`
* `border`
* `background`
* `position`
* `grid`

See props of each category in [the reference table](https://styled-system.com/table).

## Custom Props

```js
import styled from 'styled-components'
import { space, system } from 'styled-system'
import propTypes, { propType } from '@styled-system/prop-types'

const gridGap = system({
  gap: {
    property: 'gridGap',
    scale: 'space',
    defaultScale: [0, 4, 8, 16, 32, 64, 128, 256, 512]
  }
})

const Stack = styled('div')(
  compose(space, gridGap)
)

Stack.propTypes = {
  ...propTypes.space,
  gap: propType,
}
```
npm package: @styled-system/props
Description: Utilities for using Styled System props
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/props

Utilities for using Styled System props

```sh
npm i @styled-system/props
```

```js
import { pick, omit } from '@styled-system/props'

const attr = omit({
  id: 'keep-this',
  color: 'primary',
})
// { id: 'keep-this' }

const props = pick({
  className: 'hello',
  color: 'secondary',
})
// { color: 'secondary' }
```

MIT License
npm package: @styled-system/should-forward-prop
Description: Utility for filtering Styled System props with Emotion's shouldForwardProp option
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/should-forward-prop

Utility for filtering Styled System props with Emotion's shouldForwardProp option

```sh
npm i @styled-system/should-forward-prop
```

```js
import styled from '@emotion/styled'
import {
  space,
  color,
  typography
} from 'styled-system'
import shouldForwardProp from '@styled-system/should-forward-prop'

const Box = styled('div', { shouldForwardProp })(
  space,
  color,
  typography
)
```

## Custom Props

To exclude other custom props not included in Styled System, use the `createShouldForwardProp` utility.

```js
import styled from '@emotion/styled'
import { space, color } from 'styled-system'
import { createShouldForwardProp, props } from '@styled-system/should-forward-prop'

const shouldForwardProp = createShouldForwardProp([
  ...props,
  'd',
  'x'
])

const Box = styled('div', {
  shouldForwardProp
})(props => ({
  display: props.d,
  fontWeight: props.x ? 'bold' : null,
}),
  space,
  color
)
```

MIT License
npm package: @styled-system/theme-get
Description: The `themeGet` function is an existential getter function that can be used in any style declaration to get a value from your theme, with support for fallback values. This helps prevent errors from throwing when a theme value is missing, which can be helpf
Author: Brent Jackson
Latest version: 5.1.2


# @styled-system/theme-get

The `themeGet` function is an existential getter function
that can be used in any style declaration to get a value
from your theme, with support for fallback values.
This helps prevent errors from throwing when a theme value is missing,
which can be helpful when unit testing styled-components.

```sh
npm i @styled-system/theme-get
```

```js
themeGet(objectPath, fallbackValue)(props)
```

`themeGet` returns a function that accepts props as an argument
(`themeGet(objectPath)(props)`), which when used in a tagged template
literal should look like this:

```js
import styled from 'styled-components'
import { themeGet } from '@styled-system/theme-get'

const Box = styled.div`
  border-radius: ${themeGet('radii.small', '4px')};
`
```

When used with object literal syntax, `themeGet` needs to be in a
function call and have `props` passed to it:

```js
import styled from 'styled-components'
import { themeGet } from '@styled-system/theme-get'

const Box = styled('div')(props => ({
  borderRadius: themeGet('radii.small', '4px')(props),
}))
```
npm package: @styled-system/variant
Description: Read the docs: https://styled-system.com/variants
Author: Brent Jackson
Latest version: 5.1.5


# @styled-system/variant

Read the docs: https://styled-system.com/variants

## Usage

```js
import styled from 'styled-components'
import variant from '@styled-system/variant'

const Button = styled('button')(
  variant({
    variants: {
      primary: {
        color: 'white',
        bg: 'primary',
        ':hover': {
          bg: 'black',
        }
      },
      secondary: {
        color: 'white',
        bg: 'secondary',
        ':hover': {
          bg: 'black',
        }
      },
    }
  })
)

// <Button variant='primary' />
// <Button variant='secondary' />
```

## Options

- `variants`: object of theme-aware variant styles with user-defined shape
- `prop`: (default `variant`) custom prop name for variant
- `scale`: optional theme key for adding variants to the theme object

MIT License