@cerberus-design/panda-preset
Version:
The official Panda-CSS preset for the omni-federal design system
100 lines (98 loc) • 2.24 kB
JavaScript
import {
filledUsage,
tagBase,
tagPalettes
} from "./chunk-T2QWWYYD.js";
// src/recipes/tag.ts
import {
defineRecipe
} from "@pandacss/dev";
var PAGE_TEXT_INITIAL = "page.text.initial";
var outlineGradientCss = {
borderColor: "transparent",
backgroundOrigin: "border-box",
backgroundClip: "padding-box, border-box",
color: PAGE_TEXT_INITIAL
};
var tag = defineRecipe({
className: "tag",
description: "WCAG Level AAA compliant tag styles.",
base: tagBase,
variants: {
palette: tagPalettes,
gradient: {
blue: {
cerbGradient: "blue"
},
green: {
cerbGradient: "green"
},
purple: {
cerbGradient: "purple"
}
},
usage: {
filled: filledUsage,
outlined: {
bgColor: "inherit",
border: "1.5px solid",
borderColor: "colorPalette.border.initial",
color: PAGE_TEXT_INITIAL
}
},
shape: {
pill: {
fontWeight: 400,
h: "1.5rem",
pxi: "2",
rounded: "full",
textStyle: "label-sm"
},
square: {
fontWeight: 600,
h: "1.625rem",
pxi: "3",
rounded: "md",
textStyle: "label-md"
}
}
},
defaultVariants: {
palette: "page",
usage: "filled",
shape: "pill"
},
compoundVariants: [
{
usage: "outlined",
gradient: "blue",
shape: "square",
css: {
...outlineGradientCss,
backgroundImage: "conic-gradient(var(--cerberus-colors-page-surface-initial) 0 0), linear-gradient(to top right, #9ACFEE, #E6F3FB)"
}
},
{
usage: "outlined",
gradient: "green",
shape: "square",
css: {
...outlineGradientCss,
backgroundImage: "conic-gradient(var(--cerberus-colors-page-surface-initial) 0 0), linear-gradient(to top right, #71D192, #E8F8ED)"
}
},
{
usage: "outlined",
gradient: "purple",
shape: "square",
css: {
...outlineGradientCss,
backgroundImage: "conic-gradient(var(--cerberus-colors-page-surface-initial) 0 0), linear-gradient(to top right, #BB93E1, #EFE5F8)"
}
}
]
});
export {
tag
};
//# sourceMappingURL=chunk-AHJDCQNY.js.map