@webstudio-is/css-vars v0.105.0
CSS Vars utils
This package helps you create uniquely named css variables as well as use them.
API
import { cssVars } from "css-vars";
const myVariable = cssVars.define("my-variable"); // --my-variable-0
cssVars.use(myVariable, "fallback"); // var(--my-variable-0, fallback)
Example using style
prop
import { cssVars } from "css-vars";
// icon.ts
const showVar = cssVars.define("button-show"); // --button-show-0
export const buttonCssVars = ({ show }: { show: boolean }) => ({
[showVar]: show ? "block" : "none",
});
export const Button = () => {
return <button style={{ display: cssVars.use(showVar, "none") }}></button>;
};
// panel.ts
import { Button, buttonCssVars } from "./button";
const Panel = (props) => {
const [show, setShow] = useState(false);
return (
<div {...props} style={buttonCssVars({ show })}>
<Button />
</div>
);
};
Example using stitches with :hover
import { cssVars } from "css-vars";
import {styled} from 'stitches'
// icon.ts
const showVar = cssVars.define("button-show"); // --button-show-0
const primaryBgVar = cssVars.define("button-primary-bg"); // --button-primary-bg-1
export const buttonCssVars = ({ show, variant }: { show: boolean, variant: 'primary' | 'secondary' }) => ({
[showVar]: show ? "block" : "none",
[primaryBgVar]: variant === 'primary' ? "red" : "grey",
});
export const Button = styled('button', {
display: cssVars.use(showVar, "none")
variants: {
variant: {
primary: {
background: cssVars.use(primaryBgVar, "red")
}
}
}
})
// panel.ts
import {Button, buttonCssVars} from './button'
import {styled} from 'stitches'
const Panel = styled('div', {
'&:hover': buttonCssVars({show: true})
})
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
8 months ago
8 months ago
9 months ago
7 months ago
8 months ago
9 months ago
8 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
9 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago