@chakra-ui/styled-system
Advanced tools
@chakra-ui/styled-system - npm Package Compare versions
Comparing version 1.3.1 to 1.4.0
| # Change Log | ||
| ## 1.4.0 | ||
| ### Minor Changes | ||
| - [`ff7c3676`](https://github.com/chakra-ui/chakra-ui/commit/ff7c36764650dc7f01957c417eae1ec8ce356495) | ||
| Thanks [@segunadebayo](https://github.com/segunadebayo)! - Add support for css | ||
| media query and dark class selectors. | ||
| - Users can now define write styles for dark class variant | ||
| ```jsx live=false | ||
| <body className="dark"> | ||
| <Box bg="red.200" _dark={{ bg: "red.300" }}> | ||
| This will be styled based on dark mode class in body | ||
| </Box> | ||
| </body> | ||
| ``` | ||
| - Users can also define write styles for CSS media dark mode | ||
| ```jsx live=false | ||
| <Box bg="red.200" _mediaDark={{ bg: "red.300" }}> | ||
| This will be styled based on System preference | ||
| </Box> | ||
| ``` | ||
| **Note to maintainers** | ||
| > This is an initial effort to move towards using CSS instead of JS for | ||
| > color-mode styles. | ||
| > | ||
| > In Chakra v2, we'll only use JS to detect the initial color mode and rely on | ||
| > `_dark` for changing styles. | ||
| ### Patch Changes | ||
| - [`6830c0e3`](https://github.com/chakra-ui/chakra-ui/commit/6830c0e36959ebd76ce1991dd89d7303ce33b0d0) | ||
| Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Due to Safari not | ||
| support css logical properties for `right`, and `left`, I added polyfill for | ||
| this css logical properties. | ||
| > Affect components: `Modal`, `Drawer` | ||
| - Added a `directionality` helper function to encapsulate all logic for | ||
| ltr-rtl value or style flipping. | ||
| * [`09f028e4`](https://github.com/chakra-ui/chakra-ui/commit/09f028e4f2539d51b1c9ac7f3aec422ee6848fa3) | ||
| [#2985](https://github.com/chakra-ui/chakra-ui/pull/2985) Thanks | ||
| [@TimKolberger](https://github.com/TimKolberger)! - Fixed a bug where rgb | ||
| values in bgGradient did not work correctly | ||
| ## 1.3.1 | ||
@@ -4,0 +55,0 @@ |
@@ -14,3 +14,3 @@ "use strict"; | ||
| return value === "text" ? { | ||
| WebkitTextFillColor: "transparent", | ||
| color: "transparent", | ||
| backgroundClip: "text" | ||
@@ -17,0 +17,0 @@ } : { |
@@ -19,35 +19,31 @@ "use strict"; | ||
| borderTopLeftRadius: _utils.t.radii("borderTopLeftRadius"), | ||
| borderStartStartRadius: { | ||
| property: "&", | ||
| borderStartStartRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: "borderTopLeftRadius", | ||
| rtl: "borderTopRightRadius" | ||
| }) | ||
| }, | ||
| borderEndStartRadius: { | ||
| property: "&", | ||
| } | ||
| }), | ||
| borderEndStartRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: "borderBottomLeftRadius", | ||
| rtl: "borderBottomRightRadius" | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderTopRightRadius: _utils.t.radii("borderTopRightRadius"), | ||
| borderStartEndRadius: { | ||
| property: "&", | ||
| borderStartEndRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: "borderTopRightRadius", | ||
| rtl: "borderTopLeftRadius" | ||
| }) | ||
| }, | ||
| borderEndEndRadius: { | ||
| property: "&", | ||
| } | ||
| }), | ||
| borderEndEndRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: "borderBottomRightRadius", | ||
| rtl: "borderBottomLeftRadius" | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderRight: _utils.t.borders("borderRight"), | ||
@@ -64,18 +60,16 @@ borderInlineEnd: _utils.t.borders("borderInlineEnd"), | ||
| }, | ||
| borderInlineStartRadius: { | ||
| borderInlineStartRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| property: "&", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"], | ||
| rtl: ["borderTopRightRadius", "borderBottomRightRadius"] | ||
| }) | ||
| }, | ||
| borderInlineEndRadius: { | ||
| } | ||
| }), | ||
| borderInlineEndRadius: _utils.t.logical({ | ||
| scale: "radii", | ||
| property: "&", | ||
| transform: (0, _utils.polyfill)({ | ||
| property: { | ||
| ltr: ["borderTopRightRadius", "borderBottomRightRadius"], | ||
| rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"] | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderX: _utils.t.borders(["borderLeft", "borderRight"]), | ||
@@ -82,0 +76,0 @@ borderInline: _utils.t.borders("borderInline"), |
@@ -32,8 +32,10 @@ "use strict"; | ||
| }; | ||
| config.w = config.width; | ||
| config.h = config.height; | ||
| config.minW = config.minWidth; | ||
| config.maxW = config.maxWidth; | ||
| config.minH = config.minHeight; | ||
| config.maxH = config.maxHeight; | ||
| Object.assign(config, { | ||
| w: config.width, | ||
| h: config.height, | ||
| minW: config.minWidth, | ||
| maxW: config.maxWidth, | ||
| minH: config.minHeight, | ||
| maxH: config.maxHeight | ||
| }); | ||
| /** | ||
@@ -40,0 +42,0 @@ * Types for layout related CSS properties |
@@ -8,3 +8,3 @@ "use strict"; | ||
| var _utils = require("../utils"); | ||
| var _directionality = require("../utils/directionality"); | ||
@@ -20,3 +20,3 @@ var floatTransform = function floatTransform(value, _, props) { | ||
| }; | ||
| return (0, _utils.getIsRtl)(props) ? map[value] : value; | ||
| return (0, _directionality.getIsRtl)(props) ? map[value] : value; | ||
| }; | ||
@@ -23,0 +23,0 @@ |
@@ -27,5 +27,19 @@ "use strict"; | ||
| left: _utils.t.spaceT("left"), | ||
| insetInlineStart: _utils.t.spaceT("insetInlineStart"), | ||
| insetInlineStart: _utils.t.logical({ | ||
| scale: "space", | ||
| property: { | ||
| ltr: "left", | ||
| rtl: "right" | ||
| }, | ||
| transform: _utils.positiveOrNegative | ||
| }), | ||
| right: _utils.t.spaceT("right"), | ||
| insetInlineEnd: _utils.t.spaceT("insetInlineEnd") | ||
| insetInlineEnd: _utils.t.logical({ | ||
| scale: "space", | ||
| property: { | ||
| ltr: "right", | ||
| rtl: "left" | ||
| }, | ||
| transform: _utils.positiveOrNegative | ||
| }) | ||
| }; | ||
@@ -32,0 +46,0 @@ Object.assign(config, { |
@@ -278,3 +278,16 @@ "use strict"; | ||
| */ | ||
| _rtl: "[dir=rtl] &" | ||
| _rtl: "[dir=rtl] &", | ||
| /** | ||
| * Styles for CSS Selector `@media (prefers-color-scheme: dark)` | ||
| * used when the user has requested the system | ||
| * use a light or dark color theme. | ||
| */ | ||
| _mediaDark: "@media (prefers-color-scheme: dark)", | ||
| /** | ||
| * Styles for when `.dark` is applied to any parent of | ||
| * this component or element. | ||
| */ | ||
| _dark: ".dark &, [data-theme=dark] &" | ||
| }; | ||
@@ -281,0 +294,0 @@ exports.pseudoSelectors = pseudoSelectors; |
@@ -6,16 +6,18 @@ "use strict"; | ||
| makeConfig: true, | ||
| t: true, | ||
| getIsRtl: true, | ||
| polyfill: true, | ||
| handleQuartetValues: true, | ||
| isRtl: true | ||
| t: true | ||
| }; | ||
| exports.makeConfig = makeConfig; | ||
| exports.getIsRtl = getIsRtl; | ||
| exports.polyfill = polyfill; | ||
| exports.handleQuartetValues = handleQuartetValues; | ||
| exports.isRtl = exports.t = void 0; | ||
| exports.t = void 0; | ||
| var _utils = require("@chakra-ui/utils"); | ||
| var _logicalProp = require("./logical-prop"); | ||
| Object.keys(_logicalProp).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
| if (key in exports && exports[key] === _logicalProp[key]) return; | ||
| exports[key] = _logicalProp[key]; | ||
| }); | ||
| var _positiveOrNegative = require("./positive-or-negative"); | ||
@@ -80,86 +82,6 @@ | ||
| sizesT: makeConfig("sizes", fractionalValue), | ||
| shadows: makeConfig("shadows") | ||
| shadows: makeConfig("shadows"), | ||
| logical: _logicalProp.logical | ||
| }; | ||
| exports.t = t; | ||
| function getIsRtl(props) { | ||
| var theme = "theme" in props ? props.theme : props; | ||
| return theme.direction === "rtl"; | ||
| } | ||
| /** | ||
| * Polyfill for border-{start|end}-radius properties. | ||
| * We'll remove this once css logical properties is supported in major browsers | ||
| */ | ||
| function polyfill(map) { | ||
| return function (value, scale, props) { | ||
| var isRtl = getIsRtl(props); | ||
| var raw = (0, _utils.getWithDefault)(value, scale); | ||
| var result = {}; | ||
| if (Array.isArray(map.ltr)) { | ||
| map.ltr.forEach(function (_, i) { | ||
| result[isRtl ? map.rtl[i] : map.ltr[i]] = raw; | ||
| }); | ||
| } else { | ||
| result[isRtl ? map.rtl : map.ltr] = raw; | ||
| } | ||
| return result; | ||
| }; | ||
| } | ||
| /** | ||
| * Credits to https://github.com/kentcdodds/rtl-css-js/blob/aaf3e9885026de11b01f3b73258f25e21b7432f7/src/internal/utils.js | ||
| * @todo use this for margin, padding, border-radius value transformations in rtl | ||
| */ | ||
| function getValuesAsList(value) { | ||
| return value.replace(/ +/g, " ").split(" ").map(function (i) { | ||
| return i.trim(); | ||
| }).filter(Boolean).reduce(function (_ref, item) { | ||
| var list = _ref.list, | ||
| state = _ref.state; | ||
| var openParansCount = (item.match(/\(/g) || []).length; | ||
| var closedParansCount = (item.match(/\)/g) || []).length; | ||
| if (state.parensDepth > 0) { | ||
| list[list.length - 1] = list[list.length - 1] + " " + item; | ||
| } else { | ||
| list.push(item); | ||
| } | ||
| state.parensDepth += openParansCount - closedParansCount; | ||
| return { | ||
| list: list, | ||
| state: state | ||
| }; | ||
| }, { | ||
| list: [], | ||
| state: { | ||
| parensDepth: 0 | ||
| } | ||
| }).list; | ||
| } | ||
| function handleQuartetValues(value) { | ||
| var splitValues = getValuesAsList(value); | ||
| if (splitValues.length <= 3 || splitValues.length > 4) { | ||
| return value; | ||
| } | ||
| var top = splitValues[0], | ||
| right = splitValues[1], | ||
| bottom = splitValues[2], | ||
| left = splitValues[3]; | ||
| return [top, left, bottom, right].join(" "); | ||
| } | ||
| var isRtl = function isRtl(theme) { | ||
| return theme.direction === "rtl"; | ||
| }; | ||
| exports.isRtl = isRtl; | ||
| //# sourceMappingURL=index.js.map |
@@ -51,3 +51,3 @@ "use strict"; | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*?))\)/g, { | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, { | ||
| type: 1, | ||
@@ -54,0 +54,0 @@ values: 2 |
@@ -7,3 +7,3 @@ import { createParser, system } from "../core"; | ||
| return value === "text" ? { | ||
| WebkitTextFillColor: "transparent", | ||
| color: "transparent", | ||
| backgroundClip: "text" | ||
@@ -10,0 +10,0 @@ } : { |
| import { createParser, system } from "../core"; | ||
| import { polyfill, t } from "../utils"; | ||
| import { t } from "../utils"; | ||
| var config = { | ||
@@ -12,35 +12,31 @@ border: t.borders("border"), | ||
| borderTopLeftRadius: t.radii("borderTopLeftRadius"), | ||
| borderStartStartRadius: { | ||
| property: "&", | ||
| borderStartStartRadius: t.logical({ | ||
| scale: "radii", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: "borderTopLeftRadius", | ||
| rtl: "borderTopRightRadius" | ||
| }) | ||
| }, | ||
| borderEndStartRadius: { | ||
| property: "&", | ||
| } | ||
| }), | ||
| borderEndStartRadius: t.logical({ | ||
| scale: "radii", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: "borderBottomLeftRadius", | ||
| rtl: "borderBottomRightRadius" | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderTopRightRadius: t.radii("borderTopRightRadius"), | ||
| borderStartEndRadius: { | ||
| property: "&", | ||
| borderStartEndRadius: t.logical({ | ||
| scale: "radii", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: "borderTopRightRadius", | ||
| rtl: "borderTopLeftRadius" | ||
| }) | ||
| }, | ||
| borderEndEndRadius: { | ||
| property: "&", | ||
| } | ||
| }), | ||
| borderEndEndRadius: t.logical({ | ||
| scale: "radii", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: "borderBottomRightRadius", | ||
| rtl: "borderBottomLeftRadius" | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderRight: t.borders("borderRight"), | ||
@@ -57,18 +53,16 @@ borderInlineEnd: t.borders("borderInlineEnd"), | ||
| }, | ||
| borderInlineStartRadius: { | ||
| borderInlineStartRadius: t.logical({ | ||
| scale: "radii", | ||
| property: "&", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"], | ||
| rtl: ["borderTopRightRadius", "borderBottomRightRadius"] | ||
| }) | ||
| }, | ||
| borderInlineEndRadius: { | ||
| } | ||
| }), | ||
| borderInlineEndRadius: t.logical({ | ||
| scale: "radii", | ||
| property: "&", | ||
| transform: polyfill({ | ||
| property: { | ||
| ltr: ["borderTopRightRadius", "borderBottomRightRadius"], | ||
| rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"] | ||
| }) | ||
| }, | ||
| } | ||
| }), | ||
| borderX: t.borders(["borderLeft", "borderRight"]), | ||
@@ -75,0 +69,0 @@ borderInline: t.borders("borderInline"), |
@@ -25,8 +25,10 @@ import { createParser, system } from "../core"; | ||
| }; | ||
| config.w = config.width; | ||
| config.h = config.height; | ||
| config.minW = config.minWidth; | ||
| config.maxW = config.maxWidth; | ||
| config.minH = config.minHeight; | ||
| config.maxH = config.maxHeight; | ||
| Object.assign(config, { | ||
| w: config.width, | ||
| h: config.height, | ||
| minW: config.minWidth, | ||
| maxW: config.maxWidth, | ||
| minH: config.minHeight, | ||
| maxH: config.maxHeight | ||
| }); | ||
| /** | ||
@@ -33,0 +35,0 @@ * Types for layout related CSS properties |
| import { createParser, system } from "../core"; | ||
| import { getIsRtl } from "../utils"; | ||
| import { getIsRtl } from "../utils/directionality"; | ||
@@ -4,0 +4,0 @@ var floatTransform = function floatTransform(value, _, props) { |
| import { createParser, system } from "../core"; | ||
| import { t } from "../utils"; | ||
| import { positiveOrNegative, t } from "../utils"; | ||
| var config = { | ||
@@ -20,5 +20,19 @@ position: true, | ||
| left: t.spaceT("left"), | ||
| insetInlineStart: t.spaceT("insetInlineStart"), | ||
| insetInlineStart: t.logical({ | ||
| scale: "space", | ||
| property: { | ||
| ltr: "left", | ||
| rtl: "right" | ||
| }, | ||
| transform: positiveOrNegative | ||
| }), | ||
| right: t.spaceT("right"), | ||
| insetInlineEnd: t.spaceT("insetInlineEnd") | ||
| insetInlineEnd: t.logical({ | ||
| scale: "space", | ||
| property: { | ||
| ltr: "right", | ||
| rtl: "left" | ||
| }, | ||
| transform: positiveOrNegative | ||
| }) | ||
| }; | ||
@@ -25,0 +39,0 @@ Object.assign(config, { |
@@ -250,5 +250,18 @@ import { objectKeys } from "@chakra-ui/utils"; | ||
| */ | ||
| _rtl: "[dir=rtl] &" | ||
| _rtl: "[dir=rtl] &", | ||
| /** | ||
| * Styles for CSS Selector `@media (prefers-color-scheme: dark)` | ||
| * used when the user has requested the system | ||
| * use a light or dark color theme. | ||
| */ | ||
| _mediaDark: "@media (prefers-color-scheme: dark)", | ||
| /** | ||
| * Styles for when `.dark` is applied to any parent of | ||
| * this component or element. | ||
| */ | ||
| _dark: ".dark &, [data-theme=dark] &" | ||
| }; | ||
| export var pseudoPropNames = objectKeys(pseudoSelectors); | ||
| //# sourceMappingURL=pseudo.selector.js.map |
@@ -1,2 +0,3 @@ | ||
| import { get, getWithDefault, isNumber } from "@chakra-ui/utils"; | ||
| import { get, isNumber } from "@chakra-ui/utils"; | ||
| import { logical } from "./logical-prop"; | ||
| import { positiveOrNegative } from "./positive-or-negative"; | ||
@@ -6,2 +7,3 @@ export * from "./positive-or-negative"; | ||
| export * from "./types"; | ||
| export * from "./logical-prop"; | ||
| export function makeConfig(scale, transform) { | ||
@@ -37,74 +39,5 @@ return prop => { | ||
| sizesT: makeConfig("sizes", fractionalValue), | ||
| shadows: makeConfig("shadows") | ||
| shadows: makeConfig("shadows"), | ||
| logical | ||
| }; | ||
| export function getIsRtl(props) { | ||
| var theme = "theme" in props ? props.theme : props; | ||
| return theme.direction === "rtl"; | ||
| } | ||
| /** | ||
| * Polyfill for border-{start|end}-radius properties. | ||
| * We'll remove this once css logical properties is supported in major browsers | ||
| */ | ||
| export function polyfill(map) { | ||
| return (value, scale, props) => { | ||
| var isRtl = getIsRtl(props); | ||
| var raw = getWithDefault(value, scale); | ||
| var result = {}; | ||
| if (Array.isArray(map.ltr)) { | ||
| map.ltr.forEach((_, i) => { | ||
| result[isRtl ? map.rtl[i] : map.ltr[i]] = raw; | ||
| }); | ||
| } else { | ||
| result[isRtl ? map.rtl : map.ltr] = raw; | ||
| } | ||
| return result; | ||
| }; | ||
| } | ||
| /** | ||
| * Credits to https://github.com/kentcdodds/rtl-css-js/blob/aaf3e9885026de11b01f3b73258f25e21b7432f7/src/internal/utils.js | ||
| * @todo use this for margin, padding, border-radius value transformations in rtl | ||
| */ | ||
| function getValuesAsList(value) { | ||
| return value.replace(/ +/g, " ").split(" ").map(i => i.trim()).filter(Boolean).reduce((_ref, item) => { | ||
| var { | ||
| list, | ||
| state | ||
| } = _ref; | ||
| var openParansCount = (item.match(/\(/g) || []).length; | ||
| var closedParansCount = (item.match(/\)/g) || []).length; | ||
| if (state.parensDepth > 0) { | ||
| list[list.length - 1] = list[list.length - 1] + " " + item; | ||
| } else { | ||
| list.push(item); | ||
| } | ||
| state.parensDepth += openParansCount - closedParansCount; | ||
| return { | ||
| list, | ||
| state | ||
| }; | ||
| }, { | ||
| list: [], | ||
| state: { | ||
| parensDepth: 0 | ||
| } | ||
| }).list; | ||
| } | ||
| export function handleQuartetValues(value) { | ||
| var splitValues = getValuesAsList(value); | ||
| if (splitValues.length <= 3 || splitValues.length > 4) { | ||
| return value; | ||
| } | ||
| var [top, right, bottom, left] = splitValues; | ||
| return [top, left, bottom, right].join(" "); | ||
| } | ||
| export var isRtl = theme => theme.direction === "rtl"; | ||
| //# sourceMappingURL=index.js.map |
@@ -42,3 +42,3 @@ function _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (typeof args[args.length - 1] !== "object") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); } | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*?))\)/g, { | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, { | ||
| type: 1, | ||
@@ -45,0 +45,0 @@ values: 2 |
| import * as CSS from "csstype"; | ||
| import { PropConfig } from "../core"; | ||
| import { Length, ResponsiveValue } from "../utils"; | ||
| import { Length, ResponsiveValue } from "../utils/types"; | ||
| export interface OtherProps { | ||
@@ -5,0 +5,0 @@ /** |
@@ -188,4 +188,15 @@ export declare const pseudoSelectors: { | ||
| _rtl: string; | ||
| /** | ||
| * Styles for CSS Selector `@media (prefers-color-scheme: dark)` | ||
| * used when the user has requested the system | ||
| * use a light or dark color theme. | ||
| */ | ||
| _mediaDark: string; | ||
| /** | ||
| * Styles for when `.dark` is applied to any parent of | ||
| * this component or element. | ||
| */ | ||
| _dark: string; | ||
| }; | ||
| export declare type Pseudos = typeof pseudoSelectors; | ||
| export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl")[]; | ||
| export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark")[]; |
| { | ||
| "name": "@chakra-ui/styled-system", | ||
| "version": "1.3.1", | ||
| "version": "1.4.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
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 too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.8%
685340
- Number of package files
- increased by5.05%
208
- Lines of code
- increased by4.9%
5571