diff --git a/src/rules/__tests__/new-color-css-vars.test.js b/src/rules/__tests__/new-color-css-vars.test.js index 162fb823..8afece87 100644 --- a/src/rules/__tests__/new-color-css-vars.test.js +++ b/src/rules/__tests__/new-color-css-vars.test.js @@ -17,20 +17,57 @@ ruleTester.run('no-color-css-vars', rule, { code: `{color: 'fg.default'}`, }, { - code: ``, + code: ``, }, { - code: ``, + code: ``, }, { - code: `
`, + code: ``, }, { code: ``, }, + { + code: `
`, + }, + { + name: 'variable with number', + code: ` + const size = 2 + export const Fixture = + `, + }, ], invalid: [ { + name: 'attribute: simple variable', + code: ``, + output: ``, + errors: [ + { + message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + ], + }, + { + name: 'attribute: conditional variable', + code: ``, + output: ``, + errors: [ + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + ], + }, + { + name: 'sx: simple variable', code: ``, output: ``, errors: [ @@ -40,16 +77,27 @@ ruleTester.run('no-color-css-vars', rule, { ], }, { + name: 'style: simple variable', + code: `
`, + output: `
`, + errors: [ + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + ], + }, + { + name: 'sx: nested variable', code: ` `, output: ` @@ -61,34 +109,83 @@ ruleTester.run('no-color-css-vars', rule, { ], }, { - code: ``, - output: ``, + name: 'style: nested variable', + code: ` + + `, + output: ` + + `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', }, ], }, { - code: ``, - output: ``, + name: 'value variable in scope', + code: ` + const highlightedStyle = props.highlighted + ? { + borderRadius: '50%', + boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`, + } + : {} + const bg = 'var(--color-canvas-subtle)' + const sx = disabled ? {color: 'var(--color-primer-fg-disabled)'} : undefined + export const Fixture = + `, + output: ` + const highlightedStyle = props.highlighted + ? { + borderRadius: '50%', + boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`, + } + : {} + const bg = 'var(--bgColor-muted, var(--color-canvas-subtle))' + const sx = disabled ? {color: 'var(--fgColor-disabled, var(--color-primer-fg-disabled))'} : undefined + export const Fixture = + `, errors: [ { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + }, + { + message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))', + }, + { + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + }, + { + message: + 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))', }, ], }, { - code: ``, - output: ``, + name: 'conditional with !important', + code: ` + const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {} + `, + output: ` + const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {} + `, errors: [ { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', }, ], }, { - name: 'variable in scope', + name: 'variable object in scope', code: ` const baseStyles = { color: 'var(--color-fg-muted)' } export const Fixture = @@ -117,15 +214,486 @@ ruleTester.run('no-color-css-vars', rule, { { message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', }, + { + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + }, + ], + }, + { + name: 'variable in styled.component', + code: ` + import {sx, SxProp} from '@primer/react' + export const HighlightToken = styled.span\` + color: var(--color-accent-emphasis); + background-color: var(--color-canvas-default); + \${sx} + \` + const ClickableTokenSpan = styled(HighlightToken)\` + &:hover, &:focus { background-color: accent.muted;} + \` + `, + errors: [ + { + message: + 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + }, + { + message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + }, + ], + }, + { + name: 'variable in styled.component with conditional', + code: ` + import {sx, SxProp} from '@primer/react' + export const HighlightToken = styled.span\` + color: \\\${danger ? var(--color-danger-emphasis) : var(--color-accent-emphasis)}; + \${sx} + \` + const ClickableTokenSpan = styled(HighlightToken)\` + &:hover, &:focus { background-color: accent.muted;} + \` + `, + errors: [ + { + message: + 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))', + }, + { + message: + 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + }, + ], + }, + { + name: 'sx: conditional variable', + code: ` + import {Box} from '@primer/react' + + function someComponent({subtle}) { + return ( + + ) + } + `, + output: ` + import {Box} from '@primer/react' + + function someComponent({subtle}) { + return ( + + ) + } + `, + errors: [ + { + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + }, + { + message: + 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + }, + { + message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + ], + }, + { + name: 'style: conditional variable', + code: ` + import {Box} from '@primer/react' + + function someComponent({subtle}) { + return ( + + ) + } + `, + output: ` + import {Box} from '@primer/react' + + function someComponent({subtle}) { + return ( + + ) + } + `, + errors: [ + { + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + }, + { + message: + 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + }, + { + message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + }, + ], + }, + { + name: 'typescript object with nested cssObject', + code: ` + const Styles = { + table: { + width: '100%', + lineHeight: '100%', + }, + thead: { + background: 'var(--color-canvas-subtle)', + borderBottom: '1px solid', + borderColor: 'var(--color-border-default)', + }, + } + `, + output: ` + const Styles = { + table: { + width: '100%', + lineHeight: '100%', + }, + thead: { + background: 'var(--bgColor-muted, var(--color-canvas-subtle))', + borderBottom: '1px solid', + borderColor: 'var(--borderColor-default, var(--color-border-default))', + }, + } + `, + errors: [ + { + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + }, + { + message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + }, + ], + }, + { + name: 'inline sx', + code: `Test`, + output: `Test`, + errors: [ + { + message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))', + }, + ], + }, + { + name: 'inline sx with nesting', + code: ` + Test + `, + output: ` + Test + `, + errors: [ + { + message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))', + }, + { + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + }, + ], + }, + { + name: 'inside return statement', + code: ` + const fn = () => { + const th = { + padding: '8px 12px', + } + + return { + button: { + border: 0, + padding: 0, + background: 'transparent', + color: isSelected ? 'var(--color-fg-default)' : 'var(--color-fg-muted)', + fontSize: '12px', + fontWeight: '600', + display: 'flex', + gap: '8px', + flexDirection: isRightAligned ? 'row-reverse' : 'row', + justifyContent: 'flex-start', + }, + th, + } + } + `, + output: ` + const fn = () => { + const th = { + padding: '8px 12px', + } + + return { + button: { + border: 0, + padding: 0, + background: 'transparent', + color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))', + fontSize: '12px', + fontWeight: '600', + display: 'flex', + gap: '8px', + flexDirection: isRightAligned ? 'row-reverse' : 'row', + justifyContent: 'flex-start', + }, + th, + } + } + `, + errors: [ + { + message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))', + }, + { + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + }, + ], + }, + { + name: 'fn with => return', + code: ` + const filterInputWrapperStyles = (fullyRounded = false) => ({ + display: 'flex', + pl: 1, + width: '100%', + ...(fullyRounded + ? { + borderRadius: '5px', + color: 'var(--color-accent-fg)', + } + : { + borderTopRightRadius: '5px', + borderBottomRightRadius: '5px', + color: 'var(--color-accent-fg)', + }), + overflow: 'hidden', + ':has(input:focus-visible)': { + boxShadow: 'inset 0 0 0 1px var(--color-accent-emphasis)', + }, + }) + `, + output: ` + const filterInputWrapperStyles = (fullyRounded = false) => ({ + display: 'flex', + pl: 1, + width: '100%', + ...(fullyRounded + ? { + borderRadius: '5px', + color: 'var(--fgColor-accent, var(--color-accent-fg))', + } + : { + borderTopRightRadius: '5px', + borderBottomRightRadius: '5px', + color: 'var(--fgColor-accent, var(--color-accent-fg))', + }), + overflow: 'hidden', + ':has(input:focus-visible)': { + boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + }, + }) + `, + errors: [ + { + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + }, + { + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + }, + { + message: + 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + }, ], }, { - code: ``, - output: ``, + name: 'function called with argument', + code: ` + export const autocompleteTheme = EditorView.baseTheme({ + '.cm-tooltip.cm-tooltip-autocomplete': { + border: 0, + backgroundColor: 'transparent', + }, + + '.cm-tooltip.cm-tooltip-autocomplete > ul': { + fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace", + fontSize: '12px', + backgroundColor: 'var(--color-canvas-default)', + border: '1px solid var(--color-border-default)', + borderRadius: 'var(--borderRadius-medium)', + boxShadow: 'var(--color-shadow-medium)', + minWidth: 'auto', + } + }) + `, + output: ` + export const autocompleteTheme = EditorView.baseTheme({ + '.cm-tooltip.cm-tooltip-autocomplete': { + border: 0, + backgroundColor: 'transparent', + }, + + '.cm-tooltip.cm-tooltip-autocomplete > ul': { + fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace", + fontSize: '12px', + backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))', + border: '1px solid var(--borderColor-default, var(--color-border-default))', + borderRadius: 'var(--borderRadius-medium)', + boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))', + minWidth: 'auto', + } + }) + `, errors: [ + { + message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + }, { message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', }, + { + message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))', + }, + ], + }, + { + name: 'switch case', + code: ` + const getBorderStyling = (modification) => { + const borderStyle = '3px solid' + + switch (modification) { + case 'ADDED': + return {borderLeft: borderStyle, borderColor: 'var(--color-success-fg)'} + case 'REMOVED': + return {borderLeft: borderStyle, borderColor: 'var(--color-danger-fg)'} + case 'EDITED': + return {borderLeft: borderStyle, borderColor: 'var(--color-severe-fg)'} + case 'accent': + return {borderLeft: borderStyle, borderColor: 'var(--color-accent-fg)'} + case 'done': + return {borderLeft: borderStyle, borderColor: 'var(--color-done-fg)'} + case 'closed': + return {borderLeft: borderStyle, borderColor: 'var(--color-closed-fg)'} + case 'sponsors': + return {borderLeft: borderStyle, borderColor: 'var(--color-sponsors-fg)'} + case 'UNCHANGED': + return {} + } + } + `, + output: ` + const getBorderStyling = (modification) => { + const borderStyle = '3px solid' + + switch (modification) { + case 'ADDED': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'} + case 'REMOVED': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'} + case 'EDITED': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'} + case 'accent': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'} + case 'done': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'} + case 'closed': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'} + case 'sponsors': + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'} + case 'UNCHANGED': + return {} + } + } + `, + errors: [ + { + message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))', + }, + { + message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))', + }, + { + message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))', + }, + { + message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))', + }, + { + message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))', + }, + { + message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))', + }, + { + message: + 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))', + }, ], }, ], diff --git a/src/rules/new-color-css-vars.js b/src/rules/new-color-css-vars.js index e20c57b1..9efcd429 100644 --- a/src/rules/new-color-css-vars.js +++ b/src/rules/new-color-css-vars.js @@ -1,5 +1,82 @@ const cssVars = require('../utils/css-variable-map.json') +const reportError = (propertyName, valueNode, context, suggestFix = true) => { + // performance optimisation: exit early + if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return + // get property value + const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked + // return if value is not a string + if (typeof value !== 'string') return + // return if value does not include variable + if (!value.includes('var(')) return + + const varRegex = /var\([^)]+\)/g + + const match = value.match(varRegex) + if (!match) return + const vars = match.flatMap(match => + match + .slice(4, -1) + .trim() + .split(/\s*,\s*/g), + ) + + for (const cssVar of vars) { + // get the array of objects for the variable name (e.g. --color-fg-primary) + const cssVarObjects = cssVars[cssVar] + // get the object that contains the property name or the first one (default) + const varObjectForProp = propertyName + ? cssVarObjects?.find(prop => prop.props.includes(propertyName)) + : cssVarObjects?.[0] + // return if no replacement exists + if (!varObjectForProp?.replacement) return + // report the error + context.report({ + node: valueNode, + message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`, + fix: suggestFix + ? fixer => { + const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`) + return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString) + } + : undefined, + }) + } +} + +const reportOnObject = (node, context) => { + const propertyName = node.key.name + if (node.value?.type === 'Literal') { + reportError(propertyName, node.value, context) + } else if (node.value?.type === 'ConditionalExpression') { + reportError(propertyName, node.value.consequent, context) + reportError(propertyName, node.value.alternate, context) + } +} + +const reportOnProperty = (node, context) => { + const propertyName = node.name.name + if (node.value?.type === 'Literal') { + reportError(propertyName, node.value, context) + } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') { + reportError(propertyName, node.value.expression.consequent, context) + reportError(propertyName, node.value.expression.alternate, context) + } +} + +const reportOnValue = (node, context) => { + if (node?.type === 'Literal') { + reportError(undefined, node, context) + } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') { + reportError(undefined, node.value.expression.consequent, context) + reportError(undefined, node.value.expression.alternate, context) + } +} + +const reportOnTemplateElement = (node, context) => { + reportError(undefined, node, context, false) +} + module.exports = { meta: { type: 'suggestion', @@ -25,82 +102,19 @@ module.exports = { }, /** @param {import('eslint').Rule.RuleContext} context */ create(context) { - const styledSystemProps = [ - 'bg', - 'backgroundColor', - 'color', - 'borderColor', - 'borderTopColor', - 'borderRightColor', - 'borderBottomColor', - 'borderLeftColor', - 'border', - 'boxShadow', - 'caretColor', - ] - return { - /** @param {import('eslint').Rule.Node} node */ - JSXAttribute(node) { - if (node.name.name === 'sx') { - if (node.value.expression.type === 'ObjectExpression') { - // example: sx={{ color: 'fg.default' }} or sx={{ ':hover': {color: 'fg.default'} }} - const rawText = context.sourceCode.getText(node.value) - checkForVariables(node.value, rawText) - } else if (node.value.expression.type === 'Identifier') { - // example: sx={baseStyles} - const variableScope = context.sourceCode.getScope(node.value.expression) - const variable = variableScope.set.get(node.value.expression.name) - - // if variable is not defined in scope, give up (could be imported from different file) - if (!variable) return - - const variableDeclarator = variable.identifiers[0].parent - const rawText = context.sourceCode.getText(variableDeclarator) - checkForVariables(variableDeclarator, rawText) - } else { - // worth a try! - const rawText = context.sourceCode.getText(node.value) - checkForVariables(node.value, rawText) - } - } else if ( - styledSystemProps.includes(node.name.name) && - node.value && - node.value.type === 'Literal' && - typeof node.value.value === 'string' - ) { - checkForVariables(node.value, node.value.value) - } - }, - } - - function checkForVariables(node, rawText) { - // performance optimisation: exit early - if (!rawText.includes('var')) return - - for (const cssVar of Object.keys(cssVars)) { - if (Array.isArray(cssVars[cssVar])) { - for (const cssVarObject of cssVars[cssVar]) { - const regex = new RegExp(`var\\(${cssVar}\\)`, 'g') - if ( - cssVarObject.props.some(prop => rawText.includes(prop)) && - regex.test(rawText) && - !rawText.includes(cssVarObject.replacement) - ) { - const fixedString = rawText.replace(regex, `var(${cssVarObject.replacement}, var(${cssVar}))`) - if (!rawText.includes(fixedString)) { - context.report({ - node, - message: `Replace var(${cssVar}) with var(${cssVarObject.replacement}, var(${cssVar}))`, - fix(fixer) { - return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString) - }, - }) - } - } - } - } - } + // sx OR style property on elements + ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node => + reportOnObject(node, context), + // variable that is an object + [':matches(VariableDeclarator, ReturnStatement, ConditionalExpression, ArrowFunctionExpression, CallExpression) > ObjectExpression Property, :matches(VariableDeclarator, ReturnStatement, ConditionalExpression, ArrowFunctionExpression, CallExpression) > ObjectExpression Property > ObjectExpression Property']: + node => reportOnObject(node, context), + // property on element like stroke or fill + ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context), + // variable that is a value + [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context), + // variable that is a value + ['VariableDeclarator TemplateElement']: node => reportOnTemplateElement(node, context), } }, } diff --git a/src/utils/css-variable-map.json b/src/utils/css-variable-map.json index ddaf551c..1e0c6a25 100644 --- a/src/utils/css-variable-map.json +++ b/src/utils/css-variable-map.json @@ -1,79 +1,79 @@ { "--color-page-header-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--page-header-bgColor" } ], "--color-diff-blob-addition-num-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--diffBlob-addition-fgColor-num" } ], "--color-diff-blob-addition-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--diffBlob-addition-fgColor-text" } ], "--color-diff-blob-addition-num-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-addition-bgColor-num" } ], "--color-diff-blob-addition-line-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-addition-bgColor-line" } ], "--color-diff-blob-addition-word-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-addition-bgColor-word" } ], "--color-diff-blob-deletion-num-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--diffBlob-deletion-fgColor-num" } ], "--color-diff-blob-deletion-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--diffBlob-deletion-fgColor-text" } ], "--color-diff-blob-deletion-num-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-deletion-bgColor-num" } ], "--color-diff-blob-deletion-line-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-deletion-bgColor-line" } ], "--color-diff-blob-deletion-word-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-deletion-bgColor-word" } ], "--color-diff-blob-hunk-num-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffBlob-hunk-bgColor-num" } ], "--color-diff-blob-expander-icon": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--diffBlob-expander-iconColor" } ], @@ -81,139 +81,139 @@ "--color-diffstat-addition-border": [], "--color-diffstat-addition-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--diffStat-addition-bgColor" } ], "--color-search-keyword-hl": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--highlight-neutral-bgColor" } ], "--color-codemirror-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-fgColor" } ], "--color-codemirror-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--codeMirror-bgColor" } ], "--color-codemirror-gutters-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--codeMirror-gutters-bgColor" } ], "--color-codemirror-guttermarker-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-gutterMarker-fgColor-default" } ], "--color-codemirror-guttermarker-subtle-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-gutterMarker-fgColor-muted" } ], "--color-codemirror-linenumber-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-lineNumber-fgColor" } ], "--color-codemirror-cursor": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-cursor-fgColor" } ], "--color-codemirror-selection-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--codeMirror-selection-bgColor" } ], "--color-codemirror-activeline-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--codeMirror-activeline-bgColor" } ], "--color-codemirror-matchingbracket-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-matchingBracket-fgColor" } ], "--color-codemirror-lines-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--codeMirror-lines-bgColor" } ], "--color-codemirror-syntax-comment": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-comment" } ], "--color-codemirror-syntax-constant": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-constant" } ], "--color-codemirror-syntax-entity": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-entity" } ], "--color-codemirror-syntax-keyword": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-keyword" } ], "--color-codemirror-syntax-storage": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-storage" } ], "--color-codemirror-syntax-string": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-string" } ], "--color-codemirror-syntax-support": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-support" } ], "--color-codemirror-syntax-variable": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--codeMirror-syntax-fgColor-variable" } ], "--color-header-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--header-fgColor-default" } ], "--color-header-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--header-bgColor" } ], @@ -226,9 +226,14 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg", + "background", "color" ], "replacement": "--header-borderColor-divider" @@ -236,7 +241,7 @@ ], "--color-header-logo": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--header-fgColor-logo" } ], @@ -255,6 +260,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -264,7 +273,7 @@ ], "--color-avatar-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--avatar-bgColor" } ], @@ -277,9 +286,14 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg", + "background", "boxShadow" ], "replacement": "--avatar-borderColor" @@ -287,13 +301,13 @@ ], "--color-avatar-stack-fade": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--avatarStack-fade-bgColor-default" } ], "--color-avatar-stack-fade-more": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--avatarStack-fade-bgColor-muted" } ], @@ -306,6 +320,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -322,6 +340,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -338,6 +360,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -347,43 +373,43 @@ ], "--color-select-menu-tap-highlight": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-bgColor-active" } ], "--color-select-menu-tap-focus-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--selectMenu-bgColor-active" } ], "--color-sidenav-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--sideNav-bgColor-selected" } ], "--color-menu-bg-active": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--menu-bgColor-active" } ], "--color-input-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-bgColor-disabled" } ], "--color-timeline-badge-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--timelineBadge-bgColor" } ], "--color-btn-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-default-bgColor-rest" } ], @@ -396,6 +422,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -405,7 +435,7 @@ ], "--color-btn-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-default-bgColor-hover" } ], @@ -418,6 +448,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -427,7 +461,7 @@ ], "--color-btn-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-default-bgColor-active" } ], @@ -440,6 +474,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -449,25 +487,25 @@ ], "--color-btn-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-default-bgColor-selected" } ], "--color-btn-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-default-bgColor-rest" } ], "--color-btn-primary-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-primary-fgColor-rest" } ], "--color-btn-primary-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-primary-bgColor-rest" } ], @@ -480,6 +518,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -489,7 +531,7 @@ ], "--color-btn-primary-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-primary-bgColor-hover" } ], @@ -502,6 +544,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -511,19 +557,19 @@ ], "--color-btn-primary-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-primary-bgColor-active" } ], "--color-btn-primary-disabled-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-primary-fgColor-disabled" } ], "--color-btn-primary-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-primary-bgColor-disabled" } ], @@ -536,6 +582,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -545,31 +595,31 @@ ], "--color-btn-primary-icon": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-primary-iconColor-rest" } ], "--color-btn-primary-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-primary-bgColor-rest" } ], "--color-btn-outline-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-outline-fgColor-rest" } ], "--color-btn-outline-hover-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-outline-fgColor-hover" } ], "--color-btn-outline-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-outline-bgColor-hover" } ], @@ -582,6 +632,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -591,19 +645,19 @@ ], "--color-btn-outline-hover-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-outline-bgColor-hover" } ], "--color-btn-outline-selected-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-outline-fgColor-active" } ], "--color-btn-outline-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-outline-bgColor-active" } ], @@ -616,6 +670,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -625,43 +683,43 @@ ], "--color-btn-outline-disabled-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-outline-fgColor-disabled" } ], "--color-btn-outline-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-outline-bgColor-disabled" } ], "--color-btn-outline-disabled-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-outline-bgColor-disabled" } ], "--color-btn-outline-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-outline-bgColor-rest" } ], "--color-btn-danger-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-fgColor-rest" } ], "--color-btn-danger-hover-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-fgColor-hover" } ], "--color-btn-danger-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-danger-bgColor-hover" } ], @@ -674,6 +732,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -683,19 +745,19 @@ ], "--color-btn-danger-hover-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-danger-bgColor-hover" } ], "--color-btn-danger-selected-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-fgColor-active" } ], "--color-btn-danger-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-danger-bgColor-active" } ], @@ -708,6 +770,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -717,43 +783,43 @@ ], "--color-btn-danger-disabled-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-fgColor-disabled" } ], "--color-btn-danger-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--button-danger-bgColor-disabled" } ], "--color-btn-danger-disabled-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-danger-bgColor-disabled" } ], "--color-btn-danger-counter-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--buttonCounter-danger-bgColor-rest" } ], "--color-btn-danger-icon": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-iconColor-rest" } ], "--color-btn-danger-hover-icon": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--button-danger-iconColor-hover" } ], "--color-underlinenav-icon": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--underlineNav-iconColor-rest" } ], @@ -766,6 +832,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -782,6 +852,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -791,7 +865,7 @@ ], "--color-action-list-item-default-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-transparent-bgColor-hover" } ], @@ -804,6 +878,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -813,7 +891,7 @@ ], "--color-action-list-item-default-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-transparent-bgColor-active" } ], @@ -826,6 +904,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -835,61 +917,61 @@ ], "--color-action-list-item-default-selected-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-transparent-bgColor-selected" } ], "--color-action-list-item-danger-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-danger-bgColor-hover" } ], "--color-action-list-item-danger-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-danger-bgColor-active" } ], "--color-action-list-item-danger-hover-text": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--control-danger-fgColor-hover" } ], "--color-switch-track-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-rest" } ], "--color-switch-track-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-hover" } ], "--color-switch-track-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-active" } ], "--color-switch-track-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-disabled" } ], "--color-switch-track-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--controlTrack-fgColor-rest" } ], "--color-switch-track-disabled-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--controlTrack-fgColor-disabled" } ], @@ -902,6 +984,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -911,31 +997,31 @@ ], "--color-switch-track-checked-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-checked-bgColor-rest" } ], "--color-switch-track-checked-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-checked-bgColor-hover" } ], "--color-switch-track-checked-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-checked-bgColor-active" } ], "--color-switch-track-checked-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--control-checked-fgColor-rest" } ], "--color-switch-track-checked-disabled-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--control-checked-fgColor-disabled" } ], @@ -948,6 +1034,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-transparent" @@ -955,13 +1045,13 @@ ], "--color-switch-knob-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlKnob-bgColor-rest" } ], "--color-switch-knob-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlKnob-bgColor-disabled" } ], @@ -974,6 +1064,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -983,13 +1077,13 @@ ], "--color-switch-knob-checked-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlKnob-bgColor-checked" } ], "--color-switch-knob-checked-disabled-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlKnob-bgColor-disabled" } ], @@ -1002,6 +1096,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -1011,25 +1109,25 @@ ], "--color-segmented-control-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-rest" } ], "--color-segmented-control-button-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlKnob-bgColor-rest" } ], "--color-segmented-control-button-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-hover" } ], "--color-segmented-control-button-active-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--controlTrack-bgColor-active" } ], @@ -1042,6 +1140,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -1051,13 +1153,13 @@ ], "--color-tree-view-item-chevron-hover-bg": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--control-transparent-bgColor-hover" } ], "--color-tree-view-item-directory-fill": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--treeViewItem-leadingVisual-bgColor-rest" } ], @@ -1074,6 +1176,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-transparent" @@ -1081,21 +1187,21 @@ ], "--color-fg-default": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-default" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--fgColor-default" } ], "--color-fg-muted": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-neutral-emphasis" }, { @@ -1106,6 +1212,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-neutral-emphasis" @@ -1113,7 +1223,7 @@ ], "--color-fg-subtle": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-muted" }, { @@ -1124,6 +1234,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-neutral-emphasis" @@ -1141,6 +1255,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--fgColor-onEmphasis" @@ -1151,13 +1269,17 @@ "props": [ "backgroundColor", "bg", + "background", "border", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "fill", "stroke" @@ -1167,13 +1289,13 @@ ], "--color-canvas-overlay": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--overlay-bgColor" } ], "--color-canvas-inset": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-inset" } ], @@ -1182,6 +1304,7 @@ "props": [ "backgroundColor", "bg", + "background", "fill", "border", "borderColor", @@ -1189,6 +1312,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--bgColor-muted" @@ -1203,8 +1330,13 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "backgroundColor", "bg", + "background", "boxShadow", "stroke", "outline", @@ -1222,9 +1354,13 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "backgroundColor", "bg", + "background", "outline", "boxShadow", "stroke" @@ -1241,9 +1377,14 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg", + "background", "outline" ], "replacement": "--borderColor-muted" @@ -1254,12 +1395,17 @@ "props": [ "backgroundColor", "bg", + "background", "border", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "color", "stroke" @@ -1269,7 +1415,7 @@ ], "--color-neutral-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-neutral-emphasis" }, { @@ -1280,13 +1426,16 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-neutral-emphasis" }, { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-neutral" } ], @@ -1299,19 +1448,22 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-neutral-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-neutral-muted" } ], "--color-neutral-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-neutral-muted" }, { @@ -1322,7 +1474,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-neutral-muted" @@ -1341,13 +1496,16 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-accent-emphasis" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-accent-emphasis" }, { @@ -1357,7 +1515,7 @@ ], "--color-accent-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-accent-emphasis" }, { @@ -1368,7 +1526,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-accent-emphasis" @@ -1391,19 +1552,22 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-accent-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-accent-muted" } ], "--color-accent-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-accent-muted" }, { @@ -1414,7 +1578,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - "boxShadow", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-accent-muted" @@ -1426,13 +1593,29 @@ "replacement": "--fgColor-success" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-success-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-success-emphasis" } ], "--color-success-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-success-emphasis" }, { @@ -1443,6 +1626,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-success-emphasis" @@ -1461,34 +1648,54 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-success-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-success-muted" } ], "--color-success-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-success-muted" } ], "--color-attention-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-attention" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "boxShadow"], "replacement": "--bgColor-attention-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-attention-emphasis" } ], "--color-attention-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-attention-emphasis" }, { @@ -1499,12 +1706,16 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-attention-emphasis" }, { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-attention" } ], @@ -1517,7 +1728,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-attention-muted" @@ -1525,23 +1739,39 @@ ], "--color-attention-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-attention-muted" } ], "--color-severe-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-severe" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-severe-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-severe-emphasis" } ], "--color-severe-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-severe-emphasis" }, { @@ -1552,7 +1782,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-severe-emphasis" @@ -1571,7 +1804,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-severe-muted" @@ -1579,23 +1815,39 @@ ], "--color-severe-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-severe-muted" } ], "--color-danger-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-danger" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-danger-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-danger-emphasis" } ], "--color-danger-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-danger-emphasis" }, { @@ -1606,14 +1858,17 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "outline" ], "replacement": "--borderColor-danger-emphasis" }, { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-danger" } ], @@ -1626,35 +1881,54 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-danger-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-danger-muted" } ], "--color-danger-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-danger-muted" } ], "--color-open-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-open" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-open-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-open-emphasis" } ], "--color-open-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-open-emphasis" }, { @@ -1665,7 +1939,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-open-emphasis" @@ -1684,7 +1961,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-open-muted" @@ -1692,23 +1972,39 @@ ], "--color-open-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-open-muted" } ], "--color-closed-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-closed" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-closed-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-closed-emphasis" } ], "--color-closed-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-closed-emphasis" }, { @@ -1719,7 +2015,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-closed-emphasis" @@ -1738,7 +2037,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-closed-muted" @@ -1746,23 +2048,39 @@ ], "--color-closed-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-closed-muted" } ], "--color-done-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-done" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-done-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-done-emphasis" } ], "--color-done-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-done-emphasis" }, { @@ -1773,7 +2091,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-done-emphasis" @@ -1792,35 +2113,54 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-done-muted" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-done-muted" } ], "--color-done-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-done-muted" } ], "--color-sponsors-fg": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-sponsors" }, { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-sponsors-emphasis" + }, + { + "props": [ + "border", + "borderColor", + "borderTopColor", + "borderRightColor", + "borderBottomColor", + "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", + "boxShadow" + ], + "replacement": "--borderColor-sponsors-emphasis" } ], "--color-sponsors-emphasis": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-sponsors-emphasis" }, { @@ -1831,7 +2171,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-sponsors-emphasis" @@ -1850,7 +2193,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", - + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow" ], "replacement": "--borderColor-sponsors-muted" @@ -1858,19 +2204,19 @@ ], "--color-sponsors-subtle": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--bgColor-sponsors-muted" } ], "--color-primer-fg-disabled": [ { - "props": ["color", "fill", "caretColor"], + "props": ["color", "fill", "caretColor", "stroke"], "replacement": "--fgColor-disabled" } ], "--color-primer-canvas-backdrop": [ { - "props": ["backgroundColor", "bg"], + "props": ["backgroundColor", "bg", "background"], "replacement": "--overlay-backdrop-bgColor" } ], @@ -1883,6 +2229,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg" @@ -1899,6 +2249,10 @@ "borderRightColor", "borderBottomColor", "borderLeftColor", + "borderLeft", + "borderRight", + "borderBottom", + "borderTop", "boxShadow", "backgroundColor", "bg"