2.12.0 • Published 8 months ago

@chakra-ui/styled-system v2.12.0

Weekly downloads
66,184
License
MIT
Repository
github
Last release
8 months ago

@chakra-ui/styled-system

The framework's agnostic styling engine for Chakra UI. It's used in the system package.

Installation

npm i @chakra-ui/styled-system

# or

yarn add @chakra-ui/styled-system

CSS Logical Properties

Chakra UI provides pretty good support for bidirectional (bidi) CSS properties. For our shorthand props, we provide a *Bidi suffix to manage the rtl/ltr switching.

import { css } from "@chakra-ui/styled-system"

const theme = {
  direction: "rtl", // ltr | rtl
}

const styles = css({
  mt: "40px",
  // bi-directional `margin-right`
  // `margin-right` in ltr, `margin-left` in rtl
  mrBidi: "30px",
})(theme)

References

const cssLogicalValueMap = {
  float: { left: "inline-start", right: "inline-end" },
  clear: { left: "inline-start", right: "inline-end" },
  resize: { horizontal: "block", vertical: "inline" },
  textAlign: { left: "start", right: "end" },
  captionSize: { top: "block-start", bottom: "block-end" },
}

const cssLogicalPropertiesMap = {
  // Margin and Padding Logical Properties
  "marginTop|mt": "marginBlockStart",
  "marginLeft|ml": "marginInlineStart",
  "marginRight|mr": "marginInlineEnd",
  "marginBottom|mb": "marginBlockEnd",
  "paddingTop|pt": "paddingBlockStart",
  "paddingBottom|pb": "paddingBlockEnd",
  "paddingLeft|pl": "paddingInlineStart",
  "paddingRight|pr": "paddingInlineEnd",
  "marginY|my": "marginBlock",
  "marginX|mx": "marginInline",
  "paddingY|py": "paddingBlock",
  "paddingX|px": "paddingInline",

  // Floating and positioning logical properties
  top: "insetBlockStart",
  bottom: "insetBlockEnd",
  left: "insetInlineStart",
  right: "insetInlineEnd",

  // Sizing Logical properties
  "width|w": "inlineSize",
  "minW|minWidth": "minInlineSize",
  "maxW|maxWidth": "maxInlineSize",
  "height|h": "blockSize",
  "minH|minHeight": "minBlockSize",
  "maxH|maxHeight": "maxBlockSize",

  // Border logical properties
  borderY: "borderBlock",
  borderX: "borderInline",

  borderTop: "borderBlockStart",
  borderTopWidth: "borderBlockStartWidth",
  borderTopStyle: "borderBlockStartStyle",
  borderTopColor: "borderBlockStartColor",

  borderBottom: "borderBlockEnd",
  borderBottomWidth: "borderBlockEndWidth",
  borderBottomStyle: "borderBlockEndStyle",
  borderBottomColor: "borderBlockEndColor",

  borderLeft: "borderInlineStart",
  borderLeftWidth: "borderInlineStartWidth",
  borderLeftStyle: "borderInlineStartStyle",
  borderLeftColor: "borderInlineStartColor",

  borderRight: "borderInlineEnd",
  borderRightWidth: "borderInlineEndWidth",
  borderRightStyle: "borderInlineEndStyle",
  borderRightColor: "borderInlineEndColor",
}
@infinitebrahmanuniverse/nolb-_chak@everything-registry/sub-chunk-164test-package-publish-ui@codeday/topo@ctlyst.id/internal-icon@ctlyst.id/internal-ui@toktokhan-fe/next-page-routerfastgpt-web-xyqchakra-test-react@aittorai/ui@aittorai/ui-library@bandit-network/sdk-react@bitrise/bitkit@catalyst-ui-testing/xms@catalyst-ui/xms@brikl/design-dashboard@chakra-ui/pro-theme@chakra-ui/vue@chakra-ui/vue-a11y@chakra-ui/vue-accessibilty@chakra-ui/vue-composables@chakra-ui/vue-layout@chakra-ui/vue-next@chakra-ui/vue-system@chakra-ui/vue-utils@chakra-ui/theme-utils@chakra-ui/system@chakra-svelte/provider@chakra-svelte/system@chakra-ui/c-scroll-lock@chakra-ui/c-skip-nav@chakra-ui/c-spinner@chakra-ui/c-tag@chakra-ui/c-accordion@chakra-ui/c-alert@chakra-ui/c-avatar@chakra-ui/c-breadcrumb@chakra-ui/c-button@chakra-ui/c-card@chakra-ui/c-checkbox@chakra-ui/c-close-button@chakra-ui/c-code@chakra-ui/c-form-control@chakra-ui/c-image@chakra-ui/c-input@chakra-ui/c-menu@chakra-ui/c-modal@chakra-ui/c-motion@chakra-ui/c-pin-input@chakra-ui/c-popover586b6e812e6d73b3@cmpsr/components@crafida-chakra/styles@chakra-ui/toast@honehealth/jutsu@incmix-ui/theme-glass@incmix-ui/theme@inkeep/inkeep-widget-library@kt_tech/chakra-ui-react@logicalclocks/quartz@nivells/ui@mayaui/pixel-box@mayaui/pixel-next@mayaui/pixel-utils@mekari/pixel-styled-system@invoke-ai/ui@invoke-ai/ui-library@raralabs/theme@saas-ui/theme@saas-ui/theme-glass@saas-ui/system@saas-ui/date-picker@saas-ui/file-upload@saas-ui/charts@saas-ui/command-bar@saas-ui/core@packpackman/system@packpackman/theme-utils@packpackman/toast@packpackman/react@owlprotocol/ui-react@shetab.uikit/chakra-theme@smg-automotive/components@solq-ui/charts@solq-ui/command-bar@solq-ui/core@solq-ui/date-picker@solq-ui/onboarding@solq-ui/props-docs@solq-ui/system@solq-ui/theme@solq-ui/theme-glassoctav-interfacenostr-engine@vygruppen/spor-react@walletconnect/chakra-ui-theme@tuci/charts@tuci/onboarding@tuci/pro
2.12.0

8 months ago

2.11.0

8 months ago

2.11.1

8 months ago

2.11.2

8 months ago

2.10.1

8 months ago

2.10.2

8 months ago

2.10.0

9 months ago

2.10.3

8 months ago

2.9.2

2 years ago

2.9.1

2 years ago

2.9.0

2 years ago

2.8.0

2 years ago

2.7.0

2 years ago

2.6.2

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.5.2

2 years ago

2.4.0

3 years ago

2.3.5

3 years ago

2.5.0

2 years ago

2.5.1

2 years ago

2.3.4

3 years ago

2.3.0

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.3

3 years ago

2.2.8

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.7

3 years ago

2.2.6

3 years ago

2.1.1

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.3

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.19.0

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.15.0

4 years ago

1.16.0

3 years ago

1.17.2

3 years ago

1.17.1

3 years ago

1.17.0

3 years ago

1.17.3

3 years ago

1.14.1

4 years ago

1.14.0

4 years ago

1.13.0

4 years ago

1.12.3

4 years ago

1.12.2

4 years ago

1.12.2-next.0

4 years ago

1.12.1

4 years ago

1.12.0

4 years ago

1.11.1

4 years ago

1.10.5

4 years ago

1.10.4

4 years ago

1.11.0

4 years ago

1.10.3

4 years ago

1.10.2

4 years ago

1.10.1

4 years ago

1.10.0

4 years ago

1.9.1

4 years ago

1.9.0

4 years ago

1.8.0

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-rc.8

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-rc.0

5 years ago

1.0.0-next.7

5 years ago

1.0.0-next.6

5 years ago

1.0.0-next.5

5 years ago