Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import type { tagAnatomy } from "@chakra-ui/anatomy";
import { theme } from "@chakra-ui/react";
import {
PartsStyleInterpolation,
StyleFunctionProps,
transparentize,
} from "@chakra-ui/theme-tools";
import { PackageTagConfig } from "../../api/config";
const createVariant =
(
variant: PartsStyleInterpolation<typeof tagAnatomy>,
overrides: Record<string, any>
) =>
(props: StyleFunctionProps) => {
const varBase = typeof variant === "function" ? variant(props) : variant;
return {
...varBase,
container: {
...varBase.container,
...overrides,
},
};
};
const {
components: { Tag: base },
} = theme;
export const makeTag = (config: PackageTagConfig[]) => {
const customVariants = config.reduce((accum, { keyword }) => {
return keyword?.color
? {
...accum,
[keyword.color]: createVariant(base.variants.subtle, {
background: transparentize(keyword.color, 0.1),
color: keyword.color,
}),
}
: accum;
}, {});
return {
...base,
baseStyle: {
container: {
fontWeight: "normal",
},
},
variants: {
...base.variants,
subtle: createVariant(base.variants.subtle, {
background: "bgPrimary",
border: "base",
color: "textPrimary",
}),
...customVariants,
},
};
};
|