UNPKG

@yamada-ui/react

Version:

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

1 lines • 17.3 kB
{"version":3,"file":"var.cjs","names":["value","DEFAULT_VAR_PREFIX","system: System","defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","computedValue: DefineThemeValue","resolvedValue: DefineThemeValue | Dict","cssMap: CSSMap","cssVars: Dict","objOrArray","result: [string, any][]","getStyle"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n CSSMap,\n DefineThemeValue,\n System,\n ThemeToken,\n UsageTheme,\n VariableTokens,\n VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n calc,\n escape,\n isArray,\n isNull,\n isObject,\n isString,\n isUndefined,\n merge,\n replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n animation,\n colorMix,\n conditions,\n css,\n getStyle,\n gradient,\n injectKeyframes,\n} from \"../css\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n reference: string\n variable: string\n}\n\nexport function transformInterpolation(\n value: any,\n callback: (value: string, fallbackValue?: string) => string,\n) {\n if (isString(value)) {\n return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n const [token, fallbackValue] = value.split(/,(.+)/)\n\n return callback(token.trim(), fallbackValue?.trim())\n })\n } else {\n return value\n }\n}\n\nexport function getVar(token: string, fallback?: string) {\n if (!token.startsWith(\"--\")) token = `--${token}`\n\n token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n return function (token: string) {\n const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n return `--${prefix}-${token}`\n }\n}\n\nexport function getColorSchemeVar(system: System) {\n return function (value: any, fallback?: string) {\n if (!isString(value)) return value\n\n const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n const [, token] = value.split(\".\")\n\n return getVar(`${prefix}-colorScheme-${token}`, fallback)\n }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n prefix: string = DEFAULT_VAR_PREFIX,\n theme: UsageTheme,\n breakpoints: Breakpoints,\n) {\n return function (tokens: VariableTokens) {\n const { getQuery, isResponsive } = breakpoints\n\n function tokenToVar(token: string): Variable {\n token = token.replace(/\\./g, \"-\")\n token = token.replace(/\\//g, \"\\\\/\")\n\n const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n const reference = `var(${variable})`\n\n return { reference, variable }\n }\n\n return function (\n cssMap: CSSMap = {},\n cssVars: Dict = {},\n prevTokens?: VariableTokens,\n ): { cssMap: CSSMap; cssVars: Dict } {\n const system: System = { ...defaultSystem, cssMap }\n const options = { css, system, theme }\n\n function getRelatedReference(\n token: string,\n value: ParsedValue = \"\",\n ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n if (token === relatedToken) return [, value]\n\n const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n if (!targetToken) return [, value]\n\n const { reference, variable } = tokenToVar(relatedToken)\n\n return [variable, reference]\n }\n\n function valueToVar(value: any) {\n return transformInterpolation(value, (value, fallbackValue) => {\n if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n return colorMix(value, { fallback: fallbackValue, system })\n } else {\n const token = tokens[value] ?? prevTokens?.[value]\n\n if (token) {\n return tokenToVar(value).reference\n } else if (value in cssMap && cssMap[value]?.ref) {\n return cssMap[value].ref\n } else if (fallbackValue) {\n fallbackValue =\n fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n ? cssMap[fallbackValue]?.ref\n : fallbackValue\n\n return `var(--${prefix}-${value}, ${fallbackValue})`\n } else {\n return `var(--${prefix}-${value})`\n }\n }\n })\n }\n\n function createNegativeVar(token: string, reference: string) {\n const paths = token.split(\".\")\n const [start, ...rest] = paths\n\n const negativeToken = `${start}.-${rest.join(\".\")}`\n\n const negativeReference = calc.negate(reference)\n\n return { negativeReference, negativeToken }\n }\n\n function createAnimationVar(value: VariableValue) {\n if (isArray(value)) {\n return value.map((value) => animation(value, options)).join(\",\")\n } else {\n return animation(value, options)\n }\n }\n\n function createGradientVar(token: string, value: DefineThemeValue) {\n return function (semantic: boolean) {\n if (!semantic) {\n return gradient(value, options)\n } else {\n const [variable, reference] = getRelatedReference(token, value)\n\n return variable ? reference : gradient(value, options)\n }\n }\n }\n\n function createKeyframesVar(token: string, value: any) {\n return function (semantic: boolean) {\n if (!semantic) {\n return injectKeyframes(css(system, theme)(value))\n } else {\n const [variable, reference] = getRelatedReference(token, value)\n\n return variable\n ? reference\n : injectKeyframes(css(system, theme)(value))\n }\n }\n }\n\n function createColorVar(\n token: string,\n properties: string[],\n value: DefineThemeValue,\n ) {\n return function (semantic: boolean) {\n if (!semantic) {\n return colorMix(value, { ...options, properties })\n } else {\n const [variable, reference] = getRelatedReference(token, value)\n\n return variable\n ? reference\n : colorMix(value, { ...options, properties })\n }\n }\n }\n\n function createVar(\n token: string,\n value: VariableValue,\n variable: string,\n ) {\n return function (semantic: boolean, queries: string[] = []) {\n if (isAnimation(token)) value = createAnimationVar(value)\n\n if (isArray(value)) {\n const [lightValue, darkValue] = value\n\n createVar(token, lightValue, variable)(semantic, queries)\n createVar(\n token,\n darkValue,\n variable,\n )(semantic, [...queries, conditions._dark])\n } else if (isResponsive(value, true)) {\n Object.entries(value).forEach(([key, value]) => {\n if (key === \"base\") {\n createVar(token, value, variable)(semantic, queries)\n } else {\n const query = getQuery(key)\n\n if (!query) return\n\n createVar(token, value, variable)(semantic, [...queries, query])\n }\n })\n } else {\n const computedValue: DefineThemeValue = valueToVar(value)\n\n let resolvedValue: DefineThemeValue | Dict = computedValue\n\n if (isKeyframes(token)) {\n resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n } else if (isGradient(token)) {\n resolvedValue = createGradientVar(token, computedValue)(semantic)\n } else if (isColor(token)) {\n resolvedValue = createColorVar(\n token,\n [variable],\n computedValue,\n )(semantic)\n } else if (semantic) {\n const [, reference] = getRelatedReference(token, computedValue)\n\n resolvedValue = reference\n }\n\n if (!isObject(resolvedValue))\n resolvedValue = { [variable]: resolvedValue }\n\n const resolvedCssVars = queries.reduceRight<Dict>(\n (prev, key) => ({ [key]: prev }),\n resolvedValue,\n )\n\n cssVars = merge(cssVars, resolvedCssVars)\n }\n }\n }\n\n for (let [token, { semantic, value }] of Object.entries(tokens)) {\n const { reference, variable } = tokenToVar(token)\n\n createVar(token, value, variable)(semantic)\n\n if (isSpace(token)) {\n const { negativeReference, negativeToken } = createNegativeVar(\n token,\n reference,\n )\n\n cssMap[negativeToken] = { ref: negativeReference, var: variable }\n }\n\n cssMap[token] = { ref: reference, var: variable }\n }\n\n return { cssMap, cssVars }\n }\n }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n return function (prevTokens?: VariableTokens) {\n let cssMap: CSSMap = {}\n let cssVars: Dict = {}\n\n for (const fn of fns) {\n const result = fn(cssMap, cssVars, prevTokens)\n\n cssMap = { ...cssMap, ...result.cssMap }\n cssVars = { ...cssVars, ...result.cssVars }\n }\n\n return { cssMap, cssVars }\n }\n}\n\nexport function varAttr(\n value: StyleValueWithCondition<number | string> | undefined,\n token?: ThemeToken,\n fallbackValue?: string,\n): StyleValueWithCondition<number | string> | undefined {\n if (isUndefined(value) || isNull(value)) return value\n\n if (isObject(value) || isArray(value)) {\n return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n } else {\n return token ? `{${token}.${value}, ${fallbackValue ?? value}}` : value\n }\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n objOrArray: Y,\n targets: { [key in CSSProperties]?: string },\n isInvalidProp?: (prop: string) => boolean,\n): Y {\n if (!objOrArray) return objOrArray\n\n function callback(objOrArray: Dict) {\n return Object.fromEntries(\n Object.entries(objOrArray).flatMap(function ([prop, value]) {\n if (isInvalidProp?.(prop)) return [[prop, value]]\n\n const target = targets[prop]\n const result: [string, any][] = []\n\n if (target) {\n const { token } = getStyle(prop) ?? {}\n\n result.push([\n `--${target}`,\n token ? `{${token}.${value}, ${value}}` : value,\n ])\n } else if (isObject(value)) {\n result.push([prop, injectVars(value, targets)])\n } else {\n result.push([prop, value])\n }\n\n return result\n }),\n )\n }\n\n if (isArray(objOrArray)) {\n return objOrArray.map(callback) as Y\n } else {\n return callback(objOrArray) as Y\n }\n}\n"],"mappings":"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"}