@dreamy-ui/panda-preset
Version:
A panda preset for Dreamy UI React component library
1,544 lines (1,479 loc) • 93.7 kB
JavaScript
// src/plugin/index.ts
import { definePlugin } from "@pandacss/dev";
// ../../node_modules/.pnpm/chalk@5.6.2/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, group] of Object.entries(styles)) {
for (const [styleName, style] of Object.entries(group)) {
styles[styleName] = {
open: `\x1B[${style[0]}m`,
close: `\x1B[${style[1]}m`
};
group[styleName] = styles[styleName];
codes.set(style[0], style[1]);
}
Object.defineProperty(styles, groupName, {
value: group,
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.6.2/node_modules/chalk/source/vendor/supports-color/index.js
import process2 from "process";
import os from "os";
import tty from "tty";
function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : process2.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 } = process2;
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 (process2.platform === "win32") {
const osRelease = os.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 (env.TERM === "xterm-ghostty") {
return 3;
}
if (env.TERM === "wezterm") {
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: tty.isatty(1) }),
stderr: createSupportsColor({ isTTY: tty.isatty(2) })
};
var supports_color_default = supportsColor;
// ../../node_modules/.pnpm/chalk@5.6.2/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.6.2/node_modules/chalk/source/index.js
var { stdout: stdoutColor, stderr: stderrColor } = supports_color_default;
var GENERATOR = /* @__PURE__ */ Symbol("GENERATOR");
var STYLER = /* @__PURE__ */ Symbol("STYLER");
var IS_EMPTY = /* @__PURE__ */ 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/factory.ts
import fs from "fs/promises";
import path from "path";
async function updateFactory(jsxFolder, typesFolder) {
await Promise.all([updateFactoryFile(jsxFolder), updateFactoryTypes(typesFolder)]);
}
async function updateFactoryFile(jsxFolder) {
const factoryFile = path.join(jsxFolder, "factory.js");
await fs.writeFile(factoryFile, factoryFileNewContent);
}
async function updateFactoryTypes(typesFolder) {
const factoryFile = path.join(typesFolder, "jsx.d.ts");
let factoryFileContent = await fs.readFile(factoryFile, "utf8");
factoryFileContent = factoryFileContent.replace(
`import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'`,
`import type { ElementType, ReactNode, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'`
);
factoryFileContent = factoryFileContent.replace(
`export interface AsProps {
/**
* The element to render as
*/
as?: ElementType | undefined
}`,
`export interface AsProps {
/**
* The element to render as
*/
as?: ElementType | ReactNode | undefined
/**
* If \`true\`, the component will render the child as a component.
* @default false
*/
asChild?: boolean;
}`
);
await fs.writeFile(factoryFile, factoryFileContent);
}
var factoryFileNewContent = `import { Children, cloneElement, createElement, forwardRef, isValidElement, useMemo } from "react";
import { css, cva, cx } from "../css/index.js";
import { normalizeHTMLProps, splitProps } from "../helpers.js";
import {
composeCvaFn,
composeShouldForwardProps,
defaultShouldForwardProp,
getDisplayName
} from "./factory-helper.js";
import { isCssProperty } from "./is-valid-prop.js";
function setRef(ref, value) {
if (typeof ref === "function") {
ref(value);
} else if (ref !== null && ref !== undefined) {
ref.current = value;
}
}
function composeRefs(...refs) {
return (node) => {
for (const ref of refs) setRef(ref, node);
};
}
function styledFn(Dynamic, configOrCva = {}, options = {}) {
const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva);
const forwardFn = options.shouldForwardProp || defaultShouldForwardProp;
const shouldForwardProp = (prop) => {
if (options.forwardProps?.includes(prop)) return true;
return forwardFn(prop, cvaFn.variantKeys);
};
const defaultProps = Object.assign(
options.dataAttr && configOrCva.__name__ ? { "data-recipe": configOrCva.__name__ } : {},
options.defaultProps
);
const __cvaFn__ = composeCvaFn(Dynamic?.__cva__, cvaFn);
const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp);
const __base__ = Dynamic?.__base__ || Dynamic;
const DreamyComponent = /* @__PURE__ */ forwardRef(function DreamyComponent(props, ref) {
const { as: Element = __base__, unstyled, children, asChild, ...restProps } = props;
const combinedProps = useMemo(
() => Object.assign({}, defaultProps, restProps),
[restProps]
);
const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
return splitProps(
combinedProps,
normalizeHTMLProps.keys,
__shouldForwardProps__,
__cvaFn__.variantKeys,
isCssProperty
);
}, [combinedProps]);
function recipeClass() {
const { css: cssStyles, ...propStyles } = styleProps;
const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
return cx(
__cvaFn__(variantProps, false),
css(compoundVariantStyles, propStyles, cssStyles),
combinedProps.className
);
}
function cvaClass() {
const { css: cssStyles, ...propStyles } = styleProps;
const cvaStyles = __cvaFn__.raw(variantProps);
return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className);
}
function classes() {
if (unstyled) {
const { css: cssStyles, ...propStyles } = styleProps;
return cx(css(propStyles, cssStyles), combinedProps.className);
}
return configOrCva.__recipe__ ? recipeClass() : cvaClass();
}
if (asChild) {
const onlyChild = Children.only(children);
if (!isValidElement(onlyChild)) {
return null;
}
return cloneElement(onlyChild, {
ref: onlyChild?.ref ? composeRefs(ref, onlyChild?.ref) : ref,
...forwardedProps,
...elementProps,
...normalizeHTMLProps(htmlProps),
...(onlyChild?.props || {}),
className: classes()
});
}
if (typeof Element === "object" && !("render" in Element) && Element !== null) {
return createElement(
Element?.type || __base__,
{
ref: Element?.ref ? composeRefs(ref, Element?.ref) : ref,
...forwardedProps,
...elementProps,
...normalizeHTMLProps(htmlProps),
...(Element?.props || {}),
className: classes()
},
children ?? combinedProps.children
);
}
return createElement(
Element,
{
ref,
...forwardedProps,
...elementProps,
...normalizeHTMLProps(htmlProps),
className: classes()
},
children ?? combinedProps.children
);
});
const name = getDisplayName(__base__);
DreamyComponent.displayName = \`dreamy.\${name}\`;
DreamyComponent.__cva__ = __cvaFn__;
DreamyComponent.__base__ = __base__;
DreamyComponent.__shouldForwardProps__ = shouldForwardProp;
return DreamyComponent;
}
function createJsxFactory() {
const cache = new Map();
return new Proxy(styledFn, {
apply(_, __, args) {
return styledFn(...args);
},
get(_, el) {
if (!cache.has(el)) {
cache.set(el, styledFn(el));
}
return cache.get(el);
}
});
}
export const dreamy = /* @__PURE__ */ createJsxFactory();
`;
// src/plugin/remove-jsx-elements.ts
import fs2 from "fs/promises";
import path2 from "path";
async function removeJsxElements(jsxFolder) {
const files = await fs2.readdir(jsxFolder);
for (const file of files) {
if (!["index", "factory", "is-valid-prop", "create-style-context"].some(
(prefix) => file.startsWith(prefix)
)) {
await fs2.unlink(path2.join(jsxFolder, file));
}
}
let js = "js";
const indexJs = await fs2.readFile(path2.join(jsxFolder, "index.js"), "utf-8").catch(() => null);
const indexMjs = await fs2.readFile(path2.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';
export * from './create-style-context.js';
`;
await Promise.all([
(js === "js" || js === "both") && fs2.writeFile(path2.join(jsxFolder, "index.js"), indexContent),
(js === "mjs" || js === "both") && fs2.writeFile(path2.join(jsxFolder, "index.mjs"), indexContent),
fs2.writeFile(
path2.join(jsxFolder, "index.d.ts"),
`export * from './factory';
export * from './is-valid-prop';
export * from './create-style-context';
export type { HTMLDreamyProps, DreamyComponent } from '../types/jsx';`
)
]);
}
// src/plugin/system.ts
import fs3 from "fs/promises";
import path3 from "path";
async function ensureStyledSystemExists(cwd) {
const styledSystemFolder = path3.join(cwd, "styled-system");
if (!(await fs3.stat(styledSystemFolder)).isDirectory()) {
console.error(source_default.blue(`\u274C ${source_default.red("styled-system")} folder does not exist.`));
throw new Error("styled-system folder does not exist");
}
return styledSystemFolder;
}
async function ensureTypesFolderExists(styledFolder) {
const typesFolder = path3.join(styledFolder, "types");
if (!(await fs3.stat(typesFolder)).isDirectory()) {
console.error(source_default.blue(`\u274C ${source_default.red("types")} folder does not exist in ${source_default.green(styledFolder)}.`));
throw new Error("types folder does not exist");
}
return typesFolder;
}
async function ensureJsxFolderExists(styledFolder) {
const jsxFolder = path3.join(styledFolder, "jsx");
if (!(await fs3.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")}?`
)
);
throw new Error("jsx folder does not exist");
}
return jsxFolder;
}
// src/plugin/update-style-context.ts
import fs4 from "fs/promises";
import path4 from "path";
async function removeFactoryFromStyleContext(jsxFolder) {
const files = await fs4.readdir(jsxFolder).then((files2) => files2.filter((file) => !file.endsWith("d.ts")));
const styleContextFile = files.find((file) => file.startsWith("create-style-context"));
console.log("styleContextFile", styleContextFile);
if (!styleContextFile) {
throw new Error(`create-style-context.js file not found in ${jsxFolder}`);
}
const newContent = `"use client";
import { createContext, createElement, forwardRef, useContext } from "react";
import { cx, sva } from "../css/index.js";
import { getDisplayName } from "./factory-helper.js";
function createSafeContext(contextName) {
const Context = createContext(undefined);
const useStyleContext = (componentName, slot) => {
const context = useContext(Context);
if (context === undefined) {
const componentInfo = componentName ? \`Component "\${componentName}"\` : "A component";
const slotInfo = slot ? \` (slot: "\${slot}")\` : "";
throw new Error(
\`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
);
}
return context;
};
return [Context, useStyleContext];
}
export function createStyleContext(recipe, styleContextOptions = {}) {
const isConfigRecipe = "__recipe__" in recipe;
const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined;
const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : "createStyleContext";
const forwardVariants = styleContextOptions.forwardVariants ?? [];
const [StyleContext, useStyleContext] = createSafeContext(contextName);
const svaFn = isConfigRecipe ? recipe : sva(recipe.config);
function getForwardedVariantProps(variantProps) {
if (!forwardVariants.length) {
return {};
}
return forwardVariants.reduce((accumulator, variantKey) => {
if (variantProps[variantKey] !== undefined) {
accumulator[variantKey] = variantProps[variantKey];
}
return accumulator;
}, {});
}
const getResolvedProps = (props, slotStyles) => {
const { unstyled, ...restProps } = props;
if (unstyled) return restProps;
if (isConfigRecipe) {
return { ...restProps, className: cx(slotStyles, restProps.className) };
}
return { ...slotStyles, ...restProps };
};
const withRootProvider = (Component, options) => {
const WithRootProvider = (props) => {
const [variantProps, otherProps] = svaFn.splitVariantProps(props);
const forwardedVariantProps = getForwardedVariantProps(variantProps);
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
slotStyles._classNameMap = svaFn.classNameMap;
const mergedProps = options?.defaultProps
? { ...options.defaultProps, ...otherProps }
: otherProps;
return createElement(StyleContext.Provider, {
value: slotStyles,
children: createElement(Component, { ...mergedProps, ...forwardedVariantProps })
});
};
const componentName = getDisplayName(Component);
WithRootProvider.displayName = \`withRootProvider(\${componentName})\`;
return WithRootProvider;
};
const withProvider = (Component, slot, options) => {
const WithProvider = forwardRef((props, ref) => {
const [variantProps, restProps] = svaFn.splitVariantProps(props);
const forwardedVariantProps = getForwardedVariantProps(variantProps);
const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
slotStyles._classNameMap = svaFn.classNameMap;
const propsWithClass = {
...restProps,
...options?.defaultProps,
...forwardedVariantProps,
className: restProps.className ?? options?.defaultProps?.className
};
const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
return createElement(StyleContext.Provider, {
value: slotStyles,
children: createElement(Component, {
...resolvedProps,
className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
ref
})
});
});
const componentName = getDisplayName(Component);
WithProvider.displayName = \`withProvider(\${componentName})\`;
return WithProvider;
};
const withContext = (Component, slot, options) => {
const componentName = getDisplayName(Component);
const WithContext = forwardRef((props, ref) => {
const slotStyles = useStyleContext(componentName, slot);
const propsWithClass = {
...props,
...options?.defaultProps,
className: props.className ?? options?.defaultProps?.className
};
const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
return createElement(Component, {
...resolvedProps,
className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
ref
});
});
WithContext.displayName = \`withContext(\${componentName})\`;
return WithContext;
};
return {
withRootProvider,
withProvider,
withContext
};
}
`;
await fs4.writeFile(path4.join(jsxFolder, styleContextFile), newContent);
}
async function updateStyleContextTypes(jsxFolder) {
const dtsPath = path4.join(jsxFolder, "create-style-context.d.ts");
try {
const content = await fs4.readFile(dtsPath, "utf-8");
const withoutJsxStyleProps = content.replace(/, JsxStyleProps/g, "");
const styleContextOptionsInterface = `interface StyleContextOptions {
forwardVariants?: string[] | undefined
}
`;
const withStyleContextOptionsInterface = withoutJsxStyleProps.includes(
"interface StyleContextOptions {"
) ? withoutJsxStyleProps : withoutJsxStyleProps.replace(
"type StyleContextConsumer<T extends ElementType> = ComponentType<\n JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps>\n>\n\n",
"type StyleContextConsumer<T extends ElementType> = ComponentType<\n JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps>\n>\n\n" + styleContextOptionsInterface
);
const newContent = withStyleContextOptionsInterface.replace(
/export declare function createStyleContext<R extends SlotRecipe>\(recipe: R\): StyleContext<R>/,
"export declare function createStyleContext<R extends SlotRecipe>(recipe: R, options?: StyleContextOptions | undefined): StyleContext<R>"
);
await fs4.writeFile(dtsPath, newContent);
} catch (error) {
if (error.code !== "ENOENT") {
throw error;
}
}
}
// src/plugin/index.ts
function dreamyPlugin(options) {
const {
removeJsxElements: removeJsxElementsOption = true,
updateFactory: updateFactoryOption = true,
removeFactoryFromStyleContext: removeFactoryFromStyleContextOption = true,
cwd = process.cwd()
} = options ?? {};
return definePlugin({
name: "dreamy-plugin",
hooks: {
"codegen:done": async () => {
const isSilent = process.argv.includes("--silent");
const start = performance.now();
const styledFolder = await ensureStyledSystemExists(cwd);
const [jsxFolder, typesFolder] = await Promise.all([
ensureJsxFolderExists(styledFolder),
updateFactoryOption ? ensureTypesFolderExists(styledFolder) : null
]);
await Promise.all([
removeJsxElementsOption && removeJsxElements(jsxFolder),
updateFactoryOption && updateFactory(jsxFolder, typesFolder),
removeFactoryFromStyleContextOption && (async () => {
await removeFactoryFromStyleContext(jsxFolder);
await updateStyleContextTypes(jsxFolder);
})()
]);
const end = performance.now();
if (!isSilent) {
console.log(
source_default.ansi256(140)("\u2714\uFE0F Dreamy UI"),
source_default.reset("has successfully modified"),
source_default.cyan("`styled-system/jsx`"),
source_default.reset("and"),
source_default.cyan("`styled-system/types`"),
source_default.gray(` (${(end - start).toFixed(0)}ms)`)
);
}
}
}
});
}
// 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, generateFg = false) {
const entries = Object.fromEntries(
schemeNames.map((scheme) => {
const val = slot ? {
[slot]: {
[cssVar]: schemes[scheme],
...schemeProps?.(scheme),
...generateFg ? { [cssVar + "-fg"]: addFgToTheScheme(scheme) } : {}
}
} : {
[cssVar]: schemes[scheme],
...schemeProps?.(scheme)
};
return [scheme, val];
})
);
return Object.assign({}, entries);
}
function addFgToTheScheme(scheme) {
const s = schemes[scheme];
if (scheme !== "none") {
return s.replace("}", ".fg}");
}
return "{colors.bg}";
}
// src/recipes/jsx.ts
function mapJsx(root, jsx) {
return jsx.map((item) => `${root}.${item}`);
}
// src/theme/preset.ts
import { AsyncLocalStorage } from "async_hooks";
// src/theme/resolve-button-colors.ts
function resolveButtonColors() {
const options = getPresetOptions();
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
import { defineSemanticTokens } from "@pandacss/dev";
// src/theme/colors.ts
import Color from "colorjs.io";
function contrastRatio(c1, c2) {
const L1 = c1.luminance + 0.05;
const L2 = c2.luminance + 0.05;
return L1 > L2 ? L1 / L2 : L2 / L1;
}
function adjustContrastIfNeeded(color, bg, contrast, isDark) {
while (contrastRatio(bg, color) < contrast && (isDark ? color.oklch.l < 0.99 : color.oklch.l > 0.01)) {
color.oklch.l += isDark ? 0.02 : -0.02;
}
}
var DEFAULT_FG_OFFSETS = { max: 0, normal: 0, medium: 0, disabled: 0 };
var DEFAULT_BORDER_OFFSETS = { default: 0, muted: 0, hover: 0 };
function clampL(l, offset = 0) {
return Math.max(0, Math.min(1, l + offset));
}
function getFgChroma(bg, chromaScale = 1) {
const isVeryLowSaturation = bg.oklch.c < 0.01;
const isLowSaturation = bg.oklch.c < 0.04;
const isModerateSaturation = bg.oklch.c < 0.12;
const isVeryDark = bg.oklch.l < 0.15;
const isVeryLight = bg.oklch.l > 0.85;
const isExtremeLightness = isVeryDark || isVeryLight;
let fgHue;
let fgChroma;
if (isVeryLowSaturation) {
fgHue = 245;
fgChroma = 5e-3;
} else if (isExtremeLightness && isLowSaturation) {
fgHue = 245;
fgChroma = 8e-3;
} else {
fgHue = bg.oklch.h || 0;
let chromaPercentage;
if (isLowSaturation) {
chromaPercentage = 0.6 - (bg.oklch.c - 0.01) / 0.03 * 0.2;
} else if (isModerateSaturation) {
chromaPercentage = 0.4 - (bg.oklch.c - 0.04) / 0.08 * 0.2;
} else {
chromaPercentage = Math.max(0.1, 0.2 - (bg.oklch.c - 0.12) / 0.2 * 0.1);
}
fgChroma = bg.oklch.c * chromaPercentage;
fgChroma = Math.max(5e-3, Math.min(fgChroma, 0.05));
}
fgChroma = Math.max(0, Math.min(fgChroma * chromaScale, 0.4));
return { fgChroma, fgHue };
}
function getBorderChroma(bg, chromaScale = 1) {
const isVeryLowSaturation = bg.oklch.c < 0.01;
const isLowSaturation = bg.oklch.c < 0.04;
const isModerateSaturation = bg.oklch.c < 0.12;
const isVeryDark = bg.oklch.l < 0.15;
const isVeryLight = bg.oklch.l > 0.85;
const isExtremeLightness = isVeryDark || isVeryLight;
let borderHue;
let borderChroma;
if (isVeryLowSaturation) {
borderHue = 245;
borderChroma = 6e-3;
} else if (isExtremeLightness && isLowSaturation) {
borderHue = 245;
borderChroma = 0.01;
} else {
borderHue = bg.oklch.h || 0;
let chromaPercentage;
if (isLowSaturation) {
chromaPercentage = 0.7 - (bg.oklch.c - 0.01) / 0.03 * 0.2;
} else if (isModerateSaturation) {
chromaPercentage = 0.5 - (bg.oklch.c - 0.04) / 0.08 * 0.2;
} else {
chromaPercentage = Math.max(0.15, 0.3 - (bg.oklch.c - 0.12) / 0.2 * 0.15);
}
borderChroma = bg.oklch.c * chromaPercentage;
borderChroma = Math.max(6e-3, Math.min(borderChroma, 0.06));
}
borderChroma = Math.max(0, Math.min(borderChroma * chromaScale, 0.4));
return { borderChroma, borderHue };
}
function genForegroundTokens(bgHex, chromaScale = 1, offsets = DEFAULT_FG_OFFSETS) {
const bg = new Color(bgHex).to("oklch");
const { fgChroma, fgHue } = getFgChroma(bg, chromaScale);
const isDark = bg.oklch.l < 0.5;
const mediumChroma = Math.min(fgChroma * 1.5, 0.05);
const disabledChroma = Math.min(fgChroma * 1.3, 0.045);
const max = new Color("oklch", [clampL(isDark ? 1 : 0, offsets.max), fgChroma, fgHue]);
const normal = new Color("oklch", [clampL(isDark ? 0.95 : 0.2, offsets.normal), fgChroma, fgHue]);
const medium = new Color("oklch", [clampL(isDark ? 0.7 : 0.35, offsets.medium), mediumChroma, fgHue]);
const disabled = new Color("oklch", [clampL(isDark ? 0.6 : 0.4, offsets.disabled), disabledChroma, fgHue]);
adjustContrastIfNeeded(max, bg, 7, isDark);
adjustContrastIfNeeded(normal, bg, 4.5, isDark);
adjustContrastIfNeeded(medium, bg, 3, isDark);
adjustContrastIfNeeded(disabled, bg, 2, isDark);
return {
max: max.toString({ format: "oklch" }),
normal: normal.toString({ format: "oklch" }),
medium: medium.toString({ format: "oklch" }),
disabled: disabled.toString({ format: "oklch" })
};
}
function genBorderTokens(bgHex, chromaScale = 1, offsets = DEFAULT_BORDER_OFFSETS) {
const bg = new Color(bgHex).to("oklch");
const { borderChroma, borderHue } = getBorderChroma(bg, chromaScale);
const isDark = bg.oklch.l < 0.5;
const mutedChroma = Math.min(borderChroma * 1.2, 0.05);
const hoverChroma = borderChroma;
const defaultBorder = new Color("oklch", [clampL(isDark ? 0.25 : 0.9, offsets.default), borderChroma, borderHue]);
const mutedBorder = new Color("oklch", [clampL(isDark ? 0.2 : 0.95, offsets.muted), mutedChroma, borderHue]);
const hoverBorder = new Color("oklch", [clampL(isDark ? 0.3 : 0.85, offsets.hover), hoverChroma, borderHue]);
return {
default: defaultBorder.toString({ format: "oklch" }),
muted: mutedBorder.toString({ format: "oklch" }),
hover: hoverBorder.toString({ format: "oklch" })
};
}
function alpha(color, amount) {
const normal = new Color(color);
normal.alpha = amount;
return normal.toString({ format: "oklch" });
}
// src/theme/semantic-tokens/colors.ts
function resolveNumber(val, mode, fallback) {
if (val === void 0) return fallback;
if (typeof val === "number") return val;
return val[mode];
}
function createColorTokens() {
const {
backgrounds: { light: lightBackground, dark: darkBackground },
primaryColor,
secondaryColor,
buttonPrimaryTextColor,
buttonSecondaryTextColor,
colorTuning
} = getPresetOptions();
const fgChromaScaleLight = resolveNumber(colorTuning?.fgChromaScale, "light", 1);
const fgChromaScaleDark = resolveNumber(colorTuning?.fgChromaScale, "dark", 1);
const borderChromaScaleLight = resolveNumber(
colorTuning?.borderChromaScale,
"light",
fgChromaScaleLight
);
const borderChromaScaleDark = resolveNumber(
colorTuning?.borderChromaScale,
"dark",
fgChromaScaleDark
);
const fgOffsets = (mode) => ({
max: resolveNumber(colorTuning?.fgLightnessOffset?.max, mode, 0),
normal: resolveNumber(colorTuning?.fgLightnessOffset?.normal, mode, 0),
medium: resolveNumber(colorTuning?.fgLightnessOffset?.medium, mode, 0),
disabled: resolveNumber(colorTuning?.fgLightnessOffset?.disabled, mode, 0)
});
const borderOffsets = (mode) => {
const fg = fgOffsets(mode);
const bo = colorTuning?.borderLightnessOffset;
const isBorderDefined = bo !== void 0;
return {
default: resolveNumber(bo?.default, mode, isBorderDefined ? 0 : fg.normal),
muted: resolveNumber(bo?.muted, mode, isBorderDefined ? 0 : fg.disabled),
hover: resolveNumber(bo?.hover, mode, isBorderDefined ? 0 : fg.normal)
};
};
const fgLight = genForegroundTokens(lightBackground, fgChromaScaleLight, fgOffsets("light"));
const fgDark = genForegroundTokens(darkBackground, fgChromaScaleDark, fgOffsets("dark"));
const borderLight = genBorderTokens(
lightBackground,
borderChromaScaleLight,
borderOffsets("light")
);
const borderDark = genBorderTokens(
darkBackground,
borderChromaScaleDark,
borderOffsets("dark")
);
return 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
}
},
hover: {
value: typeof primaryColor === "string" ? `color-mix(in srgb, ${primaryColor}, currentColor 10%)` : {
_light: `color-mix(in srgb, ${primaryColor.light}, currentColor 10%)`,
_dark: `color-mix(in srgb, ${primaryColor.dark}, currentColor 10%)`
}
},
active: {
value: typeof primaryColor === "string" ? `color-mix(in srgb, ${primaryColor}, currentColor 20%)` : {
_light: `color-mix(in srgb, ${primaryColor.light}, currentColor 20%)`,
_dark: `color-mix(in srgb, ${primaryColor.dark}, currentColor 20%)`
}
}
},
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
}
},
hover: {
value: typeof secondaryColor === "string" ? `color-mix(in srgb, ${secondaryColor}, currentColor 10%)` : {
_light: `color-mix(in srgb, ${secondaryColor.light}, currentColor 10%)`,
_dark: `color-mix(in srgb, ${secondaryColor.dark}, currentColor 10%)`
}
},
active: {
value: typeof secondaryColor === "string" ? `color-mix(in srgb, ${secondaryColor}, currentColor 20%)` : {
_light: `color-mix(in srgb, ${secondaryColor.light}, currentColor 20%)`,
_dark: `color-mix(in srgb, ${secondaryColor.dark}, currentColor 20%)`
}
}
},
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%)`,
base: lightBackground,
// dark background with white alpha, to whiten the background and also alphied
// _dark: `color-mix(in srgb, ${darkBackground} 85%, {colors.whiteAlpha.200} 20%)`
_dark: alpha(darkBackground, 0.8)
}
}
},
fg: {
DEFAULT: {
value: {
_light: fgLight.normal,
_dark: fgDark.normal
}
},
max: {
value: {
_light: fgLight.max,
_dark: fgDark.max
}
},
medium: {
value: {
_light: fgLight.medium,
_dark: fgDark.medium
}
},
disabled: {
value: {
_light: fgLight.disabled,
_dark: fgDark.disabled
}
}
},
success: {
DEFAULT: {
value: {
_light: "{colors.green.600}",
_dark: "{colors.green.400}"
}
},
fg: {
value: "black/87"
}
},
warning: {
DEFAULT: {
value: {
_light: "{colors.yellow.500}",
_dark: "{colors.yellow.400}"
}
},
fg: {
value: "black/87"
}
},
error: {
DEFAULT: {
value: {
_light: "#d60b3e",
_dark: "#db6371"
}
},
fg: {
value: "white/87"
}
},
info: {
DEFAULT: {
value: {
_light: "{colors.blue.500}",
_dark: "{colors.blue.400}"
}
},
fg: {
value: "black/87"
}
},
border: {
DEFAULT: {
value: {
_light: borderLight.default,
_dark: borderDark.default
}
},
muted: {
value: {
_light: borderLight.muted,
_dark: borderDark.muted
}
},
hover: {
value: {
_light: borderLight.hover,
_dark: borderDark.hover
}
}
},
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: {
_l