Socket
Socket
Sign inDemoInstall

@chakra-ui/styled-system

Package Overview
Dependencies
Maintainers
4
Versions
474
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/styled-system - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

24

CHANGELOG.md
# Change Log
## 1.5.0
### Minor Changes
- [`d9ec9f49`](https://github.com/chakra-ui/chakra-ui/commit/d9ec9f496bfe2f81ffb84adbed099581d5f6843e)
[#3049](https://github.com/chakra-ui/chakra-ui/pull/3049) Thanks
[@segunadebayo](https://github.com/segunadebayo)! - Move `srOnly` prop to
styled system props. This will deprecate the need for the visually hidden
package. Less is more!
```jsx
// If `true`, hide an element visually without hiding it from screen readers.
<Box srOnly>Visually hidden</Box>
// If `focusable`, the sr-only styles will be undone, making the element visible to sighted users as well as screen readers.
<Box srOnly _active={{ srOnly: "focusable" }}>Visually hidden but shown on focus</Box>
```
* [`26ca4cc5`](https://github.com/chakra-ui/chakra-ui/commit/26ca4cc53b8cc0ca696f2130f832965f7dc0ee53)
Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Add polyfill for
`inset` style prop as the CSS `inset` doesn't work in Safari
- Add missing style props for grid and flex layouts: `gridTemplate`,
`gridRowStart`, `gridRowEnd`, `flexFlow`, `clipPath`
## 1.4.1

@@ -4,0 +28,0 @@

8

dist/cjs/config/flexbox.js

@@ -18,2 +18,3 @@ "use strict";

flex: true,
flexFlow: true,
flexGrow: true,

@@ -25,8 +26,7 @@ flexShrink: true,

order: true,
placeItems: true,
placeContent: true,
placeSelf: true,
flexDir: _utils.t.prop("flexDirection")
};
/**
* Types for flexbox related CSS properties
*/
var flexbox = (0, _core.system)(config);

@@ -33,0 +33,0 @@ exports.flexbox = flexbox;

@@ -20,13 +20,11 @@ "use strict";

gridColumnEnd: true,
gridRowStart: true,
gridRowEnd: true,
gridAutoRows: true,
gridTemplate: true,
gridTemplateColumns: true,
gridTemplateRows: true,
gridTemplateAreas: true,
gridArea: true,
placeItems: true
gridArea: true
};
/**
* Types for grid related CSS properties
*/
var grid = (0, _core.system)(config);

@@ -33,0 +31,0 @@ exports.grid = grid;

@@ -22,2 +22,23 @@ "use strict";

var srOnly = {
border: "0px",
clip: "rect(0, 0, 0, 0)",
width: "1px",
height: "1px",
margin: "-1px",
padding: "0px",
overflow: "hidden",
whiteSpace: "nowrap",
position: "absolute"
};
var srFocusable = {
position: "static",
width: "auto",
height: "auto",
clip: "auto",
padding: "0",
margin: "0",
overflow: "visible",
whiteSpace: "normal"
};
var config = {

@@ -38,3 +59,12 @@ animation: true,

willChange: true,
filter: true
filter: true,
clipPath: true,
srOnly: {
property: "&",
transform: function transform(value) {
if (value === true) return srOnly;
if (value === "focusable") return srFocusable;
return {};
}
}
};

@@ -41,0 +71,0 @@ var others = (0, _core.system)(config);

@@ -17,3 +17,3 @@ "use strict";

},
inset: _utils.t.spaceT("inset"),
inset: _utils.t.spaceT(["top", "right", "bottom", "left"]),
insetX: _utils.t.spaceT(["left", "right"]),

@@ -20,0 +20,0 @@ insetInline: _utils.t.spaceT("insetInline"),

"use strict";
exports.__esModule = true;
exports.css = void 0;
exports.css = exports.processResponsive = void 0;

@@ -69,3 +69,3 @@ var _utils = require("@chakra-ui/utils");

var responsive = function responsive(styles) {
var processResponsive = function processResponsive(styles) {
return function (theme) {

@@ -116,2 +116,4 @@ var computedStyles = {};

exports.processResponsive = processResponsive;
var css = function css(args) {

@@ -130,3 +132,3 @@ if (args === void 0) {

var styleObject = (0, _utils.runIfFn)(args, theme);
var styles = responsive(styleObject)(theme);
var styles = processResponsive(styleObject)(theme);

@@ -133,0 +135,0 @@ for (var k in styles) {

@@ -11,2 +11,3 @@ import { createParser, system } from "../core";

flex: true,
flexFlow: true,
flexGrow: true,

@@ -18,10 +19,9 @@ flexShrink: true,

order: true,
placeItems: true,
placeContent: true,
placeSelf: true,
flexDir: t.prop("flexDirection")
};
/**
* Types for flexbox related CSS properties
*/
export var flexbox = system(config);
export var flexboxParser = createParser(config);
//# sourceMappingURL=flexbox.js.map

@@ -13,15 +13,13 @@ import { createParser, system } from "../core";

gridColumnEnd: true,
gridRowStart: true,
gridRowEnd: true,
gridAutoRows: true,
gridTemplate: true,
gridTemplateColumns: true,
gridTemplateRows: true,
gridTemplateAreas: true,
gridArea: true,
placeItems: true
gridArea: true
};
/**
* Types for grid related CSS properties
*/
export var grid = system(config);
export var gridParser = createParser(config);
//# sourceMappingURL=grid.js.map

@@ -16,2 +16,23 @@ import { createParser, system } from "../core";

var srOnly = {
border: "0px",
clip: "rect(0, 0, 0, 0)",
width: "1px",
height: "1px",
margin: "-1px",
padding: "0px",
overflow: "hidden",
whiteSpace: "nowrap",
position: "absolute"
};
var srFocusable = {
position: "static",
width: "auto",
height: "auto",
clip: "auto",
padding: "0",
margin: "0",
overflow: "visible",
whiteSpace: "normal"
};
var config = {

@@ -32,3 +53,14 @@ animation: true,

willChange: true,
filter: true
filter: true,
clipPath: true,
srOnly: {
property: "&",
transform(value) {
if (value === true) return srOnly;
if (value === "focusable") return srFocusable;
return {};
}
}
};

@@ -35,0 +67,0 @@ export var others = system(config);

@@ -10,3 +10,3 @@ import { createParser, system } from "../core";

},
inset: t.spaceT("inset"),
inset: t.spaceT(["top", "right", "bottom", "left"]),
insetX: t.spaceT(["left", "right"]),

@@ -13,0 +13,0 @@ insetInline: t.spaceT("insetInline"),

@@ -52,3 +52,3 @@ import { isArray, isCustomBreakpoint, isObject, isResponsiveObjectLike, memoizedGet as get, mergeWith, objectToArrayNotation, runIfFn } from "@chakra-ui/utils";

var responsive = styles => theme => {
export var processResponsive = styles => theme => {
var computedStyles = {};

@@ -96,3 +96,2 @@ var {

};
export var css = function css(args) {

@@ -111,3 +110,3 @@ if (args === void 0) {

var styleObject = runIfFn(args, theme);
var styles = responsive(styleObject)(theme);
var styles = processResponsive(styleObject)(theme);

@@ -114,0 +113,0 @@ for (var k in styles) {

import * as CSS from "csstype";
import { ResponsiveValue, Length } from "../utils";
/**
* Types for flexbox related CSS properties
*/
export interface FlexboxProps {
/**
* The CSS `align-items` property
* The CSS `align-items` property.
*
* It defines the `align-self` value on all direct children as a group.
*
* - In Flexbox, it controls the alignment of items on the Cross Axis.
* - In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-items)
*/
alignItems?: ResponsiveValue<CSS.Property.AlignItems>;
/**
* The CSS `align-content` property
* The CSS `align-content` property.
*
* It defines the distribution of space between and around
* content items along a flexbox's cross-axis or a grid's block axis.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-content)
*/
alignContent?: ResponsiveValue<CSS.Property.AlignContent>;
/**
* The CSS `justify-items` property
* The CSS `justify-items` property.
*
* It defines the default `justify-self` for all items of the box,
* giving them all a default way of justifying each box
* along the appropriate axis.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-items)
*/
justifyItems?: ResponsiveValue<CSS.Property.JustifyItems>;
/**
* The CSS `justify-content` property
* The CSS `justify-content` property.
*
* It defines how the browser distributes space between and around content items
* along the main-axis of a flex container, and the inline axis of a grid container.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/justify-content)
*/
justifyContent?: ResponsiveValue<CSS.Property.JustifyContent>;
/**
* The CSS `flex-wrap` property
* The CSS `flex-wrap` property.
*
* It defines whether flex items are forced onto one line or
* can wrap onto multiple lines. If wrapping is allowed,
* it sets the direction that lines are stacked.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-wrap)
*/
flexWrap?: ResponsiveValue<CSS.Property.FlexWrap>;
/**
* The CSS `flex-basis` property
* The CSS `flex-flow` property.
*
* It is a shorthand property for `flex-direction` and `flex-wrap`.
* It specifies the direction of a flex container, as well as its wrapping behavior.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
*/
flexFlow?: ResponsiveValue<CSS.Property.FlexFlow>;
/**
* The CSS `flex-basis` property.
*
* It defines the initial main size of a flex item.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-basis)
*/
flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<Length>>;
/**
* The CSS `flex-direction` property
* The CSS `flex-direction` property.
*
* It defines how flex items are placed in the flex container
* defining the main axis and the direction (normal or reversed).
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
*/
flexDirection?: ResponsiveValue<CSS.Property.FlexDirection>;
/**
* The CSS `flex-direction` property
* The CSS `flex-direction` property.
*
* It defines how flex items are placed in the flex container
* defining the main axis and the direction (normal or reversed).
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-direction)
*/
flexDir?: ResponsiveValue<CSS.Property.FlexDirection>;
/**
* The CSS `flex` property
* The CSS `flex` property.
*
* It defines how a flex item will grow or shrink
* to fit the space available in its flex container.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex)
*/
flex?: ResponsiveValue<CSS.Property.Flex<Length>>;
/**
* The CSS `justify-self` property
* The CSS `justify-self` property.
*
* It defines the way a box is justified inside its
* alignment container along the appropriate axis.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-flow)
*/
justifySelf?: ResponsiveValue<CSS.Property.JustifySelf>;
/**
* The CSS `align-self` property
* The CSS `align-self` property.
*
* It works like `align-items`, but applies only to a
* single flexbox item, instead of all of them.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/align-self)
*/
alignSelf?: ResponsiveValue<CSS.Property.AlignSelf>;
/**
* The CSS `order` property
* The CSS `order` property.
*
* It defines the order to lay out an item in a flex or grid container.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/order)
*/
order?: ResponsiveValue<CSS.Property.Order>;
/**
* The CSS `flex-grow` property
* The CSS `flex-grow` property.
*
* It defines how much a flexbox item should grow
* if there's space available.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-grow)
*/
flexGrow?: ResponsiveValue<CSS.Property.FlexGrow>;
/**
* The CSS `flex-shrink` property
* The CSS `flex-shrink` property.
*
* It defines how much a flexbox item should shrink
* if there's not enough space available.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/flex-shrink)
*/
flexShrink?: ResponsiveValue<CSS.Property.FlexShrink>;
/**
* The CSS `place-items` property.
*
* It allows you to align items along both the block and
* inline directions at once (i.e. the align-items and justify-items properties)
* in a relevant layout system such as `Grid` or `Flex`.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-items)
*/
placeItems?: ResponsiveValue<CSS.Property.PlaceItems>;
/**
* The CSS `place-content` property.
*
* It allows you to align content along both the block and
* inline directions at once (i.e. the align-content and justify-content properties)
* in a relevant layout system such as Grid or Flexbox.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-content)
*/
placeContent?: ResponsiveValue<CSS.Property.PlaceContent>;
/**
* The CSS `place-self` property.
*
* It allows you to align an individual item in both the block and
* inline directions at once (i.e. the align-self and justify-self properties)
* in a relevant layout system such as Grid or Flexbox.
*
* @see [Mozilla Docs](https://developer.mozilla.org/docs/Web/CSS/place-self)
*/
placeSelf?: ResponsiveValue<CSS.Property.PlaceSelf>;
}

@@ -64,0 +172,0 @@ export declare const flexbox: import("../core").Parser;

import * as CSS from "csstype";
import { Length, ResponsiveValue } from "../utils";
/**
* Types for grid related CSS properties
*/
export interface GridProps {
/**
* The CSS `grid-gap` property
* The CSS `grid-gap` property.
*
* It defines the gaps (gutters) between rows and columns
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap)
*/
gridGap?: ResponsiveValue<CSS.Property.GridGap<Length>>;
/**
* The CSS `grid-column-gap` property
* The CSS `grid-column-gap` property.
*
* It defines the size of the gap (gutter) between an element's columns.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
*/
gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<Length>>;
/**
* The CSS `grid-row-gap` property
* The CSS `grid-row-gap` property.
*
* It defines the size of the gap (gutter) between an element's grid rows.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
*/
gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<Length>>;
/**
* The CSS `grid-column` property
* The CSS `grid-column` property.
*
* It specifies a grid item’s start position within the grid column by
* contributing a line, a span, or nothing (automatic) to its grid placement
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start)
*/
gridColumnStart?: ResponsiveValue<CSS.Property.GridColumnStart>;
/**
* The CSS `grid-row-start` property
*
* It specifies a grid item’s start position within the grid row by
* contributing a line, a span, or nothing (automatic) to its grid placement,
* thereby specifying the `inline-start` edge of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start)
*/
gridRowStart?: ResponsiveValue<CSS.Property.GridRowStart>;
/**
* The CSS `grid-row-end` property
*
* It specifies a grid item’s end position within the grid row by
* contributing a line, a span, or nothing (automatic) to its grid placement,
* thereby specifying the `inline-end` edge of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)
*/
gridRowEnd?: ResponsiveValue<CSS.Property.GridRowEnd>;
/**
* The CSS `grid-template` property.
*
* It is a shorthand property for defining grid columns, rows, and areas.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)
*/
gridTemplate?: ResponsiveValue<CSS.Property.GridTemplate>;
/**
* The CSS `grid-column` property
*
* It specifies a grid item’s end position within the grid column by
* contributing a line, a span, or nothing (automatic) to its grid placement,
* thereby specifying the block-end edge of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)
*/
gridColumnEnd?: ResponsiveValue<CSS.Property.GridColumnEnd>;
/**
* The CSS `grid-column` property
* The CSS `grid-column` property.
*
* It specifies a grid item's size and location within a grid column
* by contributing a line, a span, or nothing (automatic) to its grid placement,
* thereby specifying the `inline-start` and `inline-end` edge of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
*/

@@ -33,2 +87,8 @@ gridColumn?: ResponsiveValue<CSS.Property.GridColumn>;

* The CSS `grid-row` property
*
* It specifies a grid item’s size and location within the grid row
* by contributing a line, a span, or nothing (automatic) to its grid placement,
* thereby specifying the `inline-start` and `inline-end` edge of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
*/

@@ -38,10 +98,23 @@ gridRow?: ResponsiveValue<CSS.Property.GridRow>;

* The CSS `grid-auto-flow` property
*
* It controls how the auto-placement algorithm works,
* specifying exactly how auto-placed items get flowed into the grid.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)
*/
gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow>;
/**
* The CSS `grid-auto-columns` property
* The CSS `grid-auto-columns` property.
*
* It specifies the size of an implicitly-created grid column track or pattern of tracks.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)
*/
gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<Length>>;
/**
* The CSS `grid-auto-rows` property
* The CSS `grid-auto-rows` property.
*
* It specifies the size of an implicitly-created grid row track or pattern of tracks.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)
*/

@@ -51,20 +124,32 @@ gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<Length>>;

* The CSS `grid-template-columns` property
*
* It defines the line names and track sizing functions of the grid columns.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
*/
gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<Length>>;
/**
* The CSS `grid-template-rows` property
* The CSS `grid-template-rows` property.
*
* It defines the line names and track sizing functions of the grid rows.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
*/
gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<Length>>;
/**
* The CSS `grid-template-areas` property
* The CSS `grid-template-areas` property.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
*/
gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas>;
/**
* The CSS `grid-areas` property
* The CSS `grid-areas` property.
*
* It specifies a grid item’s size and location within a grid by
* contributing a line, a span, or nothing (automatic)
* to its grid placement, thereby specifying the edges of its grid area.
*
* @see [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
*/
gridArea?: ResponsiveValue<CSS.Property.GridArea>;
/**
* The CSS `place-items` property
*/
placeItems?: ResponsiveValue<CSS.Property.PlaceItems>;
}

@@ -71,0 +156,0 @@ export declare const grid: import("../core").Parser;

@@ -53,2 +53,15 @@ import * as CSS from "csstype";

filter?: ResponsiveValue<CSS.Property.Filter>;
/**
* If `true`, hide an element visually without hiding it from screen readers.
*
* If `focusable`, the sr-only styles will be undone, making the element visible
* to sighted users as well as screen readers.
*/
srOnly?: true | "focusable";
/**
* The CSS `clip-path` property.
*
* It creates a clipping region that sets what part of an element should be shown.
*/
clipPath?: ResponsiveValue<CSS.Property.ClipPath>;
}

@@ -55,0 +68,0 @@ export declare const others: import("../core").Parser;

import { Dict } from "@chakra-ui/utils";
import { CSSObject, StyleObjectOrFn } from "./css.types";
export declare const processResponsive: (styles: any) => (theme: Dict) => any;
declare type PropsOrTheme = Dict | {

@@ -4,0 +5,0 @@ theme: Dict;

{
"name": "@chakra-ui/styled-system",
"version": "1.4.1",
"version": "1.5.0",
"description": "Style function for css-in-js building component libraries",

@@ -5,0 +5,0 @@ "keywords": [

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc