2.12.0 • Published 9 months ago

@chakra-ui/styled-system v2.12.0

Weekly downloads
66,184
License
MIT
Repository
github
Last release
9 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-reactoctav-interfacenostr-engine@vygruppen/spor-react@walletconnect/chakra-ui-theme@tuci/charts@tuci/onboarding@tuci/pro@tuci/pro-theme-glass@toktokhan-fe/template-next-app-router@toktokhan-fe/template-next-page-router@vimeo-ux/components@vimeo-ux/theme@vntrx/ui@vastly/uichakra-ui-sveltef6c625b8@shetab.uikit/chakra-theme@surfacedata/sd-components
2.12.0

9 months ago

2.11.0

10 months ago

2.11.1

10 months ago

2.11.2

10 months ago

2.10.1

10 months ago

2.10.2

10 months ago

2.10.0

10 months ago

2.10.3

10 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

3 years ago

2.4.0

3 years ago

2.3.5

3 years ago

2.5.0

3 years ago

2.5.1

3 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

4 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

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.0

5 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