@dreamy-ui/panda-preset
Version:
A panda preset for Dreamy UI React component library
1,786 lines (1,744 loc) • 159 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
BorderRadii: () => BorderRadii,
default: () => createDreamyPreset,
defaultPresetOptions: () => defaultPresetOptions,
dreamyPlugin: () => dreamyPlugin,
parts: () => parts18
});
module.exports = __toCommonJS(index_exports);
// src/plugin.ts
var import_dev = require("@pandacss/dev");
// ../../node_modules/.pnpm/chalk@5.4.1/node_modules/chalk/source/vendor/ansi-styles/index.js
var ANSI_BACKGROUND_OFFSET = 10;
var wrapAnsi16 = (offset = 0) => (code) => `\x1B[${code + offset}m`;
var wrapAnsi256 = (offset = 0) => (code) => `\x1B[${38 + offset};5;${code}m`;
var wrapAnsi16m = (offset = 0) => (red, green, blue) => `\x1B[${38 + offset};2;${red};${green};${blue}m`;
var styles = {
modifier: {
reset: [0, 0],
// 21 isn't widely supported and 22 does the same thing
bold: [1, 22],
dim: [2, 22],
italic: [3, 23],
underline: [4, 24],
overline: [53, 55],
inverse: [7, 27],
hidden: [8, 28],
strikethrough: [9, 29]
},
color: {
black: [30, 39],
red: [31, 39],
green: [32, 39],
yellow: [33, 39],
blue: [34, 39],
magenta: [35, 39],
cyan: [36, 39],
white: [37, 39],
// Bright color
blackBright: [90, 39],
gray: [90, 39],
// Alias of `blackBright`
grey: [90, 39],
// Alias of `blackBright`
redBright: [91, 39],
greenBright: [92, 39],
yellowBright: [93, 39],
blueBright: [94, 39],
magentaBright: [95, 39],
cyanBright: [96, 39],
whiteBright: [97, 39]
},
bgColor: {
bgBlack: [40, 49],
bgRed: [41, 49],
bgGreen: [42, 49],
bgYellow: [43, 49],
bgBlue: [44, 49],
bgMagenta: [45, 49],
bgCyan: [46, 49],
bgWhite: [47, 49],
// Bright color
bgBlackBright: [100, 49],
bgGray: [100, 49],
// Alias of `bgBlackBright`
bgGrey: [100, 49],
// Alias of `bgBlackBright`
bgRedBright: [101, 49],
bgGreenBright: [102, 49],
bgYellowBright: [103, 49],
bgBlueBright: [104, 49],
bgMagentaBright: [105, 49],
bgCyanBright: [106, 49],
bgWhiteBright: [107, 49]
}
};
var modifierNames = Object.keys(styles.modifier);
var foregroundColorNames = Object.keys(styles.color);
var backgroundColorNames = Object.keys(styles.bgColor);
var colorNames = [...foregroundColorNames, ...backgroundColorNames];
function assembleStyles() {
const codes = /* @__PURE__ */ new Map();
for (const [groupName, group2] of Object.entries(styles)) {
for (const [styleName, style] of Object.entries(group2)) {
styles[styleName] = {
open: `\x1B[${style[0]}m`,
close: `\x1B[${style[1]}m`
};
group2[styleName] = styles[styleName];
codes.set(style[0], style[1]);
}
Object.defineProperty(styles, groupName, {
value: group2,
enumerable: false
});
}
Object.defineProperty(styles, "codes", {
value: codes,
enumerable: false
});
styles.color.close = "\x1B[39m";
styles.bgColor.close = "\x1B[49m";
styles.color.ansi = wrapAnsi16();
styles.color.ansi256 = wrapAnsi256();
styles.color.ansi16m = wrapAnsi16m();
styles.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
styles.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
styles.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
Object.defineProperties(styles, {
rgbToAnsi256: {
value(red, green, blue) {
if (red === green && green === blue) {
if (red < 8) {
return 16;
}
if (red > 248) {
return 231;
}
return Math.round((red - 8) / 247 * 24) + 232;
}
return 16 + 36 * Math.round(red / 255 * 5) + 6 * Math.round(green / 255 * 5) + Math.round(blue / 255 * 5);
},
enumerable: false
},
hexToRgb: {
value(hex) {
const matches = /[a-f\d]{6}|[a-f\d]{3}/i.exec(hex.toString(16));
if (!matches) {
return [0, 0, 0];
}
let [colorString] = matches;
if (colorString.length === 3) {
colorString = [...colorString].map((character) => character + character).join("");
}
const integer = Number.parseInt(colorString, 16);
return [
/* eslint-disable no-bitwise */
integer >> 16 & 255,
integer >> 8 & 255,
integer & 255
/* eslint-enable no-bitwise */
];
},
enumerable: false
},
hexToAnsi256: {
value: (hex) => styles.rgbToAnsi256(...styles.hexToRgb(hex)),
enumerable: false
},
ansi256ToAnsi: {
value(code) {
if (code < 8) {
return 30 + code;
}
if (code < 16) {
return 90 + (code - 8);
}
let red;
let green;
let blue;
if (code >= 232) {
red = ((code - 232) * 10 + 8) / 255;
green = red;
blue = red;
} else {
code -= 16;
const remainder = code % 36;
red = Math.floor(code / 36) / 5;
green = Math.floor(remainder / 6) / 5;
blue = remainder % 6 / 5;
}
const value = Math.max(red, green, blue) * 2;
if (value === 0) {
return 30;
}
let result = 30 + (Math.round(blue) << 2 | Math.round(green) << 1 | Math.round(red));
if (value === 2) {
result += 60;
}
return result;
},
enumerable: false
},
rgbToAnsi: {
value: (red, green, blue) => styles.ansi256ToAnsi(styles.rgbToAnsi256(red, green, blue)),
enumerable: false
},
hexToAnsi: {
value: (hex) => styles.ansi256ToAnsi(styles.hexToAnsi256(hex)),
enumerable: false
}
});
return styles;
}
var ansiStyles = assembleStyles();
var ansi_styles_default = ansiStyles;
// ../../node_modules/.pnpm/chalk@5.4.1/node_modules/chalk/source/vendor/supports-color/index.js
var import_node_process = __toESM(require("process"), 1);
var import_node_os = __toESM(require("os"), 1);
var import_node_tty = __toESM(require("tty"), 1);
function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : import_node_process.default.argv) {
const prefix = flag.startsWith("-") ? "" : flag.length === 1 ? "-" : "--";
const position = argv.indexOf(prefix + flag);
const terminatorPosition = argv.indexOf("--");
return position !== -1 && (terminatorPosition === -1 || position < terminatorPosition);
}
var { env } = import_node_process.default;
var flagForceColor;
if (hasFlag("no-color") || hasFlag("no-colors") || hasFlag("color=false") || hasFlag("color=never")) {
flagForceColor = 0;
} else if (hasFlag("color") || hasFlag("colors") || hasFlag("color=true") || hasFlag("color=always")) {
flagForceColor = 1;
}
function envForceColor() {
if ("FORCE_COLOR" in env) {
if (env.FORCE_COLOR === "true") {
return 1;
}
if (env.FORCE_COLOR === "false") {
return 0;
}
return env.FORCE_COLOR.length === 0 ? 1 : Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
}
}
function translateLevel(level) {
if (level === 0) {
return false;
}
return {
level,
hasBasic: true,
has256: level >= 2,
has16m: level >= 3
};
}
function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
const noFlagForceColor = envForceColor();
if (noFlagForceColor !== void 0) {
flagForceColor = noFlagForceColor;
}
const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
if (forceColor === 0) {
return 0;
}
if (sniffFlags) {
if (hasFlag("color=16m") || hasFlag("color=full") || hasFlag("color=truecolor")) {
return 3;
}
if (hasFlag("color=256")) {
return 2;
}
}
if ("TF_BUILD" in env && "AGENT_NAME" in env) {
return 1;
}
if (haveStream && !streamIsTTY && forceColor === void 0) {
return 0;
}
const min = forceColor || 0;
if (env.TERM === "dumb") {
return min;
}
if (import_node_process.default.platform === "win32") {
const osRelease = import_node_os.default.release().split(".");
if (Number(osRelease[0]) >= 10 && Number(osRelease[2]) >= 10586) {
return Number(osRelease[2]) >= 14931 ? 3 : 2;
}
return 1;
}
if ("CI" in env) {
if (["GITHUB_ACTIONS", "GITEA_ACTIONS", "CIRCLECI"].some((key) => key in env)) {
return 3;
}
if (["TRAVIS", "APPVEYOR", "GITLAB_CI", "BUILDKITE", "DRONE"].some((sign) => sign in env) || env.CI_NAME === "codeship") {
return 1;
}
return min;
}
if ("TEAMCITY_VERSION" in env) {
return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
}
if (env.COLORTERM === "truecolor") {
return 3;
}
if (env.TERM === "xterm-kitty") {
return 3;
}
if ("TERM_PROGRAM" in env) {
const version = Number.parseInt((env.TERM_PROGRAM_VERSION || "").split(".")[0], 10);
switch (env.TERM_PROGRAM) {
case "iTerm.app": {
return version >= 3 ? 3 : 2;
}
case "Apple_Terminal": {
return 2;
}
}
}
if (/-256(color)?$/i.test(env.TERM)) {
return 2;
}
if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
return 1;
}
if ("COLORTERM" in env) {
return 1;
}
return min;
}
function createSupportsColor(stream, options = {}) {
const level = _supportsColor(stream, {
streamIsTTY: stream && stream.isTTY,
...options
});
return translateLevel(level);
}
var supportsColor = {
stdout: createSupportsColor({ isTTY: import_node_tty.default.isatty(1) }),
stderr: createSupportsColor({ isTTY: import_node_tty.default.isatty(2) })
};
var supports_color_default = supportsColor;
// ../../node_modules/.pnpm/chalk@5.4.1/node_modules/chalk/source/utilities.js
function stringReplaceAll(string, substring, replacer) {
let index = string.indexOf(substring);
if (index === -1) {
return string;
}
const substringLength = substring.length;
let endIndex = 0;
let returnValue = "";
do {
returnValue += string.slice(endIndex, index) + substring + replacer;
endIndex = index + substringLength;
index = string.indexOf(substring, endIndex);
} while (index !== -1);
returnValue += string.slice(endIndex);
return returnValue;
}
function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
let endIndex = 0;
let returnValue = "";
do {
const gotCR = string[index - 1] === "\r";
returnValue += string.slice(endIndex, gotCR ? index - 1 : index) + prefix + (gotCR ? "\r\n" : "\n") + postfix;
endIndex = index + 1;
index = string.indexOf("\n", endIndex);
} while (index !== -1);
returnValue += string.slice(endIndex);
return returnValue;
}
// ../../node_modules/.pnpm/chalk@5.4.1/node_modules/chalk/source/index.js
var { stdout: stdoutColor, stderr: stderrColor } = supports_color_default;
var GENERATOR = Symbol("GENERATOR");
var STYLER = Symbol("STYLER");
var IS_EMPTY = Symbol("IS_EMPTY");
var levelMapping = [
"ansi",
"ansi",
"ansi256",
"ansi16m"
];
var styles2 = /* @__PURE__ */ Object.create(null);
var applyOptions = (object, options = {}) => {
if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
throw new Error("The `level` option should be an integer from 0 to 3");
}
const colorLevel = stdoutColor ? stdoutColor.level : 0;
object.level = options.level === void 0 ? colorLevel : options.level;
};
var chalkFactory = (options) => {
const chalk2 = (...strings) => strings.join(" ");
applyOptions(chalk2, options);
Object.setPrototypeOf(chalk2, createChalk.prototype);
return chalk2;
};
function createChalk(options) {
return chalkFactory(options);
}
Object.setPrototypeOf(createChalk.prototype, Function.prototype);
for (const [styleName, style] of Object.entries(ansi_styles_default)) {
styles2[styleName] = {
get() {
const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
Object.defineProperty(this, styleName, { value: builder });
return builder;
}
};
}
styles2.visible = {
get() {
const builder = createBuilder(this, this[STYLER], true);
Object.defineProperty(this, "visible", { value: builder });
return builder;
}
};
var getModelAnsi = (model, level, type, ...arguments_) => {
if (model === "rgb") {
if (level === "ansi16m") {
return ansi_styles_default[type].ansi16m(...arguments_);
}
if (level === "ansi256") {
return ansi_styles_default[type].ansi256(ansi_styles_default.rgbToAnsi256(...arguments_));
}
return ansi_styles_default[type].ansi(ansi_styles_default.rgbToAnsi(...arguments_));
}
if (model === "hex") {
return getModelAnsi("rgb", level, type, ...ansi_styles_default.hexToRgb(...arguments_));
}
return ansi_styles_default[type][model](...arguments_);
};
var usedModels = ["rgb", "hex", "ansi256"];
for (const model of usedModels) {
styles2[model] = {
get() {
const { level } = this;
return function(...arguments_) {
const styler = createStyler(getModelAnsi(model, levelMapping[level], "color", ...arguments_), ansi_styles_default.color.close, this[STYLER]);
return createBuilder(this, styler, this[IS_EMPTY]);
};
}
};
const bgModel = "bg" + model[0].toUpperCase() + model.slice(1);
styles2[bgModel] = {
get() {
const { level } = this;
return function(...arguments_) {
const styler = createStyler(getModelAnsi(model, levelMapping[level], "bgColor", ...arguments_), ansi_styles_default.bgColor.close, this[STYLER]);
return createBuilder(this, styler, this[IS_EMPTY]);
};
}
};
}
var proto = Object.defineProperties(() => {
}, {
...styles2,
level: {
enumerable: true,
get() {
return this[GENERATOR].level;
},
set(level) {
this[GENERATOR].level = level;
}
}
});
var createStyler = (open, close, parent) => {
let openAll;
let closeAll;
if (parent === void 0) {
openAll = open;
closeAll = close;
} else {
openAll = parent.openAll + open;
closeAll = close + parent.closeAll;
}
return {
open,
close,
openAll,
closeAll,
parent
};
};
var createBuilder = (self, _styler, _isEmpty) => {
const builder = (...arguments_) => applyStyle(builder, arguments_.length === 1 ? "" + arguments_[0] : arguments_.join(" "));
Object.setPrototypeOf(builder, proto);
builder[GENERATOR] = self;
builder[STYLER] = _styler;
builder[IS_EMPTY] = _isEmpty;
return builder;
};
var applyStyle = (self, string) => {
if (self.level <= 0 || !string) {
return self[IS_EMPTY] ? "" : string;
}
let styler = self[STYLER];
if (styler === void 0) {
return string;
}
const { openAll, closeAll } = styler;
if (string.includes("\x1B")) {
while (styler !== void 0) {
string = stringReplaceAll(string, styler.close, styler.open);
styler = styler.parent;
}
}
const lfIndex = string.indexOf("\n");
if (lfIndex !== -1) {
string = stringEncaseCRLFWithFirstIndex(string, closeAll, openAll, lfIndex);
}
return openAll + string + closeAll;
};
Object.defineProperties(createChalk.prototype, styles2);
var chalk = createChalk();
var chalkStderr = createChalk({ level: stderrColor ? stderrColor.level : 0 });
var source_default = chalk;
// src/plugin.ts
var import_promises = __toESM(require("fs/promises"), 1);
var import_node_path = __toESM(require("path"), 1);
var dreamyPlugin = (0, import_dev.definePlugin)({
name: "dreamy-plugin",
hooks: {
"codegen:done": async () => {
const styledSystemFolder = import_node_path.default.join(process.cwd(), "styled-system");
if (!(await import_promises.default.stat(styledSystemFolder)).isDirectory()) {
console.error(
source_default.blue(`\u274C ${source_default.red("styled-system")} folder does not exist.`)
);
console.log(source_default.yellow("Failed when trying to modify `jsx` directory."));
return;
}
const jsxFolder = import_node_path.default.join(process.cwd(), "styled-system", "jsx");
if (!(await import_promises.default.stat(jsxFolder)).isDirectory()) {
console.error(
source_default.blue(
`\u274C ${source_default.red(
"jsx"
)} folder does not exist in styled-system. Did you forget to add ${source_default.green(
"jsxFramework: 'react'"
)} to the ${source_default.green("panda.config.ts")}?`
)
);
return;
}
const files = await import_promises.default.readdir(jsxFolder);
for (const file of files) {
if (!["index", "factory", "is-valid-prop"].some((prefix) => file.startsWith(prefix))) {
await import_promises.default.unlink(import_node_path.default.join(jsxFolder, file));
}
}
let js = "js";
const indexJs = await import_promises.default.readFile(import_node_path.default.join(jsxFolder, "index.js"), "utf-8").catch(() => null);
const indexMjs = await import_promises.default.readFile(import_node_path.default.join(jsxFolder, "index.mjs"), "utf-8").catch(() => null);
if (indexJs && indexMjs) {
js = "both";
} else if (indexJs) {
js = "js";
} else if (indexMjs) {
js = "mjs";
}
const indexContent = `export * from './factory.js';
export * from './is-valid-prop.js';`;
await Promise.all([
(js === "js" || js === "both") && import_promises.default.writeFile(import_node_path.default.join(jsxFolder, "index.js"), indexContent),
(js === "mjs" || js === "both") && import_promises.default.writeFile(import_node_path.default.join(jsxFolder, "index.mjs"), indexContent),
import_promises.default.writeFile(
import_node_path.default.join(jsxFolder, "index.d.ts"),
`export * from './factory';
export * from './is-valid-prop';
export type { HTMLStyledProps, StyledComponent } from '../types/jsx';`
)
]);
console.log(
source_default.cyan(
"\u2714\uFE0F Dreamy UI has successfully modified the jsx files in the styled-system folder."
)
);
}
}
});
// src/theme/patterns/divider.ts
var import_dev2 = require("@pandacss/dev");
var divider = (0, import_dev2.definePattern)({
jsx: ["Divider"],
description: "divider pattern",
properties: {
orientation: {
type: "enum",
value: ["horizontal", "vertical"]
},
thickness: {
type: "string",
value: "1px"
}
},
defaultValues: {
orientation: "horizontal",
thickness: "1px",
color: "alpha.300"
},
transform(props, { map }) {
const { orientation, thickness, color, backgroundColor, background, bg, ...rest } = props;
return {
"--thickness": thickness,
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
borderTop: "none",
borderBlockEndWidth: map(
orientation,
(v) => v === "horizontal" ? "var(--thickness)" : void 0
),
borderInlineStartWidth: map(
orientation,
(v) => v === "vertical" ? "var(--thickness)" : void 0
),
borderColor: color ?? backgroundColor ?? background ?? bg,
...rest
};
}
});
// src/theme/patterns/flex.ts
var import_dev3 = require("@pandacss/dev");
var flex = (0, import_dev3.definePattern)({
jsx: ["Flex", "Group"]
});
// src/theme/patterns/text.ts
var import_dev4 = require("@pandacss/dev");
var text = (0, import_dev4.definePattern)({
jsx: ["Heading", "Text"],
properties: {
variant: {
type: "enum",
value: ["heading", "link"]
},
size: {
type: "enum",
value: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"]
}
},
transform(props, { map }) {
const { variant, size, ...rest } = props;
return {
textStyle: size ?? map(variant, (v) => v === "heading" ? "xl" : void 0),
fontWeight: map(
variant,
(v) => v === "heading" ? "bold" : v === "link" ? "semibold" : void 0
),
fontFamily: map(variant, (v) => v === "heading" ? "heading" : void 0),
transition: map(variant, (v) => v === "link" ? "colors" : void 0),
_hover: map(
variant,
(v) => v === "link" ? { color: "{colors.fg.max}" } : void 0
),
...rest
};
}
});
// src/theme/patterns/visually-hidden.ts
var import_dev5 = require("@pandacss/dev");
var visuallyHidden = (0, import_dev5.definePattern)({
jsx: ["VisuallyHidden", "VisuallyHiddenInput"]
});
// src/theme/patterns/index.ts
var patterns = {
divider,
text,
visuallyHidden,
flex
};
// src/theme/resolve-button-colors.ts
function resolveButtonColors(options) {
if (options.primaryColor && !options.buttonPrimaryTextColor) {
if (typeof options.primaryColor === "string") {
options.buttonPrimaryTextColor = getContrast(options.primaryColor);
} else {
options.buttonPrimaryTextColor = {
light: getContrast(options.primaryColor.light),
dark: getContrast(options.primaryColor.dark)
};
}
}
if (options.secondaryColor && !options.buttonSecondaryTextColor) {
if (typeof options.secondaryColor === "string") {
options.buttonSecondaryTextColor = getContrast(options.secondaryColor);
} else {
options.buttonSecondaryTextColor = {
light: getContrast(options.secondaryColor.light),
dark: getContrast(options.secondaryColor.dark)
};
}
}
}
function getContrast(color) {
const [red, green, blue] = resolveColorScheme(color);
return red * 0.299 + green * 0.587 + blue * 0.114 > 186 ? "#000000" : "#ffffff";
}
function resolveColorScheme(color) {
if (color.startsWith("#")) {
const hex = color.slice(1);
const [r, g, b] = hexToRgb(hex);
return [r, g, b];
}
if (color.startsWith("rgb")) {
const rgb = color.slice(4).split(")")[0].split(",");
return rgb.map((value) => Number.parseInt(value, 10));
}
if (color.startsWith("hsl")) {
const hsl = color.slice(4).split(")")[0].split(",");
const [h, s, l] = hsl.map((value) => Number.parseInt(value, 10));
return hslToRgb(h, s, l);
}
throw new Error(
`Invalid color: ${color}. Make sure provided color is a valid hex value, rgb value, or hsl value.`
);
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) throw new Error(`Invalid hex color: ${hex}`);
return [
Number.parseInt(result[1], 16),
Number.parseInt(result[2], 16),
Number.parseInt(result[3], 16)
];
}
function hslToRgb(h, s, l) {
let r;
let g;
let b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hueToRgb(p, q, h + 1 / 3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1 / 3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
function hueToRgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
// src/theme/semantic-tokens/colors.ts
var import_dev6 = require("@pandacss/dev");
function createColorTokens({
backgrounds: { light: lightBackground, dark: darkBackground },
primaryColor,
secondaryColor,
buttonPrimaryTextColor,
buttonSecondaryTextColor
}) {
return import_dev6.defineSemanticTokens.colors({
primary: {
DEFAULT: {
value: typeof primaryColor === "string" ? primaryColor : {
_light: primaryColor.light,
_dark: primaryColor.dark
}
},
fg: {
value: typeof buttonPrimaryTextColor === "string" ? buttonPrimaryTextColor : {
_light: buttonPrimaryTextColor.light,
_dark: buttonPrimaryTextColor.dark
}
}
},
secondary: {
DEFAULT: {
value: typeof secondaryColor === "string" ? secondaryColor : {
_light: secondaryColor.light,
_dark: secondaryColor.dark
}
},
fg: {
value: typeof buttonSecondaryTextColor === "string" ? buttonSecondaryTextColor : {
_light: buttonSecondaryTextColor.light,
_dark: buttonSecondaryTextColor.dark
}
}
},
primaryButtonText: {
value: typeof buttonPrimaryTextColor === "string" ? buttonPrimaryTextColor : {
_light: buttonPrimaryTextColor.light,
_dark: buttonPrimaryTextColor.dark
}
},
secondaryButtonText: {
value: typeof buttonSecondaryTextColor === "string" ? buttonSecondaryTextColor : {
_light: buttonSecondaryTextColor.light,
_dark: buttonSecondaryTextColor.dark
}
},
bg: {
DEFAULT: {
value: {
base: lightBackground,
_light: lightBackground,
_dark: darkBackground
}
},
light: {
value: lightBackground
},
dark: {
value: darkBackground
},
panel: {
value: {
// light background with 85% opacity
base: `color-mix(in srgb, ${lightBackground} 85%, transparent 15%)`,
// dark background with white alpha, to whiten the background and also alphied
_dark: `color-mix(in srgb, ${darkBackground} 85%, {colors.whiteAlpha.200} 20%)`
}
}
},
fg: {
DEFAULT: {
value: {
_light: "{colors.gray.950}",
_dark: "{colors.gray.50}"
}
},
max: {
value: {
_light: "{colors.black}",
_dark: "{colors.white}"
}
},
medium: {
value: {
_light: "{colors.gray.600}",
_dark: "{colors.gray.400}"
}
},
disabled: {
value: {
_light: "{colors.gray.400}",
_dark: "{colors.gray.500}"
}
}
},
success: {
value: {
_light: "{colors.green.600}",
_dark: "{colors.green.400}"
}
},
warning: {
value: {
_light: "{colors.yellow.500}",
_dark: "{colors.yellow.400}"
}
},
error: {
value: {
_light: "#d60b3e",
_dark: "#db6371"
}
},
info: {
value: {
_light: "{colors.blue.500}",
_dark: "{colors.blue.400}"
}
},
border: {
DEFAULT: {
value: "{colors.alpha.300}"
},
muted: {
value: "{colors.alpha.200}"
},
hover: {
value: "{colors.alpha.400}"
}
},
alpha: {
50: {
value: {
_light: "{colors.blackAlpha.50}",
_dark: "{colors.whiteAlpha.50}"
}
},
100: {
value: {
_light: "{colors.blackAlpha.100}",
_dark: "{colors.whiteAlpha.100}"
}
},
200: {
value: {
_light: "{colors.blackAlpha.200}",
_dark: "{colors.whiteAlpha.200}"
}
},
300: {
value: {
_light: "{colors.blackAlpha.300}",
_dark: "{colors.whiteAlpha.300}"
}
},
400: {
value: {
_light: "{colors.blackAlpha.400}",
_dark: "{colors.whiteAlpha.400}"
}
},
500: {
value: {
_light: "{colors.blackAlpha.500}",
_dark: "{colors.whiteAlpha.500}"
}
},
600: {
value: {
_light: "{colors.blackAlpha.600}",
_dark: "{colors.whiteAlpha.600}"
}
},
700: {
value: {
_light: "{colors.blackAlpha.700}",
_dark: "{colors.whiteAlpha.700}"
}
},
800: {
value: {
_light: "{colors.blackAlpha.800}",
_dark: "{colors.whiteAlpha.800}"
}
},
900: {
value: {
_light: "{colors.blackAlpha.900}",
_dark: "{colors.whiteAlpha.900}"
}
},
950: {
value: {
_light: "{colors.blackAlpha.950}",
_dark: "{colors.whiteAlpha.950}"
}
}
},
inverted: {
value: {
_light: "{colors.fg.max}",
_dark: "{colors.bg}"
}
}
});
}
// src/theme/semantic-tokens/radii.ts
var import_dev7 = require("@pandacss/dev");
function createRadiiTokens(borderRadius) {
return import_dev7.defineSemanticTokens.radii(
(() => {
switch (borderRadius) {
case "none":
return {
l05: { value: "{radii.none}" },
l1: { value: "{radii.none}" },
l2: { value: "{radii.none}" },
l3: { value: "{radii.none}" },
"p-2": { value: "{radii.none}" },
"p-3": { value: "{radii.none}" },
"p-4": { value: "{radii.none}" },
"p-5": { value: "{radii.none}" },
"p-6": { value: "{radii.none}" }
};
case "xs":
return {
l05: { value: "{radii.none}" },
l1: { value: "{radii.2xs}" },
l2: { value: "{radii.xs}" },
l3: { value: "{radii.sm}" },
"p-2": { value: "0.375rem" },
"p-3": { value: "0.525rem" },
"p-4": { value: "0.625rem" },
"p-5": { value: "0.775rem" },
"p-6": { value: "0.875rem" }
};
case "sm":
return {
l05: { value: "{radii.2xs}" },
l1: { value: "{radii.xs}" },
l2: { value: "{radii.sm}" },
l3: { value: "{radii.md}" },
"p-2": { value: "0.5rem" },
"p-3": { value: "0.65rem" },
"p-4": { value: "0.75rem" },
"p-5": { value: "0.9rem" },
"p-6": { value: "1rem" }
};
case "md":
return {
l05: { value: "{radii.xs}" },
l1: { value: "{radii.sm}" },
l2: { value: "{radii.md}" },
l3: { value: "{radii.lg}" },
"p-2": { value: "0.625rem" },
"p-3": { value: "0.775rem" },
"p-4": { value: "0.875rem" },
"p-5": { value: "1.025rem" },
"p-6": { value: "1.125rem" }
};
case "lg":
return {
l05: { value: "{radii.sm}" },
l1: { value: "{radii.md}" },
l2: { value: "{radii.lg}" },
l3: { value: "{radii.xl}" },
"p-2": { value: "0.75rem" },
"p-3": { value: "0.9rem" },
"p-4": { value: "1rem" },
"p-5": { value: "1.15rem" },
"p-6": { value: "1.25rem" }
};
case "xl":
return {
l05: { value: "{radii.md}" },
l1: { value: "{radii.lg}" },
l2: { value: "{radii.xl}" },
l3: { value: "{radii.2xl}" },
"p-2": { value: "1rem" },
"p-3": { value: "1.15rem" },
"p-4": { value: "1.25rem" },
"p-5": { value: "1.4rem" },
"p-6": { value: "1.5rem" }
};
case "2xl":
return {
l05: { value: "{radii.lg}" },
l1: { value: "{radii.xl}" },
l2: { value: "{radii.2xl}" },
l3: { value: "{radii.3xl}" },
"p-2": { value: "1.25rem" },
"p-3": { value: "1.4rem" },
"p-4": { value: "1.5rem" },
"p-5": { value: "1.65rem" },
"p-6": { value: "1.75rem" }
};
}
})()
);
}
// src/theme/semantic-tokens/index.ts
var import_dev11 = require("@pandacss/dev");
// src/theme/semantic-tokens/animations.ts
var import_dev8 = require("@pandacss/dev");
var animations = import_dev8.defineTokens.animations({
"spinner-linear-spin": {
value: "spinner-spin var(--spinner-speed, 0.8s) linear infinite"
},
"spinner-ease-spin": {
value: "spinner-spin var(--spinner-speed, 0.8s) ease infinite"
}
});
var animations_default = animations;
// src/theme/semantic-tokens/font-sizes.ts
var import_dev9 = require("@pandacss/dev");
var fontSizes = import_dev9.defineSemanticTokens.fontSizes({
sm: {
value: {
DEFAULT: "xs",
_md: "sm"
}
},
md: {
value: {
DEFAULT: "sm",
_md: "md"
}
},
lg: {
value: {
DEFAULT: "md",
_md: "lg"
}
},
xl: {
value: {
DEFAULT: "lg",
_md: "xl"
}
},
"2xl": {
value: {
DEFAULT: "xl",
_md: "2xl"
}
},
"3xl": {
value: {
DEFAULT: "2xl",
_md: "3xl"
}
},
"4xl": {
value: {
DEFAULT: "3xl",
_md: "4xl"
}
},
"5xl": {
value: {
DEFAULT: "4xl",
_md: "5xl"
}
},
"6xl": {
value: {
DEFAULT: "5xl",
_md: "6xl"
}
}
});
// src/theme/semantic-tokens/shadows.ts
var import_dev10 = require("@pandacss/dev");
var shadows = import_dev10.defineSemanticTokens.shadows({
xs: {
value: {
base: "0px 1px 2px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 1px 1px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
sm: {
value: {
base: "0px 2px 4px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 2px 4px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
md: {
value: {
base: "0px 4px 8px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 4px 8px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
lg: {
value: {
base: "0px 8px 16px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 8px 16px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
xl: {
value: {
base: "0px 16px 24px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 16px 24px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
"2xl": {
value: {
base: "0px 24px 40px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 24px 40px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
}
});
var shadows_default = shadows;
// src/theme/semantic-tokens/index.ts
function createSemanticTokens(options) {
const radii2 = createRadiiTokens(options.rounded);
const colors = createColorTokens(options);
return (0, import_dev11.defineSemanticTokens)({
fontSizes,
colors,
shadows: shadows_default,
animations: animations_default,
easings: {
easeInOut: {
value: [0.4, 0, 0.3, 1]
}
},
radii: radii2
});
}
// src/theme/tokens/assets.ts
var import_dev12 = require("@pandacss/dev");
var assets = import_dev12.defineTokens.assets({});
// src/theme/tokens/colors.ts
var import_dev13 = require("@pandacss/dev");
function defineColorTokens() {
return import_dev13.defineTokens.colors({
current: { value: "currentColor" },
blackAlpha: {
50: { value: "rgba(0, 0, 0, 0.04)" },
100: { value: "rgba(0, 0, 0, 0.08)" },
200: { value: "rgba(0, 0, 0, 0.12)" },
300: { value: "rgba(0, 0, 0, 0.16)" },
400: { value: "rgba(0, 0, 0, 0.24)" },
500: { value: "rgba(0, 0, 0, 0.32)" },
600: { value: "rgba(0, 0, 0, 0.40)" },
700: { value: "rgba(0, 0, 0, 0.48)" },
800: { value: "rgba(0, 0, 0, 0.56)" },
900: { value: "rgba(0, 0, 0, 0.64)" },
950: { value: "rgba(0, 0, 0, 0.72)" }
},
whiteAlpha: {
50: { value: "rgba(255, 255, 255, 0.04)" },
100: { value: "rgba(255, 255, 255, 0.08)" },
200: { value: "rgba(255, 255, 255, 0.12)" },
300: { value: "rgba(255, 255, 255, 0.16)" },
400: { value: "rgba(255, 255, 255, 0.24)" },
500: { value: "rgba(255, 255, 255, 0.32)" },
600: { value: "rgba(255, 255, 255, 0.40)" },
700: { value: "rgba(255, 255, 255, 0.48)" },
800: { value: "rgba(255, 255, 255, 0.56)" },
900: { value: "rgba(255, 255, 255, 0.64)" },
950: { value: "rgba(255, 255, 255, 0.72)" }
},
transparent: { value: "rgb(0 0 0 / 0)" },
gray: {
50: { value: "#fafafa" },
100: { value: "#f4f4f5" },
200: { value: "#e4e4e7" },
300: { value: "#d4d4d8" },
400: { value: "#a1a1aa" },
500: { value: "#71717a" },
600: { value: "#52525b" },
700: { value: "#3f3f46" },
800: { value: "#27272a" },
900: { value: "#18181b" },
950: { value: "#111111" }
}
});
}
// src/theme/tokens/typography/fonts.ts
function createFonts({ body, heading, mono }) {
return {
body: {
value: [body, "sans"]
},
heading: {
value: [heading, body, "sans"]
},
sans: {
value: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
]
},
serif: {
value: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"]
},
mono: {
value: [
mono,
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace"
]
}
};
}
// src/theme/tokens/index.ts
var import_dev20 = require("@pandacss/dev");
// src/theme/tokens/blurs.ts
var import_dev14 = require("@pandacss/dev");
var blurs = import_dev14.defineTokens.blurs({
sm: { value: "4px" },
base: { value: "8px" },
md: { value: "12px" },
lg: { value: "16px" },
xl: { value: "24px" },
"2xl": { value: "40px" },
"3xl": { value: "64px" }
});
// src/theme/tokens/borders.ts
var borders = {
none: { value: "none" }
};
// src/theme/tokens/durations.ts
var import_dev15 = require("@pandacss/dev");
var durations = import_dev15.defineTokens.durations({
fastest: { value: "50ms" },
faster: { value: "100ms" },
fast: { value: "150ms" },
normal: { value: "200ms" },
slow: { value: "300ms" },
slower: { value: "400ms" },
slowest: { value: "500ms" }
});
// src/theme/tokens/easings.ts
var import_dev16 = require("@pandacss/dev");
var easings = import_dev16.defineTokens.easings({
pulse: { value: "cubic-bezier(0.4, 0.0, 0.6, 1.0)" },
default: { value: "cubic-bezier(0.4, 0, 0.3, 1)" },
"emphasized-in": { value: "cubic-bezier(0.05, 0.7, 0.1, 1.0)" },
"emphasized-out": { value: "cubic-bezier(0.3, 0.0, 0.8, 0.15)" },
"ease-in-out": { value: "cubic-bezier(0.4, 0, 0.3, 1)" },
"ease-in": { value: "cubic-bezier(0.4, 0, 1, 1)" },
"ease-out": { value: "cubic-bezier(0, 0, 0.2, 1)" }
});
// src/theme/tokens/radii.ts
var import_dev17 = require("@pandacss/dev");
var radii = import_dev17.defineTokens.radii({
none: { value: "0" },
"2xs": { value: "0.0625rem" },
xs: { value: "0.125rem" },
sm: { value: "0.25rem" },
md: { value: "0.375rem" },
lg: { value: "0.5rem" },
xl: { value: "0.75rem" },
"2xl": { value: "1rem" },
"3xl": { value: "1.5rem" },
"4xl": { value: "2rem" },
"5xl": { value: "2.5rem" },
full: { value: "9999px" }
});
// src/theme/tokens/spacing.ts
var import_dev18 = require("@pandacss/dev");
var spacing = import_dev18.defineTokens.spacing({
0: { value: "0rem" },
0.5: { value: "0.125rem" },
1: { value: "0.25rem" },
1.5: { value: "0.375rem" },
2: { value: "0.5rem" },
2.5: { value: "0.625rem" },
3: { value: "0.75rem" },
3.5: { value: "0.875rem" },
4: { value: "1rem" },
4.5: { value: "1.125rem" },
5: { value: "1.25rem" },
6: { value: "1.5rem" },
7: { value: "1.75rem" },
8: { value: "2rem" },
9: { value: "2.25rem" },
10: { value: "2.5rem" },
11: { value: "2.75rem" },
12: { value: "3rem" },
14: { value: "3.5rem" },
16: { value: "4rem" },
20: { value: "5rem" },
24: { value: "6rem" },
28: { value: "7rem" },
32: { value: "8rem" },
36: { value: "9rem" },
40: { value: "10rem" },
44: { value: "11rem" },
48: { value: "12rem" },
52: { value: "13rem" },
56: { value: "14rem" },
60: { value: "15rem" },
64: { value: "16rem" },
72: { value: "18rem" },
80: { value: "20rem" },
96: { value: "24rem" }
});
// src/theme/tokens/sizes.ts
var largeSizes = {
"2xs": { value: "16rem" },
xs: { value: "20rem" },
sm: { value: "24rem" },
md: { value: "28rem" },
lg: { value: "32rem" },
xl: { value: "36rem" },
"2xl": { value: "42rem" },
"3xl": { value: "48rem" },
"4xl": { value: "56rem" },
"5xl": { value: "64rem" },
"6xl": { value: "72rem" },
"7xl": { value: "80rem" },
"8xl": { value: "90rem" }
};
var sizes = {
...spacing,
...largeSizes,
full: { value: "100%" },
min: { value: "min-content" },
max: { value: "max-content" },
fit: { value: "fit-content" }
};
// src/theme/tokens/typography/font-sizes.ts
var fontSizes2 = {
"2xs": { value: "0.5rem" },
xs: { value: "0.75rem" },
sm: { value: "0.875rem" },
md: { value: "1rem" },
lg: { value: "1.125rem" },
xl: { value: "1.25rem" },
"2xl": { value: "1.5rem" },
"3xl": { value: "1.875rem" },
"4xl": { value: "2.25rem" },
"5xl": { value: "3rem" },
"6xl": { value: "3.75rem" },
"7xl": { value: "4.5rem" },
"8xl": { value: "6rem" },
"9xl": { value: "8rem" }
};
// src/theme/tokens/typography/font-weights.ts
var fontWeights = {
thin: { value: "100" },
extralight: { value: "200" },
light: { value: "300" },
normal: { value: "400" },
medium: { value: "500" },
semibold: { value: "600" },
bold: { value: "700" },
extrabold: { value: "800" },
black: { value: "900" }
};
// src/theme/tokens/typography/letter-spacings.ts
var letterSpacings = {
tighter: { value: "-0.05em" },
tight: { value: "-0.025em" },
normal: { value: "0em" },
wide: { value: "0.025em" },
wider: { value: "0.05em" },
widest: { value: "0.1em" }
};
// src/theme/tokens/typography/line-heights.ts
var lineHeights = {
none: { value: "1" },
tight: { value: "1.25" },
normal: { value: "1.5" },
relaxed: { value: "1.75" },
loose: { value: "2" }
};
// src/theme/tokens/z-index.ts
var import_dev19 = require("@pandacss/dev");
var zIndex = import_dev19.defineTokens.zIndex({
hide: {
value: -1
},
base: {
value: 0
},
docked: {
value: 10
},
dropdown: {
value: 1e3
},
sticky: {
value: 1100
},
banner: {
value: 1200
},
overlay: {
value: 1300
},
modal: {
value: 1400
},
popover: {
value: 1500
},
skipLink: {
value: 1600
},
toast: {
value: 1700
},
tooltip: {
value: 1800
}
});
// src/theme/tokens/index.ts
function createTokens(options) {
const fonts = createFonts(options.fonts);
return (0, import_dev20.defineTokens)({
blurs,
borders,
colors: defineColorTokens(),
durations,
assets,
easings,
fonts,
fontSizes: fontSizes2,
fontWeights,
letterSpacings,
lineHeights,
radii,
sizes,
spacing,
zIndex
});
}
// src/theme/preset.ts
var import_dev59 = require("@pandacss/dev");
var import_preset_panda = __toESM(require("@pandacss/preset-panda"), 1);
var import_deepmerge = __toESM(require("deepmerge"), 1);
// src/recipes/alert.ts
var import_dev21 = require("@pandacss/dev");
var parts = (0, import_dev21.defineParts)({
root: { selector: "&" },
icon: { selector: "& [data-part='icon']" },
title: { selector: "& [data-part='title']" },
description: { selector: "& [data-part='description']" }
});
var alert = (0, import_dev21.defineRecipe)({
className: "dreamy-alert",
description: "Dreamy UI Alert component",
jsx: ["Alert"],
base: parts({
root: {
display: "flex",
flexDirection: "column",
paddingX: 4,
paddingY: 3,
borderRadius: "l2",
fontSize: "md",
width: "100%",
gap: 0.5
},
title: {
display: "flex",
alignItems: "center",
fontWeight: "semibold",
fontSize: "md",
textWrap: "wrap"
},
description: {
ml: 7
},
icon: {
width: "5",
height: "5",
mr: 2,
flexShrink: 0,
"[data-status=success]&": {
color: "{colors.success}",
fill: "{colors.success}",
stroke: "{colors.success}"
},
"[data-status=warning]&": {
color: "{colors.warning}",
fill: "{colors.warning}"
},
"[data-status=error]&": {
color: "{colors.error}",
fill: "{colors.error}"
},
"[data-status=info]&": {
color: "{colors.info}",
fill: "{colors.info}",
stroke: "{colors.info}"
}
}
}),
variants: {
variant: {
subtle: parts({
root: {
"&[data-status=success]": {
bg: "{colors.success}/10"
},
"&[data-status=warning]": {
bg: "{colors.warning}/10"
},
"&[data-status=error]": {
bg: "{colors.error}/10"
},
"&[data-status=info]": {
bg: "{colors.info}/10"
}
}
}),
outline: parts({
root: {
borderWidth: 1,
borderStyle: "solid",
"&[data-status=success]": {
borderColor: "{colors.success}"
},
"&[data-status=warning]": {
borderColor: "{colors.warning}"
},
"&[data-status=error]": {
borderColor: "{colors.error}"
},
"&[data-status=info]": {
borderColor: "{colors.info}"
}
}
})
}
},
defaultVariants: {
variant: "subtle"
}
});
// src/recipes/avatar.ts
var import_dev22 = require("@pandacss/dev");
var parts2 = (0, import_dev22.defineParts)({
root: {
selector: "&"
},
image: { selector: '& [data-part="image"]' },
name: { selector: '& [data-part="name"]' },
group: { selector: '[data-part="group"]:has(&)' },
excess: { selector: '[data-part="group"]:has(&) [data-part="excess"]' }
});
var avatar = (0, import_dev22.defineRecipe)({
className: "dreamy-avatar",
jsx: ["Avatar", "AvatarImage", "AvatarName"],
base: parts2({
root: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "full",
overflow: "hidden"
// transition: "transform 0.2s {easings.ease-in-out}",
// _hover: {
// '[data-part="group"]:has(&) &': {
// transform: "translateX(-0.75rem)"
// }
// }
},
name: {
fontWeight: "500",
fontSize: "md"
},
image: {
objectFit: "cover",
objectPosition: "center",
width: "100%",
height: "100%",
rounded: "inherit"
},
group: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
flexDirection: "row-reverse"
},
excess: {
bg: "{colors.alpha.100}",
backdropFilter: "blur({blurs.md})",
fontWeight: "500",
display: "flex",
alignItems: "center",
justifyContent: "center",
rounded: "full"
}
}),
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: parts2({
root: {
width: "8",
height: "8"
},
excess: {
width: "8",
height: "8"
}
}),
md: parts2({
root: {
width: "10",
height: "10"
},
excess: {
width: "10",
height: "10"
}
}),
lg: parts2({
root: {
width: "12",
height: "12"
},
excess: {
width: "12",
height: "12"
}
})
},
showBorder: {
true: parts2({
root: {
borderWidth: "2px",
borderStyle: "solid",
borderColor: "{colors.bg}"
}
})
}
}
});
// src/recipes/color-scheme.ts
var schemeNames = [
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"none"
];
var schemes = {
primary: "{colors.primary}",
secondary: "{colors.secondary}",
success: "{colors.success}",
warning: "{colors.warning}",
error: "{colors.error}",
info: "{colors.info}",
none: "{colors.fg.max}"
};
function getColorSchemes(cssVar, schemeProps, slot) {
const entries = Object.fromEntries(
schemeNames.map((scheme) => {
const val = slot ? { [slot]: { [cssVar]: schemes[scheme], ...schemeProps?.(scheme) } } : {
[cssVar]: schemes[scheme],
...schemeProps?.(scheme)
};
return [scheme, val];
})
);