@tenphi/tasty 0.13.1 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +155 -51
- package/dist/config.d.ts +13 -1
- package/dist/config.js +5 -1
- package/dist/config.js.map +1 -1
- package/dist/core/index.d.ts +5 -3
- package/dist/core/index.js +4 -3
- package/dist/debug.d.ts +26 -141
- package/dist/debug.js +356 -635
- package/dist/debug.js.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.js +4 -3
- package/dist/parser/classify.js +2 -1
- package/dist/parser/classify.js.map +1 -1
- package/dist/parser/parser.js +1 -1
- package/dist/plugins/okhsl-plugin.js +2 -275
- package/dist/plugins/okhsl-plugin.js.map +1 -1
- package/dist/plugins/types.d.ts +1 -1
- package/dist/properties/index.js +2 -15
- package/dist/properties/index.js.map +1 -1
- package/dist/ssr/format-property.js +9 -7
- package/dist/ssr/format-property.js.map +1 -1
- package/dist/styles/color.js +9 -5
- package/dist/styles/color.js.map +1 -1
- package/dist/styles/createStyle.js +24 -21
- package/dist/styles/createStyle.js.map +1 -1
- package/dist/styles/index.js +1 -1
- package/dist/styles/predefined.js +1 -1
- package/dist/styles/predefined.js.map +1 -1
- package/dist/styles/types.d.ts +19 -4
- package/dist/tasty.d.ts +9 -9
- package/dist/tasty.js +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/utils/color-math.d.ts +46 -0
- package/dist/utils/color-math.js +749 -0
- package/dist/utils/color-math.js.map +1 -0
- package/dist/utils/color-space.d.ts +5 -0
- package/dist/utils/color-space.js +229 -0
- package/dist/utils/color-space.js.map +1 -0
- package/dist/utils/colors.js +3 -1
- package/dist/utils/colors.js.map +1 -1
- package/dist/utils/mod-attrs.js +1 -1
- package/dist/utils/mod-attrs.js.map +1 -1
- package/dist/utils/process-tokens.d.ts +3 -13
- package/dist/utils/process-tokens.js +18 -98
- package/dist/utils/process-tokens.js.map +1 -1
- package/dist/utils/styles.d.ts +2 -15
- package/dist/utils/styles.js +22 -217
- package/dist/utils/styles.js.map +1 -1
- package/docs/PIPELINE.md +519 -0
- package/docs/README.md +31 -0
- package/docs/adoption.md +16 -6
- package/docs/comparison.md +16 -9
- package/docs/configuration.md +26 -3
- package/docs/debug.md +152 -339
- package/docs/design-system.md +1 -1
- package/docs/dsl.md +3 -1
- package/docs/getting-started.md +29 -13
- package/docs/injector.md +2 -2
- package/docs/methodology.md +3 -1
- package/docs/runtime.md +59 -9
- package/docs/ssr.md +3 -3
- package/docs/styles.md +1 -1
- package/docs/tasty-static.md +13 -2
- package/package.json +4 -3
- package/dist/utils/hsl-to-rgb.js +0 -38
- package/dist/utils/hsl-to-rgb.js.map +0 -1
- package/dist/utils/okhsl-to-rgb.js +0 -296
- package/dist/utils/okhsl-to-rgb.js.map +0 -1
|
@@ -1,25 +1,27 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getColorSpaceComponents, getColorSpaceSuffix, strToColorSpace } from "../utils/color-space.js";
|
|
2
|
+
import { normalizeColorTokenValue, parseColor, parseStyle } from "../utils/styles.js";
|
|
2
3
|
import { toSnakeCase } from "../utils/string.js";
|
|
3
4
|
|
|
4
5
|
//#region src/styles/createStyle.ts
|
|
5
6
|
const CACHE = {};
|
|
6
7
|
/**
|
|
7
|
-
* Convert color fallback chain to
|
|
8
|
-
* Example: var(--primary-color, var(--secondary-color))
|
|
8
|
+
* Convert color fallback chain to component fallback chain.
|
|
9
|
+
* Example: var(--primary-color, var(--secondary-color))
|
|
10
|
+
* → var(--primary-color-oklch, var(--secondary-color-oklch))
|
|
9
11
|
*/
|
|
10
|
-
function
|
|
11
|
-
const
|
|
12
|
-
|
|
12
|
+
function convertColorChainToComponentChain(colorValue) {
|
|
13
|
+
const suffix = getColorSpaceSuffix();
|
|
14
|
+
const componentVarMatch = colorValue.match(/^(?:rgb|hsl|oklch)a?\(\s*(var\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\))\s*\//);
|
|
15
|
+
if (componentVarMatch) return componentVarMatch[1];
|
|
13
16
|
const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
|
|
14
17
|
if (!match) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
if (rgba) return getRgbValuesFromRgbaString(rgba).join(" ");
|
|
18
|
+
const components = getColorSpaceComponents(colorValue);
|
|
19
|
+
if (components !== colorValue) return components;
|
|
18
20
|
return colorValue;
|
|
19
21
|
}
|
|
20
22
|
const [, name, fallback] = match;
|
|
21
|
-
if (!fallback) return `var(--${name}-color
|
|
22
|
-
return `var(--${name}-color
|
|
23
|
+
if (!fallback) return `var(--${name}-color-${suffix})`;
|
|
24
|
+
return `var(--${name}-color-${suffix}, ${convertColorChainToComponentChain(fallback.trim())})`;
|
|
23
25
|
}
|
|
24
26
|
function createStyle(styleName, cssStyle, converter) {
|
|
25
27
|
const key = `${styleName}.${cssStyle ?? ""}`;
|
|
@@ -42,24 +44,25 @@ function createStyle(styleName, cssStyle, converter) {
|
|
|
42
44
|
}
|
|
43
45
|
if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
|
|
44
46
|
styleValue = styleValue.trim();
|
|
45
|
-
const
|
|
47
|
+
const suffix = getColorSpaceSuffix();
|
|
48
|
+
const colorSpaceStr = strToColorSpace(styleValue);
|
|
46
49
|
const { color, name } = parseColor(styleValue);
|
|
47
|
-
if (name &&
|
|
48
|
-
[finalCssStyle]: `var(--${name}-color, ${
|
|
49
|
-
[`${finalCssStyle}
|
|
50
|
+
if (name && colorSpaceStr) return {
|
|
51
|
+
[finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,
|
|
52
|
+
[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(colorSpaceStr)})`
|
|
50
53
|
};
|
|
51
54
|
else if (name) {
|
|
52
55
|
if (color) return {
|
|
53
56
|
[finalCssStyle]: color,
|
|
54
|
-
[`${finalCssStyle}
|
|
57
|
+
[`${finalCssStyle}-${suffix}`]: convertColorChainToComponentChain(color)
|
|
55
58
|
};
|
|
56
59
|
return {
|
|
57
60
|
[finalCssStyle]: `var(--${name}-color)`,
|
|
58
|
-
[`${finalCssStyle}
|
|
61
|
+
[`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`
|
|
59
62
|
};
|
|
60
|
-
} else if (
|
|
61
|
-
[finalCssStyle]:
|
|
62
|
-
[`${finalCssStyle}
|
|
63
|
+
} else if (colorSpaceStr) return {
|
|
64
|
+
[finalCssStyle]: colorSpaceStr,
|
|
65
|
+
[`${finalCssStyle}-${suffix}`]: getColorSpaceComponents(colorSpaceStr)
|
|
63
66
|
};
|
|
64
67
|
return { [finalCssStyle]: color ?? "" };
|
|
65
68
|
}
|
|
@@ -73,5 +76,5 @@ function createStyle(styleName, cssStyle, converter) {
|
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
//#endregion
|
|
76
|
-
export {
|
|
79
|
+
export { convertColorChainToComponentChain, createStyle };
|
|
77
80
|
//# sourceMappingURL=createStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createStyle.js","names":[],"sources":["../../src/styles/createStyle.ts"],"sourcesContent":["import { toSnakeCase } from '../utils/string';\nimport {\n
|
|
1
|
+
{"version":3,"file":"createStyle.js","names":[],"sources":["../../src/styles/createStyle.ts"],"sourcesContent":["import {\n getColorSpaceComponents,\n getColorSpaceSuffix,\n strToColorSpace,\n} from '../utils/color-space';\nimport { toSnakeCase } from '../utils/string';\nimport {\n normalizeColorTokenValue,\n parseColor,\n parseStyle,\n} from '../utils/styles';\nimport type {\n CSSMap,\n StyleHandler,\n StyleValue,\n StyleValueStateMap,\n} from '../utils/styles';\n\nconst CACHE: Record<string, StyleHandler> = {};\n\n/**\n * Convert color fallback chain to component fallback chain.\n * Example: var(--primary-color, var(--secondary-color))\n * → var(--primary-color-oklch, var(--secondary-color-oklch))\n */\nexport function convertColorChainToComponentChain(colorValue: string): string {\n const suffix = getColorSpaceSuffix();\n\n // Handle func(var(--name-color-{suffix}) / alpha) pattern.\n // When #name.opacity is parsed, the classifier produces e.g.\n // oklch(var(--name-color-oklch) / .opacity).\n // The component chain should be just the inner var() reference.\n const componentVarMatch = colorValue.match(\n /^(?:rgb|hsl|oklch)a?\\(\\s*(var\\(--[a-z0-9-]+-color-(?:rgb|hsl|oklch)\\))\\s*\\//,\n );\n if (componentVarMatch) {\n return componentVarMatch[1];\n }\n\n // Match var(--name-color, ...) pattern\n const varPattern = /var\\(--([a-z0-9-]+)-color\\s*(?:,\\s*(.+))?\\)/;\n const match = colorValue.match(varPattern);\n\n if (!match) {\n // Not a color variable — try to convert to components\n const components = getColorSpaceComponents(colorValue);\n if (components !== colorValue) return components;\n return colorValue;\n }\n\n const [, name, fallback] = match;\n\n if (!fallback) {\n return `var(--${name}-color-${suffix})`;\n }\n\n const processedFallback = convertColorChainToComponentChain(fallback.trim());\n return `var(--${name}-color-${suffix}, ${processedFallback})`;\n}\n\nexport function createStyle(\n styleName: string,\n cssStyle?: string,\n converter?: (styleValue: string | number | true) => string | undefined,\n) {\n const key = `${styleName}.${cssStyle ?? ''}`;\n\n if (!CACHE[key]) {\n const styleHandler = (styleMap: StyleValueStateMap): CSSMap | void => {\n let styleValue = styleMap[styleName];\n\n if (styleValue == null || styleValue === false) return;\n\n let finalCssStyle: string;\n const isColorToken =\n !cssStyle && typeof styleName === 'string' && styleName.startsWith('#');\n\n if (isColorToken) {\n const raw = styleName.slice(1);\n const name = toSnakeCase(raw).replace(/^-+/, '');\n finalCssStyle = `--${name}-color`;\n } else {\n finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\\$/, '--');\n }\n\n if (isColorToken) {\n const normalized = normalizeColorTokenValue(styleValue);\n if (normalized === null) return;\n styleValue = normalized;\n }\n\n if (converter && typeof styleValue !== 'string') {\n styleValue = converter(styleValue as string | number | true);\n\n if (!styleValue) return;\n }\n\n if (\n typeof styleValue === 'string' &&\n finalCssStyle.startsWith('--') &&\n finalCssStyle.endsWith('-color')\n ) {\n styleValue = styleValue.trim();\n const suffix = getColorSpaceSuffix();\n\n const colorSpaceStr = strToColorSpace(styleValue as string);\n\n const { color, name } = parseColor(styleValue as string);\n\n if (name && colorSpaceStr) {\n return {\n [finalCssStyle]: `var(--${name}-color, ${colorSpaceStr})`,\n [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix}, ${getColorSpaceComponents(\n colorSpaceStr,\n )})`,\n };\n } else if (name) {\n if (color) {\n return {\n [finalCssStyle]: color,\n [`${finalCssStyle}-${suffix}`]:\n convertColorChainToComponentChain(color),\n };\n }\n\n return {\n [finalCssStyle]: `var(--${name}-color)`,\n [`${finalCssStyle}-${suffix}`]: `var(--${name}-color-${suffix})`,\n };\n } else if (colorSpaceStr) {\n return {\n [finalCssStyle]: colorSpaceStr,\n [`${finalCssStyle}-${suffix}`]:\n getColorSpaceComponents(colorSpaceStr),\n };\n }\n\n return {\n [finalCssStyle]: color ?? '',\n };\n }\n\n const processed = parseStyle(styleValue as StyleValue);\n return { [finalCssStyle]: processed.output };\n };\n\n styleHandler.__lookupStyles = [styleName];\n\n CACHE[key] = styleHandler;\n }\n\n return CACHE[key];\n}\n"],"mappings":";;;;;AAkBA,MAAM,QAAsC,EAAE;;;;;;AAO9C,SAAgB,kCAAkC,YAA4B;CAC5E,MAAM,SAAS,qBAAqB;CAMpC,MAAM,oBAAoB,WAAW,MACnC,8EACD;AACD,KAAI,kBACF,QAAO,kBAAkB;CAK3B,MAAM,QAAQ,WAAW,MADN,8CACuB;AAE1C,KAAI,CAAC,OAAO;EAEV,MAAM,aAAa,wBAAwB,WAAW;AACtD,MAAI,eAAe,WAAY,QAAO;AACtC,SAAO;;CAGT,MAAM,GAAG,MAAM,YAAY;AAE3B,KAAI,CAAC,SACH,QAAO,SAAS,KAAK,SAAS,OAAO;AAIvC,QAAO,SAAS,KAAK,SAAS,OAAO,IADX,kCAAkC,SAAS,MAAM,CAAC,CACjB;;AAG7D,SAAgB,YACd,WACA,UACA,WACA;CACA,MAAM,MAAM,GAAG,UAAU,GAAG,YAAY;AAExC,KAAI,CAAC,MAAM,MAAM;EACf,MAAM,gBAAgB,aAAgD;GACpE,IAAI,aAAa,SAAS;AAE1B,OAAI,cAAc,QAAQ,eAAe,MAAO;GAEhD,IAAI;GACJ,MAAM,eACJ,CAAC,YAAY,OAAO,cAAc,YAAY,UAAU,WAAW,IAAI;AAEzE,OAAI,aAGF,iBAAgB,KADH,YADD,UAAU,MAAM,EAAE,CACD,CAAC,QAAQ,OAAO,GAAG,CACtB;OAE1B,iBAAgB,YAAY,YAAY,UAAU,CAAC,QAAQ,OAAO,KAAK;AAGzE,OAAI,cAAc;IAChB,MAAM,aAAa,yBAAyB,WAAW;AACvD,QAAI,eAAe,KAAM;AACzB,iBAAa;;AAGf,OAAI,aAAa,OAAO,eAAe,UAAU;AAC/C,iBAAa,UAAU,WAAqC;AAE5D,QAAI,CAAC,WAAY;;AAGnB,OACE,OAAO,eAAe,YACtB,cAAc,WAAW,KAAK,IAC9B,cAAc,SAAS,SAAS,EAChC;AACA,iBAAa,WAAW,MAAM;IAC9B,MAAM,SAAS,qBAAqB;IAEpC,MAAM,gBAAgB,gBAAgB,WAAqB;IAE3D,MAAM,EAAE,OAAO,SAAS,WAAW,WAAqB;AAExD,QAAI,QAAQ,cACV,QAAO;MACJ,gBAAgB,SAAS,KAAK,UAAU,cAAc;MACtD,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO,IAAI,wBAChE,cACD,CAAC;KACH;aACQ,MAAM;AACf,SAAI,MACF,QAAO;OACJ,gBAAgB;OAChB,GAAG,cAAc,GAAG,WACnB,kCAAkC,MAAM;MAC3C;AAGH,YAAO;OACJ,gBAAgB,SAAS,KAAK;OAC9B,GAAG,cAAc,GAAG,WAAW,SAAS,KAAK,SAAS,OAAO;MAC/D;eACQ,cACT,QAAO;MACJ,gBAAgB;MAChB,GAAG,cAAc,GAAG,WACnB,wBAAwB,cAAc;KACzC;AAGH,WAAO,GACJ,gBAAgB,SAAS,IAC3B;;GAGH,MAAM,YAAY,WAAW,WAAyB;AACtD,UAAO,GAAG,gBAAgB,UAAU,QAAQ;;AAG9C,eAAa,iBAAiB,CAAC,UAAU;AAEzC,QAAM,OAAO;;AAGf,QAAO,MAAM"}
|
package/dist/styles/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { convertColorChainToComponentChain, createStyle } from "./createStyle.js";
|
|
2
2
|
import { normalizeHandlerDefinition, predefine, registerHandler, resetHandlers, styleHandlers } from "./predefined.js";
|
|
3
3
|
|
|
4
4
|
//#region src/styles/index.ts
|
|
@@ -55,7 +55,7 @@ function defineCustomStyle(names, handler) {
|
|
|
55
55
|
names = handlerWithLookup.__lookupStyles;
|
|
56
56
|
} else if (handler) handlerWithLookup = Object.assign(handler, { __lookupStyles: names });
|
|
57
57
|
else {
|
|
58
|
-
console.warn("
|
|
58
|
+
console.warn("Tasty: incorrect custom style definition: ", names);
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
61
|
if (Array.isArray(names)) names.forEach((name) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n RawStyleHandler,\n StyleHandler,\n StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n\n return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return 'minmax(1px, 1fr) '.repeat(val).trim();\n }\n\n return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return 'auto '.repeat(val).trim();\n }\n\n return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n initialHandlerMapSnapshot = {};\n for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n // Shallow copy the array - handlers themselves are immutable\n initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n if (!initialHandlerMapSnapshot) {\n // predefine() hasn't been called yet, nothing to reset\n return;\n }\n\n // Clear current map\n for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n delete STYLE_HANDLER_MAP[key];\n }\n\n // Restore initial state\n for (const key of Object.keys(initialHandlerMapSnapshot)) {\n STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n }\n}\n\nexport function defineCustomStyle(\n names: string[] | StyleHandler,\n handler?: RawStyleHandler,\n) {\n let handlerWithLookup: StyleHandler;\n\n if (typeof names === 'function') {\n handlerWithLookup = names;\n names = handlerWithLookup.__lookupStyles;\n } else if (handler) {\n handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n } else {\n console.warn('CubeUIKit: incorrect custom style definition: ', names);\n return;\n }\n\n if (Array.isArray(names)) {\n // just to pass type checking\n names.forEach((name) => {\n if (!STYLE_HANDLER_MAP[name]) {\n STYLE_HANDLER_MAP[name] = [];\n }\n\n STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n });\n }\n}\n\ntype ConverterHandler = (\n s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n styleName: string,\n cssStyleName?: string,\n converter?: ConverterHandler,\n) {\n const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n if (!STYLE_HANDLER_MAP[styleName]) {\n STYLE_HANDLER_MAP[styleName] = [];\n }\n\n STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n // Style aliases\n defineStyleAlias('gridAreas', 'grid-template-areas');\n defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n defineStyleAlias(\n 'gridTemplate',\n 'grid-template',\n (val: string | boolean | number | undefined) => {\n if (typeof val !== 'string') return;\n\n return val\n .split('/')\n .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n .join('/');\n },\n );\n // Note: outlineOffset is now handled by outlineStyle\n\n [\n displayStyle,\n transitionStyle,\n fillStyle,\n svgFillStyle,\n widthStyle,\n marginStyle,\n gapStyle,\n flowStyle,\n colorStyle,\n heightStyle,\n radiusStyle,\n borderStyle,\n shadowStyle,\n paddingStyle,\n alignStyle,\n justifyStyle,\n presetStyle,\n outlineStyle,\n scrollbarStyle,\n fadeStyle,\n insetStyle,\n ]\n // @ts-expect-error handler type varies across built-in style handlers\n .forEach((handler) => defineCustomStyle(handler));\n\n // Capture initial state after all built-in handlers are registered\n captureInitialHandlerState();\n\n return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n keyName: string,\n definition: StyleHandlerDefinition,\n): StyleHandler {\n let handler: RawStyleHandler;\n let lookupStyles: string[];\n\n if (typeof definition === 'function') {\n // Function only - lookup styles inferred from key name\n handler = definition;\n lookupStyles = [keyName];\n } else if (Array.isArray(definition)) {\n const [first, fn] = definition;\n\n if (typeof fn !== 'function') {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'Tuple must have a function as the second element: [string, function] or [string[], function].',\n );\n }\n\n handler = fn;\n\n if (typeof first === 'string') {\n // [string, fn] - single lookup style\n lookupStyles = [first];\n } else if (Array.isArray(first)) {\n // [string[], fn] - multiple lookup styles\n lookupStyles = first;\n } else {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'First element must be a string or string array.',\n );\n }\n } else {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'Expected function, [string, function], or [string[], function].',\n );\n }\n\n // Validate handler in dev mode\n validateHandler(keyName, handler, lookupStyles);\n\n // Wrap the handler to avoid mutation issues when the same function\n // is reused for multiple handler definitions. Each registration\n // gets its own function identity with its own __lookupStyles.\n const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n wrappedHandler.__lookupStyles = lookupStyles;\n\n return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n name: string,\n handler: RawStyleHandler,\n lookupStyles: string[],\n): void {\n if (!devMode) return;\n\n if (typeof handler !== 'function') {\n console.warn(\n `[Tasty] Handler \"${name}\" is not a function. ` +\n 'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n );\n }\n\n if (\n !lookupStyles ||\n !Array.isArray(lookupStyles) ||\n lookupStyles.length === 0\n ) {\n console.warn(\n `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n 'Expected non-empty array of style names.',\n );\n }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n if (!devMode) return;\n if (result === undefined || result === null) return; // void is valid\n\n // Check for empty string (migration from old pattern)\n if (result === '') {\n console.warn(\n `[Tasty] Handler \"${name}\" returned empty string. ` +\n 'Return void/undefined instead for no output.',\n );\n return;\n }\n\n // Check result is object (CSSMap or CSSMap[])\n if (typeof result !== 'object') {\n console.warn(\n `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n 'Expected CSSMap, CSSMap[], or void.',\n );\n }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n const lookupStyles = handler.__lookupStyles;\n\n if (!lookupStyles || lookupStyles.length === 0) {\n if (devMode) {\n console.warn(\n '[Tasty] Cannot register handler without __lookupStyles property.',\n );\n }\n return;\n }\n\n // Find and remove existing handlers that would conflict\n // A handler conflicts if it handles any of the same styles as the new handler\n const handlersToRemove = new Set<StyleHandler>();\n\n for (const styleName of lookupStyles) {\n const existing = STYLE_HANDLER_MAP[styleName];\n if (existing) {\n for (const existingHandler of existing) {\n handlersToRemove.add(existingHandler);\n }\n }\n }\n\n // Remove conflicting handlers from ALL their lookup styles\n for (const oldHandler of handlersToRemove) {\n const oldLookupStyles = oldHandler.__lookupStyles;\n if (oldLookupStyles) {\n for (const oldStyleName of oldLookupStyles) {\n const handlers = STYLE_HANDLER_MAP[oldStyleName];\n if (handlers) {\n const filtered = handlers.filter((h) => h !== oldHandler);\n if (filtered.length === 0) {\n delete STYLE_HANDLER_MAP[oldStyleName];\n } else {\n STYLE_HANDLER_MAP[oldStyleName] = filtered;\n }\n }\n }\n }\n }\n\n // Register the new handler under its lookup styles\n for (const styleName of lookupStyles) {\n const existing = STYLE_HANDLER_MAP[styleName];\n if (existing) {\n existing.push(handler);\n } else {\n STYLE_HANDLER_MAP[styleName] = [handler];\n }\n }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n const fn = handler as unknown as (props: unknown) => unknown;\n const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n wrapped.__lookupStyles = handler.__lookupStyles;\n return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n * handlers: {\n * fill: ({ fill }) => {\n * if (fill?.startsWith('gradient:')) {\n * return { background: fill.slice(9) };\n * }\n * return styleHandlers.fill({ fill });\n * },\n * },\n * });\n * ```\n */\nexport const styleHandlers = {\n align: wrapHandler(alignStyle),\n border: wrapHandler(borderStyle),\n color: wrapHandler(colorStyle),\n display: wrapHandler(displayStyle),\n fade: wrapHandler(fadeStyle),\n fill: wrapHandler(fillStyle),\n svgFill: wrapHandler(svgFillStyle),\n flow: wrapHandler(flowStyle),\n gap: wrapHandler(gapStyle),\n height: wrapHandler(heightStyle),\n inset: wrapHandler(insetStyle),\n justify: wrapHandler(justifyStyle),\n margin: wrapHandler(marginStyle),\n outline: wrapHandler(outlineStyle),\n padding: wrapHandler(paddingStyle),\n preset: wrapHandler(presetStyle),\n radius: wrapHandler(radiusStyle),\n scrollbar: wrapHandler(scrollbarStyle),\n shadow: wrapHandler(shadowStyle),\n transition: wrapHandler(transitionStyle),\n width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n RawStyleHandler,\n StyleHandler,\n StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n\n return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return 'minmax(1px, 1fr) '.repeat(val).trim();\n }\n\n return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n if (typeof val === 'number') {\n return 'auto '.repeat(val).trim();\n }\n\n return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n initialHandlerMapSnapshot = {};\n for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n // Shallow copy the array - handlers themselves are immutable\n initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n if (!initialHandlerMapSnapshot) {\n // predefine() hasn't been called yet, nothing to reset\n return;\n }\n\n // Clear current map\n for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n delete STYLE_HANDLER_MAP[key];\n }\n\n // Restore initial state\n for (const key of Object.keys(initialHandlerMapSnapshot)) {\n STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n }\n}\n\nexport function defineCustomStyle(\n names: string[] | StyleHandler,\n handler?: RawStyleHandler,\n) {\n let handlerWithLookup: StyleHandler;\n\n if (typeof names === 'function') {\n handlerWithLookup = names;\n names = handlerWithLookup.__lookupStyles;\n } else if (handler) {\n handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n } else {\n console.warn('Tasty: incorrect custom style definition: ', names);\n return;\n }\n\n if (Array.isArray(names)) {\n // just to pass type checking\n names.forEach((name) => {\n if (!STYLE_HANDLER_MAP[name]) {\n STYLE_HANDLER_MAP[name] = [];\n }\n\n STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n });\n }\n}\n\ntype ConverterHandler = (\n s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n styleName: string,\n cssStyleName?: string,\n converter?: ConverterHandler,\n) {\n const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n if (!STYLE_HANDLER_MAP[styleName]) {\n STYLE_HANDLER_MAP[styleName] = [];\n }\n\n STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n // Style aliases\n defineStyleAlias('gridAreas', 'grid-template-areas');\n defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n defineStyleAlias(\n 'gridTemplate',\n 'grid-template',\n (val: string | boolean | number | undefined) => {\n if (typeof val !== 'string') return;\n\n return val\n .split('/')\n .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n .join('/');\n },\n );\n // Note: outlineOffset is now handled by outlineStyle\n\n [\n displayStyle,\n transitionStyle,\n fillStyle,\n svgFillStyle,\n widthStyle,\n marginStyle,\n gapStyle,\n flowStyle,\n colorStyle,\n heightStyle,\n radiusStyle,\n borderStyle,\n shadowStyle,\n paddingStyle,\n alignStyle,\n justifyStyle,\n presetStyle,\n outlineStyle,\n scrollbarStyle,\n fadeStyle,\n insetStyle,\n ]\n // @ts-expect-error handler type varies across built-in style handlers\n .forEach((handler) => defineCustomStyle(handler));\n\n // Capture initial state after all built-in handlers are registered\n captureInitialHandlerState();\n\n return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n keyName: string,\n definition: StyleHandlerDefinition,\n): StyleHandler {\n let handler: RawStyleHandler;\n let lookupStyles: string[];\n\n if (typeof definition === 'function') {\n // Function only - lookup styles inferred from key name\n handler = definition;\n lookupStyles = [keyName];\n } else if (Array.isArray(definition)) {\n const [first, fn] = definition;\n\n if (typeof fn !== 'function') {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'Tuple must have a function as the second element: [string, function] or [string[], function].',\n );\n }\n\n handler = fn;\n\n if (typeof first === 'string') {\n // [string, fn] - single lookup style\n lookupStyles = [first];\n } else if (Array.isArray(first)) {\n // [string[], fn] - multiple lookup styles\n lookupStyles = first;\n } else {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'First element must be a string or string array.',\n );\n }\n } else {\n throw new Error(\n `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n 'Expected function, [string, function], or [string[], function].',\n );\n }\n\n // Validate handler in dev mode\n validateHandler(keyName, handler, lookupStyles);\n\n // Wrap the handler to avoid mutation issues when the same function\n // is reused for multiple handler definitions. Each registration\n // gets its own function identity with its own __lookupStyles.\n const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n wrappedHandler.__lookupStyles = lookupStyles;\n\n return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n name: string,\n handler: RawStyleHandler,\n lookupStyles: string[],\n): void {\n if (!devMode) return;\n\n if (typeof handler !== 'function') {\n console.warn(\n `[Tasty] Handler \"${name}\" is not a function. ` +\n 'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n );\n }\n\n if (\n !lookupStyles ||\n !Array.isArray(lookupStyles) ||\n lookupStyles.length === 0\n ) {\n console.warn(\n `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n 'Expected non-empty array of style names.',\n );\n }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n if (!devMode) return;\n if (result === undefined || result === null) return; // void is valid\n\n // Check for empty string (migration from old pattern)\n if (result === '') {\n console.warn(\n `[Tasty] Handler \"${name}\" returned empty string. ` +\n 'Return void/undefined instead for no output.',\n );\n return;\n }\n\n // Check result is object (CSSMap or CSSMap[])\n if (typeof result !== 'object') {\n console.warn(\n `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n 'Expected CSSMap, CSSMap[], or void.',\n );\n }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n const lookupStyles = handler.__lookupStyles;\n\n if (!lookupStyles || lookupStyles.length === 0) {\n if (devMode) {\n console.warn(\n '[Tasty] Cannot register handler without __lookupStyles property.',\n );\n }\n return;\n }\n\n // Find and remove existing handlers that would conflict\n // A handler conflicts if it handles any of the same styles as the new handler\n const handlersToRemove = new Set<StyleHandler>();\n\n for (const styleName of lookupStyles) {\n const existing = STYLE_HANDLER_MAP[styleName];\n if (existing) {\n for (const existingHandler of existing) {\n handlersToRemove.add(existingHandler);\n }\n }\n }\n\n // Remove conflicting handlers from ALL their lookup styles\n for (const oldHandler of handlersToRemove) {\n const oldLookupStyles = oldHandler.__lookupStyles;\n if (oldLookupStyles) {\n for (const oldStyleName of oldLookupStyles) {\n const handlers = STYLE_HANDLER_MAP[oldStyleName];\n if (handlers) {\n const filtered = handlers.filter((h) => h !== oldHandler);\n if (filtered.length === 0) {\n delete STYLE_HANDLER_MAP[oldStyleName];\n } else {\n STYLE_HANDLER_MAP[oldStyleName] = filtered;\n }\n }\n }\n }\n }\n\n // Register the new handler under its lookup styles\n for (const styleName of lookupStyles) {\n const existing = STYLE_HANDLER_MAP[styleName];\n if (existing) {\n existing.push(handler);\n } else {\n STYLE_HANDLER_MAP[styleName] = [handler];\n }\n }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n const fn = handler as unknown as (props: unknown) => unknown;\n const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n wrapped.__lookupStyles = handler.__lookupStyles;\n return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n * handlers: {\n * fill: ({ fill }) => {\n * if (fill?.startsWith('gradient:')) {\n * return { background: fill.slice(9) };\n * }\n * return styleHandlers.fill({ fill });\n * },\n * },\n * });\n * ```\n */\nexport const styleHandlers = {\n align: wrapHandler(alignStyle),\n border: wrapHandler(borderStyle),\n color: wrapHandler(colorStyle),\n display: wrapHandler(displayStyle),\n fade: wrapHandler(fadeStyle),\n fill: wrapHandler(fillStyle),\n svgFill: wrapHandler(svgFillStyle),\n flow: wrapHandler(flowStyle),\n gap: wrapHandler(gapStyle),\n height: wrapHandler(heightStyle),\n inset: wrapHandler(insetStyle),\n justify: wrapHandler(justifyStyle),\n margin: wrapHandler(marginStyle),\n outline: wrapHandler(outlineStyle),\n padding: wrapHandler(paddingStyle),\n preset: wrapHandler(presetStyle),\n radius: wrapHandler(radiusStyle),\n scrollbar: wrapHandler(scrollbarStyle),\n shadow: wrapHandler(shadowStyle),\n transition: wrapHandler(transitionStyle),\n width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}
|
package/dist/styles/types.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ type PresetNameKey = Extract<keyof TastyPresetNames, string>;
|
|
|
40
40
|
type PresetName = [PresetNameKey] extends [never] ? string : PresetNameKey;
|
|
41
41
|
type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
42
42
|
type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
|
|
43
|
+
type ColorValue = `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})` | (string & {});
|
|
43
44
|
type NoType = false | null | undefined;
|
|
44
45
|
interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type' | 'gap' | 'padding' | 'margin' | 'width' | 'height' | 'border' | 'transition' | 'placeContent' | 'placeItems'> {
|
|
45
46
|
/**
|
|
@@ -57,13 +58,20 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
57
58
|
/**
|
|
58
59
|
* Set the background color of the element. Shortcut for `background-color` with enhanced support for Tasty color tokens and syntaxes.
|
|
59
60
|
*
|
|
61
|
+
* Supports double-color syntax: the second color is applied as a foreground overlay via a CSS custom property.
|
|
62
|
+
*
|
|
60
63
|
* Examples:
|
|
61
64
|
* - `fill="#purple.10"` // purple background with 10% opacity
|
|
62
65
|
* - `fill="#danger"` // danger theme color
|
|
63
66
|
* - `fill="rgb(255 128 0)"` // custom RGB color
|
|
67
|
+
* - `fill="rgb(255 128 0 / 0.5)"` // RGB with opacity
|
|
68
|
+
* - `fill="hsl(200 100% 50%)"` // HSL color
|
|
69
|
+
* - `fill="okhsl(200 100% 50%)"` // perceptually uniform OKHSL color
|
|
70
|
+
* - `fill="oklch(0.7 0.15 200)"` // OKLCH color
|
|
71
|
+
* - `fill="#primary #secondary"` // double color (second as foreground overlay)
|
|
64
72
|
* - `fill={true}` // default fill color
|
|
65
73
|
*/
|
|
66
|
-
fill?:
|
|
74
|
+
fill?: ColorValue | boolean;
|
|
67
75
|
/**
|
|
68
76
|
* @deprecated Use `fill` instead.
|
|
69
77
|
*/
|
|
@@ -92,19 +100,26 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
92
100
|
* - `svgFill="#purple.10"` // purple fill with 10% opacity
|
|
93
101
|
* - `svgFill="#danger"` // danger theme color
|
|
94
102
|
* - `svgFill="rgb(255 128 0)"` // custom RGB color
|
|
103
|
+
* - `svgFill="hsl(200 100% 50%)"` // HSL color
|
|
104
|
+
* - `svgFill="okhsl(200 100% 50%)"` // OKHSL color
|
|
105
|
+
* - `svgFill="oklch(0.7 0.15 200)"` // OKLCH color
|
|
95
106
|
* - `svgFill="currentColor"` // inherit from parent color
|
|
96
107
|
*/
|
|
97
|
-
svgFill?:
|
|
108
|
+
svgFill?: ColorValue;
|
|
98
109
|
/**
|
|
99
110
|
* Set the text (current) color of the element. Shortcut for `color` with enhanced support for Tasty color tokens and syntaxes.
|
|
100
111
|
*
|
|
101
112
|
* Examples:
|
|
102
113
|
* - `color="#purple"` // purple text color
|
|
103
114
|
* - `color="#danger.6"` // danger color with 60% opacity
|
|
115
|
+
* - `color="rgb(255 128 0)"` // custom RGB color
|
|
116
|
+
* - `color="hsl(200 100% 50%)"` // HSL color
|
|
117
|
+
* - `color="okhsl(200 100% 50%)"` // OKHSL color
|
|
118
|
+
* - `color="oklch(0.7 0.15 200)"` // OKLCH color
|
|
104
119
|
* - `color="red"` // CSS color name
|
|
105
120
|
* - `color={true}` // currentColor
|
|
106
121
|
*/
|
|
107
|
-
color?:
|
|
122
|
+
color?: ColorValue | boolean;
|
|
108
123
|
/**
|
|
109
124
|
* The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
|
|
110
125
|
*
|
|
@@ -500,7 +515,7 @@ type ConfigTokenValue = string | number | boolean | Record<string, string | numb
|
|
|
500
515
|
* Keys must start with `$` (value tokens) or `#` (color tokens).
|
|
501
516
|
*
|
|
502
517
|
* - `$name` keys become `--name` CSS custom properties
|
|
503
|
-
* - `#name` keys become `--name-color` and `--name-color-
|
|
518
|
+
* - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
|
|
504
519
|
*/
|
|
505
520
|
type ConfigTokens = Record<`$${string}` | `#${string}`, ConfigTokenValue>;
|
|
506
521
|
//#endregion
|
package/dist/tasty.d.ts
CHANGED
|
@@ -104,12 +104,8 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
104
104
|
image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
|
|
105
105
|
marker?: StyleValue<csstype.Property.Marker | undefined> | StyleValueStateMap<csstype.Property.Marker | undefined>;
|
|
106
106
|
mask?: StyleValue<csstype.Property.Mask<string | number> | undefined> | StyleValueStateMap<csstype.Property.Mask<string | number> | undefined>;
|
|
107
|
-
fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `
|
|
108
|
-
|
|
109
|
-
right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
|
|
110
|
-
bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
|
|
111
|
-
left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
|
|
112
|
-
color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
|
|
107
|
+
fill?: StyleValue<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
|
|
108
|
+
color?: StyleValue<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<boolean | ((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
|
|
113
109
|
font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
|
|
114
110
|
outline?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
|
|
115
111
|
gap?: StyleValue<boolean | csstype.Property.Gap<string | number> | undefined> | StyleValueStateMap<boolean | csstype.Property.Gap<string | number> | undefined>;
|
|
@@ -196,6 +192,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
196
192
|
borderTopRightRadius?: StyleValue<csstype.Property.BorderTopRightRadius<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopRightRadius<string | number> | undefined>;
|
|
197
193
|
borderTopStyle?: StyleValue<csstype.Property.BorderTopStyle | undefined> | StyleValueStateMap<csstype.Property.BorderTopStyle | undefined>;
|
|
198
194
|
borderTopWidth?: StyleValue<csstype.Property.BorderTopWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopWidth<string | number> | undefined>;
|
|
195
|
+
bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
|
|
199
196
|
boxDecorationBreak?: StyleValue<csstype.Property.BoxDecorationBreak | undefined> | StyleValueStateMap<csstype.Property.BoxDecorationBreak | undefined>;
|
|
200
197
|
boxShadow?: StyleValue<csstype.Property.BoxShadow | undefined> | StyleValueStateMap<csstype.Property.BoxShadow | undefined>;
|
|
201
198
|
boxSizing?: StyleValue<csstype.Property.BoxSizing | undefined> | StyleValueStateMap<csstype.Property.BoxSizing | undefined>;
|
|
@@ -306,6 +303,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
306
303
|
justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
|
|
307
304
|
justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
|
|
308
305
|
justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
|
|
306
|
+
left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
|
|
309
307
|
letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
|
|
310
308
|
lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
|
|
311
309
|
lineBreak?: StyleValue<csstype.Property.LineBreak | undefined> | StyleValueStateMap<csstype.Property.LineBreak | undefined>;
|
|
@@ -410,6 +408,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
410
408
|
quotes?: StyleValue<csstype.Property.Quotes | undefined> | StyleValueStateMap<csstype.Property.Quotes | undefined>;
|
|
411
409
|
r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
|
|
412
410
|
resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
|
|
411
|
+
right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
|
|
413
412
|
rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
|
|
414
413
|
rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
|
|
415
414
|
rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
|
|
@@ -498,6 +497,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
498
497
|
textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
|
|
499
498
|
textWrapStyle?: StyleValue<csstype.Property.TextWrapStyle | undefined> | StyleValueStateMap<csstype.Property.TextWrapStyle | undefined>;
|
|
500
499
|
timelineScope?: StyleValue<csstype.Property.TimelineScope | undefined> | StyleValueStateMap<csstype.Property.TimelineScope | undefined>;
|
|
500
|
+
top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
|
|
501
501
|
touchAction?: StyleValue<csstype.Property.TouchAction | undefined> | StyleValueStateMap<csstype.Property.TouchAction | undefined>;
|
|
502
502
|
transform?: StyleValue<csstype.Property.Transform | undefined> | StyleValueStateMap<csstype.Property.Transform | undefined>;
|
|
503
503
|
transformBox?: StyleValue<csstype.Property.TransformBox | undefined> | StyleValueStateMap<csstype.Property.TransformBox | undefined>;
|
|
@@ -957,7 +957,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
957
957
|
colorInterpolation?: StyleValue<csstype.Property.ColorInterpolation | undefined> | StyleValueStateMap<csstype.Property.ColorInterpolation | undefined>;
|
|
958
958
|
colorRendering?: StyleValue<csstype.Property.ColorRendering | undefined> | StyleValueStateMap<csstype.Property.ColorRendering | undefined>;
|
|
959
959
|
glyphOrientationVertical?: StyleValue<csstype.Property.GlyphOrientationVertical | undefined> | StyleValueStateMap<csstype.Property.GlyphOrientationVertical | undefined>;
|
|
960
|
-
svgFill?: StyleValue<(string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `
|
|
960
|
+
svgFill?: StyleValue<((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined> | StyleValueStateMap<((string & {}) | `#${string}` | `#${string}.0` | `#${string}.1` | `#${string}.2` | `#${string}.7` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.01` | `#${string}.02` | `#${string}.07` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.10` | `#${string}.11` | `#${string}.12` | `#${string}.17` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.21` | `#${string}.22` | `#${string}.27` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.70` | `#${string}.71` | `#${string}.72` | `#${string}.77` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.30` | `#${string}.31` | `#${string}.32` | `#${string}.37` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.41` | `#${string}.42` | `#${string}.47` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.51` | `#${string}.52` | `#${string}.57` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.61` | `#${string}.62` | `#${string}.67` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.81` | `#${string}.82` | `#${string}.87` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.91` | `#${string}.92` | `#${string}.97` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})`) | undefined>;
|
|
961
961
|
fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
|
|
962
962
|
scrollbar?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
|
|
963
963
|
boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;
|
|
@@ -970,12 +970,12 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
|
|
|
970
970
|
gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
|
|
971
971
|
preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
|
|
972
972
|
align?: StyleValue<"center" | (string & {}) | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined> | StyleValueStateMap<"center" | (string & {}) | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined>;
|
|
973
|
-
justify?: StyleValue<"center" |
|
|
973
|
+
justify?: StyleValue<"center" | (string & {}) | "left" | "right" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<"center" | (string & {}) | "left" | "right" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
|
|
974
974
|
place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
|
|
975
975
|
"@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
|
|
976
976
|
"@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
|
|
977
977
|
recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
|
|
978
|
-
} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "style" | "clipPath" | "filter" | "image" | "marker" | "mask" | "fill" | "top" | "right" | "bottom" | "left" | "qa" | "qaVal" | "color" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "fade" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
|
|
978
|
+
} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "style" | "clipPath" | "filter" | "image" | "marker" | "mask" | "fill" | "qa" | "qaVal" | "color" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "fade" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
|
|
979
979
|
//#endregion
|
|
980
980
|
export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
|
|
981
981
|
//# sourceMappingURL=tasty.d.ts.map
|
package/dist/tasty.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
|
|
2
1
|
import { isSelector } from "./pipeline/index.js";
|
|
3
2
|
import { BASE_STYLES } from "./styles/list.js";
|
|
4
3
|
import { _modAttrs } from "./utils/mod-attrs.js";
|
|
5
4
|
import { mergeStyles } from "./utils/merge-styles.js";
|
|
5
|
+
import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
|
|
6
6
|
import { hasKeys } from "./utils/has-keys.js";
|
|
7
7
|
import { useStyles } from "./hooks/useStyles.js";
|
|
8
8
|
import { getDisplayName } from "./utils/get-display-name.js";
|
package/dist/types.d.ts
CHANGED
|
@@ -46,7 +46,7 @@ type TokenValue = string | number | boolean | undefined | null;
|
|
|
46
46
|
/**
|
|
47
47
|
* Tokens definition for inline CSS custom properties.
|
|
48
48
|
* - `$name` keys become `--name` CSS properties
|
|
49
|
-
* - `#name` keys become `--name-color` and `--name-color-
|
|
49
|
+
* - `#name` keys become `--name-color` and `--name-color-{colorSpace}` CSS properties
|
|
50
50
|
*/
|
|
51
51
|
type Tokens = Record<`$${string}` | `#${string}`, TokenValue>;
|
|
52
52
|
type Caps = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
|