styles

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

658,395

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

Returns a number whose value is limited to the given range.

React

2 contributors

Install styles as a package?

Copied

npm i @bit/mui-org.material-ui.styles

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

No preview available

modifieddraft

Returns a number whose value is limited to the given range.

Converts a color from CSS hex format to CSS rgb format.

Converts a color from CSS rgb format to CSS hex format.

Converts a color from hsl format to rgb format.

Returns an object with the type and values of a color.

Note: Does not support rgb % values.

Converts a color object with type and values to a string.

Calculates the contrast ratio between two colors.

Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

The relative brightness of any point in a color space, normalized to 0 for darkest black and 1 for lightest white.

Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

Darken or lighten a color, depending on its luminance. Light colors are darkened, dark colors are lightened.

Set the absolute transparency of a color. Any existing alpha values are overwritten.

Darkens a color.

Lightens a color.

generate a responsive version of a given CSS property

Example

responsiveProperty({
  cssProperty: 'fontSize',
  min: 15,
  max: 20,
  unit: 'px',
  breakpoints: [300, 600],
})

// this returns

{
  fontSize: '15px',
  '@media (min-width:300px)': {
    fontSize: '17.5px',
  },
  '@media (min-width:600px)': {
    fontSize: '20px',
  },
}

makeStyles where the passed styles do not depend on props

makeStyles where the passed styles do depend on props

Adapter for StyleRules from @material-ui/styles for backwards compatibility. Order of generic arguments is just reversed.

TODO: to normalize in v5

Deprecated. Will be removed in v5. Refs are now automatically forwarded to the inner component.