![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@chakra-ui/system
Advanced tools
Readme
Styled API for creating atomic, theme-aware component styling.
yarn add @chakra-ui/system
# or
npm i @chakra-ui/system
In modern web development, we have lots of solutions and architectures that have tried to unify how components are styled. We've seen CSS architectures like BEM, SMACSS, etc, and frameworks like theme-ui, and Tailwind CSS.
While these solutions work great, we think there still a sheer amount of work required to create a fully customizable, theme-aware component.
Chakra provides enhanced JSX elements that can be styled directly via props, or
can accept the common __css
prop for custom styles.
We'll provide a chakra function, just like styled-component. Users can create
any component using the chakra.[element]
. The resulting component will be a
styled component and have all system props.
<chakra.button bg="green.200" _hover={{ bg: "green.300" }}>
Click me
</chakra.button>
<chakra.h1 fontSize="lg"> Heading </chakra.h1>
// create your own box
const Box = chakra.div
// you can still use the `as` prop
<Box as="h1">This is my box</Box>
// for custom components
const ChakraPowered = chakra(YourComponent)
// TS: chakra will infer the types of Link and
// make it available in props
<chakra.a as={Link} to="/home"> Click me</chakra.a>
A way to define themable components in chakra. We believe most re-usable, atomic components have the following modifiers:
Our goal with this component API to design a common interface to style any component give these characteristics. Here's how it works:
// 1. create a component schema in your theme
const theme = {
colors: {
green: {
light: "#dfdfdf",
normal: "#dfdfdf",
dark: "#d566Df",
darker: "#dfd56f"
},
blue: {}
},
components: {
Button: {
defaultProps: {
variant: "solid",
size: "md",
colorScheme: "blue"
},
variants: {
// props has colorScheme, colorMode (light mode or dark mode)
solid: props => ({
bg: `${props.colorScheme}.normal`,
color: "white",
}),
outline: {
border: "2px",
borderColor: "green.normal"
}
},
sizes: {
sm: {
padding: 20,
fontSize: 12
},
md: {
padding: 40,
fontSize: 15
}
}
}
}
};
// 2. create or import Button from chakra-ui
import { Button } from "@chakra-ui/core"
// or your own button
const Button = chakra("button", { themeKey: "Button" })
// 3. use the button. It'll have the visual props defined in defaultProps
<Button>Click me</Button>
// 4. override the defaultProps
<Button variant="outline" colorScheme="green">Click me</Button>
FAQs
Chakra UI system primitives
The npm package @chakra-ui/system receives a total of 487,779 weekly downloads. As such, @chakra-ui/system popularity was classified as popular.
We found that @chakra-ui/system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.